Agregue nuevas funciones a su aplicación web rápidamente con Firebase Extensions

1. Introducción

Objetivos

En este codelab, agregará funcionalidad a una aplicación de mercado en línea con la ayuda de Firebase Extensions . A través de este codelab, comprenderá cómo las extensiones pueden ayudarlo a dedicar menos tiempo a tareas de administración y desarrollo de aplicaciones.

3b6977f679c67db.png

lo que construirás

En este codelab, agregará las siguientes características a una aplicación web de mercado en línea:

  • Cargue imágenes más rápido para aumentar la retención de usuarios
  • Limite las entradas en su base de datos para mejorar el rendimiento y reducir su factura
  • Implementar la eliminación automática de datos de usuario antiguos para mejorar la protección de los datos del usuario.

lo que 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 (monitorear, actualizar y desinstalar) extensiones en su proyecto

Este codelab se centra 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 .

Lo que necesitarás

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

2. Crea y configura un proyecto de Firebase

Crear un proyecto de Firebase

  1. En Firebase console , haz clic en Agregar proyecto y asigna al proyecto de Firebase el nombre FriendlyMarket .
  2. Haga clic en las opciones de creación de proyectos. Acepta los términos de Firebase. Omita la configuración de Google Analytics, ya que no utilizará Analytics en esta aplicación.
  3. Espere a que se aprovisione el proyecto y luego haga clic en Continuar .

La aplicación que crearás utiliza algunos productos de Firebase disponibles para aplicaciones web:

  • Autenticación de Firebase para identificar fácilmente a sus usuarios
  • Firebase Realtime Database para guardar datos estructurados en la nube y recibir notificaciones instantáneas cuando los datos se actualizan
  • Cloud Storage para Firebase para guardar imágenes en la nube

Ahora habilitará y configurará esos productos de Firebase mediante Firebase console.

Habilitar inicio de sesión por correo electrónico

Aunque la autenticación no es el objetivo de este codelab, es importante tener alguna forma de autenticación en su aplicación para identificar de forma única a todos los que la usan. Utilizará el inicio de sesión por correo electrónico.

  1. En Firebase console, haz clic en Desarrollar en el panel izquierdo.
  2. Haga clic en Autenticación y luego haga clic en la pestaña Método de inicio de sesión (o haga clic aquí para ir directamente a la pestaña Método de inicio de sesión ).
  3. Haga clic en Correo electrónico/Contraseña en la lista de proveedores de inicio de sesión , configure el interruptor Habilitar en la posición activado y luego haga clic en Guardar .

ed0f449a872f7287.png

Habilitar base de datos en tiempo real

La aplicación utiliza Firebase Realtime Database para guardar artículos para la venta.

  1. En la sección Desarrollar en el panel izquierdo de Firebase console, haga clic en Base de datos .
  2. Desplácese hacia abajo en la página, pase el panel Cloud Firestore y haga clic en Crear base de datos en el panel Realtime Database .

cf8de951d2ab2e94.png

  1. Seleccione Iniciar en modo bloqueado y luego haga clic en Habilitar .

Establecer reglas de seguridad

Ahora, establecerá las reglas de seguridad necesarias para esta aplicación. Estos son algunos ejemplos de reglas básicas para ayudar a proteger su aplicación. Estas reglas permiten que cualquiera pueda ver los artículos a la venta, pero solo permiten a los usuarios que hayan iniciado sesión realizar otras lecturas y escrituras. No se preocupe por los detalles de estas reglas; simplemente los copiará y pegará para que su aplicación esté en funcionamiento.

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

e233a24a38b37e95.png

  1. Copie y pegue la siguiente regla establecida en el campo de reglas en 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. Haga clic en Publicar .

Habilitar almacenamiento en la nube

La aplicación utiliza Cloud Storage para Firebase para guardar imágenes de artículos a la venta.

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

889013b9c7b8897c.png

  1. Acepte los valores predeterminados para crear su depósito de almacenamiento predeterminado (haga clic en Siguiente , mantenga la ubicación predeterminada y haga clic en Listo ).

Ahora, establecerá las reglas de seguridad necesarias para esta aplicación. Estas reglas solo permiten a los usuarios autenticados publicar nuevas imágenes, pero permiten que cualquiera vea la imagen de un elemento listado.

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

e7003646b429500b.png

  1. Copie y pegue la siguiente regla establecida en el campo de reglas en 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. Haga clic en Publicar .

3. Ejecute la aplicación de muestra

Bifurca el proyecto StackBlitz

En este codelab, crearás e implementarás una aplicación usando 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 otros. Otras personas que tienen la URL de su proyecto StackBlitz pueden ver su código y bifurcar su proyecto, pero no pueden editar su proyecto StackBlitz.

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

22c44cf92ed26208.png

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

Agregar una aplicación web de Firebase al proyecto

  1. En StackBlitz, vea su archivo src/firebase-config.js . Aquí es donde agregarás el objeto de configuración de Firebase.
  2. De vuelta 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 su proyecto, haga clic en el ícono web 58d6543a156e56f9.png para crear una nueva aplicación web de Firebase. 88c964177c2bccea.png
  4. Registre la aplicación con el apodo FriendlyMarket Codelab .
  5. Para este codelab, no marques la casilla junto a Configurar también Firebase Hosting para esta aplicación . En su lugar, utilizará el panel de vista previa de StackBlitz.
  6. Haga clic en Registrar aplicación .
  7. Copie el objeto de configuración de Firebase de su aplicación en su portapapeles. No copie las etiquetas <script> . Nota: Si necesita encontrar la configuración más adelante, siga las instrucciones aquí .

6c0519e8f48a3a6f.png

  1. Haga clic en Continuar a la consola .

Agregue la configuración de su proyecto a su aplicación:

  1. De vuelta en StackBlitz, vaya al archivo src/firebase-config.js .
  2. Pegue su fragmento de configuración en el archivo. Después de hacerlo, debería verse así (pero con los valores de su propio proyecto en el objeto de configuración):

177602cbe84f873d.png

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

Eche un vistazo a la vista previa interactiva en el lado derecho de la pantalla StackBlitz:

f3ec800f27fa49b7.png

Este codelab comienza con el código de una aplicación de mercado básica. Cualquier usuario puede ver una lista de artículos a la venta y hacer clic en un enlace para ver la página de detalles de un artículo. Si un usuario inicia sesión, verá la información de contacto del vendedor para poder negociar un precio y comprar el artículo.

Prueba la aplicación:

  1. Inicia sesión con el botón en la parte superior de la pantalla de inicio. Puede utilizar una dirección de correo electrónico, un nombre y una contraseña falsos.
  2. Haga clic en el botón Vender algo en la esquina inferior derecha para crear un anuncio.
  3. Para Título , ingrese Xylophone .
  4. Para precio de venta , ingrese 50 .
  5. En Descripción del artículo , ingrese lo siguiente: This high quality xylophone can be used to play music.
  6. Descarga esta imagen de un xilófono a tu computadora y súbela con el botón IMAGEN DE TU ARTÍCULO .

  1. Después de completar todos los campos y cargar una imagen, haga clic en Publicar .
  2. Encuentra tu nuevo anuncio. Haga clic en su artículo para ver la pantalla de detalles y luego expanda el panel de información de contacto del vendedor .
  3. Vuelve a la consola de Firebase. En el panel de base de datos , ahora verá una entrada para el artículo que publicó en el nodo forsale . En el panel de Almacenamiento , también encontrarás la imagen que subiste en la ruta friendlymarket .

4. Busque e instale una extensión.

El problema

Después de investigar un poco sobre los usuarios de su aplicación, descubre que la mayoría de los usuarios visitan su sitio desde su teléfono inteligente, no desde su escritorio. Sin embargo, sus estadísticas también muestran que los usuarios de dispositivos móviles tienden a abandonar su sitio ("abandono") después de unos pocos segundos.

Curioso, pruebas tu sitio con velocidades de conexión móvil. (Aprenda cómo hacerlo aquí ). Observa que 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 imágenes , decide seguir dos pasos para mejorar el rendimiento de carga de imágenes:

  • Comprimir imágenes. Incluso los teléfonos móviles toman imágenes con una resolución mucho mayor de la necesaria para las necesidades de esta aplicación. Reducir el tamaño del archivo acelerará los tiempos de carga sin una caída notable en la resolución de la aplicación.
  • Almacenamiento en caché . De forma predeterminada, los objetos de Cloud Storage tienen encabezados que indican a los navegadores que no almacenen imágenes en caché, 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 lado del cliente como el SDK de Firebase Admin te permiten configurar estos encabezados.

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

  • Lado del cliente . Para un proceso del lado del cliente, puede simplemente limitar el tamaño del archivo de las imágenes cargadas. Esto significa que no necesita escribir ni mantener ninguna lógica de servidor nueva. Sin embargo, también significa que sus vendedores deben descubrir cómo cambiar el tamaño de sus propias imágenes, lo cual es una barrera dolorosa y poco intuitiva para crear un nuevo listado.
  • Lado del servidor . Si usa Cloud Functions para Firebase, puede activar una función que cambia automáticamente el tamaño de una imagen al cargarla. Esto significa que los vendedores pueden cargar cualquier 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 lado del servidor es el camino a seguir. Pero esta idea aún 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. Hay 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 tamaño de imágenes". Eso parece prometedor.

¡Usemos esta extensión en tu aplicación!

Instalar una extensión

  1. Haga clic en Ver detalles para ver 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 e incluso puedes configurar el encabezado de la caché. ¡Perfecto!
  2. Haga clic en el botón Instalar en consola en la página de detalles de la extensión . Serás llevado a una página de la consola de Firebase que enumera todos tus proyectos.
  3. Elija el proyecto FriendlyMarket que creó para este codelab.
  4. Siga las instrucciones en pantalla hasta llegar 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 , ingrese lo siguiente:

public, max-age=31536000

  1. Deje los demás parámetros en sus valores predeterminados.
  2. Haga clic en Instalar extensión .

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

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

Si se siente más cómodo con las herramientas de línea de comandos, ¡las extensiones también se pueden instalar y administrar usando Firebase CLI! Simplemente use el comando firebase ext , disponible en la última versión de la CLI. Puede encontrar más información aquí .

(Opcional) Obtenga más información sobre los encabezados de Cache-Control

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

Actualizar código de cliente

La extensión que instaló escribe una imagen redimensionada en el mismo depósito que la imagen original. La imagen redimensionada tiene las dimensiones configuradas adjuntas a su nombre de archivo. Entonces, si la ruta del archivo original se veía como friendlymarket/user1234-car.png , la ruta del archivo de la imagen redimensionada se vería como friendlymarket/user1234-car_200x200.png .

Actualicemos la aplicación para que obtenga las imágenes redimensionadas en lugar de las imágenes de tamaño completo.

  1. En StackBlitz, abra el archivo src/firebase-refs.js .
  2. Reemplace la función getImageRef existente con 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

Dado que esta extensión vigila la carga de nuevas imágenes, no se cambiará el tamaño de la imagen existente.

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

  1. Haga clic en Friendly Market en la barra superior de su aplicación para navegar a la pantalla de inicio.
  2. Haga clic en el botón Vender algo en la esquina inferior derecha de la aplicación para crear un listado.
  3. Para Título , ingrese Coffee
  4. Para precio de venta , ingrese 1
  5. En Descripción del artículo , ingrese 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é a tu computadora y súbela con el botón IMAGEN DE TU ARTÍCULO .
  7. Después de completar todos los campos y cargar una imagen, haga clic en Publicar . ¡Verás que aparece la lista de café debajo del xilófono!
  8. En el panel de Funciones de Firebase console, haz clic en la pestaña Registros . Debería ver registros de la función que muestren que se ejecutó.

486d1226be84bb44.png

  1. Vaya al panel de Almacenamiento para ver la imagen del café original y una versión redimensionada en la ruta friendlymarket .
  2. En el panel de vista previa de StackBlitz, recarga la pantalla de inicio de tu aplicación un par de veces. Deberías notar que la imagen del café se carga significativamente más rápido que la imagen del xilófono.

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

5. Reconfigurar una extensión

El problema

Su aplicación guarda automáticamente versiones preliminares del listado de un vendedor. A tus usuarios les gusta esta función, pero tus estadísticas son un poco preocupantes. Sus informes dicen que sólo alrededor del 10% de los borradores se publican y el otro 90% simplemente ocupa espacio en su base de datos.

La solución

Después de algunos cálculos minuciosos, se da cuenta de que sólo necesita guardar unos cinco borradores en un momento dado.

¿Recuerdas ese catálogo de Extensiones de Firebase? Quizás ya exista una solución para esta situación. Instalemos la extensión Limitar 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 un borrador nuevo.

  1. Haga clic en el botón Instalar en la página de detalles de la extensión .
  2. Elija el proyecto de Firebase que está utilizando para su aplicación web de mercado.
  3. Siga las instrucciones en pantalla hasta llegar al paso Configurar extensión .
  4. Para Ruta de la base de datos en tiempo real , ingrese drafts . Esta es la ruta en la base de datos donde se guardan los borradores.
  5. En Recuento máximo de nodos a conservar , ingrese 5 . Esto significa que se guardarán cinco borradores para el listado de cada artículo y, si se agrega otro, el borrador más antiguo se eliminará automáticamente.
  6. Haga clic en Instalar extensión .

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

Extensiones de seguimiento

Cuando instalas una extensión, el proceso crea varias funciones. Es posible que desee comprobar con qué frecuencia se ejecutan estas funciones o ver registros y tasas de error. Para obtener información detallada sobre cómo monitorear su extensión, consulte Administrar extensiones instaladas . Siga las instrucciones de la documentación para ver las funciones creadas por la extensión Resize Images en el paso anterior.

Desinstalar extensiones

Para eliminar una extensión de su proyecto, es posible que tenga la tentación de eliminar las funciones individuales que crea una extensión, pero esto puede provocar un comportamiento inesperado, ya que una extensión puede crear varias funciones. Aprenda cómo desinstalar una extensión en la documentación.

La desinstalación elimina todos los recursos (como funciones para 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 redimensionadas) permanecerá en su proyecto después de desinstalar la extensión.

Instalar varias copias de una extensión en un solo proyecto

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

Véalo en acción

  1. Asegúrate de haber iniciado sesión con la cuenta que utilizaste para publicar el xilófono o el café con leche.
  2. Genera algunos borradores:
  3. Haga clic en el botón Vender algo en la esquina inferior derecha de la aplicación.
  4. Edite el título para que diga "Borrador 1".
  5. Desplácese hacia abajo hasta la sección Borradores y vea la cantidad de borradores. Debería haber al menos dos.
  6. Haga clic en el botón MERCADO AMIGABLE en la barra superior de la aplicación. De esta manera, tendrás un borrador guardado pero no necesitarás publicarlo.
  7. Repita lo mismo para el "Borrador 2", el "Borrador 3" y así sucesivamente hasta el "Borrador 6".
  8. Cuando creas el "Borrador 6", observa que el "Borrador 1 desaparece de tu sección Borradores .
  9. Como hizo con la extensión Resize Images, puede consultar los registros de funciones para ver qué funciones se activaron.

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

Su equipo de atención al cliente se comunica con usted y le informa que algunos de sus vendedores más prolíficos se quejan de que sus borradores se eliminan antes de que puedan publicarlos. ¡Compruebas tus cálculos con tu compañero de equipo y te das cuenta de que tus cálculos estaban equivocados en un factor de 10,000!

¿Como puedes arreglar esto? ¡Reconfiguremos 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, haga clic en Administrar .
  3. En la esquina superior derecha, haz clic en Reconfigurar extensión .
  4. Cambie el recuento máximo de nodos para mantenerlo en 50000 .
  5. Clic en Guardar .

¡Y eso es todo lo que necesitas hacer! En el tiempo que tarda la extensión en actualizarse, puede hablar con su equipo de soporte e informarles que ya se está implementando una solución.

6. Eliminar automáticamente los datos del usuario.

El problema

Su equipo de atención al cliente se ha puesto en contacto con usted nuevamente. Los vendedores que eliminaron 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 eliminaran de sus sistemas cuando eliminaron sus cuentas.

Por ahora, el soporte ha estado eliminando manualmente los datos de cada usuario, ¡pero tiene que haber una manera mejor! Lo piensa y considera escribir su propio trabajo por lotes que se ejecute periódicamente y borre las direcciones de correo electrónico de las cuentas eliminadas. Pero eliminar datos de usuario parece un problema bastante común. Quizás Firebase Extensions también pueda ayudar a resolver este problema.

La solución

Configurará la extensión Eliminar datos de usuario para eliminar automáticamente los users/uid en la base de datos cuando un usuario elimina su cuenta.

  1. Haga clic en el botón Instalar en la página de detalles de la extensión .
  2. Elija el proyecto de Firebase que está utilizando para su aplicación web de mercado.
  3. Siga las instrucciones en pantalla hasta llegar al paso Configurar extensión .
  4. Para rutas de bases de datos en tiempo real , ingrese sellers/{UID} . La parte sellers es el nodo cuyos hijos 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 elimine su cuenta, la extensión deberá eliminar sellers/1234 de la base de datos.
  5. Haga clic en Instalar extensión .

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

Hablemos de personalización

En este codelab, vio que Firebase Extensions puede ayudar a resolver casos de uso comunes y que las extensiones se pueden configurar para adaptarse a las necesidades de su aplicación.

Sin embargo, las extensiones no pueden resolver todos los problemas y la cuestión de la eliminación de datos del usuario es un buen ejemplo de ello. Aunque la extensión Eliminar datos de usuario aborda la queja actual de que los correos electrónicos siguen expuestos después de que un usuario elimina su cuenta, la extensión no eliminará todo. Por ejemplo, la lista de artículos todavía está disponible y las imágenes en Cloud Storage también permanecerán. La extensión Eliminar datos de usuario nos permite configurar una ruta de Cloud Storage para eliminar, pero dado que los usuarios pueden cargar muchos archivos diferentes con muchos nombres diferentes, no podrá configurar esta extensión para eliminar automáticamente estos artefactos. Para situaciones como esta, Cloud Functions para Firebase podría ser una mejor opción para que puedas escribir código específico para el modelo de datos de tu aplicación.

Extensiones y facturación

Las extensiones de Firebase en sí no tienen costo de uso (solo se le cobra por los recursos subyacentes que utiliza), pero algunos de los recursos subyacentes que necesita una extensión pueden requerir facturación. Este codelab fue diseñado 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 URL , 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 le gustaría tener, pero no está disponible en este momento, ¡nos encantaría saberlo! Presente una solicitud de función al soporte de Firebase para sugerir una nueva extensión.

Véalo en acción

Una vez completada la instalación de su extensión, elimine un usuario y vea qué sucede:

  1. En Firebase console, dirígete al panel de Realtime Database .
  2. Expande el nodo sellers .
  3. La información de cada vendedor está ingresada en su UID de usuario. Elija el UID de un usuario.
  4. En Firebase console, dirígete a tu panel de Autenticación y busca ese UID de usuario.
  5. Expanda el menú a la derecha del UID y seleccione Eliminar cuenta .

2e03923c9d7f1f29.png

  1. Vuelva a su panel de base de datos en tiempo real . ¡La información del vendedor desaparecerá!

7. ¡Felicitaciones!

Aunque no escribiste mucho código en este codelab, agregaste características importantes a tu aplicación de mercado.

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

¿Que sigue?

Consulte algunas de estas otras extensiones:

¿Necesita más código personalizado del lado del servidor?

Otros documentos útiles

Administrar extensiones:

Conociendo los detalles más finos sobre las extensiones: