1. Pengantar
Di lab ini, Anda akan menggunakan Gemini Code Assist, kolaborator berteknologi AI di Google Cloud, untuk menambahkan pengujian ke aplikasi web Python yang ada, serta menemukan dan memperbaiki error dalam aplikasi tersebut yang terungkap oleh pengujian. Kemudian, Anda akan menggunakan Code Assist untuk membuat pengujian bagi fungsi baru dan membuat kode untuk lulus pengujian tersebut serta memperluas aplikasi.
Yang akan Anda lakukan ...
- Anda akan menggunakan Cloud Shell Editor untuk mendownload kode aplikasi Web yang sudah ada.
- Anda akan menggunakan Chat Gemini Code Assist di Editor Cloud Shell untuk mengajukan pertanyaan umum terkait Google Cloud.
- Anda akan menggunakan bantuan kode Inline Gemini Code Assist di Editor Cloud Shell untuk membuat pengujian aplikasi, menjalankan pengujian, serta menemukan dan memperbaiki error, lalu memperluas fungsi aplikasi.
Yang akan Anda pelajari ...
- Cara menggunakan Gemini Code Assist untuk beberapa tugas developer seperti pembuatan pengujian dan pembuatan kode.
- Cara menggunakan Gemini Code Assist untuk mempelajari Google Cloud.
Yang Anda butuhkan ...
- Browser web Chrome
- Akun Gmail
- Project Cloud dengan penagihan diaktifkan
- Gemini Code Assist diaktifkan untuk Project Cloud Anda
Lab ini ditujukan bagi developer dari semua level, termasuk para pemula. Meskipun aplikasi contoh menggunakan bahasa Python, Anda tidak harus familier dengan pemrograman Python untuk memahami maksudnya. Fokus kita adalah memahami kemampuan Gemini Code Assist bagi developer.
2. Penyiapan
Anda seharusnya sudah memiliki Project Cloud dengan penagihan yang diaktifkan untuk digunakan dalam lab ini. Sekarang kita akan mengaktifkan Gemini API di Project Google Cloud. Ikuti langkah-langkah berikut:
- Buka https://console.cloud.google.com dan pastikan Anda telah memilih Project Google Cloud yang akan digunakan untuk lab ini. Klik ikon Gemini yang Anda lihat di kanan atas.
- Jendela konsol Gemini for Cloud akan terbuka di sisi kanan konsol. Klik tombol Aktifkan jika ditampilkan di bawah. Jika tombol Enable tidak ada dan yang terlihat adalah antarmuka Chat, Anda telah mengaktifkan Gemini for Cloud untuk project tersebut dan Anda dapat langsung melanjutkan ke langkah berikutnya.
- Setelah diaktifkan, Anda dapat menguji Gemini dengan mengajukan satu atau dua kueri. Beberapa contoh kueri ditampilkan, tetapi Anda dapat mencoba, misalnya, What is Cloud Run?
Code Assist akan merespons dengan menjawab pertanyaan Anda. Anda dapat mengklik ikon 
di pojok kanan atas untuk menutup jendela chat Code Assist.
Mengaktifkan Gemini di Cloud Shell Editor
Gemini Code Assist tersedia dan berperilaku serupa di beberapa IDE populer. Anda akan menggunakan Editor Google Cloud Shell, yang berjalan sepenuhnya di browser web Anda, dalam codelab ini. Anda perlu mengaktifkan dan mengonfigurasi Gemini di Cloud Shell Editor dan langkah-langkahnya dijelaskan di bawah ini:
- Luncurkan Cloud Shell melalui ikon yang ditunjukkan di bawah. Mungkin perlu waktu satu atau dua menit untuk memulai instance Cloud Shell.
- Klik tombol Editor atau Open Editor (mana pun yang tersedia) dan tunggu hingga Cloud Shell Editor muncul. Jika Anda melihat tombol Try the new editor, klik tombol tersebut.
- Klik tombol Cloud Code - Sign in di status bar bawah seperti yang ditunjukkan. Otorisasi plugin seperti yang ditunjukkan. Jika Anda melihat "Cloud Code - no project" di status bar, pilih opsi tersebut, lalu pilih Project Google Cloud tertentu dari daftar project yang akan dikerjakan.
- Jika tidak melihat ikon Gemini di status bar di bagian kanan bawah, Anda harus mengaktifkannya di Cloud Code. Sebelum Anda melakukannya, pastikan Gemini (sebelumnya dikenal sebagai Duet AI untuk Developer) telah diaktifkan di IDE dengan membuka Cloud Code Extension → Settings, lalu masukkan teks Duet AI: Enable seperti yang ditunjukkan di bawah. Pastikan kotak centang sudah dipilih. Anda harus memuat ulang IDE Anda. Dengan begitu, Gemini di Cloud Code akan aktif, dan status bar Gemini akan muncul di IDE Anda.
- Klik tombol Gemini di pojok kanan bawah seperti yang ditunjukkan, lalu pilih project Google Cloud yang tepat dengan Cloud AI Companion API yang sudah diaktifkan.
- Setelah memilih project Google Cloud, pastikan Anda dapat melihatnya di pesan status Cloud Code di status bar dan Gemini juga sudah diaktifkan di sebelah kanan status bar seperti yang ditunjukkan di bawah:
Gemini Code Assist siap digunakan.
3. Mendownload dan memeriksa aplikasi
Di jendela terminal, jalankan perintah untuk meng-clone repositori dengan kode awal, lalu beralih ke direktori baru (jika jendela terminal tidak lagi terbuka, klik tombol Terminal atau Open Terminal untuk memulihkannya):
git clone https://github.com/GoogleCloudPlatform/testing-with-duet-ai-codelab.git
cd testing-with-duet-ai-codelab
Buka main.py di editor, lalu buka jendela Gemini Chat dengan mengklik ikon Gemini Chat di sisi kiri editor. Jendela Gemini Chat ini berada dalam IDE dan memiliki kode di IDE yang tersedia sebagai konteks untuk diskusi. Masukkan perintah Explain this dan lihat jawabannya:
Anda dapat men-scroll jendela chat ini untuk melihat seluruh jawaban. Penjelasan mengatakan bahwa kita dapat menjalankan program ini secara lokal dengan perintah python3 main.py di jendela terminal.
4. Jalankan secara lokal
Ubah ke direktori repositori dengan cd ~/testing-with-duet-ai-codelab jika diperlukan, lalu masukkan perintah python3 main.py di jendela terminal:
Klik link http://127.0.0.1:8080 untuk membuka tab browser baru ke halaman beranda aplikasi:
Aplikasi berjalan "secara lokal". Sebenarnya, Cloud Shell Editor telah melakukan sedikit keajaiban di sini. Aplikasi berjalan di Cloud Shell, bukan di komputer Anda sendiri. Saat Anda mengklik link, tab yang terbuka bukan alamat lokal sebenarnya http://127.0.0.1:8080, melainkan server proxy yang disiapkan hanya untuk tujuan ini oleh Cloud Shell. Efeknya sama seperti jika Anda benar-benar menjalankannya secara lokal.
Cobalah. Masukkan 25, lalu tekan Convert!
Benar, 25 adalah XXV dalam Angka Romawi. Anda pasti sudah selesai di sini.
Mungkin periksa beberapa angka lagi. 25 berhasil, bagaimana dengan 24?
Mungkin kita terlalu terburu-buru menganggap semuanya baik-baik saja. Apakah XXIIII adalah konversi yang benar untuk 24? Bukankah seharusnya XXIV?
Dapat dikatakan bahwa XXIIII benar, tetapi sebenarnya bukan itu yang biasanya diharapkan orang. Karena sebenarnya tidak salah (perhatikan bahwa banyak jam menampilkan 4 sebagai Angka Romawi IIII), masalah tersebut akan dibiarkan untuk peningkatan di masa mendatang.
Bagaimana kalau mencoba bilangan negatif? Nol? Tidak ada cara untuk merepresentasikan angka tersebut dalam Angka Romawi. Tidak ada yang muncul kembali kepada pengguna, yang terlihat seperti error yang perlu ditangani.
Pengujian dapat membantu menemukan dan menghilangkan error, dan Gemini Code Assist dapat membantu kita menulis dan menggunakan pengujian.
5. Menambahkan Pengujian
Kembali ke jendela Gemini Chat, lalu tanyakan
How can I test the number_to_roman function?
Baca responsnya, yang harus mencakup pembahasan modul unittest dan modul pytest.
Anda mungkin ingin Gemini Code Assist menulis pengujian ini untuk Anda. Buka calendar.py, tempat kode konversi sebenarnya berada, di editor, kembali ke jendela Gemini Chat, lalu tanyakan lagi
How can I test the number_to_roman function?
Respons kini lebih spesifik, bahkan menyertakan modul unittest yang dapat Anda salin atau masukkan ke dalam file baru:
import unittest
import calendar
class NumberToRomanTest(unittest.TestCase):
def test_convert_1(self):
self.assertEqual(calendar.number_to_roman(1), "I")
def test_convert_4(self):
self.assertEqual(calendar.number_to_roman(4), "IV")
def test_convert_9(self):
self.assertEqual(calendar.number_to_roman(9), "IX")
def test_convert_40(self):
self.assertEqual(calendar.number_to_roman(40), "XL")
def test_convert_90(self):
self.assertEqual(calendar.number_to_roman(90), "XC")
def test_convert_400(self):
self.assertEqual(calendar.number_to_roman(400), "CD")
def test_convert_900(self):
self.assertEqual(calendar.number_to_roman(900), "CM")
def test_convert_1990(self):
self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
def test_convert_2023(self):
self.assertEqual(calendar.number_to_roman(2023), "MMXXIII")
Anda mungkin melihat kode yang berbeda dari contoh di atas. Model dasar Gemini Code Assist diperbarui dari waktu ke waktu, sehingga jawabannya tidak akan selalu sama. Jika melihat kumpulan kode yang berbeda, Anda kini dapat memilih apakah akan melanjutkan dengan contoh yang ditampilkan dalam codelab ini dengan menyalin kode yang ditampilkan di sini, atau Anda dapat mencoba jawaban alternatif yang kini diberikan Gemini Code Assist. Jika ada waktu, Anda bahkan dapat mencoba kedua jalur tersebut. Gemini Code Assist adalah asisten coding yang dapat Anda gunakan sesuai kebutuhan.
Klik panah berkepala ganda di sudut kanan atas jendela Gemini Chat untuk membuat file baru yang berisi kode pengujian unit, atau gunakan IDE untuk membuat file baru dan tempel kode yang ditampilkan di lab ini. Tekan CTRL-S atau CMD-S di jendela tersebut untuk menyimpannya, dan panggil file yang disimpan sebagai calendar-unittest.py.
Kembali ke terminal dan tekan CTRL-C untuk menghentikan server web yang Anda biarkan berjalan sebelumnya, dan dapatkan prompt shell. Masukkan perintah
python3 calendar-unittest.py
untuk menjalankan pengujian baru.
Tidak ada output. Itu tidak sesuai dengan yang diharapkan. Apakah semuanya lulus tanpa pemberitahuan? Anda pasti ingin mengetahuinya. Lihat kembali jawaban dari Gemini Code Assist yang menyertakan kode pengujian. Di bawah kode, ada informasi lebih lanjut tentang cara menjalankan kasus pengujian:
Coba jalankan perintah yang direkomendasikan:
python -m unittest discover
Anda mungkin mengalami masalah jika komputer Anda tidak meng-alias perintah python3 ke python, dalam hal ini jalankan:
python3 -m unittest discover
Perintah berjalan, tetapi menampilkan Ran 0 tests in 0.000s. Modul ini memiliki beberapa pengujian di dalamnya. Apa yang terjadi?
Kata terakhir dalam perintah tersebut adalah discover. Dari mana asalnya? Tampaknya, Gemini Code Assist mengharapkan kode pengujian disimpan dalam file bernama discover atau discover.py, tetapi tidak menentukan bahwa itulah yang harus Anda lakukan. Karena Anda benar-benar menyimpan file di calendar-unittest.py, coba jalankan perintah:
python3 -m unittest calendar-unittest
Sekarang Anda akan melihat banyak output, dimulai dengan sesuatu seperti ini:
$ python3 -m unittest calendar-unittest
.F.FFFFFF
======================================================================
FAIL: test_convert_1990 (calendar-unittest.NumberToRomanTest)
----------------------------------------------------------------------
Traceback (most recent call last):
File "/home/charles_engelke/testing-with-duet-ai-codelab/calendar-unittest.py", line 28, in test_convert_1990
self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
AssertionError: 'MDCCCCLXXXX' != 'MCMXC'
- MDCCCCLXXXX
+ MCMXC
Baris pertama menampilkan periode untuk setiap pengujian yang lulus, dan F untuk setiap pengujian yang gagal. Sebagian besar pengujian gagal. Kemudian, pengujian yang gagal akan dicantumkan satu per satu, yang menampilkan output yang diharapkan dan output sebenarnya. Kurang jelas urutan pengujian ini dijalankan. Urutannya berdasarkan nama pengujian dalam urutan abjad, bukan urutan pengujian yang muncul dalam file. Jadi, test_convert_1 dijalankan terlebih dahulu, lalu test_convert_1990, kemudian test_convert_2023, dan seterusnya. Kasus pengujian untuk 1 dan 2023 adalah satu-satunya yang berhasil.
Saat pertama kali mencoba kode ini, Anda melihat bahwa kode tersebut mengonversi 24 menjadi XXIIII, yang tidak sepenuhnya salah, tetapi bukan bentuk umum di mana IIII dikonversi menjadi IV. Semua pengujian yang gagal adalah untuk kasus serupa. Saat masalah ini pertama kali diketahui, lab tersebut mengatakan, "Karena sebenarnya tidak salah (perhatikan bahwa banyak jam menampilkan 4 sebagai Angka Romawi IIII), tinggalkan masalah tersebut untuk peningkatan di masa mendatang."
Anda dapat mengubah kasus pengujian untuk mengharapkan dan menerima jawaban "tidak terlalu salah" yang diberikan kode, atau menerima bahwa sudah waktunya untuk "peningkatan di masa mendatang" tersebut. Jadi, langkah berikutnya adalah memperbaiki kode, dengan bantuan Gemini Code Assist, untuk memberikan jawaban yang lebih dapat diterima seperti yang diharapkan oleh pengujian.
6. Meningkatkan kualitas kode
Ingatlah bahwa respons seperti XXIIII untuk 24, bukan XXIV yang lebih umum, dianggap "tidak terlalu salah" dan ditunda untuk peningkatan di masa mendatang. Masa depan itu ada di sini. Jawaban yang "tidak terlalu salah" tetap menjengkelkan.
Aturan pertama untuk digit berulang dalam Angka Romawi adalah: setiap kali Anda memiliki empat digit identik berturut-turut, digit tersebut harus diganti dengan salah satu digit yang diikuti dengan digit yang lebih tinggi berikutnya. Jadi, XXIIII harus diganti dengan XXIV. Demikian pula, XXXX harus diubah menjadi XL, dan CCCC harus menjadi CD.
Tanyakan kepada Gemini Code Assist cara mengubah nilai variabel roman dengan cara ini tepat sebelum ditampilkan oleh number_to_roman:
If the final value of roman has IIII in it, that should be replaced by IV. Similarly XXXX should be replaced by XL, and CCCC should become CD. How can I make those changes?
Sarannya adalah menambahkan beberapa kode di bagian akhir:
Salin/tempel atau ketik baris tersebut di editor, lalu lihat apa yang terjadi:
Gemini Code Assist telah menambahkan lebih banyak baris untuk menangani kasus yang dapat Anda alami setelah melakukan kumpulan penggantian pertama. Misalnya, 19 akan dikonversi menjadi XVIIII, lalu menjadi XVIV, dan akhirnya menjadi XIX yang benar.
Jika Gemini Code Assist memberikan saran yang tampaknya berguna, tekan Tab untuk menerima rekomendasi, simpan file, dan jalankan server web lagi. Jika tidak, tambahkan baris yang ditampilkan dalam contoh di sini secara manual, lalu simpan file. Coba konversi yang sulit: 1999:
Tepat.
Jalankan kembali pengujian sekarang. Semua lulus.
Aplikasi web tampaknya siap untuk diluncurkan ke tahap produksi.
7. Men-deploy ke Cloud Run
Cloud Run akan menjalankan aplikasi dalam container di Internet untuk Anda. Untuk aplikasi yang ditulis menggunakan framework umum, seperti Flash, perintah gcloud run deploy bahkan akan membangun container tersebut untuk Anda sebelum men-deploy-nya. Jalankan perintah:
gcloud run deploy
Di terminal. Saat ditanya lokasi kode sumber, tekan Enter untuk menerima lokasi yang benar yang disarankan. Demikian pula, saat diminta memasukkan nama layanan, tekan Enter untuk menerima saran.
Perintah dapat gagal karena gcloud tidak dapat menentukan project mana yang akan digunakan. Dalam hal ini, jalankan perintah:
gcloud config set core/project <project-id>
dengan gcloud run deploy.
- Perintah akan meminta Anda untuk mengaktifkan API tertentu yang diperlukan dan belum diaktifkan. Masukkan y agar fitur tersebut diaktifkan untuk Anda.
- Saat diminta untuk memilih wilayah, pilih salah satu yang nyaman bagi Anda. Memasukkan nomor yang sesuai dengan
us-central1adalah pilihan yang aman. - Saat ditanya, masukkan Y untuk melanjutkan.
- Anda akan ingin mengizinkan pemanggilan yang tidak diautentikasi untuk layanan Cloud Run ini. Opsi autentikasi yang digunakan oleh Cloud Run cocok untuk digunakan oleh program yang memanggil layanan. Karena ini adalah situs, Anda tidak akan menggunakan autentikasi.
Google Cloud akan membangun container, men-deploy-nya, merutekan traffic ke container, dan menetapkan kebijakan akses, lalu menampilkan link ke halaman beranda:
Anda dapat membuka link tersebut dan mengakses aplikasi Anda.
Masukkan angka, lalu tekan Enter, dan tada!
Apa!?!
Berhasil di komputer Anda! Mengapa ini belum selesai?
Cari tahu. Tanyakan kepada Gemini Code Assist,
Why am I getting an internal server error on cloud run?
Ternyata, Gemini Code Assist dapat membaca file log, yang mengatakan sesuatu yang serupa. Mari kita tanyakan kepada Gemini Code Assist cara melihat log sendiri:
Harap buat kunci tersebut. Cari baris dengan indikator error !! berwarna merah, seperti di bawah:
Hal ini diikuti oleh banyak baris detail tentang stack panggilan yang sampai di sini, tetapi kemudian ada ini:
Saat melihat file calendar.py, Anda akan melihat fungsi number_to_roman di sana. Anda tahu bahwa kode tersebut benar karena berfungsi di komputer Anda. Apa yang mungkin berbeda di Cloud Run?
Jawabannya rumit. Ada modul standar yang disertakan dengan Python3 bernama calendar, seperti file calendar.py tempat fungsi number_to_roman ditentukan. Di mesin lokal Anda, saat Python mencari modul bernama calendar, Python akan menelusuri direktori aplikasi Anda terlebih dahulu. Ternyata, Python di Cloud Run mencari modul standar terlebih dahulu, mengimpornya, dan tidak menemukan fungsi number_to_roman.
Perbedaan jenis lingkungan ini selalu dapat terjadi. Untungnya, saat dikemas dalam container, aplikasi membawa lingkungannya sendiri, sehingga di mana pun Anda menjalankannya, Anda dapat mengharapkan perilaku yang sama. Jika Anda menjalankan aplikasi dalam container yang sama secara lokal dengan yang ada di Cloud Run, Anda akan mengalami masalah yang sama.
Perbaiki masalah ini. Anda harus mengubah nama modul kalender lokal Anda menjadi sesuatu yang bukan juga nama modul standar. Ganti nama file calendar.py menjadi my_calendar.py, lalu ubah baris import calendar di main.py dan calendar-unittest.py menjadi import my_calendar. Terakhir, ubah baris
roman = calendar.number_to_roman(number)
hingga
roman = my_calendar.number_to_roman(number)
Coba secara lokal, jalankan pengujian, lalu deploy ulang:
gcloud run deploy
Dan sekarang berfungsi:
Anda dapat membagikan URL ini, dan semua orang yang memerlukan alat konversi Angka Romawi dapat menggunakannya.
8. Opsional: Membuatnya terlihat lebih bagus
Aplikasi Anda berjalan dengan baik, dan dapat diakses oleh siapa saja di web. Namun, tampilannya agak biasa. Sebelum Anda memberi tahu semua orang, mengapa tidak meminta Gemini Code Assist untuk meningkatkan tampilannya?
Buka file templates/index.html. Di jendela percakapan Gemini, tanyakan:
Make this index.html file use material design.
Responsnya adalah menambahkan ke file saat ini, sehingga menghasilkan sesuatu yang mirip dengan berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Roman Numerals</title>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<h1 class="mdl-typography--title">Roman Numerals</h1>
<form action="/convert" method="post">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="number" name="number" required />
<label class="mdl-textfield__label" for="number">Enter a number:</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Convert!
</button>
</form>
</body>
</html>
Gunakan ikon untuk menyalin kode yang disarankan dan menempelkannya ke konten index.html yang ada. Di terminal, jalankan python3 main.py dan klik link untuk membuka jendela pratinjau. Halaman kini tidak terlalu polos:
Anda dapat mengulangi langkah ini dengan file convert.html jika Anda menginginkannya.
Gemini Code Assist memahami banyak CSS, dan Anda dapat memanfaatkannya untuk membantu Anda menata gaya halaman aplikasi dengan berbagai cara. Ini baru permulaan.
Karena Anda ingin membagikan aplikasi ini, jangan lupa untuk men-deploy ulang aplikasi tersebut ke Cloud Run:
gcloud run deploy
Anda dapat meneruskan URL tersebut kepada orang yang perlu mengonversi ke Angka Romawi.
9. Selamat!
Selamat - Anda telah berhasil menggunakan Gemini Code Assist untuk menambahkan pengujian ke aplikasi, memperbaiki error di dalamnya, dan menambahkan fungsi yang ditingkatkan.
Setelah selesai menggunakan aplikasi yang Anda buat, Anda dapat menghapusnya dari dasbor konsol cloud untuk menghentikan potensi biaya di masa mendatang.