Codelab ของส่วนขยายการสรุปแดชบอร์ด Looker

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

ใน Codelab (1) นี้ คุณจะได้ตั้งค่าส่วนขยายการสรุปข้อมูลแดชบอร์ด Looker ภายในเครื่องเพื่อให้คุณลองใช้และพัฒนาภายในเครื่องได้ จากนั้น (2) คุณจะต้องทำให้ส่วนขยายใช้งานได้ในเวอร์ชันที่ใช้งานจริงเพื่อให้ผู้ใช้ Looker รายอื่นในอินสแตนซ์ Looker ของคุณสามารถใช้ได้ สุดท้าย (3) คุณสามารถทำตามขั้นตอนเพิ่มเติมเพื่อปรับแต่งและปรับปรุงฟังก์ชันการทำงานของส่วนขยาย คุณควรกรอกข้อมูลในส่วนที่ไม่บังคับทั้งหมดตามลำดับ

ภาพรวมส่วนขยายการสรุปแดชบอร์ดของ Looker

ในทางปฏิบัติ ส่วนขยายการสรุปแดชบอร์ด Looker จะส่งข้อมูลของแดชบอร์ด Looker ไปยังโมเดล Gemini ของ Vertex AI จากนั้นโมเดล Gemini จะแสดงข้อมูลสรุปของแดชบอร์ดและการแนะนําขั้นตอนถัดไป ส่วนขยายจะแสดงข้อมูลสรุปและขั้นตอนถัดไปเป็นการ์ดในหน้าแดชบอร์ด ซึ่งผสานรวมกับประสบการณ์การใช้งานแดชบอร์ด นอกจากนี้ ส่วนขยายยังส่งออกข้อมูลสรุปและขั้นตอนถัดไปไปยัง Slack หรือ Google Chat ได้ด้วย ส่วนขยายนี้ใช้ประโยชน์จากแอปพลิเคชัน React บนหน้าเว็บร่วมกับบริการแบ็กเอนด์ WebSocket เพื่อส่งและรับข้อมูลจากโมเดล Gemini ของ Vertex AI

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

  • มีความคุ้นเคยกับการพัฒนาโหนด, Docker และ terform ในระดับพื้นฐาน
  • ความคุ้นเคยกับการตั้งค่าโปรเจ็กต์ Looker LookML

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

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

สิ่งที่ต้องมี

  • อินสแตนซ์ Looker จะผ่านใบอนุญาต Looker Original, ช่วงทดลองใช้ Looker Core ที่ใช้งานอยู่ หรือใบอนุญาต Looker Core ที่ใช้งานอยู่
  • สิทธิ์ develop และ deploy ในอินสแตนซ์ Looker
  • สิทธิ์ในการแก้ไขหน้าแดชบอร์ดที่คุณต้องการลองใช้กับส่วนขยาย
  • คีย์ Looker API จากอินสแตนซ์ Looker
  • โปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงินอยู่
  • เปิดใช้ Cloud Run API, Vertex AI API และ Artifact Registry API ในโปรเจ็กต์แล้ว
  • สิทธิ์เข้าถึงสภาพแวดล้อมในเครื่องที่ติดตั้ง gcloud CLI ขั้นตอนของ Codelab จะถือว่ามาจากสภาพแวดล้อมของสไตล์ Linux

2. ตั้งค่าแบ็กเอนด์สำหรับการพัฒนาในเครื่อง

ในส่วนนี้ คุณจะต้องตั้งค่าบริการแบ็กเอนด์ WebSocket เพื่อทดลองใช้และพัฒนาการทดสอบในเครื่อง บริการดังกล่าวจะมีสิทธิ์เข้าถึง Vertex AI

  1. ติดตั้ง Node เวอร์ชัน 18 ขึ้นไปในสภาพแวดล้อมในเครื่อง ทำตามวิธีการเหล่านี้เพื่อติดตั้ง Node
  2. โคลนที่เก็บข้อมูลของส่วนขยายไปยังไดเรกทอรีหน้าแรกในเครื่อง แล้วไปที่ไดเรกทอรีรูทของที่เก็บข้อมูล โค้ดตัวอย่างทั้งหมดในโค้ดแล็บนี้จะถือว่าที่เก็บข้อมูลที่โคลนอยู่ในไดเรกทอรีหลักในเครื่อง
