Erste Schritte mit Looker-Visualisierungskomponenten

Das Einbetten von Looker-Inhalten über iFrames ist eine der Methoden, mit denen Entwickler ein Dashboard, einen Look oder einen Explore in ihre Webanwendung einbinden können. In dieser Anleitung wird eine weitere Methode für Entwickler vorgestellt, die eine Looker-Visualisierung in eine React-Anwendung einbinden möchten. Sie basiert auf einem einfachen Auslöser für die Erstellung von React-Apps und verwendet Looker-Visualisierungskomponenten.

In dieser Anleitung werden folgende Schritte behandelt:

1. Abfrage-Slug von Looker abrufen
2. React-Anwendung mit Looker-Visualisierungskomponenten erstellen
3. Back-End-Hilfsdienst erstellen

Abfrage-Slug von Looker

In Looker müssen einige Schritte ausgeführt werden, da die React-Anwendung von ihnen abhängt.

Abfrage-Slug abrufen

Sie benötigen die Abfrage-ID oder die Slug, die als Attribut für die Visualisierungskomponente verwendet wird. In diesem Artikel wird erläutert, wie Sie die Abfrage-Slug aus einer Explore-URL abrufen. Ein weiteres Beispiel finden Sie in der Looker-Dokumentation.

CORS in Ihrer Looker-Instanz konfigurieren

Cross-Origin Resource Sharing (CORS) wird durch dieselbe Domain-Zulassungsliste gesteuert wie Einbettung.

Weitere Informationen finden Sie auf der Dokumentationsseite zum Einbetten von Einmalanmeldung (SSO).

1. Rufen Sie auf der Looker-Instanz Admin > Plattformeinbettung auf. Dafür sind Administratorberechtigungen erforderlich.
2. Die React-App wird standardmäßig auf http://localhost:3000 ausgeführt. Wenn Sie diese Adresse der Zulassungsliste der eingebetteten Domains hinzufügen, können Sie festlegen, dass Looker Anfragen von der App zulassen und über dieselbe Adresse antworten soll. Dieser Schritt ist obligatorisch, da die Anwendung API-Anfragen an die Looker-Instanz sendet. Andernfalls erfolgt keine Kommunikation zwischen Looker und der Anwendung.

React-Anwendung erstellen

Das Front-End dieser Demo verwendet React-Anwendung erstellen, um die Single-Page-React-Anwendung zu erstellen. Führen Sie im Stammverzeichnis der Demo (get-started-viz-components) die folgenden Befehle aus, um die App zu erstellen und die Abhängigkeiten zu installieren:

npx create-react-app frontend-react cd frontend-react npm i
@looker/visualizations npm i @looker/components @looker/components-data
styled-components

Nachdem Sie diese Befehle ausgeführt haben, sollte die Ordnerstruktur so aussehen:

Prüfen Sie die Datei package.json und achten Sie darauf, dass react-dom ebenfalls installiert ist. Wenn Sie die Datei installieren möchten, führen Sie npm i react-dom aus.

Die package.json dieser Demo sieht so aus:

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

Umgebungsvariablen konfigurieren

Erstellen Sie im Stammverzeichnis der App eine .env-Datei (./frontend-react) und legen Sie die folgenden Variablen fest:

REACT_APP_LOOKER_API_HOST=https://your-looker-instance.looker.com
REACT_APP_BACKEND_SERVER=http://localhost:3001/

REACT_APP_BACKEND_SERVER ist die Adresse des Back-End-Hilfsdienstes, mit dem wir einen API-Aufruf an Looker senden, um das Zugriffstoken zu extrahieren.

REACT_APP_LOOKER_API_HOST ist die Adresse der Looker-Instanz, die API-Anfragen von der React-Anwendung empfängt.

Clientseitiges SDK initialisieren

Die React-Anwendung verwendet das SDK, um API-Anfragen an den Looker-Server zu senden. Da dies am Front-End erfolgt, können Sie mit dem folgenden Hilfs das sdk initialisieren:

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)

Visualisierung in die App einbetten

Da Sie nun die Abfrage Slug (in diesem Beispiel Jlm4YHPeT3lLGA9UtHjZcA) der Visualisierung haben und das sdk-Objekt instanziiert wurde, besteht der nächste Schritt darin, die Looker-Visualisierungskomponenten zu verwenden, um die Visualisierung einzubetten und in die Anwendung zu rendern:

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

Das Front-End ist bereit. Bei Bedarf lassen sich weitere Komponenten oder Stile in die App einfügen.

Back-End-Hilfsdienst erstellen

Der letzte Schritt besteht darin, den Back-End-Hilfsdienst zu erstellen, der den Aufruf vom Front-End empfängt, den Looker-Node SDK zu verwenden, um den Nutzer zu authentifizieren, dessen Zugriffstoken zu extrahieren und es dann an das Front-End zu senden.

Der Einfachheit halber erstellen wir einen Knotenserver mit einem Endpunkt. Der Server verwendet die Abhängigkeiten express, cors und @looker/sdk-node. Sie können im Stammverzeichnis (get-started-viz-components) die folgenden Befehle ausführen:

mkdir backend-node
cd backend-node
npm init -y
npm i express cors @looker/sdk-node

Zur Authentifizierung des SDKs über das Back-End verwenden wir eine looker.ini-Datei. Weitere Informationen zum Füllen der Datei finden Sie auf der SDK-Knotenseite. Nachdem Sie diese Befehle ausgeführt haben, sollte die Ordnerstruktur so aussehen:

Das package.json sollte so aussehen:

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

Als Nächstes fügen wir diesen Code in einer neuen server.js-Datei ein:

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}`)
})

Server und React-Anwendung starten

• Öffnen Sie ein Terminal, rufen Sie den Ordner backend-node auf und führen Sie npm start aus
• Öffnen Sie ein zweites Terminal, rufen Sie den Ordner frontend-react auf und führen Sie npm start aus
• Sobald der Back-End-Hilfsdienst und die Reaktions-App aktiv sind, können Sie den Browser öffnen und http://localhost:3000/ aufrufen, um die in die Anwendung eingebettete Visualisierung zu sehen.

Code in GitHub ansehen