✅ Twórz aplikacje na Androida za pomocą App Inventor 2

Spisie treści

1. Instalowanie aplikacji Inventor 2
2. Uruchamianie aplikacji Inventor 2
3. Pierwsza aplikacja w App Inventor 2
4. Druga aplikacja w App Inventor 2

App Inventor 2 to platforma, która pozwala nam pozwala na tworzenie aplikacji dla systemu Android, Jest to dzieło Google Labs, tutaj możemy wizualizować projekty, w których pracujemy z różnymi typami podstawowych narzędzi, jedną z wielkich zalet, jakie przynosi App Inventor 2 jest to, że użytkownik może połączyć szereg bloków w celu stworzenia aplikacji . Ten system jest całkowicie za darmo i łatwo pobrać z własnej strony internetowej. Aplikacje, które możemy tworzyć w App Inventorze, są nieco ograniczone przez swoją prostotę, choć tutaj również możemy poświęcić dużo czasu na tworzenie niekończących się aplikacji na podstawowe urządzenia z Androidem.

Dzięki Google App Inventor zademonstrowano dużą prostotę obsługi, która ułatwiła pojawienie się duża liczba nowych aplikacji; W dzisiejszych czasach jest wielu użytkowników, którzy dzięki temu tworzą aplikacje w centrum dystrybucji aplikacji na Androida.

Na co pozwala nam App Inventor 2?Twórz aplikacje na urządzenia z systemem Android za pomocą przeglądarki internetowej i podłączonego telefonu lub emulatora. Serwery App Inventor przechowują Twoją pracę i śledzą Twoje projekty.

Jest to bardzo łatwe w użyciu narzędzie do programowania wizualnego, więc wielu użytkowników tego narzędzia nie jest wyłącznie programistami.

Z czym budujemy nasze aplikacje w App Inventor 2?App Inventor Designer to aplikacja służąca do wyboru komponentów dla App Inventor, oferuje nam paletę zawierającą dużą liczbę narzędzi, z którymi można pracować z wielką prostotą.

App Inventor Blocks Editor pozwala nam łączyć różne typy bloków, za pomocą których możemy definiować funkcje tego, co projektujemy w naszej aplikacji. Jedną z zalet jest prosty i wizualny sposób pokazania pracy, którą wykonujemy w formie puzzli.

Czy tworzenie aplikacji za pomocą App Inventor 2 jest łatwe?Różne aplikacje, które z czasem pojawiają się na urządzeniach z Androidem, pokazały nam, że istnieje mnóstwo aplikacji, w których możemy pracować, niezależnie od tego, czy są one proste, czy skomplikowane. Aplikacja Inventor 2 pozwala nam pracować z prostotą, co oznacza, że nie musisz być programistą, aby pracować w bardzo prostym środowisku praca z paletą narzędzi lub zestawem klocków, z którymi sobie poradzimy praktycznie jak gra logiczna. Co więcej, po zakończeniu projektu możesz spakować swoją aplikację i stworzyć osobną aplikację do zainstalowania.

Kolejną zaletą, jaką oferuje, jest to, że niekoniecznie musisz mieć telefon z systemem operacyjnym Android, ponieważ ze strony App Inventor możesz pobrać oprogramowanie o nazwie aiStarter, które pozwoli Ci emulować go z komputera.

Jak uzyskać dostęp do App Inventor 2?Aby uzyskać dostęp, pierwszą rzeczą, którą musisz zrobić, to zarejestrować się w App Inventor, używając swojego konta Gmail. Ważne jest, aby wiedzieć, że ten proces jest całkowicie bezpłatny.

Wymagania systemowe, urządzenia lub przeglądarki

System operacyjny

Macintosh: Mac OS X 10.5 lub nowszy.
Windows: Windows XP, Windows Vista, Windows 7
GNU / Linux: Ubuntu 8 lub nowszy, Debian 5 lub nowszy

