ฝัง Looker ด้วยข้อมูลวิเคราะห์แบบบทสนทนา

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

Codelab นี้จะแนะนําคุณในการผสานรวมแดชบอร์ด Looker ที่ฝังไว้กับแชทที่ขับเคลื่อนด้วย Conversational Analytics เพื่อสร้างประสบการณ์การใช้งานข้อมูลแบบครบวงจรที่ขับเคลื่อนด้วยภาษาธรรมชาติ หากต้องการรับมูลค่าสูงสุด คุณควรคุ้นเคยกับการฝัง Looker, Conversational Analytics, JavaScript และ React

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

หลังจากทำตาม Codelab นี้ คุณจะได้เรียนรู้สิ่งต่อไปนี้

• วิธีตั้งค่าแอปพลิเคชันอ้างอิงการฝัง Looker ในเครื่อง
• วิธีสร้างคอมโพเนนต์แชท React ด้วยไลบรารี Looker Components
• วิธีส่งตัวกรองของแดชบอร์ดที่ฝังเป็นบริบทไปยัง Conversational Analytics
• วิธีเปิดใช้แชทที่ขับเคลื่อนโดย Conversational Analytics เพื่อควบคุมตัวกรองของแดชบอร์ดที่ฝัง

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

คุณต้องมีสิ่งต่อไปนี้จึงจะทำ Codelab นี้ให้เสร็จสมบูรณ์ได้

• อินสแตนซ์ Looker ที่ติดตั้ง ASC Demographic Data Looker Block และเปิดใช้ SSO Embedding
• การเข้าถึง API และนักพัฒนาแอปในอินสแตนซ์ Looker
• สภาพแวดล้อมในเครื่องที่ติดตั้ง Node v18, yarn, Git และ gcloud
• โปรเจ็กต์ที่อยู่ในระบบคลาวด์ที่มีการตั้งค่าบทบาท IAM เหล่านี้สำหรับบัญชีผู้ใช้ของคุณ
• roles/bigquery.dataViewer ผู้ดูข้อมูล BigQuery
• roles/bigquery.user ผู้ใช้ BigQuery
• roles/looker.instanceUser ผู้ใช้ในอินสแตนซ์ Looker

2. ตั้งค่า Conversational Analytics

มาตั้งค่าเอเจนต์ข้อมูล Conversational Analytics ที่แชทของแดชบอร์ดที่ฝังไว้จะใช้เพื่อตอบคำถามในภาษาง่ายๆ กัน

ตรวจสอบสิทธิ์ด้วย gcloud

1. ตรวจสอบสิทธิ์ด้วยบัญชีผู้ใช้ในสภาพแวดล้อมภายในโดยทำดังนี้

gcloud auth login

2. ตั้งค่าข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชัน (ADC) และโปรเจ็กต์การเรียกเก็บเงินใน gcloud โดยทำดังนี้

gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

เปิดใช้ Conversational Analytics API

3. เปิดใช้ API ของโปรเจ็กต์ที่อยู่ในระบบคลาวด์ โปรดแทนที่ YOUR_PROJECT_ID ด้วยรหัสโปรเจ็กต์ Google Cloud ของคุณ

gcloud services enable geminidataanalytics.googleapis.com bigquery.googleapis.com cloudaicompanion.googleapis.com --project=YOUR_PROJECT_ID

สร้าง Data Agent

4. เปิด Google Colab
5. ใน Google Colab ให้โหลดสมุดบันทึกนี้จากที่เก็บข้อมูลอ้างอิงการฝัง Looker
6. เรียกใช้ขั้นตอนทั้งหมดใน Notebook คุณจะต้องใช้รหัสโปรเจ็กต์ที่อยู่ในระบบคลาวด์ และ URI ของอินสแตนซ์ Looker ที่มีเครื่องหมายทับปิดท้าย เช่น "https://my.looker.app/" คุณควรเห็นผลลัพธ์ที่สำเร็จที่ส่วนท้ายของ Notebook

