Membuat ekstensi Looker

Halaman ini menjelaskan cara membuat dan mengonfigurasi template ekstensi Looker dasar, yang kemudian dapat Anda tambahkan fungsinya.

Untuk membuat ekstensi Looker baru, Anda harus melakukan tugas berikut:

Prosedur berikut menunjukkan cara mem-build elemen sebelumnya.

Mengonfigurasi Looker untuk ekstensi

Setiap ekstensi Looker memerlukan project LookML yang menyertakan file model dan file manifes untuk dijalankan.

  1. Buat project kosong untuk ekstensi Anda.

  2. Dalam project baru Anda, buat file model menggunakan + di bagian atas browser file di Looker IDE.

  3. File model baru dibuat dengan parameter connection dan parameter include:

    Ganti connection_name dalam parameter connection dengan nama koneksi database yang valid di instance Anda. Ekstensi ini memerlukan file model yang valid karena data izin Looker diakses melalui model LookML. Untuk mengelola akses ke ekstensi, Anda harus mengaitkan ekstensi dengan model LookML yang valid dan memberi pengguna izin untuk mengakses model tersebut. Setelah selesai mengedit file model, klik Simpan Perubahan.

    Karena ekstensi Anda tidak memerlukan file tampilan, hapus parameter include: "/views/*.view.lkml" atau tambahkan karakter # di awal baris untuk menjadikan baris sebagai komentar. Membiarkan parameter include: "/views/*.view.lkml" apa adanya akan menyebabkan validator LookML menghasilkan error.

  4. Buat file manifes project menggunakan + di bagian atas browser file di Looker IDE.

    File manifes project awalnya akan kosong, tetapi nanti dalam prosedur ini, Anda akan menyalin konten yang dihasilkan ke dalam file manifes project yang akan menyertakan parameter application. Parameter application memberi ekstensi label, memberi tahu Looker tempat menemukan JavaScript ekstensi, dan memberikan daftar hak untuk ekstensi. Hak menentukan resource Looker yang dapat diakses ekstensi. Ekstensi tidak akan dapat mengakses resource Looker kecuali jika resource tersebut tercantum dalam hak.

    Namun, Anda dapat membiarkan file manifes apa adanya untuk saat ini, karena Anda akan menyalin konten file lainnya ke dalamnya nanti dalam proses ini.

  5. Konfigurasi koneksi Git untuk project baru Anda.

    Anda dapat mengakses halaman Configure Git dengan mengklik tombol Configure Git di pojok kanan atas Looker IDE, atau dengan menggunakan halaman Project Configuration seperti yang dijelaskan di halaman dokumentasi Menyiapkan dan menguji koneksi Git.

Setelah menyiapkan project untuk ekstensi dan menghubungkannya ke Git, Anda siap membuat file template ekstensi.

Membuat file template ekstensi

Ada dua cara untuk membuat file kode template ekstensi:

Kedua proses tersebut memerlukan Yarn, jadi pastikan Anda telah menginstal Yarn.

Menggunakan create-looker-extension untuk membuat template ekstensi

Utilitas create-looker-extension membuat ekstensi Looker dasar yang menyertakan semua file dan dependensi ekstensi yang diperlukan. Anda kemudian dapat menggunakannya sebagai titik awal dan menambahkan kode dan fungsi tambahan untuk menyelesaikan ekstensi.

Untuk membuat template ekstensi:

  1. Jalankan utilitas create-looker-extension, dengan mengganti <extension_name> dengan nama ekstensi Anda:

    yarn create looker-extension <extension_name>

  2. Konfirmasi nama ekstensi atau berikan nama lain, lalu pilih bahasa dan framework yang ingin Anda gunakan untuk mem-build ekstensi:

    Utilitas create-looker-extension kemudian akan menggunakan framework yang Anda tentukan untuk mengisi template dasar dan menempatkan semua file yang dihasilkan ke dalam direktori baru yang menggunakan nama ekstensi:

  3. Buka direktori yang dibuat untuk ekstensi Anda:

    cd <extension_name>

  4. Instal dependensi ekstensi:

    yarn install

  5. Mulai server pengembangan:

    yarn develop

    Ekstensi kini berjalan dan menayangkan JavaScript secara lokal di http://localhost:8080/bundle.js.

  6. Di direktori ekstensi Anda terdapat file manifest.lkml. Salin konten file ini.

  7. Dalam project LookML, tempel konten manifest.lkml ke dalam file manifes project Anda:

    Klik Save Changes untuk menyimpan file manifes project.

  8. Di IDE LookML, klik Validate LookML, lalu klik Commit Changes & Push, lalu klik Deploy to Production.

  9. Muat ulang Looker menggunakan fungsi muat ulang browser Anda.

    Di bagian Applications pada menu utama Looker, Anda akan melihat nama ekstensi baru.

  10. Pilih ekstensi Anda dari bagian Applications untuk melihat output ekstensi.

