Looker mit Conversational Analytics einbetten

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie ein eingebettetes Looker-Dashboard mit einem Chat auf Basis von Conversational Analytics integrieren, um eine einheitliche, auf natürlicher Sprache basierende Datenumgebung zu schaffen. Um die Informationen in diesem Artikel bestmöglich nutzen zu können, sollten Sie mit Looker-Einbettung, Conversational Analytics, JavaScript und React vertraut sein.

Lerninhalte

Nach Abschluss dieses Codelabs haben Sie Folgendes gelernt:

• Looker Embed Reference-Anwendung lokal einrichten
• Chat-React-Komponente mit der Looker-Komponentenbibliothek erstellen
• Filter des eingebetteten Dashboards als Kontext an die konversationelle Analyse senden
• Chat mit konversationeller Analyse aktivieren, um Filter in eingebetteten Dashboards zu steuern

Voraussetzungen

Für dieses Codelab benötigen Sie Folgendes:

• Eine Looker-Instanz mit dem ASC Demographic Data Looker Block und aktiviertem SSO-Embedding
• API- und Entwicklerzugriff auf Ihre Looker-Instanz
• Eine lokale Umgebung mit Node v18, Yarn, Git und gcloud
• Ein Cloud-Projekt mit diesen IAM-Rollen, die für Ihr Nutzerkonto eingerichtet sind:
• roles/bigquery.dataViewer BigQuery-Datenbetrachter
• roles/bigquery.user BigQuery-Nutzer
• roles/looker.instanceUser Looker Instance User

2. Konversationelle Analyse einrichten

Wir richten jetzt den Daten-KI-Agenten für Conversational Analytics ein, der vom Chat Ihres eingebetteten Dashboards verwendet wird, um Fragen in natürlicher Sprache zu beantworten.

Authentifizierung mit gcloud

1. Authentifizieren Sie sich mit Ihrem Nutzerkonto in Ihrer lokalen Umgebung:

gcloud auth login

2. Legen Sie Standardanmeldedaten für Anwendungen (Application Default Credentials, ADC) und das Abrechnungsprojekt in Ihrer gcloud-Konfiguration fest:

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

Conversational Analytics APIs aktivieren

3. Aktivieren Sie Cloud-Projekt-APIs. Ersetzen Sie YOUR_PROJECT_ID durch die ID Ihres Google Cloud-Projekts:

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

KI-Datenagenten erstellen

4. Öffnen Sie Google Colab.
5. Laden Sie dieses Notebook in Google Colab aus dem Looker Embed Reference-Repository.
6. Führen Sie alle Schritte im Notebook aus. Sie benötigen Ihre Cloud-Projekt-ID und den URI Ihrer Looker-Instanz mit einem Schrägstrich am Ende, z. B. "https://my.looker.app/". Am Ende des Notebooks sollten Sie ein erfolgreiches Ergebnis erhalten.

Sie haben jetzt einen Data-Agent für konversationelle Analysen, der Chatnachrichten entgegennehmen, die Looker-Explores in Ihrem eingebetteten Looker-Dashboard abfragen und Ergebnisse und Visualisierungen zurückgeben kann.

3. Looker Embed Reference einrichten

Wir richten die Looker Embed Reference-Anwendung in Ihrer lokalen Umgebung ein, damit Sie das Beispiel für die Integration des Conversational Analytics-Chats in ein eingebettetes Looker-Dashboard ausprobieren können.

Repository klonen

1. Klonen Sie das GitHub-Repository in Ihre lokale Umgebung. Hier ein Beispielbefehl:

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

2. Wechseln Sie zum geklonten Verzeichnis LookerEmbedReference:

cd LookerEmbedReference

Lokalen Frontend-Server einrichten und ausführen

3. Installieren Sie die Abhängigkeiten im Verzeichnis Frontend.

cd Frontend
yarn install

4. Richten Sie im Stammverzeichnis Frontend eine .env-Datei mit Anmeldedaten ein. YOUR_LOOKER_INSTANCE_URI sollte der URI Ihrer Looker-Instanz ohne nachgestellten Schrägstrich sein. Der Inhalt der Datei sollte so aussehen:

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

Mit dem folgenden Beispielbefehl können Sie die Datei erstellen:

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. Führen Sie den Frontend-Entwicklungsserver aus:

yarn run dev

Backend-Server lokal einrichten und ausführen

6. Öffnen Sie eine neue Shell, ein neues Terminal, eine neue Konsole oder einen neuen Tab. Wechseln Sie in das Verzeichnis Backend-Node und installieren Sie die Abhängigkeiten. Lassen Sie die vorherige Shell/das vorherige Terminal mit dem ausgeführten Frontend-Server geöffnet.

cd ../Backend-Node
yarn install

7. Richten Sie im Stammverzeichnis des Verzeichnisses Backend-Node eine .env-Datei mit Anmeldedaten ein:

• YOUR_LOOKER_CLIENT_ID ist Ihre Looker-Client-ID.
• YOUR_LOOKER_CLIENT_SECRET ist Ihr Looker-Clientschlüssel.
• YOUR_LOOKER_EMBED_SECRET ist Ihr Einbettungs-Secret.
• YOUR_PROJECT_ID ist die ID Ihres Cloud-Projekts.
• YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH ist der URI Ihrer Looker-Instanz mit einem abschließenden Schrägstrich.
• YOUR_LOOKER_INSTANCE_URI ist der URI Ihrer Looker-Instanz ohne nachgestellten Schrägstrich.

Der Inhalt der Datei sollte so aussehen:

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

Mit dem folgenden Beispielbefehl können Sie die Datei erstellen. Ersetzen Sie alle Anmeldedaten entsprechend:

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. Führen Sie den Backend-Entwicklungsserver aus:

yarn run dev

Der Front-End-Entwicklungsserver wird jetzt ausgeführt und stellt das JavaScript für die Webanwendung bereit. Außerdem muss der Back-End-Entwicklungsserver ausgeführt werden, um SSO-Einbettungs-URL-Anfragen und Proxyanfragen an die Conversational Analytics-Endpunkte zu verarbeiten.

4. Beispiel ausprobieren

Sehen wir uns Ihre Webanwendung an, die jetzt lokal in Ihrer Umgebung ausgeführt wird.

Unterhaltung starten

1. Öffnen Sie die Adresse https://localhost:3001 in Ihrem bevorzugten Browser.
2. Rufen Sie in der linken Hauptnavigation die Seite Eingebettetes Dashboard mit Chat auf.
3. Sobald die Chatkomponente auf der rechten Seite geladen ist, geben Sie Folgendes ein: „Hallo, wer bist du?“
4. Notieren Sie sich die Antwort.

Die Anwendung hat automatisch ein conversation-Objekt für die konversationelle Analyse erstellt, um den Chatverlauf zu erfassen, und die Chatoberfläche geladen. Als Sie dem Chat-Interface eine Frage gestellt haben, hat das Frontend eine Nutzernachricht an Ihren lokalen Node-Backend-Server gesendet. Anschließend wurde die Anfrage an den chat-Endpunkt der konversationellen Analyse weitergeleitet und die Antwort von dort abgerufen.

Eingebettetes Dashboard filtern

Machen Sie sich nun mit dem eingebetteten Dashboard vertraut und interagieren Sie damit.

5. Scrollen Sie durch das eingebettete Dashboard. Sie umfasst Volkszählungsdaten für mehrere Dimensionen und Messwerte.
6. Sie können das Dashboard oben links nach Bundesstaat und Landkreis filtern. Legen Sie den Filter im Dashboard auf Texas fest. Klicken Sie dann auf die kreisförmige Pfeilschaltfläche, die jetzt blau hervorgehoben ist, um das Dashboard noch einmal auszuführen.
7. Beachten Sie, dass die Daten für alle Visualisierungen nach dem Bundesstaat Texas gefiltert werden.

Frage mit Dashboard-Kontext stellen

Nachdem wir das Dashboard gefiltert haben, können wir die Daten darin weiter untersuchen.

8. Geben Sie im Chat „Nenne mir die fünf Landkreise mit den niedrigsten Mieten“ ein.
9. Ihr Prompt für Conversational Analytics enthält jetzt die zusätzlichen Wörter „Filter on dimension ‘state.state_name’ being Texas.“ (Filtere nach der Dimension ‚state.state_name‘ mit dem Wert ‚Texas‘).
10. Beachten Sie, dass die Abfrage und die Daten der Antwort nach dem Bundesstaat Texas gefiltert werden.
11. Außerdem wurde Ihr eingebettetes Dashboard nach der Rückgabe der Daten noch einmal ausgeführt. Der Filter County (Landkreis) wurde dabei auf die fünf Landkreise festgelegt, die in den Daten des Ergebnisses definiert sind.

