Inizia a utilizzare i componenti di visualizzazione di Looker

L'incorporamento dei contenuti di Looker tramite iframe è solo uno dei metodi che gli sviluppatori possono utilizzare quando vogliono aggiungere una dashboard, un Look o un'esplorazione alla loro applicazione web. Questo tutorial presenta un altro metodo per gli sviluppatori che vogliono aggiungere una visualizzazione Looker a un'app React. Questo tutorial è basato su un semplice comando iniziale di Crea reazione dell'app e utilizza i componenti di visualizzazione Looker.

Questi sono i passaggi trattati in questo tutorial:

1. Scarica lo slug di query da Looker
2. Crea un'applicazione React con i componenti di visualizzazione Looker
3. Crea un servizio helper di backend

Scarica lo slug di query da Looker

È necessario eseguire alcune operazioni in Looker perché l'app React dipende da questi elementi.

Recupero di uno slug di query

È necessario l'ID query o lo slug che verrà utilizzato come supporto del componente di visualizzazione. Questo articolo spiega come recuperare lo slug di query da un URL di esplorazione. Un altro esempio è disponibile nella documentazione di Looker.

Configura CORS nell'istanza di Looker

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

Per maggiori dettagli, consulta la pagina della documentazione relativa all'incorporamento firmato.

1. Vai ad Admin > Platform Embed (Incorporamento della piattaforma) nell'istanza di Looker. Sono necessari privilegi amministrativi.
2. Per impostazione predefinita, l'app React viene eseguita alle ore http://localhost:3000. Aggiungendo questo indirizzo alla lista consentita dei domini incorporati, indichi a Looker di consentire le richieste dall'app e rispondere a queste richieste utilizzando lo stesso indirizzo. Questo passaggio è obbligatorio perché l'app invierà 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:

Controlla il file package.json e assicurati che anche react-dom sia installato, 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 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.

Inizializza SDK lato client

L'app React utilizzerà l'SDK per inviare richieste API al server Looker. Poiché questa operazione viene eseguita sul front-end, puoi utilizzare 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 used above
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 di query (nel nostro esempio è Jlm4YHPeT3lLGA9UtHjZcA) della visualizzazione e hai creato l'istanza dell'oggetto sdk, il passaggio successivo consiste nell'utilizzare i componenti Visualizzazione 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, 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 inviarlo di nuovo al frontend.

Per semplicità, creeremo un server Node con un endpoint. Il server utilizzerà le dipendenze express, cors e @looker/sdk-node. Puoi eseguire i seguenti 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 ulteriori dettagli su come completare il file nella pagina SDK-Node. Dopo aver eseguito questi comandi, la struttura delle cartelle dovrebbe avere il seguente aspetto:

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

Dopodiché 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 init40 method below 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, vai alla cartella frontend-react ed esegui npm start
• Una volta che il servizio helper di backend e l'app di reazione sono attivi e in esecuzione, puoi aprire il browser e andare su http://localhost:3000/ per vedere la visualizzazione incorporata nell'applicazione.

Visualizza il codice in GitHub