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

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

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

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

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

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

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

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

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

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

บริการ Apps Script

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

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

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

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

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

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

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

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

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

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

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

4. จดบันทึกคีย์ API ของคุณเพื่อใช้ในขั้นตอนถัดไป

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

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

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

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

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

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

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

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

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

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

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

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

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

1. คลิก ตัวแก้ไข ในโปรเจ็กต์ Apps Script
2. แทนที่ YOUR_API_KEY ด้วยคีย์ API สำหรับ Google Books API ที่สร้างใน ส่วนก่อนหน้า
3. คลิกทำให้ใช้งานได้ > ทดสอบการทำให้ใช้งานได้
4. คลิกติดตั้ง > เสร็จสิ้น

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

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

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

ตรวจสอบโค้ด

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

ดูซอร์สโค้ด

appsscript.json

solutions/add-on/book-smartchip/appsscript.json

ดูใน GitHub

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

Code.gs

solutions/add-on/book-smartchip/Code.js

ดูใน GitHub

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