ดูตัวอย่างลิงก์จาก Google Books ด้วยชิปอัจฉริยะ

ระดับการเขียนโค้ด: ปานกลาง
ระยะเวลา: 30 นาที
ประเภทโปรเจ็กต์: ส่วนเสริมของ Google Workspace

วัตถุประสงค์

• ทำความเข้าใจสิ่งที่ส่วนเสริมทำ
• ทำความเข้าใจวิธีสร้างส่วนเสริมโดยใช้ Apps Script และทำความเข้าใจสิ่งที่บริการ Apps Script ทำ
• ตั้งค่าสภาพแวดล้อม
• ตั้งค่าสคริปต์
• เรียกใช้สคริปต์

เกี่ยวกับส่วนเสริมของ Google Workspace นี้

ในตัวอย่างนี้ คุณจะสร้างส่วนเสริมของ Google Workspace ที่แสดงตัวอย่างลิงก์จาก Google Books ใน เอกสาร Google เอกสาร เมื่อคุณพิมพ์หรือวาง URL ของ Google Books ลงในเอกสาร ส่วนเสริมจะจดจำลิงก์และทริกเกอร์การแสดงตัวอย่างลิงก์ หากต้องการแสดงตัวอย่างลิงก์ คุณสามารถแปลงลิงก์เป็นชิปอัจฉริยะและวางเมาส์เหนือลิงก์เพื่อดูการ์ดที่แสดงข้อมูลเพิ่มเติมเกี่ยวกับหนังสือ

ส่วนเสริมนี้ใช้ บริการ UrlFetch ของ Apps Script เพื่อ เชื่อมต่อกับ Google Books API และรับ ข้อมูลเกี่ยวกับ Google Books เพื่อแสดงใน Google เอกสาร

วิธีการทำงาน

ในไฟล์ Manifest ของส่วนเสริม Google Workspace สคริปต์จะกำหนดค่า ส่วนเสริมเพื่อขยาย Google เอกสารและทริกเกอร์การแสดงตัวอย่างลิงก์ สำหรับ URL ที่ตรงกับรูปแบบบางอย่างจากเว็บไซต์ Google Books (https://books.google.com)

ในไฟล์โค้ด สคริปต์จะเชื่อมต่อกับ Google Books API และใช้ URL เพื่อรับข้อมูลเกี่ยวกับหนังสือ (ซึ่งเป็นอินสแตนซ์ของ Volume ทรัพยากร) สคริปต์ใช้ข้อมูลนี้เพื่อสร้างชิปอัจฉริยะที่แสดงชื่อหนังสือและการ์ดแสดงตัวอย่างที่แสดงข้อมูลสรุป จำนวนหน้า รูปภาพปกหนังสือ และจำนวนการให้คะแนน

บริการ Apps Script

ส่วนเสริมนี้ใช้บริการต่อไปนี้

• บริการ UrlFetch - เชื่อมต่อกับ Google Books API เพื่อรับข้อมูลเกี่ยวกับหนังสือ (ซึ่งเป็นอินสแตนซ์ของทรัพยากร Volume ของ API)
• บริการการ์ด - สร้างอินเทอร์เฟซผู้ใช้ ของส่วนเสริม

ข้อกำหนดเบื้องต้น

หากต้องการใช้ตัวอย่างนี้ คุณต้องมีข้อกำหนดเบื้องต้นต่อไปนี้

• บัญชี Google (บัญชี Google Workspace อาจต้องได้รับการอนุมัติจากผู้ดูแลระบบ)

• เว็บเบราว์เซอร์ที่เข้าถึงอินเทอร์เน็ตได้

• โปรเจ็กต์ Google Cloud

ตั้งค่าสภาพแวดล้อม

ส่วนต่อไปนี้จะตั้งค่าสภาพแวดล้อมสำหรับการสร้างส่วนเสริม

เปิดโปรเจ็กต์ที่อยู่ในระบบคลาวด์ในคอนโซล Google Cloud

หากยังไม่ได้เปิด ให้เปิดโปรเจ็กต์ที่อยู่ในระบบคลาวด์ที่คุณต้องการใช้สำหรับตัวอย่างนี้โดยทำดังนี้

1. ในคอนโซล Google Cloud ให้ไปที่หน้าเลือกโปรเจ็กต์

   เลือกโปรเจ็กต์ที่อยู่ในระบบคลาวด์

2. เลือกโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google ที่คุณต้องการใช้ หรือคลิกสร้างโปรเจ็กต์ แล้วทำตามวิธีการบนหน้าจอ หากสร้างโปรเจ็กต์ Google Cloud คุณอาจต้อง เปิดการเรียกเก็บเงินสำหรับโปรเจ็กต์

เปิด Google Books API

ส่วนเสริมนี้เชื่อมต่อกับ Google Books API คุณต้องเปิด Google API ในโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google ก่อนจึงจะใช้งานได้ คุณสามารถเปิด API อย่างน้อย 1 รายการในโปรเจ็กต์ Google Cloud เดียวได้

• เปิด Books API ในโปรเจ็กต์ที่อยู่ในระบบคลาวด์

  เปิด API

กำหนดค่าหน้าจอขอความยินยอม OAuth

ส่วนเสริมนี้ต้องใช้โปรเจ็กต์ที่อยู่ในระบบคลาวด์ที่มีหน้าจอขอความยินยอมที่กำหนดค่าไว้ การกำหนดค่าหน้าจอขอความยินยอม OAuth จะกำหนดสิ่งที่ Google แสดงต่อผู้ใช้และลงทะเบียนแอปเพื่อให้คุณเผยแพร่แอปได้ในภายหลัง

1. ในคอนโซล Google API ให้ไปที่เมนู menu > แพลตฟอร์มการตรวจสอบสิทธิ์ของ Google > การสร้างแบรนด์

   ไปที่การสร้างแบรนด์

2. หากกำหนดค่าแพลตฟอร์มการตรวจสอบสิทธิ์ของ Google ไว้แล้ว คุณสามารถกำหนดค่าการตั้งค่าหน้าจอขอความยินยอม OAuth ต่อไปนี้ใน การสร้างแบรนด์, กลุ่มเป้าหมาย และ การเข้าถึงข้อมูล หากเห็นข้อความว่า Google Auth platform not configured yet (ยังไม่ได้กำหนดค่าแพลตฟอร์มการตรวจสอบสิทธิ์ของ Google) ให้คลิกเริ่มต้นใช้งาน โดยทำดังนี้
1. ในส่วนข้อมูลแอป ให้ป้อนชื่อแอปในช่องชื่อแอป
2. ในส่วนอีเมลสนับสนุนสำหรับผู้ใช้ ให้เลือกอีเมลสนับสนุนที่ผู้ใช้สามารถติดต่อคุณได้หากมีคำถามเกี่ยวกับการให้คำยินยอม
3. คลิกถัดไป
4. ในส่วนกลุ่มเป้าหมาย ให้เลือกภายใน
5. คลิกถัดไป
6. ในส่วนข้อมูลติดต่อ ให้ป้อนอีเมล ที่คุณต้องการรับการแจ้งเตือนเกี่ยวกับการเปลี่ยนแปลงในโปรเจ็กต์
7. คลิกถัดไป
8. ในส่วนเสร็จสิ้น ให้อ่านนโยบายข้อมูลผู้ใช้สำหรับบริการ Google API และหากยอมรับ ให้เลือกฉันยอมรับบริการ Google API: นโยบายข้อมูลผู้ใช้
9. คลิกต่อไป
10. คลิกสร้าง
3. ตอนนี้คุณสามารถข้ามการเพิ่มขอบเขตได้ ในอนาคต เมื่อสร้างแอปเพื่อใช้ภายนอกองค์กร Google Workspace คุณต้องเปลี่ยนประเภทผู้ใช้ เป็นภายนอก จากนั้น เพิ่มขอบเขตการให้สิทธิ์ที่แอปต้องใช้ ดูข้อมูลเพิ่มเติมได้ในคู่มือฉบับเต็มเกี่ยวกับ การกำหนดค่าหน้าจอขอคำยินยอม OAuth

รับคีย์ API สำหรับ Google Books API

1. ไปที่คอนโซล Google API ตรวจสอบว่าโปรเจ็กต์ที่เปิดใช้การเรียกเก็บเงินเปิดอยู่

2. ในคอนโซล Google API ให้ไปที่เมนู menu > API และบริการ > ข้อมูลเข้าสู่ระบบ

   ไปที่ข้อมูลเข้าสู่ระบบ

3. คลิกสร้างข้อมูลเข้าสู่ระบบ > คีย์ API

4. จดคีย์ API ไว้เพื่อใช้ในขั้นตอนถัดไป

ตั้งค่าสคริปต์

ส่วนต่อไปนี้จะตั้งค่าสคริปต์สำหรับการสร้างส่วนเสริม

สร้างโปรเจ็กต์ Apps Script

1. คลิกปุ่มต่อไปนี้เพื่อเปิดโปรเจ็กต์ Apps Script แสดงตัวอย่างลิงก์จาก Google Books
   เปิดโปรเจ็กต์
2. คลิก info_outline ภาพรวม
3. ในหน้าภาพรวม ให้คลิก ทำสำเนา
4. ในสำเนาโปรเจ็กต์ Apps Script ให้ไปที่ไฟล์ Code.gs แล้วแทนที่ YOUR_API_KEY ด้วยคีย์ API ที่คุณสร้างขึ้นในส่วนก่อนหน้า

ในอนาคต หากต้องการใช้ Google API บางรายการหรือเผยแพร่แอป คุณต้องเชื่อมโยงโปรเจ็กต์ที่อยู่ในระบบคลาวด์กับโปรเจ็กต์ Apps Script แต่สำหรับคู่มือนี้ คุณไม่จำเป็นต้องทำเช่นนั้น ดูข้อมูลเพิ่มเติมได้ในคู่มือโปรเจ็กต์ Google Cloud

ทดสอบส่วนเสริม

ส่วนต่อไปนี้จะทดสอบส่วนเสริมที่คุณสร้างขึ้น

ติดตั้งการทำให้ใช้งานได้สำหรับการทดสอบ

1. ในโปรเจ็กต์ Apps Script ให้คลิก code โปรแกรมแก้ไข
2. คลิกทำให้ใช้งานได้ > การทำให้ใช้งานได้สำหรับการทดสอบ
3. คลิกติดตั้ง > เสร็จสิ้น

แสดงตัวอย่างลิงก์ใน Google เอกสาร

1. สร้างเอกสาร Google เอกสารที่ docs.new
2. วาง URL ต่อไปนี้ลงในเอกสาร แล้วกดปุ่ม Tab เพื่อ แปลง URL เป็นชิปอัจฉริยะ: https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
3. วางเมาส์เหนือชิปอัจฉริยะ และเมื่อได้รับข้อความแจ้ง ให้อนุญาตการเข้าถึงเพื่อเรียกใช้ส่วนเสริม การ์ดแสดงตัวอย่างจะแสดงข้อมูลเกี่ยวกับหนังสือ

รูปภาพต่อไปนี้แสดงการแสดงตัวอย่างลิงก์

ตรวจสอบโค้ด

หากต้องการตรวจสอบโค้ด Apps Script สำหรับส่วนเสริมนี้ ให้คลิกดูซอร์สโค้ด เพื่อขยายส่วน

{
  "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"
          }
        }
      ]
    }
  }
}

/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

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();
  }
}

หัวข้อที่เกี่ยวข้อง

• แสดงตัวอย่างลิงก์ด้วยชิปอัจฉริยะ
• เอกสารอ้างอิง Google Books API