Share
Möchten Sie lernen, wie Sie PhoneGap verwenden können, wissen jedoch nicht, wo Sie anfangen sollen? Begleiten Sie uns bei der Zusammenstellung von "Sculder", nicht nur eine Hommage an eine exzellente Science-Fiction-Fernsehserie, sondern auch eine vollwertige native mobile Anwendung für den Gläubigen an Sie!
In dieser Serie werden wir eine mobile Anwendung mit einigen Funktionen von PhoneGap erstellen. Wir werden von der Installation des SDK über die Bereitstellung in die App-Stores der beiden wichtigsten Plattformen gehen: iOS und Android. Die in dieser Serie behandelten Konzepte umfassen den Zugriff auf die Gerätekamera, den lokalen Speicher und die Standortbestimmung.
In diesem ersten Teil werden wir einen kurzen Blick darauf werfen, was PhoneGap eigentlich ist und wozu Sie es verwenden können, und dann die Installation des PhoneGap-Frameworks und der SDKs, die wir zum Testen unter OS X, Windows und Linux benötigen Umgebungen. Wir werden dann die sehr einfache PhoneGap-Anwendung "Hello World" erstellen und ausführen, um sicherzustellen, dass alles korrekt läuft.
Inzwischen haben Sie wahrscheinlich eine gute Vorstellung davon, was PhoneGap ist, und Sie haben es wahrscheinlich sogar verwendet, aber wenn nicht, hier ein kurzer Überblick.
PhoneGap wurde 2008 aus dem iPhoneDevCamp heraus geboren, wo es einfach deshalb geschaffen wurde, weil es im Vergleich zu Web-Entwicklern nicht viele Objective-C-Entwickler gab. Die Herausforderung bestand darin, ein Framework zusammenzustellen, das Webentwicklern die Verwendung von HTML, CSS und JavaScript ermöglicht, um Anwendungen zu codieren, die die systemeigenen Funktionen des mobilen Geräts nutzen könnten, z. B. die Funktionen Camera, Storage und GeoLocation. Ursprünglich für die Verwendung mit dem iPhone entwickelt, wuchs PhoneGap innerhalb eines Jahres und begann, auch Android zu unterstützen. PhoneGap, fast 4 Jahre alt, ist eines der meist besprochenen Toolkits für die Entwicklung mobiler Anwendungen und unterstützt eine viel breitere Palette mobiler Geräte, darunter iOS, Android, Blackberry, Symbian, webOS, WP7 und Bada.
Zum Zeitpunkt der Veröffentlichung (z. B. Januar 2012) unterstützt das Framework derzeit die APIs "Beschleunigungsmesser", "Kamera", "Kompass", "Kontakte", "Datei", "Geolocation", "Medien", "Netzwerk", "Benachrichtigungen" (Alert, Sound und Vibration) und "Speichergeräte". Alle diese Funktionen werden in den neueren iOS-Geräten (3GS +) und Android vollständig unterstützt. Weitere Informationen zur Unterstützung von Blackberry-, WP7-, Sybian-, webOS- und Bada-Geräten finden Sie in der offiziellen Kompatibilitätstabelle.
Trotz gegenteiliger Überzeugung ist PhoneGap kein einmaliges Schreiben, sondern kann überall eingesetzt werden (wenn auch nicht nahe). Es ist sicherlich ein plattformübergreifendes Framework, das auf vielen unterstützten Geräten ausgeführt werden kann. Für eine erfolgreiche Bereitstellung müssen Sie jedoch wahrscheinlich den Code auf jedem der Zielgeräte testen und optimieren.
Wenn Sie für iOS entwickeln möchten, benötigen Sie einen Intel-basierten Computer mit MAC OS X Version 10.6 oder höher. Sie benötigen außerdem die neueste Version von Xcode (Version 4 zum Zeitpunkt des Schreibens) und das iOS-SDK zum Testen. Um Xcode herunterladen zu können, müssen Sie sich als Mitglied des Apple Developer Program anmelden.
Gehen Sie zu www.phonegap.com und in der oberen linken Ecke sehen Sie eine Schaltfläche zum Herunterladen der neuesten Version von PhoneGap. Wenn Sie darauf klicken, wird der Download einer ZIP-Datei mit allen Informationen verlangt, die Sie zum Starten benötigen.
Durch das Entpacken der Datei erhalten Sie zahlreiche Ordner, die jeweils mit dem angesprochenen Betriebssystem gekennzeichnet sind. Öffnen Sie bei der Installation für iOS den iOS-Ordner und stellen Sie den ein dmg Datei. Das dmg enthält ein pkg Datei. Klicken Sie hier und führen Sie den Installationsvorgang durch. Nach Abschluss der Installation können Sie Xcode starten und wenn Sie ein neues Projekt erstellen, sollten Sie PhoneGap als Vorlage auswählen können.
Wir können jetzt die Optionen für unser Projekt und den Speicherort unserer Dateien festlegen. Sobald wir das getan haben, ist unser Projekt in das angegebene Verzeichnis eingebaut und Xcode zeigt uns unsere Übersichtsseite. Hier können Sie ganz einfach App-Symbole hinzufügen und einige Einstellungen ändern, wenn unsere Anwendung bereit ist, verpackt zu werden und an den App Store gesendet zu werden. Jetzt werden wir einfach oben links auf RUN klicken. Dadurch wird die App kompiliert und der iOS-Simulator gestartet.
Wenn Sie dies jetzt versuchen, sollte nach dem Begrüßungsbildschirm eine Fehlermeldung angezeigt werden, dass das index.html Datei konnte nicht gefunden werden. Kein Grund zur Sorge, das sollte eigentlich passieren. Wir müssen das Arbeitsverzeichnis für das Projekt aufrufen (Klicken Sie mit der rechten Maustaste auf das Projekt in Xcode und klicken Sie auf Im Finder anzeigen). Dort sehen Sie eine www Verzeichnis im Projektstammverzeichnis.
Jetzt müssen wir dieses Verzeichnis IN Xcode ziehen und es dem Projekt hinzufügen.
In den Optionen für diese Dateien müssen wir sicherstellen, dass wir "Ordnerreferenz für hinzugefügte Ordner erstellen" auswählen und dann auf "Fertig stellen" klicken. Unsere www Das Verzeichnis wird jetzt dem Projekt hinzugefügt. Wir können jetzt erneut auf Ausführen klicken und Sie erhalten die grundlegende 'Hello World' für PhoneGap.
Das www Das Verzeichnis ist jetzt unser Stammverzeichnis für die App. Hier behalten wir HTML, CSS oder JavaScript, das von unserer App verwendet wird, so wie Sie es von anderen Webanwendungen erwarten. Das phonegap.js Datei ist die JavaScript-Datei, die als unsere API fungiert und uns Zugriff auf die systemeigenen APIs gibt, die wir später möglicherweise in unserer Anwendung verwenden möchten.
Im Gegensatz zur Entwicklung für iOS können Sie auf jeder Plattform für Android entwickeln. Obwohl es ratsam ist, die Eclipse-IDE mit ein paar Plugins zu verwenden, gibt es eine alternative Möglichkeit, PhoneGap (über die Befehlszeile) zu verwenden, aber es ist gut, wenn Sie es zuerst mit einer IDE beginnen und es zuerst ausprobieren die Befehlszeile und sehen, welche Sie bevorzugen. In diesem Tutorial verwenden wir die IDE-Methode.
Zuerst müssen Sie zur Eclipse-Website gehen und die IDE für Ihre Plattform Ihrer Wahl herunterladen. Die klassische Version ist gut für das, was wir brauchen. Starten Sie Eclipse nach dem Download und wir müssen das ADT-Plugin installieren. Sie müssen zu gehen Hilfe => Neue Software installieren und klicken Sie in der rechten Ecke auf Hinzufügen.
Sie können dann ADT Plugin für den Plugin-Namen und Folgendes für die Repository-URL eingeben.
https://dl-ssl.google.com/android/eclipse/
Das Plugin wird heruntergeladen und installiert, und Eclipse fordert Sie zum Neustart auf. Nach dem Neustart können Sie ein neues Android-Projekt erstellen.
Sie gehen dann durch den Projektassistenten, in dem Sie Ihrer App einen Namen geben und den Arbeitsbereich einrichten. Sie wählen auch Ihr Build-Target-SDK aus - Sie können das aktuellste für den Moment auswählen (4.0.3 zum Zeitpunkt des Schreibens). Gehen Sie den Rest des Assistenten durch und richten Sie die verbleibenden Informationen für die App ein.
Sie werden jetzt gefragt, ob Sie die erforderlichen Android-SDKs herunterladen und installieren möchten. Wenn Sie sie bereits auf Ihrem Computer haben, navigieren Sie zu dem Ordner. Wenn nicht, können Sie Eclipse für Sie herunterladen.
Innerhalb des Stammverzeichnisses der Anwendung müssen wir ein Verzeichnis mit dem Namen erstellen Deckel und erstellen Sie im Assets-Verzeichnis ein anderes Verzeichnis namens www. Zurück zu der ursprünglich heruntergeladenen PhoneGap-Datei und im Android-Ordner müssen Sie die Datei kopieren phonegap.jar Datei an die Libs Verzeichnis erstellt und kopiert das phonegap.js zum www Verzeichnis.
Ihre Struktur sollte wie folgt aussehen:
In unserem www Verzeichnis erstellen, ein index.html Datei und fügen Sie den folgenden Code ein:
mobiletuts phonegap Willkommen bei PhoneGap
Assets bearbeiten / www / index.html
Nun müssen wir einige Änderungen an der Java-Hauptdatei vornehmen, die in der gefunden werden kann src Mappe. Erstens müssen wir die Klasse ändern ' erweitern von Aktivität zu DroidGap.. Wir müssen dann ersetzen setContentView (R.layout.main); mit super.loadUrl ("file: ///android_asset/www/index.html"); und dann hinzufügen import com.phonegap. *; nach den ersten beiden importen. Ihre Java-Datei sollte nach Fertigstellung ungefähr so aussehen:
Accentsconagua
Paket com.shaundunneTest; import android.app.Activity; import android.os.Bundle; import com.phonegap. *; public class TestActivity erweitert DroidGap / ** Wird beim ersten Erstellen der Aktivität aufgerufen. * / @Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); super.loadUrl ("file: ///android_asset/www/index.html"); Eclipse wird wahrscheinlich jetzt einige Fehler auslösen. Klicken Sie einfach mit der rechten Maustaste auf den Ordner libs und gehen Sie zu Erstellungspfad => Erstellungspfad konfigurieren Klicken Sie dann auf der Registerkarte Bibliotheken auf Füge JAR hinzu und machen Sie weiter und schließen Sie die phonegap.jar Datei. Dies sollte die Fehler beheben. Nun müssen wir der Manifestdatei einige Berechtigungen hinzufügen, um sicherzustellen, dass PhoneGap ordnungsgemäß ausgeführt wird.
Öffne die AndroidManifest.xml Datei und fügen Sie vor dem Anwendung Eintrag:
Fügen Sie im Activity-Tag das folgende Attribut hinzu:
android: configChanges = "Ausrichtung | keyboardHidden"
Dies stellt sicher, dass die App das nicht neu lädt index.html wann immer diese Ereignisse passieren.
Das letzte, was Sie tun müssen, ist das zu kopieren xml Ordner aus dem PhoneGap-Download in die res Verzeichnis im Projekt. Jetzt können Sie dies im Emulator ausführen.
Sie können jetzt mit und mit der rechten Maustaste auf Ihr Projekt klicken Rennen wie eine Android-Anwendung. Wenn Sie noch kein Gerät eingerichtet haben, werden Sie dazu aufgefordert. Wenn Sie Hilfe benötigen, lesen Sie die Dokumentation hier
Und das ist alles, was Sie brauchen, um mit Android zu beginnen!
Bisher haben wir nur zwei der mobilen Plattformen für unsere Anwendung behandelt, aber es ist wahrscheinlich, dass wir uns auf alle Plattformen verteilen möchten, die PhoneGap unterstützt, oder? Statt ein paar weitere SDKs, eine andere IDE mit ein paar weiteren Plugins zu installieren und eine virtuelle Maschine zum Testen einzurichten, verwendet diese Serie den PhoneGap: Build-Dienst, wenn die App verteilt werden muss.
PhoneGap: Build ist, wie auf der Website vermerkt, ein Cloud-basierter Dienst, der eine gezippte HTML / CSS / JS-Anwendung benötigt und Sie zurücksendet, kompiliert und bereit zur Verteilung (d. H. Für Android, iOS) und BB benötigen Sie die erforderlichen Zertifikate für die Verteilung). PhoneGap: Build befindet sich derzeit in BETA, und obwohl es kostenpflichtige Optionen gibt (die sich lohnen, wenn Sie es regelmäßig verwenden), gibt es eine kostenlose Option, die eine private Anwendung zulässt. Das ist alles, was wir für den Moment für unser Projekt brauchen, also melden Sie sich jetzt an, da wir den Build-Dienst am Ende der Serie nutzen werden.
Wir haben jetzt unsere Umgebung für die Entwicklung mit PhoneGap vorbereitet. Im nächsten Teil dieser Serie werden wir uns zunächst mit den APIs beschäftigen, auf die PhoneGap zugreifen kann, und wie sie in unserer App verwendet werden.
