Giới thiệu về kiểm thử bằng Gemini Code Assist

1. Giới thiệu

Trong phòng thí nghiệm này, bạn sẽ sử dụng Gemini Code Assist, một cộng tác viên dựa trên AI trong Google Cloud, để thêm các bài kiểm thử vào ứng dụng web Python hiện có, cũng như tìm và sửa lỗi trong ứng dụng đó trong các bài kiểm thử. Sau đó, bạn sẽ sử dụng Code Assist để tạo chương trình kiểm thử cho chức năng mới và tạo mã để vượt qua các chương trình kiểm thử đó cũng như mở rộng ứng dụng.

Bạn sẽ làm...

  • Bạn sẽ sử dụng Cloud Shell Editor để tải mã xuống cho ứng dụng web hiện có.
  • Bạn sẽ sử dụng tính năng Chat hỗ trợ mã Gemini trong Cloud Shell Editor để đặt những câu hỏi chung về Google Cloud.
  • Bạn sẽ sử dụng tính năng hỗ trợ mã cùng dòng Gemini Code Assist trong Cloud Shell Editor để tạo chương trình kiểm thử cho ứng dụng, chạy chương trình kiểm thử, tìm và khắc phục lỗi, sau đó mở rộng chức năng của ứng dụng.

Kiến thức bạn sẽ học được...

  • Cách sử dụng hỗ trợ mã Gemini cho một số công việc của nhà phát triển như tạo kiểm thử và tạo mã.
  • Cách sử dụng Hỗ trợ mã Gemini để tìm hiểu về Google Cloud.

Bạn cần...

  • Trình duyệt web Chrome
  • Tài khoản Gmail
  • Một dự án trên đám mây đã bật tính năng thanh toán
  • Đã bật Hỗ trợ mã Gemini cho dự án Cloud của bạn

Phòng thí nghiệm này dành cho các nhà phát triển ở mọi cấp độ, kể cả người mới bắt đầu. Mặc dù ứng dụng mẫu bằng ngôn ngữ Python, nhưng bạn không cần phải quen thuộc với việc lập trình Python để hiểu điều gì đang diễn ra. Chúng ta sẽ tập trung vào việc làm quen với các chức năng của Hỗ trợ mã Gemini dành cho nhà phát triển.

2. Thiết lập

Bạn phải có một Dự án trên đám mây đã bật tính năng thanh toán để sử dụng cho phòng thí nghiệm này. Bây giờ, chúng tôi sẽ bật API Gemini trong dự án Google Cloud của mình. Hãy làm theo các bước được nêu dưới đây:

  1. Truy cập https://console.cloud.google.com và đảm bảo rằng bạn đã chọn Dự án Google Cloud mà bạn định hợp tác trong phòng thí nghiệm này. Nhấp vào biểu tượng Gemini mà bạn thấy ở trên cùng bên phải.

GeminiBanner.png

  1. Cửa sổ bảng điều khiển Gemini cho Cloud sẽ mở ra ở bên phải bảng điều khiển. Nhấp vào nút Enable (Bật) nếu được hiển thị bên dưới. Nếu không thấy nút Enable (Bật) mà thay vào đó là giao diện Chat, tức là bạn đã bật Gemini cho Cloud cho dự án và bạn có thể trực tiếp chuyển sang bước tiếp theo.

GeminiApiEnable.png

  1. Sau khi tính năng này được bật, bạn có thể kiểm tra Gemini bằng cách hỏi một hoặc hai truy vấn. Một số truy vấn mẫu sẽ xuất hiện, nhưng bạn có thể thử những câu như Cloud Run là gì?

GeminiChatWindow.png

Mã hỗ trợ sẽ phản hồi bằng câu trả lời cho câu hỏi của bạn. Bạn có thể nhấp vào biểu tượng f68286b2b2ea5c0a.png ở góc trên cùng bên phải để đóng cửa sổ trò chuyện Hỗ trợ mã.

Bật Gemini trong Cloud Shell Editor

Gemini Code Assist có sẵn và hoạt động tương tự như trong một số IDE phổ biến. Trong lớp học lập trình này, bạn sẽ sử dụng Google Cloud Shell Editor. Công cụ này chạy hoàn toàn trên trình duyệt web của bạn. Bạn cần bật và định cấu hình Gemini trong Cloud Shell Editor và thực hiện các bước như sau:

  1. Khởi chạy Cloud Shell qua biểu tượng hiển thị bên dưới. Quá trình khởi động phiên bản Cloud Shell có thể mất một vài phút.

72dc3df7b007fcde.png

  1. Nhấp vào nút Editor (Trình chỉnh sửa) hoặc Open Editor (Mở trình chỉnh sửa) (nếu có thể) và đợi đến khi Cloud Shell Editor xuất hiện. Nếu bạn thấy nút Dùng thử trình chỉnh sửa mới, hãy nhấp vào nút đó.

CloudShellEditor.png

  1. Nhấp vào nút Cloud Code – Đăng nhập trong thanh trạng thái ở dưới cùng như minh hoạ. Ủy quyền trình bổ trợ theo hướng dẫn. Nếu bạn thấy thông báo "Cloud Code – no project" (Mã trên đám mây – không có dự án) trong thanh trạng thái, hãy chọn mục đó, sau đó chọn dự án cụ thể trên Google Cloud trong danh sách dự án bạn định hợp tác.

CloudCodeSignIn.png

  1. Nếu không thấy biểu tượng Gemini trong thanh trạng thái ở dưới cùng bên phải, bạn cần bật biểu tượng này trong Cloud Code. Trước khi bạn thực hiện việc đó, hãy đảm bảo rằng Gemini (trước đây gọi là Duet AI cho nhà phát triển) đã được bật trong IDE bằng cách chuyển đến Cloud Code Extension → Settings (Tiện ích mã đám mây → Cài đặt), sau đó nhập văn bản Duet AI: Enable như minh hoạ bên dưới. Đảm bảo rằng bạn đã chọn hộp đánh dấu. Bạn nên tải lại IDE. Thao tác này sẽ bật Gemini trong Cloud Code và thanh trạng thái Gemini sẽ xuất hiện trong IDE của bạn.

EnableDuetAiSetting.png

  1. Nhấp vào nút Gemini ở góc dưới cùng bên phải như hình minh hoạ rồi chọn đúng dự án Google Cloud mà chúng ta đã bật Cloud AI Companion API.

GeminiSelectGoogleCloudProject.png

  1. Sau khi chọn dự án Google Cloud của mình, hãy đảm bảo rằng bạn có thể thấy điều đó trong thông báo trạng thái Cloud Code trên thanh trạng thái, đồng thời bạn cũng đã bật Gemini ở bên phải, trong thanh trạng thái như hình dưới đây:

GeminiEnabledStatusBar.png

Gemini Code Assist đã sẵn sàng để bạn sử dụng!

3. Tải xuống và kiểm tra ứng dụng

Trong cửa sổ dòng lệnh, hãy chạy lệnh để sao chép kho lưu trữ với mã khởi động, sau đó thay đổi sang thư mục mới (nếu cửa sổ dòng lệnh không còn mở, hãy nhấp vào nút Terminal hoặc Open Terminal để khôi phục nó):

git clone https://github.com/GoogleCloudPlatform/testing-with-duet-ai-codelab.git
cd testing-with-duet-ai-codelab

Mở main.py trong trình chỉnh sửa, sau đó mở cửa sổ Gemini Chat bằng cách nhấp vào biểu tượng trò chuyện Gemini ở bên trái trình chỉnh sửa. Cửa sổ Gemini Chat này nằm trong IDE và có sẵn mã trong IDE làm ngữ cảnh để thảo luận. Nhập câu lệnh Giải thích điều này và xem câu trả lời:

GeminiChatExplainThis.png

Bạn có thể cuộn cửa sổ trò chuyện này để xem toàn bộ câu trả lời. Phần giải thích cho biết chúng ta có thể chạy chương trình này trên máy bằng lệnh python3 main.py trong cửa sổ dòng lệnh.

4. Chạy cục bộ

Thay đổi thư mục kho lưu trữ bằng cd ~/testing-with-duet-ai-codelab nếu cần và nhập lệnh python3 main.py vào cửa sổ dòng lệnh:

3bf558e9cea15375.pngs

Nhấp vào liên kết http://127.0.0.1:8080 để mở tab trình duyệt mới và truy cập vào trang chủ của ứng dụng:

fb06f382a4c03e4c.png

Ứng dụng đang chạy "cục bộ". Trên thực tế, Trình chỉnh sửa Cloud Shell đã làm rất tốt trong trường hợp này. Ứng dụng đang chạy trong Cloud Shell, chứ không phải trên máy tính của bạn. Khi bạn nhấp vào liên kết, nó mở một tab không phải đến địa chỉ cục bộ thực sự http://127.0.0.1:8080, mà tới một máy chủ proxy được thiết lập cho mục đích này bởi Cloud Shell. Hiệu quả giống như khi bạn thực sự chạy cục bộ.

Thử ngay nha! Nhập 25 rồi nhấn vào Convert!

e1b9d5832f6d0058.png

Đúng vậy, số 25 là XXV theo chữ số La Mã! Bạn phải hoàn tất tại đây.

Vui lòng kiểm tra thêm một vài số. 25 là phù hợp, còn 24 thì sao?

37982e385e17baac.png.

Có lẽ chúng ta đã hơi vội vàng để nghĩ rằng mọi thứ đều ổn. Có phải XXIIII là sự chuyển đổi chính xác cho 24 không? Không phải là ngày XXIV sao?

Một trường hợp có thể được đưa ra rằng XXIIII là đúng, nhưng đó không hẳn là điều mọi người thường mong đợi. Vì thông tin này không thực sự sai (lưu ý rằng nhiều đồng hồ hiển thị số 4 là Số La Mã IIII), hãy để lại vấn đề đó để cải tiến trong tương lai.

Còn việc thử số âm thì sao? Không? Không có cách nào để biểu diễn các số đó bằng Chữ số La Mã. Người dùng sẽ không nhận được gì và có vẻ như đã xảy ra lỗi cần phải xử lý.

Việc kiểm thử có thể giúp chúng ta phát hiện và loại bỏ lỗi, còn Gemini Code Assist có thể giúp chúng ta viết và sử dụng các bài kiểm thử.

5. Thêm chương trình kiểm thử

Quay lại cửa sổ Gemini Chat và hỏi

How can I test the number_to_roman function?

Đọc qua phản hồi, trong đó bao gồm nội dung thảo luận về mô-đun unittest và mô-đun pytest.

Có thể bạn sẽ muốn yêu cầu Gemini Code Assist thực sự viết các chương trình kiểm thử này cho bạn. Mở calendar.py, nơi mã chuyển đổi thực tế nằm, trong trình chỉnh sửa, quay lại cửa sổ Trò chuyện Gemini rồi hỏi lại

How can I test the number_to_roman function?

Phản hồi hiện cụ thể hơn, thậm chí bao gồm cả mô-đun unittest mà bạn có thể sao chép hoặc chèn vào tệp mới:

import unittest
import calendar

