Share
Im ersten Tutorial dieser Einführung zu Cordova haben Sie erfahren, was Cordova ist, wie es unter der Haube funktioniert und welche Art von Apps Sie damit erstellen können. In diesem Lernprogramm gehen Sie zum praktischen Teil über und machen sich beim Erstellen Ihrer ersten Cordova-App die Hände schmutzig.
Zuerst zeige ich Ihnen, wie Sie alles installieren, was Sie benötigen, um mit Cordova arbeiten zu können. Sie erstellen dann eine Hello World-App, die einige Plugins, ein Benutzeroberflächen-Framework und die Crosswalk-Webansicht verwendet. Am Ende dieses Lernprogramms stellen Sie Ihre App auf einem Android-Gerät bereit.
Git ist ein Versionskontrollsystem. Es wird verwendet, um Plugins zu ziehen, die Sie Ihrem Cordova-Projekt hinzufügen möchten. Um Git zu installieren, besuchen Sie die Downloadseite und wählen Sie das Installationsprogramm für Ihr Betriebssystem.
Node.js ist eine Laufzeitumgebung für Webanwendungen, die JavaScript verwenden. Im Lieferumfang ist ein Paket-Manager namens Node Package Manager oder npm enthalten, mit dem Entwickler Tools und Bibliotheken verteilen. Cordova und seine Plugins werden mit npm verteilt und müssen daher installiert werden.
Wenn Sie Windows oder OS X verwenden, können Sie Node.js mithilfe des Installationsprogramms installieren, das auf der Download-Seite verfügbar ist. Wenn Sie Ubuntu oder eine andere Linux-Distribution verwenden, können Sie den Knoten mit dem Paket-Manager installieren, der mit Ihrem Betriebssystem geliefert wird. Für Ubuntu können Sie Node.js mit den folgenden Befehlen installieren:
bash sudo apt-get install python-software-eigenschaften python g ++ macht sudo add-apt-repository ppa: chris-lea / node.js sudo apt-get Aktualisierung sudo apt-get install nodejs
Die nächste zu installierende Komponente ist Java. Wir brauchen Java, weil wir die Hallo-Welt-App auf einem Android-Gerät bereitstellen werden. Native Android-Apps sind in Java geschrieben. Deshalb muss Java installiert sein.
Um Java zu installieren, besuchen Sie die Java-Downloadseite und klicken Sie auf Kostenloser Java Download Schaltfläche, um eine Liste der verfügbaren Installationsprogramme für Ihr Betriebssystem anzuzeigen. Laden Sie ein Installationsprogramm für Ihr Betriebssystem herunter und installieren Sie Java.
Da wir die App auf einem Android-Gerät bereitstellen, müssen wir das Software Development Kit (SDK) für Android installieren. Besuchen Sie Android Studio und SDK-Tools und unter Nur SK-Werkzeuge, Laden Sie das entsprechende Paket für Ihr Betriebssystem herunter.
Für Windows gibt es bereits ein Installationsprogramm, mit dem Sie die Pakete auswählen können, die Sie installieren möchten. Für OS X und Linux müssen Sie das Archiv extrahieren. Einmal extrahiert, öffnen Sie die .bashrc Datei in Ihrem Basisverzeichnis und fügen Sie den Pfad zu den Android SDK- und SDK-Tools hinzu:
bash export ANDROID_HOME = / media / wern / Files / downloads / android-sdk-linux / sdk PATH = $ PATH: / media / wern / Files / downloads / android-sdk-linux / sdk / tools export PATH
Ersetzen / media / wern / Dateien / downloads / mit dem tatsächlichen Pfad zum Android SDK auf Ihrem Computer. Sie können dann die Quelle Befehl zum erneuten Laden der .bashrc Datei:
bash source ~ / .bashrc
Dadurch können Sie das ausführen Android Befehl von der Befehlszeile aus, Starten des Android SDK-Managers. Auf diese Weise können Sie auswählen, welche Pakete Sie auf Ihrem Computer installieren möchten. Cordova benötigt nur die folgenden Pakete:
Wenn die oben genannten Pakete ausgewählt sind, sollte es auf Ihrem Computer folgendermaßen aussehen:
Klicken Sie auf die Schaltfläche Installieren, um den Installationsvorgang zu starten. Daraufhin öffnet sich ein Fenster, in dem Sie aufgefordert werden, die zu installierenden Pakete zu bestätigen. Drücke den Lizenz akzeptieren Optionsfeld zur Bestätigung und klicken Sie auf die Schaltfläche Installieren. Dies kann je nach Internetverbindung eine Weile dauern.
Wenn Sie die erforderlichen Abhängigkeiten auf Ihrem Computer installiert haben, können Sie Cordova installieren. Führen Sie den folgenden Befehl in der Befehlszeile aus:
bash sudo npm install -g cordova
Das -G Diese Option weist npm an, Cordova global zu installieren. Dies bedeutet, dass Sie die Cordova-Befehlszeilen-Tools von überall aus verwenden können.
Wir sind jetzt bereit, eine einfache Hallo-Welt-App mit Cordova zu erstellen. Wir erstellen eine App, mit der der Benutzer ein Foto mit dem Kamera-Plugin aufnehmen und das Foto mit dem PhoneGap-Plug-in für das Teilen von sozialen Netzwerken teilen kann. Schließlich werden wir auch Crosswalk verwenden.
Um eine neue Cordova-App zu erstellen, öffnen Sie ein neues Terminalfenster und führen Sie das aus Cordova erstellen Befehl:
bash cordova erstellen photosharer com.ihrname.photosharer PhotoSharer
Das Cordova erstellen Befehl akzeptiert die folgenden Argumente:
Accentsconagua
com.companyname.appname.Sobald der Befehl ausgeführt wurde, sehen Sie ein Photosharer Ordner mit folgendem Inhalt:
Nachdem Sie nun wissen, wozu die einzelnen Ordner in einer Cordova-App dienen, ist es an der Zeit, die App zu verschieben. Öffnen index.html, das befindet sich in der www Verzeichnis. Dies ist die Standardseite, die Cordova bereitstellt. Cordova-Apps werden am besten als Einzelseitenanwendung geschrieben, sodass der Benutzer die Seite nicht bei jedem Zugriff auf eine Seite in der App neu laden kann. Eine Einzelseitenanwendung ist nichts anderes als eine Webanwendung, die nur eine HTML-Seite verwendet. Vorlagen werden dann verwendet, um je nach Bedarf unterschiedliche Zustände der Anwendung einzufügen.
Standardmäßig, index.html enthält den folgenden Code:
"html
Verbinde mit dem Gerät
Gerät ist bereit
"
Sie können sehen, dass es nichts wirklich Besonderes gibt. Es ist eine einfache HTML-Datei. Das einzige, was anders ist, sind die Meta Stichworte. Lassen Sie mich durch einige von ihnen gehen.
Der Erste Meta Tag gibt die Inhaltssicherheitsrichtlinie an. Dadurch wird die Cordova-Anwendung vor Cross-Site-Scripting-Angriffen (XSS) geschützt. Jedes Skript, das ein Angreifer in die Seite einfügt, lehnt einfach das Laden ab Meta tag an Ort und Stelle.
"html
"
Das Formaterkennung Meta Mit dem Tag werden Telefonnummern automatisch in Links umgewandelt. Der Benutzer kann dann auf den Link klicken, um diese Telefonnummer anzurufen.
"html
"
Das Msapplication-Tap-Highlight Meta Das Tag deaktiviert die graue Hervorhebung von Windows Phone 8 und höher. Wenn Sie keine Bereitstellung auf einem Windows Phone-Gerät planen, können Sie dieses Tag sicher entfernen.
"html
"
Das nächste Tag ist das Sichtfenster Meta Etikett. Gehen wir die Attribute dieses Tags von links nach rechts durch. Das Tag gibt zunächst an, dass der Benutzer die Seite nicht ein- oder auszoomen darf. Als nächstes die Anfangsmaßstab ist auf 1 gesetzt. Dies bedeutet, dass der Inhalt zu 100% geladen wird. Das Maximalwert und Mindestmaßstab sind beide auf 1 gesetzt. Dadurch werden die minimalen und maximalen Werte festgelegt, die der Benutzer für die Zoomstufe festlegen kann. Das Breite Attribut gibt an, dass die maximale Breite des Geräts für den Inhalt verwendet wird.
"html
"
Als nächstes ist das Standard-Stylesheet. Dieses Stylesheet enthält grundlegende Gestaltungsmöglichkeiten für die App.
"html
"
In der Karosserie Tag lebt den Markup, um den Status von Cordova anzuzeigen. Das p Element mit einer Klasse von Hören wird angezeigt, wenn die Geräte-APIs noch nicht vollständig geladen sind. Sie ist ausgeblendet, wenn die Geräte-APIs bereit sind. An diesem Punkt die p Element darunter wird stattdessen angezeigt. Dieses Markup ist spezifisch für die Standardanwendung von Cordova, sodass wir es später sicher entfernen können.
"html
Verbinde mit dem Gerät
Gerät ist bereit
"
Wir stoßen dann auf zwei Skript Stichworte. Der erste beinhaltet cordova.js. Diese Datei bietet eine einheitliche API für den Zugriff auf native Gerätefunktionen. Sie finden diese Datei nicht unter www Verzeichnis, da es bei der Erstellung Ihrer App in die jeweilige Plattform eingefügt wird. Dies bedeutet, dass es eine andere Version von gibt cordova.js abhängig von der Plattform, auf der die App läuft.
html
Der Zweite Skript tag beinhaltet index.js. Diese Datei ist spezifisch für die Standardanwendung, die erstellt wird, wenn Sie ein neues Cordova-Projekt starten. Alles, was es tut, ist, spezifischen Code auszuführen, wenn ein bestimmtes Ereignis auftritt.
html
Wenn Sie die Datei öffnen, werden Sie feststellen, dass die receiveEvent Funktion ist für das Verstecken und Zeigen der beiden verantwortlich p Elemente, denen wir früher begegnet sind. Es wird vom ausgelöst onDeviceReady Veranstaltung. Also die Ereignis-ID, die an die übergeben wird receiveEvent Funktion ist gerätetauglich.
"Javascript onDeviceReady: function () app.receivedEvent ('deviceready');,
receiveEvent: function (id)
var parentElement = document.getElementById (id); var listeningElement = parentElement.querySelector ('. listen'); var receiveElement = parentElement.querySelector ('. erhalten'); listenElement.setAttribute ('style', 'display: none;'); receiveElement.setAttribute ('style', 'display: block;'); console.log ('Received Event:' + id); "
Du hast lange genug gewartet. Es ist jetzt Zeit, sich die Hände schmutzig zu machen. Stellen Sie zunächst sicher, dass alles gut aussieht, indem Sie Ratchet verwenden, ein Front-End-Framework für die Erstellung mobiler Web-Apps. Sie können es von der Homepage herunterladen oder mit Bower installieren, indem Sie den folgenden Befehl ausführen:
Bash Bower installieren Ratsche
Kopieren Sie die Dateien in die www / lib Verzeichnis Ihres Cordova-Projekts und verknüpfen Sie das Stylesheet mit Ihrem index.html Datei.
"html
"
Entfernen Sie die Standardmarkierung im Karosserie Etikett:
"html
Verbinde mit dem Gerät
Gerät ist bereit
"
Und ersetze es durch folgendes:
"html
"
Mit der obigen Markierung wird eine Schaltfläche zum Fotografieren hinzugefügt. Darunter ist das div Tag zum Teilen des Fotos. Es gibt ein Textfeld zur Eingabe der Beschriftung und eine Schaltfläche zum Teilen.
Holen Sie sich eine Kopie von jQuery und speichern Sie es im www / lib Verzeichnis.
html
Erstelle ein events.js Datei in der www / js Verzeichnis und fügen Sie den folgenden Code hinzu:
"Javascript (Funktion (Fenster)
$ ('# take-picture'). click (Funktion () var camerOptions = quality: 90, destinationType: Camera.DestinationType.FILE_URI, encodingType: Camera.EncodingType.JPEG, targetWidth: 200, targetHeight: 350; navigator .camera.getPicture (Funktion (imageURI) var image = $ ('# photo'); image.attr ('src', imageURI); $ ('# share-container'). show ();, Funktion ( errorMessage) alert ('Der folgende Fehler ist aufgetreten:' + errorMessage), camerOptions);); $ ('# share'). click (function () var photo_src = $ ('# photo'). attr ('src'); var caption = $ ('# caption'). val (); window.plugins .socialsharing.share (caption, null, photo_src, null);); )(Fenster);"
Füge hinzu ein Skript Tag für events.js unter dem für jQuery.
html
Mal sehen, was wir bis jetzt haben. Wir packen zunächst alles in einen sofort aufgerufenen Funktionsausdruck. Auf diese Weise steht das Skript nicht in Konflikt mit einem anderen Skript, das wir später hinzufügen können.
"Javascript (Funktion (Fenster)
)(Fenster);"
Als Nächstes fügen wir der Schaltfläche zum Aufnehmen von Fotos einen Klickereignis-Listener hinzu.
Javascript $ ('# take-picture'). click (function () …);
Darin befinden sich die Optionen für das Kamera-Plugin.
javascript var camerOptions = quality: 90, destinationType: Camera.DestinationType.FILE_URI, codingType: Camera.EncodingType.JPEG, targetWidth: 200, targetHeight: 350;
Hier ist eine kurze Beschreibung aller Optionen, die wir verwenden:
DATA_URL, die eine Base64-codierte Zeichenfolge zurückgibt, oder FILE_URI, Dies gibt den Pfad zur Datei im lokalen Dateisystem zurück.JPEG und PNG.Als Nächstes haben wir den Code, mit dem die Standard-Kamera-App des Geräts gestartet wird. Es hat zwei Rückruffunktionen. Der erste ist der Erfolgsrückruf, der ausgeführt wird, wenn das Foto erfolgreich aufgenommen wurde. Die URL des Bildes wird als Argument übergeben. Es wird dann als Wert für die verwendet src Attribut des img Element. Wenn ein Fehler aufgetreten ist, wird die zweite Rückruffunktion ausgeführt. Wenn etwas schief geht, zeigen wir eine Warnmeldung an, um den Benutzer über den Fehler zu informieren.
"Javascript navigator.camera.getPicture (Funktion (imageURI)
var image = $ ('# photo'); image.attr ('src', imageURI); $ ('# share-container'). show (); function (errorMessage) alert ('Der folgende Fehler ist aufgetreten:' + errorMessage), camerOptions); "
Sobald ein Foto aufgenommen wurde, wird die # Share-Container div wird dem Benutzer angezeigt. Diese enthält die Share-Schaltfläche, zu der wir ein Klickereignis hinzufügen. Dieses verwendet das Social-Sharing-Plugin. Im folgenden Code geben wir den in das Textfeld für die Beschriftung eingegebenen Wert und den Dateipfad an das Foto ein. Das Social-Sharing-Plugin startet dann das Standardfreigabefenster des Betriebssystems. An diesem Punkt kann der Benutzer die Anwendung auswählen, in der das Foto freigegeben werden soll.
Javascript $ ('# share'). click (Funktion () var photo_src = $ ('# photo'). attr ('src'); var caption = $ ('# caption'). val (); window. plugins.socialsharing.share (caption, null, photo_src, null););
Im vorigen Abschnitt haben wir bereits zwei Plugins verwendet, das Camera Plugin und das Social Sharing Plugin. Möglicherweise haben Sie jedoch bemerkt, dass wir noch keine davon installiert haben. In diesem Abschnitt werden wir genau das tun.
Die Installation von Plugins ist einfach, wenn Sie bereits wissen, welches Plugin Sie installieren möchten. Sie müssen lediglich die Plugin-ID ermitteln. Dies ist normalerweise der Name des GitHub-Repositorys oder der Paketname auf der npm-Website.
Die Kennung des Kamera-Plugins lautet Cordova-Plugin-Kamera. Die Installation des Plugins ist so einfach wie das Ausführen von Cordova-Plugin hinzufügen Befehl und Übergabe des Bezeichners des Plugins:
Bash Cordova Plugin hinzufügen Cordova-Plugin-Kamera
Beim Social-Sharing-Plugin sieht die Sache etwas anders aus, da sie nicht der Namenskonvention entspricht:
bash cordova plugin füge cordova-plugin-x-socialsharing hinzu
Wenn Sie nicht sicher sind, welches Plugin Sie installieren müssen, können Sie es einfach bei Google installieren. Auf der Website der Cordova-Plugins können Sie auch nach Cordova-Plugins suchen. In der Abbildung unten habe ich nach einem Social-Sharing-Plugin gesucht. Die Ergebnisse sind standardmäßig nach Qualität geordnet. Dies bedeutet, dass Plugins von den besten bis zu den wenigsten fantastischen angeordnet werden. Ich bin mir nicht wirklich sicher, welche Metriken sie dafür verwendet haben. Abgesehen davon können Sie die Ergebnisse auch filtern, um nur Plugins anzuzeigen, die bestimmte Plattformen unterstützen. Es enthält auch eine nette Kopie in die Zwischenablage, mit der Sie den Befehl zum Installieren des Plugins kopieren können.
Eine letzte Anmerkung zum Installieren von Plugins ist, dass Sie die App jedes Mal erstellen müssen, wenn Sie ein neues Plugin installieren. Das Installieren eines Plugins kopiert es nicht automatisch auf die verschiedenen Plattformen, auf denen Sie bereitstellen möchten.
Crosswalk ist eine steckbare Webansicht für Cordova-Apps, die auf Chromium und Blink basiert. Durch die Verwendung von Crosswalk ersetzen Sie die Standard-Webansicht, die von Cordova verwendet wird. Auf diese Weise können Sie Browserfunktionen wie WebRTC, WebAudio und Webkomponenten in Ihren Apps verwenden. Es verbessert auch die Leistung Ihrer App. Die einzigen bekannten Nachteile sind ein erhöhter Speicherbedarf und die Größe der Installationsdatei.
Crosswalk wird als Plugin verteilt. Sie können es mit dem folgenden Befehl installieren:
bash cordova plugin füge cordova-plugin-crosswalk-webview hinzu
Wenn Sie die App das nächste Mal erstellen, sollte sie die Webansicht für die Plattform installieren, auf der Sie die Bereitstellung durchführen. Je nach Internetverbindung kann es eine Weile dauern. Dies geschieht jedoch nur beim ersten Erstellen der App nach der Installation von Crosswalk. Dies liegt daran, dass alle erforderlichen Dateien von einem Remote-Server heruntergeladen und die Kompilierung durchgeführt werden muss.
Nach dem Erstellungsprozess sollte es zwei separate ergeben apk Dateien für Android, eine für die Armv7-Architektur und eine für x86. Crosswalk erstellt für jede dieser Architekturen eine separate Paketdatei, da die apk Die Datei würde sonst groß werden, wenn sie in eine gepackt werden. Glücklicherweise ermöglicht der Play Store von Google Entwicklern das Hochladen verschiedener Versionen von apk Datei für die gleiche App.
Wenn Sie die Konfiguration Ihrer App zu einem bestimmten Zeitpunkt aktualisieren möchten, können Sie sie bearbeiten config.xml, welches sich an der Wurzel Ihres Projekts befindet. Das ist was config.xml sieht standardmäßig so aus:
"xml
"
Sie können die Kennung Ihrer App aktualisieren:
"xml
