✅ Udvikl Android -applikationer med App Inventor 2

Indholdsfortegnelse

1. Installation af App Inventor 2
2. Kører App Inventor 2
3. Første applikation i App Inventor 2
4. Anden applikation i App Inventor 2

App Inventor 2 er en platform, der tillader os gør det muligt at udvikle softwareapplikationer til Android, Dette er en oprettelse af Google Labs, her kan vi visualisere de projekter, hvor vi arbejder med forskellige typer af grundlæggende værktøjer, en af de store fordele, App Inventor 2 bringer, er, at brugeren kan linke en række blokke for at oprette applikationen . Dette system er helt gratis og let downloadet fra din egen hjemmeside. De applikationer, vi kan oprette i App Inventor, er noget begrænset af deres enkelhed, selvom vi her også kan bruge meget tid på at udvikle endeløse applikationer til grundlæggende Android -enheder.

Med Google App Inventor blev der demonstreret en stor brugervenlighed, der har lettet udseendet af en stort antal nye applikationer; I dag er der mange brugere, der udvikler applikationer i Android -applikationsdistributionscentret takket være dette.

Hvad tillader App Inventor 2 os at gøre?Opret applikationer til enheder, der har et Android -system ved hjælp af en webbrowser og en tilsluttet telefon eller emulator. App Inventor -servere gemmer dit arbejde og holder styr på dine projekter.

Det er et meget let at bruge visuelt udviklingsværktøj, så mange af brugerne af dette værktøj er ikke udelukkende programmører.

Hvad bygger vi vores applikationer med i App Inventor 2?App Inventor Designer er applikationen, der bruges til at vælge komponenterne til App Inventor, den tilbyder os en palet, der indeholder et stort antal værktøjer, som du kan arbejde med stor enkelhed.

App Inventor Blocks Editor giver os mulighed for at forbinde de forskellige typer blokke, som vi kan definere funktionerne for, hvad vi designer i vores applikation. En af fordelene er den enkle og visuelle måde at vise det arbejde, vi laver i form af et puslespil.

Er det let at bygge applikationer med App Inventor 2?De forskellige applikationer, der vises over tid på Android -enheder, har vist os, at der er en overflod af applikationer, hvor vi kan arbejde, uanset om de er grundlæggende eller komplicerede. Inventor 2 -appen giver os mulighed for at arbejde med en enkelhed, der betyder, at du heller ikke behøver at være programmerer for at arbejde i et miljø med stor enkelhed arbejder med en værktøjspalet eller et sæt blokke, som vi kan håndtere praktisk talt som et puslespil. Oven i alt det, når du er færdig med dit projekt, kan du pakke din applikation og producere en separat applikation til installation.

En anden fordel det giver dig er det du behøver ikke nødvendigvis at have en telefon med et Android -operativsystem, da du fra App Inventor -siden kan downloade en software kaldet aiStarter, der giver dig mulighed for at efterligne den fra din pc.

Sådan får du adgang til App Inventor 2?For at få adgang skal du først registrere dig i App Inventor ved hjælp af din Gmail -konto. Det er vigtigt at vide, at denne proces er helt gratis.

System, enhed eller browser krav

Operativsystemer

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

Browsere

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

Telefoner og tablets

Android -operativsystem 2.3 ("Gingerbread") eller højere

1. Installation af App Inventor 2

Først og fremmest skal vi vide det Med Inventor 2 -appen kan du designe og redigere i blokke som vi allerede har nævnt, og alt dette kører i din browser. Men for at teste, hvad vi arbejder på (Test det live) har vi tre muligheder, mens vi bygger vores applikation:

Mulighed 1Den mest anbefalede af appinventor -siden er, hvis du har en enhed, der bruger android, og du har en trådløs internetforbindelse (WiFi), kan vi kun arbejde ved at installere App Inventor -applikationen på vores Android -enhed.

Mulighed 2Den anden mulighed er at installere softwaren på vores computer for at kunne bruge Android -emulatoren og teste vores applikationer, mens vi bygger dem.

Mulighed 3I denne mulighed er det det mest komplicerede og besværlige; Hvis vores operativsystem er Windows, og vi har en Android -enhed, men vi ikke har et trådløst netværk (WiFi), kan vi installer softwaren på vores computer og tilslut vores Android -enhed via USB. På siden kan vi se, hvordan denne mulighed bruges som en sidste udvej på grund af dens indlysende kompleksitet.

Når vi kender de forskellige muligheder, vi har, når vi installerer App Inventor 2, forklarer jeg trin for trin, hvordan vi udfører hver af disse muligheder:

Mulighed 1: Tilslutning af App Inventor 2 til din Android -enhed via trådløs forbindelse (WiFi)

Trin 1
Download og installer MIT AI2 Companion -appen på din Android -enhed. I denne mulighed skulle du kun søge efter din "Android MIT AI2 Companion" -applikation på din Android -enhed fra PlayStore, downloade og installere den, eller du kan også downloade den direkte fra APK -filen. Det mest tilrådelige er at downloade den fra PlayStore, da hvis vi downloader APK -filen, bliver vi nødt til at aktivere i konfigurationen af vores Android -enhed muligheden for at tillade installation af applikationer fra ukendte kilder. Denne mulighed kan findes i Android -versioner før 4.0, for dette skal vi Indstillinger> Programmer og marker feltet " Ukendte kilder". For enheder med Android 4.0 eller nyere skal du gå til Indstillinger> Sikkerhed eller Indstillinger> Sikkerhed og Skærmlås, og vælg "Ukendte kilder".

Her efterlader jeg de respektive QR -koder for at downloade den fra Playstore eller direkte som en APK -fil, hvis du har brug for en QR -scanner, kan vi lede efter en i Playstore.

Legetøjsforretning

APK -fil

BemærkTag højde for, at hvis vi downloader det fra PlayStore, opdateres det automatisk, og hvis vi bruger muligheden for at downloade det direkte, bliver vi nødt til at opdatere det manuelt.

Trin 2
Tilslut din pc til det samme WiFi -netværk som din Android -enhed. App Inventor viser automatisk det program, du bygger, kun hvis App Inventor kører på din computer, og hvis Companion kører på din Android-enhed, og disse 2 er forbundet til det samme Wi-Fi-netværk.

Trin 3
Sådan forbindes det projekt, vi arbejder på, til vores Android -enhed. Vi går til siden App Inventor og vi åbner det projekt, som vi skal arbejde med, vi vælger "Connect" og "Al Companion" i hovedmenuen.

Det viser os en dialog med en QR -kode, vi leder efter vores enhed, vi kører MIT App Companion -applikationen, og derefter klikker vi på knappen "Scan QR -kode" og vi scanner koden:

Efter at have ventet et par sekunder burde vi kunne se det projekt, vi arbejder på, og det vil blive opdateret i henhold til de ændringer, vi foretager det.

Mulighed 2 og 3: Installer App Inventor på vores computer med operativsystem Windows
Her er installationen den samme i begge tilfælde.

Trin 1
Først skal vi downloade installationsprogrammet MIT_App_Inventor_Tools_2.3.0_win_setup.exe Vi kan gøre dette ved at få adgang til følgende link. Efter at have downloadet installationsprogrammet, kører vi det.

Dette vindue vises, vi klikker på Næste>.

Derefter accepterer vi licensaftalen ved at klikke jeg er enig.

Trin 2
Vi vælger, om vi kun vil installere programmet til en bruger eller til alle brugere og klikker på Næste>.

Vi vælger de komponenter, vi vil installere, og klikker Næste>.

Vi vælger, hvor vi skal installere det, og klikker Næste>.

Trin 3
Vi vælger hjemmemappen og trykker på Installere.

Vi venter et par sekunder, før du installerer MIT App Inventor Tools 2.3.0.

Når installationsprocessen er færdig, kan vi klikke Afslut og hermed er vi færdige med installationen.

Trin 4
Ja vi lader indstillingen Start aiStarter værktøj nu markeret Et aiStarter -vindue skal vises, hvor det på den første linje angiver operativsystemet, hvor vi arbejder, i den anden linje, hvor mappen, hvor den er installeret, er placeret, i den tredje linje serveren, hvor den kører, i den fjerde linje det er at finde IP -adressen, hvor applikationen er aktiv. For at lukke aiStarter -kørslen skal du trykke på Ctrl + C.

BemærkAiStarter skal køres, hver gang vi skal arbejde med App Inventor 2. Hvis vi ikke bruger den trådløse WiFi -netværksforbindelse, skal aiStarter -ikonet vises på skrivebordet efter installationen.

2. Kører App Inventor 2

Første skridt
Først og fremmest skal vi starte aiStarter ved at klikke på ikonet, der er placeret på skrivebordet.

Dette starter aiStarter -vinduet.

Andet trin
Efter start af aiStarter går vi til siden med appinventory og klikker på Opret apps!

Det vil bede dig om at få adgang til din Gmail -konto. Efter dette vil det bede os om tilladelser til at få adgang til vores konto, her vælger vi Lade. Derefter viser det os servicevilkårene. Vi accepterer vilkårene, og så vil han spørge os, om vi vil udfylde en undersøgelse, og så vil han byde os velkommen. Vi klikker videre Blive ved.

Hvis vi vil, for at gøre alt lettere for os, kan vi vælge sproget, før vi begynder at oprette vores første forbindelse.

Tredje trin
Nu går vi i gang med et nyt projekt.

Vi giver et navn til dette nye projekt, i mit tilfælde vil jeg give det Test_1, og vi accepterer.

Det vil automatisk tage os til det projekt, vi lige har oprettet, og vise os værktøjerne, og hvad vi skal bruge.

Fjerde trin
Når vi nu kører emulatoren, vil jeg kun lave en simpel applikation, der viser en etiket med den typiske "Hej verden", for at vi trækker en etiket fra paletten og ændrer den tekst, den indeholder til Hej verden.

Vi kommer til at bruge emulatoren, til dette skal vi Tilslut> Emulator.

Det vil forbinde og fortælle os at vente et par sekunder, vi følger instruktionerne, som det vil give os nedenfor.

Da det er første gang, at vi bruger emulatoren, vil det bede os om at opdatere det, og det vil vise os i emulatoren, hvis vi vil installere opdateringen.

Efter installationen klikker vi på "færdig" og genstarter forbindelsen som instruktionerne siger.

Når forbindelsen er blevet genstartet, starter vi emulatoren, og den skal vise os det projekt, vi arbejder på, som du kan se i det følgende billede.

Når vi har udført alle disse trin, vil vi få emulatoren opdateret, og alle vores projekter, vi arbejder på, kan ses på emulatorskærmen.

BemærkJeg anbefaler, at vi, før vi starter et projekt, sørger for, at vi har startet aiStarter, så vi ikke har problemer, når vi tester vores applikationer, og det er nødvendigt, at det kører, før emulatoren udføres på siden.

3. Første applikation i App Inventor 2

Nu hvor vi har alting i gang, kan vi begynde at arbejde på det. App -opfinder, så vil jeg vise dig det hvordan man udvikler nogle enkle applikationer det vil hjælpe os med at have en base til at udvikle vores egne Android -applikationer.

Trin 1
Vi starter med at udvikle en grundlæggende lommeregner, som giver os mulighed for at udføre typiske matematiske funktioner som at tilføje, trække, multiplicere og dividere.

Til dette, først vil vi Projekter> Mine projekter. Der klikker vi på start et nyt projekt, jeg vil navngive dette projekt Calculadora_Basica, og tryk på knappen OK.

Dette vil omdirigere os til designområdet, hvor vi vil arbejde med vores projekt. Den første ting, vi skal gøre, er at tilføje fire knapper ved at trække dem fra paletten, der er placeret til venstre.

