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

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

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

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

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

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

ส่วนเสริมนี้ใช้ UrlFetch Service ของ 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 Cloud ที่ต้องการใช้ หรือคลิกสร้างโปรเจ็กต์ แล้วทำตามวิธีการบนหน้าจอ หากสร้างโปรเจ็กต์ Google Cloud คุณอาจต้องเปิดการเรียกเก็บเงินสำหรับโปรเจ็กต์

เปิด Google Books API

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

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

  เปิด API

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

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

1. ในคอนโซล Google Cloud ให้ไปที่เมนู menu > API และบริการ > หน้าจอขอความยินยอม OAuth

   ไปที่หน้าจอขอความยินยอม OAuth

2. สำหรับประเภทผู้ใช้ ให้เลือกภายใน แล้วคลิกสร้าง
3. กรอกแบบฟอร์มการลงทะเบียนแอปให้เสร็จสมบูรณ์ แล้วคลิกบันทึกและดำเนินการต่อ

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

5. ดูสรุปการลงทะเบียนแอป หากต้องการเปลี่ยนแปลง ให้คลิกแก้ไข หากการลงทะเบียนแอปถูกต้องแล้ว ให้คลิกกลับไปยังหน้าแดชบอร์ด

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

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

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

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

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

4. จดคีย์ API ไว้ใช้ในภายหลัง

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

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

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

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

1. ในคอนโซล Google Cloud ให้ไปที่เมนู menu > IAM และผู้ดูแลระบบ > การตั้งค่า

   ไปที่ IAM และการตั้งค่าผู้ดูแลระบบ

2. คัดลอกค่าในช่องหมายเลขโปรเจ็กต์

ตั้งค่าโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของโปรเจ็กต์ Apps Script

1. ในโปรเจ็กต์ Apps Script ให้คลิก การตั้งค่าโปรเจ็กต์
2. ในส่วนโครงการ Google Cloud Platform (GCP) ให้คลิกเปลี่ยนโครงการ
3. วางหมายเลขโปรเจ็กต์ Google Cloud ในหมายเลขโปรเจ็กต์ GCP
4. คลิกตั้งค่าโครงการ

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

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

1. ในโปรเจ็กต์ Apps Script ให้คลิก code เอดิเตอร์
2. เปิดไฟล์ Code.gs แล้วคลิกเรียกใช้ เมื่อได้รับข้อความแจ้ง ให้ให้สิทธิ์สคริปต์
3. คลิกทำให้ใช้งานได้ > ทดสอบการทำให้ใช้งานได้
4. คลิกติดตั้ง > เสร็จสิ้น

แสดงตัวอย่างลิงก์ใน 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"
          }
        }
      ]
    }
  }
}

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