✅ Razvijajte Android aplikacije s App Inventor 2

Sadržaj

1. Instaliranje App Inventor 2
2. Pokretanje App Inventor 2
3. Prva aplikacija u App Inventoru 2
4. Druga aplikacija u App Inventoru 2

App Inventor 2 je platforma koja nam to omogućuje omogućuje razvoj softverskih aplikacija za Android, Ovo je stvaranje Google Labs -a, ovdje možemo vizualizirati projekte u kojima radimo s različitim vrstama osnovnih alata, jedna od velikih prednosti koje donosi App Inventor 2 je to što korisnik može povezati niz blokova za izradu aplikacije . Ovaj sustav je potpuno besplatno i jednostavno preuzeti s vlastite web stranice. Aplikacije koje možemo stvoriti u App Inventoru donekle su ograničene svojom jednostavnošću, iako ovdje također možemo potrošiti puno vremena na razvoj beskonačnih aplikacija za osnovne Android uređaje.

Uz Google App Inventor demonstrirana je velika jednostavnost korištenja koja je olakšala izgled a veliki broj novih aplikacija; Danas ima mnogo korisnika koji razvijaju aplikacije u distribucijskom centru za Android aplikacije zahvaljujući tome.

Što nam omogućuje App Inventor 2?Izradite aplikacije za uređaje koji imaju Android sustav pomoću web preglednika i povezanog telefona ili emulatora. Poslužitelji App Inventor pohranjuju vaš rad i prate vaše projekte.

To je vrlo jednostavan za korištenje vizualni razvojni alat, pa mnogi korisnici ovog alata nisu samo programeri.

S čime gradimo naše aplikacije u App Inventoru 2?App Inventor Designer je aplikacija koja se koristi za odabir komponenti za App Inventor, nudi nam paletu koja sadrži veliki broj alata s kojima možete raditi s velikom jednostavnošću.

Uređivač blokova izumitelja aplikacija omogućuje nam povezivanje različitih vrsta blokova s kojima možemo definirati funkcije onoga što osmišljavamo u našoj aplikaciji. Jedna od prednosti je jednostavan i vizualni način prikaza posla koji radimo u obliku slagalice.

Je li jednostavno izraditi aplikacije pomoću App Inventor 2?Različite aplikacije koje se s vremenom pojavljuju na Android uređajima pokazale su nam da postoji obilje aplikacija u kojima možemo raditi, bilo da su osnovne ili komplicirane. Aplikacija Inventor 2 omogućuje nam rad s jednostavnošću što znači da ne morate biti programer da biste radili u okruženju velike jednostavnosti, bilo rad s paletom alata ili skupom blokova s kojima se možemo nositi praktički poput zagonetke. Povrh svega, nakon završetka projekta možete zapakirati svoju aplikaciju i izraditi zasebnu aplikaciju za instalaciju.

Još jedna prednost koju vam nudi je ta ne morate nužno imati telefon s Android operativnim sustavom, budući da sa stranice App Inventor možete preuzeti softver zvan aiStarter koji će vam omogućiti oponašanje s vašeg računala.

Kako pristupiti aplikaciji Inventor 2?Da biste pristupili, prvo što morate učiniti je registrirati se u App Inventor, koristeći svoj Gmail račun. Važno je znati da je ovaj proces potpuno besplatan.

Zahtjevi sustava, uređaja ili preglednika

Operacijski sustavi

Macintosh: Mac OS X 10.5 ili novija verzija.
Windows: Windows XP, Windows Vista, Windows 7
GNU / Linux: Ubuntu 8 ili noviji, Debian 5 ili noviji

Preglednici

Mozilla Firefox 3.6 ili novija
Apple Safari 5.0 ili noviji
Google Chrome 4.0 ili noviji
Microsoft Internet Explorer to ne podržava

Telefoni i tablet uređaji

Android operativni sustav 2.3 ("medenjak") ili noviji

1. Instaliranje App Inventor 2

Prije svega moramo to znati Aplikacija Inventor 2 omogućuje vam oblikovanje i uređivanje u blokovima kao što smo već spomenuli i sve ovo radi u vašem pregledniku. No, da bismo testirali na čemu radimo (Testirajte ga uživo), imamo tri mogućnosti dok gradimo našu aplikaciju:

opcija 1Stranica appinventor koju najviše preporučuje stranica je ako imate uređaj koji koristi android i imate bežičnu internetsku vezu (WiFi), možemo raditi samo instaliranjem aplikacije App Inventor na naš Android uređaj.

Opcija 2Druga je mogućnost da se instalirajte softver na naše računalo kako biste mogli koristiti android emulator i testirati naše aplikacije dok ih izrađujemo.

Opcija 3U ovoj je opciji najkompliciraniji i najspretniji; Ako je naš operacijski sustav Windows i imamo android uređaj, ali nemamo bežičnu mrežu (WiFi), možemo instalirajte softver na naše računalo i povežite naš Android uređaj putem USB -a. Na stranici možemo vidjeti kako se ova opcija koristi kao posljednje sredstvo zbog svoje očite složenosti.

Nakon što saznamo različite mogućnosti koje imamo pri instaliranju App Inventor 2, objasnit ću korak po korak kako izvesti svaku od ovih opcija:

opcija 1: Povezivanje App Inventor 2 s Android uređajem putem bežične veze (WiFi)

Korak 1
Preuzmite i instalirajte aplikaciju MIT AI2 Companion na svoj Android uređaj. U ovoj opciji samo biste morali na svom Android uređaju potražiti aplikaciju "MIT AI2 Companion" iz PlayStorea, preuzeti i instalirati ili je možete preuzeti i izravno iz APK datoteke. Najviše se preporučuje preuzimanje s PlayStorea jer ćemo, ako preuzmemo APK datoteku, morati omogućiti u konfiguraciji našeg Android uređaja mogućnost dopuštanja instalacije aplikacija iz nepoznatih izvora. Ova se opcija može pronaći u verzijama Androida prije 4.0, za to ćemo i ići Postavke> Aplikacije i označite okvir " Nepoznati izvori". Za uređaje s Androidom 4.0 ili novijim, morate otići na Postavke> Sigurnost ili Postavke> Sigurnost i zaključavanje zaslonai odaberite "Nepoznati izvori".

Ovdje ostavljam odgovarajuće QR kodove za preuzimanje s Playstorea ili izravno kao APK datoteku, ako vam treba QR skener, možemo ga potražiti u Playstoreu.

Trgovina igračaka

APK datoteka

BilješkaUzmite u obzir da ćemo ga, ako ga preuzmemo s PlayStorea, automatski ažurirati i ako upotrijebimo mogućnost izravnog preuzimanja, morat ćemo ga ažurirati ručno.

Korak 2
Povežite računalo s istom WiFi mrežom kao i vaš Android uređaj. App Inventor automatski će prikazati aplikaciju koju izrađujete, samo ako App Inventor radi na vašem računalu i ako je Companion pokrenut na vašem Android uređaju, a ova dva su povezana na istu Wi-Fi mrežu.

Korak 3
Kako povezati projekt na kojem radimo s našim Android uređajem. Odlazimo na stranicu izumitelja aplikacija i otvorimo projekt s kojim ćemo raditi, u glavnom izborniku odaberemo "Connect" i "Al Companion".

Pokazat će nam se dijaloški okvir s QR kodom, tražimo svoj uređaj, pokrećemo aplikaciju MIT App Companion, a zatim kliknemo gumb "Skeniraj QR kôd" skeniramo kod:

Nakon što smo pričekali nekoliko sekundi, trebali bismo moći vidjeti projekt na kojem radimo, a on će biti ažuriran u skladu s izmjenama koje u njega unosimo.

Opcije 2 i 3: Instalirajte App Inventor na naše računalo s operativnim sustavom Windows
Ovdje je instalacija ista za oba slučaja.

Korak 1
Prvo što moramo učiniti je preuzeti instalacijski program MIT_App_Inventor_Tools_2.3.0_win_setup.exe To možemo učiniti pristupom sljedećoj poveznici. Nakon preuzimanja instalacijskog programa, pokrećemo ga.

Pojavit će se ovaj prozor, mi ćemo kliknuti na Dalje>.

Tada ćemo prihvatiti licencni ugovor klikom na slažem se.

Korak 2
Odabiremo želimo li instalirati program samo za jednog korisnika ili za sve korisnike i kliknemo na Dalje>.

Odabiremo komponente koje želimo instalirati i kliknemo Dalje>.

Odabiremo gdje ćemo ga instalirati i kliknemo Dalje>.

Korak 3
Odaberemo početnu mapu i pritisnemo Instalirati.

Čekamo nekoliko sekundi da instalirate MIT App Inventor Tools 2.3.0.

Nakon što je instalacijski proces završen, možemo kliknuti Završi i ovim ćemo završiti instalaciju.

Korak 4
Da ostavljamo odabranu opciju Pokreni aiStarter alat sada Trebao bi se pojaviti prozor aiStarter gdje će u prvom retku naznačiti operacijski sustav na kojem radimo, u drugom retku gdje se nalazi mapa u kojoj je instaliran, u trećem retku poslužitelj na kojem je pokrenut, u četvrtom retku to je pronaći IP adresu na kojoj je aplikacija aktivna. Da biste zatvorili pokretanje aiStartera, pritisnite Ctrl + C.

BilješkaAiStarter se mora pokrenuti kad god ćemo raditi s App Inventor 2. Ako ne koristimo WiFi bežičnu mrežnu vezu, ikona aiStarter bi se trebala pojaviti na radnoj površini nakon instalacije.

2. Pokretanje App Inventor 2

Prvi korak
Prije svega moramo pokrenuti aiStarter klikom na ikonu koja se nalazi na radnoj površini.

Ovo će pokrenuti prozor aiStarter.

Drugi korak
Nakon pokretanja aiStartera idemo na stranicu inventara i kliknemo na Stvori aplikacije!

Od vas će se tražiti pristup vašem Gmail računu. Nakon toga će od nas tražiti dopuštenja za pristup našem računu, ovdje odabiremo Neka. Tada će nam pokazati uvjete usluga. Prihvaćamo uvjete, a zatim će nas pitati želimo li ispuniti anketu, a onda će nas dočekati. Kliknemo na nastaviti.

Ako želimo, kako bismo nam sve olakšali, možemo odabrati jezik prije nego što počnemo uspostavljati prvu vezu.

Treći korak
Sada ćemo započeti novi projekt.

Dajemo ime ovom novom projektu, u mom slučaju ja ću mu dati Test_1 i prihvaćamo.

Automatski će nas odvesti do projekta koji smo upravo stvorili i pokazati nam alate i ono što ćemo koristiti.

Četvrti korak
Sad kad ćemo pokrenuti emulator, napravit ću samo jednostavnu aplikaciju koja prikazuje oznaku s tipičnim "Hello world". Za to povlačimo oznaku s palete i mijenjamo tekst koji sadrži u Hello world.

Za to ćemo koristiti emulator Connect> Emulator.

Povezat će se i reći nam da pričekamo nekoliko sekundi, slijedimo upute koje će nam dati u nastavku.

Budući da prvi put koristimo emulator, od nas će se tražiti da ga ažuriramo, a u emulatoru će nam se prikazati želimo li instalirati ažuriranje.

Nakon instalacije kliknemo na "dovršeno" i ponovno pokrenemo vezu prema uputama.

Nakon što se veza ponovno pokrene, pokrećemo emulator i trebao bi nam pokazati projekt na kojem radimo, kao što možete vidjeti na sljedećoj slici.

Nakon što provedemo sve ove korake, emulator ćemo ažurirati, a svi naši projekti na kojima radimo mogu se vidjeti na ekranu emulatora.

BilješkaPreporučujem da prije početka bilo kojeg projekta provjerimo da li smo pokrenuli aiStarter kako ne bismo imali problema pri testiranju naših aplikacija i potrebno je da se on pokrene prije izvođenja emulatora na stranici.

3. Prva aplikacija u App Inventoru 2

Sad kad smo sve pokrenuli, možemo početi raditi na tome. Izumitelj aplikacije, onda ću vam pokazati kako razviti neke jednostavne aplikacije to će nam pomoći da imamo bazu za razvoj vlastitih Android aplikacija.

Korak 1
Počet ćemo s razvijanjem osnovnog kalkulatora koji nam omogućuje izvršavanje tipičnih matematičkih funkcija poput zbrajanja, oduzimanja, množenja i dijeljenja.

Za to ćemo prvo Projekti> Moji projekti. Tamo kliknemo na pokretanje novog projekta, nazvat ću ovaj projekt Calculadora_Basica i pritisnite gumb OK.

Ovo će nas preusmjeriti na područje dizajna gdje ćemo raditi s našim projektom, prvo što ćemo učiniti je dodati četiri gumba povlačenjem iz palete koja se nalazi s naše lijeve strane.

