NativeScript y Firebase Desde Cero
En este Nativescript Labs aprenderás cómo crear el diseño de una página de inicio de sesión (Login) usando los gestos de NativeScript para lograr una animación de selección en los botones usando los widgets de diseño nativo.
Lo que aprenderás
ü Como crear un componente Angular
ü Usar los gestos (Gestos)
ü Importar y usar complementos
Lo que necesitasás
- Tener instalado la última versión de NativeScript
- Editor de código (por ejemplo, Atom, Sublime, código de Visual Studio)
1. Configura tu entorno
En este paso, crea la estructura del proyecto utilizando la CLI de NativeScript usando una de sus diferentes plantillas para iniciar el proyecto, agregando las diferentes plataformas para usar Android o IOS en la consola de comandos de tu sistema operativo.
Ejecute el comando
· · tns create name_app –template nativescript-template-ng-tutorial
Ingresa en la carpeta creada name_app
· cd name_app
Instala las plataformas a usar
· tns platform add Android
· tns platform add IOS
- Clona el repositorio con GitHub usando la siguiente URL https://github.com/mendokar/LabFireLogin.git
2. Conociendo el proyecto
Completo el punto uno podremos ingresar a nuestra carpeta desde nuestro editor de texto, en este laboratorio vamos a trabajar con Visual Studio Code usando el comando Code. Se abrirá nuestro proyecto.
Ahora visualizaremos la estructura creada en donde empezaremos a construir nuestra aplicación.
3. Creando un componente
Para crear un componente con NativeScript se puede de diferentes formas, usando la forma manual, usando el comando CLI de NativeScript o usando las extensiones de Visual Studio Code.
En este ejemplo usaremos la extensión de NativeScript + Angular Snippets.
empezaremos creando una carpeta paginas (pages) para llevar un orden de las pantallas que se irán creando en nuestro proyecto.
Con la extensión instalada en el editor buscaremos la opción Add Nativescript Page y crearemos el componente Login.
Si todo va bien veremos la carpeta login junto con los archivos .ts, .html y .css.
Así hemos terminado la creación de nuestro componente.
4. Creando Navegación
Cuando creamos nuestro proyecto, la aplicación inicia en el componente app.component.ts por lo cual se debe crear una navegación con un archivo (routing)para que nuestra aplicación inicie en nuestra pantalla login.
Teniendo claro esto vamos a crear un archivo llamado app.routing.ts en la raíz de la carpeta app de nuestro proyecto.
En nuestro archivo app.routing.ts vamos a crear las constantes e importar nuestros componentes y debe quedar de la siguiente manera.
Teniendo nuestro archivo routing creado debemos hacer unas importaciones en nuestro archivo app.module.ts para que la navegación sea correcta y nuestro nuevo archivo debe quedar así
Para completar la codificación de nuestra navegación debemos modificar nuestro archivo app.component.ts de la siguiente manera.
Ahora lo que debemos hacer es ejecutar nuestro proyecto para visualizar los cambios y si todo va bien se debe visualizar nuestra pantalla login de la siguiente manera.
· Usar el comando tns run Android
· Usar el comando tns Run IOS
6. Diseñando Pantalla
Teniendo nuestra aplicación funcionando ahora vamos a crear el diseño de nuestra pantalla login, usando los componentes visuales nativos que ofrece Nativescript.
Para esto necesitaremos una imagen que usaremos como logo y la selección de colores que deseamos.
Usaremos el plugin de gradiente https://www.npmjs.com/package/nativescript-gradient que podremos usar en nuestro proyecto con el comando tns plugin add nativescript-gradient.
Ahora debemos registrar el plugin en nuestro componente angular con el fin de que funcione correctamente, esto de acuerdo a la documentación de uso que el creador indica.
Teniendo esto ahora crearemos la pantalla login en el archivo login.component.html en donde vamos a usar componentes visuales como lo es un Label , un TextField ,Image y Button.
Nuestra pantalla login quedaría de la siguiente manera.
Ahora lo bonito de NativeScript es que podemos usar nuestros conocimientos web para que nuestra aplicación se vea bonita usando Css3.
Terminando el código html y Css nuestra pantalla móvil se veria de la siguiente manera.
¿Ahora como retiramos el título de nuestra pantalla?, ya que no se vería bien una pantalla login con un ActionBar, usaremos el componente UI que nos proporciona nativescript usándolo en nuestro archivo login.component.ts.
Ahora usaremos los gestures de NativeScript para hacer que los botones tengan una función visual de selección.
Nuestro nuevo componente quedaría construido de la siguiente manera usando los gestures y asignando los valores a el componente visual un nuevo color cuando se seleccione el botón.
Terminando nuestro NSLab nuestra pantalla login quedaría de la siguiente manera.
Es es el inicio de un laboratorio donde aprenderás a trabajar con NativeScript y Firebase desde cero, solo necesitas tener ganas para aprender de un framework móvil usando las tecnologías que ya conoces, si quieres saber mas de NativeScript ingresa aqui https://www.nativescript.org/.