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

4 minuto(s)

Demo

En la parte anterior llamada Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 3, comenzamos con la creación de las operaciones CRUD, la primera operación que realizamos fue Create (Crear), diseñamos su vista HTML con Bootstrap 4 y creamos el código JavaScript que realiza la conexión a Firebase Realtime Database y Firebase Storage para almacenar las imágenes, en esta parte vamos a continuar con la siguiente operación llamada Read (Leer), 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: “Que Hacer Cuando Estamos En Casa”:

Spotify: Sound Cloud:

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

Empezaré creando la vista HTML con Bootstrap 4 y luego crearé el código JavaScript para leer y mostrar.

Read (Leer)

La vista para leer un dato independientemente es sencilla, primero colocaré un botón para volver a la vista principal del sistema CRUD, el nombre del postre lo colocaré en un encabezado h3 al cual le doy el nombre de clase nombre, luego


Si voy al navegador y abro por ejemplo el dato Gelatina de Fresa, debe mostrarse de la siguiente manera.

La idea es que el usuario desde una vista principal (La crearemos al final), presione un botón que diga Ver y le muestra los detalles del registro en la vista HTML Leer (Read) que acabamos de crear.

En el elemento HTML body estoy llamando a una función JavaScript llamada leer(); mediante el evento onload, la función leer(); la crearemos más adelante.


Ahora pasemos a crear el código JavaScript para la operación o tarea Read (Leer).

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

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).


Ahora crearé la función leer() la cual llama a los datos de un registro independientemente por su id al cargar la vista Read (Leer), en el código, (He colocado comentarios para explicar que hace cada parte del código).


Quiero destacar algo importante que me parece debes conocer y 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.


Bueno hasta aquí terminamos la Parte 4 de este tutorial, hemos creado la vista HTML Read (Leer) con Bootstrap 4 y también creamos el código JavaScript para seleccionar y mostrar solo 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 siguiente operación o tarea del sistema CRUD.
  • 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.