✅ Utvikle Android -applikasjoner med App Inventor 2

Innholdsfortegnelse

1. Installere App Inventor 2
2. Kjører App Inventor 2
3. Første applikasjon i App Inventor 2
4. Andre applikasjon i App Inventor 2

App Inventor 2 er en plattform som tillater oss gjør det mulig å utvikle programvare for Android, Dette er en opprettelse av Google Labs, her kan vi visualisere prosjektene vi jobber med forskjellige typer grunnleggende verktøy, en av de store fordelene App Inventor 2 gir er at brukeren kan koble en serie blokker for å lage programmet . Dette systemet er helt gratis og enkelt lastet ned fra ditt eget nettsted. Applikasjonene vi kan lage i App Inventor er noe begrenset av enkelheten, selv om vi her også kan bruke mye tid på å utvikle endeløse applikasjoner for grunnleggende Android -enheter.

Med Google App Inventor ble det vist en enkel brukervennlighet som har gjort utseendet til en stort antall nye applikasjoner; I dag er det mange brukere som utvikler applikasjoner i distribusjonssenteret for Android -apper takket være dette.

Hva lar App Inventor 2 oss gjøre?Lag applikasjoner for enheter som har et Android -system ved hjelp av en nettleser og en tilkoblet telefon eller emulator. App Inventor -servere lagrer arbeidet ditt og holder orden på prosjektene dine.

Det er et veldig lett å bruke visuelt utviklingsverktøy, så mange av brukerne av dette verktøyet er ikke bare programmerere.

Hva bygger vi applikasjonene våre med i App Inventor 2?App Inventor Designer er applikasjonen som brukes til å velge komponentene for App Inventor, den tilbyr oss en palett som inneholder et stort antall verktøy som du kan jobbe med stor enkelhet.

App Inventor Blocks Editor lar oss koble de forskjellige typene blokker som vi kan definere funksjonene til det vi designer i applikasjonen vår. En av fordelene er den enkle og visuelle måten å vise arbeidet vi gjør i form av et puslespill.

Er det enkelt å bygge applikasjoner med App Inventor 2?De forskjellige programmene som vises over tid på Android -enheter har vist oss at det er en overflod av applikasjoner vi kan jobbe i, enten de er enkle eller kompliserte. Inventor 2 -appen lar oss jobbe med en enkelhet som betyr at du ikke trenger å være programmerer for å jobbe i et miljø med stor enkelhet. arbeider med en verktøypalett eller et sett med blokker som vi kan håndtere praktisk talt som et puslespill. På toppen av alt det, når prosjektet er fullført, kan du pakke søknaden din og lage en egen applikasjon som skal installeres.

En annen fordel det gir deg er det du trenger ikke nødvendigvis å ha en telefon med et Android -operativsystem, siden du fra App Inventor -siden kan laste ned en programvare som kalles aiStarter som lar deg etterligne den fra PCen.

Hvordan få tilgang til App Inventor 2?For å få tilgang, er det første du må gjøre å registrere deg i App Inventor ved å bruke Gmail -kontoen din. Det er viktig å vite at denne prosessen er helt gratis.

System, enhet eller nettleserkrav

Operativsystemer

Macintosh: Mac OS X 10.5 eller nyere.
Windows: Windows XP, Windows Vista, Windows 7
GNU / Linux: Ubuntu 8 eller nyere, Debian 5 eller høyere

Nettlesere

Mozilla Firefox 3.6 eller nyere
Apple Safari 5.0 eller nyere
Google Chrome 4.0 eller nyere
Microsoft Internet Explorer støtter det ikke

Telefoner og nettbrett

Android -operativsystem 2.3 ("Pepperkaker") eller nyere

1. Installere App Inventor 2

Først og fremst må vi vite det Med Inventor 2 -appen kan du designe og redigere i blokker som vi allerede har nevnt, og alt dette kjører i nettleseren din. Men for å teste det vi jobber med (Test det live) har vi tre alternativer mens vi bygger applikasjonen vår:

valg 1Den mest anbefalte av appinventor -siden er hvis du har en enhet som bruker android og du har en trådløs internettforbindelse (WiFi), kan vi bare jobbe ved å installere App Inventor -appen på Android -enheten vår.

