Iniziare a utilizzare i componenti di visualizzazione di Looker

L'inserimento dei contenuti di Looker tramite iframe è solo uno dei metodi che gli sviluppatori possono utilizzare per aggiungere una dashboard, un look o un'esplorazione alla propria applicazione web. Questo tutorial presenta un altro metodo per gli sviluppatori che vogliono aggiungere una visualizzazione di Looker a un'app React. Il tutorial si basa su uno starter di Create React App e utilizza i componenti di visualizzazione di Looker.

Questi sono i passaggi descritti in questo tutorial:

  1. Ottenere lo slug della query da Looker
  2. Creare un'applicazione React con componenti di visualizzazione di Looker
  3. Creare un servizio di assistenza di backend
  4. Avvia il server e l'app React

Ottieni lo slug delle query da Looker

Poiché l'app React dipende da queste azioni, devi eseguire alcuni passaggi in Looker.

Ottenere uno slug di query

Devi avere l'ID o lo slug della query che verrà utilizzato come proprietà del componente di visualizzazione. Questo articolo spiega come ottenere lo slug della query da un URL di esplorazione. Un altro esempio è disponibile nella documentazione di Looker.

Configura CORS nell'istanza Looker

La condivisione delle risorse tra origini (CORS) è controllata dalla stessa lista consentita di domini dell'incorporamento.

Questo processo è documentato in modo più dettagliato nella pagina della documentazione Incorporamento firmato.

  1. Vai ad Amministrazione > Platform Embed (Incorporamento della piattaforma) nella tua istanza Looker. Sono necessari privilegi amministrativi.
  2. L'app React viene eseguita per impostazione predefinita alle ore http://localhost:3000. Aggiungendo questo indirizzo alla lista consentita dei domini incorporati, indichi a Looker di consentire le richieste dall'app e di rispondere a queste richieste utilizzando lo stesso indirizzo. Questo passaggio è obbligatorio perché l'app effettuerà richieste API all'istanza di Looker, altrimenti non ci sarà comunicazione tra Looker e l'app.

crea l'applicazione React

Il frontend di questa demo utilizza Create React App per creare l'applicazione React a pagina singola. Esegui questi comandi nella cartella principale della demo (get-started-viz-components) per creare l'app e installare le dipendenze:

npx create-react-app frontend-react cd frontend-react npm i
@looker/visualizations npm i @looker/components @looker/components-data
styled-components

Dopo aver eseguito questi comandi, la struttura delle cartelle dovrebbe avere l'aspetto seguente:

Una cartella denominata Frontend react, contenente le cartelle Node modules, Public e src e i file .gitignore, package-lock.json e package.json.

Controlla il file package.json e assicurati che sia installato anche react-dom, altrimenti installalo eseguendo npm i react-dom.

Il package.json di questa demo ha il seguente aspetto:

