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“. Dies ist nicht nur eine Hommage an eine exzellente Science-Fiction-Fernsehserie, sondern auch eine vollwertige native mobile Anwendung für den, der an Sie glaubt!
Im letzten Teil dieser Serie haben wir unsere Web-App mit einigen grundlegenden Strukturen und Übergängen zwischen den Seiten eingerichtet. In diesem Teil werden wir weiter daran arbeiten, die Teile der App auszufüllen, die ohne PhoneGap ausgeführt werden können, und unser PhoneGap-Projekt für die Integration einzurichten.
Bevor wir anfangen, wollte ich eine Frage behandeln, die mir immer gestellt wird. Dies ist eine Frage, die ich einmal gestellt habe, und Sie hätten wahrscheinlich auch gefragt. Wie kann ich eine Web-App auf einem mobilen Gerät debuggen??
Es gibt verschiedene Möglichkeiten zum Debuggen in einem Gerät. Sie könnten alte Schule besuchen und verwenden Alarm (etwas);, Alarme überall zu haben, ist jedoch ineffizient und könnte im Produktionscode enden (so nervig!). Sie können die Debug-Konsole in Safari auf einem iOS-Gerät verwenden, das sich unter Einstellungen -> Safari -> Entwickler befindet. Allerdings verwenden nicht alle Geräte Safari oder eine Debug-Konsole. Außerdem gibt diese Konsole nur minimale Informationen aus.
Wenn ich nur eine JavaScript-Konsole verwenden muss, um ein zu fangen console.log (), oder vielleicht JS auf dem Gerät ausführen, um etwas zu überprüfen, benutze ich gerne jsconsole.com. Es ist eine der einfachsten Methoden, eine Konsole auf Ihrem Gerät zu verwenden, und es gibt sogar eine iOS-App. Um eine Sitzung auf jsconsole.com zu starten, geben Sie einfach ein :Hör mal zu Sie erhalten dann eine Skript-Tag-Ausgabe, die Sie in Ihre Seite aufnehmen können. Starten Sie Ihre App und Sie sehen die Verbindung in der Konsole. Sie können JS jetzt in der Konsole ausführen und es auf dem Gerät anzeigen oder sich in Ihrem Code bei der Konsole anmelden und hier anzeigen. Sehen Sie sich das Video unten für eine Demonstration davon an:
Weitere Hilfe zu jsconsole finden Sie hier.
Eine andere Alternative ist WeInRe (Web Inspector Remote). Zunächst als eigenständiges Projekt gestartet, ist WeInRe nun Teil der PhoneGap-Familie und kann unter debug.phonegap.com gefunden werden. Das Setup ist jsconsole sehr ähnlich, aber Sie erhalten tatsächlich einen WebKit-Inspektor, ähnlich wie Chrome oder Safari. Sehen Sie sich das Video unten für ein Beispiel an:
Eine andere Alternative ist Socketbug. Dies ist großartig, erfordert jedoch die Installation und Einrichtung von Node und socket.io, was leider außerhalb des Anwendungsbereichs dieses Tutorials liegt. Wenn Sie jedoch abenteuerlustig sind und Socketbug ausprobieren möchten - es lohnt sich.
Das sind die Debugging-Tools, die ich verwende. Jetzt können wir einige Funktionen hinzufügen!
Eine der Funktionen, die wir ohne eine PhoneGap-API implementieren können, ist der Twitter-Feed. Diese Funktion listet einfach einen Feed von Tweets auf, die einem bestimmten Suchbegriff entsprechen. Glücklicherweise kann Twitter Daten im JSON-Format zurückgeben, wenn wir eine Suchanfrage auf search.twitter.com ausführen. Wenn Sie die folgende URL verwenden http://search.twitter.com/search.json?q=ufo+spotted&rpp=4, Sie erhalten eine JSON-Antwort, die genug Daten enthält, um eine Liste zu füllen.
Um unsere Daten auf die Seite zu bekommen und sie auf eine nette Weise anzuzeigen, verwenden wir Vorlagen. Es gibt eine Reihe von Template-Engines, die alle einen Blick wert sind. Moustache ist sehr beliebt und sehr mächtig. jQuery hat auch eine, die meiner Meinung nach perfekt für das ist, was wir erreichen wollen.
In der Tweet-Seite werde ich leer sein ul und ein div Container, der auf der Seite ausgeblendet ist. Innerhalb des Containers befindet sich der Code, den ich als Vorlage verwenden möchte. In diesem Fall ist es einfach li Element mit einigen grundlegenden Markierungen, die die Twitter-Informationen enthalten, die wir anzeigen möchten. Es wird in einer sein Skript Block mit einer eindeutigen ID und einem Typ von type = "text / x-jquery-tmpl", Dies ist so, dass der Browser es nicht als JavaScript ausführt. Die Twitter-Template-Engine verwendet $ als Platzhalter für die Daten, die wir von unseren erhalten JSON Daten. Die Tweetseite sieht jetzt ungefähr so aus:
Jetzt müssen wir unsere Funktion schreiben, die jedes Mal aufgerufen wird, wenn wir diese Seite laden. Diese Funktion wird an Twitter weitergeleitet und liefert unseren Feed:
Accentsconagua
Funktion getTweets () var q = "ufo + spotted" rpp = 5, twurl = "http://search.twitter.com/search.json?q="; $ .getJSON (twurl + q + "& rpp =" + rpp + "& callback =?", Funktion (Daten) $ ("# tmpl-tweets"). tmpl (data.results) .appendTo ("# tweets") ;); Ich werde diese Seite zuerst laden, also habe ich die Seitenklasse auf current gesetzt. Jetzt müssen wir nur noch einen Stil zu den Tweets hinzufügen, damit sie etwas schöner angezeigt werden.
/ ** Tweets Styling ** / #tweets list-style: none; Polsterung: 10px; #tweets li font-size: 12px; Überlauf versteckt; Rand unten: 20px; #tweets li h2 font-size: 14px; Marge: 0; .avatar margin-right: 10px; #tweets li a, #tweets li span float: left; #tweets li span width: 70%;
Wenn wir die App das nächste Mal starten, sollten wir Folgendes erhalten.
Die andere Funktion, die wir vor der Phonegap-Integration implementieren können, ist die Kartenfunktion. Wir werden die Google Maps API verwenden, um eine einfache Karte zu erstellen, und dann einige Kartendaten zum Ablegen von Markierungen verwenden. Jeder Marker zeigt UFO-Sichtungen an.
Hierfür verwenden wir die JavaScript-API (derzeit Version 3). Eine vollständige Einführung in die Maps-API ist für dieses Lernprogramm nicht möglich. Sie finden hier jedoch die gesamte Dokumentation sowie Implementierungsbeispiele. Wenn Sie dem hier beschriebenen Tutorial folgen, erfahren Sie, wie Sie eine Basiskarte implementieren. Wir können den gleichen Code verwenden, um eine Basiskarte zu implementieren und folgendes zu erhalten:
Jetzt können wir zu der Dokumentation über die Marker gehen, die hier zu finden ist. Jetzt können wir beim Laden einige grundlegende Markierungen auf unserer Karte ablegen. Die Markierungen würden die Positionen der Sichtungen mit den Daten der Fotos darstellen, die von den Benutzern der Anwendung aufgenommen und hochgeladen wurden. Wir würden einen Dienst auf einem Server ausführen, der Daten über Ajax zurückgeben kann, wahrscheinlich im JSON-Format. Das Einrichten dieses Dienstes ist wiederum ein komplettes Lernprogramm für sich. Für jeden Eintrag erstellen wir jedoch eine Markierung für die Karte mit dem in der Demo bereitgestellten Code.
var marker = new Google.maps.Marker (position: newLatlng, map: map, titel: "New Sighting");
Nach dem Laden der Karte werden die Markierungen hinzugefügt. Wenn Sie die Google API-Dokumentation durchlesen, finden Sie weitere Optionen für die Marken, z. B. die Anzeige mit Bildern und Notizen. Es lohnt sich, die anderen Optionen zu erkunden und verschiedene Implementierungen zu finden.
Das ist ungefähr so viel, wie wir können, bevor wir PhoneGap erreichen. Unsere letzte Funktion erfordert die Verwendung der Kamera. Lassen Sie uns also unser PhoneGap-Projekt einrichten. Schauen Sie sich die Einführung zu PhoneGap hier an, falls Sie dies noch nicht getan haben.
Icons sind ein sehr wichtiger Teil der Anwendung. Es ist das Bild, das Ihre Anwendung überall darstellt, und es gibt bestimmte Richtlinien, die Sie befolgen sollten, um sicherzustellen, dass sie überall gut aussieht. Es gibt hier einen großartigen Blogbeitrag über Symbolgrößen und die Richtlinien, die beim Erstellen eines Symbols zu beachten sind. Normalerweise nehme ich ein 512x512-Symbol und verkleinere es von dort auf alle benötigten Größen.
Sie müssen auch einen Startbild- / Startbildschirm für Ihre App erstellen.
Sobald wir die Standardanwendung von PhoneGap auf unserem Simulator und / oder Testgerät ausgeführt haben. Wir können die Hauptzusammenfassungsseite der Xcode-Vorlage für PhoneGap durchgehen. Als Erstes möchte ich sicherstellen, dass das Gerätemenü auf iPhone eingestellt ist. Wir könnten auch auf dem iPad bereitstellen, wenn wir dies auch wollten, aber es gibt möglicherweise einige CSS-Änderungen, die wir zuerst vornehmen möchten. Im Moment bleibe ich nur beim iPhone. Überprüfen Sie alle Geräteausrichtungen, da jQuery Mobile unser Layout je nach Ausrichtung aussortiert. Sie können die Bilddateien per Drag & Drop in die ihnen zugewiesenen Slots auf der Zusammenfassungsseite ziehen.
Wenn Sie jetzt Ihre Anwendung starten, werden Sie mit Ihrem neuen App-Symbol und Ihrer Startseite begrüßt. Kopieren Sie jetzt die Dateien, in denen Sie gearbeitet haben www Mappe. Starten Sie die App und prüfen Sie, ob alles in Ordnung ist.
Nachdem Sie Ihr Projekt in Eclipse eingerichtet haben (genau wie wir hier im ersten Teil unser Testprojekt durchgeführt haben), müssen Sie drei Symbolgrößen für Ihre Anwendung vorbereiten. Hohe Dichte (72x72), mittlere Dichte (48x48) und niedrige Dichte (36x36). Diese Symbole ersetzen die Standardsymbole, die im angezeigt werden res Mappe. Die entsprechenden Akronyme sind hdpi, mdpi und ldpi und stehen für Hoch, Mittel und Niedrig. Die Bilder, die Sie als Begrüßungsbildschirm verwenden möchten, sollten auch in diese Ordner verschoben werden.
Damit der Begrüßungsbildschirm für Android funktioniert, müssen wir unseren hinzufügen und ändern DroidGap Klasse, die das Splash-Image beim Laden enthält. Hinzufügen:
super.setIntergerProperty ("splashscreen", R.drawable.splash) Als nächstes die loadUrl benötigt ein Timeout hinzugefügt.
super.loadUrl ("file: ///android_asset/www/index.html", 5000); Ihre Datei sollte jetzt wie folgt aussehen:
Führen Sie die Anwendung aus und stellen Sie sicher, dass alles in Ordnung ist.
Wir sind jetzt an dem Punkt, an dem wir unsere letzten beiden Funktionen implementieren können: die Gerätekamera und lokale Speicheroptionen. Dies wird in zukünftigen Tutorials dieser Serie behandelt. Diese Serie wird auch durch das Senden unserer App in den verschiedenen App-Stores gehen!
