Xem trước đường liên kết trên Google Sách bằng khối thông minh

Cấp độ lập trình: Trung cấp
Thời lượng: 30 phút
Loại dự án: Tiện ích bổ sung của Google Workspace

Mục tiêu

• Tìm hiểu chức năng của tiện ích bổ sung.
• Tìm hiểu cách tạo tiện ích bổ sung bằng Apps Script và tìm hiểu về Apps Script các dịch vụ khác.
• Thiết lập môi trường.
• Thiết lập tập lệnh.
• Chạy tập lệnh.

Giới thiệu về tiện ích bổ sung này của Google Workspace

Trong mẫu này, bạn sẽ tạo một Tiện ích bổ sung của Google Workspace có thể xem trước các đường liên kết trong Google Sách ở Tài liệu trên Google Tài liệu. Khi bạn nhập hoặc dán URL của Google Sách vào một tài liệu đó thì tiện ích bổ sung này sẽ nhận dạng và kích hoạt bản xem trước đường liên kết. Để xem trước đường liên kết, bạn có thể chuyển đổi liên kết vào một khối thông minh và giữ con trỏ trên đường liên kết để xem một thẻ hiện thêm thông tin về cuốn sách.

Tiện ích bổ sung này sử dụng UrlFetch Service của Apps Script để kết nối với Google Sách API và nhận thông tin về Google Sách để hiển thị trong Google Tài liệu.

Cách hoạt động

Trong tệp kê khai của tiện ích bổ sung cho Google Workspace , tập lệnh sẽ định cấu hình tiện ích bổ sung để mở rộng Google Tài liệu và liên kết kích hoạt bản xem trước URL khớp với một số mẫu nhất định trên trang web Google Sách (https://books.google.com).

Trong tệp mã, tập lệnh kết nối với Google Books API và sử dụng URL này để nhận thông tin về cuốn sách (một phiên bản của Volume tài nguyên). Chiến lược phát hành đĩa đơn tập lệnh sử dụng thông tin này để tạo một khối thông minh hiển thị tiêu đề và thẻ xem trước hiển thị bản tóm tắt, số lượng trang, hình ảnh bìa sách và số lượt xếp hạng.

Dịch vụ Apps Script

Tiện ích bổ sung này sử dụng các dịch vụ sau:

• UrlFetch Service – Kết nối với Google Sách API để nhận thông tin về sách (là các phiên bản của API) Tài nguyên Volume).
• Dịch vụ thẻ – Tạo người dùng giao diện của tiện ích bổ sung.

Điều kiện tiên quyết

Để sử dụng mẫu này, bạn cần có các điều kiện tiên quyết sau đây:

• Tài khoản Google (Tài khoản Google Workspace có thể yêu cầu quản trị viên phê duyệt).

• Một trình duyệt web có quyền truy cập vào Internet.

• Một dự án trên Google Cloud thông qua một tài khoản thanh toán liên kết. Hãy tham khảo bài viết Bật tính năng thanh toán cho dự án.

Thiết lập môi trường

Các phần sau đây thiết lập môi trường để bạn tạo tiện ích bổ sung.

Mở dự án Cloud trong bảng điều khiển Google Cloud

Mở dự án Cloud mà bạn định sử dụng nếu chưa mở cho mẫu này:

1. Trong bảng điều khiển Google Cloud, hãy chuyển đến trang Chọn dự án.

   Chọn một dự án trên Google Cloud

2. Chọn dự án Google Cloud mà bạn muốn sử dụng. Hoặc nhấp vào Tạo dự án rồi làm theo hướng dẫn trên màn hình. Nếu tạo một dự án trên Google Cloud, có thể bạn sẽ phải bật tính năng thanh toán cho dự án đó.

Bật Google Books API (API Google Sách)

Tiện ích bổ sung này kết nối với Google Books API. Trước khi sử dụng các API của Google, bạn cần bật các API này trong một dự án trên Google Cloud. Bạn có thể bật một hoặc nhiều API trong một dự án Google Cloud.

• Trong dự án trên Google Cloud, hãy bật Books API (API Sách).

  Bật API

Định cấu hình màn hình xin phép bằng OAuth

Tiện ích bổ sung này yêu cầu phải có một dự án trên Google Cloud có màn hình xin phép. Việc định cấu hình màn hình xin phép bằng OAuth sẽ xác định những thông tin Google hiển thị với người dùng và đăng ký ứng dụng của bạn để bạn có thể phát hành ứng dụng đó sau.

1. Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn menu > API và Dịch vụ > Màn hình xin phép bằng OAuth.

   Chuyển đến màn hình xin phép bằng OAuth

2. Đối với Loại người dùng, hãy chọn Nội bộ, rồi nhấp vào Tạo.
3. Hoàn tất biểu mẫu đăng ký ứng dụng, sau đó nhấp vào Lưu và tiếp tục.

4. Hiện tại, bạn có thể bỏ qua bước thêm phạm vi rồi nhấp vào Lưu và tiếp tục. Trong tương lai, khi bạn tạo một ứng dụng để sử dụng bên ngoài Nếu là tổ chức Google Workspace, bạn phải thay đổi Loại người dùng thành Bên ngoài, sau đó thêm phạm vi uỷ quyền mà ứng dụng của bạn yêu cầu.

5. Xem lại bản tóm tắt về gói đăng ký ứng dụng của bạn. Để chỉnh sửa, hãy nhấp vào Chỉnh sửa. Nếu ứng dụng có vẻ ổn, hãy nhấp vào Quay lại trang tổng quan.

