Como unir AngularJS y Cordova para generar aplicaciones móviles (parte 2)

Y aquí seguimos… dos entradas seguidas… guau…

Venimos de Como unir AngularJS y Cordova para generar aplicaciones móviles (parte 1) y vamos a continuar donde lo dejamos.

Hasta el momento hemos creado los dos proyectos y unido los archivos base package.json.

Ahora es el momento de continuar.

Para que todo funcione, hay que hacer un par de modificaciones en unos archivos de angular.

En el archivo main.ts del proyecto de angular, hay que modificarlo de tal forma que quede similar al siguiente:

Con esto le indicamos que Angular estara atento al evento onDeviceReady que se generará en la aplicación móvil. Y le indicamos que fije un vigilante (listener) al evento “deviceready”.

Despues, deberemos ir al index.html y efectuar un par de cambios. El primero es cambiar la etiqueta “base” para que la ruta haga referencia al directorio actual donde se encuentre la aplicación (esto tiene sentido ya que utilizará la carpeta donde se instale la aplicación en el dispositivo). Así que hay que hacer que quede así:

Despues debemos añadir la referencia al archivo “cordova.js” que será el encargado de proporcionar la interfaz con todos los plugins de Cordova y al dispositivo.

Con estos pasos ya estaríamos en condiciones de compilar y probar la aplicación, por lo que será necesario instalar todas las dependencias de node, compilar angular, añadir las plataformas a probar en cordova y compilar o correr el proyecto. Los pasos básicamente con los siguientes comandos (1 linea por comando)

Si queremos probar en modo local, se puede ejecutar un servidor local que correrá en el puerto 8000 con

Si tenemos un dispositivo (Android por ejemplo) conectado al pc y con la depuración y demás requisitos instalados, y queremos ejecutar la aplicación sobre el, se puede ejecutar el siguiente comando.

A partir de este punto entramos en las consideraciones para el desarrollo, aquí es donde probablemente haya quien lo haga de forma diferente y mejor. Yo por mi parte para ir haciendo los cambios y poderlos observar lo que hago es situar a angular en modo compilación continua cada vez que detecta cambios en el código fuente con:

Despues arranco el servidor Cordova con el comando anterior serve, y lo que hago es que cada vez que hago algún cambio relevante y quiero probarlo en cordova, ejecuto el comando

O bien si solo voy a colocar una plataforma (Android por ejemplo)

Y después, según la plataforma, o bien ya puedo comprobarlo directamente (en el navegador) o vuelvo a ejecutar el run del dispositivo.

Nota: Un último apunte. Si teneis instalado el sdk de android y teneis algún android virtual, el siguiente comando arranca ese dispositivo virtual para poder efectuar el desarrollo si no teneis uno físico disponible.

En otra entrada continuaré con este desarrollo, y escribiré sobre cómo he conseguido hacer una integración continua con este proyecto, Visual Studio Team Services y HockeyApp, para poder tener Integración continua con el repositorio y poder distribuir las apps que se hagan por los betatesters antes de subirlo a las tiendas. Ese paso también lo abordaré… cuando aprenda a hacerlo jeje…

¡Muchos saludos y gracias por leerme!

Como unir AngularJS y Cordova para generar aplicaciones móviles (parte 1)

Si que hace tiempo que no escribía…

Bueno, hoy vuelvo con un pequeño tutorial en castellano sobre como conseguir un proyecto Cordova (https://cordova.apache.org/) que podamos utilizar con los componentes de angular. Se que hay tutoriales muy buenos por ahi (de hecho así lo conseguí yo) pero os voy a contar mi experiencia. La mayoría de los tutoriales que encontraba son para frameworks como Ionic, React, NativeScript… pero no encontraba una formula sencilla de como conseguir lograrlo solo con Cordova y Angular. Así que aquí os cuento mi pequeña peripecia.

Basándome en éste artículo (https://medium.com/@nacojohn/convert-your-angular-project-to-mobile-app-using-cordova-f0384a7711a6) conseguí hacerlo funcionar. Os voy contando los pasos.

Creación de los proyectos.

Lo primero es tener Angular, Cordova y las herramientas necesarias. No me extenderé, pero básicamente es seguir los pasos de aqui, aqui y aqui.
Como siempre, os voy a contar mi experiencia, puede que a alguno los pasos que sigo no le parezcan lógicos o los haga de otra manera.

Bien, vamos a partir del caso de que queremos crear una aplicación nueva (después abordaré el caso de una migración)

Lo primero será crear los dos proyectos (uno para cordova y otro para angular), así que en una carpeta que vamos a utilizar temporalmente como mezclador creamos los dos proyectos.

Con este comando creamos el proyecto de cordova. Sus particularidades son:
El primer parámetro “proyecto” es el nombre de la carpeta donde se creara el proyecto de Cordova.
El segundo parámetro “com.example.hello” es el identificador de nuestra app (un identificador para distinguirla en los dispositivos y stores)
El tercer parámetro “NombreProyecto” es el nombre que se le dará internamente a la aplicación.

ng new PROYECTO_ANGULAR

Con este comando generamos el proyecto de Angular, unicamente le damos el nombre de la carpeta donde se va a crear.

Uniendo Angular y Cordova.

Bien, ahora es cuando comenzamos la magia.

Lo primero será unir los dos proyectos en una carpeta. Para ello, al menos en mi caso, lo más sencillo es coger todos los archivos del proyecto de angular, salvo las carpetas node_module, dist, y los archivos package.json y package.json.lock. Estos últimos efectuaremos una unión “manual”.

Así que, en la carpeta del proyecto cordova, que tendrá un aspecto parecido a este:

Copiamos todos los archivos del proyecto angular menos los comentados (los marco los que no hay que copiar):

Y acabaremos con algo así:

Vale, ahora continuemos.
Cordova utiliza la carpeta “www” para obtener los archivos html, javascript, css, etc… que después traspasa a las diferentes plataformas (android, ios…). Así que nuestra misión es hacer que cuando Angular compile los archivos los haga en esta carpeta. Por defecto genera una carpeta “dist”, pero esa configuración está en el archivo “angular.json”, así que entramos a editarlo y debería quedar algo parecido a lo siguiente:

Como podeis ver, hemos referenciado todo lo que antes dijera “PROYECTO_ANGULAR” por “proyecto” (el nombre de la carpeta donde está cordova)

Ahora es el momento de combinar los dos package.json. El de Cordova es como el siguiente:

Y el de Angular es como este:

Al final debería quedar algo similar a lo siguiente:

Y con esto ya tendriamos unidos los dos frameworks para poder trabajar.

Como me está quedando un poco largo, voy a divir el artículo en dos. En la siguiente parte efectuaremos la instalación de todas las dependencias y las pequeñas modificaciones que hay que hacer para que Angular acepte los eventos de Cordova.

Hasta pronto!