Apache Cordova Tutorial: Mobile Anwendungen mit Cordova entwickeln

Mobile Anwendungen schleichen sich überall ein, angefangen bei Smartphones und Tablets bis hin zu Smart Watches und bald auch in anderen Wearables. Die Entwicklung für jede einzelne mobile Plattform kann jedoch eine erschöpfende Aufgabe sein, insbesondere wenn Ihre Ressourcen begrenzt sind oder wenn Sie ein einzelner Entwickler und kein Unternehmen für die Entwicklung mobiler Apps sind.

Hier kann es sich als nützlich erweisen, ein versierter Apache Cordova-Entwickler zu werden, indem er eine Möglichkeit bietet, mobile Anwendungen mit Standard-Webtechnologien – HTML5, CSS3 und JavaScript – zu entwickeln.

Im Jahr 2009 entwickelte ein Startup namens Nitobi PhoneGap, eine Open-Source-API für den Zugriff auf native mobile Ressourcen, mit dem Ziel, Entwickler in die Lage zu versetzen, mobile Anwendungen mit Standard-Webtechnologien zu erstellen. Nach Nitobis Vision würden die meisten mobilen Anwendungen bald mit PhoneGap entwickelt, aber Entwickler hätten immer noch die Möglichkeit, bei Bedarf nativen Code zu schreiben, sei es aufgrund von Leistungsproblemen oder fehlender Methode für den Zugriff auf bestimmte Hardware.

Cordova PhoneGap?

So etwas gibt es wirklich nicht. Was geschah, war, dass Adobe Nitobi im Jahr 2011 erwarb und den Open-Source-Kern an die Apache Software Foundation spendete, die ihn in Apache Cordova umbenannte. Eine gängige Analogie, der Sie oft begegnen werden, ist, dass Cordova für PhoneGap das ist, was WebKit für Chrome oder Safari ist.

Offensichtlich waren die Unterschiede zwischen Cordova und PhoneGap am Anfang minimal. Mit der Zeit entwickelte Adobe PhoneGap seine eigenen proprietären Funktionen, während Cordova von der Open-Source-Community unterstützt wurde – und immer noch wird. In diesem Apache Cordova-Review und Tutorial wird die Entwicklung von Cordova-Apps genauer untersucht, und obwohl einige davon auf PhoneGap zutreffen, sollte dies per se nicht als PhoneGap-Tutorial betrachtet werden.

Apache Cordova-Funktionen

Im Wesentlichen hat Cordova keine Einschränkungen in Bezug auf nativ entwickelte Anwendungen. Was Sie mit Cordova erhalten, ist einfach eine JavaScript-API, die als Wrapper für nativen Code dient und auf allen Geräten konsistent ist. Sie können Cordova als einen Anwendungscontainer mit einer Webansicht betrachten, die den gesamten Bildschirm des Geräts abdeckt. Die von Cordova verwendete Webansicht ist die gleiche Webansicht, die vom nativen Betriebssystem verwendet wird. Unter iOS ist dies die standardmäßige Objective-C- UIWebView oder eine benutzerdefinierte WKWebView -Klasse; Unter Android ist dies android.webkit.WebView .

Apache Cordova wird mit einer Reihe vorentwickelter Plugins geliefert, die Zugriff auf die Kamera, das GPS, das Dateisystem usw. des Geräts bieten. Da sich mobile Geräte weiterentwickeln, ist das Hinzufügen von Unterstützung für zusätzliche Hardware einfach eine Frage der Entwicklung neuer Plugins.

Schließlich werden Cordova-Anwendungen genau wie native Anwendungen installiert. Das bedeutet, dass das Erstellen Ihres Codes für iOS eine IPA-Datei, für Android eine APK-Datei und das Erstellen für Windows Phone eine XAP-Datei erzeugt. Wenn Sie genug Mühe in den Entwicklungsprozess investieren, merken Ihre Benutzer möglicherweise nicht einmal, dass sie keine native Anwendung verwenden.

Apache Cordova-Entwicklungsworkflows

Es gibt zwei grundlegende Wege, die Sie bei der Entwicklung mit Cordova verfolgen können:

• Wenn Sie beabsichtigen, eine Anwendung auf so vielen Plattformen wie möglich mit wenig oder keiner plattformspezifischen Entwicklung bereitzustellen, sollten Sie den plattformübergreifenden Workflow verwenden. Das Haupttool, das diesen Workflow unterstützt, ist die Cordova-Befehlszeilenschnittstelle (CLI), die als Abstraktion auf höherer Ebene zum Konfigurieren und Erstellen Ihrer Anwendung für verschiedene Plattformen dient. Dies ist der am häufigsten verwendete Entwicklungspfad.
• Wenn Sie planen, Ihre Anwendung mit Blick auf eine bestimmte Plattform zu entwickeln, sollten Sie den plattformzentrierten Workflow verwenden. Auf diese Weise können Sie Ihren Code auf einer niedrigeren Ebene optimieren und modifizieren, indem Sie native Komponenten mit Cordova-Komponenten mischen. Auch wenn Sie diesen Ansatz für die plattformübergreifende Entwicklung verwenden könnten, wird der Prozess länger und langwieriger.

Es wird normalerweise empfohlen, mit dem plattformübergreifenden Entwicklungsworkflow zu beginnen, da der Wechsel zur plattformzentrierten Entwicklung ziemlich einfach ist. Wenn Sie jedoch zunächst mit dem plattformzentrierten Workflow beginnen, können Sie nicht zur plattformübergreifenden Entwicklung wechseln, da die CLI Ihre Anpassungen überschreibt, sobald Sie den Build-Prozess ausführen.

Voraussetzungen und Cordova-Installation

Bevor Sie irgendetwas im Zusammenhang mit Cordova installieren und ausführen, müssen Sie das SDK für jede Plattform installieren, für die Sie Ihre Anwendung erstellen möchten. Wir werden uns in diesem Artikel auf die Android-Plattform konzentrieren; Der Prozess mit anderen Plattformen ist jedoch ähnlich.

Sie sollten das Android SDK herunterladen, das Sie hier finden. Für Windows kommt das SDK als Installer, während es für Linux und OSX als Archiv kommt, das einfach entpackt werden kann. Nach dem Extrahieren/Installieren des Pakets müssen Sie die sdk/tools und sdk/platform-tools zu Ihrer PATH -Variablen hinzufügen. Die PATH Variable wird von Cordova verwendet, um nach den Binärdateien zu suchen, die es für den Erstellungsprozess benötigt. Wenn Sie Java nicht installiert haben, sollten Sie das JDK zusammen mit Ant installieren. ANT_HOME und JAVA_HOME sollten auf die bin-Ordner von JDK und Ant festgelegt werden, und nach der Installation des Android SDK legen Sie die Variable ANDROID_HOME auf Android/Sdk . Alle Orte in den drei *_HOME Variablen sollten auch in Ihrer PATH -Variablen enthalten sein.

Nachdem Sie den SDK- android -Befehl installiert haben, wird er in Ihrer Befehlszeile verfügbar sein. Führen Sie es aus, um den SDK-Manager zu öffnen und die neuesten Tools und die Android-API zu installieren. Sie benötigen wahrscheinlich Android SDK Tools, Android SDK Platform Tools, Android SDK Build-Tools, SDK Platform, Google APIs Intel x86 Atom System Image, Sources for Android SDK und Intel x86 Emulator Accelerator (HAXM Installer) . Danach können Sie einen Emulator mit android avd erstellen.

Cordova CLI hängt von Node.js und dem Git-Client ab, also fahren Sie fort und laden Sie Node von nodejs.org und Git von git-scm.com herunter und installieren Sie es. Sie werden npm verwenden, um Cordova CLI selbst sowie zusätzliche Plugins zu installieren, und Cordova verwendet git hinter den Kulissen, um erforderliche Abhängigkeiten herunterzuladen. Endlich laufen

 npm install -g cordova

…um die Cordova-CLI global zu installieren ( npm install cordova reicht nicht aus.)

Zusammenfassend sind dies die Pakete, die Sie benötigen:

• Java
• Ameise
• Android SDK
• NodeJS
• Git

Und diese Umgebungsvariablen müssen aktualisiert werden:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Bootstrapping einer Anwendung

Vorausgesetzt, Sie haben Cordova erfolgreich installiert, sollten Sie jetzt Zugriff auf das Befehlszeilendienstprogramm von Cordova haben. Öffnen Sie Ihr Terminal oder Ihre Befehlszeile und navigieren Sie zu einem Verzeichnis, in dem Sie Ihr erstes Cordova-Projekt erstellen möchten. Um eine Anwendung zu booten, geben Sie den folgenden Befehl ein:

 cordova create toptal toptal.hello HelloToptal

Die Befehlszeile besteht aus dem Namen des Befehls cordova vom Unterbefehl create . Der Unterbefehl wird mit drei zusätzlichen Parametern aufgerufen: Der Ordner, in dem die Anwendung platziert wird, der Namespace der Anwendung und ihr Anzeigename. Dadurch wird die Anwendung in einem Ordner mit der folgenden Struktur gestartet:

 toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

Der www -Ordner enthält Ihren Anwendungskern. Hier platzieren Sie Ihren Anwendungscode, der für alle Plattformen gleich ist.

Während Sie mit Cordova problemlos eine App für verschiedene Plattformen entwickeln können, müssen Sie manchmal Anpassungen hinzufügen. Wenn Sie für mehrere Plattformen entwickeln, möchten Sie die Quelldateien in den verschiedenen platforms/[platform-name][assets]/www Verzeichnissen nicht ändern, da sie regelmäßig mit den www -Dateien der obersten Ebene überschrieben werden.

An dieser Stelle können Sie auch die Datei config.xml öffnen und die Metadaten Ihrer Anwendung wie Autor und Beschreibung ändern.

Fügen Sie Ihre erste Plattform hinzu mit:

 cordova platform add android

Wenn Sie Ihre Meinung später ändern, können Sie eine Plattform einfach aus dem Build-Prozess entfernen:

 cordova platform rm android

Beim Überprüfen des Plattformverzeichnisses werden Sie den android Ordner darin bemerken. Für jede Plattform, die Sie hinzufügen, erstellt Cordova ein neues Verzeichnis in Plattformen und dupliziert den www Ordner darin. Wenn Sie Ihre Anwendung beispielsweise für Android anpassen möchten, können Sie die Dateien in platforms/android/assets/www ändern und auf plattformspezifische Shell-Tools umsteigen.

Denken Sie jedoch daran, dass Cordova, wenn Sie Ihre Anwendung mit der CLI (die für die plattformübergreifende Entwicklung verwendet wird) neu erstellen, die Änderungen überschreibt, die Sie für jede Plattform vorgenommen haben. Stellen Sie also entweder sicher, dass Sie sie unter Versionskontrolle haben, oder führen Sie plattformspezifische Änderungen durch Änderungen, nachdem Sie die plattformübergreifende Entwicklung abgeschlossen haben. Wie bereits erwähnt, ist der Wechsel von der plattformübergreifenden zur plattformspezifischen Entwicklung einfach. Die Bewegung in die andere Richtung ist es nicht.

Wenn Sie den plattformübergreifenden Workflow weiterhin verwenden und dennoch plattformspezifische Anpassungen vornehmen möchten, sollten Sie den Zusammenführungsordner der obersten Ebene verwenden. Ab Cordova Version 3.5 wurde dieser Ordner aus der Standardanwendungsvorlage entfernt, aber wenn Sie ihn brauchen, können Sie ihn einfach zusammen mit den anderen Verzeichnissen der obersten Ebene ( hooks , platforms , plugins und www ) erstellen.

Plattformspezifische Anpassungen werden in merges/[platform-name] platziert und nach den Quelldateien im www -Ordner der obersten Ebene angewendet. Auf diese Weise können Sie entweder neue Quelldateien für bestimmte Plattformen hinzufügen oder ganze Quelldateien der obersten Ebene mit plattformspezifischen überschreiben. Nehmen Sie zum Beispiel die folgende Struktur:

 merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js

In diesem Fall enthält die Ausgabedatei für Android sowohl die Dateien app.js als android.js , aber die Ausgabedatei für Windows Phone 8 enthält nur die Datei app.js , die sich im Ordner merges/wp8 , da die Dateien in merges/[platform] überschreiben die Dateien in www .

Das Plugins-Verzeichnis enthält Informationen zu den Plugins jeder Plattform. An dieser Stelle sollten Sie nur die android.json -Datei haben, die die folgende Struktur haben sollte:

 { "prepare_queue": { "installed": [], "uninstalled": [] }, "config_munge": { "files": {} }, "installed_plugins": {}, "dependent_plugins": {} }

Lassen Sie uns die Anwendung erstellen und auf einem Android-Gerät bereitstellen. Sie können auch den Emulator verwenden, wenn Sie möchten.

Cordova bietet mehrere CLI-Schritte zum Erstellen und Ausführen Ihrer Apps: cordova prepare , cordova compile , cordova build (das eine Abkürzung für die beiden vorherigen ist), cordova emulate und cordova run (das build enthält und auch Emulator ausführen kann). Das sollte Sie nicht verwirren, denn in den meisten Fällen möchten Sie Ihre App im Emulator bauen und ausführen:

 cordova run --emulator

Wenn Sie möchten, können Sie Ihr Gerät über den USB-Anschluss anschließen, den USB-Debugging-Modus aktivieren und Ihre erste Apache Cordova-Anwendung direkt auf Ihrem Gerät bereitstellen, indem Sie einfach Folgendes ausführen:

 cordova run

Dadurch werden alle Ihre Dateien nach platforms/* kopiert und alle erforderlichen Aufgaben ausgeführt.

Sie können den Umfang des Erstellungsprozesses einschränken, indem Sie den Namen der Plattform angeben, für die Sie die Anwendung erstellen möchten, und/oder sogar den spezifischen Emulator, z.

 cordova run android --emulator

oder

 cordova run ios --emulator --target="iPhone-8-Plus"

Praktisches Tutorial zu Apache Cordova

Lassen Sie uns eine einfache Tutorial-Anwendung erstellen, um die Verwendung von Cordova und seinen Plugins zu demonstrieren. Die gesamte Demo finden Sie in diesem GitHub-Repository, sodass Sie sie herunterladen und Teile davon zusammen mit diesem kurzen Cordova-Tutorial durchgehen können.

Wir verwenden die von Ihnen erstellte Ersteinrichtung und fügen zusätzlichen Code hinzu. Angenommen, wir möchten neue Projekte zu einer imaginären Toptal-Datenbank hinzufügen und vorhandene Projekte anzeigen. Öffnen Sie index.html und richten Sie auf folgende Weise zwei Registerkarten ein:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

Beachten Sie, dass ich Bootstrap und jQuery Mobile als Abhängigkeiten hinzugefügt habe. Bitte beachten Sie, dass viel bessere Lösungen und Frameworks zum Erstellen moderner Hybridanwendungen entwickelt wurden, aber da die meisten (wenn nicht alle) Webentwickler mit diesen beiden Bibliotheken vertraut sind, ist es sinnvoll, sie für ein Anfänger-Tutorial zu verwenden. Sie können die Stylesheets von GitHub herunterladen oder Ihre eigenen verwenden, wenn Sie dies bevorzugen.

Gehen wir zur Datei index.js und reduzieren sie auf Folgendes:

 var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

Denken Sie daran, dass die empfohlene Architektur für Cordova-Anwendungen darin besteht, eine Single Page Application (SPA) einzurichten. Auf diese Weise werden alle Ressourcen nur einmal beim Start der App geladen und können so lange in der Webansicht bleiben, wie die Anwendung läuft. Darüber hinaus muss der Benutzer mit SPAs keine Seiten neu laden, die nicht einfach typisch für native Anwendungen sind. Lassen Sie uns vor diesem Hintergrund einen einfachen Controller einrichten, um zwischen den beiden Registerkarten zu wechseln:

 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }

Der Controller hat bisher zwei Methoden, eine zum Rendern der Suchansicht und eine zum Rendern der Post Project-Ansicht. Lassen Sie uns es in unserer index.js -Datei initialisieren, indem wir es zuerst oben deklarieren und in der onDeviceReady-Methode konstruieren:

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

Fügen Sie abschließend einen Skriptverweis in index.html über dem Verweis auf index.js . Sie können die Such- und Beitragsansichten direkt von GitHub herunterladen. Da die Teilansichten aus einer Datei gelesen werden, beschweren sich einige Browser wie Chrome beim Versuch, Ihre Seite zu rendern, über domänenübergreifende Anfragen.

Die mögliche Lösung wäre hier, einen lokalen statischen Server zu betreiben, beispielsweise mit dem node-static npm-Modul. Hier können Sie auch über die Verwendung eines Frameworks wie PhoneGap und/oder Ionic nachdenken. Alle von ihnen bieten eine Reihe von Entwicklungstools, einschließlich Emulation im Browser, Hot Reloading und Codegenerierung (Scaffolding).

Lassen Sie uns zunächst einfach auf einem Android-Gerät bereitstellen, indem Sie Folgendes ausführen:

 cordova run android

Zu diesem Zeitpunkt sollte Ihre Anwendung zwei Registerkarten haben. Die erste Registerkarte ermöglicht die Suche nach Projekten:

Auf der zweiten Registerkarte können neue Projekte veröffentlicht werden:

Alles, was wir jetzt haben, ist eine klassische Webanwendung, die in einer Webansicht ausgeführt wird. Wir haben keine der nativen Funktionen wirklich verwendet, also versuchen wir das jetzt. Eine häufige Frage ist, wie Daten lokal auf dem Gerät gespeichert werden sollen, oder genauer gesagt, welche Art von Speicher verwendet werden soll. Es gibt mehrere Wege zu gehen:

• Lokaler Speicher
• WebSQL
• IndexedDB
• Serverseitiger Speicher, auf den über einen Webdienst zugegriffen wird
• Plugins von Drittanbietern, die andere Optionen bieten

LocalStorage ist zum Speichern kleiner Datenmengen geeignet, reicht jedoch nicht aus, wenn Sie eine datenintensive Anwendung erstellen, da der verfügbare Speicherplatz zwischen 3 und 10 MB variiert. IndexedDB ist möglicherweise eine bessere Lösung für diesen Fall. WebSQL ist veraltet und wird auf einigen Plattformen nicht unterstützt. Schließlich passt die Verwendung von Webdiensten zum Abrufen und Ändern von Daten gut in das SPA-Paradigma, bricht jedoch zusammen, wenn Ihre Anwendung offline geht. PWA-Techniken zusammen mit Service Workers sind kürzlich in die Cordova-Welt gekommen, um dabei zu helfen.

Außerdem gibt es viele zusätzliche Plugins von Drittanbietern, die die Lücken im Kern von Cordova füllen. Das Datei-Plugin kann sehr nützlich sein, da es Ihnen Zugriff auf das Dateisystem des Geräts bietet, sodass Sie Dateien erstellen und speichern können. Lassen Sie uns zunächst das SQLitePlugin ausprobieren, das Ihnen eine lokale SQLite-Datenbank zur Verfügung stellt. Sie können es zu Ihrem Projekt hinzufügen, indem Sie Folgendes ausführen:

 cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

SQLitePlugin stellt eine API für die SQLite-Datenbank des Geräts bereit und dient als echter Persistenzmechanismus. Wir können einen einfachen Speicherdienst auf folgende Weise erstellen:

 SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: "demo.toptal", location: "default"}) : window.openDatabase("demo.toptal", "1.0", "DB para FactAV", 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

Sie können den Code zum Abrufen und Hinzufügen von Projekten von GitHub herunterladen und in die entsprechenden Platzhalter einfügen. Vergessen Sie nicht, SQLiteStorageService.js zu Ihrer index.html-Datei über Controller.js hinzuzufügen und sie in Ihrem Controller zu initialisieren, indem Sie die Init-Funktion des Controllers ändern:

 initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

Wenn Sie einen Blick auf service.addProject() werfen, werden Sie feststellen, dass es die Methode navigator.geolocation.getCurrentPosition() aufruft. Cordova hat ein Geolokalisierungs-Plugin, mit dem Sie den aktuellen Standort des Telefons abrufen können, und Sie können sogar die Methode navigator.geolocation.watchPosition() verwenden, um Updates zu erhalten, wenn sich die Position des Benutzers ändert.

Fügen wir abschließend die Controller-Ereignishandles zum Hinzufügen und Abrufen von Projekten aus der Datenbank hinzu:

 renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $div.find('.project-location').html(url); } else { $div.find('.project-location').text("Not specified"); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

Um die Konsole und die Dialog-Plug-ins hinzuzufügen, führen Sie Folgendes aus:

 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

Das Plugin cordova.console unterstützt Sie beim Debuggen, indem es die Funktion console.log() in Emulatoren aktiviert.

Sie können Android-Anwendungen ganz einfach über den Chrome-Remote-Debugger debuggen. Nachdem Sie Ihr Gerät angeschlossen haben, klicken Sie auf das Dropdown-Menü in der oberen rechten Ecke (unter der Schaltfläche „X“), erweitern Sie „Weitere Tools“ und klicken Sie auf „Geräte prüfen“. Sie sollten Ihr Gerät in der Liste sehen und seine Debug-Konsole öffnen können.

Safari bietet dieselbe Funktionalität zum Debuggen von iOS-Apps, die auf einem über USB angeschlossenen Gerät oder Emulator ausgeführt werden. Aktivieren Sie einfach die Entwicklertools auf der Registerkarte „Safari-Einstellungen“ > „Erweitert“.

Das Plugin cordova.dialogs ermöglicht native Benachrichtigungen. Eine gängige Praxis besteht darin, die windows.alert -Methode mithilfe der cordova.dialogs-API wie folgt neu zu definieren:

 overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback "Toptal", // title 'OK' // buttonName ); }; } }

Die overrideBrowserAlert -Funktion sollte innerhalb des deviceready Ereignishandlers aufgerufen werden.

Sie sollten nun in der Lage sein, neue Projekte hinzuzufügen und vorhandene Projekte aus der Datenbank anzuzeigen. Wenn Sie das Kontrollkästchen „Standort einbeziehen“ aktivieren, ruft das Gerät die Geolocation-API auf und fügt Ihren aktuellen Standort zum Projekt hinzu.

Lassen Sie uns der Anwendung den letzten Schliff geben, indem wir ein Symbol und einen Begrüßungsbildschirm festlegen. Fügen Sie Ihrer config.xml -Datei Folgendes hinzu:

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

Platzieren Sie abschließend ein Logo-Bild im Ordner www/img .

Ihre eigene Cordova-App

Wir haben die grundlegenden Schritte der App-Entwicklung mit Apache Cordova durchlaufen und unsere eigene JavaScript-Architektur und unser eigenes CSS-Stylesheet verwendet. Dieses Cordova-Lernprogramm war ein Versuch, das Potenzial von Apache Cordova als Mittel zur Entwicklung mobiler Anwendungen unter Verwendung bekannter Technologien aufzuzeigen, wodurch sowohl die Entwicklungszeit als auch der Aufwand zum Erstellen mehrerer Anwendungen für verschiedene Plattformen reduziert wurden.

Wenn Sie jedoch Anwendungen erstellen, die in die Produktion gehen, wird empfohlen, dass Sie ein vorhandenes Framework verwenden. Neben der Strukturierung Ihrer Anwendung in einer vordefinierten Architektur bietet Ihnen dies möglicherweise auch eine Reihe von Komponenten, die Ihrer Anwendung helfen, dem nativen Erscheinungsbild näher zu kommen. Einige erwähnenswerte Frameworks sind Ionic, Framework7, Weex, Ratchet, Kendo UI und Onsen UI. Viel Glück!