Przeglądarki

Mozilla Firefox w wersji 3.6 lub nowszej
Apple Safari 5.0 lub nowszy
Google Chrome 4.0 lub nowszy
Microsoft Internet Explorer go nie obsługuje

Telefony i tablety

System operacyjny Android 2.3 („Gingerbread”) lub nowszy

1. Instalowanie aplikacji Inventor 2

Przede wszystkim musimy to wiedzieć Aplikacja Inventor 2 umożliwia projektowanie i edycję w blokach jak już wspomnieliśmy, a wszystko to działa w Twojej przeglądarce. Ale aby przetestować to, nad czym pracujemy (Test it live), mamy trzy opcje podczas budowania naszej aplikacji:

opcja 1Najbardziej zalecane na stronie appinventor jest to, że jeśli masz urządzenie z systemem Android i masz bezprzewodowe połączenie internetowe (WiFi), możemy pracować tylko po zainstalowaniu aplikacji App Inventor na naszym urządzeniu z systemem Android.

Opcja 2Druga opcja to: zainstaluj oprogramowanie na naszym komputerze! aby móc korzystać z emulatora Androida i testować nasze aplikacje podczas ich tworzenia.

Opcja 3W tej opcji jest to najbardziej skomplikowane i uciążliwe; Jeśli nasz system operacyjny to Windows i mamy urządzenie z systemem Android, ale nie mamy sieci bezprzewodowej (WiFi), możemy zainstaluj oprogramowanie na naszym komputerze i podłącz nasze urządzenie z Androidem przez USB. Na stronie możemy zobaczyć, jak ta opcja jest wykorzystywana w ostateczności ze względu na jej oczywistą złożoność.

Gdy poznamy różne opcje, które mamy podczas instalacji App Inventor 2, wyjaśnię krok po kroku, jak wykonać każdą z tych opcji:

opcja 1: Podłączanie aplikacji Inventor 2 do urządzenia z systemem Android za pośrednictwem połączenia bezprzewodowego (WiFi)

Krok 1
Pobierz i zainstaluj aplikację MIT AI2 Companion na swoim urządzeniu z Androidem. W tej opcji wystarczy wyszukać na urządzeniu z Androidem aplikację „MIT AI2 Companion” z PlayStore, pobrać ją i zainstalować lub można ją również pobrać bezpośrednio z pliku APK. Najbardziej wskazaną rzeczą jest pobranie go z PlayStore, ponieważ jeśli pobierzemy plik APK, będziemy musieli włączyć w konfiguracji naszego urządzenia z Androidem opcję umożliwiającą instalację aplikacji z nieznanych źródeł. Tę opcję można znaleźć w wersjach systemu Android przed 4.0, w tym celu zamierzamy Ustawienia> Aplikacje i zaznacz pole " Nieznane źródła". W przypadku urządzeń z systemem Android 4.0 lub nowszym należy przejść do Ustawienia> Bezpieczeństwo lub Ustawienia> Bezpieczeństwo i blokada ekranui wybierz „Nieznane źródła".

Tutaj zostawiam odpowiednie kody QR, aby pobrać je z Playstore lub bezpośrednio jako plik APK, jeśli potrzebujesz skanera QR, możemy go poszukać w Playstore.

Sklep Play

Plik APK

NotatkaWeź pod uwagę, że jeśli pobierzemy go z PlayStore, zaktualizuje się automatycznie, a jeśli skorzystamy z opcji bezpośredniego pobrania, będziemy musieli zaktualizować go ręcznie.

Krok 2
Podłącz komputer do tej samej sieci Wi-Fi, co urządzenie z systemem Android. App Inventor pokaże tworzoną automatycznie aplikację tylko wtedy, gdy na komputerze działa aplikacja App Inventor, a na urządzeniu z systemem Android działa aplikacja Companion, a te 2 urządzenia są połączone z tą samą siecią Wi-Fi.

