Scribd
Cargar
155 vistas53 páginas

Crud Firebase Angular

Este documento describe cómo usar el módulo HTTP de Angular y los servicios RESTful de Firebase para realizar operaciones CRUD (crear, leer, actualizar y eliminar) en una base de datos. Explica cómo realizar peticiones POST, GET, DELETE y PUT a Firebase y manejar la respuesta de las peticiones. También cubre cómo configurar Firebase como un backend REST y mostrar datos de la base de datos en una tabla utilizando Angular.

Cargado por

Daniel Quintero
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
155 vistas53 páginas

Crud Firebase Angular

Este documento describe cómo usar el módulo HTTP de Angular y los servicios RESTful de Firebase para realizar operaciones CRUD (crear, leer, actualizar y eliminar) en una base de datos. Explica cómo realizar peticiones POST, GET, DELETE y PUT a Firebase y manejar la respuesta de las peticiones. También cubre cómo configurar Firebase como un backend REST y mostrar datos de la base de datos en una tabla utilizando Angular.

Cargado por

Daniel Quintero
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 53

Uso del http CRUD

firebase
 Obtener la informacion del result api de firebase.
 Temas a tratar:
 Uso del modulo HTTP
 Servicios restful de firebase
 POST
 GET
 DELETE
 PUT
 Configuraciones de la consola de firebase.
o Para empezar nuestro proyecto vamos a crearlo desde la consola le decimos que no cree el
archivo de rutas y que trabajaremos css, tambien copiamos los cdn de bootstrap y de
fonstawesome en el archivo index.html.
o Vamos a crear nuestro sistema de rutas abrimos la terminal
o ng g m appRouting - - flat para que lo cree al mismo nivel de mi carpeta app
o m es de module

o Vamos a crear dos componentes dentro de una carpeta llamada pages o como usted desee el
primer componente lo llamamos personas
 ng g c pages/persona y ng g c pages/personas, en persona vamos a registrarla y en personas
vamos a buscar un registro en especifico, configuramos el archivo de rutas quedando de la
siguiente forma:
o Recuerde que tambien tengo un archivo app.module.ts que es nuesgtro segundo archivo de rutas
y lo debo importar a este
 Observemos que las rutas configuradas funcionan, en el app.component.html vamos a llamar a
nuestro router-outlet que es el que nos carga la configuracion inicial de nuestro proyecto. Se nos
carga la pagina personas works y si quiero mirar la pagina persona en la barra de navegacion
digito persona/id y nos carga la pagina persona

En el index.html en el body coloquemos la clase <body


class=“container”>
 Voy a google y busco animated.css y en la carpeta assets creo un archivo animated.css.

 Con esto ya podmeos observar que la pagina no carga de golpe si no con mas suavidad.
Pagina personas
 Primero vamos a crear un titulo para nuestra pagina de personas con un boton y utilizando los
estilos de fontsawesome.

 Luego agrego una tabla desde bootstrap la que mas le guste


 Y por ultimo agrego unas alertas con iconos de fotnsAwesome
Diseño de la pagina persona
 Modifiquemos o mejor arreglemos nuestra pagina de persona
Modelo para manejar personas y
formulario de edicion
 Vamos a necesitar un modelo para rtabajar informacion de formularios. Vamos a crear el
modelo, creando una carpeta sobre app llamada models y dentro de models vamos a crear
persona.model.ts

 En el modelo creo los campos que voy a trabajar en la base de datos, tambien inicializo el estado
de la persona en true ya que aca vamos a trabajar con trabajando o pensionado.
 Vamos a abrir persona.component.html y persona.component.ts y vamos a crear una propiedad
persona e inicializamos el objeto persona = new PersonaModel
 Ahora abramos el persona.component.html, asociemos cada campo con las propiedades de la
clase y trabajar el submit del formulario y recuerde que vamos a trabajar con formularios en el
app.module.ts debemos importar el FormsModule

App.module.ts
 Al hacer los cambios se hace el submit con el del html, en el formulario vamos a llamar el
metodo (ngSubmit) con una funcion guardar( f )

 En el persona.component.ts debo crear la funcion guardar que hize en el html


 En el persona.component.html vamos a agregar el [(ngModel)] = “persona.id” y ademas hay que
agregar un name al imput
 Mejorando un poco el envio de los datos al formulario por medio de persona.component.ts
Configurando Firebase como backend
REST
 Entramos a firebase.google.com y creamos un proyecto nuevo y lo llaman crud-firebase o el
nombre que usted desee, recuerde dar click en añadir proyecto o add project, despues de crear el
proyecto vamos a dar click en Database

Buscamos la seccion Realtime Database y damos click en


1 crear base de datos

2
 Despues de dar click en crear base de datos se nos abre una ventana emergente y seleccionamos
empezar en el modo de prueba y habilitar
 En la seccion de datos voy a crear mi tabla y le doy clic en añadir

 Como vamos a conseguir todo el arreglo de personas, damos clic en personas y copiamos la url
que se genera y en una nueva pestaña del navegador le colocamos al final .json
 Cada vez que agregamos un dato a la BD y recargamos nuestro json nos muestra el dato
agregado.

click
HTTP – POST
creando un nuevo registro en firebase
 Vamos a centrar la logica por medio de un servicio

 Como voy hacer peticiones http debo importar en el archivo app.module.ts el HttpClientModule

 Ahora lo que debo hacer es que en el modelo importo el HttpClient y el PersonaModel


 En el constructor creo una variable de tipo private http: HttpClient y en el export class creo una
variable private url donde me copio la url de firebase o sea el endpoint, ademas creo una funcion
crearPersona la cual hereda del modelo.
 En persona.component.ts debo inyectar mi servicio

 En el guardar llamo la funcion crearPersona


 Ahora vamos a ensayar nuestro guardar y por seguridad bajemos el server y lo volvemos a
levantar, despues de esto colocamos los datos y guardamos y cuando lo hacemos este nos genera
un id y ese lo podemos ver en firebase que contiene los datos guardados.
 Ahora tenemos el problema es que si volvemos a guardar nos crea la misma persona pero con
diferente id, en el servicio cuando se hace la peticion me retorna el ide de la persona, utilicemos
el operador map para transformar la respuesta. Importo el modulo rxjs a mi service

 Ahora paso por el metodo pipe coloco los operadores por el map la respuesta de mi peticion.
 Cuando yo guardo la persona en el formulario en el campo firebase id se muestra el id de la
persona creada
HTTP – PUT
ACTUALIZAR EL REGISTRO
 Para actualizar vamos al service, creemos un metodo actualizarHeroe.

 Si volvemos a dar clic en el boton guardar genero de que se me genere un id dentro de la base de
datos y esto no seria lo mas conveniente entonces debo hacer una decisión para saber si el id
esta vacio o ya viene con algun dato. En el persona.component.ts en la funcion de guardar hago
un if donde pregunto si es diferente de vacio actualizo y si no guardo, dos cambios para que
cuando actualize no me genere un nuevo id sobre las propiedades de la persona.
Informacion del estado de las peticiones
 Avisarle al usuario cuando se guarda o se actualiza, vamos a generar unas alertas por medio de
sweetalert2, recuerde que importamos el modulo de sweetalert a persona.component.ts y vamos
a mejorar el persona.component.ts donde las alertas me diran si se actualizo correctamente.
 Lo primero es copiar la librería del sweetalert a nuestro proyecto, despues importar el modulo de
sweetalert2
 En la funcion guardar vamos a centralizar las peticiones de guardar o actualizar
HTTP – GET
obtener un listado de todas las personas
 Trabajemos en el listado de personas. Firebase nos trae un arreglo pero este no nos va servir para
mostrar la informacion en la tabla y genera un error si los metemos en un ngFor lo cual no nos
sirve entonces vamos a hacer los cambios respectivos empezando en personas.component.ts
importamos el service
 Ahora en el service vamos a hacer que los datos almacenados en la BD de firebase se muestren
como un arreglo independiente
 Vamos a hacer la manipulacion de la html, primero vamos a crear una variable en
personas.component.ts donde esta variable va a invocar a personaModel de tipo arreglo

 Modifiquemos el html para mostrar los datos guardados en la tabla


HTTP – GET
obtener un nodo especifico
 En la parte de mi html donde tengo los tools agrego dos botones uno para editar y el otro para
eliminar, tambien agrego un routerLink apuntando hacia persona y personaid en el
personas.component.html

 Pero tenemos un problema que al dar clic en editar en la url me carga el id a modificar pero no
me estan cargando los datos en el formulario
 Necesitamos un servicio para obtener una persona por id en el services.

 Ahora vamos a persona.component.ts y hacemos la logica en el ngOnInit e inyectamos un


servicio ActivatedRoute en el constructor
HTTP – DELETE
para eliminar registros
 Es una peticion delete en vez de una post abrimos el personas.service.ts

 Ahora abrimos el archivo donde esta el listado que es personas.component.ts

 Ahora abrimos el personas.component.html

 Como podemos ver cuando eliminamos este se borra de la bd pero aun se ve en el formulario,
vamos a arreglarlo
 Para poder solucionarlo vamos a la funcion borrarPersona y agregamos el index que ya esta en
el ngFor (i)

 Antes de borrar debemos preguntar si esta seguro de borrar el usuario.


Maquillaje para la pantalla de personas
 Creo una variable llamada cargando en true o false como usted quiera y esta se ejecutara cuando
carguemos la informacion y se terminara cuando se ejecute el subscribe

 Ahora abramos el personas.component.html y en el alert de cargando colocamos un ngIf =


“cargando”
 Podemos observar que esta muy rapido, entonces vamos a usar en nuestros map otra propiedad
llamada delay en nuestro personas.service.ts
 Ocultemos la tabla mientras este cargando

 Tambien oculto la alerta de no hay registros y que se muestre cuando en realidad no hay
registros.

También podría gustarte