Embed SDK로 Looker를 삽입하는 방법

1. 시작하기 전에

이 Codelab에서는 Looker Embed SDK를 사용하여 웹페이지에 Looker 대시보드를 삽입합니다. iframe을 자동으로 만들고, Looker 콘텐츠를 iframe에 삽입하고, iframe과 웹페이지 간의 통신을 설정하는 일련의 SDK 메서드를 호출합니다.

기본 요건

  • 실행 중인 Looker 인스턴스가 있음
  • 웹 애플리케이션 또는 웹페이지에 삽입할 Looker 대시보드가 있음
  • JavaScript 및 JavaScript 프로미스에 익숙해야 합니다.

학습할 내용

  • Embed SDK를 사용하여 Looker 콘텐츠를 비공개로 삽입하는 방법
  • Embed SDK를 사용하여 삽입된 Looker 콘텐츠와 함께 메시지 (작업 및 이벤트)를 보내고 받는 방법

필요한 항목

  • 프런트엔드 코드의 HTML 및 자바스크립트에 액세스
  • Looker 인스턴스의 관리자 삽입 설정에 대한 액세스 권한

2. 준비

Embed SDK로 삽입하려면 먼저 HTML 및 Looker 인스턴스를 준비해야 합니다.

임베드 iframe의 컨테이너 요소 추가

웹페이지의 HTML 내에서 div 요소를 만들고 id 속성을 정의합니다.

<div id="looker-embed" />

Looker 인스턴스에서 삽입의 도메인을 허용 목록에 추가

Looker 인스턴스에서 삽입 도메인을 허용해야 합니다.

삽입된 Looker 콘텐츠를 호스팅하는 웹페이지의 도메인을 확인합니다. 웹페이지의 URL이 https://mywebsite.com/with/embed이면 웹페이지의 도메인은 https://mywebsite.com입니다.

Looker 인스턴스의 관리 섹션에서 삽입 페이지로 이동합니다. https://your_instance.looker.com/admin/embed

삽입된 도메인 허용 목록 필드에 삽입 도메인의 도메인을 입력합니다. 입력한 후 Tab 키를 눌러 도메인이 상자에 표시되도록 합니다. 후행 슬래시 /는 포함하지 마세요.

업데이트 버튼을 클릭합니다.

3. 삽입 빌드

이제 삽입된 Looker 콘텐츠를 '빌드'하도록 SDK의 삽입 빌더를 만들고 구성해 보겠습니다.

SDK 초기화

먼저 SDK를 가져온 다음 Looker 인스턴스의 도메인으로 초기화합니다.

// Import the Embed SDK as LookerEmbedSDK

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

삽입 빌더 만들기

다음으로 삽입할 Looker 대시보드의 ID를 결정합니다. 대시보드가 instance_name.looker.com/dashboard/12345에 있으면 대시보드의 ID는 12345입니다.

대시보드 ID로 SDK createDashboardWithId() 메서드를 호출하여 삽입 빌더를 만듭니다. 이 메서드는 삽입 작성 도구를 반환합니다.

LookerEmbedSDK.createDashboardWithId(12345)

삽입 빌더 구성 및 빌드

이제 삽입된 iframe을 빌드하도록 지정하기 전에 삽입 작성 도구를 구성해 보겠습니다. 이전 코드 샘플의 createDashboardWithId() 메서드 호출 바로 뒤에 다음 코드 샘플을 추가합니다.

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

삽입 빌더의 각 메서드는 삽입 빌더 자체를 반환하므로 메서드 호출을 함께 연결합니다. 각 메서드를 살펴보겠습니다.

  1. appendTo() 메서드는 iframe의 상위 요소를 결정합니다. 이전의 준비 단계에서 정의한 HTML 요소의 ID를 전달합니다.
  2. withFrameBorder() 메서드는 iframe에 frame-border 속성을 설정합니다. 이는 iframe에서 HTML 속성을 정의하는 여러 메서드 중 하나입니다.
  3. build() 메서드는 구성된 HTML 속성으로 iframe을 만듭니다.

최종 확인

이전 단계에서 코드는 다음과 같이 표시됩니다.

// Import the Embed SDK as LookerEmbedSDK

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

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

이제 Embed SDK를 사용하여 Looker 대시보드를 웹페이지에 삽입했습니다.

4. 삽입된 메시지 보내고 받기

이제 Embed SDK를 사용하여 삽입된 Looker 콘텐츠와 함께 메시지를 주고받는 방법을 살펴보겠습니다. 애플리케이션이 iframe에 전송하는 메시지를 작업이라고 하고 애플리케이션이 iframe에서 수신하는 메시지를 이벤트라고 합니다.

이벤트 수신

이전 코드로 작업해 보겠습니다. 이벤트를 수신 대기하려면 build() 메서드를 호출하기 전에 삽입 빌더의 on() 메서드를 호출합니다.

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

여기서는 on() 메서드를 호출하여 iframe이 빌드될 때 iframe에서 발생하는 dashboard:run:complete 이벤트에 이벤트 리스너를 설정합니다. 이 이벤트는 대시보드 로드가 완료되었음을 알려줍니다. 수신 대기할 다른 이벤트는 이벤트 참조를 확인하세요.

전송 작업

이전 코드를 계속 진행해 보겠습니다. iframe에 작업을 전송하려면 build() 메서드를 호출하여 iframe으로 메시지 송수신을 초기화한 후 삽입 작성 도구의 connect() 메서드를 호출합니다.

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

다음 코드 샘플을 살펴보겠습니다.

  1. 프로미스를 반환하는 connect() 메서드를 호출합니다. 이 약속은 메시지 전송 및 수신 메커니즘이 초기화된 후 삽입된 iframe을 나타내는 삽입 객체로 확인됩니다.
  2. 삽입 객체에서 send() 메서드를 호출하여 dashboard:run 작업을 전송합니다. 전송할 다른 작업은 작업 참조를 확인하세요.
  3. 초기화 중에 오류가 발생할 경우 catch() 메서드를 추가합니다.

최종 확인

이전 단계에서 코드가 다음과 같이 표시됩니다.

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

이제 삽입된 Looker 대시보드와 통신할 수 있습니다.

5. 추가 정보

축하합니다. 이제 Embed SDK를 사용하여 Looker 대시보드를 비공개로 삽입하고 iframe에서 메시지를 주고받을 수 있습니다. 자세한 내용은 다음 리소스를 확인하세요.