Desarrollo local con Firebase Emulator Suite

1. Antes de comenzar

Las herramientas de back-end sin servidor como Cloud Firestore y Cloud Functions son muy fáciles de usar, pero pueden ser difíciles de probar. Firebase Local Emulator Suite le permite ejecutar versiones locales de estos servicios en su máquina de desarrollo para que pueda desarrollar su aplicación de forma rápida y segura.

requisitos previos

• Un editor simple como Visual Studio Code, Atom o Sublime Text
• Node.js 10.0.0 o superior (para instalar Node.js, use nvm , para verificar su versión, ejecute node --version )
• Java 7 o superior (para instalar Java use estas instrucciones , para verificar su versión, ejecute java -version )

que vas a hacer

En este laboratorio de código, ejecutará y depurará una aplicación de compras en línea simple que funciona con varios servicios de Firebase:

• Cloud Firestore: una base de datos NoSQL escalable globalmente, sin servidor, con capacidades en tiempo real.
• Cloud Functions : un código de back-end sin servidor que se ejecuta en respuesta a eventos o solicitudes HTTP.
• Firebase Authentication : un servicio de autenticación administrado que se integra con otros productos de Firebase.
• Firebase Hosting : alojamiento rápido y seguro para aplicaciones web.

Conectará la aplicación a Emulator Suite para habilitar el desarrollo local.

También aprenderá a:

• Cómo conectar su aplicación a Emulator Suite y cómo se conectan los distintos emuladores.
• Cómo funcionan las reglas de seguridad de Firebase y cómo probar las reglas de seguridad de Firestore en un emulador local.
• Cómo escribir una función de Firebase que se active por eventos de Firestore y cómo escribir pruebas de integración que se ejecuten en Emulator Suite.

2. Configurar

Obtener el código fuente

En este laboratorio de programación, comienza con una versión de la muestra de The Fire Store que está casi completa, por lo que lo primero que debe hacer es clonar el código fuente:

$ git clone https://github.com/firebase/emulators-codelab.git

Luego muévase al directorio del laboratorio de programación, donde trabajará durante el resto de este laboratorio de programación:

$ cd emulators-codelab/codelab-initial-state

Ahora, instala las dependencias para que puedas ejecutar el código. Si tiene una conexión a Internet más lenta, esto puede demorar uno o dos minutos:

# Move into the functions directory
$ cd functions

# Install dependencies
$ npm install

# Move back into the previous directory
$ cd ../

Obtenga la CLI de Firebase

Emulator Suite es parte de Firebase CLI (interfaz de línea de comandos) que se puede instalar en su máquina con el siguiente comando:

$ npm install -g firebase-tools

A continuación, confirme que tiene la última versión de la CLI. Este codelab debería funcionar con la versión 9.0.0 o superior, pero las versiones posteriores incluyen más correcciones de errores.

$ firebase --version
9.6.0

Conéctate a tu proyecto de Firebase

Si no tiene un proyecto de Firebase, en la consola de Firebase , cree un nuevo proyecto de Firebase. Tome nota del ID del proyecto que elija, lo necesitará más adelante.

Ahora necesitamos conectar este código a su proyecto de Firebase. Primero ejecute el siguiente comando para iniciar sesión en Firebase CLI:

$ firebase login

A continuación, ejecute el siguiente comando para crear un alias de proyecto. Reemplaza $YOUR_PROJECT_ID con el ID de tu proyecto de Firebase.

$ firebase use $YOUR_PROJECT_ID

¡Ahora estás listo para ejecutar la aplicación!

3. Ejecuta los emuladores

En esta sección, ejecutará la aplicación localmente. Esto significa que es hora de iniciar Emulator Suite.

Inicie los emuladores

Desde dentro del directorio fuente de codelab, ejecute el siguiente comando para iniciar los emuladores:

$ firebase emulators:start --import=./seed

Deberías ver una salida como esta:

$ firebase emulators:start --import=./seed
i  emulators: Starting emulators: auth, functions, firestore, hosting
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: database, pubsub
i  firestore: Importing data from /Users/samstern/Projects/emulators-codelab/codelab-initial-state/seed/firestore_export/firestore_export.overall_export_metadata
i  firestore: Firestore Emulator logging to firestore-debug.log
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://127.0.0.1:5000
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/Users/samstern/Projects/emulators-codelab/codelab-initial-state/functions" for Cloud Functions...
✔  functions[calculateCart]: firestore function initialized.

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://127.0.0.1:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ 127.0.0.1:5000 │ n/a                             │
└────────────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at 127.0.0.1:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

Una vez que vea el mensaje Todos los emuladores iniciados , la aplicación está lista para usar.

Aparte: ¿Qué acaba de pasar?

• Cada emulador se inició en 127.0.0.1, cada uno se ejecuta en un puerto diferente.
• El emulador de Firestore importó datos del directorio seed , que se proporciona para simplificar este laboratorio de programación.
• El emulador de funciones notó la función calculateCart y notificó al emulador de Firestore.
• El emulador de funciones ahora está observando el directorio functions en busca de cambios en el código.

Conectar la aplicación web a los emuladores

Según la tabla de los registros, podemos ver que el emulador de Cloud Firestore escucha en el puerto 8080 y el emulador de autenticación escucha en el puerto 9099 .

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ 127.0.0.1:5000 │ n/a                             │
└────────────────┴────────────────┴─────────────────────────────────┘

Conectemos su código frontend al emulador, en lugar de a producción. Abra el archivo public/js/homepage.js y busque la función onDocumentReady . Podemos ver que el código accede a las instancias estándar de Firestore y Auth:

público/js/página de inicio.js

  const auth = firebaseApp.auth();
  const db = firebaseApp.firestore();

Actualicemos los objetos db y auth para que apunten a los emuladores locales:

público/js/página de inicio.js

  const auth = firebaseApp.auth();
  const db = firebaseApp.firestore();

  // ADD THESE LINES
  if (location.hostname === "127.0.0.1") {
    console.log("127.0.0.1 detected!");
    auth.useEmulator("http://127.0.0.1:9099");
    db.useEmulator("127.0.0.1", 8080);
  }

Ahora, cuando la aplicación se ejecuta en su máquina local (servida por el emulador de Hosting), el cliente de Firestore también apunta al emulador local en lugar de a una base de datos de producción.

Abre la interfaz de usuario del emulador

En su navegador web, vaya a http://127.0.0.1:4000/ . Debería ver la interfaz de usuario de Emulator Suite.

Haga clic para ver la interfaz de usuario del emulador de Firestore. La colección items ya contiene datos debido a los datos importados con el indicador --import .

4. Ejecute la aplicación

Abre la aplicación

En su navegador web, vaya a http://127.0.0.1:5000 y debería ver The Fire Store ejecutándose localmente en su máquina.

Usa la aplicación

Elija un artículo en la página de inicio y haga clic en Agregar al carrito . Desafortunadamente, se encontrará con el siguiente error:

¡Arreglemos ese error! Debido a que todo se ejecuta en los emuladores, podemos experimentar y no preocuparnos por afectar los datos reales.

5. Depura la aplicación

encuentra el error

Ok, veamos en la consola de desarrolladores de Chrome. Presione Control+Shift+J (Windows, Linux, Chrome OS) o Command+Option+J (Mac) para ver el error en la consola:

Parece que hubo algún error en el método addToCart , echemos un vistazo a eso. ¿Dónde tratamos de acceder a algo llamado uid en ese método y por qué sería null ? En este momento, el método se ve así en public/js/homepage.js :

público/js/página de inicio.js

  addToCart(id, itemData) {
    console.log("addToCart", id, JSON.stringify(itemData));
    return this.db
      .collection("carts")
      .doc(this.auth.currentUser.uid)
      .collection("items")
      .doc(id)
      .set(itemData);
  }

¡Ajá! No estamos registrados en la aplicación. De acuerdo con los documentos de autenticación de Firebase , cuando no iniciamos sesión, auth.currentUser es null . Agreguemos un cheque para eso:

público/js/página de inicio.js

  addToCart(id, itemData) {
    // ADD THESE LINES
    if (this.auth.currentUser === null) {
      this.showError("You must be signed in!");
      return;
    }

    // ...
  }

Prueba la aplicación

Ahora, actualice la página y luego haga clic en Agregar al carrito . Debería obtener un error más agradable esta vez:

Pero si hace clic en Iniciar sesión en la barra de herramientas superior y luego vuelve a hacer clic en Agregar al carrito , verá que el carrito se actualiza.

Nota : para fines de demostración, esta aplicación utiliza exclusivamente autenticación anónima . La autenticación anónima asigna a cada usuario de sesión una ID que los identifica de manera única en el backend. Le permite crear una experiencia de incorporación que no requiere que los usuarios creen una cuenta permanente de inmediato. En las aplicaciones de producción, para guardar los datos de los usuarios entre sesiones y dispositivos, deberá convertir a los usuarios de Autenticación anónima a otro método de inicio de sesión.

Sin embargo, no parece que los números sean correctos en absoluto:

No te preocupes, solucionaremos ese error pronto. Primero, profundicemos en lo que realmente sucedió cuando agregó un artículo a su carrito.

6. Disparadores de funciones locales

Al hacer clic en Agregar al carrito, se inicia una cadena de eventos que involucran múltiples emuladores. En los registros de Firebase CLI, debería ver algo como los siguientes mensajes después de agregar un artículo a su carrito:

i  functions: Beginning execution of "calculateCart"
i  functions: Finished "calculateCart" in ~1s

Hubo cuatro eventos clave que ocurrieron para producir esos registros y la actualización de la interfaz de usuario que observó:

Nota : no necesita actualizar su aplicación con los fragmentos de código a continuación. El código ya está incluido en la aplicación. Los fragmentos de código de esta sección solo se presentan para ayudarlo a comprender los cuatro eventos clave.

1) Escritura de Firestore - Cliente

Se agrega un nuevo documento a la colección de Firestore /carts/{cartId}/items/{itemId}/ . Puede ver este código en la función addToCart dentro de public/js/homepage.js :

público/js/página de inicio.js

  addToCart(id, itemData) {
    // ...
    console.log("addToCart", id, JSON.stringify(itemData));
    return this.db
      .collection("carts")
      .doc(this.auth.currentUser.uid)
      .collection("items")
      .doc(id)
      .set(itemData);
  }

2) Función de nube activada

calculateCart de la función de la nube escucha cualquier evento de escritura (crear, actualizar o eliminar) que suceda con los artículos del carrito mediante el activador onWrite , que puede ver en functions/index.js :

funciones/index.js

exports.calculateCart = functions.firestore
    .document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      try {
        let totalPrice = 125.98;
        let itemCount = 8;

        const cartRef = db.collection("carts").doc(context.params.cartId);

        await cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    }
);

3) Escritura de Firestore - Administrador

La función calculateCart lee todos los artículos en el carrito y suma la cantidad total y el precio, luego actualiza el documento "carrito" con los nuevos totales (ver cartRef.update(...) arriba).

4) Lectura de Firestore - Cliente

La interfaz web está suscrita para recibir actualizaciones sobre los cambios en el carrito. Obtiene una actualización en tiempo real después de que Cloud Function escribe los nuevos totales y actualiza la interfaz de usuario, como puede ver en public/js/homepage.js :

público/js/página de inicio.js

this.cartUnsub = cartRef.onSnapshot(cart => {
   // The cart document was changed, update the UI
   // ...
});

Resumen

¡Buen trabajo! Simplemente configura una aplicación totalmente local que utiliza tres emuladores de Firebase diferentes para realizar pruebas totalmente locales.

¡Pero espera hay mas! En la siguiente sección aprenderá:

• Cómo escribir pruebas unitarias que usan los emuladores de Firebase.
• Cómo usar los emuladores de Firebase para depurar sus reglas de seguridad.

7. Cree reglas de seguridad adaptadas a su aplicación

Nuestra aplicación web lee y escribe datos, pero hasta ahora no nos hemos preocupado en absoluto por la seguridad. Cloud Firestore utiliza un sistema llamado "Reglas de seguridad" para declarar quién tiene acceso para leer y escribir datos. Emulator Suite es una excelente manera de crear un prototipo de estas reglas.

En el editor, abra el archivo emulators-codelab/codelab-initial-state/firestore.rules . Verás que tenemos tres secciones principales en nuestras reglas:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // User's cart metadata
    match /carts/{cartID} {
      // TODO: Change these! Anyone can read or write.
      allow read, write: if true;
    }

    // Items inside the user's cart
    match /carts/{cartID}/items/{itemID} {
      // TODO: Change these! Anyone can read or write.
      allow read, write: if true;
    }

    // All items available in the store. Users can read
    // items but never write them.
    match /items/{itemID} {
      allow read: if true;
    }
  }
}

¡En este momento cualquiera puede leer y escribir datos en nuestra base de datos! Queremos asegurarnos de que solo se realicen operaciones válidas y de no filtrar información confidencial.

Durante este laboratorio de código, siguiendo el principio de privilegio mínimo, bloquearemos todos los documentos y agregaremos acceso gradualmente hasta que todos los usuarios tengan todo el acceso que necesitan, pero no más. Actualicemos las dos primeras reglas para denegar el acceso estableciendo la condición en false :

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // User's cart metadata
    match /carts/{cartID} {
      // UPDATE THIS LINE
      allow read, write: if false;
    }

    // Items inside the user's cart
    match /carts/{cartID}/items/{itemID} {
      // UPDATE THIS LINE
      allow read, write: if false;
    }

    // All items available in the store. Users can read
    // items but never write them.
    match /items/{itemID} {
      allow read: if true;
    }
  }
}

Aparte: ¿Qué pasa si no hay declaraciones de coincidencia para una operación?

• Las reglas niegan por defecto. Si una operación no coincide con ninguna regla definida en el archivo de reglas, se denegará el acceso.
• El modo bloqueado, o modo de producción, convierte esa denegación implícita en una denegación explícita al hacer coincidir todos los documentos y denegar todo acceso.

8. Ejecuta los emuladores y pruebas

Inicie los emuladores

En la línea de comando, asegúrese de estar en emulators-codelab/codelab-initial-state/ . Es posible que aún tenga los emuladores ejecutándose desde los pasos anteriores. Si no, inicia los emuladores de nuevo:

$ firebase emulators:start --import=./seed

Una vez que los emuladores se están ejecutando, puede ejecutar pruebas localmente contra ellos.

Ejecutar las pruebas

En la línea de comando en una nueva pestaña de terminal desde el directorio emulators-codelab/codelab-initial-state/

Primero muévase al directorio de funciones (nos quedaremos aquí por el resto del laboratorio de programación):

$ cd functions

Ahora ejecute las pruebas de mocha en el directorio de funciones y desplácese hasta la parte superior de la salida:

# Run the tests
$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping carts
    1) can be created and updated by the cart owner
    2) can be read only by the cart owner

  shopping cart items
    3) can be read only by the cart owner
    4) can be added only by the cart owner

  adding an item to the cart recalculates the cart total. 
    - should sum the cost of their items


  0 passing (364ms)
  1 pending
  4 failing

Ahora mismo tenemos cuatro fracasos. A medida que crea el archivo de reglas, puede medir el progreso observando cómo pasan más pruebas.

9. Acceso seguro al carro

Las dos primeras fallas son las pruebas del "carrito de compras" que prueban que:

• Los usuarios solo pueden crear y actualizar sus propios carritos
• Los usuarios solo pueden leer sus propios carritos

funciones/prueba.js

  it('can be created and updated by the cart owner', async () => {
    // Alice can create her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart").set({
      ownerUID: "alice",
      total: 0
    }));

    // Bob can't create Alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart").set({
      ownerUID: "alice",
      total: 0
    }));

    // Alice can update her own cart with a new total
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart").update({
      total: 1
    }));

    // Bob can't update Alice's cart with a new total
    await firebase.assertFails(bobDb.doc("carts/alicesCart").update({
      total: 1
    }));
  });

  it("can be read only by the cart owner", async () => {
    // Setup: Create Alice's cart as admin
    await admin.doc("carts/alicesCart").set({
      ownerUID: "alice",
      total: 0
    });

    // Alice can read her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart").get());

    // Bob can't read Alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart").get());
  });

Hagamos que estas pruebas pasen. En el editor, abra el archivo de reglas de seguridad, firestore.rules y actualice las declaraciones dentro de match /carts/{cartID} :

firestore.reglas

rules_version = '2';
service cloud.firestore {
    // UPDATE THESE LINES
    match /carts/{cartID} {
      allow create: if request.auth.uid == request.resource.data.ownerUID;
      allow read, update, delete: if request.auth.uid == resource.data.ownerUID;
    }

    // ...
  }
}

Estas reglas ahora solo permiten acceso de lectura y escritura al propietario del carrito.

Para verificar los datos entrantes y la autenticación del usuario, usamos dos objetos que están disponibles en el contexto de cada regla:

• El objeto request contiene datos y metadatos sobre la operación que se está intentando.
• Si un proyecto de Firebase usa Firebase Authentication , el objeto request.auth describe al usuario que realiza la solicitud.

¿ Cuáles son las diferencias clave entre resource y request.resource ****?

• resource : representa el documento de Firestore en cuestión antes de la solicitud actual. Entonces, para una solicitud de creación , resource.data siempre es null porque el documento aún no existe.
• request.resource : representa el documento de Firestore con los cambios que el usuario desea escribir. Entonces, para una solicitud de creación , request.resource.data contiene el documento propuesto.

10. Prueba de acceso al carro

Emulator Suite actualiza automáticamente las reglas cada vez que se guarda firestore.rules . Puede confirmar que el emulador tiene las reglas actualizadas buscando en la pestaña que ejecuta el emulador el mensaje Rules updated :

Vuelva a ejecutar las pruebas y verifique que las dos primeras pruebas pasen ahora:

$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping carts
    ✓ can be created and updated by the cart owner (195ms)
    ✓ can be read only by the cart owner (136ms)

  shopping cart items
    1) can be read only by the cart owner
    2) can be added only by the cart owner

  adding an item to the cart recalculates the cart total. 
    - should sum the cost of their items

  2 passing (482ms)
  1 pending
  2 failing

¡Buen trabajo! Ahora tiene acceso seguro a los carritos de compras. Pasemos a la siguiente prueba fallida.

11. Verifique el flujo "Agregar al carrito" en la interfaz de usuario

En este momento, aunque los propietarios de carritos leen y escriben en su carrito, no pueden leer ni escribir elementos individuales en su carrito. Esto se debe a que, si bien los propietarios tienen acceso al documento del carrito, no tienen acceso a la subcolección de elementos del carrito.

Aparte: las reglas no caen en cascada sobre las subcolecciones

• De forma predeterminada, las reglas de un documento no se aplican en cascada a los documentos de una subcolección.
• Es común querer reglas ligeramente diferentes para los documentos en una subcolección.
• Si desea que los documentos de una subcolección tengan exactamente las mismas reglas, puede usar la sintaxis glob para hacer coincidir todos los documentos de forma recursiva: match /{cartId=**} (hágalo con cuidado).

Este es un estado roto para los usuarios.

Regrese a la interfaz de usuario web, que se ejecuta en http://127.0.0.1:5000, e intente agregar algo a su carrito. Obtiene un error Permission Denied , visible desde la consola de depuración, porque aún no hemos otorgado a los usuarios acceso a los documentos creados en la subcolección items .

12. Permitir el acceso a los artículos del carrito

Estas dos pruebas confirman que los usuarios solo pueden agregar artículos o leer artículos de su propio carrito:

  it("can be read only by the cart owner", async () => {
    // Alice can read items in her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart/items/milk").get());

    // Bob can't read items in alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart/items/milk").get())
  });

  it("can be added only by the cart owner",  async () => {
    // Alice can add an item to her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart/items/lemon").set({
      name: "lemon",
      price: 0.99
    }));

    // Bob can't add an item to alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart/items/lemon").set({
      name: "lemon",
      price: 0.99
    }));
  });

Entonces, podemos escribir una regla que permita el acceso si el usuario actual tiene el mismo UID que el UID del propietario en el documento del carrito. Dado que no es necesario especificar reglas diferentes para create, update, delete , puede usar una regla write , que se aplica a todas las solicitudes que modifican datos.

Actualice la regla para los documentos en la subcolección de elementos. El get en el condicional está leyendo un valor de Firestore, en este caso, el ownerUID en el documento del carrito.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ...

    // UPDATE THESE LINES
    match /carts/{cartID}/items/{itemID} {
      allow read, write: if get(/databases/$(database)/documents/carts/$(cartID)).data.ownerUID == request.auth.uid;
    }

    // ...
  }
}

Aparte: ¿Cuándo puede usar un recurso o hacer una llamada?

• Puede usar el objeto resource cuando los datos requeridos son parte del documento actual que se está leyendo/escribiendo.
• Si necesita datos fuera del documento actual, use una instrucción get . ¡Tenga en cuenta que estas operaciones cuentan para su factura de Firestore!

13. Probar el acceso a los artículos del carrito

Ahora podemos volver a ejecutar la prueba. Desplácese hasta la parte superior de la salida y verifique que pasen más pruebas:

$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping carts
    ✓ can be created and updated by the cart owner (195ms)
    ✓ can be read only by the cart owner (136ms)

  shopping cart items
    ✓ can be read only by the cart owner (111ms)
    ✓ can be added only by the cart owner


  adding an item to the cart recalculates the cart total. 
    - should sum the cost of their items


  4 passing (401ms)
  1 pending

¡Lindo! Ahora todas nuestras pruebas pasan. Tenemos una prueba pendiente, pero llegaremos a ella en unos pocos pasos.

14. Vuelva a comprobar el flujo "añadir al carrito"

Regrese a la interfaz web ( http://127.0.0.1:5000 ) y agregue un artículo al carrito. Este es un paso importante para confirmar que nuestras pruebas y reglas coinciden con la funcionalidad requerida por el cliente. (¡Recuerde que la última vez que probamos la interfaz de usuario, los usuarios no pudieron agregar artículos a su carrito!)

El cliente recarga automáticamente las reglas cuando se guarda firestore.rules . Por lo tanto, intente agregar algo al carrito.

Resumen

¡Buen trabajo! ¡Acabas de mejorar la seguridad de tu aplicación, un paso esencial para prepararla para la producción! Si se tratara de una aplicación de producción, podríamos agregar estas pruebas a nuestra canalización de integración continua. Esto nos daría confianza en el futuro de que los datos de nuestro carrito de compras tendrán estos controles de acceso, incluso si otros están modificando las reglas.

¡Pero espera hay mas!

si continúas aprenderás:

• Cómo escribir una función activada por un evento de Firestore
• Cómo crear pruebas que funcionen en varios emuladores

15. Configure las pruebas de Cloud Functions

Hasta ahora nos hemos centrado en la interfaz de nuestra aplicación web y las reglas de seguridad de Firestore. Pero esta aplicación también usa Cloud Functions para mantener actualizado el carrito del usuario, por lo que también queremos probar ese código.

Emulator Suite hace que sea muy fácil probar las funciones de la nube, incluso las funciones que usan Cloud Firestore y otros servicios.

En el editor, abra el archivo emulators-codelab/codelab-initial-state/functions/test.js y desplácese hasta la última prueba del archivo. En este momento, está marcado como pendiente:

//  REMOVE .skip FROM THIS LINE
describe.skip("adding an item to the cart recalculates the cart total. ", () => {
  // ...

  it("should sum the cost of their items", async () => {
    ...
  });
});

Para habilitar la prueba, elimine .skip , para que se vea así:

describe("adding an item to the cart recalculates the cart total. ", () => {
  // ...

  it("should sum the cost of their items", async () => {
    ...
  });
});

A continuación, busque la variable REAL_FIREBASE_PROJECT_ID en la parte superior del archivo y cámbiela a su ID de proyecto de Firebase real:

// CHANGE THIS LINE
const REAL_FIREBASE_PROJECT_ID = "changeme";

Si olvidó su ID de proyecto, puede encontrar su ID de proyecto de Firebase en la Configuración del proyecto en Firebase Console:

16. Paseo por las pruebas de funciones

Debido a que esta prueba valida la interacción entre Cloud Firestore y Cloud Functions, implica más configuración que las pruebas en los codelabs anteriores. Analicemos esta prueba y tengamos una idea de lo que espera.

Nota : Los fragmentos de código a continuación están destinados a ayudarlo a leer y comprender el código que ya está escrito. ¡En este paso, no tienes que cambiar la aplicación en absoluto!

crear un carrito

Cloud Functions se ejecuta en un entorno de servidor confiable y puede usar la autenticación de cuenta de servicio que usa el SDK de administrador. Primero, inicializa una aplicación usando initializeAdminApp en lugar de initializeApp . Luego, crea una DocumentReference para el carrito al que agregaremos artículos e inicializa el carrito:

it("should sum the cost of their items", async () => {
    const db = firebase
        .initializeAdminApp({ projectId: REAL_FIREBASE_PROJECT_ID })
        .firestore();

    // Setup: Initialize cart
    const aliceCartRef = db.doc("carts/alice")
    await aliceCartRef.set({ ownerUID: "alice", totalPrice: 0 });

    ...
  });

Activar la función

Luego, agregue documentos a la subcolección items de nuestro documento de carrito para activar la función. Agregue dos elementos para asegurarse de que está probando la suma que ocurre en la función.

it("should sum the cost of their items", async () => {
    const db = firebase
        .initializeAdminApp({ projectId: REAL_FIREBASE_PROJECT_ID })
        .firestore();

    // Setup: Initialize cart
    const aliceCartRef = db.doc("carts/alice")
    await aliceCartRef.set({ ownerUID: "alice", totalPrice: 0 });

    //  Trigger calculateCart by adding items to the cart
    const aliceItemsRef = aliceCartRef.collection("items");
    await aliceItemsRef.doc("doc1").set({name: "nectarine", price: 2.99});
    await aliceItemsRef.doc("doc2").set({ name: "grapefruit", price: 6.99 });

    ...
    });
  });

Establecer expectativas de prueba

Use onSnapshot() para registrar un oyente para cualquier cambio en el documento del carrito. onSnapshot() devuelve una función a la que puede llamar para anular el registro del oyente.

¿Por qué escuchar el documento del carrito en lugar de un documento en la subcolección de artículos?

Aunque la función se activa mediante operaciones de escritura en la subcolección items , la función luego actualiza el documento del carrito. Ese es un efecto secundario de la escritura inicial que queremos probar.

Para esta prueba, agregue dos artículos que juntos cuestan $9.98. Luego, verifique si el carrito tiene el itemCount y totalPrice esperados. Si es así, entonces la función hizo su trabajo.

it("should sum the cost of their items", (done) => {
    const db = firebase
        .initializeAdminApp({ projectId: REAL_FIREBASE_PROJECT_ID })
        .firestore();

    // Setup: Initialize cart
    const aliceCartRef = db.doc("carts/alice")
    aliceCartRef.set({ ownerUID: "alice", totalPrice: 0 });

    //  Trigger calculateCart by adding items to the cart
    const aliceItemsRef = aliceCartRef.collection("items");
    aliceItemsRef.doc("doc1").set({name: "nectarine", price: 2.99});
    aliceItemsRef.doc("doc2").set({ name: "grapefruit", price: 6.99 });
    
    // Listen for every update to the cart. Every time an item is added to
    // the cart's subcollection of items, the function updates `totalPrice`
    // and `itemCount` attributes on the cart.
    // Returns a function that can be called to unsubscribe the listener.
    await new Promise((resolve) => {
      const unsubscribe = aliceCartRef.onSnapshot(snap => {
        // If the function worked, these will be cart's final attributes.
        const expectedCount = 2;
        const expectedTotal = 9.98;
  
        // When the `itemCount`and `totalPrice` match the expectations for the
        // two items added, the promise resolves, and the test passes.
        if (snap.data().itemCount === expectedCount && snap.data().totalPrice == expectedTotal) {
          // Call the function returned by `onSnapshot` to unsubscribe from updates
          unsubscribe();
          resolve();
        };
      });
    });
   });
 });

17. Haz las pruebas

Es posible que aún tenga los emuladores ejecutándose desde las pruebas anteriores. Si no, inicie los emuladores. Desde la línea de comando, ejecute

$ firebase emulators:start --import=./seed

Abra una nueva pestaña de terminal (deje los emuladores ejecutándose) y muévase al directorio de funciones. Es posible que aún tenga esto abierto a partir de las pruebas de reglas de seguridad.

$ cd functions

Ahora ejecute las pruebas unitarias, debería ver 5 pruebas en total:

$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping cart creation
    ✓ can be created by the cart owner (82ms)

  shopping cart reads, updates, and deletes
    ✓ cart can be read by the cart owner (42ms)

  shopping cart items
    ✓ items can be read by the cart owner (40ms)
    ✓ items can be added by the cart owner

  adding an item to the cart recalculates the cart total. 
    1) should sum the cost of their items

  4 passing (2s)
  1 failing

Si observa la falla específica, parece ser un error de tiempo de espera. Esto se debe a que la prueba está esperando que la función se actualice correctamente, pero nunca lo hace. Ahora, estamos listos para escribir la función para satisfacer la prueba.

18. Escribe una función

Para corregir esta prueba, debe actualizar la función en functions/index.js . Aunque parte de esta función está escrita, no está completa. Así es como se ve la función actualmente:

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }

      let totalPrice = 125.98;
      let itemCount = 8;
      try {
        
        const cartRef = db.collection("carts").doc(context.params.cartId);

        await cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    });

La función está configurando correctamente la referencia del carrito, pero luego, en lugar de calcular los valores de totalPrice y itemCount , los actualiza a valores codificados.

Obtener e iterar a través de la

subcolección items

Inicialice una nueva constante, itemsSnap , para que sea la subcolección items . Luego, recorre todos los documentos de la colección.

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }


      try {
        let totalPrice = 125.98;
        let itemCount = 8;

        const cartRef = db.collection("carts").doc(context.params.cartId);
        // ADD LINES FROM HERE
        const itemsSnap = await cartRef.collection("items").get();

        itemsSnap.docs.forEach(item => {
          const itemData = item.data();
        })
        // TO HERE
       
        return cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    });

Calcular precio total y cantidad de artículos

Primero, inicialicemos los valores de totalPrice y itemCount a cero.

Luego, agregue la lógica a nuestro bloque de iteración. Primero, verifique que el artículo tenga un precio. Si el artículo no tiene una cantidad especificada, déjelo por defecto en 1 . Luego, agregue la cantidad al total acumulado de itemCount . Finalmente, agregue el precio del artículo multiplicado por la cantidad al total acumulado de totalPrice :

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }

      try {
        // CHANGE THESE LINES
        let totalPrice = 0;
        let itemCount = 0;

        const cartRef = db.collection("carts").doc(context.params.cartId);
        const itemsSnap = await cartRef.collection("items").get();

        itemsSnap.docs.forEach(item => {
          const itemData = item.data();
          // ADD LINES FROM HERE
          if (itemData.price) {
            // If not specified, the quantity is 1
            const quantity = itemData.quantity ? itemData.quantity : 1;
            itemCount += quantity;
            totalPrice += (itemData.price * quantity);
          }
          // TO HERE
        })

        await cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    });

También puede agregar el registro para ayudar a depurar los estados de éxito y error:

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }

      let totalPrice = 0;
      let itemCount = 0;
      try {
        const cartRef = db.collection("carts").doc(context.params.cartId);
        const itemsSnap = await cartRef.collection("items").get();

        itemsSnap.docs.forEach(item => {
          const itemData = item.data();
          if (itemData.price) {
            // If not specified, the quantity is 1
            const quantity = (itemData.quantity) ? itemData.quantity : 1;
            itemCount += quantity;
            totalPrice += (itemData.price * quantity);
          }
        });

        await cartRef.update({
          totalPrice,
          itemCount
        });

        // OPTIONAL LOGGING HERE
        console.log("Cart total successfully recalculated: ", totalPrice);
      } catch(err) {
        // OPTIONAL LOGGING HERE
        console.warn("update error", err);
      }
    });

19. Vuelva a ejecutar las pruebas

En la línea de comando, asegúrese de que los emuladores aún se estén ejecutando y vuelva a ejecutar las pruebas. No necesita reiniciar los emuladores porque detectan los cambios en las funciones automáticamente. Deberías ver todas las pruebas pasar:

$ npm test
> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping cart creation
    ✓ can be created by the cart owner (306ms)

  shopping cart reads, updates, and deletes
    ✓ cart can be read by the cart owner (59ms)

  shopping cart items
    ✓ items can be read by the cart owner
    ✓ items can be added by the cart owner

  adding an item to the cart recalculates the cart total. 
    ✓ should sum the cost of their items (800ms)


  5 passing (1s)

¡Buen trabajo!

20. Pruébelo usando la interfaz de usuario de Storefront

Para la prueba final, regrese a la aplicación web ( http://127.0.0.1:5000/ ) y agregue un artículo al carrito.

Confirme que el carrito se actualice con el total correcto. ¡Fantástico!

Resumen

Ha recorrido un caso de prueba complejo entre Cloud Functions para Firebase y Cloud Firestore. Escribió una función en la nube para aprobar la prueba. ¡También confirmó que la nueva funcionalidad está funcionando en la interfaz de usuario! Hiciste todo esto localmente, ejecutando los emuladores en tu propia máquina.

También creó un cliente web que se ejecuta en los emuladores locales, adaptó las reglas de seguridad para proteger los datos y probó las reglas de seguridad con los emuladores locales.