Wyświetlanie podglądu linków z Książek Google za pomocą elementów inteligentnych

Poziom kodowania: dla średnio zaawansowanych
Czas trwania: 30 minut
Typ projektu: dodatek do Google Workspace

Cele

• Dowiedz się, do czego służy ten dodatek.
• Dowiedz się, jak utworzyć dodatek za pomocą Apps Script i dowiedz się, do czego służy Apps Script. co oferuje usługi Google.
• skonfigurować środowisko,
• Skonfiguruj skrypt.
• Uruchom skrypt.

Informacje o tym dodatku do Google Workspace

W tym przykładzie tworzysz dodatek do Google Workspace, który wyświetla podgląd linków z Książki Google w Dokumenty Google. Gdy wpiszesz lub wklejasz adres URL z Książek Google w polu dokument, dodatek rozpoznaje i wyświetli podgląd linku. Aby wyświetlić podgląd linku, możesz przekonwertować parametr do elementu inteligentnego i najedź kursorem na link, aby wyświetlić kartę, która wyświetla więcej informacji o książce.

Ten dodatek używa: usługa UrlFetch Apps Script do Połącz z Książkami Google API i pobierz informacje na temat Książek Google, które mają być wyświetlane w Dokumentach Google.

Jak to działa

W manifeście dodatku do Google Workspace , skrypt konfiguruje dodatek w celu rozszerzenia Dokumentów Google i linku aktywującego. podglądów URL-i, które pasują do określonych wzorców w witrynie Książek Google. (https://books.google.com).

W pliku kodu skrypt łączy się z interfejsem API Książek Google i używa adresu URL uzyskać informacje o książce (będące wystąpieniem elementu Volume ). skrypt wykorzystuje te informacje do wygenerowania elementu inteligentnego, który wyświetla tytuł i kartę podglądu z podsumowaniem, liczbą stron i obrazem okładkę książki i liczbę ocen.

Usługi Apps Script

Ten dodatek korzysta z następujących usług:

• UrlFetch Service – łączy się z Książkami Google. API do pobierania informacji o książkach (będących instancjami interfejsów API Volume).
• Card Service (Usługa karty) – tworzy użytkownika. interfejsu dodatku.

Wymagania wstępne

Aby korzystać z tego przykładu, musisz spełnić te wymagania wstępne:

• Konto Google (konta Google Workspace mogą wymagają zatwierdzenia przez administratora).

• Przeglądarka z dostępem do internetu.

• projekt Google Cloud; z powiązanym kontem rozliczeniowym. Więcej informacji znajdziesz w artykule Włączanie rozliczeń projekt.

Konfigurowanie środowiska

Sekcje poniżej pozwalają skonfigurować środowisko do tworzenia Google Analytics.

Otwieranie projektu Cloud w konsoli Google Cloud

Jeśli projekt Cloud nie jest jeszcze otwarty, otwórz go, którego chcesz używać. dla tego przykładu:

1. W konsoli Google Cloud otwórz stronę Wybierz projekt.

   Wybierz projekt Cloud

2. Wybierz projekt Google Cloud, którego chcesz użyć. Możesz też kliknąć Utwórz projekt i postępować zgodnie z instrukcjami wyświetlanymi na ekranie. Jeśli tworzysz projekt Google Cloud, konieczne może być włączenie dla niego płatności.

Włączanie interfejsu API Książek Google

Ten dodatek łączy się z interfejsem API Książek Google. Zanim zaczniesz korzystać z interfejsów API Google, musisz je włączyć w projekcie Google Cloud. W jednym projekcie Google Cloud możesz włączyć 1 lub więcej interfejsów API.

• W swoim projekcie Cloud włącz Books API.

  Włączanie interfejsu API

Konfigurowanie ekranu zgody OAuth

Ten dodatek wymaga projektu Cloud z skonfigurowany ekran zgody. Skonfigurowanie ekranu akceptacji OAuth określa, co Google wyświetla aplikację użytkownikom i rejestruje ją, aby umożliwić Ci jej opublikowanie później.

1. W konsoli Google Cloud otwórz menu menu. > Interfejsy API i Usługi > Ekran zgody OAuth.

   Otwórz ekran zgody OAuth

2. Jako Typ użytkownika wybierz Wewnętrzny i kliknij Utwórz.
3. Wypełnij formularz rejestracji aplikacji, a potem kliknij Zapisz i kontynuuj.

4. Na razie możesz pominąć dodawanie zakresów i kliknąć Zapisz i kontynuuj. w przyszłości, gdy utworzysz aplikację do użytku poza swoim Google Workspace, musisz zmienić Typ użytkownika na Zewnętrzny, a następnie: dodaj zakresy autoryzacji wymagane przez aplikację.

5. Przejrzyj podsumowanie rejestracji aplikacji. Aby wprowadzić zmiany, kliknij Edytuj. Jeśli aplikacja z rejestracji wszystko jest w porządku, kliknij Back to Dashboard (Powrót do panelu).

Uzyskiwanie klucza interfejsu API Książek Google

1. Otwórz konsolę Google Cloud. Sprawdź, czy projekt z włączonymi płatnościami jest otwarty.

2. W konsoli Google Cloud otwórz menu menu. > Interfejsy API i Usługi > Dane logowania.

   Przejdź do danych logowania

3. Kliknij Utwórz dane logowania > Klucz interfejsu API.

4. Zanotuj swój klucz interfejsu API – będzie Ci potrzebny w późniejszym kroku.

Konfigurowanie skryptu

Skrypty do tworzenia Google Analytics.

Tworzenie projektu Apps Script

1. Kliknij ten przycisk, aby otworzyć linki podglądu w Książkach Google Projekt Apps Script.
   Otwórz projekt
2. Kliknij info_outline Przegląd.
3. Na stronie Przegląd kliknij Utwórz kopię.
4. W kopii projektu Apps Script otwórz Code.gs. i zastąp YOUR_API_KEY kluczem interfejsu API wygenerowanym w pliku poprzedniej sekcji.

Kopiuj numer projektu Cloud

1. W konsoli Google Cloud otwórz menu menu. > Administracja Administracja > Ustawienia.

   Otwórz stronę Uprawnienia Ustawienia administratora

2. Skopiuj wartość z pola Numer projektu.

Ustawianie projektu Cloud w projekcie Apps Script

1. W projekcie Apps Script kliknij Ustawienia projektu.
2. W sekcji Projekt Google Cloud Platform (GCP) kliknij Zmień projekt.
3. W polu Numer projektu GCP wklej numer projektu Google Cloud.
4. Kliknij Set project (Ustaw projekt).

Testowanie dodatku

Poniższe sekcje pozwalają przetestować utworzony dodatek.

Instalowanie wdrożenia testowego

1. W projekcie Apps Script kliknij code Edytor.
2. Zastąp YOUR_API_KEY kluczem interfejsu API Google Books API utworzonym w poprzedniej sekcji.
3. Kliknij Wdróż > Testuj wdrożenia.
4. Kliknij Zainstaluj > Gotowe.

Wyświetlanie podglądu linku w Dokumentach Google

1. Utwórz dokument w Dokumentach Google na stronie docs.new.
2. Wklej następujący adres URL do dokumentu i naciśnij klawisz Tab, aby przekonwertować adres URL na element inteligentny: https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
3. Najedź kursorem na element inteligentny, a gdy pojawi się prośba, zezwól na dostęp do i uruchomić dodatek. Pojawi się karta podglądu informacje o książce.

Na tej ilustracji widać podgląd linku:

Sprawdź kod

Aby zobaczyć kod Apps Script dla tego kliknij Wyświetl kod źródłowy, aby rozwinąć :

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

Powiązane artykuły

• Podgląd linków z elementami inteligentnymi
• Dokumentacja interfejsu API Książek Google