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 một ứng dụng web Python hiện có, đồng thời tìm và khắc phục các lỗi trong ứng dụng đó do các bài kiểm thử phát hiện. Sau đó, bạn sẽ dùng Trợ lý lập trình để tạo các bài kiểm thử cho chức năng mới và tạo mã để vượt qua các bài kiểm thử đó cũng như mở rộng ứng dụng.

Những việc bạn sẽ làm...

  • Bạn sẽ sử dụng Cloud Shell Editor để tải mã xuống cho một ứng dụng web hiện có.
  • Bạn sẽ sử dụng Gemini Code Assist Chat trong Trình chỉnh sửa Cloud Shell để đặt câu hỏi chung về Google Cloud.
  • Bạn sẽ sử dụng tính năng trợ giúp mã nội tuyến của Gemini Code Assist trong Cloud Shell Editor để tạo các bài kiểm thử cho ứng dụng, chạy các bài 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 Gemini Code Assist cho một số tác vụ của nhà phát triển, chẳng hạn như tạo kiểm thử và tạo mã.
  • Cách sử dụng Gemini Code Assist để tìm hiểu về Google Cloud.

Những thứ 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
  • Gemini Code Assist được bật cho Dự án trên đám mây

Lớp học này dành cho 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 này sử dụ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 bằng Python để hiểu những gì đang diễn ra. Chúng ta sẽ tập trung vào việc làm quen với các tính năng của Gemini Code Assist 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 bài tập thực hành này. Giờ đây, chúng ta sẽ bật Gemini API trong Dự án Google Cloud. Hãy làm theo các bước dưới đây:

  1. Truy cập vào https://console.cloud.google.com và đảm bảo rằng bạn đã chọn Dự án trên Google Cloud mà bạn dự định sử dụng cho phòng thí nghiệm này. Nhấp vào biểu tượng Gemini ở 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 Bật nếu nút này xuất hiện bên dưới. Nếu không thấy nút Bật mà thấy giao diện Chat, tức là bạn đã bật Gemini cho Cloud cho dự án này và có thể chuyển thẳng sang bước tiếp theo.

GeminiApiEnable.png

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

GeminiChatWindow.png

Code Assist sẽ trả lời 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 của Trợ lý lập trình.

Bật Gemini trong Cloud Shell Editor

Gemini Code Assist có sẵn và hoạt động tương tự 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. Trình chỉnh sửa này chạy hoàn toàn trong 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. Các bước thực hiện được nêu dưới đây:

  1. Khởi chạy Cloud Shell thông qua biểu tượng bên dưới. Có thể mất một hoặc hai phút để khởi động phiên bản Cloud Shell.

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) (tuỳ trường hợp) rồi đợi cho đến khi Trình chỉnh sửa Cloud Shell 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 – Sign in (Cloud Code – Đăng nhập) trong thanh trạng thái dưới cùng như minh hoạ. Uỷ quyền cho trình bổ trợ theo hướng dẫn. Nếu bạn thấy "Cloud Code – no project" (Cloud Code – không có dự án) trong thanh trạng thái, hãy chọn mục đó rồi chọn Dự án cụ thể trên Google Cloud trong danh sách các dự án mà bạn dự định làm việ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 thực hiện, hãy đảm bảo rằng Gemini (trước đây 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 Cloud Code → Cài đặt), rồi nhập văn bản Duet AI: Enable (Duet AI: Bật) như minh hoạ bên dưới. Đảm bảo 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ư minh hoạ rồi chọn dự án trên đám mây của Google Cloud phù hợp mà chúng ta đã bật Cloud AI Companion API.

GeminiSelectGoogleCloudProject.png

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

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ữ bằng mã khởi đầu, sau đó chuyển 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 (Dòng lệnh) hoặc Open Terminal (Mở dòng lệnh) để khôi phục):

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ổ cuộc trò chuyện với Gemini bằng cách nhấp vào biểu tượng Gemini Chat ở bên trái trình chỉnh sửa. Cửa sổ Gemini Chat này nằm trong IDE và có mã trong IDE dưới dạng bối cảnh cho cuộc thảo luận. Nhập câu lệnh Giải thích điều này rồi xem câu trả lời:

GeminiChatExplainThis.png

Bạn có thể kéo 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 cục bộ bằng lệnh python3 main.py trong cửa sổ dòng lệnh.

4. Chạy cục bộ

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

3bf558e9cea15375.png

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

fb06f382a4c03e4c.png

Ứng dụng đang chạy "cục bộ". Thực ra, Cloud Shell Editor đã làm một chút phép màu ở đâ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 đường liên kết, đường liên kết này sẽ mở một thẻ không phải đến địa chỉ cục bộ thực tế http://127.0.0.1:8080, mà đến một máy chủ proxy do Cloud Shell thiết lập chỉ cho mục đích này. Hiệu ứng này giống như khi bạn thực sự chạy ứng dụng trên thiết bị của mình.

Thử ngay nha! Nhập 25 rồi nhấn Chuyển đổi!

e1b9d5832f6d0058.png

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

Có thể bạn nên kiểm tra thêm một vài số khác. 25 hoạt động, còn 24 thì sao?

37982e385e17baac.png

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

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

Bạn có muốn thử số âm không? Không? Không có cách nào để biểu thị những số đó bằng chữ số La Mã. Không có thông tin nào được trả về cho người dùng, có vẻ như đây là một lỗi cần được giải quyết.

Kiểm thử có thể giúp tìm và loại bỏ lỗi, đồng thời Gemini Code Assist có thể giúp chúng ta viết và sử dụng các kiểm thử.

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

Quay lại cửa sổ Gemini Chat rồi hỏi

How can I test the number_to_roman function?

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

Bạn có thể muốn Gemini Code Assist viết các kiểm thử này cho bạn. Mở calendar.py (nơi chứa mã chuyển đổi thực tế) trong trình chỉnh sửa, quay lại cửa sổ Gemini Chat và hỏi lại

How can I test the number_to_roman function?

Giờ đây, câu trả lời cụ thể hơn, thậm chí còn bao gồm một mô-đun kiểm thử đơn vị mà bạn có thể sao chép hoặc chèn vào một 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 với ví dụ ở trên. Các mô hình cơ bản của Gemini Code Assist được cập nhật theo thời gian, vì vậy câu trả lời sẽ không phải lúc nào cũng giống nhau. Nếu thấy một bộ mã khác, bạn có thể chọn tiếp tục với các mẫu được trình bày trong lớp học lập trình này bằng cách sao chép mã được trình bày ở đây, hoặc bạn có thể dùng thử câu trả lời thay thế mà Gemini Code Assist hiện đang 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 theo cách phù hợp.

Nhấp vào mũi tên hai chiều ở góc trên cùng 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 và dán mã xuất hiện trong lớp học này. Nhấn tổ hợp phím CTRL-S hoặc CMD-S trong cửa sổ đó để lưu tệp và gọi tệp đã lưu là calendar-unittest.py.

Quay lại Terminal và nhấn Ctrl-C để dừng máy chủ web mà bạn đã chạy trước đó, sau đó nhận được một dấu nhắc shell. Nhập lệnh

python3 calendar-unittest.py

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

Không có đầu ra. Đó không phải là điều chúng tôi mong đợi. Mọi thứ có diễn ra âm thầm không? Bạn chắc chắn muốn biết điều đó. Xem lại câu trả lời của Gemini Code Assist có chứa mã kiểm thử. Bên dưới mã này có thêm thông tin về cách chạy trường hợp kiểm thử:

run-unittest.png

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

python -m unittest discover

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

python3 -m unittest discover

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

Đó là từ cuối cùng trong lệnh, discover. Thông tin này đến từ đâu? Rõ ràng là Gemini Code Assist dự kiến mã kiểm thử sẽ được lưu trong một tệp có tên là discover hoặc discover.py, nhưng không chỉ định rằng bạn nên làm như vậy. Vì bạn đã 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ả đầu ra, bắt đầu bằng một kết quả 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 biết một dấu chấm cho mỗi lượt kiểm thử đạt và một F cho mỗi lượt kiểm thử không đạt. Hầu hết các kiểm thử đều không thành công! Sau đó, công cụ này sẽ liệt kê từng bài kiểm thử không thành công, cho biết đầu ra dự kiến và đầu ra thực tế. Không rõ các kiểm thử này được chạy theo thứ tự nào. Các thử nghiệm được sắp xếp theo thứ tự bảng chữ cái theo tên thử nghiệm, chứ không phải theo thứ tự các thử nghiệm xuất hiện trong tệp. Vì vậy, test_convert_1 chạy trước, sau đó là test_convert_1990, rồi 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 đã vượt qua.

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

Bạn có thể thay đổi các trường hợp kiểm thử để dự kiến và chấp nhận những câu trả lời "không thực sự sai" mà mã đưa ra, hoặc chấp nhận rằng đã đến lúc cần "cải tiến 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âu trả lời phù hợp hơn mà các bài kiểm thử mong đợi.

6. Nâng cao đoạn mã

Xin lưu ý rằng những phản hồi như XXIIII cho 24, thay vì XXIV phổ biến hơn, được coi là "không thực sự sai" và được hoãn lại để cải tiến trong tương lai. Tương lai đó đã đến. Những câu trả lời "không hẳn là sai" vẫn gây khó chịu.

Quy tắc đầu tiên đối với các chữ số lặp lại trong chữ số La Mã là: bất cứ khi nào bạn có 4 chữ số giống nhau liên tiếp, bạn nên thay thế chúng 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 phải được thay đổi thành XLCCCC phải trở thành CD.

Hãy hỏi Gemini Code Assist 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ởi 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?

Bạn nên thêm một đoạn mã ở cuối:

6437c3fa2c5fabd1.png

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

Gemini Code Assist đã 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 thành XIX chính xác.

Nếu Gemini Code Assist đưa ra những đề xuất hữu ích rõ ràng, hãy nhấn phím Tab để chấp nhận các đề 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 xuất hiện trong ví dụ ở đây theo cách thủ công rồi lưu tệp. Thử một lượt chuyển đổi khó: 1999:

a206999587fdc9.png

Chính xác!

Chạy lại các kiểm thử ngay bây giờ. Tất cả đều vượt qua!

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

7. Triển khai lên 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 hình 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, hãy nhấn Enter để chấp nhận vị trí chính xác mà hệ thống đề xuất. Tương tự, khi được yêu cầu nhập tên dịch vụ, hãy nhấn phím Enter để chấp nhận đề xuất.

Lệnh có thể không thực hiện được vì gcloud không xác định được 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. Mã nhận dạng này có thể giống với tên của dự án. Sau đó, chạy lại lệnh gcloud run deploy.

  • Lệnh này sẽ nhắc bạn rằng cần có một số API nhưng chưa được bật. Nhập y để bật các tính năng này cho bạn.
  • Khi được yêu cầu chọn một vùng, hãy chọn vùng phù hợp với bạn. Nhập số tương ứng với us-central1 là một lựa chọn an toàn.
  • Khi được hỏi, hãy nhập Y để tiếp tục.
  • Bạn sẽ muốn cho phép các lệnh gọi chưa được xác thực của dịch vụ Cloud Run này. Lựa 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 vùng chứa đó, định tuyến lưu lượng truy cập đến vùng chứa đó và đặt chính sách truy cập, sau đó cho bạn thấy đường liên kết đến trang chủ:

94ba7d8d63a44afd.png

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

a2e51666dfd33a9f.png

Nhập một số rồi nhấn Enter, và tada!

5021535ac991a95c.png

Cái gì!?!

Tính năng này hoạt động trên máy của bạn! Tại sao quá trình này chưa hoàn tất?

Tìm hiểu. Hỏi Gemini Code Assist,

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

4b24321251d6eddf.png

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

92d1855be73ef1d.png

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

9bed4f9ed82de21c.png

Sau đó là nhiều dòng thông tin chi tiết về ngăn xếp lệnh gọi nhận được ở đây, nhưng sau đó là:

47fc93be845f4e3f.png

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

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

Những loại khác biệt này trong môi trường luôn có thể xảy ra. Rất may là khi được chứa trong vùng chứa, ứng dụng sẽ mang theo môi trường của chính nó, vì vậy, bất cứ nơi nào bạn kích hoạt ứng dụng, bạn đều có thể kỳ vọng ứng dụng sẽ hoạt động theo cách tương tự. Nếu đã chạy cùng một ứng dụng được chứa trong vùng chứa cục bộ mà Cloud Run có, thì bạn cũng sẽ gặp phải vấn đề tương tự.

Khắc phục sự cố này. Bạn cần đổi tên mô-đun lịch địa phương thành một tên không phải là tên mô-đun tiêu 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 thử cục bộ, chạy các kiểm thử rồi triển khai lại:

gcloud run deploy

Và giờ thì tính năng này đã hoạt động:

ed288801c6825eb1.png

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

8. Không bắt buộc: Chỉnh sửa cho đẹ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 trông nó hơi đơn giản. Trước khi bạn cho mọi người biết về nó, tại sao 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 cuộc trò chuyện với Gemini, hãy hỏi:

Make this index.html file use material design.

Phản hồi là thêm nội dung 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 này để sao chép mã được đề xuất và dán lên nội dung hiện có của index.html. Trong cửa sổ 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 hiện đã bớt đơn điệu hơn:

295643ec03fcaafc.png

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

Gemini Code Assist biết khá nhiều về CSS và có thể giúp bạn tạo kiểu cho các trang ứng dụng theo nhiều cách. Đây mới 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 đó vào Cloud Run:

gcloud run deploy

Bạn có thể chuyển URL này 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 các bài kiểm thử vào một ứng dụng, sửa lỗi trong ứng dụng đó và thêm chức năng nâng cao.

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 bảng điều khiển Cloud để ngừng mọi khoản phí có thể phát sinh trong tương lai.

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