Appsmith, un outil low-code auto-hébergé

Nous voici dans le deuxième article de la série des logiciels no/low-code. Ce coup-ci je vais vous présenter Appsmith.

Comme vous le savez (ou pas :)), j’expérimente de petits side-projects au travers d’outils me permettant rapidement d’aboutir à un PoC (Proof of Concept). Seulement, je ne cherche pas n’importe quel type d’outils ! Je préfère les outils no/low-code, comme n8n (comme celui présenté dans l’article précédent ), que l’on peut héberger sur un VPS (serveur Virtuel), chez soi ou au sein de son entreprise.

Présentation

Je suis tombé récemment sur Appsmith, mais qu’est-ce que c’est?

Appsmith est un outil open-source, qui permet de créer des pages web en lien avec des informations récupérées en base de données ou au travers d’API. C’est, à mon sens, plus destiné à des développeurs ou à des personnes techniques qui ont déjà des notions de programmations.

C’est un bon outil pour créer :

• Des outils internes pour la création de Workflow (ex: l’appui sur un bouton déclenche une action puis affiche des informations ...).
• Des interfaces d’administration
• Des tableaux de bord

Appsmith a une communauté active et des évolutions sont proposées constamment. C’est une alternative à retool. Le canal Discord est quant à lui aussi bien actif (réponse en quelques heures). Le seul point négatif, c’est qu’aucune traduction en français n’est encore disponible.

Pour résumer, une petite image qui récapitule le fonctionnement de façon simple !

Installation

Comme pour le précédent article n8n, je vous ai préparé une VM toute prête contenant Appsmith et n8n (ça peut servir pour la suite!).

Trois possibilités s’offrent à vous pour suivre ce tutoriel :

• Utilisation d’une VM (Machine virtuelle ) préconfigurée

Pour cela, il faut récupérer l’archive via le lien suivant (virtualBox Appsmith).

C’est une image à importer directement dans VirtualBox. Pour ceux qui ne savent pas comment faire, je vous renvoie directement au premier article de cette longue série qui explique comment configurer et importer une image VBox. Le lien est ici.

Les identifiants utilisés sont : login avec test@test.fr et password avec test1234

• Installation “from Scratch” avec Docker sous Linux (Ubuntu ou Debian) en Local ou depuis une VPS

Préalablement, il faut avoir installé Docker. Un super tuto en français: Comment installer et utiliser Docker sur Ubuntu 20.04 | DigitalOcean

Et en ligne de commande :

# Downloads install.sh
curl -O https://raw.githubusercontent.com/appsmithorg/appsmith/master/deploy/install.sh

chmod +x install.sh

Suivre les instructions, comme présenté ci-après :

🕵️ Detecting your OS
🙌 You're on an OS that is supported by this installation script.

Create an Installation Directory: [appsmith]
Installing Appsmith to '/home/ubuntu/appsmith'.

Is this a fresh installation? [Y/n]
Set the mongo root user: test
Set the mongo password:

Do you have a custom domain that you would like to link? (Only for cloud installations) [y/N]

+++++++++++ IMPORTANT ++++++++++++++++++++++
Thank you for installing appsmith! We want to be transparent and request that you share anonymous usage data with us .
This data is purely statistical in nature and helps us understand your needs & provide better support to your self-h osted instance.
You can read more about what information is collected in our documentation https://docs.appsmith.com/v/v1.2.1/setup/ telemetry

Would you like to share anonymous usage data and receive better support? [Y/n] n

Please note that even though telemetry is disabled, your Appsmith server will connect to cloud to fetch release note s and to check for updates.

Modification du fichier docker.env pour indiquer la configuration du serveur mail, la possibilité de désactiver l’enregistrement des utilisateurs …

Dans mon cas, je souhaite que seul l’admin puisse s’enregistrer, il faut donc ajouter ces lignes dans le fichier docker.env.

APPSMITH_SIGNUP_DISABLED=true
APPSMITH_ADMIN_EMAILS=test@test.fr

Il faudra également retoucher le fichier docker-compose.yml pour faire en sorte que le service démarre automatiquement.

Un exemple en rajoutant “restart: always” pour chacun des services :

......
nginx:
image: index.docker.io/appsmith/appsmith-editor
env_file: ./docker.env
restart: always
ports:

• "80:80"
• "443:443"
  volumes:
  .....

Puis en ligne de commande, procéder à l’installation :

./install.sh

Vous n’avez plus qu’à renseigner votre adresse IP pour arriver sur la page suivante :

Démarrage d’un projet avec Appsmith

Commençons par créer un nouveau projet sur la page d’accueil du Dashboard d’Appsmith

Vous arrivez ainsi sur la page suivante :

Et c’est là que tout commence ! Vous avez sur le bandeau de droite la possibilité de :

• Créer une nouvelle page pour glisser-déposer des composants tels que des tableaux, des boutons, des zones de saisie, créer des liens entre vos composants et vos données. L’interface est plutôt claire et bien pensée.
• D’ajouter des Widgets, ce sont les fameux composants que vous pouvez glisser-déposer sur une page. Chaque composant est associé à un nom que vous pourrez ensuite utiliser comme référence pour faire des actions, récupérer des valeurs, etc … A l’écriture de cet article, la liste des composants est la suivante :

Autant dire qu’il y a du choix. Pour construire des PoC ou des prototypes avancés, je pense que cela est amplement suffisant.

• Créer des APIs ! C’est là que ça commence à devenir intéressant. Les APIs, c’est une fonctionnalité que vous pouvez appeler à partir d’un bouton et qui permet de récupérer des données à partir d’un service externe comme une API REST, une requête cURL ou des informations issues d’un Google Sheet.

Pour chaque API, vous allez pouvoir définir les paramètres et les divers niveaux d’accès (uniquement droit en lecture, écriture…). Par exemple, j’ai un google sheet qui contient un tableau que je souhaite afficher uniquement en lecture dans une page web.

Nous verrons plus tard, dans ce tutoriel, l’utilisation de quelques APIs :

• Créer des liens avec vos bases de données afin d’exploiter et d’afficher les données dans des composants Widget. Il est possible d’utiliser un grand nombre de connecteurs tels que :

Dans Appsmith, chaque API, Widget ou Connecteur base de données, une fois nommée, peut être utilisé dans n’importe quelle catégorie.

Je m’explique ! Vous aller créer une API nommée API_REST et quand vous cliquez sur un bouton, vous associez l’action avec API_REST.

Dans Appsmith, vous allez pouvoir écrire du code en Javascript, quelques libraires sont disponibles pour vous faciliter les tâches. Ce code sera directement modifiable lors de la création d’une entité (widget, api,…).

Si vous savez déjà faire un peu de programmation en Javascript, la courbe d’apprentissage de cette plateforme sera rapide. Si vous n’êtes pas codeur, vous pourrez aussi vous en sortir via le menu présent dans chaque composant pour choisir les actions voulues.

Nous avons fait un rapide tour d’horizon des fonctionnalités de base d’Appsmith. Je vous propose pour la suite de construire une page web qui va permettre l’affichage d’une liste d’entreprises présentes dans une zone géographique définie, le tout en utilisant une API REST.

Let’s GO !

Création d’une petite application pour lister les entreprises dans un rayon de 5 km autour d’un point géographique indiqué.

Mise en place des composants graphiques

• Commençons par créer et nommer le projet (sur le screenshot suivant, cette information se trouve en haut en à gauche, un double clic suffit pour éditer la valeur).
• Glisser déposer 2 INPUT ainsi qu’un BUTTON sur la feuille de dessin.

• Editer les deux INPUT en double cliquant dessus pour choisir la référence (leur nom ) du widget dans le système, ici nommé Latitude et Longitude; mais aussi le texte que l’on souhaite afficher par défaut. Il est possible de définir aussi d’autres actions (saisie d’un utilisateur, focus, …). Pour cet exemple, nous n’avons pas besoin de modifier plus d’éléments.

• Pour le BUTTON, changer son texte “Submit” en “Chercher” et assignez-lui également une référence/nom. On reviendra sur celle-ci un peu plus tard pour lui associer une action lors d’un clic.

• Ajouter un TABLE dans la feuille de dessin, éditer pour le moment sa référence en “Resultat”. Laisser en l’état aussi pour le moment, on reviendra dessus pour associer des données à afficher. Votre page doit ressembler à ça.

Mise en place de la récupération des données

Le but de cette section est de pouvoir récupérer des données depuis un service externe. En farfouillant un peu, j’ai découvert des APIs gouvernementales disponibles, telles que celle-ci :

