Einführung in das Erstellen einer Looker-Erweiterung

Auf dieser Seite wird beschrieben, wie Sie eine einfache Erweiterungsvorlage für Looker erstellen und konfigurieren, der Sie dann Funktionen hinzufügen können.

Wenn Sie eine neue Looker-Erweiterung erstellen möchten, müssen Sie Folgendes tun:

Die folgenden Verfahren zeigen, wie die oben genannten 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 enthält.

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

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

  3. Die neue Modelldatei wird mit den Parametern connection und include 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, weil der Zugriff auf Looker-Berechtigungsdaten über das LookML-Modell erfolgt. Um den Zugriff auf die 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 der Bearbeitung der Modelldatei fertig sind, klicken Sie auf Änderungen speichern.

    Weil für die 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 # 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. Verwenden Sie dazu das + oben im Dateibrowser der Looker-IDE.

    Die Projektmanifestdatei ist anfangs leer, aber später in diesem Verfahren kopieren Sie den generierten Inhalt, der den Parameter application enthält, in Ihre Projektmanifestdatei. Der Parameter application gibt der Erweiterung ein Label, teilt Looker mit, wo das JavaScript der Erweiterung zu finden ist, und stellt eine Liste von Berechtigungen für die Erweiterung bereit. Berechtigungen definieren die Looker-Ressourcen, auf die die Erweiterung zugreifen kann. Die Erweiterung kann erst auf eine Looker-Ressource zugreifen, wenn diese in den Berechtigungen aufgeführt ist.

    Sie können die Manifestdatei jedoch vorerst beibehalten, da Sie den Rest der Datei später in diesen Prozess kopieren.

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

    Sie können die Seite Git konfigurieren aufrufen, indem Sie entweder rechts oben in der Looker-IDE auf die Schaltfläche Git konfigurieren klicken oder indem Sie die Seite Projektkonfiguration verwenden, wie auf der Dokumentationsseite Git-Verbindung einrichten und testen beschrieben.

Nachdem Sie das Projekt für die Erweiterung eingerichtet und mit Git verbunden haben, können Sie die Vorlagendateien für die Erweiterung erstellen.

Vorlagendateien für die Erweiterung werden generiert

Es gibt zwei Möglichkeiten, Codedateien für Vorlagenvorlagen zu generieren:

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

Erweiterungsvorlage mit create-looker-extension erstellen

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

So generieren Sie die Erweiterungsvorlage:

  1. Führen Sie das Dienstprogramm create-looker-extension aus und ersetzen Sie dabei <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. Wählen Sie dann die Sprache und das Framework aus, das Sie für die 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 unter Verwendung des Namens der Erweiterung zu speichern:

  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 nun ausgeführt und stellt den JavaScript-Code 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 die Manifestdatei Ihres Projekts ein:

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

  8. Klicken Sie in der LookML-IDE auf LookML prüfen, dann auf Commit-Änderungen &Push und dann auf Im Produktionssystem bereitstellen.

  9. Aktualisieren Sie Looker mit der Aktualisierungsfunktion Ihres Browsers.

    Im Menü Durchsuchen von Looker sehen Sie den Namen der neuen Erweiterung:

  10. Wählen Sie im Menü Durchsuchen die gewünschte Erweiterung aus, um sich die Ausgabe anzusehen.

Wenn Ihr Administrator die Labs-Funktion Erweiterte Navigation aktiviert hat, werden die Erweiterungen im Bereich Anwendungen des neuen linken Navigationsbereichs aufgelistet.

Git-Repository klonen, um eine Erweiterungsvorlage zu erstellen

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

Dafür ist Yarn erforderlich. Achten Sie daher 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 mit der Vorlage, die Sie auf Ihrem System installieren möchten. In diesem Beispiel verwenden wir die Erweiterung „React“ und „JavaScript 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 Ihre 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 die Manifestdatei Ihres Projekts ein:

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

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

  7. Starten Sie den Nameserver in Ihrem Terminal:

    yarn develop
    

    Die Erweiterung wird nun ausgeführt und stellt den JavaScript-Code auf einem lokalen Nameserver bereit, der im Parameter url der Manifestdatei http://localhost:8080/bundle.js angegeben ist.

  8. Aktualisieren Sie Looker mit der Aktualisierungsfunktion Ihres Browsers.

    Im Menü Durchsuchen von Looker sehen Sie den Namen der neuen Erweiterung, der durch den Parameter label in der Manifestdatei des Projekts festgelegt wird:

  9. Wählen Sie im Menü Durchsuchen die gewünschte Erweiterung aus, um sich die Ausgabe anzusehen.

Wenn Ihr Administrator die Labs-Funktion Erweiterte Navigation aktiviert hat, werden die Erweiterungen im Bereich Anwendungen des neuen linken Navigationsbereichs aufgelistet.

Erweiterung ändern

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

Das Verzeichnis src in Ihrem Erweiterungsverzeichnis enthält die Quelldatei, in der Sie Code hinzufügen können. Im obigen Beispiel lautet die Datei für die Vorlage „React“ und „JavaScript World“ als HelloWorld.js. Durch das Ändern oder Hinzufügen von Code zu dieser Datei wird die Funktion der Erweiterung geändert oder ergänzt.

Hier ist 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 (
    &#60;>
      &#60;ComponentsProvider>
        &#60;Space p="xxxxxlarge" width="100%" height="50vh" around>
          &#60;Text p="xxxxxlarge" fontSize="xxxxxlarge">
            {message}
          &#60;/Text>
        &#60;/Space>
      &#60;/ComponentsProvider>
    &#60;/>
  )
}

Im obigen Beispiel könnten Sie die Textausgabe der Erweiterung ändern, indem Sie den Text in der Zeile setMessage('Hello, ${me.display_name}') ändern.

Wenn du Funktionen hinzufügst, musst du möglicherweise die Berechtigungen für deine Erweiterung im Parameter application deiner Manifestdatei ändern.