Auf dieser Seite wird beschrieben, wie Sie eine einfache Looker-Erweiterungsvorlage generieren und konfigurieren, der Sie dann Funktionen hinzufügen können.
Wenn Sie eine neue Looker-Erweiterung erstellen möchten, müssen Sie die folgenden Aufgaben ausführen:
- LookML-Projekt mit einer Modelldatei und einer Projektmanifestdatei konfigurieren, das mit Git verbunden ist
- Erweiterungsvorlagendateien generieren
In den folgenden Schritten wird gezeigt, 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 in Ihrem neuen Projekt eine Modelldatei. Klicken Sie dazu oben im Dateibrowser der Looker-IDE auf das Dreipunkt-Menü
+
.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 sie 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 deninclude: "/views/*.view.lkml"
-Parameter 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 anfangs leer. Später in diesem Verfahren kopieren Sie jedoch generierte Inhalte in die Projektmanifestdatei, die den Parameter
application
enthält. Der Parameterapplication
gibt der Erweiterung ein Label, teilt Looker mit, wo sich das JavaScript der Erweiterung befindet, und enthält eine Liste der Berechtigungen für die Erweiterung. Berechtigungen definieren die Looker-Ressourcen, auf die die Erweiterung zugreifen kann. Die Erweiterung kann nur dann auf eine Looker-Ressource zugreifen, wenn diese 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 zugreifen, indem Sie rechts oben in der Looker IDE auf die Schaltfläche Git konfigurieren klicken oder die Seite Projektkonfiguration verwenden, 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 also 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 Entwicklungsserver:
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 den Inhalt von
manifest.lkml
in die Manifestdatei Ihres LookML-Projekts ein:Klicken Sie auf Änderungen speichern, um die Manifestdatei des 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 mit 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.
Ein Git-Repository klonen, um eine Erweiterungsvorlage zu erstellen
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.
Für diesen Vorgang ist Yarn erforderlich. Achten Sie daher darauf, dass Yarn installiert ist.
Klonen Sie das Git-Repository mit dem folgenden Befehl in der lokalen Befehlszeile:
git clone git@github.com:looker-open-source/extension-examples.git
Rufen Sie das Verzeichnis auf, das die Vorlage enthält, die Sie auf Ihrem System installieren möchten. In diesem Beispiel verwenden wir die React- und JavaScript-Erweiterung „Hello World“:
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 den Inhalt von
manifest.lkml
in die Manifestdatei Ihres LookML-Projekts ein:Klicken Sie auf Änderungen speichern, um die Manifestdatei des Projekts zu speichern.
Klicken Sie rechts oben in der LookML-IDE auf LookML prüfen, dann auf Änderungen festschreiben und pushen und 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 mit der Aktualisierungsfunktion Ihres Browsers.
Im Abschnitt Anwendungen des Looker-Hauptmenüs sehen Sie den Namen Ihrer neuen Erweiterung. Dieser wird durch den Parameter
label
in der Projektmanifestdatei bestimmt.Wählen Sie im Bereich Anwendungen die gewünschte Erweiterung aus, um die Ausgabe der Erweiterung aufzurufen.
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 heißt die Datei für die React- und JavaScript-Vorlage „Hello World“ HelloWorld.js
. Wenn Sie diese Datei ändern oder ihr Code hinzufügen, wird die Funktion der Erweiterung geändert oder erweitert.
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önnen Sie die Textausgabe der Erweiterung ändern, indem Sie den Text in der Zeile ändern:
setMessage(`Hello, ${value.display_name}`).
Wenn Sie Funktionen hinzufügen, müssen Sie möglicherweise die Berechtigungen ändern, die Ihrer Erweiterung im Parameter
application
in der Manifestdatei Ihres Projekts gewährt wurden.