Korak 2
Sada ćemo promijeniti tekst svakog od gumba odabirom komponenti jednu po jednu i modificiranjem teksta u njegovim svojstvima. Kao što vidimo, postoje zadana svojstva koja gumb koji odaberemo ima, ovdje možemo promijeniti način na koji želimo da gumb bude. Za sada ću se ograničiti samo na promjenu teksta.

Nakon izmjene teksta, odmah biste trebali primijetiti promjene u gumbu koji mijenjamo u pregledniku.

Korak 3
Sada ću iz estetskih razloga upotrijebiti vodoravni raspored za organiziranje gumba koje smo prethodno izmijenili. To ćemo pronaći u paleti klikom na izgled i povlačenjem vodoravnog izgleda prema gledatelju.

Korak 4
Sada ćemo dodavati naše gumbe jedan po jedan prema vodoravnom izgledu. Trebali bismo imati ovako nešto:

Korak 5
Zatim dodajemo 2 tekstualna polja gdje se nalazi uvest ćemo potrebne brojeve za obavljanje naših osnovnih operacija zbrajanja, oduzimanja, množenja i dijeljenja. Osim ovoga, dodat ćemo i oznaku za prikaz rezultata naših operacija. Oznaka i tekstualna polja mogu se pronaći u paleti klikom na korisničko sučelje. Na kraju bismo trebali imati nešto slično sljedećoj slici:

Korak 6
Mi ćemo "Blokovi”Za početak konfiguriranja funkcija naših gumba. Da biste otišli, samo morate kliknuti blokove na desnoj strani zaslona pored gumba Dizajner.

Trebao bi nas uputiti na preglednik blokova gdje možemo vidjeti različite vrste blokova koje možemo koristiti za naše aplikacije. Zasad ćemo samo morati koristiti ugrađene gumbe za definiranje koje funkcije obavljaju kada se pritisne svaki od njih.

Kako bismo definirali radnju koju svaki gumb izvodi, prvo ćemo početi s gumbom1, koji sam u mom slučaju promijenio u znak plus (+) i želim definirati da svaki put kad se pritisne, dodaje iznose koji su u tekstualno polje 1 i tekstualno polje 2, za to počinjemo klikom na button1, zatim odabiremo "when button1 click execute" i povlačimo ga u naš preglednik, to bi trebalo izgledati ovako:

Korak 7
Zatim dodamo Label1, kliknite na Label1 i povucite "stavi Label1 tekst kao" u preglednik i povežite ga sa "izvrši". Trebalo bi biti ovako.

Korak 8
Sada dodajmo funkciju zbrajanja, za to ćemo kliknuti na Matematiku i povući vratiti zbroj dva broja i povezati ga s blokom naljepnica.

Kasnije Dodati ćemo tekstualna polja odabirom TextField1, tražimo "TextField1 Text" i povlačimo ga da ga povežemo s blokom zbroja. Prvi prostor za tekstualno polje1, a za drugi prostor tekstualno polje2. Izvođenje istog procesa trebalo bi biti nešto poput sljedeće slike:

Korak 9
Sada ponavljamo procese koje smo proveli sa svakim gumbom samo mijenjajući matematičke operacije u svaku, na kraju bismo trebali imati nešto poput ovoga:

I konačno je vrijeme za testiranje naše aplikacije, u mom slučaju testirat ću je u emulatoru za PC. Provjeravamo kako je naša aplikacija bila, možemo testirati radi li svaki od gumba i ispunjavaju li dodijeljene funkcije. Na sljedećoj slici možete vidjeti podjelu.

Time zaključujemo našu prvu jednostavnu mobilnu aplikaciju s matematičkim operacijama.

4. Druga aplikacija u App Inventoru 2

Sada ćemo napraviti aplikaciju koja nam omogućuje spremanje i pregled podataka iz baze podataka tyniDB. TyniDB je lagana baza dokumenata, napisana je na čistom Pythonu i nema vanjskih ovisnosti.

Korak 1
Prvo što ćemo učiniti je stvoriti novi projekt, nazvat ćemo ga List_BD:

Korak 2
U to ćemo dodati dvije horizontalne odredbe; U prvom od njih dodajemo oznaku i tekstualno polje, u drugom dodajemo dva gumba, trebali bismo imati nešto poput ovoga:

Korak 3
Odabrat ćemo svaku odredbu, u svojstvima mijenjamo širinu tako da odgovara spremniku. Osim toga, odabiremo oznaku i mijenjamo tekst za unos podataka, a u gumbima ćemo je nazvati "Novi zapis" i drugi "spremi" trebali bi izgledati ovako:

