Créer une extension Looker

Cette page explique comment générer et configurer un modèle d'extension Looker de base, auquel vous pouvez ensuite ajouter des fonctionnalités.

Pour créer une extension Looker, vous devez effectuer les tâches suivantes:

Les procédures suivantes montrent comment créer les éléments ci-dessus.

Configurer Looker pour une extension

Pour pouvoir s'exécuter, les extensions Looker nécessitent tous un projet LookML qui inclut un fichier de modèle et un fichier manifeste.

  1. Créez un projet vide pour votre extension.

  2. Dans votre nouveau projet, créez un fichier de modèle en utilisant + en haut de l'explorateur de fichiers de l'IDE Looker.

  3. Le nouveau fichier de modèle est généré avec un paramètre connection et un paramètre include:

    Remplacez connection_name dans le paramètre connection par le nom d'une connexion de base de données valide sur votre instance. L'extension nécessite un fichier de modèle valide, car l'accès aux données d'autorisations Looker s'effectue via le modèle LookML. Pour gérer l'accès à votre extension, vous devez l'associer à un modèle LookML valide et accorder aux utilisateurs les autorisations d'accéder à ce modèle. Lorsque vous avez terminé de modifier le fichier de modèle, cliquez sur Enregistrer les modifications.

    Étant donné que votre extension ne nécessite pas de fichier de vue, supprimez le paramètre include: "/views/*.view.lkml" ou ajoutez un caractère # au début de la ligne pour en faire un commentaire. Si vous laissez le paramètre include: "/views/*.view.lkml" tel quel, l'outil de validation LookML générera des erreurs.

  4. Créez un fichier manifeste de projet à l'aide de + en haut de l'explorateur de fichiers de l'IDE Looker.

    Le fichier manifeste du projet sera initialement vide, mais plus tard dans cette procédure, vous allez copier le contenu généré dans le fichier manifeste du projet qui inclura le paramètre application. Le paramètre application attribue un libellé à l'extension, indique à Looker où trouver le JavaScript de l'extension et fournit une liste de droits d'accès pour l'extension. Les droits d'accès définissent les ressources Looker auxquelles l'extension peut accéder. L'extension ne pourra pas accéder à une ressource Looker, sauf si cette ressource est répertoriée dans les droits d'accès.

    Vous pouvez conserver le fichier manifeste tel quel, car vous y copierez le reste du contenu plus tard dans le processus.

  5. Configurez une connexion Git pour votre nouveau projet.

    Vous pouvez accéder à la page Configurer Git en cliquant sur le bouton Configurer Git en haut à droite de l'IDE Looker, ou en utilisant la page de Configuration du projet, comme décrit dans la page de documentation Configurer et tester une connexion Git.

Une fois que vous avez configuré le projet de votre extension et que vous l'avez connecté à Git, vous pouvez générer les fichiers du modèle d'extension.

Générer les fichiers de modèle d'extension

Il existe deux façons de générer des fichiers de code de modèle d'extension:

Les deux processus nécessitant Yarn, assurez-vous que Yarn est installé.

Utiliser create-looker-extension pour créer un modèle d'extension

L'utilitaire create-looker-extension crée une extension Looker de base qui inclut tous les fichiers et dépendances d'extension nécessaires. Vous pouvez ensuite l'utiliser comme point de départ et ajouter du code et des fonctionnalités pour compléter votre extension.

Pour générer le modèle d'extension:

  1. Exécutez l'utilitaire create-looker-extension en remplaçant <extension_name> par le nom de votre extension:

    yarn create looker-extension <extension_name>
    
  2. Confirmez le nom de l'extension ou indiquez-en un autre, puis sélectionnez le langage et le framework que vous souhaitez utiliser pour créer l'extension:

    L'utilitaire create-looker-extension utilise ensuite le framework que vous avez spécifié pour renseigner un modèle de base et place tous les fichiers générés dans un nouveau répertoire utilisant le nom de l'extension:

  3. Accédez au répertoire qui a été créé pour votre extension:

    cd <extension_name>
    
  4. Installez les dépendances de l'extension:

    yarn install
    
  5. Démarrez le serveur de développement:

    yarn develop
    

    L'extension est maintenant en cours d'exécution et diffuse le JavaScript en local à l'adresse http://localhost:8080/bundle.js.

  6. Votre répertoire d'extensions contient le fichier manifest.lkml. Copiez le contenu de ce fichier.

  7. Dans votre projet LookML, collez le contenu de manifest.lkml dans le fichier manifeste de votre projet:

    Cliquez sur Save Changes (Enregistrer les modifications) pour enregistrer le fichier manifeste de votre projet.

  8. Dans l'IDE LookML, cliquez sur Valider LookML, sur Valider les modifications et transférer, puis sur Déployer en production.

  9. Actualisez Looker à l'aide de la fonction d'actualisation de votre navigateur.

    Dans le menu Parcourir de Looker, vous verrez le nom de votre nouvelle extension:

  10. Sélectionnez votre extension dans le menu Parcourir pour afficher la sortie de l'extension.

