Inizia a utilizzare i componenti di visualizzazione di Looker

L'incorporamento di contenuti 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 di Looker a un'app React. Questo tutorial si basa su un semplice comando iniziale Crea app React e utilizza i componenti Visualizzazione Looker.

Ecco i passaggi illustrati in questo tutorial:

1. Scarica lo slug delle query da Looker
2. Crea un'applicazione di reazione con i componenti della visualizzazione Looker
3. Crea un servizio di supporto backend

Scarica lo slug delle query da Looker

Ci sono alcune cose da fare in Looker perché l'app React dipende da queste.

Recupero di uno slug di query

È necessario l'ID query o slug che verrà utilizzato come elemento di supporto del componente di visualizzazione. Questo articolo spiega come ottenere lo slug delle query da un URL di esplorazione. Puoi trovare un altro esempio nella documentazione di Looker.

Configura CORS nella tua istanza di Looker

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

Ciò è descritto più dettagliatamente nella pagina della documentazione sull'incorporamento con Single Sign-On (SSO).

1. Vai ad Amministrazione > Incorpora piattaforma sulla tua istanza di Looker. Sono necessari privilegi amministrativi.
2. L'app React viene eseguita per impostazione predefinita all'indirizzo 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 tali richieste tramite lo stesso indirizzo. Questo passaggio è obbligatorio poiché l'app effettua richieste API all'istanza di Looker, altrimenti non verrà comunicata alcuna comunicazione tra Looker e l'app.

Creare l'applicazione React

Il frontend di questa demo utilizza Create React App per creare l'applicazione React di una pagina. Esegui i comandi seguenti 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 essere simile alla seguente:

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

La package.json di questa demo sarà simile a questa:

{
  "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 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 in front-end, puoi utilizzare il seguente aiutante 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)

Incorporare la visualizzazione nell'app

Ora che hai creato la query slug (nel nostro esempio è Jlm4YHPeT3lLGA9UtHjZcA) della visualizzazione e che è stata creata l'istanza dell'oggetto sdk, il passaggio successivo consiste nell'utilizzare i componenti della 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 più stili all'app e così via.

Crea un servizio di supporto backend

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

Per semplicità, creeremo un server nodo 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 completare il file nella pagina Nodo SDK. Dopo aver eseguito questi comandi, la struttura delle cartelle dovrebbe essere simile alla seguente:

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

In seguito, 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, quindi vai alla cartella frontend-react ed esegui npm start
• Dopo che il servizio di supporto backend e l'app di reazione sono attivi, puoi aprire il browser e andare a http://localhost:3000/ per vedere la visualizzazione incorporata nell'applicazione.

Visualizza il codice in GitHub