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

สิ่งที่ต้องดำเนินการก่อน

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

• บัญชี 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

ส่วนเสริมนี้ต้องใช้โปรเจ็กต์ที่อยู่ในระบบคลาวด์ที่มีหน้าจอคำยินยอมที่กำหนดค่าไว้ การกำหนดค่าหน้าจอคำยินยอม 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. คลิกปุ่มต่อไปนี้เพื่อเปิดลิงก์ดูตัวอย่างจาก Google Books โปรเจ็กต์ Apps Script
   เปิดโครงการ
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 ให้คลิก Project Settings
2. ในส่วนโครงการ Google Cloud Platform (GCP) ให้คลิกเปลี่ยนโครงการ
3. วางหมายเลขโปรเจ็กต์ Google Cloud ในหมายเลขโปรเจ็กต์ GCP
4. คลิกตั้งค่าโปรเจ็กต์

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

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

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

1. คลิก code ตัวแก้ไข ในโปรเจ็กต์ Apps Script
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