Krok 3
Jak połączyć projekt, nad którym pracujemy, z naszym urządzeniem z Androidem. Przechodzimy do strony App Inventor i otwieramy projekt, z którym będziemy pracować, wybieramy „Połącz” i „Al Companion” w menu głównym.

Pokaże nam okno dialogowe z kodem QR, szukamy naszego urządzenia, uruchamiamy aplikację MIT App Companion, a następnie klikamy przycisk "Skanowania QR code" i skanujemy kod:

Po odczekaniu kilku sekund powinniśmy być w stanie zobaczyć projekt, nad którym pracujemy, i będzie on aktualizowany zgodnie ze zmianami, które w nim wprowadzamy.

Opcja 2 i 3: Zainstaluj App Inventor na naszym komputerze z systemem operacyjnym Okna
Tutaj instalacja jest taka sama w obu przypadkach.

Krok 1
Najpierw musimy pobrać instalator MIT_App_Inventor_Tools_2.3.0_win_setup.exe Możemy to zrobić, korzystając z poniższego linku. Po pobraniu instalatora uruchamiamy go.

Pojawi się to okno, klikamy Dalej>.

Następnie zaakceptujemy umowę licencyjną, klikając zgadzam się.

Krok 2
Wybieramy, czy chcemy zainstalować program tylko dla jednego użytkownika, czy dla wszystkich użytkowników i klikamy Dalej>.

Wybieramy komponenty, które chcemy zainstalować i klikamy Dalej>.

Wybieramy, gdzie zamierzamy go zainstalować i klikamy Dalej>.

Krok 3
Wybieramy katalog domowy i naciskamy zainstalować.

Czekamy kilka sekund, aż zainstalujesz MIT App Inventor Tools 2.3.0.

Po zakończeniu procesu instalacji możemy kliknąć Skończyć i na tym zakończymy instalację.

Krok 4
TAk zostawiamy teraz zaznaczoną opcję Uruchom narzędzie aiStarter Powinno pojawić się okno aiStarter, w którym w pierwszym wierszu wskaże system operacyjny, w którym pracujemy, w drugim wierszu znajduje się folder, w którym jest zainstalowany, w trzecim wierszu serwer na którym działa, w czwartym wierszu jest to znalezienie adresu IP, pod którym aplikacja jest aktywna. Aby zamknąć przebieg aiStarter, naciśnij Ctrl + C.

NotatkaAiStarter musi być uruchamiany za każdym razem, gdy zamierzamy pracować z App Inventor 2. Jeśli nie korzystamy z połączenia z siecią bezprzewodową WiFi, po instalacji na pulpicie powinna pojawić się ikona aiStarter.

2. Uruchamianie aplikacji Inventor 2

Pierwszy krok
Przede wszystkim musimy uruchomić aiStarter, klikając ikonę, która znajduje się na pulpicie.

Spowoduje to uruchomienie okna aiStarter.

Drugi krok
Po uruchomieniu aiStarter przechodzimy do strony appinventory i klikamy na Create apps!

Poprosi Cię o dostęp do konta Gmail. Następnie poprosi nas o uprawnienia dostępu do naszego konta, tutaj wybieramy Pozwolić. Następnie pokaże nam warunki świadczenia usług. Akceptujemy warunki, a następnie zapyta nas, czy chcemy wypełnić ankietę, po czym nas przywita. Klikamy kontyntynuj.

Jeśli chcemy, aby wszystko było dla nas łatwiejsze, możemy wybrać język przed rozpoczęciem pierwszego połączenia.

Trzeci krok
Teraz zaczynamy nowy projekt.

Nadajemy nazwę temu nowemu projektowi, w moim przypadku dam go Test_1 i akceptujemy.

Automatycznie przeniesie nas do utworzonego właśnie projektu i pokaże nam narzędzia oraz to, z czego będziemy korzystać.

Czwarty krok
Teraz, gdy zamierzamy uruchomić emulator, stworzę tylko prostą aplikację, która pokazuje etykietę z typowym „Hello world”, w tym celu przeciągamy etykietę z palety i zmieniamy tekst, który zawiera na Hello world.

Będziemy używać emulatora, do tego zamierzamy Połącz> Emulator.

Połączy się i powie nam, abyśmy poczekali kilka sekund, postępujemy zgodnie z instrukcjami, które poda nam poniżej.

Ponieważ używamy emulatora po raz pierwszy, poprosi nas o aktualizację i pokaże nam w emulatorze, czy chcemy zainstalować aktualizację.

Po zainstalowaniu klikamy „Gotowe” i ponownie uruchamiamy połączenie zgodnie z instrukcjami.

Po ponownym uruchomieniu połączenia uruchamiamy emulator, który powinien pokazać nam projekt, nad którym pracujemy, jak widać na poniższym obrazku.

Po wykonaniu wszystkich tych kroków zaktualizujemy emulator, a wszystkie nasze projekty, nad którymi pracujemy, będą widoczne na ekranie emulatora.

NotatkaPolecam przed rozpoczęciem jakiegokolwiek projektu upewnić się, że uruchomiliśmy aiStarter, dzięki czemu nie mamy żadnych problemów podczas testowania naszych aplikacji i konieczne jest jego uruchomienie przed uruchomieniem emulatora na stronie.

3. Pierwsza aplikacja w App Inventor 2

Teraz, gdy już wszystko mamy gotowe, możemy zacząć nad tym pracować. Wynalazca aplikacji, to ci pokażę jak tworzyć proste aplikacje które pomogą nam mieć bazę do tworzenia własnych aplikacji na Androida.

Krok 1
Zaczniemy od opracowania podstawowego kalkulatora, który pozwala na wykonywanie typowych funkcji matematycznych, takich jak dodawanie, odejmowanie, mnożenie i dzielenie.

W tym celu najpierw będziemy Projekty> Moje projekty. Tam klikamy na rozpoczęcie nowego projektu, nazwę ten projekt Calculadora_Basica i naciśnij przycisk OK.

To przekieruje nas do obszaru projektowania, w którym będziemy pracować z naszym projektem, pierwszą rzeczą, którą zrobimy, jest dodanie czterech przycisków, przeciągając je z palety, która znajduje się po naszej lewej stronie.

Krok 2
Teraz zmienimy tekst każdego z przycisków, wybierając jeden po drugim komponenty i modyfikując tekst we właściwościach. Jak widać, istnieją domyślne właściwości przycisku, który wybieramy, tutaj możemy zmienić sposób, w jaki chcemy, aby przycisk był. Na razie ograniczę się tylko do zmiany tekstu.

Po modyfikacji tekstu od razu powinieneś zauważyć zmiany w przycisku, który modyfikujemy w przeglądarce.

Krok 3
Teraz ze względów estetycznych wykorzystam układ poziomy, aby uporządkować zmodyfikowane wcześniej przyciski. Znajdziemy to w palecie, klikając układ i przeciągając układ poziomy w kierunku przeglądarki.

Krok 4
Teraz dodamy nasze przyciski jeden po drugim w kierunku naszego układu poziomego. Powinniśmy mieć coś takiego:

Krok 5
Następnie dodajemy 2 pola tekstowe, czyli gdzie wprowadzimy liczby niezbędne do wykonania podstawowych operacji dodawania, odejmowania, mnożenia i dzielenia. Poza tym dodamy również etykietę, aby pokazać wynik naszych działań. Etykietę i pola tekstowe można znaleźć w palecie, klikając interfejs użytkownika. Na koniec powinniśmy mieć coś podobnego do poniższego obrazka:

Krok 6
Idziemy do "Bloki„Aby rozpocząć konfigurowanie funkcji naszych przycisków. Aby przejść, wystarczy kliknąć bloki po prawej stronie ekranu obok przycisku Projektant.

