Mulai Menggunakan Firebase Studio

1. Ringkasan

Dalam codelab ini, Anda akan berlatih menggunakan agen Pembuatan Prototipe Aplikasi di Firebase Studio untuk membuat aplikasi yang dirancang untuk membantu Anda mempelajari bahasa baru. Kemudian, Anda akan menyempurnakan dan meningkatkan kualitas aplikasi, lalu memublikasikannya ke Firebase App Hosting jika perlu.

Yang akan Anda pelajari

• Praktik terbaik untuk perintah di Firebase Studio
• Melakukan iterasi pada aplikasi untuk menambahkan fungsi dan memperbaiki bug
• Memublikasikan aplikasi ke Firebase App Hosting dan membagikannya kepada orang lain
• Melacak metrik utama melalui panel Ringkasan aplikasi App Hosting

Yang Anda butuhkan

• Browser pilihan Anda, seperti Google Chrome
• Akun Google untuk pembuatan dan pengelolaan project Firebase Anda

2. Membuat aplikasi Anda menggunakan agen Pembuatan Prototipe Aplikasi

Agen Pembuatan Prototipe Aplikasi menggunakan Gemini di Firebase untuk membangun aplikasi Anda. Meskipun menggunakan perintah yang identik, hasil Anda mungkin tidak terlihat atau berfungsi persis seperti yang ditampilkan dalam codelab ini. Jika Anda mengalami kesulitan, kami telah menyediakan serangkaian file yang dapat Anda tambahkan ke ruang kerja untuk melanjutkan lab di beberapa titik pemeriksaan di sepanjang codelab ini.

1. Login ke Akun Google Anda dan buka Firebase Studio.
2. Di kolom Buat prototipe aplikasi dengan AI, masukkan deskripsi aplikasi yang ingin Anda bangun. Untuk codelab ini, Anda akan membuat aplikasi yang membantu Anda mempelajari bahasa baru melalui cerita, kartu flash, dan tutor AI. Masukkan perintah, seperti:

   An app to help someone learn a new language. The app should include
   AI-generated stories in the target language, where users can click vocab
   words or the entire story to see it in English. A different section
   includes flashcards, where the user is shown a word in the chosen language
   and can click it to flip the card and see the word in English. The final
   section includes an AI chatbot that allows the user to have simple
   conversations in the chosen language or ask questions in English about
   what a word means or how to form a sentence in the chosen language. All
   content should be beginner-friendly, focusing on basic greetings, common
   questions/answers, and vocabulary relevant to the lessons or stories.
   To start, the app should teach the user French, although we might add
   additional languages in the future.
   

3. Klik Prototype with AI.
4. Tinjau Cetak Biru Aplikasi yang disarankan. Klik Sesuaikan untuk mengedit blueprint:
   1. Ubah Nama Aplikasi menjadi Speak Easy.
   2. Ubah skema warna menjadi berikut:

   Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
   Secondary color: Light parchment (#F5EBCD) to complement the primary color.
   Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
   

   Jika Anda lebih memilih mengirimkan skema warna atau tata letak sebagai gambar, klik opsi Lampiran untuk mengupload gambar selama proses perintah atau cetak biru. Gambar harus berukuran kurang dari 3 MiB.
5. Klik Save.
6. Setelah blueprint selesai menggabungkan pembaruan Anda, klik Prototype this App.
7. Karena aplikasi ini menyertakan elemen AI, agen akan meminta kunci Gemini kepada Anda. Tambahkan kunci Gemini API Anda sendiri atau klik Buat otomatis untuk membuat kunci Gemini API. Jika Anda mengklik Auto-generate, Firebase Studio akan membuat project Firebase dan menghasilkan kunci Gemini API untuk Anda.
8. Agen Pembuatan Prototipe Aplikasi menggunakan Cetak Biru Aplikasi untuk membuat versi pertama aplikasi Anda. Setelah selesai, pratinjau aplikasi Anda akan muncul bersama antarmuka chat Gemini. Luangkan waktu untuk menguji aplikasi Anda. Meskipun tidak terlihat persis seperti yang Anda bayangkan, bagian berikutnya menjelaskan cara menambahkan fungsi baru dan menyempurnakan desain.

3. (Opsional) Dapatkan kode

Jika Anda mengalami masalah atau ingin mengikuti aplikasi contoh dengan lebih cermat, gunakan file contoh yang disediakan di beberapa titik pemeriksaan di seluruh codelab.

1. Download file di folder.
2. Di Firebase Studio, klik Switch to Code untuk membuka tampilan Code.
3. Tarik file yang Anda download ke panel Explorer di Firebase Studio. Izinkan file menggantikan file yang ada.
4. Klik Beralih ke Prototyper untuk melanjutkan codelab, menggunakan contoh versi aplikasi.

4. Menguji, melakukan iterasi, dan men-debug fungsi aplikasi Anda

Saat melihat pratinjau aplikasi, Anda mungkin melihat bug atau fungsi yang tidak terduga. Dalam contoh versi aplikasi, kita akan menambahkan perubahan dan perbaikan berikut:

• Di generator cerita AI, pengguna harus dapat mengklik kata-kata kosakata untuk mendapatkan definisi dalam bahasa Inggris.
• Kartu flash akan muncul dalam bahasa Prancis, lalu beralih ke bahasa Inggris saat diklik.
• Pengguna akan dapat membuka halaman setelan dan beralih mempelajari bahasa Jepang, bukan bahasa Prancis.

Tujuan 1: Menambahkan kata-kata kosakata ke Pembuat Cerita AI

Opsional: Untuk menggunakan contoh versi aplikasi mulai dari titik ini, download dan tarik file ini ke panel Explorer Firebase Studio dalam tampilan Kode.

1. Di antarmuka chat, jelaskan fitur yang ingin Anda tambahkan:

   In the AI Story Generator, users should be able to click vocab words or
   phrases to get the definition in English. Words or phrases should be
   underlined to indicate they can be clicked.
   

2. Uji aplikasi di jendela pratinjau. Anda akan memperbarui tampilan dan nuansa aplikasi nanti, jadi cobalah untuk berfokus pada fungsi saja untuk saat ini.
3. Jika aplikasi Anda tidak berfungsi seperti yang Anda harapkan, terus minta agen Pembuatan Prototip Aplikasi untuk melakukan penyesuaian. Contoh:

   IMPORTANT: Be sure to underline and provide a definition for most words
   and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
   story appears multiple times, only underline and define the first instance.
   

4. Klik Switch to Code untuk membuka tampilan Kode, tempat Anda dapat melihat semua file aplikasi dan mengubah kode secara langsung. Jika ada bug yang tidak dapat diselesaikan Gemini, terkadang lebih mudah mengedit file secara manual. Jika sudah siap, Beralih ke Prototyper untuk terus menggunakan agen Pembuatan Prototipe Aplikasi.

Sasaran 2: Menambahkan terjemahan ke kartu flash

Opsional: Untuk menggunakan contoh versi aplikasi mulai dari titik ini, download dan tarik file ini ke panel Explorer Firebase Studio dalam tampilan Kode.

Ikuti proses yang sama seperti di atas, menggunakan antarmuka chat untuk mendeskripsikan fitur, mengujinya di jendela pratinjau, lalu menggunakan perintah tambahan atau tampilan Kode untuk menambahkan terjemahan ke kartu flash. Coba perintah seperti:

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

Terkadang, agen Pembuatan Prototipe Aplikasi tidak mengenali adanya bug. Mendeskripsikan apa yang Anda lihat dan apa yang perlu diperbaiki bisa lebih efektif, seperti:

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

Sasaran 3: Menambahkan bahasa baru

Opsional: Untuk menggunakan contoh versi aplikasi mulai dari titik ini, download dan tarik file ini ke panel Explorer Firebase Studio dalam tampilan Kode.

Coba perintah seperti:

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

5. Melakukan iterasi pada desain aplikasi Anda

Opsional: Untuk menggunakan contoh versi aplikasi mulai dari titik ini, download dan tarik file ini ke panel Explorer Firebase Studio dalam tampilan Kode.

Setelah aplikasi Anda memiliki semua fungsi yang Anda inginkan, saatnya untuk mengerjakan gaya.

Mengubah skema warna aplikasi

Anda dapat menentukan warna yang ingin digunakan, atau membiarkan agen Pembuatan Prototipe Aplikasi yang menentukan. Di antarmuka chat, Anda juga dapat mengklik opsi Lampiran untuk mengupload gambar warna atau gaya yang ingin Anda gunakan. Jika Anda lebih suka menggunakan perintah, coba:

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

Memperbarui teks yang digunakan di aplikasi

Misalnya, alih-alih "Tutor Chatbot AI", Anda mungkin ingin chatbot hanya mengatakan "Chat":

 Change the text "AI Chatbot Tutor" to "Chat".

Menyesuaikan UI aplikasi agar lebih intuitif

Misalnya, alih-alih pengguna harus menekan tombol untuk mengirimkan teks, Anda dapat mengizinkan pengguna menekan Return di keyboard mereka:

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

Menambahkan opsi bagi pengguna untuk memilih antara mode terang dan gelap

Banyak pengguna mungkin lebih memilih opsi untuk memilih antara tema aplikasi yang lebih terang atau lebih gelap. Pertimbangkan tempat yang logis untuk menemukan tombol ini:

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

Tips pembuatan perintah dan proses debug

• Mendapatkan bantuan terkait perintah: Jika Anda kesulitan menjelaskan keinginan Anda kepada agen Pembuatan Prototipe Aplikasi, coba minta Gemini untuk Google membantu menyempurnakan perintah. Pelajari lebih lanjut cara membuat perintah yang efektif.
• Uji di perangkat lain: Dalam mode Prototipe, klik Bagikan Link Pratinjau untuk menguji aplikasi Anda di perangkat lain.
• Gunakan alat bawaan: Dalam tampilan Kode, gunakan fitur proses debug dan pelaporan bawaan Firebase Studio untuk memeriksa, men-debug, dan mengaudit aplikasi Anda.
• Mulai dengan yang sederhana: Kerjakan satu fitur dalam satu waktu. Pertimbangkan untuk memulai dengan serangkaian fitur dasar dalam prototipe Anda, lalu perluas setelah fitur tersebut berfungsi seperti yang diharapkan.
• Jelaskan bug: Jika ada sesuatu yang tidak berfungsi, jelaskan perilaku saat ini kepada agen Pembuatan Prototip Aplikasi, diikuti dengan perilaku yang Anda inginkan.
• Melakukan roll back jika diperlukan: Jika agen Pembuatan Prototip Aplikasi salah memahami perintah atau menimbulkan masalah yang sulit dipecahkan, klik tombol Pulihkan untuk melakukan roll back ke versi aplikasi sebelumnya dan coba lagi dengan perintah yang berbeda.

6. (Opsional) Memublikasikan aplikasi Anda

Opsional: Untuk menggunakan contoh versi aplikasi mulai dari titik ini, download dan tarik file ini ke panel Explorer Firebase Studio dalam tampilan Kode.

Setelah menguji aplikasi dan puas dengan hasilnya, Anda dapat memublikasikannya ke web dengan Firebase App Hosting.

1. Klik Publish untuk membuat project Firebase baru dan memulai penyiapan App Hosting. Panel Publish your app akan muncul.
2. Pada langkah Firebase project, catat nama project Firebase yang dibuat untuk Anda, lalu klik Next.
3. Pada langkah Link Cloud Billing account, pilih salah satu opsi berikut:
   1. Pilih akun Penagihan Cloud yang ingin Anda tautkan ke project Firebase Anda.
   2. Jika Anda tidak memiliki akun Penagihan Cloud atau ingin membuat akun baru, klik Buat akun Penagihan Cloud. Tindakan ini akan membuka teks Google Cloud, tempat Anda dapat membuat akun Penagihan Cloud layanan mandiri baru. Setelah membuat akun, kembali ke Firebase Studio dan pilih akun dari daftar Link Penagihan Cloud.
4. Klik Berikutnya. Firebase Studio menautkan akun penagihan ke project yang terkait dengan ruang kerja Anda, yang dibuat saat Anda membuat kunci API Gemini secara otomatis atau saat Anda mengklik Publish. Kemudian, App Hosting akan menyiapkan lingkungan yang terkelola sepenuhnya untuk aplikasi Anda di Google Cloud.
5. Klik Create your first rollout. Firebase Studio meluncurkan peluncuran App Hosting. Proses ini dapat memerlukan waktu hingga sepuluh menit. Untuk mempelajari lebih lanjut apa yang terjadi di balik layar, lihat Proses build App Hosting.
6. Setelah peluncuran selesai, Ringkasan aplikasi akan muncul dengan URL dan insight aplikasi yang didukung oleh kemampuan observasi App Hosting. Untuk menggunakan domain kustom (seperti contoh.com atau app.example.com), Anda dapat menambahkan domain kustom di teks Firebase, alih-alih domain yang dihasilkan Firebase.

Untuk mengetahui informasi selengkapnya tentang App Hosting, lihat Memahami App Hosting dan cara kerjanya.

7. (Opsional) Memantau aplikasi Anda

Panel App overview App Hosting memberikan metrik dan informasi penting tentang aplikasi Anda, sehingga Anda dapat memantau performa aplikasi web menggunakan alat kemampuan observasi bawaan App Hosting. Setelah situs diluncurkan, Anda dapat mengakses ringkasan dengan mengklik Publikasikan. Dari panel ini, Anda dapat:

• Mengklik Create rollout untuk merilis versi baru aplikasi Anda.
• Membagikan link ke aplikasi Anda atau membuka aplikasi Anda secara langsung di Visit your app.
• Meninjau ringkasan performa aplikasi Anda selama 7 hari terakhir, termasuk jumlah total permintaan dan status peluncuran terbaru Anda. Klik Lihat detail untuk mengakses informasi selengkapnya di teks Firebase.
• Melihat grafik jumlah permintaan yang diterima aplikasi Anda selama 24 jam terakhir, yang dikelompokkan menurut kode status HTTP.

Jika menutup panel App overview, Anda dapat membukanya kembali kapan saja dengan mengklik Publish.

Pelajari lebih lanjut cara mengelola dan memantau peluncuran App Hosting di Mengelola peluncuran dan rilis.

8. Kesimpulan

Selamat! Anda berhasil membuat aplikasi menggunakan Firebase Studio. Ada banyak hal lain yang dapat Anda tambahkan ke aplikasi, seperti kamus yang lebih lengkap, lebih banyak bahasa, audio, animasi, atau pilihan tingkat kesulitan. Jangan ragu untuk terus bermain dengan aplikasi Anda atau membuat sesuatu yang baru.

Pelajari lebih lanjut:

• Mengembangkan, memublikasikan, dan memantau aplikasi web full stack dengan App Prototyping agent
• Mulai membuat prototipe aplikasi baru Anda dengan Firebase Studio
• Pelajari ruang kerja Firebase Studio lebih lanjut