Share
PhoneGap ist ein Open Source-Framework zum Erstellen plattformübergreifender mobiler Anwendungen mit HTML, CSS und JavaScript. Dies ist eine ideale Lösung für Webentwickler, die an mobiler Entwicklung interessiert sind, da sie es ihnen ermöglichen, vorhandene Fähigkeiten zu nutzen, anstatt mit einer gerätespezifischen, kompilierten Sprache von Grund auf zu scratchen. Dies ist auch eine ideale Lösung für alle, die eine Anwendung erstellen möchten, die auf mehreren Geräten mit derselben Codebasis ausgeführt werden kann. In diesem Lernprogramm erfahren Sie, wie Sie die PhoneGap-Entwicklungsumgebung einrichten und einige grundlegende Entwicklungsaspekte der Plattform kennen lernen.
Mit PhoneGap erstellte Anwendungen sind nicht wie normale mobile Websites. PhoneGap-Anwendungen können mit der Hardware mobiler Geräte, wie z. B. dem Beschleunigungsmesser oder GPS, auf eine Weise interagieren, die für normale Webanwendungen nicht verfügbar ist. PhoneGap-Anwendungen werden auch wie native Anwendungen erstellt und verpackt, dh sie können über den Apple App Store oder den Android Market verbreitet werden.
PhoneGap unterstützt eine Reihe verschiedener mobiler Plattformen, darunter:
Das PhoneGap SDK bietet eine API, eine Abstraktionsebene, die dem Entwickler Zugriff auf Hardware- und plattformspezifische Funktionen bietet. Da PhoneGap die native mobile Plattform abstrahiert, kann derselbe Code auf mehreren mobilen Plattformen ohne oder mit nur geringer Änderung verwendet werden, sodass Ihre Anwendung einer größeren Zielgruppe zur Verfügung steht.
Zu den hardwarespezifischen Funktionen, die von der PhoneGap-API unterstützt werden, gehören:
Um Anwendungen mit PhoneGap erstellen zu können, müssen Sie zunächst das Standard-SDK für die mobilen Plattformen installieren, auf die Sie Ihre App ausrichten möchten. Dies liegt daran, dass PhoneGap diese SDKs tatsächlich verwendet, wenn Sie Ihre App für diese Plattform kompilieren.
Wenn Sie also für Android entwickeln, benötigen Sie:
Es gibt auch einige zusätzliche PhoenGap-spezifische Anforderungen für die Android-Entwicklung, einschließlich:
Die PhoneGap-Android-Dokumentation enthält die vollständige Liste der Anforderungen mit Installationsanweisungen.
Wenn Sie für das iPhone entwickeln, benötigen Sie:
Weitere Informationen zum Einrichten einer iPhone-Entwicklungsumgebung finden Sie in unserem Tutorial Einführung in die iPhone-Entwicklung.
Nachdem Sie phonegap heruntergeladen und entpackt haben, wird für jede von PhoneGap unterstützte Plattform ein eigener Ordner angezeigt:
PhoneGap wird mit einer Standardanwendung geliefert, mit der die leistungsstarken Funktionen des SDK dargestellt werden können. Der Rest dieses Tutorials zeigt Ihnen, wie Sie diese Standard-App für Android und iPhone einrichten.
Um einen Arbeitsbereich für Ihre PhoneGap-App auf Android zu erstellen, wechseln Sie in der Eingabeaufforderung oder im Terminal zum Ordner "phonegap-android".
Führen Sie den folgenden Befehl aus:
ruby ./droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"
Sobald dieser Befehl erfolgreich ausgeführt wurde, wird der Anwendungsarbeitsbereich in dem von Ihnen angegebenen Pfad generiert. Dann können Sie Eclipse öffnen und zunächst "Neues Android-Projekt" und dann "Aus vorhandener Quelle erstellen" wählen und den Anwendungsarbeitsbereich auswählen, der mit dem vorherigen Befehl erstellt wurde.
Kopieren Sie anschließend die folgenden Dateien aus dem Ordner phonegap / phonegap-android / example in den Ordner www in Ihrem Arbeitsbereich:
Klicken Sie anschließend auf "Ausführen", um die Beispiel-App "phonegap" im Android-Simulator anzuzeigen.
Um eine PhoneGap-App für das iPhone zu erstellen, gehen Sie in den Ordner phonegap-iphone, in den Sie die PhoneGap-Dateien entpackt haben.
Wenn Sie sich in diesem Ordner in Ihrem Terminal befinden, geben Sie 'make' ein, um PhoneGapLibInstaller.pkg zu erstellen.
Dann müssen Sie PhoneGapLibInstaller.pkg ausführen, wodurch die PhoneGapLib und die PhoneGap-Vorlage in Xcode installiert werden.
Dann können Sie Xcode starten und ein 'Neues Projekt' erstellen. Wählen Sie dann die PhoneGap-basierte Anwendungsvorlage.
Kopieren Sie anschließend die folgenden Dateien in den Ordner "www" Ihres Arbeitsbereichs:
Starten Sie die Anwendung, um die PhoneGap-Demo im iPhone-Simulator zu starten.
Jetzt haben Sie die Demo-App PhoneGap auf Ihrem Simulator installiert. Sie können mit der App herumspielen und sehen, wie sie funktioniert. Diese grundlegende App zeigt die allgemeine Verwendung der verschiedenen offengelegten APIs
mit dem PhoneGap SDK.
Fahren Sie fort und öffnen Sie index.htm. Am oberen Rand der Seite sehen Sie den folgenden Code:
PhoneGap
Die erste Sache ist ein Link zu master.css, der der Schaltfläche, die Sie auf dem Bildschirm sehen, den gesamten Stil verleiht.
Die zweite Zeile enthält phonegap.js, die generiert wird, wenn wir einen Arbeitsbereich für unsere Anwendung erstellt haben. Diese Datei hat den Zauber, die nativen APIs über JavaScript aufzurufen.
Wenn Sie nun bis zum Ende von index.html blättern, wird der folgende Code angezeigt:
Willkommen bei PhoneGap!
Diese Datei befindet sich unter assets / index.html
Plattform:
Ausführung:
UUID:
Dieser HTML-Code erstellt die Links, die auf dem Bildschirm Ihres mobilen Geräts als Schaltflächen angezeigt werden. Mit diesen Links sind Onclick-Handler verbunden, die in derselben Datei definierte JavaScript-Funktionen aufrufen, die für den Aufruf der PhoneGap-API für die Interaktion mit der geräteeigenen Hardware verantwortlich sind.
Die erste in JavaScript aufzurufende Funktion ist init (). Dadurch wird unsere JavaScript-Funktion registriert Geräteinformationen zum PhoneGap-Ereignis.
Deviceready Event
Das gerätetauglich Ereignis wird von PhoneGap ausgelöst, wenn alle SDK-Komponenten ordnungsgemäß abgelegt wurden. Es ist daher sinnvoll, die JavaScript-APIs von PhoneGap nach dem Auslösen dieses Ereignisses zu verwenden.
Sie können mehr darüber lesen gerätetauglich in der API-Dokumentation.
Geräteobjekt
Das Geräteobjekt enthält grundlegende Informationen zum Gerät, auf dem die App ausgeführt wird, wie Plattform, Version usw. Mit diesen Werten können gerätespezifische Überprüfungen in Ihrem Code durchgeführt werden.
Weitere Informationen zum Geräteobjekt finden Sie in der offiziellen API-Dokumentation.
Beschleunigungsmesser
Die erste Verknüpfung im Rumpf ruft die watchAccel-Funktion auf:
Beschleunigungsmesser beobachten
Dieser Teil der API überwacht und sendet in regelmäßigen Abständen Benachrichtigungen über die Gerätebeschleunigung. Er gibt die aktuelle Beschleunigung des Geräts zurück, indem er die x-, y- und z-Koordinaten an die übergibt callBackonSuccess Funktion registriert. Die x, y, z-Werte können dann in der Anwendung verwendet werden, um auf Bewegungen zu reagieren.
Lesen Sie hier mehr über den Beschleunigungssensor.
GPS & Ortung
Die zweite Verbindung im Körper ist für die Erfassung des aktuellen Gerätestandorts verantwortlich:
Standort abrufen
Das callBackonSuccessFunktion wird ein Objekt übergeben, das die GPS-Koordinaten enthält, die in Ihrer Anwendung für die ortsbezogene Verarbeitung verwendet werden können.
Sie können mehr über die Geolocation-API lesen.
Anrufe tätigen
Die dritte Zeile im Körper startet das Gerätedialer mit der Nummer "411":
Rufen Sie 411 an
Gerätebenachrichtigungen
Die nächsten zwei Linien im Körper werden zum Piepen oder Vibrieren eines Geräts verwendet:
Piepton vibrieren
Weitere Informationen zu Piepton und Vibrationen finden Sie in den offiziellen Dokumenten.
Kamera verwenden
Die nächste Zeile im Hauptteil ruft die Funktion auf show_pic ein Foto machen:
Holen Sie sich ein Bild
Diese API startet die Kameraanwendung des Geräts und wartet ab
für den Benutzer, um ein Bild aufzunehmen.
Weitere Informationen zum Fotografieren finden Sie in der offiziellen API-Dokumentation.
Fazit
PhoneGap ist ein sehr leistungsfähiges Framework für die plattformübergreifende Entwicklung. Wenn Sie bereits über einen guten Hintergrund für die Webentwicklung verfügen und daran interessiert sind, Apps für ein oder mehrere Geräte zu erstellen, ist PhoneGap sicherlich ein starker Anwärter!
Accentsconagua