✅ Dezvoltă aplicații Android cu App Inventor 2

Cuprins

1. Instalarea aplicației Inventor 2
2. Rularea aplicației Inventor 2
3. Prima aplicație în App Inventor 2
4. A doua aplicație în App Inventor 2

App Inventor 2 este o platformă care ne permite permite dezvoltarea de aplicații software pentru Android, Aceasta este o creație a Google Labs, aici putem vizualiza proiectele în care lucrăm cu diferite tipuri de instrumente de bază, unul dintre marile avantaje pe care le aduce App Inventor 2 este că utilizatorul poate lega o serie de blocuri pentru a crea aplicația . Acest sistem este complet gratuit și ușor de descărcat de pe propriul site web. Aplicațiile pe care le putem crea în App Inventor sunt oarecum limitate de simplitatea lor, deși aici putem petrece mult timp dezvoltând aplicații nesfârșite pentru dispozitive Android de bază.

Cu Google App Inventor s-a demonstrat o mare simplitate de utilizare care a facilitat apariția unui număr mare de aplicații noi; În zilele noastre există mulți utilizatori care dezvoltă aplicații în centrul de distribuție a aplicațiilor Android datorită acestui fapt.

Ce ne permite să facem App Inventor 2?Creați aplicații pentru dispozitive care au un sistem Android utilizând un browser web și un telefon sau emulator conectat. Serverele App Inventor stochează munca dvs. și țin evidența proiectelor dvs.

Este un instrument de dezvoltare vizuală foarte ușor de utilizat, astfel încât mulți dintre utilizatorii acestui instrument nu sunt pur programatori.

Cu ce ne construim aplicațiile în App Inventor 2?App Inventor Designer este aplicația utilizată pentru selectarea componentelor pentru App Inventor, ne oferă o paletă care conține un număr mare de instrumente cu care puteți lucra cu mare simplitate.

App Inventor Blocks Editor ne permite să conectăm diferitele tipuri de blocuri cu care putem defini funcțiile a ceea ce proiectăm în aplicația noastră. Unul dintre avantaje este modul simplu și vizual de a arăta munca pe care o desfășurăm sub forma unui puzzle.

Este ușor să creați aplicații cu App Inventor 2?Diferitele aplicații care apar de-a lungul timpului pe dispozitivele Android ne-au arătat că există o mulțime de aplicații în care putem lucra, indiferent dacă sunt de bază sau complicate. Aplicația Inventor 2 ne permite să lucrăm cu o simplitate care înseamnă că nu trebuie să fii programator pentru a lucra într-un mediu de mare simplitate, fie lucrul cu o paletă de instrumente sau un set de blocuri pe care le putem gestiona practic ca un joc de puzzle. Pe lângă toate acestea, la finalizarea proiectului, vă puteți împacheta aplicația și puteți produce o aplicație separată de instalat.

Un alt avantaj pe care ți-l oferă este acela nu trebuie neapărat să ai un telefon cu un sistem de operare Android, deoarece din pagina App Inventor puteți descărca un software numit aiStarter care vă va permite să îl emulați de pe computer.

Cum se accesează App Inventor 2?Pentru a accesa, primul lucru pe care trebuie să-l faceți este să vă înregistrați în App Inventor, utilizând contul dvs. Gmail. Este important să știm că acest proces este complet gratuit.

Cerințe de sistem, dispozitiv sau browser

Sisteme de operare

Macintosh: Mac OS X 10.5 sau o versiune ulterioară.
Windows: Windows XP, Windows Vista, Windows 7
GNU / Linux: Ubuntu 8 sau o versiune ulterioară, Debian 5 sau o versiune ulterioară

Browsere

Mozilla Firefox 3.6 sau o versiune ulterioară
Apple Safari 5.0 sau o versiune ulterioară
Google Chrome 4.0 sau o versiune ulterioară
Microsoft Internet Explorer nu îl acceptă

Telefoane și dispozitive pentru tablete

Sistem de operare Android 2.3 („Gingerbread”) sau o versiune ulterioară

1. Instalarea aplicației Inventor 2

În primul rând trebuie să știm asta Aplicația Inventor 2 vă permite să proiectați și să editați în blocuri așa cum am menționat deja și toate acestea rulează în browserul dvs. Dar pentru a testa la ce lucrăm (Testează-l live) avem trei opțiuni în timp ce ne construim aplicația:

Opțiunea 1Cel mai recomandat de pagina appinventor este dacă aveți un dispozitiv care utilizează Android și aveți o conexiune la internet wireless (WiFi), putem lucra numai instalând aplicația App Inventor pe dispozitivul nostru Android.

Opțiunea 2A doua opțiune este să instalați software-ul pe computerul nostru pentru a putea folosi emulatorul Android și a testa aplicațiile noastre în timp ce le construim.

Opțiunea 3În această opțiune este cea mai complicată și greoaie; Dacă sistemul nostru de operare este Windows și avem un dispozitiv Android, dar nu avem o rețea wireless (WiFi), putem instalați software-ul pe computerul nostru și conectați dispozitivul nostru Android prin USB. Pe pagină putem vedea cum această opțiune este utilizată ca ultimă soluție datorită complexității sale evidente.

Odată ce cunoaștem diferitele opțiuni pe care le avem la instalarea App Inventor 2, voi explica pas cu pas cum să efectuați fiecare dintre aceste opțiuni:

Opțiunea 1: Conectarea aplicației Inventor 2 la dispozitivul dvs. Android prin conexiune wireless (WiFi)

Pasul 1
Descărcați și instalați aplicația MIT AI2 Companion pe dispozitivul dvs. Android. În această opțiune, va trebui să căutați pe dispozitivul dvs. Android aplicația „MIT AI2 Companion” din PlayStore, să o descărcați și să o instalați sau o puteți descărca direct din fișierul APK. Cel mai recomandabil este să îl descărcați din PlayStore, deoarece dacă descărcăm fișierul APK va trebui să activăm în configurația dispozitivului nostru Android opțiunea de a permite instalarea de aplicații din surse necunoscute. Această opțiune poate fi găsită în versiunile Android anterioare versiunii 4.0, pentru aceasta vom merge Setări> Aplicații și bifați caseta „ Surse necunoscute". Pentru dispozitivele cu Android 4.0 sau o versiune ulterioară, trebuie să accesați Setări> Securitate sau Setări> Securitate și blocare ecran, și selectați „Surse necunoscute".

Aici las codurile QR respective pentru al descărca din Playstore sau direct ca fișier APK, dacă aveți nevoie de un scaner QR putem căuta unul în Playstore.

PlayStore

Fișier APK

NotăLuați în considerare faptul că, dacă îl descărcăm din PlayStore, acesta va fi actualizat automat și dacă vom folosi opțiunea de a-l descărca direct, va trebui să îl actualizăm manual.

Pasul 2
Conectați computerul la aceeași rețea WiFi ca dispozitivul dvs. Android. App Inventor va afișa automat aplicația pe care o construiți, numai dacă App Inventor rulează pe computerul dvs. și dacă Companion rulează pe dispozitivul dvs. Android și aceste 2 sunt conectate la aceeași rețea Wi-Fi.

Pasul 3
Cum să conectăm proiectul la care lucrăm la dispozitivul nostru Android. Accedăm la pagina Inventor de aplicații și deschidem proiectul cu care vom lucra, alegem „Connect” și „Al Companion” în meniul principal.

Ne va arăta un dialog cu un cod QR, ne căutăm dispozitivul, rulăm aplicația MIT App Companion și apoi facem clic pe buton „Scanați codul QR” și scanăm codul:

După ce așteptăm câteva secunde, ar trebui să putem vedea proiectul la care lucrăm și va fi actualizat în funcție de modificările pe care le facem.

Opțiunile 2 și 3: Instalați App Inventor pe computerul nostru cu sistemul de operare Windows
Aici instalarea este aceeași pentru ambele cazuri.

Pasul 1
Mai întâi ce trebuie să facem este să descărcăm programul de instalare MIT_App_Inventor_Tools_2.3.0_win_setup.exe Putem face acest lucru accesând următorul link. După descărcarea programului de instalare, îl rulăm.

Această fereastră va apărea, vom face clic pe Următorul>.

Apoi vom accepta acordul de licență făcând clic pe Sunt de acord.

Pasul 2
Alegem dacă dorim să instalăm programul doar pentru un singur utilizator sau pentru toți utilizatorii și facem clic pe Următorul>.

Alegem componentele pe care dorim să le instalăm și facem clic Următorul>.

Alegem unde urmează să-l instalăm și facem clic Următorul>.

Pasul 3
Alegem folderul de acasă și apăsăm Instalare.

Așteptăm câteva secunde să instalați MIT App Inventor Tools 2.3.0.

După terminarea procesului de instalare, putem face clic finalizarea și cu aceasta vom fi terminat instalarea.

Pasul 4
da lăsăm opțiunea Start aiStarter tool acum selectată Ar trebui să apară o fereastră aiStarter unde va indica în prima linie sistemul de operare unde lucrăm, în a doua linie unde se află folderul în care este instalat, în a treia linie serverul pe care rulează, în a patra linie este să găsiți adresa IP unde aplicația este activă. Pentru a închide rularea aiStarter, apăsați Ctrl + C.

NotăAiStarter trebuie să ruleze ori de câte ori vom lucra cu App Inventor 2. Dacă nu folosim conexiunea de rețea fără fir WiFi, pictograma aiStarter ar trebui să apară pe desktop după instalare.

2. Rularea aplicației Inventor 2

Primul pas
În primul rând trebuie să pornim aiStarter făcând clic pe pictograma care se află pe desktop.

Aceasta va porni fereastra aiStarter.

Al doilea pas
După ce porniți aiStarter, mergem la pagina de inventar a aplicațiilor și facem clic pe Creați aplicații!

Vă va cere să accesați contul Gmail. După aceasta, ne va cere permisiunile pentru a accesa contul nostru, aici selectăm Lăsa. Apoi ne va arăta termenii serviciilor. Acceptăm termenii și apoi ne va întreba dacă vrem să completăm un sondaj și apoi ne va întâmpina. Facem clic pe continua.

Dacă vrem, pentru a ne ușura totul, putem selecta limba înainte de a începe prima conexiune.

Al treilea pas
Acum vom începe un nou proiect.

Dăm un nume acestui nou proiect, în cazul meu îl voi da Test_1 și acceptăm.

Ne va duce automat la proiectul pe care tocmai l-am creat și ne va arăta instrumentele și ce vom folosi.

Al patrulea pas
Acum, pe măsură ce vom rula emulatorul, voi face doar o aplicație simplă care afișează o etichetă cu „Hello world” tipică pentru aceasta, tragem o etichetă din paletă și schimbăm textul pe care îl conține în Hello world.

Vom folosi emulatorul, pentru asta o vom face Conectare> Emulator.

Se va conecta și ne va spune să așteptăm câteva secunde, urmăm instrucțiunile pe care ni le va oferi mai jos.

Deoarece este prima dată când folosim emulatorul, acesta ne va cere să îl actualizăm și ne va arăta în emulator dacă dorim să instalăm actualizarea.

Odată instalat, facem clic pe „gata” și repornim conexiunea așa cum se spune în instrucțiuni.

Odată ce conexiunea a fost repornită, pornim emulatorul și ar trebui să ne arate proiectul la care lucrăm așa cum puteți vedea în imaginea următoare.

Odată ce am efectuat toți acești pași, vom avea emulatorul actualizat și toate proiectele noastre la care lucrăm pot fi văzute pe ecranul emulatorului.

NotăVă recomandăm ca înainte de a începe orice proiect să ne asigurăm că am pornit aiStarter, astfel încât să nu avem probleme la testarea aplicațiilor noastre și este necesar ca acesta să ruleze înainte de a executa emulatorul de pe pagină.

3. Prima aplicație în App Inventor 2

Acum, că avem totul în funcțiune, putem începe să lucrăm la el. Inventator de aplicații, atunci am să vă arăt cum să dezvolți câteva aplicații simple care ne va ajuta să avem o bază pentru a ne dezvolta propriile aplicații Android.

Pasul 1
Vom începe prin dezvoltarea unui calculator de bază, care ne permite să îndeplinim funcții matematice tipice, cum ar fi adunarea, scăderea, înmulțirea și împărțirea.

Pentru aceasta, mai întâi vom face Proiecte> Proiectele mele. Acolo facem clic pe începe un nou proiect, voi numi acest proiect Calculadora_Basica și apăsați butonul OK.

Acest lucru ne va redirecționa către zona de proiectare în care vom lucra cu proiectul nostru, primul lucru pe care îl vom face este să adăugăm patru butoane trăgându-le din paleta situată în stânga noastră.