Korak 4
Sada ćemo dodati preglednik popisa na dnu, u koji ćemo u svojstvima odabrati opciju širine koja odgovara spremniku, a u visinu ćemo staviti 300 piksela, imat ćemo nešto poput ovoga:

Korak 5
Dodajmo našu bazu podataka TinyDB koja se nalazi na paleta> skladištenje i povlačimo TinyBD u preglednik popisa, ovako:

Korak 6
Sada idemo na blokove i prvo što ćemo učiniti je dodati globalnu varijablu koja je tipa text. Za to ćemo prvo blokovi> ugrađene> varijable i odatle povlačimo "inicijaliziraj globalno kao", a zatim idemo na tekst u blokovi> ugrađeni> tekst, povlačimo tekstualni niz i povezujemo ga s "initialize global".

Korak 7
Konfigurirat ćemo koju će radnju izvršiti gumb koji zovemo novi zapis, koji će ispuniti funkciju stavljanja našeg tekstualnog okvira u bijelo, za to ćemo blokovi> Horizontalni raspored2> Gumb1 i povučemo kada Button1 klikne na naš blok preglednik, zatim idemo na blokovi> Horizontalni aranžman1> Tekstualno polje1, povlačimo stavku TextField1.Text as, povezujući je s kadaButton1.Clic i na kraju tražimo tekstualni niz i povezujemo ga sa "TextField1.Text as", što rezultira sljedećom slikom:

Korak 8
Sada ćemo konfigurirati naš gumb Spremi za dodavanje podataka na naš popis, za to tražimo naš gumb 2 i povlačimo ga u naš preglednik. Zatim idemo na Blokovi> Popis> dodaj stavku na popis a gdje piše popis, povezujemo se s prikazom koji se nalazi u Blokovi> Varijable> Uzmi i povezujemo ga klikom za odabir podataka s globalnog popisa. Konačno, tamo gdje se stavka pojavljuje u našem bloku za dodavanje elementa na popis, postavljamo blok iz našeg TextBox1.Text, trebao bi izgledati otprilike ovako:

Korak 9
Sada ćemo dodati vrijednosti u našu bazu podataka, jer ovo prvo što moramo učiniti je pretražiti Blokovi> Zaslon1> TinyBD, povlačimo poziv TinyBD1.SaveValue i povezujemo ga s našim blokom Button2, nakon čega slijedi ovo, u oznaku stavljamo ono što ćemo spremiti, u ovom slučaju spremamo samo imena, za to tražimo tekstualni blok, povezujemo ga u oznaku i stavljamo Name, zatim od toga postavljamo vrijednost za spremanje tako da je preuzme s globalnog popisa kao što smo učinili u bloku dodavanja elemenata.

Korak 10
Moramo ga samo prikazati u pregledniku popisa, jer ovo povezujemo s gumbom 2, na što ćemo Blokovi> Zaslon1> ListViewer1 i povlačimo stavku ListViewer1.Elementi dok povezujemo uzimaju globalni List, prikazujući nešto poput ovoga:

Korak 11
Kao što se možemo sjetiti, najbolja stvar u vezi s bazom podataka je to što možete zatvoriti svoju aplikaciju i podaci koje ste tamo spremili bit će pohranjeni, dostupni za početak nove sesije. Kako bismo to učinili, pobrinut ćemo se da se pri pokretanju zaslona Screen1 baza podataka ponovno doda na popis i da se ponovno pojavi u pregledniku popisa.

Da bismo to učinili, samo moramo otići na Blokovi> Zaslon1 i povucite blok "when Screen1.initialize to execute" u naš preglednik blokova i na to ćemo povezati varijablu "put" koja se nalazi u Blokovi> Integrirano> Varijable, povlačimo “put” i u tom bloku odabiremo globalni popis na koji ćemo povezati iz TinyBD1 “poziv TinyBD1. GetValue ”, u oznaku ćemo dodati tekstualni blok u koji ćemo staviti naziv, a u vrijednost ako oznaka ne postoji, stvaramo prazan popis koji je pronađen in Blokovi> Popis> Izradi novi prazan popis. Time dobivamo da su svi podaci spremljeni na novi popis.

Da bismo nam prikazali podatke u pregledniku popisa, ono što moramo učiniti povezuje "kada se Screen1.initialize" poveže s "Postavi ListView1.Elements kao" što je pak povezano s "Uzmi globalni popis" kao što smo to učinili u prethodnom bloku.