Trin 2
Nu skal vi ændre teksten på hver af knapperne ved at vælge komponenter en efter en og ændre teksten i dens egenskaber. Som vi kan se, er der de standardegenskaber, som den knap, vi vælger, har, her kan vi ændre, hvordan vi vil have, at knappen skal være. I øjeblikket vil jeg kun begrænse mig til at ændre teksten.

Efter at have ændret teksten, skal du straks bemærke de ændringer i knappen, som vi ændrer i fremviseren.

Trin 3
Af æstetiske årsager vil jeg nu bruge et vandret arrangement til at organisere de knapper, som vi tidligere har ændret. Vi finder dette i paletten ved at klikke på layout og trække vandret layout mod fremviseren.

Trin 4
Nu tilføjer vi vores knapper en efter en mod vores vandrette layout. Vi burde have sådan noget:

Trin 5
Derefter tilføjer vi 2 tekstbokse, hvilket er hvor vi vil introducere de nødvendige tal til at udføre vores grundlæggende operationer med addition, subtraktion, multiplikation og division. Udover dette tilføjer vi også en etiket, der viser resultatet af vores operationer. Etiketten og tekstfelterne findes i paletten ved at klikke på brugergrænsefladen. Til sidst skulle vi have noget, der ligner følgende billede:

Trin 6
Vi skal "Blokke”For at begynde at konfigurere funktionerne på vores knapper. For at gå skal du bare klikke på blokke i højre side af skærmen ved siden af knappen Designer.

Det skulle lede os til blokviseren, hvor vi kan se de forskellige typer blokke, som vi kan bruge til vores applikationer. For nu skal vi kun bruge de indbyggede knapper til at definere, hvilken funktion de udfører, når der trykkes på hver af dem.

For at definere den handling, som hver knap udfører, starter vi først med knap1, som i mit tilfælde ændrede jeg teksten til plustegnet (+), og jeg vil definere, at hver gang der trykkes på den, tilføjes de beløb, der er i tekstfelt 1 og tekstfelt 2, til dette starter vi med at klikke på knap1, derefter vælger vi "når knap1 klikker på udfør" og trækker det til vores fremviser, det skal se sådan ud:

Trin 7
Derefter tilføjer vi Label1, klikker på Label1 og trækker “put Label1 text as” til fremviseren og linker den til “execute”. Det burde være på denne måde.

Trin 8
Lad os nu tilføje tilføjelsesfunktionen, for dette klikker vi på matematik og trækker summen af to tal tilbage og forbinder den med etiketblokken.

Senere Vi tilføjer tekstfelterne ved at vælge TextField1, vi leder efter "TextField1 Text" og trækker det for at linke det til sumblokken. Det første mellemrum for tekstfeltet1 og for det andet mellemrum tekstfeltet2. At gøre den samme proces burde være noget i retning af følgende billede:

Trin 9
Nu gentager vi de processer, vi har udført med hver knap, der kun ændrer de matematiske operationer til hver enkelt, i sidste ende skulle vi have noget i retning af dette:

Og endelig er det tid til at teste vores applikation, i mit tilfælde vil jeg teste den i emulatoren til pc. Vi verificerer, hvordan vores applikation var, vi kan teste, om hver af knapperne fungerer, og om de opfylder de tildelte funktioner. I det følgende billede kan du se en opdeling.

Med dette afslutter vi vores første enkle mobilapplikation med matematiske operationer.

4. Anden applikation i App Inventor 2

Nu skal vi lave et program, der giver os mulighed for at gemme og se data fra en tyniDB -database. TyniDB er en let dokumentdatabase. Den er skrevet i ren Python og har ingen eksterne afhængigheder.

Trin 1
Den første ting, vi vil gøre, er at oprette et nyt projekt, vi vil kalde det List_BD:

Trin 2
I det vil vi tilføje to horisontale bestemmelser; I den første af dem tilføjer vi en etiket og et tekstfelt, i den anden tilføjer vi to knapper, vi skal have sådan noget:

Trin 3
Vi skal vælge hver af bestemmelserne, i egenskaber ændrer vi bredden, så den passer til beholderen. Ud over dette vælger vi en etiket og ændrer teksten for at indtaste data, og i knapperne kalder vi en "Ny rekord" og den anden "gem" skal være sådan:

