Trang này được dịch bởi Cloud Translation API.

Đi nghỉ mát bằng ứng dụng Google Chat

1. Giới thiệu

Các ứng dụng Google Chat đưa các dịch vụ và tài nguyên vào ngay Chat, nơi người dùng có thể nhận thông tin và thực hiện hành động mà không cần rời khỏi cuộc trò chuyện.

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách tạo một ứng dụng Chat ("Ứng dụng Chat điểm danh") để thiết lập tính năng tự động trả lời thư trong Gmail và lên lịch họp trong Lịch Google. Bằng cách tạo ứng dụng Attendance Chat trong Google Apps Script, bạn có thể dễ dàng truy cập vào các dịch vụ khác của Google như Drive, Gmail, Lịch, Tài liệu, Trang tính và nhiều dịch vụ khác.

Kiến thức bạn sẽ học được

Cách thêm trình xử lý vào các sự kiện được tạo trong Chat
Cách phân tích cú pháp các đối tượng sự kiện được gửi từ Chat
Cách phản hồi lại Chat bằng câu trả lời ở định dạng thẻ
Cách xác định và phản ứng với các thao tác tuỳ chỉnh cho lượt nhấp vào nút trong thẻ

Bạn cần có

Có quyền truy cập vào Internet và trình duyệt web.
Một tài khoản Google Workspace có quyền truy cập vào Google Chat.
Kiến thức cơ bản về JavaScript – Google Apps Script chỉ hỗ trợ JavaScript.

2. Nhận mã mẫu

Bạn có thể tải tệp ZIP xuống hoặc sao chép kho lưu trữ GitHub để xem mã cho từng bước trong mẫu này.

Các thư mục step-NN trong solutions/attendance-chat-app chứa trạng thái cuối cùng mong muốn của từng bước trong lớp học lập trình này. Các thông tin này chỉ mang tính tham khảo.

Tải mã xuống

Để tải mã xuống cho lớp học lập trình này, hãy nhấp vào nút sau:

Giải nén tệp ZIP đã tải xuống. Thao tác này sẽ giải nén một thư mục gốc (apps-script-samples), thư mục này chứa một thư mục cho mỗi bước của lớp học lập trình này trong solutions/attendance-chat-app.

Sao chép kho lưu trữ GitHub

Để sao chép kho lưu trữ GitHub cho lớp học lập trình này, hãy chạy lệnh sau:

git clone https://github.com/googleworkspace/apps-script-samples

3. Tạo trình xử lý cho các sự kiện trên Google Chat

Tạo một dự án Apps Script

Để tạo một dự án Apps Script, hãy làm theo các bước sau:

Truy cập vào script.new.
Nhấp vào Dự án chưa có tiêu đề.
Đổi tên tập lệnh thành Ứng dụng trò chuyện điểm danh rồi nhấp vào Đổi tên.

Sự kiện trong Google Chat

Hầu hết các hoạt động tương tác của Apps Script với Chat đều dựa trên sự kiện. Tương tác giữa người dùng, ứng dụng Chat và Chat thường diễn ra theo trình tự sau:

Người dùng bắt đầu một hành động, chẳng hạn như thêm ứng dụng Chat vào một không gian, bắt đầu gửi tin nhắn trực tiếp (DM) cho một ứng dụng Chat hoặc xoá ứng dụng Chat khỏi một không gian.
Hành động này sẽ tạo ra một sự kiện nhắm đến ứng dụng Chat trong Chat.
Chat sẽ gọi trình xử lý sự kiện tương ứng được xác định trong tập lệnh của ứng dụng Chat.

Tính năng trò chuyện tạo ra 4 sự kiện mà ứng dụng của bạn có thể theo dõi:

ADDED_TO_SPACE: Sự kiện này xảy ra khi người dùng là con người thêm một ứng dụng Chat vào không gian hoặc tin nhắn trực tiếp. Trong Apps Script, bạn xác định một hàm onAddToSpace() để xử lý sự kiện này.
REMOVED_FROM_SPACE: Sự kiện này xảy ra khi người dùng xoá ứng dụng Chat khỏi một không gian hoặc tin nhắn trực tiếp. Sự kiện này không đăng phản hồi trở lại Chat. Trong Apps Script, bạn xác định một hàm onRemoveFromSpace() để xử lý sự kiện này.
MESSAGE: Sự kiện này xảy ra khi người dùng nhắn tin cho ứng dụng Chat, có thể là trực tiếp trong tin nhắn trực tiếp hoặc dưới dạng lượt đề cập bằng @trong một không gian. Trong Apps Script, bạn xác định một hàm onMessage() để phản hồi sự kiện này.
CARD_CLICKED: Sự kiện này xảy ra khi người dùng nhấp vào một nút có thao tác tuỳ chỉnh được chỉ định. Trong Apps Script, bạn xác định một hàm onCardClick() để phản hồi sự kiện này.

Thay thế nội dung của tệp Code.gs bằng đoạn mã sau đây để xác định các trình xử lý cho sự kiện ADDED_TO_SPACE và REMOVE_FROM_SPACE. (Bạn sẽ thêm trình xử lý cho các sự kiện MESSAGE và CARD_CLICKED sau trong lớp học lập trình này.)

Code.gs

/**
 * Responds to an ADDED_TO_SPACE event in Google Chat.
 * @param {object} event the event object from Google Chat
 * @return {object} JSON-formatted response
 * @see https://developers.google.com/workspace/chat/receive-respond-interactions
 */
function onAddToSpace(event) {
  console.info(event);
  var message = 'Thank you for adding me to ';
  if (event.space.type === 'DM') {
    message += 'a DM, ' + event.user.displayName + '!';
  } else {
    message += event.space.displayName;
  }
  return { text: message };
}

/**
 * Responds to a REMOVED_FROM_SPACE event in Google Chat.
 * @param {object} event the event object from Google Chat
 * @see https://developers.google.com/workspace/chat/receive-respond-interactions
 */
function onRemoveFromSpace(event) {
  console.info(event);
  console.log('Chat app removed from ', event.space.name);
}

4. Phát hành và kiểm thử ứng dụng Chat

Cập nhật tệp kê khai tập lệnh

Trước khi có thể xuất bản ứng dụng lên Chat, bạn phải cập nhật tệp kê khai tập lệnh.

Nhấp vào Cài đặt dự án .
Chọn hộp đánh dấu Hiển thị tệp kê khai "appsscript.json" trong trình chỉnh sửa.
Nhấp vào Trình chỉnh sửa .
Nhấp vào tệp appsscript.json.
Thêm dòng "chat": {} vào tệp kê khai.

Tệp kê khai của bạn sẽ có dạng như ví dụ sau.

appsscript.json

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {
  },
  "chat": {}
}

Tạo một dự án trên Google Cloud

Trước khi có thể chạy và kiểm thử ứng dụng Chat, bạn phải tạo một dự án Google Cloud, bật và định cấu hình Chat API, đồng thời xuất bản ứng dụng Chat của bạn cho tổ chức Google Workspace.

Trong Google Cloud Console, hãy chuyển đến phần Trình đơn > IAM và Quản trị viên > Tạo dự án.
Đối với Tên dự án, hãy nhập một tên mô tả.
Nếu được nhắc, hãy chọn Tổ chức và Tài khoản thanh toán.
Nhấp vào Tạo.
Khi quá trình tạo dự án hoàn tất, một thông báo sẽ xuất hiện ở phía trên bên phải của trang. Nhấp vào mục Create Project: <Project name> (Tạo dự án: <Tên dự án>) để mở dự án.
Nhấp vào Trình đơn > API và Dịch vụ > Thông tin xác thực.
Nhấp vào Màn hình đồng ý OAuth.
Đối với Tên ứng dụng, hãy nhập Ứng dụng Chat điểm danh.
Nếu được nhắc, hãy nhập email hỗ trợ người dùng và thông tin liên hệ của nhà phát triển.
Nhấp vào Lưu và tiếp tục.
Nhấp vào biểu tượng Cài đặt và tiện ích > Cài đặt dự án.
Sao chép Số dự án.
Trong trình chỉnh sửa App Script, hãy nhấp vào biểu tượng Cài đặt dự án .
Trong mục Dự án trên Google Cloud Platform (GCP), hãy nhấp vào Thay đổi dự án.
Nhấp vào Số dự án trên GCP rồi nhập số dự án.
Nhấp vào Đặt dự án.

