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

Firebase Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo

Continuemos con este tutorial, en la parte anterior llamada Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 2 creamos una base de datos de Firebase Realtime Database y configuramos Firebase Storage en donde subiré las imágenes del sistema CRUD, en esta Parte 3 crearé las operaciones CRUD.

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 3

Es importante recordar que las operaciones CRUD son Crear, Leer, Actualizar y Eliminar (Create, Read, Update y Delete).

Operaciones CRUD

En la Parte 1 de este tutorial, al crear y registrar mi aplicación, Firebase me genero un código JavaScript que me permite acceder a todos sus servicios, este código lo coloco en la parte de abajo de todas las páginas HTML del sistema CRUD antes de la etiqueta de cierre </body> y aparte tengo que instanciar Firebase Realtime Database mediante el archivo firebase-database.js y Firebase Storage mediante el archivo firebase.storage.js

Ahora pasaremos a crear las vistas con sus operaciones CRUD.

Para mantener un orden crearé la vista de la tarea CRUD correspondiente con HTML (Bootstrap 4) y debajo antes de la etiqueta de cierre </body>  colocaré el código JavaScript que realiza la operación CRUD correspondiente.

Create (Crear)

Esta operación insertará un registro en la base de datos, creo un archivo llamado crear.php y dentro de el agrego el siguiente formulario HTML con Bootstrap 4.

Si abro mi archivo crear.php en el navegador, pues debería verse el formulario:

Bien, después de inicializar Firebase, 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 usuario envía el formulario, inmediatamente llama a la función crear(), que se encarga de recibir los datos y los procesa, usaré try() y catch() por temas de ver y reparar errores, bien empiezo obteniendo los valores de los campos del formulario.

Paso seguido proceso la subida de la imagen, primero creo una referencia a Firebase Storage, luego creo una referencia a la ruta o directorio en donde almacenaré la imagen, asimismo hago referencia a la imagen que estoy subiendo.

También hago referencia a Firebase Realtime Database y a la ruta postres en donde almacenaré los datos.

Ahora le paso la variable global window.value que había creado en la anterior función leerImagen() y tras subir la imagen, muestro un mensaje en la consola para verificar si se ha subido la imagen correctamente a Firebase Storage.

Asimismo obtengo la URL de la imagen y la muestro en consola, esta URL es pública, si hago clic en esa URL, me mostrará en el navegador la imagen que he subido a Firebase Storage.

Paso seguido mediante el método set() almaceno los campos en Firebase Realtime Database, puedes ver que la variable urlimagen la cual es la URL de la imagen almacenada en Firebase Storage la inserto en el campo img de la base de datos en Firebase Realtime Database.

Asimismo redirecciono a la vista principal con un mensaje y termino con el catch() que me muestra algún error si es que es encontrado.

Bien con esto tenemos lista la vista y el código para la tarea Crear del Sistema CRUD.

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 continuaré con la siguiente tarea 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.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
2 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Emerson Vera
Emerson Vera
1 año atrás

Buenas quisiera saber si puedes enviar el código completo para estudiarlo, gracias