cd ~
git clone git@github.com:looker-open-source/dashboard-summarization.git
  1. ไปยังไดเรกทอรีรูทของที่เก็บที่โคลนและเปลี่ยนชื่อไฟล์ .env.example เป็น .env เพื่อให้คุณตั้งค่าตัวแปรสภาพแวดล้อมในส่วนถัดไปของ Codelab นี้ได้
cd ~/dashboard-summarization
mv .env.example .env
  1. ไปยังไดเรกทอรี src ของแบ็กเอนด์ Web Socket ของที่เก็บที่โคลน ไดเรกทอรีนี้มีซอร์สโค้ดสำหรับเซิร์ฟเวอร์
cd ~/dashboard-summarization/websocket-service/src
  1. ติดตั้งการอ้างอิงของบริการด้วย NPM
npm install
  1. เปลี่ยนชื่อไฟล์ looker-example.ini เป็น looker.ini
mv looker-example.ini looker.ini
  1. ภายในการอัปเดตไฟล์ looker.ini:
  2. client_id และ client_secret กับคีย์จาก Looker API
  3. base_url ที่มี URL ของอินสแตนซ์ Looker ในรูปแบบ https://<YOUR_LOOKER_URL_MINUS_PROTOCOL>:19999
  4. ข้อความระหว่างวงเล็บ (ส่วนหัวของส่วน) ที่มีโฮสต์ของ URL อินสแตนซ์ Looker

เช่น หากรหัสไคลเอ็นต์คือ ABC123 รหัสลับไคลเอ็นต์คือ XYZ789 และ URL ของอินสแตนซ์ Looker คือ https://mycompany.cloud.looker.com ไฟล์ looker.ini ของคุณจะมีลักษณะดังนี้

[mycompany]
base_url=https://mycompany.cloud.looker.com:19999
client_id=ABC123
client_secret=XYZ789
verify_ssl=true
  1. กำหนดรหัสโปรเจ็กต์ Google Cloud แล้ววางไว้ในตัวแปรสภาพแวดล้อม PROJECT แทนที่ YOUR_PROJECT_ID ด้วยรหัสโปรเจ็กต์
export PROJECT="YOUR_PROJECT_ID"
  1. Vertex AI มีโมเดล Gemini ในหลายภูมิภาคที่ระบุไว้ที่นี่ ระบุภูมิภาคที่แบ็กเอนด์ในเครื่องจะส่งและรับข้อมูลจากโมเดล Gemini ของ Vertex AI ตั้งค่าภูมิภาคในตัวแปรสภาพแวดล้อม REGION แทนที่ YOUR_VERTEX_REGION ด้วยภูมิภาคของคุณ เช่น us-central1
export REGION="YOUR_VERTEX_REGION"
  1. จากนั้นเริ่มบริการในพื้นที่
npm start
  1. บริการแบ็กเอนด์ Web Socket ในเครื่องของคุณจะทำงานบน http://localhost:5000

คุณได้ตั้งค่าบริการแบ็กเอนด์ของ WebSocket ในสภาพแวดล้อมในเครื่องเรียบร้อยแล้ว!!

บริการนี้ทำหน้าที่เป็นอินเทอร์เฟซระหว่างส่วนขยายส่วนหน้ากับโมเดล Gemini ของ Vertex AI บริการจะนำข้อมูลแดชบอร์ดและ LookML จากส่วนขยายส่วนหน้าของคุณซึ่งมีข้อมูลที่ค้นหาจาก Looker และแสดงโมเดล Gemini ของ Vertex AI จากนั้นบริการจะสตรีมคำตอบของ Gemini ไปยังส่วนขยายในหน้าเว็บเพื่อแสดงในแดชบอร์ด

