Lógica en Angular2 Typescript & Nativescript (1/2)
Voy a aprovechar la seguidilla de post sobre #nativescript , #typescript y #Angular2.
No los viste?? acá esta el link para que puedas ver mis otros post!
Recuerden que como comente en el primer post, la app es de la gente de Telerik (creadores de Nativescript) y lo que hago es ir haciendo su código y explicando a mi forma lo que siento y aprendo sobre esto.
Ahora si !!! En el post anterior vimos como armar la UI de #Nativescript y ahora vamos a ver como darle lógica a todo esto y ya que estamos lo vemos en Typescript y Angular2.
La app quedo con el diseño para el login y nada mas que eso…
Ahora vamos a crear lógica y servicios en typescript para poder darle mas vida a nuestra app Con Angular2.
Tenemos varias formas de interactuar la parte lógica con la parte gráfica de la aplicación (ya sea una web o una app), por lo tanto vamos a ver las posibilidades de la misma.
Eventos
La gran mayoría de las aplicaciones tienen interacción por medio de eventos… Ya sea por tap, swipe, rotation u otras… Nativescript soporta todas y las hace genéricas para que podamos hacer obtener el mismo evento, tanto par iOS como para Android.
Es hora de poner manos a la obra…
TAP
Vamos a empezar a interactuar con Angular2 mas con código, ya no tanto con vistas .. Por lo tanto vamos a agregarle al botón la funcionalidad de tap.. la forma de indicar el tap en angular2 es en el html (para poder bindear el elemento del html) con una función de la clase.
Como podemos ver, al botón de “Sign in” le agregamos el (tap)=”submit()” por lo tanto, ahora cuando en la app se le haga un tap va a ejecutar la función submit() de la clase.
Luego en la clase submit, indicamos que no devuelve nada .. y hacemos un console.log .. un momento .. console.log es de web, no es de mobile, bueno en realidad como tenemos el cliente lo que vamos a hacer es imprimir en la consola lo que pusimos…
Una vez que clickeamos lo que vamos a ver en la consola es lo siguiente:
Data Binding
Como bien conocemos todos los que amamos angular, una de las grandes cosas es poder hacer binding entre la lógica y la vista .. en angular1 con el modelo mvc y ahora en angular2 lo hacemos entre el template y la clase… Vamos a seguir con el ejemplo y empezar a tomar los datos que tenemos en el formulario de login:
El ngModel sigue existiendo y es nuestra forma de concatenar el nombre de la variable en la clase como en el template…
Como podemos ver agregamos un ngModel con la sintaxis de [(ngModel)] the esta forma vamos a agregar el bindeo.. por lo tanto, lo que vamos a ver en la aplicación es lo siguiente:
Y cuando cambiamos el texto, se va a cambiar el Alert que pusimos..
Otra buena forma para entender el cambio, es usando operadores ternarios …
Sobre la app que estamos haciendo… que pasa si la persona no tiene un usuario y quiere crearlo… pero para nosotros el template es el mismo… podríamos hacer una vista nueva con clase nueva y apuntarla y todo eso … o crear una variable que cambie los textos de los botones y tambien que pueda cambiar el funcionamiento de la logica…
De esta forma :
Una vez que clickeamos el “sign up” o el “Back to login” lo que hacemos en la lógica es simplemente cambiar un texto y una bandera (true/false).
Para cuando hacemos click en el botón rojo, dispara dos alertas… uno con el mail y el otro con un simple texto.
Estructurar la app
Siempre hay muchas razones para estructurar la app, pero la principal de todas es que TODO LO QUE PROGRAMEMOS tiene que estar estructurado… de esa forma vamos a poder reutilizar código, entenderlo unos días después de verlos y por sobre todo ser ordenados en lo que hacemos…
En Nativescript, el beneficio que vamos a tener, es que si tenemos código ya realizado en Angular2 y necesitamos ponerlo en la app, va a ser un «copy & paste».
También nos va a servir para poder hacer correctamente los test (si tenemos que empezar a testear).
Para esto vamos a empezar a crear modelos en Angular2 para poder utilizar en Nativescript… básicamente recuerden que hacemos una app en Angular2 (con Typescript) en la cual algunas funciones y la UI pertenecen a Nativescript y el cliente se va a encargar de compilar y hacer todos los chanchullos necesarios para que podamos tener nuestra app nativa.
Para los modelos u objetos modelo, vamos a utilizar la carpeta shared… en esta carpeta normalmente vamos a poner nuestros modelos y la forma de compartirlo ósea nuestro servicio.
Para la app vamos a necesitar una clase que se llame usuario, que por ahora vamos a necesitar solo que tenga email y password, para ellos creamos la carpeta /app/shared/user/ y dentro creamos lo siguiente:
Ahora vamos a tener que importarlo en nuestro componente:
De esta forma al tenerlo importado en el componente lo vamos a poder utilizar, pero antes lo vamos a tener que crear una instancia … o sea hacerlo un objeto.
Ahora que tenemos la instancia de la clase, vamos a poder utilizarlo en el modelo del template, por lo tanto vamos a tener que modificar los TextField’s que creamos.
Como ven en el código, lo único que hice fue agregarle el “ user. “ para que entienda que es del objeto que creamos en el componente.
Y por ultimo vamos a hacer algo que ya necesitamos, este template se hizo grande y no esta muy bueno tenerlo ahi… por lo tanto vamos a cambiar la directiva de template por templateURL y apuntarlo a app/pages/login/login.html
Esta es la primera parte de 2 en la cual vamos a ver temas de lógica de Angular2 en nativescript… esta semana estaré escribiendo la próxima…
Como siempre, espero que les guste lo compartido y cualquier duda dejo mis canales:
Saludos
JC