Alternativ 2Det andre alternativet er å installere programvaren på datamaskinen vår for å kunne bruke Android -emulatoren og teste applikasjonene våre mens vi bygger dem.

Alternativ 3I dette alternativet er det det mest kompliserte og tungvint; Hvis operativsystemet vårt er Windows og vi har en Android -enhet, men vi ikke har et trådløst nettverk (WiFi), kan vi installer programvaren på datamaskinen vår og koble til Android -enheten vår via USB. På siden kan vi se hvordan dette alternativet brukes som en siste utvei på grunn av sin åpenbare kompleksitet.

Når vi kjenner de forskjellige alternativene vi har når vi installerer App Inventor 2, vil jeg forklare trinn for trinn hvordan du utfører hvert av disse alternativene:

valg 1: Koble App Inventor 2 til Android -enheten din via trådløs tilkobling (WiFi)

Trinn 1
Last ned og installer MIT AI2 Companion -appen på Android -enheten din. I dette alternativet trenger du bare å søke på Android -enheten din etter "MIT AI2 Companion" -appen fra PlayStore, laste ned og installere den, eller du kan også laste den ned direkte fra APK -filen. Det mest tilrådelige er å laste den ned fra PlayStore, siden hvis vi laster ned APK -filen, må vi aktivere muligheten for installasjon av programmer fra ukjente kilder i konfigurasjonen av Android -enheten vår. Dette alternativet finnes i Android -versjoner før 4.0, for dette skal vi Innstillinger> Programmer og merk av i boksen " Ukjente kilder". For enheter med Android 4.0 eller nyere må du gå til Innstillinger> Sikkerhet eller Innstillinger> Sikkerhet og Skjermlås, og velg "Ukjente kilder".

Her lar jeg de respektive QR -kodene for å laste den ned fra Playstore eller direkte som en APK -fil, hvis du trenger en QR -skanner kan vi se etter en i Playstore.

PlayStore

APK -fil

MerkTa i betraktning at hvis vi laster det ned fra PlayStore, oppdateres det automatisk, og hvis vi bruker alternativet til å laste det ned direkte, må vi oppdatere det manuelt.

Steg 2
Koble PC -en til det samme WiFi -nettverket som Android -enheten din. App Inventor viser programmet du bygger automatisk, bare hvis App Inventor kjører på datamaskinen din og hvis Companion kjører på Android-enheten din og disse 2 er koblet til det samme Wi-Fi-nettverket.

Trinn 3
Hvordan koble prosjektet vi jobber med til Android -enheten vår. Vi går til App Inventor -siden og vi åpner prosjektet som vi skal jobbe med, vi velger "Connect" og "Al Companion" i hovedmenyen.

Det vil vise oss en dialog med en QR -kode, vi ser etter enheten vår, vi kjører MIT App Companion -applikasjonen, og deretter klikker vi på knappen "Skann QR kode" og vi skanner koden:

Etter å ha ventet noen sekunder, bør vi kunne se prosjektet vi jobber med, og det vil bli oppdatert i henhold til endringene vi gjør.

Alternativ 2 og 3: Installer App Inventor på datamaskinen vår med operativsystem Windows
Her er installasjonen den samme for begge tilfeller.

Trinn 1
Det første vi må gjøre er å laste ned installasjonsprogrammet MIT_App_Inventor_Tools_2.3.0_win_setup.exe Vi kan gjøre dette ved å gå til følgende lenke. Etter at vi har lastet ned installasjonsprogrammet, kjører vi det.

Dette vinduet vil vises, vi klikker på Neste>.

Deretter godtar vi lisensavtalen ved å klikke jeg er enig.

Steg 2
Vi velger om vi vil installere programmet bare for én bruker eller for alle brukere og klikker på Neste>.

Vi velger komponentene vi vil installere og klikker Neste>.

Vi velger hvor vi skal installere det og klikker Neste>.

Trinn 3
Vi velger hjemmemappen og trykker på Installere.

Vi venter noen sekunder på at du skal installere MIT App Inventor Tools 2.3.0.

Etter at installasjonsprosessen er fullført, kan vi klikke Bli ferdig og med dette vil vi ha fullført installasjonen.

Trinn 4
Ja Vi lar alternativet Start aiStarter nå være valgt Et aiStarter -vindu skal vises der det på første linje vil indikere operativsystemet der vi jobber, på den andre linjen hvor mappen der den er installert er plassert, på den tredje linjen serveren der den kjører, på den fjerde linjen det er å finne IP -adressen der applikasjonen er aktiv. For å lukke aiStarter -kjøringen, trykk Ctrl + C.

MerkAiStarter må kjøres hver gang vi skal jobbe med App Inventor 2. Hvis vi ikke bruker den trådløse WiFi -tilkoblingen, bør aiStarter -ikonet vises på skrivebordet etter installasjon.

2. Kjører App Inventor 2

Første skritt
Først av alt må vi starte aiStarter ved å klikke på ikonet som ligger på skrivebordet.

Dette starter aiStarter -vinduet.

Andre trinn
Etter at vi har startet aiStarter, går vi til siden med appinventory og klikker på Create apps!

Det vil be deg om å få tilgang til Gmail -kontoen din. Etter dette vil det be oss om tillatelser til å få tilgang til kontoen vår, her velger vi La. Da vil det vise oss vilkårene for tjenester. Vi godtar vilkårene, og så vil han spørre oss om vi vil fylle ut en undersøkelse, og så vil han ønske oss velkommen. Vi klikker videre Fortsette.

Hvis vi vil, for å gjøre alt enklere for oss, kan vi velge språk før vi begynner å lage vår første forbindelse.

Tredje trinn
Nå skal vi starte et nytt prosjekt.

Vi gir et navn til dette nye prosjektet, i mitt tilfelle vil jeg gi det Test_1 og vi godtar.

Det vil automatisk ta oss til prosjektet vi nettopp opprettet og vise oss verktøyene og hva vi skal bruke.

Fjerde trinn
Nå som vi skal kjøre emulatoren, vil jeg bare lage et enkelt program som viser en etikett med den typiske "Hei verden" for dette, vi drar en etikett fra paletten og endrer teksten den inneholder til Hello world.

Vi skal bruke emulatoren, for dette skal vi Koble til> Emulator.

Den vil koble seg til og fortelle oss å vente noen sekunder, vi følger instruksjonene som den vil gi oss nedenfor.

Siden det er første gang vi bruker emulatoren, vil den be oss om å oppdatere den, og den vil vise oss i emulatoren om vi vil installere oppdateringen.

Når den er installert klikker vi på "ferdig" og starter tilkoblingen på nytt som instruksjonene sier.

Når tilkoblingen er startet på nytt, starter vi emulatoren, og den skal vise oss prosjektet vi jobber med som du kan se på bildet nedenfor.

Når vi har utført alle disse trinnene, vil vi få emulatoren oppdatert og alle prosjektene vi jobber med kan sees på emulatorskjermen.

MerkJeg anbefaler at vi, før vi starter et prosjekt, sørger for at vi har startet aiStarter slik at vi ikke har problemer når vi tester applikasjonene våre, og det er nødvendig at det kjører før du utfører emulatoren på siden.

3. Første applikasjon i App Inventor 2

Nå som vi har alt i gang kan vi begynne å jobbe med det. App -oppfinner, så skal jeg vise deg hvordan du utvikler noen enkle applikasjoner som vil hjelpe oss med å ha en base for å utvikle våre egne Android -applikasjoner.

Trinn 1
Vi starter med å utvikle en grunnleggende kalkulator, som lar oss utføre typiske matematiske funksjoner som å legge til, trekke fra, multiplisere og dividere.

For dette, først vil vi Prosjekter> Mine prosjekter. Der klikker vi på start et nytt prosjekt, jeg skal navngi dette prosjektet Calculadora_Basica og trykk OK -knappen.

Dette vil omdirigere oss til designområdet der vi skal jobbe med prosjektet vårt. Det første vi skal gjøre er å legge til fire knapper ved å dra dem fra paletten som ligger til venstre for oss.

