Menu

Nativo en la Web y en Movíl con Angular.

nativescriptarchitecture - November 26, 2018 por Carlos Rojas | Edita este Post.
Angular CLI7.0.3tns5.0.1

En los proyectos actuales es muy comun tener que soportar una Web responsiva y tener que estar presente en IOS y en Android. Que tal si te dijera que con Angular puedes lograr esto con el mismo proyecto ?

A partir de Angular 6 la plataforma ha abierto un mundo de posibilidades con Schematics y es gracias a esto que ahora nuestros proyectos de Angular van a poder integrar Nativescript sin necesidad de que tengamos que hacer muchas cosas manualmente para integrarlos en el mismo proyecto. Lo que buscamos es lo siguiente:

Para los que no sepan que es Nativescript te lo puedo resumir en:

Nativescript es un Framework de codigo abierto el cual desde su comienzo siempre ha tenido buena integración con Angular y a diferencia de Ionic te permite acceder al SDK Nativo de IOS y Android y no solo al WebView.

Podemos tener un proyecto que funcione compartido al 100% en Nativescript y Angular ?

Respuesta corta. No.

Esto se debe a la naturaleza de Nativescript el cual maneja las vistas como XML debido a que estas son traducidas a vistas nativas de IOS o Android. Por lo tanto no podremos reutilizar el 100% debido a que los componentes en Angular son generados utilizando Html.

Que cosas podemos reutilizar ?

Principalmente:

  • Routes para la navegación.
  • Services para la logica común del negocio.
  • Defición de la clase para el componente para el comportamiento común de cada componente.

Como comenzamos?

Lo primero es instalar Nativescript y asegurarnos que este funcionando correctamente.

$npm install -g nativescript

Luego nos aseguramos que Xcode y el Android SDK esten funcionando.

$tns doctor.

Ya despues de que el doctor nos diga que todo nuestro entorno esta bien, viene la integración.

Ahora tendremos que instalar los schematics a nivel global en nuestra maquina.

$npm install --global @nativescript/schematics

y luego

$ng new --collection=@nativescript/schematics --name=demo135 --shared

Con esto ya tendremos nuestro proyecto con las cosas necesarias incluidas. Ahora debemos entender un par de cosas más para empezar a crear nuestras Apps.

El Build.

Cuando necesitas probar o distribuir tu codigo realizas un proceso el cual convierte todos tus archivos en archivos que reconoce el navegador, esto en Angular pasa cuando Webpack convierte nuestros archivos y nos genera un build en terminos generales ahora necesitamos hacer algo como esto.

Ahora para trabajar los builds ejecutarems.

Web

$ng build

Mobile

$tns run ios --bundle

o

$tns run android --bundle

Organización del codigo.

Ahora que vamos a tener dos tipos de proyectos mezclados debemos realizar una organización de codigo para que nuestro sistema de build lo identifique correctamente. Para esto simplemente vamos a utilizar .tns para señalar que esa pieza de codigo es de Nativescript, algo asi.

Los archivos de Nativescript son manejados por Webpack entonces los componentes pueden permanecer como siempre. Adicionalmente si quieres separar las vistas moviles simplemente cambia .tns por .ios y .android.

Lo mismo debes tener en cuenta para los Modulos por que en algunas ocasiones cosas que se hacen en la Web se hacen distinto en el Movil y debemos cargar modulos distintos.

Si quieres ver un poco de esto en acción puedes darle una vistazo al proyecto que el equipo de Nativescript a preparado como Ejemplo.

Esto es todo. Hasta un proximo Post :)

¡Compártelo!