Tingkatkan alur kerja pengembangan Anda dengan Gemini Code Assist

1. Pengantar

Dalam codelab ini, Anda akan melihat bagaimana Gemini Code Assist dapat mendukung Anda di seluruh tahapan utama Software Development Life Cycle (SDLC) seperti mendesain, membangun, menguji, dan men-deploy. Kami akan merancang dan mengembangkan seluruh aplikasi dan men-deploy-nya di Google Cloud.

Kami akan membangun API dan aplikasi untuk melakukan penelusuran di seluruh sesi dalam sebuah acara teknis. Setiap sesi akan memiliki sebuah 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 Python Flask untuk spesifikasi OpenAPI
• Cara menggunakan Gemini Code Assist untuk membuat front end web untuk Aplikasi Python Flask
• Cara menggunakan Gemini Code Assist untuk mendapatkan bantuan terkait cara men-deploy aplikasi ke Google Cloud Run
• Gunakan fitur Gemini Code Assist seperti Penjelasan Kode, pembuatan Kasus Pengujian, saat membangun dan menguji aplikasi

Yang akan 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.

2. Menyiapkan Gemini Code Assist

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

Aktifkan Gemini Code Assist di Cloud Shell IDE

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

1. Buka ide.cloud.google.com. Mungkin perlu waktu beberapa saat sampai IDE muncul, jadi harap bersabar dan terima semua pilihan default penyiapan. Jika Anda melihat beberapa petunjuk tentang cara menyiapkan 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 sudut kanan bawah seperti yang ditunjukkan dan pilih untuk terakhir kalinya project Google Cloud yang benar. Jika Anda diminta untuk mengaktifkan Cloud AI Companion API, harap 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 telah 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. Alat ini juga tersedia di Google Cloud Workstation. Codelab ini berfokus pada Cloud Shell IDE sebagai cara agar semua orang menggunakan lingkungan yang sama, tetapi jangan ragu untuk mencoba penyiapan favorit Anda dan melihat link ini untuk detail selengkapnya.

3. Menyiapkan Firestore

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

Kita perlu membuat koleksi bernama sessions di database Firestore default. 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. Tindakan ini akan menyimpan daftar contoh dokumen sesi. Setiap dokumen akan memiliki atribut berikut:

1. title: string
2. kategori: array string
3. speaker: array string
4. duration: string
5. ringkasan: string

Mari kita isi koleksi ini dengan data sampel dengan menyalin file yang berisi data sampel ke dalam bucket di project Anda sendiri, tempat Anda kemudian dapat mengimpor koleksi tersebut melalui perintah gcloud firestore import.

Inisialisasi Database Firestore

Buka halaman Firestore di Konsol Cloud.

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

• Mode Firestore: Native
• Lokasi: Pilih Jenis lokasi sebagai Region, lalu pilih wilayah yang sesuai untuk aplikasi Anda. Catat lokasi ini karena Anda akan membutuhkannya pada langkah berikutnya untuk lokasi bucket.
• Membuat Database.

Jika Anda sudah memiliki database default, catat lokasi database, karena Anda akan membutuhkannya 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> di perintah di bawah dengan ID Project Google Cloud Anda. Ganti <BUCKET_LOCATION> dengan nama wilayah yang sesuai dengan Area Geografis database Firestore default Anda (seperti yang disebutkan di langkah sebelumnya), misalnya 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 disiapkan ke dalam bucket ini, sebelum dapat mengimpornya ke 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 mengimpor data ke database Firebase (default) yang telah dibuat.

3. Gunakan perintah gcloud yang diberikan di bawah ini:

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

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

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

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

4. Membuat Template Aplikasi

Kita akan membuat aplikasi contoh (aplikasi Python Flask) yang akan digunakan di seluruh codelab. Aplikasi ini akan melakukan penelusuran di seluruh sesi yang ditawarkan dalam 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 Chat Gemini Code Assist yang tersedia di dalam Cloud Shell IDE sebagai bagian dari ekstensi Cloud Code di VS Code. Anda bisa 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 tempat sampah di bagian atas - ini adalah cara Anda untuk mereset konteks 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 mengambil bantuan Gemini Code Assist selama fase Desain. Pada langkah ini, kita akan membuat spesifikasi OpenAPI untuk entity (sesi teknis dalam suatu peristiwa) yang ingin ditelusuri.

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 di seluruh 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 spesifikasinya memiliki hal berikut:

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

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

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

Dengan asumsi bahwa kami baik-baik saja dengan konten yang dihasilkan, kami sekarang dapat menggunakan dokumen spesifikasi ini untuk menghasilkan Aplikasi Python Flask untuknya.

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

Perintah ini akan menyediakan kerangka untuk Aplikasi Python Flask yang didasarkan pada fungsionalitas dan jalur yang telah ditetapkan dalam file spesifikasi OpenAPI.

Ada kemungkinan Gemini Code Assist 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 disediakan harus mirip dengan yang berikut ini:

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

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

Kita ingin 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 untuk melakukannya. Pertama, mari kita soroti/pilih baris:

app.run()

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

Perintah ini akan menampilkan penjelasan mendetail tentang baris tertentu tersebut, contohnya ditampilkan 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 yang disarankan yang dihasilkan akan menjadi sebagai berikut: :

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

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

Menjalankan aplikasi secara lokal

Mari kita jalankan aplikasi secara lokal sekarang untuk memvalidasi persyaratan aplikasi sesuai dengan apa yang telah kita mulai.

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

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

python app.py

Contoh eksekusinya ditampilkan di bawah ini:

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

Anda kini dapat melihat pratinjau API di URL berikut. Kami mengasumsikan bahwa server pengembangan Anda berjalan di port 8080. Jika tidak, harap 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 yang diberikan di bawah untuk memastikan bahwa Anda dapat mengambil data JSON yang terdapat dalam file app.py ini 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 perlu menyediakan spasi di nama kategori, Anda dapat menggunakan %20 sebagai nilai.

8. Pemfaktoran ulang Kode

Daripada membuat app.py berisi data JSON sampel hard code, kita mungkin ingin memisahkan/mengekstraknya ke modul lain, sehingga kita dapat mempertahankan pemisahan yang jelas antara kode dan data. Mari 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?

Ini akan memberi Anda beberapa saran tentang cara melakukannya. Contoh saran yang kami dapatkan dan Anda seharusnya mendapatkan sesuatu yang mirip dengannya, ditampilkan di bawah ini:

Mari kita ikuti langkah-langkah tersebut dan pisahkan data kita menjadi file sessions.py seperti yang disarankan oleh Code Assist.

Buat file baru bernama sessions.py

, yang kontennya merupakan daftar JSON, sesuai dengan data yang dihasilkan tercantum di bawah ini:

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 sekarang jauh lebih disederhanakan dan ditampilkan di bawah ini:

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 mengingat 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 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 kodenya di sessions.py.

Jika Anda memiliki server Flask Development yang berjalan secara lokal, aplikasi Anda mungkin telah ditutup dengan keluhan bahwa modul Python tidak ditemukan.

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

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

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

Anda perlu 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 seharusnya mendapatkan contoh dokumen yang telah kita tambahkan ke koleksi sessions.

Jangan ragu untuk membuat kueri URI lain untuk mengambil sesi tertentu atau semua sesi untuk kategori tertentu seperti yang dijelaskan dalam langkah-langkah sebelumnya.

10. Penjelasan Kode

Sekarang adalah saat yang tepat untuk menggunakan fitur "Explain this" dari Gemini Code Assist untuk memahami kode dengan baik. Buka file mana pun atau pilih cuplikan kode tertentu dan tanyakan kepada Code Assist dengan perintah berikut: Explain this.

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

11. Membuat Aplikasi Web

Setelah membuat API dan mengintegrasikannya dengan koleksi Firestore langsung, mari kita membuat front end berbasis Web untuk aplikasi. Frontend Web kami saat ini akan menggunakan fungsionalitasnya seminimal mungkin, sehingga dapat mencari sesi yang termasuk dalam kategori tertentu. Perlu diingat bahwa kita memiliki jalur API untuk itu, yaitu /sessions/categories/{category} sehingga aplikasi web kita harus memanggilnya dan mengambil hasilnya.

Mari kita bahas lebih jauh. 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. Tindakan ini juga akan meminta Anda menambahkan rute baru ke file app.py, sehingga setiap pengguna yang mengunjungi root atau URL 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 menyimpan ini sebagai index.html tetapi mungkin memiliki pertanyaan tentang di mana file ini harus disimpan (misalnya folder yang mana?). Kami dapat mengajukan pertanyaan lanjutan ke Code Assist.

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

Anda harus mengetahui informasi yang jelas bahwa file tersebut menggunakan framework render_template sehingga 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 ada dan Anda hanya perlu mengganti kontennya dengan file baru yang dibuat di sini. Code Assist juga menyebutkan untuk mengimpor render_template di file app.py Anda.

Lanjutkan dan simpan kode aplikasi Web di file index.html dan jangan lupa untuk menempatkan file tersebut dalam folder templates.

Menjalankan aplikasi secara lokal

Mari kita jalankan aplikasi secara lokal sekarang untuk memvalidasi persyaratan aplikasi sesuai dengan apa yang telah kita mulai.

Pastikan server Flask lokal masih berjalan dan tidak menampilkan error apa pun. Jika terjadi error, tangani error tersebut dan jalankan server.

Setelah aktif dan berjalan, kunjungi URL beranda aplikasi. Anda akan melihat file index.html yang 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 opsional 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 sekarang untuk membuat kasus pengujian unit untuk Jalur API yang berbeda.

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 daftar kode yang berbeda dari yang tercantum di atas dan yang dapat menyebabkan beberapa masalah dalam menjalankan kasus pengujian. Misalnya, kami melihat bahwa dalam beberapa sesi, bagian kode utama berikut terlewatkan:

from app import app

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

if __name__ == '__main__':

`unittest.main()`

Kode di atas diperlukan untuk menjalankan kasus pengujian.

Sebaiknya lihat setiap kasus pengujian, periksa assertEqual dan kondisi lain dalam kode yang dihasilkan untuk memastikan bahwa kasus tersebut akan berfungsi. Karena data berada di luar koleksi Firestore, data tersebut mungkin tidak memiliki akses ke data tersebut dan mungkin menggunakan beberapa data tiruan sebagai akibatnya pengujian mungkin gagal. Jadi, ubah kasus pengujian Anda sesuai kebutuhan atau jadikan beberapa kasus pengujian sebagai komentar 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)

Itu memang benar, karena ID sesi salah pada pengujian ke-3 dan tidak ada kategori bernama category1

.

Jadi, sesuaikan kasus pengujian dengan benar dan lakukan pengujian.

13. Pengembangan Berbasis Pengujian

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

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

Generate a new test case to search for sessions by speaker

Tindakan ini memberi kita implementasi kasus pengujian berikut, yang telah kita sisipkan secara semestinya 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 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 berikut (/sessions/speakers/) dan tidak ada penerapannya di app.py.

Silakan minta Code Assist untuk memberikan implementasi kepada kami. 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 implementasi berikut yang disarankan oleh Code Assist, yang telah kami 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 kita telah 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. Kami membiarkannya sebagai latihan bagi Anda untuk melihat kasus pengujian yang dihasilkan, sedikit menyesuaikannya bergantung pada data yang mungkin Anda miliki di Firestore, dan memiliki metode assert* yang sesuai dalam kasus Python Unit Test.

14. Men-deploy ke Google Cloud Run

Setelah merasakan kualitas pengembangannya, langkah terakhir kita adalah men-deploy aplikasi ini ke Google Cloud Run. Tapi mungkin, untuk tindakan yang bagus, kita harus bertanya pada Code Assist jika ada hal yang lupa. Dengan app.py terbuka, kirimkan perintah berikut :

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

Untunglah Anda menanyakannya, karena kami lupa untuk menonaktifkan penanda proses debug :

Seperti yang telah disebutkan, nonaktifkan proses debug dan lanjutkan untuk meminta bantuan kepada Gemini Code Assist dengan perintah gcloud yang dapat digunakan untuk men-deploy aplikasi ke Cloud Run langsung dari sumber (tanpa harus membangun 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 dari perintah di atas. Satu lagi 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 mungkin juga 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 mungkin juga diminta untuk mengaktifkan Google Cloud API seperti Artifact Registry, Cloud Build, dan Cloud Run, serta izin untuk membuat repositori Artifact Registry. Harap berikan izin.

Proses penerapan akan memakan waktu sekitar 2 menit, jadi harap bersabar.

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

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!

15. (Opsional) Menggunakan Cloud Logging

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

Untuk melakukannya, pertama-tama kita harus menggunakan library Python Cloud Logging yang ada dari Google Cloud dan menggunakannya untuk logging pesan informasi, peringatan, atau error (bergantung pada log / tingkat keparahannya).

Mari kita coba tanyakan 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 ini:

Mari kita tambahkan laporan log ke fungsi yang mencari sesi berdasarkan kategori.

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

Selanjutnya adalah cuplikan kode yang menunjukkan cara kami mengintegrasikan kode untuk mengimplementasikan 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 seharusnya dapat memfilter laporan log seperti yang ditunjukkan di bawah:

Anda dapat mengklik salah satu laporan log, 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. Silakan lakukan sesuai petunjuk.

Contoh respons diberikan di bawah ini:

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 Sepanjang Siklus Proses Pengembangan Software
• Mendapatkan Gaya dengan Duet AI untuk Developer

Dokumen referensi

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