ดูตัวอย่างลิงก์จาก 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 ที่มีบัญชีสำหรับการเรียกเก็บเงินที่เชื่อมโยง ดูเปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์

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

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

เปิดโปรเจ็กต์ Cloud ใน Google Cloud Console

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

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

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

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

เปิด Google Books API

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

• เปิด Books API ในโปรเจ็กต์ Cloud

  เปิด API

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

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

1. ในคอนโซล Google Cloud ให้ไปที่เมนู menu > Google Auth platform > การสร้างแบรนด์

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

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

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

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

2. ในคอนโซล Google Cloud ให้ไปที่เมนู 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 ที่คุณสร้างในส่วนก่อนหน้า

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

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

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

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

ตั้งค่าโปรเจ็กต์ Cloud ของโปรเจ็กต์ Apps Script

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

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

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

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

1. ในโปรเจ็กต์ Apps Script ให้คลิก code Editor
2. แทนที่ YOUR_API_KEY ด้วยคีย์ API สำหรับ Google Books API ที่สร้างไว้ใน ส่วนก่อนหน้า
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