Trin 4
Nu skal vi tilføje en listefremviser i bunden, hvortil vi i egenskaber vælger den breddeindstilling, der passer til beholderen, og i højden skal vi lægge 300px, vi vil have noget i stil med dette:

Trin 5
Lad os tilføje vores TinyDB -database fundet på palle> opbevaring og vi trækker TinyBD til vores listeviser, sådan her:

Trin 6
Nu skal vi blokere, og det første, vi skal gøre, er at tilføje en global variabel, der er af tekst. Til dette, først vil vi blokke> indbyggede> variabler og derfra trækker vi "initialiser global som" og derefter går vi til tekst ind blokke> indbygget> tekst, vi trækker tekststrengen og forbinder den med "initialize global".

Trin 7
Vi skal konfigurere, hvilken handling den knap, vi kalder en ny rekord, skal udføre, som vil opfylde funktionen med at sætte vores tekstboks i hvidt, for dette skal vi blokke> Vandret layout2> Knap1 og vi trækker, når Button1 klikker til vores block viewer, så går vi til blokke> HorizontalArrangement1> TextField1, vi trækker put TextField1.Text som, forbinder det med whenButton1.Clic og til sidst leder vi efter en tekststreng og forbinder den med "TextField1.Text som", hvilket resulterer i følgende billede:

Trin 8
Nu skal vi konfigurere vores Gem -knap til at tilføje data til vores liste, for det ser vi efter vores knap 2 og trækker dem til vores fremviser. Så går vi til Blokke> Liste> tilføj element til liste og hvor der står liste, linker vi til en take, der er i Blokke> Variabler> Tag og vi forbinder det ved at klikke for at vælge dataene fra den globale liste. Endelig, hvor elementet vises i vores blok for at tilføje element til listen, placerer vi en blok fra vores TextBox1.Tekst skal det se sådan ud:

Trin 9
Nu skal vi tilføje værdierne til vores database, for det første vi skal gøre er at søge ind Blokke> Skærm1> TinyBD, vi trækker opkald TinyBD1.SaveValue og vi forbinder det med vores Button2 -blok, efterfulgt af dette, i etiketten, placerer vi det, vi vil gemme, i dette tilfælde vil vi kun gemme navne, for dette leder vi efter en tekstblok, vi forbinder det i etiketten og vi sætter Navn, derefter placerer vi den værdi, der skal gemmes, så den tager den fra den globale liste, som vi gjorde i blokken med tilføjelseselementer.

Trin 10
Vi skal bare vise det i listeviseren, for dette forbinder vi det med Button2, det skal vi Blokke> Skærm1> ListViewer1 og vi trækker put ListViewer1.Elements, når vi linker, tager global liste, der viser noget i stil med dette:

Trin 11
Som vi kan huske, er det bedste ved at have en database, at du kan lukke din applikation, og de data, du har gemt der, vil blive gemt, tilgængelige for når du starter en ny session. For at gøre dette skal vi sikre os, at når Screen1 starter, tilføjes databasen til en liste igen, og den vises igen i listeviseren.

For at gøre dette skal vi bare gå til Blokke> Skærm 1 og træk blokken "når Screen1.initialize at eksekvere" i vores blok viewer, og til dette vil vi linke variablen "put" fundet i Blokke> Integreret> Variabler, vi trækker "put", og i den blok vælger vi global liste til dette, vi skal linke fra TinyBD1 "kald TinyBD1. GetValue ”, i etiketten tilføjer vi den tekstblok, som vi vil sætte navn til, og i værdi, hvis etiketten ikke findes, opretter vi en tom liste, der findes ogn Blokke> Liste> Opret en ny tom liste. Med dette får vi, at alle data gemmes i en ny liste.

For at vise os dataene i listeviseren, hvad vi skal gøre, linker "når Screen1.initialize" med "Indstil ListView1.Elements som", som igen er forbundet med "Tag global liste", som vi gjorde i den foregående blok.