Vous consultez la documentation de Looker 22.16. Pour accéder à la documentation la plus récente, cliquez ici.

Présentation de la création d'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:

Configurer un projet LookML qui comprend un fichier de modèle et un fichier manifeste de projet connecté à Git
Générer les fichiers de modèle d'extension

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 un projet LookML qui comprend un fichier de modèle et un fichier manifeste.

Créez un projet vide pour votre extension.
Dans votre nouveau projet, créez un fichier de modèle à l'aide de + en haut de l'explorateur de fichiers de l'IDE Looker.
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 à la base de données valide de 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 l'autorisation 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 la transformer en commentaire. Si vous laissez le paramètre include: "/views/*.view.lkml" tel quel, l'outil de validation LookML générera des erreurs.
Créez un fichier manifeste de projet à l'aide de + en haut de l'explorateur de fichiers de l'IDE Looker.

Le fichier manifeste de projet est vide pour l'instant. Toutefois, dans la suite de cette procédure, vous allez copier le contenu généré dans celui-ci, 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 des 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 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.
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 sur la page de documentation Configurer et tester une connexion Git.

Une fois le projet de votre extension configuré et associé à 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:

Utiliser l'utilitaire create-looker-extension
Cloner un dépôt Git de modèle d'extension

Ces deux processus nécessitent l'installation de Yarn.

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 supplémentaires pour compléter votre extension.

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

Exécutez l'utilitaire create-looker-extension en remplaçant <extension_name> par le nom de votre extension:
```
yarn create looker-extension <extension_name>
```
Confirmez le nom de l'extension ou indiquez-en un autre, puis sélectionnez la langue 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 qui utilise le nom de l'extension:
Accédez au répertoire qui a été créé pour votre extension:
```
cd <extension_name>
```
Installez les dépendances de l'extension:
```
yarn install
```
Démarrez le serveur de développement:
```
yarn develop
```
L'extension s'exécute et diffuse le code JavaScript localement à l'adresse http://localhost:8080/bundle.js.
Votre répertoire d'extension contient le fichier manifest.lkml. Copiez le contenu de ce fichier.
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.
Dans l'IDE LookML, cliquez sur Validate LookML (Valider LookML), puis sur Commit Changes & Push (Valider les modifications et les transférer). Enfin, cliquez sur Deploy to Production (Déployer en production).
Actualisez Looker à l'aide de la fonction d'actualisation de votre navigateur.

Dans le menu Parcourir de Looker, vous trouverez le nom de votre nouvelle extension:
Sélectionnez votre extension dans le menu Parcourir pour afficher la sortie de l'extension.

Si votre administrateur a activé la fonctionnalité expérimentale Navigation améliorée, les extensions sont répertoriées dans la section Applications du nouveau panneau de navigation amélioré à 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 disponibles à 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, puis suivez les instructions ci-dessous.

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

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
```
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 React et JavaScript "Hello World" :
```
cd extension-examples/react/javascript/helloworld-js
```
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œuds.
Votre répertoire d'extension contient le fichier manifest.lkml. Copiez le contenu de ce fichier.
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.
En haut à droite de l'IDE LookML, cliquez sur Validate LookML (Valider LookML), puis sur Commit Changes & Push (Valider les modifications et les transférer). Enfin, cliquez sur Deploy to Production (Déployer en production).
Dans votre terminal, démarrez le serveur de développement:
```
yarn develop
```
L'extension exécute 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.
Actualisez Looker à l'aide de la fonction d'actualisation de votre navigateur.

Dans le menu Parcourir de Looker, vous trouverez le nom de votre nouvelle extension, qui est déterminé par le paramètre label dans le fichier manifeste de votre projet:
Sélectionnez votre extension dans le menu Parcourir pour afficher la sortie de l'extension.

Si votre administrateur a activé la fonctionnalité expérimentale Navigation améliorée, les extensions sont répertoriées dans la section Applications du nouveau panneau de navigation amélioré à gauche.

Modifier l'extension

Une fois l'extension de base créée, vous pouvez modifier le fichier JavaScript ou TypeScript en lui ajoutant du code.

Le répertoire src situé sous le répertoire de l'extension contient le fichier source dans lequel vous pouvez ajouter du code. Dans l'exemple ci-dessus, le fichier nommé HelloWorld.js est le modèle React et JavaScript "Hello World". Si vous modifiez ou ajoutez du code à ce fichier, la fonction de l'extension sera modifiée ou ajoutée.

Vous trouverez ci-dessous le résultat du fichier HelloWorld.js de 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 (
    &#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;/>
  )
}

Dans l'exemple ci-dessus, vous pouvez modifier la sortie de texte de l'extension en modifiant le texte de la ligne setMessage('Hello, ${me.display_name}').

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