Powinna nas skierować do przeglądarki bloków, w której możemy zobaczyć różne typy bloków, których możemy użyć w naszych aplikacjach. Na razie wystarczy nam użyć wbudowanych przycisków, aby zdefiniować, jaką funkcję wykonują po naciśnięciu każdego z nich.

Aby zdefiniować akcję, którą wykonuje każdy przycisk, najpierw zaczniemy od button1, który w moim przypadku zmieniłem tekst na znak plus (+) i chcę zdefiniować, że za każdym razem, gdy zostanie naciśnięty, dodaje kwoty, które są w pole tekstowe 1 i pole tekstowe 2, w tym celu zaczynamy od kliknięcia przycisku 1, następnie wybieramy "gdy przycisk 1 kliknij wykonaj" i przeciągamy go do naszej przeglądarki, powinno to wyglądać tak:

Krok 7
Następnie dodajemy Label1, klikamy Label1 i przeciągamy „wstaw tekst Label1 jako” do przeglądarki i łączymy go z „wykonaj”. Tak powinno być.

Krok 8
Teraz dodajmy funkcję dodawania, w tym celu klikamy Math i przeciągamy, zwracamy sumę dwóch liczb i łączymy ją z blokiem etykiet.

Później Dodamy pola tekstowe, wybierając TextField1, szukamy „TextField1 Text” i przeciągamy go, aby połączyć go z blokiem sum. Pierwsze miejsce na pole tekstowe1 i drugie miejsce na pole tekstowe2. Wykonanie tego samego procesu powinno wyglądać jak na poniższym obrazku:

Krok 9
Teraz powtarzamy procesy, które wykonaliśmy z każdym przyciskiem tylko zmieniając operacje matematyczne na każdy, w końcu powinniśmy mieć coś takiego:

I wreszcie czas przetestować naszą aplikację, w moim przypadku przetestuję ją w emulatorze na PC. Weryfikujemy jak wyglądała nasza aplikacja, możemy sprawdzić, czy każdy z przycisków działa i czy spełnia przypisane funkcje. Na poniższym obrazku widać podział.

Na tym kończymy naszą pierwszą prostą aplikację mobilną z operacjami matematycznymi.

4. Druga aplikacja w App Inventor 2

Teraz stworzymy aplikację, która pozwoli nam zapisywać i przeglądać dane z bazy tyniDB. TyniDB to lekka baza danych dokumentów, napisana w czystym Pythonie i nie ma zewnętrznych zależności.

Krok 1
Pierwszą rzeczą, którą zrobimy, jest utworzenie nowego projektu, nazwiemy go List_BD:

Krok 2
Dodamy w nim dwa przepisy horyzontalne; W pierwszym z nich dodajemy etykietę i pole tekstowe, w drugim dodajemy dwa przyciski, powinniśmy mieć coś takiego:

Krok 3
Będziemy wybierać każdy z przepisów, we właściwościach modyfikujemy szerokość, aby pasowała do pojemnika. Oprócz tego wybieramy etykietę i zmieniamy tekst, aby wprowadzić dane, a w przyciskach nazwiemy jedną „Nowy rekord” i drugi „zapis” powinny wyglądać tak:

Krok 4
Teraz dodamy na dole przeglądarkę list, do której we właściwościach wybierzemy opcję szerokości pasującą do kontenera a w wysokości wstawimy 300px, będziemy mieli coś takiego:

Krok 5
Dodajmy naszą bazę TinyDB znalezioną pod adresem paleta> magazyn i przeciągamy TinyBD do naszej przeglądarki listy, w ten sposób:

Krok 6
Teraz przechodzimy do bloków i pierwszą rzeczą, którą zrobimy, jest dodanie zmiennej globalnej typu tekst. W tym celu najpierw będziemy bloki> wbudowane> zmienne i stamtąd przeciągamy "inicjalizuj global jako", a następnie przechodzimy do tekstu w bloki> wbudowane> tekst, przeciągamy ciąg tekstowy i łączymy go z "initialize global".

Krok 7
Skonfigurujemy, jaką akcję będzie wykonywał przycisk, który nazywamy nowym rekordem, który będzie pełnić funkcję umieszczenia naszego pola tekstowego w kolorze białym, w tym celu bloki> Układ poziomy2> Przycisk1 i przeciągamy, gdy Button1 kliknie na naszą przeglądarkę bloków, a następnie przechodzimy do bloki> HorizontalArrangement1> TextField1, przeciągamy put TextField1.Text as, łącząc go z whenButton1.Clic i na koniec szukamy ciągu tekstowego i łączymy go z „TextField1.Text as”, co daje następujący obraz:

Krok 8
Teraz skonfigurujemy nasz przycisk Zapisz, aby dodać dane do naszej listy, w tym celu szukamy naszego przycisku 2 i przeciągamy go do naszej przeglądarki. Następnie idziemy do Bloki> Lista> dodaj pozycja do wystawienia a tam, gdzie jest napisane lista, linkujemy do ujęcia, które jest w Bloki> Zmienne> Take i łączymy je klikając, aby wybrać dane z globalnej listy. Na koniec, gdzie element pojawia się w naszym bloku, aby dodać element do listy, umieszczamy blok z naszego TextBox1.Text, powinien wyglądać mniej więcej tak:

Krok 9
Teraz dodamy wartości do naszej bazy danych, w tym celu pierwszą rzeczą, którą musimy zrobić, to wyszukać w Bloki> Ekran1> TinyBD, przeciągamy wywołanie TinyBD1.SaveValue i łączymy go z naszym blokiem Button2, a następnie w etykiecie umieszczamy to, co zamierzamy zapisać, w tym przypadku zapiszemy tylko nazwy, do tego szukamy bloku tekstowego, linkujemy go w etykietę i wstawiamy nazwę, a następnie umieszczamy z tego wartość do zapisania, aby pobierała ją z listy globalnej, tak jak to zrobiliśmy w bloku dodawania elementów.

Krok 10
Musimy tylko pokazać go w przeglądarce listy, w tym celu połączymy go z Button2, zamierzamy Bloki> Ekran1> ListViewer1 i przeciągamy put ListViewer1.Elements, gdy łączymy się, bierzemy globalną Listę, pokazując coś takiego:

Krok 11
Jak pamiętamy, najlepszą rzeczą w posiadaniu bazy danych jest to, że możesz zamknąć swoją aplikację, a dane, które tam zapisałeś, zostaną zachowane, dostępne po rozpoczęciu nowej sesji. Aby to zrobić, upewnimy się, że po uruchomieniu Screen1 baza danych zostanie ponownie dodana do listy i pojawi się ponownie w przeglądarce listy.

Aby to zrobić, wystarczy przejść do Bloki> Ekran1 i przeciągnij blok "kiedy Screen1.initialize to execute" w naszej przeglądarce bloków i do tego będziemy łączyć zmienną "put" znalezioną w Bloki> Zintegrowane> Zmienne, przeciągamy „put” i w tym bloku wybieramy globalną Listę, do której zamierzamy połączyć się z TinyBD1 „call TinyBD1. GetValue ”, w etykiecie dodamy blok tekstowy, do którego wstawimy Name a w Value jeśli label nie istnieje tworzymy pustą listę, która zostanie znaleziona in Bloki> Lista> Utwórz nową pustą listę. Dzięki temu otrzymujemy, że wszystkie dane są zapisywane na nowej liście.

Aby pokazać nam dane w przeglądarce listy, musimy połączyć "gdy Screen1.initialize" z "Set ListView1.Elements as", co z kolei jest połączone z "Weź globalną listę", tak jak zrobiliśmy to w poprzednim bloku.