API Tutorial Pour les Débutants Avec Google Sheets & Apps Script

Video google sheet call api

Dans ce tutoriel API pour les débutants, vous apprendrez comment vous connecter à des API en utilisant Google Apps Script pour récupérer des données provenant d’une tierce partie et les afficher dans votre feuille de calcul Google Sheets.

Exemple 1: Connexion de Google Sheets à l’API Numbers

Nous allons commencer par quelque chose de très simple dans ce tutoriel API pour les débutants, afin que vous puissiez vous concentrer sur les données et ne pas vous perdre dans des lignes et des lignes de code.

Commençons par écrire un court programme qui appelle l’API Numbers et demande un fait mathématique de base.

Étape 1: Ouvrez une nouvelle feuille

Ouvrez une nouvelle feuille de calcul Google Sheets vide et renommez-la : « Exemple API Numbers »

Étape 2: Accédez à l’éditeur de script

Accédez à Outils > Éditeur de scripts…

Étape 3: Nommez votre projet

Une nouvelle fenêtre s’ouvrira et c’est là que nous écrirons notre code. Nommez le projet : « Exemple API Numbers »

Étape 4: Ajoutez le code d’exemple d’API

Supprimez tout le code qui se trouve actuellement dans le fichier Code.gs et remplacez-le par ceci :

function callNumbers() {
  // Appeler l'API Numbers pour un fait mathématique aléatoire
  var response = UrlFetchApp.fetch("http://numbersapi.com/random/math");
  Logger.log(response.getContentText());
}

Nous utilisons la classe UrlFetchApp pour communiquer avec d’autres applications sur Internet afin d’accéder à des ressources, pour récupérer une URL.

Votre fenêtre de code devrait maintenant ressembler à ceci :

Numbers API Google Apps Script code

Étape 5: Exécutez votre fonction

Exécutez la fonction en cliquant sur le bouton de lecture dans la barre d’outils.

Étape 6: Autorisez votre script

Cela vous demandera d’autoriser votre script à se connecter à un service externe. Cliquez sur « Examiner les autorisations », puis sur « Autoriser » pour continuer.

Étape 7: Affichez les journaux

Félicitations, votre programme s’est maintenant exécuté. Il a envoyé une demande à un tiers pour obtenir des données (dans ce cas, un fait mathématique aléatoire) et ce service a répondu avec ces données.

Mais attendez, où est-ce ? Comment pouvons-nous voir ces données ?

Eh bien, vous remarquerez que la ligne 5 de notre code ci-dessus était Logger.log(…), ce qui signifie que nous avons enregistré le texte de la réponse dans nos fichiers journaux.

Alors allons y jeter un œil.

Allez dans le menu « Exécution » puis « Journal d’exécution »

Vous verrez votre réponse (vous pouvez bien sûr avoir un fait différent) :

[17-02-03 08:52:41:236 PST] 1158 est le nombre maximum de morceaux dans un tore qui peut être coupé en 18 morceaux.

ce qui ressemble à ceci dans la fenêtre contextuelle :

Apps script logger output

Super ! Essayez de l’exécuter plusieurs fois, vérifiez les journaux et vous verrez des faits différents.

Ensuite, essayez de changer l’URL avec ces exemples pour voir des données différentes dans la réponse :

http://numbersapi.com/random/trivia
http://numbersapi.com/4/17/date
http://numbersapi.com/1729

Vous pouvez également les insérer directement dans votre navigateur si vous voulez jouer avec. Plus d’informations sur la page Numbers API.

Alors, que faire si nous voulons afficher le résultat dans notre feuille de calcul ?

Eh bien, c’est assez facile.

Étape 8: Ajouter des données à la feuille

Ajoutez ces quelques lignes de code (lignes 7, 8 et 9) sous votre code existant :

function callNumbers() {
  // Appeler l'API Numbers pour un fait mathématique aléatoire
  var response = UrlFetchApp.fetch("http://numbersapi.com/random/math");
  Logger.log(response.getContentText());

  var fact = response.getContentText();

  var sheet = SpreadsheetApp.getActiveSheet();
  sheet.getRange(1,1).setValue([fact]);
}

La ligne 7 assigne simplement le texte de la réponse (nos données) à une variable appelée « fact », afin que nous puissions nous y référer en utilisant ce nom.

