Da Apache Cordova intern die WebView des Android-Geräts benutzt, ist es praktisch möglich, aus jeder Website eine App zu erstellen. In den folgenden Schritten wird erläutert, wie die Umwandlung von einer Website in eine App am besten ablaufen kann.
1. Browser-App mit HTML, CSS und JavaScript erstellen
Idealerweise sollten alle JavaScript-Libraries lokal eingebunden sein, also nicht über CDN-Links abgerufen werden. In vielen Fällen lässt sich über die Quellcode-Anzeigen-Funktion des Browsers die extern eingebundene CDN-Library identifizieren, durch Anklicken öffnen und mit STRG+S speichern. Anschließend muss sie über einen relativen Link, also ohne http(s) wieder in die HTML-Datei eingebunden werden.
2. Cordova installieren und Vorlagenprojekt ansehen
Apache Cordova lässt sich sowohl auf Windows, MacOS als auch auf Linux mit dem Node.js-Package-Manager installieren. Ist dieser erstmal installiert, so landet Cordova mit folgendem Kommandozeilenbefehl auf dem Rechner:
npm install -g cordovaDurch folgenden Befehlsaufruf in einem gewünschten Ordner lässt sich nun ein Cordova-Projekt erstellen:
cordova create [CordovaProjektName]Beim Durchsuchen des gerade neu erstellten Ordners, wirst du einen www-Ordner mit index.html feststellen, der schon mal als Vorlage für eine statische Web-(App) dient. Deine eigenen HTML, CSS und JavaScript-Dateien kannst du an dieser Stelle schon mal in den obgenannten Ordner einfügen (den bisherigen Inhalt löschen) und prüfen, ob deine eigene Webanwendung aus dem genannten Ordner fehlerfrei im Browser läuft.
3. Cordova App-Konfiguration anpassen
Cordova erstellt im Projektordner außerhalb von www übrigens eine config.xml in der Du die wichtigsten App Details wie App-ID (in der Originaldatei „io.cordova.hellocordova“), App-Name (in der Original-Datei „HelloCordova“), App-Beschreibung (in der Originaldatei „Sample Apache Cordova App“) und App-Version (in der Original-Datei „1.0.0“) finden kannst. Bei Android-Apps ist es zudem wichtig, dass sie außer einem „Versionsnamen“ auch einen aufsteigend nummerierten „Versionscode“ für den Google Play Store besitzen. Füge diesen am besten in die XML-Datei neben version="1.0.0" als android-versionCode="1" ein, wobei du hier die 1 durch einen von dir gewählten Versioncode ersetzten kannst. Bevor </widget> solltest du noch folgende drei Zeilen einfügen, damit die Kompatibilität zu verschiedenen Android-Versionen gewährt ist.
<preference name="android-minSdkVersion" value="19" />
<preference name="android-targetSdkVersion" value="31" />
<preference name="android-compileSdkVersion" value="31" />Zum Zeitpunkt des Erstellens dieses Beitrags setzt der Google Play Store außerdem eine targetSdkVersion von mindestens 31 voraus, um die kompilierte App überhaupt hochladen zu lassen.
4. Android Studio Projekt erstellen
Sind alle notwendigen Dateien in den www-Ordner verschoben, die Konfigurationsdatei von Cordova angepasst, so lässt sich mit folgenden zwei Kommandozeilenbefehlen
cd [CordovaProjektName]
cordova platform add androidein Android Studio Projekt erstellen. Du findest dieses unter platform/android.