Share
PhoneGap ist eine Open-Source-Plattform, mit der Sie plattformübergreifende mobile Anwendungen mit HTML, JavaScript und CSS erstellen können. Um mit der Gerätehardware interagieren zu können, bietet PhoneGap eine JavaScript-API, die mit Funktionen wie der Bordkamera, dem GPS und dem Beschleunigungssensor zusammenarbeitet.
Obwohl PhoneGap sich hervorragend für die Entwicklung plattformübergreifender Anwendungen eignet, variiert der Code für die Entwicklung von Anwendungen, während eine Plattform für die eine oder andere Plattform verwendet wird. Einer der größten zu überwindenden Unterschiede sind die erforderlichen Softwareanforderungen.
In diesem Lernprogramm erfahren Sie, wie Sie Ihre Entwicklungsumgebung für Android einrichten. Außerdem wird eine einfache "Hello World" -App erstellt.
Wenn Sie PhoneGap weiterführen möchten, sehen Sie sich die Palette der PhoneGap-Skripts und App-Vorlagen auf Envato Market an.
Sie müssen das Java Development Kit (JDK) installieren. Befolgen Sie die offiziellen Anweisungen zum Einrichten.
Sie benötigen auch das Android Software Development Kit. Wenn Sie das SDK installieren, müssen Sie die Android-SDK einstellen-
Sie müssen Eclipse herunterladen und installieren, wenn Sie es noch nicht auf Ihrem Computer installiert haben.
Sie müssen auch das ADT-Plugin für Eclipse installieren. ADT (Android Development Tools) ist ein Plugin von Eclipse, das eine vollständige IDE für die Entwicklung einer Android-Anwendung bietet. Mit ADT können Sie neue Android-Projekte erstellen, und Sie können Android-Projekte aus vorhandenen Quellen erstellen (auf diese Weise öffnen wir unsere PhoneGap-App für Android auf Eclipse). Mit ADT können Sie auch eine Android-Anwendung debuggen. Da ADT gut in Android SDK integriert ist, startet die App von der IDE direkt den Android-Emulator.
Klicken Sie zum Installieren von ADT im Hilfefenster Ihres Eclipse auf "Neue Software installieren" und rufen Sie die folgende Website auf, mit der Sie arbeiten können: http://dl-ssl.google.com/android/eclipse/. Folgen Sie dann dem Assistenten, um ADT zu installieren.
Nachdem Sie ADT installiert haben, müssen Sie die Android-Plattform und andere Komponenten installieren. Rufen Sie dazu den Menüpunkt Fenster-> Android DK und AVD Manager auf und wählen Sie die Plattform- und API-Ebene aus. Android api 2.2 ist spätestens zum Zeitpunkt des Schreibens dieses Artikels.
Wenn Sie keinen Apache Ant installiert haben, können Sie ihn von http://ant.apache.org/bindownload.cgi herunterladen. Zur Installation extrahieren Sie einfach die heruntergeladene ZIP-Datei und legen den bin-Ordner im ant-Verzeichnis in Ihrer PATH-Variablen fest.
Wenn Sie Ruby nicht installiert haben, können Sie es von diesem kostenlosen Installationsprogramm herunterladen. Fügen Sie nach der Installation den Ruby / bin-Pfad zu den PATH-Variablen Ihres Kontos hinzu.
Natürlich benötigen Sie auch das PhoneGap Framework selbst.
Die folgenden Pfade sollten in der PATH-Variablen Ihres Kontos festgelegt werden:
Abgesehen von diesen müssen Sie auch die folgenden Variablen festlegen:
Um einen Arbeitsbereich für Ihre PhoneGap-App auf Android zu erstellen, rufen Sie an der Eingabeaufforderung oder am Terminal den Ordner „phonegap-android“ auf:
ruby ./droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"
Sobald Sie den Befehl ausführen und wenn alles korrekt geht, werden folgende Meldungen angezeigt:
Daraufhin sollte ein vollständiger Arbeitsbereich für Ihre PhoneGap Android-App erstellt werden.
Sobald dies erledigt ist, kann dieser Arbeitsbereich in Eclipse geöffnet werden. Wählen Sie in Eclipse ein neues Projekt und dann Android-Projekt.
Wählen Sie anschließend "Projekt aus vorhandener Quelle erstellen" und geben Sie dem Projekt einen Namen, wie unten gezeigt.
Wenn Sie versuchen, das Projekt in Eclipse zu erstellen und auszuführen, wird ein Build-Fehler angezeigt. Dies liegt daran, dass Sie die externe Bibliothek (phonegap.jar) nicht hinzugefügt haben, die im libs-Ordner Ihres Arbeitsbereichs erstellt wird.
Um diese externe Bibliothek hinzuzufügen, klicken Sie mit der rechten Maustaste auf das Projekt, wählen Sie Pfad erstellen> Externes Archiv hinzufügen aus und wählen Sie dann die Datei phonegap.jar in Ihrem libs-Ordner aus.
Wenn alles gut geht, sollten alle Buildfehler in Ihrem Projekt entfernt werden. Versuchen Sie nun, Ihr Projekt im Emulator auszuführen. Sie sollten den Bildschirm unten sehen. Dies liegt daran, dass Sie Ihrem Projekt keine PhoneGap-HTML- oder JavaScript-Dateien hinzugefügt haben.
Im Ordner assets / www des Arbeitsbereichs befindet sich bereits eine Datei namens phonegap.js. Erstellen Sie in diesem Ordner eine Datei namens index.html mit dem folgenden Code:
PhoneGap Android App
Im Code die Zeile:
Enthält die Datei phonegap.js, mit der Sie native APIs von Android aufrufen können. Beim Laden des Rumpfes registriert die init-Funktion die Funktion showMessageBox für das PhoneGap-Ereignisgerät, das ausgelöst wird, wenn phonegap die Verarbeitung ausgeführt hat, um alles für Ihr Programm zu initialisieren, damit es die PhoneGap-APIs aufrufen kann. Die Funktion showMessageBox ruft den PhoneGap API navigator.notification.alert auf, der das Meldungsfeld auf dem Bildschirm anzeigt. Wenn Sie die App nach dem Hinzufügen der index.html ausführen und das Projekt in Eclipse aktualisieren, wird der folgende Bildschirm angezeigt:
Jetzt fügen wir unserer App einige weitere Funktionen hinzu. Mit dem folgenden Code wird ein Textfeld erstellt, in das der Name der Person eingegeben werden kann. Wenn Sie auf eine Schaltfläche klicken, wird ein Meldungsfeld angezeigt:
PhoneGap Sag Hallo
In der folgenden Codezeile haben wir ein Textfeld erstellt, in das Sie Ihren Namen eingeben können.
In der Schlange
Sag Hallo
Wir haben einen Link erstellt, der beim Klicken die Funktion displayHello aufruft, die den Wert aus dem Textfeld abruft und ein Meldungsfeld mit dem Namen "Hallo" zu dem vom Benutzer eingegebenen Namen anzeigt.
Die oben gezeigte GUI hat kein Styling. Sie können die Anzeige verschönern und mit einer CSS-Datei Farben hinzufügen. Erstellen Sie im Ordner "assets \ www" eine master.css-Datei mit folgendem Code:
#bdy background: # F0F0F0; #btn a border: 1px fest # 555; -webkit-border-radius: 5px; Grenzradius: 5px; Text ausrichten: Mitte; Bildschirmsperre; Schwimmer: links; Hintergrund: # 6600CC; Breite: 308px; Farbe: #FFF; Schriftgröße: 1.1em; Textdekoration: keine; Polsterung: 1.2em 0; Rand: 3px 0px 3px 5px; #txt border: 1px fest # 555; -webkit-border-radius: 5px; Grenzradius: 5px; Text ausrichten: Mitte; Bildschirmsperre; Schwimmer: links; Hintergrund: # 00FFCC; Breite: 308px; Farbe: # 9ab; Schriftgröße: 1.1em; Textdekoration: keine; Polsterung: 1.2em 0; Rand: 3px 0px 3px 5px;
Fügen Sie in Ihrer index.html vor Ihren Kopf-Tags die folgende Zeile ein, um sie mit master.css zu verknüpfen:
Wenn Sie nun die App ausführen, sollten Sie einen Bildschirm wie den folgenden sehen:
Um eine PhoneGap-App auf Android zu erstellen, muss eine Vielzahl unterschiedlicher Software zusammenarbeiten. Dies kann bedeuten, dass Sie möglicherweise Probleme haben, die komplette Umgebung zum Erstellen einer PhoneGap-App für Android zu erstellen. Sobald jedoch die gesamte Software installiert ist, können Sie PhoneGap-Apps auf einfache Weise mit offenen Webstandards wie HTML, JavaScript, CSS und den eigenen APIs von PhoneGap erstellen, um gerätespezifische Hardware-spezifische Verarbeitung durchzuführen. Dies erspart Ihnen die Mühe, die Muttersprache für die Android-Programmierung zu erlernen, und bietet dennoch viel Leistung von benutzerdefinierten, native Android-Apps.
Wenn Sie immer noch Hilfe benötigen, wenden Sie sich an einen der Android-Entwickler von Envato Studio, um Sie bei Ihrem Projekt zu unterstützen - oder Sie können sogar Ihre App von Grund auf für Sie entwerfen!
Accentsconagua