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

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

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

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

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

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

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

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

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

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

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

เพิ่มองค์ประกอบคอนเทนเนอร์ของ 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. สร้างการฝัง

ตอนนี้ ให้สร้างและกำหนดค่าเครื่องมือสร้างการฝังของ 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() จะตั้งค่าแอตทริบิวต์ขอบเขตเฟรมใน 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 แบบฝังด้วย 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. ข้อมูลเพิ่มเติม

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