GSP1330

Ringkasan

Gemini adalah kolaborator berteknologi AI yang membantu tim pengembangan membangun, men-deploy, dan mengoperasikan aplikasi secara lebih cepat dan efisien.

Di lab ini, Anda akan mempelajari cara Gemini untuk Developer membantu proses debug kode dan membuat pengujian unit, misalnya saat menguji kondisi batas dalam kode Anda.

Lab dalam kursus ini mencakup siklus proses pengembangan software (SDLC) yang umum dari sudut pandang developer aplikasi. Aspek lain dari SDLC (persyaratan, keamanan, pemantauan, dll.) akan dibahas di kursus lain.

Tujuan

Lab ini berfokus pada cara memanfaatkan Gemini untuk Developer untuk:

• Mengidentifikasi dan menyelesaikan error runtime dengan bantuan Gemini untuk Developer.
• Membuat pengujian unit untuk fungsi.

Yang akan Anda pelajari

Cymbal Superstore adalah platform belanja online yang berkembang pesat dan terus berupaya melakukan peningkatan agar tetap kompetitif di pasar. Sebagai bagian dari upaya pengembangan yang sedang berlangsung, mereka merancang fitur baru bernama 'New Products' untuk memudahkan pengguna menemukan produk terbaru yang ditambahkan ke inventaris toko.

Endpoint baru, newproducts, telah di-deploy ke staging, tetapi belum sesuai dengan keinginan pemilik bisnis. Anda perlu melakukan beberapa modifikasi dan men-debug kode baru. Agar fokus lab tidak bergeser dari bagaimana Gemini untuk Developer bisa membantu Anda, kode baru akan ditambahkan ke codebase asli. Anda juga akan diminta untuk mengembangkan beberapa pengujian unit layanan backend.

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).

Catatan: Gunakan jendela Samaran (direkomendasikan) atau browser pribadi untuk menjalankan lab ini. Hal ini akan mencegah konflik antara akun pribadi Anda dan akun siswa yang dapat menyebabkan tagihan ekstra pada akun pribadi Anda.

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

Catatan: Hanya gunakan akun siswa untuk lab ini. Jika Anda menggunakan akun Google Cloud yang berbeda, Anda mungkin akan dikenai tagihan ke akun tersebut.

Cara memulai lab dan login ke Google Cloud Console

1. Klik tombol Start Lab. Jika Anda perlu membayar lab, dialog akan terbuka untuk memilih metode pembayaran. Di sebelah kiri ada panel Lab Details yang berisi hal-hal berikut:

   • Tombol Open Google Cloud console
   • Waktu tersisa
   • Kredensial sementara yang harus Anda gunakan untuk lab ini
   • Informasi lain, jika diperlukan, untuk menyelesaikan lab ini

2. Klik Open Google Cloud console (atau klik kanan dan pilih Open Link in Incognito Window jika Anda menjalankan browser Chrome).

   Lab akan menjalankan resource, lalu membuka tab lain yang menampilkan halaman Sign in.

   Tips: Atur tab di jendela terpisah secara berdampingan.

   Catatan: Jika Anda melihat dialog Choose an account, klik Use Another Account.

3. Jika perlu, salin Username di bawah dan tempel ke dialog Sign in.

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

   Anda juga dapat menemukan Username di panel Lab Details.

4. Klik Next.

5. Salin Password di bawah dan tempel ke dialog Welcome.

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

   Anda juga dapat menemukan Password di panel Lab Details.

6. Klik Next.

   Penting: Anda harus menggunakan kredensial yang diberikan lab. Jangan menggunakan kredensial akun Google Cloud Anda. Catatan: Menggunakan akun Google Cloud sendiri untuk lab ini dapat dikenai biaya tambahan.

7. Klik halaman berikutnya:

   • Setujui persyaratan dan ketentuan.
   • Jangan tambahkan opsi pemulihan atau autentikasi 2 langkah (karena ini akun sementara).
   • Jangan mendaftar uji coba gratis.

Setelah beberapa saat, Konsol Google Cloud akan terbuka di tab ini.

Catatan: Untuk mengakses produk dan layanan Google Cloud, klik Navigation menu atau ketik nama layanan atau produk di kolom Search.

Mengaktifkan Cloud Shell

Cloud Shell adalah mesin virtual yang dilengkapi dengan berbagai alat pengembangan. Mesin virtual ini menawarkan direktori beranda persisten berkapasitas 5 GB dan berjalan di Google Cloud. Cloud Shell menyediakan akses command-line untuk resource Google Cloud Anda.

1. Klik Activate Cloud Shell di bagian atas Konsol Google Cloud.

2. Klik jendela berikut:

   • Lanjutkan melalui jendela informasi Cloud Shell.
   • Beri otorisasi ke Cloud Shell untuk menggunakan kredensial Anda guna melakukan panggilan Google Cloud API.

Setelah terhubung, Anda sudah diautentikasi, dan project ditetapkan ke Project_ID, . Output berisi baris yang mendeklarasikan Project_ID untuk sesi ini:

Project Cloud Platform Anda dalam sesi ini disetel ke {{{project_0.project_id | "PROJECT_ID"}}}

gcloud adalah alat command line untuk Google Cloud. Alat ini sudah terinstal di Cloud Shell dan mendukung pelengkapan command line.

3. (Opsional) Anda dapat menampilkan daftar nama akun yang aktif dengan perintah ini:

gcloud auth list

4. Klik Authorize.

Output:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} Untuk menetapkan akun aktif, jalankan: $ gcloud config set account `ACCOUNT`

5. (Opsional) Anda dapat menampilkan daftar ID project dengan perintah ini:

gcloud config list project

Output:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} Catatan: Untuk mendapatkan dokumentasi gcloud yang lengkap di Google Cloud, baca panduan ringkasan gcloud CLI.

Tugas 1. Memeriksa, membuat, dan menguji kode

Menetapkan variabel lingkungan

1. Di Cloud Shell, jalankan perintah berikut untuk menetapkan variabel lingkungan yang diperlukan.

export PROJECT_ID=$(gcloud config get-value project) export REGION={{{project_0.default_region|Lab Region}}} export ZONE={{{project_0.startup_script.lab_zone|Lab Zone}}}

2. Salin file yang diperlukan dari bucket Cloud Storage ke Cloud Shell.

gsutil -m cp -r gs://duet-appdev/cymbal-superstore .

Memeriksa kode

Selain mampu menjelaskan segmen kode yang tidak Anda pahami, Gemini juga dapat membuat komentar untuk Anda tambahkan ke kode guna membuatnya lebih mudah dipahami selama siklus pemeliharaan mendatang.

3. Buka editor dengan mengklik opsi Open Editor yang terlihat di kanan atas jendela Cloud Shell.

Tindakan ini akan membuka editor Visual Studio Code. Anda dapat melihat editor ini di jendela baru menggunakan opsi di panel menu Cloud Shell.

4. Buka File > Open Folder....

5. Pilih direktori cymbal-superstore, lalu klik OK.

Folder yang dipilih sekarang akan terlihat di bagian Explorer pada editor Visual Studio Code.

6. Buka file index.ts di folder backend.

7. Di kanan atas file, klik panah di samping Gemini .

8. Klik Select Gemini Code Assist Project untuk memilih project yang akan digunakan untuk Gemini. Dari daftar, pilih ID Project .

9. Jika di bagian bawah editor muncul dialog yang menyatakan bahwa Gemini Code Assist tidak diaktifkan untuk project yang dipilih, klik tombol Enable API di dialog untuk mengaktifkan API-nya.

Membuat kode

10. Di file index.ts, scroll ke baris 102 yang menampilkan teks berikut: /newproducts endpoint code goes here. Ganti baris ini dengan komentar yang ditampilkan di bawah.

{{{project_0.startup_script.prompt_1 | "Comment 1"}}} {{{project_0.startup_script.prompt_2 | "Comment 2"}}}

11. Pilih komentar yang baru ditambahkan, lalu klik ikon bola lampu kuning yang muncul. Dari daftar, klik opsi berikut: Gemini: Generate code.

12. Gemini menampilkan saran kode. Lihat kode yang disarankan lalu terima kodenya dengan mengklik Accept atau menekan tombol Tab. Kodenya kurang lebih akan seperti ini.

Catatan:

1. Gemini mengetahui arti ‘are in stock’. Frasa ini cukup umum dan memiliki arti yang jelas, sehingga Gemini menggunakannya di sini. Jika kebutuhan bisnis Anda lebih unik, mungkin diperlukan contoh.
2. Penggunaan properti data bernama quantity memungkinkan Gemini mengaitkannya dengan konsep ‘in stock’. Jika Anda menamai variabel, properti, dan metode dengan singkatan, akronim, atau kata-kata non-standar lainnya, kode Anda tidak hanya akan sulit dipelihara oleh orang lain, saran Gemini juga akan menjadi lebih tidak spesifik.
3. Meskipun tidak dinyatakan, Gemini menyarankan kode dengan pemeriksaan berjalan database agar konsisten dengan endpoint lain di file.

Menguji kode

13. Buka lagi terminal Cloud Shell menggunakan tombol Open Terminal di toolbar jendela Cloud Shell. Di terminal Cloud Shell, jalankan perintah berikut.

cd ~/cymbal-superstore/backend npm run start

Output Anda akan terlihat seperti ini:

14. Buka terminal lain di Cloud Shell dengan mengklik opsi + di toolbar jendela Cloud Shell, dan panggil endpoint di localhost.

curl localhost:8000/newproducts

Lihat output di terminal 1, yang dibatalkan dan menampilkan error.

Output Anda akan terlihat seperti ini:

Klik Periksa progres saya untuk memverifikasi tujuan. Membuat dan menguji kode.

Tugas 2. Memeriksa error dengan Gemini Chat

1. Buka file index.ts di editor.

2. Buka Gemini Chat seperti yang ditunjukkan di screenshot dan masukkan pesan error yang diberikan ke dalam kolom perintah.

{{{project_0.startup_script.prompt_2_1 | "Error message to be entered in the prompt"}}}

Output Anda akan terlihat seperti ini:

Catatan: Setiap kali dijalankan, Gemini menghasilkan hasil yang berbeda. Oleh karena itu, hasil yang ditampilkan di sini mungkin berbeda dengan respons yang Anda lihat.

3. Periksa kode untuk menyelesaikan masalah yang ada. Perintah di bawah ini adalah yang Anda identifikasi sebagai sumber error:

const query = firestore const products = await firestore .collection("inventory") .where("timestamp", ">", new Date(Date.now() - 604800000)) .where("quantity", ">", 0); .where("timestamp", ">=", sevenDaysAgo) .where("quantity", ">", 0) .get();

Respons Gemini memberi Anda opsi untuk memodifikasi filter agar menjadi filter kesamaan atau menghapus salah satu filter ketidaksamaan.

Pertama, mari hapus filter quantity dari panggilan Firestore untuk menyelesaikan error.

4. Untuk menghapus filter ketidaksamaan quantity, hapus fragmen kode berikut dari file index.ts.

.where("quantity", ">", 0);

Kode ini dapat dihapus agar fungsi dapat beroperasi tanpa error. Produk dengan kuantitas 0 tidak akan dapat difilter dari respons API, yang berarti produk tersebut akan gagal memenuhi kebutuhan bisnis. Kita harus berhati-hati agar tidak memasukkan item yang kehabisan stok. Ada beberapa pendekatan yang tepat untuk hal ini. Sebagian pendekatan mungkin lebih efektif dibandingkan pendekatan lainnya. Oleh karena itu, kita akan meminta bantuan Gemini.

5. Ajukan pertanyaan di bawah ini di Gemini Chat, dan pastikan file index.ts terbuka.

{{{project_0.startup_script.prompt_2_2 | "Question to the Gemini Chat"}}}

Output Anda akan terlihat seperti ini:

Jika Gemini berulang kali menyarankan Anda untuk menambahkan dua klausa where bahkan setelah percakapan direset, berikut adalah teknik untuk mendapatkan jawaban yang berbeda.

{{{project_0.startup_script.prompt_2_3 | "Different question approach to the Gemini Chat"}}}

Sering kali, Gemini akan menawarkan alternatif yang bisa Anda coba. Anda mungkin harus mereset percakapan dan memodifikasi perintah beberapa kali untuk mendapatkan opsi non-firestore.

Catatan: Terkadang Gemini bersikeras dan hanya memberikan opsi firestore yang acak (dan ilegal). Dalam kasus ini, peserta harus melanjutkan saja dengan saran yang diberikan.

Output Anda akan terlihat seperti ini:

6. Ubah kode yang ada dengan menambahkan cuplikan kode di file index.ts.

if (p.quantity > 0) { productsArray.push(p); }

Setelah dimodifikasi, kode akan terlihat seperti ini.

Menguji kode dengan perubahan di atas.

7. Buka terminal Cloud Shell dan tempelkan perintah di bawah.

cd ~/cymbal-superstore/backend npm run start

8. Buka tab terminal kedua dan panggil endpoint localhost.

curl localhost:8000/newproducts

Output Anda akan terlihat seperti ini:

9. Mari kita coba cara lain dengan komentar inline dan menghapus kondisi yang ditambahkan di atas. Kode finalnya akan terlihat seperti ini.

10. Tambahkan komentar di bawah ke posisi sebelum baris productsArray.push(p), . Tekan Ctrl+Enter untuk membuat kode. Terima kode jika berisi if (p.quantity > 0).

{{{project_0.startup_script.prompt_2_4 | "Comment message"}}}

Jadikan filter sebagai komentar sehingga terlihat seperti ini:

Klik Periksa progres saya untuk memverifikasi tujuan. Memeriksa error dengan Gemini Chat.

Catatan: Secara keseluruhan, karena ada banyak cara membuat kode untuk perbaikan ini, Gemini mungkin menawarkan banyak saran. Jika hal ini terjadi, Anda harus mengevaluasi opsi yang ada. Hal ini juga dapat menghasilkan beberapa koreksi sintaksis seperti yang ditunjukkan di atas.

Tugas 3. Menjalankan Pengujian

1. Buka terminal Cloud Shell dan jalankan perintah di bawah.

cd cymbal-superstore/backend npm run test

Output Anda akan terlihat seperti ini:

2. Buka file index.test.ts di folder backend. File ini berisi beberapa pengujian sederhana yang dikembangkan dengan alat bernama supertest dan menggunakan framework pengujian Jest. Tinjau pengujian yang ada dan minta Gemini menjelaskan hal yang tidak jelas.

Tugas 4. Mengembangkan pengujian dengan bantuan Gemini

Dalam tugas ini, Anda akan menulis pengujian untuk API produk baru di backend dengan bantuan Gemini.

Mengembangkan pengujian

1. Buka file index.test.ts di folder backend. Tambahkan komentar berikut ke bagian bawah file.

{{{project_0.startup_script.prompt_3_1 | "Comment message 1 in index.test.ts"}}} {{{project_0.startup_script.prompt_3_2 | "Comment message 2 in index.test.ts"}}}

2. Pilih komentar yang baru ditambahkan, lalu klik ikon bola lampu kuning yang muncul. Dari daftar, klik opsi berikut: Gemini: Generate code. Tekan tab untuk menerima saran.

Berikut adalah contoh kode yang dihasilkan. Anda juga dapat menempelkan kode yang diberikan di bawah ini.

describe('GET /newproducts', () => { it('should return a 200 status code', async () => { const response = await request(app) .get('/newproducts'); {{{project_0.startup_script.prompt_3_3 | "Generated code line from Gemini"}}}; }); it('should return a list of new products with length 8', async () => { const response = await request(app) .get('/newproducts'); expect(response.body.length).toBe(8); }); });

Menjalankan pengujian

3. Jalankan perintah di bawah ini di terminal Cloud Shell.

cd ~/cymbal-superstore/backend npm run test

Output Anda akan terlihat seperti ini:

4. Periksa pengujian mana yang gagal dengan men-scroll hasil di output terminal.

Catatan: Anda akan melihat respons ini yang menunjukkan bahwa pengujian gagal. Nilai 10 adalah jumlah produk baru, termasuk produk dengan kuantitas 0. Kebutuhan bisnis yang baru menyatakan bahwa item yang tidak tersedia harus difilter, tetapi pengujian mengungkapkan bahwa ada yang salah.

Klik Periksa progres saya untuk memverifikasi tujuan. Menulis pengujian untuk API produk baru.

Memperbaiki bug

5. Buka index.ts di folder backend dan hapus komentar untuk filter yang ditambahkan di tugas terakhir. Kode yang diperbarui akan terlihat seperti ini.

//do not insert products that are out of stock if (p.quantity > 0) productsArray.push(p);

6. Jalankan kembali pengujian dari terminal Cloud Shell.

cd ~/cymbal-superstore/backend npm run test

Output Anda akan terlihat seperti ini:

Tugas 5. Pengujian kondisi batas

Pengujian kondisi batas bisa menantang. Kesulitannya muncul dari kebutuhan untuk mempertimbangkan situasi yang tidak terduga, seperti daftar kosong atau saldo negatif yang seharusnya tidak terjadi, tetapi mungkin muncul selama eksekusi. Dalam konteks ini, mari kita lihat apakah Gemini dapat membantu.

1. Untuk mendapatkan respons yang paling umum, tutup semua file yang terbuka. Reset Gemini Chat dengan mengklik ikon New Chat (+) di atas percakapan, lalu masukkan perintah berikut:

{{{project_0.startup_script.prompt_4_1 | "Prompt for boundary conditions"}}}

Output Anda akan terlihat seperti ini:

Yes, I can definitely help you create tests for boundary conditions! Boundary value analysis is a crucial part of software testing. It involves testing at the "edges" or "boundaries" of input domains. These are often the places where errors lurk. To help you best, I'd need a little more information. For example: - What programming language are you using? - Could you provide the code (or a snippet of it) that you'd like to test? - What are the inputs and their expected valid ranges?

2. Buka file index.ts di folder backend untuk memberikan beberapa informasi latar belakang kepada Gemini. Ajukan pertanyaan kepada Gemini tentang pengujian batas untuk endpoint /newproducts. Buka Gemini Chat dan masukkan:

{{{project_0.startup_script.prompt_4_2 | "Prompt for boundary tests for the /newproducts endpoint"}}}

Output Anda akan terlihat seperti ini:

Catatan: Sebagian dari respons di atas jelas dibuat berdasarkan kodenya sendiri (added within the last 7 days dan in stock), ditambah dengan kondisi batas yang lebih umum yang dianggap Gemini lazim untuk jenis kode seperti ini. Hal ini sangat berguna untuk memulai pembuatan set kondisi batas yang solid.

3. Untuk mengubahnya menjadi pengujian sebenarnya, buka file index.test.ts. Salin komentar di bawah dan tambahkan ke bagian akhir file.

{{{project_0.startup_script.prompt_4_3 | "Comment message in index.test.ts file"}}}

Output Anda akan terlihat seperti ini:

4. Tambahkan kode berikut setelah komentar di atas di file index.test.ts.

describe('GET /newproducts', () => { it('should not return products that are out of stock', async () => { const response = await request(app) .get('/newproducts'); response.body.forEach((product: any) => { expect(product.quantity).toBeGreaterThan(0); }); }); });

5. Jalankan kembali pengujian di terminal Cloud Shell. Anda akan melihat output seperti di bawah ini.

Output Anda akan terlihat seperti ini:

Klik Periksa progres saya untuk memverifikasi tujuan. Pengujian kondisi batas.

Selamat!

Di akhir lab ini, Anda telah memperoleh kemahiran dalam memanfaatkan Gemini untuk Developer guna meningkatkan kemampuan debug kode dan menyederhanakan pembuatan pengujian unit, terutama saat menilai kondisi batas dalam kode.

Manual Terakhir Diperbarui pada 17 Oktober 2025

Lab Terakhir Diuji pada 17 Oktober 2025

Hak cipta 2025 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.