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 précédents.

Configurer Looker pour une extension

L'exécution des extensions Looker nécessite chacune un projet LookML comprenant 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 à l'aide de + 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 des autorisations Looker sont accessibles par le biais du modèle LookML. Pour gérer l'accès à votre extension, vous devez l'associer à un modèle LookML valide et autoriser les utilisateurs à accéder à ce modèle. Lorsque vous avez terminé de modifier le fichier du 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 la transformer en 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 + en haut de l'explorateur de fichiers dans l'IDE Looker.

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

    Vous pouvez conserver le fichier manifeste tel quel pour le moment, car vous y copierez le reste du contenu plus tard au cours de cette procédure.

  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 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 pour votre extension et que vous l'avez connecté à 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 toutes 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 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 utilisera ensuite le framework que vous avez spécifié pour renseigner un modèle de base et placera tous les fichiers générés dans un nouveau répertoire portant 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 désormais en cours d'exécution et diffuse le code JavaScript localement à 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 Validate LookML (Valider LookML), puis sur Commit Changes & Push (Valider les modifications et envoyer), et enfin sur Deploy to Production (Déployer en production).

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

    Le nom de votre nouvelle extension s'affiche dans la section Applications du menu principal de Looker.

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

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 présentés, accédez au dépôt de cet exemple et suivez les instructions ci-dessous.

Cette procédure nécessite Yarn. Assurez-vous donc que 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 utiliserons l'extension "Hello World" de 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 du 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. Dans l'angle supérieur droit de l'IDE LookML, cliquez sur Validate LookML (Valider LookML), puis sur Commit Changes & Push (Valider les modifications et transférer) et sur Deploy to Production (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 la section Applications du menu principal de Looker, vous verrez le nom de votre nouvelle extension. Il 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 la sortie associée.

Modifier l'extension

Une fois que vous avez créé l'extension de base, 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 d'extension contient le fichier source dans lequel vous pouvez ajouter du code. Dans l'exemple précédent, pour le modèle "Hello World" de React et JavaScript, le fichier s'appelle HelloWorld.js. Si vous modifiez ou ajoutez du code dans ce fichier, la fonction de l'extension sera modifiée ou ajoutée.

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 pouviez modifier le texte de sortie de l'extension en modifiant le texte de la ligne:

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

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