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 Marketplace 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.

3b6977f679c67db.png

Qué compilarás

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

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

Qué aprenderás

  • Cómo descubrir extensiones para casos de uso comunes
  • Cómo instalar y configurar una extensión en tu proyecto
  • Cómo mantener (supervisar, actualizar y desinstalar) extensiones en 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.
  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 usarás Analytics en esta aplicación.
  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 aplicaciones web:

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

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

Habilitar acceso con correo electrónico

Aunque la autenticación no es el enfoque de este codelab, es importante tener algún tipo de autenticación en tu app para identificar de manera única a todos los que la usan. Usarás el acceso con correo electrónico.

  1. En el panel izquierdo de Firebase console, haz clic en Desarrollar.
  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, activa el interruptor Habilitar y, luego, haz clic en Guardar.

ed0f449a872f7287.png

Cómo habilitar Realtime Database

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

  1. En la sección Desarrollar del panel izquierdo de Firebase console, haz clic en Base de datos.
  2. Desplázate hacia abajo más allá del panel de Cloud Firestore y haz clic en Crear base de datos en el panel Realtime Database.

cf8de951d2ab2e94.png

  1. Selecciona Iniciar en modo bloqueado y, luego, haz clic en Habilitar.

Establece reglas de seguridad

Ahora, configurarás las reglas de seguridad necesarias para esta app. Estas son algunas reglas de ejemplo básicas para proteger tu app. Estas reglas permiten que cualquier persona vea artículos a la venta, pero estas reglas permiten que solo los usuarios que accedieron a su cuenta realicen otras operaciones de lectura y escritura. No te preocupes por los detalles de estas reglas; solo las copiarás y pegarás para poner tu app en funcionamiento.

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

e233a24a38b37e95.png

  1. 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"
      }
  }
}
  1. Haz clic en Publicar.

Habilite Cloud Storage

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

  1. En la sección Desarrollar del panel izquierdo de Firebase console, haz clic en Almacenamiento.
  2. Haz clic en Comenzar.

889013b9c7b8897c.png

  1. Acepta los valores predeterminados para crear tu bucket de almacenamiento predeterminado (haz clic en Siguiente, mantén la ubicación predeterminada y haz clic en Listo).

Ahora, configurará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 Storage, haz clic en la pestaña Reglas.

e7003646b429500b.png

  1. 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 /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
    
    match /friendlymarket/{ImageId} {
      allow read;
      allow write: if request.auth != null;
    }
    
  }
}
  1. Haz clic en Publicar.

3. Ejecuta la app de muestra

Bifurca el proyecto StackBlitz

En este codelab, crearás y, luego, 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. Las demás personas que tienen la URL de tu proyecto de StackBlitz pueden ver tu código y bifurcar tu proyecto, pero no pueden editar tu proyecto de StackBlitz.

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

22c44cf92ed26208.png

Ahora tienes una copia del código de inicio como tu propio proyecto de StackBlitz. Como no accediste, tu "cuenta" se llama @anonymous, pero no te preocupes. El proyecto tiene un nombre y una URL únicos. 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í agregarás el objeto de configuración de Firebase.
  2. Vuelve a Firebase console y navega a la página de resumen de tu proyecto. Para ello, haz clic en Descripción general del proyecto, en la parte superior izquierda.
  3. En el centro de la página de descripción general del proyecto, haz clic en el ícono web 58d6543a156e56f9.png para crear una nueva app web de Firebase. 88c964177c2bccea.png
  4. Registra la app con el sobrenombre FriendlyMarket Codelab.
  5. En este codelab, no marques la casilla junto a Configurar Firebase Hosting también para esta app, sino que 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 la app en el portapapeles. No copies las etiquetas <script>. Nota: Si necesitas buscar la configuración más adelante, sigue las instrucciones que se indican aquí.

6c0519e8f48a3a6f.png

  1. Haz clic en Ir a la consola.

Agrega la configuración del proyecto a la app:

  1. De regreso 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 propio proyecto en el objeto de configuración):

177602cbe84f873d.png

¿Cuál es el punto de partida para esta aplicación?

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

f3ec800f27fa49b7.png

Este codelab comienza con el código de una app básica de Marketplace. Cualquier usuario puede ver una lista de artículos a la venta y hacer clic en un vínculo para ver su página de detalles. Si un usuario accedió a su cuenta, verá la información de contacto del vendedor para poder negociar el precio y comprar el artículo.

Prueba la app:

  1. Accede con el botón que aparece 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 Asking Price, 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.

  1. Después de completar todos los campos y subir una imagen, haz clic en Publicar.
  2. Busca tu nueva ficha. Haz clic en el elemento para ver la pantalla de detalles y, luego, expande el panel Información de contacto del vendedor.
  3. Regresa a Firebase console. En el panel Database, 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 friendlymarket.

4. Busca e instala una extensión

El problema

Después de investigar un poco sobre tu aplicación, descubres que la mayoría de los usuarios visitan tu sitio desde su smartphone, no desde su computadora de escritorio. Sin embargo, las estadísticas también muestran que los usuarios de dispositivos móviles tienden a abandonar tu sitio ("deserción") después de unos segundos.

Qué curioso, pruebas tu sitio con velocidades de conexión móvil. (obtén información sobre cómo hacerlo aquí). Descubres que las imágenes tardan mucho en cargarse y no se almacenan en caché en el navegador en absoluto. Ese tiempo de carga prolongado se genera en cada vista de página.

La solución

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

  • Comprime las imágenes. Incluso los teléfonos celulares toman imágenes con una resolución mucho más alta que la necesaria para las necesidades de esta aplicación. Reducir el tamaño del archivo acelerará los tiempos de carga sin una disminución notable en la resolución en la aplicación.
  • Almacenamiento en caché. De forma predeterminada, los objetos de Cloud Storage tienen encabezados que les indican a los navegadores que no deben almacenar en caché las imágenes, lo que significa que el navegador del usuario volverá a descargar la misma imagen una y otra vez. Por suerte, 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 configurar estos encabezados.

Para comprimir imágenes, deberás limitar la calidad de carga o contar con un proceso del servidor que cambie el tamaño de las imágenes. Veamos las ventajas y desventajas:

  • Del cliente. Para un proceso del cliente, podrías limitar el tamaño de archivo 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 los vendedores deben descubrir cómo cambiar el tamaño de sus propias imágenes, lo que constituye un obstáculo poco intuitivo y doloroso para crear una ficha nueva.
  • Del servidor. Si usas Cloud Functions para Firebase, puedes activar una función que cambia automáticamente el tamaño de una imagen durante la carga. Esto significa que los vendedores pueden subir el tamaño de imagen que deseen (sin trabajo adicional para ellos) y su función de backend puede cambiar el tamaño de la imagen sin problemas. Incluso hay una muestra disponible para esta función.

Parece que el servidor es la mejor opción. Sin embargo, esta idea implica clonar la muestra, 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 fácil

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

e6bc3874cf23f34f.png

¡Mira eso! Hay una extensión llamada "Cambiar el tamaño de las imágenes". Parece prometedor.

Usemos esta extensión en tu app.

Cómo instalar una extensión

  1. Haz clic en Ver detalles para consultar más información sobre esta extensión. En Qué puedes configurar, la extensión te permite establecer las dimensiones a las que deseas cambiarle el tamaño y, además, puedes establecer el encabezado de la 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 dirigirá a la 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 la extensión. En las instrucciones, se mostrará un resumen básico de la extensión, así como cualquier recurso que se cree y los roles de acceso que requiera.
  5. En el campo **Cache-Control**encabezado para imágenes a las que se les cambió el tamaño, ingresa lo siguiente:

public, max-age=31536000

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

Mientras esperas a que se complete la instalación...

Realiza la instalación mediante 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, que está disponible en la versión más reciente de la CLI. Obtén más información aquí.

(Opcional) Más información sobre los encabezados Cache-Control

El valor public, max-age=31536000 del encabezado Cache-Control indica que la imagen se almacenará en caché por 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 a la que se le cambió el tamaño en el mismo bucket que la imagen original. La imagen redimensionada tiene las dimensiones configuradas en el nombre de archivo. Por lo tanto, si la ruta del archivo original era friendlymarket/user1234-car.png, la ruta de acceso al archivo de la imagen a la que se le cambió el tamaño 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 que cambió de tamaño:
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

Dado que esta extensión detecta las nuevas cargas de imágenes, 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 tu aplicación para navegar a la pantalla principal.
  2. Haz clic en el botón Sell algo en la esquina inferior derecha de la aplicación para crear una ficha.
  3. En Título, ingresa Coffee.
  4. En Asking Price, 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.
  7. Después de completar todos los campos y subir una imagen, haz clic en Publicar. Verás que la ficha del café aparece debajo del xilófono.
  8. En el panel Funciones de Firebase console, haz clic en la pestaña Registros. Deberías ver registros de la función que muestran que se ejecutó.

486d1226be84bb44.png

  1. Ve al panel Almacenamiento para ver la imagen original del café y una versión con el tamaño cambiado en la ruta de acceso friendlymarket.
  2. 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 imagen de xilófono.

La imagen se carga más rápido en la primera página porque es más pequeña y, en la siguiente página, se actualiza 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 en borrador de la ficha de un vendedor. A los usuarios les gusta esta función, pero las estadísticas son un poco preocupantes. Tus informes indican que solo alrededor del 10% de los borradores se publican realmente, y el otro 90% solo ocupa espacio en tu base de datos.

La solución

Después de algunos cálculos al final, te das cuenta de que solo necesitas guardar aproximadamente cinco borradores en cualquier momento.

¿Recuerdas ese catálogo de Extensiones de Firebase? Tal vez ya haya una solución para esta situación. Instalemos la extensión Limitar los nodos secundarios para mantener automáticamente la cantidad de borradores guardados en cinco o menos. La extensión eliminará el borrador más antiguo cada vez que se agregue uno nuevo.

  1. Haz clic en el botón Instalar de la página de detalles de la extensión.
  2. Elige el proyecto de Firebase que usarás para tu aplicación web de Marketplace.
  3. Sigue las instrucciones en pantalla hasta llegar al paso Configurar la extensión.
  4. En Ruta de acceso de Realtime Database, ingresa drafts. Esta es la ruta de acceso de la base de datos en la que se guardan los borradores.
  5. En Cantidad máxima de nodos a conservar, ingresa 5. Esto significa que se guardarán cinco borradores para la ficha de cada elemento y, si se agrega otro, se borrará automáticamente el borrador 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. Te recomendamos verificar con qué frecuencia se ejecutan estas funciones o ver registros y tasas de errores. Para obtener información detallada sobre cómo supervisar tu extensión, consulta Cómo administrar las extensiones instaladas. Sigue las instrucciones en la documentación para ver las funciones creadas por la extensión Cambiar tamaño de imágenes en el paso anterior.

Cómo desinstalar extensiones

Para quitar una extensión de tu proyecto, es posible que quieras borrar las funciones individuales que crea una extensión, pero esto puede provocar un comportamiento inesperado, ya que una extensión puede crear varias funciones. Obtén información para desinstalar una extensión en la documentación.

Cuando desinstalas la extensión, se borran 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, cualquier artefacto creado por la extensión (como las imágenes a las que se les cambió el tamaño) permanecerá en tu proyecto después de que la desinstales.

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 quieres limitar las entradas en otra ruta de acceso, puedes instalar otra instancia de esta extensión. Sin embargo, a los efectos de este codelab, instalarás la extensión solo una vez.

Vea cómo funciona

  1. Asegúrate de haber accedido con la misma cuenta que usaste para publicar el xilófono o el latte
  2. Genera algunos borradores:
  3. Haz clic en el botón Sell 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 versiones. Debería haber al menos dos.
  6. Haz clic en el botón MERCADO ADMITIDO en la barra superior de la aplicación. De esta manera, tendrás un borrador guardado, pero no necesitarás publicarlo.
  7. Repita para "Borrador 2", "Borrador 3", etc., "Borrador 6".
  8. Cuando crees "Borrador 6", observa que el "Borrador 1" desaparece de tu sección Borradores.
  9. Al igual que con la extensión para cambiar el tamaño de las imágenes, puedes consultar los registros de funciones para ver cuáles se activaron.

El límite de borradores que se deben conservar es demasiado bajo

Tu equipo de asistencia al cliente se comunicó contigo y te informa que algunos de tus vendedores más populares se quejan de que se están borrando sus borradores antes de poder publicarlos. Revisas las matemáticas con tu compañero de equipo y te das cuenta de que hubo un error en los cálculos 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 se conservarán a 50000.
  5. Haz clic en Guardar.

¡Y eso es todo lo que tienes que hacer! Durante el tiempo que tarda en actualizarse la extensión, puedes hablar con tu equipo de asistencia al cliente para informarles que ya se está implementando una solución.

6. Borra automáticamente los datos del usuario

El problema

Tu 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 molestos. 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 ha estado eliminando manualmente los datos de cada usuario, pero tiene que haber una mejor manera. Lo analizas y decides 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 un problema bastante común. Tal vez las Extensiones de Firebase también puedan ayudarte a resolver este problema.

La solución

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

  1. Haz clic en el botón Instalar de la página de detalles de la extensión.
  2. Elige el proyecto de Firebase que usarás para tu aplicación web de Marketplace.
  3. Sigue las instrucciones en pantalla hasta llegar al paso Configurar la 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 usuarios, y {UID} es un comodín. Con esta configuración, la extensión sabrá que, cuando el usuario con el UID de 1234 borre su cuenta, la extensión debería 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 sobre la personalización

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

Sin embargo, las extensiones no pueden resolver todos los problemas, y el problema de eliminación de los datos del usuario es un buen ejemplo de ello. Si bien la extensión para borrar datos del usuario soluciona el reclamo actual de que los correos electrónicos continúan expuestos después de que un usuario borra su cuenta, la extensión no borrará todo el contenido. Por ejemplo, la ficha de artículos seguirá disponible, y las imágenes en Cloud Storage seguirán disponibles. La extensión Borrar datos del usuario nos permite configurar una ruta de acceso de Cloud Storage para borrar, pero como los usuarios pueden subir muchos archivos diferentes con muchos nombres distintos, 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, de modo que puedas escribir código específico para el 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 uses), pero es posible que algunos de los recursos subyacentes que necesite 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 las URLs, activar el correo electrónico, exportar colecciones a BigQuery y mucho más. Consulta el catálogo de extensiones completo aquí.

Si quieres agregar una extensión que no está disponible en este momento, nos gustaría que nos informes al respecto. 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 finalizada la instalación de tu 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 está incluida en su UID de usuario. Elige el UID de un usuario.
  4. En Firebase console, ve al panel Authentication y busca el UID de ese usuario.
  5. Expande el menú a la derecha del UID y selecciona Delete Account.

2e03923c9d7f1f29.png

  1. Regresa al panel de Realtime Database. La información del vendedor ya no estará disponible.

7. ¡Felicitaciones!

Aunque no escribiste mucho código en este codelab, agregaste funciones importantes a tu app de Marketplace.

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

¿Qué sigue?

Mira algunas de estas otras extensiones:

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

Otros documentos útiles

Cómo administrar extensiones:

Conoce los detalles más específicos sobre las extensiones:

  • Consulta el código fuente y los documentos de cada extensión en GitHub
  • Obtén información sobre los permisos y accesos otorgados a una extensión