Dein erstes Cordova-Projekt

Posted on Aug. 01, 2026 by

In der letzten Lektion haben wir Cordova erfolgreich installiert. In dieser Einheit erstellen wir mithilfe von CLI-Befehlen ein Projekt.

1. Cordova-Projekt erstellen

Öffne das Terminal, navigiere zu dem Ordner, in dem du das Projekt ablegen möchtest und führe den Erstellbefehl aus:

cordova create hello com.foxdevelop.hello HelloWorldCode-Sprache: CSS (css)

Erläuterung der Parameter:

  1. hello: Name des Projektordners
  2. com.example.hello: Anwendungspaketname (eindeutige Android-Kennung, muss vor Veröffentlichung angepasst werden)
  3. HelloWorld: Angezeigter Name der App

Hier ein praxisnahes Beispiel: Zuerst erstellen wir ein Verzeichnis auf Laufwerk D und generieren darin das Projekt.

C:\Users>d:

D:\>mkdir cordovademo

D:\>cd cordovademo

D:\cordovademo>cordova create hello com.foxdevelop.hello HelloWorld
Creating a new cordova project.Code-Sprache: CSS (css)

Anschließend findest du auf Laufwerk D den Ordner cordovademo mit dem Unterordner hello.

Hauptverzeichnis des Quellcodes: hello/www/

Einstiegsseite: www/index.html

Ändere keine Dateien im Ordner platforms! Diese werden beim Erstellen des Pakets überschrieben!

2. Ins Projekt wechseln und Plattform hinzufügen

cd hello

Plattform hinzufügen

# Android-Plattform (funktioniert unter Windows)
cordova platform add android

# iOS-Plattform [Kann unter Windows NICHT kompiliert werden! Nur auf macOS möglich]
# cordova platform add iosCode-Sprache: PHP (php)

Auszug der Befehlsausgabe

D:\cordovademo>cd hello

D:\cordovademo\hello>cordova platform add android
Using cordova-fetch for cordova-android
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.foxdevelop.hello
        Name: HelloWorld
        Activity: MainActivity
        Android Target SDK: android-36
        Android Compile SDK: 36
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@15.1.0

D:\cordovademo\hello>cordova platform ls
Installed platforms:
  android 15.1.0
Available platforms:
  browser
  electronCode-Sprache: CSS (css)

3. Vorprüfung der Systemumgebung (wichtig)

cordova requirements

Dieser Befehl prüft, ob alle erforderlichen Umgebungen wie das JDK auf deinem System eingerichtet sind.

D:\cordovademo\hello>cordova requirements
Android SDK is missing cmdline-tools directory.

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
Command failed with exit code 1: avdmanager list target
'avdmanager' kann nicht als interner oder externer Befehl ausgeführt werden.
Gradle: not installed
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
Some of requirements check failedCode-Sprache: PHP (php)

Ein korrektes Ergebnis sollte folgendermaßen aussehen:

Java JDK: installed
Android SDK: installed
Gradle: installed

Auf meinem System wird jedoch angezeigt: Gradle: not installed

Falls bei dir das JDK fehlt, musst du es zuerst installieren. Eine Anleitung zur JDK-Einrichtung findest du in anderen Lektionen.

Bei mir ist die JDK-Version 11 installiert.

Auf meinem Rechner tauchte folgende Meldung auf:

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=undefined (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Android SDK is missing cmdline-tools directory.
Using Android SDK: D:\Sortware\ADB
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android StudioCode-Sprache: JavaScript (javascript)

Du musst Android Studio installieren – es enthält das benötigte SDK.

Weitere Infos zu Android Studio findest du in weiteren Kursen.

Öffne Android Studio und gehe über das Menü zu: Tools → SDK Manager. Dort siehst du den Pfad zu deinem SDK.

Anschließend richten wir die Umgebungsvariablen ein.

Variablenname: ANDROID_HOME
Variablenwert: C:\Users\xxxxx\AppData\Local\Android\Sdk

Neben der Erstellung der Variable fügst du noch diese Pfade zur Path-Variable hinzu:

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\cmdline-tools\latest\bin

Kommandozeilenwerkzeuge in Android Studio installieren

Öffne Android Studio → Tools → SDK Manager

Wechsle zum Reiter SDK Tools

Gradle-Binärpaket herunterladen

Download auf der offiziellen Webseite: https://gradle.org/releases/

Entpacke das Archiv in folgenden Pfad: C:\gradle\gradle-8.5

Gradle by Develocity | Releases

Systemumgebungsvariablen konfigurieren

Variablenname: GRADLE_HOME
Variablenwert: C:\gradle-8.7

Erstelle eine neue Systemvariable

Füge den Pfad zur Path-Variable hinzu

Überprüfe, ob die Installation funktioniert hat

Öffne die Eingabeaufforderung (CMD)

gradle -v

Führe den Prüfvorgang erneut aus. Bei folgender Ausgabe ist die Einrichtung abgeschlossen:

D:\cordovademo\hello>cordova requirements

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
No android targets (SDKs) installed!
Gradle: installed C:\gradle-8.7\bin\gradle.BAT
Some of requirements check failedCode-Sprache: CSS (css)

Problem 2: JDK-Version

Bei der Ausführung von cordova run android trat bei mir folgender Fehler auf:

D:\cordovademo\hello>cordova run android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)

BUILD SUCCESSFUL in 1sCUTING [91ms]
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

FAILURE: Build failed with an exception.

* Where:
Build file 'D:\cordovademo\hello\platforms\android\app\build.gradle' line: 20

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 17 to run. You are currently using Java 11.
      Your current JDK is located in C:\Program Files\Zulu\zulu-11
      You can try some of the following options:
       - changing the IDE settings.
       - changing the JAVA_HOME environment variable.
       - changing `org.gradle.java.home` in `gradle.properties`.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.14.2/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.

BUILD FAILED in 2s
Command failed with exit code 1: D:\cordovademo\hello\platforms\android\tools\gradlew.bat cdvBuildDebugCode-Sprache: JavaScript (javascript)

Auf meinem System läuft aktuell JDK11. Das zum Cordova Android-Plattformpaket gehörende AGP (Android Gradle Plugin) erfordert allerdings zwingend JDK17, sodass der Build-Vorgang fehlschlägt.

Ich nutze Zulu JDK 11 und aktualisiere daher auf Zulu JDK 17.

Hier kannst du die Version herunterladen: Java 8, 11, 17, 21, 25 Download für Linux, Windows und macOS

Du erhältst eine MSI-Datei. Starte die Installation und aktiviere die entsprechenden Optionen, damit das Installationsprogramm automatisch JAVA_HOME und die Pfadvariablen einrichtet.

Öffne die Eingabeaufforderung und überprüfe die Java-Version:

java -version

openjdk version "17.0.20" 2026-07-21 LTS
OpenJDK Runtime Environment Zulu17.68+17-CA (build 17.0.20+8-LTS)
OpenJDK 64-Bit Server VM Zulu17.68+17-CA (build 17.0.20+8-LTS, mixed mode, sharing)Code-Sprache: CSS (css)

Wenn diese Ausgabe erscheint, war die Installation erfolgreich.

4. Anwendung erstellen

# Alle Plattformen erstellen (aktuell nur Android)
cordova build

# Nur Android erstellen
cordova build android
Code-Sprache: PHP (php)

Nach erfolgreichem Kompilieren findest du die APK unter folgendem Pfad:

hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk

Praxisbeispiel-Ausgabe:

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: C:\Users\maiwu\AppData\Local\Android\Sdk

BUILD SUCCESSFUL in 9s
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

> Task :CordovaLib:compileDebugJavaWithJavac
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

BUILD SUCCESSFUL in 11s
50 actionable tasks: 50 executed
Built the following apk(s):
        D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apkCode-Sprache: JavaScript (javascript)

Unter dem Pfad D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\ siehst du nun die APK-Datei.

5. Testlauf durchführen

Methode 1: Ausführung im Android-Emulator

cordova emulate android

Methode 2: Test auf einem echten Gerät per USB (USB-Debugging aktivieren)

cordova run android

Wir testen auf einem echten Smartphone – das empfehle ich auch dir. Verbinde dein Android-Gerät über ein USB-Kabel und aktiviere den USB-Debugging-Modus auf dem Handy.

Öffne die Eingabeaufforderung im Ordner hello und führe den Befehl cordova run android aus.

Anschließend wird die App auf dem Handy installiert.

Nun wird die Cordova-Startseite angezeigt.

6. Plugins installieren

Zugriff auf native Gerätefunktionen