ตอนนี้คุณมีเอเจนต์ข้อมูล Conversational Analytics พร้อมใช้งานและพร้อมรับข้อความแชท ค้นหา Looker Explore ในแดชบอร์ด Looker ที่ฝังไว้ และแสดงผลลัพธ์และการแสดงข้อมูลผ่านภาพ

3. ตั้งค่าการอ้างอิงการฝัง Looker

มาตั้งค่าแอปพลิเคชันอ้างอิงการฝัง Looker ในสภาพแวดล้อมในเครื่องกัน เพื่อให้คุณลองใช้ตัวอย่างการผสานรวมแชท Conversational Analytics กับแดชบอร์ด Looker ที่ฝังไว้ได้

โคลนที่เก็บ

1. โคลน github repo ลงในสภาพแวดล้อมในเครื่อง ดูตัวอย่างคำสั่งต่อไปนี้

git clone "https://github.com/looker-open-source/LookerEmbedReference.git"

2. ไปที่ไดเรกทอรี LookerEmbedReference ที่คุณโคลนไว้

cd LookerEmbedReference

ตั้งค่าและเรียกใช้เซิร์ฟเวอร์ฟรอนท์เอนด์ในเครื่อง

3. ติดตั้งการอ้างอิงในไดเรกทอรี Frontend

cd Frontend
yarn install

4. ตั้งค่าไฟล์ .env ในรูทของไดเรกทอรี Frontend ด้วยข้อมูลเข้าสู่ระบบ YOUR_LOOKER_INSTANCE_URI ควรเป็น URI ของอินสแตนซ์ Looker โดยไม่มีเครื่องหมายทับปิดท้าย เนื้อหาของไฟล์ควรมีลักษณะดังนี้

PBL_CLIENT_PORT=3001 
API_HOST=http://localhost:3000
LOOKER_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKER_API_HOST=YOUR_LOOKER_INSTANCE_URI:19999
LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI

คุณใช้คำสั่งตัวอย่างต่อไปนี้เพื่อสร้างไฟล์ได้

cat > .env <<'EOF'
PBL_CLIENT_PORT=3001 
API_HOST=http://localhost:3000
LOOKER_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKER_API_HOST=YOUR_LOOKER_INSTANCE_URI:19999
LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI
EOF

5. เรียกใช้เซิร์ฟเวอร์สำหรับนักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์

yarn run dev

ตั้งค่าและเรียกใช้เซิร์ฟเวอร์แบ็กเอนด์ในเครื่อง

6. เปิด Shell, เทอร์มินัล, คอนโซล หรือแท็บใหม่ ไปที่ไดเรกทอรี Backend-Node แล้วติดตั้งทรัพยากร Dependency อย่าลืมเปิดเชลล์/เทอร์มินัลก่อนหน้าที่มีเซิร์ฟเวอร์ส่วนหน้าทำงานอยู่

cd ../Backend-Node
yarn install

7. สร้าง.envในรูทของไดเรกทอรี Backend-Node โดยใช้ข้อมูลเข้าสู่ระบบ

• YOUR_LOOKER_CLIENT_ID คือรหัสไคลเอ็นต์ Looker ของคุณ
• YOUR_LOOKER_CLIENT_SECRET คือรหัสลับไคลเอ็นต์ของ Looker
• YOUR_LOOKER_EMBED_SECRET คือข้อมูลลับสำหรับการฝัง
• YOUR_PROJECT_ID คือรหัสโปรเจ็กต์ที่อยู่ในระบบคลาวด์
• YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH คือ URI ของอินสแตนซ์ Looker ที่มีเครื่องหมายทับปิดท้าย
• YOUR_LOOKER_INSTANCE_URI คือ URI อินสแตนซ์ Looker ของคุณที่ไม่มีเครื่องหมายทับปิดท้าย

เนื้อหาของไฟล์ควรมีลักษณะดังนี้

PBL_BACKEND_PORT=3000
LOOKERSDK_API_VERSION=4.0
LOOKERSDK_BASE_URL=YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH
LOOKERSDK_CLIENT_ID=YOUR_LOOKER_CLIENT_ID
LOOKERSDK_CLIENT_SECRET=YOUR_LOOKER_CLIENT_SECRET

LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKERSDK_EMBED_SECRET=YOUR_LOOKER_EMBED_SECRET

CLOUD_AGENT_ID=looker_embed_reference_data_agent
CLOUD_PROJECT_ID=YOUR_PROJECT_ID

คุณใช้คำสั่งตัวอย่างต่อไปนี้เพื่อสร้างไฟล์ได้ แทนที่ข้อมูลเข้าสู่ระบบทั้งหมดตามนั้น

cat > .env <<'EOF'
PBL_BACKEND_PORT=3000
LOOKERSDK_API_VERSION=4.0
LOOKERSDK_BASE_URL=YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH
LOOKERSDK_CLIENT_ID=YOUR_LOOKER_CLIENT_ID
LOOKERSDK_CLIENT_SECRET=YOUR_LOOKER_CLIENT_SECRET

LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKERSDK_EMBED_SECRET=YOUR_LOOKER_EMBED_SECRET

CLOUD_AGENT_ID=looker_embed_reference_data_agent
CLOUD_PROJECT_ID=YOUR_PROJECT_ID
EOF

8. เรียกใช้เซิร์ฟเวอร์การพัฒนาแบ็กเอนด์

yarn run dev

ตอนนี้คุณมีเซิร์ฟเวอร์สำหรับนักพัฒนาซอฟต์แวร์ส่วนหน้าซึ่งกำลังทำงานและให้บริการ JavaScript สำหรับเว็บแอปพลิเคชันแล้ว นอกจากนี้ คุณยังมีเซิร์ฟเวอร์สำหรับนักพัฒนาซอฟต์แวร์แบ็กเอนด์ที่ทำงานเพื่อจัดการคำขอ URL ของ SSO Embed และคำขอพร็อกซีไปยังปลายทางของ Conversational Analytics

4. ลองใช้ตัวอย่าง

มาลองใช้เว็บแอปพลิเคชันที่ตอนนี้ทำงานในเครื่องในสภาพแวดล้อมของคุณกัน

เริ่มการสนทนา

1. เปิดที่อยู่ https://localhost:3001 ในเบราว์เซอร์ที่คุณเลือก
2. ไปที่หน้าแดชบอร์ดที่ฝังพร้อมแชทในการนำทางหลักด้านซ้าย
3. เมื่อคอมโพเนนต์แชททางด้านขวาโหลดแล้ว ให้พิมพ์ว่า "สวัสดี คุณเป็นใคร"
4. จดบันทึกคำตอบ

แอปพลิเคชันสร้างออบเจ็กต์การสนทนาของ Conversational Analytics โดยอัตโนมัติเพื่อติดตามประวัติการแชทและโหลดอินเทอร์เฟซแชท เมื่อคุณถามคำถามในอินเทอร์เฟซแชท ส่วนหน้าจะส่งข้อความของผู้ใช้ไปยังเซิร์ฟเวอร์แบ็กเอนด์ Node ในเครื่อง จากนั้นจะส่งต่อคำขอไปยังและคำตอบจากปลายทางแชทของ Conversational Analytics

กรองแดชบอร์ดที่ฝัง

ตอนนี้ให้ทำความคุ้นเคยกับแดชบอร์ดที่ฝังไว้และโต้ตอบกับแดชบอร์ด

5. เลื่อนดูแดชบอร์ดที่ฝัง โปรดทราบว่ารายงานนี้ครอบคลุมข้อมูลสำมะโนประชากรในมิติข้อมูลและเมตริกต่างๆ
6. คุณกรองแดชบอร์ดตามรัฐและเขตได้ที่ด้านซ้ายบนของแดชบอร์ด ตั้งค่าตัวกรองในตัวกรองแดชบอร์ดเป็น Texas จากนั้นเลือกปุ่มลูกศรวงกลมที่ไฮไลต์เป็นสีน้ำเงินใหม่เพื่อเรียกใช้แดชบอร์ดอีกครั้ง
7. โปรดสังเกตว่าข้อมูลการแสดงข้อมูลผ่านภาพทั้งหมดได้รับการกรองในรัฐเท็กซัส

