Zrób aplikację na smartfon
W przeglądarce otwórz stronę http://appinventor.mit.edu, po czym klikając znajdujący się tu przycisk Invent, uruchom App Inventora. Jeśli robisz to po raz pierwszy, będziesz poproszony o połączenie aplikacji z twoim kontem Google. Wystarczy, że naciśniesz Zezwalaj, a obie usługi zostaną ze sobą powiązane.
W tym momencie w oknie przeglądarki pojawi się pusty panel zarządzania projektami wraz z komunikatem powitalnym podpowiadającym, gdzie szukać pomocy i jak rozpocząć budowanie własnej aplikacji. Aby utworzyć nowy projekt, skorzystaj z przycisku New. Wpisz nazwę projektu, np. Programik, w nowo wyświetlonym oknie, a następnie zatwierdź ją, klikając przycisk OK. Pamiętaj, że nazwa projektu nie może zawierać spacji ani polskich znaków.
Po zapisaniu projektu program automatycznie go otworzy, prezentując w oknie przeglądarki swój główny panel narzędziowy. Ekran został w nim podzielony na kilka czytelnie opisanych obszarów. Co istotne, ich ułożenie nie jest przypadkowe. Zalecamy dokładne zapoznanie się z interfejsem App Inventora przed przystąpieniem do dalszych czynności.
Tworzenie aplikacji zaczynasz od ustawienia jej tytułu. W tym celu odszukaj kontrolkę Label w panelu komponentów i metodą przeciągnij i upuść umieść ją w obszarze roboczym Screen1. Pole tekstowe Text for Label1, które pojawi się w tym samym momencie na ekranie podglądu, wymaga jeszcze doprecyzowania. Korzystając z opcji umieszczonych na liście właściwości Properties, w polu Text nadaj nazwę aplikacji, np. Biblioteka multimediów, ustal rozmiar użytej czcionki, wpisując w pole FontSize odpowiednią wartość, po czym włącz jej pogrubienie FontBold i wybierz kolor z dostępnej palety barw – TextColor. Możesz jeszcze wyśrodkować tekst TextAlignment - Center, ustawiając przy okazji ramkę tak, aby wypełniała całą szerokość ekranu Width - Fill parent. Pamiętaj, by każdą zmianę ustawień obserwować na bieżąco w oknie podglądu.
Przyciski są kolejnym elementem, który musi się znaleźć w interfejsie aplikacji. Przed ich dodaniem do projektu warto jednak wcześniej zadbać o ich właściwe ułożenie na ekranie. Formatowanie układu strony zapewniają kontrolki, które się znajdują w zakładce Screen Arrangement. Wybierz z niej opcję TableArrangement i przeciągnij ją w obszar roboczy, a wstawiane przyciski będziesz mógł rozmieścić jak w tabeli. Do określenia niezbędnej liczby kolumn oraz rzędów wystarczy wpisanie odpowiednich wartości w pola Column i Rows.
Strefa przycisków jest przygotowana. Czas je wstawić w odpowiednie miejsca. Zrobisz to, przeciągając komponent Button z palety Basic do wnętrza utworzonej tabeli. Prezentowana aplikacja ma mieć 4 przyciski, dlatego cały proces powtarzamy 4-krotnie, pilnując, aby każdy nowo dodawany element był umieszczany w przeznaczonym mu obszarze. Gdy wszystkie przyciski znajdą się już w projekcie. Musisz jeszcze dopasować ich wygląd do potrzeb. W tym celu ponownie zrób użytek z obszaru właściwości Properties, w którym po kliknięciu dowolnego przycisku na ekranie podglądu lub drzewie komponentów wyświetli się przypisana mu lista opcji. Skorzystaj z niej do nazwania każdego przycisku – pole Text, i określenia wielkości użytej czcionki – FontSize. Nie zapomnij również o dokładnym zdefiniowaniu rozmiaru przycisków w polach określających ich szerokość – Width, i wysokość – Height.
Aby nadać tworzonemu interfejsowi nieco atrakcyjniejszy wygląd, zmień jego tło. Najlepszy efekt osiągniesz za pomocą pliku graficznego. Musisz go jednak wcześniej załadować na serwer App Inwentora, skąd będziesz mógł go później związać z projektem. Zacznij od kliknięcia przycisku Upload new z obszaru Media, wskazania wybranego zdjęcia na dysku twardym komputera i zatwierdzenia swojego wyboru. Gdy po kilku sekundach plik pojawi się na liście mediów, przejdź do spisu użytych komponentów – Components, i naciskając Screen1, wywołaj właściwości ekranu. Wystarczy już tylko kliknięcie opcji BackgroundImage i wybranie z rozwiniętego menu załadowanego przed momentem zdjęcia, aby w oknie podglądu zaszła widoczna zmiana:
Ostatnim elementem tworzonej aplikacji są zdjęcia i dźwięki, do których będą prowadzić nasze cztery przyciski. Zanim jednak będziesz mógł dodać te pliki do projektu, muszą się one znaleźć na serwerze App Inventora. Podobnie jak w przypadku definiowania tła załaduj wszystkie potrzebne ci obrazy i pliki dźwiękowe, wykorzystując do tego sekcję Media i znajdujący się w niej przycisk Upload new. Następnie z podstawowej palety komponentów wybierz Image i umieść dwa takie obiekty w obszarze roboczym, poniżej już skonfigurowanej tabeli. To samo zrób z kontrolką Sound ulokowaną w grupie Media. Zauważ jednak, że te komponenty pojawiają się poniżej ekranu podglądu i domyślnie oznaczone są jako elementy niewidoczne.
Pozostało już tylko przypisanie wybranych plików do poszczególnych kontrolek. Jeśli chodzi o zdjęcia, proces ten sprowadza się do wywołania ustawień tego komponentu, kliknięcia umieszczonego w nim pola Picture i wybrania z menu odpowiedniej pozycji. Po jej zatwierdzeniu obrazek wyświetla się na ekranie podglądu. W tworzonej aplikacji ma się on jednak pojawiać dopiero po naciśnięciu przycisku, dlatego musisz jeszcze go ukryć, ustawiając opcję Visible na Hidden. W podobny sposób zwiążesz komponenty dźwięków z ich źródłami – Source, choć tu nie musisz się martwić o ich widoczność na podglądzie.
