Wejdźmy na stronę http://appinventor.mit.edu i wybierzmy Create, by uruchomić App Inventor. Następnie przejdźmy do zakładki My Projects (1), gdzie znajdziemy wszystkie nasze projekty - wystarczy tylko zalogować się na konto Google. W celu rozpoczęcia pracy nad nowym projektem kliknijmy na Start new project (2) i wpiszmy w oknie jego nazwę, np. Listazakupów.
[[Plik:Lz1.PNG]]
===== Projektowanie interfejsu =====
Na początek przejdźmy do okna '''Properties''' i dla komponentu '''Screen1''', w polu '''Screen Orientation''' wybierzmy '''Portrait'''. Dzięki temu nasz ekran zawsze będzie wyświetlany pionowo, zaś aplikacja będzie pracowała tylko w takiej orientacji ekranu. Dodatkowo w polu '''Title''' wpiszmy tytuł naszego bieżącego komponentu. Nazwijmy go np.: Lista.
Chcemy, by u góry ekranu obok siebie znalazło się miejsce na wpisanie produktu i przycisk zatwierdzający dodanie go do listy zakupów. Na ułożenie dwóch komponentów obok siebie pozwoli nam '''HorizontalArrangement''', który przeciągniemy na ekran z zakładki '''Layout'''. Przejdźmy do jego właściwości i zmieńmy szerokość ('''Width''') na dopasowaną do komponentu nadrzędnego (Fill parent).
Teraz wewnątrz tego komponentu ułóżmy obok siebie TextBox i Button i zmieńmy właściwości każdego z nich:
* TextBox: '''width''': fill parent, '''hint''': co chcesz kupić?
* Button: '''text''': Dodaj do listy
Pozostał nam jeszcze jeden komponent: ListView, który upuszczamy poniżej już ułożonych.
[[Plik:Freepik.jpeg]]