ถามคำถามโดยใช้บริบทของแดชบอร์ด

ตอนนี้เราได้กรองแดชบอร์ดแล้ว มาตรวจสอบข้อมูลในแดชบอร์ดกันต่อ

8. ส่งคำสั่ง "บอกฉันหน่อยว่า 5 จังหวัดที่มีค่าเช่าต่ำสุดคือจังหวัดอะไร" ในแชท
9. โปรดทราบว่าพรอมต์ของคุณไปยัง Conversational Analytics จะมีคำเพิ่มเติมว่า "กรองตามมิติข้อมูล 'state.state_name' ที่เป็นเท็กซัส"
10. ตอนนี้โปรดสังเกตว่าคำค้นหาและการตอบกลับของข้อมูลจะได้รับการกรองในรัฐเท็กซัส
11. นอกจากนี้ หลังจากที่ระบบแสดงผลลัพธ์ข้อมูลแล้ว ระบบได้เรียกใช้แดชบอร์ดที่ฝังอีกครั้งโดยตั้งค่าตัวกรองเขตเป็น 5 เขตที่กำหนดไว้ในข้อมูลผลลัพธ์

ตอนนี้คุณสามารถตรวจสอบข้อมูลสำมะโนประชากรต่อได้ โดยระบบจะกรอง 5 เทศมณฑลให้คุณอย่างสะดวก

ยินดีด้วย คุณได้ตั้งค่าและลองใช้ตัวอย่างแดชบอร์ดแบบฝังที่ผสานรวมกับแชทของ Conversational Analytics อย่างง่ายแล้ว

5. สร้างคอมโพเนนต์แชท

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

ใช้ไลบรารีคอมโพเนนต์ของ Looker

1. เปิดไฟล์คอมโพเนนต์ Chat ที่ Frontend/src/components/EmbedChat/components/chat.js ใน IDE ที่คุณชื่นชอบหรือในเทอร์มินัล
2. คอมโพเนนต์ Chat สร้างขึ้นด้วยคอมโพเนนต์ React ของ UI ของ Looker มาตรฐานจากแพ็กเกจไลบรารีคอมโพเนนต์ของ Looker

คลังคอมโพเนนต์ Looker ช่วยให้ผสานรวมเนื้อหา Looker กับแอปพลิเคชันได้อย่างราบรื่นด้วยการจัดหาคอมโพเนนต์ React ที่สร้างไว้ล่วงหน้าซึ่งสอดคล้องกับสไตล์และคอมโพเนนต์ในแดชบอร์ด Looker ที่ฝังไว้

ส่งข้อความถึงผู้ใช้

อินเทอร์เฟซแชทต้องส่งพรอมต์ของผู้ใช้ไปยัง Conversational Analytics

3. ที่ด้านล่างของไฟล์คอมโพเนนต์ Chat คอมโพเนนต์ Chat มีคอมโพเนนต์ย่อย ChatInput ซึ่งมีช่องป้อนข้อมูลสำหรับพรอมต์ของผู้ใช้
4. เมื่อส่งแล้ว เมธอด showAndSendUserPrompt จะส่งพรอมต์ของผู้ใช้ไปยัง Conversational Analytics (ผ่านพร็อกซีแบ็กเอนด์ของ Node)

สตรีมและแสดงข้อความระบบ

หลังจากที่ผู้ใช้ส่งข้อความถึง Conversational Analytics แล้ว เราต้องแสดงคำตอบของ Conversational Analytics

5. ที่ด้านล่างของไฟล์คอมโพเนนต์ Chat คอมโพเนนต์ Chat จะมีคอมโพเนนต์ย่อย MessageList ซึ่งมีตรรกะในการแสดงข้อความจาก Conversational Analytics ตามประเภทของข้อความ
6. เมธอด streamAndParseResponse จะจัดการการตอบกลับโดยพยายามแยกวิเคราะห์ข้อความระบบที่ถูกต้องจากการตอบกลับ JSON ของการสตรีมอย่างต่อเนื่อง เมื่อใดก็ตามที่แยกวิเคราะห์ข้อความระบบที่ถูกต้องได้สำเร็จ ข้อความนั้นจะแสดงใน MessageList

เราขอแนะนำอย่างยิ่งให้คุณแสดงข้อความระบบจาก Conversational Analytics ทันทีที่ได้รับเพื่อประสบการณ์ของผู้ใช้ที่ตอบสนองได้ดีขึ้น

คำตอบของ Conversational Analytics ต่อพรอมต์ของผู้ใช้ประกอบด้วยข้อความระบบหลายรายการ ซึ่งครอบคลุมแหล่งข้อมูลที่ค้นหา คำค้นหา ผลลัพธ์ การแสดงข้อมูลผ่านภาพ และอื่นๆ การรอให้ข้อความระบบทั้งหมดมาถึงอาจทำให้ผู้ใช้คิดว่ามีปัญหาด้านประสิทธิภาพหรือแอปพลิเคชัน

ตอนนี้คุณได้ดูวิธีที่คอมโพเนนต์ Chat ซึ่งสร้างขึ้นด้วยไลบรารีคอมโพเนนต์ Looker ส่งข้อความของผู้ใช้และสตรีมการตอบกลับกลับมาแล้ว

6. ส่งตัวกรองแดชบอร์ดไปยัง Conversational Analytics

ตอนนี้มาดูวิธีรวมตัวกรองแดชบอร์ดในพรอมต์ของผู้ใช้เพื่อให้ Conversational Analytics กรองคําค้นหาด้วยบริบทของแดชบอร์ด (ตัวกรอง) ได้

รอเหตุการณ์การเปลี่ยนแปลงตัวกรองของแดชบอร์ด

1. เปิดไฟล์คอมโพเนนต์ EmbedChat ที่ Frontend/src/components/EmbedChat/EmbedChat.js, ซึ่งแสดงหน้าของแอปพลิเคชันที่มีแดชบอร์ดฝังตัวที่ผสานรวมกับคอมโพเนนต์ Chat ที่สำรวจก่อนหน้านี้
2. EmbedChat คอมโพเนนต์จะรับฟังเหตุการณ์ "dashboard:filters:changed" จากแดชบอร์ดที่ฝังด้วยเมธอด .on(...) ของ Embed SDK จากนั้นคอมโพเนนต์จะจัดเก็บตัวกรองปัจจุบันไว้ในสถานะตัวกรอง

ส่งสถานะตัวกรองไปยัง Conversational Analytics

3. คอมโพเนนต์ EmbedChat จะส่งตัวกรองไปยังคอมโพเนนต์ Chat ซึ่งจะแปลงตัวกรองแต่ละรายการเป็นสตริง เช่น "Filter on dimension '...' being ..." ในเมธอด showAndSendUserPrompt เพื่อต่อท้ายพรอมต์ของผู้ใช้

ชื่อหรือคีย์ของตัวกรองในแดชบอร์ดไม่จำเป็นต้องเหมือนกับชื่อของมิติข้อมูลจริง คุณต้องแมปคีย์ของตัวกรองกับชื่อของมิติข้อมูลจริงเพื่อให้ Conversational Analytics เข้าใจว่าควรกรองมิติข้อมูลใด

ในกรณีนี้ เช่น ในคอมโพเนนต์ Chat ออบเจ็กต์ FIELD_FILTER_MAP จะแมปชื่อมิติข้อมูล "state.state_name" กับคีย์ของตัวกรอง "State 📍" จากนั้นเมธอด showAndSendUserPrompt จะใช้แผนที่เพื่อกำหนดชื่อของมิติข้อมูลที่จะใช้กรอง

7. ควบคุมตัวกรองแดชบอร์ดจากแชท

สุดท้าย มาดูวิธีเปิดใช้คอมโพเนนต์ Chat เพื่อควบคุมตัวกรองของแดชบอร์ดที่ฝังกัน

กำหนดตัวกรองที่จะตั้งค่า

1. เมธอด streamAndParseResponse ของคอมโพเนนต์ Chat จะตรวจสอบข้อความระบบที่มีผลลัพธ์ข้อมูลจาก Conversational Analytics เสมอ
2. เมื่อใดก็ตามที่เมธอด streamAndParseResponse แยกวิเคราะห์ข้อความของระบบที่มีผลลัพธ์ข้อมูล เมธอดจะตรวจสอบว่ามิติข้อมูลใดในข้อมูลตรงกับมิติข้อมูลในตัวกรอง
3. หากเป็นเช่นนั้น streamAndParseResponse วิธีนี้จะแปลงคอลัมน์ข้อมูลเป็นตัวกรองแดชบอร์ด คราวนี้วิธีนี้จะใช้ FIELD_FILTER_MAP อีกครั้ง แต่จะใช้ในทางกลับกัน โดยจะแปลงจากชื่อมิติข้อมูลเป็นคีย์ของตัวกรอง ค่าของตัวกรองคือค่าในคอลัมน์ข้อมูล

ส่งเหตุการณ์การเปลี่ยนแปลงตัวกรองไปยังแดชบอร์ดที่ฝัง

4. เมื่อใช้ตัวกรองแดชบอร์ดที่ต้องการ streamAndParseResponse จะเรียกใช้เมธอด setFilters ของคอมโพเนนต์ Chat ด้วยตัวกรองที่ต้องการ
5. ซึ่งจะเรียกใช้เมธอด setDashboardFilters ของคอมโพเนนต์ EmbedChat ซึ่งจะส่งเหตุการณ์ 2 รายการ ได้แก่ "dashboard:filters:update" ที่มีตัวกรอง และ "dashboard:run" ไปยังแดชบอร์ดที่ฝังไว้โดยทันทีโดยใช้เมธอด send ของ Embed SDK
6. เหตุการณ์ "dashboard:filters:update" จะเปลี่ยนตัวกรองของแดชบอร์ดที่ฝังไว้ ส่วนเหตุการณ์ "dashboard:run" จะเรียกใช้การค้นหาของแดชบอร์ดอีกครั้งด้วยตัวกรองใหม่

คุณต้องส่ง "dashboard:run" หลังจากเหตุการณ์ "dashboard:filters:update" "dashboard:filters:update" เหตุการณ์จะไม่เรียกใช้การค้นหาของแดชบอร์ดอีกครั้งโดยอัตโนมัติ

8. บทสรุปและสิ่งที่ควรทราบ

คุณได้ตั้งค่าตัวอย่างการทำงานของแดชบอร์ด Looker แบบฝังที่ผสานรวมกับแชท Conversational Analytics แล้ว คุณได้เรียนรู้วิธีเปิดใช้การสํารวจข้อมูลที่ขับเคลื่อนด้วยภาษาที่เป็นธรรมชาติด้วยแดชบอร์ด Looker ที่ฝังไว้และ Conversational Analytics

• คุณสร้างคอมโพเนนต์แชทด้วยคลังคอมโพเนนต์ของ Looker
• คุณส่งบริบทของแดชบอร์ด Looker ที่ฝังไว้ไปยัง Conversational Analytics เพื่อให้การสํารวจข้อมูลง่ายขึ้น
• คุณเปิดใช้ Conversational Analytics เพื่อควบคุมตัวกรองของแดชบอร์ดที่ฝังไว้เพื่อเพิ่มบริบทขณะสํารวจข้อมูล

ขั้นต่อไปคืออะไร

• ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถของข้อมูลวิเคราะห์เชิงสนทนา
• อัปเดตแอปตัวอย่าง Looker Embed Reference ให้ทำงานร่วมกับแดชบอร์ด Looker ที่ฝังของคุณเอง
• ลองใช้ Use Case การฝังอื่นๆ ที่มีอยู่ในแอปตัวอย่าง Looker Embed Reference ที่ทำงานในเครื่องของคุณ