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

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

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

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

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

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

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

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

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

2. การเตรียมพร้อม

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

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

สร้างองค์ประกอบ div และกำหนดแอตทริบิวต์ id ใน HTML ของหน้าเว็บ

<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

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

LookerEmbedSDK.createDashboardWithId(12345)

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

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

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

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

  1. เมธอด appendTo() จะกำหนดองค์ประกอบหลักของ iframe เราส่งรหัสขององค์ประกอบ HTML ที่เรากําหนดไว้ก่อนหน้านี้ในขั้นตอนการเตรียม
  2. เมธอด withFrameBorder() จะตั้งค่าแอตทริบิวต์ frame-border ใน 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 ว่าเป็น actions และเรียกข้อความที่แอปพลิเคชันได้รับจาก iframe เป็นเหตุการณ์

รับเหตุการณ์

มาลองใช้รหัสก่อนหน้ากัน หากต้องการฟังเหตุการณ์ เราจะเรียกใช้เมธอด on() ของเครื่องมือสร้างการฝังก่อนที่จะเรียกใช้เมธอด 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() ซึ่งจะแสดงคำสัญญา พรอมต์จะแสดงผลเป็นออบเจ็กต์การฝังที่แสดงถึง 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 ได้แล้ว ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้