Conversational Analytics के साथ Looker को एम्बेड करना

1. शुरू करने से पहले

इस कोडलैब में, आपको एम्बेड किए गए Looker डैशबोर्ड को कन्वर्सेशनल ऐनलिटिक्स की सुविधा देने वाले चैटबॉट के साथ इंटिग्रेट करने का तरीका बताया जाएगा. इससे, नैचुरल लैंग्वेज का इस्तेमाल करके डेटा को एक ही जगह पर ऐक्सेस किया जा सकेगा. ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, आपको Looker एम्बेडिंग, बातचीत वाली Analytics, JavaScript, और React के बारे में जानकारी होनी चाहिए.

आपको क्या सीखने को मिलेगा

इस कोडलैब को पूरा करने के बाद, आपको इनके बारे में जानकारी मिल जाएगी:

  • Looker Embed Reference ऐप्लिकेशन को स्थानीय तौर पर सेट अप करने का तरीका
  • Looker Components लाइब्रेरी की मदद से, चैट वाला React कॉम्पोनेंट बनाने का तरीका
  • एम्बेड किए गए डैशबोर्ड के फ़िल्टर को कॉन्टेक्स्ट के तौर पर, Conversational Analytics को भेजने का तरीका
  • एम्बेड किए गए डैशबोर्ड के फ़िल्टर कंट्रोल करने के लिए, बातचीत के आंकड़ों की मदद से काम करने वाली चैट की सुविधा चालू करने का तरीक़ा

आपको इन चीज़ों की ज़रूरत होगी

इस कोडलैब को पूरा करने के लिए, आपको इनकी ज़रूरत होगी:

  • Looker इंस्टेंस में ASC Demographic Data Looker Block इंस्टॉल होना चाहिए. साथ ही, SSO एम्बेडिंग की सुविधा चालू होनी चाहिए
  • आपके Looker इंस्टेंस के लिए एपीआई और डेवलपर ऐक्सेस
  • Node v18, yarn, Git, और gcloud इंस्टॉल किया गया लोकल एनवायरमेंट
  • आपके उपयोगकर्ता खाते के लिए, इन IAM भूमिकाओं वाला क्लाउड प्रोजेक्ट सेट अप किया गया हो:
  • roles/bigquery.dataViewer BigQuery डेटा व्यूअर
  • roles/bigquery.user BigQuery यूज़र
  • roles/looker.instanceUser Looker इंस्टेंस का उपयोगकर्ता

2. कन्वर्सेशनल ऐनालिटिक्स सेट अप करना

आइए, Conversational Analytics के डेटा एजेंट को सेट अप करें. यह एजेंट, आपके एम्बेड किए गए डैशबोर्ड की चैट में, आम भाषा में पूछे गए सवालों के जवाब देने के लिए इस्तेमाल किया जाएगा.

gcloud के साथ पुष्टि करना

  1. अपने लोकल एनवायरमेंट में, अपने उपयोगकर्ता खाते से पुष्टि करें:
gcloud auth login
  1. gcloud पर ऐप्लिकेशन के लिए डिफ़ॉल्ट क्रेडेंशियल (एडीसी) और बिलिंग प्रोजेक्ट सेट करें:
gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

Conversational Analytics API चालू करना

  1. Cloud प्रोजेक्ट के एपीआई चालू करें. कृपया YOUR_PROJECT_ID की जगह अपने Google Cloud प्रोजेक्ट का आईडी डालें:
gcloud services enable geminidataanalytics.googleapis.com bigquery.googleapis.com cloudaicompanion.googleapis.com --project=YOUR_PROJECT_ID

डेटा एजेंट बनाना

  1. Google Colab खोलें.
  2. Google Colab में, इस नोटबुक को Looker Embed Reference repository से लोड करें.
  3. नोटबुक के सभी चरणों को चलाएं. आपको अपने Cloud प्रोजेक्ट का आईडी और Looker इंस्टेंस का यूआरआई चाहिए. यूआरआई के आखिर में स्लैश होना चाहिए, जैसे कि "https://my.looker.app/". आपको नोटबुक के आखिर में, नतीजे के तौर पर एक इमेज दिखेगी.

अब आपके पास कन्वर्सेशनल एनालिटिक्स डेटा एजेंट उपलब्ध है. यह चैट मैसेज स्वीकार करने, एम्बेड किए गए Looker डैशबोर्ड में Looker Explore से क्वेरी करने, और नतीजे और विज़ुअलाइज़ेशन दिखाने के लिए तैयार है.

3. Looker एम्बेड रेफ़रंस सेट अप करना

आइए, आपके लोकल एनवायरमेंट में Looker Embed Reference ऐप्लिकेशन सेट अप करते हैं, ताकि एम्बेड किए गए Looker डैशबोर्ड के साथ Conversational Analytics चैट को इंटिग्रेट करने का उदाहरण आज़माया जा सके.

रिपॉज़िटरी का क्लोन बनाना

  1. GitHub repo को अपने लोकल एनवायरमेंट में क्लोन करें. यहां दिए गए उदाहरण के तौर पर कमांड देखें:
git clone "https://github.com/looker-open-source/LookerEmbedReference.git"
  1. क्लोन की गई LookerEmbedReference डायरेक्ट्री पर जाएं:
cd LookerEmbedReference

लोकल फ़्रंटएंड सर्वर सेट अप करना और उसे चलाना

  1. Frontend डायरेक्ट्री में डिपेंडेंसी इंस्टॉल करना
cd Frontend
yarn install
  1. क्रेडेंशियल के साथ Frontend डायरेक्ट्री रूट में .env फ़ाइल सेट अप करें. YOUR_LOOKER_INSTANCE_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
  1. फ़्रंटएंड डेवलपमेंट सर्वर चलाएं:
yarn run dev

बैकएंड सर्वर को स्थानीय तौर पर सेट अप और चलाना

  1. कोई नया शेल, टर्मिनल, कंसोल या टैब खोलें. Backend-Node डायरेक्ट्री पर जाएं और डिपेंडेंसी इंस्टॉल करें. पक्का करें कि आपने फ़्रंटएंड सर्वर को चालू रखने के लिए, पिछले शेल/टर्मिनल को बंद न किया हो.
cd ../Backend-Node
yarn install
  1. क्रेडेंशियल के साथ, Backend-Node डायरेक्ट्री रूट में .env फ़ाइल सेट अप करें:
  • 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 आपके Looker इंस्टेंस का यूआरआई है. इसके आखिर में स्लैश मौजूद है.
  • YOUR_LOOKER_INSTANCE_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
  1. बैकएंड डेवलपमेंट सर्वर चलाएं:
yarn run dev

अब आपके पास फ़्रंट एंड डेवलपमेंट सर्वर चालू है. यह वेब ऐप्लिकेशन के लिए JavaScript उपलब्ध करा रहा है. आपके पास बैकएंड डेव सर्वर भी चालू है. यह एसएसओ एम्बेड यूआरएल के अनुरोधों और बातचीत वाली Analytics के एंडपॉइंट के लिए प्रॉक्सी अनुरोधों का ध्यान रखता है.

4. उदाहरण आज़माएं

अब हम आपके वेब ऐप्लिकेशन को आज़माते हैं. यह आपके एनवायरमेंट में स्थानीय तौर पर चल रहा है.

बातचीत शुरू करना

  1. अपने पसंदीदा ब्राउज़र में https://localhost:3001 पता खोलें.
  2. बाईं ओर मौजूद मुख्य नेविगेशन में, चैट की सुविधा वाला एम्बेड किया गया डैशबोर्ड पेज पर जाएं.
  3. दाईं ओर मौजूद चैट कॉम्पोनेंट लोड होने के बाद, टाइप करें: "नमस्ते, आप कौन हैं?"
  4. जवाब नोट करें.

इस ऐप्लिकेशन ने चैट के इतिहास को ट्रैक करने के लिए, Conversational Analytics का conversation ऑब्जेक्ट अपने-आप बना दिया. साथ ही, चैट इंटरफ़ेस लोड कर दिया. जब आपने चैट इंटरफ़ेस से कोई सवाल पूछा, तो फ़्रंटएंड ने उपयोगकर्ता का मैसेज आपके लोकल नोड बैकएंड सर्वर को भेजा. इसके बाद, इसने अनुरोध को Conversational Analytics के chat एंडपॉइंट पर प्रॉक्सी किया और उससे मिले जवाब को भी प्रॉक्सी किया.

एम्बेड किए गए डैशबोर्ड को फ़िल्टर करना

अब एम्बेड किए गए डैशबोर्ड के बारे में जानें और उससे इंटरैक्ट करें.

  1. एम्बेड किए गए डैशबोर्ड को स्क्रोल करें. ध्यान दें कि इसमें कई डाइमेंशन और मेट्रिक के हिसाब से जनगणना का डेटा शामिल होता है.
  2. डैशबोर्ड में सबसे ऊपर बाईं ओर मौजूद राज्य और ज़िला के हिसाब से, डैशबोर्ड को फ़िल्टर किया जा सकता है. डैशबोर्ड फ़िल्टर पर फ़िल्टर को टेक्सास पर सेट करें. इसके बाद, डैशबोर्ड को फिर से चलाने के लिए, नीले रंग से हाइलाइट किए गए गोलाकार ऐरो बटन को चुनें.
  3. ध्यान दें कि सभी विज़ुअलाइज़ेशन का डेटा, टेक्सास राज्य के हिसाब से फ़िल्टर किया गया है.

डैशबोर्ड के कॉन्टेक्स्ट के साथ सवाल पूछना

डैशबोर्ड को फ़िल्टर करने के बाद, अब हम डैशबोर्ड में मौजूद डेटा की जांच जारी रखते हैं.

  1. चैट में "मुझे सबसे कम किराया वाले पांच ज़िलों के बारे में बताओ" सबमिट करें.
  2. ध्यान दें, अब बातचीत वाली Analytics सुविधा के लिए दिए गए आपके प्रॉम्प्ट में, "डाइमेंशन ‘state.state_name' को Texas के हिसाब से फ़िल्टर करें" शब्द शामिल हैं.
  3. अब ध्यान दें कि जवाब की क्वेरी और डेटा को टेक्सास राज्य के हिसाब से फ़िल्टर किया गया है.
  4. इसके अलावा, डेटा के नतीजे मिलने के बाद, आपके एम्बेड किए गए डैशबोर्ड को फिर से चलाया गया है. इसमें ज़िला फ़िल्टर को, नतीजे के डेटा में तय किए गए पांच ज़िलों पर सेट किया गया है.

अब जनगणना के डेटा की जांच जारी रखी जा सकती है. इसमें पांच काउंटी के डेटा को आपके लिए फ़िल्टर किया गया है.

बधाई हो! आपने बातचीत के आंकड़ों वाली चैट के साथ इंटिग्रेट किए गए एम्बेड किए गए डैशबोर्ड का एक आसान उदाहरण सेट अप किया है और उसे आज़माया है.

5. चैट कॉम्पोनेंट बनाना

आइए, सबसे पहले Chat कॉम्पोनेंट के बारे में जानते हैं. इससे हमें यह समझने में मदद मिलेगी कि बैकग्राउंड में क्या हो रहा है. हम मानते हैं कि आपको Looker Embed SDK की मदद से, Looker डैशबोर्ड को एम्बेड करने का तरीका पता है.

Looker कॉम्पोनेंट लाइब्रेरी का इस्तेमाल करना

  1. अपने पसंदीदा IDE या टर्मिनल में, Frontend/src/components/EmbedChat/components/chat.js पर मौजूद Chat कॉम्पोनेंट फ़ाइल खोलें.
  2. Chat कॉम्पोनेंट को Looker कॉम्पोनेंट लाइब्रेरी पैकेज से मिले स्टैंडर्ड Looker UI React कॉम्पोनेंट का इस्तेमाल करके बनाया गया है.

उपयोगकर्ता को मैसेज भेजना

चैट इंटरफ़ेस को, उपयोगकर्ता के प्रॉम्प्ट को Conversational Analytics पर भेजना होगा.

  1. Chat कॉम्पोनेंट फ़ाइल में सबसे नीचे, Chat कॉम्पोनेंट में ChatInput सबकॉम्पोनेंट होता है. यह सबकॉम्पोनेंट, उपयोगकर्ता के प्रॉम्प्ट के लिए इनपुट फ़ील्ड उपलब्ध कराता है.
  2. सबमिट करने पर, showAndSendUserPrompt तरीका उपयोगकर्ता के प्रॉम्प्ट को Conversational Analytics पर भेजता है. यह आपके Node बैकएंड के ज़रिए प्रॉक्सी किया जाता है.

सिस्टम मैसेज स्ट्रीम और डिसप्ले करना

जब उपयोगकर्ता, बातचीत वाली Analytics सुविधा के ज़रिए मैसेज भेजता है, तो हमें उसका जवाब दिखाना होता है.

  1. Chat कॉम्पोनेंट फ़ाइल में सबसे नीचे, Chat कॉम्पोनेंट होता है. इसमें MessageList सबकॉम्पोनेंट होता है. इसमें मैसेज के टाइप के आधार पर, Conversational Analytics से मिले मैसेज दिखाने का लॉजिक होता है.
  2. streamAndParseResponse तरीका, जवाब को हैंडल करता है. इसके लिए, वह स्ट्रीमिंग JSON रिस्पॉन्स से मान्य सिस्टम मैसेज को लगातार पार्स करने की कोशिश करता है. जब भी कोई मान्य सिस्टम मैसेज पार्स हो जाता है, तो उसे MessageList में दिखाया जाता है.

अब आपने यह जान लिया है कि Looker Components लाइब्रेरी की मदद से बनाया गया Chat कॉम्पोनेंट, उपयोगकर्ता को मैसेज कैसे भेजता है और जवाब को वापस कैसे स्ट्रीम करता है.

6. डैशबोर्ड फ़िल्टर को Conversational Analytics पर भेजना

अब समझते हैं कि किसी उपयोगकर्ता के प्रॉम्प्ट में डैशबोर्ड फ़िल्टर कैसे शामिल किए जाएं, ताकि बातचीत वाली Analytics सुविधा, डैशबोर्ड के कॉन्टेक्स्ट (इसके फ़िल्टर) के हिसाब से अपनी क्वेरी को फ़िल्टर कर सके.

डैशबोर्ड के फ़िल्टर में बदलाव होने पर सूचना पाने की सुविधा

  1. Frontend/src/components/EmbedChat/EmbedChat.js, पर मौजूद EmbedChat कॉम्पोनेंट फ़ाइल खोलें. यह ऐप्लिकेशन के उस पेज को दिखाता है जिसमें एम्बेड किया गया डैशबोर्ड शामिल होता है. यह डैशबोर्ड, पहले एक्सप्लोर किए गए Chat कॉम्पोनेंट के साथ इंटिग्रेट किया गया होता है.
  2. EmbedChat कॉम्पोनेंट, Embed SDK के .on(...) तरीके का इस्तेमाल करके, एम्बेड किए गए डैशबोर्ड से "dashboard:filters:changed" इवेंट को सुनता है. इसके बाद, कॉम्पोनेंट मौजूदा फ़िल्टर को अपनी फ़िल्टर स्थिति में सेव करता है.

फ़िल्टर की स्थिति को कन्वर्सेशनल ऐनलिटिक्स पर भेजना

  1. EmbedChat कॉम्पोनेंट, फ़िल्टर को Chat कॉम्पोनेंट में पास करता है. यह कॉम्पोनेंट, हर फ़िल्टर को showAndSendUserPrompt तरीके में "Filter on dimension '...' being ..." जैसी स्ट्रिंग में बदलता है, ताकि इसे उपयोगकर्ता के प्रॉम्प्ट में जोड़ा जा सके.

7. चैट से डैशबोर्ड के फ़िल्टर कंट्रोल करना

आखिर में, आइए देखते हैं कि एम्बेड किए गए डैशबोर्ड के फ़िल्टर को कंट्रोल करने के लिए, Chat कॉम्पोनेंट को कैसे चालू करें.

तय करें कि कौनसे फ़िल्टर सेट करने हैं

  1. Chat कॉम्पोनेंट का streamAndParseResponse तरीका, हमेशा सिस्टम मैसेज की जांच करता है. इस मैसेज में, Conversational Analytics से मिले डेटा के नतीजे होते हैं.
  2. जब भी streamAndParseResponse तरीके से डेटा के नतीजों के साथ सिस्टम मैसेज पार्स किया जाता है, तो यह देखा जाता है कि डेटा में मौजूद कोई डाइमेंशन, फ़िल्टर में मौजूद डाइमेंशन से मेल खाता है या नहीं.
  3. अगर ऐसा है, तो streamAndParseResponse तरीके से डेटा कॉलम को डैशबोर्ड फ़िल्टर में बदल दिया जाता है. इस बार, यह तरीका फिर से FIELD_FILTER_MAP का इस्तेमाल करता है. हालांकि, यह डाइमेंशन के नाम को फ़िल्टर के मुख्य डाइमेंशन में बदलता है. फ़िल्टर की वैल्यू, डेटा कॉलम में मौजूद वैल्यू होती हैं.

एम्बेड किए गए डैशबोर्ड को फ़िल्टर में बदलाव करने से जुड़ा इवेंट भेजना

  1. डैशबोर्ड के लिए चुने गए फ़िल्टर के साथ, streamAndParseResponse तरीका, Chat कॉम्पोनेंट के setFilters तरीके को कॉल करता है.
  2. इससे EmbedChat कॉम्पोनेंट के setDashboardFilters तरीके को कॉल किया जाता है. यह Embed SDK के send तरीके का इस्तेमाल करके, फ़िल्टर के साथ "dashboard:filters:update" और "dashboard:run" दो इवेंट भेजता है. ये इवेंट, एम्बेड किए गए डैशबोर्ड में तुरंत भेजे जाते हैं.
  3. "dashboard:filters:update" इवेंट, एम्बेड किए गए डैशबोर्ड के फ़िल्टर बदलता है. वहीं, "dashboard:run" इवेंट, नए फ़िल्टर के साथ डैशबोर्ड की क्वेरी को फिर से चलाता है.

8. नतीजा और मुख्य बातें

आपने एम्बेड किए गए Looker डैशबोर्ड का अपना वर्किंग उदाहरण सेट अप किया हो. यह उदाहरण, Conversational Analytics चैट के साथ इंटिग्रेट किया गया हो. आपने एम्बेड किए गए Looker डैशबोर्ड और Conversational Analytics की मदद से, नैचुरल लैंग्वेज में डेटा एक्सप्लोर करने की सुविधा चालू करने का तरीका जान लिया है.

  • आपने Looker कॉम्पोनेंट लाइब्रेरी की मदद से चैट कॉम्पोनेंट बनाया हो.
  • आपने एम्बेड किए गए Looker डैशबोर्ड के कॉन्टेक्स्ट को Conversational Analytics को पास किया है, ताकि डेटा एक्सप्लोर करना आसान हो जाए.
  • आपने बातचीत वाली Analytics सुविधा चालू की है, ताकि डेटा एक्सप्लोर करते समय, एंबेड किए गए डैशबोर्ड के फ़िल्टर को कंट्रोल किया जा सके. इससे आपको बेहतर कॉन्टेक्स्ट मिलता है.

आगे क्या करना है

  • कन्वर्सेशनल ऐनलिटिक्स की सुविधाओं के बारे में ज़्यादा जानें.
  • अपने एम्बेड किए गए Looker डैशबोर्ड के साथ काम करने के लिए, Looker Embed Reference के उदाहरण ऐप्लिकेशन को अपडेट करें.
  • स्थानीय तौर पर चल रहे Looker Embed Reference के उदाहरण ऐप्लिकेशन में उपलब्ध, एम्बेड करने के अन्य उदाहरणों को आज़माएं!