Toolpad Studio

Présentation

Toolpad Studio est un générateur d'outils interne auto-hébergé et low-code. Bien que toujours en développement, il est open source et alimenté par les composants de Material UI. Toolpad Studio est conçu pour tout développeur souhaitant créer des applications internes plus rapidement. Faites glisser et déposez les composants d'interface utilisateur prédéfinis, connectez vos sources de données, publiez votre application et vous avez terminé !

Manuel

https://mui.com/toolpad/studio/getting-started/

Au niveau du fonctionnement, on crée un projet avec npx. Ensuite en démarrant ce projet nous avons accès à un interface graphique déjà programmé, un éditeur, qui nous permet de créer notre projet en sélectionnant les composants qu'on veut utiliser. Une fois le projet terminé, on peut le déployer sur un serveur externe comme une application Node traditionnelle.

Installation

Pour créer un nouveau projet Toolpad Studio, utilisez la commande

npx create-toolpad-app@latest my-toolpad-app

La commande suivante va créer un dossier nommé my-toolpad-app avec les fichiers pour exécuté Toolpad Studio.

Ensuite pour lancer l'application en mode développement, lancer la commande suivante dans le répertoire du projet:

npm run dev

Construire notre première application

Cette exercice est directement inspiré de cette démonstration : https://mui.com/toolpad/studio/getting-started/first-app/

Créer une nouvelle application

Exécutez la commande suivante.

npx create-toolpad-app test-toolpad-app

Lancez le serveur de développement

cd test-toolpad-app
npm run dev

Toolpad studio devrait s'ouvrir automatiquement dans une fenêtre de votre navigateur. Vous pouvez aussi y accéder à l'adresse http://localhost:3000

Mise en place de l'interface graphique

Dans la section Component library, sélectionnez un Data Grid et glissez le dans la section centrale. Faites de même avec une Image. Votre interface devrait ressembler à ça:

Récupérer les données

Dans la section Queries de l'explorateur, cliquez sur le + et sélectionnez HTTP REST API. Nous allons récupérer une liste de race de chiens pour cet exemple. Utilisez l'url suivante :

https://dog.ceo/api/breeds/list/all

Cliquez ensuite sur Run dans le bas à droite pour lancer la requête et inspecter les résultats.

Dans l'onglet Transform on peut modifier le résultat en inscrivant une expression JavaScript qui retourne un résultat. Cliquez sur l'option Transform response pour activer cette option. Dans notre exemple nous voulons conserver uniquement les éléments de la réponse qui sont dans l'attribut message sous forme de tableau. Inscrivez le code suivant :

return Object.entries(data.message).map(entry => { 
  return {
    race:entry[0],
    sousRace:entry[1]
  };
});

Vous pouvez ensuite cliquer sur Run à nouveau pour voir les changements.

Finalement cliquez sur Save pour enregistrer la requête. Renommez là ensuite pour dogQuery.

Lier les données à l'interface

La prochaine étape est de lier les données aux composantes.

• Cliquez sur le Data grid
• Dans l'inspecteur à gauche trouvez la propriété rows et cliquez sur l'icone Bind "rows" à sa droite pour ouvrir l'éditeur de liaisons.

Sur la gauche, vous verrez une liste de tous les états pouvant être liés dans la page et sur la droite, un éditeur de code qui accepte n'importe quelle expression JavaScript.

Utilisez la requête que vous venez d'enregistrer, dogQuery. Dans l'éditeur de code entrez la ligne suivante :

dogQuery.data

dogQuery est le nom de la requête et data représente le résultat.

Cliquez sur Update binding et votre Data grid devrait se remplir avec le résultat de la requête.

Ajouter de l'intéractivité à la requête.

On va maintenant ajouter de l'intéractivité à notre application en créant une seconde requête qui va réagir à une sélection de la grille.

• Créez une autre requête de type REST API et ajoutez un paramètre breed dans la section Parameters.
• Cliquez sur le bouton Bind du paramètre et ajoutez le code suivant dans l'éditeur :

dataGrid.selection?.['race'] ?? 'akita'

Le paramètre va prendre la valeur de la première colonne sélectionnée de la grille ou "Akita" si aucune ligne n'est sélectionnée.

Dans l'url, cliquez sur le bouton Bind "url" et entrez le code suivant :

`https://dog.ceo/api/breed/${parameters.breed}/images/random`

parameters permet d'accéder à la liste des paramètres et breed à la valeur de notre paramètre du même nom.

• Renommez la requète imageQuery.
• Dans l'éditeur, sélectionnez votre image et dans l'inspecteur cliquez sur le bouton Bind à la droite de src.
• Inscrivez le code suivant et cliquez sur Update binding

imageQuery.data.message

Prévisualiser l'application

Cliquez sur le bouton Preview pour afficher une visualisation de votre application.

Version finale