นอกจากนี้ คุณยังเปลี่ยนแปลงซอร์สโค้ดของบริการแบ็กเอนด์ได้ด้วย คุณจะต้องหยุดกระบวนการให้บริการก่อน เปลี่ยนแปลงโค้ด แล้วเรียกใช้ npm start อีกครั้ง

3. ตั้งค่าฟรอนท์เอนด์สำหรับการพัฒนาในเครื่อง

คุณจะต้องตั้งค่าส่วนขยายฟรอนท์เอนด์เพื่อลองใช้และพัฒนาในเครื่องในส่วนนี้

  1. ในสภาพแวดล้อมในเครื่องเดียวกันจากขั้นตอนก่อนหน้า ให้ไปที่ไดเรกทอรีรูทของที่เก็บข้อมูลที่โคลน และติดตั้งข้อกำหนดของเซิร์ฟเวอร์หน้าเว็บสำหรับหน้าเว็บ
cd ~/dashboard-summarization
npm install
  1. เริ่มเซิร์ฟเวอร์การพัฒนาฟีดหน้าเว็บในเครื่อง
npm run develop
  1. ขณะนี้เซิร์ฟเวอร์ฟรอนท์เอนด์ในเครื่องของคุณใช้ JavaScript ของส่วนขยายที่ http://localhost:8080/bundle.js
  2. เปิดเว็บเบราว์เซอร์ แล้วเข้าสู่ระบบอินสแตนซ์ Looker
  3. ทําตามวิธีการเหล่านี้เพื่อตั้งค่าโปรเจ็กต์ LookML ว่าง ตั้งชื่อการสรุปหน้าแดชบอร์ดโปรเจ็กต์ ตอนนี้คุณควรเปิดโปรเจ็กต์ LookML ที่ไม่มีข้อมูลโดยอัตโนมัติใน Looker IDE ในแท็บเบราว์เซอร์ปัจจุบัน
  4. สร้างไฟล์ Manifest ของโปรเจ็กต์ในรูทของโปรเจ็กต์ LookML ไฟล์นี้จะเรียกว่า Manifest.lkml หากไม่ทราบวิธี ให้ทำตามวิธีการเพิ่มไฟล์ลงในโปรเจ็กต์ LookML
  5. แทนที่เนื้อหาของไฟล์ manifest.lkml ใหม่ด้วยเนื้อหาของ manifest.lkml ในไดเรกทอรีรูทของที่เก็บข้อมูลที่ปิด เลือกปุ่ม "บันทึกการเปลี่ยนแปลง" ที่มุมขวาบนเพื่อบันทึกการเปลี่ยนแปลงในไฟล์
  6. ในแท็บเบราว์เซอร์แยกต่างหาก ให้ไปที่รายการการเชื่อมต่อฐานข้อมูลในอินสแตนซ์ Looker ทำตามวิธีการเหล่านี้หากไม่ทราบวิธี
  7. เลือกชื่อการเชื่อมต่อฐานข้อมูล Looker 1 รายการ ไม่ว่าจะเลือกการเชื่อมต่อแบบใด หากคุณไม่มีสิทธิ์ดูการเชื่อมต่อฐานข้อมูล โปรดติดต่อผู้ดูแลระบบ Looker และขอชื่อการเชื่อมต่อฐานข้อมูล Looker 1 รายการ
  8. กลับไปที่แท็บเบราว์เซอร์ที่เปิดโปรเจ็กต์ LookML ใน Looker IDE สร้างไฟล์โมเดลในโปรเจ็กต์ LookML และตั้งชื่อการสรุปแดชบอร์ดไฟล์
  9. แทนที่เนื้อหาของไฟล์ Dashboard-summarization.model.lkml ของคุณด้วยตัวอย่างโค้ดด้านล่าง อย่าลืมแทนที่สตริงภายในเครื่องหมายคำพูดคู่ด้วยชื่อการเชื่อมต่อฐานข้อมูลที่เลือกไว้ในขั้นตอนที่ 9 บันทึกการเปลี่ยนแปลงในไฟล์
