Looker-Erweiterung erstellen

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.

1. Erstellen Sie ein leeres Projekt für Ihre Erweiterung.

2. Erstellen Sie in Ihrem neuen Projekt eine Modelldatei. Klicken Sie dazu oben im Dateibrowser der Looker-IDE auf das Dreipunkt-Menü +.

3. Die neue Modelldatei wird mit einem connection-Parameter und einem include-Parameter generiert:

   

   Ersetzen Sie connection_name im Parameter connection 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 den include: "/views/*.view.lkml"-Parameter unverändert lassen, generiert der LookML-Validator Fehler.

4. 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 Parameter application 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.

5. 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:

• Mit dem Dienstprogramm create-looker-extension
• Git-Repository einer Erweiterungsvorlage klonen

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:

1. 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>
   

2. 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:

   

3. Rufen Sie das Verzeichnis auf, das für Ihre Erweiterung erstellt wurde:

   cd <extension_name>
   

4. Installieren Sie die Erweiterungsabhängigkeiten:

   yarn install
   

5. Starten Sie den Entwicklungsserver:

   yarn develop
   

   Die Erweiterung wird jetzt ausgeführt und das JavaScript wird lokal unter http://localhost:8080/bundle.js bereitgestellt.

6. Im Erweiterungsverzeichnis befindet sich die Datei manifest.lkml. Kopieren Sie den Inhalt dieser Datei.

7. 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.

   Hinweis: Der Inhalt der generierten manifest.lkml-Datei enthält den project_name-LookML-Parameter. Der Parameter project_name wird von der Funktion „Lokales Projekt importieren“ verwendet. Weitere Informationen zum Importieren von Projekten finden Sie auf der Dokumentationsseite Dateien aus anderen Projekten importieren.

8. Klicken Sie in der LookML-IDE auf LookML prüfen, dann auf Änderungen festschreiben und pushen und dann auf In Produktion bereitstellen.

9. Aktualisieren Sie Looker mit der Aktualisierungsfunktion Ihres Browsers.

   Im Bereich Anwendungen des Looker-Hauptmenüs sehen Sie den Namen Ihrer neuen Erweiterung.

10. 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.

1. Klonen Sie das Git-Repository mit dem folgenden Befehl in der lokalen Befehlszeile:

   git clone [e-mail]:looker-open-source/extension-examples.git
   

2. 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
   

3. 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.

4. Im Erweiterungsverzeichnis befindet sich die Datei manifest.lkml. Kopieren Sie den Inhalt dieser Datei.

5. 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.

6. Klicken Sie rechts oben in der LookML-IDE auf LookML prüfen, dann auf Änderungen festschreiben und pushen und dann auf In Produktion bereitstellen.

7. 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.

8. 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.

9. 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.