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

  • comprendre à quoi sert le module complémentaire ;
  • Découvrez comment créer un module complémentaire à l'aide d'Apps Script et comment fonctionnent 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 déclenche son aperçu. Pour afficher un aperçu du lien, vous pouvez le convertir en chip intelligent et pointer dessus afin d'afficher une fiche contenant plus d'informations sur le livre.

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

Comment ça marche ?

Dans le fichier manifeste du module complémentaire Google Workspace, le script le configure pour étendre Google Docs et déclencher des aperçus de liens pour les URL correspondant à certains formats du site Web de 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 et une fiche d'aperçu qui affiche 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:

Prérequis

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

Configurer votre environnement

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 ce projet.

Activer l'API Google Books

Ce module complémentaire se connecte à l'API Google Livres. 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'enregistrement de l'application, puis cliquez sur Save and Continue (Enregistrer et continuer).

  4. Pour l'instant, vous pouvez ignorer l'ajout de champs d'application et cliquer sur Enregistrer et continuer. Par la suite, lorsque vous créerez une application destinée à être utilisée 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ésumé d'enregistrement de votre application. Pour apporter des modifications, cliquez sur Modifier. Si l'enregistrement de l'application semble correct, cliquez sur Back to Dashboard (Revenir au tableau de bord).

Obtenir une clé API pour l'API Google Books

  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, car vous en aurez besoin lors d'une prochaine étape.

Configurer le script

Créer le projet Apps Script

  1. Cliquez sur le bouton suivant pour ouvrir le projet Apps Script 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 Icône permettant de créer une copie 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 de 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 du projet Google Cloud.
  4. Cliquez sur Définir un projet.

Tester le module complémentaire

Installer un déploiement test

  1. Dans votre projet Apps Script, cliquez sur Éditeur .
  2. Ouvrez le fichier Code.gs, puis cliquez sur Exécuter. Lorsque vous y êtes invité, autorisez le script.
  3. Cliquez sur Déployer > Tester les déploiements.
  4. Cliquez sur Installer > OK.
  1. Créez un document Google Docs sur docs.new.
  2. Collez l'URL suivante dans le document, puis appuyez sur la touche Tabulation pour la convertir 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 carte d'aperçu affiche des informations sur le livre.

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

Aperçu sous forme de lien du livre "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 ci-dessous:

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

Étapes suivantes