Steg 2
Nå skal vi endre teksten til hver av knappene ved å velge komponenter en etter en og endre teksten i dens egenskaper. Som vi kan se, er det standardegenskapene som knappen vi velger har, her kan vi endre hvordan vi vil at knappen skal være. For øyeblikket vil jeg bare begrense meg til å endre teksten.

Etter å ha endret teksten, bør du umiddelbart legge merke til endringene i knappen som vi endrer i visningen.

Trinn 3
Av estetiske årsaker skal jeg bruke et horisontalt arrangement for å organisere knappene som vi tidligere har endret. Vi finner dette i paletten ved å klikke på layout og dra horisontalt layout mot betrakteren.

Trinn 4
Nå legger vi til knappene våre en etter en mot vårt horisontale oppsett. Vi burde ha noe slikt:

Trinn 5
Deretter legger vi til 2 tekstbokser som er hvor Vi vil introdusere de nødvendige tallene for å utføre våre grunnleggende operasjoner med addisjon, subtraksjon, multiplikasjon og divisjon. I tillegg til dette vil vi også legge til en etikett for å vise resultatet av operasjonene våre. Etiketten og tekstfeltene finner du i paletten ved å klikke på brukergrensesnittet. På slutten bør vi ha noe som ligner på følgende bilde:

Trinn 6
Vi kommer til å "Blokker”For å begynne å konfigurere funksjonene til knappene våre. For å gå må du bare klikke på blokker, på høyre side av skjermen ved siden av knappen Designer.

Det bør lede oss til blokkvisningen, hvor vi kan se de forskjellige typene blokker som vi kan bruke til applikasjonene våre. For nå trenger vi bare å bruke de innebygde knappene til å definere hvilken funksjon de utfører når hver av dem trykkes.

For å definere handlingen som hver knapp utfører, starter vi først med knapp1, som i mitt tilfelle endret teksten til pluss -tegnet (+) og jeg vil definere at hver gang den trykkes, legger den til beløpene som er i tekstfelt 1 og tekstfelt 2, for dette starter vi med å klikke på knapp1, deretter velger vi "når knapp1 klikker på utfør" og drar det til seeren vår, det skal se slik ut:

Trinn 7
Deretter legger vi til Label1, klikker på Label1 og drar "legg Label1 -tekst som" til visningen og kobler den til "execute". Det burde være på denne måten.

Trinn 8
La oss legge til tilleggsfunksjonen, for dette klikker vi på Math og drar tilbake summen av to tall og knytter den til etikettblokken.

Seinere Vi legger til tekstfeltene ved å velge TextField1, vi ser etter "TextField1 Text" og drar det for å koble det til sumblokken. Det første mellomrommet for tekstfeltet1 og for det andre mellomrommet tekstfeltet2. Å gjøre den samme prosessen bør være omtrent som følgende bilde:

Trinn 9
Nå gjentar vi prosessene vi har utført med hver knapp som bare endrer de matematiske operasjonene til hver enkelt, til slutt burde vi ha noe slikt:

Og til slutt er det på tide å teste applikasjonen vår, i mitt tilfelle vil jeg teste den i emulatoren for PC. Vi bekrefter hvordan applikasjonen vår var, vi kan teste om hver av knappene fungerer og om de oppfyller de tildelte funksjonene. På bildet nedenfor kan du se en inndeling.

Med dette avslutter vi vår første enkle mobilapplikasjon med matematiske operasjoner.

4. Andre applikasjon i App Inventor 2

Nå skal vi lage et program som lar oss lagre og se data fra en tyniDB -database. TyniDB er en lett dokumentdatabase. Den er skrevet i ren Python og har ingen eksterne avhengigheter.

Trinn 1
Det første vi skal gjøre er å lage et nytt prosjekt, vi vil kalle det List_BD:

Steg 2
I den skal vi legge til to horisontale bestemmelser; I den første av dem legger vi til en etikett og et tekstfelt, i den andre legger vi til to knapper, vi burde ha noe slikt:

Trinn 3
Vi skal velge hver av bestemmelsene, i eiendommer endrer vi bredden for å passe beholderen. I tillegg til dette, velger vi en etikett og endrer teksten for å legge inn data, og i knappene kaller vi en "Ny rekord" og den andre "lagringen" skal være slik:

Trinn 4
Nå skal vi legge til en listeviser nederst, som vi i egenskapene vil velge breddealternativet som passer til beholderen, og i høyden skal vi sette 300px, vi vil ha noe slikt:

Trinn 5
La oss legge til vår TinyDB -database funnet på pall> oppbevaring og vi drar TinyBD til vår listeviser, slik:

Trinn 6
Nå skal vi blokkere, og det første vi skal gjøre er å legge til en global variabel som er av typen tekst. For dette, først vil vi blokker> innebygde> variabler og derfra drar vi "initialiser global som" og deretter går vi til tekst inn blokker> innebygd> tekst, drar vi tekststrengen og kobler den til "initialize global".

Trinn 7
Vi skal konfigurere hvilken handling knappen vi kaller en ny post skal utføre, som vil oppfylle funksjonen til å sette tekstboksen vår i hvitt, for dette skal vi blokker> Horisontal oppsett2> Knapp1 og vi drar når Button1 klikker til vår block viewer, så går vi til blokker> Horisontal tilrettelegging1> TextField1, vi drar put TextField1.Text as, kobler den til nårButton1.Clic og til slutt ser vi etter en tekststreng og kobler den til "TextField1.Text as", noe som resulterer i følgende bilde:

Trinn 8
Nå skal vi konfigurere Lagre -knappen vår for å legge til data i vår liste, for dette ser vi etter knappen 2 og drar den til vår betrakter. Så går vi til Blokker> Liste> legg til element til liste og der det står liste, lenker vi til en take som er i Blokker> Variabler> Ta og vi kobler det ved å klikke for å velge dataene fra den globale listen. Til slutt, der elementet vises i blokken vår for å legge til element i listen, plasserer vi en blokk fra vår tekstboks 1. Tekst skal det se slik ut:

Trinn 9
Nå skal vi legge til verdiene i databasen vår, for det første vi må gjøre er å søke inn Blokker> Skjerm1> TinyBD, vi drar call TinyBD1.SaveValue og vi kobler det til vår Button2 -blokk, etterfulgt av dette, i etiketten, plasserer vi det vi skal lagre, i dette tilfellet lagrer vi bare navn, for dette ser vi etter en tekstblokk, vi kobler det inn etiketten og vi setter Navn, så fra denne plasserer vi verdien som skal lagres, slik at den tar den fra den globale listen slik vi gjorde i blokken med tilleggselementer.

Trinn 10
Vi trenger bare å vise det i listeviseren, for dette kobler vi det til Button2, det skal vi Blokker> Skjerm1> ListViewer1 og vi drar put ListViewer1.Elements mens vi kobler tar global liste, og viser noe slikt:

Trinn 11
Som vi kan huske, er det beste med å ha en database at du kan lukke søknaden din, og dataene du har lagret der, blir lagret, tilgjengelig for når du starter en ny økt. For å gjøre dette skal vi sørge for at når Screen1 starter, blir databasen lagt til i en liste igjen, og den vises igjen i listeviseren.

For å gjøre dette må vi bare gå til Blokker> Skjerm 1 og dra blokken "når Screen1.initialize to execute" i vår block viewer, og til dette skal vi koble variabelen "put" som finnes i Blokker> Integrert> Variabler, vi drar "put" og i den blokken velger vi global liste til denne vi skal koble fra TinyBD1 "ring TinyBD1. GetValue ”, i etiketten vil vi legge til tekstblokken som vi vil sette navn til, og i verdi hvis etiketten ikke eksisterer, oppretter vi en tom liste som er funnet ogn Blokker> Liste> Lag en ny tom liste. Med dette er det vi får at alle dataene er lagret i en ny liste.

For å vise oss dataene i listeviseren, hva vi må gjøre lenker "når Screen1.initialize" med "Sett ListView1.Elements som" som igjen er knyttet til "Ta global liste" slik vi gjorde i forrige blokk.