Mem-build ekstensi Looker

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

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

Prosedur berikut menunjukkan cara membuat 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. Di project baru, buat file model menggunakan + di bagian atas file browser di Looker IDE.

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

    Ganti connection_name di parameter connection dengan nama koneksi database yang valid di instance Anda. Ekstensi 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 membuat 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 label pada ekstensi, 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 sisa konten file 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 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 ekstensi dan dependensi yang diperlukan. Anda kemudian dapat menggunakannya sebagai titik awal dan menambahkan kode serta 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 membuat 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 tersebut:

  3. Buka direktori yang dibuat untuk ekstensi Anda:

    cd <extension_name>

  4. Instal dependensi ekstensi:

    yarn install

  5. Mulai server pengembangan:

    yarn develop

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

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

  7. Di project LookML Anda, tempelkan konten manifest.lkml ke file manifes project Anda:

    Klik Save Changes untuk menyimpan file manifes project.

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

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

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

  10. Pilih ekstensi 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 yang ada, buka repositori contoh tersebut, lalu ikuti petunjuk yang ditampilkan berikutnya.

Prosedur ini memerlukan Benang, jadi pastikan Anda telah memasang 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. Dalam direktori ekstensi Anda terdapat file manifest.lkml. Salin konten file ini.

  5. Di project LookML Anda, tempelkan konten manifest.lkml ke file manifes project Anda:

    Klik Save Changes untuk menyimpan file manifes project.

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

  7. Di terminal Anda, mulai server pengembangan:

    yarn develop

    Ekstensi sekarang menjalankan dan menyajikan JavaScript di server pengembangan lokal yang ditentukan dalam parameter url file manifes: http://localhost:8080/bundle.js.

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

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

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

Mengubah ekstensi

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

Direktori src pada direktori ekstensi Anda berisi file sumber yang dapat digunakan untuk menambahkan kode. Pada contoh sebelumnya, untuk template "Hello World" React dan JavaScript, filenya disebut HelloWorld.js. Memodifikasi atau menambahkan kode ke file tersebut akan mengubah atau menambah 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 untuk ekstensi Anda di parameter application di file manifes project.