App Inventor 2 is een platform waarmee we maakt het mogelijk om softwareapplicaties voor Android te ontwikkelen, Dit is een creatie van Google Labs, hier kunnen we de projecten waarin we werken visualiseren met verschillende soorten basistools, een van de grote voordelen die App Inventor 2 biedt, is dat de gebruiker een reeks blokken kan koppelen om de applicatie te maken . Dit systeem is volledig gratis en eenvoudig te downloaden vanaf uw eigen website. De applicaties die we kunnen maken in App Inventor zijn enigszins beperkt door hun eenvoud, hoewel we hier ook veel tijd kunnen besteden aan het ontwikkelen van eindeloze applicaties voor eenvoudige Android-apparaten.
Met Google App Inventor werd een grote eenvoud van gebruik aangetoond die het verschijnen van een groot aantal nieuwe toepassingen; Dankzij dit zijn er tegenwoordig veel gebruikers die applicaties ontwikkelen in het distributiecentrum van Android-applicaties.
Wat stelt App Inventor 2 ons in staat om te doen?Maak applicaties voor apparaten met een Android-systeem met behulp van een webbrowser en een aangesloten telefoon of emulator. App Inventor-servers slaan uw werk op en houden uw projecten bij.
Het is een zeer gebruiksvriendelijke visuele ontwikkelingstool, dus veel van de gebruikers van deze tool zijn niet puur programmeurs.
Waar bouwen we onze applicaties mee in App Inventor 2?App Inventor Designer is de applicatie die gebruikt wordt om de componenten voor App Inventor te selecteren, het biedt ons een palet dat een groot aantal tools bevat waarmee je heel eenvoudig kunt werken.
App Inventor Blocks Editor stelt ons in staat om de verschillende soorten blokken te koppelen waarmee we de functies kunnen definiëren van wat we in onze applicatie ontwerpen. Een van de voordelen is de eenvoudige en visuele manier om het werk dat we doen in de vorm van een puzzel te laten zien.
Is het eenvoudig om applicaties te bouwen met App Inventor 2?De verschillende applicaties die in de loop van de tijd op Android-apparaten verschijnen, hebben ons laten zien dat er een overvloed aan applicaties is waarin we kunnen werken, of ze nu eenvoudig of ingewikkeld zijn. De Inventor 2-app stelt ons in staat om met een eenvoud te werken, wat betekent dat u ook geen programmeur hoeft te zijn om in een omgeving van grote eenvoud te werken werken met een toolpalet of een set blokken die we aankunnen praktisch als een puzzelspel. Bovendien kunt u na voltooiing van uw project uw applicatie verpakken en een afzonderlijke applicatie produceren om te installeren.
Een ander voordeel dat het u biedt, is dat: je hoeft niet per se een telefoon te hebben met een Android-besturingssysteem, aangezien u vanaf de App Inventor-pagina een software genaamd aiStarter kunt downloaden waarmee u het vanaf uw pc kunt emuleren.
Hoe toegang te krijgen tot App Inventor 2?Om toegang te krijgen, moet u zich eerst registreren in App Inventor met uw Gmail-account. Het is belangrijk om te weten dat dit proces volledig gratis is.
Systeem-, apparaat- of browservereisten
Besturingssystemen
- Macintosh: Mac OS X 10.5 of hoger.
- Windows: Windows XP, Windows Vista, Windows 7
- GNU / Linux: Ubuntu 8 of hoger, Debian 5 of hoger
Browsers
- Mozilla Firefox 3.6 of hoger
- Apple Safari 5.0 of hoger
- Google Chrome 4.0 of hoger
- Microsoft Internet Explorer ondersteunt het niet
Telefoons en tablets
- Android-besturingssysteem 2.3 ("Gingerbread") of hoger
1. App Inventor 2 installeren
Allereerst moeten we weten dat Met de Inventor 2-app kun je in blokken ontwerpen en bewerken zoals we al hebben vermeld en dit alles draait in uw browser. Maar om te testen waar we aan werken (Test het live) hebben we drie opties terwijl we onze applicatie bouwen:
Optie 1Het meest aanbevolen door de appinventor-pagina is dat als je een apparaat hebt dat Android gebruikt en je een draadloze internetverbinding (WiFi) hebt, we alleen kunnen werken door de App Inventor-applicatie op ons Android-apparaat te installeren.
Optie 2De tweede optie is om installeer de software op onze computer om de Android-emulator te kunnen gebruiken en onze applicaties te testen terwijl we ze bouwen.
Optie 3In deze optie is het de meest gecompliceerde en omslachtige; Als ons besturingssysteem Windows is en we een Android-apparaat hebben maar geen draadloos netwerk (WiFi), kunnen we: installeer de software op onze computer en verbind ons Android-apparaat via USB. Op de pagina kunnen we zien hoe deze optie als laatste redmiddel wordt gebruikt vanwege de voor de hand liggende complexiteit.
Zodra we de verschillende opties kennen die we hebben bij het installeren van App Inventor 2, zal ik stap voor stap uitleggen hoe je elk van deze opties uitvoert:
Optie 1: App Inventor 2 verbinden met uw Android-apparaat via een draadloze verbinding (WiFi)
Stap 1
Download en installeer de MIT AI2 Companion-app op uw Android-apparaat. Bij deze optie hoeft u alleen op uw Android-apparaat te zoeken naar de applicatie "MIT AI2 Companion" uit de PlayStore, deze te downloaden en te installeren of u kunt deze ook rechtstreeks downloaden vanuit het APK-bestand. Het meest aan te raden is om het te downloaden van de PlayStore, want als we het APK-bestand downloaden, moeten we in de configuratie van ons Android-apparaat de optie inschakelen om de installatie van applicaties van onbekende bronnen toe te staan. Deze optie is te vinden in Android-versies ouder dan 4.0, hiervoor gaan we: Instellingen> Toepassingen en vink het vakje aan " Onbekende bronnen". Voor apparaten met Android 4.0 of hoger moet je naar Instellingen> Beveiliging of Instellingen> Beveiliging en Schermvergrendelingen selecteer de "Onbekende bronnen".
Hier laat ik de respectievelijke QR-codes achter om deze uit de Playstore te downloaden of direct als APK-bestand, als je een QR-scanner nodig hebt, kunnen we er een zoeken in de Playstore.
PlayStore
APK-bestand
OpmerkingHoud er rekening mee dat als we het downloaden van de PlayStore, het automatisch wordt bijgewerkt en als we de optie gebruiken om het rechtstreeks te downloaden, we het handmatig moeten bijwerken.
Stap 2
Verbind je pc met hetzelfde wifi-netwerk als je Android-apparaat. App Inventor toont de applicatie die u aan het bouwen bent automatisch, alleen als App Inventor op uw computer draait en als Companion op uw Android-apparaat draait en deze 2 zijn verbonden met hetzelfde Wi-Fi-netwerk.
Stap 3
Hoe het project waaraan we werken te verbinden met ons Android-apparaat. We gaan naar de App Inventor Page en we openen het project waarmee we gaan werken, we kiezen "Connect" en "Al Companion" in het hoofdmenu.
Het toont ons een dialoogvenster met een QR-code, we zoeken naar ons apparaat, we voeren de MIT App Companion-applicatie uit en dan klikken we op de knop "Scan QR-code" en we scannen de code:
Na een paar seconden te hebben gewacht, zouden we het project waaraan we werken moeten kunnen zien, en het zal worden bijgewerkt op basis van de wijzigingen die we eraan aanbrengen.
Optie 2 en 3: Installeer App Inventor op onze computer met besturingssysteem ramen
Hier is de installatie voor beide gevallen hetzelfde.
Stap 1
Eerst moeten we het installatieprogramma downloaden MIT_App_Inventor_Tools_2.3.0_win_setup.exe Dit kunnen we doen via de volgende link. Na het downloaden van het installatieprogramma, voeren we het uit.
Dit venster verschijnt, we klikken op Volgende>.
Dan accepteren we de licentieovereenkomst door te klikken op Ik ben het eens.
Stap 2
We kiezen of we het programma slechts voor één gebruiker of voor alle gebruikers willen installeren en klikken op Volgende>.
We kiezen de componenten die we willen installeren en klikken op Volgende>.
We kiezen waar we het gaan installeren en klikken op Volgende>.
Stap 3
We kiezen de thuismap en drukken op Installeren.
We wachten een paar seconden totdat u MIT App Inventor Tools 2.3.0 hebt geïnstalleerd.
Nadat het installatieproces is voltooid, kunnen we klikken op Af hebben en hiermee zijn we klaar met de installatie.
Stap 4
Ja we laten de optie Start aiStarter-tool nu geselecteerd Er zou een aiStarter-venster moeten verschijnen waar het op de eerste regel het besturingssysteem aangeeft waar we mee werken, op de tweede regel waar de map staat waarin het is geïnstalleerd, op de derde regel de server waarop het wordt uitgevoerd, in de vierde regel het is het IP-adres vinden waar de applicatie actief is. Om de aiStarter-run te sluiten, drukt u op Ctrl + C.
OpmerkingDe aiStarter moet worden uitgevoerd wanneer we met App Inventor 2 gaan werken. Als we de draadloze WiFi-netwerkverbinding niet gebruiken, moet het aiStarter-pictogram na installatie op het bureaublad verschijnen.
2. App Inventor 2 uitvoeren
Eerste stap
Allereerst moeten we aiStarter starten door op het pictogram op het bureaublad te klikken.
Hierdoor wordt het aiStarter-venster gestart.
Tweede stap
Na het starten van de aiStarter gaan we naar de appinventory-pagina en klikken op Create apps!
Het zal u vragen om toegang te krijgen tot uw Gmail-account. Hierna zal het ons om de toestemmingen vragen om toegang te krijgen tot ons account, hier selecteren we: Laten. Dan laat het ons de servicevoorwaarden zien. We accepteren de voorwaarden, en dan zal hij ons vragen of we een enquête willen invullen, en dan zal hij ons verwelkomen. We klikken op doorgaan met.
Als we willen, kunnen we, om alles gemakkelijker voor ons te maken, de taal selecteren voordat we onze eerste verbinding maken.
Derde stap
Nu gaan we een nieuw project starten.
We geven een naam aan dit nieuwe project, in mijn geval zal ik het Test_1 geven en we accepteren.
Het brengt ons automatisch naar het project dat we zojuist hebben gemaakt en laat ons de tools zien en wat we gaan gebruiken.
vierde stap
Nu we de emulator gaan gebruiken, zal ik alleen een eenvoudige applicatie maken die een label toont met de typische "Hallo wereld". Hiervoor slepen we een label uit het palet en veranderen de tekst die het bevat in Hallo wereld.
We gaan de emulator gebruiken, hiervoor gaan we Verbinden> Emulator.
Het zal verbinding maken en ons vertellen een paar seconden te wachten, we volgen de instructies die het ons hieronder zal geven.
Omdat het de eerste keer is dat we de emulator gebruiken, zal het ons vragen om het bij te werken, en het zal ons in de emulator laten zien of we de update willen installeren.
Eenmaal geïnstalleerd, klikken we op "klaar" en herstarten we de verbinding zoals de instructies zeggen.
Nadat de verbinding opnieuw is opgestart, starten we de emulator en deze zou ons het project moeten laten zien waaraan we werken, zoals u kunt zien in de volgende afbeelding.
Zodra we al deze stappen hebben uitgevoerd, zullen we de emulator laten bijwerken en kunnen al onze projecten waaraan we werken te zien zijn op het emulatorscherm.
OpmerkingIk raad aan dat we, voordat we een project starten, ervoor zorgen dat we aiStarter hebben gestart, zodat we geen problemen hebben bij het testen van onze applicaties en het is noodzakelijk dat het draait voordat de emulator op de pagina wordt uitgevoerd.
3. Eerste toepassing in App Inventor 2
Nu we alles op orde hebben, kunnen we ermee aan de slag. App-uitvinder, dan ga ik je laten zien hoe enkele eenvoudige toepassingen te ontwikkelen dat zal ons helpen om een basis te hebben om onze eigen Android-applicaties te ontwikkelen.
Stap 1
We beginnen met het ontwikkelen van een basisrekenmachine, waarmee we typische wiskundige functies kunnen uitvoeren, zoals optellen, aftrekken, vermenigvuldigen en delen.
Hiervoor zullen we eerst Projecten> Mijn projecten. Daar klikken we op een nieuw project starten, ik zal dit project een naam geven Calculadora_Basica en druk op de OK-knop.
Dit zal ons doorverwijzen naar het ontwerpgebied waar we met ons project zullen werken. Het eerste wat we gaan doen is vier knoppen toevoegen door ze uit het palet aan onze linkerkant te slepen.
Stap 2
Nu gaan we de tekst van elk van de knoppen wijzigen door componenten één voor één te selecteren en de tekst in zijn eigenschappen te wijzigen. Zoals we kunnen zien, zijn er de standaardeigenschappen die de knop die we selecteren heeft, hier kunnen we wijzigen hoe we de knop willen hebben. Voorlopig beperk ik me alleen tot het wijzigen van de tekst.
Na het wijzigen van de tekst, zou u onmiddellijk de wijzigingen in de knop moeten opmerken die we in de viewer wijzigen.
Stap 3
Om esthetische redenen ga ik nu een horizontale opstelling gebruiken om de knoppen te ordenen die we eerder hebben gewijzigd. We vinden dit in het palet door op lay-out te klikken en horizontale lay-out naar de kijker te slepen.
Stap 4
Nu zullen we onze knoppen één voor één toevoegen aan onze horizontale lay-out. We zouden zoiets als dit moeten hebben:
Stap 5
Dan voegen we 2 tekstvakken toe en dat is waar we zullen de nodige getallen introduceren om onze basisbewerkingen van optellen, aftrekken, vermenigvuldigen en delen uit te voeren. Daarnaast zullen we ook een label toevoegen om het resultaat van onze operaties te tonen. Het label en de tekstvelden zijn te vinden in het palet door op de gebruikersinterface te klikken. Aan het einde zouden we iets moeten hebben dat lijkt op de volgende afbeelding:
Stap 6
Wij gaan "Blokken”Om te beginnen met het configureren van de functies van onze knoppen. Om te gaan, hoef je alleen maar op blokken te klikken, aan de rechterkant van het scherm naast de knop Ontwerper.
Het zou ons naar de blokviewer moeten leiden waar we de verschillende soorten blokken kunnen zien die we voor onze toepassingen kunnen gebruiken. Voor nu hoeven we alleen de ingebouwde knoppen te gebruiken om te bepalen welke functie ze uitvoeren wanneer ze op elk van hen worden ingedrukt.
Om de actie te definiëren die elke knop uitvoert, beginnen we eerst met knop1, die in mijn geval ik de tekst heb gewijzigd in het plusteken (+) en ik wil definiëren dat elke keer dat erop wordt gedrukt, het de bedragen toevoegt die in tekstveld 1 en tekstveld 2, hiervoor beginnen we door op button1 te klikken, dan selecteren we "when button1 click execute" en slepen het naar onze viewer, het zou er zo uit moeten zien:
Stap 7
Vervolgens voegen we Label1 toe, klikken op Label1 en slepen “put Label1 text as” naar de viewer en koppelen deze aan “execute”. Het zou zo moeten zijn.
Stap 8
Laten we nu de optelfunctie toevoegen, hiervoor klikken we op Math en slepen de som van twee getallen terug en koppelen deze aan het labelblok.
Later We zullen de tekstvelden toevoegen door TextField1 te selecteren, we zoeken naar "TextField1 Text" en slepen het om het te koppelen aan het somblok. De eerste spatie voor het tekstveld1 en voor de tweede spatie het tekstveld2. Hetzelfde proces doen zou zoiets als de volgende afbeelding moeten zijn:
Stap 9
Nu herhalen we de processen die we met elke knop hebben uitgevoerd, alleen veranderen we de wiskundige bewerkingen in elke, uiteindelijk zouden we zoiets als dit moeten hebben:
En tot slot is het tijd om onze applicatie te testen, in mijn geval zal ik het testen in de emulator voor pc. We verifiëren hoe onze applicatie was, we kunnen testen of elk van de knoppen werkt en of ze de toegewezen functies vervullen. In de volgende afbeelding ziet u een verdeling.
Hiermee sluiten we onze eerste eenvoudige mobiele applicatie met wiskundige bewerkingen af.
4. Tweede toepassing in App Inventor 2
Nu gaan we een applicatie maken waarmee we gegevens uit een tyniDB-database kunnen opslaan en bekijken. TyniDB is een lichtgewicht documentdatabase, geschreven in pure Python en heeft geen externe afhankelijkheden.
Stap 1
Het eerste wat we zullen doen is een nieuw project maken, we zullen het List_BD noemen:
Stap 2
Daarin gaan we twee horizontale bepalingen toevoegen; In de eerste voegen we een label en een tekstveld toe, in de tweede voegen we twee knoppen toe, we zouden zoiets als dit moeten hebben:
Stap 3
We gaan elk van de bepalingen selecteren, in eigenschappen passen we de breedte aan om in de container te passen. Daarnaast selecteren we een label en wijzigen we de tekst om gegevens in te voeren en in de knoppen zullen we er een noemen "Nieuw record" en de tweede "opslaan" zouden als volgt moeten zijn:
Stap 4
Nu gaan we onderaan een lijstviewer toevoegen, waaraan we in eigenschappen de breedte-optie zullen selecteren die bij de container past en in de hoogte gaan we 300px plaatsen, we zullen zoiets als dit hebben:
Stap 5
Laten we onze TinyDB-database toevoegen die te vinden is op pallet> opslag en we slepen TinyBD naar onze lijstviewer, zoals dit:
Stap 6
Nu gaan we blokken en het eerste wat we gaan doen is een globale variabele toevoegen die van het type tekst is. Hiervoor zullen we eerst blokken> ingebouwd> variabelen en vanaf daar slepen we "initialiseren globaal als" en dan gaan we naar tekst in blokken> ingebouwd> tekst, we slepen de tekststring en koppelen deze met "initialize global".
Stap 7
We gaan configureren welke actie de knop die we een nieuw record noemen, gaat uitvoeren, wat de functie zal vervullen om ons tekstvak in het wit te plaatsen, hiervoor gaan we blokken> Horizontale lay-out2> Knop1 en we slepen wanneer Button1 klikt naar onze blokviewer, dan gaan we naar blokken> HorizontalArrangement1> TextField1, we slepen TextField1.Text as, koppelen het met whenButton1.Clic en tenslotte zoeken we naar een tekststring en linken het met "TextField1.Text as", wat resulteert in de volgende afbeelding:
Stap 8
Nu gaan we onze knop Opslaan configureren om gegevens aan onze lijst toe te voegen, hiervoor zoeken we onze knop 2 en slepen deze naar onze viewer. Dan gaan we naar Blokken> Lijst> toevoegen item naar lijst en waar er lijst staat, linken we naar een take die in . is Blokken> Variabelen> Take en we koppelen het door te klikken om de gegevens uit de globale lijst te selecteren. Ten slotte, waar het item in ons blok verschijnt om element aan de lijst toe te voegen, plaatsen we een blok uit onze TextBox1.Text, het zou er ongeveer zo uit moeten zien:
Stap 9
Nu gaan we de waarden toevoegen aan onze database, hiervoor moeten we eerst zoeken in Blokken> Scherm1> TinyBD, we slepen bellen TinyBD1.SaveValue en we koppelen het aan ons Button2-blok, gevolgd door dit, in het label, we plaatsen wat we gaan opslaan, in dit geval zullen we alleen namen opslaan, hiervoor zoeken we een tekstblok, we koppelen het in het label en we plaatsen Naam, dan plaatsen we hier de waarde om op te slaan, zodat deze uit de globale lijst komt zoals we deden in het blok elementen toevoegen.
Stap 10
We hoeven het alleen maar te laten zien in de lijstviewer, hiervoor koppelen we het aan Button2, we gaan naar Blokken> Scherm1> ListViewer1 en we slepen ListViewer1.Elements terwijl we linken naar de globale lijst, die zoiets als dit laat zien:
Stap 11
Zoals we ons kunnen herinneren, is het beste aan het hebben van een database dat u uw applicatie kunt sluiten en dat de gegevens die u daar hebt opgeslagen worden opgeslagen, beschikbaar voor wanneer u een nieuwe sessie start. Om dit te doen gaan we ervoor zorgen dat wanneer Screen1 start, de database opnieuw aan een lijst wordt toegevoegd en opnieuw verschijnt in de lijstviewer.
Om dit te doen, hoeven we alleen maar naar Blokken> Scherm1 en sleep het blok "wanneer Screen1.initialize to execute" in onze blokviewer en hieraan gaan we de variabele "put" koppelen die in Blokken> Geïntegreerd> Variabelen, we slepen "put" en in dat blok selecteren we globale lijst waarnaar we gaan linken vanuit TinyBD1 "call TinyBD1. GetValue ", in label zullen we het tekstblok toevoegen waaraan we Naam zullen toevoegen en in Waarde als label niet bestaat, maken we een lege lijst die wordt gevonden enN Blokken> Lijst> Maak een nieuwe lege lijst. Hiermee krijgen we dat alle gegevens in een nieuwe lijst worden opgeslagen.
Om ons de gegevens in de lijstviewer te laten zien, moeten we "wanneer Screen1.initialize" koppelen aan "Set ListView1.Elements as" die op zijn beurt is gekoppeld aan "Take global List" zoals we in het vorige blok deden.
Hiermee maken we het blokdeel af. Nu hoeven we alleen maar onze emulator te gebruiken. Hier is een screenshot van de gegevens die al zijn opgeslagen.
OpmerkingAls u een foutmelding krijgt, raad ik u aan alleen de blokken te controleren, als er geen fout in de blokken is, start u de formuleerder opnieuw.
Android Netbeans app ontwikkeling
