✅ Utveckla Android -applikationer med App Inventor 2

Innehållsförteckning

1. Installera App Inventor 2
2. Kör App Inventor 2
3. Första ansökan i App Inventor 2
4. Andra applikationen i App Inventor 2

App Inventor 2 är en plattform som tillåter oss gör det möjligt att utveckla program för Android, Detta är en skapelse av Google Labs, här kan vi visualisera projekten där vi arbetar med olika typer av grundläggande verktyg, en av de stora fördelarna som App Inventor 2 ger är att användaren kan länka en serie block för att skapa applikationen . Detta system är helt gratis och enkelt nedladdad från din egen webbplats. De applikationer som vi kan skapa i App Inventor är något begränsade av sin enkelhet, även om vi här också kan spendera mycket tid på att utveckla oändliga applikationer för grundläggande Android -enheter.

Med Google App Inventor visades en mycket enkel användning som har underlättat utseendet på en stort antal nya applikationer; Numera är det många användare som utvecklar applikationer i Android -distributionscentret tack vare detta.

Vad tillåter App Inventor 2 oss att göra?Skapa applikationer för enheter som har ett Android -system med en webbläsare och en ansluten telefon eller emulator. App Inventor -servrar lagrar ditt arbete och håller koll på dina projekt.

Det är ett mycket lättanvänt visuellt utvecklingsverktyg, så många av användarna av det här verktyget är inte enbart programmerare.

Vad bygger vi våra applikationer med i App Inventor 2?App Inventor Designer är applikationen som används för att välja komponenterna för App Inventor, den erbjuder oss en palett som innehåller ett stort antal verktyg som du kan arbeta med stor enkelhet.

App Inventor Blocks Editor tillåter oss att länka de olika typerna av block som vi kan definiera funktionerna för vad vi designar i vår applikation. En av fördelarna är det enkla och visuella sättet att visa arbetet som vi gör i form av ett pussel.

Är det enkelt att bygga applikationer med App Inventor 2?De olika applikationer som visas över tid på Android -enheter har visat oss att det finns ett överflöd av applikationer där vi kan arbeta, oavsett om de är grundläggande eller komplicerade. Inventor 2 -appen tillåter oss att arbeta med en enkelhet som innebär att du inte behöver vara programmerare för att arbeta i en miljö med stor enkelhet, antingen arbeta med en verktygspalett eller en uppsättning block som vi kan hantera praktiskt taget som ett pusselspel. Dessutom kan du, när ditt projekt är klart, paketera din ansökan och skapa en separat applikation att installera.

En annan fördel det erbjuder dig är det du behöver inte nödvändigtvis ha en telefon med ett Android -operativsystem, eftersom du från App Inventor -sidan kan ladda ner en programvara som heter aiStarter som gör att du kan emulera den från din dator.

Hur får jag åtkomst till App Inventor 2?För att komma åt är det första du måste göra att registrera dig i App Inventor med ditt Gmail -konto. Det är viktigt att veta att denna process är helt gratis.

System-, enhet- eller webbläsarkrav

Operativsystem

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

Webbläsare

Mozilla Firefox 3.6 eller högre
Apple Safari 5.0 eller högre
Google Chrome 4.0 eller högre
Microsoft Internet Explorer stöder det inte

Telefoner och surfplattor

Android -operativsystem 2.3 ("Pepparkakor") eller högre

1. Installera App Inventor 2

Först och främst måste vi veta det Med Inventor 2 -appen kan du designa och redigera i block som vi redan har nämnt och allt detta körs i din webbläsare. Men för att testa vad vi arbetar med (Testa det live) har vi tre alternativ medan vi bygger vår applikation:

Alternativ 1Det mest rekommenderade av appinventor -sidan är om du har en enhet som använder android och du har en trådlös internetanslutning (WiFi), vi kan bara arbeta genom att installera App Inventor -appen på vår Android -enhet.

Alternativ 2Det andra alternativet är att installera programvaran på vår dator för att kunna använda Android -emulatorn och testa våra applikationer medan vi bygger dem.

Alternativ 3I det här alternativet är det det mest komplicerade och besvärliga; Om vårt operativsystem är Windows och vi har en Android -enhet men vi inte har ett trådlöst nätverk (WiFi) kan vi installera programvaran på vår dator och anslut vår Android -enhet via USB. På sidan kan vi se hur detta alternativ används som en sista utväg på grund av dess uppenbara komplexitet.

När vi känner till de olika alternativen vi har när vi installerar App Inventor 2, kommer jag att förklara steg för steg hur man utför vart och ett av dessa alternativ:

Alternativ 1: Anslutning av App Inventor 2 till din Android -enhet via trådlös anslutning (WiFi)

Steg 1
Ladda ner och installera MIT AI2 Companion -appen på din Android -enhet. I det här alternativet behöver du bara söka efter din Android -enhet efter appen "MIT AI2 Companion" från PlayStore, ladda ner och installera den eller så kan du också ladda ner den direkt från APK -filen. Det mest rekommenderade är att ladda ner den från PlayStore eftersom om vi laddar ner APK -filen måste vi aktivera i konfigurationen av vår Android -enhet alternativet för att tillåta installation av applikationer från okända källor. Det här alternativet finns i Android -versioner före 4.0, för det här ska vi Inställningar> Program och kryssa i rutan " Okända källor". För enheter med Android 4.0 eller senare måste du gå till Inställningar> Säkerhet eller Inställningar> Säkerhet och skärmlåsoch välj "Okända källor".

Här lämnar jag respektive QR -koder för att ladda ner den från Playstore eller direkt som en APK -fil, om du behöver en QR -skanner kan vi leta efter en i Playstore.

PlayStore

APK -fil

NoteraTänk på att om vi laddar ner det från PlayStore uppdateras det automatiskt och om vi använder alternativet för att ladda ner det direkt måste vi uppdatera det manuellt.

Steg 2
Anslut din dator till samma WiFi -nätverk som din Android -enhet. App Inventor visar programmet du bygger automatiskt, bara om App Inventor körs på din dator och om Companion körs på din Android-enhet och dessa 2 är anslutna till samma Wi-Fi-nätverk.

Steg 3
Hur man ansluter projektet vi arbetar med vår Android -enhet. Vi går till App Inventor -sidan och vi öppnar projektet som vi ska arbeta med, vi väljer "Connect" och "Al Companion" i huvudmenyn.

Det kommer att visa oss en dialog med en QR -kod, vi letar efter vår enhet, vi kör MIT App Companion -applikationen och sedan klickar vi på knappen "Skanna QR kod" och vi skannar koden:

Efter att ha väntat några sekunder borde vi kunna se projektet vi arbetar med, och det kommer att uppdateras enligt de ändringar vi gör på det.

Alternativ 2 och 3: Installera App Inventor på vår dator med operativsystem Windows
Här är installationen densamma för båda fallen.

Steg 1
Det första vi måste göra är att ladda ner installationsprogrammet MIT_App_Inventor_Tools_2.3.0_win_setup.exe Vi kan göra detta genom att gå till följande länk. Efter att ha laddat ner installationsprogrammet kör vi det.

Detta fönster kommer att visas, vi klickar på Nästa>.

Sedan accepterar vi licensavtalet genom att klicka jag håller med.

Steg 2
Vi väljer om vi bara vill installera programmet för en användare eller för alla användare och klicka på Nästa>.

Vi väljer de komponenter vi vill installera och klickar på Nästa>.

Vi väljer var vi ska installera det och klickar på Nästa>.

Steg 3
Vi väljer hemmappen och trycker på Installera.

Vi väntar några sekunder på att du ska installera MIT App Inventor Tools 2.3.0.

När installationsprocessen är klar kan vi klicka Avsluta och med detta kommer vi att ha avslutat installationen.

Steg 4
Ja Vi lämnar alternativet Start aiStarter nu valt Ett aiStarter -fönster bör visas där det på första raden anger operativsystemet där vi arbetar, på den andra raden där mappen där den är installerad finns, på den tredje raden servern där den körs, på den fjärde raden det är att hitta IP -adressen där programmet är aktivt. För att stänga aiStarter -körningen, tryck på Ctrl + C.

NoteraAiStarter måste köras när vi ska arbeta med App Inventor 2. Om vi inte använder den trådlösa WiFi -nätverksanslutningen ska aiStarter -ikonen visas på skrivbordet efter installationen.

2. Kör App Inventor 2

Första steget
Först och främst måste vi starta aiStarter genom att klicka på ikonen som finns på skrivbordet.

Detta startar fönstret aiStarter.

Andra steg
Efter att ha startat aiStarter går vi till appinventory -sidan och klickar på Create apps!

Det kommer att be dig att komma åt ditt Gmail -konto. Efter detta kommer det att be oss om behörighet att komma åt vårt konto, här väljer vi Låta. Då kommer det att visa oss villkoren för tjänster. Vi accepterar villkoren, och sedan kommer han att fråga oss om vi vill fylla i en undersökning, och sedan välkomnar han oss. Vi klickar på Fortsätta.

Om vi vill, för att göra allt enklare för oss, kan vi välja språk innan vi börjar göra vår första anslutning.

Tredje steget
Nu ska vi starta ett nytt projekt.

Vi ger ett namn till detta nya projekt, i mitt fall ger jag det Test_1 och vi accepterar.

Det tar oss automatiskt till det projekt vi just skapade och visar oss verktygen och vad vi ska använda.

