วิธีฝัง Looker ด้วย Embed SDK

1. ก่อนเริ่มต้น

ใน Codelab นี้ เราจะใช้ Looker Embed SDK เพื่อฝังแดชบอร์ด Looker ในหน้าเว็บ คุณจะเรียกใช้ชุดเมธอด SDK ที่จะสร้าง iframe โดยอัตโนมัติ ฝังเนื้อหา Looker ลงใน iframe และตั้งค่าการสื่อสารระหว่าง iframe กับหน้าเว็บ

ข้อกำหนดเบื้องต้น

  • มีอินสแตนซ์ Looker ที่ทำงานอยู่
  • มีแดชบอร์ด Looker ที่ต้องการฝังในเว็บแอปพลิเคชันหรือหน้าเว็บ
  • คุ้นเคยกับ JavaScript และ JavaScript Promises

สิ่งที่คุณจะได้เรียนรู้

  • วิธีฝังแบบส่วนตัวเนื้อหา Looker ด้วย Embed SDK
  • วิธีส่งและรับข้อความ (การดำเนินการและเหตุการณ์) ด้วยเนื้อหา Looker ที่ฝังไว้ด้วย Embed SDK

สิ่งที่คุณต้องมี

  • การเข้าถึง HTML และ JavaScript ของโค้ดส่วนหน้า
  • สิทธิ์เข้าถึงการตั้งค่าการฝังของผู้ดูแลระบบในอินสแตนซ์ Looker

2. การเตรียมการ

คุณต้องเตรียม HTML และอินสแตนซ์ Looker ก่อนจึงจะฝังด้วย Embed SDK ได้

เพิ่มองค์ประกอบคอนเทนเนอร์ของ iframe การฝัง

สร้างองค์ประกอบ div ใน HTML ของหน้าเว็บ แล้วกำหนดแอตทริบิวต์ 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. สร้างการฝัง

ตอนนี้มาสร้างและกำหนดค่าเครื่องมือสร้างการฝังของ SDK เพื่อ "สร้าง" เนื้อหา Looker ที่ฝังกัน

เริ่มต้น SDK

ก่อนอื่น ให้นำเข้า SDK แล้วเริ่มต้นใช้งานด้วยโดเมนของอินสแตนซ์ Looker

// Import the Embed SDK as LookerEmbedSDK

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

สร้างเครื่องมือสร้างการฝัง

จากนั้นกำหนดรหัสของแดชบอร์ด Looker ที่ต้องการฝัง หากแดชบอร์ดของคุณอยู่ที่ instance_name.looker.com/dashboard/12345 รหัสแดชบอร์ดของคุณคือ 12345

เรียกใช้เมธอด createDashboardWithId() ของ SDK ด้วยรหัสแดชบอร์ดเพื่อสร้างเครื่องมือสร้างการฝัง เมธอดนี้จะแสดงผลเครื่องมือสร้างการฝัง

LookerEmbedSDK.createDashboardWithId(12345)

กำหนดค่าและสร้างเครื่องมือสร้างการฝัง

ตอนนี้มากำหนดค่าเครื่องมือสร้างการฝังก่อนที่เราจะบอกให้สร้าง iframe ที่ฝัง เพิ่มตัวอย่างโค้ดต่อไปนี้ต่อจากการเรียกใช้เมธอด createDashboardWithId() ของตัวอย่างโค้ดก่อนหน้าโดยตรง

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

แต่ละวิธีของเครื่องมือสร้างการฝังจะแสดงผลเครื่องมือสร้างการฝังเอง เราจึงเชื่อมโยงการเรียกเมธอดเข้าด้วยกัน มาดูแต่ละวิธีกัน

  1. เมธอด appendTo() จะกำหนดองค์ประกอบระดับบนของ iframe เราจะส่งรหัสขององค์ประกอบ HTML ที่เรากำหนดไว้ก่อนหน้านี้ในขั้นตอนการเตรียมการ
  2. เมธอด withFrameBorder() จะตั้งค่าแอตทริบิวต์เส้นขอบเฟรมใน iframe นี่เป็นหนึ่งในหลายวิธีที่กำหนดแอตทริบิวต์ HTML ใน iframe
  3. เมธอด build() จะสร้าง iframe ที่มีแอตทริบิวต์ HTML ที่กำหนดค่าไว้

ตรวจสอบขั้นสุดท้าย

เมื่อทำตามขั้นตอนก่อนหน้านี้ โค้ดควรมีลักษณะดังนี้

// Import the Embed SDK as LookerEmbedSDK

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

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

ตอนนี้คุณมีแดชบอร์ด Looker ที่ฝังอยู่ภายในหน้าเว็บด้วย Embed SDK แล้ว

4. ส่งและรับข้อความที่ฝัง

ตอนนี้มาดูวิธีส่งและรับข้อความด้วยเนื้อหา Looker ที่ฝังไว้ด้วย Embed SDK กัน เราเรียกข้อความที่แอปพลิเคชันส่งไปยัง iframe ว่าการดำเนินการ และเรียกข้อความที่แอปพลิเคชันได้รับจาก iframe ว่าเหตุการณ์

รับกิจกรรม

มาทำงานกับโค้ดก่อนหน้านี้กัน หากต้องการฟังเหตุการณ์ เราจะเรียกใช้เมธอด on() ของ Embed Builder ก่อนเรียกใช้เมธอด build()

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

ในที่นี้เราเรียกใช้เมธอด on() เพื่อตั้งค่า Listener เหตุการณ์ในเหตุการณ์ dashboard:run:complete ที่มาจาก iframe เมื่อสร้าง iframe เหตุการณ์จะแจ้งให้เราทราบเมื่อแดชบอร์ดโหลดเสร็จ ดูข้อมูลอ้างอิงกิจกรรมสำหรับกิจกรรมอื่นๆ ที่คุณต้องการฟัง

ส่งการดำเนินการ

มาใช้โค้ดก่อนหน้ากันต่อ หากต้องการส่งการดำเนินการไปยัง iframe เราจะเรียกใช้เมธอด connect() ของเครื่องมือสร้างการฝังหลังจากเรียกใช้เมธอด build() เพื่อเริ่มต้นการส่งและรับข้อความด้วย iframe

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

มาดูตัวอย่างโค้ดนี้กัน

  1. เราเรียกใช้เมธอด connect() ซึ่งจะแสดงผล Promise Promise จะเปลี่ยนเป็นออบเจ็กต์การฝังที่แสดง 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 ได้แล้ว ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้