Looker'ı Etkileşimli Analytics ile yerleştirme

1. Başlamadan önce

Bu codelab, birleştirilmiş doğal dil destekli veri deneyimi oluşturmak için yerleştirilmiş bir Looker kontrol panelini, etkileşimli analitik destekli sohbetle entegre etme konusunda size yol gösterecektir. En iyi değeri elde etmek için Looker yerleştirme, Etkileşimli Analytics, JavaScript ve React hakkında bilgi sahibi olmanız gerekir.

Neler öğreneceksiniz?

Bu codelab'i tamamladıktan sonra şunları öğrenmiş olacaksınız:

• Looker Embed Reference uygulamasını yerel olarak ayarlama
• Looker Components kitaplığı ile sohbet React bileşeni oluşturma
• Yerleştirilmiş kontrol panelinizin filtresini Etkileşimli Analytics'e bağlam olarak gönderme
• Yerleştirilmiş kontrol panelinizin filtrelerini kontrol etmek için Etkileşimli Analytics destekli sohbetinizi etkinleştirme

Gerekenler

Bu codelab'i tamamlamak için şunlar gerekir:

• ASC Demografik Veri Looker Bloğu'nun yüklendiği ve TOA yerleştirmenin etkinleştirildiği bir Looker örneği
• Looker örneğinize API ve geliştirici erişimi
• Node v18, yarn, Git ve gcloud'un yüklü olduğu yerel bir ortam
• Kullanıcı hesabınız için bu IAM rollerinin ayarlandığı bir Cloud projesi:
• roles/bigquery.dataViewer BigQuery Veri Görüntüleyicisi
• roles/bigquery.user BigQuery Kullanıcısı
• roles/looker.instanceUser Looker örneği kullanıcısı

2. Etkileşimli Analytics'i ayarlama

Yerleştirilmiş kontrol panelinizin, doğal dil sorularını yanıtlamak için kullanacağı Etkileşimli Analytics veri temsilcisini ayarlayalım.

gcloud ile kimlik doğrulama

1. Yerel ortamınızda kullanıcı hesabınızla kimlik doğrulayın:

gcloud auth login

2. gcloud'unuzda uygulama varsayılan kimlik bilgilerini (ADC) ve faturalandırma projesini ayarlayın:

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

Etkileşimli Analytics API'lerini etkinleştirme

3. Cloud projesi API'lerini etkinleştirin. Lütfen YOUR_PROJECT_ID kısmını Google Cloud projenizin kimliğiyle değiştirin:

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

Veri aracısını oluşturma

4. Google Colab'i açın.
5. Google Colab'de bu not defterini Looker Embed Reference deposundan yükleyin.
6. Not defterindeki tüm adımları çalıştırın. Cloud proje kimliğiniz ve Looker örneğinizin URI'si (ör. "https://my.looker.app/") gerekir. Not defterinin sonunda başarılı bir sonuç elde etmeniz gerekir.

Artık Etkileşimli Analytics veri temsilcisi kullanabilirsiniz. Bu temsilci, sohbet mesajlarını kabul etmeye, yerleştirilmiş Looker kontrol panelinizdeki Looker keşiflerini sorgulamaya ve sonuçlar ile görselleştirmeler döndürmeye hazırdır.

3. Looker Embed Reference'ı ayarlama

Etkileşimli Analytics sohbetini yerleştirilmiş bir Looker kontrol paneliyle entegre etme örneğini deneyebilmeniz için Looker Embed Reference uygulamasını yerel ortamınızda ayarlayalım.

Depoyu klonlama

1. GitHub deposunu yerel ortamınıza klonlayın. Aşağıdaki örnek komuta bakın:

git clone "https://github.com/looker-open-source/LookerEmbedReference.git"

2. Klonladığınız LookerEmbedReference dizinine gidin:

cd LookerEmbedReference

Yerel ön uç sunucusunu ayarlama ve çalıştırma

3. Bağımlılıkları Frontend dizinine yükleyin.

cd Frontend
yarn install

4. Kimlik bilgileriyle Frontend dizin kökünde bir .env dosyası oluşturun. YOUR_LOOKER_INSTANCE_URI, Looker örneğinizin URI'si olmalı ve sonunda eğik çizgi bulunmamalıdır. Dosya içerikleri aşağıdaki gibi olmalıdır:

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

Dosyayı oluşturmak için aşağıdaki örnek komutu kullanabilirsiniz:

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. Ön uç geliştirme sunucusunu çalıştırın:

yarn run dev

Arka uç sunucusunu yerel olarak kurma ve çalıştırma

6. Yeni bir kabuk, terminal, konsol veya sekme açın. Backend-Node dizinine gidin ve bağımlılıkları yükleyin. Ön uç sunucusunun çalıştığı önceki kabuğu/terminali açık tutmayı unutmayın.

cd ../Backend-Node
yarn install

7. .env dizin kökünde kimlik bilgilerini içeren bir Backend-Node dosyası oluşturun:

• YOUR_LOOKER_CLIENT_ID, Looker istemci kimliğinizdir.
• YOUR_LOOKER_CLIENT_SECRET, Looker istemci gizli anahtarınızdır.
• YOUR_LOOKER_EMBED_SECRET, yerleştirme gizli bilginizdir.
• YOUR_PROJECT_ID, Cloud proje kimliğinizdir.
• YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH, Looker örneğinizin URI'sidir ve sonunda eğik çizgi bulunur.
• YOUR_LOOKER_INSTANCE_URI, sondaki eğik çizgi olmayan Looker örneği URI'nizdir.

Dosya içerikleri aşağıdaki gibi olmalıdır:

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

Dosyayı oluşturmak için aşağıdaki örnek komutu kullanabilirsiniz. Tüm kimlik bilgilerini buna göre değiştirin:

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. Arka uç geliştirme sunucusunu çalıştırın:

yarn run dev

Artık ön uç geliştirme sunucusu çalışıyor ve web uygulaması için JavaScript'i sunuyor. Ayrıca, TOA yerleştirme URL'si isteklerini ve Etkileşimli Analytics uç noktalarına yönelik proxy isteklerini işlemek için arka uç geliştirme sunucunuzun çalışıyor olması gerekir.

4. Örneği deneyin

Şimdi ortamınızda yerel olarak çalışan web uygulamanızı deneyelim.

Görüşme başlatma

1. Seçtiğiniz tarayıcıda https://localhost:3001 adresini açın.
2. Soldaki ana gezinme menüsünden Sohbetli Yerleştirilmiş Kontrol Paneli sayfasına gidin.
3. Sağdaki sohbet bileşeni yüklendikten sonra "Merhaba, siz kimsiniz?" yazın.
4. Yanıtı not edin.

Uygulama, sohbet geçmişini izlemek için otomatik olarak bir Etkileşimli Analytics görüşme nesnesi oluşturdu ve sohbet arayüzünü yükledi. Sohbet arayüzüne soru sorduğunuzda ön uç, yerel Node arka uç sunucunuza bir kullanıcı mesajı gönderdi. Ardından, isteği ve yanıtı Etkileşimli Analytics sohbet uç noktasına yönlendirdi.

Yerleştirilmiş kontrol panelini filtreleme

Şimdi yerleştirilmiş kontrol paneli hakkında bilgi edinin ve kontrol paneliyle etkileşim kurun.

5. Yerleştirilmiş kontrol panelinde ilerleyin. Birden fazla boyut ve metrikteki nüfus sayımı verilerini kapsadığını unutmayın.
6. Kontrol panelinin sol üst kısmındaki Eyalet ve İlçe'ye göre kontrol panelini filtreleyebilirsiniz. Kontrol paneli filtresindeki filtreyi Teksas olarak ayarlayın. Ardından, kontrol panelini yeniden çalıştırmak için yeni vurgulanan mavi renkli dairesel ok düğmesini seçin.
7. Tüm görselleştirme verilerinin Teksas eyaletine göre nasıl filtrelendiğine dikkat edin.

Kontrol paneli bağlamında soru sorma

Kontrol panelini filtrelediğimize göre, kontrol panelindeki verileri incelemeye devam edelim.

8. Sohbette "Kirası en düşük olan ilk 5 ilçeyi söyle" istemini gönderin.
9. Not: Etkileşimli Analytics'e gönderdiğiniz isteme artık "Filter on dimension ‘state.state_name' being Texas." (Teksas eyaleti boyutuna göre filtrele) eklenmiştir.
10. Şimdi yanıtın sorgusunun ve verilerinin Teksas eyaletine göre filtrelendiğini unutmayın.
11. Ayrıca, veri sonuçları döndürüldükten sonra yerleştirilmiş kontrol paneliniz, sonuç verilerinde tanımlanan 5 il olarak ayarlanmış İl filtresiyle yeniden çalıştırıldı.

Artık 5 ilin uygun şekilde filtrelenmesiyle nüfus sayımı verilerini incelemeye devam edebilirsiniz.

Tebrikler! Etkileşimli Analytics sohbetiyle entegre edilmiş yerleştirilmiş bir kontrol panelinin basit bir örneğini oluşturup denediniz.

5. Sohbet bileşeni oluşturma

Öncelikle Chat bileşenini inceleyerek işleyişin ayrıntılarını anlayalım. Looker Embed SDK ile Looker kontrol paneli yerleştirmeyi bildiğinizi varsayıyoruz.

Looker bileşen kitaplığını kullanma

1. Chat bileşen dosyasını Frontend/src/components/EmbedChat/components/chat.js konumunda, tercih ettiğiniz IDE'de veya terminalinizde açın.
2. Chat bileşeni, Looker Components Library paketindeki standart Looker UI React bileşenleriyle oluşturulur.

Looker Bileşenleri Kitaplığı, yerleştirilmiş bir Looker kontrol panelindeki stiller ve bileşenlerle uyumlu, önceden hazırlanmış React bileşenleri sağlayarak Looker içeriği ile uygulamanız arasında sorunsuz entegrasyon sağlar.

Kullanıcı mesajı gönderme

Sohbet arayüzünün, kullanıcının istemini Etkileşimli Analytics'e göndermesi gerekir.

3. Chat bileşeninin alt kısmına yakın bir yerde, Chat bileşeni, kullanıcının istemi için giriş alanını sağlayan ChatInput alt bileşenini içerir.
4. Gönderme işleminde showAndSendUserPrompt yöntemi, kullanıcının istemini Etkileşimli Analytics'e (Node arka ucunuz üzerinden proxy'si oluşturulmuş) gönderir.

Sistem mesajlarını yayınlama ve görüntüleme

Kullanıcı, Etkileşimli Analitik'e mesaj gönderdikten sonra yanıtını göstermemiz gerekir.

5. Chat bileşen dosyasının alt kısmına yakın bir yerde, Chat bileşeni, mesajın türüne göre Etkileşimli Analytics'teki mesajları görüntüleme mantığını içeren MessageList alt bileşenini içerir.
6. streamAndParseResponse yöntemi, akış JSON yanıtından geçerli sistem mesajlarını sürekli olarak ayrıştırmaya çalışarak yanıtı işler. Geçerli bir sistem mesajı başarıyla ayrıştırıldığında MessageList içinde gösterilir.

Daha duyarlı bir kullanıcı deneyimi için Etkileşimli Analytics'ten gelen sistem mesajlarını gelir gelmez göstermenizi önemle tavsiye ederiz.

Etkileşimli Analytics'in kullanıcı istemine verdiği yanıt, sorgulanan veri kaynaklarını, sorguyu, sonuçları, görselleştirmeleri ve daha fazlasını kapsayan birden fazla sistem mesajından oluşur. Tüm sistem mesajlarının gelmesini beklemek, kullanıcının performans veya uygulama sorunları olduğunu düşünmesine neden olabilir.

Looker Components kitaplığıyla oluşturulan Chat bileşeninin, kullanıcı mesajını nasıl gönderdiğini ve yanıtı nasıl yayınladığını öğrendiniz.

6. Kontrol paneli filtrelerini Etkileşimli Analytics'e gönderme

Şimdi de etkileşimli analizlerin sorgusunu gösterge tablosunun bağlamıyla (filtreleriyle) filtreleyebilmesi için gösterge tablosu filtrelerinin kullanıcının istemine nasıl dahil edileceğini anlayalım.

Kontrol panelinin filtre değişikliği etkinliğini dinleme

1. Daha önce incelenen Chat bileşeniyle entegre edilmiş yerleştirilmiş kontrol panelini içeren uygulamanın sayfasını temsil eden Frontend/src/components/EmbedChat/EmbedChat.js, konumundaki EmbedChat bileşen dosyasını açın.
2. EmbedChat bileşeni, Embed SDK'nın .on(...) yöntemiyle yerleştirilmiş kontrol panelinden gelen "dashboard:filters:changed" etkinliğini dinler. Ardından bileşen, geçerli filtreleri filtre durumunda saklar.

Filtre durumunu Etkileşimli Analytics'e gönderme

3. EmbedChat bileşeni, filtreleri Chat bileşenine iletir. Bu bileşen, her filtreyi showAndSendUserPrompt yönteminde "Filter on dimension '...' being ..." gibi bir dizeye dönüştürerek kullanıcının istemine eklenmesini sağlar.

Bir kontrol panelinin filtresinin adı veya anahtarı, gerçek boyutun adıyla aynı olmayabilir. Etkileşimli Analytics'in hangi boyutlara göre filtreleme yapacağını anlaması için filtrenin anahtarını gerçek boyutun adıyla eşlemeniz gerekir.

Bu durumda, örneğin Chat bileşeninde, FIELD_FILTER_MAP nesnesi "state.state_name" boyut adını filtrenin anahtarıyla "State 📍" eşler. Ardından showAndSendUserPrompt yöntemi, üzerinde filtre uygulanacak boyutun adını belirlemek için haritayı kullanır.

7. Sohbetten kontrol paneli filtrelerini kontrol etme

Son olarak, yerleştirilmiş kontrol panelinin filtrelerini kontrol etmek için Chat bileşenini nasıl etkinleştireceğimize bakalım.

Hangi filtrelerin ayarlanacağını belirleme

1. Chat bileşeninin streamAndParseResponse yöntemi, her zaman Etkileşimli Analytics'ten gelen veri sonuçlarıyla bir sistem mesajı olup olmadığını kontrol eder.
2. streamAndParseResponse yöntemi, veri sonuçlarıyla bir sistem mesajını ayrıştırdığında verilerdeki boyutların filtrelerdeki boyutlarla eşleşip eşleşmediğini kontrol eder.
3. Bu durumda streamAndParseResponse yöntemi, veri sütunlarını gösterge tablosu filtrelerine dönüştürür. Bu kez yöntem, boyuttan filtrenin anahtarına dönüştürme işlemi için FIELD_FILTER_MAP öğesini tersine kullanır. Filtrenin değerleri, veri sütunundaki değerlerdir.

Filtre değişikliği etkinliğini yerleştirilmiş kontrol paneline gönderme

4. İstenen kontrol paneli filtreleriyle streamAndParseResponse yöntemi, istenen filtrelerle Chat bileşeninin setFilters yöntemini çağırır.
5. Bu işlem, EmbedChat bileşeninin setDashboardFilters yöntemini çağırır. Bu yöntem, Embed SDK'nın send yöntemi kullanılarak filtrelerle birlikte "dashboard:filters:update" ve "dashboard:run" olmak üzere iki etkinliği hemen ardından yerleştirilmiş kontrol paneline gönderir.
6. "dashboard:filters:update" etkinliği, yerleştirilmiş kontrol panelinin filtrelerini değiştirirken "dashboard:run" etkinliği, kontrol panelinin sorgularını yeni filtrelerle yeniden çalıştırır.

"dashboard:run" etkinliğinden sonra "dashboard:filters:update" göndermeniz gerekir. "dashboard:filters:update" etkinliği, kontrol panelinin sorgularını otomatik olarak yeniden çalıştırmaz.

8. Sonuç ve ana fikirler

Etkileşimli Analytics sohbetiyle entegre edilmiş yerleştirilmiş bir Looker kontrol panelinin kendi çalışma örneğini oluşturmuş olmanız gerekir. Yerleştirilmiş Looker kontrol paneliniz ve Etkileşimli Analytics ile doğal dil destekli veri keşfini nasıl etkinleştireceğinizi öğrendiniz.

• Looker Component kitaplığı ile bir sohbet bileşeni oluşturmuş olmanız gerekir.
• Veri keşfini kolaylaştırmak için yerleştirilmiş Looker kontrol panelinizin bağlamını Etkileşimli Analytics'e ilettiniz.
• Verileri incelerken bağlamı iyileştirmek için yerleştirilmiş kontrol panelinizin filtrelerini kontrol etmek üzere Etkileşimli Analytics'i etkinleştirdiniz.

Sırada ne var?

• Etkileşimli Analytics'in özellikleri hakkında daha fazla bilgi edinin.
• Looker Embed Reference örnek uygulamanızı, kendi yerleştirilmiş Looker kontrol panellerinizle çalışacak şekilde güncelleyin.
• Yerel olarak çalışan Looker Embed Reference örnek uygulamanızda bulunan diğer yerleştirme kullanım alanlarını deneyin.