Perlu diperhatikan bahwa Anda sedang melihat dokumentasi Looker. Untuk melihat dokumentasi Looker Studio, buka https://support.google.com/looker-studio.

Halaman ini diterjemahkan oleh Cloud Translation API.

Mulai menggunakan komponen visualisasi Looker

Menyematkan konten Looker menggunakan iframe hanyalah salah satu metode yang dapat digunakan developer saat ingin menambahkan dasbor, Tampilan, atau Jelajah ke aplikasi web mereka. Tutorial ini menyajikan metode lain bagi developer yang ingin menambahkan visualisasi Looker ke Aplikasi React. Tutorial ini didasarkan pada pemicu Create React App dan menggunakan komponen visualisasi Looker.

Berikut adalah langkah-langkah yang dibahas dalam tutorial ini:

Mendapatkan slug kueri dari Looker
Membuat aplikasi React dengan komponen visualisasi Looker
Membuat layanan helper backend
Memulai server dan aplikasi React

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 atau slug kueri yang akan digunakan sebagai properti komponen visualisasi. Artikel ini menjelaskan cara mendapatkan slug kueri dari URL Jelajah. Contoh lainnya dapat ditemukan di dokumentasi Looker.

Mengonfigurasi CORS di instance Looker

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

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

Buka Admin > Platform Embed di instance Looker Anda. Tindakan ini memerlukan hak istimewa Admin.
Aplikasi React berjalan secara default di http://localhost:3000. Dengan menambahkan alamat ini ke Daftar yang Diizinkan Domain Tersemat, Anda memberi tahu Looker untuk mengizinkan permintaan dari aplikasi dan merespons permintaan tersebut menggunakan alamat yang sama. Langkah ini wajib dilakukan 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 react, yang berisi folder Node modules, Public, dan src, serta file yang memanggil .gitignore, package-lock.json, dan package.json.

Periksa file package.json dan pastikan react-dom juga diinstal, 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 helper backend yang akan kita gunakan untuk melakukan panggilan API ke Looker guna 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 frontend, Anda dapat menggunakan helper berikut untuk melakukan inisialisasi 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)

Menyematkan visualisasi ke dalam aplikasi

Setelah Anda memiliki slug kueri (dalam contoh kita adalah 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 mem-build layanan helper backend yang akan menerima panggilan dari frontend, menggunakan Looker-Node SDK untuk mengautentikasi pengguna, mengekstrak token aksesnya, lalu mengirimkannya kembali ke frontend.

Untuk memudahkan, kita akan membuat 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 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 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}`)
})

Memulai Server dan Aplikasi React

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

Lihat kode di GitHub