Meng-clone repositori Git untuk membuat template ekstensi

Looker mengelola repositori Git dengan beberapa template ekstensi di https://github.com/looker-open-source/extension-examples. Jika Anda ingin menggunakan salah satu contoh di sana, buka repositori contoh tersebut, dan ikuti petunjuk yang ditampilkan berikutnya.

Prosedur ini memerlukan Yarn, jadi pastikan Anda telah menginstal Yarn.

  1. Di command line lokal, gunakan perintah berikut untuk meng-clone repositori Git:

    git clone git@github.com:looker-open-source/extension-examples.git

  2. Buka direktori yang berisi template yang ingin Anda instal di sistem. Dalam contoh ini, kita akan menggunakan ekstensi "Hello World" React dan JavaScript:

    cd extension-examples/react/javascript/helloworld-js

  3. Instal dependensi ekstensi:

    yarn install

    Anda mungkin perlu mengupdate versi Node atau menggunakan pengelola versi Node untuk mengubah versi Node.

  4. Di direktori ekstensi Anda terdapat file manifest.lkml. Salin konten file ini.

  5. Dalam project LookML, tempel konten manifest.lkml ke dalam file manifes project Anda:

    Klik Save Changes untuk menyimpan file manifes project.

  6. Di sudut kanan atas IDE LookML, klik Validasi LookML, lalu klik Commit Changes & Push, lalu klik Deploy to Production.

  7. Di terminal, mulai server pengembangan:

    yarn develop

    Ekstensi kini berjalan dan menayangkan JavaScript di server pengembangan lokal yang ditentukan dalam parameter url dari file manifes: http://localhost:8080/bundle.js.

  8. Muat ulang Looker menggunakan fungsi muat ulang browser Anda.

    Di bagian Aplikasi pada menu utama Looker, Anda akan melihat nama ekstensi baru, yang ditentukan oleh parameter label dalam file manifes project.

  9. Pilih ekstensi Anda dari bagian Applications untuk melihat output ekstensi.

Mengubah ekstensi

Setelah membuat ekstensi dasar, Anda dapat mengubah atau menambahkan kode ke ekstensi tersebut dengan mengubah file JavaScript atau TypeScript yang sesuai.

Direktori src di direktori ekstensi berisi file sumber tempat Anda dapat menambahkan kode. Pada contoh sebelumnya, untuk template "Hello World" React dan JavaScript, file tersebut disebut HelloWorld.js. Mengubah atau menambahkan kode ke file tersebut akan mengubah atau menambahkan fungsi ekstensi.

Berikut adalah output file HelloWorld.js React dan JavaScript:


import React, { useEffect, useState, useContext } from 'react'
import { Space, ComponentsProvider, Text } from '@looker/components'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const HelloWorld = () => {
  const { core40SDK } = useContext(ExtensionContext)
  const [message, setMessage] = useState()

  useEffect(() => {
    const initialize = async () => {
      try {
        const value = await core40SDK.ok(core40SDK.me())
        setMessage(`Hello, ${value.display_name}`)
      } catch (error) {
        setMessage('Error occured getting information about me!')
        console.error(error)
      }
    }
    initialize()
  }, [])

  return (
    <>
      <ComponentsProvider>
        <Space p="xxxxxlarge" width="100%" height="50vh" around>
          <Text p="xxxxxlarge" fontSize="xxxxxlarge">
            {message}
          </Text>
        </Space>
      </ComponentsProvider>
    </>
  )
}

Pada contoh sebelumnya, Anda dapat mengubah output teks ekstensi dengan mengubah teks di baris:

setMessage(`Hello, ${value.display_name}`).

Perlu diingat bahwa saat menambahkan fungsi, Anda mungkin perlu mengubah hak yang diberikan ke ekstensi Anda di parameter application dalam file manifes project.