Cara menyematkan Looker dengan Embed SDK

1. Sebelum memulai

Dalam codelab ini, kita akan menggunakan Looker Embed SDK untuk menyematkan dasbor Looker di halaman web Anda. 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 berjalan
  • Memiliki dasbor Looker yang ingin disematkan di aplikasi web atau halaman web Anda
  • Memahami JavaScript dan promise JavaScript.

Yang akan Anda pelajari

  • Cara menyisipkan secara pribadi konten Looker dengan Embed SDK
  • Cara mengirim dan menerima pesan (tindakan dan peristiwa) dengan konten Looker tersemat menggunakan Embed SDK

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 tersemat Anda. Misalnya, URL halaman web adalah https://mywebsite.com/with/embed, maka domain halaman web tersebut adalah https://mywebsite.com.

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

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

Pilih tombol Update.

3. Membuat penyematan

Sekarang, mari kita buat dan konfigurasikan pembuat sematan SDK untuk "mem-build" konten Looker tersemat Anda.

Melakukan inisialisasi 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 disematkan. 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 mem-build builder penyematan

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 bahas setiap metode:

  1. Metode appendTo() menentukan elemen induk iframe. Kita meneruskan ID elemen HTML yang telah ditentukan sebelumnya di langkah Persiapan.
  2. Metode withFrameBorder() menetapkan atribut frame-border pada 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 akhir

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 dengan konten Looker tersemat 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 kita gunakan 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 peristiwa lain yang akan diproses.

Mengirim tindakan

Mari kita lanjutkan dengan kode sebelumnya. Untuk mengirim tindakan ke iframe, kita memanggil metode connect() pembuat 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 ke objek penyematan 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 akhir

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!')

Sekarang Anda dapat berkomunikasi dengan dasbor Looker tersemat.

5. Informasi tambahan

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