Les API Google Sheets offrent des services pour lire et écrire des documents de feuilles de calcul Google. Dans ce tutoriel, nous allons vous montrer comment lire des données à partir de Google Sheets et les afficher dans une interface utilisateur avec JavaScript. Nous utiliserons uniquement JavaScript sans aucun plugin ni dépendance.
Étapes pour accéder aux feuilles de calcul Google
Pour réaliser cela, vous devrez suivre les étapes suivantes :
- Obtenir les informations d’identification OAuth et les clés d’API et les configurer dans une application.
- Authentifier et autoriser l’application pour permettre l’accès aux feuilles de calcul Google.
- Lire les données de la feuille de calcul et les stocker dans un tableau.
- Analyser les données de réponse et les afficher dans l’interface utilisateur.
Les étapes 1 et 2 sont communes à toutes les API JavaScript Google. Nous les avons déjà vues lors du téléversement de fichiers sur Google Drive via l’API JavaScript. Nous avons également vu comment téléverser sur Google Drive en utilisant PHP, qui ne nécessite pas de clé d’API. Il utilise plutôt une authentification basée sur un jeton pour obtenir l’accès à l’API.
Étape 1 : Obtenir les informations d’identification OAuth et les clés d’API et les configurer dans une application
Dans cette étape, vous devez créer une application web client du développeur pour obtenir l’identifiant de client et les clés d’API. Pour cela, vous devez activer les paramètres suivants dans le tableau de bord du développeur :
- Connectez-vous à la console des développeurs Google et créez un client web.
- Activez l’API Google Sheets dans la galerie des API Google.
- Configurez l’écran de contenu OAuth pour définir les détails de l’application.
- Cliquez sur les informations d’identification OAuth et obtenez l’identifiant du client de l’application et la clé secrète.
- Définissez la portée sur laquelle le programme va accéder à la feuille de calcul.
- Obtenez la clé d’API pour authentifier et autoriser l’application à accéder au service Google Spreadsheet API.
Remarque : La clé secrète sera utilisée pour la mise en œuvre côté serveur, mais pas dans cet exemple JavaScript.
Portée requise pour accéder aux données de la feuille de calcul
Les portées suivantes doivent être sélectionnées pour lire les feuilles de calcul Google via un programme :
-…auth/spreadsheets – pour lire, modifier, créer et supprimer des feuilles de calcul.
-…auth/spreadsheets.readonly – pour lire les feuilles de calcul.
-…auth/drive – pour lire, modifier, créer et supprimer des fichiers Drive.
-…auth/drive.readonly – pour lire les fichiers Drive.
-…auth/drive.file – pour lire, modifier, créer et supprimer des fichiers Drive spécifiques appartenant à l’application autorisée.
Étape 2 : Authentifier et autoriser l’application pour permettre l’accès aux feuilles de calcul Google
L’autorisation est le processus de connexion du client à l’API Google pour accéder à ses services.
En cliquant sur le bouton « Autoriser », cela appelle la fonction authorizeGoogleAccess() créée pour cet exemple.
Cette fonction affiche un écran de contenu pour que l’utilisateur final autorise l’accès. Ensuite, elle reçoit le jeton d’accès dans un gestionnaire de rappels défini dans cette fonction.
Étape 3 : Lire les données de la feuille de calcul et les stocker dans un tableau
Une fois l’accès autorisé, le rappel invoquera le script pour accéder à une feuille de calcul Google existante.
La fonction listMajors() spécifie un identifiant de feuille de calcul particulier à accéder. Cette fonction utilise l’instance JavaScript gapi pour obtenir les données de la feuille de calcul.
Étape 4 : Analyser les données de réponse et les afficher dans l’interface utilisateur
Après avoir obtenu les données de réponse de l’API, ce script analyse le tableau d’objets résultant.
Il prépare le HTML de sortie avec les données de la feuille de calcul et les affiche dans l’élément cible.
Si quelque chose d’anormal se produit avec la réponse, il affiche le message « Aucun enregistrement trouvé » dans le navigateur.
Code complet : Accéder aux feuilles de calcul Google via JavaScript
Le script suivant contient le HTML pour afficher soit le bouton « Autoriser », soit les deux boutons « Actualiser » et « Déconnexion ». Le mode d’affichage de ces boutons dépend de l’état d’autorisation d’accès à l’API Google Spreadsheet.
Le code d’exemple inclut également la bibliothèque JavaScript pour utiliser les services API Google requis.
Le JavaScript contient la configuration pour épingler la clé d’API et l’identifiant client OAuth au bon endroit. Cette configuration est utilisée pour procéder aux étapes 2, 3 et 4 que nous avons vues précédemment.
<!DOCTYPE html>
<html>
<head>
<title>Tutoriel de l'API JavaScript de Google Sheets</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<link rel='stylesheet' href='form.css' type='text/css' />
</head>
<body>
<div class="phppot-container">
<h1>Tutoriel de l'API JavaScript de Google Sheets</h1>
<p>Ce tutoriel a pour but de vous montrer comment lire les Google Sheets (feuilles de calcul) en utilisant l'API Google JavaScript.</p>
<button id="authorize_btn" onclick="authorizeGoogleAccess()">Autoriser l'accès aux feuilles de calcul Google</button>
<button id="signout_btn" onclick="signoutGoogle()">Déconnexion</button>
<pre id="content"></pre>
</div>
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
</body>
</html>Source et résultats de cet exemple
La feuille de calcul affichée dans cette capture d’écran est la source de ce programme pour accéder à ses données.
L’exemple JavaScript lit la feuille de calcul et affiche les données des colonnes Birds (Oiseaux) et Insects (Insectes) dans l’interface utilisateur.
Vous pouvez télécharger ici l’exemple de code complet d’accès aux feuilles de calcul Google via JavaScript.
↑ Retour en haut
