Pengembangan Lokal dengan Firebase Emulator Suite

1. Sebelum Anda mulai

Alat backend tanpa server seperti Cloud Firestore dan Cloud Functions sangat mudah digunakan, namun mungkin sulit untuk diuji. Firebase Local Emulator Suite memungkinkan Anda menjalankan versi lokal layanan ini di mesin pengembangan sehingga Anda dapat mengembangkan aplikasi dengan cepat dan aman.

Prasyarat

  • Editor sederhana seperti Visual Studio Code, Atom, atau Sublime Text
  • Node.js 10.0.0 atau lebih tinggi (untuk menginstal Node.js, gunakan nvm , untuk memeriksa versi Anda, jalankan node --version )
  • Java 7 atau lebih tinggi (untuk menginstal Java gunakan petunjuk ini , untuk memeriksa versi Anda, jalankan java -version )

Apa yang akan kamu lakukan

Dalam codelab ini, Anda akan menjalankan dan men-debug aplikasi belanja online sederhana yang didukung oleh beberapa layanan Firebase:

  • Cloud Firestore: database NoSQL yang dapat diskalakan secara global, tanpa server, dengan kemampuan real-time.
  • Cloud Functions : kode backend tanpa server yang berjalan sebagai respons terhadap peristiwa atau permintaan HTTP.
  • Firebase Authentication : layanan autentikasi terkelola yang terintegrasi dengan produk Firebase lainnya.
  • Firebase Hosting : hosting yang cepat dan aman untuk aplikasi web.

Anda akan menghubungkan aplikasi ke Emulator Suite untuk mengaktifkan pengembangan lokal.

2589e2f95b74fa88.png

Anda juga akan mempelajari cara:

  • Cara menghubungkan aplikasi Anda ke Emulator Suite dan cara berbagai emulator terhubung.
  • Cara kerja Aturan Keamanan Firebase dan cara menguji Aturan Keamanan Firestore terhadap emulator lokal.
  • Cara menulis Fungsi Firebase yang dipicu oleh peristiwa Firestore dan cara menulis pengujian integrasi yang dijalankan pada Emulator Suite.

2. Siapkan

Dapatkan kode sumbernya

Dalam codelab ini, Anda memulai dengan versi sampel The Fire Store yang hampir selesai, jadi hal pertama yang perlu Anda lakukan adalah mengkloning kode sumber:

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

Lalu pindah ke direktori codelab, tempat Anda akan bekerja selama sisa codelab ini:

$ cd emulators-codelab/codelab-initial-state

Sekarang, instal dependensinya sehingga Anda dapat menjalankan kodenya. Jika koneksi internet Anda lebih lambat, ini mungkin memerlukan waktu satu atau dua menit:

# Move into the functions directory
$ cd functions

# Install dependencies
$ npm install

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

Dapatkan Firebase CLI

Emulator Suite adalah bagian dari Firebase CLI (antarmuka baris perintah) yang dapat diinstal di mesin Anda dengan perintah berikut:

$ npm install -g firebase-tools

Selanjutnya, konfirmasikan bahwa Anda memiliki CLI versi terbaru. Codelab ini seharusnya berfungsi dengan versi 9.0.0 atau lebih tinggi, tetapi versi yang lebih baru menyertakan lebih banyak perbaikan bug.

$ firebase --version
9.6.0

Hubungkan ke proyek Firebase Anda

Jika Anda tidak memiliki proyek Firebase, di Firebase console , buat proyek Firebase baru. Catat Project ID yang Anda pilih, nanti Anda membutuhkannya.

Sekarang kita perlu menghubungkan kode ini ke proyek Firebase Anda. Pertama-tama jalankan perintah berikut untuk login ke Firebase CLI:

$ firebase login

Selanjutnya jalankan perintah berikut untuk membuat alias proyek. Ganti $YOUR_PROJECT_ID dengan ID proyek Firebase Anda.

$ firebase use $YOUR_PROJECT_ID

Sekarang Anda siap menjalankan aplikasi!

3. Jalankan emulator

Di bagian ini, Anda akan menjalankan aplikasi secara lokal. Ini berarti sudah waktunya untuk mem-boot Emulator Suite.

Mulai Emulator

Dari dalam direktori sumber codelab, jalankan perintah berikut untuk memulai emulator:

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

Anda akan melihat beberapa keluaran seperti ini:

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

Setelah Anda melihat pesan Semua emulator dimulai , aplikasi siap digunakan.

Hubungkan aplikasi web ke emulator

Berdasarkan tabel di log kita dapat melihat bahwa emulator Cloud Firestore mendengarkan pada port 8080 dan emulator Authentication mendengarkan pada port 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                             │
└────────────────┴────────────────┴─────────────────────────────────┘

Mari sambungkan kode frontend Anda ke emulator, bukan ke produksi. Buka file public/js/homepage.js dan temukan fungsi onDocumentReady . Kita dapat melihat bahwa kode tersebut mengakses instance Firestore dan Auth standar:

publik/js/homepage.js

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

Mari perbarui objek db dan auth agar mengarah ke emulator lokal:

publik/js/homepage.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);
  }

Sekarang saat aplikasi berjalan di mesin lokal Anda (dilayani oleh emulator Hosting), klien Firestore juga menunjuk ke emulator lokal, bukan ke database produksi.

Buka EmulatorUI

Di browser web Anda, navigasikan ke http://127.0.0.1:4000/ . Anda akan melihat UI Emulator Suite.

Layar beranda UI Emulator

Klik untuk melihat UI Emulator Firestore. Koleksi items sudah berisi data karena data diimpor dengan tanda --import .

4ef88d0148405d36.png

4. Jalankan aplikasinya

Buka aplikasinya

Di browser web Anda, navigasikan ke http://127.0.0.1:5000 dan Anda akan melihat The Fire Store berjalan secara lokal di mesin Anda!

939f87946bac2ee4.png

Gunakan aplikasinya

Pilih item di beranda dan klik Tambahkan ke Keranjang . Sayangnya, Anda akan mengalami kesalahan berikut:

a11bd59933a8e885.png

Ayo perbaiki bug itu! Karena semuanya berjalan di emulator, kita dapat bereksperimen dan tidak khawatir akan mempengaruhi data sebenarnya.

5. Men-debug aplikasi

Temukan bugnya

Oke mari kita lihat di konsol pengembang Chrome. Tekan Control+Shift+J (Windows, Linux, Chrome OS) atau Command+Option+J (Mac) untuk melihat kesalahan di konsol:

74c45df55291dab1.png

Sepertinya ada kesalahan pada metode addToCart , mari kita lihat. Di mana kita mencoba mengakses sesuatu yang disebut uid dalam metode itu dan mengapa itu null ? Saat ini metodenya terlihat seperti ini di public/js/homepage.js :

publik/js/homepage.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);
  }

Ya! Kami tidak masuk ke aplikasi. Menurut dokumen Firebase Authentication , saat kita tidak masuk, auth.currentUser adalah null . Mari tambahkan tanda centang untuk itu:

publik/js/homepage.js

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

    // ...
  }

Uji aplikasinya

Sekarang, segarkan halaman lalu klik Tambahkan ke Keranjang . Anda seharusnya mendapatkan kesalahan yang lebih bagus kali ini:

c65f6c05588133f7.png

Namun jika Anda mengeklik Masuk di bilah alat atas lalu mengeklik Tambahkan ke Keranjang lagi, Anda akan melihat bahwa keranjang telah diperbarui.

Namun, sepertinya angka-angka tersebut tidak benar sama sekali:

239f26f02f959eef.png

Jangan khawatir, kami akan segera memperbaiki bug itu. Pertama, mari selami lebih dalam apa yang sebenarnya terjadi saat Anda menambahkan item ke keranjang.

6. Pemicu fungsi lokal

Mengklik Tambahkan ke Keranjang memulai rangkaian peristiwa yang melibatkan banyak emulator. Di log Firebase CLI, Anda akan melihat pesan seperti berikut setelah menambahkan item ke keranjang:

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

Ada empat peristiwa penting yang terjadi untuk menghasilkan log tersebut dan pembaruan UI yang Anda amati:

68c9323f2ad10f7a.png

1) Tulis Firestore - Klien

Dokumen baru ditambahkan ke koleksi Firestore /carts/{cartId}/items/{itemId}/ . Anda dapat melihat kode ini di fungsi addToCart di dalam public/js/homepage.js :

publik/js/homepage.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) Fungsi Cloud Dipicu

Cloud Function calculateCart memproses setiap peristiwa tulis (buat, perbarui, atau hapus) yang terjadi pada item keranjang dengan menggunakan pemicu onWrite , yang dapat Anda lihat di functions/index.js :

fungsi/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) Tulis Firestore - Admin

Fungsi calculateCart membaca semua item dalam keranjang dan menjumlahkan jumlah total dan harga, lalu memperbarui dokumen "keranjang" dengan total baru (lihat cartRef.update(...) di atas).

4) Baca Firestore - Klien

Frontend web berlangganan untuk menerima pembaruan tentang perubahan pada keranjang. Ia mendapat pembaruan real-time setelah Cloud Function menulis total baru dan memperbarui UI, seperti yang Anda lihat di public/js/homepage.js :

publik/js/homepage.js

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

Rekap

Kerja bagus! Anda baru saja menyiapkan aplikasi yang sepenuhnya lokal yang menggunakan tiga emulator Firebase berbeda untuk pengujian lokal sepenuhnya.

db82eef1706c9058.gif

Tapi tunggu, masih ada lagi! Di bagian selanjutnya Anda akan mempelajari:

  • Cara menulis unit test yang menggunakan Firebase Emulator.
  • Cara menggunakan Emulator Firebase untuk men-debug Aturan Keamanan Anda.

7. Buat aturan keamanan yang disesuaikan untuk aplikasi Anda

Aplikasi web kami membaca dan menulis data, tetapi sejauh ini kami tidak terlalu mengkhawatirkan keamanan sama sekali. Cloud Firestore menggunakan sistem yang disebut "Aturan Keamanan" untuk menyatakan siapa yang memiliki akses untuk membaca dan menulis data. Emulator Suite adalah cara terbaik untuk membuat prototipe aturan-aturan ini.

Di editor, buka file emulators-codelab/codelab-initial-state/firestore.rules . Anda akan melihat bahwa kami memiliki tiga bagian utama dalam aturan kami:

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;
    }
  }
}

Saat ini siapa pun dapat membaca dan menulis data ke database kami! Kami ingin memastikan bahwa hanya operasi valid yang dapat lolos dan kami tidak membocorkan informasi sensitif apa pun.

Selama codelab ini, dengan mengikuti Prinsip Hak Istimewa Terkecil, kami akan mengunci semua dokumen dan secara bertahap menambahkan akses hingga semua pengguna memiliki semua akses yang mereka perlukan, namun tidak lebih. Mari perbarui dua aturan pertama untuk menolak akses dengan menyetel kondisi ke 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;
    }
  }
}

8. Jalankan emulator dan tes

Mulai emulator

Di baris perintah, pastikan Anda menggunakan emulators-codelab/codelab-initial-state/ . Anda mungkin masih menjalankan emulator dari langkah sebelumnya. Jika tidak, jalankan kembali emulator:

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

Setelah emulator berjalan, Anda dapat menjalankan pengujian secara lokal terhadap emulator tersebut.

Jalankan tes

Pada baris perintah di tab terminal baru dari direktori emulators-codelab/codelab-initial-state/

Pertama-tama pindahkan ke direktori fungsi (kita akan tetap di sini selama sisa codelab):

$ cd functions

Sekarang jalankan tes mocha di direktori fungsi, dan gulir ke atas output:

# 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

Saat ini kami mengalami empat kegagalan. Saat Anda membuat file aturan, Anda dapat mengukur kemajuan dengan melihat lebih banyak tes yang lulus.

9. Akses keranjang aman

Dua kegagalan pertama adalah pengujian "keranjang belanja" yang menguji bahwa:

  • Pengguna hanya dapat membuat dan memperbarui keranjang mereka sendiri
  • Pengguna hanya dapat membaca keranjang mereka sendiri

fungsi/test.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());
  });

Mari kita sukseskan ujian ini. Di editor, buka file aturan keamanan firestore.rules , dan perbarui pernyataan dalam match /carts/{cartID} :

firestore.rules

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;
    }

    // ...
  }
}

Aturan ini sekarang hanya mengizinkan akses baca dan tulis oleh pemilik keranjang.

Untuk memverifikasi data masuk dan otentikasi pengguna, kami menggunakan dua objek yang tersedia dalam konteks setiap aturan:

10. Uji akses keranjang

Emulator Suite secara otomatis memperbarui aturan setiap kali firestore.rules disimpan. Anda dapat memastikan bahwa emulator telah memperbarui aturannya dengan melihat di tab menjalankan emulator untuk pesan Rules updated :

5680da418b420226.png

Jalankan kembali pengujian, dan periksa apakah dua pengujian pertama sudah lulus:

$ 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

Kerja bagus! Anda sekarang telah mendapatkan akses ke keranjang belanja. Mari kita beralih ke tes gagal berikutnya.

11. Periksa alur "Tambahkan ke Keranjang" di UI

Saat ini, meskipun pemilik keranjang membaca dan menulis ke keranjangnya, mereka tidak dapat membaca atau menulis item satu per satu di keranjangnya. Hal ini karena meskipun pemilik memiliki akses ke dokumen keranjang, mereka tidak memiliki akses ke subkoleksi item keranjang.

Ini adalah kondisi rusak bagi pengguna.

Kembali ke UI web, yang berjalan di http://127.0.0.1:5000, dan coba tambahkan sesuatu ke keranjang Anda. Anda mendapatkan kesalahan Permission Denied , terlihat dari konsol debug, karena kami belum memberikan akses kepada pengguna ke dokumen yang dibuat di subkoleksi items .

12. Izinkan akses item keranjang

Kedua pengujian ini mengonfirmasi bahwa pengguna hanya dapat menambahkan item ke atau membaca item dari keranjang mereka sendiri:

  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
    }));
  });

Jadi kita bisa menulis aturan yang mengizinkan akses jika pengguna saat ini memiliki UID yang sama dengan UID pemilik pada dokumen keranjang. Karena tidak perlu menentukan aturan berbeda untuk create, update, delete , Anda dapat menggunakan aturan write , yang berlaku untuk semua permintaan yang mengubah data.

Perbarui aturan untuk dokumen di subkoleksi item. Persyaratan get adalah membaca nilai dari Firestore–dalam hal ini, ownerUID pada dokumen keranjang.

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;
    }

    // ...
  }
}

13. Uji akses item keranjang

Sekarang kita dapat menjalankan kembali tes tersebut. Gulir ke bagian atas keluaran dan periksa apakah lebih banyak tes yang lulus:

$ 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

Bagus! Sekarang semua ujian kami lulus. Kami memiliki satu pengujian yang tertunda, namun kami akan menyelesaikannya dalam beberapa langkah.

14. Periksa kembali alur "tambahkan ke troli".

Kembali ke front end web ( http://127.0.0.1:5000 ) dan tambahkan item ke keranjang. Ini merupakan langkah penting untuk mengonfirmasi bahwa pengujian dan aturan kami sesuai dengan fungsionalitas yang dibutuhkan oleh klien. (Ingat bahwa terakhir kali kami mencoba, pengguna UI tidak dapat menambahkan item ke keranjang mereka!)

69ad26cee520bf24.png

Klien secara otomatis memuat ulang aturan ketika firestore.rules disimpan. Jadi, coba tambahkan sesuatu ke troli.

Rekap

Kerja bagus! Anda baru saja meningkatkan keamanan aplikasi Anda, sebuah langkah penting untuk menyiapkannya untuk produksi! Jika ini adalah aplikasi produksi, kami dapat menambahkan pengujian ini ke jalur integrasi berkelanjutan kami. Hal ini akan memberi kami keyakinan di masa mendatang bahwa data keranjang belanja kami akan memiliki kontrol akses ini, meskipun ada orang lain yang mengubah aturannya.

ba5440b193e75967.gif

Tapi tunggu, masih ada lagi!

jika Anda melanjutkan, Anda akan belajar:

  • Cara menulis fungsi yang dipicu oleh peristiwa Firestore
  • Cara membuat pengujian yang berfungsi di beberapa emulator

15. Siapkan pengujian Cloud Functions

Sejauh ini kami fokus pada frontend aplikasi web kami dan Aturan Keamanan Firestore. Namun aplikasi ini juga menggunakan Cloud Functions agar keranjang pengguna tetap terbaru, jadi kami ingin menguji kode tersebut juga.

Emulator Suite memudahkan pengujian Cloud Functions, bahkan fungsi yang menggunakan Cloud Firestore dan layanan lainnya.

Di editor, buka file emulators-codelab/codelab-initial-state/functions/test.js dan gulir ke pengujian terakhir dalam file tersebut. Saat ini, ini ditandai sebagai tertunda:

//  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 () => {
    ...
  });
});

Untuk mengaktifkan pengujian, hapus .skip , sehingga tampilannya seperti ini:

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

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

Selanjutnya, temukan variabel REAL_FIREBASE_PROJECT_ID di bagian atas file dan ubah ke ID Proyek Firebase Anda yang sebenarnya.:

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

Jika Anda lupa ID proyek, Anda dapat menemukan ID Proyek Firebase Anda di Setelan Proyek di Firebase Console:

d6d0429b700d2b21.png

16. Ikuti tes Fungsi

Karena pengujian ini memvalidasi interaksi antara Cloud Firestore dan Cloud Functions, pengujian ini memerlukan lebih banyak penyiapan dibandingkan pengujian pada codelab sebelumnya. Mari kita jalani tes ini dan mendapatkan gambaran tentang apa yang diharapkan.

Buat keranjang

Cloud Functions berjalan di lingkungan server tepercaya dan dapat menggunakan autentikasi akun layanan yang digunakan oleh Admin SDK. Pertama, Anda menginisialisasi aplikasi menggunakan initializeAdminApp alih-alih initializeApp . Kemudian, Anda membuat DocumentReference untuk keranjang tempat kami akan menambahkan item dan menginisialisasi keranjang:

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 });

    ...
  });

Memicu fungsinya

Kemudian, tambahkan dokumen ke subkoleksi items dokumen keranjang kami untuk memicu fungsi tersebut. Tambahkan dua item untuk memastikan Anda menguji penambahan yang terjadi pada fungsi.

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 });

    ...
    });
  });

Tetapkan ekspektasi pengujian

Gunakan onSnapshot() untuk mendaftarkan pendengar untuk setiap perubahan pada dokumen keranjang. onSnapshot() mengembalikan fungsi yang dapat Anda panggil untuk membatalkan pendaftaran pendengar.

Untuk tes ini, tambahkan dua item yang bersama-sama berharga $9,98. Kemudian, periksa apakah keranjang memiliki itemCount dan totalPrice yang diharapkan. Jika demikian, maka fungsi tersebut telah melakukan tugasnya.

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. Jalankan pengujian

Anda mungkin masih menjalankan emulator dari pengujian sebelumnya. Jika tidak, jalankan emulator. Dari baris perintah, jalankan

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

Buka tab terminal baru (biarkan emulator berjalan) dan pindah ke direktori fungsi. Anda mungkin masih membukanya dari pengujian aturan keamanan.

$ cd functions

Sekarang jalankan pengujian unit, Anda akan melihat 5 pengujian 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

Jika Anda melihat kegagalan spesifiknya, tampaknya itu adalah kesalahan batas waktu. Hal ini karena pengujian menunggu fungsi diperbarui dengan benar, namun tidak pernah terjadi. Sekarang, kami siap menulis fungsi untuk memenuhi pengujian.

18. Tulis sebuah fungsi

Untuk memperbaiki pengujian ini, Anda perlu memperbarui fungsi functions/index.js . Meskipun beberapa fungsi ini telah ditulis, namun belum lengkap. Beginilah tampilan fungsinya saat ini:

// 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) {
      }
    });

Fungsi ini mengatur referensi keranjang dengan benar, tetapi alih-alih menghitung nilai totalPrice dan itemCount , fungsi ini memperbaruinya ke nilai hardcode.

Ambil dan ulangi melalui

subkoleksi items

Inisialisasi konstanta baru, itemsSnap , untuk menjadi subkoleksi items . Kemudian, ulangi semua dokumen dalam koleksi.

// 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) {
      }
    });

Hitung totalPrice dan itemCount

Pertama, mari kita inisialisasi nilai totalPrice dan itemCount ke nol.

Kemudian, tambahkan logika ke blok iterasi kita. Pertama, periksa apakah barang tersebut memiliki harga. Jika item tidak memiliki kuantitas yang ditentukan, biarkan defaultnya menjadi 1 . Kemudian, tambahkan kuantitas ke total itemCount yang berjalan. Terakhir, tambahkan harga item dikalikan dengan kuantitas ke total 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) {
      }
    });

Anda juga dapat menambahkan logging untuk membantu men-debug status keberhasilan dan kesalahan:

// 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. Jalankan kembali tes

Pada baris perintah, pastikan emulator masih berjalan dan jalankan kembali pengujian. Anda tidak perlu memulai ulang emulator karena emulator mengambil perubahan pada fungsinya secara otomatis. Anda akan melihat semua tes lulus:

$ 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)

Kerja bagus!

20. Cobalah menggunakan Storefront UI

Untuk pengujian terakhir, kembali ke aplikasi web ( http://127.0.0.1:5000/ ) dan tambahkan item ke keranjang.

69ad26cee520bf24.png

Konfirmasikan bahwa keranjang diperbarui dengan total yang benar. Fantastis!

Rekap

Anda telah mempelajari kasus pengujian kompleks antara Cloud Functions for Firebase dan Cloud Firestore. Anda menulis Cloud Function agar pengujiannya lulus. Anda juga mengonfirmasi bahwa fungsi baru berfungsi di UI! Anda melakukan semua ini secara lokal, menjalankan emulator di mesin Anda sendiri.

Anda juga telah membuat klien web yang berjalan pada emulator lokal, menyesuaikan aturan keamanan untuk melindungi data, dan menguji aturan keamanan menggunakan emulator lokal.

c6a7aeb91fe97a64.gif