Cette page a été traduite par l'API Cloud Translation.

Créer une extension Looker

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

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

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

Les procédures suivantes montrent comment créer les éléments précédents.

Configurer Looker pour une extension

Pour s'exécuter, chaque extension Looker nécessite un projet LookML qui inclut 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 dans 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 à une base de données valide sur votre instance. L'extension nécessite un fichier de modèle valide, car les données d'autorisation 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.

Comme 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 mettre en commentaire. Si vous laissez le paramètre include: "/views/*.view.lkml" tel quel, le validateur LookML générera des erreurs.
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 initialement vide, 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 fournit un libellé à l'extension, indique à Looker où trouver le JavaScript de l'extension et fournit une liste des droits d'accès de 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 listée dans les droits d'accès.

Pour l'instant, vous pouvez laisser le fichier manifeste tel quel, car vous copierez le reste de son contenu plus tard dans ce 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 que vous avez configuré le projet pour votre extension et que vous l'avez associé à Git, vous êtes prêt à 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 :

Utiliser l'utilitaire create-looker-extension
Cloner un dépôt Git 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 et dépendances nécessaires. Vous pouvez ensuite l'utiliser comme point de départ et ajouter du code et des fonctionnalités pour finaliser 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 la créer :

L'utilitaire create-looker-extension utilisera ensuite le framework que vous avez spécifié pour remplir 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 :
Accédez au répertoire 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 est désormais en cours d'exécution et diffuse le code JavaScript en local sur http://localhost:8080/bundle.js.
Le fichier manifest.lkml se trouve dans le répertoire de votre extension. 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 Enregistrer les modifications pour enregistrer le fichier manifeste de votre projet.

Remarque : Le contenu du fichier manifest.lkml généré inclut le paramètre LookML project_name. Le paramètre project_name est utilisé par la fonctionnalité d'importation de projets locaux. Pour en savoir plus sur l'importation de projets, consultez la page de documentation Importer des fichiers d'autres projets.
Dans l'IDE LookML, cliquez sur Valider LookML, puis sur Valider les modifications et envoyer, puis sur Déployer en production.
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.
Sélectionnez votre extension dans la section Applications pour afficher son résultat.

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'extensions à l'adresse https://github.com/looker-open-source/extension-examples. Si vous souhaitez utiliser l'un des exemples, accédez au dépôt correspondant et suivez les instructions ci-dessous.

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

Sur votre ligne de commande locale, utilisez 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 contenant le modèle que vous souhaitez installer sur votre système. Dans cet exemple, nous allons utiliser l'extension "Hello World" React et JavaScript :
```
cd extension-examples/react/javascript/helloworld-js
```
Installez les dépendances de l'extension :
```
yarn install
```
Vous devrez peut-être mettre à jour votre version de Node ou utiliser un gestionnaire de version Node pour la modifier.
Le fichier manifest.lkml se trouve dans le répertoire de votre extension. 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 Enregistrer les modifications pour enregistrer le fichier manifeste de votre projet.
En haut à droite de l'IDE LookML, cliquez sur Valider LookML, puis sur Valider les modifications et envoyer, puis sur Déployer en production.
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.
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.
Sélectionnez votre extension dans la section Applications pour afficher son résultat.

Modifier l'extension

Une fois l'extension de base créée, vous pouvez modifier ou 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. Si vous modifiez ou ajoutez du code à ce fichier, vous modifierez ou ajouterez des fonctionnalités à l'extension.

Voici le résultat 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 le texte généré par 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.