Collegare e visualizzare tutti i dati in Looker Studio

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:

2f296fddf6af7393.png

( 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?

Mi interessa la visualizzazione dei dati in generale. Voglio saperne di più su Looker Studio Voglio creare il mio connettore della community. Sto cercando di integrare Looker Studio con un'altra piattaforma. Mi interessano le soluzioni Google Cloud.

Come intendi utilizzare questo codelab/tutorial?

Solo scorrimento Leggilo e completa gli esercizi

Come valuteresti la tua familiarità con Looker Studio?

Mai sentito nominare So di cosa si tratta, ma non la uso. Lo uso regolarmente. Sono un utente esperto.

Quale delle seguenti opzioni descrive meglio il tuo background?

Sviluppatore Analista aziendale / finanziario / di dati Data scientist / data engineer Esperto di marketing / social media / digital Analytics Progettista Altro

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.

b25b8d6bea6da54b.png

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.

cc6688bf38749e5.png

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.

fb12d7318d0946cf.png

Vedrai un progetto shell con una funzione myFunction vuota nel file Code.gs.

b245ce5eb3dd2ee2.png

Passaggio 3: elimina la funzione myFunction.

Passaggio 4: assegna un nome al progetto:

  1. Fai clic su Untitled project in alto a sinistra nella pagina
  2. Inserisci un titolo per il progetto.

7172aebc181c91d4.png

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:

TEXTINPUT

Elemento di input

Casella di testo a una sola riga.

TEXTAREA

Elemento di input

Una casella area di testo multilinea.

SELECT_SINGLE

Elemento di input

Un menu a discesa per le opzioni di selezione singola.

SELECT_MULTIPLE

Elemento di input

Un menu a discesa per le opzioni di selezione multipla.

CHECKBOX

Elemento di input

Una singola casella di controllo che può essere utilizzata per acquisire valori booleani.

INFO

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.

7de872f17e59e92.png

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:

packageName

Nome del pacchetto npm fornito dall'utente

downloads

Conteggio dei download del pacchetto npm

day

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.

c7cd7057b202be59.png

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 in getConfig() 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 risposta getConfig().
  • 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.

90a68a58bbbb63c4.png

Verrà creato un nuovo file manifest appsscript.json.

1081c738d5d577a6.png

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.

5701ece1c89415c.png

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.

3f57ea0feceb2596.png

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.

d7e66726a1e64c05.png

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.

ec7416d6dbeabc8f.png

Conferma lo schema

Verrà visualizzata la schermata dei campi. Fai clic su Crea report in alto a destra.

4a9084bd51d2fbb8.png

Creazione di una dashboard

Ti troverai nell'ambiente dashboard di Looker Studio. Fai clic su Aggiungi al report.

1ca21e327308237c.png

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.

4c076e07665f57aa.gif

È 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

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

Centro assistenza

Documentazione per gli sviluppatori

Notizie e Aggiornamenti

Registrati a Looker Studio > Impostazioni utente

Mailing list degli sviluppatori

Fai domande

Forum utenti

Stack Overflow [looker-studio]

Video

DataVis DevTalk

Esempi

Repository open source