Desarrollo de aplicaciones mobile multiplataforma con Apache Cordova

 

Hasta este punto ya tenemos una aplicación base creada, la cual es la que trae Apache Cordova como predeterminada. Solo nos queda probar nuestra aplicación en el emulador de Android. Para realizar esto, ejecutamos la siguiente línea de comando:

cordova run plataforma

I> Consola Windows / Terminal OS X

 

En caso de que estés trabajando en una aplicación para múltiples plataformas, debes especificar en qué plataforma deseas ejecutarlo. Para este ejemplo seguimos usando Android, por lo tanto, reemplazamos la palabra plataforma por android como lo muestra la pantalla.

 

 

Es necesario resaltar que ejecutarlo en el emulador que trae por defecto el SDK de Android o el SDK de iOS suele dar muchos dolores de cabeza por la lentitud que se presenta al probar la aplicación repetidas veces. Para solventar este problema te daré diferentes opciones que te harán más agradable tu desarrollo para móviles:

 

Interfaz gráfica / Corregir errores diseño / Detectar problemas JavaScript

Ejecuta tu proyecto desde el navegador Google Chrome y activa la herramienta para desarrolladores. Desde allí podrás detectar dónde se encuentra el error en tu aplicación navegando por los elementos de tu HTML, y haciendo cambios en los CSS. En la consola de error de Chrome puedes verificar qué errores Javascript se están presentando y para visualizar la aplicación en distintos dispositivos solo debes cambiar las opciones que se presenten en “Device”.

 

 

Pulsa en la imágen para ampliarla

 

 

Ejecutar la aplicación en un dispositivo real

Debes conectar tu dispositivo móvil al puerto USB del computador donde estás realizando el proyecto y simplemente ejecutar en la consola lo siguiente:

 

 

Pulsa en la imágen para ampliarla

cordova run android

I> Consola Windows / Terminal OS X

 

 

Ejecutar la aplicación en un dispositivo virtual

Esta opción es similar a ejecutar en el emulador que trae el SDK. La diferencia es que su ejecución es más rápida. Para ello debemos instalar Genymotion (https://www.genymotion.com/) y Oracle VM Virtualbox. Debemos agregar los diferentes dispositivos que están disponibles para instalar y simplemente hacer clic en el botón “Start” para encenderlos. Luego desde nuestra consola ejecutar el comando “cordova run plataform” el cual detectará como si nuestro dispositivo estuviera conectado.

 

 

Pulsa en la imágen para ampliarla

 

Como puedes ver, de esta forma se crea una aplicación que trae por defecto Apache cordova. Algo que hay que tener presente es que siempre trabajaremos con el archivo base que se encuentra dentro del directorio de nuestro proyecto. Si deseamos hacer alguna modificación de la parte visual y de comportamiento de la aplicación, trabajaremos con los archivos que se encuentran dentro del directorio www.

 

 

Cuando trabajamos con aplicaciones multiplataforma, siempre debemos compilar nuestro proyecto para que los cambios que hagamos en nuestro archivo base sean replicados dentro de los subdirectorios de las plataformas correspondientes.

 

Para compilar nuestro proyecto debemos ejecutar la siguiente línea de comando:

cordova build

I> Consola Windows / Terminal OS X

 

 

Al finalizar la ejecución de esta línea de comando, se generará un archivo, el cual es el ejecutable de la aplicación. Su extensión dependerá de la plataforma en la que se trabajará el proyecto. Para Android la extensión es APK y para iOS es APP.

 

 

Archivo principal de configuración config.xml

Para configurar la información predeterminada que trae nuestra aplicación, lo primero que debemos conocer es el archivo config.xml. Desde este archivo XML podremos configurar el comportamiento y ciertos aspectos de la aplicación en el dispositivo móvil.

 

¿Dónde se encuentra?

 

Este archivo se encuentra en la raíz del proyecto que hemos creado. Cuando construimos un proyecto para una plataforma específica, este archivo se copia en el subdirectorio de la carpeta platforms. Para modificarlo puedes usar cualquier editor de texto de tu preferencia siempre y cuando mantengas el formato XML. En mi caso usare SublimeText.