Hoy te mostraré cómo crear y configurar un proyecto de Firebase para usarlo en la web con JavaScript usando NPM y Webpack.

Al final vamos a obtener las claves de acceso al proyecto para poder usar el SDK de Firebase en tu aplicación web.

Creando proyecto

Ve a la consola de Firebase en: https://console.firebase.google.com/u/0/?hl=es y agrega un nuevo proyecto. Coloca el nombre que quieras y continúa.

Si quieres puedes usar Analytics, yo lo he deshabilitado. Luego haz clic en Crear proyecto y espera a que termine de crearse. Ahora agregar una aplicación web al proyecto:

Agregar aplicación web a proyecto de Firebase

Agregar aplicación web a proyecto de Firebase

En el nombre de tu app puedes colocar cualquier nombre. Yo dejé desmarcada la opción de Firebase Hosting.

Luego te va a dar tus claves de acceso al SDK, te recomiendo guardarlas en un lugar seguro y tenerlas a la mano para cuando inicies tu proyecto.

Nota: recomiendo seguir lo que dice la guía, que es instalar firebase con npm install firebase. Si no tienes Node o NPM mira este enlace.

Configurar SDK de Firebase con firebaseConfig

Configurar SDK de Firebase con firebaseConfig

Y ya con eso puedes comenzar a usar los servicios de Firebase desde la web. A continuación te mostraré cómo agregar la base de datos si vas a usar Firestore.

Agregar Firestore

Firebase ofrece varias cosas como Firestore Database o Realtime Database. Si vas a almacenar datos yo recomiendo Firestore Database, ya que permite hacer consultas, modo sin conexión y sincronización en tiempo real.

Para agregarlo simplemente elige Firestore Database en el menú de la izquierda y crea una base de datos:

Crear base de datos de Firestore

Crear base de datos de Firestore

Configura la reglas como sea necesario, yo recomiendo hacerlo en modo prueba y más tarde actualizarlo a modo producción. En cuanto a la ubicación, recomiendo elegir cualquiera de los multiregión.

Y finalmente ya habrás creado tu base de datos. Desde ahí puedes administrar reglas, ver los datos, el uso, etcétera:

Datos de Firestore con Firebase

Datos de Firestore con Firebase

Opcional: modificar reglas para permitir todo tipo de acceso

Si tu app no maneja datos confidenciales, solo es por diversión / aprendizaje y no quieres configurar reglas por usuario, puedes hacer que cualquiera pueda leer y escribir. Si elegiste el modo prueba, las reglas se ven así:

Nota: el timestamp.date puede cambiar dependiendo de la fecha de creación de tu proyecto, que son 30 días me parece.

Pues bien, si quieres que cualquiera tenga permiso de leer y escribir, cambia a lo siguiente:

Básicamente es cambiar la condición para que siempre regrese true. Luego haz clic en Publicar y las reglas se aplicarán.

Te repito que deberías hacer esto si tú no vas a manejar usuarios, autenticación y eso. Haces esto bajo tu responsabilidad.

Conclusión

A partir de aquí ya puedes comenzar a usar Firestore y Firebase con JS y tu (opcionalmente) framework favorito.

Puedes ver la documentación aquí.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 3,194 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: