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.

Um eine neue Looker-Erweiterung zu erstellen, müssen Sie die folgenden Aufgaben ausführen:

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.

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

  2. Erstellen Sie eine Modelldatei in Ihrem neuen Projekt. Verwenden Sie dazu das + oben im Dateibrowser in der Looker IDE.

  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 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 Parameter include: "/views/*.view.lkml" 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 anfänglich leer. Später in diesem Verfahren kopieren Sie jedoch die generierten Inhalte in Ihre Projektmanifestdatei, die den Parameter application enthält. Der Parameter application 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.

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

  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 Entwicklungsteam:

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

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

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.

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

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

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

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