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

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

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

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

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

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

• อินสแตนซ์ Looker ไม่ว่าจะผ่านใบอนุญาต Looker Original, รุ่นทดลองใช้ Looker Core ที่ใช้งานอยู่ หรือใบอนุญาต Looker Core ที่ใช้งานอยู่
• สิทธิ์ develop และ deploy ในอินสแตนซ์ Looker
• สิทธิ์ในการแก้ไขแดชบอร์ดที่คุณต้องการลองใช้กับส่วนขยาย
• คีย์ API ของ Looker จากอินสแตนซ์ 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. โคลนที่เก็บของส่วนขยายไปยังไดเรกทอรีหน้าแรกในเครื่อง แล้วไปที่ไดเรกทอรีรากของที่เก็บ สำหรับวัตถุประสงค์ของ Codelab นี้ ตัวอย่างโค้ดทั้งหมดจะถือว่าที่เก็บที่โคลนอยู่ในไดเรกทอรีหน้าแรกในเครื่อง

cd ~
git clone [e-mail]:looker-open-source/dashboard-summarization.git

3. ไปที่ไดเรกทอรีรากของที่เก็บที่โคลนมา แล้วเปลี่ยนชื่อไฟล์ .env.example เป็น .env เพื่อให้คุณตั้งค่าตัวแปรสภาพแวดล้อมในส่วนต่อๆ ไปของโค้ดแล็บนี้ได้

cd ~/dashboard-summarization
mv .env.example .env

4. ไปที่ไดเรกทอรี src ของแบ็กเอนด์ WebSocket ของที่เก็บที่โคลน ไดเรกทอรีนี้มีซอร์สโค้ดสำหรับเซิร์ฟเวอร์

cd ~/dashboard-summarization/websocket-service/src   

5. ติดตั้งทรัพยากร Dependency ของบริการด้วย NPM

npm install  

6. เปลี่ยนชื่อไฟล์ looker-example.ini เป็น looker.ini

mv looker-example.ini looker.ini  

7. อัปเดตภายในไฟล์ looker.ini ดังนี้
8. client_id และ client_secret ด้วยข้อมูลจากคีย์ Looker API ของคุณ
9. base_url พร้อม URL ของอินสแตนซ์ Looker ในรูปแบบ https://<YOUR_LOOKER_URL_MINUS_PROTOCOL>:19999
10. ข้อความระหว่างวงเล็บ (ส่วนหัว) ที่มีโฮสต์ของ 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 

8. ระบุรหัสโปรเจ็กต์ Google Cloud และตั้งค่าในPROJECTตัวแปรสภาพแวดล้อม แทนที่ YOUR_PROJECT_ID ด้วยรหัสโปรเจ็กต์

export PROJECT="YOUR_PROJECT_ID"

9. Vertex AI มีโมเดล Gemini ในหลายภูมิภาคตามที่ระบุไว้ที่นี่ กำหนดภูมิภาคที่แบ็กเอนด์ในพื้นที่จะส่งและรับข้อมูลจากโมเดล Gemini ของ Vertex AI ตั้งค่าภูมิภาคในตัวแปรสภาพแวดล้อม REGION แทนที่ YOUR_VERTEX_REGION ด้วยภูมิภาคของคุณ เช่น us-central1

export REGION="YOUR_VERTEX_REGION"

10. ตอนนี้ให้เริ่มบริการในพื้นที่

npm start

11. บริการแบ็กเอนด์ของ Websocket ในเครื่องจะทำงานบน http://localhost:5000

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

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

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

หมายเหตุ: บริการแบ็กเอนด์ WebSocket ในเครื่องจะโทรไปยัง Vertex AI

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

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

1. ในสภาพแวดล้อมภายในเครื่องเดียวกันจากขั้นตอนก่อนหน้า ให้ไปที่ไดเรกทอรีรากของที่เก็บที่โคลนมา แล้วติดตั้งทรัพยากร Dependency ของเซิร์ฟเวอร์ฟรอนท์เอนด์สำหรับฟรอนท์เอนด์

cd ~/dashboard-summarization
npm install

2. เริ่มเซิร์ฟเวอร์การพัฒนาส่วนหน้าในเครื่อง

npm run develop

3. ตอนนี้เซิร์ฟเวอร์ส่วนหน้าในเครื่องของคุณกำลังแสดง JavaScript ของส่วนขยายที่ http://localhost:8080/bundle.js
4. เปิดเว็บเบราว์เซอร์และเข้าสู่ระบบอินสแตนซ์ Looker
5. ทำตามวิธีการเหล่านี้เพื่อตั้งค่าโปรเจ็กต์ LookML ที่ว่างเปล่า ตั้งชื่อแดชบอร์ดการสรุปข้อมูลโปรเจ็กต์ ตอนนี้คุณควรมีโปรเจ็กต์ LookML ว่างเปล่าที่เปิดโดยอัตโนมัติใน Looker IDE ในแท็บเบราว์เซอร์ปัจจุบัน
6. สร้างไฟล์ Manifest ของโปรเจ็กต์ในรูทของโปรเจ็กต์ LookML ไฟล์จะมีชื่อว่า manifest.lkml หากไม่ทราบวิธี ให้ทำตามวิธีการเพิ่มไฟล์ลงในโปรเจ็กต์ LookML
7. แทนที่เนื้อหาของไฟล์ manifest.lkml ใหม่ด้วยเนื้อหาของ manifest.lkml ในไดเรกทอรีรากของที่เก็บที่ปิด เลือกปุ่ม "บันทึกการเปลี่ยนแปลง" ที่มุมขวาบนเพื่อบันทึกการเปลี่ยนแปลงลงในไฟล์
8. ในแท็บเบราว์เซอร์แยกต่างหาก ให้ไปที่รายการการเชื่อมต่อฐานข้อมูลในอินสแตนซ์ Looker ทำตามวิธีการเหล่านี้หากไม่ทราบวิธี
9. เลือกชื่อการเชื่อมต่อฐานข้อมูล Looker อย่างน้อย 1 รายการ ไม่ว่าคุณจะเลือกการเชื่อมต่อใดก็ตาม หากไม่มีสิทธิ์ดูการเชื่อมต่อฐานข้อมูล โปรดติดต่อผู้ดูแลระบบ Looker และขอชื่อการเชื่อมต่อฐานข้อมูล Looker อย่างน้อย 1 รายการ
10. กลับไปที่แท็บเบราว์เซอร์ที่เปิดโปรเจ็กต์ LookML ใน Looker IDE สร้างไฟล์โมเดลในโปรเจ็กต์ LookML และตั้งชื่อไฟล์เป็น dashboard-summarization
11. แทนที่เนื้อหาของไฟล์ dashboard-summarization.model.lkml ด้วยตัวอย่างโค้ดด้านล่าง อย่าลืมแทนที่สตริงภายในเครื่องหมายคำพูดคู่ด้วยชื่อการเชื่อมต่อฐานข้อมูลที่คุณเลือกในขั้นตอนที่ 9 บันทึกการเปลี่ยนแปลงในไฟล์

connection: "<YOUR_CONNECTION_NAME>"

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

12. ตั้งค่าที่เก็บเพื่อบันทึกโปรเจ็กต์ เลือกปุ่ม "กำหนดค่า Git" ที่ด้านขวาบน เลือก "ตั้งค่าที่เก็บเปล่าแทน" เลือก "สร้างที่เก็บ"
13. ตอนนี้คุณมีที่เก็บข้อมูลเปล่าพื้นฐานสำหรับจัดเก็บไฟล์โปรเจ็กต์ LookML แล้ว กลับไปที่โปรเจ็กต์ใน Looker IDE โดยเลือก "กลับไปที่โปรเจ็กต์" หรือกลับไปด้วยตนเอง
14. เลือกปุ่ม "ตรวจสอบ LookML" ที่มุมขวาบน ปุ่มจะเปลี่ยนเป็น "คอมมิตการเปลี่ยนแปลงและพุช"
15. เลือกปุ่ม "ยืนยันการเปลี่ยนแปลงและพุช" เพิ่มข้อความที่ต้องการ แล้วเลือก "คอมมิต"
16. เลือก "Deploy to Production" ที่มุมขวาบนของ Looker IDE ตอนนี้คุณได้เพิ่มส่วนขยายลงในอินสแตนซ์ Looker แล้ว
17. ไปที่แดชบอร์ด Looker ที่ต้องการเพิ่มส่วนขยาย
18. ทำตามวิธีการเพื่อเพิ่มการ์ดส่วนขยายลงในแดชบอร์ด เพิ่มส่วนขยายใหม่ลงในแดชบอร์ดเป็นการ์ด
19. ตรวจสอบว่าบริการแบ็กเอนด์ WebSocket ในเครื่องที่คุณตั้งค่าไว้ก่อนหน้านี้กำลังทำงานอยู่

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

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

