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 Looker a un'app React. Questo tutorial si basa su un progetto iniziale di Create React App e utilizza i componenti di visualizzazione di Looker.
Questi sono i passaggi trattati in questo tutorial:
- Recupera lo slug della query da Looker
- Crea un'applicazione React con i componenti di visualizzazione di Looker
- Crea un servizio helper di backend
- Avvia il server e l'app React
Recupera lo slug della query da Looker
Ci sono alcune operazioni da eseguire in Looker, perché l'app React dipende da queste.
Recupera uno slug della query
Ti serve l'ID o lo slug della query che verrà utilizzato come prop del componente di visualizzazione. Questo articolo spiega come recuperare lo slug della query da un URL di esplorazione.
Configura CORS nell'istanza di Looker
La condivisione delle risorse tra origini (CORS) è controllata dalla stessa lista consentita di domini dell'incorporamento.
- Nell'istanza di Looker, vai ad Amministratore > Incorporamento della piattaforma. Sono richiesti i privilegi di amministratore.
- Per impostazione predefinita, l'app React viene eseguita all'indirizzo
http://localhost:3000. Aggiungendo questo indirizzo alla lista consentita di domini incorporati , indichi a Looker di consentire le richieste dell'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 i seguenti 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 essere simile alla seguente:
Controlla il file package.json e assicurati che react-dom sia installato, altrimenti installalo eseguendo npm i react-dom.
Il file package.json di questa demo è simile al seguente:
{
"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.
Inizializza 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 utilizzare il seguente helper per inizializzare l'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 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, aggiungere altro stile all'app e così via.
Crea un servizio helper di backend
L'ultimo passaggio consiste nel creare il servizio helper di backend che riceverà la chiamata dal frontend, utilizzerà l'SDK Looker-Node per autenticare l'utente, estrarre il suo 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 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:
Il file package.json dovrebbe essere simile al seguente:
{
"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 quindi 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 e vai alla cartella
backend-node, quindi eseguinpm start - Apri un secondo terminale, vai alla cartella
frontend-reacted eseguinpm start - Una volta che il servizio helper di backend e l'app React sono in esecuzione, puoi aprire il browser e andare all'indirizzo
http://localhost:3000/per visualizzare la visualizzazione incorporata nell'applicazione.
Visualizza il codice in GitHub