Xuất bản ứng dụng lên Chat

Để xuất bản ứng dụng Chat lên Google Chat, hãy làm như sau:

Trong trình chỉnh sửa Apps Script, hãy nhấp vào Triển khai > Triển khai mới.
Bên cạnh Chọn loại, hãy nhấp vào Bật các loại hình triển khai .
Chọn Tiện ích bổ sung rồi nhấp vào Triển khai.
Sao chép Mã hoạt động triển khai rồi nhấp vào Xong.
Trong Google Cloud Console, hãy chuyển đến Trình đơn > API và dịch vụ > Thư viện.
Tìm API Google Chat. Chọn API trong danh sách kết quả.
Trên trang Google Chat API, hãy nhấp vào Bật.
Sau khi bật API, hãy nhấp vào Configuration (Cấu hình). Bỏ qua mọi thông báo yêu cầu bạn tạo thông tin đăng nhập.
Trên trang Cấu hình, hãy làm như sau:

Đối với Tên ứng dụng, hãy nhập Ứng dụng Chat điểm danh.
Đối với URL hình đại diện, hãy nhập https://goo.gl/kv2ENA.
Đối với Nội dung mô tả, hãy nhập Ứng dụng Chat trong lớp học lập trình Apps Script.
Trong phần Chức năng, hãy chọn Nhận tin nhắn riêng tư.
Trong phần Cài đặt kết nối, hãy chọn Dự án Apps Script rồi dán Mã triển khai của tập lệnh vào hộp văn bản.
Trong phần Quyền, hãy chọn Một số người và nhóm cụ thể trong miền của bạn. Trong hộp văn bản bên dưới trình đơn thả xuống, hãy nhập địa chỉ email được liên kết với tổ chức của bạn trên Google Workspace.
Nhấp vào Lưu.

Sau khi bạn lưu các thay đổi, hãy xác minh rằng trạng thái trên trang Google Chat API cho thấy Trạng thái ứng dụng là ĐANG HOẠT ĐỘNG – người dùng có thể sử dụng.

Kiểm thử ứng dụng Chat

Để kiểm thử ứng dụng của bạn trong Google Chat, hãy làm như sau:

Mở Google Chat.
Gửi tin nhắn trực tiếp mới cho ứng dụng Chat bằng cách nhấp vào biểu tượng Bắt đầu cuộc trò chuyện > Tìm ứng dụng.
Trên trang Tìm ứng dụng, hãy tìm ứng dụng Chat Attendance.
Bên cạnh Ứng dụng Attendance Chat, hãy nhấp vào Thêm > Chat.

Khi luồng tin nhắn trực tiếp mở ra, bạn sẽ thấy một tin nhắn của ứng dụng Chat cảm ơn bạn đã thêm ứng dụng này vào tin nhắn trực tiếp, như minh hoạ trong hình ảnh sau.

5. Xác định phản hồi có định dạng thẻ

Ở bước trước, ứng dụng của bạn đã phản hồi các sự kiện trên Google Chat bằng một phản hồi văn bản đơn giản. Ở bước này, bạn sẽ cập nhật ứng dụng để phản hồi bằng thẻ.

Câu trả lời trên thẻ

Google Chat hỗ trợ việc sử dụng thẻ cho các câu trả lời. Thẻ là các vùng chứa trực quan cho phép bạn nhóm các bộ tiện ích giao diện người dùng lại với nhau. Thẻ có thể hiển thị tiêu đề, đoạn văn bản, bộ nút, hình ảnh và văn bản khoá/giá trị. Ứng dụng của bạn có thể xác định một hoặc nhiều thẻ trong phản hồi JSON của ứng dụng cho Google Chat. Sau đó, Google Chat sẽ dịch phản hồi của bạn thành các phần tử tương ứng trên giao diện người dùng.

