WordPress: Tutoriel API pour les débutants avec Google Sheets et Apps Script

WordPress: Tutoriel API pour les débutants avec Google Sheets et Apps Script

Dans ce didacticiel d’API pour débutants, vous apprendrez à vous connecter aux API à l’aide de Google Apps Script, à récupérer les données d’un tiers et à les afficher dans votre feuille Google.

L’exemple 1 vous montre comment utiliser Google Apps Script pour vous connecter à une API simple afin de récupérer des données et de les afficher dans Google Sheets :

Tutoriel API pour les débutants : faits mathématiques aléatoires de l'API Numbers dans Google Sheet

Dans l’exemple 2, nous utiliserons Google Apps Script pour créer une application de découverte musicale à l’aide de l’API iTunes :

API iTunes avec Google Sheets

Enfin, dans l’exemple 3, je vous laisse vous lancer dans la création d’une application d’exploration de données Star Wars, avec quelques conseils :

Explorateur d'API Star Wars dans Google Sheets à l'aide de Google Apps Script

Tutoriel API pour les débutants : qu’est-ce qu’une API ?

Vous avez probablement déjà entendu le terme API. Peut-être avez-vous entendu comment les entreprises technologiques les utilisent lorsqu’elles transfèrent des données entre leurs applications. Ou comment les entreprises construisent des systèmes complexes à partir de nombreux micro-services plus petits liés par des API, plutôt que comme des programmes monolithiques uniques de nos jours.

API signifie « Application Program Interface », et le terme fait généralement référence aux URL Web qui peuvent être utilisées pour accéder aux données brutes. Fondamentalement, l’API est une interface qui fournit des données brutes au public (bien que beaucoup nécessitent une forme d’authentification).

En tant que développeurs de logiciels tiers, nous pouvons accéder à l’API d’une organisation et utiliser ses données dans nos propres applications.

La bonne nouvelle est qu’il existe de nombreuses API simples sur lesquelles nous pouvons nous améliorer. Nous en verrons trois dans ce didacticiel API pour débutants.

Nous pouvons connecter une feuille Google à une API et ramener les données de cette API (par exemple iTunes) dans notre feuille Google à l’aide de Google Apps Script. C’est amusant et vraiment satisfaisant si vous êtes nouveau dans ce monde.

Tutoriel API pour les débutants : qu’est-ce qu’Apps Script ?

Dans ce tutoriel API pour les débutants, nous utiliserons Script Google Apps pour se connecter à des API externes.

Google Apps Script est un langage de script basé sur Javascript hébergé et exécuté sur des serveurs Google, qui étend les fonctionnalités de Google Apps.

Si vous ne l’avez jamais utilisé auparavant, consultez mon article : Google Apps Script : A Beginner’s Guide

Exemple 1 : Connecter Google Sheets à l’API Numbers

Nous allons commencer par quelque chose de très simple dans ce didacticiel d’API pour 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.

Écrivons un court programme qui appelle l’API Numbers et demande un fait mathématique de base.

Étape 1 : Ouvrir une nouvelle feuille

Ouvrez une nouvelle feuille Google vierge et renommez-la : Exemple d’API de nombres

Étape 2 : Accédez à l’éditeur de scripts d’applications

Aller vers Tools > Script Editor...

Accéder à l'éditeur de script via la barre d'outils

Étape 3 : Nommez votre projet

Un nouvel onglet s’ouvre et c’est là que nous écrirons notre code. Nommez le projet : Exemple d’API de nombres

Étape 4 : ajouter un exemple de code d’API

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

function callNumbers() {
  
  // Call the Numbers API for random math fact
  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 pour accéder aux ressources, pour récupérer une URL.

Maintenant, votre fenêtre de code devrait ressembler à ceci :

Code de script Google Apps de l'API Numbers

Étape 5 : Exécutez votre fonction

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

Bouton Exécuter le script d'applications

É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.

Autorisations de révision des scripts d'applications

Autorisation Apps Script

Étape 7 : Afficher les journaux

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

Mais attendez, c’est où ? Comment voit-on 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 vérifions-le.

Allez dans Affichage > Journaux :

Afficher les journaux de script des applications

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

[17-02-03 08:52:41:236 PST] 1158 is the maximum number of pieces a torus can be cut into with 18 cuts.

qui ressemble à ceci dans la fenêtre popup :

Sortie de l'enregistreur de script d'applications

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

Ensuite, essayez de remplacer l’URL par 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 déposer directement dans votre navigateur si vous souhaitez jouer avec eux. Plus d’informations sur la page API Numbers.

Alors, que se passe-t-il si nous voulons imprimer le résultat sur 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() {
  
  // Call the Numbers API for random math fact
  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]);
  
}

Ligne 7 affecte simplement le texte de réponse (nos données) à une variable appelée fact, nous pouvons donc nous y référer en utilisant ce nom.

Ligne 8 obtient notre feuille active actuelle (feuille de calcul Sheet1 of Numbers API) et l’affecte à une variable appelée sheet, afin que nous puissions y accéder en utilisant ce nom.

Enfin dans ligne 9, nous obtenons la cellule A1 (plage à 1,1) et définissons la valeur dans cette cellule pour qu’elle soit égale à la variable fact, qui contient le texte de la réponse.

Étape 9 : Exécuter et autoriser à nouveau

Exécutez à nouveau votre programme. Vous serez invité à autoriser votre script à afficher et à gérer vos feuilles de calcul dans Google Drive, alors cliquez sur Autoriser :

Autorisations de révision des scripts d'applications

Autorisation de feuille de calcul de script d'applications

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

Vous devriez maintenant voir le fait aléatoire apparaître dans votre feuille Google :

Fait mathématique aléatoire de l'API Numbers dans Google Sheet

À quel point cela est cool!

Pour récapituler nos progrès jusqu’à présent dans ce didacticiel 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 sorties dans notre feuille Google !

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

Le script tel qu’il est écrit dans ce didacticiel 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 ceux existants, apportez cette modification mineure à la ligne 9 de votre code (illustré ci-dessous), pour écrire la réponse dans la première ligne vide :

function callNumbers() {
  
  // Call the Numbers API for random math fact
  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 :

Faits mathématiques aléatoires de l'API Numbers dans Google Sheet

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

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

Ajoutez le code suivant dans votre éditeur de script :

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Custom Numbers API Menu')
      .addItem('Display random number fact','callNumbers')
      .addToUi();
}

Votre code final pour le script de l’API Numbers doit maintenant correspondre à ce code sur GitHub.

Étape 13 : Ajoutez le menu personnalisé

Exécutez la fonction onOpen, qui ajoutera le menu à la feuille de calcul. Nous n’avons besoin de faire cette étape qu’une seule fois.

Ajouter un menu de script d'applications personnalisées

Étape 14 : Exécutez votre script à partir du menu personnalisé

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

Utiliser le menu de script des applications personnalisées

D’accord, prêt à essayer quelque chose d’un peu plus difficile ?

Construisons nous-mêmes 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 à partir de la feuille Google, envoie une demande à l’API iTunes pour récupérer des informations sur cet artiste et les renvoyer. Il affiche ensuite les albums, les titres des chansons, les illustrations et ajoute même un lien pour échantillonner cette piste :

Google Sheets et API iTunes à l'aide d'Apps Script

Ce n’est en fait pas aussi difficile qu’il n’y paraît.

Premiers pas avec l’explorateur d’API iTunes

Commencez avec une feuille Google vierge, nommez-la « iTunes API Explorer » et ouvrez l’éditeur de script Google Apps.

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