La ligne 8 récupère notre feuille active actuelle (Sheet1 de l’exemple API Numbers) et l’assigne à une variable appelée « sheet », afin que nous puissions y accéder en utilisant ce nom.

Enfin, à la ligne 9, nous obtenons la cellule A1 (plage en 1,1) et nous définissons la valeur de cette cellule comme étant égale à la variable « fact », qui contient le texte de la réponse.

Étape 9: Exécutez et ré-autorisez

Exécutez à nouveau votre programme. On vous demandera d’autoriser votre script à voir et gérer vos feuilles de calcul dans Google Drive, alors cliquez sur « Autoriser ».

Étape 10: Voir les données externes dans votre feuille

Vous devriez maintenant voir le fait aléatoire s’afficher dans votre feuille de calcul Google :

Random math fact from Numbers API in Google Sheet

C’est génial !

Pour récapituler nos progrès jusqu’à présent dans ce tutoriel API pour les débutants : Nous avons demandé des données à un service tiers sur Internet. Ce service a répondu avec les données que nous voulions et maintenant nous les avons affichées dans notre feuille de calcul Google !

Étape 11: Copier les données dans une nouvelle cellule

Le script tel qu’il est écrit dans ce tutoriel API pour les débutants écrasera toujours la cellule A1 avec votre nouveau fait à chaque fois que vous exécutez le programme. Si vous souhaitez créer une liste et continuer à ajouter de nouveaux faits sous les anciens, apportez cette légère modification à la ligne 9 de votre code (indiquée ci-dessous), afin d’écrire la réponse dans la première ligne vide :

function callNumbers() {
  // Appeler l'API Numbers pour un fait mathématique aléatoire
  var response = UrlFetchApp.fetch("http://numbersapi.com/random/math");
  Logger.log(response.getContentText());

  var fact = response.getContentText();

  var sheet = SpreadsheetApp.getActiveSheet();
  sheet.getRange(sheet.getLastRow() + 1,1).setValue([fact]);
}

Votre sortie ressemblera maintenant à ceci :

Random math facts from Numbers API in Google Sheet

Une dernière chose que nous pourrions vouloir faire avec cette application est d’ajouter un menu à notre feuille de calcul Google, afin que nous puissions exécuter le script à partir de là plutôt que depuis l’éditeur de scripts. C’est simple et sympa !

Étape 12: Ajouter le code pour un menu personnalisé

Ajoutez le code suivant dans votre éditeur de script :

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Menu personnalisé Numbers API')
      .addItem('Afficher un fait aléatoire', 'callNumbers')
      .addToUi();
}

Votre code final pour le script Numbers API devrait maintenant correspondre à ce code sur GitHub.

Étape 13: Ajouter le menu personnalisé

Exécutez la fonction « onOpen », qui ajoutera le menu à la feuille de calcul. Nous ne devons faire cette étape qu’une seule fois.

Ajouter le menu d'applications script personnalisées

Étape 14: Exécutez votre script depuis le menu personnalisé

Utilisez le nouveau menu pour exécuter votre script à partir de la feuille de calcul Google et regardez des faits aléatoires apparaître dans votre feuille de calcul Google !

Utilisez le menu d'applications script personnalisées

Bon, prêt à essayer quelque chose de plus difficile ?

Créons une application de découverte musicale dans Google Sheets.

Exemple 2: Application de découverte musicale utilisant l’API iTunes

Cette application récupère le nom d’un artiste de la feuille de calcul Google Sheets, envoie une demande à l’API iTunes pour récupérer des informations sur cet artiste et les renvoie. Elle affiche ensuite les albums, les titres des chansons, les illustrations et ajoute même un lien vers un extrait de la chanson.

Ce n’est en réalité pas aussi difficile que ça en a l’air.

Se mettre en route avec l’explorateur d’API iTunes

Commencez par une feuille de calcul vide, nommez-la « Explorateur d’API iTunes » et ouvrez l’éditeur de scripts Google Apps.

Effacez le code Google Apps Script existant et collez ce code pour commencer :

function calliTunes() {
  // Appeler l'API iTunes
  var response = UrlFetchApp.fetch("https://itunes.apple.com/search?term=coldplay");
  Logger.log(response.getContentText());
}

Exécutez le programme et acceptez les autorisations requises. Vous obtiendrez une sortie de ce genre :

iTunes API output

Woah, il y a beaucoup plus de données retournées cette fois-ci, nous allons donc devoir les filtrer pour extraire les éléments qui nous intéressent.

Analyse des données iTunes

Alors essayez ceci. Mettez à jour votre code pour analyser les données et en extraire certaines informations :

function calliTunes() {
  // Appeler l'API iTunes
  var response = UrlFetchApp.fetch("https://itunes.apple.com/search?term=coldplay");

  // Analyser la réponse JSON
  var json = response.getContentText();
  var data = JSON.parse(json);

  Logger.log(data);
  Logger.log(data["results"]);
  Logger.log(data["results"][0]);
  Logger.log(data["results"][0]["artistName"]);
  Logger.log(data["results"][0]["collectionName"]);
  Logger.log(data["results"][0]["artworkUrl60"]);
  Logger.log(data["results"][0]["previewUrl"]);
}
  • La ligne 4: Nous envoyons une demande à l’API iTunes pour rechercher des données sur Coldplay. L’API répond avec ces données et nous les assignons à une variable appelée « response », afin que nous puissions utiliser ce nom pour nous y référer.

  • Les lignes 7 et 8: Nous récupérons le texte contextuel de la réponse et analysons ensuite la réponse JSON pour obtenir la représentation d’objet native. Cela nous permet d’extraire différentes parties des données.

Donc, en regardant d’abord l’objet de données (ligne 10) :

iTunes api data packet

Vous pouvez voir que c’est un objet avec une accolade au début {.

La structure ressemble à ceci :

{ resultCount = 50, results = [ ….les données qui nous intéressent…. ] }

iTunes api data packet

  • La ligne 11 : nous extrayons les « results », qui est la partie des données qui contient les informations sur l’artiste et les chansons, en utilisant :
data["results"]
  • La ligne 12 : Il y a plusieurs albums retournés pour cet artiste, nous prenons donc le premier en utilisant la référence [0] car l’index commence à partir de 0 :
data["results"][0]

Cela affiche toutes les informations disponibles de l’API iTunes pour cet artiste et cet album spécifiques :

  • Les lignes 13-16 : Dans cette partie des données, nous pouvons extraire les détails spécifiques que nous voulons en utilisant leurs noms :
data["results"][0]["artistName"], data["results"][0]["collectionName"], data["results"][0]["artworkUrl60"], data["results"][0]["previewUrl"]

pour donner la sortie suivante :

iTunes api details

Utilisez des commentaires (« // ») au début d’une ligne pour empêcher le Logger de journaliser les objets de données complets si vous le souhaitez. C’est-à-dire, modifiez les lignes 10, 11 et 12 comme suit :

// Logger.log(data);
// Logger.log(data[“results”]);
// Logger.log(data[“results”][0]);

Cela vous permettra de voir plus facilement les détails que vous extrayez.

Mettre tout cela en place dans une application

Si nous voulons construire l’application qui est affichée dans le GIF au début de cet article, nous devons passer par quelques étapes :

  • Configuration de la feuille de calcul Google
  • Récupération du nom de l’artiste dans la feuille de calcul Google à l’aide de Google Apps Script
  • Demande de données à iTunes pour cet artiste à l’aide de Google Apps Script
  • Analyse de la réponse pour extraire l’objet de données pertinent à l’aide de Google Apps Script
  • Extraction des détails spécifiques que nous voulons (nom de l’album, titre de la chanson, illustration de l’album, URL de prévisualisation)
  • Effacer tous les résultats précédents dans la feuille de calcul avant d’afficher les nouveaux résultats
  • Affichage des nouveaux résultats dans notre feuille de calcul Google
  • Ajout d’un menu personnalisé pour exécuter le programme à partir de la feuille de calcul Google, pas de l’éditeur de scripts

Il est toujours bon de rédiger un plan comme celui-ci avant de vous engager à écrire des lignes de code. De cette manière, vous pouvez réfléchir à l’ensemble de l’application et à ce qu’elle va faire, ce qui vous permet de faire des choix efficaces pour la configuration de votre code.

Custom iTunes API menu

Maintenant, vous pouvez exécuter le programme pour rechercher votre artiste préféré !

Amusez-vous bien avec ces différentes API !

Articles en lien