Hình ảnh sau đây cho thấy một phản hồi dạng thẻ có 3 phần, bao gồm một tiêu đề, một tiện ích khoá/giá trị, một tiện ích hình ảnh và một nút văn bản.

Để trả lời tin nhắn của người dùng bằng một phản hồi dạng thẻ, hãy thêm mã sau vào tệp Code.gs của ứng dụng Chat.

Code.gs

const DEFAULT_IMAGE_URL = 'https://goo.gl/bMqzYS';
const HEADER = {
  header: {
    title : 'Attendance Chat app',
    subtitle : 'Log your vacation time',
    imageUrl : DEFAULT_IMAGE_URL
  }
};

/**
 * Creates a card-formatted response.
 * @param {object} widgets the UI components to send
 * @return {object} JSON-formatted response
 */
function createCardResponse(widgets) {
  return {
    cards: [HEADER, {
      sections: [{
        widgets: widgets
      }]
    }]
  };
}

/**
 * Responds to a MESSAGE event triggered
 * in Google Chat.
 *
 * @param event the event object from Google Chat
 * @return JSON-formatted response
 */
function onMessage(event) {
  const userMessage = event.message.text;

  const widgets = [{
    "textParagraph": {
      "text": "You said: " + userMessage
    }
  }];

  return createCardResponse(widgets);
}

Hàm onMessage() (được thêm trong bước này) sẽ đọc tin nhắn gốc của người dùng và tạo một phản hồi dưới dạng tiện ích TextParagragh đơn giản. Sau đó, hàm onMessage() sẽ gọi createCardResponse(), hàm này đặt tiện ích TextParagraph trong một phần của một thẻ. Ứng dụng Chat trả về đối tượng JavaScript được tạo bằng phản hồi thẻ cho Google Chat.

Kiểm thử ứng dụng Chat

Để kiểm thử ứng dụng này, hãy quay lại tin nhắn trực tiếp của bạn với ứng dụng trong Google Chat rồi nhập một tin nhắn (bạn có thể nhập bất kỳ tin nhắn nào).

Xin lưu ý rằng trình xử lý sự kiện onMessage() sẽ phân tích cú pháp đối tượng sự kiện do Google Chat truyền đến để trích xuất tin nhắn gốc của người dùng. Bạn cũng có thể nhận được các loại thông tin khác về sự kiện, bao gồm tên của người dùng đã bắt đầu sự kiện, địa chỉ email của họ, tên của không gian nơi sự kiện diễn ra và nhiều thông tin khác.

Để biết thêm thông tin về cấu trúc của các đối tượng sự kiện do Google Chat gửi, hãy xem Tài liệu tham khảo về định dạng sự kiện.

6. Phản hồi khi nhấp vào nút trong thẻ

Ở bước trước, ứng dụng Chat của bạn đã phản hồi một tin nhắn của người dùng (sự kiện MESSAGE) bằng một thẻ đơn giản có chứa tiện ích TextParagragh. Trong bước này, bạn sẽ tạo một phản hồi bao gồm các nút, trong đó mỗi nút có một thao tác tuỳ chỉnh được xác định cho nút đó.

Thẻ tương tác

Phản hồi dạng thẻ có thể chứa một trong hai loại nút: tiện ích nút văn bản (chỉ hiển thị nút văn bản) và tiện ích ImageButton (hiển thị nút có biểu tượng hoặc hình ảnh đơn giản mà không có văn bản). Cả hai tiện ích TextButton và ImageButton đều hỗ trợ một trong hai hành vi onClick (như được xác định trong phản hồi JSON gửi lại cho Google Chat): openLink hoặc action. Như tên gọi, openLink sẽ mở một đường liên kết cụ thể trong một thẻ trình duyệt mới.

Đối tượng action chỉ định một thao tác tuỳ chỉnh mà nút sẽ thực hiện. Bạn có thể chỉ định một số giá trị tuỳ ý trong đối tượng thao tác, bao gồm một actionMethodName duy nhất và một tập hợp các cặp tham số khoá / giá trị.

Việc chỉ định một đối tượng action cho nút sẽ tạo ra một thẻ tương tác. Khi người dùng nhấp vào nút trong tin nhắn, Google Chat sẽ tạo ra một sự kiện CARD_CLICKED và gửi yêu cầu trở lại ứng dụng đã gửi tin nhắn ban đầu. Sau đó, ứng dụng cần xử lý sự kiện được tạo từ Google Chat và trả về phản hồi cho không gian.

Thay thế hàm onMessage() trong Code.gs bằng mã sau. Đoạn mã này tạo ra 2 nút: Đặt chế độ vắng mặt trong Gmail và Chặn ngày trong Lịch trong thẻ được gửi đến Google Chat.

Code.gs

const REASON = {
  SICK: 'Out sick',
  OTHER: 'Out of office'
};
/**
 * Responds to a MESSAGE event triggered in Google Chat.
 * @param {object} event the event object from Google Chat
 * @return {object} JSON-formatted response
 */
function onMessage(event) {
  console.info(event);
  const reason = REASON.OTHER;
  const name = event.user.displayName;
  const userMessage = event.message.text;

  // If the user said that they were 'sick', adjust the image in the
  // header sent in response.
  if (userMessage.indexOf('sick') > -1) {
    // Hospital material icon
    HEADER.header.imageUrl = 'https://goo.gl/mnZ37b';
    reason = REASON.SICK;
  } else if (userMessage.indexOf('vacation') > -1) {
    // Spa material icon
    HEADER.header.imageUrl = 'https://goo.gl/EbgHuc';
  }

  const widgets = [{
    textParagraph: {
      text: 'Hello, ' + name + '.<br/>Are you taking time off today?'
    }
  }, {
    buttons: [{
      textButton: {
        text: 'Set vacation in Gmail',
        onClick: {
          action: {
            actionMethodName: 'turnOnAutoResponder',
            parameters: [{
              key: 'reason',
              value: reason
            }]
          }
        }
      }
    }, {
      textButton: {
        text: 'Block out day in Calendar',
        onClick: {
          action: {
            actionMethodName: 'blockOutCalendar',
            parameters: [{
              key: 'reason',
              value: reason
            }]
          }
        }
      }
    }]
  }];
  return createCardResponse(widgets);
}

Để xử lý sự kiện CARD_CLICKED, bạn phải thêm hàm onCardClick() vào tập lệnh của ứng dụng Chat. Thêm đoạn mã sau đây để xác định hàm onCardClick() Code.gs.

Code.gs

/**
 * Responds to a CARD_CLICKED event triggered in Google Chat.
 * @param {object} event the event object from Google Chat
 * @return {object} JSON-formatted response
 * @see https://developers.google.com/workspace/chat/receive-respond-interactions
 */
function onCardClick(event) {
  console.info(event);
  let message = '';
  const reason = event.action.parameters[0].value;
  if (event.action.actionMethodName == 'turnOnAutoResponder') {
    turnOnAutoResponder(reason);
    message = 'Turned on vacation settings.';
  } else if (event.action.actionMethodName == 'blockOutCalendar') {
    blockOutCalendar(reason);
    message = 'Blocked out your calendar for the day.';
  } else {
    message = "I'm sorry; I'm not sure which button you clicked.";
  }
  return { text: message };
}

Khi phản hồi lượt nhấp của người dùng, giờ đây, ứng dụng Chat sẽ thực hiện một trong hai việc: đặt thư trả lời vắng mặt của người dùng trong Gmail thành thông báo "vắng mặt" hoặc lên lịch họp cả ngày trên Lịch của người dùng. Để hoàn thành những nhiệm vụ này, ứng dụng sẽ gọi dịch vụ nâng cao của Gmail và dịch vụ Lịch.

