Membangun aplikasi web yang didukung AI dengan Firebase Extensions

1. Sebelum memulai

Dalam codelab ini, Anda akan mempelajari cara membangun aplikasi web yang didukung AI yang memberikan pengalaman pengguna yang menarik dengan Firebase Extensions.

Prasyarat

• Pengetahuan tentang Node.js dan JavaScript

Yang akan Anda pelajari

• Cara menggunakan Ekstensi terkait AI untuk memproses input bahasa dan video.
• Cara menggunakan Cloud Functions for Firebase untuk membentuk pipeline antar-Extensions.
• Cara menggunakan JavaScript untuk mengakses output yang dihasilkan oleh Extensions.

Yang Anda butuhkan

• Browser pilihan Anda, seperti Google Chrome
• Lingkungan pengembangan dengan editor kode dan terminal
• Akun Google untuk pembuatan dan pengelolaan project Firebase Anda

2. Meninjau aplikasi web dan layanan Firebase-nya

Bagian ini menjelaskan aplikasi web yang akan Anda bangun di codelab ini dan Firebase mana yang akan Anda gunakan untuk membangunnya.

Aplikasi Reviewly

Sebuah perusahaan kaus kewalahan dengan ulasan panjang tentang salah satu kaus mereka dan tidak yakin dengan peringkat keseluruhannya. Aplikasi web Reviewly yang lengkap merangkum setiap ulasan, memberikan rating bintang untuk setiap ulasan, dan menggunakan setiap ulasan untuk menyimpulkan rating keseluruhan untuk produk. Pengguna juga dapat memperluas setiap ulasan yang diringkas untuk melihat ulasan awal.

Aplikasi Chatbot

Staf pengajar sekolah kewalahan dengan pertanyaan berulang tentang topik umum, sehingga mereka ingin mengotomatiskan respons. Aplikasi Chatbot yang telah selesai memberi siswa chatbot percakapan yang didukung oleh model bahasa besar (LLM) dan dapat menjawab pertanyaan tentang topik umum. Chatbot memiliki konteks sejarah, sehingga responsnya dapat memperhitungkan pertanyaan sebelumnya yang diajukan siswa dalam percakapan yang sama.

Aplikasi Video Hint

Sebuah departemen pemerintah ingin videonya menyediakan deskripsi audio untuk meningkatkan aksesibilitas, tetapi mereka memiliki ratusan video untuk diberi anotasi dan membutuhkan pendekatan yang disederhanakan. Aplikasi Video Hint yang telah selesai adalah prototipe yang akan ditinjau oleh departemen ini untuk menilai keefektifannya.

Berikut adalah ekstensi yang digunakan di aplikasi Video Hint:

• Ekstensi Label Videos with Cloud Video AI — mengekstrak label dari setiap video yang diupload ke Storage.
• Ekstensi Language Tasks with PaLM API — meringkas label menjadi deskripsi teks.
• Ekstensi Convert Text to Speech — membuat versi audio dari deskripsi video.

3. Menyiapkan lingkungan pengembangan

Memverifikasi versi Node.js Anda

1. Di terminal, pastikan Anda telah menginstal Node.js v20.0.0 atau yang lebih tinggi:

   node -v
   

2. Jika Anda tidak memiliki Node.js v20.0.0 atau versi yang lebih tinggi, download dan instal versi tersebut.

Mendownload repositori

1. Jika Anda sudah menginstal git, clone repositori GitHub codelab:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. Jika Anda belum menginstal git, download repositori GitHub sebagai file ZIP.

Meninjau struktur folder

Di komputer lokal Anda, temukan repositori yang di-clone dan tinjau struktur foldernya. Tabel berikut berisi folder dan deskripsinya:

Setiap folder berisi file readme.md yang menawarkan panduan memulai untuk menjalankan tiap aplikasi web, menggunakan petunjuk yang disederhanakan. Namun, jika Anda adalah pemula, Anda harus menyelesaikan codelab ini karena berisi kumpulan petunjuk paling komprehensif.

Jika tidak yakin apakah Anda telah menerapkan kode dengan benar seperti yang ditunjukkan di seluruh codelab ini, Anda dapat menemukan kode solusi untuk tiap aplikasi di folder reviewly-end, chatbot-end, dan video-hint-end.

Menginstal Firebase CLI

Jalankan perintah berikut untuk memverifikasi bahwa Anda telah menginstal Firebase CLI dan menggunakan v12.5.4 atau yang lebih tinggi:

firebase --version

• Jika Anda sudah menginstal Firebase CLI, tetapi bukan v12.5.4 atau yang lebih tinggi, update Firebase CLI:

  npm update -g firebase-tools
  

• Jika Anda belum mengintal Firebase CLI, instal sekarang:

  npm install -g firebase-tools
  

Jika Anda tidak dapat menginstal Firebase CLI karena error izin, lihat dokumentasi npm atau gunakan opsi penginstalan lainnya.

Login ke Firebase

1. Di terminal Anda, buka folder ai-extensions-codelab dan login ke Firebase:

   cd ai-extensions-codelab
   firebase login
   

2. Jika terminal Anda menyatakan bahwa Anda telah login ke Firebase, lanjutkan ke bagian Set up your Firebase project di codelab ini.
3. Bergantung pada apakah Anda ingin Firebase mengumpulkan data, masukkan Y atau N.
4. Di browser, pilih akun Google Anda, lalu klik Allow.

4. Menyiapkan project Firebase

Di bagian ini, Anda akan menyiapkan project Firebase dan mengaitkan aplikasi web Firebase dengan project tersebut. Anda juga akan mengaktifkan layanan Firebase yang digunakan oleh aplikasi web contoh.

Membuat project Firebase

1. Di Firebase console, klik Create project.
2. Di kotak teks Enter your project name, masukkan AI Extensions Codelab (atau nama project pilihan Anda), lalu klik Continue.
3. Untuk codelab ini, Anda tidak memerlukan Google Analytics. Oleh karena itu, nonaktifkan opsi Enable Google Analytics for this project.
4. Klik Create project.
5. Tunggu hingga project Anda disediakan, lalu klik Continue.
6. Di project Firebase Anda, buka Project Settings. Catat project ID Anda karena Anda akan memerlukannya nanti. ID unik ini adalah cara project Anda diidentifikasi (misalnya, di Firebase CLI).

Mendownload akun layanan Firebase

Beberapa aplikasi web yang akan Anda bangun di codelab ini menggunakan rendering sisi server dengan Next.js.

Firebase Admin SDK untuk Node.js digunakan untuk memastikan Aturan Keamanan berfungsi dari kode sisi server. Untuk menggunakan API di Firebase Admin, Anda perlu mendownload akun layanan Firebase dari Firebase console.

1. Di Firebase console, buka halaman Service Accounts di Project settings Anda.
2. Klik Generate new private key > Generate Key.
3. Setelah file didownload ke sistem file Anda, dapatkan jalur lengkap ke file tersebut.
   Misalnya, jika Anda mendownload file ke folder Downloads, jalur lengkapnya mungkin terlihat seperti ini: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. Di terminal Anda, setel variabel lingkungan GOOGLE_APPLICATION_CREDENTIALS ke jalur kunci pribadi yang Anda download. Di lingkungan Unix, perintahnya mungkin terlihat seperti ini:

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

5. Biarkan terminal ini tetap terbuka dan gunakan selama sisa codelab ini, karena variabel lingkungan mungkin akan hilang jika Anda memulai sesi terminal baru.
   Jika membuka sesi terminal baru, Anda harus menjalankan kembali perintah sebelumnya.

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Cloud Functions dan Firebase Extensions, project Firebase Anda harus menggunakan paket harga Blaze, yang berarti project tersebut terkait dengan akun Penagihan Cloud.

• Akun Penagihan Cloud memerlukan metode pembayaran, seperti kartu kredit.
• Jika Anda baru menggunakan Firebase dan Google Cloud, periksa apakah Anda memenuhi syarat untuk mendapatkan kredit sebesar $300 dan akun Penagihan Cloud Uji Coba Gratis.

Namun, perhatikan bahwa penyelesaian codelab ini tidak akan menimbulkan biaya sebenarnya.

Untuk mengupgrade project Anda ke paket Blaze, ikuti langkah-langkah berikut:

1. Di Firebase console, pilih upgrade your plan.
2. Pada dialog yang muncul, pilih paket Blaze, lalu ikuti petunjuk di layar untuk mengaitkan project Anda dengan akun Penagihan Cloud.
   Jika perlu membuat akun Penagihan Cloud, Anda mungkin perlu kembali ke alur upgrade di Firebase console untuk menyelesaikan upgrade.

Menyiapkan layanan Firebase di Firebase console

Di bagian ini, Anda akan menyediakan dan menyiapkan beberapa layanan Firebase yang digunakan oleh aplikasi web di codelab ini. Perlu diperhatikan bahwa tidak semua layanan ini digunakan di setiap aplikasi web. Namun, dengan menyiapkan semua layanan ini sekarang, pekerjaan melalui codelab ini akan menjadi lebih mudah.

Menyiapkan Authentication

Anda akan menggunakan Authentication dengan aplikasi Chatbot dan aplikasi Video Hint. Namun, ingat bahwa jika Anda membuat aplikasi sungguhan, setiap aplikasi harus memiliki project Firebase-nya sendiri.

1. Di Firebase console, buka Authentication.
2. Klik Get started.
3. Di kolom Additional providers, klik Google > Enable.

4. Di kotak teks Public-facing name for project, masukkan nama yang mudah diingat, seperti My AI Extensions Codelab.
5. Dari drop-down Support email for project, pilih alamat email Anda.
6. Klik Save.
   

Menyiapkan Cloud Firestore

Anda akan menggunakan Firestore dengan ketiga aplikasi tersebut. Namun, ingat bahwa jika Anda membuat aplikasi sungguhan, setiap aplikasi harus memiliki project Firebase-nya sendiri.

1. Di Firebase console, buka Firestore.
2. Klik Create database > Start in test mode > Next.
   Di codelab ini, Anda akan menambahkan Aturan Keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk database Anda.
3. Gunakan lokasi default atau pilih lokasi pilihan Anda.
   Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna. Perlu diperhatikan bahwa lokasi ini tidak dapat diubah nanti, dan juga akan secara otomatis menjadi lokasi bucket Cloud Storage default Anda (langkah berikutnya).
4. Klik Done.

Menyiapkan Cloud Storage for Firebase

Anda akan menggunakan Cloud Storage dengan aplikasi Video Hint dan mencoba ekstensi Convert Text to Speech (langkah berikutnya dari codelab).

1. Di Firebase console, buka Storage.
2. Klik Get started > Start in test mode > Next.
   Di codelab ini, Anda akan menambahkan Aturan Keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk bucket Storage Anda.
3. Lokasi bucket Anda seharusnya sudah dipilih (karena Anda menyiapkan Firestore di langkah sebelumnya).
4. Klik Done.

Di bagian selanjutnya dari codelab ini, Anda akan menginstal ekstensi dan mengubah codebase setiap aplikasi contoh dalam codelab ini agar tiga aplikasi web berbeda berfungsi.

5. Menyiapkan ekstensi "Language Tasks with PaLM API" untuk aplikasi Reviewly

Menginstal ekstensi Language Tasks with PaLM API

1. Buka ekstensi Language Tasks with PaLM API.
2. Klik Install in the Firebase console.
3. Pilih project Firebase.
4. Di bagian Review APIs enabled and resources created, klik Enable di samping layanan apa pun yang disarankan kepada Anda:

5. Klik Next > Next.
6. Di kotak teks Collection path, masukkan bot.
7. Di kotak teks Prompt, masukkan {{ input }}.
8. Di kotak teks Variable fields, masukkan input.
9. Di kotak teks Response field, masukkan text.
10. Dari drop-down Cloud Functions location, pilih Iowa (us-central1) atau lokasi yang sebelumnya Anda pilih untuk Firestore dan Cloud Storage.
11. Dari drop-down Language model, pilih text-bison-001.
12. Biarkan semua nilai lain sebagai default.
13. Klik Install extension dan tunggu hingga ekstensi diinstal.

Coba ekstensi Language Tasks with PaLM API

Meskipun sasaran codelab ini adalah untuk berinteraksi dengan ekstensi Language Tasks with PaLM API melalui aplikasi web, sebaiknya pahami cara kerja ekstensi dengan memicu ekstensi menggunakan Firebase console. Ekstensi terpicu saat dokumen Cloud Firestore ditambahkan ke koleksi bot.

Untuk melihat cara kerja ekstensi menggunakan Firebase console, ikuti langkah-langkah berikut:

1. Di Firebase console, buka Firestore.
2. Di koleksi bot, klik Add document.
3. Di kotak teks Document ID, klik Auto-ID.
4. Di kotak teks Field, masukkan input.
5. Di kotak teks Value, masukkan Tell me about the moon.
6. Klik Save dan tunggu beberapa detik. Dokumen dalam koleksi bot kini menyertakan respons terhadap kueri Anda.

6. Menyiapkan aplikasi Reviewly untuk menggunakan Firebase

Untuk menjalankan aplikasi Reviewly, Anda harus menyiapkan kode aplikasi dan Firebase CLI untuk berinteraksi dengan project Firebase Anda.

Menambahkan layanan dan konfigurasi Firebase ke kode aplikasi Anda

Untuk menggunakan Firebase, codebase aplikasi Anda memerlukan Firebase SDK untuk layanan yang ingin digunakan dan konfigurasi Firebase yang memberi tahu SDK tersebut project Firebase mana yang akan digunakan.

Aplikasi contoh codelab ini sudah menyertakan semua kode impor dan inisialisasi yang diperlukan untuk SDK (lihat reviewly-start/js/reviews.js), sehingga Anda tidak perlu menambahkannya. Namun, aplikasi contoh hanya memiliki nilai placeholder untuk konfigurasi Firebase (lihat reviewly-start/js/firebase-config.js), sehingga Anda perlu mendaftarkan aplikasi ke project Firebase guna mendapatkan nilai konfigurasi Firebase yang unik untuk aplikasi Anda.

1. Di Firebase console, di project Firebase Anda, buka Project overview, lalu klik Web.
   
2. Di kotak teks App nickname, masukkan nama panggilan aplikasi yang mudah diingat, seperti My Reviewly app.
3. Jangan centang kotak Also set up Firebase Hosting for this app. Anda akan melakukan langkah-langkah ini nanti di codelab.
4. Klik Register app.
5. Konsol menampilkan cuplikan kode untuk menambahkan dan menginisialisasi Firebase SDK dengan objek konfigurasi Firebase khusus aplikasi. Salin semua properti di objek konfigurasi Firebase.
6. Di editor kode, buka file reviewly-start/js/firebase-config.js.
7. Ganti nilai placeholder dengan nilai yang baru saja Anda salin. Tidak masalah jika Anda memiliki properti dan nilai untuk layanan Firebase yang tidak digunakan di aplikasi Reviewly.
8. Simpan file.
9. Kembali ke Firebase console, klik Continue to console.

Menyiapkan terminal Anda untuk menjalankan perintah Firebase CLI terhadap project Firebase Anda

1. Di terminal Anda, buka folder ai-extensions-codelab yang Anda download sebelumnya.
2. Buka folder aplikasi web reviewly-start:

   cd reviewly-start
   

3. Buat perintah run Firebase CLI terhadap project Firebase tertentu:

   firebase use YOUR_PROJECT_ID
   

Menjalankan dan melihat aplikasi web Reviewly

Untuk menjalankan dan melihat aplikasi web, ikuti langkah-langkah berikut:

1. Di terminal, instal dependensi, lalu jalankan aplikasi web:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. Di browser Anda, buka URL yang ditampilkan di terminal Anda. Misalnya: http://localhost:8080.

Halaman seharusnya dimuat, tetapi Anda akan melihat bahwa beberapa fitur tidak ada. Kita akan menambahkannya pada langkah berikutnya di codelab ini.

7. Menambahkan fungsi ke aplikasi Reviewly

Pada langkah terakhir codelab ini, Anda menjalankan aplikasi Reviewly secara lokal, tetapi aplikasi tersebut tidak memiliki banyak fungsi dan belum menggunakan ekstensi yang diinstal. Pada langkah codelab ini, Anda akan menambahkan fungsi ini dan menggunakan aplikasi web untuk memicu ekstensi.

Men-deploy Aturan Keamanan

Aplikasi contoh codelab ini berisi kumpulan Aturan Keamanan untuk Firestore dan Cloud Storage for Firebase. Setelah Anda men-deploy Aturan Keamanan ini ke project Firebase, data di database dan bucket lebih terlindungi dari penyalahgunaan.

Anda dapat melihat aturan ini di file firestore.rules dan storage.rules.

1. Untuk men-deploy Aturan Keamanan ini, jalankan perintah ini di terminal Anda:

   firebase deploy --only firestore:rules,storage
   

2. Jika ditanya: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", pilih Yes.

Mengupdate kode aplikasi untuk memicu ekstensi

Di aplikasi Reviewly, ulasan baru yang ditambahkan ke Firestore akan memicu ekstensi untuk meringkas ulasan.

1. Di editor kode, buka file functions/add-mock-reviews.js.
2. Ganti variabel reviewWithPrompt dengan kode berikut, yang meminta model bahasa untuk ulasan yang lebih singkat.

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. Setelah variabel reviewWithPrompt, ganti variabel reviewDocument dengan kode berikut, yang akan membuat dokumen ulasan sehingga dapat ditambahkan ke Firestore.

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. Simpan file.
5. Di file js/reviews.js, setelah komentar Insert code below, to import your Firebase Callable Cloud Function, impor fungsi callable HTTP Firebase Anda dengan helper httpsCallable:

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. Setelah komentar Insert code below, to invoke your Firebase Callable Cloud Function, panggil fungsi callable HTTP Firebase Anda:

   await addMockReviews();
   

7. Simpan file.

Men-deploy fungsi untuk menambahkan ulasan baru

Aplikasi web Reviewly menggunakan Cloud Function untuk menambahkan ulasan. Namun saat ini, Cloud Function belum di-deploy.

Untuk men-deploy fungsi dengan Firebase CLI, ikuti langkah-langkah berikut:

1. Di terminal saat masih berada di folder reviewly-start, tekan Control+C untuk menghentikan server.
2. Men-deploy fungsi:

   firebase deploy --only functions
   

3. Jika Anda melihat Permission denied while using the Eventarc Service Agent atau error serupa, tunggu beberapa menit, lalu coba lagi perintah tersebut.

Anda baru saja men-deploy fungsi kustom pertama Anda dengan Cloud Functions. Firebase console menawarkan dasbor tempat Anda dapat melihat semua fungsi yang di-deploy ke project Firebase.

Menjalankan dan melihat aplikasi web Reviewly lagi (sekarang memiliki fungsi)

Untuk menjalankan dan melihat aplikasi web yang sekarang berfungsi, ikuti langkah-langkah berikut:

1. Di terminal Anda, jalankan kembali server:

   npm run dev
   

2. Di browser Anda, buka URL yang ditampilkan di terminal Anda. Misalnya: http://localhost:8080.
3. Di aplikasi, klik Add some mock reviews dan tunggu beberapa detik hingga ulasan panjang muncul.
   Di latar belakang, ekstensi Language Tasks with PaLM API akan bereaksi terhadap dokumen baru yang mewakili ulasan baru. Dialog yang Anda tambahkan sebelumnya meminta ringkasan yang lebih pendek dari model bahasa.
4. Untuk melihat seluruh ulasan dan perintah yang digunakan untuk ulasan, klik salah satu ulasan, lalu pilih Show PaLM prompt.

8. Menyiapkan ekstensi "Chatbot with PaLM API" untuk aplikasi Chatbot

Menginstal ekstensi Chatbot with PaLM API

1. Buka ekstensi Chatbot with PaLM API.
2. Klik Install in Firebase console.
3. Pilih project Firebase.
4. Klik Next > Next > Next, hingga Anda mencapai bagian Configure extension.
5. Di kotak teks Collection path, masukkan users/{uid}/discussion/{discussionId}/messages.
6. Dari drop-down Cloud Functions location, pilih Iowa (us-central1) atau lokasi yang sebelumnya Anda pilih untuk Firestore dan Cloud Storage.
7. Dari drop-down Language model, pilih chat-bison.
8. Biarkan semua nilai lain sebagai default.
9. Klik Install extension dan tunggu hingga ekstensi diinstal.

Mencoba ekstensi Chatbot with PaLM API

Meskipun sasaran codelab ini adalah untuk berinteraksi dengan ekstensi Chatbot with PaLM API melalui aplikasi web, sebaiknya pahami cara kerja ekstensi dengan memicu ekstensi menggunakan Firebase console. Ekstensi terpicu saat dokumen Cloud Firestore dibuat di koleksi users/{uid}/discussion/{discussionId}/messages.

1. Di Firebase console, buka Firestore.
2. Klik Start collection.
   1. Di kotak teks Collection ID, masukkan users, lalu klik Next.
   2. Di kotak teks Document ID, klik Auto-ID, lalu klik Save.
3. Di koleksi users, klik Start collection.
   
   1. Di kotak teks Collection ID, masukkan discussion, lalu klik Next.
   2. Di kotak teks Document ID, klik Auto-ID, lalu klik Save.
4. Di koleksi discussion, klik Start collection.
   
   1. Di kotak teks Collection ID, masukkan messages, lalu klik Next.
   2. Di kotak teks Document ID, klik Auto-ID.
   3. Di kotak teks Field, masukkan prompt.
   4. Di kotak teks Value, masukkan Tell me 5 random fruits.
   5. Klik Save dan tunggu beberapa detik. Koleksi messages kini menyertakan dokumen yang berisi respons terhadap kueri Anda.

5. Di koleksi messages, klik Add document.
   1. Di kotak teks Document ID, klik Auto-ID.
   2. Di kotak teks Field, masukkan prompt.
   3. Di kotak teks Value, masukkan And now, vegetables.
   4. Klik Save dan tunggu beberapa detik. Koleksi messages kini menyertakan dokumen yang berisi respons terhadap kueri Anda.

9. Menyiapkan aplikasi Chatbot untuk menggunakan Firebase

Untuk menjalankan aplikasi Chatbot, Anda harus menyiapkan kode aplikasi dan Firebase CLI untuk berinteraksi dengan project Firebase Anda.

Menambahkan layanan dan konfigurasi Firebase ke kode aplikasi Anda

Untuk menggunakan Firebase, codebase aplikasi Anda memerlukan Firebase SDK untuk layanan yang ingin digunakan dan konfigurasi Firebase yang memberi tahu SDK tersebut project Firebase mana yang akan digunakan.

Aplikasi contoh codelab ini sudah menyertakan semua kode impor dan inisialisasi yang diperlukan untuk SDK (lihat chatbot-start/lib/firebase/firebase.js), sehingga Anda tidak perlu menambahkannya. Namun, aplikasi contoh hanya memiliki nilai placeholder untuk konfigurasi Firebase (lihat chatbot-start/lib/firebase/firebase-config.js), sehingga Anda perlu mendaftarkan aplikasi ke project Firebase guna mendapatkan nilai konfigurasi Firebase yang unik untuk aplikasi Anda.

1. Di Firebase console, di project Firebase Anda, buka Project overview, lalu klik Web (atau klik Add app jika Anda sudah mendaftarkan aplikasi ke project).
2. Di kotak teks App nickname, masukkan nama panggilan aplikasi yang mudah diingat, seperti My Chatbot app.
3. Jangan centang kotak Also set up Firebase Hosting for this app. Anda akan melakukan langkah-langkah ini nanti di codelab.
4. Klik Register app.
5. Konsol menampilkan cuplikan kode untuk menambahkan dan menginisialisasi Firebase SDK dengan objek konfigurasi Firebase khusus aplikasi. Salin semua properti di objek konfigurasi Firebase.
6. Di editor kode, buka file chatbot-start/lib/firebase/firebase-config.js.
7. Ganti nilai placeholder dengan nilai yang baru saja Anda salin. Tidak masalah jika Anda memiliki properti dan nilai untuk layanan Firebase yang tidak digunakan di aplikasi Chatbot.
8. Simpan file.
9. Kembali ke Firebase console, klik Continue to console.

Menyiapkan terminal Anda untuk menjalankan perintah Firebase CLI terhadap project Firebase Anda

1. Di terminal Anda, tekan Control+C untuk menghentikan server menjalankan aplikasi web sebelumnya.
2. Di terminal Anda, buka folder aplikasi web chatbot-start:

   cd ../chatbot-start
   

3. Buat perintah run Firebase CLI terhadap project Firebase tertentu:

   firebase use YOUR_PROJECT_ID
   

Menyiapkan codebase aplikasi Anda untuk menggunakan Firebase Hosting berbasis framework

Codelab ini menggunakan framework web dengan Hosting (pratinjau) dengan aplikasi web Chatbot.

1. Di terminal Anda, aktifkan framework web dengan Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Lakukan inisialisasi Firebase Hosting:

   firebase init hosting
   

3. Saat diminta dengan Detected an existing Next.js codebase in your current directory, should we use this?, tekan Y.
4. Saat diminta dengan In which region would you like to host server-side content, if applicable?, pilih region default atau lokasi yang sebelumnya Anda pilih untuk Firestore dan Cloud Storage, lalu tekan Enter (atau return di macOS).
5. Saat diminta dengan Set up automatic builds and deploys with GitHub?, tekan N.

Menjalankan dan melihat aplikasi web Chatbot

1. Di terminal, instal dependensi, lalu jalankan aplikasi web:

   npm install
   firebase emulators:start --only hosting
   

2. Di browser, buka URL Hosting yang dihosting secara lokal. Dalam kebanyakan kasus, URL-nya adalah http://localhost:5000/ atau yang serupa.

Halaman seharusnya dimuat, tetapi Anda akan melihat bahwa beberapa fitur tidak ada. Kita akan menambahkannya pada langkah berikutnya di codelab ini.

Memecahkan masalah saat menjalankan aplikasi web

Jika Anda melihat error di halaman web yang dimulai seperti ini: Error: Firebase session cookie has incorrect..., Anda perlu menghapus semua cookie di lingkungan localhost Anda. Untuk melakukannya, ikuti petunjuk tentang delete cookies | DevTools Documentation..

10. Menambahkan fungsi ke aplikasi Chatbot

Pada langkah terakhir codelab ini, Anda menjalankan aplikasi Chatbot secara lokal, tetapi tidak memiliki banyak fungsi dan belum menggunakan ekstensi yang diinstal. Pada langkah codelab ini, Anda akan menambahkan fungsi ini dan menggunakan aplikasi web untuk memicu ekstensi.

Men-deploy Aturan Keamanan

Aplikasi contoh codelab ini berisi kumpulan Aturan Keamanan untuk Firestore dan Cloud Storage for Firebase. Setelah Anda men-deploy Aturan Keamanan ini ke project Firebase, data di database dan bucket lebih terlindungi dari penyalahgunaan.

Anda dapat melihat aturan ini di file firestore.rules dan storage.rules.

1. Untuk men-deploy Aturan Keamanan ini, jalankan perintah ini di terminal Anda:

   firebase deploy --only firestore:rules,storage
   

2. Jika ditanya: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", pilih Yes.

Mengupdate kode untuk menambahkan pesan ke Cloud Firestore

Di aplikasi Chatbot, pesan baru dari pengguna ditambahkan ke Firestore dan hal itu memicu ekstensi untuk menghasilkan respons.

1. Di editor kode, buka file lib/firebase/firestore.js.
2. Di hampir bagian akhir file, temukan fungsi addNewMessage, yang menangani penambahan pesan baru.
   Fungsi tersebut sudah menggunakan properti objek berikut:
   

   Parameter	Deskripsi
   userId	ID pengguna yang login
   discussionId	ID diskusi yang ditambahkan pesan
   message	Konten teks pesan
   db	Instance database Firestore

   Setelah variabel ini siap, Anda dapat menambahkan dokumen Cloud Firestore untuk menampilkan pesan baru.
3. Pada isi fungsi addNewMessage setelah komentar // Insert your code below ⬇️, tambahkan kode berikut:

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

Mengupdate kode untuk membuat kueri guna mendapatkan pesan

1. Masih di dalam file lib/firebase/firestore.js, cari fungsi getMessagesQuery yang perlu menampilkan kueri Cloud Firestore yang menemukan pesan yang disimpan di jalur koleksi users/{uid}/discussion/{discussionId}/messages.
2. Ganti seluruh fungsi getMessagesQuery dengan kode berikut:

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

Mengupdate kode untuk menangani dokumen pesan Cloud Firestore

1. Masih dalam file lib/firebase/firestore.js, temukan fungsi handleMessageDoc yang menerima dokumen Cloud Firestore yang mewakili satu pesan.
   Fungsi ini perlu memformat dan menyusun data dengan cara yang sesuai untuk UI aplikasi Chatbot.
2. Ganti seluruh fungsi handleMessageDoc dengan kode berikut:

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. Simpan file.

Menjalankan dan melihat aplikasi web Chatbot lagi (sekarang memiliki fungsi)

Untuk menjalankan dan melihat aplikasi web yang sekarang berfungsi, ikuti langkah-langkah berikut:

1. Di browser, kembali ke tab dengan aplikasi web Chatbot, lalu muat ulang halaman.
2. Klik Sign in with Google.
3. Jika perlu, pilih Akun Google Anda.
4. Setelah login, muat ulang halaman.
5. Pada kotak teks Enter your message, masukkan pesan, seperti Tell me about space.
6. Klik Send dan tunggu beberapa detik agar aplikasi web Chatbot merespons.

Manfaat lain dari ekstensi Chatbot with PaLM API adalah histori percakapannya.

Untuk melihat contoh kemampuannya dalam berkomunikasi dengan konteks historis, ikuti langkah-langkah berikut:

1. Di kotak teks Enter your message, ajukan pertanyaan, seperti What are five random fruits?.
2. Di kotak teks Enter your message, ajukan pertanyaan lanjutan yang terkait dengan pertanyaan sebelumnya, seperti And what about vegetables?.

Aplikasi web Chatbot merespons dengan pengetahuan historis. Meskipun pertanyaan terakhir Anda tidak menentukan lima sayuran acak, ekstensi Chatbot with PaLM API memahami pertanyaan lanjutan.

11. Menyiapkan ekstensi "Convert Text to Speech" untuk aplikasi Video Hint

Menginstal ekstensi Convert Text to Speech

1. Buka ekstensi Convert Text to Speech.
2. Klik Install in the Firebase console.
3. Pilih project Firebase.
4. Klik Next.
5. Di bagian Review APIs enabled and resources created, klik Enable di samping layanan apa pun yang disarankan kepada Anda:

6. Klik Next, lalu pilih Grant di samping izin apa pun yang disarankan kepada Anda.

7. Klik Next.
8. Di kotak teks Collection path, masukkan bot.
9. Di kotak teks Storage path, masukkan tts.
10. Biarkan semua nilai lain sebagai opsi defaultnya.
11. Klik Install extension dan tunggu hingga ekstensi diinstal.

Mencoba ekstensi Convert Text to Speech

Meskipun sasaran codelab ini adalah untuk berinteraksi dengan ekstensi Convert Text to Speech melalui aplikasi web, sebaiknya pahami cara kerja ekstensi dengan memicu ekstensi menggunakan Firebase console. Ekstensi terpicu saat dokumen Cloud Firestore dibuat di koleksi bot.

Untuk melihat cara kerja ekstensi menggunakan Firebase console, ikuti langkah-langkah berikut:

1. Di Firebase console, buka Firestore
2. Klik Start collection.
3. Di kotak teks Collection ID, masukkan bot.
4. Klik Next.

5. Di kotak teks Document ID, klik Auto-ID.
6. Di kotak teks Field, masukkan text.
7. Di kotak teks Value, masukkan The quick brown fox jumps over the lazy dog.
8. Klik Save.

Untuk melihat dan mendengarkan file MP3 yang Anda buat, ikuti langkah-langkah berikut:

1. Di Firebase console, buka Storage.
2. Di panel tempat Anda dapat mengupload file, catat nama bucket Anda setelah nilai gs://. Ini adalah nama bucket default Anda untuk project ini. Anda akan memerlukannya di berbagai tugas di sepanjang codelab ini.

3. Di Konsol Google Cloud, buka Cloud Storage.
4. Pilih project Anda.
   Jika Anda tidak melihat project dalam daftar project terbaru, klik Select Project untuk menemukan project Anda di pemilih project.

5. Pilih bucket Storage default Anda.
6. Buka folder tts/.
7. Klik file MP3.
8. Di akhir file MP3, klik dan perhatikan bahwa teks Anda dikonversi menjadi ucapan.

12. Menyiapkan ekstensi "Label Videos with Cloud Video AI" untuk aplikasi Video Hint

Menginstal ekstensi Label Videos with Cloud Video AI

1. Buka ekstensi Label Videos with Cloud Video AI.
2. Klik Install in Firebase console.
3. Pilih project Firebase.
4. Klik Next > Next > Next, hingga Anda mencapai bagian Configure extension.
5. Dari drop-down Cloud Functions location, pilih lokasi yang didukung (baik lokasi yang sebelumnya Anda pilih untuk Firestore dan Cloud Storage atau yang terdekat dengannya). Untuk lokasi yang didukung, lihat bagian location_id di AnnotateVideoRequest.
6. Dari drop-down Model, pilih Latest.
7. Dari drop-down Stationary camera, pilih No.
8. Biarkan semua nilai lain sebagai default.
9. Klik Install extension dan tunggu hingga ekstensi diinstal.

Mencoba ekstensi Label Videos with Cloud Video AI

Meskipun sasaran codelab ini adalah untuk berinteraksi dengan ekstensi Label Videos with Cloud Video AI melalui aplikasi web, sebaiknya pahami cara kerja ekstensi dengan memicu ekstensi menggunakan Firebase console. Ekstensi terpicu saat file video diupload ke bucket Storage Anda.

Untuk melihat cara kerja ekstensi menggunakan Firebase console, ikuti langkah-langkah berikut:

1. Buka Storage dalam project Firebase Anda > Create folder.
2. Di kotak teks Folder Name, masukkan video_annotation_input.

3. Klik Add folder.
4. Di folder video_annotation_input, klik Upload file.
5. Di folder ai-extensions-codelab/video-hint-start/public/videos yang Anda clone atau download sebelumnya, pilih file video pertama.
6. Kembali ke browser Anda, di Konsol Google Cloud, buka Cloud Storage.
7. Pilih bucket Storage default, yang telah Anda catat sebelumnya.
8. Klik folder video_annotation_output.
   Jika Anda tidak melihat folder video_annotation_output, tunggu beberapa detik dan muat ulang halaman karena Video Intelligence API mungkin masih memproses video.

9. Perhatikan bahwa ada file JSON dengan nama yang mirip dengan file yang Anda upload sebelumnya.
10. Klik Download FILENAME.
11. Buka file JSON yang didownload di editor kode Anda. Format ini berisi output mentah dari Video Intelligence API, yang mencakup label terdeteksi pada video yang Anda upload.

13. Menyiapkan aplikasi Video Hint untuk menggunakan Firebase

Untuk menjalankan aplikasi Video Hint, Anda perlu menyiapkan kode aplikasi dan Firebase CLI untuk berinteraksi dengan project Firebase Anda.

Menambahkan layanan dan konfigurasi Firebase ke kode aplikasi Anda

Untuk menggunakan Firebase, codebase aplikasi Anda memerlukan Firebase SDK untuk layanan yang ingin digunakan dan konfigurasi Firebase yang memberi tahu SDK tersebut project Firebase mana yang akan digunakan.

Aplikasi contoh codelab ini sudah menyertakan semua kode impor dan inisialisasi yang diperlukan untuk SDK (lihat video-hint-start/lib/firebase/firebase.js), sehingga Anda tidak perlu menambahkannya. Namun, aplikasi contoh hanya memiliki nilai placeholder untuk konfigurasi Firebase (lihat video-hint-start/lib/firebase/firebase-config.js), sehingga Anda perlu mendaftarkan aplikasi ke project Firebase guna mendapatkan nilai konfigurasi Firebase yang unik untuk aplikasi Anda.

1. Di Firebase console, di project Firebase Anda, buka Project overview, lalu klik Web (atau klik Add app jika Anda sudah mendaftarkan aplikasi ke project).
2. Di kotak teks App nickname, masukkan nama panggilan aplikasi yang mudah diingat, seperti My Video Hint app.
3. Jangan centang kotak Also set up Firebase Hosting for this app. Anda akan melakukan langkah-langkah ini nanti di codelab.
4. Klik Register app.
5. Konsol menampilkan cuplikan kode untuk menambahkan dan menginisialisasi Firebase SDK dengan objek konfigurasi Firebase khusus aplikasi. Salin semua properti di objek konfigurasi Firebase.
6. Di editor kode, buka file video-hint-start/lib/firebase/firebase-config.js.
7. Ganti nilai placeholder dengan nilai yang baru saja Anda salin. Tidak masalah jika Anda memiliki properti dan nilai untuk layanan Firebase yang tidak digunakan di aplikasi Video Hint.
8. Simpan file.
9. Kembali ke Firebase console, klik Continue to console.

Menyiapkan terminal Anda untuk menjalankan perintah Firebase CLI terhadap project Firebase Anda

1. Di terminal Anda, tekan Control+C untuk menghentikan server menjalankan aplikasi web sebelumnya.
2. Di terminal Anda, buka folder aplikasi web video-hint-start:

   cd ../video-hint-start
   

3. Buat perintah run Firebase CLI terhadap project Firebase tertentu:

   firebase use YOUR_PROJECT_ID
   

Menyiapkan codebase aplikasi Anda untuk menggunakan Firebase Hosting berbasis framework

Codelab ini menggunakan framework web dengan Hosting (pratinjau) dengan aplikasi web Video Hint.

1. Di terminal Anda, aktifkan framework web dengan Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Lakukan inisialisasi Firebase Hosting:

   firebase init hosting
   

3. Saat diminta dengan Detected an existing Next.js codebase in your current directory, should we use this?, tekan Y.
4. Saat diminta dengan In which region would you like to host server-side content, if applicable?, pilih region default atau lokasi yang sebelumnya Anda pilih untuk Firestore dan Cloud Storage, lalu tekan Enter (atau return di macOS).
5. Saat diminta dengan Set up automatic builds and deploys with GitHub?, tekan N.

Menjalankan dan melihat aplikasi web Video Hint

1. Di terminal, instal dependensi di folder video-hint-start dan functions, lalu jalankan aplikasi:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. Di browser, buka URL Hosting yang dihosting secara lokal. Dalam kebanyakan kasus, URL-nya adalah http://localhost:5000/ atau yang serupa.

Halaman seharusnya dimuat, tetapi Anda akan melihat bahwa beberapa fitur tidak ada. Kita akan menambahkannya pada langkah berikutnya di codelab ini.

Memecahkan masalah saat menjalankan aplikasi web

Jika Anda melihat pesan error seperti Error: The query requires an index. You can create it here: https://console.firebase.google.com di panel Console pada DevTools, ikuti langkah-langkah berikut:

1. Buka URL yang disediakan.

2. Klik Save dan tunggu hingga status berubah dari Building menjadi Enabled.

14. Menambahkan fungsi ke aplikasi Video Hint

Pada langkah terakhir codelab ini, Anda telah menjalankan aplikasi Video Hint secara lokal, tetapi tidak memiliki banyak fungsi dan belum menggunakan ekstensi yang diinstal. Pada langkah codelab ini, Anda akan menambahkan fungsi ini dan menggunakan aplikasi web untuk memicu ekstensi.

Men-deploy Aturan Keamanan

Aplikasi contoh codelab ini berisi kumpulan Aturan Keamanan untuk Firestore dan Cloud Storage for Firebase. Setelah Anda men-deploy Aturan Keamanan ini ke project Firebase, data di database dan bucket lebih terlindungi dari penyalahgunaan.

Anda dapat melihat aturan ini di file firestore.rules dan storage.rules.

1. Untuk men-deploy Aturan Keamanan ini, jalankan perintah ini di terminal Anda:

   firebase deploy --only firestore:rules,storage
   

2. Jika ditanya: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", pilih Yes.

Mengupdate kode untuk menggabungkan fungsi

1. Di editor kode Anda, luaskan folder functions.
   Folder ini berisi beberapa fungsi, yang digabungkan untuk membentuk pipeline ekstensi. Tabel berikut mencantumkan dan mendeskripsikan setiap fungsi:

   Fungsi	Deskripsi
   functions/01-handle-video-upload.js	Langkah pertama dalam pipeline ekstensi. Fungsi ini memproses file video yang diupload pengguna.
   functions/02-handle-video-labels.js	Langkah kedua dalam pipeline ekstensi. Fungsi ini memproses file label video, yang dihasilkan oleh ekstensi storage-label-videos.
   functions/03-handle-audio-file.js	Langkah ketiga dalam pipeline ekstensi. Fungsi ini menangani file audio yang ditranskripsi.

   Namun, Anda masih perlu menambahkan file yang mengelompokkan fungsi tersebut.
2. Di file functions/index.js, tambahkan kode berikut:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

Kode ini menggunakan modul JavaScript untuk mengimpor dan mengekspor fungsi dari file index.js sehingga ada satu lokasi terpusat untuk semua fungsi.

Mengupdate kode untuk menangani upload video

1. Di editor kode, buka file lib/firebase/storage.js.
2. Cari fungsi uploadVideo.
   Fungsi ini menerima parameter userId, filePath, dan file. Data ini cukup untuk mengupload file ke Cloud Storage.
3. Pada isi fungsi uploadVideo, tambahkan kode berikut:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

Men-deploy fungsi Anda

Untuk men-deploy fungsi dengan Firebase CLI, ikuti langkah-langkah berikut:

1. Di terminal saat masih berada di folder video-hint-start, tekan Control+C untuk menghentikan proses saat ini.
2. Deploy fungsi Anda:

   firebase deploy --only functions
   

   Jika Anda ditanya tentang cara menghapus Cloud Functions sebelumnya, pilih No.
3. Jika Anda melihat pesan yang mirip dengan Permission denied while using the Eventarc Service Agent, tunggu beberapa menit lalu coba lagi perintahnya.
4. Setelah perintah selesai, jalankan kembali aplikasi secara lokal:

   firebase emulators:start --only hosting
   

Menjalankan dan melihat kembali aplikasi web Video Hint (sekarang memiliki fungsi)

Untuk menjalankan dan melihat aplikasi web yang sekarang berfungsi, ikuti langkah-langkah berikut:

1. Di browser, temukan tab tempat Anda membuka http://localhost:5000.
2. Jika perlu, klik Sign in with Google dan pilih akun Google Anda.
3. Klik Upload Example video #1 dan tunggu beberapa menit untuk melihat hasil ringkasan video.
4. Jika Anda tidak melihat hasil apa pun setelah mengupload video, lihat Troubleshoot errors with Cloud Functions di lampiran codelab ini.

15. Kesimpulan

Selamat! Anda telah mencapai banyak hal dalam codelab ini.

Firebase Extensions yang diinstal dan dikonfigurasi

Anda telah menggunakan Firebase console untuk mengonfigurasi dan menginstal berbagai ekstensi AI. Ekstensi merupakan cara yang praktis karena Anda tidak perlu menulis banyak kode boilerplate yang berkaitan dengan autentikasi dengan layanan Google Cloud, membaca dan menulis dari Firestore, serta berinteraksi dengan layanan Google Cloud, serta berbagai variasi yang terlibat dalam tugas-tugas tersebut.

Bekerja dengan ekstensi menggunakan Firebase console

Alih-alih langsung menulis kode, Anda meluangkan waktu untuk memahami cara kerja ekstensi AI, berdasarkan input yang Anda berikan melalui konsol ke Firestore atau Cloud Storage. Jenis interaksi ini dapat sangat berguna jika Anda perlu men-debug output ekstensi.

Membangun tiga aplikasi web yang didukung AI dan menggunakan Firebase Extensions

Reviewly

Di aplikasi web Reviewly, Anda menggunakan ekstensi Language Tasks with PaLM API untuk meringkas ulasan panjang yang diberikan pengguna tentang sebuah produk kaus. Anda juga meminta model bahasa untuk memberikan respons JSON atas kueri Anda. Dalam hal ini, JSON memberikan rating bintang dan ringkasan ulasan dari ulasan asli dalam bentuk panjang.

Latihan opsional: Perusahaan kaus senang dengan ulasan yang diringkas, tetapi mereka meminta ringkasan tambahan tentang sifat kerusakannya. Dapatkah Anda menyesuaikan perintah untuk menampilkan ringkasan kerusakan, lalu menyertakan ringkasan tersebut dalam antarmuka pengguna aplikasi web?

Chatbot

Di aplikasi web Chatbot, Anda menggunakan ekstensi Chatbot with PaLM API untuk menyediakan antarmuka chat interaktif kepada pengguna, yang menyertakan konteks historis dalam percakapan - tempat setiap pesan disimpan di dokumen Firestore yang dicakupkan ke pengguna tertentu.

Latihan opsional: Para siswa senang dengan chatbot, tetapi staf menginginkan beberapa peningkatan. Siswa seharusnya diberi pertanyaan yang menggugah pemikiran setelah memberikan jawabannya. Contoh:

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

Petunjuk: Anda dapat menggunakan opsi konteks yang dapat dikonfigurasi untuk mencapai hal ini.

Video Hint

Di aplikasi web Video Hint, Anda menggunakan ekstensi Convert Text to Speech, Language Tasks with PaLM API, dan Label Video with Cloud Video untuk membentuk pipeline ekstensi yang menghasilkan deskripsi teks dan audio dari suatu video.

Latihan opsional: Departemen pemerintah menganggap prototipe tersebut menarik, dan sekarang mereka juga ingin pengguna dapat mengklik label berbasis teks untuk melompat ke titik dalam video tempat label terdeteksi.

16. Lampiran: Memecahkan masalah error dengan Cloud Functions

Jika aplikasi web tidak berfungsi seperti yang diharapkan, dan Anda merasa hal tersebut mungkin disebabkan oleh fungsi, ikuti langkah-langkah di halaman pemecahan masalah ini.

Mengizinkan akses publik yang tidak diautentikasi

Jika Anda mendapatkan error terkait izin di panel Console pada Chrome DevTools, ikuti langkah-langkah berikut:

1. Baca halaman Ringkasan autentikasi | Cloud Run
2. Klik link untuk melihat dan menyelesaikan tugas yang diperlukan untuk Mengizinkan akses yang tidak diautentikasi publik ke fungsi tersebut.

3. Buka kembali aplikasi Reviewly. Misalnya: http://localhost:8080.
4. Klik Add some mock reviews dan tunggu beberapa detik.
   • Jika ulasan muncul: Anda tidak perlu melanjutkan langkah-langkah pemecahan masalah ini. Anda dapat langsung membuka bagian Menyiapkan aplikasi web Chatbot dalam codelab ini.
   • Jika ulasan tidak muncul: Lanjutkan ke bagian pemecahan masalah ini.

Menangani error izin yang tidak memadai

1. Di Firebase console, buka Functions.
2. Arahkan kursor ke fungsi addMockReviews, lalu klik > View logs.

3. Scroll log sampai Anda menemukan error yang mirip dengan salah satu error berikut:

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. Di Konsol Google Cloud, buka halaman IAM Permissions, lalu pilih project Anda.
5. Di tabel, cari kolom Name.
   Di halaman IAM & Admin, ada tabel pengguna dan peran. Kolom nama dalam tabel menjelaskan fungsi dari pengguna atau akun utama. Anda mungkin memiliki akun utama dengan nama Default compute service account.

Jika Anda melihat Default compute service account, ikuti langkah-langkah berikut:

1. Klik Edit principal.

2. Lanjutkan ke bagian Add roles to the Default compute service account di codelab ini.

Jika Anda tidak melihat Default compute service account, ikuti langkah-langkah berikut:

1. Klik Grant Access.
2. Di kotak teks New principals, masukkan compute.
3. Di menu saran otomatis yang muncul, pilih Default compute service account.

Menambahkan peran ke akun layanan komputasi default

Di bagian Assign roles pada default compute service account:

1. Luaskan menu Select a role.
2. Di kotak teks Filter, masukkan Cloud Datastore User.
3. Pada menu saran otomatis yang muncul, pilih Cloud Datastore user.
4. Klik Add another role.
   1. Luaskan menu Select a role.
   2. Di kotak teks Filter, masukkan Cloud Storage for Firebase Admin.
   3. Di menu saran otomatis yang muncul, pilih Cloud Storage for Firebase Admin.
5. Klik Add another role.
   1. Luaskan menu Select a role.
   2. Di kotak teks Filter, masukkan Cloud Storage for Firebase Service Agent.
   3. Di menu saran otomatis yang muncul, pilih Cloud Storage for Firebase Service Agent.
6. Klik Save.