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üssen Sie folgende Aufgaben ausführen:

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 Modell- 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 + im oberen Bereich des Dateibrowsers der Looker-IDE.

  3. Die neue Modelldatei wird mit dem Parameter connection und dem Parameter 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, da auf Looker-Berechtigungsdaten über das LookML-Modell zugegriffen werden kann. Wenn Sie den Zugriff auf die Erweiterung verwalten möchten, müssen Sie sie einem gültigen LookML-Modell zuweisen und Nutzern Berechtigungen für den Zugriff auf das Modell erteilen. Nachdem Sie die Modelldatei bearbeitet haben, klicken Sie auf Änderungen speichern.

    Da für die Erweiterung keine Ansichtsdatei erforderlich ist, löschen Sie entweder den Parameter include: "/views/*.view.lkml" oder fügen Sie ein #-Zeichen am Anfang der Zeile ein, um die Zeile zu kommentieren. Wenn Sie den Parameter include: "/views/*.view.lkml" unverändert lassen, werden beim LookML-Validator Fehler generiert.

  4. Erstellen Sie eine Projektmanifestdatei. Verwenden Sie dazu + im oberen Bereich des Dateibrowsers der Looker-IDE.

    Die Projektmanifestdatei ist anfangs leer. Im Laufe dieses Vorgangs kopieren Sie den generierten Inhalt jedoch in die Projektmanifestdatei, die den Parameter application enthält. Mit dem Parameter application erhält die Erweiterung ein Label. Sie teilt Looker mit, wo das JavaScript der Erweiterung zu finden ist, sowie eine Liste von 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 sie in den Berechtigungen aufgeführt ist.

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

  5. Konfigurieren Sie eine Git-Verbindung für das neue 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 indem Sie wie auf der Dokumentationsseite Giterverbindung einrichten und testen beschrieben die Seite Projektkonfiguration verwenden.

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

Dateien mit Vorlagen für die Erweiterung werden generiert

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

Für beide Prozesse ist Yarn erforderlich. Sorgen Sie daher dafür, dass Yarn installiert ist.

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. Sie können diese Erweiterung als Ausgangspunkt verwenden und zusätzlichen Code und 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 <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 an. 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 zu erstellen, und erstellt alle generierten Dateien in einem neuen Verzeichnis, das den Namen der Erweiterung verwendet:

  3. Wechseln Sie zu dem Verzeichnis, das für die Erweiterung erstellt wurde:

    cd <extension_name>
    
  4. Installieren Sie die Abhängigkeiten:

    yarn install
    
  5. Starten Sie den Entwicklungsserver:

    yarn develop
    

    Die Erweiterung wird jetzt ausgeführt und stellt den JavaScript-Code lokal unter http://localhost:8080/bundle.js bereit.

  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 Projektmanifestdatei ein:

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

  8. Klicken Sie in der LookML-IDE auf LookML validieren, dann auf Commit für Änderungen und Übertragung und anschließend auf In Produktion bereitstellen.

  9. Aktualisieren Sie Looker mit der Aktualisierungsfunktion Ihres Browsers.

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

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

Wenn Ihr Administrator die Labs-Funktion Erweiterte Navigation aktiviert hat, werden Erweiterungen im neuen Navigationsbereich auf der linken Seite im Bereich Anwendungen aufgeführt.

Git-Repository zum Erstellen einer Erweiterungsvorlage klonen

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, gehen Sie zum Repository dieses Beispiels und folgen Sie der Anleitung unten.

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

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

    yarn install
    

    Möglicherweise müssen Sie die Knotenversion aktualisieren oder einen Knotenversionsmanager verwenden, um die Knotenversion 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 Projektmanifestdatei 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 Commit für Änderungen und Push-Vorgänge und anschließend auf In Produktion bereitstellen.

  7. Starten Sie den Nameserver in Ihrem Terminal:

    yarn develop
    

    Die Erweiterung wird jetzt ausgeführt und JavaScript wird auf einem lokalen Nameserver ausgeführt, 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 sehen Sie den Namen der neuen Erweiterung, der durch den label-Parameter in Ihrer Projektmanifestdatei bestimmt wird:

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

Wenn Ihr Administrator die Labs-Funktion Erweiterte Navigation aktiviert hat, werden Erweiterungen im neuen Navigationsbereich auf der linken Seite im Bereich Anwendungen aufgeführt.

Erweiterung ändern

Nachdem Sie die grundlegende Erweiterung erstellt haben, können Sie den Code bearbeiten oder Code hinzufügen, indem Sie die entsprechende JavaScript- oder TypeScript-Datei bearbeiten.

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

Unten sehen Sie eine Ausgabe der HelloWorld.js-Datei von React und JavaScript:


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 Beispiel oben könnten Sie den Text der Erweiterung ändern, indem Sie den Text in der Zeile ändern:

setMessage(`Hello, ${value.display_name}`).

Wenn Sie weitere Funktionen hinzufügen, müssen Sie möglicherweise in der Projektmanifestdatei unter application die Berechtigungen für die Erweiterung ändern.