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. A través de 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 en tu base de datos para mejorar el rendimiento y reducir tu factura
• Implementa el borrado automático de datos de usuarios antiguos para mejorar la protección de los datos de los usuarios

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 en tu proyecto

Este codelab se enfoca en las extensiones de Firebase. Para obtener información detallada sobre otros productos de Firebase mencionados 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. Accede a la consola de Firebase con tu Cuenta de Google.
2. Haz clic en el botón para crear un proyecto nuevo y, luego, ingresa un nombre (por ejemplo, FriendlyMarket).
   
3. Haz clic en Continuar.
4. Si se te solicita, revisa y acepta las Condiciones de Firebase y, luego, haz clic en Continuar.
5. (Opcional) Habilita la asistencia de IA en Firebase console (llamada "Gemini en Firebase").
6. Para este codelab, no necesitas Google Analytics, por lo que debes desactivar la opción de Google Analytics.
7. Haz clic en Crear proyecto, espera a que se aprovisione y, luego, haz clic en Continuar.

La aplicación que compilarás usa algunos productos de Firebase disponibles para aplicaciones 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 completar la actualización.

Habilita el acceso con 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 única a todos los que la usan. Usarás el acceso con correo electrónico.

1. En Firebase console, haz clic en Develop 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. En la lista Proveedores de acceso, haz clic en Correo electrónico/contraseña, 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 en venta.

1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Realtime Database.
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 cercana a tus usuarios.
4. Haz clic en Comenzar 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 de forma pública sin agregar reglas de seguridad para tu base de datos.
5. Haz clic en Crear.

Configura reglas de seguridad para tu base de datos

Ahora, establecerás las reglas de seguridad necesarias para esta app. Estos son algunos ejemplos de reglas básicas para ayudar a proteger tu app. Estas reglas permiten que cualquier persona vea los artículos en venta, pero solo permiten que los usuarios que accedieron a su cuenta realicen otras lecturas y escrituras. No te preocupes por los detalles de estas reglas; solo las copiarás y pegarás para que tu app se ejecute.

1. En la parte superior del panel de Realtime Database, 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 Reglas:

   {
     "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 en 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 Storage.
2. Haz clic en Comenzar.
3. Selecciona una ubicación para tu bucket de Storage predeterminado.
   Los buckets en US-WEST1, US-CENTRAL1 y US-EAST1 pueden aprovechar el nivel “Siempre gratuito” para 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 Comenzar 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 de forma pública sin agregar reglas de seguridad para tu bucket de Storage.
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 Reglas:

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       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 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 no hay problema. El proyecto tiene un nombre único y 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. De vuelta en Firebase console, haz clic en Project Overview en la esquina superior izquierda para navegar a la página de descripción general de tu proyecto.
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 aplicación web de Firebase.
4. Registra la app con el apodo FriendlyMarket Codelab.
5. Para este codelab, no marques la casilla junto a Also set up Firebase Hosting for this app. 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 tu app:

1. De vuelta 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 así (pero con los valores de tu 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:

Este codelab comienza con el código de una app básica de mercado. 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 accedió a su cuenta, verá la información de contacto del vendedor para que pueda 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 publicación.
3. En Título, ingresa Xylophone.
4. En Precio de venta, 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 FOTO DEL 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 la 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 de Almacenamiento, también encontrarás la imagen que subiste en la ruta de acceso friendlymarket.

4. Cómo buscar e instalar una extensión

El problema

Después de realizar una investigación de usuarios para tu app, descubres que la mayoría de los usuarios visitan tu sitio desde sus smartphones, no desde sus computadoras de escritorio. Sin embargo, tus estadísticas también muestran que los usuarios de dispositivos móviles tienden a abandonar tu sitio ("churn") después de solo unos segundos.

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

La solución

Después de leer sobre cómo optimizar 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. Afortunadamente, puedes cambiar estos encabezados para permitir el almacenamiento en 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 ventajas y desventajas:

• Del cliente. En el caso de un proceso del cliente, podrías 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 representa 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 automáticamente el tamaño de una imagen cuando se suba. Esto significa que los vendedores pueden subir imágenes del tamaño 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 mejor opción es el servidor, pero 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 sencilla?

Una solución más sencilla

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

¡Miren 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 Instalar en la consola en la página de detalles de la extensión. Se te redireccionará 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 que llegues al paso Configurar extensión. Las instrucciones mostrarán un resumen básico de la extensión, así como los recursos que creará y los roles de acceso que requiere.
5. En el campo **Cache-Control** encabezado para imágenes redimensionadas, ingresa lo siguiente:

public, max-age=31536000

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

Mientras esperas a que se complete la instalación…

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 extensiones con Firebase CLI. Solo tienes que usar 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 agregadas a su nombre de archivo. Por lo tanto, si la ruta de acceso original del archivo era friendlymarket/user1234-car.png, la ruta de acceso del archivo de la imagen redimensionada será friendlymarket/user1234-car_200x200.png.

Actualicemos la app para que recupere las imágenes redimensionadas 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 redimensionada:

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 supervisa las 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 publicación.
3. En Título, ingresa Coffee.
4. En Precio de venta, 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 FOTO DEL ARTÍCULO. file_downloadDescargar imagen
7. Después de completar todos los campos y subir una imagen, haz clic en Publicar. Verás la ficha de café debajo del Xilófono.
8. En el panel de Functions de Firebase console, haz clic en la pestaña Registros. Deberías ver registros de la función que muestren que se ejecutó.

9. Ve al panel de Storage para ver la imagen original del café 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 varias 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 posteriores de la página, se carga desde la caché del navegador en lugar de activar una solicitud de red.

5. Vuelve a configurar una extensión

El problema

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

La solución

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

¿Recuerdas el catálogo de Extensiones de Firebase? Tal vez ya exista 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 que llegues 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 la ficha de cada 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…

Supervisión de extensiones

Cuando instalas una extensión, el proceso crea varias funciones. Es posible que desees verificar con qué frecuencia se ejecutan estas funciones o ver 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 que se creó para esa instancia de la extensión. Sin embargo, todos los artefactos que haya creado la extensión (como las imágenes redimensionadas) permanecerán en tu proyecto después de desinstalarla.

Instalar 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 quisieras limitar las entradas en otra ruta, podrías instalar otra instancia de esta extensión. Sin embargo, para los fines de este codelab, instalarás la extensión solo una vez.

Vea cómo funciona

1. Asegúrate de haber accedido con la cuenta que usaste para publicar el xilófono o el latte.
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 de la app superior. De esta manera, tendrás un borrador guardado, pero no será necesario que lo publiques.
7. Repite el proceso para “Borrador 2”, “Borrador 3”, y así sucesivamente hasta “Borrador 6”.
8. Cuando crees el "Borrador 6", notarás que el "Borrador 1" desaparece de la sección Borradores.
9. Al igual que con la extensión Resize Images, puedes consultar los registros de las funciones para ver qué funciones se activaron.

Vaya, el límite de borradores que se pueden conservar es demasiado bajo

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. Verificas tus cálculos con tu compañero de equipo y te das cuenta de que te equivocaste por 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 La cantidad máxima de nodos que deben conservarse a 50000.
5. Haz clic en Guardar.

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

6. Borra automáticamente los datos del usuario

El problema

Tu equipo de asistencia al cliente se comunicó contigo nuevamente. 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 nuestros sistemas cuando borraran sus cuentas.

Por el momento, el equipo de asistencia borra manualmente los datos de cada usuario, pero debe haber una mejor manera de hacerlo. Lo piensas 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. Quizás las extensiones de Firebase también puedan ayudar a resolver este problema.

La solución

Configurarás la extensión Borrar 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 que llegues 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 del usuario, 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 deberá borrar sellers/1234 de la base de datos.
5. Haz clic en Instalar extensión.

Mientras esperas a que se complete la instalación…

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 satisfacer las necesidades de tu app.

Sin embargo, las extensiones no pueden resolver todos los problemas, y el problema del borrado de datos del usuario es un buen ejemplo de ello. Si bien la extensión Delete User Data aborda el reclamo actual de que los correos electrónicos siguen 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 en Cloud Storage también permanecerán. La extensión Delete User Data 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 que borre automáticamente estos artefactos. Para situaciones como esta, Cloud Functions para Firebase podría ser una mejor opción, ya que te permite escribir código específico para el modelo de datos de tu app.

Extensiones y facturación

Las extensiones de Firebase en sí mismas no tienen costo (solo se te cobran los recursos subyacentes que usas), pero algunos de los recursos subyacentes que necesita una extensión pueden requerir 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 muy 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 que no está disponible en este momento, nos encantaría conocer tu opinión. Envía una solicitud de función al equipo de 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 qué sucede:

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

6. Regresa al panel de Realtime Database. Se borrará 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)
• Acortar 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

Administración de extensiones:

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

Aprende los detalles más específicos 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