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 construire les éléments précédents.

Configurer Looker pour une extension

Chacune des extensions Looker nécessite un projet LookML comprenant un fichier de modèle et un fichier manifeste pour s'exécuter.

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

  2. Dans votre nouveau projet, créez un fichier de modèle à l'aide du + en haut de l'explorateur de fichiers dans 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 les données d'autorisations Looker sont accessibles 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ès à 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, le validateur LookML générera des erreurs.

  4. Créez un fichier manifeste de projet à l'aide de l'icône + en haut du navigateur de fichiers de l'IDE Looker.

    Le fichier manifeste du projet sera initialement vide, mais plus tard dans cette procédure, vous copierez 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 l'extension JavaScript et fournit une liste des 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 si cette ressource n'est pas répertoriée dans les droits d'accès.

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

  5. Configurez une connexion Git pour votre nouveau projet.

    Pour accéder à la page Configurer Git, cliquez sur le bouton Configurer Git en haut à droite de l'IDE Looker ou utilisez la page 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 l'avez associé à Git, vous pouvez générer les fichiers de 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écessitent Yarn. Assurez-vous donc 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 d'extension et les dépendances nécessaires. Vous pouvez ensuite l'utiliser comme point de départ et ajouter du code et des fonctionnalités supplémentaires pour terminer 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 placer tous les fichiers générés dans un nouveau répertoire portant le nom de l'extension:

  3. Accédez au répertoire 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 s'exécute désormais et diffuse le code JavaScript localement sur http://localhost:8080/bundle.js.

  6. Votre répertoire d'extension 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 Enregistrer les modifications pour enregistrer le fichier manifeste de votre projet.

  8. Dans l'IDE LookML, cliquez sur Valider LookML, puis 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 la section Applications du menu principal de Looker, vous verrez le nom de votre nouvelle extension.

  10. Sélectionnez votre extension dans la section Applications pour afficher sa sortie.

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

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

Cette procédure nécessite Yarn. Assurez-vous donc qu'Yarn est installé.

  1. Sur votre 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" pour 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 Node ou utiliser un gestionnaire de versions de Node pour modifier la version de Node.

  4. Le fichier manifest.lkml se trouve dans votre répertoire d'extension. 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 Enregistrer les modifications pour enregistrer le fichier manifeste de votre projet.

  6. En haut à droite de l'IDE LookML, cliquez sur Validate LookML (Valider LookML), puis sur Commit Changes & (Valider les modifications et) Push, puis sur Deploy to Production (Déployer en production).

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

    yarn develop
    

    L'extension s'exécute désormais 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 la section Applications du menu principal de Looker, vous verrez le nom de votre nouvelle extension, qui est déterminé par le paramètre label dans le fichier manifeste de votre projet.

  9. Sélectionnez votre extension dans la section Applications pour afficher le résultat de l'extension.

Modifier l'extension

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

Le répertoire src sous le répertoire de votre extension contient le fichier source dans lequel vous pouvez ajouter du code. Dans l'exemple précédent, pour le modèle "Hello World" React et JavaScript, le fichier s'appelle HelloWorld.js. Modifier ou ajouter du code à ce fichier modifiera ou ajoutera des fonctionnalités à 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 précédent, vous pouvez modifier la sortie textuelle de l'extension en modifiant le texte de la ligne :

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

N'oubliez pas que lorsque 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.