Pasul 2
Acum vom schimba textul fiecăruia dintre butoane selectând componentele unul câte unul și modificând textul în proprietățile sale. După cum putem vedea, există proprietățile implicite pe care le are butonul pe care îl selectăm, aici putem modifica modul în care dorim să fie butonul. Pentru moment nu mă voi limita decât la schimbarea textului.

După modificarea textului, ar trebui să observați imediat modificările butonului pe care le modificăm în vizualizator.

Pasul 3
Acum, din motive estetice, voi folosi un aranjament orizontal pentru a organiza butoanele pe care le-am modificat anterior. Vom găsi acest lucru în paletă făcând clic pe aspect și glisând aspectul orizontal către vizualizator.

Pasul 4
Acum vom adăuga butoanele noastre unul câte unul către aspectul nostru orizontal. Ar trebui să avem așa ceva:

Pasul 5
Apoi adăugăm 2 casete de text, unde este locul vom introduce numerele necesare pentru a efectua operațiile noastre de bază de adunare, scădere, multiplicare și divizare. Pe lângă aceasta, vom adăuga și o etichetă pentru a afișa rezultatul operațiunilor noastre. Eticheta și câmpurile de text pot fi găsite în paletă făcând clic pe interfața utilizatorului. La final ar trebui să avem ceva similar cu următoarea imagine:

Pasul 6
Noi mergem spre "Blocuri”Pentru a începe configurarea funcțiilor butoanelor noastre. Pentru a merge, trebuie doar să faceți clic pe blocuri, în partea dreaptă a ecranului de lângă buton Designer.

Ar trebui să ne direcționeze către vizualizatorul de blocuri, unde putem vedea diferitele tipuri de blocuri pe care le putem folosi pentru aplicațiile noastre. Deocamdată va trebui să folosim butoanele încorporate pentru a defini ce funcție îndeplinesc atunci când fiecare dintre ele este apăsat.

Pentru a defini acțiunea pe care o efectuează fiecare buton, mai întâi vom începe cu butonul 1, care în cazul meu am schimbat textul la semnul plus (+) și vreau să definesc că de fiecare dată când este apăsat, adaugă sumele care se află în câmpul de text 1 și câmpul de text 2, pentru aceasta începem făcând clic pe butonul 1, apoi selectăm „când butonul 1 dă clic pe executare” și îl tragem în vizualizatorul nostru, ar trebui să arate astfel:

Pasul 7
Apoi adăugăm Label1, facem clic pe Label1 și tragem „puneți Label1 text ca” în vizualizator și îl legăm la „executare”. Ar trebui să fie așa.

Pasul 8
Acum să adăugăm funcția de adăugare, pentru aceasta facem clic pe Matematică și trageți returnează suma a două numere și o legăm de blocul de etichete.

Mai tarziu Vom adăuga câmpurile de text selectând TextField1, căutăm „TextField1 Text” și îl tragem pentru a-l lega cu blocul sumă. Primul spațiu pentru câmpul de text1 și pentru al doilea spațiu câmpul de text2. Efectuarea aceluiași proces ar trebui să fie ceva asemănător cu următoarea imagine:

Pasul 9
Acum repetăm procesele pe care le-am efectuat cu fiecare buton schimbând doar operațiile matematice la fiecare, până la urmă ar trebui să avem așa ceva:

Și în cele din urmă este timpul să testăm aplicația noastră, în cazul meu o voi testa în emulator pentru PC. Verificăm cum a fost aplicația noastră, putem testa dacă fiecare dintre butoane funcționează și dacă îndeplinesc funcțiile atribuite. În imaginea următoare puteți vedea o diviziune.

Cu aceasta încheiem prima noastră aplicație mobilă simplă cu operații matematice.

4. A doua aplicație în App Inventor 2

Acum vom face o aplicație care ne permite să salvăm și să vizualizăm date dintr-o bază de date tyniDB. TyniDB este o bază de date de documente ușoare, este scrisă în Python pur și nu are dependențe externe.

Pasul 1
Primul lucru pe care îl vom face este să creăm un nou proiect, îl vom numi List_BD:

Pasul 2
În el vom adăuga două dispoziții orizontale; În primul dintre ele adăugăm o etichetă și un câmp de text, în al doilea adăugăm două butoane, ar trebui să avem așa ceva:

Pasul 3
Vom selecta fiecare dintre prevederi, în proprietăți modificăm lățimea pentru a se potrivi containerului. În plus, selectăm o etichetă și schimbăm textul pentru a introduce date și în butoane vom apela una „Înregistrare nouă” și a doua „salvare” ar trebui să fie astfel:

Pasul 4
Acum vom adăuga un vizualizator de listă în partea de jos, la care în proprietăți vom selecta opțiunea de lățime care se potrivește containerului și în înălțime vom pune 300px, vom avea așa ceva:

Pasul 5
Să adăugăm baza noastră de date TinyDB găsită la palet> depozitare și tragem TinyBD în vizualizatorul nostru de liste, astfel:

Pasul 6
Acum vom merge la blocuri și primul lucru pe care îl vom face este să adăugăm o variabilă globală care este de tip text. Pentru aceasta, mai întâi vom face blocuri> încorporate> variabile și de acolo tragem „inițializează global ca” și apoi mergem la text în blocuri> încorporat> text, tragem șirul de text și îl legăm cu „inițializează global”.

Pasul 7
Vom configura ce acțiune va efectua butonul pe care îl numim o nouă înregistrare, care va îndeplini funcția de a pune caseta noastră de text în alb, pentru aceasta vom face blocuri> Aspect orizontal2> Buton1 și tragem când butonul 1 face clic pe vizualizatorul nostru de blocuri, apoi mergem la blocuri> Aranjament orizontal1> Câmp text1, glisăm pune TextField1.Text ca, legându-l cu whenButton1.Clic și, în final, căutăm un șir de text și îl legăm cu „TextField1.Text ca”, rezultând următoarea imagine:

Pasul 8
Acum vom configura butonul Salvare pentru a adăuga date la lista noastră, pentru aceasta căutăm butonul 2 și îl tragem în vizualizatorul nostru. Apoi mergem la Blocuri> Listă> adăugare element de listat și unde scrie lista, ne conectăm la o captură care se află în Blocuri> Variabile> Ia și o conectăm făcând clic pentru a selecta datele din Lista globală. În cele din urmă, în cazul în care elementul apare în blocul nostru pentru a adăuga elementul la listă, plasăm un bloc din TextBox 1. Text, ar trebui să arate cam așa:

Pasul 9
Acum vom adăuga valorile la baza noastră de date, pentru aceasta primul lucru pe care trebuie să-l facem este să căutăm în Blocuri> Ecran1> TinyBD, tragem apelul TinyBD1.SaveValue și îl conectăm cu blocul nostru Button2, urmat de acesta, în etichetă, plasăm ceea ce vom salva, în acest caz vom salva numai nume, pentru aceasta căutăm un bloc de text, îl conectăm în eticheta și punem Nume, apoi din aceasta plasăm valoarea de salvat astfel încât să o scoată din lista globală așa cum am făcut în blocul de adăugare de elemente.

Pasul 10
Trebuie doar să-l afișăm în vizualizatorul de liste, pentru aceasta îl conectăm cu Button2, la care vom merge Blocuri> Ecran1> ListViewer1 și tragem pune ListViewer1.Elements în timp ce facem legătura cu Listă globală, afișând ceva de genul acesta:

Pasul 11
După cum ne amintim, cel mai bun lucru despre a avea o bază de date este că puteți închide aplicația și datele pe care le-ați salvat acolo vor fi stocate, disponibile pentru momentul în care începeți o nouă sesiune. Pentru a face acest lucru, ne vom asigura că, atunci când Screen1 pornește, baza de date este adăugată din nou la o listă și reapare în vizualizatorul listei.

Pentru a face acest lucru trebuie doar să mergem la Blocuri> Ecran1 și trageți blocul „când Screen1.initialize to execute” în vizualizatorul nostru de blocuri și la acesta vom lega variabila „put” găsită în Blocuri> Integrat> Variabile, tragem „pune” și în acel bloc selectăm Listă globală la aceasta vom lega din TinyBD1 „apel TinyBD1. GetValue ”, în etichetă vom adăuga blocul de text la care vom pune Name și în Value dacă eticheta nu există creăm o listă goală care se găsește șin Blocuri> Listă> Creați o nouă listă goală. Cu aceasta, ceea ce obținem este că toate datele sunt salvate într-o nouă listă.

Pentru a ne arăta datele în vizualizatorul listei, ce trebuie să facem face legătura între „când Screen1.initialize” cu „Set ListView1.Elements as”, care la rândul său este asociat cu „Take global List”, așa cum am făcut în blocul anterior.