{
  "name": "frontend-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@looker/components": "^4.0.3",
    "@looker/components-data": "^1.0.0",
    "@looker/sdk": "^22.16.0",
    "@looker/sdk-rtl": "^21.4.0",
    "@looker/visualizations": "^1.1.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^12.1.0",
    "@testing-library/user-event": "^12.4.0",
    "i": "^0.3.7",
    "npm": "^8.19.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Configura le variabili di ambiente

Crea un file .env nella directory principale dell'app (./frontend-react) e imposta le seguenti variabili:

REACT_APP_LOOKER_API_HOST=https://your-looker-instance.looker.com
REACT_APP_BACKEND_SERVER=http://localhost:3001/

REACT_APP_BACKEND_SERVER è l'indirizzo del servizio di assistenza di backend che utilizzeremo per effettuare una chiamata API a Looker per estrarre il token di accesso.

REACT_APP_LOOKER_API_HOST è l'indirizzo dell'istanza di Looker che riceverà le richieste API dall'app React.

Inizializzare l'SDK lato client

L'app React utilizzerà l'SDK per effettuare richieste API al server Looker. Poiché questa operazione viene eseguita sul frontend, puoi usare il seguente helper per inizializzare sdk:

import { Looker40SDK } from '@looker/sdk'
import {
  AuthToken,
  AuthSession,
  BrowserTransport,
  DefaultSettings,
} from '@looker/sdk-rtl'

class SDKSession extends AuthSession {
  // This is a placeholder for the fetchToken function.
  // It is modified to make it useful later.
  async fetchToken() {
    return fetch('')
  }

  activeToken = new AuthToken()
  constructor(settings, transport) {
    super(settings, transport || new BrowserTransport(settings))
  }

  // This function checks to see if the user is already authenticated
  isAuthenticated() {
    const token = this.activeToken
    if (!(token && token.access_token)) return false
    return token.isActive()
  }

  // This function gets the current token or fetches a new one if necessary
  async getToken() {
    if (!this.isAuthenticated()) {
      const token = await this.fetchToken()
      const res = await token.json()
      this.activeToken.setToken(res.user_token)
    }
    return this.activeToken
  }

  // This function authenticates a user, which involves getting a new token
  // It returns a modified object with a new authorization header.
  async authenticate(props) {
    const token = await this.getToken()
    if (token && token.access_token) {
      props.mode = 'cors'
      delete props.credentials
      props.headers = {
        ...props.headers,
        Authorization: `Bearer ${this.activeToken.access_token}`,
      }
    }
    return props
  }
}

// This class sets the fetchToken to use the 'real' address of the backend server.
class SDKSessionEmbed extends SDKSession {
  async fetchToken() {
    return fetch(`${process.env.REACT_APP_BACKEND_SERVER}`)
  }
}

// This creates a new session with the 'real' address of the backend server.
const session = new SDKSessionEmbed({
  ...DefaultSettings,
  base_url: process.env.REACT_APP_LOOKER_API_HOST,
})

// This exports the SDK with the authenticated session
export const sdk = new Looker40SDK(session)

Incorporare la visualizzazione nell'app

Ora che hai lo slug della query (nel nostro esempio è Jlm4YHPeT3lLGA9UtHjZcA) della visualizzazione e l'oggetto sdk è stato creato, il passaggio successivo consiste nell'utilizzare i componenti di visualizzazione di Looker per incorporare e visualizzare la visualizzazione nell'app:

import { sdk } from '../src/helpers/CorsSession'
import { Query, Visualization } from '@looker/visualizations'
import { DataProvider } from '@looker/components-data'
import { ComponentsProvider } from '@looker/components'

function App() {
  return (
    <>
      <h1>Get started with Looker visualization components</h1>
      <ComponentsProvider>
        <DataProvider sdk={sdk}>
          {/* Change this query slug to match your query slug */}
          <Query query="Jlm4YHPeT3lLGA9UtHjZcA">
            <Visualization />
          </Query>
        </DataProvider>
      </ComponentsProvider>
    </>
  )
}

export default App

Il frontend è pronto. Puoi aggiungere altri componenti, altri stili all'app e così via.

Crea un servizio di assistenza di backend

Il passaggio finale consiste nella creazione del servizio helper backend che riceverà la chiamata dal frontend, utilizzare l'SDK Looker-Node per autenticare l'utente, estrarre il token di accesso e quindi inviarlo al frontend.

Per semplicità, creeremo un server Node con un endpoint. Il server utilizzerà le dipendenze express, cors e @looker/sdk-node. Puoi eseguire questi comandi a partire dalla cartella principale (get-started-viz-components):

mkdir backend-node
cd backend-node
npm init -y
npm i express cors @looker/sdk-node

Per autenticare l'SDK dal backend, utilizzeremo un file looker.ini. Puoi trovare maggiori dettagli su come compilare il file nella pagina SDK-Node. Dopo aver eseguito questi comandi, la struttura delle cartelle dovrebbe essere simile alla seguente:

Una cartella denominata backend-node, contenente una cartella denominata node_modules e i file looker.ini, package-lock.json, package.json e server.js.

package.json dovrebbe avere il seguente aspetto:

{
  "name": "looker-embed-backend",
  "version": "1.0.0",
  "description": "Backend helper service for getting started with Looker Viz components",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "Looker",
  "license": "Apache-2.0",
  "dependencies": {
    "@looker/sdk-node": "^22.16.0",
    "cors": "^2.8.5",
    "express": "^4.18.2"
  }
}

Aggiungeremo questo codice a un nuovo file server.js:

const cors = require('cors')
const express = require('express')
const { LookerNodeSDK } = require('@looker/sdk-node')

const port = 3001
const app = express()
// The following init40 method will authenticate using
// the looker.ini file
const sdk = LookerNodeSDK.init40()

app.use(
  cors({
    origin: '*',
  })
)
app.use(express.json())

app.get('/', async (req, res) => {
  const userId = await sdk.ok(sdk.me('id'))
  const accessToken = await sdk.login_user(userId.id)
  const user = {
    user_token: accessToken.value,
    token_last_refreshed: Date.now(),
  }
  res.json({ ...user })
})

app.listen(port, async () => {
  console.log(`Backend Server listening on port ${port}`)
})

Avvia il server e l'app React

  • Apri un terminale, vai alla cartella backend-node ed esegui npm start
  • Apri un secondo terminale, vai alla cartella frontend-react ed esegui npm start
  • Una volta avviati il servizio di assistenza di backend e l'app React, puoi aprire il browser e andare alla pagina http://localhost:3000/ per visualizzare la visualizzazione incorporata nell'applicazione.

Visualizza il codice su GitHub