Vorschaulinks aus Google Books mit Smartchips

Programmierstufe: Mittel
Dauer: 30 Minuten
Projekttyp: Google Workspace-Add-on

Zielsetzungen

• Informieren Sie sich über die Funktion des Add-ons.
• Sie wissen, wie Sie ein Add-on mit und die Funktionsweise von Apps Script was die Dienste tun.
• die Umgebung einrichten
• Richten Sie das Skript ein.
• Führen Sie das Skript aus.

Informationen zu diesem Google Workspace-Add-on

In diesem Beispiel erstellen Sie ein Google Workspace-Add-on, das Links Google Books in Google Docs-Dokument. Wenn Sie eine Google Books-URL in ein -Dokument enthält, erkennt das Add-on und löst eine Linkvorschau aus. Um eine Vorschau des Links anzuzeigen, können Sie den in einen Smartchip einfügen und den Mauszeiger über den Link halten, um eine Karte aufzurufen, zeigt weitere Informationen zum Buch an.

Dieses Add-on verwendet URLFetch-Dienst von Apps Script, um eine Verbindung zum Google Books- API und rufen Sie Informationen über Google Books, die in Google Docs angezeigt werden.

Funktionsweise

Im Manifest des Google Workspace-Add-ons konfiguriert, konfiguriert das Skript Das Add-on zur Erweiterung von Google Docs und zum Auslösen des Links Vorschauen für URLs, die bestimmten Mustern von der Google Books-Website entsprechen (https://books.google.com).

In der Codedatei stellt das Skript eine Verbindung zur Google Books API her und verwendet die URL um Informationen über das Buch zu erhalten (eine Instanz des Volume Ressource). Die generiert das Skript anhand dieser Informationen einen Smartchip, der die Titel und eine Vorschaukarte mit einer Zusammenfassung, der Seitenzahl, Buchcover und die Anzahl der Bewertungen.

Apps Script-Dienste

Dieses Add-on verwendet die folgenden Dienste:

• UrlFetch Service: stellt eine Verbindung mit Google Books her. API zum Abrufen von Informationen zu Büchern (Instanzen der APIs) Volume-Ressource).
• Card Service (Kartendienst): Erstellt den Nutzer des Add-ons.

Vorbereitung

Damit Sie dieses Beispiel verwenden können, müssen folgende Voraussetzungen erfüllt sein:

• Ein Google-Konto (Google Workspace-Konten können Genehmigung des Administrators erforderlich.

• Ein Webbrowser mit Zugriff auf das Internet.

• Ein Google Cloud-Projekt mit einem verknüpften Rechnungskonto. Weitere Informationen finden Sie unter Abrechnung aktivieren Projekt.

Umgebung einrichten

In den folgenden Abschnitten richten Sie Ihre Umgebung zum Erstellen der Add-on.

Cloud-Projekt in der Google Cloud Console öffnen

Falls noch nicht geschehen, öffnen Sie das gewünschte Cloud-Projekt. für dieses Beispiel:

1. Rufen Sie in der Google Cloud Console die Seite Projekt auswählen auf.

   Cloud-Projekt auswählen

2. Wählen Sie das Google Cloud-Projekt aus, das Sie verwenden möchten. Oder klicken Sie auf Projekt erstellen und folgen Sie der Anleitung auf dem Bildschirm. Wenn Sie ein Google Cloud-Projekt erstellen, müssen Sie möglicherweise die Abrechnung für das Projekt aktivieren.

Die Google Books API aktivieren

Dieses Add-on stellt eine Verbindung zur Google Books API her. Bevor Sie Google APIs verwenden können, müssen Sie sie in einem Google Cloud-Projekt aktivieren. Sie können eine oder mehrere APIs in einem einzelnen Google Cloud-Projekt aktivieren.

• Aktivieren Sie in Ihrem Cloud-Projekt die Books API.

  API aktivieren

OAuth-Zustimmungsbildschirm konfigurieren

Für dieses Add-on ist ein Cloud-Projekt mit einer Zustimmungsbildschirm konfiguriert. Durch die Konfiguration des OAuth-Zustimmungsbildschirms wird definiert, Google zeigt Nutzern Ihre App an und registriert sie, damit Sie sie veröffentlichen können .

1. Öffnen Sie in der Google Cloud Console das Menü menu. > APIs und Dienste > OAuth-Zustimmungsbildschirm.

   Zum OAuth-Zustimmungsbildschirm

2. Wählen Sie für Nutzertyp die Option Intern aus und klicken Sie dann auf Erstellen.
3. Füllen Sie das App-Registrierungsformular aus und klicken Sie dann auf Speichern und fortfahren.

4. Vorerst können Sie das Hinzufügen von Bereichen überspringen und auf Speichern und fortfahren klicken. Wenn Sie in Zukunft eine App erstellen, die außerhalb Ihres Google Workspace-Organisation verwenden, müssen Sie den Nutzertyp in Extern ändern. fügen Sie die Autorisierungsbereiche hinzu, die Ihre Anwendung benötigt.

5. Überprüfen Sie Ihre App-Registrierungsübersicht. Klicken Sie auf Bearbeiten, um Änderungen vorzunehmen. Wenn die App mit der Registrierung in Ordnung ist, klicken Sie auf Zurück zum Dashboard.

API-Schlüssel für die Google Books API anfordern

1. Öffnen Sie die Google Cloud Console. Das Projekt mit aktivierter Abrechnung muss geöffnet sein.

2. Öffnen Sie in der Google Cloud Console das Menü menu. > APIs und Dienste > Anmeldedaten.

   Zu den Anmeldedaten

3. Klicken Sie auf Anmeldedaten erstellen > API-Schlüssel.

4. Notieren Sie sich Ihren API-Schlüssel. Sie benötigen ihn in einem späteren Schritt.

Skript einrichten

In den folgenden Abschnitten wird das Skript zum Erstellen des Add-on.

Apps Script-Projekt erstellen

1. Klicken Sie auf die folgende Schaltfläche, um die Vorschaulinks von Google Books zu öffnen. Apps Script-Projekt
   Projekt öffnen
2. Klicken Sie auf info_outline Übersicht.
3. Klicken Sie auf der Übersichtsseite auf Kopie erstellen.
4. Gehen Sie in Ihrer Kopie des Apps Script-Projekts zum Code.gs und ersetzen Sie YOUR_API_KEY durch den API-Schlüssel, den Sie im vorherigen Abschnitt.

Cloud-Projektnummer kopieren

1. Öffnen Sie in der Google Cloud Console das Menü menu. > IAM und Verwaltung > Einstellungen.

   Zu IAM und Administratoreinstellungen

2. Kopieren Sie den Wert im Feld Projektnummer.

Cloud-Projekt des Apps Script-Projekts festlegen

1. In Ihrem Apps Script-Projekt Klicken Sie auf Projekteinstellungen:
2. Klicken Sie unter Google Cloud Platform-Projekt (GCP-Projekt) auf Projekt ändern.
3. Fügen Sie in GCP-Projektnummer die Google Cloud-Projektnummer ein.
4. Klicken Sie auf Projekt festlegen.

Add-on testen

In den folgenden Abschnitten wird das von Ihnen erstellte Add-on getestet.

Testbereitstellung installieren

1. Klicken Sie in Ihrem Apps Script-Projekt auf code Editor.
2. Ersetzen Sie YOUR_API_KEY durch den API-Schlüssel für die Google Books API, der in einem vorherigen Abschnitt.
3. Klicken Sie auf Bereitstellen > Bereitstellungen testen.
4. Klicken Sie auf Installieren > Fertig.

Vorschau eines Links in Google Docs ansehen

1. Erstellen Sie ein Google Docs-Dokument unter docs.new.
2. Fügen Sie die folgende URL in das Dokument ein und drücken Sie die Tabulatortaste, um wandeln Sie die URL in einen Smartchip um: https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
3. Halten Sie den Mauszeiger über den Smartchip und autorisieren Sie bei Aufforderung den Zugriff auf um das Add-on auszuführen. Die Vorschaukarte wird angezeigt. Informationen über das Buch.

Die folgende Abbildung zeigt die Linkvorschau:

Code ansehen

So überprüfen Sie den Apps Script-Code: klicken Sie auf Quellcode ansehen, um das Abschnitt:

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

Weitere Informationen

• Vorschaulinks mit Smartchips
• Referenzdokumentation zur Google Books API