Formulario reactivo en angular 8, utilizado firebase como DB

-
Una de las funciones principales en todo sistema informático es obtener datos, datos que se obtienen a través de formularios, datos que posteriormente podemos procesar y transformar en información valiosa. Bueno mucho bla bla bla.. mejor vamos a lo que nos importa.

Asumo que tienes cierta experiencia en programación, mínimo debieras saber:
  •   Un poco de HTML
  •   Algo de JavaScript
  •   Alguna noción de como funciona un formulario web
  •   Termodinámica avanzada .... jaja no, eso no.

Primero crearemos nuestro proyecto angular, nos posicionamos con nuestra terminal en la ruta donde tendremos nuestro proyecto y escribimos:
     ng new form-reactivo-app
*Donde 'form-reactivo-app' es el nombre de nuestro proyecto

luego creamos nuestros componente
  ng g c component/contact

también creamos nuestro servicio, el encargado de enviar los datos a nuestra DB
ng g s services/data-db

Finalmente nuestro modelo, este representa el objeto que gestionara los datos del formulario
ng g models/message

De esta forma se creara una carpeta 'component', y dentro de ella otra que representa a nuestro componente 'contact', en resumen nos quedaría algo similar a esto:

Rojo: componente,azul:modelo,naranjo:servicio 



Y lo mas entretenido, creamos nuestro formulario HTML, dentro del archivo component/contact/contact.component.html :


Ahora definimos la lógica de nuestro formulario, como la validacion de datos y el envió de estos al servidor, dentro del archivo component/contact/contact.component.ts:


para esto modificamos nuestro archivo services/data-db-service.ts:


Y también agregamos la estructura a nuestro modelo en nuestro archivo models/message.interface.ts:


Con esto ya terminamos nuestro formulario en el frontend, ahora solo nos basta configurar nuestra base de datos en firebase, para esto vamos a Google

primero nos dirigimos a Firebase:
https://firebase.google.com/?gclid=Cj0KCQiAvJXxBRCeARIsAMSkApqXjR02Uk6vXLtJvw-vLFd_1nwxk8o29fwUhFt2Jl80K9BL0rYNHPkaAhbOEALw_wcB

Le damos a comenzar y luego creamos nuestro proyecto

creamos nuestra Base de datos
        


y ahora lo mas importante, obtenemos el código para conectar la Base de datos con nuestra aplicación angular, este código lo obtienes al momento de crear el proyecto. si lo quieres recuperar después de haber creado el proyecto debes dirigirte a la configuración del proyecto:


y ese código lo copiamos en nuestro proyecto angular en la sección ambiente de configuración, environment.ts:
  



bueno y eso seria todo, para probarlo debes ejecutar el proyecto, posicionandote en el path del proyecto y ejecutar:

  ng serve

Espero que te sirva y si te gusto hacérmelo saber con algún comentario :)


Articulo GitHub:

Comentarios

Publicar un comentario

Entradas populares de este blog

¿Como llamar una función del componente padre desde un componente hijo, en angular 8?

-
Lo mas común es utilizar funciones de los componentes hijos en el componente padre, sin embargo aveces es necesario realizar la acción contraria, o sea ejecutar funciones del componente padre en los componentes hijos. Es un poco enredado, mejor veamos un ejemplo: padre.component.ts: Tenemos la función que deseamos llamar desde nuestro componente hijo: padre.component.html: Al momento de instanciar el componente hijo en el HTML del padre: HijoComponent.ts Finalmente en el componente hijo obtenemos la función del padre y la podemos utilizar: Y Walaa ya podemos utilizar desde el componente hijo la función definida en el componente padre. Si te sirvió o te pareció interesante hacérmelo saber con algún comentario :)
Leer más

Frontend: Suscripciones y Observables con Angular 8

-
Imagen
Bueno antes que empezar, aclaro que este ejemplo pretende ser una inducción rápida y sencilla para implementar y entender el funcionamiento básico de los observables y suscripciones en angular. En este articulo utilizaremos un archivo json como fuente de datos, en un ambiente productivo sera una petición a un servidor...esta peticiones la haremos con un observable y la respuesta la obtendremos a través de una suscripción.....aaaa usaremos una lista de películas para hacerlo mas amigable. Requisitos:  conocimientos mínimos de HTML, algo de javaScript, css y una noción de POO   Tener instalado angular y un editor de código, yo utilizo visual studio code  15 minutos de tu vida  ser mayor de edad....no, no es necesario. Solo quise darle un aire de exclusividad Primero creamos nuestro proyecto angular, con nuestra terminal nos posicionamos en el directorio donde guardaremos nuestro proyecto y escribimos: ng new observable-app Luego dentro de la carpeta de nuestro pro...
Leer más

Enrutado con lazy loading en angular 8

-
¿Que es lazy loading? Tambien conocida como carga perezosa, es una técnica para cargar los datos solo en el momento que serán utilizados, por ejemplo imaginemos que tenemos una grilla paginada con un montón de datos, utilizando la lógica de carga perezosa cargaremos los datos a medida que el usuario vaya navegando por las paginas.... Otro ejemplo y es el que vamos a ver acá, es cuando tenemos un menú para navegar por nuestro sistema angular. Si no utilizamos esta tecnica todas nuestras paginas se cargaran al momento de cargar el sitio, esto obviamente es muuuuuuuuy negativo para la experiencia de usuario.... usando lazy loading cargaremos las paginas según donde vamos navegando....... bueno mucho bla bla, mejor vayamos a lo nuestro.. ¿Que haremos? Crearemos un pequeño sitio con un menú de navegación que tendrá los siguientes módulos. Usaremos el enfoque un modulo por componente , que es la forma recomendada por angular: inicio donde_estamos:    Esta sección la...
Leer más