Einführung und Installation

Apache Cordova ist ein quelloffenes Framework für die mobile Entwicklung. Entwickler können mit gängigen Web-Technologien – HTML5, CSS3 und JavaScript – plattformübergreifende Anwendungen erstellen. Die Anwendung läuft in einem plattformspezifisch gekapselten Container und greift über standardkonforme API-Bindungen auf Gerätefunktionen zu, beispielsweise Sensoren, lokale Daten oder den Netzwerkstatus.

Ein einziger Quellcode-Bestandteil für mehrere Plattformen, kostenlos und quelloffen.

Apache Cordova eignet sich, wenn Sie sich in einem der folgenden Szenarien befinden:

• Sie sind Mobilentwickler und möchten eine Anwendung auf mehreren Plattformen bereitstellen, ohne jeweils für jede Plattform eigene Sprachen und Toolketten entwickeln zu müssen;
• Sie sind Webentwickler und wollen eine Web-App paketieren, um sie in gängigen App-Stores zu veröffentlichen;
• Sie sind Mobilentwickler und benötigen eine Kombination aus nativen Komponenten und einer WebView (einem spezialisierten Browserfenster), damit Webcode auf Geräte-APIs auf niedriger Ebene zugreifen kann. Alternativ wollen Sie Plugins erstellen, um Kommunikationswege zwischen nativem Code und der WebView herzustellen.

Eine Cordova-Anwendung besteht aus mehreren Komponenten. Die folgende Abbildung zeigt eine hochgradige Übersicht über die Architektur einer Cordova-Anwendung.

WebView (Webansicht)

Eine mit Cordova-Funktionen ausgestattete WebView kann die gesamte Benutzeroberfläche der Anwendung darstellen. Auf einigen Plattformen lässt sie sich zudem als Komponente in hybride Anwendungen einbinden und arbeitet zusammen mit nativen Steuerelementen.

Web App (Webanwendung)

Hier befindet sich Ihr Geschäftslogik-Code. Die Anwendung selbst ist als Webseite realisiert, der Standard-Einstiegspunkt ist die lokale Datei index.html. Die Seite bindet benötigte CSS, JavaScript, Bilder, Medien und weitere Ressourcen ein. Die gesamte Anwendung läuft innerhalb der WebView im nativen Container und wird abschließend paketiert, um sie in verschiedenen App-Stores zu verteilen.

Im Container gibt es eine besonders wichtige Datei: config.xml. Sie speichert grundlegende Informationen zur Anwendung und legt alle Laufzeitparameter fest, etwa ob der Wechsel zwischen Hoch- und Querbildschirm unterstützt wird.

Plugins

Plugins sind zentraler Bestandteil des Cordova-Ökosystems. Sie bilden eine Brücke für die Kommunikation zwischen Cordova und nativem Code, kapseln gängige Geräte-APIs und ermöglichen JavaScript den Aufruf von nativem Code.

Das Apache Cordova-Projekt pflegt eine Sammlung von Kernplugins, die Schnittstellen für grundlegende Gerätefunktionen bereitstellen: Batteriestatus, Kamera, Adressbuch und mehr.

Neben den offiziellen Kernplugins gibt es zahlreiche Drittanbieter-Plugins, die erweiterte Funktionen kapseln, die nicht auf allen Plattformen verfügbar sind. Sie können Cordova-Plugins über spezielle Suchportale oder npm finden. Alternativ können Sie anhand der Plugin-Entwicklungsanleitung eigene Plugins erstellen. Ein typischer Anwendungsfall: Kommunikation zwischen Cordova und selbst definierten nativen Komponenten herstellen.

Hinweis: Neue Cordova-Projekte enthalten standardmäßig keine Plugins. Das ist die gültige Regel neuerer Versionen. Sowohl Kernplugins als auch Drittanbieter-Plugins müssen manuell und explizit installiert werden.

Cordova stellt keine UI-Steuerelemente oder MV-Frontend-Frameworks zur Verfügung. Es bietet lediglich eine Laufzeitumgebung für Webcode. Wenn Sie Oberflächenkomponenten oder ein Frontend-Architekturframework benötigen, müssen Sie diese selbst auswählen und in Ihr Projekt einbinden.

Zwei Entwicklungsabläufe

Cordova bietet zwei gängige Arbeitsabläufe zum Erstellen mobiler Anwendungen. In vielen Fällen lassen sich Ziele mit beiden Verfahren erreichen, beide haben aber eigene Vorteile:

Plattformübergreifender Ablauf (CLI-Befehlszeilentool)

Geeignet für Projekte mit vielen Zielplattformen, bei denen kaum plattformspezifische Anpassungen erforderlich sind. Das zentrale Werkzeug ist cordova CLI. Die CLI ist ein übergeordnetes Tool, das Projekte gleichzeitig für mehrere Plattformen bauen kann und Details unterlagerter Skripte verbirgt. Sie kopiert gemeinsame Web-Ressourcen in die Unterordner jeder Plattform, übernimmt automatisch die Plattformkonfiguration, führt Build-Skripte zum Erstellen von Installationspaketen aus und bietet eine einheitliche Befehlsschnittstelle zur Plugin-Verwaltung.

