1. Giới thiệu
Sau khi bạn tạo bot trò chuyện Dialogflow cho một Hướng dẫn về truyền hình trong lớp học lập trình trước, chúng tôi sẽ hướng dẫn bạn cách mở rộng bot này sang Google Chat. Bạn sẽ tìm hiểu cách tạo các thẻ động và có tính tương tác cho nền tảng này cũng như cách tích hợp với nhiều loại thẻ.
Sản phẩm bạn sẽ tạo ra
Chúng tôi sẽ tạo một bot trò chuyện Dialogflow có thể trả lời trong miền Google Workspace của bạn bằng các phản hồi có thể tuỳ chỉnh.
Kiến thức bạn sẽ học được
- Cách triển khai và định cấu hình ứng dụng Google Chat
- Cách tạo thẻ hiển thị trong Google Chat
- Cách tạo tải trọng tuỳ chỉnh trong phương thức thực hiện Dialogflow
Bạn cần có
- Hãy hoàn thành lớp học lập trình đầu tiên trong loạt bài gồm 2 phần này.
- Một trình duyệt web và địa chỉ email để đăng nhập vào bảng điều khiển Dialogflow
- Đã bật Chat trong miền Google Workspace của bạn
2. Bật và định cấu hình Google Chat
Chúng ta sẽ bắt đầu từ Nhân viên hỗ trợ Dialogflow mà bạn đã tạo trong các lớp học lập trình trước.
- Trong bảng điều khiểnDialogflow, hãy nhấp vào
. - Trong thẻ General (Chung), hãy di chuyển đến mục Project ID (Mã dự án), sau đó nhấp vào Google Cloud
.
- Trong Google Cloud Console, hãy nhấp vào Trình đơn điều hướng Nhận > API và Dịch vụ > Thư viện.
- Tìm kiếm "Google Chat API" rồi nhấp vào Bật để sử dụng API trên dự án Google Cloud của bạn.
- Bây giờ, chúng ta sẽ định cấu hình ứng dụng Google Chat, hãy chuyển đến trang Cấu hình cho API. Xin lưu ý rằng mỗi dự án GCP chỉ được có tối đa một ứng dụng Google Chat.
- Bạn sẽ thấy các trường Dialogflow điền các lựa chọn về cấu hình.
- Thay đổi trường URL hình đại diện thành hình ảnh TV này:
[https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png) - Bật ứng dụng Google Chat cho cả tin nhắn trực tiếp và không gian
Nhấp vào Lưu rồi thoát khỏi Cloud Console.
Ngoài ra, các công cụ tích hợp Dialogflow. Google Chat được bật theo mặc định. Tuy nhiên, nếu muốn phân phát trên nhiều nền tảng, bạn có thể chuyển đến trang Các công cụ tích hợp trong Bảng điều khiển Dialogflow để bật các công cụ đó.
3. Kiểm thử trong Google Chat
Bây giờ, bạn đã định cấu hình xong ứng dụng Google Chat, hãy thêm ứng dụng đó vào một không gian trò chuyện và dùng thử. Mở Google Chat rồi tạo một không gian trò chuyện thử nghiệm. Ở góc trên bên phải của không gian, nhấp vào trình đơn thả xuống rồi chọn Thêm người và .
Tìm tvguide rồi thêm ứng dụng Google Chat vào không gian.
Giờ đây, bạn có thể tương tác với ứng dụng Google Chat mà bạn đã tích hợp sẵn trong Google Chat bằng cách nhập @tvguide vào không gian. Nhập @tvguide hello để kiểm tra.
Tiếp theo, chúng ta sẽ sử dụng các tuỳ chỉnh trong Google Chat để thêm câu trả lời phong phú hơn.
4. Thẻ Google Chat tuỳ chỉnh
Với Google Chat, bạn có thể yêu cầu ứng dụng trả lại cho người dùng một Phản hồi bằng văn bản cơ bản hoặc Phản hồi bằng thẻ. Điều này giúp bạn có một giao diện phong phú hơn được tạo bằng nhiều tiện ích như hình ảnh, nút, v.v. Giờ đây, chúng tôi đã kết nối Nhân viên hỗ trợ Dialogflow của bạn với một ứng dụng của Google Chat. Bạn chỉ cần trả về JSON theo đúng định dạng để hiển thị trong Google Chat trong mã thực hiện đơn hàng của mình. Hãy cùng xem xét một số ví dụ về JSON.
Phản hồi bằng văn bản cơ bản có dạng như sau:
{
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
Câu trả lời thẻ mẫu có các tiện ích sẽ có dạng như sau:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. Tải trọng tuỳ chỉnh và thẻ trò chuyện
Tải trọng tuỳ chỉnh trong Dialogflow cho phép các tin nhắn phản hồi đa dạng thức dành riêng cho từng nền tảng. Đây là nơi chúng tôi sẽ thêm các thẻ JSON của Hangout Chat, qua đó nhân viên hỗ trợ sẽ phân phát lại các thẻ đó cho người dùng.
Hãy bắt đầu bằng cách thêm một thẻ cơ bản cho ý định chào mừng. Trong Bảng điều khiển Dialogflow, hãy chuyển đến Ý định chào mừng mặc định rồi di chuyển xuống phần phản hồi.
Nhấp vào Google Chat và bỏ chọn Sử dụng câu trả lời từ thẻ MẶC ĐỊNH làm câu trả lời đầu tiên, sau đó chọn THÊM CÂU TRẢ LỜI > Tải trọng tuỳ chỉnh.
Bạn sẽ thấy một bộ xương JSON.
Sao chép và dán mã sau bên dưới. Chúng ta đã thiết lập một thẻ có tiện ích TextParagraph (Đoạn văn bản).
{
"hangouts": {
"header": {
"title": "TV Guide App"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
}
]
}
]
}
}
Nhấn vào Lưu, sau đó chuyển đến không gian trò chuyện thử nghiệm để xem thẻ này hiển thị. Trong phòng trò chuyện, hãy nhập "@tvguide hello"
Tiếp theo, chúng ta sẽ thêm một tải trọng tuỳ chỉnh vào mã thực hiện để có thể linh động tạo nội dung bằng mã.
Để tìm hiểu thêm về thẻ, vui lòng xem tài liệu về Định dạng thư. Trong phần tiếp theo, chúng ta sẽ thêm thẻ.
6. Thêm thẻ trong quá trình thực hiện đơn hàng
Bây giờ, chúng ta sẽ tạo một thẻ có các tiện ích để hiển thị danh sách TV. Hãy thêm một hàm có tên là getGoogleCard để kết xuất thông tin danh sách thu được. Chúng ta sẽ sử dụng keyValue và các tiện ích nút để tạo phản hồi thẻ.
Thêm hàm bên dưới vào mã của bạn trong index.js ở dưới cùng.
/**
* Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));
if(tvresults['Listings'][0]) {
let channelName = tvresults['Name'];
let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);
const cardHeader = {
title: channelName + ' Shows',
};
const currentWidget = {
keyValue: {
content: `${tvresults['Listings'][0]['Title']}`,
bottomLabel: `${currentlyPlayingTime}`,
}
};
const laterWidget = {
keyValue: {
content: `${tvresults['Listings'][1]['Title']}`,
bottomLabel: `${laterPlayingTime}`
}
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Full Listing',
onClick: {
openLink: {
url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
},
},
},
},
],
};
return {
'hangouts': {
header: cardHeader,
sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
}
};
} else {
const errorWidget = {
keyValue: {
content: 'No listings found',
bottomLabel: 'Please try again.'
}
};
return {
'hangouts': {
'sections': {widgets: [errorWidget]},
}
};
}
}
Bây giờ, chúng ta cần gọi phương thức này để tác nhân có thể nhận được phản hồi rồi gửi lại cho người dùng. Trong hàm channelHandler, hãy thay thế nội dung của hàm bằng mã dưới đây.
function channelHandler(agent) {
console.log('in channel handler');
var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
var results = JSON.parse(jsonResponse);
var listItems = {};
textResults = getListings(results);
for (var i = 0; i < results['Listings'].length; i++) {
listItems[`SELECT_${i}`] = {
title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
description: `Channel: ${results['Name']}`
}
}
if (agent.requestSource === 'hangouts') {
const cardJSON = getGoogleCard(results);
const payload = new Payload(
'hangouts',
cardJSON,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
} else {
agent.add(textResults);
}
}
Ghi lại mã ở dưới cùng nơi thêm câu trả lời. Nếu nguồn yêu cầu của nhân viên hỗ trợ được xác định là nền tảng này, chúng tôi sẽ tạo tải trọng JSON bằng thẻ "hangouts". Điều này rất quan trọng để truyền chính xác tải trọng trở lại phương thức thực hiện.
Bây giờ, hãy quay lại không gian trò chuyện của bạn và dùng thử. Nhập @tvguide What is on MTV?. Bạn sẽ thấy một câu trả lời tương tự.
7. Xin chúc mừng
Bạn đã tạo bot đầu tiên trong Google Chat bằng Dialogflow!
Tiếp theo là gì?
Bạn thích lớp học lập trình này? Hãy khám phá các phòng thí nghiệm tuyệt vời này!