C’est une API qui permet de récupérer des informations sur les entreprises, notamment selon leur latitude/longitude. Ce sont des données intéressantes qui peuvent, par exemple, nous indiquer le nombre de concurrents dans la zone géographique sélectionnée. Allez, trêve de bavardages, passons à l’action!

Cliquer sur APIs et choisir :

Nous arrivons sur le page suivante :

Nous allons utiliser la fonction “GET” pour récupérer la liste des entreprises. Dans le champ, vous aller entrer l’URL suivante :

https://entreprise.data.gouv.fr/api/sirene/v1/near_point/?lat=45.5&long=5&per_page=1000

Par défaut cette fonction va récupérer la liste des entreprises selon la latitude 45.5 et la longitude 5 en affichant les 1000 premières entreprises dans un rayon de 5 km (valeur par défaut). Pour ceux que ça intéresse, la documentation se trouve ici.

Si on clique sur “RUN”, la fonction va être exécutée et un affichage des résultats vous est proposé :

Ce que nous voulons, ce ne sont pas des valeurs statiques mais les valeurs que l’utilisateur va rentrer. Pour cela, dans la partie “Params”, il va falloir lier les valeurs avec nos références “Latitude” et “Longitude” (le nom de nos INPUT créés précédemment).

Dans le champ value de chaque paramètre, il faudra écrire le code suivant :

{{LeNomDeMaReference}}

En utilisant les moustaches {{}}, l’interface d’Appsmith va vous proposer différentes valeurs, comme les valeurs internes du logiciel ou les fameuses références que vous avez créées.

Ce qui donne finalement :

Note : j’en profite pour renommer Api1 en GetEntreprises

En cliquant sur “Run” vous obtiendrez une erreur car les valeurs Latitude et Longitude ne sont pas définies.

Rattacher l’API à la page WEB

Votre arborescence (menu de gauche) doit ressembler à ça :

Chaque Widget et chaque API est nommée/référencée.

Il faut se rendre dans ‘Page1’ pour que nous puissions éditer l’action sur le bouton et les valeurs que contiendra le tableau.

• Pour cela, nous allons éditer le bouton “Chercher”. Dès le clic, il doit appeler notre fameuse API.

Dans Actions, cliquer sur “No action” puis “Call An API” puis “GetEntreprises”

• Pour le tableau, il va falloir remplacer le contenu de Table Data (cf screenshot suivant) par “{{GetEntreprises.data.etablissements
  }}”.

Cela indique que nous allons récupérer les données de “GetEntreprises” et nous affichons uniquement les valeurs du tableau “etablissements”.

Rentrer des valeurs cohérentes dans Latitude et Longitude puis cliquer sur le bouton “Chercher”, ce qui nous donnera l’affichage suivant :

C’est vrai que le résultat n’est pas très lisible… En éditant le tableau, vous allez remarquer une nouvelle case “Columns” qui indique toutes les colonnes affichées. Il est donc possible via le petit “oeil” de les rendre invisibles. Après quelques minutes de travail , voici le résultat :

C’est bien tout ça, mais là comment je déploie ce service à mes utilisateurs ?

Déploiement de la page web

Cela est très simple, vous avez dû remarquer un bouton en haut à droite nommé “Share” ou “Deploy”.

Vous avez la possibilité de partager un lien vers votre page web (comme un Google Sheet par exemple). En cliquant sur “Share”, la fenêtre suivante apparaît :

Choisir le mode, soit privé, soit public, et donner l’URL à vos correspondants.

Le lien copié dans un navigateur donne l’affichage suivant :

Il ne reste plus qu’à saisir les coordonnées et attendre le résultat. Il est possible ensuite de récupérer ces informations en local via le bouton “Download”.

Pour la partie “Deploy”, ce bouton permet de voir le résultat directement via l’ouverture d’un nouvel onglet de votre navigateur.

The END

A l’issue de cet article, nous avons appris à mettre en place une page web simple en faisant interagir l’utilisateur avec une API Externe.

Nous n’avons pas vu les “DB Queries” et toutes les APIs (cURL, GSheet) , je pense que c’est techniquement plus complexe, et que cela pourra faire m’objet d’un article plus complet.

L’idée de cet article est de montrer les capacités de ce fameux outil Appsmith, en réalisant rapidement des interfaces.

La version utilisée d’Appsmtih lors de la rédaction de ce tutorial est la v1.5.6.

J’espère que cet article vous a plu ! Nous nous retrouverons prochainement dans un nouvel tutoriel sur le low-code.