connection: "<YOUR_CONNECTION_NAME>"
  1. ตั้งค่าที่เก็บเพื่อบันทึกโปรเจ็กต์ เลือกปุ่ม "กําหนดค่า Git" ที่ด้านขวาบน เลือก "ตั้งค่าที่เก็บแบบ Bare แทน" เลือก "สร้างที่เก็บ"
  2. ตอนนี้คุณมีที่เก็บพื้นฐานเพื่อจัดเก็บไฟล์โปรเจ็กต์ LookML แล้ว กลับไปที่โปรเจ็กต์ใน IDE ของ Looker โดยเลือก "กลับไปที่โปรเจ็กต์" หรือย้อนกลับด้วยตนเอง
  3. เลือกปุ่ม "ตรวจสอบ LookML" ที่มุมขวาบน ปุ่มจะเปลี่ยนเป็น "คอมมิตการเปลี่ยนแปลงและพุช"
  4. เลือกปุ่ม "ส่งการเปลี่ยนแปลงและพุช" เพิ่มข้อความที่ต้องการ แล้วเลือก "ดำเนินการ"
  5. เลือก "ทำให้ใช้งานได้ในเวอร์ชันที่ใช้งานจริง" ที่มุมขวาบนของ Looker IDE ตอนนี้คุณได้เพิ่มส่วนขยายลงในอินสแตนซ์ Looker แล้ว
  6. ไปที่แดชบอร์ด Looker ที่คุณต้องการเพิ่มส่วนขยาย
  7. ทำตามวิธีการเพื่อเพิ่มการ์ดส่วนขยายลงในแดชบอร์ด เพิ่มส่วนขยายใหม่ลงในหน้าแดชบอร์ดเป็นไทล์
  8. ตรวจสอบว่าบริการแบ็กเอนด์ WebSocket ในพื้นที่ที่คุณตั้งค่าไว้ก่อนหน้านี้ทํางานอยู่

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

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

4. ทำให้แบ็กเอนด์ใช้งานได้ในเวอร์ชันที่ใช้งานจริง

ในส่วนนี้ คุณจะได้ตั้งค่าบริการแบ็กเอนด์ WebSocket เพื่อแสดงอินสแตนซ์ของส่วนขยายการสรุปแดชบอร์ดบนแดชบอร์ดใดๆ ก็ตามในอินสแตนซ์ Looker ซึ่งจะช่วยให้ผู้ใช้ Looker คนอื่นๆ ลองใช้ส่วนขยายในหน้าแดชบอร์ดของตนเองได้โดยไม่ต้องตั้งค่าบริการแบ็กเอนด์ของตนเอง ขั้นตอนเหล่านี้จะถือว่าคุณได้ติดตั้งใช้งานแบ็กเอนด์สําหรับการพัฒนาในเครื่องในสภาพแวดล้อมในเครื่องเดียวกันนี้เรียบร้อยแล้วก่อนหน้านี้

  1. ทำตามวิธีการเหล่านี้เพื่อตั้งค่าข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชันในสภาพแวดล้อมในเครื่องด้วยรหัสโปรเจ็กต์สำหรับขั้นตอนถัดไป
  2. สร้างที่เก็บ Artifact Registry สำหรับอิมเมจ Docker ของบริการแบ็กเอนด์ แทนที่ YOUR_REGION ด้วยภูมิภาคที่ต้องการให้ที่เก็บของคุณอยู่
gcloud artifacts repositories create dashboard-summarization-repo \
    --repository-format=docker \
    --location=YOUR_REGION \
  1. ไปที่ไดเรกทอรี src ของแบ็กเอนด์เว็บโซケットของที่เก็บข้อมูลที่โคลน
cd ~/dashboard-summarization/websocket-service/src
  1. แก้ไขไฟล์ cloudbuild.yaml และแทนที่อินสแตนซ์ทั้งหมดของ YOUR_REGION และ YOUR_PROJECT_ID ด้วยรหัสภูมิภาคและรหัสโปรเจ็กต์ของคุณ บันทึกการเปลี่ยนแปลงในไฟล์
  2. ส่งบิลด์โดยใช้ Cloud Build ที่จะสร้างอิมเมจ Docker ของบริการแบ็กเอนด์และพุชไปยังที่เก็บ Artifact Registry ที่คุณเพิ่งสร้างขึ้น ให้แทนที่ YOUR_REGION ด้วยภูมิภาคที่ต้องการใช้บริการ Cloud Build
gcloud builds submit --region=YOUR_REGION --config cloudbuild.yaml
  1. โปรดทราบว่า URL ของอิมเมจ Docker ที่สร้างขึ้นใหม่อยู่ที่ YOUR_REGION-docker.pkg.dev/YOUR_PROJECT_ID/dashboard-summarization-repo/websocketserviceimage:latest แทนที่ YOUR_PROJECT_ID ด้วยรหัสโปรเจ็กต์ แทนที่ YOUR_REGION ด้วยภูมิภาคจากขั้นตอนที่ 2 ที่คุณใช้สร้างที่เก็บ Artifact Registry
  2. ไปที่ไดเรกทอรี websocket-service/terraform ในที่เก็บที่โคลน
cd ~/dashboard-summarization/websocket-service/terraform
  1. ระบุตำแหน่งของ Google Cloud Run ที่คุณต้องการเรียกใช้บริการแบ็กเอนด์ของ WebSocket เลือกจากสถานที่เหล่านี้
  2. แก้ไขไฟล์ variables.tf และแทนที่ YOUR_PROJECT_ID และ YOUR_DOCKER_IMAGE_URL ด้วยค่าที่เหมาะสม ตรวจสอบขั้นตอนที่ 6 สําหรับ URL รูปภาพของ Docker แทนที่ YOUR_REGION ด้วยภูมิภาคที่คุณเลือกในขั้นตอนที่ 8 ก่อนหน้า บันทึกการเปลี่ยนแปลงในไฟล์
  3. ปรับใช้ทรัพยากรที่บริการแบ็กเอนด์ของคุณจะใช้โดยใช้ terraform
terraform init
terraform plan
terraform apply
  1. บันทึกปลายทาง URL ของ Cloud Run ที่ทำให้ใช้งานได้แล้วสำหรับส่วนถัดไป

ยินดีด้วย คุณได้ทำให้บริการแบ็กเอนด์ WebSocket ใช้งานได้แล้ว และตอนนี้บริการดังกล่าวกำลังทำงานบน Google Cloud Run ตอนนี้อินสแตนซ์ของส่วนขยายการสรุปแดชบอร์ด Looker จะสื่อสารกับบริการแบ็กเอนด์ได้แล้ว เราขอแนะนำให้คุณมีบริการแบ็กเอนด์ของ WebSocket อย่างน้อย 1 อินสแตนซ์ที่ทำงานบน Cloud Run เสมอ การเก็บสถานะของบริการแบ็กเอนด์จะรักษาความสมบูรณ์ของสตรีมมิงข้อมูลระหว่างบริการแบ็กเอนด์ WebSocket กับส่วนหน้าของส่วนขยาย และช่วยรักษาเซสชันของผู้ใช้แต่ละรายขณะใช้ส่วนขยาย

5. ทำให้ฟรอนท์เอนด์ใช้งานได้จริง

สำหรับส่วนสุดท้ายนี้ คุณจะต้องทำขั้นตอนสุดท้ายในการทำให้ฟรอนท์เอนด์ของส่วนขยายใช้งานได้สำหรับผู้ใช้ Looker ทุกคนในอินสแตนซ์ Looker ของคุณ

  1. ไปที่ไดเรกทอรีรูทของที่เก็บที่โคลน
cd ~/dashboard-summarization
  1. แก้ไข .env ไฟล์ แทนที่ YOUR_CLOUD_RUN_URL ด้วยปลายทาง URL ของ Cloud Run จากส่วนก่อนหน้า บันทึกการเปลี่ยนแปลงในไฟล์ ซึ่งจะกำหนดให้ฟรอนต์เอนด์ของส่วนขยายเวอร์ชันที่ใช้งานจริงไปยังบริการแบ็กเอนด์ WebSocket ที่ทำงานใน Cloud Run
  2. สร้าง JavaScript ของส่วนขยาย ระบบจะสร้างไดเรกทอรี dist โดยอัตโนมัติโดยมีไฟล์ bundle.js และไฟล์อื่นๆ ภายในไดเรกทอรี
