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:

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

Links útiles

• Cambiando variables de entorno en Windows
• Página oficial de Cordova
• Cordova documentación sobre Android 
• Documentación de Cordova sobre iOS
• Como instalar cordova en Mac
• Como instalar Nodejs en Ubuntu (inglés)
• Controladores USB para Windows
• Diseño sugerido por Google para Android y su equivalente en css
• Apps vs página web móvil (inglés)
• Cosas a considerar al hacer iOS y Android (Inglés)