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

29 agosto, 2018

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

By | Published | No hay comentarios

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:

[/crayon]

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í:

[/crayon]

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.

[/crayon]

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)

[/crayon]

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

[/crayon]

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.

[/crayon]

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:

[/crayon]

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

[/crayon]

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

[/crayon]

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

[/crayon]

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.

[/crayon]

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!