Agrega funciones nuevas a tu app web rápidamente con Extensiones de Firebase

1. Introducción

Objetivos

En este codelab, agregarás funcionalidad a una app de mercado en línea con la ayuda de las Extensiones de Firebase. En este codelab, comprenderás cómo las extensiones pueden ayudarte a dedicar menos tiempo a las tareas de desarrollo y administración de apps.

Qué compilarás

En este codelab, agregarás las siguientes funciones a una app web de mercado en línea:

• Carga imágenes más rápido para aumentar la retención de usuarios
• Limita las entradas de tu base de datos para mejorar el rendimiento y reducir tu factura
• Implementa la eliminación automática de datos del usuario antiguos para mejorar la protección de los datos del usuario

Qué aprenderás

• Cómo descubrir extensiones para casos de uso habituales
• Cómo instalar y configurar una extensión en tu proyecto
• Cómo mantener (supervisar, actualizar y desinstalar) las extensiones de tu proyecto

Este codelab se enfoca en las extensiones de Firebase. Para obtener información detallada sobre otros productos de Firebase que se mencionan en este codelab, consulta la documentación de Firebase y otros codelabs.

Requisitos

• Una computadora con un navegador web moderno instalado (se recomienda Chrome)
• Una Cuenta de Google

2. Crea y configura un proyecto de Firebase

Crea un proyecto de Firebase

1. En Firebase console, haz clic en Agregar proyecto y asígnale el nombre FriendlyMarket al proyecto de Firebase.
2. Haz clic en las opciones de creación del proyecto. Acepta las condiciones de Firebase. Omite la configuración de Google Analytics, ya que no utilizarás ese servicio en esta app.
3. Espera a que se aprovisione el proyecto y, luego, haz clic en Continuar.

La aplicación que compilarás usa algunos productos de Firebase disponibles para apps web:

• Firebase Authentication para identificar a tus usuarios con mayor facilidad
• Firebase Realtime Database para guardar datos estructurados en la nube y recibir notificaciones instantáneas cuando se actualizan los datos
• Cloud Storage para Firebase para guardar imágenes en la nube

Ahora, habilitarás y configurarás esos productos de Firebase con Firebase console.

Actualiza tu plan de precios de Firebase

Para usar las Extensiones de Firebase y sus servicios en la nube subyacentes, así como Cloud Storage para Firebase, tu proyecto de Firebase debe tener el plan de precios de pago por uso (Blaze), lo que significa que está vinculado a una cuenta de Facturación de Cloud.

• Una cuenta de Facturación de Cloud requiere una forma de pago, como una tarjeta de crédito.
• Si es la primera vez que usas Firebase y Google Cloud, verifica si cumples con los requisitos para obtener un crédito de USD 300 y una cuenta de Facturación de Cloud de prueba gratuita.
• Si realizas este codelab como parte de un evento, pregúntale al organizador si hay créditos de Cloud disponibles.

Para actualizar tu proyecto al plan Blaze, sigue estos pasos:

1. En Firebase console, selecciona la opción para actualizar tu plan.
2. Selecciona el plan Blaze. Sigue las instrucciones en pantalla para vincular una cuenta de Facturación de Cloud a tu proyecto.
   Si necesitas crear una cuenta de Facturación de Cloud como parte de esta actualización, es posible que debas volver al flujo de actualización en Firebase console para completarla.

Habilita el acceso por correo electrónico

Si bien la autenticación no es el tema central de este codelab, es importante tener algún tipo de autenticación en tu app para identificar de forma exclusiva a todas las personas que la usan. Usarás el acceso por correo electrónico.

1. En Firebase console, haz clic en Desarrollar en el panel izquierdo.
2. Haz clic en Authentication y, luego, en la pestaña Sign-in method (o haz clic aquí para ir directamente a la pestaña Sign-in method).
3. Haz clic en Correo electrónico/contraseña en la lista Proveedores de acceso, establece el interruptor Habilitar en la posición de activado y, luego, haz clic en Guardar.

