Prévisualiser des liens Google Livres avec les chips intelligents

Niveau de codage: intermédiaire
Durée: 30 minutes
Type de projet: module complémentaire Google Workspace

Objectifs

  • Découvrez à quoi sert le module complémentaire.
  • Apprenez à créer un module complémentaire à l'aide d'Apps Script et à quoi servent les services Apps Script.
  • configurer votre environnement ;
  • Configurez le script.
  • Exécutez le script.

À propos de ce module complémentaire Google Workspace

Dans cet exemple, vous créez un module complémentaire Google Workspace qui affiche un aperçu des liens de Google Livres dans un document Google Docs. Lorsque vous saisissez ou collez une URL Google Livres dans un document, le module complémentaire reconnaît le lien et en déclenche un aperçu. Pour prévisualiser le lien, vous pouvez le convertir en chip intelligent et maintenir le pointeur sur le lien pour afficher une fiche contenant plus d'informations sur le livre.

Ce module complémentaire utilise le service UrlFetch d'Apps Script pour se connecter à l'API Google Livres et obtenir des informations sur Google Livres à afficher dans Google Docs.

Fonctionnement

Dans le fichier manifeste du module complémentaire Google Workspace, le script configure le module complémentaire pour étendre les documents Google Docs et déclencher les aperçus de liens pour les URL correspondant à certains formats du site Web Google Livres (https://books.google.com).

Dans le fichier de code, le script se connecte à l'API Google Livres et utilise l'URL pour obtenir des informations sur le livre (qui est une instance de la ressource Volume). Le script utilise ces informations pour générer un chip intelligent qui affiche le titre du livre, ainsi qu'une carte d'aperçu affichant un résumé, le nombre de pages, une image de la couverture du livre et le nombre de notes.

Services Apps Script

Ce module complémentaire utilise les services suivants:

Conditions préalables

Pour utiliser cet exemple, vous devez remplir les conditions préalables suivantes:

Configurer votre environnement

Les sections suivantes permettent de configurer votre environnement pour créer le module complémentaire.

Ouvrir votre projet Cloud dans la console Google Cloud

S'il n'est pas déjà ouvert, ouvrez le projet Cloud que vous souhaitez utiliser pour cet exemple:

  1. Dans la console Google Cloud, accédez à la page Sélectionner un projet.

    Sélectionner un projet Cloud

  2. Sélectionnez le projet Google Cloud que vous souhaitez utiliser. Vous pouvez également cliquer sur Créer un projet et suivre les instructions à l'écran. Si vous créez un projet Google Cloud, vous devrez peut-être activer la facturation pour le projet.

Activer l'API Google Books

Ce module complémentaire se connecte à l'API Google Books. Avant d'utiliser les API Google, vous devez les activer dans un projet Google Cloud. Vous pouvez activer une ou plusieurs API dans un même projet Google Cloud.

Ce module complémentaire nécessite un projet Cloud avec un écran de consentement configuré. La configuration de l'écran de consentement OAuth permet de définir ce que Google présente aux utilisateurs et d'enregistrer votre application pour que vous puissiez la publier ultérieurement.

  1. Dans la console Google Cloud, accédez à Menu > API et services > Écran de consentement OAuth.

    Accéder à l'écran de consentement OAuth

  2. Pour Type d'utilisateur, sélectionnez Interne, puis cliquez sur Créer.
  3. Remplissez le formulaire d'inscription de l'application, puis cliquez sur Enregistrer et continuer.

  4. Pour l'instant, vous pouvez ignorer l'ajout de champs d'application et cliquer sur Enregistrer et continuer. À l'avenir, lorsque vous créerez une application pour une utilisation en dehors de votre organisation Google Workspace, vous devrez définir le type d'utilisateur sur Externe, puis ajouter les niveaux d'autorisation requis par votre application.

  5. Consultez le récapitulatif d'enregistrement de votre application. Pour apporter des modifications, cliquez sur Modifier. Si l'enregistrement de l'application semble correct, cliquez sur Retour au tableau de bord.

Obtenir une clé API pour l'API Google Livres

  1. Accédez à Google Cloud Console. Assurez-vous que votre projet pour lequel la facturation est activée est ouvert.

  2. Dans la console Google Cloud, accédez à Menu > API et services > Identifiants.

    Accéder à "Identifiants"

  3. Cliquez sur Créer des identifiants > Clé API.

  4. Notez votre clé API. Vous en aurez besoin lors d'une prochaine étape.

Configurer le script

Les sections suivantes configurent le script de création du module complémentaire.

Créer le projet Apps Script

  1. Cliquez sur le bouton suivant pour ouvrir le projet Apps Script Preview links from Google Livres (Aperçu des liens de Google Livres).
    Ouvrir le projet
  2. Cliquez sur Vue d'ensemble.
  3. Sur la page "Vue d'ensemble", cliquez sur Créer une copie Icône pour créer une copie.
  4. Dans votre copie du projet Apps Script, accédez au fichier Code.gs et remplacez YOUR_API_KEY par la clé API que vous avez générée dans la section précédente.

Copier le numéro du projet Cloud

  1. Dans la console Google Cloud, accédez à Menu > IAM et administration > Paramètres.

    Accéder à la page Paramètres de la section IAM et administration

  2. Dans le champ Numéro du projet, copiez la valeur.

Définir le projet Cloud du projet Apps Script

  1. Dans votre projet Apps Script, cliquez sur Icône des paramètres du projet Paramètres du projet.
  2. Sous Projet Google Cloud Platform (GCP), cliquez sur Changer de projet.
  3. Dans Numéro de projet GCP, collez le numéro de projet Google Cloud.
  4. Cliquez sur Définir un projet.

Tester le module complémentaire

Les sections suivantes testent le module complémentaire que vous avez créé.

Installer un déploiement test

  1. Dans votre projet Apps Script, cliquez sur Éditeur.
  2. Remplacez YOUR_API_KEY par la clé API de l'API Google Livres, créée dans une section précédente.
  3. Cliquez sur Déployer > Tester les déploiements.
  4. Cliquez sur Installer > OK.
  1. Créez un document Google Docs à l'adresse docs.new.
  2. Collez l'URL suivante dans le document, puis appuyez sur la touche Tabulation pour convertir l'URL en chip intelligent : https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
  3. Maintenez le pointeur sur le chip intelligent et, lorsque vous y êtes invité, autorisez l'accès pour exécuter le module complémentaire. La fiche d'aperçu affiche des informations sur le livre.

L'image suivante illustre l'aperçu du lien:

Lien d'aperçu du livre "Software Engineering at Google" (Ingénierie logicielle chez Google).

Examiner le code

Pour examiner le code Apps Script de ce module complémentaire, cliquez sur Afficher le code source afin de développer la section:

Afficher le code source

appsscript.json

solutions/add-on/book-smartchip/appsscript.json
{
  "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
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();
  }
}