Looker'ı Embed SDK ile yerleştirme

1. Başlamadan önce

Bu codelab'de, Looker Embed SDK'yı kullanarak bir Looker kontrol panelini web sayfanıza yerleştireceğiz. Bir dizi SDK yöntemi çağıracaksınız. Bu yöntemler, otomatik olarak bir iFrame oluşturacak, Looker içeriğinizi bu iFrame'e yerleştirecek ve iFrame'iniz ile web sayfanız arasında iletişimi ayarlayacaktır.

Ön koşullar

  • Çalışan bir Looker örneğiniz olmalıdır.
  • Web uygulamanıza veya web sayfanıza yerleştirmek istediğiniz bir Looker gösterge tablonuz olmalıdır.
  • JavaScript ve JavaScript sözleri hakkında bilgi sahibi olun.

Neler öğreneceksiniz?

  • Embed SDK ile Looker içeriğinizi özel olarak yerleştirme
  • Yerleştirme SDK'sı ile yerleştirilmiş Looker içeriğinizle nasıl mesaj gönderip alacağınız (işlemler ve etkinlikler)

Gerekenler

  • Ön uç kodunuzun HTML ve JavaScript'ine erişim
  • Looker örneğinizdeki yönetici yerleştirme ayarlarına erişim

2. Hazırlıklar

Embed SDK ile yerleştirebilmek için HTML'nizi ve Looker örneğinizi hazırlamanız gerekir.

Yerleştirilmiş iframe'in kapsayıcı öğesini ekleme

Web sayfanızın HTML'sinde bir div öğesi oluşturun ve bu öğede bir id özelliği tanımlayın.

<div id="looker-embed" />

Yerleştirme alanını Looker örneğinde izin verilenler listesine ekleyin

Yerleştirme alanının, Looker örneğinizde izin verilenler listesine eklenmesi gerekir.

Yerleştirilmiş Looker içeriğinizi barındıran web sayfasının alanını belirleyin. Web sayfasının URL'sinin https://mywebsite.com/with/embed olduğunu varsayarsak web sayfasının alan adı https://mywebsite.com olur.

Looker örneğinizin Yönetici bölümündeki Yerleştir sayfasına gidin. https://your_instance.looker.com/admin/embed

Yerleştirilmiş Alan İzin Verilenler Listesi alanına yerleştirmenin alanını girin. Alan adını yazdıktan sonra Tab tuşuna basın. Böylece alan adı bir kutuda görünür. Sondaki eğik çizgiyi / eklemeyin.

Güncelle düğmesini seçin.

3. Yerleştirmeyi oluşturma

Şimdi de yerleştirilmiş Looker içeriğinizi "oluşturmak" için SDK'nın yerleştirme oluşturucusunu oluşturalım ve yapılandıralım.

SDK'yı başlatma

Önce SDK'yı içe aktarın, ardından Looker örneğinizin alanıyla başlatın.

// Import the Embed SDK as LookerEmbedSDK

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

Yerleştirme oluşturucuyu oluşturma

Ardından, yerleştirmek istediğiniz Looker kontrol panelinin kimliğini belirleyin. Kontrol paneliniz instance_name.looker.com/dashboard/12345 ise kontrol panelinizin kimliği 12345 olur.

Bir yerleştirme oluşturucu oluşturmak için SDK createDashboardWithId() yöntemini gösterge tablosu kimliğiyle çağırın. Bu yöntem, yerleştirme oluşturucuyu döndürür.

LookerEmbedSDK.createDashboardWithId(12345)

Yerleştirme oluşturucuyu yapılandırma ve oluşturma

Şimdi de yerleştirilmiş iFrame'i oluşturmasını söylemeden önce yerleştirme oluşturucuyu yapılandıralım. Aşağıdaki kod örneğini doğrudan önceki kod örneğinin createDashboardWithId() yöntem çağrısından sonra ekleyin.

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

Yerleştirme oluşturucunun her yöntemi, yerleştirme oluşturucuyu döndürür. Bu nedenle, yöntem çağrılarını birlikte zincirleriz. Her yöntemi inceleyelim:

  1. appendTo() yöntemi, iframe'in üst öğesini belirler. Hazırlık adımında daha önce tanımladığımız HTML öğesinin kimliğini iletiyoruz.
  2. withFrameBorder() yöntemi, iframe'deki frame-border özelliğini ayarlar. Bu, iFrame'deki HTML özelliklerini tanımlayan çeşitli yöntemlerden biridir.
  3. build() yöntemi, iFrame'i yapılandırılmış HTML özellikleriyle oluşturur.

Son kontrol

Önceki adımları uyguladığınızda kodunuz aşağıdaki gibi görünmelidir:

// Import the Embed SDK as LookerEmbedSDK

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

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

Artık Embed SDK ile Looker kontrol paneliniz web sayfanıza yerleştirildi.

4. Yerleştirilmiş mesaj gönderme ve alma

Şimdi de Embed SDK ile yerleştirilmiş Looker içeriğinizde nasıl mesaj gönderip alacağımıza bakalım. Uygulamanızın iFrame'e gönderdiği mesajlara işlem, iFrame'den aldığı mesajlara ise etkinlik diyoruz.

Etkinlik alma

Önceki kodumuzla çalışalım. Etkinlikleri dinlemek için build() yöntemini çağırmadan önce yerleştirme oluşturucunun on() yöntemini çağırırız.

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

Burada, iFrame oluşturulduğunda iFrame'den gelen dashboard:run:complete etkinliğine bir etkinlik işleyici ayarlamak için on() yöntemini çağırıyoruz. Etkinlik, kontrol panelinin yüklenmesi tamamlandığında bize bilgi verir. Dinleyebileceğiniz diğer etkinlikler için etkinlik referansına göz atın.

Gönderme işlemleri

Önceki kodumuzla devam edelim. İşlemleri iFrame'e göndermek için, iFrame ile mesaj gönderme ve alma işlemlerini başlatmak üzere build() yöntemini çağırdıktan sonra yerleştirme oluşturucunun connect() yöntemini çağırırız.

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

Şimdi bu kod örneğini inceleyelim:

  1. Bir söz döndüren connect() yöntemini çağırırız. İleti gönderme ve alma mekanizması başlatıldıktan sonra, yerleştirilmiş iframe'i temsil eden bir yerleştirme nesnesiyle sonuçlanır.
  2. dashboard:run işlemi göndermek için yerleştirme nesnesinde send() yöntemini çağırırız. Gönderilecek diğer işlemler için işlemler referansına göz atın.
  3. İlk kullanıma hazırlama sırasında hata olması ihtimaline karşı catch() yöntemini ekliyoruz.

Son kontrol

Önceki adımları uyguladığınızda kodunuz aşağıdaki gibi görünmelidir:

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

Artık yerleştirilmiş Looker kontrol panelinizle iletişim kurabilirsiniz.

5. Ek bilgiler

Tebrikler! Artık Looker kontrol panelinizi özel olarak yerleştirmek ve iframe'den mesaj gönderip almak için Embed SDK'yı kullanabilirsiniz. Daha fazla bilgi için aşağıdaki kaynaklara göz atın: