App Inventor 2 ist eine Plattform, die es uns ermöglicht ermöglicht die Entwicklung von Softwareanwendungen für Android, Dies ist eine Kreation von Google Labs, hier können wir die Projekte visualisieren, in denen wir mit verschiedenen Arten von Basiswerkzeugen arbeiten. Einer der großen Vorteile von App Inventor 2 ist, dass der Benutzer eine Reihe von Blöcken verknüpfen kann, um die Anwendung zu erstellen . Dieses System ist völlig kostenlos und einfach von Ihrer eigenen Website herunterzuladen. Die Anwendungen, die wir in App Inventor erstellen können, sind durch ihre Einfachheit etwas eingeschränkt, obwohl wir hier auch viel Zeit damit verbringen können, endlose Anwendungen für grundlegende Android-Geräte zu entwickeln.
Mit Google App Inventor wurde eine große Benutzerfreundlichkeit demonstriert, die das Erscheinungsbild von a große Zahl neuer Anwendungen; Heutzutage gibt es viele Benutzer, die dank dessen Anwendungen im Android-Anwendungsverteilungszentrum entwickeln.
Was ermöglicht uns App Inventor 2?Erstellen Sie Anwendungen für Geräte, die über ein Android-System verfügen, indem Sie einen Webbrowser und ein verbundenes Telefon oder einen Emulator verwenden. App Inventor-Server speichern Ihre Arbeit und verfolgen Ihre Projekte.
Es ist ein sehr einfach zu bedienendes visuelles Entwicklungstool, daher sind viele der Benutzer dieses Tools keine reinen Programmierer.
Womit bauen wir unsere Anwendungen in App Inventor 2?App Inventor Designer ist die Anwendung zur Auswahl der Komponenten für App Inventor. Sie bietet uns eine Palette mit einer Vielzahl von Werkzeugen, mit denen Sie sehr einfach arbeiten können.
Mit dem App Inventor Blocks Editor können wir die verschiedenen Arten von Blöcken verknüpfen, mit denen wir die Funktionen dessen, was wir in unserer Anwendung entwerfen, definieren können. Einer der Vorteile ist die einfache und visuelle Darstellung unserer Arbeit in Form eines Puzzles.
Ist es einfach, Anwendungen mit App Inventor 2 zu erstellen?Die verschiedenen Anwendungen, die im Laufe der Zeit auf Android-Geräten erscheinen, haben uns gezeigt, dass es eine Fülle von Anwendungen gibt, mit denen wir arbeiten können, egal ob sie einfach oder kompliziert sind. Die Inventor 2-App ermöglicht uns ein einfaches Arbeiten, das bedeutet, dass Sie auch kein Programmierer sein müssen, um in einer Umgebung von großer Einfachheit zu arbeiten Arbeiten mit einer Werkzeugpalette oder einem Satz von Blöcken, die wir verarbeiten können praktisch wie ein Puzzlespiel. Darüber hinaus können Sie nach Abschluss Ihres Projekts Ihre Anwendung verpacken und eine separate Anwendung zur Installation erstellen.
Ein weiterer Vorteil, den es Ihnen bietet, ist, dass Sie müssen nicht unbedingt ein Telefon mit einem Android-Betriebssystem haben, da Sie von der App Inventor-Seite eine Software namens aiStarter herunterladen können, mit der Sie sie von Ihrem PC emulieren können.
Wie greife ich auf App Inventor 2 zu?Um darauf zuzugreifen, müssen Sie sich zunächst mit Ihrem Gmail-Konto bei App Inventor registrieren. Es ist wichtig zu wissen, dass dieser Prozess völlig kostenlos ist.
System-, Geräte- oder Browseranforderungen
Betriebssysteme
- Macintosh: Mac OS X 10.5 oder höher.
- Windows: Windows XP, Windows Vista, Windows 7
- GNU / Linux: Ubuntu 8 oder höher, Debian 5 oder höher
Browser
- Mozilla Firefox 3.6 oder höher
- Apple Safari 5.0 oder höher
- Google Chrome 4.0 oder höher
- Microsoft Internet Explorer unterstützt es nicht
Telefone und Tablet-Geräte
- Android-Betriebssystem 2.3 ("Gingerbread") oder höher
1. Installieren von App Inventor 2
Das müssen wir erst einmal wissen Mit der Inventor 2-App können Sie in Blöcken entwerfen und bearbeiten wie wir bereits erwähnt haben und das alles läuft in Ihrem Browser. Aber um zu testen, woran wir arbeiten (Live testen) haben wir drei Möglichkeiten, während wir unsere Anwendung erstellen:
Option 1Die App-Inventor-Seite wird am meisten empfohlen, wenn Sie ein Gerät haben, das Android verwendet und Sie über eine drahtlose Internetverbindung (WiFi) verfügen, können wir nur durch die Installation der App Inventor-Anwendung auf unserem Android-Gerät arbeiten.
Option 2Die zweite Möglichkeit ist zu Installieren Sie die Software auf unserem Computer um den Android-Emulator verwenden und unsere Anwendungen testen zu können, während wir sie erstellen.
Option 3Bei dieser Option ist es die komplizierteste und umständlichste; Wenn unser Betriebssystem Windows ist und wir ein Android-Gerät haben, aber kein drahtloses Netzwerk (WiFi) haben, können wir Installieren Sie die Software auf unserem Computer und verbinden Sie unser Android-Gerät über USB. Auf der Seite können wir sehen, wie diese Option aufgrund ihrer offensichtlichen Komplexität als letztes Mittel verwendet wird.
Sobald wir die verschiedenen Optionen kennen, die wir bei der Installation von App Inventor 2 haben, werde ich Schritt für Schritt erklären, wie Sie jede dieser Optionen ausführen:
Option 1: Verbinden von App Inventor 2 mit Ihrem Android-Gerät über eine drahtlose Verbindung (WiFi)
Schritt 1
Laden Sie die MIT AI2 Companion-App herunter und installieren Sie sie auf Ihrem Android-Gerät. Bei dieser Option müssten Sie Ihr Android-Gerät nur nach der Anwendung „MIT AI2 Companion“ aus dem PlayStore durchsuchen, herunterladen und installieren oder Sie können sie auch direkt aus der APK-Datei herunterladen. Am ratsamsten ist es, es aus dem PlayStore herunterzuladen, da wir beim Herunterladen der APK-Datei in der Konfiguration unseres Android-Geräts die Option aktivieren müssen, die Installation von Anwendungen aus unbekannten Quellen zuzulassen. Diese Option finden Sie in Android-Versionen vor 4.0, dafür werden wir Einstellungen> Anwendungen und aktivieren Sie das Kontrollkästchen " Unbekannte Quellen". Bei Geräten mit Android 4.0 oder höher gehen Sie zu Einstellungen> Sicherheit oder Einstellungen> Sicherheit und Bildschirmsperre, und wählen Sie "Unbekannte Quellen".
Hier lasse ich die jeweiligen QR-Codes zum Download aus dem Playstore oder direkt als APK-Datei, wenn Sie einen QR-Scanner benötigen, können wir im Playstore nach einem suchen.
Spielladen
APK-Datei
NotizBerücksichtigen Sie, dass es automatisch aktualisiert wird, wenn wir es aus dem PlayStore herunterladen, und wenn wir die Option zum direkten Herunterladen verwenden, müssen wir es manuell aktualisieren.
Schritt 2
Verbinden Sie Ihren PC mit demselben WLAN-Netzwerk wie Ihr Android-Gerät. App Inventor zeigt die von Ihnen erstellte Anwendung nur dann automatisch an, wenn App Inventor auf Ihrem Computer und Companion auf Ihrem Android-Gerät ausgeführt wird und diese beiden mit demselben Wi-Fi-Netzwerk verbunden sind.
Schritt 3
So verbinden Sie das Projekt, an dem wir arbeiten, mit unserem Android-Gerät. Wir gehen zur App Inventor-Seite und Wir öffnen das Projekt, mit dem wir arbeiten werden, wir wählen "Verbinden" und "Al Companion" im Hauptmenü.
Es zeigt uns einen Dialog mit einem QR-Code, wir suchen nach unserem Gerät, wir führen die MIT App Companion-Anwendung aus und klicken dann auf die Schaltfläche "QR-Code scannen" und wir scannen den Code:
Nachdem wir einige Sekunden gewartet haben, sollten wir in der Lage sein, das Projekt, an dem wir arbeiten, zu sehen, und es wird entsprechend den Änderungen aktualisiert, die wir daran vornehmen.
Option 2 und 3: Installieren Sie App Inventor auf unserem Computer mit Betriebssystem Fenster
Hier ist die Installation für beide Fälle gleich.
Schritt 1
Zuerst müssen wir das Installationsprogramm herunterladen MIT_App_Inventor_Tools_2.3.0_win_setup.exe Dies können wir unter folgendem Link tun. Nachdem wir das Installationsprogramm heruntergeladen haben, führen wir es aus.
Dieses Fenster erscheint, wir klicken auf Weiter>.
Dann akzeptieren wir die Lizenzvereinbarung durch Klicken auf Ich stimme zu.
Schritt 2
Wir wählen, ob wir das Programm nur für einen Benutzer oder für alle Benutzer installieren möchten und klicken auf Weiter>.
Wir wählen die Komponenten aus, die wir installieren möchten und klicken auf Weiter>.
Wir wählen aus, wo wir es installieren und klicken auf Weiter>.
Schritt 3
Wir wählen den Home-Ordner und drücken Installieren.
Wir warten ein paar Sekunden, bis Sie die MIT App Inventor Tools 2.3.0 installieren.
Nachdem der Installationsvorgang abgeschlossen ist, können wir auf klicken Fertig und damit haben wir die Installation abgeschlossen.
Schritt 4
Jawohl Wir lassen die Option aiStarter-Tool jetzt starten ausgewählt Es sollte ein aiStarter-Fenster erscheinen, in dem in der ersten Zeile das Betriebssystem angezeigt wird, auf dem wir arbeiten, in der zweiten Zeile der Ordner, in dem es installiert ist, in der dritten Zeile der Server, auf dem es läuft, in der vierten Zeile es ist die IP-Adresse zu finden, wo die Anwendung aktiv ist. Um den aiStarter-Lauf zu schließen, drücken Sie Strg + C.
NotizDer aiStarter muss immer ausgeführt werden, wenn wir mit App Inventor 2 arbeiten möchten. Wenn wir die drahtlose WLAN-Netzwerkverbindung nicht verwenden, sollte das aiStarter-Symbol nach der Installation auf dem Desktop erscheinen.
2. Ausführen von App Inventor 2
Erster Schritt
Zuerst müssen wir aiStarter starten, indem wir auf das Symbol auf dem Desktop klicken.
Dadurch wird das aiStarter-Fenster gestartet.
Zweiter Schritt
Nach dem Start des aiStarters gehen wir auf die Appinventory-Seite und klicken auf Apps erstellen!
Sie werden aufgefordert, auf Ihr Gmail-Konto zuzugreifen. Danach werden wir nach den Berechtigungen für den Zugriff auf unser Konto gefragt, hier wählen wir Lassen. Dann werden uns die Nutzungsbedingungen angezeigt. Wir akzeptieren die Bedingungen, und dann wird er uns fragen, ob wir an einer Umfrage teilnehmen möchten, und dann wird er uns willkommen heißen. Wir klicken auf fortsetzen.
Wenn wir möchten, können wir, um uns alles zu erleichtern, die Sprache auswählen, bevor wir unsere erste Verbindung herstellen.
Dritter Schritt
Jetzt starten wir ein neues Projekt.
Wir geben diesem neuen Projekt einen Namen, in meinem Fall gebe ich ihm Test_1 und wir akzeptieren.
Es führt uns automatisch zu dem soeben erstellten Projekt und zeigt uns die Tools und was wir verwenden werden.
Vierter Schritt
Jetzt, da wir den Emulator ausführen werden, werde ich nur eine einfache Anwendung erstellen, die ein Label mit der typischen "Hello world" zeigt. Dazu ziehen wir ein Label aus der Palette und ändern den darin enthaltenen Text in Hello world.
Wir werden den Emulator verwenden, dafür werden wir Verbinden> Emulator.
Es wird eine Verbindung herstellen und uns sagen, dass wir ein paar Sekunden warten sollen. Wir befolgen die Anweisungen, die es uns unten gibt.
Da wir den Emulator zum ersten Mal verwenden, werden wir aufgefordert, ihn zu aktualisieren, und es wird uns im Emulator angezeigt, ob wir das Update installieren möchten.
Nach der Installation klicken wir auf "Fertig" und starten die Verbindung wie in der Anleitung beschrieben neu.
Sobald die Verbindung neu gestartet wurde, starten wir den Emulator und er sollte uns das Projekt anzeigen, an dem wir arbeiten, wie Sie in der folgenden Abbildung sehen können.
Sobald wir alle diese Schritte durchgeführt haben, werden wir den Emulator aktualisieren und alle unsere Projekte, an denen wir arbeiten, können auf dem Emulatorbildschirm angezeigt werden.
NotizIch empfehle, dass wir vor dem Start eines Projekts sicherstellen, dass wir aiStarter gestartet haben, damit wir beim Testen unserer Anwendungen keine Probleme haben und es erforderlich ist, dass es ausgeführt wird, bevor der Emulator auf der Seite ausgeführt wird.
3. Erste Anwendung in App Inventor 2
Nachdem wir nun alles in Betrieb genommen haben, können wir mit der Arbeit beginnen. App-Erfinder, dann zeige ich es dir wie man einige einfache Anwendungen entwickelt das wird uns helfen, eine Basis für die Entwicklung unserer eigenen Android-Anwendungen zu haben.
Schritt 1
Wir beginnen mit der Entwicklung eines einfachen Taschenrechners, mit dem wir typische mathematische Funktionen wie Addieren, Subtrahieren, Multiplizieren und Dividieren ausführen können.
Dafür werden wir zuerst Projekte> Meine Projekte. Dort klicken wir auf ein neues Projekt starten, ich werde dieses Projekt benennen Calculadora_Basica und drücken Sie die OK-Taste.
Dies führt uns zum Designbereich, in dem wir mit unserem Projekt arbeiten werden. Als erstes fügen wir vier Schaltflächen hinzu, indem wir sie aus der Palette auf der linken Seite ziehen.
Schritt 2
Jetzt ändern wir den Text jeder der Schaltflächen, indem wir die Komponenten einzeln auswählen und den Text in ihren Eigenschaften ändern. Wie wir sehen, gibt es die Standardeigenschaften der ausgewählten Schaltfläche. Hier können wir ändern, wie die Schaltfläche aussehen soll. Im Moment beschränke ich mich nur darauf, den Text zu ändern.
Nachdem Sie den Text geändert haben, sollten Sie sofort die Änderungen in der Schaltfläche bemerken, die wir im Viewer ändern.
Schritt 3
Aus ästhetischen Gründen werde ich jetzt eine horizontale Anordnung verwenden, um die zuvor geänderten Schaltflächen zu organisieren. Wir finden dies in der Palette, indem wir auf Layout klicken und das horizontale Layout in Richtung des Betrachters ziehen.
Schritt 4
Jetzt fügen wir unsere Schaltflächen nacheinander zu unserem horizontalen Layout hinzu. Wir sollten so etwas haben:
Schritt 5
Dann fügen wir 2 Textfelder hinzu, wo wir werden die notwendigen Zahlen einführen, um unsere grundlegenden Operationen der Addition, Subtraktion, Multiplikation und Division durchzuführen. Darüber hinaus werden wir auch ein Etikett hinzufügen, um das Ergebnis unserer Operationen anzuzeigen. Das Label und die Textfelder finden Sie in der Palette, indem Sie auf die Benutzeroberfläche klicken. Am Ende sollten wir etwas Ähnliches wie das folgende Bild haben:
Schritt 6
Wir gehen zu "Blöcke„Um mit der Konfiguration der Funktionen unserer Schaltflächen zu beginnen. Um zu gehen, müssen Sie nur auf Blöcke klicken, auf der rechten Seite des Bildschirms neben dem Button Designer.
Es sollte uns zum Block-Viewer leiten, in dem wir die verschiedenen Arten von Blöcken sehen können, die wir für unsere Anwendungen verwenden können. Im Moment brauchen wir nur die eingebauten Tasten zu verwenden, um zu definieren, welche Funktion sie ausführen, wenn jeder von ihnen gedrückt wird.
Um die Aktion zu definieren, die jede Schaltfläche ausführt, beginnen wir zuerst mit button1, in meinem Fall habe ich den Text in das Pluszeichen (+) geändert und ich möchte definieren, dass jedes Mal, wenn sie gedrückt wird, die Beträge hinzugefügt werden, die in Textfeld 1 und Textfeld 2, dazu starten wir mit einem Klick auf button1, dann wählen wir "wenn button1 klick ausführen" und ziehen es in unseren Viewer, es sollte so aussehen:
Schritt 7
Dann fügen wir Label1 hinzu, klicken auf Label1 und ziehen „Label1 Text einfügen als“ in den Viewer und verknüpfen es mit „Ausführen“. Es sollte so sein.
Schritt 8
Jetzt fügen wir die Additionsfunktion hinzu, dafür klicken wir auf Math und ziehen die Summe zweier Zahlen zurück und verknüpfen sie mit dem Beschriftungsblock.
Später Wir fügen die Textfelder hinzu, indem wir TextField1 auswählen, suchen nach "TextField1 Text" und ziehen es, um es mit dem Summenblock zu verknüpfen. Das erste Leerzeichen für das Textfeld1 und für das zweite Leerzeichen das Textfeld2. Der gleiche Vorgang sollte in etwa wie im folgenden Bild aussehen:
Schritt 9
Jetzt wiederholen wir die Prozesse, die wir mit jedem Button durchgeführt haben, ändern nur die mathematischen Operationen zu jedem einzelnen, am Ende sollten wir so etwas haben:
Und schließlich ist es an der Zeit, unsere Anwendung zu testen, in meinem Fall werde ich sie im Emulator für PC testen. Wir überprüfen, wie unsere Anwendung war, wir können testen, ob jede der Schaltflächen funktioniert und ob sie die zugewiesenen Funktionen erfüllen. Im folgenden Bild sehen Sie eine Aufteilung.
Damit schließen wir unsere erste einfache mobile Anwendung mit mathematischen Operationen ab.
4. Zweite Anwendung in App Inventor 2
Jetzt werden wir eine Anwendung erstellen, die es uns ermöglicht, Daten aus einer tyniDB-Datenbank zu speichern und anzuzeigen. TyniDB ist eine leichtgewichtige Dokumentendatenbank, die in reinem Python geschrieben ist und keine externen Abhängigkeiten hat.
Schritt 1
Als erstes erstellen wir ein neues Projekt, wir nennen es List_BD:
Schritt 2
Darin werden wir zwei horizontale Bestimmungen hinzufügen; Im ersten fügen wir ein Label und ein Textfeld hinzu, im zweiten fügen wir zwei Schaltflächen hinzu, wir sollten so etwas haben:
Schritt 3
Wir werden jede der Bestimmungen auswählen, in den Eigenschaften ändern wir die Breite, um sie an den Container anzupassen. Darüber hinaus wählen wir ein Etikett aus und ändern den Text, um Daten einzugeben und in den Schaltflächen eine zu nennen "New Record" und das zweite "save" sollten so aussehen:
Schritt 4
Jetzt fügen wir unten einen Listenviewer hinzu, zu dem wir in den Eigenschaften die Breitenoption auswählen, die zum Container passt, und in der Höhe werden wir 300px eingeben.
Schritt 5
Lassen Sie uns unsere TinyDB-Datenbank hinzufügen, die Sie unter . finden Palette> Lagerung und wir ziehen TinyBD wie folgt in unseren Listenviewer:
Schritt 6
Jetzt werden wir zu Blöcken und als erstes fügen wir eine globale Variable vom Typ Text hinzu. Dafür werden wir zuerst Blöcke> eingebaut> Variablen und von dort ziehen wir "Global initialisieren als" und gehen dann zu Text in Blöcke> eingebaut> Text, ziehen wir den Textstring und verknüpfen ihn mit "initialize global".
Schritt 7
Wir werden konfigurieren, welche Aktion die Schaltfläche ausführt, die wir als neuen Datensatz bezeichnen, die die Funktion erfüllt, unser Textfeld weiß zu setzen, dafür werden wir Blöcke> Horizontales Layout2> Button1 und wir ziehen, wenn Button1 klickt, auf unseren Block-Viewer, dann gehen wir zu Blöcke> HorizontalArrangement1> TextField1, ziehen wir put TextField1.Text as, verknüpfen es mit whenButton1.Clic und suchen schließlich nach einem Textstring und verknüpfen ihn mit "TextField1.Text as", was zu folgendem Bild führt:
Schritt 8
Jetzt konfigurieren wir unsere Schaltfläche Speichern, um Daten zu unserer Liste hinzuzufügen. Dazu suchen wir nach unserer Schaltfläche 2 und ziehen sie in unseren Viewer. Dann gehen wir zu Blöcke> Liste> hinzufügen Artikel zur Liste und wo Liste steht, verlinken wir auf einen Take, der in ist Blöcke> Variablen> Take und wir verknüpfen es, indem wir auf die Daten aus der globalen Liste klicken. Schließlich, wo das Element in unserem Block erscheint, um der Liste ein Element hinzuzufügen, platzieren wir einen Block aus unserer TextBox1.Text, der in etwa so aussehen sollte:
Schritt 9
Jetzt werden wir die Werte zu unserer Datenbank hinzufügen, dafür müssen wir als erstes in suchen Blöcke> Bildschirm1> TinyBD, wir ziehen den Anruf TinyBD1.SaveValue und wir verknüpfen es mit unserem Button2-Block, gefolgt von diesem, im Label platzieren wir, was wir speichern werden, in diesem Fall speichern wir nur Namen, dafür suchen wir nach einem Textblock, wir verknüpfen ihn in das Label und wir setzen Name, dann platzieren wir daraus den zu speichernden Wert, so dass er aus der globalen Liste genommen wird, wie wir es im Block zum Hinzufügen von Elementen getan haben.
Schritt 10
Wir müssen es nur im Listenviewer anzeigen, dafür verknüpfen wir es mit Button2, wir werden es tun Blöcke> Screen1> ListViewer1 und wir ziehen put ListViewer1.Elements, während wir die globale Liste verlinken, was etwa so aussieht:
Schritt 11
Wie wir uns erinnern, ist das Beste an einer Datenbank, dass Sie Ihre Anwendung schließen können und die dort gespeicherten Daten gespeichert werden, damit Sie sie beim Start einer neuen Sitzung zur Verfügung haben. Dazu stellen wir sicher, dass beim Start von Screen1 die Datenbank wieder zu einer Liste hinzugefügt wird und wieder im Listenviewer erscheint.
Dazu müssen wir nur gehen zu Blöcke> Bildschirm1 und ziehen Sie den Block "when Screen1.initialize to execute" in unseren Blockviewer und damit verknüpfen wir die Variable "put" in Bausteine> Integriert> Variablen, Wir ziehen "put" und wählen in diesem Block die globale Liste aus, auf die wir von TinyBD1 aus "call TinyBD1. GetValue “, in Label fügen wir den Textblock hinzu, in den wir Name einfügen, und in Value, wenn Label nicht existiert, erstellen wir eine leere Liste, die gefunden wird undn Blöcke> Liste> Erstellen Sie eine neue leere Liste. Damit erhalten wir, dass alle Daten in einer neuen Liste gespeichert werden.
Um uns die Daten im Listenviewer anzuzeigen, müssen wir "when Screen1.initialize" mit "Set ListView1.Elements as" verknüpfen, was wiederum wie im vorherigen Block mit "Take global List" verknüpft ist.
Damit beenden wir den Blockteil. Jetzt müssen wir nur noch unseren Emulator ausprobieren. Hier ist ein Screenshot der bereits gespeicherten Daten.
NotizWenn Sie einen Fehler erhalten, empfehle ich nur, die Blöcke zu überprüfen, wenn kein Fehler in den Blöcken vorliegt, starten Sie den Formulator neu.
Entwicklung von Android Netbeans-Apps
