NativeScript y su gran cliente

Estoy mientras escribo siguiendo las instrucciones para utilizar Nativescript con Angular2 y firebase…

Lo que quiero hacer es una seguidilla de 3 post, los cuales van a ser:

1 — NativeScript y su gran cliente
2 — Agregando logica Angular2 a Nativescript
3 — Agregando Firebase a Nativescript

Vayamos paso por paso.

1- entre a la web de nativescript donde me indica que tenemos que instalar su cliente

npm i -g nativescript

El primer error que encontré acá, como me pasa con los clientes normalmente es que necesito permisos de “sudo”… por lo tanto lo corri de nuevo:

sudo npm i -g nativescript

Se tomo un tiempo para hacer la instalación, pero con el sudo y xcode instalado funciono todo bien (esto de xcode obviamente es solo para mac), hasta que me tiro unos warnings pero como son warnings siguió la instalación para eso veo en la instalación avanzada que pide un par de cosas mas ademas de instalar el cliente, algo a tener en cuenta que parece obvio ya que depende de las SDK para poder compilar luego.

Para esto, dependiendo de su sistema operativo los invito a ver como hacer su instalación desde el siguiente link http://docs.nativescript.org/angular/start/quick-setup

Algo muy copado es que te pregunta si querés que nativescript te instale lo necesario para poder utilizarlo, tras una serie de preguntas desde la terminal… yo lo utilize y me funciono de 10 :D


Una vez que seguimos las instrucciones (no las pongo acá porque depende del sistema), hice a comprobación que tarda un rato mas con el siguiente codigo:

tns doctor

Y ahora que tenia todo, a bajarme el código example:

git clone https://github.com/NativeScript/sample-Groceries.git

Y luego de un tiempito (es un poco pesado) me bajo todo lo que necesitaba para poder arrancar el proyecto…

Una vez que tenemos el proyecto base, vamos a tener que indicarle a nativescript para que OS’s lo vamos a hacer…

la forma de hacerlo es desde la consola, y vamos a ejecutar

para ios:

tns platform add ios

para android:

tns platform add android

una vez tengamos todo esto, podemos levantar el hola mundo… de la siguiente forma

para ios:

tns run ios

para android:

tns run android

Una vez levantado el ejemplo vamos a ver el que se hizo en la NGConf !!

Pero este proyecto ya esta al 100% … entonces lo que vamos a hacer es volver a un commit anterior (basicamente el inicial) para poder ver como es toda su estructura al principio.

git checkout angular-start

Y si ahora esta pelado… pero si volvemos al ultimo commit vamos a ver como esta todo armado… pero vayamos al codigo !!

La estructura es muy parecida a la que siempre venimos viendo… solo que vemos ciertas diferencias…

Tenemos “platforms” que lo que va a tener es los “adds” de sistemas que hagamos.. o sea iOS y/o Android .

Y dentro de la carpeta /app

Vamos a tener el código en el cual vamos a programar…

Dentro de main.js lo único diferente que vamos a tener es:

import {nativeScriptBootstrap} from “nativescript-angular/application”;

Ahora si vemos App_Resources vamos a ver todo lo que hicieron para esta aplicación de prueba… por lo tanto no estaría bueno usar esto como base… ya que contiene cosas de otra app, no esta limpia.

Por lo tanto Nativescript lo que nos proporciona es un generador de proyectos…

Yo eso lo conozco ya

Si claro, venimos de ver el cliente de #angular2 (si no lo vieron, deberías estar clickeando el link)

Ahora vamos a ver como generar un proyecto desde cero con la consola.

tns create my-app-name — ng

De esta forma vamos a crear un proyecto base para arrancar desde cero!

Si miramos el árbol de las carpetas y archivos generados no es muy distinto al que habíamos visto antes… entonces los pasos siguientes seria agregar 1 o los 2 sistemas operativos que soporta…

Tengan en cuenta que cada vez que hacemos un “run” vamos a tener que esperar un poco… Nativescript lo que tiene es que la app termina siendo nativa por lo tanto tiene que pasar por el compilador y hacer toda su magia para que nosotros programemos en Typescript con Angular2 y disfrutemos de una app nativa.

Como veremos una vez que compilemos a app, es una aplicación la cual nos deja hacer 16 taps y una vez terminados vamos a ver lo mismo que vemos en la imagen de la izquierda…

Desde este momento tenemos una app base, que tiene algo de código en nuestro app.componente.ts, nuestro main para poder ver mas o menos como funciona, creo que lo importante es aprovechar todo lo que hizo la gente de nativescript y poder ver todo el potencial de nativescript.

Ahora seria un gran problema estar compilando y esperando que abra cada dos por tres…

Nuestros amigos de nativescript nos dieron “livesync” para que con ese comando podamos desarrollar e ir probando sin tratar de perder el tiempo..

Los comandos son :

tns livesync ios — emulator — watch
tns livesync android — emulator — watch

Esta es la primera parte de 3 de los post de typescript, en el siguiente vamos a agregar lógica en angular2 y luego en el tercero vamos a poner firebase en su totalidad.

Como siempre, espero que les guste lo compartido y cualquier duda dejo mis canales:

Saludos

JC