Sử dụng Duet AI trong suốt vòng đời phát triển phần mềm

1. Tổng quan

Mỗi ngày của nhà phát triển trên Google Cloud thường liên quan đến việc sử dụng nhiều sản phẩm và dịch vụ của Google Cloud. Các sản phẩm này cho phép nhà phát triển phát triển, thử nghiệm, triển khai và quản lý các ứng dụng trên đám mây. Nhờ sự hỗ trợ của Duet AI, nhà phát triển có thể làm việc hiệu quả hơn khi sử dụng các sản phẩm của Google Cloud nhờ tính năng trò chuyện tương tác, tính năng hỗ trợ viết mã và các công cụ tích hợp được nhúng của Duet AI.

Phòng thí nghiệm này sử dụng sự hỗ trợ của Duet AI để triển khai "Siêu cửa hàng Cymbal" cửa hàng tạp hoá trên web. Sau đó, bạn sẽ phát triển và triển khai một tính năng mới, đồng thời xây dựng giao diện người dùng và phần phụ trợ của ứng dụng. Bạn cũng sẽ được Duet trợ giúp trong việc viết kiểm thử cho ứng dụng và tìm hiểu cách Duet có thể tích hợp với các công cụ khác của Google Cloud.

Mục tiêu

Bạn sẽ tìm hiểu cách:

  • Cải thiện ứng dụng web hiện có với sự trợ giúp của Duet AI.
  • Triển khai ứng dụng trên Cloud Run.
  • Nhắc Duet AI để giải thích về một lỗi trong ứng dụng và đưa ra cách khắc phục.
  • Phát triển các thử nghiệm cho ứng dụng với sự trợ giúp của Duet AI.
  • Xem nhật ký ứng dụng nhờ sự trợ giúp của Duet AI.

Điều kiện tiên quyết

  • Tài khoản Google Cloud Platform và một dự án đã bật tính năng thanh toán
  • Trải nghiệm cơ bản với Linux

2. Thiết lập

Phần này bao gồm mọi việc bạn cần làm để bắt đầu với phòng thí nghiệm này.

Tạo một dự án

Để dọn dẹp dễ dàng hơn, hãy tạo một dự án Google Cloud mới.

  • Truy cập vào https://console.cloud.google.com.
  • Nhấp vào trình đơn thả xuống bộ chọn dự án
  • Chọn Tạo dự án
  • Đặt một tên dễ nhớ, chẳng hạn như phần giới thiệu về vùng chứa

Bật Duet AI trong dự án trên Google Cloud

Giờ đây, chúng ta sẽ bật Duet AI API trong dự án của mình trên Google Cloud. Hãy làm theo các bước dưới đây:

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

a4d8a7253b056abb.png

  1. Cửa sổ trò chuyện của Duet AI sẽ mở ra ở bên phải bảng điều khiển. Nhấp vào nút Bật như hình dưới đây. Nếu bạn không thấy nút Bật mà chỉ thấy giao diện Chat, thì có khả năng bạn đã bật Duet AI cho dự án và có thể chuyển thẳng sang bước tiếp theo.

58296b10f18b7a37.pngS

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

8953fb4afeeddb1a.png

Duet AI sẽ đưa ra 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 _ ở góc trên cùng bên phải để đóng cửa sổ trò chuyện của Duet AI.

Bật Duet AI trong Cloud Shell IDE

Chúng ta sẽ sử dụng IDE Cloud Shell trong phần còn lại của lớp học lập trình này. Chúng ta cần bật và định cấu hình Duet AI trong môi trường IDE Cloud Shell và thực hiện các bước dưới đây:

  1. Chạy Cloud Shell thông qua biểu tượng bên dưới. Có thể mất vài phút để khởi động thực thể Cloud Shell.

3b59c357d06c5ab1.pngS

  1. Nhấp vào nút Trình chỉnh sửa hoặc Mở trình chỉnh sửa (tuỳ trường hợp) và đợi cho đến khi IDE Cloud Shell xuất hiện. Bạn sẽ sử dụng cụm từ "mới" chứ không phải trình chỉnh sửa cũ.

a54576c01be31a97.png

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

9b77ab79e8c135e6.pngS

  1. Nhấp vào nút Duet AI ở 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.

afa42f64a331ad70.png

  1. Sau khi chọn và cho phép dự án trên Google Cloud, hãy đảm bảo bạn có thể thấy thông tin đó trong thông báo trạng thái Mã đám mây trên thanh trạng thái và bạn cũng đã bật Duet AI ở bên phải trên thanh trạng thái như minh hoạ dưới đây:

11656bd6a7ddfea4.pngs

Duet AI đã sẵn sàng cho bạn sử dụng!

3. Sử dụng Duet AI

Bạn sẽ tạo một ứng dụng web trong phòng thí nghiệm này. Phòng thí nghiệm này chỉ ra rất nhiều nơi để bạn dùng thử Duet. Tuy nhiên, nếu muốn, bạn cũng có thể dành thời gian để hỏi Duet ở bất cứ đâu trong phòng thí nghiệm.

Ví dụ: bạn sẽ dùng Terraform để tạo và triển khai ứng dụng cơ bản. Nếu không biết Terraform là gì, bạn có thể hỏi Duet. Nếu bạn muốn biết mục đích của từng bước, Duet có thể giải thích từng bước. Bạn muốn thực sự mở mã và hỏi về các dòng cụ thể? Hãy dùng thử Duet.

4. Xây dựng ứng dụng web

Phòng thí nghiệm này sử dụng "Siêu thị Cymbal" cửa hàng tạp hoá trên web. Trong các nhiệm vụ tiếp theo của phòng thí nghiệm này, bạn sẽ sử dụng Duet AI để phát triển và triển khai một tính năng mới trong ứng dụng này. Trước khi có thể xem cách Duet AI giúp bạn hiểu mã hiện có, bạn sẽ cần một số mã hiện có để làm việc, vì vậy bạn sẽ xây dựng các thành phần giao diện người dùng và phần phụ trợ của ứng dụng này ngay bây giờ.

Bạn sẽ di chuyển giữa Cloud Shell và Cloud Shell Editor khi thực hiện dự án này. Một cách dễ dàng để thực hiện việc này là sử dụng các nút ở đầu màn hình:

750038c738f1f405.pngS

Định cấu hình môi trường

Thực thi các lệnh trong Cloud Shell.

  1. Đặt mã dự án:
gcloud config set project <Google Cloud Project ID>
  1. Để chạy trình trợ giúp thông tin xác thực Docker, hãy chạy lệnh sau:
gcloud auth configure-docker
  1. Nếu được hỏi bạn có muốn tiếp tục không, hãy nhập Y.
  2. Để tải xuống "Siêu cửa hàng Cymbal" mã xử lý ứng dụng của bạn, hãy chạy lệnh sau từ thư mục gốc của bạn trong Cloud Shell. Công cụ này sẽ nhận mã Cymbal Superstore từ GitHub.
git clone https://github.com/GoogleCloudPlatform/cymbal-superstore
  1. Bạn cần bật một số API để mã này chạy đúng cách. Trong Cloud Shell, hãy nhập lệnh bên dưới:
gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com 
  1. Thay đổi sang thư mục Terraform trong mã mà bạn đã tải xuống:
cd cymbal-superstore/terraform
  1. Vì phòng thí nghiệm này không sử dụng Spanner, chúng tôi sẽ sử dụng phiên bản hướng dẫn Terraform không cài đặt Spanner. Trong Cloud Shell, hãy nhập lệnh bên dưới:
mv main.tf.nospanner main.tf
  1. Để lưu việc phải nhập tên và số dự án mỗi khi bạn chạy lệnh Terraform, hãy tạo một tệp có tên terraform.tfvars trong thư mục terraform này. Thêm hai dòng vào tệp này cùng với thông tin ở bên dưới và lưu tệp. Bạn có thể tìm thấy thông tin này trong trang tổng quan về dự án.
project_id="Your project id"
project_number=Your project number
  1. Khởi tạo Terraform bằng dòng:
terraform init
  1. Cuối cùng, hãy triển khai tài nguyên Terraform cho dự án của bạn bằng lệnh dưới đây. Bạn có thể được nhắc nhập "có" trong quá trình triển khai này. Quá trình này có thể mất đến 10 phút. Vì vậy, bạn nên dành thời gian kiểm tra sơ đồ cấu trúc tại https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png. Bạn cũng có thể xem mã hiện tại và sử dụng Duet để giúp chúng tôi hiểu mã đó.
terraform apply

Sau khi lệnh này hoàn tất thành công, bạn sẽ thấy kết quả tương tự như sau:

9c9d2378167312eb.png.

  1. Cập nhật giao diện người dùng để giao tiếp với phần phụ trợ inventory_cr_endpoint trong dữ liệu đầu ra. Để thực hiện việc này, hãy sao chép giá trị của inventory_cr_endpoint, mở cymbal-superstore/frontend/.env.production rồi thay thế giá trị của REACT_APP_INVENTORY_URL.
  2. Chạy lại terraform apply. Quá trình này chỉ mất ít phút vì ứng dụng React sẽ triển khai lại giao diện người dùng của ứng dụng lên Cloud Storage bằng URL phần phụ trợ đã cập nhật.
  3. Mở frontend_ip trong trình duyệt. Bạn sẽ thấy giao diện người dùng của Cymbal Superstore. Nội dung thay đổi có thể mất vài phút mới có hiệu lực, nên bạn có thể phải kiểm tra nhiều lần.

