Pengantar pengujian dengan Gemini Code Assist

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 sudah ada, serta menemukan dan memperbaiki error dalam aplikasi yang diekspos oleh pengujian tersebut. Kemudian, Anda akan menggunakan Code Assist untuk membuat pengujian bagi fungsionalitas baru dan membuat kode untuk lulus pengujian tersebut dan memperluas aplikasi.

Yang akan Anda lakukan ...

  • Anda akan menggunakan Cloud Shell Editor untuk mendownload kode untuk aplikasi Web yang ada.
  • Anda akan menggunakan Chat Gemini Code Assist di Cloud Shell Editor untuk mengajukan pertanyaan umum terkait Google Cloud.
  • Anda akan menggunakan bantuan kode Inline Gemini Code Assist di Cloud Shell Editor untuk membuat pengujian bagi aplikasi, menjalankan pengujian, dan menemukan serta 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 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:

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

GeminiBanner.png

  1. Jendela konsol Gemini untuk Cloud akan terbuka di sisi kanan konsol. Klik tombol Enable jika ditampilkan di bawah. Jika Anda tidak melihat tombol Enable dan melihat antarmuka Chat, berarti Anda telah mengaktifkan Gemini untuk Cloud untuk project tersebut dan Anda dapat langsung melanjutkan ke langkah berikutnya.

GeminiApiEnable.png

  1. Setelah diaktifkan, Anda dapat menguji Gemini dengan mengajukan satu atau dua kueri. Beberapa contoh kueri ditampilkan, tetapi Anda dapat mencoba, misalnya, Apa itu Cloud Run?

GeminiChatWindow.png

Code Assist akan merespons dengan memberikan jawaban atas pertanyaan Anda. Anda dapat mengklik ikon f68286b2b2ea5c0a.png di pojok kanan atas untuk menutup jendela chat Code Assist.

Mengaktifkan Gemini di Editor Cloud Shell

Gemini Code Assist tersedia dan berperilaku mirip di beberapa IDE populer. Dalam codelab ini, Anda akan menggunakan Google Cloud Shell Editor, yang berjalan sepenuhnya di browser web. Anda perlu mengaktifkan dan mengonfigurasi Gemini di Cloud Shell Editor dan langkah-langkahnya dijelaskan di bawah ini:

  1. Luncurkan Cloud Shell melalui ikon yang ditunjukkan di bawah. Mungkin perlu waktu satu atau dua menit untuk memulai instance Cloud Shell.

72dc3df7b007fcde.png

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

CloudShellEditor.png

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

CloudCodeSignIn.png

  1. 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. IDE Anda harus dimuat ulang. Tindakan ini akan mengaktifkan Gemini di Cloud Code, dan status bar Gemini akan muncul di IDE Anda.

EnableDuetAiSetting.png

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

GeminiSelectGoogleCloudProject.png

  1. 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:

GeminiEnabledStatusBar.png

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 di dalam IDE dan memiliki kode di IDE yang tersedia sebagai konteks untuk diskusi. Masukkan perintah Explain this dan lihat jawabannya:

GeminiChatExplainThis.png

Scroll jendela chat ini untuk melihat seluruh jawaban. Penjelasannya menyatakan 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, dan masukkan perintah python3 main.py di jendela terminal:

3bf558e9cea15375.png

Klik pada tautan http://127.0.0.1:8080 untuk membuka tab browser baru ke halaman beranda aplikasi:

fb06f382a4c03e4c.png

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 tersebut, tab membuka tab bukan ke alamat lokal sebenarnya http://127.0.0.1:8080, tetapi ke 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!

e1b9d5832f6d0058.png

Benar, 25 adalah XXV dalam Angka Romawi! Anda harus menyelesaikannya di sini.

Mungkin coba cek beberapa angka lagi. 25 berhasil, bagaimana dengan 24?

37982e385e17baac.pngS

Mungkin kami sedikit terburu-buru berpikir bahwa semuanya baik-baik saja. Apakah XXIIII adalah konversi yang benar untuk 24? Bukankah seharusnya XXIV?

Bisa jadi XXIIII memang benar, tetapi itu bukan yang biasanya orang harapkan. Karena tidak benar-benar salah (perhatikan bahwa banyak jam yang menunjukkan 4 sebagai Angka Romawi IIII) meninggalkan masalah itu untuk peningkatan kualitas di masa mendatang.

Bagaimana kalau mencoba angka negatif? Tidak ada? Tidak ada cara untuk mewakili angka-angka itu dalam Angka Romawi. Sepertinya tidak ada yang kembali ke pengguna, yang tampaknya merupakan sebuah {i>error<i} yang perlu diatasi.

Pengujian dapat membantu menemukan dan menghilangkan error, serta Gemini Code Assist dapat membantu kita menulis dan menggunakan pengujian.

5. Menambahkan Pengujian

Kembali ke jendela Gemini Chat, dan minta

How can I test the number_to_roman function?

Baca responsnya, yang harus mencakup diskusi modul unittest dan modul pytest.

Anda mungkin ingin agar Gemini Code Assist benar-benar menulis pengujian ini untuk Anda. Buka calendar.py, lokasi kode konversi sebenarnya, di editor, kembali ke jendela Gemini Chat, lalu minta lagi

How can I test the number_to_roman function?

Sekarang responsnya menjadi lebih spesifik, bahkan termasuk 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 rangkaian kode yang berbeda, Anda kini dapat memilih untuk melanjutkan sampel yang ditampilkan di codelab ini dengan menyalin kode yang ditampilkan di sini, atau Anda dapat mencoba jawaban alternatif yang kini diberikan Gemini Code Assist. Jika Anda punya waktu, Anda bahkan dapat mencoba kedua jalur itu. Gemini Code Assist adalah asisten coding yang dapat Anda gunakan sesuai kebutuhan.

Klik panah runcing ganda di pojok 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 calendar-unittest.py.

Kembali ke terminal, lalu tekan CTRL-C untuk menghentikan server web yang Anda tinggalkan sebelumnya, dan dapatkan perintah shell. Masukkan perintah

python3 calendar-unittest.py

untuk menjalankan pengujian baru.

Tidak ada output. Tidak seperti itu. Apakah semuanya lewat diam-diam? Anda pasti ingin tahu. Lihat kembali jawaban dari Gemini Code Assist yang menyertakan kode pengujian. Di bawah kode, terdapat informasi selengkapnya tentang cara menjalankan kasus pengujian:

run-unittest.png

Coba jalankan perintah yang direkomendasikan:

python -m unittest discover

Anda mungkin mengalami masalah jika mesin Anda tidak menggunakan alias perintah python3 untuk 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?

Itu adalah kata terakhir dalam perintah, discover. Dari mana asalnya? Tampaknya, Gemini Code Assist mengharapkan kode pengujian disimpan dalam file bernama discover atau discover.py, tetapi tidak menyebutkan tindakan tersebut yang harus Anda lakukan. Karena Anda sebenarnya menyimpan file dalam calendar-unittest.py, coba jalankan perintah:

python3 -m unittest calendar-unittest

Sekarang Anda 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 menunjukkan periode untuk setiap pengujian yang lulus, dan F untuk setiap pengujian yang gagal. Sebagian besar pengujian gagal. Laporan ini kemudian mencantumkan pengujian yang gagal satu per satu, menunjukkan output yang diharapkan dan output sebenarnya. Sedikit jelas dalam urutan bagaimana pengujian ini dijalankan. Pengujian dilakukan dalam urutan abjad berdasarkan nama pengujian, bukan urutan pengujian dalam file. Jadi test_convert_1 berjalan terlebih dahulu, lalu test_convert_1990, lalu test_convert_2023, dan seterusnya. Kasus pengujian untuk 1 dan 2023 adalah satu-satunya yang lulus.

Saat pertama kali mencoba kode ini, Anda melihat bahwa kode tersebut mengonversi 24 menjadi XXIIII, yang tidak sepenuhnya salah, tetapi bukan bentuk umum tempat IIII dikonversi menjadi IV. Semua pengujian yang gagal adalah untuk kasus serupa. Saat masalah ini pertama kali dicatat, laboratorium mengatakan, "Karena tidak benar-benar salah (perhatikan bahwa banyak jam menunjukkan 4 sebagai Angka Romawi IIII) meninggalkan masalah itu untuk peningkatan di masa mendatang."

Anda dapat mengubah kasus pengujian agar siap dan menerima status "tidak salah" akan menjawab kode yang diberikan, atau menerima bahwa sudah waktunya untuk "peningkatan di masa depan". Jadi, langkah Anda selanjutnya adalah memperbaiki kode, dengan bantuan Gemini Code Assist, untuk memberikan jawaban yang lebih dapat diterima dari pengujian yang dilakukan.

6. Menyempurnakan kode

Ingat bahwa respons seperti XXIIII untuk 24, bukan XXIV yang lebih umum, dianggap "tidak benar-benar salah" dan ditunda untuk peningkatan kualitas di masa mendatang. Masa depan itu adalah sekarang. "Tidak salah" masih menjengkelkan.

Aturan pertama untuk digit berulang dalam Angka Romawi adalah: setiap kali Anda memiliki empat digit identik dalam satu baris, mereka harus diganti dengan salah satu digit diikuti dengan digit lebih tinggi berikutnya. Jadi, XXIIII harus diganti dengan XXIV. Demikian pula, XXXX harus diubah menjadi XL, dan CCCC harus menjadi CD.

Minta Gemini Code Assist untuk mengubah nilai variabel roma dengan cara ini tepat sebelum nilai variabel tersebut 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?

Sebaiknya tambahkan beberapa kode di akhir:

6437c3fa2c5fabd1.png

Salin/tempel atau ketik baris tersebut di editor, lalu lihat apa yang terjadi:

dcefa568cab82fb7.png

Gemini Code Assist telah menambahkan lebih banyak baris untuk menangani kasus yang dapat Anda alami setelah melakukan serangkaian substitusi pertama. Misalnya, 19 akan dikonversi menjadi XVIIII, lalu ke XVIV, dan akhirnya menjadi XIX yang benar.

Jika Gemini Code Assist membuat saran yang tampaknya berguna, tekan Tab untuk menerima rekomendasi, menyimpan file, dan menjalankan server web lagi. Jika tidak, tambahkan baris yang ditampilkan dalam contoh di sini secara manual, dan simpan file. Cobalah konversi yang sulit: 1999:

a206999587fdc9.png

Tepat.

Jalankan kembali pengujian sekarang. Mereka semua lulus!

Aplikasi web tampaknya siap untuk diproduksi.

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 sebelum Anda men-deploy-nya. Jalankan perintah:

gcloud run deploy

Di terminal. Saat diminta lokasi kode sumber, tekan Enter untuk menerima lokasi yang benar yang disarankan. Demikian pula, saat diminta nama layanan, tekan Enter untuk menerima saran.

Perintah ini mungkin gagal karena gcloud tidak dapat menentukan project yang akan digunakan. Dalam hal ini, jalankan perintah:

gcloud config set core/project <project-id>

dengan diganti dengan ID project Anda, yang mungkin sama dengan namanya. Kemudian, jalankan kembali perintah gcloud run deploy.

  • Perintah tersebut akan memberi tahu Anda bahwa API tertentu diperlukan dan belum diaktifkan. Masukkan y agar dapat diaktifkan untuk Anda.
  • Saat diminta memilih wilayah, pilih wilayah yang sesuai untuk Anda. Memasukkan angka yang sesuai dengan us-central1 adalah pilihan yang aman.
  • Saat diminta, tekan Y untuk melanjutkan.
  • Sebaiknya izinkan pemanggilan yang tidak diautentikasi dari layanan Cloud Run ini. Opsi autentikasi yang digunakan oleh Cloud Run cocok 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 tersebut dan menetapkan kebijakan akses, lalu menampilkan link ke halaman beranda:

94ba7d8d63a44afd.pngS

Anda dapat membuka link tersebut dan mengakses aplikasi Anda.

a2e51666dfd33a9f.png

Masukkan nomor dan tekan Enter, dan tada!

5021535ac991a95c.pngS

Apa!?!

Alat ini dapat digunakan 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?

4b24321251d6eddf.pngS

Tampaknya, Gemini Code Assist dapat membaca file log, yang mengatakan hal serupa. Mari kita tanyakan sendiri cara Anda melihat log kepada Gemini Code Assist:

92d1855be73ef1d.pngS

Harap buat kunci tersebut. Cari garis berwarna merah !! indikator kesalahan, seperti di bawah ini:

9bed4f9ed82de21c.pngS

Ini diikuti oleh banyak baris detail tentang stack panggilan yang sampai di sini, tetapi kemudian ada ini:

47fc93be845f4e3f.pngS

Saat melihat file calendar.py, Anda melihat fungsi number_to_roman di sana. Dan Anda tahu itu benar karena berfungsi di komputer Anda. Apa yang berbeda di Cloud Run?

Jawabannya rumit. Ada modul standar yang disertakan dengan Python3 bernama calendar, sama seperti file calendar.py tempat fungsi number_to_roman didefinisikan. Di mesin lokal Anda, saat Python mencari modul bernama calendar, Python akan menelusuri direktori aplikasi Anda terlebih dahulu. Sepertinya, Python di Cloud Run mencari modul standar terlebih dahulu, mengimpornya, dan tidak menemukan fungsi number_to_roman.

Perbedaan semacam ini di lingkungan selalu mungkin terjadi. Untungnya, saat sebuah aplikasi berada dalam kontainer, aplikasi tersebut akan membawa lingkungannya di dalamnya, sehingga di mana pun aplikasi dijalankan, Anda dapat memperkirakan perilaku yang sama. Jika Anda telah menjalankan aplikasi dalam container yang sama secara lokal seperti yang dimiliki Cloud Run, Anda mungkin akan mengalami masalah yang sama.

Perbaiki masalah ini. Anda perlu mengubah nama modul kalender lokal menjadi nama yang bukan 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 garis

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

Kini kode tersebut berfungsi:

ed288801c6825eb1.png

Anda dapat membagikan URL ini, dan semua orang yang membutuhkan alat konversi Angka Romawi dapat menggunakan milik Anda.

8. Opsional: Buat agar terlihat lebih bagus

Aplikasi Anda berjalan dengan baik dan dapat diakses oleh siapa saja di web. Tapi, tampilannya agak sederhana. Sebelum Anda menceritakannya kepada 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 untuk membuat tambahan ke file saat ini, 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 tempelkan konten index.html yang ada. Di terminal, jalankan python3 main.py, lalu klik link untuk membuka jendela pratinjau. Halaman ini menjadi sedikit lebih sederhana sekarang:

295643ec03fcaafc.pngS

Anda dapat mengulangi langkah ini dengan file convert.html jika mau.

Gemini Code Assist mengenal banyak CSS, dan Anda dapat memintanya untuk membantu menata gaya halaman aplikasi dalam 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 kepada orang yang perlu mengonversi ke Angka Romawi.

9. Selamat!

Selamat! Anda 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 bangun, Anda dapat menghapusnya dari dasbor Konsol Cloud untuk menghentikan potensi tagihan di masa mendatang.

Dokumen referensi ...