✅ Vyvíjejte aplikace pro Android pomocí App Inventor 2

Obsah

1. Instalace aplikace App Inventor 2
2. Spuštění aplikace Inventor 2
3. První aplikace v App Inventor 2
4. Druhá aplikace v App Inventor 2

App Inventor 2 je platforma, která nám to umožňuje umožňuje vyvíjet softwarové aplikace pro Android, Toto je vytvoření Google Labs, zde si můžeme vizualizovat projekty, ve kterých pracujeme, s různými typy základních nástrojů. Jednou z velkých výhod, které aplikace App Inventor 2 přináší, je to, že uživatel může propojit řadu bloků a vytvořit tak aplikaci . Tento systém je zcela zdarma a snadno stahovatelné z vašich vlastních webových stránek. Aplikace, které můžeme v App Inventoru vytvářet, jsou do určité míry omezeny jejich jednoduchostí, i když zde můžeme také strávit spoustu času vývojem nekonečných aplikací pro základní zařízení Android.

S Google App Inventor byla prokázána velká jednoduchost použití, která usnadnila vzhled a velké množství nových aplikací; V dnešní době existuje mnoho uživatelů, kteří díky tomu vyvíjejí aplikace v distribučním centru aplikací pro Android.

Co nám App Inventor 2 umožňuje?Vytvářejte aplikace pro zařízení se systémem Android pomocí webového prohlížeče a připojeného telefonu nebo emulátoru. Servery App Inventor ukládají vaši práci a sledují vaše projekty.

Je to velmi snadno použitelný nástroj pro vizuální vývoj, takže mnoho uživatelů tohoto nástroje nejsou čistě programátoři.

S čím vytváříme naše aplikace v App Inventor 2?App Inventor Designer je aplikace používaná k výběru komponent pro App Inventor, nabízí nám paletu, která obsahuje velké množství nástrojů, se kterými můžete pracovat s velkou jednoduchostí.

Editor bloků aplikace App Inventor nám umožňuje propojit různé typy bloků, pomocí kterých můžeme definovat funkce toho, co v naší aplikaci navrhujeme. Jednou z výhod je jednoduchý a vizuální způsob, jak formou skládačky ukázat práci, kterou děláme.

Je snadné vytvářet aplikace pomocí App Inventor 2?Různé aplikace, které se v průběhu času objevují na zařízeních Android, nám ukázaly, že existuje spousta aplikací, ve kterých můžeme pracovat, ať už jsou základní nebo komplikované. Aplikace Inventor 2 nám umožňuje pracovat s jednoduchostí, což znamená, že pro práci v prostředí velké jednoduchosti nemusíte být programátorem. práce s paletou nástrojů nebo sadou bloků, které zvládneme prakticky jako logická hra. Navíc po dokončení projektu můžete svou aplikaci zabalit a vytvořit samostatnou aplikaci k instalaci.

Další výhodou, kterou vám nabízí, je, že nemusíte mít nutně telefon s operačním systémem Android, protože ze stránky App Inventor si můžete stáhnout software s názvem aiStarter, který vám umožní jej emulovat z vašeho PC.

Jak přistupovat k App Inventor 2?Chcete -li získat přístup, musíte se nejprve zaregistrovat v aplikaci App Inventor pomocí svého účtu Gmail. Je důležité vědět, že tento proces je zcela zdarma.

Požadavky na systém, zařízení nebo prohlížeč

Operační systémy

Macintosh: Mac OS X 10.5 nebo vyšší.
Windows: Windows XP, Windows Vista, Windows 7
GNU / Linux: Ubuntu 8 nebo vyšší, Debian 5 nebo vyšší

Prohlížeče

Mozilla Firefox 3.6 nebo vyšší
Apple Safari 5.0 nebo vyšší
Google Chrome 4.0 nebo vyšší
Microsoft Internet Explorer to nepodporuje

Telefony a tablety

Operační systém Android 2.3 („Gingerbread“) nebo vyšší

1. Instalace aplikace App Inventor 2

Nejprve to musíme vědět Aplikace Inventor 2 vám umožňuje navrhovat a upravovat v blocích jak jsme již zmínili, a to vše běží ve vašem prohlížeči. Ale abychom otestovali, na čem pracujeme (Test it live), máme při vytváření naší aplikace tři možnosti:

