Tu primer proyecto con Cordova

Posted on Ago 01, 2026 by

En la clase anterior logramos instalar Cordova. En esta lección vamos a crear un proyecto usando los comandos de la CLI.

1. Crear un proyecto de Cordova

Abre la terminal, navega hasta la carpeta donde quieres guardar tu proyecto y ejecuta el comando de creación:

cordova create hello com.foxdevelop.hello HelloWorldLenguaje del código: CSS (css)

Explicación de los parámetros:

  1. hello: Nombre de la carpeta del proyecto
  2. com.example.hello: Nombre de paquete de la aplicación (identificador único para Android, obligatorio modificarlo antes de publicar)
  3. HelloWorld: Nombre visible de la aplicación

Aquí tienes un ejemplo práctico: creamos un directorio en la unidad D y generamos el proyecto dentro de él.

C:\Users>d:

D:\>mkdir cordovademo

D:\>cd cordovademo

D:\cordovademo>cordova create hello com.foxdevelop.hello HelloWorld
Creating a new cordova project.Lenguaje del código: CSS (css)

Después podrás ver la carpeta cordovademo en la unidad D, y dentro de ella la subcarpeta hello.

Carpeta del código fuente principal: hello/www/

Página de entrada: www/index.html

No modifiques ningún archivo dentro del directorio platforms, estos archivos se sobrescriben al empaquetar la aplicación.

2. Acceder al proyecto y añadir plataformas

cd hello

Añadir plataforma

# Plataforma Android (utilizable en Windows)
cordova platform add android

# Plataforma iOS【No se puede compilar desde Windows, solo compatible con equipos Mac】
# cordova platform add iosLenguaje del código: PHP (php)

Registro de ejecución

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
  electronLenguaje del código: CSS (css)

3. Comprobación previa del entorno (importante)

cordova requirements

Este comando verifica si tienes el entorno configurado correctamente, por ejemplo si tienes instalado JDK, entre otros componentes.

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' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
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 failedLenguaje del código: PHP (php)

El resultado correcto debería ser el siguiente:

Java JDK: installed
Android SDK: installed
Gradle: installed

Sin embargo, en mi caso aparece: Gradle: not installed

Si no tienes instalado JDK, debes hacerlo. Puedes consultar otros tutoriales para ver el proceso de instalación.

En mi equipo utilizo la versión JDK 11.

En mi ordenador se produce este error:

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 StudioLenguaje del código: JavaScript (javascript)

Necesitas instalar Android Studio, ya que incluye el SDK.

Puedes revisar otros cursos para ver cómo instalar Android Studio.

Abre Android Studio y ve al menú superior: Tools → SDK Manager. Allí podrás consultar la ruta de tu SDK.

A continuación configura las variables de entorno.

Nombre de variable: ANDROID_HOME
Valor: C:\Users\xxxxx\AppData\Local\Android\Sdk

Además de crear la variable, debes añadir estas rutas a la variable Path:

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

Instalar herramientas de línea de comandos desde Android Studio

Abre Android Studio → Tools → SDK Manager

Cambia a la pestaña SDK Tools

Descargar paquete binario de Gradle

Descarga desde el sitio oficial: https://gradle.org/releases/

Descomprime en esta ruta: C:\gradle\gradle-8.5

Gradle by Develocity | Releases

Configurar variables de entorno del sistema

Nombre variable: GRADLE_HOME
Valor variable: C:\gradle-8.7

Crea una nueva variable del sistema

Añade la ruta a la variable Path

Comprobar si la instalación fue exitosa

Abre CMD

gradle -v

Vuelve a realizar la comprobación. Si obtienes un resultado similar al siguiente, la configuración es correcta.

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 failedLenguaje del código: CSS (css)

Problema 2: Versión de JDK

Al ejecutar el comando cordova run android me aparece este error:

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 cdvBuildDebugLenguaje del código: JavaScript (javascript)

Mi entorno usa JDK11, pero el AGP (Android Gradle Plugin) que acompaña a la plataforma Android de Cordova requiere obligatoriamente JDK17, por lo tanto la compilación falla.

Yo uso Zulu JDK 11, así que actualizaré a Zulu JDK 17.

Puedes descargarlo aquí: Java 8, 11, 17, 21, 25 Download for Linux, Windows and macOS

El archivo descargado es un instalador MSI. Ejecútalo y marca las opciones que permiten configurar automáticamente JAVA_HOME y la variable Path.

Abre CMD y comprueba la versión de Java.

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)Lenguaje del código: CSS (css)

Si ves esta salida, la instalación ha finalizado correctamente.

4. Compilar la aplicación

# Compilar todas las plataformas (en este momento solo Android)
cordova build

# Compilar únicamente Android
cordova build android
Lenguaje del código: PHP (php)

Cuando la compilación termine con éxito, el APK estará en esta ruta:

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

Ejemplo de ejecución

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.apkLenguaje del código: JavaScript (javascript)

Encontrarás el archivo APK en el directorio D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\

5. Prueba y ejecución

Método 1: Ejecutar sobre emulador Android

cordova emulate android

Método 2: Prueba con dispositivo real mediante USB (activa la depuración USB)

cordova run android

Vamos a usar un dispositivo real para probar, te recomiendo hacer lo mismo. Conecta tu móvil Android por cable y activa el modo de depuración.

Abre CMD dentro de la carpeta hello y ejecuta el comando cordova run android

Después se instalará la aplicación en tu teléfono.

Al abrirla verás la página por defecto de Cordova.

6. Instalación de plugins

Acceder a funcionalidades nativas del móvil

Las páginas web de Cordova no pueden acceder directamente a hardware como la cámara, bluetooth, archivos o notificaciones. Es imprescindible instalar plugins.

Ejemplo: Plugin de cámara

cordova plugin add cordova-plugin-camera

Ver plugins instalados

cordova plugin ls

Las llamadas desde JavaScript a las API nativas solo funcionan después de que se lance el evento deviceready. No puedes usar plugins nada más cargar la página.

Ejemplo de plantilla básica (www/js/index.js)

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // El dispositivo está listo, ya se pueden usar todos los plugins de Cordova
    console.log("Cordova inicializado");
}
Lenguaje del código: JavaScript (javascript)

Ejemplo de ejecución

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"Lenguaje del código: CSS (css)

A continuación modifica index.html con este código para probar la funcionalidad de la cámara.

Primero, repasemos la estructura de carpetas después de crear el proyecto.

D:\cordovademo\hello

Todos tus desarrollos futuros los harás dentro de la carpeta www.

Modifica el contenido de index.html por el siguiente código:

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

    <script>
        let cameraReady = false;

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

        function onDeviceReady() {
            console.log("deviceready activado, Cordova listo");
            cameraReady = true;
        }

        // Es recomendable usar addEventListener para evitar conflictos de tiempo que ocurren con onclick
        document.getElementById("btnTake").addEventListener("click", function(){
            if(!cameraReady){
                alert("Espera a que termine la inicialización de Cordova.");
                return;
            }

            navigator.camera.getPicture(
                function(imageUri) {
                    console.log("Foto capturada correctamente:", imageUri);
                    document.getElementById("imgPreview").src = imageUri;
                },
                function(error) {
                    alert("Error al capturar la foto: " + error);
                },
                {
                    destinationType: 0, // Camera.DestinationType.FILE_URI = 0, usamos valor numérico para evitar errores
                    sourceType: 1,      // Camera.PictureSourceType.CAMERA = 1
                    quality: 80
                }
            );
        });
    </script>
</body>
</html>Lenguaje del código: C# (cs)

Vuelve a ejecutar el comando cordova run android

Se abrirá la aplicación. Verás un botón; al pulsarlo se activará la cámara y podrás tomar fotografías.

* 7. Carpeta merges: archivos diferenciados por plataforma

Por defecto todas las plataformas comparten los recursos de la carpeta www.

Si necesitas usar recursos visuales distintos para Android e iOS, utiliza la carpeta merges:

merges/
├─android/
│  └─css/overrides.css  # Solo se aplica en Android
└─ios/
Lenguaje del código: PHP (php)

Durante la compilación, los archivos dentro de merges sobrescribirán los archivos con el mismo nombre que haya en www.

* 8. Actualizar Cordova

# Actualizar la CLI de Cordova de forma global
npm update -g cordova

# Instalar una versión específica
npm install -g cordova@12.0.0

# Actualizar la versión de la plataforma Android dentro del proyecto
cordova platform update android --save
Lenguaje del código: PHP (php)

Resumen de comandos

#1 Crear proyecto
cordova create testapp com.mytest.app TestApp
cd testapp

#2 Añadir plataforma Android
cordova platform add android

#3 Comprobar entorno
cordova requirements

#4 Compilar paquete de depuración
cordova build android

#5 Ejecutar en dispositivo real
cordova run android
Lenguaje del código: CSS (css)

Tu primer proyecto con Cordova

Posted in Tutorial de Cordova

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *