Membangun aplikasi AI dengan ekosistem Google

1. Sebelum memulai

Pengembangan software telah berkembang. Developer yang paling sukses tidak hanya menulis kode; mereka mengatur alat dan agen AI untuk membangun dengan lebih baik dan lebih cepat. Ekosistem alat Google menyediakan rangkaian komprehensif untuk seluruh siklus proses: pembuatan UI, pembuatan prototipe dan deployment aplikasi, pengembangan fitur AI, serta integrasi backend yang aman dan skalabel. Dalam codelab ini, Anda akan menggunakan Google Stitch untuk mendesain UI, Google AI Studio untuk menulis kode dan men-deploy aplikasi, serta Firebase untuk mengembangkan fitur AI dan menyimpan informasi di backend yang aman dan skalabel.

Aplikasi yang akan Anda bangun dalam codelab ini disebut Decide For Me—asisten keputusan bagi orang-orang yang sulit mengambil keputusan dalam menghadapi pilihan hidup (seperti pindah apartemen, berganti karier, atau memilih hobi). Pengguna memasukkan dilema dan prioritas hidupnya, lalu aplikasi menggunakan AI untuk membantu pengguna memutuskan berdasarkan hal yang meminimalkan kekecewaan jangka panjang. Aplikasi ini juga memberikan langkah pertama yang konkret kepada pengguna. Versi akhir aplikasi Anda akan terlihat seperti ini:

Yang akan Anda pelajari

• Mendesain UI dengan Google Stitch.
• Lakukan vibe coding pada aplikasi web dengan Google AI Studio.
• Gunakan Firebase untuk mengembangkan fitur AI dan menyimpan informasi di cloud.
• Men-deploy aplikasi web ke produksi dengan Google AI Studio (didukung oleh Cloud Run).

2. Mendesain UI dengan Stitch

1. Download gambar mockup (DecideForMeScreen.jpeg). Simpan ke folder lokal tempat Anda dapat menemukannya.
2. Buka Stitch, temukan kolom input, lalu pilih opsi Web. (Untuk codelab ini, Anda akan berfokus pada pengalaman web, tetapi Anda juga dapat menggunakan Stitch untuk membuat layar seluler.)
3. Upload gambar mockup:
   1. Klik + (tombol tambahkan).
   2. Pilih Unggah File.
   3. Lampirkan gambar yang Anda download di langkah penyiapan (DecideForMeScreen.jpeg). Mockup yang digambar tangan ini memungkinkan Anda menguji kemampuan multimodal Stitch.
4. Salin perintah berikut dan tempelkan ke kolom input:

   # General Guidance
   Create a modern, clean, and highly polished UI for a web application called
   "Decide For Me" - a hyper-rational decision assistant.
   
   CRITICAL: Replicate the exact layout, structure, and element placement shown in
   the hand-drawn mockup file DecideForMeScreen.jpeg. Do not add any extra menus,
   sidebars, buttons, or top/bottom navigation bars that are not explicitly drawn
   in the file. Stick strictly to the skeleton provided in the mockup.
   
   # Layout & Structure
   - Two-Column Split Screen:
     - Left Side (Main Chat Area): Takes up roughly 70-75% of the screen width. It
       should feel like a premium, focused workspace.
     - Right Side (Configuration Panel): A sidebar taking up 25-30% of the screen
       width with a distinct, subtle background color to separate it from the
       chat.
   
   # Right Panel: Configuration Screen
   - Header: Title it "My Priorities" with a clean, minimalist typography.
   - Content Card: A styled card containing a text box or paragraph area
     showcasing the user's priorities.
   - Interactions: Include a clear "Edit Priorities" button. When clicked, this
     area should visually toggle into an editable textarea or input field.
   
   # Left Panel: Chat & Dilemma Decision Screen
   - Chat History: A clean vertical flow of message bubbles.
     - The first message bubble must be aligned to the left (system message) and
       say: "Tell me your dilemma". Use a friendly, neutral background color for
       this bubble.
   - Bottom Input Area: Instead of a traditional single-line chat bar, create a
     unified, beautiful "Decision Submission" layout positioned at the bottom:
     - Dual Input Fields: Place two horizontal or cleanly stacked input fields.
       - Input 1 label: "Option A"
       - Input 2 label: "Option B"
     - Action Button: A prominent, styled "Go" action button to trigger the
       reasoning loop.
   
   # Theme & Aesthetic
   - Vibe: Hyper-rational, clean, trustworthy, and modern. Use a sophisticated
     color palette (e.g., deep slates, clean whites/grays, and a sharp accent
     color like a subtle indigo or teal for active states and buttons).
   - Spacing & Typography: Use generous whitespace, soft rounded corners
     (border-radius) for cards and buttons, and a highly legible sans-serif font.
   

5. Klik panah buat di pojok kanan bawah kolom input. Stitch membuat layar dan seluruh sistem desain, termasuk palet warna, opsi font, ikonografi, dan nuansa umum untuk elemen UI:

Peringatan: Jika perlu waktu lebih dari 5 menit untuk membuat layar Anda, muat ulang halaman dan kirimkan kembali perintah.

3. Membangun aplikasi dengan Google AI Studio

1. Mengekspor layar yang Anda buat di Stitch ke Google AI Studio:
   1. Klik desain yang dihasilkan di Stitch.
   2. Klik Ekspor di sudut kanan atas layar.
   3. Pastikan opsi yang dipilih adalah Google AI Studio.
   4. Scroll ke bawah ke kolom Deskripsi.
2. Salin perintah berikut dan tempelkan ke kolom Deskripsi:

   # General Guidance
   Build the "Decide For Me" app: A hyper-rational decision assistant for
   chronically indecisive people facing life choices (moving apartments, changing
   careers, picking a hobby). The user enters a dilemma and their top priorities
   in life. The app will help with the decision. Follow the instructions below to
   build it:
   
   # UI Instructions
   Using the design artifacts exported from Stitch (the PNG image and HTML file),
   build a fully functional web application that accurately mirrors the design and
   layout.
   
   # App Architecture & Initialization Instructions
   - Initialize the Firebase JS SDK for client-side services.
   - Set up Firebase Authentication using the Google provider. If a user is not
     logged in, show a clean, minimalist sign-in state. If the user is logged in,
     take them directly to the dilemma decision screen.
   - Initialize Firebase App Check in debug mode
     (`self.FIREBASE_APPCHECK_DEBUG_TOKEN = true`) without a ReCaptchaV3Provider
     (we will add that later).
   
   # State & Database Management Instructions
   - User Priorities:
     - Once authenticated, pull the user's saved priorities from Firebase
       Firestore at the path: `users/{userId}`. Each document should contain one
       string field: 'priorities'.
     - Bind this data to the Right Panel ("My Priorities").
     - When the user clicks the "Edit" button, toggle the view to a textarea, with
       a 'save' button. When saved, write the updated string back to
       `users/{userId}`.
     - Make sure to implement and deploy strong Security Rules for Firestore.
   
   # UI Stream Update & Display Instructions
   - Once the user submits option A and option B in the dilemma decision screen,
     display both options as a single message on the user side of the chat. Then,
     display a sleek loading state in the main chat panel. Leave the app in this
     "loading" state and do nothing else, we will process both options and build
     the server-side thinking later.
   

3. Klik Build with Google AI Studio. Tindakan ini akan membuka Google AI Studio di tab baru dan memindahkan file desain serta perintah Anda:
   1. Pastikan perintah sepenuhnya ditransfer.
   2. Jika Anda hanya melihat sebagian perintah, tempelkan seluruh perintah lagi.
4. Klik Build. Google AI Studio mulai membuat aplikasi Decide For Me sesuai dengan perintah dan desain UI Anda:
   1. Saat membuat, alat ini menyarankan desain UI alternatif (abaikan desain ini untuk codelab ini, tetapi Anda dapat memilih desain yang berbeda pada masa mendatang).
   2. Saat diminta untuk mengaktifkan Firebase, klik Enable.
5. Periksa dan verifikasi aplikasi yang dihasilkan:
   1. Uji aplikasi di tab Preview.
   2. Beralih ke tab Code untuk meninjau semua file dan kode yang dihasilkan.
   3. Google AI Studio juga telah membuat project Firebase, mengaktifkan Firebase Authentication dan Firestore, serta mengonfigurasi Firebase di codebase Anda. Anda akan mengakses dan menggunakan project Firebase ini pada langkah berikutnya dalam codelab ini.

Peringatan: Jika pembuatan aplikasi memerlukan waktu lebih dari 10 menit, tutup tab, kembali ke Stitch, dan mulai ulang dari langkah Ekspor.

4. Mendaftarkan token debug App Check

Saat membuat aplikasi, Google AI Studio akan membuat project Firebase dan menghubungkan aplikasi Anda ke project tersebut. Anda perlu mengakses project Firebase ini dan mendaftarkan lingkungan pengembangan Anda ke layanan keamanan penting yang disebut Firebase App Check.

Mengakses project Firebase Anda

1. Temukan project ID project Firebase yang dibuat oleh Google AI Studio:
   1. Beralih ke tab Code di Google AI Studio.
   2. Buka file firebase-applet-config.json.
   3. Salin nilai kolom projectId.
2. Buka Firebase console dan cari project menggunakan ID ini.

   Catatan: Jika ini adalah pertama kalinya Anda membuat project Firebase, hanya ada satu project yang tersedia, yaitu project yang dibuat oleh Google AI Studio.

Peringatan: Jika Anda tidak dapat menemukan file konfigurasi dalam kode, atau tidak dapat menemukan project Firebase di konsol, berarti project tersebut belum dibuat. Anda dapat meminta Google AI Studio untuk memperbaikinya dengan memberikan perintah "Please add Firebase Auth and Firestore to this app."

Mendaftarkan token debug Anda

Aplikasi Anda dapat menggunakan Firebase App Check untuk melindungi layanan backend dan model AI Anda dari penyalahgunaan dengan memastikan bahwa traffic masuk hanya berasal dari aplikasi yang sah.

Catatan: Mendaftarkan token debug atau menginisialisasi App Check saja tidak akan melindungi backend atau API Anda. Anda harus menerapkan App Check untuk API dan layanan tertentu yang ingin Anda lindungi. App Check akan diterapkan untuk Firebase AI Logic di codelab ini, sedangkan untuk layanan seperti Firestore, Anda dapat mengaktifkan penerapan di setelan App Check setelah memverifikasi traffic masuk.

Karena aplikasi Anda berjalan di lingkungan pratinjau Google AI Studio, aplikasi tersebut menggunakan penyedia debug App Check (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true). Saat aplikasi web dimuat, Firebase akan otomatis menampilkan token debug ke konsol developer browser Anda.

1. Temukan token debug Anda:
   1. Di Google AI Studio, buka alat developer browser Anda saat melihat pratinjau aplikasi:
      • Chrome, Edge, atau Firefox: Tekan F12 (atau klik kanan di mana saja dalam pratinjau, lalu pilih Periksa), lalu pilih tab Konsol.
      • macOS: Tekan Cmd+Option+I, lalu pilih tab Console.
   2. Di log konsol, temukan pesan debug App Check:

      AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
      You will need to safelist it in the Firebase console for it to work.
      

   3. Salin string token (tanpa tanda kutip).
2. Daftarkan token debug Anda:
   1. Di Firebase console, buka Security > App Check > Apps tab.
   2. Temukan aplikasi web Anda dalam daftar, klik menu tiga titik (⋮), lalu pilih Kelola token debug.
   3. Klik Tambahkan token debug, tempel token yang Anda salin, masukkan nama seperti Google AI Studio Preview, lalu klik Simpan.
   

Catatan: Jika Anda tidak melihat token debug di konsol browser, muat ulang tab pratinjau Google AI Studio atau tanyakan kepada agen Google AI Studio: "Please ensure Firebase App Check is initialized in debug mode using self.FIREBASE_APPCHECK_DEBUG_TOKEN = true."

5. Menguji aplikasi

Setelah project Anda terhubung dan token debug Anda didaftarkan ke App Check, uji fitur dasar: Authentication dan Firestore.

1. Menguji autentikasi pengguna dan menyimpan prioritas:
   1. Di pratinjau aplikasi Putuskan untuk Saya di Google AI Studio, uji layar autentikasi dengan login menggunakan Akun Google.
   2. Simpan prioritas hidup Anda menggunakan panel kanan (Prioritas Saya).
2. Verifikasi autentikasi di Firebase console:
   1. Buka Firebase console, lalu buka Authentication.
   2. Konfirmasi bahwa Akun Google yang Anda gunakan untuk mengautentikasi di aplikasi Bantu Pilih ada di sana:
   
3. Verifikasi penyimpanan data Firestore:
   1. Buka Firestore di Firebase console.
   2. Pastikan prioritas Anda disimpan dalam dokumen di jalur users/{userId}:
   

Peringatan: Jika Anda tidak dapat melihat dokumen apa pun di Firestore, beralihlah ke tab Aturan dan pastikan Anda telah menerapkan aturan keamanan yang kuat. Jika aturan keamanan kosong atau menampilkan false ke setiap panggilan, aplikasi Anda tidak dapat membuat dokumen apa pun di koleksi Firestore mana pun. Dalam hal ini, kembali ke AI Studio dan minta AI Studio untuk men-deploy aturan keamanan yang kuat untuk aplikasi.

6. Membangun alur Pengambil Keputusan yang didukung AI menggunakan Firebase

Aplikasi Anda akan menggunakan AI untuk mendukung tindakan Putuskan untuk Saya. Anda dapat menggunakan Firebase untuk membuat alur Pengambil Keputusan yang didukung AI ini.

Menyiapkan Firebase AI Logic

1. Aktifkan Gemini Developer API di Firebase AI Logic:
   1. Buka Firebase AI Logic di Firebase console, lalu klik Mulai.
   2. Pilih Gemini Developer API dan ikuti petunjuk di konsol untuk mengaktifkan API.

   Catatan: App Check diterapkan secara otomatis untuk Firebase AI Logic pada tahap ini. Itulah sebabnya penyiapan dan pendaftaran penyedia debug App Check di awal codelab ini penting — hal ini memastikan permintaan dari lingkungan pengembangan Anda di Google AI Studio diverifikasi dan tidak ditolak oleh Firebase AI Logic.

2. Konfigurasi setelan Firebase AI Logic:
   1. Buka tab Setelan.
   2. Alihkan opsi Terapkan mode hanya template ke Diterapkan.
   3. Aktifkan/nonaktifkan opsi Terapkan mode pengguna terautentikasi ke Diterapkan.

Membuat template perintah server

Dalam codelab ini, Anda akan menggunakan template prompt server untuk interaksi Anda dengan Gemini API melalui Firebase AI Logic.

Sebelum Anda melanjutkan penggunaan template, tinjau hal berikut untuk memahami mengapa menyimpan konfigurasi model, petunjuk sistem, dan perintah di sisi server itu penting:

• Melindungi kekayaan intelektual: Mengambil perintah dari perangkat klien dan menjaganya tetap aman di backend.
• Mencegah serangan injeksi perintah: Klien hanya dapat mengisi variabel tertentu dengan validasi skema backend.
• Memperbarui tanpa rilis aplikasi: Anda dapat memperbarui perintah, petunjuk sistem, dan konfigurasi model di konsol tanpa merilis versi aplikasi baru.

Berikut cara membuat dan menguji template perintah server:

1. Buat template perintah server:
   1. Buka tab Template perintah.
   2. Klik Buat template.
   3. Pilih Templat kosong.
   4. Buat template pertama Anda menggunakan informasi berikut:
      • Nama template: Decider Flow
      • Template ID: decider-flow
      • Konfigurasi (frontmatter)

        model: "gemini-3.5-flash-lite"
        input:
          schema:
            priorities: "string, user's core priorities"
            optionA: "string, option A under consideration"
            optionB: "string, option B under consideration"
        output:
          format: json
          schema:
            verdict: string
            justification: string
            firstStep: string
        

      • Perintah dan (opsional) petunjuk sistem

        {role "system"}
        You are the Decider Agent, a multi-stage reasoning engine that
        combines the roles of an honest and polite behavioral economist, a
        long-term strategic forecaster, and an executive decision coach.
        Your job is to take a user's dilemma and their core priorities, run
        them through a rigorous, adversarial 3-phase thinking process, and
        output a highly analytical, reasoning-backed final verdict. You must be
        direct, sharp, and realistic. Do not give generic platitudes or claim
        that "both options are great." You must force a clear choice.
        
        {role "user"}
        # Context & Inputs
        You are analyzing a critical life decision for the user. Base your
        entire multi-phase reasoning flow strictly on these three specific
        inputs:
        - User's Core Priorities: {{priorities}}
        - Option A under consideration: {{optionA}}
        - Option B under consideration: {{optionB}}
        
        Execute your reasoning flow through the following three phases:
        
        # Phase 1: Cynical Breakdown (Input-Driven Analysis)
        Analyze {{optionA}} and {{optionB}} strictly through the lens of the
        user's explicit {{priorities}}. Do not evaluate them in a vacuum.
        - Identify the hidden flaws, compromises, and psychological costs
          embedded in both choices.
        - Pinpoint exactly how {{optionA}} could directly conflict with or
          undermine their {{priorities}}.
        - Pinpoint exactly how {{optionB}} could directly conflict with or
          undermine their {{priorities}}.
        - Uncover any cognitive biases (like status quo bias or loss aversion)
          the user might be falling for in either option.
        
        # Phase 2: Long-Term Regret Projection
        Project the user 5 years into the future. Apply the Regret Minimization
        Framework to both paths:
        - The {{optionA}} Timeline: Quantify the absolute worst-case, deep,
          structural 5-year regret of choosing this path. Focus heavily on
          failures of courage vs. failures of action based on their
          {{priorities}}.
        - The {{optionB}} Timeline: Quantify the matching 5-year regret for
          this path.
        - Contrast these two timelines. Which option carries the kind of regret
          that fundamentally breaks the user's {{priorities}}?
        
        # Phase 3: Final Recommendation & Action Step
        Synthesize the cynical critiques and long-term regret scores.
        Weigh them against the user's {{priorities}} to determine which
        choice minimizes long-term disappointment.
        - Verdict: You must declare either {{optionA}} or {{optionB}} as the
          definitive winner. No compromise, no "it depends," and no hybrid
          options.
        - Justification: Provide a sharp, reasoning-backed explanation showing why
          the losing option was eliminated based on the Phase 1 and Phase 2
          analysis.
        - First Step: Give one microscopic, low-friction task the user can
          execute within the next 15 minutes to commit to or move toward the
          chosen verdict.
        

        Tambahkan {} ekstra di sekitar {role "system"} dan {role "user"} untuk menulis petunjuk sistem dan perintah dalam sintaksis yang benar:
      • Input pengujian

        {
          "priorities": "Be financially stable, have a good work-life balance where I can travel twice a year",
          "optionA": "Buy a house for 615000 British pounds with a mortgage of 2800 per month for the next 35 years",
          "optionB": "Keep renting for 2400 per month for the foreseeable"
        }
        

2. Klik Simpan template.
3. Uji template:
   1. Klik Run prompt test.
   2. Temukan Test response dan periksa apakah respons tersebut memiliki semua kolom yang Anda tentukan dalam perintah (verdict, justification, dan firstStep).
   3. Jika semuanya cocok dengan respons yang diharapkan, kunci template menggunakan ikon kunci di sudut kanan atas template untuk memastikan stabilitas versi dan mencegah modifikasi yang tidak disengaja.

Template Anda siap digunakan oleh aplikasi Anda.

7. Menggunakan template perintah Decider di aplikasi

Buat aplikasi web Anda menggunakan template:

1. Kembali ke aplikasi Anda di Google AI Studio.
2. Minta agen Google AI Studio untuk menerapkan tindakan Putuskan untuk Saya:
   1. Salin perintah berikut:

      Now let's implement the "Decide For Me" button action. When clicked, it
      should call the Firebase AI Logic SDK using a Template Generative Model.
      The prompt is stored in a prompt template with the id "decider-flow". When
      calling the API, pass the following variables as the input payload object:
      - priorities
      - optionA
      - optionB
      
      The API will return a JSON object. Handle the response asynchronously and
      extract:
      - verdict
      - justification
      - firstStep
      
      Once the data is received, update the UI state to append a new message to
      the chat array. Ensure it renders as a system chat bubble positioned on
      the left side of the chat screen, mapping these three fields clearly into
      the bubble's layout.
      
      Please provide the necessary front-end component state updates and the
      Firebase SDK call.
      

   2. Tempelkan perintah ke input chat Google AI Studio, lalu klik Kirim.
3. Verifikasi konfigurasi dan uji asisten keputusan:
   1. Tunggu hingga Google AI Studio selesai menambahkan Firebase AI Logic ke aplikasi Anda.
   2. Beralihlah ke tab Code dan pastikan ada kunci API dalam file firebase-applet-config.json Anda. Jika kunci API Firebase tidak ada dalam file konfigurasi, minta Google AI Studio untuk mengimpornya.
   3. Beralih ke tab Preview
   4. Kirimkan opsi A dan B, lalu verifikasi bahwa AI menampilkan keputusan, alasan, dan langkah pertama.

Peringatan: Jika panggilan ke Firebase AI Logic gagal meskipun kunci API Firebase telah dikonfigurasi, minta agen Google AI Studio untuk memperbaikinya dengan memberikan perintah:

"Pastikan panggilan Firebase AI Logic menggunakan getAI(app) dan getTemplateGenerativeModel(aiInstance) dengan template decider-flow, mengurai respons JSON dengan benar ke verdict, justification, dan firstStep, serta tidak berisi batasan waktu atau pemeriksaan fungsi yang tidak perlu."

Sebagai referensi, kode yang dihasilkan oleh Google AI Studio akan terlihat mirip dengan kode berikut:

const aiInstance = getAI(app);
const templateModel = getTemplateGenerativeModel(aiInstance);

const result = await templateModel.generateContent('decider-flow', {
  priorities: priorities,
  optionA: optA,
  optionB: optB
});

const rawText = result.response.text();

// Parse response text to extract fields
const cleaned = rawText.replace(/```json|```/g, '').trim();
const parsedData: { verdict?: string; justification?: string; firstStep?: string } = JSON.parse(cleaned);

const verdict = parsedData.verdict;
const justification = parsedData.justification;
const firstStep = parsedData.firstStep;

Men-debug dan memantau permintaan

Jika aplikasi Anda mengalami error, gagal menghasilkan respons, atau Anda ingin memeriksa traffic API secara mendetail, gunakan alat analisis dan pemantauan bawaan Firebase AI Logic:

1. Di Firebase console, buka AI Services > AI Logic > Tab pemantauan AI.
2. Periksa metrik kuantitatif di dasbor:
   • Volume dan status permintaan: Verifikasi apakah permintaan masuk mencapai backend dan menampilkan 200 OK atau gagal dengan error klien atau server.
   • Latensi: Periksa grafik latensi untuk memeriksa waktu respons end-to-end.
   • Jumlah token: Pantau penggunaan token input dan output per permintaan.
3. Periksa rekaman aktivitas permintaan individual untuk melakukan proses debug secara mendalam:Klik rekaman aktivitas permintaan tertentu di tabel rekaman aktivitas untuk memeriksa payload-nya.
   • Input: Pastikan variabel (priorities, optionA, dan optionB) diteruskan dengan benar dari aplikasi klien.
   • Output: Lihat teks mentah yang dihasilkan oleh model untuk memverifikasi apakah model menampilkan JSON yang valid dan cocok dengan skema.
   • Detail error: Jika permintaan gagal, periksa log error rekaman aktivitas untuk mengetahui alasan seperti token App Check tidak valid, penolakan autentikasi, batas kuota, atau error validasi perintah.
4. Memecahkan masalah dan menyelesaikan masalah terkait Google AI Studio:
   • Jika Anda mengidentifikasi error dalam rekaman aktivitas (misalnya, penguraian respons JSON yang salah format atau parameter yang tidak ada), salin pesan atau payload error.
   • Kembali ke Google AI Studio dan minta asisten untuk memperbaiki masalah yang sesuai dalam kode aplikasi.

8. Opsional: Deploy aplikasi

Setelah aplikasi Anda berfungsi dalam mode pratinjau, deploy ke produksi.

Untuk melindungi endpoint Firebase Anda dalam produksi, konfigurasikan penyedia pengesahan produksi untuk digunakan dengan Firebase App Check (dalam codelab ini, Anda akan menggunakan reCAPTCHA v3).

Anda harus men-deploy aplikasi terlebih dahulu untuk mendapatkan URL aktifnya yang tepat agar dapat mendaftarkan domain tertentu dengan reCAPTCHA, bukan mengizinkan semua aplikasi ai.studio.

Deploy aplikasi Anda dan konfigurasi reCAPTCHA:

1. Deploy aplikasi web dengan Google AI Studio:
   1. Di Google AI Studio, klik Publikasikan di menu navigasi atas.
   2. Klik Mulai, tinjau atau sesuaikan nama dan deskripsi aplikasi, lalu klik Publikasikan aplikasi Anda.
   3. Tunggu Google AI Studio membangun dan men-deploy aplikasi Anda (biasanya 1–2 menit).
   4. Salin URL unik live yang dihasilkan (misalnya, https://decide-for-me-123.ai.studio) dan catat domainnya (misalnya, decide-for-me-123.ai.studio).
2. Buat kunci reCAPTCHA v3 di Google reCAPTCHA:
   1. Buka Konsol Admin Google reCAPTCHA.
   2. Masukkan Label (misalnya, Decide For Me - Production).
   3. Pilih Jenis reCAPTCHA > reCAPTCHA v3 (Berbasis skor).
   4. Di bagian Domain, tambahkan domain yang di-deploy persis untuk aplikasi Anda (misalnya, decide-for-me-123.ai.studio, tanpa https:// dan jalur apa pun) atau domain kustom jika Anda berencana menggunakannya.
   5. Setujui persyaratan layanan, lalu klik Kirim.
   6. Biarkan tab ini tetap terbuka: Anda akan memerlukan Kunci Situs (kunci klien publik) dan Kunci Rahasia (kunci server pribadi).
3. Daftarkan kunci rahasia Anda di Firebase console:
   1. Buka App Check di Firebase console.
   2. Buka tab Aplikasi.
   3. Temukan aplikasi web Anda dalam daftar, klik aplikasi tersebut (atau klik menu tiga titik ⋮), lalu pilih reCAPTCHA v3.
   4. Tempelkan Kunci Rahasia reCAPTCHA Anda ke dalam kolom, lalu klik Simpan.
4. Konfigurasi aplikasi klien untuk menggunakan ReCaptchaV3Provider:
   1. Di Google AI Studio, beralihlah ke panel chat dan minta asisten untuk memperbarui konfigurasi App Check Anda untuk produksi:

      Please update our Firebase App Check initialization to use
      ReCaptchaV3Provider with the reCAPTCHA site key "YOUR_RECAPTCHA_SITE_KEY",
      while retaining support for debug tokens in non-production environments.
      

   2. Jika Anda meninjau kode langsung di tab Code, pastikan inisialisasi App Check Anda cocok dengan struktur ini:

      import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
      
      const appCheck = initializeAppCheck(app, {
        provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
        isTokenAutoRefreshEnabled: true
      });
      

   3. Setelah memperbarui kode, publikasikan ulang aplikasi Anda di Google AI Studio untuk mengirimkan konfigurasi App Check yang telah diupdate ke situs aktif Anda.
5. Verifikasi traffic produksi dan pantau App Check:
   1. Buka URL aplikasi aktif Anda di jendela browser samaran, login dengan Google, dan uji pengiriman dilema.
   2. Kembali ke App Check di Firebase console, lalu periksa tab API dan Monitoring untuk memverifikasi bahwa permintaan berhasil didaftarkan untuk Firestore dan Firebase AI Logic.

Catatan: App Check sudah diterapkan untuk Firebase AI Logic. Setelah mengamati bahwa 100% traffic yang sah diverifikasi dalam metrik App Check, Anda juga dapat mengubah status penerapan App Check untuk Firestore menjadi Terapkan untuk menolak semua traffic yang tidak terverifikasi secara otomatis.

9. Kesimpulan

Selamat! Anda telah membuat aplikasi yang berguna dengan fitur AI dari awal, menggunakan alat di Builder Stack Google. Ini baru permulaan; ada banyak hal lain yang dapat Anda lakukan dengan alat Google. Sekarang Anda memiliki project Firebase + Google Cloud; pelajari semua layanan yang tersedia untuk Anda.

Buka link ini untuk mengklaim badge Perjalanan Pembuat Selesai.

Untuk melanjutkan perjalanan Anda, buka goo.gle/builders untuk mengikuti lab berikutnya.

Jika Anda sudah menggunakan Antigravity 2.0, platform khusus Google untuk mengatur beberapa agen otonom secara paralel, Anda dapat mengekspor project dengan cepat dari Google AI Studio dan mengimpornya ke Antigravity untuk terus mengerjakannya secara lokal. Antigravity memiliki Keahlian Agen untuk Firebase yang dapat diinstal dengan sekali klik. Keahlian ini juga menawarkan dukungan untuk pengembangan seluler, yang membantu Anda mereplikasi aplikasi ini di lingkungan Android dan iOS jika Anda mau.