Možnost 1Nejvíce doporučovaná stránkou appinventor je, že pokud máte zařízení, které používá Android a máte bezdrátové připojení k internetu (WiFi), můžeme fungovat pouze instalací aplikace App Inventor na naše zařízení Android.

Možnost 2Druhá možnost je nainstalujte software na náš počítač abychom mohli používat emulátor Android a testovat naše aplikace, zatímco je vytváříme.

Možnost 3V této možnosti je nejsložitější a nejobtížnější; Pokud je naším operačním systémem Windows a máme zařízení Android, ale nemáme bezdrátovou síť (WiFi), můžeme nainstalujte software na náš počítač a připojte naše zařízení Android přes USB. Na stránce vidíme, jak je tato možnost vzhledem ke své zjevné složitosti využívána jako poslední možnost.

Jakmile budeme znát různé možnosti, které máme při instalaci App Inventor 2, vysvětlím krok za krokem, jak provést každou z těchto možností:

Možnost 1: Připojení aplikace App Inventor 2 k vašemu zařízení Android prostřednictvím bezdrátového připojení (WiFi)

Krok 1
Stáhněte si a nainstalujte aplikaci MIT AI2 Companion do svého zařízení Android. Při této možnosti byste museli ve svém zařízení Android pouze vyhledat aplikaci „MIT AI2 Companion“ z PlayStore, stáhnout a nainstalovat ji nebo si ji také můžete stáhnout přímo ze souboru APK. Nejvhodnější je stáhnout si jej z PlayStore, protože pokud si stáhneme soubor APK, budeme muset v konfiguraci našeho zařízení Android povolit možnost povolit instalaci aplikací z neznámých zdrojů. Tuto možnost lze nalézt ve verzích Androidu starších než 4.0, proto se chystáme Nastavení> Aplikace a zaškrtněte políčko " Neznámé zdroje". U zařízení s Androidem 4.0 nebo novějším musíte jít na Nastavení> Zabezpečení nebo Nastavení> Zabezpečení a zámek obrazovkya vyberte "Neznámé zdroje".

Zde nechávám příslušné QR kódy ke stažení z Playstore nebo přímo jako soubor APK, pokud potřebujete QR skener, můžeme ho vyhledat v Playstore.

PlayStore

Soubor APK

PoznámkaPočítejte s tím, že pokud jej stáhneme z PlayStore, bude automaticky aktualizován a pokud použijeme možnost stáhnout jej přímo, budeme jej muset aktualizovat ručně.

Krok 2
Připojte svůj počítač ke stejné WiFi síti jako vaše zařízení Android. App Inventor automaticky zobrazí aplikaci, kterou vytváříte, pouze pokud je aplikace App Inventor spuštěna na vašem počítači a pokud je na vašem zařízení Android spuštěna aplikace Companion a tyto 2 jsou připojeny ke stejné síti Wi-Fi.

Krok 3
Jak propojit projekt, na kterém pracujeme, s naším zařízením Android. Přejdeme na stránku App Inventor a otevíráme projekt, se kterým budeme pracovat, v hlavní nabídce zvolíme „Připojit“ a „Al Companion“.

Ukáže nám dialog s QR kódem, hledáme naše zařízení, spustíme aplikaci MIT App Companion a poté klikneme na tlačítko "Naskenujte QR kód" a naskenujeme kód:

Po několika sekundách bychom měli vidět projekt, na kterém pracujeme, a bude aktualizován podle úprav, které na něm provádíme.

Možnost 2 a 3: Nainstalujte si App Inventor na náš počítač s operačním systémem Okna
Zde je instalace v obou případech stejná.

Krok 1
Nejprve musíme stáhnout instalační program MIT_App_Inventor_Tools_2.3.0_win_setup.exe Můžeme to udělat pomocí následujícího odkazu. Po stažení instalačního programu jej spustíme.

Zobrazí se toto okno, klikneme na něj Další>.

Poté přijmeme licenční smlouvu kliknutím souhlasím.

Krok 2
Vybereme si, zda chceme program nainstalovat pouze pro jednoho uživatele nebo pro všechny uživatele a klikneme na Další>.

Vybereme komponenty, které chceme nainstalovat, a klikneme Další>.

Vybereme, kam jej budeme instalovat, a klikneme Další>.

Krok 3
Vybereme domovskou složku a stiskneme Nainstalujte.

Čekáme několik sekund, než nainstalujete nástroje MIT App Inventor Tools 2.3.0.

Po dokončení procesu instalace můžeme kliknout Dokončit a tím dokončíme instalaci.

Krok 4
Ano ponecháme vybranou možnost Spustit nástroj aiStarter nyní Mělo by se objevit okno aiStarter, kde bude v prvním řádku uveden operační systém, kde pracujeme, ve druhém řádku, kde se nachází složka, kde je nainstalován, ve třetím řádku server, kde běží, ve čtvrtém řádku je najít IP adresu, kde je aplikace aktivní. Chcete -li běh aiStarter zavřít, stiskněte Ctrl + C.

PoznámkaAiStarter musí být spuštěn vždy, když budeme pracovat s aplikací App Inventor 2. Pokud nepoužíváme bezdrátové připojení k síti WiFi, po instalaci by se na ploše měla objevit ikona aiStarter.

2. Spuštění aplikace Inventor 2

První krok
Nejprve musíme spustit aiStarter kliknutím na ikonu, která se nachází na ploše.

Tím se spustí okno aiStarter.

Druhý krok
Po spuštění aiStarter přejdeme na stránku inventáře a klikneme na Vytvořit aplikace!

Požádá vás o přístup k vašemu účtu Gmail. Poté nás požádá o oprávnění k přístupu k našemu účtu, zde vybereme Nechat. Poté nám ukáže podmínky služeb. Přijímáme podmínky a poté se nás zeptá, zda chceme vyplnit průzkum, a poté nás uvítá. Klikneme na pokračovat.

Chceme -li, aby bylo vše pro nás jednodušší, můžeme před zahájením prvního připojení vybrat jazyk.

Třetí krok
Nyní zahájíme nový projekt.

Tomuto novému projektu dáváme jméno, v mém případě mu dám Test_1 a přijímáme.

Automaticky nás přenese do projektu, který jsme právě vytvořili, a ukáže nám nástroje a to, co budeme používat.

Čtvrtý krok
Nyní, když spustíme emulátor, udělám pouze jednoduchou aplikaci, která zobrazí štítek s typickým „Hello world“, proto přetáhneme štítek z palety a změníme text, který obsahuje, na Hello world.

K tomu použijeme emulátor Připojit> Emulátor.

Připojí se a řekne nám, abychom počkali několik sekund, řídíme se pokyny, které nám poskytne níže.

Protože emulátor používáme poprvé, požádá nás o jeho aktualizaci a v emulátoru nám ukáže, zda chceme aktualizaci nainstalovat.

Po instalaci klikneme na „hotovo“ a restartujeme připojení podle pokynů.

Po restartování připojení spustíme emulátor a měl by nám ukázat projekt, na kterém pracujeme, jak můžete vidět na následujícím obrázku.

Jakmile provedeme všechny tyto kroky, necháme emulátor aktualizovat a všechny naše projekty, na kterých pracujeme, lze vidět na obrazovce emulátoru.

PoznámkaDoporučuji, abychom se před spuštěním jakéhokoli projektu ujistili, že jsme spustili aiStarter, abychom při testování našich aplikací neměli žádné problémy a je nutné, aby byl spuštěn před spuštěním emulátoru na stránce.

3. První aplikace v App Inventor 2

Nyní, když máme vše v pořádku, můžeme na tom začít pracovat. App Inventor, pak ti to ukážu jak vyvinout některé jednoduché aplikace to nám pomůže mít základnu pro vývoj vlastních aplikací pro Android.

Krok 1
Začneme vývojem základní kalkulačky, která nám umožní provádět typické matematické funkce jako sčítání, odčítání, násobení a dělení.

Za tímto účelem nejprve budeme Projekty> Moje projekty. Tam klikneme na zahájení nového projektu, tento projekt pojmenuji Calculadora_Basica a stiskněte tlačítko OK.

Tím se přesměrujeme do návrhové oblasti, kde budeme s naším projektem pracovat, první věc, kterou uděláme, je přidání čtyř tlačítek jejich přetažením z palety, která se nachází na naší levé straně.