Thêm mã sau vào tập lệnh để tích hợp ứng dụng Chat với Gmail và Lịch.

Code.gs

const ONE_DAY_MILLIS = 24 * 60 * 60 * 1000;
/**
 * Turns on the user's vacation response for today in Gmail.
 * @param {string} reason the reason for vacation, either REASON.SICK or REASON.OTHER
 */
function turnOnAutoResponder(reason) {
  let currentTime = (new Date()).getTime();
  Gmail.Users.Settings.updateVacation({
    enableAutoReply: true,
    responseSubject: reason,
    responseBodyHtml: "I'm out of the office today; will be back on the next business day.<br><br><i>Created by Attendance Chat app!</i>",
    restrictToContacts: true,
    restrictToDomain: true,
    startTime: currentTime,
    endTime: currentTime + ONE_DAY_MILLIS
  }, 'me');
}

/**
 * Places an all-day meeting on the user's Calendar.
 * @param {string} reason the reason for vacation, either REASON.SICK or REASON.OTHER
 */
function blockOutCalendar(reason) {
  CalendarApp.createAllDayEvent(reason, new Date(), new Date(Date.now() + ONE_DAY_MILLIS));
}

Cuối cùng, bạn phải bật dịch vụ nâng cao của Gmail trong dự án. Để bật Gmail API, hãy làm như sau:

Trong trình chỉnh sửa Apps Script, bên cạnh Dịch vụ, hãy nhấp vào biểu tượng Thêm dịch vụ .
Chọn Gmail API.
Nhấp vào Trang tổng quan API của Google Cloud Platform bên dưới để mở Google Cloud Console.
Nhấp vào Bật API và dịch vụ.
Tìm Gmail API rồi nhấp vào Gmail API.
Trên trang Gmail API, hãy nhấp vào Bật.

Kiểm thử ứng dụng Chat

Để kiểm thử phiên bản này của ứng dụng Chat, hãy mở tin nhắn trực tiếp mà bạn đã bắt đầu ở các bước trước trong Google Chat rồi nhập Tôi sắp đi nghỉ. Ứng dụng sẽ phản hồi bằng một thẻ tương tự như hình ảnh bên dưới.

Lưu ý: Nếu được yêu cầu cấp quyền truy cập vào ứng dụng, bạn có thể phải nhập lại tin nhắn.

7. Xin chúc mừng!

Giờ đây, ứng dụng Chat của bạn có thể phản hồi tin nhắn của người dùng, đặt chế độ trả lời tự động khi đi vắng trong Gmail và thêm sự kiện kéo dài cả ngày vào Lịch của họ.

Nội dung đã đề cập

Tạo và xuất bản một ứng dụng Google Chat bằng Apps Script
Trả lời tin nhắn của người dùng bằng một câu trả lời đơn giản
Tương tác với các dịch vụ khác của Google Workspace thay cho người dùng thông qua Ứng dụng Chat

Đi nghỉ mát bằng ứng dụng Google Chat Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Giới thiệu

Kiến thức bạn sẽ học được

Bạn cần có

2. Nhận mã mẫu

Tải mã xuống

Sao chép kho lưu trữ GitHub

3. Tạo trình xử lý cho các sự kiện trên Google Chat

Tạo một dự án Apps Script

Sự kiện trong Google Chat

Code.gs

4. Phát hành và kiểm thử ứng dụng Chat

Cập nhật tệp kê khai tập lệnh

appsscript.json

Tạo một dự án trên Google Cloud

Xuất bản ứng dụng lên Chat

Kiểm thử ứng dụng Chat

5. Xác định phản hồi có định dạng thẻ

Câu trả lời trên thẻ

Code.gs

Kiểm thử ứng dụng Chat

6. Phản hồi khi nhấp vào nút trong thẻ

Thẻ tương tác

Code.gs

Code.gs

Code.gs

Kiểm thử ứng dụng Chat

7. Xin chúc mừng!

Nội dung đã đề cập

Tìm hiểu thêm

Đi nghỉ mát bằng ứng dụng Google Chat