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

Firebase Tutoriales |

En la Parte anterior llamada Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 1 configuramos un nuevo proyecto en Firebase, asimismo instanciamos Bootstrap 4 con sus respectivas dependencias (jQuery y Popper JS), en esta Parte 2 continuaremos con la creación del Sistema 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: “Donde buscar ayuda sobre Programación”:

SpotifySoundCloud

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

Creación de la Base de Datos en Realtime Database

Vamos a la parte izquierda y seleccionamos Database, hasta la fecha de este Post, en Firebase podemos usar 2 tipos de base de datos, Cloud Filestore y Realtime Database, usaremos Realtime Database para el sistema CRUD, hacemos clic en el botón Crear base de datos.

Nos aparecerá una ventana para definir las Reglas de seguridad de Realtime Database, seleccionamos Comenzar en modo de prueba y le damos clic en el botón Habilitar.

Nosotros podemos personalizar las reglas (rules) de seguridad de Realtime Database, si deseamos, pero con esto ya podemos hacer operaciones CRUD en Realtime Database.

Ahora selecciono Realtime Database de la lista si es que no esta seleccionado automáticamente y con esto ya tengo mi base de datos lista para Crear, Leer, Actualizar y Eliminar registros.

Realtime Database le asigna un nombre aleatoriamente a la base de datos, a mi base de datos le puso de nombre crud-a1512.

Almacenamiento de las Imágenes en Firebase Storage

Firebase Realtime Database, solo nos permite almacenar datos, pero no imágenes, para las imágenes haré uso de Firebase Storage.

En la parte izquierda hacemos clic en Storage y al lado derecho hacemos clic en el botón Empezar.

Aparece una ventana informándonos sobre las reglas de seguridad, hacemos clic en el botón Siguiente.

Ahora seleccionamos la ubicación del servidor que deseamos usar, yo usaré la que esta seleccionada por defecto y presiono el botón Listo para continuar.

Con esto tenemos listo Firebase Storage para guardar las imágenes de nuestro sistema CRUD.

Ahora pasaremos a crear las operaciones CRUD.

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 Database Realtime mediante el archivo firebase-database.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.

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, antes del cierre de la etiqueta </script> escribo la siguiente función JavaScript que procesará la inserción de un registro en la base de datos:

Entonces el contenido dentro de las etiquetas <script></script> de mi archivo crear.php ahora se vería así:

Bien hasta aquí terminamos la Parte 2 de este tutorial, hemos creado un base de datos en Realtime Database, asimismo creamos la vista Crear con su función JavaScript para crear registros en la base de datos.

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 terminaremos de crear las siguientes tareas 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
0 Comments
Inline Feedbacks
View all comments