Como instalar Cordova y crear aplicaciones móviles usando Javascript

Que es Apache Cordova?

Apache Cordova es una plataforma de desarrollo que permite el uso de tecnologías web estándar (que utilizamos para programar páginas web como HTML5, CSS3 y JavaScript), para el desarrollo multiplataforma muy utilizado para el desarrollo de aplicaciones móviles para Android y iOS. Sin embargo, soporta los sistemas operativos: Plataformas soportadas

Instalación

La instalación de Apache Cordova varía según el sistemas operativo en el que deseamos que compile nuestra aplicación, ya que dependemos de sus SDK’s para poder compilarlo, y de esto dependen nuestros requisitos.

Requisitos

  • npm: Administrador de paquetes para Javascript, viene instalado con Nodejs
    • Instalar Nodejs en la página oficial de node
    • Verificar instalación de node ejecutando
      node -v
      • En caso de no funcionar agregue a la variable de entorno PATH la dirección del ejecutable de Node.
    • Verificar la instalación de npm ejecutando
      npm -v
      • En caso de no funcionar agregue a la variable de entorno PATH la dirección del ejecutable de npm (C:\Users\user\AppData\Roaming\npm)
  • Cordova: Se instala ejecutando el siguiente comando (en el caso linux/mac necesita permisos de superusuario): 
    npm install -g cordova

Compilando para Android

  • Java JDK: Descargar e instalar desde la página oficial de Oracle
    • Verificar la instalación ejecutando 
      javac -version
      • En caso de dar error incluir en la variable PATH la dirección del ejecutable de Java, además agregar en la variable JAVA_HOME la misma dirección (usualmente C:\Program Files\Java\jdk1.8.0_73\bin)
  • Android SDK: Instalar Android Studio desde la página oficial
    • Agregar a la variable de entorno PATH las siguientes carpetas
      • android-sdk\tools (usualmente en C:\Users\user\AppData\Local\Android\android-sdk\tools sin embargo esta dirección sale en Android Studio)
      • android-sdk\platform-tools (usualmente en C:\Users\user\AppData\Local\Android\android-sdk\platform-tools sin embargo esta dirección sale en Android Studio)
      • Verificar instalación ejecutando: 
        adb version

Compilando para iOS

  • Instalar Xcode desde la tienda de iTunes
  • (Opcional) Para poder correr el simulador desde la consola se puede instalar lo siguiente: 
    npm install -g ios-sim

Creando una aplicación

Para crear una aplicación en Cordova ejecute el siguiente comando:

// crear aplicación llamada NombreDelApp en la carpeta carpeta
cordova create carpeta com.ejemplo.hola NombreDelApp
// posicionarse en la aplicación 
cd carpeta
// agregar android al proyecto
cordova platform add android --save
// agregar iOS al proyecto
cordova platform add ios --save
// verificar si tenemos todo lo necesario
cordova requirements
// Ejecutar mi aplicación en android
cordova run android
// Ejecutar mi aplicación en iOS
cordova run ios

El comando run compila (cordova build) nuestra aplicación y la ejecuta en el dispositivo que tengamos conectado, de no tener un dispositivo conectado la ejecuta en el emulador que tengamos configurado. En caso de solo tener asociada una plataforma en nuestra aplicación no es necesario especificar el sistema operativo al final del comando run.

Modificando mi aplicación

Como Cordova solamente utiliza HTML, CSS y Javascript el único código que vamos a cambiar (a menos que necesitemos cosas más avanzadas) se encuentra en la carpeta www que se encuentra en la raíz del proyecto.

Íconos

Para cambiar los íconos de la aplicación se deben modificar las imágenes que se encuentran en las siguientes direcciones:

  • Androidapp/platforms/android\res
  • iOS: app/platforms/ios/Resources

Links útiles

8 opiniones en “Como instalar Cordova y crear aplicaciones móviles usando Javascript”

  1. Ya intale por completo el API 23 y otros mas, casi que he instalado todo lo que viene en el SDK manager, pero aún asi cuando le doy «cordova requirements» me tira el mismo error: Please Installa Android target: «android -23», ya probé creando otro directorio para mi proyecto pero tampoco funciona. podría ayudarme, gracias

    1. Buenas tardes

      Además de instalar el SDK Platform en donde dice Android 6.0(API 23) tienes que ir a la parte de arriba en la sección de Tools y buscar el Android SDK Build-Tools 23 e instarlo o actualizarlo (si hay varias versiones del 23 es mejor instalarlas todas).

      Saludos

      1. Si ese paso ya lo había hecho, pero aun así me tira el mismo error. Voy a tratar de investigar como solucionarlo. Sino el miércoles lo molesto un momento, gracias.

  2. Hola, he ejecutado los comandos y finalmente logre los mensajes:
    «Build Successful»
    y
    «Launch Success»
    Pero no veo nada mas en la ventana de comandos ni en el telefono que tengo conectado, esta bien solo ver eso o debo poder ver la «app» en el telefono??

    1. Eso significa que Cordova está tratando de ejecutar tu aplicación en el emulador, puedes ejecutar: «adb devices» y comprobar que está detectando tu dispositivo.
      Debería salir algo como esto:
      List of devices attached
      03157df3ddf4c82a device

  3. Buenas noches Luis,

    Tengo mi dispositivo móvil un LG con una versión de android 5.0.1 aplico el adb devices y no me reconoce el móvil, de hecho aplique todo lo que hay en la última pantalla de comandos que muestras y todo da bien solo que cuando le doy cordova run android obviamente se cae porque no tengo ninguna virtual machine de android porque tenía la esperanza que funcionara ya con el móvil conectado a la computadora, he leído varias cosas en internet pero ninguna me da la razón de porque no me reconoce el dispositivo.

    Gracias.

    1. Hola Silvia

      Debes instalar los USB drivers en el SDK Manager y dependiendo del dispositivo y la marca y el modelo debes buscar los drivers para android en internet en este caso desde la página de LG.

      Muy importante también verificar que tengas activa las opciones de desarrollador y hayas activado el modo depuración USB en tu dispositivo.

      Saludos

Responder a Felipe Barnett Cancelar respuesta

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