Cara menyematkan Looker dengan Embed SDK

Cara menyematkan Looker dengan Embed SDK

Tentang codelab ini

subjectTerakhir diperbarui Jul 28, 2023
account_circleDitulis oleh Jeremy Chang

1. Sebelum memulai

Dalam codelab ini, kita akan menggunakan Looker Embed SDK untuk menyematkan dasbor Looker di halaman web. Anda akan memanggil serangkaian metode SDK yang akan otomatis membuat iframe, menyematkan konten Looker di dalamnya, dan menyiapkan komunikasi antara iframe dan halaman web Anda.

Prasyarat

  • Memiliki instance Looker yang sedang berjalan
  • Memiliki dasbor Looker yang ingin disematkan di aplikasi web atau halaman web Anda
  • Memahami promise JavaScript dan JavaScript.

Yang akan Anda pelajari

  • Cara menyematkan konten Looker secara pribadi dengan Embed SDK
  • Cara mengirim dan menerima pesan (tindakan dan peristiwa) dengan konten Looker yang disematkan menggunakan SDK Tersemat

Yang Anda butuhkan

  • Akses ke HTML dan JavaScript kode frontend
  • Akses ke setelan penyematan admin di instance Looker Anda

2. Persiapan

Anda harus menyiapkan instance HTML dan Looker sebelum dapat menyematkannya dengan SDK Sematan.

Menambahkan elemen penampung iframe sematan

Di dalam HTML halaman web Anda, buat elemen div dan tentukan atribut id di elemen tersebut.

<div id="looker-embed" />

Mengizinkan domain sematan di instance Looker

Anda harus mengizinkan domain sematan di instance Looker.

Tentukan domain halaman web yang menghosting konten Looker Anda yang disematkan. Misalnya, URL halaman web adalah https://mywebsite.com/with/embed lalu domain halaman web adalah https://mywebsite.com.

Buka halaman Sematkan di bagian Admin instance Looker Anda. https://your_instance.looker.com/admin/embed

Di kolom Daftar Domain yang Diizinkan, masukkan domain sematan. Setelah mengetiknya, tekan tombol Tab sehingga domain muncul di dalam kotak. Jangan sertakan garis miring /.

Pilih tombol Update.

3. Membuat sematan

Sekarang, mari kita buat dan konfigurasi builder sematan SDK ke "build" konten Looker yang disematkan.

Menginisialisasi SDK

Impor terlebih dahulu, lalu inisialisasi SDK dengan domain instance Looker Anda.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

Membuat builder sematan

Selanjutnya, tentukan ID dasbor Looker yang ingin Anda sematkan. Jika dasbor Anda berada di instance_name.looker.com/dashboard/12345, ID dasbor Anda adalah 12345.

Panggil metode createDashboardWithId() SDK dengan ID dasbor untuk membuat builder sematan. Metode ini akan menampilkan builder sematan.

LookerEmbedSDK.createDashboardWithId(12345)

Mengonfigurasi dan membuat builder sematan

Sekarang, mari kita konfigurasikan builder sematan sebelum kita memerintahkannya untuk membuat iframe tersemat. Tambahkan contoh kode berikut langsung setelah panggilan metode createDashboardWithId() contoh kode sebelumnya.

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Setiap metode builder sematan menampilkan builder sematan itu sendiri, jadi kita merangkai panggilan metode bersama-sama. Mari kita pelajari setiap metodenya:

  1. Metode appendTo() menentukan elemen induk iframe. Kita meneruskan id elemen HTML yang telah kita tentukan sebelumnya pada langkah Persiapan.
  2. Metode withFrameBorder() menetapkan atribut batas frame di iframe. Ini adalah salah satu dari beberapa metode yang menentukan atribut HTML di iframe.
  3. Metode build() membuat iframe dengan atribut HTML yang dikonfigurasi

Pemeriksaan terakhir

Dengan langkah-langkah sebelumnya, kode Anda akan terlihat seperti ini:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Sekarang Anda memiliki dasbor Looker yang disematkan ke dalam halaman web dengan Embed SDK.

4. Mengirim dan menerima pesan sematan

Sekarang mari kita lihat cara mengirim dan menerima pesan menggunakan konten Looker yang disematkan menggunakan Embed SDK. Kami menyebut pesan yang dikirim aplikasi Anda ke iframe sebagai tindakan, dan menyebut pesan yang diterima aplikasi Anda dari iframe sebagai peristiwa.

Menerima peristiwa

Mari bekerja dengan kode sebelumnya. Untuk memproses peristiwa, kita memanggil metode on() dari builder sematan sebelum memanggil metode build().

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

Di sini kita memanggil metode on() untuk menetapkan pemroses peristiwa pada peristiwa dashboard:run:complete yang berasal dari iframe saat iframe dibuat. Peristiwa ini akan memberi tahu kita saat dasbor selesai dimuat. Lihat referensi peristiwa untuk diproses oleh peristiwa lain.

Mengirim tindakan

Mari kita lanjutkan dengan kode sebelumnya. Untuk mengirim tindakan ke iframe, kita memanggil metode connect() builder sematan setelah memanggil metode build() untuk menginisialisasi pengiriman dan penerimaan pesan dengan iframe.

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

Mari kita pelajari contoh kode ini:

  1. Kita memanggil metode connect() yang menampilkan promise. Promise di-resolve menjadi objek sematan yang mewakili iframe tersemat setelah mekanisme pengiriman dan penerimaan pesan diinisialisasi.
  2. Kita memanggil metode send() pada objek sematan untuk mengirim tindakan dashboard:run. Lihat referensi tindakan untuk melihat tindakan lain yang akan dikirim.
  3. Kita menambahkan metode catch() jika terjadi error selama inisialisasi.

Pemeriksaan terakhir

Dengan langkah-langkah sebelumnya, kode Anda sekarang akan terlihat seperti ini:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

Anda kini dapat berkomunikasi dengan dasbor Looker tersemat Anda.

5. Informasi tambahan

Selamat! Anda kini dapat menggunakan Embed SDK untuk menyematkan dasbor Looker secara pribadi serta mengirim dan menerima pesan dari iframe. Lihat beberapa referensi berikut ini untuk informasi lebih lanjut:

bug_report Laporkan kesalahan