Sie können die Volkszählungsdaten jetzt weiter untersuchen. Die fünf Landkreise sind bereits für Sie gefiltert.

Glückwunsch! Sie haben ein einfaches Beispiel für ein eingebettetes Dashboard eingerichtet und ausprobiert, das in einen Conversational Analytics-Chat integriert ist.

5. Chatkomponente erstellen

Sehen wir uns an, was im Hintergrund passiert, indem wir uns zuerst die Chat-Komponente ansehen. Wir gehen davon aus, dass Sie wissen, wie Sie ein Looker-Dashboard mit dem Looker Embed SDK einbetten.

Looker-Komponentenbibliothek verwenden

1. Öffnen Sie die Komponentendatei Chat unter Frontend/src/components/EmbedChat/components/chat.js in Ihrer bevorzugten IDE oder in Ihrem Terminal.
2. Die Komponente Chat wird mit standardmäßigen Looker-UI-React-Komponenten aus dem Paket Looker Components Library erstellt.

Die Looker Components Library ermöglicht die nahtlose Integration von Looker-Inhalten in Ihre Anwendung. Sie enthält vorgefertigte React-Komponenten, die den Stilen und Komponenten in einem eingebetteten Looker-Dashboard entsprechen.

Nutzerbenachrichtigung senden

Über die Chat-Benutzeroberfläche muss der Prompt eines Nutzers an Conversational Analytics gesendet werden.

3. Nahe dem unteren Rand der Komponentendatei Chat enthält die Komponente Chat die Unterkomponente ChatInput, die das Eingabefeld für den Prompt eines Nutzers bereitstellt.
4. Beim Senden wird mit der Methode showAndSendUserPrompt der Prompt des Nutzers an Conversational Analytics gesendet (über Ihr Node-Backend).

Systemmeldungen streamen und anzeigen

Nachdem der Nutzer Conversational Analytics eine Nachricht gesendet hat, müssen wir die Antwort anzeigen.

5. Nahe dem unteren Ende der Komponentendatei Chat enthält die Komponente Chat die Unterkomponente MessageList, die die Logik zum Anzeigen der Nachrichten aus Conversational Analytics basierend auf dem Nachrichtentyp enthält.
6. Die Methode streamAndParseResponse verarbeitet die Antwort, indem sie ständig versucht, gültige Systemnachrichten aus der Streaming-JSON-Antwort zu parsen. Jedes Mal, wenn eine gültige Systemmeldung erfolgreich geparst wurde, wird sie in der MessageList angezeigt.

Wir empfehlen Ihnen dringend, die Systemmeldungen aus Conversational Analytics sofort nach Erhalt anzuzeigen, um die Nutzerfreundlichkeit zu verbessern.

Die Antwort von Conversational Analytics auf einen Nutzer-Prompt besteht aus mehreren Systemmeldungen, die die abgefragten Datenquellen, die Abfrage, die Ergebnisse, die Visualisierungen und mehr abdecken. Wenn der Nutzer auf alle Systemnachrichten warten muss, kann er annehmen, dass es Leistungs- oder Anwendungsprobleme gibt.

Sie haben nun gesehen, wie die mit der Looker-Komponentenbibliothek erstellte Chat-Komponente eine Nutzernachricht sendet und die Antwort streamt.

6. Dashboard-Filter an Conversational Analytics senden

Sehen wir uns nun an, wie Sie die Dashboardfilter in den Prompt eines Nutzers einfügen, damit Conversational Analytics die Abfrage mit dem Kontext des Dashboards (seinen Filtern) filtern kann.

Auf das Ereignis für Filteränderungen im Dashboard reagieren

1. Öffnen Sie die Komponentendatei EmbedChat unter Frontend/src/components/EmbedChat/EmbedChat.js,. Sie stellt die Seite der Anwendung mit dem eingebetteten Dashboard dar, das in die zuvor untersuchte Komponente Chat eingebunden ist.
2. Die Komponente EmbedChat wartet mit der Methode .on(...) des Embed SDK auf das Ereignis "dashboard:filters:changed" des eingebetteten Dashboards. Die Komponente speichert dann die aktuellen Filter in ihrem Filterstatus.

Filterstatus an Conversational Analytics senden

3. Die EmbedChat-Komponente übergibt die Filter an die Chat-Komponente, die jeden Filter in einen String wie "Filter on dimension '...' being ..." in der showAndSendUserPrompt-Methode konvertiert, der an den Prompt des Nutzers angehängt werden soll.

Der Name oder Schlüssel eines Dashboard-Filters muss nicht mit dem Namen der tatsächlichen Dimension übereinstimmen. Sie müssen den Schlüssel des Filters dem Namen der tatsächlichen Dimension zuordnen, damit Conversational Analytics weiß, nach welchen Dimensionen gefiltert werden soll.

In diesem Fall wird beispielsweise in der Komponente Chat das FIELD_FILTER_MAP-Objekt dem Dimensionsnamen "state.state_name" den Schlüssel "State 📍" des Filters zugeordnet. Anschließend wird mit der Methode showAndSendUserPrompt der Name der Dimension ermittelt, nach der gefiltert werden soll.

7. Dashboard-Filter über den Chat steuern

Sehen wir uns zum Schluss an, wie Sie die Chat-Komponente aktivieren, um die Filter des eingebetteten Dashboards zu steuern.

Festlegen, welche Filter eingerichtet werden sollen

1. Die streamAndParseResponse-Methode der Chat-Komponente prüft immer auf eine Systemmeldung mit den Daten aus der konversationellen Analyse.
2. Wenn mit der Methode streamAndParseResponse eine Systemmeldung mit Datenresultaten geparst wird, wird geprüft, ob Dimensionen in den Daten den Dimensionen in den Filtern entsprechen.
3. Wenn ja, werden die Datenspalten mit der Methode streamAndParseResponse in Dashboardfilter umgewandelt. Dieses Mal wird die Methode FIELD_FILTER_MAP wieder verwendet, aber in umgekehrter Richtung. Sie wandelt den Dimensionsnamen in den Schlüssel des Filters um. Die Werte des Filters sind die Werte in der Datenspalte.

Ereignis für Filteränderung an eingebettetes Dashboard senden

4. Mit den gewünschten Dashboard-Filtern ruft die Methode streamAndParseResponse die Methode setFilters der Komponente Chat mit den gewünschten Filtern auf.
5. Dadurch wird die Methode setDashboardFilters der Komponente EmbedChat aufgerufen, mit der zwei Ereignisse gesendet werden: "dashboard:filters:update" mit den Filtern und "dashboard:run" an das eingebettete Dashboard. Dies geschieht unmittelbar nacheinander mit der Methode send des Embed SDK.
6. Mit dem Ereignis "dashboard:filters:update" werden die Filter des eingebetteten Dashboards geändert, während mit dem Ereignis "dashboard:run" die Abfragen des Dashboards mit den neuen Filtern noch einmal ausgeführt werden.

Sie müssen das "dashboard:run" nach dem Ereignis "dashboard:filters:update" senden. Beim "dashboard:filters:update"-Ereignis werden die Abfragen des Dashboards nicht automatisch noch einmal ausgeführt.

8. Fazit und wichtige Punkte

Sie haben ein eigenes Arbeitsbeispiel für ein eingebettetes Looker-Dashboard eingerichtet, das in den Chat der konversationellen Analyse integriert ist. Sie haben gelernt, wie Sie die datengesteuerte explorative Datenanalyse in natürlicher Sprache mit Ihrem eingebetteten Looker-Dashboard und der konversationellen Analyse aktivieren.

• Sie haben eine Chatkomponente mit der Looker-Komponentenbibliothek erstellt.
• Sie haben den Kontext Ihres eingebetteten Looker-Dashboards an die konversationelle Analyse übergeben, um die Datenexploration zu vereinfachen.
• Sie haben die konversationelle Analyse aktiviert, um die Filter Ihres eingebetteten Dashboards zu steuern und so beim Untersuchen von Daten mehr Kontext zu erhalten.

Nächste Schritte

• Weitere Informationen zu den Funktionen von Conversational Analytics
• Aktualisieren Sie die Beispielanwendung Looker Embed Reference, damit sie mit Ihren eigenen eingebetteten Looker-Dashboards funktioniert.
• Probieren Sie die anderen Einbettungsanwendungsfälle aus, die in der lokal ausgeführten Beispiel-App Looker Embed Reference verfügbar sind.