Plattformspezifischer Ablauf

Geeignet für die Entwicklung auf einer einzelnen Plattform, wenn tiefgreifende Änderungen am Projektcode erforderlich sind

Typischer Anwendungsfall: Kombinieren selbst erstellter nativer Komponenten mit einer Cordova-WebView innerhalb einer Anwendung

Wählen Sie diesen Ablauf, wenn Sie Projektdateien direkt im SDK der Zielplattform bearbeiten müssen.

Dieser Ablauf basiert auf plattformspezifischen unterlagernten Skripten. Zur Plugin-Verwaltung kommt das separate Tool Plugman zum Einsatz. Zwar können damit ebenfalls plattformübergreifende Projekte erstellt werden, der Aufwand ist jedoch deutlich höher: Es gibt kein übergeordnetes Werkzeug zur zentralen Verwaltung, jede Plattform muss einzeln gebaut werden und die Plugin-Einstellungen sind separat zu pflegen.

Sobald Sie vom CLI-Modus auf den Modus mit Plattform-SDK und unterlagernten Skripten wechseln, ist ein Rückwechsel nicht möglich.

Die CLI verwaltet einen gemeinsamen plattformübergreifenden Quellcode und überschreibt bei jedem Build den Code in den Plattformordnern. Wenn Sie Änderungen an Dateien in den Plattformordnern erhalten wollen, müssen Sie auf den Modus mit unterlagernten Skripten wechseln. Dieser Modus greift nicht mehr auf den gemeinsamen Web-Quellcode zu, sondern nutzt direkt den eigenständigen Code in den jeweiligen Plattformordnern.

Installation von Cordova

Die Installationsmethode hängt von dem gewählten Entwicklungsablauf ab:

Wir nutzen als Beispiel den plattformübergreifenden CLI-Arbeitsablauf.

Das Cordova-Befehlszeilentool (CLI) wird als npm-Paket verteilt.

Führen Sie diese Schritte aus, um die cordova CLI zu installieren:

1. Laden Sie Node.js herunter und installieren Sie es. Nach abgeschlossener Installation sollten Sie die Befehle node und npm direkt im Terminal aufrufen können.
2. (Optional) Installieren Sie den Git-Client, falls Git noch nicht vorhanden ist. Nach der Installation können Sie den Befehl git in der Eingabeaufforderung (Terminal) ausführen. Die Cordova CLI und npm rufen Git auf, wenn sie Ressourcen über eine Git-Repository-Adresse herunterladen müssen.
3. Installieren Sie das cordova-Modul mithilfe des mit Node.js mitgelieferten npm-Tools. npm lädt die Pakete automatisch herunter.

Node.js installieren

Die Installation von Node.js ist unkompliziert. Laden Sie die MSI-Datei (für Windows-Systeme) herunter und starten Sie die Installation mit einem Doppelklick. Folgen Sie einfach den voreingestellten Installationsschritten. Nach Abschluss der Installation

Öffnen Sie ein CMD-Terminal, um die erfolgreiche Installation zu prüfen

Geben Sie diese beiden Befehle ein. Nur wenn beide eine Versionsnummer ausgeben, war die Installation erfolgreich (Beispiel siehe Abbildung unten)

node -v
npm -v

Nach erfolgreicher Node.js-Installation können wir nun Cordova installieren

macOS / Linux-Systeme:

npm install -g cordova

Benutzer von macOS und Linux: Wenn Sie Tools in berechtigungsbeschränkte Verzeichnisse wie /usr/local/share installieren, benötigen Sie möglicherweise sudo vor dem npm-Befehl.
Falls Sie allerdings einen Versionsmanager wie nvm / nave verwenden oder das aktuelle Verzeichnis Schreibrechte bietet, entfällt die Notwendigkeit von sudo.

Es empfiehlt sich, npm möglichst nicht mit sudo auszuführen, um Berechtigungsfehler und Probleme bei der Paketinstallation zu vermeiden.
Nutzen Sie bevorzugt einen Versionsmanager wie nvm (Node Version Manager) oder nave für Node.js und npm. Bei der Paketinstallation brauchen Sie üblicherweise kein sudo.

Windows-System:

C:\>npm install -g cordova

Der Parameter -g bedeutet die globale Installation von Cordova. Ohne diesen Parameter wird das Paket nur im Unterordner node_modules des aktuellen Verzeichnisses installiert.

Nach abgeschlossener Installation führen Sie einfach cordova (ohne weitere Parameter) im Terminal aus. Wenn Hilfetexte angezeigt werden, ist die Installation gelungen.

Während der Installation erscheint die Meldung „added 217 packages in 14s“

Prüfen der Installation

cordova -v

Wird eine Versionsnummer ausgegeben (beispielsweise 13.0.0), ist Cordova einsatzbereit.

Systemvoraussetzungen und Versionsunterstützung

Cordova CLI Version	Mindestversion von Node.js
13.x	>=20.17.0
12.x	>=16.13.0
11.x	>=12.0.0
10.x	>=10.0.0
9.x	>=6.0.0

Die Installation ist abgeschlossen. Nun beginnen wir mit dem Lernen von Cordova.

Einführung und Installation