Membangun aplikasi web yang didukung AI dengan Firebase Extensions untuk Gemini API

1. Sebelum memulai

Firebase Extensions memungkinkan Anda menambahkan fungsi yang telah dikemas sebelumnya ke aplikasi dengan kode minimal, bahkan fungsi yang didukung AI. Codelab ini menunjukkan cara mengintegrasikan dua Firebase Extensions di aplikasi web sehingga Anda dapat memanfaatkan Gemini API untuk membuat deskripsi gambar, ringkasan, dan bahkan rekomendasi yang dipersonalisasi berdasarkan konteks yang diberikan dan input pengguna akhir.

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

Prasyarat

• Pengetahuan tentang Node.js, Next.js, dan TypeScript.

Yang akan Anda pelajari

• Cara menggunakan Firebase Extensions untuk Gemini API guna memproses bahasa.
• Cara menggunakan Cloud Functions for Firebase untuk membuat konteks yang ditambahkan untuk model bahasa Anda.
• Cara menggunakan JavaScript untuk mengakses output yang dihasilkan oleh Firebase 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, layanan Firebase, dan ekstensi

Di bagian ini, Anda akan meninjau aplikasi web yang akan Anda build dengan codelab ini, serta mempelajari layanan Firebase dan Firebase Extensions yang akan Anda gunakan.

Aplikasi web

Dalam codelab ini, Anda akan mem-build aplikasi web bernama Friendly Conf.

Staf Friendly Conference memutuskan untuk menggunakan AI guna menghasilkan pengalaman pengguna yang menyenangkan dan dipersonalisasi bagi para tamu. Aplikasi konferensi yang telah selesai memberi peserta chatbot AI percakapan yang didukung oleh model AI generatif multimodal (juga dikenal sebagai model bahasa besar atau LLM), dan dapat menjawab pertanyaan tentang topik umum, yang disesuaikan dengan jadwal dan topik konferensi. Chatbot memiliki konteks historis dan pengetahuan tentang tanggal/waktu saat ini serta topik dan jadwal Friendly Conf, sehingga responsnya dapat memperhitungkan semua konteks ini.

Layanan Firebase

Dalam codelab ini, Anda akan menggunakan banyak layanan dan fitur Firebase, dan sebagian besar kode awal untuk layanan dan fitur tersebut disediakan untuk Anda. Tabel berikut berisi layanan yang akan Anda gunakan dan alasan penggunaannya.

Firebase Extensions

Firebase Extensions yang akan Anda gunakan dalam codelab ini mencakup hal berikut:

• Mem-build Chatbot dengan Gemini API
• Tugas Multimodal dengan Gemini API

Ekstensi berguna karena bereaksi terhadap peristiwa yang terjadi di project Firebase Anda. Kedua ekstensi yang digunakan dalam codelab ini akan merespons saat Anda membuat dokumen baru di koleksi yang telah dikonfigurasi sebelumnya di Cloud Firestore.

3. Menyiapkan lingkungan pengembangan

Memverifikasi versi Node.js Anda

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

   node -v
   

2. Jika Anda tidak memiliki Node.js versi 20.0.0 atau yang lebih tinggi, download versi LTS terbaru dan instal.

Mendapatkan kode sumber untuk codelab

Jika Anda memiliki akun GitHub:

1. Buat repositori baru menggunakan template kami dari github.com/FirebaseExtended/codelab-gemini-api-extensions
2. Clone repositori GitHub codelab yang baru saja Anda buat:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

Jika Anda belum menginstal git atau memilih untuk tidak membuat repo baru:

Download repositori GitHub sebagai file ZIP.

Meninjau struktur folder

Folder root berisi file README.md yang menawarkan panduan memulai untuk menjalankan aplikasi web, menggunakan petunjuk yang disederhanakan. Namun, jika Anda adalah pemula, Anda harus menyelesaikan codelab ini (bukan memulai cepat) karena codelab ini 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 di cabang git end.

Menginstal Firebase CLI

1. Pastikan Anda telah menginstal Firebase CLI dan menggunakan versi 13.6 atau yang lebih tinggi:

   firebase --version
   

2. Jika Anda sudah menginstal Firebase CLI, tetapi bukan versi 13.6 atau yang lebih tinggi, update Firebase CLI:

   npm update -g firebase-tools
   

3. Jika Anda belum mengintal Firebase CLI, instal sekarang:

   npm install -g firebase-tools
   

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

Login ke Firebase

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

   cd codelab-gemini-api-extensions
   firebase login
   

   Jika terminal Anda menyatakan bahwa Anda telah login ke Firebase, Anda dapat langsung ke bagian Menyiapkan project Firebase di codelab ini.
2. Di terminal, masukkan Y atau N, bergantung pada apakah Anda ingin Firebase mengumpulkan data. (salah satu opsi berfungsi untuk codelab ini)
3. Di browser, pilih Akun Google Anda, lalu klik Izinkan.

4. Menyiapkan project Firebase Anda

Di bagian ini, Anda akan menyiapkan project Firebase dan mendaftarkan Aplikasi Web Firebase di dalamnya. Anda juga akan mengaktifkan beberapa layanan Firebase yang digunakan oleh aplikasi web contoh nanti di codelab ini.

Semua langkah di bagian ini dilakukan di Firebase console.

Membuat project Firebase

1. Login ke Firebase console menggunakan Akun Google.
2. Klik Buat project, lalu masukkan nama project (misalnya, AI Extensions Codelab).
   Jangan lupa dengan project ID yang ditetapkan secara otomatis untuk project Firebase Anda (atau klik ikon Edit untuk menetapkan project ID pilihan Anda). Anda akan memerlukan ID ini nanti untuk mengidentifikasi project Firebase di Firebase CLI. Jika lupa ID, Anda dapat menemukannya nanti di Setelan Project.
3. Klik Lanjutkan.
4. Jika diminta, tinjau dan setujui persyaratan Firebase, lalu klik Lanjutkan.
5. Untuk codelab ini, Anda tidak memerlukan Google Analytics. Jadi, nonaktifkan opsi Google Analytics.
6. Klik Create project, tunggu hingga project Anda disediakan, lalu klik Continue.

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Firebase Extensions (dan layanan cloud yang mendasarinya) serta Cloud Storage for Firebase, project Firebase Anda harus menggunakan paket harga bayar sesuai penggunaan (Blaze), yang berarti project tersebut ditautkan ke 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.
• Jika Anda melakukan codelab ini sebagai bagian dari acara, tanyakan kepada penyelenggara apakah ada kredit Cloud yang tersedia.

Perhatikan juga bahwa dengan penagihan yang diaktifkan di project Firebase, Anda akan ditagih untuk panggilan yang dilakukan ekstensi ke Gemini API (terlepas dari penyedia yang Anda pilih, Google AI atau Vertex AI). Pelajari harga untuk Google AI dan Vertex AI lebih lanjut.

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

1. Di Firebase console, pilih upgrade your plan.
2. Pilih paket Blaze. Ikuti petunjuk di layar untuk menautkan akun Penagihan Cloud ke project Anda.
   Jika perlu membuat akun Penagihan Cloud sebagai bagian dari upgrade ini, Anda mungkin perlu kembali ke alur upgrade di Firebase console untuk menyelesaikan upgrade.

Menambahkan aplikasi web ke project Firebase

1. Buka layar Project Overview di project Firebase Anda, lalu klik Web.
2. Di kotak teks App nickname, masukkan nama panggilan aplikasi yang mudah diingat, seperti My AI Extensions
3. Klik Register app > Next > Next > Continue to konsol.
   Anda dapat melewati semua langkah yang terkait dengan "hosting" di alur Aplikasi Web karena Anda akan menyiapkan layanan hosting secara opsional nanti di codelab ini.

Bagus! Sekarang Anda telah mendaftarkan aplikasi web di project Firebase baru.

Menyiapkan Firebase Authentication

1. Buka Autentikasi menggunakan panel navigasi sebelah kiri.
2. Klik Mulai.
3. Di kolom Additional providers, klik Google > Enable.
4. Di kotak teks Public-facing name for project, masukkan nama yang berguna, seperti My AI Extensions Codelab.
5. Di menu Support email for project, pilih alamat email Anda.
6. Klik Save.

Menyiapkan Cloud Firestore

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Firestore database.
2. Klik Create database.
3. Biarkan Database ID ditetapkan ke (default).
4. Pilih lokasi untuk database Anda, lalu klik Berikutnya.
   Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna.
5. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   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.
6. Klik Buat.

Menyiapkan Cloud Storage for Firebase

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Storage.
2. Klik Mulai.
3. Pilih lokasi untuk bucket Storage default Anda.
   Bucket di US-WEST1, US-CENTRAL1, dan US-EAST1 dapat memanfaatkan paket"Selalu Gratis" untuk Google Cloud Storage. Bucket di semua lokasi lainnya mengikuti harga dan penggunaan Google Cloud Storage.
4. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   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.
5. Klik Buat.

Di bagian selanjutnya dari codelab ini, Anda akan menginstal dan mengonfigurasi dua Ekstensi Firebase yang akan digunakan di aplikasi web di sepanjang codelab ini.

5. Menyiapkan ekstensi "Build Chatbot with the Gemini API"

Menginstal ekstensi "Build Chatbot with the Gemini API"

1. Buka ekstensi "Build Chatbot with the Gemini API".
2. Klik Install in the Firebase console.
3. Pilih project Firebase Anda, lalu klik Next.
4. Di bagian Review APIs enabled and resources created, klik Enable di samping layanan apa pun yang disarankan kepada Anda, lalu klik Next.
5. Untuk izin apa pun yang disarankan kepada Anda, pilih Berikan, lalu klik Berikutnya.
6. Konfigurasikan ekstensi:
   1. Di menu Penyedia Gemini API, pilih apakah Anda ingin menggunakan Gemini API dari Google AI atau Vertex AI. Untuk developer yang menggunakan Firebase, sebaiknya gunakan Vertex AI.
   2. Di kotak teks Firestore Collection Path, masukkan: users/{uid}/messages.
      Pada langkah-langkah berikutnya di codelab ini, menambahkan dokumen ke koleksi ini akan memicu ekstensi untuk memanggil Gemini API.
   3. Di menu Cloud Functions location, pilih lokasi pilihan Anda (seperti Iowa (us-central1) atau lokasi yang sebelumnya Anda tentukan untuk database Firestore).
   4. Biarkan semua nilai lain sebagai default.
7. Klik Install extension dan tunggu hingga ekstensi diinstal.

Mencoba ekstensi "Build Chatbot with the Gemini API"

Meskipun sasaran codelab ini adalah untuk berinteraksi dengan ekstensi "Build Chatbot with the Gemini API" melalui aplikasi web, sebaiknya pelajari cara kerja ekstensi dengan mencobanya di Firebase console terlebih dahulu.

Ekstensi dipicu setiap kali dokumen Firestore dibuat di bagian koleksi users/{uid}/discussion/{discussionId}/messages, yang dapat Anda lakukan di Firebase console.

1. Di Firebase console, buka Firestore, lalu klik Mulai koleksi dalam kolom pertama.
2. Di kotak teks Collection ID, masukkan users, lalu klik Next.
3. Di kotak teks Document ID, klik Auto-ID, lalu klik Save.
4. Di koleksi users, klik Start collection.
5. Di kotak teks Collection ID, masukkan messages, lalu klik Next.
   1. Di kotak teks Document ID, klik Auto-ID.
   2. Di kotak teks Field, masukkan prompt
   3. Di kotak teks Value, masukkan Tell me 5 random fruits
6. Klik Save dan tunggu beberapa detik.

Saat Anda menambahkan dokumen ini, tindakan tersebut akan memicu ekstensi untuk memanggil Gemini API. Dokumen yang baru saja Anda tambahkan ke koleksi messages kini tidak hanya menyertakan prompt Anda, tetapi juga response model untuk kueri Anda.

Picu ekstensi lagi dengan menambahkan dokumen lain ke koleksi messages:

1. Di koleksi messages, klik Add document.
2. Di kotak teks Document ID, klik Auto-ID.
3. Di kotak teks Field, masukkan prompt
4. Di kotak teks Value, masukkan And now, vegetables
5. Klik Save dan tunggu beberapa detik. Dokumen yang baru saja Anda tambahkan ke koleksi messages kini menyertakan response ke kueri Anda.
   
   Saat membuat respons ini, model Gemini yang mendasarinya menggunakan pengetahuan historis dari kueri Anda sebelumnya.

6. Menyiapkan aplikasi web

Untuk menjalankan aplikasi web, Anda harus menjalankan perintah di terminal dan menambahkan kode dalam editor kode.

Menyiapkan Firebase CLI untuk dijalankan di project Firebase Anda

Di terminal, beri tahu CLI untuk menggunakan project Firebase Anda dengan menjalankan perintah berikut:

firebase use YOUR_PROJECT_ID

Men-deploy Aturan Keamanan untuk Firestore dan Cloud Storage

Codebase codelab ini sudah memiliki kumpulan Aturan Keamanan Firestore dan Aturan Keamanan Cloud Storage yang ditulis untuk Anda. Setelah Anda men-deploy Aturan Keamanan ini, layanan Firebase di project Firebase Anda akan lebih terlindungi dari penyalahgunaan.

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

   firebase deploy --only firestore:rules,storage
   

2. Jika ditanya apakah akan memberikan Peran IAM kepada Cloud Storage untuk menggunakan aturan lintas layanan, masukkan Y atau N. (salah satu opsi berfungsi untuk codelab ini)

Menghubungkan aplikasi web ke project Firebase

Codebase aplikasi web Anda perlu mengetahui project Firebase mana yang harus digunakan untuk database, penyimpanan, dll. Anda melakukannya dengan menambahkan konfigurasi Firebase ke codebase aplikasi.

1. Dapatkan konfigurasi Firebase Anda:
   1. Di Firebase console, buka Project settings dalam project Firebase Anda.
   2. Scroll ke bawah ke bagian Aplikasi Anda, lalu pilih aplikasi web terdaftar Anda.
   3. Di panel SDK setup and configuration, salin kode initializeApp lengkap termasuk const firebaseConfig.
2. Tambahkan konfigurasi Firebase ke codebase aplikasi web Anda:
   1. Di editor kode, buka file src/app/lib/firebase/firebase.config.js.
   2. Pilih semua dalam file, lalu ganti dengan kode yang Anda salin.
   3. Simpan file.

Melihat pratinjau aplikasi web di browser

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

   npm install
   npm run dev
   

2. Di browser, buka URL Hosting yang dihosting secara lokal untuk melihat aplikasi web. Misalnya, dalam sebagian besar kasus, URL-nya adalah http://localhost:3000/ atau yang serupa.

Menggunakan chatbot aplikasi web

1. Di browser, kembali ke tab dengan aplikasi web Friendly Conf yang berjalan secara lokal.
2. Klik Login dengan Google, dan jika perlu, pilih Akun Google Anda.
3. Setelah login, Anda akan melihat jendela chat kosong.
4. Ketik ucapan (seperti hi), lalu klik Kirim.
5. Tunggu beberapa detik hingga chatbot merespons.

Chatbot di aplikasi merespons dengan respons umum.

Menyesuaikan chatbot untuk aplikasi

Anda memerlukan model Gemini yang mendasarinya dan digunakan oleh chatbot aplikasi web untuk mengetahui detail khusus konferensi saat model tersebut menghasilkan respons untuk peserta yang menggunakan aplikasi. Ada banyak cara untuk mengontrol dan mengarahkan respons ini, dan di subbagian codelab ini, kami akan menunjukkan cara yang sangat mendasar dengan memberikan "konteks" di perintah awal (bukan hanya input dari pengguna aplikasi web).

1. Di aplikasi web di browser Anda, hapus percakapan dengan mengklik tombol "x" merah (di samping pesan dalam histori chat).
2. Di editor kode, buka file src/app/page.tsx.
3. Scroll ke bawah dan ganti kode di atau dekat baris 77 yang bertuliskan prompt: userMsg dengan kode berikut:
   prompt: preparePrompt(userMsg, messages),
4. Simpan file.
5. Kembali ke aplikasi web yang berjalan di browser Anda.
6. Sekali lagi, ketik ucapan (seperti hi), lalu klik Kirim.
7. Tunggu beberapa detik hingga chatbot merespons.

Chatbot merespons dengan pengetahuan yang dipandu oleh konteks yang diberikan di src/app/lib/context.md. Meskipun Anda tidak mengetik permintaan tertentu, model Gemini yang mendasarinya akan membuat rekomendasi yang dipersonalisasi berdasarkan konteks ini serta tanggal/waktu saat ini. Sekarang Anda dapat menentukan pertanyaan lanjutan dan mempelajari lebih lanjut.

Konteks yang diperluas ini penting untuk chatbot, tetapi Anda tidak boleh menampilkannya kepada pengguna aplikasi web. Berikut cara menyembunyikannya:

1. Di editor kode, buka file src/app/page.tsx.
2. Scroll ke bawah dan ganti kode di atau dekat baris 56 yang bertuliskan ...doc.data(), dengan kode berikut:
   ...prepareMessage(doc.data()),
3. Simpan file.
4. Kembali ke aplikasi web yang berjalan di browser Anda.
5. Muat ulang halaman.

Anda juga dapat mencoba kemampuan untuk berkomunikasi dengan chatbot dengan konteks historis:

1. Di kotak teks Ketik pesan, ajukan pertanyaan seperti: Any other interesting talks about AI?Chatbot akan menampilkan respons.
2. Di kotak teks Type a message, ajukan pertanyaan lanjutan yang terkait dengan pertanyaan sebelumnya: Give me a few more details about the last one.

Chatbot merespons dengan pengetahuan historis. Karena histori chat kini menjadi bagian dari konteks, chatbot akan memahami pertanyaan lanjutan.

Bonus: Menjalankan aplikasi web menggunakan Firebase Local Emulator Suite

Dengan Firebase Local Emulator Suite, Anda dapat menguji sebagian besar fitur aplikasi web secara lokal.

1. Di terminal, pastikan Anda berada di root aplikasi web.
2. Jalankan perintah berikut untuk menginstal, lalu menjalankan Firebase Local Emulator Suite:

   firebase init emulators
   firebase emulators:start
   

7. Menyiapkan ekstensi "Multimodal Tasks with the Gemini API"

Ekstensi "Multimodal Tasks with the Gemini API" memanggil Gemini API dengan perintah multimodal yang berisi perintah teks serta URL file atau URL Cloud Storage yang didukung (perhatikan bahwa bahkan Google AI Gemini API menggunakan URL Cloud Storage sebagai infrastruktur URL file yang mendasarinya). Ekstensi ini juga mendukung variabel handlebar untuk mengganti nilai dari dokumen Cloud Firestore untuk menyesuaikan perintah teks.

Di aplikasi, setiap kali mengupload gambar ke bucket Cloud Storage, Anda dapat membuat URL dan menambahkan URL tersebut ke dokumen Cloud Firestore baru, sehingga memicu ekstensi untuk membuat perintah multimodal dan memanggil Gemini API. Dalam kode sumber codelab ini, kami telah menyediakan kode untuk mengupload gambar dan menulis URL ke dokumen Firestore.

Menginstal ekstensi "Multimodal Tasks with the Gemini API"

1. Buka ekstensi "Multimodal Tasks with the Gemini API".
2. Klik Install in the Firebase console.
3. Pilih project Firebase.
4. Klik Next > Next > Next, hingga Anda mencapai bagian Configure extension.
   1. Di menu Penyedia Gemini API, pilih apakah Anda ingin menggunakan Gemini API dari Google AI atau Vertex AI. Untuk developer yang menggunakan Firebase, sebaiknya gunakan Vertex AI.
   2. Di kotak teks Firestore Collection Path, masukkan: gallery
   3. Di kotak teks Prompt, masukkan: Please describe the provided image; if there is no image, say "no image"
   4. Di kotak teks Image field, masukkan: image
   5. Di menu Cloud Functions location, pilih lokasi pilihan Anda (seperti Iowa (us-central1) atau lokasi yang sebelumnya Anda tentukan untuk database Firestore).
   6. Biarkan semua nilai lain sebagai default.
5. Klik Install extension dan tunggu hingga ekstensi diinstal.

Mencoba ekstensi "Multimodal Tasks with the Gemini API"

Meskipun sasaran codelab ini adalah untuk berinteraksi dengan ekstensi "Multimodal Tasks with the Gemini API" melalui aplikasi web, sebaiknya pelajari cara kerja ekstensi dengan mencobanya di Firebase console terlebih dahulu.

Ekstensi dipicu setiap kali dokumen Firestore dibuat di bagian koleksi users/{uid}/gallery, yang dapat Anda lakukan di Firebase console. Ekstensi kemudian mengambil URL gambar Cloud Storage dalam dokumen Cloud Firestore dan meneruskannya sebagai bagian dari perintah multimodal dalam panggilan ke Gemini API.

Pertama, upload gambar ke bucket Cloud Storage:

1. Buka Storage dalam project Firebase Anda.
2. Klik Create folder.
3. Di kotak teks Folder name, masukkan gallery
4. Klik Add folder.
5. Di folder gallery, klik Upload file.
6. Pilih file gambar JPEG yang akan diupload.

Selanjutnya, tambahkan URL Cloud Storage untuk gambar ke dokumen Firestore (yang merupakan pemicu untuk ekstensi):

1. Buka Firestore dalam project Firebase Anda
2. Klik Start collection dalam kolom pertama.
3. Di kotak teks Collection ID, masukkan: gallery, lalu klik Next.
4. Tambahkan dokumen ke koleksi:
   1. Di kotak teks Document ID, klik Auto-ID.
   2. Di kotak teks Field, masukkan: image. Di kotak Value, masukkan URI Storage location gambar yang baru saja Anda upload.
5. Klik Tambahkan Kolom.
6. Di kotak teks Field, masukkan: published. Di kotak Type, pilih boolean. Di kotak Value, pilih true.
7. Klik Save dan tunggu beberapa detik.

Koleksi gallery kini menyertakan dokumen yang berisi respons terhadap kueri Anda.

Menggunakan galeri gambar aplikasi web

1. Di browser, kembali ke tab dengan aplikasi web Friendly Conf yang berjalan secara lokal.
2. Klik tab navigasi Galeri.
3. Anda akan melihat galeri gambar yang diupload dan deskripsi buatan AI. Folder ini akan berisi gambar yang Anda upload sebelumnya ke folder gallery di bucket Storage.
4. Klik tombol untuk "Upload", lalu pilih gambar JPEG lain.
5. Tunggu beberapa detik hingga gambar ditampilkan di galeri. Beberapa saat kemudian, deskripsi yang dibuat AI untuk gambar yang baru diupload juga akan ditampilkan.

Jika Anda ingin memahami kode untuk cara penerapannya, lihat src/app/gallery/page.tsx di codebase aplikasi web.

8. Bonus: Men-deploy aplikasi

Firebase menawarkan beberapa cara untuk men-deploy aplikasi web. Untuk codelab ini, pilih salah satu opsi berikut:

• Opsi 1: Firebase Hosting - Gunakan opsi ini jika Anda memutuskan untuk tidak membuat repo GitHub Anda sendiri (dan hanya menyimpan kode sumber secara lokal di komputer Anda).
• Opsi 2: Firebase App Hosting - Gunakan opsi ini jika Anda menginginkan deployment otomatis setiap kali Anda mendorong perubahan ke repo GitHub Anda sendiri. Layanan Firebase baru ini dibuat khusus untuk menyesuaikan dengan kebutuhan aplikasi Next.js dan Angular dinamis.

Opsi 1: Men-deploy menggunakan Firebase Hosting

Gunakan opsi ini jika Anda memutuskan untuk tidak membuat repo GitHub Anda sendiri (dan hanya menyimpan kode sumber secara lokal di komputer Anda).

1. Di terminal Anda, lakukan inisialisasi Firebase Hosting dengan menjalankan perintah berikut:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. Untuk perintah: Detected an existing Next.js codebase in your current directory, should we use this?, tekan Y.
3. Untuk perintah: In which region would you like to host server-side content, if applicable?, pilih lokasi default atau lokasi yang Anda gunakan sebelumnya di codelab ini. Kemudian, tekan Enter (atau return di macOS).
4. Untuk perintah: Set up automatic builds and deploys with GitHub?, tekan N.
5. Deploy aplikasi web Anda ke Hosting dengan menjalankan perintah ini:

   firebase deploy --only hosting
   

Selesai! Jika Anda mengupdate aplikasi dan ingin men-deploy versi baru tersebut, cukup jalankan kembali firebase deploy --only hosting dan Firebase Hosting akan mem-build dan men-deploy ulang aplikasi Anda.

Opsi 2: Men-deploy menggunakan Firebase App Hosting

Gunakan opsi ini jika Anda menginginkan deployment otomatis setiap kali Anda mendorong perubahan ke repo GitHub Anda sendiri.

1. Commit perubahan Anda ke GitHub.
2. Di Firebase console, buka App Hosting dalam project Firebase Anda.
3. Klik Mulai > Hubungkan ke GitHub.
4. Pilih Akun GitHub dan Repositori Anda. Klik Berikutnya.
5. Di Setelan deployment > Direktori utama, masukkan nama folder dengan kode sumber Anda (jika package.json tidak berada di direktori utama repositori Anda).
6. Untuk Cabang aktif, pilih cabang utama dari repo GitHub Anda. Klik Berikutnya.
7. Masukkan ID untuk backend Anda (misalnya, chatbot).
8. Klik Finish and Deploy.

Perlu waktu beberapa menit hingga deployment baru Anda siap. Anda dapat memeriksa status deployment di bagian App Hosting Firebase console.

Mulai saat ini, setiap kali Anda mendorong perubahan ke repo GitHub, Firebase App Hosting akan otomatis mem-build dan men-deploy aplikasi Anda.

9. Kesimpulan

Selamat! Anda telah mencapai banyak hal dalam codelab ini.

Menginstal dan mengonfigurasi ekstensi

Anda telah menggunakan Firebase console untuk mengonfigurasi dan menginstal berbagai Ekstensi Firebase yang menggunakan AI generatif. Menggunakan Ekstensi Firebase sangat praktis karena Anda tidak perlu mempelajari dan menulis banyak kode boilerplate untuk menangani autentikasi dengan layanan Google Cloud atau logika Cloud Functions backend untuk memproses dan berinteraksi dengan layanan dan API Firestore serta Google Cloud.

Mencoba ekstensi menggunakan Firebase console

Alih-alih langsung menulis kode, Anda meluangkan waktu untuk memahami cara kerja ekstensi genAI ini, berdasarkan input yang Anda berikan melalui Firestore atau Cloud Storage. Hal ini dapat sangat berguna saat men-debug output ekstensi.

Membangun aplikasi web yang didukung AI

Anda telah membuat aplikasi web yang didukung AI yang menggunakan Firebase Extensions untuk mengakses beberapa kemampuan model Gemini.

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

Aplikasi web juga menggunakan ekstensi "Multimodal Tasks with the Gemini API" untuk membuat deskripsi gambar secara otomatis untuk gambar yang diupload.

Langkah berikutnya

• Lakukan eksperimen dengan perintah dan manfaatkan jendela konteks yang besar di Google AI Studio atau Vertex AI Studio.
• Pelajari penelusuran retrieval augmented generation (RAG) AI.
• Coba codelab mandiri yang menunjukkan cara menambahkan chatbot ke aplikasi Firebase yang ada menggunakan Firebase Genkit (yang merupakan layanan framework AI baru).
• Pelajari kemampuan penelusuran kemiripan di Firestore dan Cloud SQL untuk PostgreSQL.
• Ajari chatbot Anda untuk memanggil aplikasi yang ada dengan panggilan fungsi.