1. Giới thiệu
Giờ đây, khi bạn đã tạo một chatbot Dialogflow cho một Hướng dẫn 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 chatbot đó sang Google Chat. Bạn sẽ tìm hiểu cách tạo các thẻ động, có tính tương tác cho nền tảng này và có nhiều chế độ tích hợp.
Sản phẩm bạn sẽ tạo ra
Chúng ta sẽ tạo một chatbot Dialogflow có thể trả lời trong miền Google Workspace của bạn bằng các câu trả lờ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 nhắn tin 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 tính năng thực hiện của Dialogflow
Bạn cần có
- 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.
- Trình duyệt web và địa chỉ email để đăng nhập vào bảng điều khiển Dialogflow
- Chat được bật 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 với Agent 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ển Dialogflow, hãy nhấp vào
. - Trong thẻ Chung, hãy di chuyển đến Mã dự án, rồi nhấp vào Google Cloud
.
- Trong Google Cloud Console, hãy nhấp vào Trình đơn điều hướng ☰ > API và dịch vụ > Thư viện.
- Tìm "Google Chat API", sau đó nhấp vào Bật để sử dụng API này trên dự án trên đám mây của bạn.
- Bây giờ, chúng ta sẽ định cấu hình ứng dụng nhắn tin Google Chat của bạn, hãy chuyển đến trang Configuration (Cấu hình) cho API. Xin lưu ý rằng mỗi dự án trên GCP có thể có tối đa một ứng dụng Google Chat.
- Bạn sẽ thấy các trường Dialogflow điền sẵn các lựa chọn cấu hình.
- Thay đổi trường URL của 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 nhắn tin 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 Cloud Console.
Ngoài ra, bạn có thể dùng các công cụ tích hợp Dialogflow. Google Chat được bật theo mặc định, nhưng nếu muốn phân phát trên nhiều nền tảng, bạn có thể chuyển đến trang Tích hợp trong Bảng điều khiển Dialogflow để bật các nền tảng đó.
3. Thử nghiệm trong Google Chat
Giờ đây, khi ứng dụng Google Chat của bạn đã được định cấu hình, hãy thêm ứng dụng đó vào một không gian trò chuyện và kiểm thử. Mở Google Chat rồi tạo một không gian trò chuyện thử nghiệm. Ở góc trên cùng bên phải của không gian, hãy nhấp vào trình đơn thả xuống rồi chọn Thêm người và ứng dụng.
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 nhắn tin Google Chat mà bạn đã tích hợp trong Google Chat bằng cách chỉ cần nhập @tvguide vào không gian. Nhập @tvguide hello để thử.
Tiếp theo, chúng ta sẽ sử dụng các chế độ tuỳ chỉnh trong Google Chat để thêm câu trả lời phong phú hơn.
4. Thẻ tuỳ chỉnh trong Google Chat
Với Google Chat, ứng dụng nhắn tin của bạn có thể trả về 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ẻ. Phản hồi bằng thẻ cho phép bạn tạo một giao diện phong phú hơn bằng nhiều tiện ích, bao gồm cả hình ảnh, nút, v.v. Giờ đây, sau khi kết nối Dialogflow Agent với một ứng dụng nhắn tin Google Chat, bạn chỉ cần trả về JSON ở đúng định dạng để hiển thị trong Google Chat trong mã thực hiện. Hãy xem một số ví dụ về JSON.
Phản hồi văn bản cơ bản sẽ 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?"
}
Phản hồi mẫu bằng thẻ 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 thông báo phản hồi đa dạng dành riêng cho từng nền tảng. Đây là nơi chúng ta sẽ thêm các thẻ JSON của Hangouts Chat. Các thẻ này sẽ được tác nhân gửi lại 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 hỏi mặc định rồi di chuyển xuống phần phản hồi.
Nhấp vào Google Chat rồi bỏ chọn Sử dụng câu trả lời trong thẻ MẶC ĐỊNH làm câu trả lời đầu tiên, sau đó nhấp vào THÊM CÂU TRẢ LỜI > Tải trọng tuỳ chỉnh.
Bạn sẽ thấy một cấu trúc JSON.
Sao chép và dán mã sau đây bên dưới. Chúng ta đã thiết lập một thẻ có tiện ích TextParagraph.
{
"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 rồi chuyển đến phòng Chat thử nghiệm để xem thẻ này được hiển thị. Trong không gian trò chuyện, hãy nhập "@tvguide xin chào"
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ể tạo nội dung một cách linh động bằng mã của mình.
Để tìm hiểu thêm về thẻ, vui lòng xem tài liệu về Định dạng thông điệp. Trong phần tiếp theo, chúng ta sẽ thêm thẻ.
6. Thêm thẻ vào yêu cầu thực hiện
Bây giờ, chúng ta sẽ tạo một thẻ có các tiện ích để hiển thị danh sách chương trình truyền hình. Hãy thêm một hàm có tên là getGoogleCard, nơi chúng ta sẽ hiển thị thông tin về kết quả. Chúng ta sẽ sử dụng các tiện ích keyValue và button để 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]},
}
};
}
}
Giờ đây, 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 và 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ã bên dưới.
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);
}
}
Hãy lưu ý đến mã ở dưới cùng, nơi phản hồi được thêm vào. Nếu nguồn yêu cầu của tác nhân đượ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 tải chính xác tải trọng trong quá trình thực hiện.
Giờ thì hãy quay lại không gian trò chuyện và thử tính năng này. Nhập @tvguide What is on MTV?. Bạn sẽ thấy một phản hồi tương tự.
7. Xin chúc mừng
Bạn đã tạo bot Google Chat đầu tiên bằng Dialogflow!
Tiếp theo là gì?
Bạn có thích lớp học lập trình này không? Hãy khám phá những phòng thí nghiệm tuyệt vời này!