class NumberToRomanTest(unittest.TestCase):

    def test_convert_1(self):
        self.assertEqual(calendar.number_to_roman(1), "I")

    def test_convert_4(self):
        self.assertEqual(calendar.number_to_roman(4), "IV")

    def test_convert_9(self):
        self.assertEqual(calendar.number_to_roman(9), "IX")

    def test_convert_40(self):
        self.assertEqual(calendar.number_to_roman(40), "XL")

    def test_convert_90(self):
        self.assertEqual(calendar.number_to_roman(90), "XC")

    def test_convert_400(self):
        self.assertEqual(calendar.number_to_roman(400), "CD")

    def test_convert_900(self):
        self.assertEqual(calendar.number_to_roman(900), "CM")

    def test_convert_1990(self):
        self.assertEqual(calendar.number_to_roman(1990), "MCMXC")

    def test_convert_2023(self):
        self.assertEqual(calendar.number_to_roman(2023), "MMXXIII")

Bạn có thể thấy mã khác trong ví dụ trên. Các mô hình cơ bản của Gemini Code Assist được cập nhật tuỳ từng thời điểm, vì vậy không phải lúc nào câu trả lời cũng giống nhau. Nếu thấy một tập hợp mã khác, bạn hiện có thể chọn có tiếp tục với các mẫu trong lớp học lập trình này hay không bằng cách sao chép mã hiển thị ở đây, hoặc bạn có thể dùng thử câu trả lời thay thế cho tính năng Hỗ trợ mã Gemini hiện được cung cấp cho bạn. Nếu có thời gian, bạn thậm chí có thể thử cả hai cách. Gemini Code Assist là một trợ lý lập trình để bạn sử dụng khi thấy phù hợp.

Bạn có thể nhấp vào mũi tên hai đầu ở góc trên bên phải của cửa sổ Gemini Chat để tạo một tệp mới chứa mã kiểm thử đơn vị hoặc sử dụng IDE để tạo một tệp mới rồi dán đoạn mã hiển thị trong phòng thí nghiệm này. Nhấn CTRL-S hoặc CMD-S trong cửa sổ đó để lưu và gọi tệp đã lưu calendar-unittest.py.

Quay lại cửa sổ dòng lệnh rồi nhấn CTRL-C để dừng máy chủ web mà bạn đã chạy trước đó và nhận thông báo shell. Nhập lệnh

python3 calendar-unittest.py

để chạy các thử nghiệm mới.

Không có kết quả nào. Đó không phải là điều bạn mong đợi. Có phải mọi thứ đều suôn sẻ không? Bạn muốn biết chắc chắn điều đó. Hãy xem lại câu trả lời trong Hỗ trợ mã Gemini có bao gồm mã kiểm thử. Bên dưới mã là thông tin khác về cách chạy trường hợp kiểm thử:

run-unittest.png

Thử chạy lệnh được đề xuất:

python -m unittest discover

Bạn có thể gặp sự cố nếu máy của bạn không đặt bí danh lệnh python3 thành python. Trong trường hợp đó, hãy chạy:

python3 -m unittest discover

Lệnh này sẽ chạy nhưng trả về Ran 0 tests in 0.000s. Mô-đun này có nhiều bài kiểm thử. Chuyện gì đang xảy ra?

Đó là từ cuối cùng trong lệnh discover. Nó đến từ đâu? Rõ ràng, Gemini Code Assist dự kiến mã kiểm thử được lưu trong một tệp có tên discover hoặc discover.py, nhưng không chỉ định đó là những gì bạn nên làm. Vì bạn thực sự đã lưu tệp trong calendar-unittest.py, hãy thử chạy lệnh:

python3 -m unittest calendar-unittest

Bây giờ, bạn sẽ thấy rất nhiều kết quả, bắt đầu bằng một số nội dung như sau:

$ python3 -m unittest calendar-unittest
.F.FFFFFF
======================================================================
FAIL: test_convert_1990 (calendar-unittest.NumberToRomanTest)
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/home/charles_engelke/testing-with-duet-ai-codelab/calendar-unittest.py", line 28, in test_convert_1990
    self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
AssertionError: 'MDCCCCLXXXX' != 'MCMXC'
- MDCCCCLXXXX
+ MCMXC

Dòng đầu tiên cho thấy một dấu chấm cho mỗi lượt kiểm thử thành công và một F cho mỗi lượt kiểm thử không đạt. Hầu hết kiểm thử đều không thành công! Sau đó, ngăn này liệt kê riêng từng lượt kiểm thử không đạt, cho thấy kết quả dự kiến và kết quả thực tế. Chưa rõ thứ tự thực hiện những thử nghiệm này. Tên kết quả kiểm thử được sắp xếp theo thứ tự bảng chữ cái, chứ không phải thứ tự các bài kiểm thử xuất hiện trong tệp. Vì vậy, test_convert_1 đã chạy trước, sau đó là test_convert_1990, sau đó là test_convert_2023, v.v. Các trường hợp kiểm thử cho 12023 là những trường hợp duy nhất đạt.

Trong lần đầu dùng thử mã này, bạn nhận thấy mã này đã chuyển đổi 24 thành XXIIII. Điều này không sai chính xác nhưng không phải là dạng phổ biến mà IIII được chuyển đổi thành IV. Tất cả lượt kiểm thử không đạt đều là cho những trường hợp tương tự. Khi sự cố này được ghi nhận lần đầu, phòng thí nghiệm cho biết: "Do thông tin không thực sự sai (lưu ý rằng nhiều đồng hồ hiển thị 4 là Chữ số La Mã IIII), hãy để vấn đề đó tiếp tục cải tiến trong tương lai."

Bạn có thể thay đổi các trường hợp kiểm thử thành mong đợi và chấp nhận câu trả lời "không thực sự sai" mà mã được đưa ra, hoặc chấp nhận rằng đã đến lúc thực hiện "tính năng nâng cao trong tương lai". Vì vậy, bước tiếp theo của bạn là sửa mã với sự trợ giúp của Gemini Code Assist, để đưa ra các câu trả lời hợp lý hơn mà bài kiểm thử mong đợi.

6. Cải tiến mã

Hãy nhớ rằng các câu trả lời như XXIIII cho 24, thay vì XXIV phổ biến hơn, được coi là "không thực sự sai" và bị tạm ngưng để nâng cao trong tương lai. Đó chính là tương lai. Những câu trả lời "không sai thật sự" đó vẫn gây khó chịu.

Quy tắc đầu tiên cho các chữ số lặp lại trong Chữ số La Mã là: bất cứ khi nào bạn có bốn chữ số giống nhau trong một hàng, chúng sẽ được thay thế bằng một trong các chữ số theo sau là chữ số cao hơn tiếp theo. Vì vậy, XXIIII cần được thay thế bằng XXIV. Tương tự, XXXX cần được thay đổi thành XLCCCC sẽ trở thành CD.

Yêu cầu hỗ trợ mã Gemini cách thay đổi giá trị của biến roman theo cách này ngay trước khi biến được trả về bằng number_to_roman:

If the final value of roman has IIII in it, that should be replaced by IV. Similarly XXXX should be replaced by XL, and CCCC should become CD. How can I make those changes?

Đề xuất là thêm một số mã vào cuối:

6437c3fa2c5fabd1.pngs

Sao chép/dán hoặc nhập các dòng đó vào trình chỉnh sửa rồi xem điều gì sẽ xảy ra:

dcefa568cab82fb7.png

Hỗ trợ mã Gemini đã thêm nhiều dòng hơn để xử lý các trường hợp mà bạn có thể gặp phải sau khi thực hiện nhóm thay thế đầu tiên. Ví dụ: 19 sẽ được chuyển đổi thành XVIIII, sau đó thành XVIV và cuối cùng là XIX chính xác.

Nếu Gemini Code Assist đưa ra những đề xuất có vẻ hữu ích, hãy nhấn phím Tab để chấp nhận đề xuất, lưu tệp và chạy lại máy chủ web. Nếu không, hãy thêm các dòng hiển thị trong ví dụ ở đây theo cách thủ công rồi lưu tệp. Hãy thử một phép chuyển đổi khó: năm 1999:

a206999587fdc9.png

Chính xác!

Hãy chạy lại quy trình kiểm thử ngay. Tất cả đều vượt qua!

Ứng dụng web có vẻ đã sẵn sàng để đưa vào phát hành chính thức.

7. Triển khai cho Cloud Run

Cloud Run sẽ chạy một ứng dụng trong vùng chứa trên Internet cho bạn. Đối với các ứng dụng được viết bằng các khung phổ biến, chẳng hạn như Flash, lệnh gcloud run deploy thậm chí sẽ tạo vùng chứa đó cho bạn trước khi triển khai. Chạy lệnh:

gcloud run deploy

Trong thiết bị đầu cuối. Khi được hỏi vị trí của mã nguồn, nhấn Enter để chấp nhận vị trí chính xác mà mã nguồn đó đề xuất. Tương tự, khi được yêu cầu cung cấp tên dịch vụ, hãy nhấn Enter để chấp nhận đề xuất.

Lệnh này có thể không thực hiện được vì gcloud không thể xác định dự án cần sử dụng. Trong trường hợp đó, hãy chạy lệnh:

gcloud config set core/project <project-id>

trong đó được thay thế bằng mã nhận dạng của dự án (có thể giống với tên). Sau đó, chạy lại lệnh gcloud run deploy.

  • Lệnh này sẽ nhắc bạn rằng một số API nhất định cần thiết và chưa được bật. Nhập y để bật các mục này cho bạn.
  • Khi được yêu cầu chọn một khu vực, hãy chọn một khu vực thuận tiện với bạn. Việc nhập số tương ứng với us-central1 là lựa chọn an toàn.
  • Khi được yêu cầu, hãy nhập Y để tiếp tục.
  • Bạn sẽ muốn cho phép các lệnh gọi unauthenticated của dịch vụ Cloud Run này. Tuỳ chọn xác thực mà Cloud Run sử dụng phù hợp với các chương trình gọi dịch vụ. Vì đây là một trang web nên bạn sẽ không sử dụng phương thức xác thực.

Google Cloud sẽ tạo vùng chứa, triển khai, định tuyến lưu lượng truy cập đến vùng chứa đó và thiết lập các chính sách truy cập, sau đó hiển thị cho bạn đường liên kết đến trang chủ:

94ba7d8d63a44afd.png.

Bạn có thể truy cập đường liên kết đó và truy cập vào đơn đăng ký của mình.

a2e51666dfd33a9f.png

Nhập một số rồi nhấn Enter.

5021535ac991a95c.png.

Cái gì!?!

Máy của bạn đã hoạt động! Tại sao việc này chưa hoàn tất?

Tìm hiểu ngay. Hãy hỏi Trợ lý mã Gemini,

Why am I getting an internal server error on cloud run?

4b24321251d6eddf.png.

Rõ ràng là Gemini Code Assist có thể đọc tệp nhật ký có nội dung tương tự. Hãy hỏi Gemini Code Assist cách bạn có thể tự xem xét nhật ký:

92d1855be73ef1d.png.

Hãy tiếp tục và thực hiện việc đó. Tìm các dòng có chỉ báo lỗi !! màu đỏ như dưới đây:

9bed4f9ed82de21c.png.

Tiếp theo là nhiều dòng chi tiết về ngăn xếp lệnh gọi đến đây, nhưng sau đó sẽ có:

47fc93be845f4e3f.png.

Khi xem tệp calendar.py, bạn sẽ thấy hàm number_to_roman ngay tại đó! Điều đó là đúng vì nó hoạt động trên máy của bạn. Cloud Run có thể thay đổi gì?

Câu trả lời này rất khó nhằn. Python3 có một mô-đun tiêu chuẩn có tên là calendar, cũng giống như tệp calendar.py mà hàm number_to_roman được xác định trong đó. Trên máy cục bộ của bạn, khi Python tìm một mô-đun có tên là calendar, mô-đun này đã tìm kiếm trong thư mục ứng dụng của bạn trước tiên. Rõ ràng là Python trên Cloud Run tìm các mô-đun tiêu chuẩn trước rồi nhập các mô-đun đó nhưng không tìm thấy hàm number_to_roman.

Những kiểu khác biệt này trong môi trường luôn có thể xảy ra. May mắn là khi một ứng dụng được chứa trong vùng chứa, ứng dụng sẽ mang theo môi trường bên trong, vì vậy, bất kể bạn chạy ứng dụng nào, bạn đều có thể mong đợi hành vi tương tự. Nếu chạy cùng một ứng dụng trong vùng chứa cục bộ với Cloud Run, bạn cũng sẽ gặp vấn đề tương tự.

Khắc phục sự cố này. Bạn cần thay đổi tên của mô-đun lịch cục bộ thành tên không phải là tên mô-đun chuẩn. Đổi tên tệp calendar.py thành my_calendar.py, sau đó thay đổi các dòng import calendar trong main.pycalendar-unittest.py thành import my_calendar. Cuối cùng, hãy thay đổi dòng

roman = calendar.number_to_roman(number)

tới

roman = my_calendar.number_to_roman(number)

Hãy dùng thử trên máy, chạy kiểm thử rồi triển khai lại:

gcloud run deploy

Giờ đây, công cụ này đã hoạt động:

ed288801c6825eb1.png

Bạn có thể chia sẻ URL này. Những người cần đến công cụ chuyển đổi Chữ số La Mã đều có thể sử dụng URL của bạn.

8. Không bắt buộc: Làm cho giao diện đẹp hơn

Ứng dụng của bạn đang chạy tốt và mọi người trên web đều có thể truy cập được. Nhưng nhìn hơi đơn giản. Trước khi bạn nói cho mọi người biết, tại sao bạn không yêu cầu Gemini Code Assist cải thiện giao diện của nó?

Mở tệp templates/index.html. Trong cửa sổ trò chuyện Gemini, hãy hỏi:

Make this index.html file use material design.

Phản hồi là để bổ sung vào tệp hiện tại, dẫn đến kết quả tương tự như sau:

<!DOCTYPE html>
<html>
<head>
    <title>Roman Numerals</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">   
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>     
</head>
<body>
    <h1 class="mdl-typography--title">Roman Numerals</h1>
    <form action="/convert" method="post">
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="number" name="number" required />
            <label class="mdl-textfield__label" for="number">Enter a number:</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
            Convert!
          </button>
    </form>
</body>
</html>

Sử dụng biểu tượng để sao chép mã đề xuất và dán lên nội dung hiện có của index.html. Trong dòng lệnh, hãy chạy python3 main.py rồi nhấp vào đường liên kết để mở cửa sổ xem trước. Trang giờ đây đã bớt đơn giản hơn một chút:

295643ec03fcaafc.png.

Bạn có thể lặp lại điều này với tệp convert.html nếu muốn.

Gemini Code Assist hiểu rõ về CSS và bạn có thể nhờ công cụ này giúp bạn tạo kiểu cho các trang ứng dụng theo nhiều cách. Đây chỉ là bước khởi đầu.

Vì bạn muốn chia sẻ ứng dụng này, đừng quên triển khai lại ứng dụng lên Cloud Run:

gcloud run deploy

Bạn có thể chuyển URL đó cho những người cần chuyển đổi sang Chữ số La Mã.

9. Xin chúc mừng!

Xin chúc mừng! Bạn đã làm việc thành công với Gemini Code Assist để thêm kiểm thử vào ứng dụng, sửa lỗi trong ứng dụng và thêm chức năng nâng cao.

Sau khi dùng xong ứng dụng mà bạn tạo, bạn có thể xoá ứng dụng đó khỏi trang tổng quan của Cloud Console để tránh phát sinh các khoản phí có thể phát sinh trong tương lai.

Tài liệu tham khảo...