Tingkatkan alur kerja pengembangan Anda dengan Gemini Code Assist

1. Pengantar

Dalam codelab ini, Anda akan melihat cara Gemini Code Assist dapat mendukung Anda di berbagai tahap utama Siklus Proses Pengembangan Software (SDLC) seperti desain, pembuatan & pengujian, dan deployment. Kita akan mendesain dan mengembangkan seluruh aplikasi, lalu men-deploy-nya di Google Cloud.

Kita akan membuat API dan aplikasi untuk menelusuri sesi dalam acara teknis. Setiap sesi akan memiliki judul, ringkasan, durasi, kategori, dan satu atau beberapa pembicara.

Yang akan Anda lakukan

• Mendesain, Membangun, Menguji, dan Men-deploy aplikasi web berdasarkan spesifikasi OpenAPI dari awal

Yang akan Anda pelajari

• Cara menggunakan Gemini Code Assist untuk membuat Spesifikasi OpenAPI
• Cara menggunakan fitur pembuatan kode Gemini Code Assist untuk mengembangkan Aplikasi Flask Python untuk spesifikasi OpenAPI
• Cara menggunakan Gemini Code Assist untuk membuat front-end web bagi Aplikasi Python Flask
• Cara menggunakan Gemini Code Assist untuk mendapatkan bantuan tentang cara men-deploy aplikasi ke Google Cloud Run
• Gunakan fitur Gemini Code Assist seperti Penjelasan Kode, pembuatan Kasus Uji, saat membangun dan menguji aplikasi

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.

2. Menyiapkan Gemini Code Assist

Bagian ini membahas semua hal yang perlu Anda lakukan untuk memulai lab ini.

Mengaktifkan Gemini Code Assist di Cloud Shell IDE

Kita akan menggunakan Cloud Shell IDE, lingkungan pengembangan berbasis Code OSS yang terkelola sepenuhnya, untuk langkah-langkah berikutnya dalam codelab ini. Kita perlu mengaktifkan dan mengonfigurasi Code Assist di Cloud Shell IDE dan langkah-langkahnya dijelaskan di bawah ini:

1. Buka ide.cloud.google.com. IDE mungkin memerlukan waktu beberapa saat untuk muncul, jadi harap bersabar dan terima pilihan default penyiapan apa pun. Jika Anda melihat beberapa petunjuk tentang penyiapan IDE, lanjutkan dan selesaikan petunjuk tersebut dengan setelan default.
2. 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.

3. Klik tombol Code Assist di pojok kanan bawah seperti yang ditunjukkan, lalu pilih project Google Cloud yang benar untuk terakhir kalinya. Jika Anda diminta untuk mengaktifkan Cloud AI Companion API, lakukan dan lanjutkan.
4. Setelah memilih project Google Cloud, pastikan Anda dapat melihatnya di pesan status Cloud Code di status bar dan Code Assist juga sudah diaktifkan di sebelah kanan status bar seperti yang ditunjukkan di bawah:

Gemini Code Assist siap digunakan.

Gemini Code Assist juga tersedia di IDE lokal seperti Visual Studio Code, atau JetBrains IntelliJ. Fitur ini juga tersedia di Google Cloud Workstations. Codelab ini berfokus pada Cloud Shell IDE sebagai cara untuk membuat semua orang menggunakan lingkungan yang sama, tetapi Anda dapat mencoba penyiapan favorit Anda dan melihat link ini untuk mengetahui detail selengkapnya.

3. Menyiapkan Firestore

Cloud Firestore adalah database dokumen serverless yang terkelola sepenuhnya yang akan kita gunakan sebagai backend untuk data aplikasi kita. Data di Cloud Firestore disusun dalam koleksi dokumen.

Kita perlu membuat koleksi bernama sessions di database Firestore default kita. Koleksi ini akan menyimpan data sampel (dokumen) yang kemudian akan kita gunakan dalam aplikasi.

Buka Terminal dari dalam Cloud Shell IDE Anda melalui menu utama seperti yang ditunjukkan di bawah:

Kita perlu membuat koleksi bernama sessions. Variabel ini akan menyimpan daftar dokumen sesi contoh. Setiap dokumen akan memiliki atribut berikut:

1. title: string
2. categories: array string
3. pembicara: array string
4. duration: string
5. summary: string

Mari isi koleksi ini dengan data contoh dengan menyalin file yang berisi data contoh ke dalam bucket di project Anda sendiri, yang kemudian dapat Anda gunakan untuk mengimpor koleksi melalui perintah gcloud firestore import.

Inisialisasi Database Firestore

Buka halaman Firestore di konsol Cloud.

Jika Anda belum pernah menginisialisasi database Firestore sebelumnya dalam project, buat database default. Selama pembuatan database, gunakan nilai berikut:

• Mode Firestore: Native
• Lokasi: Pilih jenis Lokasi sebagai Region dan pilih wilayah yang sesuai untuk aplikasi Anda. Catat lokasi ini karena Anda akan memerlukannya pada langkah berikutnya untuk lokasi bucket.
• Buat Database.

Jika Anda sudah memiliki database default, catat lokasi database, karena Anda akan memerlukannya pada langkah berikutnya untuk lokasi bucket.

Sekarang kita akan membuat koleksi sessions dengan mengikuti langkah-langkah di bawah ini:

1. Buat bucket di project Anda dengan perintah gsutil yang diberikan di bawah. Ganti variabel <PROJECT_ID> dalam perintah di bawah dengan ID Project Google Cloud Anda. Ganti <BUCKET_LOCATION> dengan nama region yang sesuai dengan Area Geografis database Firestore default Anda (seperti yang disebutkan di langkah sebelumnya), bisa berupa US-WEST1, EUROPE-WEST1, ASIA-EAST1 :

gsutil mb -l <BUCKET-LOCATION> gs://<PROJECT_ID>-my-bucket

2. Setelah bucket dibuat, kita perlu menyalin ekspor database yang telah kita siapkan ke dalam bucket ini, sebelum kita dapat mengimpornya ke dalam database Firebase. Gunakan perintah yang diberikan di bawah:

gsutil cp -r gs://sessions-master-database-bucket/2024-03-26T09:28:15_95256  gs://<PROJECT_ID>-my-bucket

Setelah memiliki data yang akan diimpor, kita dapat melanjutkan ke langkah terakhir untuk mengimpor data ke database Firebase (default) yang telah kita buat.

3. Gunakan perintah gcloud yang diberikan di bawah:

gcloud firestore import gs://<PROJECT_ID>-my-bucket/2024-03-26T09:28:15_95256

Impor akan memerlukan waktu beberapa detik dan setelah siap, Anda dapat memvalidasi database dan koleksi Firestore dengan membuka https://console.cloud.google.com/firestore/databases, memilih database default dan koleksi sessions seperti yang ditunjukkan di bawah:

Perhatikan bahwa ini adalah Firestore yang sama yang Anda kenal dan sukai jika Anda menggunakan Firebase. Bahkan, Anda dapat membuka instance database yang sama menggunakan Firebase console.

Tindakan ini menyelesaikan pembuatan koleksi Firestore yang akan kita gunakan dalam aplikasi.

4. Buat Template Aplikasi

Kita akan membuat aplikasi contoh (aplikasi Python Flask) yang akan digunakan di sepanjang codelab ini. Aplikasi ini akan menelusuri sesi yang ditawarkan di konferensi teknis.

Ikuti langkah-langkah berikut:

1. Klik nama project Google Cloud di status bar di bawah.

2. Daftar opsi akan muncul. Klik Aplikasi Baru dari daftar di bawah.

3. Pilih Cloud Run application (ini akan menjadi runtime untuk aplikasi kita).
4. Pilih template aplikasi Python (Flask): Cloud Run.
5. Beri nama aplikasi dan simpan di lokasi pilihan Anda.
6. Sebagai konfirmasi, notifikasi akan muncul dan memberi tahu bahwa aplikasi Anda telah dibuat, lalu aplikasi Anda akan dimuat di jendela baru yang terbuka seperti yang ditunjukkan di bawah. File README.md dibuka. Untuk saat ini, Anda dapat menutup tampilan tersebut.

5. Berinteraksi dengan Gemini Code Assist

Untuk tujuan lab ini, kita akan menggunakan Gemini Code Assist Chat yang tersedia di dalam Cloud Shell IDE sebagai bagian dari ekstensi Cloud Code di VS Code. Anda dapat menampilkannya dengan mengklik tombol Code Assist di menu navigasi sebelah kiri. Cari ikon Code Assist di toolbar navigasi sebelah kiri, lalu klik ikon tersebut.

Tindakan ini akan menampilkan panel chat Code Assist di dalam Cloud Shell IDE dan Anda dapat melakukan chat dengan Code Assist.

Perhatikan ikon tong sampah di bagian atas - ini adalah cara Anda mereset konteks untuk histori chat Code Assist. Perhatikan juga bahwa interaksi chat ini bersifat kontekstual dengan file yang sedang Anda kerjakan di IDE.

6. Desain API

Langkah pertama kita adalah memanfaatkan bantuan Gemini Code Assist selama fase Desain. Pada langkah ini, kita akan membuat spesifikasi OpenAPI untuk entitas (sesi teknis dalam acara) yang ingin kita telusuri.

Berikan perintah berikut:

Generate an Open API spec that will allow me to retrieve all sessions, sessions by category, session by id. Each session has the following attributes: id, title, list of speakers, list of categories, summary and duration.

Tindakan ini akan menghasilkan Spesifikasi OpenAPI untuk menelusuri sesi melalui berbagai parameter kueri. Contoh spesifikasi diberikan di bawah ini:

openapi: 3.0.0
info:
 title: Sessions API
 description: This API allows you to retrieve all sessions, sessions by category, and session by id.
 version: 1.0.0
servers:
 - url: https://sessions.example.com
paths:
 /sessions:
   get:
     summary: Get all sessions
     operationId: getSessions
     responses:
       '200':
         description: OK
         content:
           application/json:
             schema:
               type: array
               items:
                 $ref: '#/components/schemas/Session'
 /sessions/{id}:
   get:
     summary: Get session by id
     operationId: getSessionById
     parameters:
       - name: id
         in: path
         required: true
         description: The id of the session
         schema:
           type: string
     responses:
       '200':
         description: OK
         content:
           application/json:
             schema:
               $ref: '#/components/schemas/Session'
 /sessions/categories/{category}:
   get:
     summary: Get sessions by category
     operationId: getSessionsByCategory
     parameters:
       - name: category
         in: path
         required: true
         description: The category of the sessions
         schema:
           type: string
     responses:
       '200':
         description: OK
         content:
           application/json:
             schema:
               type: array
               items:
                 $ref: '#/components/schemas/Session'
components:
 schemas:
   Session:
     type: object
     properties:
       id:
         type: string
         description: The id of the session
       title:
         type: string
         description: The title of the session
       speakers:
         type: array
         items:
           type: string
         description: The list of speakers for the session
       categories:
         type: array
         items:
           type: string
         description: The list of categories for the session
       summary:
         type: string
         description: The summary of the session
       duration:
         type: string
         description: The duration of the session

Anda dapat melihat bahwa spesifikasi memiliki hal berikut:

• Skema yang ditentukan untuk jenis Sesi.
• Beberapa jalur API ditentukan:
• /sessions
• /sessions/{id}
• /sessions/categories/{category}

Buat file bernama sessionsapi.yaml di folder teratas dan salin konten dari jendela chat Code Assist menggunakan "opsi sisipkan di file saat ini" (tombol +) dan biarkan file tetap terbuka di Cloud Shell IDE.

Pada tahap ini, Anda dapat mencatat fitur menarik dari Gemini Code Assist: kutipan. Informasi ini ditampilkan kepada developer saat kode yang dihasilkan mengutip langsung secara signifikan dari sumber lain, seperti kode open source yang sudah ada. API ini menawarkan sumber dan lisensi bagi developer untuk memutuskan apa yang harus dilakukan dengan sumber tersebut.

Dengan asumsi kita sudah puas dengan konten yang dihasilkan, kita dapat menggunakan dokumen spesifikasi ini untuk membuat Aplikasi Python Flask.

7. Buat Aplikasi

Sekarang kita akan meminta Code Assist untuk membuat aplikasi. Berikan perintah berikut dengan file sessionsapi.yaml terbuka.

Generate a Python Application using the Flask framework, based on the sessionsapi.yaml file. This application uses a local in memory list of sessions. Do not use any Flask extensions.

Hal ini akan memberi Anda kerangka untuk Aplikasi Flask Python yang didasarkan pada fungsi dan jalur yang telah ditentukan dalam file spesifikasi OpenAPI.

Ada kemungkinan Gemini Code Assist akan membuat kode menggunakan ekstensi Flask tertentu seperti flask_restful. Jika demikian, Anda dapat mengeluarkan perintah lanjutan yang secara eksplisit menyatakan sesuatu seperti "Jangan gunakan ekstensi XYZ" dan Anda akan mendapatkan kode yang menggunakan framework Flask inti itu sendiri.

Kode Aplikasi Python Flask yang diberikan harus mirip dengan kode berikut:

from flask import Flask, jsonify, request

app = Flask(__name__)

sessions = [
    {
        "id": "1",
        "title": "Session 1",
        "speakers": ["Speaker 1", "Speaker 2"],
        "categories": ["Category 1", "Category 2"],
        "summary": "This is a summary of session 1.",
        "duration": "1 hour",
    },
    {
        "id": "2",
        "title": "Session 2",
        "speakers": ["Speaker 3", "Speaker 4"],
        "categories": ["Category 3", "Category 4"],
        "summary": "This is a summary of session 2.",
        "duration": "1 hour 30 minutes",
    },
]

@app.route('/sessions', methods=['GET'])
def get_sessions():
    return jsonify(sessions)

@app.route('/sessions/<id>', methods=['GET'])
def get_session_by_id(id):
    session = next((session for session in sessions if session['id'] == id), None)
    if session is None:
        return jsonify({}), 404
    return jsonify(session)

@app.route('/sessions/categories/<category>', methods=['GET'])
def get_sessions_by_category(category):
    sessions_by_category = [session for session in sessions if category in session['categories']]
    return jsonify(sessions_by_category)

if __name__ == '__main__':
    app.run()

Ada file app.py yang sudah ada dan dihasilkan sebagai bagian dari langkah sebelumnya. Cukup ganti kontennya dengan kode yang dihasilkan oleh Code Assist dan simpan file.

Kita akan mengubah baris app.run() untuk menggunakan port 8080, alamat host 0.0.0.0, dan juga berjalan dalam mode Debug selama eksekusi lokal.Berikut cara melakukannya. Pertama, tandai/pilih baris:

app.run()

Kemudian, di antarmuka Chat Code Assist, ketik perintah: Explain this.

Hal ini akan menampilkan penjelasan mendetail tentang baris tertentu tersebut, contohnya ditunjukkan di bawah:

Sekarang, gunakan perintah berikut:

update the code to run the application on port 8080, host address 0.0.0.0, and in debug mode

Kode saran yang dihasilkan akan seperti berikut: :

app.run(host='0.0.0.0', port=8080, debug=True)

Jangan lupa untuk memperbarui file app.py dengan cuplikan ini.

Jalankan aplikasi secara lokal

Sekarang, jalankan aplikasi secara lokal untuk memvalidasi persyaratan aplikasi sesuai dengan yang telah kita mulai.

Langkah pertama adalah membuat lingkungan Python virtual dengan dependensi paket Python di requirements.txt yang akan diinstal di lingkungan virtual. Untuk melakukannya, buka Command Palette (Ctrl+Shift+P) di Cloud Shell IDE, lalu ketik Create Python environment. Ikuti beberapa langkah berikutnya untuk memilih Lingkungan Virtual (venv), penafsir Python 3.x, dan file requirements.txt.

Setelah lingkungan dibuat, buka jendela terminal baru (Ctrl+Shift+`) dan berikan perintah berikut:

python app.py

Contoh eksekusi ditampilkan di bawah:

(.venv) romin@cloudshell: $ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 132-247-368

Sekarang Anda dapat melihat pratinjau API di URL berikut. Kami mengasumsikan bahwa server pengembangan Anda berjalan di port 8080. Jika tidak, ubah ke nomor port yang sesuai.

• https://<host-name>:8080/sessions
• https://<host-name>:8080/sessions/{id}
• https://<host-name>:8080/sessions/categories/{category}

Ikuti langkah-langkah di bawah untuk memastikan Anda dapat mengambil data JSON yang ada dalam file app.py menggunakan URL ini:

Buka jendela terminal baru dan coba salah satu perintah berikut:

curl -X GET http://127.0.0.1:8080/sessions
curl -X GET http://127.0.0.1:8080/sessions/<ID>
curl -X GET http://127.0.0.1:8080/sessions/categories/<CATEGORY_NAME> 

Perhatikan bahwa jika Anda perlu memberikan spasi dalam nama kategori, Anda dapat menggunakan %20 sebagai nilai.

8. Pemfaktoran Ulang Kode

Daripada membuat app.py berisi data JSON sampel yang dikodekan secara permanen, sebaiknya kita memisahkan/mengekstraksinya ke modul lain, sehingga kita dapat mempertahankan pemisahan yang jelas antara kode dan data. Ayo kita lakukan!

Biarkan file app.py tetap terbuka dan berikan perintah berikut:

Can I improve this code and separate out the sessions data from this app.py file?

Hal ini akan memberi Anda beberapa saran tentang cara melakukannya. Contoh saran yang kami dapatkan dan yang akan Anda dapatkan, ditampilkan di bawah:

Mari kita ikuti saran tersebut dan pisahkan data ke dalam file sessions.py seperti yang disarankan oleh Code Assist.

Buat file baru bernama sessions.py

, yang isinya adalah daftar JSON, seperti yang dihasilkan data kami diberikan di bawah:

sessions = [
   {
       "id": "1",
       "title": "Session 1",
       "speakers": ["Speaker 1", "Speaker 2"],
       "categories": ["Category 1", "Category 2"],
       "summary": "This is a summary of session 1.",
       "duration": "1 hour",
   },
   {
       "id": "2",
       "title": "Session 2",
       "speakers": ["Speaker 3", "Speaker 4"],
       "categories": ["Category 3", "Category 4"],
       "summary": "This is a summary of session 2.",
       "duration": "1 hour 30 minutes",
   },
]

File app.py kini jauh lebih sederhana dan ditampilkan di bawah:

from flask import Flask, jsonify, request
from sessions import sessions

app = Flask(__name__)

@app.route('/sessions', methods=['GET'])
def get_sessions():
   return jsonify(sessions.sessions)

@app.route('/sessions/<id>', methods=['GET'])
def get_session_by_id(id):
   session = next((session for session in sessions.sessions if session['id'] == id), None)
   if session is None:
       return jsonify({}), 404
   return jsonify(session)

@app.route('/sessions/categories/<category>', methods=['GET'])
def get_sessions_by_category(category):
   sessions_by_category = [session for session in sessions.sessions if category in session['categories']]
   return jsonify(sessions_by_category)

if __name__ == '__main__':
   app.run(host='0.0.0.0', port=8080, debug=True)

Pastikan Anda masih dapat menjalankan aplikasi secara lokal dan menggunakan API dengan perubahan yang telah difaktorkan ulang ini. Server pengembangan Python kemungkinan masih berjalan sehingga Anda hanya perlu memanggil kembali perintah curl dari langkah sebelumnya.

9. Mengintegrasikan dengan Koleksi Firestore

Langkah berikutnya adalah beralih dari daftar JSON dalam memori lokal yang kita miliki untuk sesi dan menghubungkan aplikasi kita ke koleksi sessions di database Firestore, yang kita buat di awal codelab ini.

Biarkan file sessions.py tetap terbuka dan berikan perintah berikut:

Can you further refactor the sessions.py code to read from a Firestore database that has a collection named sessions. The collection has the same attributes as the session object that we have defined. Use the Python module google-cloud-firestore. 

Kami menerima saran berikut untuk membaca semua sesi dari koleksi Firestore:

import google.cloud.firestore

# Create a Firestore client
db = google.cloud.firestore.Client()

# Get the sessions collection
sessions_collection = db.collection("sessions")

# Create a list of sessions
sessions = []

# Iterate over the documents and add them to the list
for doc in sessions_collection.stream():
   session = doc.to_dict()
   session["id"] = doc.id
   sessions.append(session)

Lanjutkan dan gabungkan kode di sessions.py.

Jika Anda menjalankan server Pengembangan Flask secara lokal, aplikasi Anda mungkin telah ditutup dengan keluhan bahwa modul Python tidak ditemukan.

Anda dapat bertanya kepada Code Assist, misalnya, tentang modul Python mana yang perlu ditambahkan ke file requirements.txt, seperti berikut:

Which Python package needs to be installed to make the firestore code work?

Tindakan ini akan memberi Anda nama modul Python (misalnya, google-cloud-firestore). Tambahkan nama tersebut ke file requirements.txt.

Anda harus membuat ulang lingkungan Python dengan modul yang baru ditambahkan (google-cloud-firestore). Untuk melakukannya, berikan perintah berikut di jendela Terminal yang ada:

pip install -r requirements.txt

Jalankan kembali aplikasi (mulai ulang dengan python app.py) dan buka URL /sessions. Sekarang Anda akan mendapatkan dokumen contoh yang kita tambahkan ke koleksi sessions.

Anda dapat membuat kueri URI lain untuk mengambil sesi tertentu atau semua sesi untuk kategori tertentu seperti yang dijelaskan pada langkah-langkah sebelumnya.

10. Penjelasan Kode

Sekarang adalah waktu yang tepat untuk menggunakan fitur "Explain this" Gemini Code Assist untuk mendapatkan pemahaman yang baik tentang kode. Anda dapat membuka salah satu file atau memilih cuplikan kode tertentu dan meminta bantuan Code Assist dengan perintah berikut: Explain this.

Sebagai latihan, buka file sessions.py, tandai kode khusus Firestore, dan dapatkan penjelasan kode untuk kode tersebut. Coba juga gunakan fitur ini pada file lain dalam project Anda, bukan hanya kode python.

11. Buat Aplikasi Web

Setelah kita membuat API dan mengintegrasikannya dengan koleksi Firestore aktif, mari kita buat frontend berbasis Web untuk aplikasi. Saat ini, front-end Web kami akan mempertahankan fungsinya seminimal mungkin, yaitu dapat menelusuri sesi yang termasuk dalam kategori tertentu. Perhatikan bahwa kita memiliki jalur API untuk itu, yaitu /sessions/categories/{category}, sehingga aplikasi web kita harus memanggilnya dan mengambil hasilnya.

Mari kita mulai. Berikan perintah berikut ke Code Assist:

Generate a web application that allows me to search for sessions by category and uses the Flask application that we created. Please use basic HTML, CSS and JS. Embed all the Javascript and CSS code into a single HTML file only.

Tindakan ini akan menghasilkan HTML aplikasi Web dengan JavaScript dan CSS yang disematkan di dalamnya. Anda juga akan diminta untuk menambahkan rute baru ke file app.py, sehingga setiap pengguna yang membuka URL root atau dasar akan melihat halaman beranda. Jika tidak menyebutkan informasi tersebut, tanyakan atau gunakan cuplikan yang diberikan di bawah:

@app.route('/')
def index():
   return render_template('index.html')

Anda dapat menyimpannya sebagai index.html, tetapi mungkin memiliki pertanyaan tentang tempat file ini harus disimpan (yaitu, folder mana?). Kita dapat mengajukan pertanyaan lanjutan ke Code Assist.

Given that I am using the flask framework, where should I put the index.html file?

Hal ini akan memberi Anda informasi yang jelas bahwa framework render_template digunakan dan oleh karena itu, file index.html harus ditempatkan di dalam folder templates. Anda akan menemukan folder ini tersedia karena kita telah membuat Aplikasi berdasarkan template Flask di awal codelab ini. Akibatnya, ada file index.html yang sudah ada dan Anda cukup mengganti isinya dengan file baru yang telah dibuat di sini. Code Assist juga menyebutkan untuk mengimpor render_template dalam file app.py Anda.

Lanjutkan dan simpan kode Aplikasi web di file index.html dan jangan lupa untuk menempatkan file tersebut di folder templates.

Jalankan aplikasi secara lokal

Sekarang, jalankan aplikasi secara lokal untuk memvalidasi persyaratan aplikasi sesuai dengan yang telah kita mulai.

Pastikan server Flask lokal masih berjalan dan tidak menampilkan error. Jika terjadi error, atasi error tersebut dan mulai server.

Setelah berjalan, buka URL beranda aplikasi. File index.html yang ditayangkan akan ditampilkan seperti yang ditunjukkan di bawah ini:

Berikan salah satu kategori dari data sebagai input (misalnya, AI), lalu klik tombol Search. Tindakan ini akan menampilkan sesi yang diberi tag dengan kategori AI.

Latihan opsionalnya adalah menampilkan metadata tambahan seperti durasi, kategori, pembicara, dan ringkasan untuk setiap sesi.

12. Pembuatan Kasus Pengujian

Kita telah membuat API sesi dan sekarang saatnya menggunakan Gemini Code Assist untuk membuat kasus pengujian unit untuk berbagai Jalur API.

Biarkan file app.py tetap terbuka dan berikan perintah berikut:

Generate unit test cases for app routes. Use unittest module.

Kami mendapatkan respons berikut:

import unittest
from app import app

class FlaskAppTestCase(unittest.TestCase):

    def test_index(self):
        tester = app.test_client()
        response = tester.get('/')
        self.assertEqual(response.status_code, 200)

    def test_get_sessions(self):
        tester = app.test_client()
        response = tester.get('/sessions')
        self.assertEqual(response.status_code, 200)

    def test_get_session_by_id(self):
        tester = app.test_client()
        response = tester.get('/sessions/1')
        self.assertEqual(response.status_code, 200)

    def test_get_sessions_by_category(self):
        tester = app.test_client()
        response = tester.get('/sessions/categories/category1')
        self.assertEqual(response.status_code, 200)

if __name__ == '__main__':
    unittest.main()

Buat file bernama tests.py dengan kode di atas.

Catatan tentang Pembuatan Kasus Pengujian

Anda mungkin melihat listingan kode yang berbeda dengan yang di atas dan hal itu dapat menyebabkan beberapa masalah dalam menjalankan kasus pengujian. Misalnya, kami melihat bahwa dalam beberapa eksekusi kami, bagian kode utama berikut tidak tercakup:

from app import app

Kode di atas diperlukan untuk mengimpor Aplikasi Flask yang ada yang akan kita gunakan untuk memanggil kasus pengujian.

if __name__ == '__main__':

`unittest.main()`

Kode di atas diperlukan untuk menjalankan kasus pengujian.

Sebaiknya periksa setiap kasus pengujian, periksa assertEqual dan kondisi lainnya dalam kode yang dihasilkan untuk memastikan kode tersebut akan berfungsi. Karena data bersifat eksternal dalam koleksi Firestore, data tersebut mungkin tidak memiliki akses ke data tersebut dan mungkin menggunakan beberapa data dummy sehingga pengujian dapat gagal. Jadi, ubah kasus pengujian Anda dengan tepat atau beri komentar pada beberapa kasus pengujian yang mungkin tidak segera Anda perlukan.

Sebagai demonstrasi, kami menjalankan kasus pengujian menggunakan perintah berikut (Pastikan untuk menjalankan server pengembangan lokal karena panggilan akan dilakukan ke Endpoint API lokal):

python tests.py

Kita mendapatkan hasil ringkasan berikut:

Ran 4 tests in 0.274s

FAILED (failures=2)

Memang benar karena ID sesi tidak benar dalam pengujian ke-3 dan tidak ada kategori bernama category1

.

Jadi, sesuaikan kasus pengujian yang sesuai dan uji.

13. Pengembangan Berbasis Pengujian

Sekarang mari kita lihat cara menambahkan metode penelusuran baru di API sesi kita dengan mengikuti metodologi Pengembangan Berbasis Pengujian (TDD), yaitu menulis kasus pengujian terlebih dahulu, membuatnya gagal karena kurangnya implementasi, dan menggunakan Gemini Code Assist untuk membuat implementasi yang hilang sehingga pengujian berhasil.

Buka file tests.py (dengan asumsi Anda telah memperbaiki file tests.py agar semua pengujian lulus). Ajukan perintah berikut ke Code Assist:

Generate a new test case to search for sessions by speaker

Hal ini memberi kita implementasi kasus pengujian berikut yang kita masukkan ke dalam file tests.py.

  def test_get_sessions_by_speaker(self):
        tester = app.test_client()
        response = tester.get('/sessions/speakers/speaker1')
        self.assertEqual(response.status_code, 200)
        self.assertEqual(response.json, [sessions.sessions[0], sessions.sessions[1]])

Jika Anda menjalankan pengujian, Anda akan melihat error berikut:

$ python tests.py 
.F.
======================================================================
FAIL: test_get_sessions_by_speaker (__main__.FlaskAppTestCase)
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/home/romin/hello-world-5/tests.py", line 21, in test_get_sessions_by_speaker
    self.assertEqual(response.status_code, 200)
AssertionError: 404 != 200

----------------------------------------------------------------------
Ran 3 tests in 0.010s

FAILED (failures=1)

Hal ini karena kasus pengujian telah memanggil jalur (/sessions/speakers/) berikut dan tidak ada implementasinya di app.py.

Minta Code Assist untuk memberikan penerapan kepada kita. Buka file app.py dan berikan perintah berikut ke Code Assist:

Add a new route to search for sessions by a specific speaker

Kita mendapatkan saran implementasi berikut dari Code Assist, yang kita tambahkan ke file app.py:

@app.route('/sessions/speakers/<speaker>', methods=['GET'])
def get_sessions_by_speaker(speaker):
    sessions_by_speaker = [session for session in sessions.sessions if speaker in session['speakers']]
    return jsonify(sessions_by_speaker)

Buka kembali file tests.py dan kami mengubah kasus pengujian sebagai berikut untuk pemeriksaan cepat:

   def test_get_sessions_by_speaker(self):
       tester = app.test_client()
       response = tester.get('/sessions/speakers/Romin Irani')
       self.assertEqual(response.status_code, 200)
       self.assertEqual(len(response.json), 1)

Pengujian berjalan dengan baik. Anda dapat melihat kasus pengujian yang dihasilkan, menyesuaikannya sedikit bergantung pada data yang mungkin Anda miliki di Firestore, dan menggunakan metode assert* yang sesuai dalam kasus Pengujian Unit Python.

14. Men-deploy ke Google Cloud Run

Setelah merasa yakin dengan kualitas pengembangan, langkah terakhir kita adalah men-deploy aplikasi ini ke Google Cloud Run. Namun, untuk berjaga-jaga, kita harus bertanya kepada Code Assist apakah ada yang terlupa. Dengan app.py terbuka, kirimkan perintah berikut :

Is there something here I should change before I deploy to production?

Untung Anda bertanya karena kami lupa menonaktifkan tanda proses debug :

Seperti yang ditunjukkan, nonaktifkan proses debug dan lanjutkan dengan meminta bantuan Gemini Code Assist untuk perintah gcloud yang dapat digunakan untuk men-deploy aplikasi ke Cloud Run langsung dari sumber (tanpa harus membuat container terlebih dahulu).

Berikan perintah berikut:

I would like to deploy the application to Cloud Run directly from source. What is the gcloud command to do that?

Coba beberapa variasi perintah di atas. Contoh lain yang kami coba adalah:

I would like to deploy this application to Cloud Run. I don't want to build a container image locally but deploy directly from source to Cloud Run. What is the gcloud command for that?

Idealnya, Anda akan mendapatkan perintah gcloud berikut:

gcloud run deploy sessions --source .

Anda juga bisa mendapatkan:

gcloud run deploy <service-name> --source . \
—-platform managed \
—-allow-unauthenticated

Jalankan perintah di atas dari folder root aplikasi. Saat diminta untuk region, pilih us-central1 dan saat diminta untuk mengizinkan unauthenticated invocations, pilih Y. Anda juga dapat diminta untuk mengaktifkan Google Cloud API seperti Artifact Registry, Cloud Build, dan Cloud Run, serta memberikan izin untuk membuat repositori Artifact Registry. Berikan izin tersebut.

Proses deployment akan memerlukan waktu sekitar 2 menit hingga selesai, jadi bersabarlah.

Setelah berhasil di-deploy, Anda akan melihat URL layanan Cloud Run. Buka URL publik tersebut dan Anda akan melihat aplikasi web yang sama telah di-deploy dan berjalan dengan sukses.

Karena aplikasi Cloud Run berjalan dengan identitas layanannya sendiri, Akun Layanan yang terkait dengan layanan Cloud Run harus memiliki izin yang diperlukan untuk mengakses database Firestore. Pastikan akun layanan Cloud Run Anda memiliki peran roles/datastore.user.

Selamat, bagus sekali!

15. (Opsional) Menggunakan Cloud Logging

Kita dapat memperkenalkan logging di aplikasi sehingga log aplikasi dipusatkan di salah satu layanan Google Cloud (Cloud Logging). Kemudian, kita dapat menggunakan fitur Observability Gemini untuk memahami entri log juga.

Untuk melakukannya, kita harus menggunakan library Cloud Logging Python yang ada dari Google Cloud terlebih dahulu dan menggunakannya untuk mencatat pesan informasi, peringatan, atau error (bergantung pada tingkat log / keparahan).

Mari kita coba tanyakan hal itu terlebih dahulu ke Code Assist. Coba perintah berikut:

How do I use the google-cloud-logging package in Python?

Anda akan mendapatkan respons yang memberikan beberapa informasi tentangnya, seperti yang diberikan di bawah:

Mari tambahkan pernyataan logging ke fungsi yang menelusuri sesi menurut kategori.

Pertama, tambahkan paket Python google-cloud-logging ke file requirements.txt.

Berikutnya adalah cuplikan kode yang menunjukkan cara kami mengintegrasikan kode untuk menerapkan logging:

...
from google.cloud import logging
...
app = Flask(__name__)

# Create a logger
logger = logging.Client().logger('my-log')

@app.route('/sessions/categories/<category>', methods=['GET'])
def get_sessions_by_category(category):
   logger.log_text(f"Fetching sessions with category {category}")
   sessions_by_category = [session for session in sessions.sessions if category in session['categories']]
   logger.log_text(f'Found {len(sessions_by_category)} sessions with category {category}')
   return jsonify(sessions_by_category)

# # Other App Routes

Deploy layanan ke Cloud Run lagi menggunakan perintah yang sama seperti di bagian sebelumnya, dan setelah di-deploy, jalankan beberapa panggilan ke endpoint /sessions/categories/<category>.

Buka Cloud Console → Logs Explorer

...dan Anda akan dapat memfilter pernyataan logging ini seperti yang ditunjukkan di bawah:

Anda dapat mengklik pernyataan log mana pun, meluaskannya, lalu mengklik Explain this log entry, yang akan menggunakan Gemini untuk menjelaskan entri log. Perhatikan bahwa jika Anda belum mengaktifkan Gemini untuk Google Cloud, Anda akan diminta untuk mengaktifkan Cloud AI Companion API. Lanjutkan dan lakukan seperti yang diinstruksikan.

Contoh respons diberikan di bawah:

16. Selamat

Selamat, Anda telah berhasil membangun aplikasi dari awal dan menggunakan Gemini Code Assist di berbagai aspek SDLC, termasuk desain, build, pengujian, dan deployment.

Apa selanjutnya?

Lihat beberapa codelab ini...

• Tur Duet AI untuk Developer
• Menggunakan Duet AI di Seluruh Siklus Proses Pengembangan Software
• Memberikan Gaya dengan Duet AI untuk Developer

Dokumen referensi

• Dokumentasi Gemini Code Assist
• Menulis perintah yang lebih baik untuk Gemini di Google Cloud