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()
แต่ละเมธอดของเครื่องมือสร้างการฝังจะแสดงตัวสร้างการฝังตัว เราจึงเชื่อมโยงการเรียกเมธอดเข้าด้วยกัน มาดูวิธีการแต่ละวิธีกัน
- เมธอด
appendTo()
จะกำหนดองค์ประกอบหลักของ iframe เราส่งรหัสขององค์ประกอบ HTML ที่เรากําหนดไว้ก่อนหน้านี้ในขั้นตอนการเตรียม - เมธอด
withFrameBorder()
จะตั้งค่าแอตทริบิวต์ frame-border ใน iframe นี่เป็นวิธีหนึ่งที่ใช้กำหนดแอตทริบิวต์ HTML ใน iframe - เมธอด
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!')
...
มาดูตัวอย่างโค้ดนี้กัน
- เราเรียกเมธอด
connect()
ซึ่งจะแสดงคำสัญญา พรอมต์จะแสดงผลเป็นออบเจ็กต์การฝังที่แสดงถึง iframe ที่ฝังไว้หลังจากเริ่มต้นกลไกการส่งและรับข้อความแล้ว - เราเรียกใช้เมธอด
send()
บนออบเจ็กต์การฝังเพื่อส่งการดําเนินการdashboard:run
ดูการดำเนินการอื่นๆ ที่จะส่งได้ที่ข้อมูลอ้างอิงการดำเนินการ - เราเพิ่มเมธอด
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 ได้แล้ว ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้
- ฝังที่เก็บ SDK เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีฝัง Looker โดยเฉพาะอย่างยิ่งหากต้องการฝัง SSO ในเนื้อหา Looker
- ข้อมูลอ้างอิงเหตุการณ์ สำหรับเหตุการณ์ที่มีอยู่ทั้งหมดและพร็อพเพอร์ตี้ของเหตุการณ์
- ข้อมูลอ้างอิงการกระทำสำหรับการกระทำที่ใช้ได้ทั้งหมดและพร็อพเพอร์ตี้ของการกระทำเหล่านั้น
- แนวทางปฏิบัติแนะนำด้านความปลอดภัยเกี่ยวกับการฝังเนื้อหา Looker