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.
Layanan | Alasan penggunaan |
Menyimpan teks setiap ulasan, yang kemudian diproses oleh ekstensi. | |
Men-deploy Aturan Keamanan untuk membantu mengamankan akses ke layanan Firebase Anda. | |
Menambahkan ulasan tiruan ke aplikasi web. | |
Menginstal, mengonfigurasi, dan memicu ekstensi Language Tasks with PaLM API untuk meringkas setiap ulasan yang ditambahkan ke Firestore |
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.
Layanan | Alasan penggunaan |
Menggunakan login dengan Google untuk mengelola pengguna. | |
Menyimpan teks dari setiap percakapan; pesan dari pengguna diproses oleh ekstensi. | |
Men-deploy Aturan Keamanan untuk membantu mengamankan akses ke layanan Firebase Anda. | |
Menginstal, mengonfigurasi, dan memicu ekstensi Chatbot with PaLM API untuk merespons saat pesan baru ditambahkan ke Firestore | |
Menggunakan Local Emulator Suite untuk menjalankan aplikasi secara lokal. | |
Menggunakan framework web dengan Hosting untuk menyalurkan aplikasi. |
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.
Layanan | Alasan penggunaan |
Menggunakan login dengan Google untuk mengelola pengguna. | |
Menyimpan teks dari setiap ringkasan video. | |
Menyimpan video dan file JSON dengan deskripsi video. | |
Men-deploy Aturan Keamanan untuk membantu mengamankan akses ke layanan Firebase Anda. | |
Menginstal, mengonfigurasi, dan memicu berbagai ekstensi (lihat daftar di bawah). | |
Membangun pipeline antar-ekstensi dengan Cloud Functions. | |
Menggunakan Local Emulator Suite untuk menjalankan aplikasi secara lokal. | |
Menggunakan framework web dengan Hosting untuk menyalurkan aplikasi. |
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
- Di terminal, pastikan Anda telah menginstal Node.js v20.0.0 atau yang lebih tinggi:
node -v
- Jika Anda tidak memiliki Node.js v20.0.0 atau versi yang lebih tinggi, download dan instal versi tersebut.
Mendownload repositori
- Jika Anda sudah menginstal git, clone repositori GitHub codelab:
git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
- 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:
Folder | Deskripsi |
| Kode awal untuk aplikasi web Reviewly |
| Kode solusi untuk aplikasi web Reviewly |
| Kode awal untuk aplikasi web Chatbot |
| Kode solusi untuk aplikasi web Chatbot |
| Kode awal untuk aplikasi web Video Hint |
| Kode solusi untuk aplikasi web Video Hint |
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
- Di terminal Anda, buka folder
ai-extensions-codelab
dan login ke Firebase:cd ai-extensions-codelab firebase login
- Jika terminal Anda menyatakan bahwa Anda telah login ke Firebase, lanjutkan ke bagian Set up your Firebase project di codelab ini.
- Bergantung pada apakah Anda ingin Firebase mengumpulkan data, masukkan
Y
atauN
. - 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
- Di Firebase console, klik Create project.
- Di kotak teks Enter your project name, masukkan
AI Extensions Codelab
(atau nama project pilihan Anda), lalu klik Continue. - Untuk codelab ini, Anda tidak memerlukan Google Analytics. Oleh karena itu, nonaktifkan opsi Enable Google Analytics for this project.
- Klik Create project.
- Tunggu hingga project Anda disediakan, lalu klik Continue.
- 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.
- Di Firebase console, buka halaman Service Accounts di Project settings Anda.
- Klik Generate new private key > Generate Key.
- 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
- 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"
- 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:
- Di Firebase console, pilih upgrade your plan.
- 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.
- Di Firebase console, buka Authentication.
- Klik Get started.
- Di kolom Additional providers, klik Google > Enable.
- Di kotak teks Public-facing name for project, masukkan nama yang mudah diingat, seperti
My AI Extensions Codelab
. - Dari drop-down Support email for project, pilih alamat email Anda.
- 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.
- Di Firebase console, buka Firestore.
- 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. - 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). - 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).
- Di Firebase console, buka Storage.
- 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. - Lokasi bucket Anda seharusnya sudah dipilih (karena Anda menyiapkan Firestore di langkah sebelumnya).
- 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
- Buka ekstensi Language Tasks with PaLM API.
- Klik Install in the Firebase console.
- Pilih project Firebase.
- Di bagian Review APIs enabled and resources created, klik Enable di samping layanan apa pun yang disarankan kepada Anda:
- Klik Next > Next.
- Di kotak teks Collection path, masukkan
bot
. - Di kotak teks Prompt, masukkan
{{ input }}
. - Di kotak teks Variable fields, masukkan
input
. - Di kotak teks Response field, masukkan
text
. - Dari drop-down Cloud Functions location, pilih Iowa (us-central1) atau lokasi yang sebelumnya Anda pilih untuk Firestore dan Cloud Storage.
- Dari drop-down Language model, pilih text-bison-001.
- Biarkan semua nilai lain sebagai default.
- 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:
- Di Firebase console, buka Firestore.
- Di koleksi
bot
, klikAdd document.
- Di kotak teks Document ID, klik Auto-ID.
- Di kotak teks Field, masukkan
input
. - Di kotak teks Value, masukkan
Tell me about the moon
. - 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.
- Di Firebase console, di project Firebase Anda, buka Project overview, lalu klik
Web.
- Di kotak teks App nickname, masukkan nama panggilan aplikasi yang mudah diingat, seperti
My Reviewly app
. - Jangan centang kotak Also set up Firebase Hosting for this app. Anda akan melakukan langkah-langkah ini nanti di codelab.
- Klik Register app.
- Konsol menampilkan cuplikan kode untuk menambahkan dan menginisialisasi Firebase SDK dengan objek konfigurasi Firebase khusus aplikasi. Salin semua properti di objek konfigurasi Firebase.
- Di editor kode, buka file
reviewly-start/js/firebase-config.js
. - 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.
- Simpan file.
- Kembali ke Firebase console, klik Continue to console.
Menyiapkan terminal Anda untuk menjalankan perintah Firebase CLI terhadap project Firebase Anda
- Di terminal Anda, buka folder
ai-extensions-codelab
yang Anda download sebelumnya. - Buka folder aplikasi web
reviewly-start
:cd reviewly-start
- 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:
- Di terminal, instal dependensi, lalu jalankan aplikasi web:
npm install # Include the parentheses in the following command. (cd functions && npm install) npm run dev
- 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
.
- Untuk men-deploy Aturan Keamanan ini, jalankan perintah ini di terminal Anda:
firebase deploy --only firestore:rules,storage
- 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.
- Di editor kode, buka file
functions/add-mock-reviews.js
. - 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.`;
- Setelah variabel
reviewWithPrompt
, ganti variabelreviewDocument
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);
- Simpan file.
- Di file
js/reviews.js
, setelah komentarInsert code below, to import your Firebase Callable Cloud Function
, impor fungsi callable HTTP Firebase Anda dengan helperhttpsCallable
:const addMockReviews = httpsCallable(functions, "addMockReviews");
- Setelah komentar
Insert code below, to invoke your Firebase Callable Cloud Function
, panggil fungsi callable HTTP Firebase Anda:await addMockReviews();
- 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:
- Di terminal saat masih berada di folder
reviewly-start
, tekanControl+C
untuk menghentikan server. - Men-deploy fungsi:
firebase deploy --only functions
- 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:
- Di terminal Anda, jalankan kembali server:
npm run dev
- Di browser Anda, buka URL yang ditampilkan di terminal Anda. Misalnya: http://localhost:8080.
- 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. - 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
- Buka ekstensi Chatbot with PaLM API.
- Klik Install in Firebase console.
- Pilih project Firebase.
- Klik Next > Next > Next, hingga Anda mencapai bagian Configure extension.
- Di kotak teks Collection path, masukkan
users/{uid}/discussion/{discussionId}/messages
. - Dari drop-down Cloud Functions location, pilih Iowa (us-central1) atau lokasi yang sebelumnya Anda pilih untuk Firestore dan Cloud Storage.
- Dari drop-down Language model, pilih chat-bison.
- Biarkan semua nilai lain sebagai default.
- 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
.
- Di Firebase console, buka Firestore.
- Klik
Start collection.
- Di kotak teks Collection ID, masukkan
users
, lalu klik Next. - Di kotak teks Document ID, klik Auto-ID, lalu klik Save.
- Di kotak teks Collection ID, masukkan
- Di koleksi
users
, klikStart collection.
- Di kotak teks Collection ID, masukkan
discussion
, lalu klik Next. - Di kotak teks Document ID, klik Auto-ID, lalu klik Save.
- Di kotak teks Collection ID, masukkan
- Di koleksi
discussion
, klikStart collection.
- Di kotak teks Collection ID, masukkan
messages
, lalu klik Next. - Di kotak teks Document ID, klik Auto-ID.
- Di kotak teks Field, masukkan
prompt
. - Di kotak teks Value, masukkan
Tell me 5 random fruits
. - Klik Save dan tunggu beberapa detik. Koleksi
messages
kini menyertakan dokumen yang berisi respons terhadap kueri Anda.
- Di kotak teks Collection ID, masukkan
- Di koleksi
messages
, klikAdd document.
- Di kotak teks Document ID, klik Auto-ID.
- Di kotak teks Field, masukkan
prompt
. - Di kotak teks Value, masukkan
And now, vegetables
. - 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.
- Di Firebase console, di project Firebase Anda, buka Project overview, lalu klik
Web (atau klik Add app jika Anda sudah mendaftarkan aplikasi ke project).
- Di kotak teks App nickname, masukkan nama panggilan aplikasi yang mudah diingat, seperti
My Chatbot app
. - Jangan centang kotak Also set up Firebase Hosting for this app. Anda akan melakukan langkah-langkah ini nanti di codelab.
- Klik Register app.
- Konsol menampilkan cuplikan kode untuk menambahkan dan menginisialisasi Firebase SDK dengan objek konfigurasi Firebase khusus aplikasi. Salin semua properti di objek konfigurasi Firebase.
- Di editor kode, buka file
chatbot-start/lib/firebase/firebase-config.js
. - 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.
- Simpan file.
- Kembali ke Firebase console, klik Continue to console.
Menyiapkan terminal Anda untuk menjalankan perintah Firebase CLI terhadap project Firebase Anda
- Di terminal Anda, tekan
Control+C
untuk menghentikan server menjalankan aplikasi web sebelumnya. - Di terminal Anda, buka folder aplikasi web
chatbot-start
:cd ../chatbot-start
- 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.
- Di terminal Anda, aktifkan framework web dengan Firebase Hosting:
firebase experiments:enable webframeworks
- Lakukan inisialisasi Firebase Hosting:
firebase init hosting
- Saat diminta dengan
Detected an existing
Next.js
codebase in your current directory, should we use this?
, tekan Y. - 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 tekanEnter
(ataureturn
di macOS). - Saat diminta dengan
Set up automatic builds and deploys with GitHub?
, tekanN
.
Menjalankan dan melihat aplikasi web Chatbot
- Di terminal, instal dependensi, lalu jalankan aplikasi web:
npm install firebase emulators:start --only hosting
- 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
.
- Untuk men-deploy Aturan Keamanan ini, jalankan perintah ini di terminal Anda:
firebase deploy --only firestore:rules,storage
- 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.
- Di editor kode, buka file
lib/firebase/firestore.js
. - 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
- 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
- Masih di dalam file
lib/firebase/firestore.js
, cari fungsigetMessagesQuery
yang perlu menampilkan kueri Cloud Firestore yang menemukan pesan yang disimpan di jalur koleksiusers/{uid}/discussion/{discussionId}/messages
. - 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
- Masih dalam file
lib/firebase/firestore.js
, temukan fungsihandleMessageDoc
yang menerima dokumen Cloud Firestore yang mewakili satu pesan.
Fungsi ini perlu memformat dan menyusun data dengan cara yang sesuai untuk UI aplikasi Chatbot. - 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; }
- 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:
- Di browser, kembali ke tab dengan aplikasi web Chatbot, lalu muat ulang halaman.
- Klik Sign in with Google.
- Jika perlu, pilih Akun Google Anda.
- Setelah login, muat ulang halaman.
- Pada kotak teks Enter your message, masukkan pesan, seperti
Tell me about space
. - 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:
- Di kotak teks Enter your message, ajukan pertanyaan, seperti
What are five random fruits?
. - 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
- Buka ekstensi Convert Text to Speech.
- Klik Install in the Firebase console.
- Pilih project Firebase.
- Klik Next.
- Di bagian Review APIs enabled and resources created, klik Enable di samping layanan apa pun yang disarankan kepada Anda:
- Klik Next, lalu pilih Grant di samping izin apa pun yang disarankan kepada Anda.
- Klik Next.
- Di kotak teks Collection path, masukkan
bot
. - Di kotak teks Storage path, masukkan
tts
. - Biarkan semua nilai lain sebagai opsi defaultnya.
- 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:
- Di Firebase console, buka Firestore
- Klik
Start collection.
- Di kotak teks Collection ID, masukkan
bot
. - Klik Next.
- Di kotak teks Document ID, klik Auto-ID.
- Di kotak teks Field, masukkan
text
. - Di kotak teks Value, masukkan
The quick brown fox jumps over the lazy dog
. - Klik Save.
Untuk melihat dan mendengarkan file MP3 yang Anda buat, ikuti langkah-langkah berikut:
- Di Firebase console, buka Storage.
- 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.
- Di Konsol Google Cloud, buka Cloud Storage.
- Pilih project Anda.
Jika Anda tidak melihat project dalam daftar project terbaru, klik Select Project untuk menemukan project Anda di pemilih project.
- Pilih bucket Storage default Anda.
- Buka folder
tts/
. - Klik file MP3.
- 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
- Buka ekstensi Label Videos with Cloud Video AI.
- Klik Install in Firebase console.
- Pilih project Firebase.
- Klik Next > Next > Next, hingga Anda mencapai bagian Configure extension.
- 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
diAnnotateVideoRequest
. - Dari drop-down Model, pilih Latest.
- Dari drop-down Stationary camera, pilih No.
- Biarkan semua nilai lain sebagai default.
- 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:
- Buka Storage dalam project Firebase Anda >
Create folder.
- Di kotak teks Folder Name, masukkan
video_annotation_input
.
- Klik Add folder.
- Di folder
video_annotation_input
, klik Upload file. - Di folder
ai-extensions-codelab/video-hint-start/public/videos
yang Anda clone atau download sebelumnya, pilih file video pertama. - Kembali ke browser Anda, di Konsol Google Cloud, buka Cloud Storage.
- Pilih bucket Storage default, yang telah Anda catat sebelumnya.
- Klik folder
video_annotation_output
.
Jika Anda tidak melihat foldervideo_annotation_output
, tunggu beberapa detik dan muat ulang halaman karena Video Intelligence API mungkin masih memproses video.
- Perhatikan bahwa ada file JSON dengan nama yang mirip dengan file yang Anda upload sebelumnya.
- Klik
Download FILENAME.
- 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.
- Di Firebase console, di project Firebase Anda, buka Project overview, lalu klik
Web (atau klik Add app jika Anda sudah mendaftarkan aplikasi ke project).
- Di kotak teks App nickname, masukkan nama panggilan aplikasi yang mudah diingat, seperti
My Video Hint app
. - Jangan centang kotak Also set up Firebase Hosting for this app. Anda akan melakukan langkah-langkah ini nanti di codelab.
- Klik Register app.
- Konsol menampilkan cuplikan kode untuk menambahkan dan menginisialisasi Firebase SDK dengan objek konfigurasi Firebase khusus aplikasi. Salin semua properti di objek konfigurasi Firebase.
- Di editor kode, buka file
video-hint-start/lib/firebase/firebase-config.js
. - 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.
- Simpan file.
- Kembali ke Firebase console, klik Continue to console.
Menyiapkan terminal Anda untuk menjalankan perintah Firebase CLI terhadap project Firebase Anda
- Di terminal Anda, tekan
Control+C
untuk menghentikan server menjalankan aplikasi web sebelumnya. - Di terminal Anda, buka folder aplikasi web
video-hint-start
:cd ../video-hint-start
- 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.
- Di terminal Anda, aktifkan framework web dengan Firebase Hosting:
firebase experiments:enable webframeworks
- Lakukan inisialisasi Firebase Hosting:
firebase init hosting
- Saat diminta dengan
Detected an existing
Next.js
codebase in your current directory, should we use this?
, tekan Y. - 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 tekanEnter
(ataureturn
di macOS). - Saat diminta dengan
Set up automatic builds and deploys with GitHub?
, tekanN
.
Menjalankan dan melihat aplikasi web Video Hint
- Di terminal, instal dependensi di folder
video-hint-start
danfunctions
, lalu jalankan aplikasi:npm install # Include the parentheses in the following command. (cd functions && npm install) firebase emulators:start --only hosting
- 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:
- Buka URL yang disediakan.
- 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
.
- Untuk men-deploy Aturan Keamanan ini, jalankan perintah ini di terminal Anda:
firebase deploy --only firestore:rules,storage
- 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
- 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.
- 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
- Di editor kode, buka file
lib/firebase/storage.js
. - Cari fungsi
uploadVideo
.
Fungsi ini menerima parameteruserId
,filePath
, danfile
. Data ini cukup untuk mengupload file ke Cloud Storage. - 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:
- Di terminal saat masih berada di folder
video-hint-start
, tekanControl+C
untuk menghentikan proses saat ini. - Deploy fungsi Anda:
firebase deploy --only functions
Jika Anda ditanya tentang cara menghapus Cloud Functions sebelumnya, pilihNo
. - Jika Anda melihat pesan yang mirip dengan
Permission denied while using the Eventarc Service Agent
, tunggu beberapa menit lalu coba lagi perintahnya. - 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:
- Di browser, temukan tab tempat Anda membuka http://localhost:5000.
- Jika perlu, klik Sign in with Google dan pilih akun Google Anda.
- Klik Upload Example video #1 dan tunggu beberapa menit untuk melihat hasil ringkasan video.
- 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:
- Baca halaman Ringkasan autentikasi | Cloud Run
- Klik link untuk melihat dan menyelesaikan tugas yang diperlukan untuk Mengizinkan akses yang tidak diautentikasi publik ke fungsi tersebut.
- Buka kembali aplikasi Reviewly. Misalnya: http://localhost:8080.
- 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
- Di Firebase console, buka Functions.
- Arahkan kursor ke fungsi
addMockReviews
, lalu klik> View logs.
- 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).
- Di Konsol Google Cloud, buka halaman IAM Permissions, lalu pilih project Anda.
- 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:
- Klik
Edit principal.
- 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:
- Klik Grant Access.
- Di kotak teks New principals, masukkan
compute
. - 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:
- Luaskan menu Select a role.
- Di kotak teks Filter, masukkan
Cloud Datastore User
. - Pada menu saran otomatis yang muncul, pilih Cloud Datastore user.
- Klik
Add another role.
- Luaskan menu Select a role.
- Di kotak teks Filter, masukkan
Cloud Storage for Firebase Admin
. - Di menu saran otomatis yang muncul, pilih Cloud Storage for Firebase Admin.
- Klik
Add another role.
- Luaskan menu Select a role.
- Di kotak teks Filter, masukkan
Cloud Storage for Firebase Service Agent
. - Di menu saran otomatis yang muncul, pilih Cloud Storage for Firebase Service Agent.
- Klik Save.