Looker را با تجزیه و تحلیل مکالمه‌ای جاسازی کنید

۱. قبل از شروع

این آزمایشگاه کد شما را در ادغام داشبورد Looker تعبیه‌شده با چت مبتنی بر تحلیل مکالمه‌ای راهنمایی می‌کند تا یک تجربه داده یکپارچه مبتنی بر زبان طبیعی ایجاد کنید. برای به دست آوردن بیشترین ارزش، باید با جاسازی Looker، تحلیل مکالمه‌ای، جاوا اسکریپت و React آشنا باشید.

آنچه یاد خواهید گرفت

بعد از دنبال کردن این مجموعه کد، شما موارد زیر را یاد گرفته‌اید:

  • نحوه تنظیم برنامه Looker Embed Reference به صورت محلی
  • نحوه ساخت یک کامپوننت چت React با کتابخانه Looker Components
  • چگونه فیلتر داشبورد تعبیه‌شده خود را به عنوان متن به Conversational Analytics ارسال کنیم؟
  • چگونه چت مبتنی بر تحلیل مکالمه خود را برای کنترل فیلترهای داشبورد تعبیه شده فعال کنید

آنچه نیاز دارید

برای تکمیل این آزمایشگاه کد، به موارد زیر نیاز دارید:

  • یک نمونه Looker با بلوک ASC Demographic Data Looker نصب شده و قابلیت SSO embedding آن فعال است.
  • دسترسی API و توسعه‌دهنده به نمونه Looker شما
  • یک محیط محلی با Node v18، yarn، Git و gcloud نصب شده
  • یک پروژه ابری با این نقش‌های IAM که برای حساب کاربری شما تنظیم شده‌اند:
  • roles/bigquery.dataViewer نمایشگر داده‌های BigQuery
  • roles/bigquery.user کاربر BigQuery
  • roles/looker.instanceUser کاربر نمونه‌ی Looker

۲. تحلیل مکالمه را تنظیم کنید

بیایید عامل داده‌ی تحلیل مکالمه‌ای (Conversational Analytics) را که چت داشبورد تعبیه‌شده‌ی شما برای پاسخ به سوالات زبان طبیعی از آن استفاده خواهد کرد، راه‌اندازی کنیم.

احراز هویت با gcloud

  1. با حساب کاربری خود در محیط محلی خود احراز هویت کنید: 
gcloud auth login
  1. اعتبارنامه‌های پیش‌فرض برنامه (ADC) و پروژه صورتحساب را در gcloud خود تنظیم کنید: 
gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

فعال کردن APIهای تحلیل مکالمه‌ای

  1. فعال کردن APIهای پروژه ابری. لطفاً YOUR_PROJECT_ID را با شناسه پروژه گوگل ابری خود جایگزین کنید: 
gcloud services enable geminidataanalytics.googleapis.com bigquery.googleapis.com cloudaicompanion.googleapis.com --project=YOUR_PROJECT_ID

عامل داده را ایجاد کنید

  1. گوگل کولب را باز کنید.
  2. درون Google Colab، این دفترچه یادداشت را از مخزن Looker Embed Reference بارگذاری کنید.
  3. تمام مراحل دفترچه یادداشت را اجرا کنید. به شناسه پروژه ابری و آدرس اینترنتی نمونه Looker خود به همراه یک اسلش انتهایی، مانند "https://my.looker.app/" نیاز خواهید داشت. در انتهای دفترچه یادداشت، باید نتیجه موفقیت‌آمیزی داشته باشید.

اکنون یک عامل داده Conversational Analytics در دسترس دارید و آماده پذیرش پیام‌های چت، پرس‌وجو در مورد کاوش‌های Looker در داشبورد Looker تعبیه‌شده و بازگرداندن نتایج و مصورسازی‌ها است.

۳. مرجع جاسازی Looker را تنظیم کنید

بیایید برنامه Looker Embed Reference را در محیط محلی خود راه‌اندازی کنیم تا بتوانید مثال ادغام چت Conversational Analytics با داشبورد Looker تعبیه‌شده را امتحان کنید.

مخزن را کلون کنید

  1. مخزن گیت‌هاب را در محیط محلی خود کپی کنید. به مثال زیر توجه کنید: 
git clone "https://github.com/looker-open-source/LookerEmbedReference.git"
  1. به دایرکتوری LookerEmbedReference که کلون کرده‌اید بروید: 
cd LookerEmbedReference

سرور frontend محلی را راه‌اندازی و اجرا کنید

  1. وابستگی‌ها را در دایرکتوری Frontend نصب کنید 
cd Frontend
yarn install
  1. یک فایل .env در دایرکتوری ریشه Frontend با اطلاعات احراز هویت ایجاد کنید. YOUR_LOOKER_INSTANCE_URI باید آدرس URL نمونه 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. سرور توسعه‌دهنده frontend را اجرا کنید: 
yarn run dev

سرور بک‌اند را به صورت محلی راه‌اندازی و اجرا کنید

  1. یک پوسته، ترمینال، کنسول یا تب جدید باز کنید. به دایرکتوری Backend-Node بروید و وابستگی‌ها را نصب کنید. مطمئن شوید که پوسته/ترمینال قبلی را با سرور frontend در حال اجرا نگه دارید. 
cd ../Backend-Node
yarn install
  1. یک فایل .env را در دایرکتوری ریشه Backend-Node با اطلاعات احراز هویت تنظیم کنید:
  • YOUR_LOOKER_CLIENT_ID شناسه کلاینت Looker شماست.
  • YOUR_LOOKER_CLIENT_SECRET راز کلاینت Looker شماست.
  • YOUR_LOOKER_EMBED_SECRET رمز جاسازی شماست.
  • YOUR_PROJECT_ID شناسه پروژه ابری شماست.
  • 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

اکنون سرور توسعه‌دهنده front در حال اجرا است و جاوا اسکریپت را برای برنامه وب ارائه می‌دهد. همچنین سرور توسعه‌دهنده backend برای رسیدگی به درخواست‌های URL جاسازی‌شده SSO و درخواست‌های پروکسی به نقاط پایانی Conversational Analytics در حال اجرا است.

۴. مثال را امتحان کنید

بیایید برنامه وب شما را که اکنون به صورت محلی در محیط شما اجرا می‌شود، امتحان کنیم.

شروع مکالمه

  1. آدرس https://localhost:3001 را در مرورگر مورد نظر خود باز کنید.
  2. در منوی اصلی سمت چپ، به صفحه داشبورد تعبیه‌شده با چت بروید.
  3. وقتی کامپوننت چت سمت راست بارگذاری شد، تایپ کنید: «سلام، شما کی هستید؟»
  4. به پاسخ توجه کنید.

این برنامه به طور خودکار یک شیء مکالمه Conversational Analytics برای ردیابی تاریخچه چت ایجاد کرده و رابط چت را بارگذاری می‌کند. وقتی از رابط چت سوالی می‌پرسیدید، frontend یک پیام کاربری به سرور محلی Node backend شما ارسال می‌کرد. سپس درخواست را به سمت و پاسخ را از نقطه پایانی چت Conversational Analytics پروکسی می‌کرد.

فیلتر کردن داشبورد تعبیه‌شده

حالا با داشبورد تعبیه شده آشنا شوید و با آن تعامل داشته باشید.

  1. در داشبورد تعبیه‌شده اسکرول کنید. توجه داشته باشید که این داشبورد داده‌های سرشماری را در ابعاد و معیارهای مختلف پوشش می‌دهد.
  2. می‌توانید داشبورد را بر اساس ایالت و شهرستان در بالا سمت چپ داشبورد فیلتر کنید. فیلتر را در فیلتر داشبورد روی تگزاس تنظیم کنید. سپس دکمه فلش دایره‌ای برجسته آبی رنگ جدید را برای اجرای مجدد داشبورد انتخاب کنید.
  3. توجه داشته باشید که چگونه تمام داده‌های مصورسازی بر اساس ایالت تگزاس فیلتر شده‌اند.

با استفاده از داشبورد، سوالی بپرسید

حالا که داشبورد را فیلتر کردیم، بیایید بررسی داده‌های موجود در داشبورد را ادامه دهیم.

  1. عبارت «۵ شهرستان برتر با کمترین اجاره بها را به من بگویید» را در چت ارسال کنید.
  2. توجه داشته باشید، اعلان شما به Conversational Analytics اکنون شامل کلمات اضافی "فیلتر بر اساس بُعد 'state.state_name' که تگزاس است" است.
  3. حال، توجه داشته باشید که کوئری و داده‌های پاسخ بر اساس ایالت تگزاس فیلتر شده‌اند.
  4. همچنین، پس از بازگشت نتایج داده‌ها، داشبورد تعبیه‌شده شما با فیلتر شهرستانی که روی ۵ شهرستان تعریف‌شده در داده‌های نتیجه تنظیم شده است، دوباره اجرا شده است.

اکنون می‌توانید به بررسی داده‌های سرشماری ادامه دهید، در حالی که ۵ شهرستان به راحتی برای شما فیلتر شده‌اند.

تبریک! شما یک نمونه ساده از داشبورد تعبیه‌شده که با چت Conversational Analytics یکپارچه شده است را راه‌اندازی و امتحان کرده‌اید.

۵. یک کامپوننت چت بسازید

بیایید با بررسی کامپوننت Chat ، بفهمیم که در پشت صحنه چه می‌گذرد. ​​فرض می‌کنیم که شما می‌دانید چگونه یک داشبورد Looker را با Looker Embed SDK جاسازی کنید.

از کتابخانه کامپوننت Looker استفاده کنید

  1. فایل کامپوننت Chat را در Frontend/src/components/EmbedChat/components/chat.js در IDE مورد علاقه خود یا در ترمینال خود باز کنید.
  2. کامپوننت Chat با استفاده از کامپوننت‌های استاندارد Looker UI React از پکیج Looker Components Library ساخته شده است.

ارسال پیام کاربر

رابط چت باید درخواست کاربر را به Conversational Analytics ارسال کند.

  1. نزدیک به انتهای فایل کامپوننت Chat ، کامپوننت Chat شامل زیرکامپوننت ChatInput است که فیلد ورودی برای اعلان کاربر را فراهم می‌کند.
  2. هنگام ارسال، متد showAndSendUserPrompt درخواست کاربر را به Conversational Analytics (که از طریق بک‌اند Node شما پروکسی شده است) ارسال می‌کند.

پخش و نمایش پیام‌های سیستمی

بعد از اینکه کاربر به Conversational Analytics پیام داد، باید پاسخ آن را نمایش دهیم.

  1. تقریباً در پایین فایل کامپوننت Chat ، کامپوننت Chat شامل زیرکامپوننت MessageList است که شامل منطق نمایش پیام‌ها از Conversational Analytics بر اساس نوع پیام است.
  2. متد streamAndParseResponse با تلاش مداوم برای تجزیه پیام‌های معتبر سیستمی از پاسخ JSON در حال پخش، پاسخ را مدیریت می‌کند. هر زمان که یک پیام معتبر سیستمی با موفقیت تجزیه شود، در MessageList نمایش داده می‌شود.

اکنون بررسی کرده‌اید که چگونه کامپوننت Chat ، که با کتابخانه Looker Components ساخته شده است، یک پیام کاربر را ارسال کرده و پاسخ را به صورت استریم برمی‌گرداند.

۶. فیلترهای داشبورد را به Conversational Analytics ارسال کنید

حال بیایید بفهمیم که چگونه فیلترهای داشبورد را در اعلان کاربر قرار دهیم تا Conversational Analytics بتواند پرس و جوی خود را با توجه به محتوای داشبورد (فیلترهای آن) فیلتر کند.

به رویداد تغییر فیلتر داشبورد گوش دهید

  1. فایل کامپوننت EmbedChat را در Frontend/src/components/EmbedChat/EmbedChat.js, که نشان دهنده صفحه برنامه حاوی داشبورد تعبیه شده یکپارچه با کامپوننت Chat است که قبلاً بررسی شد.
  2. کامپوننت EmbedChat با استفاده از متد .on(...) از Embed SDK، به رویداد "dashboard:filters:changed" از داشبورد تعبیه‌شده گوش می‌دهد. سپس این کامپوننت فیلترهای فعلی را در وضعیت فیلتر خود ذخیره می‌کند.

ارسال وضعیت فیلتر به Conversational Analytics

  1. کامپوننت EmbedChat فیلترها را به کامپوننت Chat ارسال می‌کند که هر فیلتر را به رشته‌ای مانند "Filter on dimension '...' being ..." در متد showAndSendUserPrompt تبدیل می‌کند تا به اعلان کاربر ضمیمه شود.

۷. فیلترهای داشبورد را از طریق چت کنترل کنید

در نهایت، بیایید نگاهی به نحوه فعال کردن کامپوننت Chat برای کنترل فیلترهای داشبورد تعبیه شده بیندازیم.

تعیین کنید چه فیلترهایی را تنظیم کنید

  1. متد streamAndParseResponse کامپوننت Chat همیشه در حال بررسی پیام سیستمی با نتایج داده‌های Conversational Analytics است.
  2. هر زمان که متد streamAndParseResponse یک پیام سیستمی را به همراه نتایج داده‌ها تجزیه می‌کند، بررسی می‌کند که آیا ابعادی در داده‌ها با ابعاد موجود در فیلترها مطابقت دارد یا خیر.
  3. اگر چنین باشد، متد streamAndParseResponse ستون‌های داده را به فیلترهای داشبورد تبدیل می‌کند. این بار متد دوباره از FIELD_FILTER_MAP استفاده می‌کند، اما به صورت معکوس، و نام بُعد را به کلید فیلتر تبدیل می‌کند. مقادیر فیلتر، مقادیر موجود در ستون داده هستند.

ارسال رویداد تغییر فیلتر به داشبورد تعبیه شده

  1. با فیلترهای داشبورد مورد نظر، متد streamAndParseResponse متد setFilters کامپوننت Chat را با فیلترهای مورد نظر فراخوانی می‌کند.
  2. این دستور، متد setDashboardFilters کامپوننت EmbedChat را فراخوانی می‌کند که دو رویداد "dashboard:filters:update" به همراه فیلترها و "dashboard:run" را به صورت متوالی و با استفاده از متد send کیت توسعه نرم‌افزاری Embed به داشبورد تعبیه‌شده ارسال می‌کند.
  3. رویداد "dashboard:filters:update" فیلترهای داشبورد تعبیه‌شده را تغییر می‌دهد در حالی که رویداد "dashboard:run" کوئری‌های داشبورد را با فیلترهای جدید دوباره اجرا می‌کند.

۸. نتیجه‌گیری و نکات کلیدی

شما نمونه کار خود را از یک داشبورد Looker تعبیه‌شده که با چت Conversational Analytics یکپارچه شده است، راه‌اندازی کرده‌اید. یاد گرفته‌اید که چگونه با استفاده از داشبورد Looker تعبیه‌شده و Conversational Analytics، کاوش داده‌های مبتنی بر زبان طبیعی را فعال کنید.

  • شما یک کامپوننت چت با کتابخانه Looker Component ساختید.
  • شما محتوای داشبورد Looker تعبیه‌شده خود را برای سهولت در کاوش داده‌ها به Conversational Analytics ارسال کردید.
  • شما Conversational Analytics را فعال کردید تا فیلترهای داشبورد تعبیه‌شده خود را برای بهبود زمینه هنگام کاوش داده‌ها کنترل کنید.

قدم بعدی چیست؟

  • درباره قابلیت‌های Conversational Analytics بیشتر بدانید.
  • برنامه نمونه Looker Embed Reference خود را به‌روزرسانی کنید تا با داشبوردهای Looker تعبیه‌شده شما کار کند.
  • سایر موارد استفاده از embed را که در برنامه نمونه Looker Embed Reference که به صورت محلی اجرا می‌شود، امتحان کنید!