npm run build
  1. เปิดเว็บเบราว์เซอร์ แล้วเข้าสู่ระบบอินสแตนซ์ Looker เปิดการนำทางด้านซ้ายแล้วเปิดปุ่มสลับ "โหมดการพัฒนา" ที่ด้านล่าง
  2. เมื่อการนำทางด้านซ้ายเปิดอยู่ ให้เลือก "Develop" จากนั้นเลื่อนลงมาแล้วเลือก "dashboard-summarization" ซึ่งเป็นโปรเจ็กต์ LookML ของส่วนขยาย ตอนนี้คุณควรอยู่ใน IDE ของ Looker สําหรับโปรเจ็กต์ LookML
  3. ลากและวางไฟล์ทั้งหมดในไดเรกทอรี dist ที่สร้างขึ้นก่อนหน้านี้ลงในไดเรกทอรีรูทของโปรเจ็กต์ใน &quot;File Browser&quot; ทำตามวิธีการเหล่านี้หากต้องการความช่วยเหลือเพิ่มเติม
  4. เปิดไฟล์ manifest.lkml ใน Looker IDE แทนที่บรรทัดในไฟล์
url: "http://localhost:8080/bundle.js"

กับ

file: "bundle.js"

แทนที่ YOUR_CLOUD_RUN_URL ด้วยปลายทาง URL ของ Cloud Run จากส่วนท้ายสุดของส่วนสุดท้าย บันทึกการเปลี่ยนแปลงลงในไฟล์

  1. เลือกปุ่ม "ตรวจสอบ LookML" ที่มุมขวาบน ปุ่มจะเปลี่ยนเป็น "ยืนยันการเปลี่ยนแปลงและพุช"
  2. เลือกปุ่ม "ส่งการเปลี่ยนแปลงและพุช" เพิ่มข้อความที่ต้องการ แล้วเลือก "ดำเนินการ"
  3. เลือก "ทำให้ใช้งานได้ในเวอร์ชันที่ใช้งานจริง" ที่มุมขวาบนของ Looker IDE

ยินดีด้วย คุณได้อนุญาตให้ผู้ใช้ Looker ทุกคนในอินสแตนซ์ Looker เพิ่มส่วนขยายการสรุปข้อมูลแดชบอร์ด Looker ลงในแดชบอร์ดของตนแล้ว ขณะที่ผู้ใช้ Looker คนอื่นๆ ใช้ส่วนขยายนี้ อินสแตนซ์ทั้งหมดของส่วนขยายจะเรียกใช้บริการแบ็กเอนด์ของ WebSocket ที่คุณทำให้ใช้งานได้และทำงานอยู่ใน Google Cloud Run

โปรดทราบว่าหากคุณทำการเปลี่ยนแปลงใดๆ กับซอร์สโค้ด คุณจะต้อง:

  1. คอมไพล์ JavaScript ของส่วนขยายอีกครั้ง
  2. แทนที่ไฟล์ที่สร้างขึ้นซึ่งคุณเพิ่มลงในโปรเจ็กต์ LookML ด้วยไฟล์ที่สร้างขึ้นใหม่จากไดเรกทอรี dist
  3. ตรวจสอบความถูกต้อง คอมมิต และทำให้การเปลี่ยนแปลงโปรเจ็กต์ LookML ใช้งานได้เป็นเวอร์ชันที่ใช้งานจริง

ลองใช้ส่วนขยายการสรุปแดชบอร์ดของ Looker เราขอแนะนําให้คุณมีส่วนร่วมในการพัฒนาส่วนขยายและช่วยให้ส่วนขยายตอบสนองความต้องการของชุมชน Looker ได้ดีขึ้น คุณสร้างคำขอพุลในที่เก็บได้

