Dapatkan akses ke 700+ lab dan kursus

Membangun Aplikasi dengan Gemini Code Assist

Lab 1 jam 30 menit universal_currency_alt 1 Kredit show_chart Pengantar
info Lab ini mungkin menggabungkan alat AI untuk mendukung pembelajaran Anda.
Dapatkan akses ke 700+ lab dan kursus

Ringkasan

Di lab ini, Anda akan menggunakan Gemini Code Assist, yakni kolaborator pengembangan aplikasi berteknologi AI untuk Google Cloud, guna menjelaskan, menguji, mendokumentasikan, dan meningkatkan kualitas aplikasi.

Anda akan menggunakan Cloud Workstations untuk membuat lingkungan pengembangan yang menggunakan Code OSS sebagai lingkungan pengembangan terintegrasi (IDE).

Lab ini ditujukan bagi para developer aplikasi di semua tingkat pengalaman. Anda tidak perlu memiliki pengalaman terkait pengembangan aplikasi cloud.

Catatan: Sebagai teknologi tahap awal, Gemini dapat menghasilkan output yang seolah masuk akal tetapi mengandung fakta yang salah. Sebaiknya validasi semua output dari Gemini sebelum Anda menggunakannya. Untuk informasi lebih lanjut, lihat Gemini untuk Google Cloud dan responsible AI.

Tujuan

Di lab ini, Anda akan mempelajari cara melakukan tugas-tugas berikut:

  • Membuat lingkungan pengembangan aplikasi berbasis cloud menggunakan Cloud Workstations.
  • Menggunakan Gemini Code Assist untuk menjelaskan kode.
  • Membuat pengujian unit dengan Gemini Code Assist.
  • Memasukkan perintah ke Gemini untuk meningkatkan kualitas tampilan aplikasi.
  • Menggunakan Gemini Code Assist untuk membuat kode lebih mudah dibaca.
  • Menggunakan Gemini Code Assist untuk menambahkan komentar ke kode, dalam bahasa Inggris atau bahasa lainnya.

Penyiapan

Untuk setiap lab, Anda akan memperoleh project Google Cloud baru serta serangkaian resource selama jangka waktu tertentu, tanpa biaya.

  1. Login ke Qwiklabs menggunakan jendela samaran.

  2. Perhatikan waktu akses lab (misalnya, 1:15:00), dan pastikan Anda dapat menyelesaikannya dalam waktu tersebut.
    Tidak ada fitur jeda. Bila perlu, Anda dapat memulai ulang lab, tetapi Anda harus memulai dari awal.

  3. Jika sudah siap, klik Start lab.

  4. Catat kredensial lab (Nama pengguna dan Sandi) Anda. Anda akan menggunakannya untuk login ke Google Cloud Console.

  5. Klik Open Google Console.

  6. Klik Use another account, lalu salin/tempel kredensial lab ini ke perintah yang muncul.
    Jika menggunakan kredensial lain, Anda akan menerima pesan error atau dikenai biaya.

  7. Setujui ketentuan dan lewati halaman resource pemulihan.

Mengaktifkan Cloud Shell

Cloud Shell adalah mesin virtual dengan beberapa alat pengembangan. Mesin virtual ini menawarkan direktori beranda persisten berkapasitas 5 GB dan berjalan di Google Cloud. Cloud Shell memberikan akses command line ke resource Google Cloud Anda. gcloud adalah alat command line untuk Google Cloud. Fitur ini sudah terinstal di Cloud Shell dan mendukung penyelesaian tab.

  1. Di Google Cloud Console, pada panel navigasi, klik Activate Cloud Shell (Ikon Cloud Shell).

  2. Klik Continue.
    Perlu waktu beberapa saat untuk menyediakan dan menghubungkan ke lingkungan. Setelah terhubung, Anda juga diautentikasi, dan project ditetapkan ke PROJECT_ID Anda. Contoh:

Terminal Cloud Shell

Contoh perintah

  • Cantumkan nama akun aktif:

gcloud auth list

(Output)

Akun berkredensial: - <myaccount>@<mydomain>.com (active)

(Contoh output)

Akun berkredensial: - google1623327_student@qwiklabs.net
  • Cantumkan ID project:

gcloud config list project

(Output)

[core] project = <project_ID>

(Contoh output)

[core] project = qwiklabs-gcp-44776a13dea667a6

Tugas 1. Mengonfigurasi lingkungan dan akun Anda

Dalam tugas ini, Anda akan mengaktifkan Cloud AI Companion API untuk Gemini dan memberikan peran yang diperlukan ke akun pengguna.

Mengonfigurasi API dan peran

  1. Login ke Konsol Google Cloud dengan kredensial lab Anda, lalu buka terminal Cloud Shell dengan menekan tombol G, diikuti tombol S di keyboard Anda.

  2. Untuk menetapkan variabel lingkungan yaitu project ID, pengguna, dan region, jalankan perintah berikut di Cloud Shell:

    export PROJECT_ID=$(gcloud config list project --format="value(core.project)") export USER=$(gcloud config list account --format "value(core.account)") export REGION={{{project_0.startup_script.lab_region| Lab Region}}} echo "PROJECT_ID=${PROJECT_ID}" echo "USER=${USER}" echo "REGION=${REGION}"
  3. Untuk mengaktifkan Cloud AI Companion API untuk Gemini dan memberikan peran yang diperlukan ke akun pengguna Anda, jalankan perintah berikut:

    gcloud services enable cloudaicompanion.googleapis.com --project ${PROJECT_ID} gcloud projects add-iam-policy-binding ${PROJECT_ID} --member user:${USER} --role=roles/cloudaicompanion.user gcloud projects add-iam-policy-binding ${PROJECT_ID} --member user:${USER} --role=roles/serviceusage.serviceUsageViewer

Untuk memverifikasi tujuan, klik Periksa progres saya. Mengaktifkan API terkait dan menetapkan peran IAM

Tugas 2. Membuat Cloud Workstation

Lab ini menggunakan bantuan Gemini untuk mengembangkan aplikasi dengan plugin Cloud Code untuk IDE Cloud Workstations. Cloud Workstations adalah lingkungan pengembangan terintegrasi yang terkelola sepenuhnya yang mencakup integrasi native dengan Gemini.

Dalam tugas ini, Anda akan mengonfigurasi dan menyediakan lingkungan Cloud Workstation, lalu mengaktifkan plugin Cloud Code untuk Gemini.

Melihat cluster workstation

Satu cluster workstation bernama my-cluster telah dibuat sebelumnya untuk lab ini. Cluster ini digunakan untuk mengonfigurasi dan membuat workstation.

  1. Untuk membuka halaman Workstations, di kolom judul Konsol Google Cloud, ketik Cloud Workstations di kolom Search, lalu klik Cloud Workstations.

  2. Jika Cloud Workstations tidak disematkan (tombol pin untuk produk yang disematkan), di Navigation menu (Navigation menu), klik Pin (tombol pin untuk produk yang dilepaskan pinnya).

  3. Di Panel navigasi, klik Cluster management.

  4. Periksa Status cluster. Jika status cluster masih Reconciling atau Updating, refresh secara berkala dan tunggu hingga statusnya berubah menjadi Ready sebelum berlanjut ke langkah berikutnya.

Membuat konfigurasi dan workstation

  1. Untuk membuat konfigurasi workstation dan workstation, jalankan perintah berikut di Cloud Shell:

    export CLUSTER_NAME=my-cluster export CONFIG_NAME=my-config export WS_NAME=my-workstation export REGION={{{project_0.startup_script.lab_region| Lab Region}}} gcloud workstations configs create ${CONFIG_NAME} --cluster=${CLUSTER_NAME} --region=${REGION} --machine-type="e2-standard-4" --pd-disk-size=200 --pd-disk-type="pd-standard" --pool-size=1 gcloud workstations create ${WS_NAME} --cluster=${CLUSTER_NAME} --config=${CONFIG_NAME} --region=${REGION}

    Tunggu hingga perintah selesai.

  2. Di Panel navigasi, klik Workstations.

    Setelah dibuat, workstation tersebut akan tercantum di bagian My workstations dengan status Stopped.

  3. Untuk memulai workstation, klik Start.

    Setelah workstation mulai berjalan, statusnya akan berubah menjadi Starting. Tunggu hingga statusnya berubah menjadi Running yang menunjukkan bahwa workstation ini siap digunakan.

Meluncurkan IDE

Agar berfungsi dengan benar, beberapa ekstensi memerlukan cookie pihak ketiga untuk diaktifkan di browser Anda.

  1. Untuk mengaktifkan cookie pihak ketiga di Chrome, di menu Chrome, klik Setelan.

  2. Di kotak penelusuran, ketik Cookie pihak ketiga.

  3. Klik setelan Cookie pihak ketiga, lalu pilih Izinkan cookie pihak ketiga.

    Catatan: Jika Anda ingin memulihkan browser ke setelannya saat ini setelah lab selesai, catat setelan asli untuk cookie pihak ketiga.
  4. Untuk meluncurkan IDE Code OSS di workstation, dari halaman Workstations di Konsol Google Cloud, klik Launch.

    IDE akan terbuka di tab browser lain.

    IDE OSS dengan status bar dan aktivitas yang disorot

Untuk memverifikasi tujuan, klik Periksa progres saya. Membuat dan memulai Cloud Workstation

Tugas 3. Mengupdate ekstensi Cloud Code untuk mengaktifkan Gemini

Dalam tugas ini, Anda akan mengaktifkan Gemini di Cloud Code untuk IDE workstation Anda.

Menghubungkan ke Google Cloud

Untuk terhubung ke Google Cloud di workstation, jalankan langkah-langkah ini:

  1. Untuk meluncurkan alur Cloud Code - Sign In, klik Cloud Code - Sign in di status bar di bagian bawah jendela, lalu buka link yang ditampilkan di terminal di browser Anda.

  2. Jika Anda diminta untuk mengonfirmasi dibukanya situs eksternal, klik Open.

  3. Pilih akun untuk melanjutkan langkah ke Gemini Code Assist, lalu klik Sign in.

    Kode verifikasi Anda akan ditampilkan di tab browser.

    Catatan: Anda kemungkinan akan melihat peringatan bahwa Anda menjalankan perintah gcloud auth login. Proses ini normal. IDE menjalankan perintah ini untuk Anda.
  4. Klik Copy.

  5. Kembali ke IDE, di terminal, di bagian yang bertuliskan Enter authorization code, tempelkan kode.

  6. Jika Anda diminta untuk menyetujui penyalinan dari papan klip, klik Allow.

  7. Tekan Enter, lalu tunggu hingga status bar menampilkan Cloud Code - No Project.

    Anda kini terhubung ke Google Cloud.

Mengaktifkan Gemini di Cloud Code

Guna mengaktifkan Gemini di Cloud Code untuk IDE workstation Anda, jalankan langkah-langkah berikut:

  1. Di IDE workstation Anda, klik menu (Menu utama Code OSS), lalu buka File > Preferences > Settings.

  2. Di Search settings, masukkan Gemini.

  3. Di tab User pada dialog Settings, pilih Extensions > Gemini Code Assist.

  4. Di halaman setelan Cloud Code, untuk Geminicodeassist: Project, masukkan project ID Google Cloud .

    Mengaktifkan Gemini

  5. Untuk memilih project untuk Cloud Code, klik Cloud Code - No Project di status bar di bagian bawah jendela. Selanjutnya, pilih opsi Select a Google Cloud project dan pilih .

    Memilih project untuk cloud code

    Project ID kini akan terlihat di status bar. Sekarang Gemini siap digunakan.

Tugas 4. Mendownload, memeriksa, dan menjalankan aplikasi Flask Python

Kode untuk sebuah aplikasi Flask Python telah disimpankan untuk Anda di bucket Cloud Storage.

Dalam tugas ini, Anda akan mendownload, memeriksa, dan menjalankan aplikasi Flask Python di IDE. Gemini Code Assist akan menjelaskan kode.

Login ke terminal

  1. Dari menu IDE (Menu utama Code OSS), pilih Terminal > New Terminal.

  2. Di terminal, jalankan perintah berikut:

    gcloud auth login

    Buka link yang ditampilkan di terminal di browser Anda.

  3. Pilih akun untuk melanjutkan langkah ke Login ke Google Cloud SDK, lalu klik Continue.

  4. Terakhir, klik Allow di jendela yang menampilkan prompt Google Cloud SDK wants to access your Google Account.

    Kode verifikasi Anda akan ditampilkan di tab browser.

    Catatan: Anda kemungkinan akan melihat peringatan bahwa Anda menjalankan perintah gcloud auth login. Proses ini normal. IDE menjalankan perintah ini untuk Anda.
  5. Klik Copy.

  6. Kembali ke IDE dan tempel kode di terminal, di bagian yang bertuliskan Enter the verification code provided in your browser, lalu tekan Enter.

    Sesi terminal Anda kini telah login ke Google Cloud.

Menginstal lingkungan virtual python

  1. Untuk menginstal Python secara lokal di lingkungan virtual, jalankan perintah berikut:

    sudo apt update sudo apt -y upgrade sudo apt install -y python3-venv python3 -m venv ~/env source ~/env/bin/activate
  2. Untuk memeriksa lokasi python yang akan digunakan, jalankan perintah berikut:

    which python3

Salin kodenya

  1. Untuk menyalin kode aplikasi, jalankan perintah berikut di terminal:

    export PROJECT_ID={{{project_0.project_id | Project ID}}} export BUCKET_NAME=$PROJECT_ID-code gcloud storage cp -r gs://$BUCKET_NAME/* .

    Kode telah disalin ke subdirektori bernama codeassist-demo.

  2. Di panel aktivitas IDE, klik Explorer (Menu Explorer di Code OSS), lalu klik Open Folder.

  3. Di dialog Open Folder, klik codeassist-demo, lalu klik OK.

    Struktur direktori akan ditampilkan.

Memeriksa kode

  1. Pilih main.py.

    File Python akan terbuka di jendela editor.

  2. Di panel aktivitas IDE, klik Gemini Code Assist (Menu Gemini Code Assist di Code OSS).

    Gemini Code Assist adalah kolaborator berteknologi AI yang membantu tugas pengembangan aplikasi.

  3. Di panel Gemini Code Assist, ketik perintah berikut, lalu klik Send (Tombol Send di Gemini):

    Explain this

    Perintah adalah pertanyaan atau pernyataan yang menjelaskan bantuan yang Anda butuhkan. Perintah dapat menyertakan konteks dari kode yang sudah ada yang dianalisis Google Cloud untuk memberikan respons yang lebih bermanfaat atau lengkap. Untuk mengetahui informasi selengkapnya tentang cara menulis perintah agar dapat menghasilkan respons baik, baca artikel Menulis perintah yang lebih baik untuk Gemini untuk Google Cloud.

    Gemini akan menjelaskan kode di main.py. Responsnya mungkin akan menjelaskan bagian berikut:

    • Dependensi
    • Penyiapan aplikasi
    • Rute
    • Eksekusi aplikasi

    Jika Anda memilih kode, perintah yang sama akan membuat Gemini Code Assist hanya menjelaskan kode yang dipilih.

    Catatan: Status histori percakapan hanya disimpan di memori dan akan terhapus saat Anda beralih ke ruang kerja lain atau menutup IDE. Gemini tidak akan menggunakan perintah Anda atau responsnya sebagai data untuk melatih modelnya. Untuk mengetahui informasi selengkapnya, baca artikel Cara Gemini untuk Google Cloud menggunakan data Anda.
  4. Di editor, pilih app.route dan definisi fungsi untuk rute POST /convert, klik bohlam (Bohlam Gemini di Code OSS), lalu klik Gemini: Explain this.

    Kode File

    Gemini akan menjelaskan kode yang dipilih secara mendetail.

Menjalankan aplikasi

  1. Jika terminal telah ditutup, dari menu IDE (Menu utama Code OSS), pilih Terminal > New Terminal.

  2. Di terminal SSH, jalankan perintah berikut:

    cd ~/codeassist-demo source ~/env/bin/activate python3 main.py

    Perintah ini akan menampilkan error yang menyatakan bahwa tidak ada modul bernama flask. Anda dapat menggunakan Gemini Code Assist untuk membantu memahami masalah tersebut.

  3. Di panel chat Gemini Code Assist, ketik perintah berikut:

    How do you install Python requirements?

    Gemini Code Assist kemungkinan akan menyebutkan bahwa Anda dapat menggunakan penginstal paket pip dan file requirements.txt untuk menginstal persyaratan Python.

  4. Di panel aktivitas IDE, klik Explorer (Menu Explorer di Code OSS), lalu klik requirements.txt.

    Flask dan versi yang diperlukan akan tercantum dalam file requirements.txt.

  5. Di terminal, jalankan perintah berikut:

    pip install -r requirements.txt

    Flask kini telah diinstal.

  6. Di terminal, jalankan perintah berikut:

    python3 main.py

    Sebuah dialog akan menunjukkan bahwa layanan yang diproses di port 8080 kini tersedia untuk pratinjau web.

  7. Klik Open Preview, lalu klik Open.

    Aplikasi web Roman Numerals akan terbuka di tab baru.

  8. Di kotak angka, masukkan 123, lalu klik Convert.

    Angka yang ditampilkan adalah CXXIII. C adalah 100, X adalah 10, dan I adalah 1. Hasil ini sepertinya sudah benar.

  9. Klik Return to home page, kemudian masukkan 45, lalu klik Convert.

    Angka yang ditampilkan adalah XXXXV. Secara teknis, angka ini benar secara matematis (4 kali 10, ditambah 5). Namun, dalam penulisan angka Romawi, angka 40 biasanya ditulis sebagai XL (50 dikurangi 10), sehingga penulisan angka Romawi yang lebih umum adalah XLV.

    Hal ini akan dibahas lebih lanjut nanti.

  10. Di panel aktivitas IDE, klik Explorer (Menu Explorer di Code OSS), lalu klik calendar.py.

    Fungsi number_to_roman akan mengonversi angka menjadi angka Romawi.

Untuk memverifikasi tujuan, klik Periksa progres saya. Menyalin kode dan menjalankan aplikasi Flask Python

Tugas 5. Menambahkan pengujian unit

Dalam tugas ini, Anda akan menggunakan Gemini Code Assist untuk membuat pengujian unit untuk kode Anda.

  1. Di panel aktivitas IDE, klik Gemini Code Assist (Menu Gemini Code Assist di Code OSS), lalu masukkan perintah berikut:

    Create unit tests for a fixed version of number_to_roman

    Gemini Code Assist akan mengenali kode di tab terbuka untuk calendar.py. Kode contoh yang diberikan akan mirip dengan kode berikut:

    import unittest import calendar class TestNumberToRoman(unittest.TestCase): def test_basic_conversions(self): self.assertEqual(calendar.number_to_roman(1), "I") self.assertEqual(calendar.number_to_roman(5), "V") self.assertEqual(calendar.number_to_roman(10), "X") self.assertEqual(calendar.number_to_roman(50), "L") self.assertEqual(calendar.number_to_roman(100), "C") self.assertEqual(calendar.number_to_roman(500), "D") self.assertEqual(calendar.number_to_roman(1000), "M") def test_combinations(self): self.assertEqual(calendar.number_to_roman(4), "IV") self.assertEqual(calendar.number_to_roman(9), "IX") self.assertEqual(calendar.number_to_roman(14), "XIV") self.assertEqual(calendar.number_to_roman(40), "XL") self.assertEqual(calendar.number_to_roman(90), "XC") self.assertEqual(calendar.number_to_roman(400), "CD") self.assertEqual(calendar.number_to_roman(900), "CM") self.assertEqual(calendar.number_to_roman(1994), "MCMXCIV") self.assertEqual(calendar.number_to_roman(3888), "MMMDCCCLXXXVIII") def test_edge_cases(self): self.assertEqual(calendar.number_to_roman(0), "") # Should handle zero self.assertRaises(TypeError, calendar.number_to_roman, "abc") # Should handle invalid input def test_large_numbers(self): self.assertEqual(calendar.number_to_roman(3000), "MMM") self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") if __name__ == '__main__': unittest.main() Catatan: Gemini mungkin akan membuat pengujian unit yang lulus berdasarkan implementasi kode Anda saat ini, bukan berdasarkan standar penulisan angka Romawi yang benar. Untuk keperluan lab ini, Anda akan menggunakan versi pengujian unit yang benar.
  2. Untuk menghentikan aplikasi yang berjalan, tekan CTRL + C di terminal.

  3. Untuk membuat pengujian unit untuk fungsi convert, di terminal, jalankan perintah berikut:

    cat > ~/codeassist-demo/test_calendar.py <<EOF import unittest import calendar class TestNumberToRoman(unittest.TestCase): def test_basic_conversions(self): self.assertEqual(calendar.number_to_roman(1), "I") self.assertEqual(calendar.number_to_roman(5), "V") self.assertEqual(calendar.number_to_roman(10), "X") self.assertEqual(calendar.number_to_roman(50), "L") self.assertEqual(calendar.number_to_roman(100), "C") self.assertEqual(calendar.number_to_roman(500), "D") self.assertEqual(calendar.number_to_roman(1000), "M") def test_combinations(self): self.assertEqual(calendar.number_to_roman(4), "IV") self.assertEqual(calendar.number_to_roman(9), "IX") self.assertEqual(calendar.number_to_roman(14), "XIV") self.assertEqual(calendar.number_to_roman(40), "XL") self.assertEqual(calendar.number_to_roman(90), "XC") self.assertEqual(calendar.number_to_roman(400), "CD") self.assertEqual(calendar.number_to_roman(900), "CM") self.assertEqual(calendar.number_to_roman(1994), "MCMXCIV") self.assertEqual(calendar.number_to_roman(3888), "MMMDCCCLXXXVIII") def test_edge_cases(self): self.assertEqual(calendar.number_to_roman(0), "") # Should handle zero self.assertRaises(TypeError, calendar.number_to_roman, "abc") # Should handle invalid input def test_large_numbers(self): self.assertEqual(calendar.number_to_roman(3000), "MMM") self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") if __name__ == '__main__': unittest.main() EOF
  4. Untuk menjalankan pengujian, jalankan perintah berikut di terminal:

    cd ~/codeassist-demo python3 test_calendar.py

    Pengujian akan gagal:

    ====================================================================== ERROR: test_edge_cases (__main__.TestNumberToRoman.test_edge_cases) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 28, in test_edge_cases self.assertRaises(TypeError, calendar.number_to_roman, "abc") # Should handle invalid input ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/unittest/case.py", line 778, in assertRaises return context.handle('assertRaises', args, kwargs) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/unittest/case.py", line 238, in handle callable_obj(*args, **kwargs) File "/home/user/codeassist-demo/calendar.py", line 16, in number_to_roman number = int(number) ^^^^^^^^^^^ ValueError: invalid literal for int() with base 10: 'abc' ====================================================================== FAIL: test_combinations (__main__.TestNumberToRoman.test_combinations) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 16, in test_combinations self.assertEqual(calendar.number_to_roman(4), "IV") AssertionError: 'IIII' != 'IV' - IIII + IV ====================================================================== FAIL: test_large_numbers (__main__.TestNumberToRoman.test_large_numbers) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 33, in test_large_numbers self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") AssertionError: 'MMMDCCCCLXXXXVIIII' != 'MMMCMXCIX' - MMMDCCCCLXXXXVIIII + MMMCMXCIX ---------------------------------------------------------------------- Ran 4 tests in 0.004s FAILED (failures=2, errors=1)

    Kegagalan yang terjadi adalah:

    • abc tidak ditangani dengan benar.
    • 4 menghasilkan IIII, padahal seharusnya IV.
    • 3999 menghasilkan MMMDCCCCLXXXXVIIII, padahal seharusnya MMMCMXCIX.

    Dalam tiap fungsi pengujian, error pertama yang ditemukan akan menyebabkan fungsi berhenti.

    Catatan: Hasil Anda mungkin akan berbeda jika kode pengujian Anda berbeda.

Untuk memverifikasi tujuan, klik Periksa progres saya. Membuat pengujian unit untuk fungsi convert

Tugas 6. Memperbaiki kode dan membuatnya lebih mudah dibaca

Dalam tugas ini, Anda akan menggunakan Gemini Code Assist untuk memperbaiki kode dan membuatnya lebih mudah dibaca.

  1. Di panel aktivitas IDE, klik Explorer (Menu Explorer di Code OSS), lalu klik calendar.py.

  2. Di panel aktivitas IDE, klik Gemini Code Assist (Menu Gemini Code Assist di Code OSS), lalu masukkan perintah berikut:

    Make my code more readable and fix any errors

    Gemini Code Assist akan menghasilkan kode yang lebih mudah dibaca, dan kemungkinan akan memperbaiki masalah yang ada. Berikut contohnya:

    def number_to_roman(number): """Converts an integer to its Roman numeral equivalent. Args: number: An integer between 0 and 3999. Returns: A string representing the Roman numeral equivalent of the number. Returns an empty string if the input is 0. Raises TypeError if the input is not an integer or is out of range. """ try: number = int(number) except ValueError: raise TypeError("Input must be an integer.") if not 0 <= number <= 3999: raise TypeError("Input must be between 0 and 3999.") if number == 0: return "" roman_map = { 1000: 'M', 900: 'CM', 500: 'D', 400: 'CD', 100: 'C', 90: 'XC', 50: 'L', 40: 'XL', 10: 'X', 9: 'IX', 5: 'V', 4: 'IV', 1: 'I'} result = "" for value, numeral in roman_map.items(): while number >= value: result += numeral number -= value return result

    Gemini Code Assist juga menjelaskan perubahan yang telah dilakukan:

    Key improvements: 1. Error Handling: Added TypeError for non-integer input and values outside the range 0-3999. This makes the function more robust. 2. Docstring: A clear docstring explains the function's purpose, arguments, return value, and error handling. This significantly improves readability and maintainability. 3. Efficiency and Correctness: Uses a roman_map dictionary and a more efficient algorithm to construct the Roman numeral. This handles subtractive notation (like "IV" for 4, "IX" for 9, etc.) correctly. The previous version had issues with these cases and was less efficient. 4. Zero Handling: Explicitly handles the case where the input number is 0, returning an empty string as expected. 5. Clarity: The code is now more concise and easier to understand. The logic is clearer and the variable names are more descriptive. This revised version addresses the limitations and errors of the original implementation and adheres to best practices for Python code. It's more robust, readable, and efficient.

    Dalam contoh ini, Gemini Code Assist memberikan algoritma yang membuat kode lebih mudah dibaca, sekaligus memperbaiki masalah dalam kode asli.

  3. Untuk membandingkan kode di file yang baru, di panel kode dalam Gemini Code Assist, klik Diff with Open File (Gemini Code Assist: Diff with Open File).

  4. Untuk menerima perubahan, klik Accept. Kode yang diperbarui akan diterima.

  5. Di terminal SSH, jalankan perintah berikut:

    cd ~/codeassist-demo python3 test_calendar.py

    Jika pengujian tidak lulus, coba jalankan pengujian beberapa kali untuk memastikan pengujian tidak menggunakan versi modul kalender yang di-cache.

    Jika Gemini belum memperbaiki masalah angka Romawi, beberapa pengujian akan gagal. Jika hal ini terjadi, Anda dapat memperbaiki sendiri kode tersebut hingga pengujian berhasil, atau Anda dapat mengganti calendar.py dengan versi yang sudah diketahui berfungsi dengan baik.

  6. Jika beberapa pengujian gagal, untuk memperbaiki kode dan menjalankan kembali pengujian unit, jalankan perintah berikut:

    cat > ~/codeassist-demo/calendar.py <<EOF def number_to_roman(number): """Converts an integer to its Roman numeral equivalent. Args: number: An integer between 0 and 3999. Returns: A string representing the Roman numeral equivalent of the number. Returns an empty string if the input is 0. Raises TypeError if the input is not an integer or is out of range. """ try: number = int(number) except ValueError: raise TypeError("Input must be an integer.") if not 0 <= number <= 3999: raise TypeError("Input must be between 0 and 3999.") if number == 0: return "" roman_map = { 1000: 'M', 900: 'CM', 500: 'D', 400: 'CD', 100: 'C', 90: 'XC', 50: 'L', 40: 'XL', 10: 'X', 9: 'IX', 5: 'V', 4: 'IV', 1: 'I'} result = "" for value, numeral in roman_map.items(): while number >= value: result += numeral number -= value return result EOF cd ~/codeassist-demo python3 test_calendar.py

    Pengujian seharusnya berhasil sekarang.

Untuk memverifikasi tujuan, klik Periksa progres saya. Memperbarui calendar.py untuk memperbaiki masalah dalam kode aslinya

Tugas 7. Meningkatkan keterbacaan kode bagi yang bukan penutur asli bahasa Inggris

Jika Anda bukan penutur asli bahasa Inggris yang mengandalkan aplikasi penerjemahan, Anda dapat menggunakan Gemini Code Assist untuk membuat komentar dalam bahasa lain.

Dalam tugas ini, Anda akan menggunakan Gemini Code Assist untuk menambahkan komentar ke kode, termasuk dalam bahasa lain.

  1. Di panel aktivitas IDE, klik Explorer (Menu Explorer di Code OSS), lalu klik main.py.

  2. Di panel aktivitas IDE, klik Gemini Code Assist (Menu Gemini Code Assist di Code OSS), lalu masukkan perintah berikut:

    Add comments to main.py

    Gemini Code Assist akan menambahkan komentar yang membantu menjelaskan kode:

    import os # Import the os module for environment variables from flask import Flask, render_template, request # Import Flask framework components import calendar # Import the calendar module for Roman numeral conversion # Create a Flask app instance app = Flask(__name__) # Define a route for the home page @app.route("/", methods=["GET"]) def home_page(): # Render the index.html template return render_template("index.html") # Define a route for the conversion endpoint @app.route("/convert", methods=["POST"]) def convert(): # Get the number from the form data number = request.form["number"] # Convert the number to Roman numerals using the calendar module roman = calendar.number_to_roman(number) # Render the convert.html template with the number and its Roman numeral equivalent return render_template("convert.html", number=number, roman=roman) # Run the Flask app if this script is executed directly if __name__ == "__main__": # Run the app in debug mode, listening on all interfaces (0.0.0.0) # and using the port specified in the environment variable PORT or defaulting to 8080 app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))

    Namun, bagaimana jika bahasa Inggris bukan bahasa pertama Anda?

  3. Di panel Gemini Code Assist, masukkan perintah berikut:

    Add Spanish comments to main.py

    Gemini Code Assist dapat memberikan komentar dalam berbagai bahasa untuk membantu meningkatkan keterbacaan kode.

  4. Untuk memverifikasi bahwa hanya komentar yang ditambahkan, di panel kode dalam Gemini Code Assist, klik Diff with Open File (Gemini Code Assist: Diff with Open File).

    Pembaruan akan dibandingkan dengan kode sebelumnya:

    Perbedaan yang menampilkan komentar dalam bahasa Spanyol

  5. Untuk menolak perubahan, klik Decline.

Tugas 8. Membuat tampilan aplikasi jadi lebih menarik

Gemini Code Assist juga dapat membantu Anda membuat tampilan aplikasi menjadi lebih menarik.

Dalam tugas ini, Anda akan menggunakan Gemini Code Assist untuk meningkatkan kualitas desain visual aplikasi Anda.

  1. Di terminal, jalankan perintah berikut:

    cd ~/codeassist-demo python3 main.py

    Sebuah dialog akan menunjukkan bahwa layanan yang diproses di port 8080 kini tersedia untuk pratinjau web.

  2. Klik Open Preview, lalu klik Open.

    Aplikasi web Roman Numerals akan terbuka di tab baru.

    UI yang sederhana

  3. Di panel aktivitas IDE, klik Explorer (Menu Explorer di Code OSS), lalu pilih templates/index.html.

    Template HTML untuk aplikasi ini sangat sederhana.

  4. Di panel aktivitas IDE, klik Gemini Code Assist (Menu Gemini Code Assist di Code OSS), lalu masukkan perintah berikut:

    Make this HTML template look better

    Gemini Code Assist akan memperbarui kode untuk membuat tampilan halaman entri aplikasi jadi lebih menarik.

  5. Untuk menerima perubahan, di panel kode dalam Gemini Code Assist, klik Diff with Open File (Gemini Code Assist: Diff with Open File), lalu klik Accept.

  6. Kembali ke tab browser aplikasi Roman Numerals, lalu klik Refresh.

    Aplikasi akan terlihat lebih bagus. Dalam contoh ini, dialog diposisikan di tengah halaman dan ada penambahan warna.

    UI yang lebih menarik

    Catatan: Perubahan yang dilakukan oleh Gemini Code Assist mungkin akan terlihat berbeda bagi Anda.
  7. Di panel aktivitas IDE, klik Explorer (Menu Explorer di Code OSS), lalu klik templates/convert.html.

  8. Di panel aktivitas IDE, klik Gemini Code Assist (Menu Gemini Code Assist di Code OSS), lalu masukkan perintah berikut:

    Make the convert.html template look similar to the index.html template

    Gemini Code Assist akan memperbarui template hasil agar selaras dengan template indeks.

  9. Untuk menerima perubahan, di panel kode dalam Gemini Code Assist, klik Diff with Open File (Gemini Code Assist: Diff with Open File), lalu klik Accept.

  10. Kembali ke tab browser aplikasi Roman Numerals, masukkan 45, lalu klik Enter.

    Halaman hasil baru akan selaras dengan gaya halaman indeks:

    Halaman hasil yang lebih baik

Untuk memverifikasi tujuan, klik Periksa progres saya. Menggunakan Gemini Code Assist untuk meningkatkan kualitas desain visual aplikasi Anda

Mengakhiri lab Anda

Setelah Anda menyelesaikan lab, klik Akhiri Lab. Qwiklabs menghapus resource yang telah Anda gunakan dan menghapus akun.

Anda akan diberi kesempatan untuk menilai pengalaman menggunakan lab. Pilih jumlah bintang yang sesuai, ketik komentar, lalu klik Submit.

Makna jumlah bintang:

  • 1 bintang = Sangat tidak puas
  • 2 bintang = Tidak puas
  • 3 bintang = Netral
  • 4 bintang = Puas
  • 5 bintang = Sangat puas

Anda dapat menutup kotak dialog jika tidak ingin memberikan masukan.

Untuk masukan, saran, atau koreksi, gunakan tab Dukungan.

Selamat!

Di lab ini, Anda telah mempelajari cara:

  • Membuat lingkungan pengembangan aplikasi berbasis cloud menggunakan Cloud Workstations.
  • Menggunakan Gemini Code Assist untuk menjelaskan kode.
  • Membuat pengujian unit dengan Gemini Code Assist.
  • Memasukkan perintah ke Gemini untuk meningkatkan kualitas tampilan aplikasi.
  • Menggunakan Gemini Code Assist untuk membuat kode lebih mudah dibaca.
  • Menggunakan Gemini Code Assist untuk menambahkan komentar ke kode, dalam bahasa Inggris atau bahasa lainnya.

Langkah berikutnya/pelajari lebih lanjut

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

Sebelum memulai

  1. Lab membuat project dan resource Google Cloud untuk jangka waktu tertentu
  2. Lab memiliki batas waktu dan tidak memiliki fitur jeda. Jika lab diakhiri, Anda harus memulainya lagi dari awal.
  3. Di kiri atas layar, klik Start lab untuk memulai

Gunakan penjelajahan rahasia

  1. Salin Nama Pengguna dan Sandi yang diberikan untuk lab tersebut
  2. Klik Open console dalam mode pribadi

Login ke Konsol

  1. Login menggunakan kredensial lab Anda. Menggunakan kredensial lain mungkin menyebabkan error atau dikenai biaya.
  2. Setujui persyaratan, dan lewati halaman resource pemulihan
  3. Jangan klik End lab kecuali jika Anda sudah menyelesaikan lab atau ingin mengulanginya, karena tindakan ini akan menghapus pekerjaan Anda dan menghapus project

Konten ini tidak tersedia untuk saat ini

Kami akan memberi tahu Anda melalui email saat konten tersedia

Bagus!

Kami akan menghubungi Anda melalui email saat konten tersedia

Satu lab dalam satu waktu

Konfirmasi untuk mengakhiri semua lab yang ada dan memulai lab ini

Gunakan penjelajahan rahasia untuk menjalankan lab

Gunakan jendela Samaran atau browser pribadi untuk menjalankan lab ini. Langkah ini akan mencegah konflik antara akun pribadi Anda dan akun Siswa yang dapat menyebabkan tagihan ekstra pada akun pribadi Anda.