Desarrollo / General / Tecnología / Tutoriales

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

By ercobo | Published 29 agosto, 2018 | No hay comentarios

angularjs · cordova · desarrollo · Programación · Tecnología · Tutorial

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-673ed7ad2c33d683409751  ]import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

let onDeviceReady = () =&gt; {
  platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err =&gt; console.log(err));
};

document.addEventListener('deviceready', onDeviceReady, false);

[crayon-673ed7ad2c33d683409751 ]import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

enableProdMode();

}

let onDeviceReady = () => {

platformBrowserDynamic().bootstrapModule(AppModule)

.catch(err => console.log(err));

};

document.addEventListener('deviceready', onDeviceReady, false);

[/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-673ed7ad2c343663048461  ]&lt;base href="./"&gt;

1	[crayon-673ed7ad2c343663048461 ]<base href="./">

[/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-673ed7ad2c347830621871  ]&lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;

1	[crayon-673ed7ad2c347830621871 ]<script type="text/javascript" src="cordova.js"></script>

[/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-673ed7ad2c34c594164981  ]npm install
ng build
cordova platform add browser
cordova platform add android

[crayon-673ed7ad2c34c594164981 ]npm install

ng build

cordova platform add browser

cordova platform add android

[/crayon]

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

[crayon-673ed7ad2c350130663484  ]cordova serve

1	[crayon-673ed7ad2c350130663484 ]cordova serve

[/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-673ed7ad2c354601581235  ]cordova run android

1	[crayon-673ed7ad2c354601581235 ]cordova run android

[/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-673ed7ad2c359708671830  ]ng build --watch

1	[crayon-673ed7ad2c359708671830 ]ng build --watch

[/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-673ed7ad2c35d287791597  ]cordova prepare

1	[crayon-673ed7ad2c35d287791597 ]cordova prepare

[/crayon]

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

[crayon-673ed7ad2c362088712440  ]cordova prepare android

1	[crayon-673ed7ad2c362088712440 ]cordova prepare android

[/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-673ed7ad2c366279509495  ]cordova run android

1	[crayon-673ed7ad2c366279509495 ]cordova run android

[/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-673ed7ad2c36a673688769  ]cordova emulate android

1	[crayon-673ed7ad2c36a673688769 ]cordova emulate android

[/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!