1. Trước khi bắt đầu
Trong lớp học lập trình này, bạn sẽ tìm hiểu cách Dialogflow kết nối với các API Google Workspace để tạo một Trình lập lịch hẹn có đầy đủ chức năng với Lịch Google và các câu trả lời linh hoạt trong Google Chat.
Nếu chưa thiết lập từ các lớp học lập trình trước hoặc cảm thấy tự tin với Dialogflow và việc thực hiện, bạn có thể tải mã khởi đầu và cấu hình tác nhân xuống tại đây
https://github.com/googleworkspace/appointment-scheduler-codelab
Điều kiện tiên quyết
Trước khi tiếp tục, bạn cần hoàn thành các lớp học lập trình sau:
- Tạo một Trình lên lịch hẹn bằng Dialogflow
- Tích hợp Dialogflow với Actions on Google
- Tìm hiểu về thực thể trong Dialogflow
- Tìm hiểu cách hoàn tất yêu cầu bằng cách tích hợp Dialogflow với Lịch
Bạn cũng cần nắm được các khái niệm và cấu trúc cơ bản của Dialogflow. Bạn có thể tìm hiểu các khái niệm và cấu trúc này trong các video sau đây trong lộ trình Xây dựng chatbot bằng Dialogflow.
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
Sản phẩm bạn sẽ tạo ra
- Một công cụ tích hợp giữa Dialogflow, Google Chat và Lịch
- (Không bắt buộc) Tích hợp Google Maps để có thẻ phong phú hơn
Bạn cần có
- Trình duyệt web và địa chỉ email để đăng nhập vào bảng điều khiển Dialogflow
- Lịch và Google 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 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 nhắn tin.
- 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 hình đại diện thành hình ảnh chiếc xe này:
**https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png** - Để bật ứng dụng Chat cho cả tin nhắn trực tiếp và không gian, hãy chọn Có thể nhắn tin trực tiếp cho ứng dụng và Ứng dụng hoạt động trong không gian có nhiều người dùng.
Nhấp vào Lưu rồi thoát Cloud Console.
3. Các công cụ tích hợp Dialogflow khác
Google Chat được bật theo mặc định, nhưng nếu muốn một bot phục vụ 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 đó.
4. Thử nghiệm trong Google Chat
Giờ đây, khi ứng dụng nhắn tin của bạn đã được định cấu hình, hãy thêm ứng dụng đó vào một phòng Chat và kiểm thử. Mở Google Chat rồi tạo một không gian 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
AppointmentSchedulerrồi thêm ứng dụng này vào không gian. - Giờ đây, bạn có thể tương tác với ứng dụng mà bạn đã tạo trong Google bằng cách chỉ cần nhập @AppointmentScheduler vào không gian.
Hãy thử trên nền tảng này với cùng một dữ liệu đầu vào của các lớp học lập trình trước:
- Người dùng: "@AppointmentScheduler Đặt lịch hẹn đăng ký xe lúc 2 giờ chiều mai."
- Ứng dụng nhắn tin: "Được rồi, để tôi xem chúng tôi có thể sắp xếp cho bạn được không. Ngày 24 tháng 4, 14:00 là được!"
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.
5. Thẻ tuỳ chỉnh trong Google Chat
Với Google Chat, ứng dụng 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 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": "Your pizza delivery is here!"
}
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://..." }
},
{
"buttons": [
{
"textButton": {
"text": "OPEN IN GOOGLE MAPS",
"onClick": {
"openLink": {
"url": "https://..."
}
}
}
}
]
}
]
}
]
}
]
}
Để 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ẻ vào ứng dụng nhắn tin.
6. 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": "Appointment Scheduler"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
}
}
]
}
]
}
}
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 phòng Chat, hãy nhập "@AppointmentScheduler 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.
7. Thêm thẻ trong phần Hoàn tất
Bây giờ, chúng ta sẽ tạo một thẻ có nhiều tiện ích để hiển thị một cuộc hẹn đã lên lịch. Hãy thêm một hàm có tên là getGoogleChatCard, nơi chúng ta sẽ hiển thị các đầu vào: appointmentType, date và time.
Thêm hàm bên dưới vào mã của bạn trong index.js ở dưới cùng.
function getGoogleChatCard(appointmentType, date, time) {
const cardHeader = {
title: 'Appointment Confirmation',
subtitle: appointmentType,
imageUrl: ICON_IMAGE_URL,
imageStyle: 'IMAGE',
};
const dateWidget = {
keyValue: {
content: 'Date',
bottomLabel: date,
},
};
const timeWidget = {
keyValue: {
content: 'Time',
bottomLabel: time,
},
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Appointment',
onClick: {
openLink: {
url: CALENDAR_URL,
},
},
},
},
],
};
const infoSection = {widgets: [dateWidget, timeWidget,
buttonWidget]};
return {
'hangouts': {
'name': 'Confirmation Card',
'header': cardHeader,
'sections': [infoSection],
},
};
}
Thẻ này chứa một cặp khoá-giá trị và tiện ích nút. Sau đó, các tiện ích sẽ được sắp xếp theo section và card chứa danh sách các phần cần hiển thị.
Bây giờ, hãy gọi hàm này khi một sự kiện trên lịch được tạo. Trong hàm createCalendarEvent, hãy thay thế nội dung bằng mã bên dưới rồi triển khai hàm.
return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);
const dateString = dateTimeStart.toLocaleString(
'en-US',
{month: 'long', day: 'numeric'},
);
const dateParts = appointmentTimeString.split(',');
const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
const payload = new Payload(
'hangouts',
json,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
}).catch(() => {
agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
});
}
Khi trả lời trong Google Chat, nhân viên hỗ trợ sẽ biết cách trả về thẻ được tạo ở trên. Hãy thử yêu cầu lên lịch.
8. (Không bắt buộc) Thêm tiện ích hình ảnh của Google Maps
Nếu muốn thẻ phản hồi của mình có nhiều hình ảnh hơn, bạn có thể thêm một bản đồ tĩnh về vị trí cuộc hẹn do Maps Static API tạo. API này cho phép bạn tạo hình ảnh trên Maps bằng các tham số URL. Sau đó, chúng ta có thể sử dụng hình ảnh này trong một tiện ích hình ảnh trong thẻ.
- Bật Maps Static API trong Google Cloud Console theo cách tương tự như khi bạn bật API Lịch và Google Chat.
- Tạo và lưu khoá API cho dự án của bạn trong trang API và Dịch vụ trên bảng điều khiển. Để biết thêm thông tin về cách truy xuất và các phương pháp hay nhất về khoá API với Maps, vui lòng xem tại đây.
- Sao chép khoá API và các hằng số sau vào đầu tệp trong index.js
const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';
- Tiếp theo, hãy thêm một tiện ích hình ảnh vào hàm getGoogleChatCard
const mapImageWidget = {
'image': {
'imageUrl': MAP_IMAGE_URL,
'onClick': {
'openLink': {
'url': MAP_IMAGE_URL,
},
},
},
};
- Thêm mapImageWidget vào danh sách các tiện ích trong biến infoSection, lưu và triển khai.
- Hãy thử ứng dụng nhắn tin trong phòng Chat của bạn. Bạn sẽ nhận được một phản hồi đa dạng dựa trên mã mà bạn đã thêm hôm nay!
9. Dọn dẹp
Nếu bạn dự định hoàn tất các lớp học lập trình khác về Dialogflow, thì hãy bỏ qua phần này và quay lại sau.
Xoá tác nhân Dialogflow
- Nhấp vào biểu tượng
bên cạnh nhân viên hỗ trợ hiện có.
- Trong thẻ Chung, hãy di chuyển xuống dưới cùng rồi nhấp vào Xoá tác nhân này.
- Nhập Xoá vào hộp thoại rồi nhấp vào Xoá.
10. Xin chúc mừng
Bạn đã tạo một chatbot trong Dialogflow và tích hợp chatbot đó với Lịch và Google Chat. Vậy là bạn đã trở thành một người dùng Google Workspace chuyên nghiệp!
Tìm hiểu thêm
Để tìm hiểu thêm, hãy xem các mã mẫu trên trang Dialogflow Github.