Jak umieścić Lookera za pomocą pakietu SDK Embed

1. Zanim zaczniesz

W ramach tego ćwiczenia w Codelabs użyjemy pakietu SDK Looker Embed, aby umieścić panel Lookera na stronie internetowej. Wywołujesz szereg metod pakietu SDK, które automatycznie tworzą element iframe, umieszczają w nim Twoje treści z Lookera i konfigurują komunikację między elementem iframe a stroną internetową.

Wymagania wstępne

  • mieć uruchomioną instancję Lookera,
  • mieć panel Lookera, który chcesz umieścić w swojej aplikacji internetowej lub na stronie internetowej.
  • Znajomość JavaScriptu i obietnic JavaScriptu.

Czego się nauczysz

  • Jak prywatnie umieszczać treści z Lookera za pomocą pakietu SDK Embed
  • Jak wysyłać i odbierać wiadomości (działania i zdarzenia) za pomocą umieszczonych treści z Lookera za pomocą pakietu SDK Embed

Czego potrzebujesz

  • Dostęp do kodu HTML i JavaScript kodu frontendu
  • Dostęp administratora do ustawień umieszczania w instancji Lookera

2. Przygotowania

Przed umieszczeniem instancji za pomocą pakietu SDK Embed, musisz przygotować instancję HTML i Lookera.

Dodawanie elementu kontenera iframe umieszczonego elementu

W kodzie HTML strony utwórz element div i zdefiniuj atrybut id.

<div id="looker-embed" />

Umieszczanie domeny umieszczonej na liście dozwolonych w instancji Lookera

Musisz umieścić domenę umieszczonej na liście dozwolonych w instancji Lookera.

Określ domenę strony internetowej, na której znajdują się umieszczone treści z Lookera. Załóżmy, że adres URL strony internetowej to https://mywebsite.com/with/embed, a jej domena to https://mywebsite.com.

Otwórz stronę Embed (Umieść) w sekcji Admin (Administracja) instancji Lookera. https://your_instance.looker.com/admin/embed

W polu Embedded Domains (Lista dozwolonych domen) wpisz domenę umieszczonej treści. Po wpisaniu domeny naciśnij klawisz Tab, aż domena zostanie wyświetlona w polu. Nie dodawaj ukośnika końcowego /.

Kliknij przycisk Aktualizuj.

3. Tworzenie elementów do umieszczenia

Teraz utworzymy i skonfigurujmy kreator umieszczania w pakiecie SDK, tak aby „kompilował” umieszczone w nim treści z Lookera.

Inicjowanie pakietu SDK

Najpierw zaimportuj, a potem zainicjuj pakiet SDK w domenie instancji Lookera.

// Import the Embed SDK as LookerEmbedSDK

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

Tworzenie kreatora umieszczania

Następnie określ identyfikator panelu Lookera, który chcesz umieścić. Jeśli panel ma wartość instance_name.looker.com/dashboard/12345, jego identyfikator to 12345.

Wywołaj metodę pakietu SDK createDashboardWithId() z identyfikatorem panelu, aby utworzyć kreator umieszczania. Ta metoda zwróci kreator umieszczania.

LookerEmbedSDK.createDashboardWithId(12345)

Konfigurowanie i tworzenie kreatora umieszczania

Teraz skonfigurujmy narzędzie do umieszczania elementów na stronie, zanim poinformujemy go, że ma utworzyć osadzony element iframe. Dodaj poniższy przykładowy kod bezpośrednio po wywołaniu metody createDashboardWithId() z poprzedniego przykładowego kodu.

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

Każda metoda konstruktora do umieszczania na stronie zwraca ten konstruktor, więc wywołania każdej metody łączą się w łańcuch. Omówmy każdą metodę:

  1. Metoda appendTo() określa element nadrzędny elementu iframe. Przekazujemy identyfikator elementu HTML zdefiniowanego wcześniej na etapie przygotowań.
  2. Metoda withFrameBorder() ustawia atrybut frame- border w elemencie iframe. Jest to jedna z kilku metod definiowania atrybutów HTML w elemencie iframe.
  3. Metoda build() tworzy element iframe ze skonfigurowanymi atrybutami HTML

Ostatnie sprawdzenie

W poprzednich krokach Twój kod powinien wyglądać następująco:

// Import the Embed SDK as LookerEmbedSDK

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

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

Panel Lookera jest teraz umieszczony na Twojej stronie za pomocą pakietu SDK do umieszczenia.

4. Wysyłanie i odbieranie wiadomości umieszczonych na stronie

Przyjrzyjmy się teraz wysyłaniu i odbieraniu wiadomości za pomocą umieszczonych treści z Lookera za pomocą pakietu SDK Embed. Wiadomości wysyłane przez aplikację do elementu iframe nazywamy działaniami, a wiadomości otrzymywane przez aplikację z elementu iframe nazywamy zdarzeniami.

Odbieranie zdarzeń

Użyjmy poprzedniego kodu. Aby nasłuchiwać zdarzeń, przed wywołaniem metody build() wywołujemy metodę on() w kreatorze umieszczania.

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

W tym przypadku nazywamy metodę on(), która po utworzeniu elementu iframe ustawia odbiornik zdarzenia dashboard:run:complete pochodzącego z elementu iframe. Zdarzenie to poinformuje nas, gdy wczytywanie panelu się zakończy. Inne zdarzenia do nasłuchiwania znajdziesz w dokumentacji zdarzeń.

Wysyłanie działań

Przejdźmy do poprzedniego kodu. Aby wysłać działania do elementu iframe, po wywołaniu metody build() w kreatorze umieszczania wywołujemy metodę connect() w celu zainicjowania wysyłania i odbierania wiadomości za pomocą elementu iframe.

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

Przyjrzyjmy się temu przykładowemu kodowi:

  1. Nazywamy metodę connect(), która zwraca obietnicę. Po zainicjowaniu mechanizmu wysyłania i odbierania wiadomości trafia do obiektu osadzonego, który reprezentuje osadzony element iframe.
  2. Aby wysłać działanie dashboard:run, w umieszczonym obiekcie wywołujemy metodę send(). Inne działania, które możesz podjąć, znajdziesz w przewodniku po działaniach.
  3. Dodajemy metodę catch() na wypadek wystąpienia błędów podczas inicjowania.

Ostatnie sprawdzenie

W poprzednich krokach Twój kod powinien wyglądać teraz tak:

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

Możesz teraz komunikować się z umieszczonym panelem Lookera.

5. Dodatkowe informacje

Gratulacje! Za pomocą pakietu SDK Embed SDK możesz teraz prywatnie umieścić swój panel Lookera i wysyłać i odbierać wiadomości za pomocą elementu iframe. Więcej informacji znajdziesz w tych materiałach: