Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 5

8 minuto(s)

Demo

Vamos a continuar con con la parte anterior llamada Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 4, en donde trabajamos la operación Read (Leer) del sistema CRUD, diseñamos la vista HTML con elementos de Bootstrap 4 y creamos el código JavaScript que realiza la llamada de los datos desde Firebase Realtime Database, para ser leídos en la vista, en esta Parte 5 vamos a trabajar en la operación Update (Actualizar) de nuestro sistema CRUD, vamos con ello.

Partes

Antes de continuar, te invito a leer los siguientes artículos para que estés familiarizado con este tutorial:

Asimismo te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 5

Update (Actualizar)

Vamos a crear la tarea Update (Actualizar), mediante un formulario el usuario podrá editar los datos de un determinado registro, para que el sistema sepa que registro debe actualizar, voy a pasarle el id o key del registro que quiero eliminar.

El id o key que usaré es el mismo que Firebase Realtime Database me generó al insertar un dato, en la Parte 6 de este tutorial voy a crear una vista principal, desde donde envio el id o key a la vista actualizar para indicarle el id o key que debo actualizar.

Comencemos con la Vista de la tarea actualizar, en ella colocaré un formulario y dentro de cada campo colocaré los valores del registro que se va actualizar, para esto voy a llamar a la función JavaScript cargarDatos(), esta función la crearemos más abajo y se encargará de colocar al cargar la página cada valor de un registro en el campo correspondiente del formulario.


Ahora antes del formulario para actualizar los datos, coloco un botón para volver a la vista principal, si es que el usuario no desea editar el registro.

Luego colocaré el formulario,  en el evento onsubmit(), es decir al enviar el formulario con los cambios, llamo a la función JavaScript actualizar() la cual se encarga de actualizar los campos y la imagen en Firebase Realtime Database y Firebase Storage para la imagen.

A diferencia de la vista Read (Leer), en nuestra vista Actualizar voy a mostrar la imagen actual que se encuentra adjunta al registro que estoy actualizando.


Si voy al navegador, debería ver la vista Actualizar, de la siguiente manera. (Puedes apreciar en la barra de navegación, he pasado el id o key del registro que quiero actualizar en Firebase Realtime Database).

Bueno ahora pasemos a crear el código JavaScript para nuestra tarea Update (Actualizar).

Debajo antes de la etiqueta de cierre </body>  colocaré el código JavaScript que realiza la operación CRUD Update (Actualizar). 

Primero defino la configuración de Firebase , luego inicio Firebase con la configuración definida o realizada y hago referencia a Firebase Realtime Database.


Luego creo una variable llamada key que usaré para cada dato del registro, también creo una variable llamada datosurl en donde obtengo el id que he pasado por la URL desde la vista principal a la vista Read (Leer). 


Bien, ahora crearé la función cargarDatos() la cual llama a los datos de un registro y los coloca dentro de cada campo correspondiente en el formulario de la vista Update (Actualizar), he colocado comentarios para explicar que hace cada parte del código. 


Algo importante que me parece debes aprender del código anterior, es que para obtener los datos de un solo registro por su id, lo que hago es verificar si la id de la URL es igual al id del registro almacenado en Firebase Realtime Database.


Ahora voy a crear la función leerImagen(), esta función la puse en el campo img  del formulario, cada vez que selecciono una imagen, este campo llama a la función leerImagen() y obtiene la imagen como un objeto File mediante la API File de HTML 5.


Cuando el formulario es enviado, este llama a la función actualizar() la cual crearé a continuación, en ella obtengo la url en donde esta el id del registro actual que quiero actualizar, luego hago referencia o le indico al sistema que los datos que actualizaré son los que se encuentra en postres.


Ahora usaré una Promise (Promesa) en donde hago uso del método forEach() de JavaScript para recorrer cada valor del registro y verifico si el id o key de la URL es igual al del registro, luego obtengo los valores del formulario, hago una referencia a Firebase Storage en donde guardare el archivo.


Ahora voy hacer uso de sentencias ifelse para verificar si el objeto del archivo (imagen) esta vacío, ya que el usuario por ejemplo puede elegir solo editar el nombre y no la imagen, así no enviamos un archivo vacío a Firebase Storage y Firebase Realtime Database.

Si el objeto del archivo (imagen), no esta vacío, obtengo la imagen actual alojada en Firebase Storage, pero Firebase Storage me pide que envíe el nombre de la imagen solamente, para esto voy a extraer el nombre de la imagen que esta en la URL de esta.

Hago referencia a Firebase Storage y a la ruta en donde se encuentra alojada la imagen que quiero eliminar y procedo a eliminar la imagen.

Luego hago uso de una Promise (Promesa) de JavaScript para subir la nueva imagen, obtengo la url de la nueva imagen, hago referencia a Firebase Database Realtime, inserto los nuevos datos y redireccionamos a la vista principal con un mensaje.


Y si el usuario decide no cambiar la imagen, en la sentencia else actualizamos los datos sin la imagen, redireccionamos a la vista principal con un mensaje y termino con el catch() que me muestra algún error si es que es encontrado.


Puedes ver que estoy haciendo uso del método update() de Firebase Realtime Database, el cual nos permite actualizar los registros en la base de datos.

Yo estoy usando try…catch de JavaScript para encontrar los errores en mi código, tu puedes elegir no usarlo, no hay problema.

Bien, eso es todo para la Parte 4 de este tutorial, hemos creado la vista HTML Update (Actualizar) con Bootstrap 4 y también creamos el código JavaScript para actualizar la imagen y los datos de un solo registro por su id.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente Parte de este tutorial crearemos la última operación o tarea del sistema CRUD, es decir la tarea Delete (Eliminar).
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.