Nhận khoá API cho Google Books API

1. Chuyển đến bảng điều khiển Google Cloud. Hãy đảm bảo dự án có tính năng thanh toán của bạn đang mở.

2. Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn menu > API và Dịch vụ > Thông tin đăng nhập.

   Chuyển đến phần Thông tin xác thực

3. Nhấp vào Tạo thông tin xác thực > Khoá API.

4. Hãy ghi lại khoá API của bạn để sử dụng trong bước sau.

Thiết lập tập lệnh

Các phần sau đây thiết lập tập lệnh để tạo tiện ích bổ sung.

Tạo dự án Apps Script

1. Nhấp vào nút sau để mở Đường liên kết xem trước trên Google Sách Dự án Apps Script.
   Mở dự án
2. Nhấp vào info_outline Tổng quan.
3. Trên trang tổng quan, hãy nhấp vào Tạo bản sao.
4. Trong bản sao dự án Apps Script, hãy chuyển đến Code.gs và thay thế YOUR_API_KEY bằng khoá API mà bạn đã tạo trong phần trước.

Sao chép số dự án trên đám mây

1. Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn menu > IAM và Quản trị > Cài đặt.

   Chuyển đến IAM và Chế độ cài đặt dành cho quản trị viên

2. Trong trường Project number (Số dự án), hãy sao chép giá trị.

Đặt dự án trên đám mây của dự án Apps Script

1. Trong dự án Apps Script, nhấp vào Cài đặt dự án.
2. Trong mục Dự án Google Cloud Platform (GCP), hãy nhấp vào Thay đổi dự án.
3. Trong mục Số dự án GCP, hãy dán số dự án trên Google Cloud.
4. Nhấp vào Đặt dự án.

Kiểm thử tiện ích bổ sung

Các phần sau đây sẽ kiểm tra tiện ích bổ sung mà bạn đã tạo.

Cài đặt hoạt động triển khai thử nghiệm

1. Trong dự án Apps Script, hãy nhấp vào code Editor (Trình chỉnh sửa).
2. Thay thế YOUR_API_KEY bằng khoá API cho Google Books API (API Google Sách), được tạo trong phần trước.
3. Nhấp vào Triển khai > Kiểm thử các bản triển khai.
4. Nhấp vào Cài đặt > Xong.

Xem trước đường liên kết trong Google Tài liệu

1. Tạo tài liệu trên Google Tài liệu tại docs.new.
2. Dán URL sau đây vào tài liệu và nhấn phím tab để chuyển đổi URL thành một khối thông minh: https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
3. Giữ con trỏ trên khối thông minh và khi được nhắc, hãy cho phép truy cập vào thực thi tiện ích bổ sung. Thẻ xem trước sẽ xuất hiện về cuốn sách.

Hình ảnh sau đây cho thấy bản xem trước đường liên kết:

Xem lại đoạn mã

Để xem lại mã Apps Script cho vấn đề này tiện ích bổ sung, nhấp vào Xem mã nguồn để mở rộng mục:

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/script.external_request"
  ],
  "urlFetchWhitelist": [
    "https://www.googleapis.com/books/v1/volumes/"
  ],
  "addOns": {
    "common": {
      "name": "Preview Books Add-on",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/library-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "bookLinkPreview",
          "patterns": [
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books"
            },
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books/edition"
            }
          ],
          "labelText": "Book",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/book-icon.png",
          "localizedLabelText": {
            "es": "Libros"
          }
        }
      ]
    }
  }
}

function getBook(id) {
  const apiKey = 'YOUR_API_KEY'; // Replace with your API key
  const apiEndpoint = `https://www.googleapis.com/books/v1/volumes/${id}?key=${apiKey}&country=US`;
  const response = UrlFetchApp.fetch(apiEndpoint);
  return JSON.parse(response);
}

function bookLinkPreview(event) {
 if (event.docs.matchedUrl.url) {
    const segments = event.docs.matchedUrl.url.split('/');
    const volumeID = segments[segments.length - 1];

    const bookData = getBook(volumeID);
    const bookTitle = bookData.volumeInfo.title;
    const bookDescription = bookData.volumeInfo.description;
    const bookImage = bookData.volumeInfo.imageLinks.small;
    const bookAuthors = bookData.volumeInfo.authors;
    const bookPageCount = bookData.volumeInfo.pageCount;

    const previewHeader = CardService.newCardHeader()
      .setSubtitle('By ' + bookAuthors)
      .setTitle(bookTitle);

    const previewPages = CardService.newDecoratedText()
      .setTopLabel('Page count')
      .setText(bookPageCount);

    const previewDescription = CardService.newDecoratedText()
      .setTopLabel('About this book')
      .setText(bookDescription).setWrapText(true);

    const previewImage = CardService.newImage()
      .setAltText('Image of book cover')
      .setImageUrl(bookImage);

    const buttonBook = CardService.newTextButton()
      .setText('View book')
      .setOpenLink(CardService.newOpenLink()
        .setUrl(event.docs.matchedUrl.url));

    const cardSectionBook = CardService.newCardSection()
      .addWidget(previewImage)
      .addWidget(previewPages)
      .addWidget(CardService.newDivider())
      .addWidget(previewDescription)
      .addWidget(buttonBook);

    return CardService.newCardBuilder()
    .setHeader(previewHeader)
    .addSection(cardSectionBook)
    .build();
  }
}

Chủ đề có liên quan

• Xem trước đường liên kết bằng khối thông minh
• Tài liệu tham khảo về API Google Sách