Si votre administrateur a activé la fonctionnalité Fonctionnalités expérimentales Navigation améliorée, les extensions sont listées dans la section Applications du nouveau panneau amélioré de navigation de gauche.

Cloner un dépôt Git pour créer un modèle d'extension

Looker gère un dépôt Git avec plusieurs modèles d'extension à l'adresse https://github.com/looker-open-source/extension-examples. Si vous souhaitez utiliser l'un des exemples, accédez au dépôt de l'exemple ci-dessous.

Cette procédure nécessitant Yarn, assurez-vous que Yarn est installé.

  1. Sur la ligne de commande locale, exécutez la commande suivante pour cloner le dépôt Git:

    git clone git@github.com:looker-open-source/extension-examples.git
    
  2. Accédez au répertoire qui contient le modèle que vous souhaitez installer sur votre système. Dans cet exemple, nous allons utiliser l'extension "Hello World" dans React et JavaScript:

    cd extension-examples/react/javascript/helloworld-js
    
  3. Installez les dépendances de l'extension:

    yarn install
    

    Vous devrez peut-être mettre à jour la version de votre nœud ou utiliser un gestionnaire de versions de nœud.

  4. Votre répertoire d'extensions contient le fichier manifest.lkml. Copiez le contenu de ce fichier.

  5. Dans votre projet LookML, collez le contenu de manifest.lkml dans le fichier manifeste de votre projet:

    Cliquez sur Save Changes (Enregistrer les modifications) pour enregistrer le fichier manifeste de votre projet.

  6. En haut à droite de l'IDE LookML, cliquez sur Valider LookML, puis sur Valider les modifications et transférer, et enfin sur Déployer en production.

  7. Dans votre terminal, démarrez le serveur de développement:

    yarn develop
    

    L'extension est désormais en cours d'exécution et diffuse le code JavaScript sur un serveur de développement local spécifié dans le paramètre url du fichier manifeste: http://localhost:8080/bundle.js.

  8. Actualisez Looker à l'aide de la fonction d'actualisation de votre navigateur.

    Dans le menu Parcourir de Looker, vous verrez le nom de votre nouvelle extension, déterminé par le paramètre label dans le fichier manifeste de votre projet:

  9. Sélectionnez votre extension dans le menu Parcourir pour afficher la sortie de l'extension.

Si votre administrateur a activé la fonctionnalité Fonctionnalités expérimentales Navigation améliorée, les extensions sont listées dans la section Applications du nouveau panneau amélioré de navigation de gauche.

Modifier l'extension

Une fois l'extension de base créée, vous pouvez modifier le fichier JavaScript ou TypeScript approprié, ou y ajouter du code.

Le répertoire src situé sous le répertoire d'extension contient le fichier source dans lequel vous pouvez ajouter du code. Dans l'exemple ci-dessus, pour le modèle "Hello World" de React et de JavaScript, le fichier s'appelle HelloWorld.js. La modification ou l'ajout de code à ce fichier modifie ou ajoute une fonction à l'extension.

Voici la sortie du fichier HelloWorld.js React et 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>
    </>
  )
}

Dans l'exemple ci-dessus, vous pouvez changer la sortie textuelle de l'extension en modifiant le texte de la ligne:

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

N'oubliez pas qu'à mesure que vous ajoutez des fonctionnalités, vous devrez peut-être modifier les droits d'accès accordés à votre extension dans le paramètre application du fichier manifeste de votre projet.