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.

Zum Erstellen einer neuen Looker-Erweiterung 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 erforderlich, das eine Modelldatei und eine Manifestdatei zum Ausführen enthält.

  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 auf Ihrer Instanz. Die Erweiterung erfordert eine gültige Modelldatei, da der Zugriff auf Looker-Berechtigungsdaten über das LookML-Modell erfolgt. Um den Zugriff auf Ihre Erweiterung zu verwalten, müssen Sie die Erweiterung mit einem gültigen LookML-Modell verknüpfen und den Nutzern Berechtigungen für den Zugriff auf dieses Modell gewähren. Wenn Sie mit dem Bearbeiten 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 ein #-Zeichen hinzu, um die Zeile in einen Kommentar umzuwandeln. Wenn Sie den include: "/views/*.view.lkml"-Parameter unverändert lassen, generiert der LookML-Validator Fehler.

  4. Erstellen Sie eine Projektmanifestdatei. Verwenden Sie dazu das + oben im Dateibrowser in der Looker-IDE.

    Die Projektmanifestdatei ist anfangs leer, aber später werden Sie generierte Inhalte in die Projektmanifestdatei kopieren, die den Parameter application enthält. Der application-Parameter gibt 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 Manifest-Datei vorerst so belassen, da Sie den restlichen Inhalt 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, Codedateien mit Erweiterungsvorlagen zu generieren:

Für beide Prozesse ist Yarn erforderlich. Yarn muss also installiert sein.

Mit create-looker-extension eine Erweiterungsvorlage erstellen

Das Dienstprogramm create-looker-extension erstellt eine einfache Looker-Erweiterung, die alle erforderlichen Erweiterungsdateien und Abhängigkeiten enthält. Diese können Sie dann als Ausgangspunkt verwenden und zusätzlichen Code und weitere Funktionen hinzufügen, um Ihre Erweiterung zu vervollständigen.

So generieren Sie die Erweiterungsvorlage:

  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 entweder den Namen der Erweiterung oder geben Sie einen anderen Namen ein. Wählen Sie dann die Sprache und das Framework aus, die bzw. das Sie zum Erstellen der Erweiterung verwenden möchten:

    Das Dienstprogramm create-looker-extension verwendet dann das von Ihnen angegebene Framework, um eine Basisvorlage auszufüllen und alle generierten Dateien in einem neuen Verzeichnis mit dem Namen der Erweiterung zu speichern:

  3. Gehen Sie zu dem 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 lokal unter http://localhost:8080/bundle.js ausgeführt und stellt den JavaScript-Code 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 Manifestdatei Ihres Projekts zu speichern.

  8. Klicken Sie in der LookML-IDE auf LookML validieren, dann auf Commit-Änderungen durchführen und per Push übertragen und dann auf In Produktion bereitstellen.

  9. Aktualisieren Sie Looker mithilfe der Aktualisierungsfunktion Ihres Browsers.

    Im Abschnitt Applications (Anwendungen) des Looker-Hauptmenüs sehen Sie den Namen Ihrer neuen Erweiterung.

  10. Wählen Sie Ihre Erweiterung im Abschnitt Applications (Anwendungen) aus, um die Ausgabe der Erweiterung anzusehen.

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 entsprechende Repository auf und folgen Sie der Anleitung im Folgenden.

Dafür ist Yarn erforderlich. Achten Sie also darauf, dass Yarn installiert ist.

  1. Verwenden Sie in der lokalen Befehlszeile den folgenden Befehl, um das Git-Repository zu klonen:

    git clone git@github.com:looker-open-source/extension-examples.git
    
  2. Gehen 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-Erweiterung „Hello World“:

    cd extension-examples/react/javascript/helloworld-js
    
  3. Installieren Sie die Erweiterungsabhängigkeiten:

    yarn install
    

    Möglicherweise müssen Sie Ihre Knotenversion aktualisieren oder einen Knotenversionsmanager verwenden, um die Knotenversion 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 Manifestdatei Ihres Projekts zu speichern.

  6. Klicken Sie rechts oben in der LookML-IDE auf LookML validieren, dann auf Commit-Änderungen durchführen und per Push übertragen und dann auf In Produktion bereitstellen.

  7. Starten Sie in Ihrem Terminal den Entwicklungsserver:

    yarn develop
    

    Die Erweiterung wird jetzt auf einem lokalen Entwicklungsserver ausgeführt, der im Parameter url der Manifestdatei angegeben ist: http://localhost:8080/bundle.js.

  8. Aktualisieren Sie Looker mithilfe der Aktualisierungsfunktion Ihres Browsers.

    Im Abschnitt Applications (Anwendungen) des Looker-Hauptmenüs sehen Sie den Namen Ihrer neuen Erweiterung, der durch den label-Parameter in Ihrer Projektmanifestdatei bestimmt wird.

  9. Wählen Sie Ihre Erweiterung im Abschnitt Applications (Anwendungen) aus, um die Ausgabe der Erweiterung anzusehen.

Erweiterung ändern

Nachdem Sie die Basiserweiterung erstellt haben, können Sie Code ändern oder hinzufügen, indem Sie die entsprechende JavaScript- oder TypeScript-Datei bearbeiten.

Das Verzeichnis src unter Ihrem Erweiterungsverzeichnis enthält die Quelldatei, in die Sie Code einfügen können. Im vorherigen Beispiel heißt die Datei für die React- und JavaScript-Vorlage „Hello World“ HelloWorld.js. Durch das Ändern oder Hinzufügen von Code in dieser Datei wird die Funktion der Erweiterung geändert oder ergänzt.

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 konnten 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 der Projektmanifestdatei gewährt werden, ändern.