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!
In unserem ersten Teil haben wir uns mit der Einrichtung unserer Entwicklungsumgebung und der Einführung von PhoneGap für iOS- und Android-SDKs befasst. In diesem zweiten Teil unserer PhoneGap-Serie werden wir uns einige der Geräte-APIs ansehen, auf die PhoneGap uns Zugriff gibt, und erörtern, wie wir sie verwenden könnten.
In diesem Teil der Serie werden wir uns nun mit einigen Funktionen von PhoneGap befassen, also werden wir jetzt einen Test einrichten.
Richten Sie Ihr Projekt in der von Ihnen gewählten Umgebung ein: Xcode für iOS oder Eclipse für Android. Ich werde auf die Unterschiede zwischen den beiden hinweisen, wenn es nötig ist, wenn wir weitergehen.
Wir beginnen mit etwas grundlegendem HTML und schließen die Phongap.js-Datei ein. Wenn Sie Ihr Projekt mit Xcode erstellt haben, ist dies so ziemlich der grundlegende HTML-Code, der erstellt wird.
Beschleunigung
In diesem Teil der Serie möchten wir in der Lage sein, auf mindestens einem tatsächlichen Gerät testen zu können, da der Simulator Einschränkungen bei den Gerätesensoren wie Beschleunigungssensor und Kamera hat. Um ein iOS-Gerät als Testgerät in Betrieb zu nehmen, benötigen Sie ein kostenpflichtiges Entwicklerkonto. Wenn Sie Ihr Gerät an Ihren Computer anschließen und Xcode ausführen, haben Sie die Möglichkeit, dieses Telefon als Entwicklungstelefon zu verwenden. Gehen Sie das Setup durch und wenn Sie sich jetzt für die Erstellung und Ausführung Ihrer App entscheiden, können Sie Ihr Gerät aus dem Dropdown-Menü auswählen.
Für Android ist es ziemlich dasselbe, nur dass Sie dies in Eclipse tun. Verbinden Sie Ihr Telefon und stellen Sie sicher, dass es sich im Debug-Modus über USB (in den Telefoneinstellungen) befindet. Wenn Sie Ihre App ausführen möchten, wählen Sie Als Android-App ausführen.
Schauen wir uns einige Grundlagen des Gerätesensors an.
Der Beschleunigungsmesser liefert eine Rückmeldung für die Bewegung der Geräte über alle drei Achsen. Wir haben ein paar Methoden für den Beschleunigungsmesser in PhoneGap getCurrentAcceleration, watchAcceleration und clearWatch
Es gibt auch einige Argumente, die bei der Accelerometer-Methode durchlaufen werden müssen. Beschleunigungsmessererfolg, accelerometerError und accelerometerOptions.
Wir verwenden unsere erste Methode, accelerometer.getCurrentAcceleration, wie folgt.
navigator.accelerometer.getCurrentAcceleration (accelerometerSuccess, accelerometerError);
Die aktuelle Beschleunigung wird mithilfe der Beschleunigungssensor-Funktion zurückgegeben, und alle benötigten Daten befinden sich im Beschleunigung Objekt, das wir in unsere Erfolgsfunktion zurückgeben. Lassen Sie uns ein Beispiel bekommen, das läuft. Nehmen Sie unser grundlegendes Layout, das wir am Anfang dieses Teils eingerichtet haben, und lassen Sie uns noch etwas hinzufügen.
Beschleunigung
Wenn Sie dies in einem Simulator oder Gerät ausführen, werden Sie beim Laden mit einer einzigen Warnung begrüßt. Was wir tun müssen, ist, die Beschleunigung in Intervallen zu beobachten und dann die Daten auszugeben. Das können wir mit der watchAcceleration Methode. Wir verwenden es mit folgendem:
var watchID = navigator.accelerometer.watchAcceleration (Erfolg, Fehler, [Optionen]);
Das watchID ist eine Referenz, an die wir unsere Optionen anhängen können, und auch eine Möglichkeit, die wir verwenden können, wenn Sie die clearWatch Methode.
Machen wir weiter und ersetzen Sie unser älteres JavaScript durch Folgendes:
Accentsconagua
// Warten, bis PhoneGap document.addEventListener lädt ("deviceready", geladen, false); // PhoneGap ist bereit Funktion geladen () startWatch (); // Startet die Beschleunigungsfunktion. StartWatch () // Beschleunigung alle 3 Sekunden aktualisieren var options = frequency: 3000; watchID = navigator.accelerometer.watchAcceleration (onSuccess, onError, Optionen); // Stoppen Sie die Beschleunigungsfunktion. StopWatch () if (watchID) navigator.accelerometer.clearWatch (watchID); watchID = null; // Erfolgsfunktion onSuccess (Beschleunigung) var element = document.getElementById ('Beschleunigungssensor'); element.innerHTML = 'Beschleunigung X:' + Beschleunigung.x + '
'+' Beschleunigung Y: '+ Beschleunigung.y +'
'+' Beschleunigung Z: '+ Beschleunigung.z +'
'+' Zeitstempel: '+ Beschleunigungszeitstempel +'
'; // Fehlerfunktion onError () alert ('onError!'); Wie Sie sehen können, übergeben wir eine Frequenz Option in die Watch-Methode. Dies ist in Millisekunden, also wird diese Methode alle 3 Sekunden erneut ausgelöst, und bei Erfolg aktualisieren wir den HTML-Code eines Elements mit der ID der Beschleunigungsmesser. Wir müssen dieses Element nur in unseren aktuellen HTML-Code aufnehmen.
Warten auf Beschleunigungsmesser…
Wenn Sie jetzt die App laden, werden sich die Daten des Beschleunigungsmessers ändern.
Wenn Sie die Simulatoren anstelle von tatsächlichen Geräten verwenden, wird die Ausgabe des Beschleunigungssensors nicht verändert.
Das ist es also für den Zugriff auf die Beschleunigungssensor-API. Lassen Sie uns nun einen Blick darauf werfen, wie Sie damit ein Verwackeln in PhoneGap erkennen können.
Um ein Verwackeln mit PhoneGap zu erkennen, werden wir unser Problem loswerden onSuccess funktionieren und schreiben unsere neu startWatch Funktion. Um zu wissen, ob das Gerät geschüttelt wurde, müssen wir wissen, wie die vorherige Ausrichtung war, um diese mit der aktuellen Ausrichtung zu vergleichen. Wir tun dies, indem wir eine Variable am Anfang von setzen startWatch Funktion.
var previousReading = x: null, y: null, z: null
Als nächstes starten wir die watchAcceleration-Funktion.
navigator.accelerometer.watchAcceleration ();
Wenn Sie die Beschleunigung erfolgreich abrufen möchten, werden wir einige Variablen festlegen, die uns dabei helfen, einen Shake zu erkennen.
var changes = , gebunden = 0,2;
Jetzt können wir die vorherige Beschleunigung mit der aktuellen Beschleunigung vergleichen und ob sie über das hinausgeht, was wir eingestellt haben gebunden variabel, dann können wir unsere erschütternde Funktion abfeuern.
if (previousReading.x! == null) changes.x = Math.abs (previousReading.x, Beschleunigung.x); changes.y = Math.abs (vorheriges Lesen.y, Beschleunigung.y); changes.z = Math.abs (vorherigeReading.z, Beschleunigung.z); if (changes.x> gebunden && changes.y> gebunden && changes.z> gebunden) shaken ();
Wir können dann den vorherigen Wert auf den aktuellen Wert für die nächste Zeitrunde setzen.
previousReading = x: Beschleunigung.x, y: Beschleunigung.y, z: Beschleunigung.z
Schließlich sollten wir nicht vergessen, eine "Shake" -Funktion zu schreiben, um den Shake zu handhaben. Im Moment wird nur eine Nachricht ausgegeben.
function shaken () alert ("Shaken"); Sie müssen daran denken, dass Sie den Fehlerbehandler und die Häufigkeit bis zum Ende des Befehls hinzufügen watchAcceleration Methode.
Ihr endgültiger Code sollte nun etwa so aussehen:
Beschleunigung
Ich habe festgestellt, dass die Grenze von 0,2 eine ziemlich gute war, aber Sie möchten vielleicht versuchen, sie nach dem Testen zu erhöhen. Wir haben nun beschrieben, was mit den Beschleunigungsmesserdaten erreicht werden kann und wie diese erfasst werden. Schauen wir uns also die Kamera an.
Die Kamera ist heutzutage wahrscheinlich eine der am häufigsten verwendeten Funktionen auf Smartphones, insbesondere, da die Kameraauflösung bei den meisten Handys schnell zu Standard-Point-and-Shoot-Versionen führt. Zum Glück ermöglicht PhoneGap eine recht einfache Möglichkeit, Bilder von der Kamera des Geräts aufzunehmen und diese Bilder schnell in unsere Anwendung zu integrieren.
Die Methode, die wir verwenden werden, ist camera.getPicture () und genau wie der Beschleunigungssensor wird er auf die gleiche Art und Weise aufgerufen und nimmt drei Parameter an. Die Methodensignaturen sehen ungefähr so aus: navigator.camera.getPicture (cameraSuccess, cameraError, [cameraOptions]). Wie Sie sehen werden, gibt es beim Umgang mit der Gerätekamera viel mehr Optionen als beim Beschleunigungssensor.
Die optionalen Parameter, die Sie durchgeben können, lauten wie folgt:
QualitätdestinationTypeQuelle TypallowEditencodingTypetargetWidthtargetHeightWie du vielleicht erraten hast, Qualität ist die Qualität, in der das Bild gespeichert wird. Dies erfordert eine Zahl zwischen 0 und 100. Die destinationType Variable ist das Format des zurückgegebenen Bildes. DATA_URL ist eine Base64-codierte Zeichenfolge und FILE_URI ist eine tatsächliche Bild-URI (jpeg / png). Das Quelle Typ Parameter ist der Ort, an dem Sie das Quellbild abrufen möchten PHOTOLIBRARY, KAMERA oder SAVEDPHOTOALBUM. Das allowEdit Mit dieser Option kann das Bild vor dem Speichern bearbeitet werden. EncodingType Definiert die Kodierung des zurückgegebenen Bildes bei Verwendung FILE_URI, von denen können Sie entweder verwenden JPEG oder PNG. targetWidth und targetHeight wird das Bild mit beibehaltenem Seitenverhältnis skaliert. Endlich ist da Medientyp was nur bei der Auswahl funktioniert SAVEDPHOTOALBUM und wo Sie definieren möchten, aus was der Benutzer auswählen kann BILD, VIDEO oder ALLMEDIA.
Also, lassen Sie uns unsere Kamera starten. Zuerst haben wir eine Schaltfläche, die unsere Kamera startet, wenn sie angeklickt wird. Wenn das Foto aufgenommen wurde, wird das als base32 kodierte Bild base64 als Miniaturansicht zurückgegeben. Der Quellcode sieht folgendermaßen aus:
Foto aufnehmen
![]()
Nach wie vor warten wir auf das Laden von PhoneGap. Wenn das Laden abgeschlossen ist, können Sie die Optionen für die festlegen destinationType und das Quelle Typ, Standardmäßig sind diese auf gesetzt KAMERA und DATA_URL. Wenn der Button angeklickt wird, feuern wir die capturePhoto Funktion. Nach dem Erfolg, capturePhoto beginnt unser getPhoto Funktion. Unsere Funktion empfängt die Bilddaten in dem von uns angegebenen Format und wir können damit das machen, was wir wollen. Alles, was wir wirklich tun, ist, ein HTML-Element spezifizieren zu lassen und unsere Daten in das zu setzen src dieses Elements.
Starten und testen Sie Ihren Code auf Ihrem Gerät. Nachdem Sie ein Bild aufgenommen und getestet haben, sollten Sie etwas haben, das wie folgt aussieht:
Es ist auch möglich, das Foto nach der Aufnahme zu bearbeiten. Alles, was wir tun müssen, ist das Durchgehen allowEdit: true Parameter in den Optionen, nachdem das Foto aufgenommen wurde. Sie gelangen in den Bearbeitungsbildschirm, auf dem Sie das Foto zoomen und zuschneiden können. Wir können den folgenden Code verwenden, wenn wir das Bild erfassen:
navigator.camera.getPicture (getPhoto, onFail, allowEdit: true);
Es gibt ein paar Macken allowEdit eine erwähnenswerte Option. Derzeit funktioniert dies nur unter iOS und wird in Blackberry, Android, Palm und Windows 7 ignoriert.
Wenn wir ein Foto aus dem Fotoalbum oder einen anderen Speicher (z. B. localstorage) erhalten wollten, würden wir es verwenden pictureSource.PHOTOLIBRARY.
Das sind so ziemlich die Grundlagen, die wir benötigen, um mit der Kamera in PhoneGap loszulegen. Probieren Sie es aus und probieren Sie einige Dinge mit unterschiedlichen Bildqualitäten, -typen und -größen aus.
Möglicherweise möchten wir das aufgenommene Foto an einem anderen Ort als dem Fotoalbum auf dem Gerät speichern. In der Tat ist dies sehr wahrscheinlich der Fall. Wir werden wahrscheinlich auch andere Informationen speichern wollen. Es gibt verschiedene Möglichkeiten, um den Gerätespeicher zu nutzen. Eine davon ist WebSQL, die andere WebStorage - beide werden vom W3C definiert. Sie können die Daten auch an einen Remote-Server senden, wenn Sie diese in einer Cloud-App (Instagr.am) bereitstellen möchten, oder Sie könnten einen Schritt weiter gehen und Lawnchair oder PersistenceJS verwenden
.
Ich persönlich bevorzuge die WebStorage-Methode und für dieses Projekt ist es perfekt.
Wir können WebStorage mit folgender Syntax verwenden:
// Speichern Sie die Daten window.localStorage.setItem ("key", "value"); // Abrufen der Daten var value = window.localStorage.getItem ("key"); // Wert ist jetzt gleich "Wert" // Entferne den Wert window.localStorage.removeItem ("key"); Mit dieser grundlegenden Syntax haben wir die Möglichkeit, das base64-codierte Bild im lokalen Speicher zu speichern und bei Bedarf abzurufen.
Geolocation liefert Standortinformationen des Geräts. Viele Geräte können die Browser-Fähigkeit bereits nutzen, um die Geolocation-API zu verwenden. Wenn Sie die PhoneGap-Implementierung verwenden, wird diese, falls verfügbar, verwendet.
Die Geolocation von PhoneGap umfasst 3 Methoden, getCurrentPosition, watchPosition und clearWatch. Das getCurrentPosition Diese Methode gibt den aktuellen Standort des Geräts mit einem Positionsobjekt zurück, das die Eigenschaften für Folgendes enthält:
Die grundlegende Verwendung der Geolocation-Funktion sollte inzwischen ziemlich vertraut aussehen:
navigator.geolocation.getCurrentPosition (Erfolg, Fehler);
Und dann können wir so etwas machen:
Funktion onSuccess (Position) var el = document.getElementById ('location'); el.innerHTML = 'Latitude:' + position.coords.latitude + '
'+' Längengrad: '+ position.coords.longitude +'
'+' Höhe: '+ position.coords.altitude +'
'+' Genauigkeit: '+ position.coords.genauigkeit +'
'+' Höhengenauigkeit: '+ position.coords.altitudeAccuracy +'
'+' Überschrift: '+ position.coords.heading +'
'+' Geschwindigkeit: '+ position.coords.speed +'
'+' Zeitstempel: '+ neues Datum (position.zeitstempel) +'
'; Ihr vollständiger Code sollte ungefähr wie folgt aussehen:
Geolocation Geolocation finden…
Dadurch erhalten Sie die Positionsinformationen in dem Moment, in dem die Erfolg Funktion wird ausgelöst. Wenn wir ständig die geografische Position des Geräts überwachen möchten, verwenden wir die navigator.geolocation.watchPosition Methode anstelle von navigator.geolocation.getCurrentPosition, Weitergeben der Frequenz, die wir aktualisieren möchten. Unser Code sollte nun etwa so aussehen:
Geolocation Geolocation finden…
Wenn Sie Ihre App jetzt ausführen, sollten Sie eine App erhalten, die folgendermaßen aussieht:
Wie der Beschleunigungssensor verfügt auch Geolocation über eine clearWatch Methode zum Stoppen der Suche nach Änderungen, die Sie mit dem folgenden Code verwenden können:
navigator.geolocation.clearWatch (watchID);
Damit haben wir jetzt das Wissen, die Geolocation-API in PhoneGap für unsere Anwendung zu verwenden. Möglicherweise möchten wir nur unseren Standort zu einem bestimmten Zeitpunkt aufzeichnen und lokal oder remote speichern. Wir möchten möglicherweise auch unsere Bewegung im Zeitverlauf aufzeichnen und speichern. Was immer wir damit tun wollen, wir wissen jetzt, wie wir diese Informationen erhalten.
Zusätzlich zu den Funktionen, die PhoneGap standardmäßig anbietet, gibt es für PhoneGap eine Reihe von Plugins für Datumsauswahl, Dateiuploader und Paypal. Da wir in dieser App keine Plugins verwenden werden, geht die Verwendung und Installation der Plugins nicht in den Umfang dieser Serie. Sie sollten jedoch wissen, welche Optionen Sie bei der Arbeit mit PhoneGap haben. Schauen Sie sich also GitHub an Projekt für Plugins und das Wiki für Informationen, wie Sie mit ihnen arbeiten können. Wenn Sie ein separates Tutorial zur Verwendung von PhoneGap-Plugins und sogar zum Schreiben von eigenen wünschen, teilen Sie uns dies bitte in den Kommentaren mit!
Während wir noch nicht mit der Entwicklung einer Anwendung begonnen haben, sind wir jetzt mit PhoneGap einsatzbereit. Mit einem Gerät und einem Simulator können Sie testen, wie die PhoneGap-APIs funktionieren und wie die API in einer App verwendet wird. Im nächsten Teil beginnen wir mit dem Bau von Sculder, unserer Beispielanwendung!
