Cómo crear una aplicación movil híbrida para Android con Cordova en Windows desde cero

Cómo crear una aplicación movil híbrida para Android con Cordova en Windows desde cero

Cordova es una plataform para crear aplicaciónes móviles híbridas usando HTML5, CSS y JavaScript. Cordova es generalmente usado desde la linea de comandos y se ejecuta en Node.js, cordova está disponible en NPM. Desde la vista tecnica, la interfaz de usuario de una aplicación cordova es efectivamente una vista web (WebView) que ocupa la pantalla entera y es ejecutada en un contenedor nativo. Esta vista web es la misma vista web usada por el sistema operativo (p. ej el navegador predeterminado). Con cordova, podemos, a través de una aplicación web (con recursos HTML,JS y CSS) construida por ti y encapsulada en una vista web de cordova, podrás acceder funcionalidades nativas del sistema operativo móvil (como dialogos, el sistema de archivos, cámara etc) con Javascript a través de los famosos plugins de Cordova.

En este artículo, aprenderas a implementar desde cero una aplicación cordova en un entorno de desarrollo Windows y a ejecutar tu aplicación en un dispositivo Android.

1. Instala las herramientas de trabajo

Para trabajar con cordova necesitarás 3 herramientas especificas instaladas en tu sistema para crear tu primera aplicación de cordova:

  1. Java Development Kit (JDK): necesitarás el marco de trabajo de Java instalado en tu computadora.
  2. Android Studio y el SDK de Android: aunque no usarás Android Studio para trabajar con tu aplicación, es recomendable descargar el paquete completo que incluye Android Studio y el SDK, este SDK incluye las herramientas de compilacion AVD Manager y SDK Manager. El tamaño del archivo de instalación es de cerca 1.6 GB.
  3. Node.js para Windows: descarga un instalador de una distribución de Node.js para tu plataforma de Node.js con la arquitectura de tu sistema (x64 ó x86). El instalador puede ser un archivo MSI o EXE.

Como la instalación de estas herramientas no necesita ninguna configuración especifica sino solamente seguir el asistente de instalación en el sistema, encargate de la instalación y continua con el paso 2 cuando todo este instalado. Si quieres verificar que todo fue correctamente instalado, verifica los directorios de instalación de cada una de las herramientas:

Instalación de JDK

Localiza la carpeta de instalación (que es usualmente C:\Program Files\Java\)y verifica que la carpeta jdk[versión] existe:

Java Installation Path

Además, la variable de entorno JAVA_HOME necesita existir. En caso de que esta variable no haya sido automáticamente creada, necesitaras hacerlo tu mismo. Para ello, una vez que tengas el directorio de instalación (con /bin al final):

  1. Click derecho en el icono de Mi PC en tu escritorio y selecciona Propiedades.
  2. Click en el tab de Avanzado, luego selecciona Variables de Entorno.
  3. Debajo de Variables de sistema oprime en Nuevo.
  4. Ingresa el nombre de variable como JAVA_HOME
  5. Ingresa como valor de la variable el directorio de instalación del Kit de desarrollo de Java (en este ejemplo sería C:\Program Files\Java\jdk1.8.0_111\bin).
  6. Selecciona OK.
  7. Guarda y aplica cambios.

Android SDK

Abre la carpeta AppData escribiendo %appdata% en la barra de búsqueda de windows o presionando WIN + R:

Windows start appdata folder

Luego navega dentro de la carpeta Local y luego la carpeta de android debería estar allí y adentro debería estar localizado la carpeta sdk, este sdk debería tener el siguiente contenido (o al menos algo similar):

Android SDK Folder Content

Node.js

Para verificar si Node.js fue correctamente instalado, debería haber un acceso directo en tu sistema llamado  Node.js Command Prompt en el menú de inicio:

Node.js Start Menu Windows