หมายเหตุ: คุณทำตามส่วนที่ไม่บังคับที่ท้าย Codelab นี้เพื่อเปิดใช้ส่วนขยายให้ส่งออกข้อมูลสรุปและขั้นตอนถัดไปไปยัง Slack หรือ Gchat ได้

หมายเหตุ: คุณยังปรับปรุงความแม่นยำ รายละเอียด และความลึกของข้อมูลสรุปและขั้นตอนถัดไปของส่วนขยายได้ด้วยส่วนที่ไม่บังคับที่ท้าย Codelab นี้

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

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

1. ทำตามวิธีการเหล่านี้เพื่อตั้งค่าข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชันในสภาพแวดล้อมในเครื่องด้วยรหัสโปรเจ็กต์สำหรับขั้นตอนถัดไป
2. สร้างที่เก็บ Artifact Registry สำหรับอิมเมจ Docker ของบริการแบ็กเอนด์ แทนที่ YOUR_REGION ด้วยภูมิภาคที่ต้องการให้ที่เก็บอยู่

gcloud artifacts repositories create dashboard-summarization-repo \
    --repository-format=docker \
    --location=YOUR_REGION \

3. ไปที่ไดเรกทอรี src ของแบ็กเอนด์เว็บซ็อกเก็ตของที่เก็บที่โคลน

cd ~/dashboard-summarization/websocket-service/src

4. แก้ไขไฟล์ cloudbuild.yaml แล้วแทนที่อินสแตนซ์ทั้งหมดของ YOUR_REGION และ YOUR_PROJECT_ID ด้วยรหัสภูมิภาคและรหัสโปรเจ็กต์ บันทึกการเปลี่ยนแปลงในไฟล์
5. ส่งบิลด์โดยใช้ Cloud Build ซึ่งจะสร้างอิมเมจ Docker ของบริการแบ็กเอนด์และพุชไปยังที่เก็บ Artifact Registry ที่คุณเพิ่งสร้าง แทนที่ YOUR_REGION ด้วยภูมิภาคที่ต้องการใช้บริการ Cloud Build

gcloud builds submit --region=YOUR_REGION --config cloudbuild.yaml

6. โปรดทราบว่า URL ของอิมเมจ Docker ที่สร้างขึ้นใหม่จะอยู่ที่ YOUR_REGION-docker.pkg.dev/YOUR_PROJECT_ID/dashboard-summarization-repo/websocketserviceimage:latest แทนที่ YOUR_PROJECT_ID ด้วยรหัสโปรเจ็กต์ แทนที่ YOUR_REGION ด้วยภูมิภาคจากขั้นตอนที่ 2 ที่คุณใช้สร้างที่เก็บ Artifact Registry
7. ไปที่ไดเรกทอรี websocket-service/terraform ในที่เก็บที่โคลน

cd ~/dashboard-summarization/websocket-service/terraform

8. พิจารณาตำแหน่งของ Google Cloud Run ที่คุณต้องการเรียกใช้บริการแบ็กเอนด์ WebSocket เลือกจากสถานที่ต่อไปนี้
9. แก้ไขไฟล์ variables.tf และแทนที่ YOUR_PROJECT_ID และ YOUR_DOCKER_IMAGE_URL ด้วยค่าที่เหมาะสม ดู URL ของอิมเมจ Docker ได้ที่ขั้นตอนที่ 6 แทนที่ YOUR_REGION ด้วยภูมิภาคที่คุณเลือกในขั้นตอนที่ 8 ก่อนหน้า บันทึกการเปลี่ยนแปลงในไฟล์
10. ทำให้ทรัพยากรที่บริการแบ็กเอนด์จะใช้ใช้งานได้โดยใช้ Terraform

terraform init
terraform plan
terraform apply

11. บันทึกปลายทาง URL ของ Cloud Run ที่ทำให้ใช้งานได้สำหรับส่วนถัดไป

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

หมายเหตุ: บริการแบ็กเอนด์ของ WebSocket ที่ติดตั้งใช้งานใน Cloud Run ในโค้ดแล็บนี้จะเปิดเผยต่อสาธารณะ

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

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

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

1. ไปที่ไดเรกทอรีรากของที่เก็บที่โคลน

cd ~/dashboard-summarization

2. แก้ไขenv ไฟล์ แทนที่ YOUR_CLOUD_RUN_URL ด้วยปลายทาง URL ของ Cloud Run จากส่วนก่อนหน้า บันทึกการเปลี่ยนแปลงไฟล์ ซึ่งจะชี้ส่วนหน้าของส่วนขยายที่ใช้งานจริงไปยังบริการแบ็กเอนด์ของ Websocket ที่ทำงานใน Cloud Run
3. สร้าง JavaScript ของส่วนขยาย ระบบจะสร้างไดเรกทอรี dist โดยอัตโนมัติพร้อมกับไฟล์ bundle.js และไฟล์อื่นๆ ในไดเรกทอรี

npm run build

4. เปิดเว็บเบราว์เซอร์และเข้าสู่ระบบอินสแตนซ์ Looker เปิดการนำทางด้านซ้ายและเปิดปุ่มสลับ "โหมดนักพัฒนา" ที่ด้านล่าง
5. เมื่อเปิดการนำทางด้านซ้าย ให้เลือก "พัฒนา" จากนั้นเลื่อนลงแล้วเลือก "dashboard-summarization" ซึ่งเป็นโปรเจ็กต์ LookML ของส่วนขยาย ตอนนี้คุณควรอยู่ใน Looker IDE สำหรับโปรเจ็กต์ LookML
6. ลากและวางไฟล์ทั้งหมดในไดเรกทอรี dist ที่สร้างขึ้นก่อนหน้านี้ลงในไดเรกทอรีรากของโปรเจ็กต์ใน "โปรแกรมเรียกดูไฟล์" โปรดทำตามวิธีการเหล่านี้หากต้องการความช่วยเหลือเพิ่มเติม
7. เปิดไฟล์ manifest.lkml ใน Looker IDE ในไฟล์ ให้แทนที่บรรทัด

url: "http://localhost:8080/bundle.js"

กับ

file: "bundle.js"

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

8. เลือกปุ่ม "ตรวจสอบ LookML" ที่มุมขวาบน ปุ่มจะเปลี่ยนเป็น "คอมมิตการเปลี่ยนแปลงและพุช"
9. เลือกปุ่ม "ยืนยันการเปลี่ยนแปลงและพุช" เพิ่มข้อความที่ต้องการ แล้วเลือก "คอมมิต"
10. เลือก "Deploy to Production" ที่มุมขวาบนของ Looker IDE

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

โปรดทราบว่าหากคุณเปลี่ยนแปลงซอร์สโค้ด คุณต้องดำเนินการต่อไปนี้

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

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

ดูส่วนต่อไปนี้ (ไม่บังคับ) เพื่อเปิดใช้การส่งออก 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. กำหนดรหัสของพื้นที่ใน Chat ที่ต้องการส่งออกข้อมูลสรุป หากไม่แน่ใจว่าต้องทำอย่างไร ให้ทำตามวิธีการเหล่านี้
5. แก้ไขenv ไฟล์ แทนที่ YOUR_GOOGLE_CLIENT_ID ด้วยรหัสไคลเอ็นต์ แทนที่ YOUR_GOOGLE_SPACE_ID ด้วยรหัสพื้นที่ใน Chat บันทึกการเปลี่ยนแปลงไฟล์ ซึ่งจะกำหนดค่าส่วนหน้าของส่วนขยายให้ส่งข้อมูลเชิงลึกไปยังพื้นที่ใน 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 ได้โดยตรง โปรดทราบว่าส่วนขยายจะส่งข้อมูลสรุปได้เฉพาะไปยังพื้นที่ใน Chat ของ Google หรือช่อง Slack ที่มีการฮาร์ดโค้ดไว้เท่านั้น คุณเพิ่มขอบเขต OAuth เพิ่มเติมและแก้ไขโค้ดเพื่อดึงข้อมูลและแสดงรายการพื้นที่ทำงานและช่องที่จะส่งข้อมูลสรุปได้

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

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

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

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

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

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

1. กำหนดตำแหน่ง Cloud Run ของบริการแบ็กเอนด์ WebSocket ที่ทำให้ใช้งานได้
2. ทำตามวิธีการเหล่านี้เพื่อตั้งค่าซิงก์บันทึกที่จะกำหนดเส้นทางบันทึกไปยัง BigQuery ปลายทางของ Sink ควรเป็น 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. ขั้นตอนถัดไป

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