Fjärde steget
Nu när vi ska köra emulatorn kommer jag bara att göra en enkel applikation som visar en etikett med den typiska "Hej världen" för detta drar vi en etikett från paletten och ändrar texten som den innehåller till Hello world.

Vi ska använda emulatorn, för detta ska vi Anslut> Emulator.

Det kommer att ansluta och berätta för oss att vänta några sekunder, vi följer instruktionerna som det kommer att ge oss nedan.

Eftersom det är första gången som vi använder emulatorn kommer den att be oss att uppdatera den, och den kommer att visa oss i emulatorn om vi vill installera uppdateringen.

Efter installationen klickar vi på "klart" och startar om anslutningen som instruktionerna säger.

När anslutningen har startats om startar vi emulatorn och den ska visa oss projektet vi arbetar med som du kan se i följande bild.

När vi har utfört alla dessa steg kommer vi att få emulatorn uppdaterad och alla våra projekt vi arbetar med kan ses på emulatorn.

NoteraJag rekommenderar att vi innan vi startar något projekt ser till att vi har startat aiStarter så att vi inte har några problem när vi testar våra applikationer och det är nödvändigt att det körs innan emulatorn körs på sidan.

3. Första ansökan i App Inventor 2

Nu när vi har allt igång kan vi börja arbeta med det. App -uppfinnare, då ska jag visa dig hur man utvecklar några enkla applikationer som hjälper oss att ha en bas för att utveckla våra egna Android -applikationer.

Steg 1
Vi börjar med att utveckla en grundläggande kalkylator, som gör att vi kan utföra typiska matematiska funktioner som att lägga till, subtrahera, multiplicera och dela.

För detta kommer vi först Projekt> Mina projekt. Där klickar vi på starta ett nytt projekt, jag kommer att namnge detta projekt Calculadora_Basica och tryck på OK -knappen.

Detta kommer att omdirigera oss till designområdet där vi kommer att arbeta med vårt projekt. Det första vi ska göra är att lägga till fyra knappar genom att dra dem från paletten som finns till vänster.

Steg 2
Nu ska vi ändra texten för var och en av knapparna genom att välja komponenter en efter en och ändra texten i dess egenskaper. Som vi kan se finns det standardegenskaper som knappen vi väljer har, här kan vi ändra hur vi vill att knappen ska vara. För tillfället kommer jag bara att begränsa mig till att ändra texten.

Efter att du har ändrat texten bör du genast märka ändringarna i knappen som vi ändrar i betraktaren.

Steg 3
Av estetiska skäl kommer jag att använda ett horisontellt arrangemang för att organisera knapparna som vi tidigare har ändrat. Vi hittar detta i paletten genom att klicka på layout och dra horisontell layout mot betraktaren.

Steg 4
Nu lägger vi till våra knappar en efter en mot vår horisontella layout. Vi borde ha något så här:

Steg 5
Sedan lägger vi till 2 textrutor vilket är var vi kommer att införa de nödvändiga siffrorna för att utföra våra grundläggande operationer av addition, subtraktion, multiplikation och division. Förutom detta kommer vi också att lägga till en etikett för att visa resultatet av vår verksamhet. Etiketten och textfälten finns i paletten genom att klicka på användargränssnittet. I slutet bör vi ha något som liknar följande bild:

Steg 6
Vi ska "Block”För att börja konfigurera funktionerna för våra knappar. För att gå behöver du bara klicka på block, till höger på skärmen bredvid knappen Designer.

Det bör leda oss till blockvisaren där vi kan se de olika typerna av block som vi kan använda för våra applikationer. För tillfället behöver vi bara använda de inbyggda knapparna för att definiera vilken funktion de utför när man trycker på var och en av dem.

För att definiera åtgärden som varje knapp utför, börjar vi först med knapp 1, som i mitt fall ändrade texten till plustecknet (+) och jag vill definiera att varje gång den trycks in lägger den till de belopp som finns i textfält 1 och textfält 2, för detta börjar vi med att klicka på knapp1, sedan väljer vi "när knapp1 klick på kör" och drar det till vår tittare, det ska se ut så här:

Steg 7
Sedan lägger vi till Label1, klickar på Label1 och drar "sätt Label1 -text som" till tittaren och länkar den till "execute". Det borde vara så här.

Steg 8
Låt oss nu lägga till tilläggsfunktionen, för detta klickar vi på Math och drar tillbaka summan av två nummer och länkar den till etikettblocket.

Senare Vi lägger till textfälten genom att välja TextField1, vi letar efter "TextField1 Text" och drar det för att länka det till sumblocket. Det första utrymmet för textfältet1 och för det andra utrymmet textfältet2. Att göra samma process bör vara ungefär som följande bild:

Steg 9
Nu upprepar vi de processer som vi har utfört med varje knapp som bara ändrar de matematiska operationerna till var och en, i slutändan borde vi ha något så här:

Och slutligen är det dags att testa vår applikation, i mitt fall kommer jag att testa den i emulatorn för PC. Vi verifierar hur vår applikation var, vi kan testa om var och en av knapparna fungerar och om de uppfyller de tilldelade funktionerna. I följande bild kan du se en uppdelning.

Med detta avslutar vi vår första enkla mobilapplikation med matematiska operationer.

4. Andra applikationen i App Inventor 2

Nu ska vi göra en applikation som gör att vi kan spara och visa data från en tyniDB -databas. TyniDB är en lätt dokumentdatabas som är skriven i ren Python och har inga externa beroenden.

Steg 1
Det första vi kommer att göra är att skapa ett nytt projekt, vi kommer att kalla det List_BD:

Steg 2
I den kommer vi att lägga till två horisontella bestämmelser; I den första av dem lägger vi till en etikett och ett textfält, i den andra lägger vi till två knappar, vi borde ha något så här:

Steg 3
Vi kommer att välja var och en av bestämmelserna, i egenskaper ändrar vi bredden för att passa behållaren. Utöver detta väljer vi en etikett och ändrar texten för att mata in data och i knapparna kallar vi en "New Record" och den andra "save" ska vara så här:

Steg 4
Nu ska vi lägga till en listvisare längst ner, till vilken vi i egenskaper kommer att välja det breddalternativ som passar behållaren och i höjd ska vi lägga 300px, vi kommer att ha något så här:

Steg 5
Låt oss lägga till vår TinyDB -databas som finns på pall> förvaring och vi drar TinyBD till vår listvisare, så här:

Steg 6
Nu ska vi blockera och det första vi ska göra är att lägga till en global variabel som är av typtext. För detta kommer vi först block> inbyggda> variabler och därifrån drar vi "initialize global as" och sedan går vi till text in block> inbyggd> text, vi drar textsträngen och länkar den till "initialize global".

Steg 7
Vi kommer att konfigurera vilken åtgärd knappen vi kallar en ny post kommer att utföra, vilket kommer att fylla funktionen att sätta vår textruta i vitt, för detta kommer vi att block> Horisontell layout2> Knapp1 och vi drar när Button1 klickar till vår block viewer, sedan går vi till block> HorizontalArrangement1> TextField1, vi drar put TextField1.Text som, länkar den med whenButton1.Clic och slutligen letar vi efter en textsträng och länkar den med "TextField1.Text som", vilket resulterar i följande bild:

Steg 8
Nu ska vi konfigurera vår Spara -knapp för att lägga till data i vår lista, för det letar vi efter vår knapp 2 och drar den till vår tittare. Sedan går vi till Block> Lista> lägg till objekt att lista och där det står lista, länkar vi till en tagning som finns i Block> Variabler> Ta och vi länkar det genom att klicka för att välja data från global lista. Slutligen, där objektet visas i vårt block för att lägga till element i listan, placerar vi ett block från vår TextBox1.Text ska det se ut ungefär så här:

Steg 9
Nu ska vi lägga till värdena i vår databas, för det första vi måste göra är att söka i Block> Skärm1> TinyBD, vi drar samtal TinyBD1.SaveValue och vi länkar det med vårt Button2 -block, följt av detta, i etiketten, placerar vi det vi ska spara, i det här fallet sparar vi bara namn, för detta letar vi efter ett textblock, vi länkar det i etiketten och vi sätter Namn, sedan lägger vi från detta värdet som ska sparas så att det tar det från den globala listan som vi gjorde i blocket Lägg till element.

Steg 10
Vi behöver bara visa det i listvisaren, för detta länkar vi det till Button2, det ska vi Block> Skärm1> ListViewer1 och vi drar sätta ListViewer1.Elements när vi länkar tar global lista, visar något så här:

Steg 11
Som vi kan komma ihåg är det bästa med att ha en databas att du kan stänga din ansökan och data som du har sparat där kommer att lagras, tillgänglig för när du startar en ny session. För att göra detta kommer vi att se till att databasen läggs till i en lista igen när Screen1 startar och den återkommer i listvisaren.

För att göra detta måste vi bara gå till Block> Skärm 1 och dra blocket "när Screen1.initialize to execute" i vår block viewer och till detta kommer vi att länka variabeln "put" som finns i Block> Integrerat> Variabler, vi drar "put" och i det blocket väljer vi global lista till detta som vi ska länka från TinyBD1 "ring TinyBD1. GetValue ”, i etikett lägger vi till det textblock som vi lägger namn till och i värde om etiketten inte finns skapar vi en tom lista som finns ochn Block> Lista> Skapa en ny tom lista. Med detta är det vi får att all data sparas i en ny lista.

För att visa oss data i listvisaren, vad vi måste göra länkar "när Screen1.initialize" med "Ange ListView1.Elements som" som i sin tur är länkat till "Ta global lista" som vi gjorde i föregående block.