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:

In den folgenden Anleitungen wird beschrieben, wie Sie die oben genannten Elemente erstellen.

Looker für eine Erweiterung konfigurieren

Für jede Looker-Erweiterung ist 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. 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 über das LookML-Modell auf Looker-Berechtigungsdaten zugegriffen wird. Wenn Sie den Zugriff auf Ihre Erweiterung verwalten möchten, müssen Sie die Erweiterung einem gültigen LookML-Modell zuordnen und Nutzern Berechtigungen für den Zugriff auf dieses Modell gewähren. 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 einem Kommentar zu machen. Wenn Sie den include: "/views/*.view.lkml"-Parameter unverändert lassen, werden vom LookML-Validator Fehler generiert.

  4. Erstellen Sie eine Projektmanifestdatei mit dem + oben im Dateibrowser in der Looker-IDE.

    Die Projektmanifestdatei ist anfangs leer. Später in diesem Verfahren kopieren Sie generierte Inhalte in Ihre Projektmanifestdatei, die den Parameter application enthält. Der Parameter application weist der Erweiterung ein Label zu, gibt an, 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 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 werden.

  5. Konfigurieren Sie eine Git-Verbindung für Ihr neues Projekt.

    Sie können auf die Seite Git konfigurieren zugreifen, indem Sie entweder 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.

Erweiterungsvorlagendateien generieren

Es gibt zwei Möglichkeiten, Code-Dateien für Erweiterungsvorlagen zu generieren:

Für beide Prozesse ist Yarn erforderlich. Achten Sie also darauf, dass Yarn installiert ist.

Erstellen einer Erweiterungsvorlage mit create-looker-extension

Mit dem Dienstprogramm create-looker-extension wird eine einfache Looker-Erweiterung mit allen erforderlichen Erweiterungsdateien und ‑abhängigkeiten erstellt. Sie können diesen Code dann als Ausgangspunkt verwenden und zusätzlichen Code und zusätzliche Funktionen hinzufügen, um die Erweiterung fertigzustellen.

So generieren Sie die Erweiterungsvorlage:

  1. Führen Sie das create-looker-extension-Tool aus und ersetzen Sie <extension_name> durch den Namen Ihrer Erweiterung:

    yarn create looker-extension <extension_name>
    
  2. Bestätigen Sie entweder den Erweiterungsnamen oder geben Sie einen anderen Namen ein. 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 legen:

  3. Wechseln Sie in das Verzeichnis, 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 stellt das JavaScript lokal unter http://localhost:8080/bundle.js bereit.

  6. In Ihrem 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 Ihre Projektmanifestdatei ein:

    Klicken Sie auf Änderungen speichern, um die Projektmanifestdatei zu speichern.

  8. Klicken Sie in der LookML IDE auf LookML validieren, dann auf Änderungen committen und pushen und schließlich auf In der Produktion bereitstellen.

  9. Aktualisieren Sie Looker mit der Aktualisierungsfunktion Ihres Browsers.

    Im Hauptmenü von Looker wird im Bereich Anwendungen der Name Ihrer neuen Erweiterung angezeigt.

  10. Wählen Sie Ihre Erweiterung im Bereich Anwendungen aus, um die Ausgabe der Erweiterung aufzurufen.

Git-Repository klonen, um eine Erweiterungsvorlage zu erstellen

Looker unterhält ein Git-Repository mit mehreren Erweiterungsvorlagen unter https://github.com/looker-open-source/extension-examples. Wenn Sie eines der Beispiele verwenden möchten, rufen Sie das Repository des Beispiels auf und folgen Sie der Anleitung.

Für dieses Verfahren ist Yarn erforderlich. Achten Sie also 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. Rufen Sie das Verzeichnis auf, das die Vorlage enthält, die Sie auf Ihrem System installieren möchten. In diesem Beispiel verwenden wir die „Hello World“-Erweiterung für React und JavaScript:

    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-Versionsmanager verwenden, um Ihre Node-Version zu ändern.

  4. In Ihrem 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 Ihre Projektmanifestdatei ein:

    Klicken Sie auf Änderungen speichern, um die Projektmanifestdatei zu speichern.

  6. Klicken Sie rechts oben in der LookML IDE auf LookML validieren, dann auf Änderungen committen und pushen und schließlich auf In der Produktionsumgebung 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 Manifestdatei Ihres Projekts bestimmt.

  9. Wählen Sie Ihre Erweiterung im Bereich Anwendungen 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 in Ihrem Erweiterungsverzeichnis enthält die Quelldatei, in die Sie Code einfügen können. Im vorherigen Beispiel für die React- und JavaScript-Vorlage „Hello World“ heißt die Datei HelloWorld.js. Wenn Sie Code in dieser Datei ändern oder hinzufügen, wird die Funktion der Erweiterung geändert oder erweitert.

Im Folgenden sehen Sie die Ausgabe der React- und JavaScript-Datei HelloWorld.js:


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