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

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

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ มิ.ย. 8, 2024
account_circleเขียนโดย Jeremy Chang

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

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

ส่วนขยายการสรุปแดชบอร์ด 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. ติดตั้งโหนดเวอร์ชัน 18 ขึ้นไปที่ติดตั้งในสภาพแวดล้อมในเครื่องของคุณ ทำตามคำแนะนำเหล่านี้เพื่อติดตั้งโหนด
  2. โคลนที่เก็บของส่วนขยายไปยังไดเรกทอรีหน้าแรกในเครื่องและไปยังไดเรกทอรีรูทของที่เก็บ สำหรับ Codelab นี้ ตัวอย่างโค้ดทั้งหมดจะถือว่าที่เก็บที่โคลนอยู่ในไดเรกทอรีหน้าแรกในเครื่อง
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. ในสภาพแวดล้อมภายในเดียวกันจากขั้นตอนก่อนหน้า ให้ไปที่ไดเรกทอรีรากของที่เก็บที่โคลน และติดตั้งทรัพยากร Dependency ของเซิร์ฟเวอร์ฟรอนท์เอนด์สำหรับฟรอนท์เอนด์
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" ที่ด้านขวาบน เลือก "ตั้งค่าที่เก็บเปล่าแทน" เลือก "สร้างที่เก็บ"
  2. ตอนนี้คุณมีที่เก็บพื้นฐานเพื่อจัดเก็บไฟล์โปรเจ็กต์ LookML แล้ว กลับไปที่โปรเจ็กต์ใน IDE ของ Looker โดยเลือก "กลับไปที่โปรเจ็กต์" หรือย้อนกลับด้วยตัวเอง
  3. เลือก "ตรวจสอบความถูกต้องของ LookML" ที่มุมบนขวา ปุ่มจะเปลี่ยนเป็น "คอมมิตการเปลี่ยนแปลงและพุช"
  4. เลือก "ปุ่มเปลี่ยนแปลงและพุช" เพิ่มข้อความที่ต้องการแล้วเลือก "คอมมิต"
  5. เลือก "ติดตั้งใช้งานเป็นเวอร์ชันที่ใช้งานจริง" ที่มุมขวาบนของ IDE ของ Looker ตอนนี้คุณได้เพิ่มส่วนขยายลงในอินสแตนซ์ Looker แล้ว
  6. ไปที่แดชบอร์ด Looker ที่คุณต้องการเพิ่มส่วนขยาย
  7. ทำตามวิธีการเพื่อเพิ่มการ์ดส่วนขยายไปยังแดชบอร์ด เพิ่มส่วนขยายใหม่ลงในหน้าแดชบอร์ดเป็นไทล์
  8. ตรวจสอบว่าบริการแบ็กเอนด์ Web Socket ในเครื่องที่คุณตั้งค่าไว้ก่อนหน้านี้ทำงานอยู่

ยินดีด้วย คุณลองใช้ส่วนขยายการสรุปข้อมูลแดชบอร์ด 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 ของแบ็กเอนด์ Web Socket ของที่เก็บที่โคลน
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. แก้ไขไฟล์variable.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 ที่สร้างไว้ก่อนหน้านี้ลงในไดเรกทอรีรากของโปรเจ็กต์ใน "โปรแกรมเรียกดูไฟล์" ทำตามวิธีการเหล่านี้หากต้องการความช่วยเหลือเพิ่มเติม
  4. เปิดไฟล์ manifest.lkml ภายใน IDE ของ Looker แทนที่บรรทัดภายในไฟล์
url: "http://localhost:8080/bundle.js"

กับ

file: "bundle.js"

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

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

ยินดีด้วย คุณได้อนุญาตให้ผู้ใช้ 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 หรือช่อง 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 ขั้นตอนถัดไป

bug_report รายงานความผิดพลาด