Melihat pratinjau link dari Google Buku dengan smart chip

Level coding: Menengah
Durasi: 30 menit
Jenis project: Add-on Google Workspace

Tujuan

• Memahami fungsi add-on.
• Pahami cara membuat add-on menggunakan Apps Script, dan memahami apa itu Apps Script layanan tersebut.
• Menyiapkan lingkungan Anda.
• Siapkan skrip.
• Jalankan skrip.

Tentang Add-on Google Workspace ini

Dalam contoh ini, Anda membuat Add-on Google Workspace yang mempratinjau link dari Google Buku di Dokumen Google Dokumen. Saat Anda mengetik atau menempelkan URL Google Buku ke dokumen, add-on mengenali dan memicu pratinjau link. Untuk melihat pratinjau link, Anda dapat mengonversi ke {i>smart chip<i} dan arahkan kursor ke tautan untuk melihat kartu yang menampilkan informasi selengkapnya tentang buku.

Add-on ini menggunakan Layanan UrlFetch Apps Script untuk hubungkan ke Google Buku API dan dapatkan informasi tentang Google Buku untuk ditampilkan di Google Dokumen.

Cara kerjanya

Di manifes add-on Add-on Google Workspace , skrip akan mengonfigurasi add-on untuk memperluas Google Dokumen dan memicu link pratinjau URL yang cocok dengan pola tertentu dari situs Google Buku (https://books.google.com).

Di file kode, skrip terhubung ke Google Books API dan menggunakan URL untuk mendapatkan informasi tentang buku (yang merupakan instance Volume resource). Tujuan menggunakan informasi ini untuk menghasilkan {i>smart chip<i} yang menampilkan dan kartu pratinjau yang menampilkan ringkasan, jumlah halaman, dan gambar sampul buku, dan jumlah peringkat.

Layanan Apps Script

Add-on ini menggunakan layanan berikut:

• UrlFetch Service–Menghubungkan ke Google Buku API untuk mendapatkan informasi tentang buku (yang merupakan instance API Resource Volume).
• Card Service–Membuat pengguna antarmuka add-on ini.

Prasyarat

Untuk menggunakan contoh ini, Anda memerlukan prasyarat berikut:

• Akun Google (Akun Google Workspace mungkin memerlukan persetujuan administrator).

• Browser web dengan akses ke internet.

• Project Google Cloud dengan akun penagihan terkait. Lihat Mengaktifkan penagihan untuk project Anda.

Menyiapkan lingkungan Anda

Bagian berikut menyiapkan lingkungan Anda untuk membangun {i>add-on<i}.

Buka project Cloud Anda di konsol Google Cloud

Jika belum terbuka, buka project Cloud yang ingin Anda gunakan untuk contoh ini:

1. Di konsol Google Cloud, buka halaman Select a project.

   Pilih project Cloud

2. Pilih project Google Cloud yang ingin Anda gunakan. Atau, klik Buat project dan ikuti petunjuk di layar. Jika membuat project Google Cloud, Anda mungkin perlu mengaktifkan penagihan untuk project tersebut.

Mengaktifkan Google Books API

Add-on ini terhubung ke Google Books API. Sebelum menggunakan Google API, Anda harus mengaktifkannya di project Google Cloud. Anda dapat mengaktifkan satu atau beberapa API dalam satu project Google Cloud.

• Di project Cloud Anda, aktifkan Books API.

  Mengaktifkan API

Mengonfigurasi layar izin OAuth

Add-on ini memerlukan project Cloud dengan layar izin yang dikonfigurasi. Mengonfigurasi layar izin OAuth menentukan hal-hal yang Google menampilkan kepada pengguna dan mendaftarkan aplikasi Anda sehingga Anda dapat memublikasikannya nanti.

1. Di konsol Google Cloud, buka Menu menu &gt; API & Layanan &gt; Layar izin OAuth.

   Buka layar izin OAuth

2. Untuk Jenis pengguna, pilih Internal, lalu klik Buat.
3. Lengkapi formulir pendaftaran aplikasi, lalu klik Simpan dan Lanjutkan.

4. Untuk saat ini, Anda dapat melewati penambahan cakupan, lalu mengklik Simpan dan Lanjutkan. Pada masa mendatang, jika Anda membuat aplikasi untuk digunakan di luar organisasi Google Workspace, Anda harus mengubah Jenis pengguna menjadi Eksternal, lalu menambahkan cakupan otorisasi yang dibutuhkan aplikasi Anda.

5. Tinjau ringkasan pendaftaran aplikasi Anda. Untuk melakukan perubahan, klik Edit. Jika aplikasi pendaftaran tampak tidak bermasalah, klik Kembali ke Dasbor.

Mendapatkan kunci API untuk Google Books API

1. Buka Konsol Google Cloud. Pastikan project yang mendukung penagihan terbuka.

2. Di konsol Google Cloud, buka Menu menu &gt; API & Layanan &gt; Kredensial.

   Buka Kredensial

3. Klik Create credentials &gt; API key.

4. Catat kunci API Anda untuk digunakan di langkah berikutnya.

Menyiapkan skrip

Bagian berikut menyiapkan skrip untuk membangun {i>add-on<i}.

Membuat project Apps Script

1. Klik tombol berikut untuk membuka Pratinjau link dari Google Buku Project Apps Script.
   Membuka project
2. Klik info_outline Ringkasan.
3. Di halaman ringkasan, klik Buat salinan.
4. Di salinan project Apps Script, buka Code.gs dan ganti YOUR_API_KEY dengan kunci API yang Anda buat di bagian sebelumnya.

Salin nomor project Cloud

1. Di konsol Google Cloud, buka Menu menu &gt; IAM & Admin &gt; Setelan.

   Buka IAM & Setelan Admin

2. Di kolom Project number, salin nilainya.

Menetapkan project Cloud project Apps Script

1. Di project Apps Script Anda, klik Setelan Project.
2. Pada Google Cloud Platform (GCP) Project, klik Change project.
3. Di GCP project number, tempel nomor project Google Cloud.
4. Klik Set project.

Menguji add-on

Bagian berikut akan menguji add-on yang Anda buat.

Menginstal deployment pengujian

1. Di project Apps Script, klik code Editor.
2. Ganti YOUR_API_KEY dengan kunci API untuk Google Books API, yang dibuat di bagian sebelumnya.
3. Klik Deploy &gt; Test deployment.
4. Klik Instal &gt; Selesai.

Melihat pratinjau link di Google Dokumen

1. Buat dokumen Google Dokumen di docs.new.
2. Tempel URL berikut ke dokumen, dan tekan tombol tab untuk mengonversi URL menjadi smart chip: https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
3. Arahkan kursor ke smart chip, dan jika diminta, otorisasi akses ke jalankan add-on ini. Kartu pratinjau akan ditampilkan informasi tentang buku.

Gambar berikut menampilkan pratinjau link:

Meninjau kode

Untuk meninjau kode Apps Script ini add-on, klik Lihat kode sumber untuk meluaskan :

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

Topik terkait

• Melihat pratinjau link dengan smart chip
• Dokumentasi referensi Google Books API