1. Introduzione
Looker Studio ti consente di creare senza costi dashboard interattive e dal vivo con splendide visualizzazioni di dati. Recupera i tuoi dati da diverse origini e crea un numero illimitato di report in Looker Studio, con funzionalità di modifica e condivisione complete. Il seguente screenshot è un esempio di dashboard di Looker Studio:
( Fai clic qui per visualizzare questo report di esempio in Looker Studio)
Connettori della community è una funzionalità di Looker Studio che consente di utilizzare Apps Script per creare connettori per qualsiasi origine dati accessibile da internet. I connettori della community sono creati dalla community di Looker Studio. Ciò significa che chiunque può creare Connettori della community. Puoi anche condividere i connettori della community con altre persone in modo che possano accedere ai propri dati da Looker Studio.
Puoi utilizzare i connettori della community in diversi casi d'uso:
- Stai visualizzando i dati di una piattaforma commerciale (ad es.social media, marketing, analisi e così via).
- Stai visualizzando dati aziendali on-premise (ad es. dati di vendita da un database MySQL on-premise)
- Fornisci ai tuoi clienti un modo per visualizzare i dati del tuo servizio
- Stai creando una piattaforma di generazione di report con pulsante push
- Stai visualizzando i tuoi dati da una fonte web (ad es. creando la tua dashboard di Google Fit)
Obiettivi didattici
- Come funziona un connettore della community di Looker Studio
- Come utilizzare Google Apps Script per creare un connettore della community
- Come utilizzare i connettori della community in Looker Studio
Che cosa ti serve
- Accesso a internet e a un browser web
- Un Account Google
- Familiarità con le API web e JavaScript di base
2. Sondaggio rapido
Perché hai scelto questo codelab?
Come intendi utilizzare questo codelab/tutorial?
Come valuteresti la tua familiarità con Looker Studio?
Quale delle seguenti opzioni descrive meglio il tuo background?
Puoi passare alla pagina successiva per inviare le informazioni del sondaggio.
3. Panoramica dei connettori della community
I connettori della community di Looker Studio consentono connessioni dirette da Looker Studio a qualsiasi origine dati accessibile da internet. Puoi connetterti a piattaforme commerciali, set di dati pubblici o i tuoi dati privati on-premise. I connettori della community possono recuperare i dati mediante API web, API JDBC, file flat (CSV, JSON, XML) e servizi Apps Script.
Considera uno scenario in cui hai pubblicato un pacchetto su npm e vuoi monitorare il numero di download del pacchetto nel corso della giornata. In questo codelab, creerai un connettore della community che recupera i dati utilizzando l'API npm Package download count. Il connettore della community può quindi essere utilizzato in Looker Studio per creare una dashboard che visualizzi il numero di download.
4. Flusso di lavoro del connettore della community
In un connettore della community di base, definirai quattro funzioni:
getAuthType()
getConfig()
getSchema()
getData()
A seconda del passaggio corrente del flusso di lavoro, Looker Studio esegue queste funzioni del connettore e utilizza la risposta nei passaggi successivi. Il seguente video fornisce una panoramica dei seguenti argomenti:
- Come funziona un connettore della community
- Diversi passaggi del flusso di lavoro
- Quando vengono chiamate funzioni diverse
- Quando Looker Studio mostra interfacce utente diverse
- Azioni utente previste in passaggi diversi
Puoi riprendere il codelab dopo aver guardato il video.
Non è necessario memorizzare questo flusso di lavoro, basta dare un'occhiata per avere un'idea di cosa succede in un connettore. Puoi sempre tornare a questo diagramma.
Nel passaggio successivo, inizierai a creare il tuo connettore in Google Apps Script. Dovrai passare dall'interfaccia utente di Apps Script a questo codelab e viceversa.
5. Configurare il progetto Apps Script
Passaggio 1: visita Google Apps Script.
Passaggio 2: crea un nuovo progetto di Apps Script facendo clic su "+ Nuovo progetto" nella sezione in alto a sinistra.
Vedrai un progetto shell con una funzione myFunction
vuota nel file Code.gs
.
Passaggio 3: elimina la funzione myFunction
.
Passaggio 4: assegna un nome al progetto:
- Fai clic su
Untitled project
in alto a sinistra nella pagina - Inserisci un titolo per il progetto.
Inizia a scrivere il codice del connettore nel file Code.gs
.
6. Definisci getAuthType()
Looker Studio chiama la funzione getAuthType()
quando deve conoscere il metodo di autenticazione utilizzato dal connettore. Questa funzione deve restituire il metodo di autenticazione richiesto dal connettore per autorizzare il servizio di terze parti.
Per il connettore di download npm che stai creando, non è necessario eseguire l'autenticazione con nessun servizio di terze parti poiché l'API che stai utilizzando non richiede alcuna autenticazione. Copia il seguente codice e aggiungilo al file Code.gs
:
Code.gs
var cc = DataStudioApp.createCommunityConnector();
function getAuthType() {
var AuthTypes = cc.AuthType;
return cc
.newAuthTypeResponse()
.setAuthType(AuthTypes.NONE)
.build();
}
In questo caso, indichi che il connettore non richiede alcuna autenticazione di terze parti (AuthTypes.NONE
). Per visualizzare tutti i metodi di autenticazione supportati, consulta la documentazione su AuthType()
.
7. Definizione di getConfig()
Gli utenti del connettore dovranno configurarlo prima di poter iniziare a utilizzarlo. La risposta della funzione getConfig()
definisce le opzioni di configurazione che gli utenti vedranno. Looker Studio chiama la funzione getConfig()
per ottenere i dettagli di configurazione del connettore. In base alla risposta fornita da getConfig()
, Looker Studio mostrerà la schermata di configurazione del connettore e modificherà determinati comportamenti del connettore.
Nella schermata di configurazione, puoi fornire informazioni o ricevere input dell'utente utilizzando i seguenti elementi del modulo:
| Elemento di input | Casella di testo a una sola riga. |
| Elemento di input | Una casella area di testo multilinea. |
| Elemento di input | Un menu a discesa per le opzioni di selezione singola. |
| Elemento di input | Un menu a discesa per le opzioni di selezione multipla. |
| Elemento di input | Una singola casella di controllo che può essere utilizzata per acquisire valori booleani. |
| Elemento di visualizzazione | Una casella di testo normale statica che può essere utilizzata per fornire istruzioni o informazioni all'utente. |
Utilizza l'elemento INFO
per fornire le istruzioni per l'utente e un elemento TEXTINPUT
per ottenere il nome del pacchetto di input dall'utente. Nella risposta getConfig()
, raggruppi questi elementi del modulo nella chiave configParams
.
Poiché l'API a cui ti stai connettendo richiede la data come parametro, imposta dateRangeRequired
su true
nella risposta getConfig()
. In questo modo, indichi a Looker Studio di fornire gli intervalli di date con tutte le richieste di dati. Se l'origine dati non richiede la data come parametro, puoi ometterlo.
Aggiungi il seguente getConfig()
codice al tuo file Code.gs
, sotto il codice esistente per 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();
}
In base a questi parametri di configurazione, quando utilizzi il connettore in Looker Studio, puoi visualizzare una schermata di configurazione come la seguente. Ma ne parleremo più avanti.
Passiamo alla funzione successiva: getSchema()
.
8. Definisci getSchema()
Looker Studio chiama la funzione getSchema()
per ottenere lo schema associato alla configurazione selezionata dall'utente per il connettore. In base alla risposta fornita da getSchema()
, Looker Studio mostrerà la schermata dei campi all'utente che elenca tutti i campi nel connettore.
Per qualsiasi configurazione specifica del connettore, lo schema è un elenco di tutti i campi per i quali il connettore può fornire dati. Un connettore potrebbe restituire uno schema diverso con campi diversi in base a varie configurazioni. Lo schema può contenere campi recuperati dall'origine API, campi calcolati in Apps Script e campi calcolati in Looker Studio utilizzando una formula di campo calcolato. Il connettore fornisce i metadati relativi a ogni campo dello schema, tra cui:
- Nome del campo
- Tipo di dati per il campo
- Informazioni semantiche
Per saperne di più, consulta il riferimento getSchema()
e Field
in un secondo momento.
A seconda della modalità di recupero del connettore, lo schema può essere fisso o calcolato in modo dinamico quando viene chiamato getSchema()
. I parametri di configurazione da getConfig()
definiti dall'utente verranno forniti nell'argomento request
per la funzione getSchema()
.
Per questo codelab, non è necessario accedere all'argomento request
. Imparerai di più sull'argomento request
quando scrivi il codice per la funzione getData()
nel segmento successivo.
Per il connettore, lo schema è fisso e contiene i tre campi seguenti:
| Nome del pacchetto npm fornito dall'utente |
| Conteggio dei download del pacchetto npm |
| Data del conteggio dei download |
Di seguito è riportato il codice getSchema()
per il tuo connettore. La funzione helper getFields()
astrae la creazione dei campi poiché questa funzionalità è richiesta sia da getSchema()
sia da getData()
. Aggiungi il seguente codice al file 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 };
}
In base a questo schema, quando utilizzi il connettore in Looker Studio, nella schermata dei campi di Looker Studio vengono visualizzati i seguenti campi. Ne parleremo in seguito, quando testerai il connettore.
Passiamo alla nostra ultima funzione: getData()
.
9. Definizione di getData() : parte 1
Looker Studio chiama la funzione getData()
ogni volta che deve recuperare i dati. In base alla risposta fornita da getData()
, Looker Studio eseguirà il rendering e aggiornerà i grafici nella dashboard. getData()
potrebbe essere chiamato durante questi eventi:
- L'utente aggiunge un grafico alla dashboard
- L'utente modifica un grafico
- L'utente visualizza la dashboard
- L'utente modifica un filtro o un controllo dati associato
- Looker Studio ha bisogno di un campione di dati
Non è necessario copiare il codice di questa pagina perché copierai il documento
getData()
in un passaggio successivo.
Informazioni sull'oggetto request
Looker Studio trasmette l'oggetto request
a ogni chiamata getData()
. Esamina la struttura dell'oggetto request
di seguito. Questo ti aiuterà a scrivere il codice per la funzione getData()
.
Struttura dell'oggetto request
{
configParams: object,
scriptParams: object,
dateRange: {
startDate: string,
endDate: string
},
fields: [
{
name: Field.name
}
]
}
- L'oggetto
configParams
conterrà i valori di configurazione per i parametri definiti ingetConfig()
e configurati dall'utente. - L'oggetto
scriptParams
conterrà informazioni relative all'esecuzione del connettore. Non è necessario utilizzarlo per questo codelab. dateRange
conterrà l'intervallo di date richiesto, se richiesto nella rispostagetConfig()
.fields
conterrà l'elenco dei nomi dei campi per i quali vengono richiesti i dati.
Per il tuo connettore, un esempio di request
della funzione getData()
potrebbe essere il seguente:
{
configParams: {
package: 'jquery'
},
dateRange: {
startDate: '2017-07-16',
endDate: '2017-07-18'
},
fields: [
{
name: 'day',
},
{
name: 'downloads',
}
]
}
Per la chiamata getData()
nell'oggetto request
sopra, vengono richiesti solo due campi anche se lo schema del connettore include campi aggiuntivi. La pagina successiva conterrà la risposta di esempio per questa getData()
chiamata e la struttura getData()
generale delle risposte.
10. Definizione di getData() : parte 2
Nella risposta getData()
, dovrai fornire sia lo schema sia i dati per i campi richiesti. Il codice verrà suddiviso in tre segmenti:
- Crea lo schema per i campi richiesti.
- Recupera e analizza i dati dall'API.
- Trasforma i dati analizzati e filtra in base ai campi richiesti.
Non è necessario copiare il codice di questa pagina perché copierai il documento
getData()
nella pagina successiva.
Questa è la struttura del getData()
per il tuo connettore.
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>
};
}
Crea schema per i campi richiesti
// Create schema for requested fields
var requestedFieldIds = request.fields.map(function(field) {
return field.name;
});
var requestedFields = getFields().forIds(requestedFieldIds);
Recupera e analizza i dati dall'API
L'URL dell'API npm sarà nel seguente formato:
https://api.npmjs.org/downloads/point/{start_date}:{end_date}/{package}
Crea l'URL per l'API utilizzando request.dateRange.startDate
, request.dateRange.endDate
e request.configParams.package
forniti da Looker Studio. Quindi recupera i dati dall'API utilizzando UrlFetchApp
(Apps Script Class: reference). quindi analizza la risposta recuperata.
// 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;
Trasforma i dati analizzati e filtra per i campi richiesti
La risposta dell'API npm sarà nel formato seguente:
{
downloads: [
{
day: '2014-02-27',
downloads: 1904088
},
..
{
day: '2014-03-04',
downloads: 7904294
}
],
start: '2014-02-25',
end: '2014-03-04',
package: 'somepackage'
}
Trasforma la risposta dall'API npm e fornisci la risposta getData()
nel formato seguente. Se questo formato non è chiaro, dai un'occhiata alla risposta di esempio nel paragrafo seguente.
{
schema: [
{
object(Field)
}
],
rows: [
{
values: [string]
}
]
}
Nella risposta, restituisce lo schema solo per i campi richiesti utilizzando la proprietà schema
. I dati verranno restituiti utilizzando la proprietà rows
sotto forma di elenco di righe. Per ogni riga, la sequenza di campi in values
deve corrispondere alla sequenza di campi in schema
. In base all'esempio precedente di request
, questo è l'aspetto della risposta per getData()
:
{
schema: requestedFields.build(),
rows: [
{
values: [ 38949, '20170716']
},
{
values: [ 165314, '20170717']
},
{
values: [ 180124, '20170718']
},
]
}
Hai già creato un sottoinsieme dello schema. Utilizza la seguente funzione per trasformare i dati analizzati e filtrarli in base ai campi richiesti.
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. Definizione di getData() : parte 3
Il codice getData()
combinato sarà simile al seguente. Aggiungi il seguente codice al file 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
};
}
Hai terminato la configurazione del file Code.gs
. Quindi, aggiorna il file manifest.
12. Aggiorna manifest
Nell'editor di Apps Script, seleziona Impostazioni progetto > Mostra "appsscript.json" manifest nell'editor.
Verrà creato un nuovo file manifest appsscript.json
.
Sostituisci il file appscript.json
con quanto segue:
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"]
}
}
Salva il progetto Apps Script.
Complimenti! Hai creato il tuo primo connettore della community ed è pronto per il test drive.
13. Testare il connettore in Looker Studio
Utilizzare il deployment
Passaggio 1: nell'ambiente di sviluppo di Apps Script, fai clic su Esegui il deployment > Testa i deployment per aprire la finestra di dialogo Testa i deployment.
Verrà elencato il deployment predefinito, Head Deployment.
Passaggio 2: fai clic su Copia per copiare l'ID deployment principale.
Passaggio 3: per caricare il connettore in Looker Studio, sostituisci <HEAD_DEPLOYMENT_ID> nel seguente link con l'ID deployment principale del connettore e segui il link nel browser:
https://lookerstudio.google.com/datasources/create?connectorId=<HEAD_DEPLOYMENT_ID>
Autorizza il connettore
Utenti della prima volta che utilizzi Looker Studio: se non hai mai utilizzato Looker Studio, ti verrà chiesto di autorizzare Looker Studio e di accettare i Termini e condizioni. Completa la procedura di autorizzazione. Quando utilizzi Looker Studio per la prima volta, potresti anche visualizzare una finestra di dialogo per aggiornare le tue preferenze di marketing. Iscriviti agli annunci di prodotto se vuoi ricevere informazioni sulle ultime funzionalità, sugli aggiornamenti e sugli annunci di prodotto via email.
Al termine del caricamento, verrà visualizzato un prompt per autorizzare il connettore.
Fai clic su Autorizza e fornisci l'autorizzazione richiesta al connettore.
Configura il connettore
Una volta completata l'autorizzazione, verrà visualizzata la schermata di configurazione. Digita "faro". nell'area di immissione testo e fai clic su Connetti in alto a destra.
Conferma lo schema
Verrà visualizzata la schermata dei campi. Fai clic su Crea report in alto a destra.
Creazione di una dashboard
Ti troverai nell'ambiente dashboard di Looker Studio. Fai clic su Aggiungi al report.
In Looker Studio, ogni volta che un utente accede a un connettore e aggiunge una nuova configurazione, viene creata una nuova origine dati nel suo account Looker Studio. Un'origine dati può essere considerata come un'istanza del connettore basata su una configurazione specifica. In base al connettore e alla configurazione selezionata dall'utente, un'origine dati restituirà una tabella di dati con un insieme specifico di campi. Gli utenti possono creare più origini dati dallo stesso connettore. Un'origine dati può essere utilizzata in più report e uno stesso report può impiegare più origini dati.
Ora aggiungi un grafico delle serie temporali. Nel menu, fai clic su Inserisci > Serie temporali. Poi inserisci le serie temporali nel canvas. Dovresti vedere un grafico delle serie temporali del conteggio dei download npm per il pacchetto selezionato. Aggiungi un controllo filtro della data e visualizza la dashboard come mostrato di seguito.
È tutto. Hai appena creato il tuo primo connettore della community. Siamo giunti alla fine del codelab. Ora vediamo quali sono i prossimi passaggi che puoi intraprendere.
14. Passaggi successivi
Migliora il connettore della tua
Apporta miglioramenti al connettore che hai appena creato:
- In Looker Studio, se non fornisci un nome di pacchetto nella schermata di configurazione del connettore, verrà visualizzato un messaggio di errore quando disegni il grafico delle serie temporali. Prova ad aggiungere la convalida dell'input o un'opzione predefinita alla configurazione dei connettori.
- Prova ad aggiungere il supporto per eseguire query su più nomi di pacchetto contemporaneamente nella configurazione dei connettori. Suggerimento: l'API npm Package download count supporta l'inserimento di più nomi di pacchetti separati da virgole.
- Puoi trovare soluzioni a entrambi nel nostro codice del connettore npm.
Ottieni il massimo dai Connettori della community
- Visualizza il riferimento per l'API Connector e il manifest.
- Esplora il codice di esempio del connettore nel nostro repository open source per comprendere le best practice.
- Completa il codelab sulle fibbie per sviluppare i connettori della community nel tuo ambiente locale.
- Dopo aver creato un connettore della community completo, prendi in considerazione le opzioni di pubblicazione disponibili.
- Crea una visualizzazione della community per Looker Studio.
Risorse aggiuntive
Di seguito sono riportate varie risorse a cui puoi accedere per approfondire il materiale trattato in questo codelab.
Tipo di risorsa | Funzionalità utente | Funzionalità per sviluppatori | |
Documentazione | |||
Notizie e Aggiornamenti | Registrati a Looker Studio > Impostazioni utente | ||
Fai domande | |||
Video | |||
Esempi |