b864d3efe9a26eaa.png

  1. Nhấp vào Hàng mới ở bên trái trang chủ Cymbal. Bạn sẽ thấy một trang giao diện người dùng mô phỏng với các sản phẩm giữ chỗ. Điều này là bình thường vì bạn sẽ triển khai mã API Inventory (API Khoảng không quảng cáo) phụ trợ để phân phát trang sản phẩm mới trong nhiệm vụ tiếp theo của phòng thí nghiệm này.

f4d7579f73ee8ed2.png

5. Sửa đổi phần phụ trợ của ứng dụng web

Bây giờ, hãy sử dụng Duet AI để thêm chức năng vào phần phụ trợ của ứng dụng web.

Trong nhiệm vụ này, bạn sẽ nhắc Duet AI để hoàn tất mã nhằm triển khai điểm cuối /newproducts trong ứng dụng. Bạn sẽ tạo một điểm cuối trong phần phụ trợ để truy xuất sản phẩm mới từ Firestore và kiểm thử điểm cuối này trước khi triển khai thay đổi.

Phát triển điểm cuối /newproducts

  1. Mở tệp cymbal-superstore/backend/index.ts trong trình chỉnh sửa Cloud Shell.
  2. Trong tệp index.ts, hãy di chuyển đến nhận xét về DEMO TASK START, ở khoảng dòng 95. Tại đây, bạn sẽ thấy một nhóm các dòng được nhận xét cho nhiệm vụ này. Xoá tất cả các dòng đã nhận xét rồi thay thế bằng câu lệnh sau đây của Duet AI:
// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)
  1. Để nhắc Duet AI tạo mã hàm, hãy chọn toàn bộ nhận xét, sau đó nhấp vào biểu tượng bóng đèn ( Mã bóng đèn Duet AI cho OSS).
  2. Trong trình đơn Thao tác khác, hãy chọn Tạo mã.
  3. Di chuột qua mã đã tạo và trong thanh công cụ Duet AI, hãy nhấp vào Chấp nhận. Duet AI sẽ điền mã hàm cho điểm cuối /newproducts.

Lưu ý: Duet AI có thể tạo nhiều phiên bản mã cho câu lệnh của bạn. Bạn có thể chọn một phiên bản cụ thể bằng cách cuộn qua danh sách trên thanh công cụ.

  1. Mã được tạo sẽ tương tự như mã sau:
app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

Nhiều dòng có thể được gạch chân để cảnh báo cho bạn về các vấn đề có thể xảy ra liên quan đến việc cấp phép. Đối với phòng thí nghiệm này, bạn có thể áp dụng tính năng Khắc phục nhanh, nhưng trong tương lai, hãy xem các cảnh báo này!

  1. Nếu mã đã tạo của bạn có vẻ không tương đương với ví dụ ở bước trước, bạn nên thay thế mã đó ngay hoặc xem cách Duet có thể giúp gỡ lỗi sau này. Ngoài ra, còn có một phiên bản mã với lỗi dự kiến trong tệp scripts/solutioncode-with-bug.ts .
  2. Lưu tệp index.ts.

Kiểm thử và gỡ lỗi điểm cuối /``newproducts

  1. Trong Cloud Shell, hãy di chuyển đến thư mục cymbal-superstore/backend. Nhập lệnh:
npm run start

Thao tác này sẽ khởi động điểm cuối.

  1. Để xem kết quả của điểm cuối, mở một thiết bị đầu cuối khác bằng cách sử dụng dấu + trong thanh trình đơn của Cloud Shell và thực thi lệnh:
curl localhost:8000/newproducts

Bạn có thể thấy lỗi curl: (52) Empty reply from server trong dòng lệnh mới và một thông báo lỗi dài kèm theo thông tin chi tiết 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' trong dòng lệnh đang chạy điểm cuối.

  1. Hãy khắc phục lỗi đó. Nhưng trước tiên, chúng ta cần hiểu ý nghĩa của thông báo lỗi. Để thực hiện việc này, chúng tôi sẽ yêu cầu Duet. Mở Duet AI Chat trong trình đơn ở bên trái của Cloud Shell Editor (Trình chỉnh sửa Cloud Shell) và hỏi những nội dung sau:
I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet sẽ cung cấp cho bạn một số phương án để khắc phục vấn đề này, bao gồm cả việc xoá một trong các bộ lọc bất đẳng thức. Để giải quyết, hãy xoá dòng .where("quantity", ">", 0) khỏi index.ts để chúng ta chỉ có một bộ lọc trong truy vấn.

  1. Lặp lại hai bước đầu tiên ở trên để khởi động lại máy chủ và xem danh sách sản phẩm. Hiện tại, cuộc thử nghiệm đã thành công. Tuy nhiên, nếu không, hãy sử dụng Duet để tìm ra vấn đề (hoặc sử dụng giải pháp đã sửa trong scripts/solutioncode-bug-fixed.ts để tiếp tục).

Triển khai thay đổi

Để triển khai ứng dụng đã thay đổi, bạn chỉ cần chạy lại terraform apply từ thư mục terraform trong Cloud Shell. Sau đó, bạn có thể xem ứng dụng tại địa chỉ IP mà Terraform cung cấp.

6. Kiểm thử việc viết

Một nhiệm vụ quan trọng thường không được ưu tiên là tạo chương trình kiểm thử cho mã trong dự án. Như bạn có thể đã hiểu, Duet có thể giúp tạo các thử nghiệm này.

Hãy tạo các chương trình kiểm thử cho mã newproducts vừa tạo.

  1. Mở backend/index.test.ts. Sử dụng Duet AI Chat để tạo mã kiểm thử cho hàm newproducts() bằng câu lệnh:
Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

Bạn sẽ thấy phần này cung cấp import dòng đã có trong tệp. Chỉ sao chép chương trình kiểm thử describe() vào tệp tại các dòng được chỉ định. Lưu tệp.

Ngoài ra, bạn có thể cải thiện câu lệnh và yêu cầu Duet không thêm câu lệnh nhập nào vào, nhờ đó, bạn chỉ nên nhận mã cần thiết.

  1. Để xem kết quả kiểm thử, hãy truy cập Cloud Shell rồi thay đổi thư mục thành thư mục backend rồi chạy lệnh:
npm run test

7. Ghi nhật ký

Duet AI có thể hỗ trợ dự án của bạn ngay cả sau khi triển khai. Trong phần này, chúng ta sẽ tìm hiểu nhật ký với sự trợ giúp của Duet AI.

Quay lại Cloud Console và đảm bảo Duet đang chạy. Hỏi Duet nơi tìm nhật ký. Bạn có thể thử câu lệnh của chính mình, nhưng nếu câu lệnh đó không đưa ra được câu trả lời phù hợp thì câu lệnh sau sẽ có tác dụng.

How can I view the Cloud Run logs for the service called 'inventory'?

Bạn nên truy cập vào trang Cloud Run, chọn dịch vụ kho hàng rồi kiểm tra nhật ký của dịch vụ đó. Bạn sẽ thấy một số dòng mã như:

b7c50b67e49ee71a.png

Chọn một trong các mục và yêu cầu Duet AI giải thích. Bạn sẽ nhận được nội dung mô tả bằng ngôn ngữ tự nhiên.

Bạn cũng có thể xem Mục nhập nhật ký trong Trình khám phá nhật ký mà bạn có thể mở từ tuỳ chọn Ghi nhật ký trong trình đơn chính. Lợi thế của việc xem các mục nhập nhật ký từ Logs Explorer (Trình khám phá nhật ký) là tuỳ chọn giải thích các mục nhập được tích hợp sẵn, như được hiển thị dưới đây:

2574adab06524ad4.png.

8. Xin chúc mừng!

Xin chúc mừng! Bạn đã sử dụng thành công Duet AI để hiểu được mã mà có thể bạn chưa từng thấy trước đây. Bạn đã cải tiến mã này, tạo các thử nghiệm cho mã và sử dụng Duet để giúp tìm hiểu các mục nhập nhật ký.

Dọn dẹp

Xoá dự án

Để dọn dẹp, chúng ta chỉ cần xoá dự án của mình.

  • Trong trình đơn điều hướng, hãy chọn IAM và Bảng điều khiển dành cho quản trị viên
  • Sau đó nhấp vào cài đặt trong trình đơn phụ
  • Nhấp vào biểu tượng thùng rác có nội dung "Xoá dự án"
  • Làm theo hướng dẫn trong lời nhắc

Trong phòng thí nghiệm này, chúng ta đã biết cách:

  • Cải thiện ứng dụng web hiện có với sự trợ giúp của Duet AI.
  • Triển khai ứng dụng trên Cloud Run.
  • Nhắc Duet AI để giải thích về một lỗi trong ứng dụng và đưa ra cách khắc phục.
  • Phát triển các thử nghiệm cho ứng dụng với sự trợ giúp của Duet AI.
  • Xem nhật ký ứng dụng nhờ sự trợ giúp của Duet AI.