הטמעה של Looker עם ניתוח נתוני שיחות

1. לפני שמתחילים

ב-Codelab הזה תלמדו איך לשלב לוח בקרה מוטמע של Looker עם צ'אט מבוסס-AI לניתוח נתונים שיאפשר לכם ליהנות מחוויית נתונים מאוחדת שמבוססת על שפה טבעית. כדי להפיק את הערך המרבי, מומלץ להכיר את הטמעת Looker, את ניתוח הנתונים השיחתי, את JavaScript ואת React.

מה תלמדו

אחרי שתעברו על ה-codelab הזה, תלמדו:

• איך מגדירים באופן מקומי את אפליקציית ההפניה Looker Embed
• איך יוצרים רכיב צ'אט ב-React באמצעות ספריית הרכיבים של Looker
• איך שולחים את המסנן של לוח הבקרה המוטמע כהקשר לניתוח שיחות
• איך מאפשרים לצ'אט מבוסס-ניתוח שיחות לשלוט במסננים של לוח הבקרה המוטמע

מה תצטרכו

כדי להשלים את ה-codelab הזה, תצטרכו:

• מופע Looker עם בלוק Looker של נתונים דמוגרפיים של ASC מותקן והטמעה של SSO מופעלת
• גישה לממשקי API ולמפתחים במופע Looker
• סביבה מקומית עם Node v18,‏ yarn,‏ Git ו-gcloud מותקנים
• פרויקט בענן עם התפקידים הבאים ב-IAM שמוגדרים בחשבון המשתמש:
• roles/bigquery.dataViewer צפייה בנתוני BigQuery
• roles/bigquery.user BigQuery User
• roles/looker.instanceUser משתמש במופע Looker

2. הגדרת ניתוח נתוני השיחות

בואו נגדיר את סוכן הנתונים של Analytics לשיחות, שבו הצ'אט בלוח הבקרה המוטמע ישתמש כדי לענות על שאלות בשפה טבעית.

אימות באמצעות gcloud

1. מבצעים אימות באמצעות חשבון המשתמש בסביבה המקומית:

gcloud auth login

2. מגדירים את פרטי הכניסה של האפליקציה (ADC) ואת פרויקט החיוב ב-gcloud:

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

הפעלת ממשקי API של ניתוח שיחות

3. מפעילים ממשקי API של פרויקט בענן. צריך להחליף את YOUR_PROJECT_ID במזהה הפרויקט ב-Google Cloud:

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

יצירת סוכן נתונים

4. פותחים את Google Colab.
5. ב-Google Colab, טוענים את ה-notebook הזה ממאגר ההפניות של Looker Embed.
6. מריצים את כל השלבים ב-notebook. תצטרכו את מזהה הפרויקט בענן ואת ה-URI של מופע Looker עם לוכסן בסוף, כמו "https://my.looker.app/". בסוף ה-notebook אמורה להתקבל תוצאה של הצלחה.

עכשיו יש לכם סוכן נתונים לניתוח שיחות שמוכן לקבל הודעות בצ'אט, לשלוח שאילתות לניתוחים ב-Looker בלוח הבקרה המוטמע של Looker ולהחזיר תוצאות והדמיות.

3. הגדרת Looker Embed Reference

בואו נגדיר את אפליקציית ההפניה Looker Embed בסביבה המקומית שלכם כדי שתוכלו לנסות את הדוגמה לשילוב של צ'אט עם ניתוח נתונים שימושיים עם לוח בקרה מוטמע של Looker.

שכפול המאגר

1. משכפלים את מאגר ה-GitHub לסביבה המקומית. דוגמה לפקודה:

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. פותחים מעטפת, טרמינל, מסוף או כרטיסייה חדשים. מנווטים לספרייה Backend-Node ומתקינים את התלויות. חשוב להשאיר את מעטפת הפקודות או את הטרמינל הקודמים עם שרת הקצה הקדמי פועלים.

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 הוא מזהה הפרויקט שלכם ב-Cloud.
• ‫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) ובבקשות ל-proxy לנקודות הקצה של ניתוח נתונים שיחותי.

4. רוצה לנסות את הדוגמה?

עכשיו ננסה את אפליקציית האינטרנט שפועלת באופן מקומי בסביבה שלכם.

איך מתחילים שיחות חדשות

1. פותחים את הכתובת https://localhost:3001 בדפדפן שבחרתם.
2. בסרגל הניווט הראשי שמימין, עוברים לדף לוח בקרה מוטמע עם צ'אט.
3. אחרי שרכיב הצ'אט בצד שמאל נטען, מקלידים: "שלום, מי אתה?"
4. שימו לב לתשובה.

האפליקציה יצרה באופן אוטומטי אובייקט שיחה של ניתוח נתונים של שיחות כדי לעקוב אחרי היסטוריית צ'אט, וטוענת את ממשק הצ'אט. כששאלתם שאלה בממשק הצ'אט, הקצה הקדמי שלח הודעת משתמש לשרת הקצה האחורי המקומי של Node. לאחר מכן, הוא העביר את הבקשה ואת התגובה מנקודת הקצה של הצ'אט של ניתוח נתונים שיחותי.

סינון לוח הבקרה המוטמע

עכשיו כדאי להכיר את לוח הבקרה המוטמע ולנסות להשתמש בו.

5. גוללים במרכז הבקרה המוטמע. הדוח כולל נתוני מפקד אוכלוסין במגוון מאפיינים ומדדים.
6. אפשר לסנן את לוח הבקרה לפי מדינה ומחוז בפינה הימנית העליונה של לוח הבקרה. מגדירים את המסנן במסנן של לוח הבקרה לערך Texas. לאחר מכן לוחצים על לחצן החץ המעגלי המודגש בכחול כדי להפעיל מחדש את לוח הבקרה.
7. שימו לב שכל נתוני הוויזואליזציות מסוננים לפי המדינה טקסס.

איך שואלים שאלה עם הקשר של לוח הבקרה

אחרי שסיננו את מרכז הבקרה, נמשיך לבדוק את הנתונים שבו.

8. שולחים בצ'אט את ההנחיה 'תגיד לי מהן 5 המדינות עם שכר הדירה הכי נמוך'.
9. ההנחיה שלכם ל-Conversational Analytics כוללת עכשיו את המילים הנוספות 'Filter on dimension 'state.state_name' being Texas'.
10. שימו לב שהשאילתה והנתונים בתשובה מסוננים לפי המדינה טקסס.
11. בנוסף, אחרי שהוחזרו תוצאות הנתונים, לוח הבקרה המוטמע הופעל מחדש עם המסנן County שהוגדר ל-5 המחוזות שהוגדרו בנתוני התוצאה.

עכשיו אפשר להמשיך לבדוק את נתוני המפקד, אחרי שסיננו בשבילכם את 5 המחוזות.

מעולה! הגדרתם וניסיתם דוגמה פשוטה של לוח בקרה מוטמע שמשולב עם צ'אט של ניתוח נתונים מבוסס-שיחה.

5. יצירת רכיב צ'אט

כדי להבין מה קורה מאחורי הקלעים, נתחיל בבדיקת הרכיב Chat. אנחנו מניחים שאתם יודעים איך להטמיע לוח בקרה של Looker באמצעות Looker Embed SDK.

שימוש בספריית הרכיבים של Looker

1. פותחים את קובץ הרכיב Chat בנתיב Frontend/src/components/EmbedChat/components/chat.js בסביבת הפיתוח המשולבת (IDE) המועדפת או במסוף.
2. הרכיב Chat בנוי עם רכיבי React סטנדרטיים של ממשק המשתמש של Looker מהחבילה Looker Components Library.

ספריית רכיבי Looker מאפשרת שילוב חלק בין תוכן Looker לבין האפליקציה שלכם. היא מספקת רכיבי React מוכנים מראש שתואמים לסגנונות ולרכיבים בלוח בקרה מוטמע של Looker.

שליחת הודעה למשתמש

ממשק הצ'אט צריך לשלוח את ההנחיה של המשתמש לניתוח שיחות.

3. בחלק התחתון של קובץ הרכיב Chat, הרכיב Chat מכיל את רכיב המשנה ChatInput, שמספק את שדה להזנת קלט להנחיה של המשתמש.
4. כששולחים, השיטה showAndSendUserPrompt שולחת את ההנחיה של המשתמש לניתוח שיחות (באמצעות שרת proxy דרך ה-backend של Node).

הצגה של הודעות מערכת בשידור חי

אחרי שהמשתמש שולח הודעה ל-Conversational Analytics, אנחנו צריכים להציג את התשובה שלו.

5. ליד החלק התחתון של קובץ הרכיב Chat, הרכיב Chat מכיל את רכיב המשנה MessageList, שמכיל את הלוגיקה להצגת ההודעות מ-Conversational Analytics על סמך סוג ההודעה.
6. השיטה streamAndParseResponse מטפלת בתגובה, ומנסה כל הזמן לנתח הודעות מערכת תקינות מתגובת ה-JSON של הסטרימינג. בכל פעם שמערכת מנתחת הודעה תקפה, היא מוצגת ב-MessageList.

מומלץ מאוד להציג את הודעות המערכת מניתוח נתונים של שיחות ברגע שהן מגיעות, כדי ליצור חוויית משתמש רספונסיבית יותר.

התשובה של Conversational Analytics להנחיה של משתמש מורכבת מכמה הודעות מערכת, שכוללות את מקורות הנתונים שנשלחה לגביהם שאילתה, את השאילתה, את התוצאות, את ההדמיות ועוד. המתנה להגעת כל הודעות המערכת עלולה לגרום למשתמש להניח שיש בעיות בביצועים או באפליקציה.

עכשיו אתם יודעים איך רכיב Chat, שנבנה באמצעות ספריית הרכיבים של Looker, שולח הודעת משתמש ומזרים את התגובה.

6. שליחת מסננים של מרכז הבקרה לניתוח נתוני השיחות

עכשיו נסביר איך לכלול את המסננים של לוח הבקרה בהנחיה של המשתמש, כדי שהניתוח השיחתי יוכל לסנן את השאילתה לפי ההקשר של לוח הבקרה (המסננים שלו).

האזנה לאירוע של שינוי המסנן במרכז הבקרה

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 בודקת תמיד אם יש הודעת מערכת עם תוצאות הנתונים מניתוח שיחות.
2. בכל פעם שהשיטה streamAndParseResponse מנתחת הודעת מערכת עם תוצאות נתונים, היא בודקת אם יש מאפיינים בנתונים שתואמים למאפיינים במסננים.
3. אם כן, השיטה streamAndParseResponse ממירה את עמודות הנתונים למסננים בלוח הבקרה. הפעם השיטה משתמשת שוב ב-FIELD_FILTER_MAP, אבל בסדר הפוך, וממירה משם המאפיין למפתח של המסנן. הערכים של המסנן הם הערכים בעמודת הנתונים.

שליחת אירוע של שינוי מסנן ללוח בקרה מוטמע

4. עם מסנני לוח הבקרה הרצויים, השיטה streamAndParseResponse קוראת לשיטה setFilters של הרכיב Chat עם המסננים הרצויים.
5. הקוד הזה קורא לשיטה setDashboardFilters של הרכיב EmbedChat, ששולחת שני אירועים, "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 וניתוח נתונים שיחתי.

• יצרת רכיב צ'אט באמצעות ספריית הרכיבים של Looker.
• העברתם את ההקשר של מרכז הבקרה המוטמע של Looker לניתוח שיחות כדי להקל על ניתוח הנתונים.
• הפעלתם את התכונה 'ניתוח נתונים באמצעות שיחה' כדי לשלוט במסננים של לוח הבקרה המוטמע ולקבל הקשר משופר כשאתם בוחנים את הנתונים.

השלבים הבאים

• מידע נוסף על היכולות של ניתוח נתונים בשיחה
• צריך לעדכן את אפליקציית הדוגמה Looker Embed Reference כדי שהיא תפעל עם לוחות בקרה מוטמעים של Looker.
• כדאי לנסות את התרחישים האחרים להטמעה שזמינים באפליקציית הדוגמה Looker Embed Reference שפועלת באופן מקומי.