Les services Web de Google sont devenus une partie essentielle de l’infrastructure de nombreux projets, un élément d’intégration vital. Nous ne pouvons plus imaginer les services en ligne sans eux. Pendant ce temps, les développeurs de Google travaillent à étendre les capacités de leurs services, à développer de nouvelles API et à renforcer la sécurité de nos données. Habituellement, les mises à jour sont publiées en douceur pour les utilisateurs et ne nécessitent aucune modification de votre part. Mais pas cette fois avec la nouvelle API Google Sheets.
En 2021, Google a présenté la version 4 de son API Feuilles, incompatible avec la précédente. Cela a affecté la sécurité et la confidentialité des données. La compatibilité de l’API Sheets v3 était prolongé jusqu’en août 2021 pour donner aux développeurs plus de temps pour migrer vers la nouvelle version de l’API. Depuis la fin du support de l’API v3, de nombreux développeurs JavaScript ont été confrontés à des problèmes de migration. Et bien que Google ait fourni un guide de migration détaillécomme cela arrive généralement, plusieurs détails cruciaux y manquent.
En tant qu’ingénieur support chez AnyChart, j’ai reçu et continue de traiter de nombreuses demandes d’aide de la part des utilisateurs de notre bibliothèque de graphiques JS qui ont soudainement rencontré des problèmes pour alimenter les visualisations avec les données de leurs feuilles de calcul Google. Cela montre que le problème a été et reste vraiment d’actualité. J’ai donc décidé de créer un guide d’intégration rapide de l’API Google Sheets v4 pour tous les autres.
Cet article présente une approche de base pour accéder à un document de feuille de calcul sur Google Sheets et charger les données à partir de celui-ci, apparemment le cas d’utilisation le plus courant.
Pour accéder à une feuille de calcul Google Sheets à partir du code JavaScript, vous devez google-api-javascript-client et API Feuillesainsi qu’un projet Google configuré et un document lui-même.
Laissez-moi vous expliquer tout cela étape par étape.
Configuration côté Google
1) Créer un projet
- Allez à la Plate-forme Google Cloud:
- Créez un nouveau projet :
2) Activer l’API
- Allez dans “Activer les API et les services”:
- Tapez “google sheets” dans le champ de recherche pour trouver l’API :
- Sélectionnez “API Google Sheets”:
- Activez l’API Google Sheets :
3) Pouvoirs
- Rendez-vous dans l’onglet « Identifiants » :
- Cliquez sur “Créer des informations d’identification” et sélectionnez “Clé API”:
Remarque : Copiez et stockez la clé API. Vous en aurez besoin dans le code JavaScript plus tard ({GOOGLE_API_KEY} dans le code JS).
c) Cliquez sur “Restreindre la clé”:
Noter: Gardez vos clés API en sécurité pendant le stockage et la transmission. Les meilleures pratiques pour cela sont bien couvertes par Google dans Cet article. Tous les extraits de code ci-dessous sont simplifiés à des fins de démonstration et ne décrivent pas les aspects de sécurité.
d) Dans le menu déroulant “Restrict key”, localisez l’élément “Google Sheets API”:
e) Sélectionnez-le, cliquez sur “OK” et “SAUVEGARDER”:
4) Créer un document
- Créez un document Google Sheets comme vous le faites habituellement et remplissez-le avec des données. Définissez un nom pour la feuille avec vos données ou copiez celui par défaut – il sera requis plus tard dans le code JS ({SHEET_NAME}).
- Activer l’accès au document via un lien. Vous pouvez le faire en cliquant sur le bouton “Partager” et en choisissant “Toute personne disposant du lien”. (L’accès « Visualiseur » suffit.)
- Copiez l’ID du document. Il se trouve dans l’URL du document, entre les parties « /spreadsheets/d/ » et « /edit ». Cet ID sera requis plus tard dans le code JS ({SPREADSHEET_ID}).
Tous les paramètres nécessaires du côté de Google sont terminés. Passons à une application.
Accéder aux données de feuille de calcul Google à partir d’applications JavaScript
Maintenant, je vais vous expliquer comment créer une application JavaScript simple qui récupère les données de la feuille de calcul et les montre aux utilisateurs. Pour connecter l’application à l’API Sheets, j’utiliserai la bibliothèque cliente de l’API Google pour JavaScript (alias gapi), qui est bien décrite dans son Référentiel GitHub.
1) Créer une application JavaScript de base
Tout d’abord, incluez la bibliothèque gapi dans votre page en utilisant le lien direct.
Ajouter le <table> tag au code HTML et appliquez le code CSS que vous aimez pour le tableau et son futur contenu.
Dans le code JavaScript, créez une fonction qui sera utilisée pour récupérer les données.
const start = () => {};Dans cette fonction, initialisez le client gapi avec votre clé API Google créée précédemment.
gapi.client.init({
'apiKey': '{GOOGLE_API_KEY}',
'discoveryDocs': ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
})
Exécutez ensuite une requête pour obtenir des valeurs via le client gapi. Dans la demande, vous devez fournir l’ID de la feuille de calcul et la plage de cellules où se trouvent les données auxquelles vous souhaitez accéder.
.then(() => {
return gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '{SPREADSHEET_ID}',
range: '{SHEET_NAME}!{DATA_RANGE}',
})
})
Si tous les paramètres sont corrects, la promesse résolue renvoie une réponse avec les données extraites. Vous pouvez maintenant obtenir les données de la réponse et remplir le tableau HTML à l’aide d’un simple script JS.
.then((response) => {
const loadedData = response.result.values;
const table = document.getElementsByTagName('table')[0];
const columnHeaders = document.createElement('tr');
columnHeaders.innerHTML = `<th>${loadedData[0][0]}</th>
<th>${loadedData[0][1]}</th>`;
table.appendChild(columnHeaders);
for (let i = 1; i < loadedData.length; i++) {
const tableRow = document.createElement('tr');
tableRow.innerHTML = `<td>${loadedData[i][0]}</td>
<td>${loadedData[i][1]}</td>`;
table.appendChild(tableRow);
}
}).catch((err) => {
console.log(err.error.message);
});
Pour exécuter le code, appelez le charger() fonction de la bibliothèque gapi et passez la fonction créée ci-dessus en argument.
gapi.load('client', start);L’application résultante ressemble à ci-dessous. Vous êtes invités à consulter le modèle de code complet de ce tableau HTML avec des données de Google Sheets sur JSFiddle. Pour que votre propre chose comme celle-ci fonctionne, remplacez simplement {GOOGLE_API_KEY}, {SPREADSHEET_ID}, {SHEET_NAME}et {PLAGE DE DONNÉES} avec vos propres informations (et ne gardez pas les accolades).
2) Sortie de bricolage – affichez les données sous forme de graphique
Dans les applications du monde réel, de simples tableaux HTML ne suffisent généralement pas ; nous voulons visualiser et analyser les données. Laissez-moi vous montrer comment créer un tableau de bord qui augmente la lisibilité des données et nous rapproche du cas d’utilisation réel. Lorsque je suis de service et que je demande de l’aide pour l’intégration de l’API Google Sheets, c’est en fait le premier exemple que je partage, et fondamentalement, presque toujours le dernier car il est très illustratif et aucune aide supplémentaire n’est nécessaire.
Alors, utilisons le Bibliothèque AnyChart JS pour la visualisation des données. Il comprend graphiques à colonnes et camembertsce qui serait suffisant pour ce simple tableau de bord.
Avant toute chose, ajoutez AnyChart’s module JS de base en HTML :
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>Aussi, ajoutez <div> tags pour les conteneurs de tableau de bord et appliquez un ID approprié pour chacun :
<div id="container1"></div>
<div id="container2"></div>La plupart du code JavaScript reste absolument le même. Je vais juste retravailler le code qui gère la réponse de l’API Sheets.
Alors, gardez la première partie du code JS inchangée :
const start = () => {
gapi.client.init({
'apiKey': '{GOOGLE_API_KEY}',
'discoveryDocs': ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
}).then(() => {
return gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '{SPREADSHEET_ID}',
range: '{SHEET_NAME}!{DATA_RANGE}',
})
}).then((response) => {
In the response handler, parse the data to compose a structure compatible with the AnyChart API:
const loadedData = response.result.values;
const parsedData = {
'header': loadedData.shift(),
'rows': loadedData,
};
Now we’ve got everything we need to create and configure charts for the dashboard:
const columnChart = anychart.column();
columnChart.data(parsedData);
columnChart.title('Sales volume by manager');
columnChart.xAxis().title('Manager');
columnChart.yAxis().title('Sales volume, $');
columnChart.container('container1').draw();
const pieChart = anychart.pie(parsedData);
pieChart.title('Sales volume distribution in the department');
pieChart.legend().itemsLayout('vertical').position('right');
pieChart.container('container2').draw();
Then goes the same ending part as with the HTML table — let’s recall it just in case:
}).catch((err) => {
console.log(err.error.message);
});
};
gapi.load('client', start);
Vous trouverez ci-dessous à quoi ressemble le tableau de bord résultant. Vous pouvez consulter le code de modèle complet de ce tableau de bord visualisant les données de Google Sheets à l’aide de l’API v4 sur JSFiddle. Pour obtenir votre propre projet comme celui-ci, mettez simplement vos propres informations à la place de {GOOGLE_API_KEY}, {SPREADSHEET_ID}, {SHEET_NAME}et {PLAGE DE DONNÉES} (et ne gardez pas les accolades).
J’espère que cet article sera utile à tous ceux qui décident de créer une application qui utilise les données de Google Sheets et d’y accéder à partir d’applications JavaScript. Si vous avez d’autres questions, n’hésitez pas à me contacter et je ferai de mon mieux pour vous aider.
Pour votre commodité, voici une liste de tous les liens utiles de cet article, en un seul endroit :
Conditions préalables
Exemples d’intégration
— to www.sitepoint.com
