L'intégration de contenus Looker via des cadres iFrame n'est que l'une des méthodes que les développeurs peuvent utiliser lorsqu'ils veulent ajouter un tableau de bord, un aperçu ou une exploration à leur application Web. Ce tutoriel présente une autre méthode pour les développeurs qui souhaitent ajouter une visualisation Looker dans une application React. Ce tutoriel est basé sur un déclencheur simple de création d'applications React et utilise des composants de visualisation Looker.
Voici la procédure à suivre dans ce tutoriel:
- Obtenir le slug de requête depuis Looker
- Créer une application React avec des composants de visualisation Looker
- Créer un service d'assistance backend
Obtenir le slug de requête depuis Looker
Looker n'ayant pas à utiliser l'application React, vous devez effectuer certaines tâches.
Obtenir un slug de requête
Vous avez besoin de l'ID de requête ou du slug qui sera utilisé comme accessoire du composant de visualisation. Cet article explique comment obtenir le slug de requête à partir d'une URL de l'exploration. Vous trouverez un autre exemple dans la documentation de Looker.
Configurer CORS dans votre instance Looker
Le partage de ressources inter-origines (CORS) est contrôlé par la même liste d'autorisation de domaines que l'intégration.
Ce processus est décrit en détail sur la page de documentation concernant l'intégration de l'authentification unique (SSO).
- Accédez à Admin > Plate-forme intégrée sur votre instance Looker. Vous devez disposer des droits d'administrateur.
- L'application React s'exécute par défaut à
http://localhost:3000. En ajoutant cette adresse à la liste d'autorisation de domaines intégrés, vous indiquez à Looker d'autoriser les requêtes de l'application et d'y répondre via la même adresse. Cette étape est obligatoire, car l'application enverra des requêtes API à l'instance Looker. Dans le cas contraire, il n'y aura pas de communication entre Looker et l'application.
Créer l'application React
L'interface de cette démonstration utilise l'application Create React pour créer l'application React monopage. Exécutez les commandes suivantes dans le dossier racine de la version de démonstration (get-started-viz-components) pour créer l'application et installer les dépendances:
npx create-react-app frontend-react cd frontend-react npm i
@looker/visualizations npm i @looker/components @looker/components-data
styled-components
Une fois ces commandes exécutées, votre structure de dossiers doit se présenter comme suit:
Vérifiez le fichier package.json et assurez-vous que react-dom est également installé. Sinon, installez-le en exécutant npm i react-dom.
Le package.json de cette démonstration se présente comme suit:
{
"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"
]
}
}
Configurer les variables d'environnement
Créez un fichier .env dans le répertoire racine de l'application (./frontend-react) et définissez les variables suivantes:
REACT_APP_LOOKER_API_HOST=https://your-looker-instance.looker.com
REACT_APP_BACKEND_SERVER=http://localhost:3001/
REACT_APP_BACKEND_SERVER est l'adresse du service d'assistance de backend que nous utiliserons pour effectuer un appel d'API à Looker afin d'extraire le jeton d'accès.
REACT_APP_LOOKER_API_HOST est l'adresse de l'instance Looker qui recevra les requêtes API de l'application React.
Initialiser le SDK côté client
L'application React utilisera le SDK pour envoyer des requêtes API au serveur Looker. Comme cette opération est effectuée sur le frontal, vous pouvez utiliser l'assistant suivant pour initialiser 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)
Intégrer la visualisation dans l'application
Maintenant que vous disposez du slug de requête (dans notre exemple, il s'agit de Jlm4YHPeT3lLGA9UtHjZcA) de la visualisation et que l'objet sdk a été instancié, l'étape suivante consiste à utiliser les composants de visualisation Looker pour intégrer et afficher la visualisation dans l'application:
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
L'interface est prête. Vous pouvez ajouter d'autres composants, appliquer un style supplémentaire à l'application, etc.
Créer un service d'assistance backend
La dernière étape consiste à créer le service d'assistance de backend qui recevra l'appel de l'interface, à authentifier l'utilisateur à l'aide du SDK du nœud Looker, à extraire son jeton d'accès, puis à le renvoyer à l'interface.
Par souci de simplicité, nous allons créer un serveur de nœud avec un seul point de terminaison. Le serveur utilisera les dépendances express, cors et @looker/sdk-node. Vous pouvez exécuter les commandes suivantes à partir du dossier racine (get-started-viz-components):
mkdir backend-node
cd backend-node
npm init -y
npm i express cors @looker/sdk-node
Pour authentifier le SDK à partir du backend, nous utiliserons un fichier looker.ini. Pour savoir comment renseigner le fichier, consultez la page SDK-Node. Une fois ces commandes exécutées, votre structure de dossiers doit se présenter comme suit:
package.json devrait se présenter comme suit:
{
"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"
}
}
Nous allons ensuite ajouter le code suivant dans un nouveau fichier 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}`)
})
Démarrer le serveur et l'application React
- Ouvrez un terminal et accédez au dossier
backend-node, puis exécuteznpm start. - Ouvrez un deuxième terminal, puis accédez au dossier
frontend-reactet exécuteznpm start. - Une fois que le service d'assistance du backend et l'application responsive sont opérationnels, vous pouvez ouvrir le navigateur et accéder à
http://localhost:3000/pour voir la visualisation intégrée à l'application.
