Tổng quan (Dialogflow)

Canvas tương tác là một khung xây dựng trên Trợ lý Google, cho phép nhà phát triển thêm trải nghiệm trực quan, sống động vào Hành động trò chuyện. Trải nghiệm hình ảnh này là một ứng dụng web tương tác mà Trợ lý gửi dưới dạng phản hồi cho người dùng trong cuộc trò chuyện. Không giống như các nội dung phản hồi đa dạng thức truyền thống tồn tại nội tuyến trong cuộc trò chuyện với Trợ lý, ứng dụng web Interactive Canvas sẽ kết xuất dưới dạng chế độ xem web toàn màn hình.

Bạn nên sử dụng chế độ Canvas tương tác nếu muốn thực hiện bất kỳ thao tác nào sau đây trong thao tác:

  • Tạo hình ảnh toàn màn hình
  • Tạo hoạt ảnh và hiệu ứng chuyển tiếp tuỳ chỉnh
  • Trực quan hóa dữ liệu
  • Tạo bố cục và GUI tuỳ chỉnh
Hình 1. Một trò chơi tương tác được tạo bằng Canvas tương tác.

Thiết bị được hỗ trợ

Canvas tương tác hiện khả dụng trên các thiết bị sau:

  • Màn hình thông minh
  • Google Nest Hub

  • Thiết bị di động Android

Cách thức hoạt động

Một Hành động sử dụng Canvas tương tác hoạt động tương tự như một Hành động trò chuyện thông thường. Người dùng vẫn có một cuộc trò chuyện qua lại với Trợ lý để thực hiện mục tiêu của mình. Tuy nhiên, thay vì trả về nội dung phản hồi nội tuyến trong cuộc trò chuyện, Hành động tương tác trên Canvas sẽ gửi phản hồi cho người dùng khi họ mở một ứng dụng web toàn màn hình. Người dùng tiếp tục tương tác với ứng dụng web bằng giọng nói hoặc thao tác chạm cho đến khi cuộc trò chuyện kết thúc.

Có một số thành phần của Hành động sử dụng Canvas tương tác:

  • Thao tác trò chuyện: Một thao tác sử dụng giao diện trò chuyện để thực hiện yêu cầu của người dùng. Tác vụ Canvas tương tác sử dụng chế độ xem web để hiển thị phản hồi thay vì thẻ thông tin hoặc phản hồi bằng văn bản và giọng nói đơn giản. Tác vụ trò chuyện sử dụng các thành phần sau:
    • Tác nhân hội thoại: Một dự án trong Dialogflow mà bạn có thể tuỳ chỉnh để trò chuyện với người dùng Hành động của mình.
    • Thực hiện: Mã được triển khai dưới dạng webhook triển khai logic trò chuyện cho nhân viên hỗ trợ Dialogflow và giao tiếp với ứng dụng web của bạn.
  • Ứng dụng web: Một ứng dụng web giao diện người dùng có hình ảnh tuỳ chỉnh mà Hành động của bạn gửi dưới dạng phản hồi cho người dùng trong một cuộc trò chuyện. Bạn tạo ứng dụng web bằng các tiêu chuẩn web như HTML, JavaScript và CSS.

Hành động trò chuyện và ứng dụng web giao tiếp với nhau bằng các phương thức sau:

  • API Canvas tương tác: API JavaScript mà bạn đưa vào ứng dụng web để cho phép giao tiếp giữa ứng dụng web và Hành động trò chuyện của bạn.
  • HtmlResponse: Một phản hồi chứa URL của ứng dụng web và dữ liệu để truyền. Bạn có thể sử dụng thư viện ứng dụng Node.js hoặc Java để trả về HtmlResponse.

Để minh hoạ cách hoạt động của Canvas tương tác, hãy tưởng tượng một Hành động giả định có tên là Màu sắc lạnh sẽ thay đổi màu màn hình thiết bị thành màu mà người dùng chỉ định. Sau khi người dùng gọi Hành động, luồng sẽ có dạng như sau:

  1. Người dùng nói Turn the screen blue với thiết bị có Trợ lý.
  2. Nền tảng Actions on Google định tuyến yêu cầu của người dùng tới Dialogflow để khớp với một ý định.
  3. Quá trình thực hiện ý định đã khớp và HtmlResponse sẽ được gửi đến thiết bị. Thiết bị sử dụng URL để tải ứng dụng web nếu ứng dụng chưa được tải.
  4. Khi tải, ứng dụng web sẽ đăng ký các lệnh gọi lại với API interactiveCanvas. Sau đó, giá trị của đối tượng data được truyền vào lệnh gọi lại onUpdate đã đăng ký của ứng dụng web. Trong ví dụ của chúng tôi, phương thức thực hiện gửi HtmlResponse với một data bao gồm một biến có giá trị blue.
  5. Logic tùy chỉnh cho ứng dụng web của bạn đọc giá trị data của HtmlResponse và thực hiện các thay đổi đã xác định. Trong ví dụ này, màn hình sẽ chuyển sang màu xanh dương.
  6. interactiveCanvas sẽ gửi bản cập nhật gọi lại đến thiết bị.

Các bước tiếp theo

Để tìm hiểu cách tạo một Hành động tương tác trên Canvas, vui lòng xem trang Tổng quan về bản dựng.

Để xem mã cho một Hành động tương tác canvas hoàn chỉnh, hãy xem mẫu.