Este ejecutable es el mismo cmd.exe de window, sin embargo este es ejecutado con el siguiente comando al iniciar: C:\Windows\System32\cmd.exe /k "C:\Program Files\nodejs\nodevars.bat". Por lo tanto, si por alguna razon, el ejecutable de Node.js no existe en el menú de inicio puedes usar el comando anterior en una ventana de cmd.exe. La consola de Node.js luce de la siguiente manera:

Node.js command prompt windows terminal

En esta consola (o termina) ejecutarás cada uno de los comandos de node y cordova más tarde.

2. Instala Cordova en Node.js

Procede con la instalación de Cordova ejecutando el siguiente comando en la consola de Node.js:

npm install -g cordova

Como cordova será instalado globalmente, puedes ejecutar el comando desde donde quiera que estes localizado en la consola. Una vez la instalación se complete, verifica la versión de cordova instalada ejecutando:

cordova -v
REM o la version larga
cordova --version

Esto debería generar el siguiente resultado en la consola (nota que la versión puede variar):

Cordova Version Console output

3. Crea tu primer proyecto

Ahora que la herramienta de consola de comandos está disponible para su uso, podemos proceder con la creación de nuestro proyecto. Navega con la consola a la carpeta en la que quieres crear tu proyecto usando el comando CD, en este caso nuestra carpeta estará localizada en el escritorio (Desktop) y en la carpeta dev-desktop:

cd C:\Users\sdkca\Desktop\dev-desktop

Luego procede a crear el proyecto usando el comando cordova create, este comando tiene la siguiente estructura:

cordova create <NOMBRE_CARPETA_PROYECTO> [NOMBRE.PAQUETE.APLICACION] [Nombre de Aplicación]

En este ejemplo, nuestra aplicación de prueba será sandbox y será creada ejecutando el siguiente comando (cambia el nombre del paquete de la aplicación con la tuya):

cordova create sandbox com.mycompany.sandbox Sandbox

La creación del proyecto no debería tardar mucho tiempo, el comando creará una carpeta con el nombre sandbox y el contenido del proyecto estará alli dentro. Ahora navega a la carpeta sandbox usando:

cd sandbox

Con esta instrucción, estarás localizado con la consola en la carpeta C:\Users\sdkca\Desktop\dev-desktop\sandbox , cada comando de cordova para tu proyecto debe ser ejecutado solamente cuando estés localizado en esta carpeta con la consola.

4. Agrega una plataforma

Tu proyecto cordova ha sido creado satisfactoriamente hasta el momento, sin embargo no podrás ejecutar tu aplicación en ninguna plataforma pues no has agregado alguna. Para ello agrega una plataforma usando cordova platform, en este caso como mencionado en el articulo nuestra aplicación será ejecutada en android, por lo tanto nuestra primera plataformas será Android, agrega la plataforma para android usando el siguiente comando:

cordova platform add android --save

El resultado en la consola será similar a:

Android Cordova Platform Add example

Despues de la instalación de la plataforma, la estructura de tu proyecto debería ser similar a:

Cordova proyect structure

Importante: como puedes ver en la imágen, con la ultima versión de cordova, la versión de android requerida para compilar es la version 24. Eso significa que necesitas verificar que tienes esta versión instalada en el SDK Manager de android.

Abre el SDK Manager (usualmente localizado en la carpeta del SDK de android p. ej C:\Users\<TU-NOMBRE-DE-USUARIO>\AppData\Local\Android\sdk\SDK Manager.exe) y verifica que versiones tienes instaladas.

Android SDK Manager Windows

Si la versión minima para compilar no está instalada, procede con la instalación y espera hasta que este completada. Una vez instalada, procede con el siguiente paso.

5. Compila y prueba

Puedes desplegar tu aplicación de 2 maneras:

Usando un emulador

Para emular tu aplicación cordova en un emulador de Android, necesitarás primero configurar el emulador. Abre el AVD Manager (Dispositivos virtuales de Android que usualmente está localizado en la carpeta del SDK i.e C:\Users\<TU-NOMBRE-DE-USUARIO>\AppData\Local\Android\sdk\AVD Manager.exe) y crea un nuevo emulador en caso de que no tengas ninguno creado.

Antes de continuar con la creación de un emulador, te recomendamos (realmente, necesitas hacerlo) instalar Intel HAXM. Este puede ser automaticamente instalado por el SDK Manager de Android (C:\Users\<YOUR-USERNAME>\AppData\Local\Android\sdk\SDK Manager.exe):

Android AVD Manager haxm intel

Una vez hayas instalado Intel HAXM, puedes continuar con la creación de un nuevo dispositivo para emular con un API fija existente (p ej. Android API 19 - 4.4.2) y con un nombre personalizado. La siguiente configuración muestra un emulador con Android 7 (API 24), 768MB RAM como recomendado en Windows y una baja resolución para que este se ejecute rápidamente en el computador (o cambia la resolución si tienes un computador asombroso).

Android AVD Example

En caso de que tengas una tarjeta de video instalada, puedes marcar la casilla de Use HOST GPU. Finalmente click en guardar para crear el emulador, una vez creado , inicialo. Nuestro emulador con Android 7 lucirá así:

Android Emulator 7

Ahora deja la ventana del emulador activa y como paso final, compila tu aplicación colocando el emulador como objetivo de inicialización con el siguiente comando:

cordova run android --emulator

Si ejecutas el comando y el emulador no está abierto, se iniciará el emulador predeterminado disponible en el AVD Manager (por lo tanto, para acelerar tu proceso de desarrollo, deja simplemente el emulador abierto). La compilación de tu aplicación debería iniciar y una vez completada se ejecutará en el emulador activo, dejando como resultado:

Android Build Emulator Cordova

Realmente facil, verdad?

Dispositivo móvil

Para ejecutar tu aplicación en un dispositivo móvil, necesitarás (valga la redundancia):

  • Un dispositivo móvil con sistema operativo Android (obviamente con una versión minima requerida para una aplicación cordova, normalmente Android 4.1.2 API 16).
  • Un cable USB compatible con tu dispositivo y computador.

Nota: algunos dispositivos necesitarán el driver instalado en el computador para permitir la conexión entre el dispositivo y el computador (p. ej con el celular Moto G X1040, necesitarás los drivers de Motorola instalados en el PC). Puedes intentar primero sin instalar el driver, pero en caso de que recibas constantemente el mensaje "No devices found" (No hay dispositivos conectados) y tu dispositivo está de hecho conectado, instala los drivers.

Conecta el dispositivo en tu computadora con el calbe USB y ejecuta el siguiente comando para compilar tu aplicación y ejecutala en el dispositivo:

cordova run android --device

El proceso de compilación iniciará e instalará la aplicación en tu dispositivo, que a continuación se iniciará automaticamente. Felicitaciones, acabas de crear tu primera aplicación cordova, te recomendamos finalmente leer la documentación de cordova para más información acerca de este asombroso framework.

Extras

Hay algunos tips que pueden hacer tu experiencia de desarrollo mucho mejor:

Depurar tu archivo index.html y Javascript usando Google Chrome

Como todos saben, no hay manera de depurar el código Javascript directamente en el dispositivo sin las herramientas correctas. Aunque la depuración de una aplicación android usando Android Studio es realmente fácil (una aplicación nativa claro está), sin embargo depurar un aplicación cordova puede convertirse en una pesadilla. Para evitarlo, simplemente debes aprender a usar Google Chrome para depurar tu aplicación de la misma manera en la que lo haces con páginas web en el explorador.

Depurar código nativo en cordova

En caso de que estes trabajando con código nativo, como por ejemplo mientras desarrollas un plugin o algo por el estilo, puedes usar la utilidad ADB del SDK de Android para depurar. ADB (Puente de depuración de Android) es una herramienta de linea de comandos incluida en el SDK de Android. ADB puede controlar tu dispositivo por medio de USB desde un computador, copiar archivos, instalar y desinstalar aplicaciínes, ejecutar comando shell y mucho más.

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable