GSP1337

Ringkasan

Di lab ini, Anda akan mempelajari cara membuat prototipe aplikasi dengan cepat di Google AI Studio. Jelajahi aplikasi AI siap pakai, pelajari cara membuat aplikasi Anda sendiri dari template, gunakan dan sempurnakan perintah teks, serta temukan cara mengelola dan membagikan kreasi Anda. Untuk lab ini, Anda akan berperan sebagai Developer Solusi di hackathon, dengan tujuan untuk membangun dan membagikan beberapa aplikasi AI bukti konsep dengan cepat dalam batas waktu tertentu.

Yang akan Anda pelajari

Di lab ini, Anda akan mempelajari cara:

• Menjelajahi aplikasi yang dibuat sebelumnya oleh Google.
• Membuat aplikasi menggunakan template dan memodifikasinya dengan Code Assistant.
• Membuat aplikasi berbasis data dari satu perintah teks.
• Menyimpan, mendownload, dan melihat prototipe aplikasi.

Penyiapan dan persyaratan

Sebelum mengklik tombol Start Lab

Baca petunjuk ini. Lab memiliki timer dan Anda tidak dapat menjedanya. Timer yang dimulai saat Anda mengklik Start Lab akan menampilkan durasi ketersediaan resource Google Cloud untuk Anda.

Lab interaktif ini dapat Anda gunakan untuk melakukan aktivitas lab di lingkungan cloud sungguhan, bukan di lingkungan demo atau simulasi. Untuk mengakses lab ini, Anda akan diberi kredensial baru yang bersifat sementara dan dapat digunakan untuk login serta mengakses Google Cloud selama durasi lab.

Untuk menyelesaikan lab ini, Anda memerlukan:

• Akses ke browser internet standar (disarankan browser Chrome).

• Waktu untuk menyelesaikan lab. Ingat, setelah dimulai, lab tidak dapat dijeda.

Membuka Google AI Studio

1. Klik Mulai Lab.  Panel lab akan menampilkan kredensial sementara untuk lab ini.

   • Catatan: Jika lab ini berbayar, Anda akan diminta untuk memilih metode pembayaran.

2. Buka Google AI Studio di jendela Samaran. Halaman login dengan Google akan muncul.

   • Tips: Untuk lebih memudahkan akses, atur tab lab dan AI Studio di jendela terpisah yang saling berdampingan.

3. Salin Username di bawah dan tempel ke kolom Email, lalu klik Next.

   {{{user_0.username | "Username"}}}

4. Salin Password di bawah dan tempel ke kolom Enter your password, lalu klik Next.

   {{{user_0.password | "Password"}}}

5. Setujui persyaratan dan ketentuan di layar untuk melanjutkan.

Sekarang Anda sudah login ke Google AI Studio menggunakan akun siswa sementara Anda.

Tugas 1. Menjelajahi aplikasi siap pakai

Sebagai developer hackathon, langkah pertama Anda adalah mempelajari dengan cepat lanskap untuk melihat elemen penyusun dan contoh yang tersedia. Anda akan memulai dengan menjelajahi aplikasi chatbot siap pakai.

1. Di menu navigasi kiri, klik Enable saving (di bagian atas opsi Build), lalu pilih nama pengguna Anda.

2. Klik Build.

3. Klik tab Gallery > All apps, lalu scroll untuk melihat galeri template aplikasi bawaan.

4. Temukan aplikasi ChatterBots, lalu klik aplikasi tersebut.

5. Klik Allow untuk memberikan akses yang diminta ke Mikrofon.

6. Aplikasi akan terbuka di tampilan IDE. Luangkan waktu untuk memahami antarmuka: Code assistant ada di sebelah kiri, editor kode/penampil file ada di tengah, dan Pratinjau live chatbot yang sedang berjalan ada di sebelah kanan.

7. Lihat pratinjau aplikasi, jelajahi preset ChatterBot, dan buat ChatterBot Anda sendiri berdasarkan karakteristik yang Anda tentukan.

8. Jelajahi kode yang dihasilkan. Di editor kode, klik tombol Show file tree view untuk melihat struktur kode. Klik file seperti App.tsx untuk melihat kode aplikasi utama, atau file dalam folder komponen untuk melihat cara elemen UI tertentu dibuat.

Tugas 2. Membuat prototipe aplikasi dari template dan mengubahnya

Selanjutnya, Anda memutuskan bahwa utilitas flashcard sederhana akan berguna untuk project hackathon Anda. Anda akan membuatnya dari template, lalu menggunakan Code Assistant untuk mengubah tampilannya dengan cepat agar sesuai dengan branding project Anda.

Membuat aplikasi

1. Klik Back to start, dan kembali ke halaman beranda dengan mengklik logo Google AI Studio di bagian pojok kiri atas.

2. Di menu navigasi kiri, klik Build > Start.

3. Temukan dan klik template Flash UI untuk membuat aplikasi.

Memodifikasi aplikasi dengan Code assistant

1. Di panel Preview di sebelah kanan, berinteraksilah dengan flashcard default untuk melihat cara kerjanya.

2. Ketik Large Language Models di kolom input, lalu klik panah untuk membuat set khusus topik.

3. Sekarang, arahkan perhatian Anda ke kolom input Code assistant di kiri bawah. Ketik perintah berikut untuk mengubah gaya dan logika aplikasi:

4. Klik Send prompt. Anda dapat melihat asisten memodifikasi kode aplikasi di editor.

5. Setelah kode diperbarui, uji kedua perubahan di panel Preview. Pastikan flashcard berwarna hijau muda dan Anda hanya dapat membalikkan satu kartu dalam satu waktu.

6. Selanjutnya, Anda akan menambahkan fitur lain. Di kolom input Code assistant, ketik perintah baru berikut:

7. Klik Send prompt dan lihat saat asisten menambahkan tombol baru ke UI dan memodifikasi kode untuk menyertakan logika baru.

8. Terakhir, uji fitur baru di panel Preview. Klik tombol Surprise Me > add 5 more yang baru, lalu konfirmasi bahwa lima kartu flash tambahan yang unik telah ditambahkan ke set Anda.

9. Klik ikon pensil di bagian samping Nama Aplikasi Flash UI, ganti nama aplikasi menjadi Flashcard Maker, tetap gunakan deskripsi default, lalu klik Save.

Klik Periksa progres saya untuk memverifikasi tujuan.

Tugas 3. Membuat aplikasi menggunakan perintah teks

Sekarang saatnya acara utama hackathon: membangun fitur inti Anda dari awal. Anda akan membuat perencana itinerari perjalanan dengan mendeskripsikannya dalam bahasa Inggris sederhana. Anda secara khusus akan meminta model untuk membuat UI yang dapat menampilkan data terstruktur dengan rapi.

1. Kembali ke galeri halaman Build.

2. Di kolom perintah teks utama di bagian atas halaman, masukkan permintaan mendetail berikut:

3. Klik Build, dan tunggu hingga Code assistant membuat aplikasi yang lengkap.

4. Setelah aplikasi muncul, uji fungsinya di panel Preview. Di kolom input kota, ketik Rome, lalu tekan ENTER.

5. Amati outputnya. Aplikasi akan menampilkan itinerari 3 hari terstruktur untuk Roma, yang menunjukkan bahwa AI berhasil membuat UI berbasis data dari perintah teks Anda.

6. Klik ikon pensil pada bagian atas panel di samping Nama aplikasi, ganti nama aplikasi menjadi AI Travel Itinerary Generator, tetap gunakan deskripsi default, lalu klik Save.

7. (Opsional) Gunakan Code assistant untuk memodifikasi bagian aplikasi yang Anda inginkan.

Klik Periksa progres saya untuk memverifikasi tujuan.

Tugas 4. Menyimpan, mendownload, dan melihat aplikasi Anda

Prototipe perencana perjalanan Anda berfungsi. Langkah terakhir dalam hackathon adalah mendownload progres dan membagikan project kepada tim Anda.

Aplikasi Anda kini disimpan ke bagian "Your apps" di halaman Build.

1. Klik ikon Download dari toolbar yang sama. File ZIP yang berisi kode sumber lengkap untuk aplikasi Anda akan didownload ke komputer Anda.

   • Catatan: Anda dapat menggunakan kode ini untuk melanjutkan pengembangan secara lokal di editor Anda sendiri.

2. Pelajari jalur untuk mengaktifkan aplikasi Anda. Klik tombol Deploy App dari toolbar yang sama.

   • Catatan: Kita tidak akan menyelesaikan proses deployment penuh di lab ini, tetapi langkah ini menunjukkan jalur terintegrasi untuk memublikasikan aplikasi Anda di Google Cloud.

Melihat prototipe aplikasi Anda

1. Buka halaman beranda, lalu klik logo Google AI Studio di pojok kiri atas.

2. Di menu navigasi kiri, klik Build.

3. Klik tab Your apps > Created by you untuk melihat prototipe yang telah Anda modifikasi dan buat. Anda akan melihat dua aplikasi: Flashcard Maker dan AI Travel Itinerary Generator.

Selamat!

Selamat! Anda telah berhasil menggunakan Google AI Studio untuk mengeksplorasi, mengadaptasi, dan membuat prototipe aplikasi fungsional dari awal dengan cepat. Anda telah mempelajari cara memanfaatkan template bawaan, mengubah kode dengan bahasa alami, dan membuat aplikasi lengkap berbasis data dari satu perintah teks. Sekarang Anda sudah siap untuk mewujudkan ide-ide Anda sendiri yang didukung AI.

Sertifikasi dan pelatihan Google Cloud

...membantu Anda mengoptimalkan teknologi Google Cloud. Kelas kami mencakup keterampilan teknis dan praktik terbaik untuk membantu Anda memahami dengan cepat dan melanjutkan proses pembelajaran. Kami menawarkan pelatihan tingkat dasar hingga lanjutan dengan opsi on demand, live, dan virtual untuk menyesuaikan dengan jadwal Anda yang sibuk. Sertifikasi membantu Anda memvalidasi dan membuktikan keterampilan serta keahlian Anda dalam teknologi Google Cloud.

Manual Terakhir Diperbarui pada 12 Maret 2026

Lab Terakhir Diuji pada 12 Maret 2026

Hak cipta 2026 Google LLC. Semua hak dilindungi undang-undang. Google dan logo Google adalah merek dagang dari Google LLC. Semua nama perusahaan dan produk lain mungkin adalah merek dagang masing-masing perusahaan yang bersangkutan.