function calliTunes() {
  
  // Call the iTunes API
  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 comme celle-ci :

Sortie API iTunes

Woah, il y a beaucoup plus de données renvoyées cette fois, nous allons donc devoir les passer au crible pour extraire les bits que nous voulons.

Analyser les données iTunes

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

function calliTunes() {
  
  // Call the iTunes API
  var response = UrlFetchApp.fetch("https://itunes.apple.com/search?term=coldplay");
  
  // Parse the JSON reply
  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"]);
  
}

Ligne 4 : Nous envoyons une demande à l’API iTunes pour rechercher des données Coldplay. L’API répond avec ces données et nous les attribuons à une variable appelée réponse, nous pouvons donc utiliser ce nom pour y faire référence.

Lignes 7 et 8 : Nous obtenons le texte contextuel des données de réponse, puis analysons la réponse de chaîne JSON pour obtenir la représentation d’objet native. Cela nous permet d’extraire différents bits des données.

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

Paquet de données API iTunes

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

La structure est comme ceci :

{
resultCount = 50,
results = [ ....the data we're after... ]
}

Paquet de données API iTunes

Ligne 11 : nous extrayons les « résultats », qui est la donnée qui contient les informations sur l’artiste et la chanson, en utilisant :

data["results"]

Ligne 12 : Il y a plusieurs albums retournés pour cet artiste, donc nous récupérons le premier en utilisant le [0] référence puisque l’index commence à 0 :

data["results"][0]

Cela montre toutes les informations disponibles à partir de l’API iTunes pour cet artiste et cet album particuliers :

Résultats des données de l'API iTunes

Lignes 13 – 16: Au sein de cette donnée, nous pouvons extraire des détails spécifiques que nous voulons en nous référant à leurs noms :

par exemple. data["results"][0]["collectionName"]

pour donner la sortie suivante :

Détails de l'API iTunes

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

// Logger.log(données);
// Logger.log(données[“results”]);
// Logger.log(données[“results”][0]);

Cela rendra plus facile de voir les détails que vous extrayez.

Mettre tout cela dans une application

Si nous voulons créer l’application qui s’affiche dans le GIF en haut de cet article, nous devons suivre quelques étapes :

  • Configurer la feuille Google
  • Récupérer le nom de l’artiste de la feuille Google avec Google Apps Script
  • Demander des données à iTunes pour cet artiste avec Google Apps Script
  • Analyser la réponse pour extraire l’objet de données pertinent avec Google Apps Script
  • Extraire les détails spécifiques que nous voulons (nom de l’album, titre de la chanson, pochette de l’album, URL de prévisualisation)
  • Effacez tous les résultats précédents dans la feuille Google avant d’afficher les nouveaux résultats
  • Afficher les nouveaux résultats dans notre feuille Google
  • Ajoutez un menu personnalisé pour exécuter le programme à partir de la feuille Google, pas de l’éditeur de script

C’est toujours une bonne idée d’écrire un plan comme celui-ci avant de vous engager à écrire des lignes de code.

De cette façon, 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 avec la façon dont vous configurez votre code.

La première chose à faire est donc de configurer une feuille Google. Je vous laisse le choix, mais voici une capture d’écran de ma configuration de base de Google Sheet :

Feuille Google iTunes

La chose importante à noter est l’emplacement de la cellule où un utilisateur tape le nom de l’artiste (11e rangée, 2e colonne) comme nous y ferons référence dans notre code.

Code de l’explorateur d’API iTunes

Et voici le code Google Apps Script pour notre application :

// --------------------------------------------------------------------------------------------------
//
// iTunes Music Discovery Application in Google Sheets
//
// --------------------------------------------------------------------------------------------------

// custom menu
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Custom iTunes Menu')
      .addItem('Get Artist Data','displayArtistData')
      .addToUi();
}

// function to call iTunes API
function calliTunesAPI(artist) {
  
  // Call the iTunes API
  var response = UrlFetchApp.fetch("https://itunes.apple.com/search?term=" + artist + "&limit=200");
  
  // Parse the JSON reply
  var json = response.getContentText();
  return JSON.parse(json);
  
}


function displayArtistData() {
  
  // pick up the search term from the Google Sheet
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  
  var artist = sheet.getRange(11,2).getValue();
  
  var tracks = calliTunesAPI(artist);
  
  var results = tracks["results"];
  
  var output = []
  
  results.forEach(function(elem,i) {
    var image = '=image("' + elem["artworkUrl60"] + '",4,60,60)';
    var hyperlink = '=hyperlink("' + elem["previewUrl"] + '","Listen to preview")';
    output.push([elem["artistName"],elem["collectionName"],elem["trackName"],image,hyperlink]);
    sheet.setRowHeight(i+15,65);
  });
  
  // sort by album
  var sortedOutput = output.sort( function(a,b) {
    
    var albumA = (a[1]) ? a[1] : 'Not known';  // in case album name undefined 
    var albumB = (b[1]) ? b[1] : 'Not known';  // in case album name undefined
    
    if (albumA < albumB) { return -1; } else if (albumA > albumB) {
      return 1;
    }
    // names are equal
    return 0;
  });
  
  // adds an index number to the array
  sortedOutput.forEach(function(elem,i) {
    elem.unshift(i + 1);
  });
  
  var len = sortedOutput.length;
  
  // clear any previous content
  sheet.getRange(15,1,500,6).clearContent();
  
  // paste in the values
  sheet.getRange(15,1,len,6).setValues(sortedOutput);
  
  // formatting
  sheet.getRange(15,1,500,6).setVerticalAlignment("middle");
  sheet.getRange(15,5,500,1).setHorizontalAlignment("center");
  sheet.getRange(15,2,len,3).setWrap(true);
  
}

Voici le fichier de script de l’API iTunes sur GitHub.

Comment ça fonctionne:

Parlons de quelques-unes des lignes de code clés de ce programme :

Lignes 16 – 25 décrivez une fonction qui prend un nom d’artiste, appelle l’API avec ce nom d’artiste, puis renvoie les résultats de la recherche à partir de l’API. J’ai encapsulé cela en tant que fonction distincte afin que je puisse potentiellement le réutiliser ailleurs dans mon programme.

Le programme principal démarre le ligne 28.

Au ligne 34, je récupère le nom de l’artiste qui a été renseigné sur la feuille Google, et on appelle notre fonction API avec ce nom sur ligne 36.

Au lignes 42 à 47, je prends les résultats renvoyés par l’API, les survole et n’extrait que les détails que je veux (nom de l’artiste, nom de l’album, titre de la chanson, pochette de l’album et piste de prévisualisation). Je pousse tout cela dans un nouveau tableau appelé output.

Ensuite, je trie et ajoute un index au tableau, bien que ces deux étapes ne soient pas obligatoires.

Au ligne 68, j’efface tout contenu précédent de ma feuille.

Puis sur ligne 71, je colle les nouvelles données, en commençant à la ligne 15.

Finalement, lignes 74 – 76 formatez les données nouvellement collées, afin que les images aient de l’espace pour s’afficher correctement.

Exécutez le onOpen() fonction de l’éditeur de script une fois pour ajouter le menu personnalisé à votre feuille Google. Ensuite, vous pourrez exécuter votre code iTunes à partir de la feuille Google :

Menu API iTunes personnalisé

Vous pouvez maintenant exécuter le programme pour rechercher votre artiste préféré !

Plus de détails sur l’API iTunes :

Documentation pour la recherche dans l’iTunes Store.

Documentation montrant le paquet JSON des résultats de la recherche.

Exemple 3 : explorateur de données Star Wars utilisant l’API Star Wars

Celui-ci est très amusant! Certainement l’exemple le plus amusant de ce didacticiel API pour les débutants.

L’API Star Wars est une base de données de tous les films, personnes, planètes, vaisseaux spatiaux, espèces et véhicules des films Star Wars. Il est très facile d’interroger et les données renvoyées sont très conviviales.

API Star Wars dans Google Sheet

C’est un peu plus facile que l’API iTunes car les données renvoyées sont plus petites et plus gérables, et donc plus faciles à analyser lorsque vous les obtenez pour la première fois.

Premiers pas avec l’API Star Wars

Comme pour les deux API précédentes, commencez par un simple appel pour voir ce que l’API renvoie :

/*
 * Step 1:
 * Most basic call to the API 
 */
function swapi() {
  
  // Call the Star Wars API
  var response = UrlFetchApp.fetch("http://swapi.dev/api/planets/1/");
  Logger.log(response.getContentText());
}

Les données renvoyées ressemblent à ceci :

Tutoriel API pour les débutants : données de l'API Star Wars

Il est donc relativement facile d’obtenir les différentes données que vous souhaitez, avec un code comme celui-ci :

/*
 * Step 2:
 * Same basic call to the API 
 * Parse the JSON reply
 */
function swapi() {
  
  // Call the Star Wars API
  var response = UrlFetchApp.fetch("http://swapi.dev/api/planets/1/");
  
  // Parse the JSON reply
  var json = response.getContentText();
  var data = JSON.parse(json);
  Logger.log(data);
  Logger.log(data.name);
  Logger.log(data.population);
  Logger.log(data.terrain);
}

Eh bien, cela devrait être un indice suffisant pour que vous puissiez essayer celui-ci !

Quelques autres astuces

En plus des menus personnalisés pour exécuter des scripts à partir de votre feuille Google, vous pouvez ajouter des boutons Google Sheets et les connecter à un script pour exécuter le script lorsque vous cliquez dessus. C’est ce que j’ai fait dans cet exemple.

Au menu, Insert > Drawing...

Google Sheets insère un dessin

Créez un bouton à l’aide de l’outil rectangle :

Outil de dessin Google Sheet

Enfin, faites un clic droit sur le dessin lorsqu’il apparaît dans votre feuille et choisissez Assign Script et tapez le nom de la fonction que vous souhaitez exécuter :

Script d'attribution de dessin de feuille Google

Quoi d’autre?

Utilisez cette formule pour ajouter des étoiles à votre feuille Google :

=char(9734)

J’ai utilisé la police « Orbitron » sur toute la feuille de calcul et, bien que ce ne soit pas une police Star Wars, elle a toujours cette sensation d’espace.

Le grand logo Star Wars est simplement créé en fusionnant un tas de cellules et en utilisant la formule IMAGE () avec une image appropriée du Web.

Enfin, voici mon script SWAPI sur GitHub si vous souhaitez l’utiliser.

Tutoriel API pour débutants : autres API à essayer

Voici quelques autres API conviviales pour les débutants à expérimenter :

> API Giphy. Exemple de point de terminaison de recherche : GIF drôles de chat

> API Pokémon. Exemple de point de terminaison de recherche : Pokemon no. 1

> Ouvrez l’API de base de données de films. Exemple de point de terminaison de recherche : films de Batman

> Emplacement actuel de la Station spatiale internationale. Exemple de point de terminaison de recherche : emplacement actuel de l’ISS

Voici également la documentation officielle de Google sur la connexion aux API externes.

Dites-moi dans les commentaires ce que vous faites avec toutes ces différentes API !

All the CMS Templates You Could Ask For.

WordPress: Tutoriel API pour les débutants avec Google Sheets et Apps Script

2M+ items from the worlds largest marketplace for CMS Templates, Themes & Design Assets. Whether that's what you need, or you're just after a few Stock Photos - all of it can be found here at Envato Market.



WordPress: Tutoriel API pour les débutants avec Google Sheets et Apps Script

#Tutoriel #API #pour #les #débutants #avec #Google #Sheets #Apps #Script