1. Introduction
Looker Studio vous permet de créer sans frais des tableaux de bord interactifs en direct avec de superbes visualisations des données. Récupérez vos données à partir de différentes sources et créez un nombre illimité de rapports dans Looker Studio, avec des fonctionnalités complètes d'édition et de partage. La capture d'écran suivante montre un exemple de tableau de bord Looker Studio:
( Cliquez ici pour afficher cet exemple de rapport dans Looker Studio).
La fonctionnalité des connecteurs de communauté de Looker Studio vous permet d'utiliser Apps Script pour créer des connecteurs vers n'importe quelle source de données accessible sur Internet. Les connecteurs de communauté sont créés par la communauté Looker Studio. Cela signifie que tout le monde peut créer des connecteurs de communauté. Vous pouvez également partager des connecteurs de communauté avec d'autres personnes afin qu'elles puissent accéder à leurs propres données depuis Looker Studio.
Vous pouvez utiliser les connecteurs de communauté dans différents cas d'utilisation:
- Vous visualisez des données d'une plate-forme commerciale (par exemple, des réseaux sociaux, du marketing, des analyses, etc.)
- Vous visualisez des données d'entreprise sur site (par exemple, des données de vente d'une base de données MySQL sur site).
- Vous offrez à vos clients un moyen de visualiser leurs données issues de votre service
- Vous êtes en train de créer une plate-forme de création de rapports sur les boutons-poussoirs
- Vous visualisez vos propres données à partir d'une source Web (par exemple, en créant votre tableau de bord Google Fit).
Points abordés
- Fonctionnement d'un connecteur de communauté Looker Studio
- Créer un connecteur de communauté à l'aide de Google Apps Script
- Utiliser des connecteurs de communauté dans Looker Studio
Prérequis
- Accès à Internet et à un navigateur Web
- Un compte Google
- une bonne connaissance des API Web et JavaScript de base ;
2. Enquête rapide
Pourquoi avez-vous choisi cet atelier de programmation ?
<ph type="x-smartling-placeholder">Comment prévoyez-vous d'utiliser cet atelier de programmation/ce tutoriel ?
<ph type="x-smartling-placeholder">Comment évalueriez-vous votre connaissance de Looker Studio ?
<ph type="x-smartling-placeholder">Qu'est-ce qui décrit le mieux votre parcours ?
<ph type="x-smartling-placeholder">Vous pouvez passer à la page suivante pour envoyer les informations de l'enquête.
3. Présentation des connecteurs de communauté
Les connecteurs de communauté Looker Studio permettent d'établir des connexions directes entre Looker Studio et n'importe quelle source de données accessible sur Internet. Vous pouvez vous connecter à des plates-formes commerciales, à des ensembles de données publics ou à vos propres données privées sur site. Les connecteurs de communauté peuvent récupérer des données via des API Web, des API JDBC, des fichiers plats (CSV, JSON, XML) et des services Apps Script.
Imaginons que vous ayez publié un package sur npm et que vous souhaitiez suivre le nombre de téléchargements de ce package au fil du temps, par jour. Dans cet atelier de programmation, vous allez créer un connecteur de communauté qui récupère des données à l'aide de l'API permettant de compter les téléchargements de packages npm. Vous pouvez ensuite utiliser le connecteur de communauté dans Looker Studio pour créer un tableau de bord permettant de visualiser le nombre de téléchargements.
4. Workflow du connecteur de communauté
Dans un connecteur de communauté de base, vous devez définir quatre fonctions:
getAuthType()
getConfig()
getSchema()
getData()
En fonction de l'étape actuelle du workflow, Looker Studio exécute ces fonctions de connecteur et utilise la réponse lors des étapes suivantes. La vidéo ci-dessous offre un aperçu des fonctionnalités suivantes:
- Fonctionnement d'un connecteur de communauté
- Différentes étapes du workflow
- Lorsque différentes fonctions sont appelées
- Lorsque Looker Studio affiche différentes interfaces utilisateur
- Actions attendues de l'utilisateur à différentes étapes
Vous pouvez reprendre l'atelier de programmation après avoir regardé la vidéo.
Vous n'avez pas besoin de mémoriser ce workflow. Il vous suffit d'essayer de comprendre ce qui se passe dans un connecteur. Vous pouvez toujours consulter ce schéma.
À l'étape suivante, vous allez créer votre connecteur dans Google Apps Script. Vous devrez basculer entre l'interface utilisateur d'Apps Script et cet atelier de programmation.
5. Configurer votre projet Apps Script
Étape 1:Accédez à Google Apps Script.
Étape 2:Créez un projet Apps Script en cliquant sur + Nouveau projet. en haut à gauche.
Vous verrez un projet shell avec une fonction myFunction
vide dans le fichier Code.gs
.
Étape 3:Supprimez la fonction myFunction
.
Étape 4 : Attribuez un nom au projet.
- Cliquez sur
Untitled project
en haut à gauche de la page. - Saisissez le titre du projet.
Commencez à écrire le code de connecteur dans le fichier Code.gs
.
6. Définir getAuthType()
Looker Studio appelle la fonction getAuthType()
lorsqu'il doit connaître la méthode d'authentification utilisée par le connecteur. Cette fonction doit renvoyer la méthode d'authentification requise par le connecteur pour autoriser le service tiers.
Pour le connecteur de téléchargement npm que vous créez, vous n'avez pas besoin de vous authentifier auprès d'un service tiers, car l'API que vous utilisez ne nécessite aucune authentification. Copiez le code suivant et ajoutez-le à votre fichier Code.gs
:
Code.gs
var cc = DataStudioApp.createCommunityConnector();
function getAuthType() {
var AuthTypes = cc.AuthType;
return cc
.newAuthTypeResponse()
.setAuthType(AuthTypes.NONE)
.build();
}
Vous indiquez ici que votre connecteur ne nécessite aucune authentification tierce (AuthTypes.NONE
). Pour connaître toutes les méthodes d'authentification compatibles, consultez la documentation de référence sur AuthType()
.
7. Définir getConfig()
Les utilisateurs du connecteur devront le configurer pour pouvoir l'utiliser. La réponse de la fonction getConfig()
définit les options de configuration que les utilisateurs verront. Looker Studio appelle la fonction getConfig()
pour obtenir les informations de configuration du connecteur. En fonction de la réponse fournie par getConfig()
, Looker Studio affiche l'écran de configuration du connecteur et en modifie certains comportements.
Dans l'écran de configuration, vous pouvez fournir des informations ou obtenir des entrées utilisateur à l'aide des éléments de formulaire suivants:
| Élément d'entrée | Une zone de texte d'une seule ligne. |
| Élément d'entrée | Zone de texte multiligne. |
| Élément d'entrée | Menu déroulant pour les options à sélection unique. |
| Élément d'entrée | Menu déroulant pour les options de sélection multiple. |
| Élément d'entrée | Une seule case à cocher qui peut être utilisée pour capturer des valeurs booléennes. |
| Élément d'affichage | Zone de texte brut statique pouvant être utilisée pour fournir des instructions ou des informations à l'utilisateur. |
Utilisez l'élément INFO
pour fournir des instructions utilisateur et un élément TEXTINPUT
pour obtenir le nom du package d'entrée auprès de l'utilisateur. Dans la réponse getConfig()
, vous allez regrouper ces éléments du formulaire sous la clé configParams
.
Étant donné que l'API à laquelle vous vous connectez exige la date en tant que paramètre, définissez dateRangeRequired
sur true
dans la réponse getConfig()
. Vous indiquez ainsi à Looker Studio de fournir des plages de dates pour toutes les requêtes de données. Vous pouvez omettre cette option si votre source de données n'exige pas de paramètre de date.
Ajoutez le code getConfig()
suivant à votre fichier Code.gs
, sous le code existant pour getAuthType()
:
Code.gs
function getConfig(request) {
var config = cc.getConfig();
config.newInfo()
.setId('instructions')
.setText('Enter npm package names to fetch their download count.');
config.newTextInput()
.setId('package')
.setName('Enter a single package name')
.setHelpText('e.g. googleapis or lighthouse')
.setPlaceholder('googleapis');
config.setDateRangeRequired(true);
return config.build();
}
Compte tenu de ces configParams, lorsque vous utilisez le connecteur dans Looker Studio, vous pouvez vous attendre à voir un écran de configuration semblable à celui-ci. Nous y reviendrons plus tard.
Passons à la fonction suivante : getSchema()
.
8. Définir getSchema()
Looker Studio appelle la fonction getSchema()
pour obtenir le schéma associé à la configuration sélectionnée par l'utilisateur pour le connecteur. En fonction de la réponse fournie par getSchema()
, Looker Studio présentera l'écran des champs à l'utilisateur, listant tous les champs du connecteur.
Pour toute configuration spécifique du connecteur, le schéma est une liste de tous les champs pour lesquels le connecteur peut fournir des données. Un connecteur peut renvoyer un schéma différent avec différents champs en fonction de différentes configurations. Le schéma peut contenir des champs que vous extrayez à partir de la source de votre API, des champs calculés dans Apps Script et des champs calculés dans Looker Studio à l'aide d'une formule de champ calculé. Votre connecteur fournit les métadonnées de chaque champ du schéma, y compris:
- Nom du champ
- Type de données du champ
- Informations sémantiques
Pour en savoir plus, consultez la documentation de référence sur getSchema()
et Field
ultérieurement.
Selon la manière dont votre connecteur récupère les données, le schéma peut être fixe ou calculé dynamiquement lorsque getSchema()
est appelé. Les paramètres de configuration de getConfig()
définis par l'utilisateur seront fournis dans l'argument request
de la fonction getSchema()
.
Pour cet atelier de programmation, vous n'avez pas besoin d'accéder à l'argument request
. Dans le prochain segment, vous en apprendrez plus sur l'argument request
lorsque vous écrirez du code pour la fonction getData()
.
Pour votre connecteur, le schéma est fixe et contient les trois champs suivants:
| Nom du package npm fourni par l'utilisateur |
| Nombre de téléchargements du package npm |
| Date du nombre de téléchargements |
Vous trouverez ci-dessous le code getSchema()
de votre connecteur. La fonction d'assistance getFields()
élimine la création des champs, car cette fonctionnalité est nécessaire à la fois par getSchema()
et getData()
. Ajoutez le code suivant à votre fichier Code.gs
:
Code.gs
function getFields(request) {
var cc = DataStudioApp.createCommunityConnector();
var fields = cc.getFields();
var types = cc.FieldType;
var aggregations = cc.AggregationType;
fields.newDimension()
.setId('packageName')
.setType(types.TEXT);
fields.newMetric()
.setId('downloads')
.setType(types.NUMBER)
.setAggregation(aggregations.SUM);
fields.newDimension()
.setId('day')
.setType(types.YEAR_MONTH_DAY);
return fields;
}
function getSchema(request) {
var fields = getFields(request).build();
return { schema: fields };
}
D'après ce schéma, vous devriez voir les champs suivants dans l'écran "Champs" de Looker Studio lorsque vous utiliserez le connecteur dans Looker Studio. Nous y reviendrons lorsque vous testerez le connecteur.
Passons à la dernière fonction, getData()
.
9. Définir getData() : Partie 1
Looker Studio appelle la fonction getData()
chaque fois qu'il a besoin de récupérer des données. En fonction de la réponse fournie par getData()
, Looker Studio affichera et mettra à jour les graphiques dans le tableau de bord. getData()
peut être appelé lors des événements suivants:
- L'utilisateur ajoute un graphique au tableau de bord
- L'utilisateur modifie un graphique
- L'utilisateur consulte le tableau de bord
- L'utilisateur modifie un filtre ou un contrôle de données associé
- Looker Studio a besoin d'un échantillon de données
Il n'est pas nécessaire de copier le code de cette page, car vous allez copier le code
getData()
du code lors d'une prochaine étape.
Comprendre l'objet request
Looker Studio transmet l'objet request
avec chaque appel getData()
. Examinez la structure de l'objet request
ci-dessous. Cela vous aidera à écrire le code de votre fonction getData()
.
Structure de l'objet request
{
configParams: object,
scriptParams: object,
dateRange: {
startDate: string,
endDate: string
},
fields: [
{
name: Field.name
}
]
}
- L'objet
configParams
contient des valeurs de configuration pour les paramètres définis dansgetConfig()
et configurés par l'utilisateur. - L'objet
scriptParams
contiendra des informations pertinentes pour l'exécution du connecteur. Vous n'en aurez pas besoin pour cet atelier de programmation. dateRange
contiendra la plage de dates demandée si celle-ci est demandée dans la réponsegetConfig()
.fields
contient la liste des noms des champs pour lesquels des données sont demandées.
Pour votre connecteur, un exemple de request
provenant de la fonction getData()
peut se présenter comme suit:
{
configParams: {
package: 'jquery'
},
dateRange: {
startDate: '2017-07-16',
endDate: '2017-07-18'
},
fields: [
{
name: 'day',
},
{
name: 'downloads',
}
]
}
Pour l'appel getData()
dans la requête request
ci-dessus, seuls deux champs sont demandés, même si le schéma de connecteur comporte des champs supplémentaires. La page suivante contient l'exemple de réponse à cet appel getData()
et la structure de réponse getData()
générale.
10. Définir getData() : Partie 2
Dans la réponse getData()
, vous devez fournir un schéma et des données pour les champs demandés. Vous allez diviser le code en trois segments:
- Créez un schéma pour les champs demandés.
- Extraire et analyser les données de l'API
- Transformer les données analysées et filtrer les champs demandés
Il n'est pas nécessaire de copier le code de cette page, car vous allez copier le code
getData()
sur la page suivante.
Voici la structure de getData()
pour votre connecteur.
function getData(request) {
// TODO: Create schema for requested fields.
// TODO: Fetch and parse data from API.
// TODO: Transform parsed data and filter for requested fields.
return {
schema: <filtered schema>,
rows: <transformed and filtered data>
};
}
Créer un schéma pour les champs demandés
// Create schema for requested fields
var requestedFieldIds = request.fields.map(function(field) {
return field.name;
});
var requestedFields = getFields().forIds(requestedFieldIds);
Extraire et analyser les données de l'API
L'URL de l'API npm est au format suivant:
https://api.npmjs.org/downloads/point/{start_date}:{end_date}/{package}
Créez l'URL de l'API à l'aide des éléments request.dateRange.startDate
, request.dateRange.endDate
et request.configParams.package
fournis par Looker Studio. Ensuite, extrayez les données de l'API à l'aide de UrlFetchApp
(classe Apps Script: référence). Analysez ensuite la réponse récupérée.
// Fetch and parse data from API
var url = [
'https://api.npmjs.org/downloads/range/',
request.dateRange.startDate,
':',
request.dateRange.endDate,
'/',
request.configParams.package
];
var response = UrlFetchApp.fetch(url.join(''));
var parsedResponse = JSON.parse(response).downloads;
Transformer les données analysées et filtrer les champs demandés
La réponse de l'API npm sera au format suivant:
{
downloads: [
{
day: '2014-02-27',
downloads: 1904088
},
..
{
day: '2014-03-04',
downloads: 7904294
}
],
start: '2014-02-25',
end: '2014-03-04',
package: 'somepackage'
}
Transformez la réponse de l'API npm et fournissez la réponse getData()
au format suivant. Si ce format n'est pas clair, consultez l'exemple de réponse dans le paragraphe suivant.
{
schema: [
{
object(Field)
}
],
rows: [
{
values: [string]
}
]
}
Dans la réponse, ne renvoyez le schéma que pour les champs demandés à l'aide de la propriété schema
. Vous allez renvoyer les données sous la forme d'une liste de lignes à l'aide de la propriété rows
. Pour chaque ligne, la séquence des champs dans values
doit correspondre à celle des champs dans schema
. Sur la base de notre exemple précédent de request
, voici à quoi ressemblera la réponse pour getData()
:
{
schema: requestedFields.build(),
rows: [
{
values: [ 38949, '20170716']
},
{
values: [ 165314, '20170717']
},
{
values: [ 180124, '20170718']
},
]
}
Vous avez déjà créé le sous-ensemble du schéma. Utilisez la fonction suivante pour transformer les données analysées et les filtrer en fonction des champs demandés.
function responseToRows(requestedFields, response, packageName) {
// Transform parsed data and filter for requested fields
return response.map(function(dailyDownload) {
var row = [];
requestedFields.asArray().forEach(function (field) {
switch (field.getId()) {
case 'day':
return row.push(dailyDownload.day.replace(/-/g, ''));
case 'downloads':
return row.push(dailyDownload.downloads);
case 'packageName':
return row.push(packageName);
default:
return row.push('');
}
});
return { values: row };
});
}
11. Définir getData() : Partie 3
Le code getData()
combiné se présente comme suit : Ajoutez le code suivant à votre fichier Code.gs
:
Code.gs
function responseToRows(requestedFields, response, packageName) {
// Transform parsed data and filter for requested fields
return response.map(function(dailyDownload) {
var row = [];
requestedFields.asArray().forEach(function (field) {
switch (field.getId()) {
case 'day':
return row.push(dailyDownload.day.replace(/-/g, ''));
case 'downloads':
return row.push(dailyDownload.downloads);
case 'packageName':
return row.push(packageName);
default:
return row.push('');
}
});
return { values: row };
});
}
function getData(request) {
var requestedFieldIds = request.fields.map(function(field) {
return field.name;
});
var requestedFields = getFields().forIds(requestedFieldIds);
// Fetch and parse data from API
var url = [
'https://api.npmjs.org/downloads/range/',
request.dateRange.startDate,
':',
request.dateRange.endDate,
'/',
request.configParams.package
];
var response = UrlFetchApp.fetch(url.join(''));
var parsedResponse = JSON.parse(response).downloads;
var rows = responseToRows(requestedFields, parsedResponse, request.configParams.package);
return {
schema: requestedFields.build(),
rows: rows
};
}
Vous avez terminé le fichier Code.gs
. Ensuite, mettez à jour le fichier manifeste.
12. Mettre à jour le fichier manifeste
Dans l'éditeur Apps Script, sélectionnez Project Settings > Afficher le fichier "appsscript.json" manifeste dans l'éditeur.
Un fichier manifeste appsscript.json
est créé.
Remplacez le fichier appscript.json
par le code suivant:
appsscript.json
{
"timeZone": "America/Los_Angeles",
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8",
"dataStudio": {
"name": "npm Downloads - From Codelab",
"logoUrl": "https://raw.githubusercontent.com/npm/logos/master/npm%20logo/npm-logo-red.png",
"company": "Codelab user",
"companyUrl": "https://developers.google.com/looker-studio/",
"addonUrl": "https://github.com/googledatastudio/example-connectors/tree/master/npm-downloads",
"supportUrl": "https://github.com/googledatastudio/community-connectors/issues",
"description": "Get npm package download counts.",
"sources": ["npm"]
}
}
Enregistrez le projet Apps Script.
Félicitations ! Vous avez créé votre premier connecteur de communauté et vous pouvez le tester.
13. Tester votre connecteur dans Looker Studio
Utiliser le déploiement
Étape 1:Dans l'environnement de développement Apps Script, cliquez sur Déployer > Tester les déploiements pour ouvrir la boîte de dialogue "Tester les déploiements".
Le déploiement par défaut, Head Deployment, s'affiche.
Étape 2:Cliquez sur Copy (Copier) pour copier l'ID de déploiement "Head".
Étape 3:Pour charger votre connecteur dans Looker Studio, remplacez la balise <HEAD_DEPLOYMENT_ID> dans le lien suivant par l'ID de déploiement Head de votre connecteur, puis suivez le lien dans votre navigateur:
https://lookerstudio.google.com/datasources/create?connectorId=<HEAD_DEPLOYMENT_ID>
Autoriser le connecteur
Nouveaux utilisateurs de Looker Studio:si vous n'avez jamais utilisé Looker Studio auparavant, vous devrez autoriser Looker Studio et accepter les conditions d'utilisation. Terminez le processus d'autorisation. Lorsque vous utilisez Looker Studio pour la première fois, une boîte de dialogue peut également s'afficher pour vous permettre de mettre à jour vos préférences marketing. Inscrivez-vous pour recevoir des annonces concernant les produits pour être informé par e-mail des dernières fonctionnalités et mises à jour.
Une fois le fichier chargé, vous êtes invité à autoriser votre connecteur.
Cliquez sur "Autoriser" et accordez l'autorisation requise au connecteur.
Configurer le connecteur
Une fois l'autorisation terminée, l'écran de configuration s'affiche. Saisissez "phare" dans la zone de saisie de texte, puis cliquez sur "Connecter" en haut à droite.
Confirmer le schéma
L'écran des champs s'affiche. Cliquez sur Créer un rapport en haut à droite.
Créer votre tableau de bord
Vous vous trouvez dans l'environnement du tableau de bord Looker Studio. Cliquez sur Ajouter au rapport.
Dans Looker Studio, chaque fois qu'un utilisateur accède à un connecteur et ajoute une configuration, une source de données est créée dans son compte Looker Studio. Considérez une source de données comme une instanciation du connecteur en fonction d'une configuration spécifique. En fonction du connecteur et de la configuration sélectionnée par l'utilisateur, une source de données renvoie un tableau de données contenant un ensemble spécifique de champs. Les utilisateurs peuvent créer plusieurs sources de données à partir du même connecteur. Une source de données peut être utilisée dans plusieurs rapports, et un même rapport peut en utiliser plusieurs.
Maintenant, ajoutez un graphique de série temporelle. Dans le menu, cliquez sur Insertion > Série temporelle : Placez ensuite la série temporelle dans le canevas. Vous devriez voir un graphique de série temporelle indiquant le nombre de téléchargements npm pour le package sélectionné. Ajoutez une commande de filtrage de date et affichez le tableau de bord comme indiqué ci-dessous.
Et voilà ! Vous venez de créer votre premier connecteur de communauté. Nous voici arrivés au terme de cet atelier de programmation. Voyons maintenant ce que vous pouvez faire.
14. Étapes suivantes
Améliorez le connecteur
Apportez des améliorations au connecteur que vous venez de créer:
- Dans Looker Studio, si vous ne fournissez pas de nom de package dans l'écran de configuration de votre connecteur, un message d'erreur s'affichera lorsque vous générerez le graphique de série temporelle. Essayez d'ajouter une validation des entrées ou une option par défaut à la configuration du connecteur.
- Essayez d'ajouter la possibilité d'interroger simultanément plusieurs noms de packages dans la configuration du connecteur. Astuce: L'API du nombre de téléchargements du package npm accepte la saisie de plusieurs noms de packages séparés par une virgule.
- Vous trouverez des solutions à ces deux éléments dans notre code de connecteur npm.
Exploiter tout le potentiel des connecteurs de communauté
- Consultez la documentation de référence sur l'API du connecteur et le fichier manifeste.
- Explorez des exemples de code de connecteur dans notre référentiel Open Source pour comprendre les bonnes pratiques.
- Suivez l'atelier de programmation clasp pour développer des connecteurs de communauté dans votre environnement local.
- Une fois que vous avez créé un connecteur de communauté complet, examinez les options de publication disponibles.
- Créer une visualisation de la communauté pour Looker Studio
Ressources supplémentaires
Vous trouverez ci-dessous différentes ressources qui vous aideront à approfondir les sujets abordés dans cet atelier de programmation.
Type de ressource | Fonctionnalités pour les utilisateurs | Fonctionnalités pour les développeurs | |
Documentation | |||
Actualités et Actualités | S'inscrire dans Looker Studio > Paramètres utilisateur | ||
Poser des questions | |||
Vidéos | |||
Exemples |