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ên lịch hẹn hoạt động đầy đủ thông qua Lịch Google với các câu trả lời linh động trong Google Chat.
Nếu chưa thiết lập tính năng này trong các lớp học lập trình trước hoặc cảm thấy tự tin với Dialogflow và phương thức thực hiện, bạn có thể tải mã khởi đầu và cấu hình nhân viên hỗ trợ 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 tất các lớp học lập trình sau:
- Tạo 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ề các thực thể trong Dialogflow
- Tìm hiểu về phương thức thực hiện 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 những khái niệm và cấu trúc này từ các video sau đây trong lộ trình Tạo bot trò chuyện 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 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
Sản phẩm bạn sẽ tạo ra
- Công cụ tích hợp giữa Dialogflow, Google Chat và Lịch
- (Tùy chọn) Tích hợp Google Maps để có thẻ phong phú hơn
Bạn cần có
- 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 Lịch và Google 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 Chat, 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 trong 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 chiếc ô tô 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 qua ứng dụng và Ứng dụng hoạt động trong các không gian có nhiều người dùng.
Nhấp vào Lưu rồi thoát khỏi Cloud Console.
3. Các công cụ tích hợp khác của Dialogflow
Google Chat được bật theo mặc định. Tuy nhiên, nếu muốn một bot 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ụ này.
4. Kiểm thử trong Google Chat
Bây giờ, sau khi định cấu hình ứng dụng Chat, hãy thêm ứng dụng đó vào phòng Chat và dùng thử. Mở Google Chat và tạo một không gian 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
AppointmentSchedulerrồi thêm ứng dụng 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 nhập @AppointmentScheduler vào ô trống.
Hãy thử nghiệm trên nền tảng này với cùng dữ liệu đầu vào từ 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 Chat: "Được rồi, để tôi xem chúng tôi có thể ghép nối với bạn không. 2 giờ chiều ngày 24 tháng 4 là được rồi!"
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.
5. Thẻ Google Chat tuỳ chỉnh
Với Google Chat, bạn có thể yêu cầu ứng dụng của mình 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 bao gồm 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 trong mã thực hiện đơn hàng. 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": "Your pizza delivery is here!"
}
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://..." }
},
{
"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ư. Trong phần tiếp theo, chúng ta sẽ thêm thẻ vào ứng dụng Chat.
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 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": "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, sau đó chuyển đến phòng Chat thử nghiệm để xem thẻ này hiển thị. Trong phòng Chat, hãy nhập "@AppointmentScheduler 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ã.
7. Thêm thẻ trong Thực hiện đơn hàng
Bây giờ, chúng ta sẽ tạo một thẻ có một số 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 để kết xuất các dữ liệu đầu vào: appointmentType, date và time.
Thêm hàm dưới đây 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 được sắp xếp theo thứ tự trong section và card chứa danh sách các phần cần kết xuất.
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 phản hồi trong Google Chat, nhân viên hỗ trợ sẽ biết để trả lại thẻ đã làm ở trên. Hãy kiểm thử bằng 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 làm cho thẻ phản hồi trở nên trực quan hơn, bạn có thể thêm bản đồ tĩnh của địa điểm đặt lịch hẹn do Maps Static API tạo ra. API này cho phép bạn tạo hình ảnh Maps bằng tham số URL. Sau đó, chúng ta có thể sử dụng hình ảnh này trong tiện ích hình ảnh trong thẻ.
- Bật Maps Static API (API Tĩnh của Maps) trong Google Cloud Console, giống như cách 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 các API và Dịch vụ trong 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 bằng 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 của bạn 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 tiện ích trong biến infoSection, lưu và triển khai.
- Hãy kiểm thử ứng dụng Chat trong phòng Chat và bạn sẽ nhận được câu trả lời chi tiết 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 thành các lớp học lập trình khác về Dialogflow, hãy tạm thời bỏ qua phần này và quay lại sau.
Xoá nhân viên hỗ trợ dự á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ẻ General (Chung), hãy di chuyển xuống dưới cùng rồi nhấp vào Delete This Agent (Xoá nhân viên hỗ trợ này).
- Nhập Delete vào hộp thoại rồi nhấp vào Delete (Xoá).
10. Xin chúc mừng
Bạn đã tạo một bot trò chuyện trong Dialogflow và tích hợp bot này với Lịch. Giờ đây, bạn đã là một chuyên gia Google Workspace Pro!
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.