¿Cómo usar Firebase Storage y Firebase Database con React?

Por:

Denisse Abreu
25 de abril del 2023 8pm ET

Eng/Spa 8-min

# Inicialice la base de datos y el Storage de Firebase para aplicaciones web # ¿Cómo subir imágenes al Storage de Firebase? # ¿Cómo obtener los productos del carrito de compras de la base de datos de Firebase? # Agregue el Contexto de React para la obtención dinámica de productos

Hola 👋🏼, continuemos con la serie de Firebase aprendiendo a trabajar con el almacenamiento y la base de datos. Crearemos un carrito de compras para vender tazas con su formulario de administración para enseñar cómo subir imágenes y luego obterlas de la base de datos con su artículo correspondiente. Continuaremos trabajando con React, TypeScript y Tailwind CSS.
¡Empecemos!

Inicialice la base de datos y el Storage de Firebase para aplicaciones web.

Vaya a la sección 'Build' en el lado izquierdo de la pantalla, active el Storage y la base de datos, configúrelo todo en modo de prueba. Luego, vaya a la pestaña de reglas (rules) y agregue las siguientes reglas. Siga Empezar con Cloud Storage en la Web y Empezar con Cloud Firestore si necesita ayuda adicional.

Reglas del Storage.

storage rules

  rules_version = '2';

  service firebase.storage {
    match /b/{bucket}/o {
      match /{images}/{imageName} {
        allow read;
        allow write: if
         // Acceso público para modo en desarrollo.
         // Imagen de 5 MB o menos.
          request.resource.size < 5 * 1024 * 1024
          && request.resource.contentType.matches('image/.*');
      }
    }
  }

Reglas de la base de datos Firestore.

firestore database rules

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{store}/{productId} {
        // Acceso público para modo en desarrollo.
        allow read, write;
      }
    }
  }

Cree un proyecto de React Typescript con Vite e instale Firebase.

Git Bash

  npm create vite@latest file-upload-tutorial -- --template react-ts &&
  cd file-upload-tutorial && npm install firebase

¿Cómo subir imágenes al Storage de Firebase?

Después de configurar el proyecto React, codificaremos el formulario de administración y el archivo de Firebase. Primero, crea la carpeta utils, y dentro cree firebase.ts.

Git Bash

  cd src
  mkdir utils && cd utils
  touch firebase.ts

Inserte el siguiente código en el firebase.ts. ¡No olvide agregar sus claves de configuración de Firebase!

src/utils/firebase.ts

Cree la carpeta de componentes y dentro cree adminForm.tsx. Para el estilo CSS, estoy usando Tailwind CSS.

Git Bash

  cd src
  mkdir components && cd components
  touch adminForm.tsx

Como puede notar, el elemento 'file upload' está separado de los otros elementos porque tiene un objeto diferente llamado FileList. Extraiga del FileList el nombre y el objeto completo. Envielos como atributos de la función uploadProduct().

src/components/adminForm.tsx

Importe el formulario en App.tsx.

src/App.tsx

Después de subir su primera imagen, vaya a Firebase y verifique que la carpeta de imágenes está en el Storage y la base de datos tiene el producto con la URL de la imagen.

¿Cómo obtener los productos del carrito de compras de la base de datos de Firebase?

Ahora que puede subir imágenes y datos, es hora de recuperarlos. Vaya al archivo firebase.ts y agregue el código siguiente. Tenga en cuenta que estamos importando DocumentData[] de Firebase.

src/utils/firebase.ts

Cree dos componentes más productCards.tsx y productCardInfo.tsx.

Git Bash

  cd components
  touch productCards.tsx &&
  touch productCardInfo.tsx

Copie el siguiente código en productCards.tsx; este componente se encargará de recoger la base de datos y mostrar un 'grid' de productos.

src/components/productCards.tsx

Nuestro segundo componente es productCardInfo.tsx; este componente muestra el interior de la tarjeta con la información del producto.

src/components/productCardInfo.tsx

Lleve los dos componentes a App.tsx, actualice el navegador, ¡y debería ver los productos!

src/App.tsx

Agregue el Contexto de React para la obtención dinámica de productos.

En este momento, los productos aparecen en la pantalla cuando actualiza la página web; esto está totalmente bien para una tienda de compras; sin embargo, si desea mostrar los productos dinámicamente al presionar el botón enviar, necesita crear el Context. Cada vez que llama a la función getProducts() el Context le indicará al componente productCards que vuelva a renderizar mostrando el último producto que agregó a la base de datos.

Primero, cree una carpeta context, y dentro cree products-context.tsx.

Git Bash

  cd src
  mkdir context && cd context
  touch products-context.tsx

Copie el siguiente código dentro de products-context.tsx.

src/context/product-context.tsx

Agregue el Context a main.tsx

src/main.tsx

Llame a la función setProducts() en el formulario de administración.

src/components/adminForm.tsx

Elimine el product state y el useEffect(); ahora puedes mostrar los productos dinámicamente usando el Context, ¡hasta la próxima!

src/components/productCards.tsx