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

28 agosto, 2018

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

By | Published | 1 comentario

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.

[/crayon]

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.

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!

1 Response