Webseiten in Cordova können Kamera, Bluetooth, Dateisystem, Benachrichtigungen und weitere Hardwarefunktionen nicht direkt ansprechen. Dafür sind Plugins zwingend erforderlich.

Beispiel: Kameraplugin

cordova plugin add cordova-plugin-camera

Liste der installierten Plugins anzeigen

cordova plugin ls

Der Aufruf nativer APIs per JavaScript darf erst nach dem Auslösen des deviceready-Ereignisses erfolgen. Du kannst Plugins nicht sofort nach dem Laden der Seite nutzen!

Grundlegendes Beispieltemplate (www/js/index.js)

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // Gerät ist bereit, alle Cordova-Plugins können verwendet werden
    console.log("Cordova Initialisierung abgeschlossen");
}
Code-Sprache: JavaScript (javascript)

Auszug aus der Praxis:

D:\cordovademo\hello>cordova plugin add cordova-plugin-camera
Installing "cordova-plugin-camera" for android
Subproject Path: CordovaLib
Subproject Path: app
Adding cordova-plugin-camera to package.json

D:\cordovademo\hello>cordova plugin ls
cordova-plugin-camera 8.0.0 "Camera"Code-Sprache: CSS (css)

Passe anschließend die Datei index.html wie unten angegeben an, um die Kamerafunktion zu testen.

Zuerst ein Überblick über die Ordnerstruktur des erstellten Projekts:

D:\cordovademo\hello

Deinen gesamten Quellcode schreibst du künftig im Ordner www.

Passe index.html auf folgenden Inhalt an:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kamera-Test</title>
    <script src="cordova.js"></script>
</head>
<body>
    <button id="btnTake">Foto aufnehmen</button>
    <br>
    <img id="imgPreview" style="width:220px;">

    <script>
        let cameraReady = false;

        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            console.log("deviceready ausgelöst, Cordova ist bereit");
            cameraReady = true;
        }

        // Nutze addEventListener für die Bindung (onclick kann zu Zeitkonflikten führen)
        document.getElementById("btnTake").addEventListener("click", function(){
            if(!cameraReady){
                alert("Bitte warte bis Cordova vollständig initialisiert ist!");
                return;
            }

            navigator.camera.getPicture(
                function(imageUri) {
                    console.log("Foto erfolgreich aufgenommen: ", imageUri);
                    document.getElementById("imgPreview").src = imageUri;
                },
                function(error) {
                    alert("Fotoaufnahme fehlgeschlagen: " + error);
                },
                {
                    destinationType: 0, // Camera.DestinationType.FILE_URI = 0, direkte Zahlenangabe verhindert undefinierte Variablen
                    sourceType: 1,      // Camera.PictureSourceType.CAMERA = 1
                    quality: 80
                }
            );
        });
    </script>
</body>
</html>Code-Sprache: C# (cs)

Führe erneut den Befehl cordova run android aus.

Die App startet, du siehst einen Button. Bei einem Klick öffnet sich die Kamera und du kannst Fotos machen.

* 7. Der merges-Ordner: Plattformspezifische Dateien

Standardmäßig nutzen alle Plattformen gemeinsam die Ressourcen aus dem Ordner www.

Wenn du abweichende Layouts oder Dateien für Android und iOS nutzen möchtest, verwende den Ordner merges:

merges/
├─android/
│  └─css/overrides.css  # Nur für Android aktiv
└─ios/
Code-Sprache: PHP (php)

Beim Erstellen des Projekts ersetzen Dateien im merges-Verzeichnis gleichnamige Dateien im Ordner www.

* 8. Aktualisieren von Cordova

# Globale Aktualisierung der Cordova-CLI
npm update -g cordova

# Installation einer festgelegten Version
npm install -g cordova@12.0.0

# Aktualisierung der Android-Plattform im Projekt
cordova platform update android --save
Code-Sprache: PHP (php)

Übersicht der wichtigsten Befehle

#1 Projekt erstellen
cordova create testapp com.mytest.app TestApp
cd testapp

#2 Android-Plattform hinzufügen
cordova platform add android

#3 Umgebungsprüfung
cordova requirements

#4 Debug-Version erstellen
cordova build android

#5 Auf einem echten Gerät ausführen
cordova run android
Code-Sprache: CSS (css)

Dein erstes Cordova-Projekt

Posted in Cordova-Tutorial

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert