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:
- Metode
appendTo()
menentukan elemen induk iframe. Kita meneruskan ID elemen HTML yang telah ditentukan sebelumnya di langkah Persiapan. - Metode
withFrameBorder()
menetapkan atribut frame-border pada iframe. Ini adalah salah satu dari beberapa metode yang menentukan atribut HTML di iframe. - 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:
- Kita memanggil metode
connect()
yang menampilkan promise. Promise di-resolve ke objek penyematan yang mewakili iframe tersemat setelah mekanisme pengiriman dan penerimaan pesan diinisialisasi. - Kita memanggil metode
send()
pada objek sematan untuk mengirim tindakandashboard:run
. Lihat referensi tindakan untuk melihat tindakan lain yang akan dikirim. - 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:
- Sematkan repositori SDK untuk informasi selengkapnya tentang cara menyematkan Looker, terutama jika Anda ingin Menyematkan konten Looker di SSO.
- Referensi peristiwa untuk semua peristiwa yang tersedia dan propertinya
- Referensi tindakan untuk semua tindakan yang tersedia dan propertinya
- Praktik terbaik keamanan terkait penyematan konten Looker