Inizia a utilizzare i componenti di visualizzazione di Looker

L'incorporamento di contenuti Looker tramite iframe è solo uno dei metodi a disposizione degli sviluppatori 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 in un'app React. Questo tutorial è basato su un comando iniziale Crea React App e utilizza i componenti di visualizzazione di Looker.

Questi sono i passaggi descritti in questo tutorial:

  1. Recuperare lo slug delle query da Looker
  2. Creare un'applicazione React con i componenti di visualizzazione di Looker
  3. Crea un servizio helper di backend
  4. Avvia il server e l'app React

Ottieni lo slug delle query da Looker

Ci sono alcune cose che devi fare in Looker, dal momento che l'app React dipende da queste attività.

Ottieni uno slug di query

Hai bisogno dell'ID query o dello slug che verrà utilizzato come elemento di scena del componente di visualizzazione. Questo articolo spiega come ottenere lo slug di query da un URL Esplora. 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 Amministratore > Incorporamento della piattaforma nell'istanza di Looker. Sono necessari privilegi amministrativi.
  2. L'app React viene eseguita per impostazione predefinita alle ore http://localhost:3000. Se aggiungi questo indirizzo alla lista consentita dei domini incorporati, indichi a Looker di consentire le richieste provenienti dall'app e di rispondere 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 il seguente aspetto:

Una cartella denominata Frontend reagisce, contenente le cartelle Node moduli, Public e src, e i file richiamano .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 helper backend che utilizzeremo per effettuare una chiamata API a Looker al fine di 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)

Incorpora la visualizzazione nell'app

Ora che hai lo slug della query (nel nostro esempio Jlm4YHPeT3lLGA9UtHjZcA) della visualizzazione e hai creato l'istanza dell'oggetto sdk, il passaggio successivo consiste nell'utilizzare i componenti di visualizzazione di Looker per incorporare ed eseguire il rendering della 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, aggiungere stili all'app e così via.

Crea un servizio helper di backend

Il passaggio finale consiste nel creare il 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 avere il seguente aspetto:

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"
  }
}

Successivamente aggiungeremo questo codice in 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 e vai alla cartella backend-node, quindi esegui npm start
  • Apri un secondo terminale, quindi vai alla cartella frontend-react ed esegui npm start
  • Quando il servizio helper di backend e l'app di reazione sono in esecuzione, puoi aprire il browser e andare a http://localhost:3000/ per vedere la visualizzazione incorporata nell'applicazione.

Visualizza il codice in GitHub