Krok 2
Nyní změníme text každého z tlačítek tak, že postupně vybereme komponenty a upravíme text v jeho vlastnostech. Jak vidíme, existují výchozí vlastnosti, které tlačítko, které vybereme, má, zde můžeme upravit, jak chceme, aby tlačítko bylo. V tuto chvíli se omezím pouze na změnu textu.

Po úpravě textu byste si měli okamžitě všimnout změn v tlačítku, které v prohlížeči upravujeme.

Krok 3
Nyní z estetických důvodů použiji horizontální uspořádání k uspořádání tlačítek, která jsme dříve upravili. To najdeme v paletě kliknutím na rozložení a přetažením vodorovného rozvržení směrem k divákovi.

Krok 4
Nyní budeme postupně přidávat naše tlačítka směrem k horizontálnímu rozložení. Měli bychom mít něco takového:

Krok 5
Poté přidáme 2 textová pole, což je kde představíme čísla potřebná k provedení našich základních operací sčítání, odčítání, násobení a dělení. Kromě toho přidáme také štítek, který bude ukazovat výsledek našich operací. Štítek a textová pole najdete v paletě kliknutím na uživatelské rozhraní. Na konci bychom měli mít něco podobného následujícímu obrázku:

Krok 6
Budeme "Bloky”Chcete -li začít konfigurovat funkce našich tlačítek. Chcete -li jít, stačí kliknout na bloky na pravé straně obrazovky vedle tlačítka Návrhář.

Mělo by nás to přesměrovat do prohlížeče bloků, kde můžeme vidět různé typy bloků, které můžeme pro naše aplikace použít. Prozatím budeme muset pouze pomocí vestavěných tlačítek definovat, jakou funkci plní, když je každé z nich stisknuto.

Abychom definovali akci, kterou každé tlačítko provádí, začneme nejprve tlačítkem1, které jsem v mém případě změnil text na znaménko plus (+) a chci definovat, že při každém stisknutí přidá částky, které jsou v textové pole 1 a textové pole 2, za tímto účelem začneme kliknutím na tlačítko button1, poté vybereme „když tlačítko button1 klikneme na spustit“ a přetáhneme jej do našeho prohlížeče, mělo by to vypadat takto:

Krok 7
Poté přidáme Label1, klikneme na Label1 a přetáhneme do prohlížeče „dát text Label1 jako“ a propojíme jej s „spustit“. Mělo by to tak být.

Krok 8
Nyní přidejme funkci sčítání, k tomu klikneme na Matematika a přetáhnutím vrátíme součet dvou čísel a propojíme jej se štítkovým blokem.

Později Přidáme textová pole výběrem TextField1, hledáme „TextField1 Text“ a přetažením jej propojíme se součtovým blokem. První mezera pro textové pole1 a pro druhou mezeru textové pole2. Provedení stejného postupu by mělo být něco jako následující obrázek:

Krok 9
Nyní zopakujeme procesy, které jsme provedli s každým tlačítkem, pouze ke každému změníme matematické operace, nakonec bychom měli mít něco takového:

A konečně je čas otestovat naši aplikaci, v mém případě ji otestuji v emulátoru pro PC. Ověřujeme, jak na tom naše aplikace byla, můžeme vyzkoušet, zda každé z tlačítek funguje a zda plní přiřazené funkce. Na následujícím obrázku můžete vidět rozdělení.

Tím jsme uzavřeli naši první jednoduchou mobilní aplikaci s matematickými operacemi.

4. Druhá aplikace v App Inventor 2

Nyní uděláme aplikaci, která nám umožní ukládat a prohlížet data z databáze tyniDB. TyniDB je lehká databáze dokumentů, která je napsána v čistém Pythonu a nemá žádné externí závislosti.

Krok 1
První věc, kterou uděláme, je vytvoření nového projektu, budeme mu říkat List_BD:

Krok 2
V něm přidáme dvě horizontální ustanovení; Do prvního z nich přidáme popisek a textové pole, do druhého přidáme dvě tlačítka, měli bychom mít něco takového:

Krok 3
Vybereme každé z ustanovení, ve vlastnostech upravíme šířku tak, aby odpovídala kontejneru. Kromě toho vybereme štítek a změníme text tak, aby zadával data, a v tlačítkách ho zavoláme „Nový záznam“ a druhé „uložení“ by měly vypadat takto:

Krok 4
Nyní ve spodní části přidáme prohlížeč seznamu, do kterého ve vlastnostech vybereme možnost width, která se vejde do kontejneru a na výšku dáme 300px, budeme mít něco takového:

Krok 5
Přidejme naši databázi TinyDB, kterou najdete na paleta> skladování a přetáhneme TinyBD do našeho prohlížeče seznamů takto:

Krok 6
Nyní přejdeme k blokům a první věc, kterou uděláme, je přidání globální proměnné typu textu. Za tímto účelem nejprve budeme bloky> vestavěné> proměnné a odtud přetáhneme „inicializovat globální jako“ a poté přejdeme na text v bloky> vestavěné> text, přetáhneme textový řetězec a propojíme jej s „inicializovat globální“.

Krok 7
Konfigurujeme, jakou akci provede tlačítko, kterému říkáme nový záznam, které bude plnit funkci vložení našeho textového pole do bílé barvy, za tímto účelem bloky> Horizontální rozvržení2> Tlačítko1 a přetáhneme, když Button1 klikneme do našeho prohlížeče bloků, pak jdeme na bloky> HorizontalArrangement1> TextField1, přetáhneme textField1.Text jako, propojíme jej s whenButton1.Clic a nakonec vyhledáme textový řetězec a propojíme jej s „TextField1.Text jako“, což má za následek následující obrázek:

Krok 8
Nyní budeme konfigurovat naše tlačítko Uložit pro přidání dat do našeho seznamu, proto vyhledáme tlačítko 2 a přetáhneme ho do našeho prohlížeče. Pak jdeme na Bloky> Seznam> přidat položku do seznamu a kde je uvedeno seznam, odkazujeme na záběr, který je in Bloky> Proměnné> Take a propojíme je kliknutím na výběr dat z globálního seznamu. Nakonec, když se položka objeví v našem bloku, abychom přidali prvek do seznamu, umístíme blok z našeho TextBox1. Text by měl vypadat nějak takto:

Krok 9
Nyní přidáme hodnoty do naší databáze, proto první věc, kterou musíme udělat, je hledat v Bloky> Screen1> TinyBD, přetáhneme volání TinyBD1.SaveValue a propojíme jej s naším blokem Button2, poté následuje toto, do štítku umístíme to, co budeme ukládat, v tomto případě uložíme pouze jména, proto hledáme textový blok, propojíme jej štítek a vložíme Název, pak z tohoto umístíme hodnotu k uložení, aby ji převzala z globálního seznamu, jako jsme to udělali v bloku přidání prvků.

Krok 10
Potřebujeme to ukázat v prohlížeči seznamů, proto to propojíme s Button2, jdeme na Bloky> Screen1> ListViewer1 a přetáhneme Put ListViewer1.Elements as my link take global List, showing something like this:

Krok 11
Jak si pamatujeme, nejlepší na databázi je to, že můžete zavřít aplikaci a data, která jste tam uložili, se uloží a budou k dispozici při zahájení nové relace. Za tímto účelem se ujistíme, že při spuštění Screen1 se databáze znovu přidá do seznamu a znovu se objeví v prohlížeči seznamů.

K tomu musíme prostě jít Bloky> Obrazovka 1 a přetáhněte blok „když se Screen1.initialize spustí“ v našem prohlížeči bloků a k tomu propojíme proměnnou „put“ nalezenou v Bloky> Integrované> Proměnné, přetáhneme „put“ a v tomto bloku vybereme globální seznam, na který se chystáme propojit z TinyBD1 „volání TinyBD1. GetValue “, do štítku přidáme textový blok, do kterého vložíme Název, a do Hodnoty, pokud štítek neexistuje, vytvoříme prázdný seznam, který se najde an Bloky> Seznam> Vytvořit nový prázdný seznam. Tím získáme, že všechna data jsou uložena v novém seznamu.

Aby se nám v prohlížeči seznamů zobrazila data, co musíme udělat, propojíme „při Screen1.initialize“ s „Nastavit ListView1.Elements jako“, což je zase spojeno s „Take global List“, jako jsme to udělali v předchozím bloku.