Auf dieser Seite wird beschrieben, wie Sie eine einfache Looker-Erweiterungsvorlage generieren und konfigurieren, der Sie dann Funktionen hinzufügen können.
Um eine neue Looker-Erweiterung zu erstellen, müssen Sie die folgenden Aufgaben ausführen:
- Ein LookML-Projekt konfigurieren, das eine Modelldatei und eine Projektmanifestdatei enthält und mit Git verbunden ist
- Erweiterungsvorlagendateien generieren
Die folgenden Verfahren zeigen, wie die vorherigen Elemente erstellt werden.
Looker für eine Erweiterung konfigurieren
Für Looker-Erweiterungen ist jeweils ein LookML-Projekt mit einer Modelldatei und einer Manifestdatei erforderlich.
Erstellen Sie ein leeres Projekt für Ihre Erweiterung.
Erstellen Sie eine Modelldatei in Ihrem neuen Projekt. Verwenden Sie dazu das
+
oben im Dateibrowser in der Looker IDE.Die neue Modelldatei wird mit einem
connection
-Parameter und eineminclude
-Parameter generiert:Ersetzen Sie
connection_name
im Parameterconnection
durch den Namen einer gültigen Datenbankverbindung in Ihrer Instanz. Für die Erweiterung ist eine gültige Modelldatei erforderlich, da auf Looker-Berechtigungsdaten über das LookML-Modell zugegriffen wird. Wenn Sie den Zugriff auf Ihre Erweiterung verwalten möchten, müssen Sie die Erweiterung mit einem gültigen LookML-Modell verknüpfen und Nutzern Berechtigungen für den Zugriff auf dieses Modell erteilen. Wenn Sie mit der Bearbeitung der Modelldatei fertig sind, klicken Sie auf Änderungen speichern.Da für Ihre Erweiterung keine Ansichtsdatei erforderlich ist, löschen Sie entweder den Parameter
include: "/views/*.view.lkml"
oder fügen Sie am Anfang der Zeile das Zeichen#
ein, um die Zeile zu kommentieren. Wenn Sie den Parameterinclude: "/views/*.view.lkml"
unverändert lassen, generiert der LookML-Validator Fehler.Erstellen Sie eine Projektmanifestdatei. Klicken Sie dazu oben im Dateibrowser der Looker-IDE auf das Dreipunkt-Menü
+
.Die Projektmanifestdatei ist anfänglich leer. Später in diesem Verfahren kopieren Sie jedoch die generierten Inhalte in Ihre Projektmanifestdatei, die den Parameter
application
enthält. Der Parameterapplication
verleiht der Erweiterung ein Label, teilt Looker mit, wo das JavaScript der Erweiterung zu finden ist, und stellt eine Liste der Berechtigungen für die Erweiterung bereit. Berechtigungen definieren die Looker-Ressourcen, auf die die Erweiterung zugreifen kann. Die Erweiterung kann nur dann auf eine Looker-Ressource zugreifen, wenn diese Ressource in den Berechtigungen aufgeführt ist.Sie können die Manifestdatei vorerst so lassen, da Sie den Rest des Inhalts der Datei später in diese Datei kopieren.
Konfigurieren Sie eine Git-Verbindung für Ihr neues Projekt.
Sie können auf die Seite Git konfigurieren entweder über die Schaltfläche Git konfigurieren rechts oben in der Looker IDE oder über die Seite Projektkonfiguration zugreifen, wie auf der Dokumentationsseite Git-Verbindung einrichten und testen beschrieben.
Nachdem Sie das Projekt für Ihre Erweiterung eingerichtet und mit Git verbunden haben, können Sie die Vorlagendateien für die Erweiterung generieren.
Vorlagendateien für die Erweiterung generieren
Es gibt zwei Möglichkeiten, Codedateien für Erweiterungsvorlagen zu generieren:
Für beide Prozesse ist Yarn erforderlich. Achten Sie daher darauf, dass Yarn installiert ist.
Mit create-looker-extension
eine Erweiterungsvorlage erstellen
Das Dienstprogramm create-looker-extension
erstellt eine einfache Looker-Erweiterung mit allen erforderlichen Erweiterungsdateien und Abhängigkeiten. Sie können dies dann als Ausgangspunkt verwenden und zusätzliche Code- und Funktionselemente hinzufügen, um die Erweiterung fertigzustellen.
So generieren Sie die Vorlage für die Erweiterung:
Führen Sie das Dienstprogramm
create-looker-extension
aus und ersetzen Sie<extension_name>
durch den Namen Ihrer Erweiterung:yarn create looker-extension <extension_name>
Bestätigen Sie den Namen der Erweiterung oder geben Sie einen anderen Namen ein und wählen Sie dann die Sprache und das Framework aus, mit denen Sie die Erweiterung erstellen möchten:
Das Dienstprogramm
create-looker-extension
verwendet dann das von Ihnen angegebene Framework, um eine Basisvorlage zu erstellen und alle generierten Dateien in ein neues Verzeichnis mit dem Namen der Erweiterung zu verschieben:Rufen Sie das Verzeichnis auf, das für Ihre Erweiterung erstellt wurde:
cd <extension_name>
Installieren Sie die Erweiterungsabhängigkeiten:
yarn install
Starten Sie den Entwicklungsteam:
yarn develop
Die Erweiterung wird jetzt ausgeführt und das JavaScript wird lokal unter
http://localhost:8080/bundle.js
bereitgestellt.Im Erweiterungsverzeichnis befindet sich die Datei
manifest.lkml
. Kopieren Sie den Inhalt dieser Datei.Fügen Sie in Ihrem LookML-Projekt den Inhalt von
manifest.lkml
in die Manifestdatei Ihres Projekts ein:Klicken Sie auf Save Changes (Änderungen speichern), um die Manifestdatei Ihres Projekts zu speichern.
Klicken Sie in der LookML-IDE auf LookML prüfen, dann auf Änderungen festschreiben und pushen und dann auf In Produktion bereitstellen.
Aktualisieren Sie Looker mithilfe der Aktualisierungsfunktion Ihres Browsers.
Im Bereich Anwendungen des Looker-Hauptmenüs sehen Sie den Namen Ihrer neuen Erweiterung.
Wählen Sie im Bereich Anwendungen die gewünschte Erweiterung aus, um die Ausgabe der Erweiterung aufzurufen.
Git-Repository zum Erstellen einer Erweiterungsvorlage klonen
Looker verwaltet ein Git-Repository mit mehreren Erweiterungsvorlagen unter https://github.com/looker-open-source/extension-examples. Wenn Sie eines der Beispiele dort verwenden möchten, rufen Sie das Repository des Beispiels auf und folgen Sie der Anleitung unten.
Hierfür ist Yarn erforderlich. Achten Sie darauf, dass Yarn installiert ist.
Verwenden Sie in Ihrer lokalen Befehlszeile den folgenden Befehl, um das Git-Repository zu klonen:
git clone git@github.com:looker-open-source/extension-examples.git
Wechseln Sie zu dem Verzeichnis, das die Vorlage enthält, die Sie auf Ihrem System installieren möchten. In diesem Beispiel verwenden wir die React- und JavaScript-Datei „Hello World“ Erweiterung:
cd extension-examples/react/javascript/helloworld-js
Installieren Sie die Erweiterungsabhängigkeiten:
yarn install
Möglicherweise müssen Sie Ihre Node-Version aktualisieren oder einen Node-Versionenmanager verwenden, um die Node-Version zu ändern.
Im Erweiterungsverzeichnis befindet sich die Datei
manifest.lkml
. Kopieren Sie den Inhalt dieser Datei.Fügen Sie in Ihrem LookML-Projekt den Inhalt von
manifest.lkml
in die Manifestdatei Ihres Projekts ein:Klicken Sie auf Save Changes (Änderungen speichern), um die Manifestdatei Ihres Projekts zu speichern.
Klicken Sie rechts oben in der LookML-IDE auf Verify LookML (LookML validieren). Klicken Sie dann auf Commit Changes & Senden und klicken Sie dann auf In Produktion bereitstellen.
Starten Sie den Entwicklungsserver im Terminal:
yarn develop
Die Erweiterung wird jetzt ausgeführt und stellt das JavaScript auf einem lokalen Entwicklungsserver bereit, der im Parameter
url
der Manifestdatei angegeben ist:http://localhost:8080/bundle.js
.Aktualisieren Sie Looker mithilfe der Aktualisierungsfunktion Ihres Browsers.
Im Abschnitt Anwendungen des Looker-Hauptmenüs sehen Sie den Namen der neuen Erweiterung, der durch den Parameter
label
in Ihrer Projektmanifestdatei bestimmt wird.Wählen Sie Ihre Erweiterung im Abschnitt Anwendungen aus, um sich deren Ausgabe anzeigen zu lassen.
Erweiterung ändern
Nachdem Sie die grundlegende Erweiterung erstellt haben, können Sie den Code ändern oder hinzufügen, indem Sie die entsprechende JavaScript- oder TypeScript-Datei bearbeiten.
Das Verzeichnis src
im Erweiterungsverzeichnis enthält die Quelldatei, in der Sie Code hinzufügen können. Im vorherigen Beispiel wurde „Hello World“ für die React- und JavaScript-Datei „Hello World“ hat, heißt die Datei HelloWorld.js
. Durch das Ändern oder Hinzufügen von Code zu dieser Datei wird die Funktion der Erweiterung geändert oder ergänzt.
Im Folgenden sehen Sie die Ausgabe der React- und JavaScript-HelloWorld.js
-Datei:
import React, { useEffect, useState, useContext } from 'react'
import { Space, ComponentsProvider, Text } from '@looker/components'
import { ExtensionContext } from '@looker/extension-sdk-react'
export const HelloWorld = () => {
const { core40SDK } = useContext(ExtensionContext)
const [message, setMessage] = useState()
useEffect(() => {
const initialize = async () => {
try {
const value = await core40SDK.ok(core40SDK.me())
setMessage(`Hello, ${value.display_name}`)
} catch (error) {
setMessage('Error occured getting information about me!')
console.error(error)
}
}
initialize()
}, [])
return (
<>
<ComponentsProvider>
<Space p="xxxxxlarge" width="100%" height="50vh" around>
<Text p="xxxxxlarge" fontSize="xxxxxlarge">
{message}
</Text>
</Space>
</ComponentsProvider>
</>
)
}
Im vorherigen Beispiel könnten Sie die Textausgabe der Erweiterung ändern, indem Sie den Text in der Zeile ändern:
setMessage(`Hello, ${value.display_name}`).
Wenn du Funktionen hinzufügst, musst du möglicherweise die Berechtigungen, die deiner Erweiterung im Parameter
application
in deiner Projektmanifestdatei gewährt werden, ändern.