Mulai menggunakan komponen visualisasi Looker

Menyematkan konten Looker melalui iframe hanyalah salah satu metode yang dapat digunakan developer saat ingin menambahkan Dasbor, Tampilan, atau Jelajahi ke dalam aplikasi web mereka. Tutorial ini menyajikan metode lain untuk developer yang ingin menambahkan visualisasi Looker ke dalam Aplikasi React. Tutorial ini didasarkan pada pemicu Buat React App sederhana dan menggunakan komponen Visualisasi Looker.

Berikut adalah langkah-langkah yang dibahas dalam tutorial ini:

  1. Mendapatkan slug kueri dari Looker
  2. Membuat aplikasi React dengan komponen Visualisasi Looker
  3. Membuat layanan bantuan backend

Mendapatkan slug kueri dari Looker

Ada beberapa hal yang harus dilakukan di Looker karena aplikasi React bergantung pada hal tersebut.

Mendapatkan slug kueri

Anda memerlukan ID kueri atau slug yang akan digunakan sebagai properti komponen visualisasi. Artikel ini menjelaskan cara mendapatkan slug kueri dari URL Explore. Contoh lainnya dapat ditemukan di dokumentasi Looker.

Mengonfigurasi CORS di instance Looker

Cross-Origin Resource Sharing (CORS) dikontrol oleh daftar domain yang diizinkan yang sama dengan penyematan.

Hal ini didokumentasikan secara lebih mendetail di halaman dokumentasi Penyematan yang ditandatangani.

  1. Buka Admin > Penyematan Platform di instance Looker Anda. Tindakan ini memerlukan hak istimewa Admin.
  2. Aplikasi React berjalan secara default di http://localhost:3000. Dengan menambahkan alamat ini ke Daftar Domain yang Diizinkan yang Disematkan, Anda memberi tahu Looker untuk mengizinkan permintaan dari aplikasi dan merespons permintaan tersebut melalui alamat yang sama. Langkah ini bersifat wajib karena aplikasi akan membuat permintaan API ke instance Looker, jika tidak, tidak akan ada komunikasi antara Looker dan aplikasi.

Membuat aplikasi React

Frontend demo ini menggunakan Create React App untuk membuat aplikasi React satu halaman. Jalankan perintah berikut di folder root demo (get-started-viz-components) untuk membuat aplikasi dan menginstal dependensi:

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

Setelah menjalankan perintah ini, struktur folder Anda akan terlihat seperti ini:

Folder bernama Frontend bereaksi, yang berisi folder modul Node, Public, dan src, serta file-file itu memanggil .gitignore, package-lock.json, dan package.json.

Periksa file package.json dan pastikan bahwa react-dom juga sudah terinstal. Jika tidak, instal dengan menjalankan npm i react-dom.

package.json demo ini terlihat seperti ini:

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

Mengonfigurasi variabel lingkungan

Buat file .env di direktori utama aplikasi (./frontend-react) dan tetapkan variabel berikut:

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

REACT_APP_BACKEND_SERVER adalah alamat layanan bantuan backend yang akan kita gunakan untuk melakukan panggilan API ke Looker untuk mengekstrak token akses.

REACT_APP_LOOKER_API_HOST adalah alamat instance Looker yang akan menerima permintaan API dari aplikasi React.

Menginisialisasi SDK sisi klien

Aplikasi React akan menggunakan SDK untuk membuat permintaan API ke server Looker. Karena ini dilakukan di front end, Anda dapat menggunakan helper berikut untuk menginisialisasi 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)

Menyematkan visualisasi ke dalam aplikasi

Sekarang setelah Anda memiliki slug kueri (dalam contoh ini, Jlm4YHPeT3lLGA9UtHjZcA) dari visualisasi dan objek sdk telah dibuat instance-nya, langkah berikutnya adalah menggunakan komponen Visualisasi Looker untuk menyematkan dan merender visualisasi ke dalam aplikasi:

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

Frontend sudah siap. Anda dapat menambahkan lebih banyak komponen, menambahkan lebih banyak gaya ke aplikasi, dll.

Membuat layanan helper backend

Langkah terakhir adalah membangun layanan helper backend yang akan menerima panggilan dari frontend, menggunakan Looker-Node SDK untuk mengautentikasi pengguna, mengekstrak token akses mereka, lalu mengirimkannya kembali ke frontend.

Untuk memudahkan, kita akan mem-build server Node dengan satu endpoint. Server akan menggunakan dependensi express, cors, dan @looker/sdk-node. Anda dapat menjalankan perintah berikut mulai dari folder root (get-started-viz-components):

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

Untuk mengautentikasi SDK dari backend, kita akan menggunakan file looker.ini. Anda dapat menemukan detail selengkapnya tentang cara mengisi file di halaman SDK-Node. Setelah menjalankan perintah ini, struktur folder Anda akan terlihat seperti ini:

Folder bernama backend-node, yang berisi folder bernama node_modules, dan file looker.ini, package-lock.json, package.json, dan server.js.

package.json akan terlihat seperti ini:

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

Selanjutnya, kita akan menambahkan kode ini ke dalam file server.js baru:

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

Memulai Server dan Aplikasi React

  • Buka satu terminal dan buka folder backend-node, lalu jalankan npm start
  • Buka terminal kedua, lalu buka folder frontend-react dan jalankan npm start
  • Setelah layanan bantuan backend dan aplikasi reaksi aktif dan berjalan, Anda dapat membuka browser dan membuka http://localhost:3000/ untuk melihat visualisasi yang disematkan ke aplikasi.

Lihat kode di GitHub