Habilita Realtime Database

La app usa Firebase Realtime Database para guardar los artículos a la venta.

1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Base de datos en tiempo real.
2. Haz clic en Crear base de datos.
3. Selecciona una ubicación para tu base de datos y, luego, haz clic en Siguiente.
   Para una app real, debes elegir una ubicación que esté cerca de tus usuarios.
4. Haz clic en Iniciar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
   En los próximos pasos de este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app públicamente sin agregar reglas de seguridad para tu base de datos.
5. Haz clic en Crear.

Establece reglas de seguridad para tu base de datos

Ahora, configurarás las reglas de seguridad necesarias para esta app. Estos son algunos ejemplos de reglas básicas que te ayudarán a proteger tu app. Estas reglas permiten que cualquier persona vea los artículos a la venta, pero solo los usuarios que hayan accedido pueden realizar otras operaciones de lectura y escritura. No te preocupes por los detalles de estas reglas, solo tendrás que copiarlas y pegarlas para que tu app esté lista para funcionar.

1. En la parte superior del panel de Realtime Database, haz clic en la pestaña Rules.

2. Copia y pega el siguiente conjunto de reglas en el campo de reglas de la pestaña Rules:

   {
     "rules": {
       ".read": false,
       ".write": false,
         "drafts": {
           ".indexOn": "seller",
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
       "sellers": {
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
         "forsale": {
           ".read": true,
           ".write": "auth.uid !== null"
         }
     }
   }
   

3. Haz clic en Publicar.

Configura Cloud Storage para Firebase

La app usa Cloud Storage para Firebase para guardar imágenes de los artículos a la venta.

Sigue estos pasos para configurar Cloud Storage para Firebase en tu proyecto de Firebase:

1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Almacenamiento.
2. Haz clic en Comenzar.
3. Selecciona una ubicación para tu bucket de Storage predeterminado.
   Los buckets de US-WEST1, US-CENTRAL1 y US-EAST1 pueden aprovechar el nivel “Siempre gratis” de Google Cloud Storage. Los buckets de todas las demás ubicaciones siguen los precios y el uso de Google Cloud Storage.
4. Haz clic en Iniciar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
   En los próximos pasos de este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app públicamente sin agregar reglas de seguridad para tu bucket de almacenamiento.
5. Haz clic en Crear.

Configura reglas de seguridad para tu bucket de Storage

Ahora, establecerás las reglas de seguridad necesarias para esta app. Estas reglas solo permiten que los usuarios autenticados publiquen imágenes nuevas, pero permiten que cualquier persona vea la imagen de un elemento de la lista.

1. En la parte superior del panel Almacenamiento, haz clic en la pestaña Reglas.

2. Copia y pega el siguiente conjunto de reglas en el campo de reglas de la pestaña Rules:

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
   
       match /{allPaths=**} {
         allow read, write: if request.auth != null;
       }
   
       match /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
   
     }
   }
   

3. Haz clic en Publicar.

3. Ejecuta la app de muestra

Crea una bifurcación del proyecto de StackBlitz

En este codelab, compilarás e implementarás una app con StackBlitz, un editor en línea que tiene varios flujos de trabajo de Firebase integrados. Stackblitz no requiere la instalación de software ni una cuenta especial de StackBlitz.

StackBlitz te permite compartir proyectos con otras personas. Otras personas que tengan la URL de tu proyecto de StackBlitz pueden ver tu código y crear una bifurcación de tu proyecto, pero no pueden editarlo.

1. Ve a esta URL para obtener el código inicial: https://stackblitz.com/edit/friendlymarket-codelab.
2. En la parte superior de la página de StackBlitz, haz clic en Fork.

Ahora tienes una copia del código inicial como tu propio proyecto de StackBlitz. Como no accediste, tu "cuenta" se llama @anonymous, pero eso está bien. El proyecto tiene un nombre único, junto con una URL única. Todos tus archivos y cambios se guardan en este proyecto de StackBlitz.

Agrega una app web de Firebase al proyecto

1. En StackBlitz, consulta tu archivo src/firebase-config.js. Aquí es donde agregarás el objeto de configuración de Firebase.
2. En Firebase console, navega a la página de descripción general de tu proyecto haciendo clic en Descripción general del proyecto en la parte superior izquierda.
3. En el centro de la página de descripción general de tu proyecto, haz clic en el ícono de Web para crear una nueva app web de Firebase.
4. Registra la app con el sobrenombre Codelab de FriendlyMarket.
5. En este codelab, no marques la casilla junto a Configurar Firebase Hosting para esta app también. En su lugar, usarás el panel de vista previa de StackBlitz.
6. Haz clic en Registrar app.
7. Copia el objeto de configuración de Firebase de tu app en el portapapeles. No copies las etiquetas <script>. Nota: Si necesitas encontrar la configuración más adelante, sigue las instrucciones que se indican aquí.

8. Haz clic en Ir a la consola.

Agrega la configuración de tu proyecto a la app:

1. En StackBlitz, ve al archivo src/firebase-config.js.
2. Pega el fragmento de configuración en el archivo. Después de hacerlo, debería verse de la siguiente manera (pero con los valores de tu propio proyecto en el objeto de configuración):

¿Cuál es el punto de partida de esta app?

Observa la vista previa interactiva en el lado derecho de la pantalla de StackBlitz:

En este codelab, comenzarás con el código de una app de mercado básica. Cualquier usuario puede ver una lista de artículos a la venta y hacer clic en un vínculo para ver la página de detalles de un artículo. Si un usuario inició sesión, verá la información de contacto del vendedor para poder negociar un precio y comprar el artículo.

Prueba la app:

1. Accede con el botón que se encuentra en la parte superior de la pantalla principal. Puedes usar una dirección de correo electrónico, un nombre y una contraseña falsos.
2. Haz clic en el botón Vender algo en la esquina inferior derecha para crear una ficha.
3. En Título, ingresa Xylophone.
4. En Precio de oferta, ingresa 50.
5. En Descripción del artículo, ingresa lo siguiente: This high quality xylophone can be used to play music.
6. Descarga esta imagen de un xilófono en tu computadora y súbela con el botón IMAGEN DE TU ARTÍCULO.

file_downloadDescargar imagen

7. Después de completar todos los campos y subir una imagen, haz clic en Publicar.
8. Busca tu ficha nueva. Haz clic en el artículo para ver su pantalla de detalles y, luego, expande el panel Información de contacto del vendedor.
9. Regresa a Firebase console. En el panel Database, ahora verás una entrada para el elemento que publicaste en el nodo forsale. En el panel Almacenamiento, también encontrarás la imagen que subiste en la ruta de acceso friendlymarket.

4. Busca e instala una extensión

El problema

Después de realizar una investigación sobre los usuarios de tu app, descubres que la mayoría visita tu sitio desde su smartphone, no desde una computadora de escritorio. Sin embargo, tus estadísticas también muestran que los usuarios de dispositivos móviles tienden a abandonar tu sitio ("deserción") después de unos segundos.

Por curiosidad, pruebas tu sitio con velocidades de conexión móvil. (Obtén información para hacerlo aquí). Las imágenes tardan mucho en cargarse y no se almacenan en caché en el navegador. Ese largo tiempo de carga se produce en cada vista de página.

La solución

Después de leer sobre cómo optimizar las imágenes, decides seguir dos pasos para mejorar el rendimiento de carga de imágenes:

• Comprime las imágenes. Incluso los teléfonos celulares toman imágenes con una resolución mucho más alta de la necesaria para las necesidades de esta app. Reducir el tamaño del archivo acelerará los tiempos de carga sin una disminución notable de la resolución en la app.
• Almacenamiento en caché: De forma predeterminada, los objetos de Cloud Storage tienen encabezados que les indican a los navegadores que no almacenen en caché las imágenes, lo que significa que el navegador de un usuario volverá a descargar la misma imagen una y otra vez. Por suerte, puedes cambiar estos encabezados para permitir la caché. Tanto el SDK de Cloud Storage del cliente como el SDK de Firebase Admin te permiten establecer estos encabezados.

Para comprimir imágenes, deberás limitar la calidad de carga o tener un proceso del servidor que cambie el tamaño de las imágenes. Consideremos las compensaciones:

• Del cliente. Para un proceso del cliente, puedes limitar el tamaño de los archivos de las imágenes subidas. Esto significa que no necesitas escribir ni mantener ninguna lógica de servidor nueva. Sin embargo, también significa que tus vendedores deben descubrir cómo cambiar el tamaño de sus propias imágenes, lo que es una barrera dolorosa y poco intuitiva para crear una ficha nueva.
• Del servidor: Si usas Cloud Functions para Firebase, puedes activar una función que cambie el tamaño de una imagen automáticamente cuando se suba. Esto significa que los vendedores pueden subir el tamaño de imagen que quieran (sin trabajo adicional) y tu función de backend puede cambiar el tamaño de la imagen sin problemas. Incluso hay un ejemplo disponible para esta función.

Parece que la opción del servidor es la mejor. Sin embargo, esta idea aún implica clonar el ejemplo, seguir sus instrucciones de configuración y, luego, implementar la función con Firebase CLI. Cambiar el tamaño de las imágenes parece un caso de uso muy común. ¿No hay una solución más fácil?

Una solución más sencilla

Tienes suerte. Existe una solución más sencilla: Extensiones de Firebase. Revisemos el catálogo de extensiones disponibles en el sitio web de Firebase.

¡Mira eso! Hay una extensión llamada "Resize Images". Parece prometedor.

Usemos esta extensión en tu app.

Cómo instalar una extensión

1. Haz clic en Ver detalles para obtener más información sobre esta extensión. En Qué puedes configurar, la extensión te permite establecer las dimensiones a las que deseas cambiar el tamaño, y hasta puedes establecer el encabezado de caché. ¡Perfecto!
2. Haz clic en el botón Install in console en la página de detalles de la extensión. Se te dirigirá a una página de Firebase console en la que se enumeran todos tus proyectos.
3. Elige el proyecto FriendlyMarket que creaste para este codelab.
4. Sigue las instrucciones en pantalla hasta llegar al paso Configurar extensión. En las instrucciones, se mostrará un resumen básico de la extensión, así como los recursos que creará y los roles de acceso que requerirá.
5. En el campo **Cache-Control** encabezado para imágenes con tamaño modificado, ingresa lo siguiente:

public, max-age=31536000

6. Deja los otros parámetros con sus valores predeterminados.
7. Haz clic en Instalar extensión.

Mientras esperas a que se complete la instalación, haz lo siguiente:

Instalación con la interfaz de línea de comandos de Firebase

Si te sientes más cómodo con las herramientas de línea de comandos, también puedes instalar y administrar las extensiones con Firebase CLI. Solo usa el comando firebase ext, disponible en la versión más reciente de la CLI. Obtén más información aquí.

(Opcional) Obtén más información sobre los encabezados Cache-Control

El valor del encabezado Cache-Control public, max-age=31536000 significa que la imagen se almacenará en caché durante un máximo de 1 año. Para obtener más información sobre el encabezado Cache-Control, consulta esta documentación.

Actualiza el código del cliente

La extensión que instalaste escribe una imagen redimensionada en el mismo bucket que la imagen original. La imagen redimensionada tiene las dimensiones configuradas adjuntas a su nombre de archivo. Por lo tanto, si la ruta de acceso del archivo original se veía como friendlymarket/user1234-car.png, la ruta de acceso del archivo de la imagen con tamaño modificado se verá como friendlymarket/user1234-car_200x200.png.

Actualicemos la app para que recupere las imágenes con el tamaño modificado en lugar de las imágenes de tamaño completo.

1. En StackBlitz, abre el archivo src/firebase-refs.js.
2. Reemplaza la función getImageRef existente por el siguiente código para crear una referencia para la imagen con el tamaño modificado:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

Pruébalo

Como esta extensión detecta cargas de imágenes nuevas, no se cambiará el tamaño de la imagen existente.

Crea una publicación nueva para ver la extensión en acción:

1. Haz clic en Friendly Market en la barra superior de la app para navegar a la pantalla principal.
2. Haz clic en el botón Vender algo en la esquina inferior derecha de la app para crear una ficha.
3. En Título, ingresa Coffee.
4. En Precio de oferta, ingresa 1.
5. En Descripción del artículo, ingresa lo siguiente: Selling one cafe latte. It has foam art in the shape of a bear.
6. Descarga esta imagen de una taza de café en tu computadora y súbela con el botón IMAGEN DE TU ARTÍCULO. file_downloadDescargar imagen
7. Después de completar todos los campos y subir una imagen, haz clic en Publicar. Verás que la ficha de café aparecerá debajo de Xylophone.
8. En el panel Functions de Firebase console, haz clic en la pestaña Logs. Deberías ver registros de la función que muestren que se ejecutó.

9. Ve al panel de Storage para ver la imagen de café original y una versión redimensionada en la ruta de acceso friendlymarket.
10. En el panel de vista previa de StackBlitz, vuelve a cargar la pantalla principal de tu app un par de veces. Deberías notar que la imagen del café se carga mucho más rápido que la del xilófono.

La imagen se carga más rápido en la primera carga de la página porque es más pequeña y, en las actualizaciones de páginas posteriores, se carga desde la caché del navegador en lugar de activar una solicitud de red.

5. Cómo volver a configurar una extensión

El problema

Tu app guarda automáticamente versiones de borrador de la ficha de un vendedor. A los usuarios les gusta esta función, pero tus estadísticas son un poco preocupantes. Tus informes indican que solo se publica alrededor del 10% de los borradores, y el otro 90% solo ocupa espacio en tu base de datos.

La solución

Después de hacer algunos cálculos rápidos, te das cuenta de que solo necesitas guardar alrededor de cinco borradores en un momento determinado.

¿Recuerdas ese catálogo de Extensiones de Firebase? Es posible que ya haya una solución para esta situación. Instalemos la extensión Limit Child Nodes para mantener automáticamente la cantidad de borradores guardados en cinco o menos. La extensión borrará el borrador más antiguo cada vez que se agregue uno nuevo.

1. Haz clic en el botón Instalar en la página de detalles de la extensión.
2. Elige el proyecto de Firebase que usas para tu app web de mercado.
3. Sigue las instrucciones en pantalla hasta llegar al paso Configurar extensión.
4. En Ruta de acceso de Realtime Database, ingresa drafts. Esta es la ruta de acceso en la base de datos donde se guardan los borradores.
5. En Cantidad máxima de nodos que deben conservarse, ingresa 5. Esto significa que se guardarán cinco borradores para cada ficha de artículo y, si se agrega otro, se borrará automáticamente el más antiguo.
6. Haz clic en Instalar extensión.

Mientras esperas a que se complete la instalación, puedes hacer lo siguiente:

Supervisa las extensiones

Cuando instalas una extensión, el proceso crea varias funciones. Te recomendamos que verifiques la frecuencia con la que se ejecutan estas funciones o que veas los registros y las tasas de error. Para obtener información detallada sobre cómo supervisar tu extensión, consulta Administra las extensiones instaladas. Sigue las instrucciones de la documentación para ver las funciones que creó la extensión Resize Images en el paso anterior.

Cómo desinstalar extensiones

Para quitar una extensión de tu proyecto, es posible que te sientas tentado a borrar las funciones individuales que crea una extensión, pero esto puede generar un comportamiento inesperado, ya que una extensión puede crear varias funciones. Obtén más información para desinstalar una extensión en la documentación.

Si desinstalas la extensión, se borrarán todos los recursos (como las funciones de la extensión) y la cuenta de servicio creada para esa instancia de la extensión. Sin embargo, todos los artefactos que cree la extensión (como las imágenes con el tamaño modificado) permanecerán en tu proyecto después de desinstalarla.

Instala varias copias de una extensión en un solo proyecto.

No estás limitado a instalar una sola instancia de una extensión determinada en un proyecto. Si deseas limitar las entradas en otra ruta, puedes instalar otra instancia de esta extensión. Sin embargo, para los fines de este codelab, solo instalarás la extensión una vez.

Vea cómo funciona

1. Asegúrate de haber accedido con la cuenta que usaste para publicar el xilófono o el café con leche.
2. Genera algunos borradores:
3. Haz clic en el botón Vender algo en la esquina inferior derecha de la app.
4. Edita el Título para que diga "Borrador 1".
5. Desplázate hacia abajo hasta la sección Borradores y consulta la cantidad de borradores. Debe haber al menos dos.
6. Haz clic en el botón FRIENDLY MARKET en la barra superior de la app. De esta manera, tendrás un borrador guardado, pero no tendrás que publicarlo.
7. Repite el proceso para “Borrador 2”, “Borrador 3” y así sucesivamente hasta “Borrador 6”.
8. Cuando crees el "Borrador 6", observa que el "Borrador 1" desaparecerá de la sección Borradores.
9. Al igual que lo hiciste con la extensión Resize Images, puedes consultar los registros de las funciones para ver qué funciones se activaron.

Oops, el límite de borradores que se pueden conservar es demasiado pequeño

Tu equipo de asistencia al cliente se comunica contigo y te informa que algunos de tus vendedores más prolíficos se quejan de que se borran sus borradores antes de que puedan publicarlos. Revisas tus cálculos con tu compañero de equipo y te das cuenta de que estabas equivocado en un factor de 10,000.

¿Cómo puedes solucionar este problema? Volvamos a configurar la extensión instalada.

1. En el panel izquierdo de Firebase console, haz clic en Extensiones.
2. En la tarjeta de la extensión instalada, haz clic en Administrar.
3. En la esquina superior derecha, haz clic en Volver a configurar la extensión.
4. Cambia Cantidad máxima de nodos que deben conservarse a 50000.
5. Haz clic en Guardar.

¡Eso es todo lo que tienes que hacer! Mientras se actualiza la extensión, puedes hablar con tu equipo de asistencia al cliente y decirles que ya se está implementando una solución.

6. Borra datos de usuarios automáticamente

El problema

El equipo de asistencia al cliente se volvió a comunicar contigo. Los vendedores que borraron sus cuentas siguen recibiendo correos electrónicos de otros usuarios y están enojados. Estos vendedores esperaban que sus direcciones de correo electrónico se borraran de tus sistemas cuando borraron sus cuentas.

Por ahora, el equipo de asistencia borra manualmente los datos de cada usuario, pero debe haber una forma mejor de hacerlo. Reflexionas sobre ello y consideras escribir tu propio trabajo por lotes que se ejecute periódicamente y borre las direcciones de correo electrónico de las cuentas borradas. Sin embargo, borrar los datos del usuario parece ser un problema bastante común. Es posible que las extensiones de Firebase también puedan ayudar a resolver este problema.

La solución

Configurarás la extensión Borra los datos del usuario para borrar automáticamente el nodo users/uid en la base de datos cuando un usuario borre su cuenta.

1. Haz clic en el botón Instalar en la página de detalles de la extensión.
2. Elige el proyecto de Firebase que usas para tu app web de mercado.
3. Sigue las instrucciones en pantalla hasta llegar al paso Configurar extensión.
4. En Rutas de acceso de Realtime Database, ingresa sellers/{UID}. La parte sellers es el nodo cuyos elementos secundarios contienen direcciones de correo electrónico de los usuarios, y {UID} es un comodín. Con esta configuración, la extensión sabrá que, cuando el usuario con el UID 1234 borre su cuenta, la extensión debe borrar sellers/1234 de la base de datos.
5. Haz clic en Instalar extensión.

Mientras esperas a que se complete la instalación, puedes hacer lo siguiente:

Hablemos de la personalización

En este codelab, viste que las extensiones de Firebase pueden ayudar a resolver casos de uso comunes y que se pueden configurar para adaptarse a las necesidades de tu app.

Sin embargo, las extensiones no pueden resolver todos los problemas, y el problema de la eliminación de datos del usuario es un buen ejemplo de ello. Si bien la extensión Borrar datos del usuario aborda la queja actual de que los correos electrónicos aún están expuestos después de que un usuario borra su cuenta, la extensión no borrará todo. Por ejemplo, la ficha del artículo seguirá disponible, y las imágenes de Cloud Storage también permanecerán. La extensión Borrar datos del usuario nos permite configurar una ruta de Cloud Storage para borrar, pero, como los usuarios pueden subir muchos archivos diferentes con muchos nombres diferentes, no podrás configurar esta extensión para borrar automáticamente estos artefactos. En situaciones como esta, Cloud Functions para Firebase podría ser una mejor opción para que puedas escribir código específico del modelo de datos de tu app.

Extensiones y facturación

Las extensiones de Firebase en sí no tienen costo (solo se te cobra por los recursos subyacentes que utilizas), pero es posible que algunos de los recursos subyacentes que necesita una extensión requieran facturación. Este codelab se diseñó para completarse sin una cuenta de facturación. Sin embargo, configurar un plan Flame o Blaze desbloquea muchas extensiones de Firebase realmente interesantes.

Por ejemplo, puedes acortar URLs, activar correos electrónicos, exportar colecciones a BigQuery y mucho más. Consulta el catálogo completo de extensiones aquí.

Si hay una extensión que te gustaría tener, pero no está disponible en este momento, nos encantaría saber sobre ella. Envía una solicitud de función a Asistencia de Firebase para sugerir una extensión nueva.

Vea cómo funciona

Una vez que se complete la instalación de la extensión, borra un usuario y observa lo que sucede:

1. En Firebase console, ve al panel de Realtime Database.
2. Expande el nodo sellers.
3. La información de cada vendedor se basa en su UID de usuario. Elige el UID de un usuario.
4. En Firebase console, ve al panel de Authentication y busca el UID de ese usuario.
5. Expande el menú que se encuentra a la derecha del UID y selecciona Borrar cuenta.

6. Regresa al panel de Realtime Database. Se perderá la información del vendedor.

7. ¡Felicitaciones!

Si bien no escribiste mucho código en este codelab, agregaste funciones importantes a tu app de mercado.

Aprendiste a descubrir, configurar, instalar y volver a configurar extensiones. Además, aprendiste a supervisar las extensiones instaladas y a desinstalarlas, si es necesario.

Próximos pasos

Consulta algunas de estas otras extensiones:

• Traduce cadenas de texto en Cloud Firestore (se requiere una cuenta de facturación)
• Agrega usuarios nuevos a las listas de direcciones de correo electrónico de Mailchimp (se requiere una cuenta de facturación)
• Acorta URLs (se requiere una cuenta de facturación)

¿Necesitas más código personalizado del servidor?

• Consulta el codelab de Cloud Functions para Firebase

Otros documentos útiles

Administrar extensiones:

• Cómo administrar extensiones con Firebase CLI
• Configura alertas de presupuesto
• Cómo comprobar la frecuencia con la que se ejecuta una extensión instalada
• Cómo actualizar una extensión instalada a una versión nueva
• Cómo desinstalar una extensión

Obtén más información sobre las extensiones:

• Consulta el código fuente y la documentación de cada extensión en GitHub.
• Obtén información sobre los permisos y el acceso que se otorgan a una extensión