fbpx

Esta es la primera parte de nuestra Guía de Angular, Firebase y Firestore puedes leer la segunda parte, dónde conectamos con estos servicios, aquí.

Has utilizado Javascript, igual y hasta eres fan de jQuery. Pero quieres usar un framework más moderno y poderoso ¿Por qué no Angular? Hoy vamos a hacer un app para hacer un task list que va a utilizar una base de datos en Firebase y vamos a aprender un poco sobre Web Components. Tengo hambre ¿Alguien más tiene hambre?

Aquí hay uno que preparé anteriormente

Ingredientes

Estas son las librerías y herramientas que vamos a utilizar. La mayoría de estas cosas se van a instalar automáticamente, pero siempre es bueno saber con que estamos por lidiar.

Preparación

(1) Instalando lo necesario

Primero necesitamos tener node, npm y angular-cli. Ya que vamos a utilizar npm para manejar nuestras dependencias. Esta es la única parte específica de tu sistema, nosotros vamos a utilizar homebrew para instalar en macOS.

Si usas Linux o Mac: nvm (Node Version Manager), te permite instalar y usar versiones diferentes de node.js, es una herrmienta muy útil. También hay nvm en Windows, pero no es desarrollado por el mismo equipo.

Ya puedes instalar el Angular-cli que nos permitirá generar y administrar nuestro proyecto de angular

Instala y reserva para más tarde.

(2) Levantando el proyecto

Primero crea un app vacía utilizando Angular-cli con el comando ng.

![Tu browser se va a abrir y deberías estar viendo una pantalla parecida][1]

A continuación instalamos angularfire2 para conectarnos con Firebase

Mezcla todos los ingredientes secos y cuando esten homogeneos agrega leche y vierte en un molde de hornear

(3) Revisa la estructura del proyecto

Hay tres directorios y algunos archivos. Lo más importante es:

  • angular.json tiene las configuraciones principales de tu workspace. Personalmente solo lo he modificado manualmente en la sección assets.
  • karma.conf.js es la configuración de tu herramienta de pruebas
  • tsconfig.json es la configuración de typescript
  • src/app/app.module.ts declara la mayoría de las librerías que va a utilizar tu proyecto
  • src/app/app.component.ts es el componente principal de tu app

Precalienta el horno a 180ºC por al menos 20 minutos

(4) Creando un componente

Los componentes son las estructuras básicas de angular. Vamos a crear un componente llamado tasklist con este comando:

Vamos a crear una tasklist en el componente que acabamos de generar src/app/tasklist.

En nuestro componente src/app/tasklist/tasklist.component.ts vamos a crear una interface y algunos valores de prueba.

Primero nota interface Task estas lineas definen una interfáz, es decir la forma en la que se va a ver un objeto. No es exactamente un tipo pero es suficientemente cercano a uno.

Luego tasks: Task[] define la variable tasks como una lista de objetos tipo Task y lo estamos inicializando inmediatamente. newtask es parecido pero es un solo objeto que vamos a utilizar para guardar los datos de las tasks que vayamos agregando.

Finalmente la función submit() agrega los valores de newtask a nuestro arreglo tasks y lo vuelve a inicializar.

Toma nota de la linea selector: 'app-tasklist', ya que vamos a ocupar este valor más adelante. Este es html tag que vamos a emplear para llamar este objeto.


En cuanto a nuestro template en src/app/tasklist/tasklist.component.html.

*ngFor repite un html tag y su contenido tantas veces como el for requiera, en este caso va a crear un tag <li> tantas veces como tasks hay.

[(ngModel)] "amarra" el valor de un objeto a una variable en nuestro componente. En el caso de nuestros primeros dos inputs, su booleano y texto se amarran a respectivo done y descripción de cada task.

Para el cuarto input también estamos utilizando [(ngModel)] para guardar la descripción de cada nuevo task. Luego utilizamos (keyup.enter)="submit()" para detectar cuando el usuario presiona ENTER y ejecutar la función submit() que explicamos antes.


Lo último que tienes que hacer para que esto funcione es agregar un par de lineas a src/app/app.module.ts

Lo que estamos haciendo es colocar FormsModule en nuestros imports, esto nos permite utilizar [(ngModule)] en nuestros templates.

Una vez que las orillas se desprendan de tu molde sáca el app del horno, deja enfriar y reserva.


Ejemplo en vivo

Para descargar un ejemplo en vivo de esta guía, solamente debes seguirnos en Facebook y dar click en el botón de "Ir al demo"

Powered by Followall

¡Con solo esto ya tienes una lista de tasks! Desde luego no hemos terminado la receta; falta algo de funcionalidad, como borrar tasks, y conectarlo a una base de datos en línea. Lo cual haremos en la siguiente parte de la guía de Angular, Firebase y Firestore.