Erste Schritte mit Looker-Visualisierungskomponenten

Das Einbetten von Looker-Inhalten mithilfe von iFrames ist nur eine der Methoden, die Entwickler verwenden können, wenn sie ihrer Webanwendung ein Dashboard, einen Look oder eine Explore-Abfrage hinzufügen möchten. In dieser Anleitung wird eine weitere Methode für Entwickler vorgestellt, die eine Looker-Visualisierung in eine React-App einfügen möchten. Diese Anleitung basiert auf einem Create React App-Starter und verwendet Looker-Visualisierungskomponenten.

In dieser Anleitung werden die folgenden Schritte behandelt:

  1. Abfrage-Slug aus Looker abrufen
  2. React-Anwendung mit Looker-Visualisierungskomponenten erstellen
  3. Backend-Helferdienst erstellen
  4. Server und React-App starten

Abfrage-Slug aus Looker abrufen

In Looker müssen einige Dinge erledigt werden, da die React-App davon abhängt.

Abfrage-Slug abrufen

Sie benötigen die Abfrage-ID oder den Abfrage-Slug, die als Attribut der Visualisierungskomponente verwendet werden. In diesem Artikel wird erläutert, wie Sie den Abfrage-Slug aus einer Explore-URL abrufen.

CORS in Ihrer Looker-Instanz konfigurieren

Cross-Origin Resource Sharing (CORS) wird durch dieselbe Zulassungsliste für Domains wie das Einbetten gesteuert.

Weitere Informationen finden Sie auf der Dokumentationsseite zum signierten Einbetten.

  1. Rufen Sie in Ihrer Looker-Instanz Admin > Plattform einbetten auf. Dazu sind Administratorberechtigungen erforderlich.
  2. Die React-App wird standardmäßig unter http://localhost:3000 ausgeführt. Wenn Sie diese Adresse der Zulassungsliste für eingebettete Domains hinzufügen, weisen Sie Looker an, Anfragen von der App zuzulassen und mit derselben Adresse auf diese Anfragen zu antworten. Dieser Schritt ist obligatorisch, da die App API-Anfragen an die Looker-Instanz sendet. Andernfalls findet keine Kommunikation zwischen Looker und der App statt.

React-Anwendung erstellen

Für das Frontend dieser Demo wird Create React App verwendet, um die einseitige React-Anwendung zu erstellen. Führen Sie die folgenden Befehle im Stammordner der Demo (get-started-viz-components) 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

Nach dem Ausführen dieser Befehle sollte Ihre Ordnerstruktur so aussehen:

Ein Ordner namens „Frontend react“ mit den Ordnern „Node modules“, „Public“ und „src“ sowie den Dateien „.gitignore“, „package-lock.json“ und „package.json“.

Prüfen Sie die Datei package.json und stellen Sie sicher, dass react-dom ebenfalls installiert ist. Installieren Sie sie andernfalls mit dem Befehl npm i react-dom.

Die Datei 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 (./frontend-react) eine Datei .env 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 Backend-Helferdienstes, 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-App empfängt.

Clientseitiges SDK initialisieren

Die React-App verwendet das SDK, um API-Anfragen an den Looker-Server zu senden. Da dies im Frontend erfolgt, können Sie mit dem folgenden Helfer 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 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)

Visualisierung in die App einbetten

Nachdem Sie den Abfrage-Slug (in unserem Beispiel Jlm4YHPeT3lLGA9UtHjZcA) der Visualisierung haben und das sdk-Objekt instanziiert wurde, müssen Sie als Nächstes die Looker-Visualisierungskomponenten verwenden, um die Visualisierung in die App einzubetten und 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 Frontend ist fertig. Sie können weitere Komponenten hinzufügen, das Design der App anpassen usw.

Backend-Helferdienst erstellen

Im letzten Schritt wird der Backend-Helferdienst erstellt, der den Aufruf vom Frontend empfängt, den Nutzer mit dem Looker-Node SDK authentifiziert, das Zugriffstoken extrahiert und es dann an das Frontend zurücksendet.

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

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

Um das SDK vom Backend aus zu authentifizieren, verwenden wir eine Datei looker.ini. Weitere Informationen zum Ausfüllen der Datei finden Sie auf der Seite zum SDK-Node. Nach dem Ausführen dieser Befehle sollte Ihre Ordnerstruktur so aussehen:

Ein Ordner namens „backend-node“ mit einem Ordner namens „node_modules“ und den Dateien „looker.ini“, „package-lock.json“, „package.json“ und „server.js“.

Die Datei 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 eine neue Datei server.js ein:

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

Server und React-App starten

  • Öffnen Sie ein Terminal und wechseln Sie zum Ordner backend-node. Führen Sie dann npm start aus.
  • Öffnen Sie ein zweites Terminal und wechseln Sie zum Ordner frontend-react. Führen Sie dann npm start aus.
  • Sobald der Backend-Helferdienst und die React-App ausgeführt werden, können Sie den Browser öffnen und http://localhost:3000/ aufrufen, um die in die Anwendung eingebettete Visualisierung zu sehen.

Code auf GitHub ansehen