ดูส่วนที่ไม่บังคับต่อไปนี้เพื่อเปิดใช้การส่งออก Slack/Google Chat ปรับแต่งข้อมูลสรุปของ Gemini และขั้นตอนถัดไป รวมถึงตั้งค่าการบันทึก Gemini

6. [ไม่บังคับ] ตั้งค่าความสามารถในการส่งออก

เมื่อคุณและผู้ใช้ Looker ได้ลองใช้ส่วนขยายการสรุปข้อมูลแดชบอร์ด Looker แล้ว เราจะได้แชร์ข้อมูลเชิงลึกของส่วนขยายกับกลุ่มเป้าหมายจำนวนมากขึ้น ทำตามส่วนนี้เพื่อให้ส่วนขยายส่งข้อมูลสรุปและขั้นตอนถัดไปไปยัง Google Chat หรือ Slack คุณควรทำความคุ้นเคยกับการตั้งค่า OAuth เพื่อดำเนินการในส่วนนี้ของ Codelab

เปิดใช้การส่งออก Google Chat

  1. เปิดใช้ Chat API ในโปรเจ็กต์ Google Cloud
  2. ทำตามขั้นตอนที่ 1 ของวิธีการตั้งค่า OAuth ใน Google Workspace สำหรับขอบเขต คุณต้องใส่ spaces.messages.create
  3. ทำตามขั้นตอนที่ 2 ของวิธีการตั้งค่า OAuth ใน Google Workspace เพิ่ม URL ของอินสแตนซ์ Looker เป็น URI ในส่วน "ต้นทาง JavaScript ที่ได้รับอนุญาต" เช่น https://mycompany.cloud.looker.com จดรหัสไคลเอ็นต์ที่สร้างขึ้น
  4. ระบุรหัสของพื้นที่ใน Google Chat ที่ต้องการส่งออกข้อมูลสรุป หากไม่แน่ใจว่าต้องทำอย่างไร ให้ทำตามคำแนะนำเหล่านี้
  5. แก้ไขไฟล์ env แทนที่ YOUR_GOOGLE_CLIENT_ID ด้วยรหัสลูกค้า แทนที่ YOUR_GOOGLE_SPACE_ID ด้วยรหัสพื้นที่ใน Google Chat บันทึกการเปลี่ยนแปลงไฟล์ การดำเนินการนี้จะกำหนดค่าฟรอนท์เอนด์ของส่วนขยายให้ส่งข้อมูลเชิงลึกไปยังพื้นที่ใน Google Chat ที่คุณต้องการได้
  6. หากคุณเรียกใช้ส่วนหน้าของส่วนขยายในเครื่อง ให้สร้างส่วนขยายอีกครั้ง หรือหากคุณกำลังทำให้ส่วนหน้าของส่วนขยายใช้งานได้ ให้ทำให้ส่วนหน้าของส่วนขยายใช้งานได้อีกครั้ง

เปิดใช้การส่งออก Slack

  1. ทำตามขั้นตอนที่ 1 และ 2 ของเอกสารสำหรับนักพัฒนาซอฟต์แวร์อย่างเป็นทางการของ Slack เพื่อตั้งค่าแอปพลิเคชัน OAuth สำหรับขอบเขต คุณต้องใส่ chat:write และ channels:read จดรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์ที่สร้างขึ้น
  2. กำหนดรหัสของช่อง Slack ที่ต้องการส่งออกข้อมูลสรุปไปให้
  3. แก้ไขไฟล์ env แทนที่ YOUR_SLACK_CLIENT_ID ด้วยรหัสลูกค้า แทนที่ YOUR_SLACK_CLIENT_SECRET ด้วยรหัสลับไคลเอ็นต์ แทนที่ YOUR_SLACK_CHANNEL_ID ด้วยรหัสช่อง บันทึกการเปลี่ยนแปลงในไฟล์ ซึ่งจะกําหนดค่าส่วนหน้าของส่วนขยายเพื่อให้ส่งข้อมูลเชิงลึกไปยังแชแนล Slack ที่ต้องการได้
  4. หากคุณเรียกใช้ส่วนหน้าของส่วนขยายในเครื่อง ให้สร้างส่วนขยายอีกครั้ง หรือหากคุณกำลังทำให้ฟรอนท์เอนด์ของส่วนขยายใช้งานได้ ให้ใช้ฟรอนท์เอนด์ของส่วนขยายอีกครั้ง

ตอนนี้ส่วนขยายจะส่งออกข้อมูลสรุปไปยัง Slack หรือ Google Chat ได้โดยตรง โปรดทราบว่าส่วนขยายจะส่งสรุปไปยังพื้นที่ใน Google Chat หรือช่อง Slack ที่ฮาร์ดโค้ดไว้เท่านั้น คุณสามารถเพิ่มขอบเขต OAuth เพิ่มเติมและแก้ไขโค้ดเพื่อดึงข้อมูลและแสดงรายการพื้นที่ทำงานและแชแนลที่จะส่งสรุปได้

7. [ไม่บังคับ] ปรับแต่งสรุปและขั้นตอนถัดไป

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

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

ยิ่งคุณเพิ่มข้อมูลลงในแดชบอร์ดมากเท่าใด ข้อมูลสรุปและขั้นตอนถัดไปของส่วนขยายก็จะยิ่งดีขึ้นเท่านั้น คุณสามารถแก้ไขโค้ดให้รวมข้อมูลเมตาของหน้าแดชบอร์ดเพิ่มเติมในพรอมต์ไปยังรูปแบบ Gemini ได้

8. [ไม่บังคับ] ตั้งค่าการบันทึกโมเดล Gemini

ทุกครั้งที่ผู้ใช้บอกให้ส่วนขยายสร้างข้อมูลสรุปสําหรับหน้าแดชบอร์ด ส่วนขยายจะเรียกใช้ Vertex AI สําหรับคําค้นหาแต่ละรายการในหน้าแดชบอร์ด รวมถึงการเรียกใช้ครั้งสุดท้ายเพื่อจัดรูปแบบข้อมูลสรุปทั้งหมด ติดตามส่วนนี้เพื่อบันทึกการเรียกใช้ Vertex AI ที่คุณใช้เพื่อประมาณและตรวจสอบค่าใช้จ่ายและการเข้าชมของ Vertex AI คุณควรทำตามคำแนะนำเหล่านี้เฉพาะในกรณีที่ได้ทำให้บริการแบ็กเอนด์ของ WebSocket ใช้งานได้แล้ว

  1. ระบุตำแหน่ง Cloud Run ของบริการแบ็กเอนด์ WebSocket ที่ติดตั้งใช้งาน
  2. ทำตามวิธีการเหล่านี้เพื่อตั้งค่าซิงก์การบันทึกที่จะกำหนดเส้นทางบันทึกไปยัง Big Query ปลายทางของซิงก์ควรเป็น BigQuery ตั้งค่าตัวกรองการรวมด้วยตัวอย่างโค้ดต่อไปนี้ด้วย YOUR_CLOUD_RUN_LOCATION ที่แทนที่ด้วยตำแหน่ง Cloud Run ของขั้นตอนก่อนหน้า
resource.type = "cloud_run_revision"
resource.labels.service_name = "websocket-service"
resource.labels.location = "YOUR_CLOUD_RUN_LOCATION"
 severity>=DEFAULT
jsonPayload.component="dashboard-summarization-logs"

9. ยินดีด้วย

คุณได้ตั้งค่าส่วนขยายการสรุปแดชบอร์ด Looker ไว้ในเครื่องเพื่อให้คุณลองใช้ นอกจากนี้ คุณยังทำให้ส่วนขยายใช้งานได้กับ Google Cloud เพื่อให้ผู้ใช้คนอื่นๆ ลองใช้งานได้เช่นกัน ตอนนี้คุณและผู้ใช้คนอื่นๆ จะสามารถเข้าถึงข้อมูลสรุปที่ขับเคลื่อนโดย Gemini และขั้นตอนถัดไปจากภายในแดชบอร์ดได้เลย

10. ขั้นตอนถัดไป