Looker'ı Embed SDK ile yerleştirme

1. Başlamadan önce

Bu codelab'de, web sayfanıza bir Looker kontrol paneli yerleştirmek için Looker Embed SDK'sını kullanacağız. Otomatik olarak iframe oluşturmak, Looker içeriğinizi içine yerleştirmek ve iFrame'iniz ile web sayfanız arasında iletişim kurmak için bir dizi SDK yöntemini çağırırsınız.

Ö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 kontrol paneliniz olmalıdır.
  • JavaScript ve JavaScript taahhüdleri hakkında bilgi sahibi olun.

Neler öğreneceksiniz?

  • Looker içeriğinizi Embed SDK'sı ile gizli olarak yerleştirme
  • Yerleşik SDK ile yerleştirilmiş Looker içeriğinizle mesaj (işlemler ve etkinlikler) gönderme ve alma

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ştirme yapabilmek için HTML 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" />

Looker örneğinde yerleştirmenin alanını izin verilenler listesine ekleme

Looker örneğinizde, yerleşik öğenin alanını izin verilenler listesine eklemeniz gerekir.

Yerleştirilmiş Looker içeriğinizi barındıran web sayfasının alanını belirleyin. Web sayfasının URL'si https://mywebsite.com/with/embed, ardından web sayfasının alan adının https://mywebsite.com olduğunu varsayalım.

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

Yerleştirilen Alan İzin Verilenler Listesi alanına yerleştirilen içeriğin alanını girin. Yazdıktan sonra Sekme tuşuna basarak alanın bir kutu içinde görünmesini sağlayın. Sonuna eğik çizgi / eklemeyin.

Güncelle düğmesini seçin.

3. Yerleştirmeyi oluşturma

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

SDK'yı başlatma

Önce SDK'yı içe aktarın, ardından Looker örneğinizin alan adıyla SDK'yı 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 panelinizin kimliği instance_name.looker.com/dashboard/12345 ise kontrol panelinizin kimliği 12345 şeklindedir.

Yerleştirme oluşturucu oluşturmak için kontrol paneli kimliğiyle birlikte SDK createDashboardWithId() yöntemini çağırın. Bu yöntem, yerleştirme oluşturucuyu döndürür.

LookerEmbedSDK.createDashboardWithId(12345)

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

Şimdi, yerleştirilmiş iframe'i oluşturmasını söylemeden önce yerleşim oluşturucuyu yapılandıralım. Aşağıdaki kod örneğini doğrudan önceki kod örneğinin createDashboardWithId() yöntem çağrısının hemen sonrasına ekleyin.

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

Yerleştirme oluşturucunun her yöntemi, yerleştirme oluşturucunun kendisini döndürür, bu nedenle yöntem çağrılarını zincir halinde kullanırız. Her bir yöntemi inceleyelim:

  1. appendTo() yöntemi, iframe'in üst öğesini belirler. Daha önce Hazırlık adımında tanımladığımız HTML öğesinin kimliğini iletiriz.
  2. withFrameBorder() yöntemi, iframe'deki çerçeve-sınır özelliğini ayarlar. Bu, iframe'de 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ımlarda 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 panelinizi web sayfanıza yerleştirmişsinizdir.

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

Şimdi Embed SDK'yı kullanarak yerleştirilmiş Looker içeriklerinizle nasıl mesaj gönderip alabileceğinizi inceleyelim. Uygulamanızın iframe'e gönderdiği mesajları işlemler, uygulamanızın iframe'den aldığı mesajları ise etkinlikler olarak adlandırırız.

Etkinlik alma

Önceki kodumuzla başlayalı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ğinde bir etkinlik işleyici ayarlamak için on() yöntemini çağırıyoruz. Bu etkinlik, kontrol panelinin yüklenmesi tamamlandığında bize bildirir. Dinleyebileceğiniz diğer etkinlikler için etkinlik referansına göz atın.

Gönderme işlemleri

Önceki kodumuzla devam edelim. iframe'a işlem göndermek için, iframe ile mesaj gönderme ve alma işlemini 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!')
...

Bu kod örneğini inceleyelim:

  1. Bir promise döndüren connect() yöntemini çağırıyoruz. Sözleşme, mesaj gönderme ve alma mekanizması başlatıldıktan sonra yerleştirilmiş iFrame'i temsil eden bir yerleşik nesneyle çözülü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ı bölümüne göz atın.
  3. İlk kullanıma hazırlama sırasında hata olması ihtimaline karşı bir catch() yöntemi ekleriz.

Son kontrol

Önceki adımları uyguladıktan sonra kodunuz şu şekilde görünecektir:

// 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şik Looker kontrol panelinizle iletişim kurabilirsiniz.

5. Ek bilgiler

Tebrikler! Artık Looker kontrol panelinizi gizli olarak yerleştirmek ve iframe'den mesaj gönderip almak için Yerleştirme SDK'sını kullanabilirsiniz. Daha fazla bilgi için şu kaynakları inceleyin: