Aller au contenu principal

SemApps

┌────────────────────────────┐      ┌───────────────────────────┐
│    Serveur SemApps         |      │  Interface utilisatrice   |
│----------------------------│      │---------------------------│
│ ┌────────────────────────┐ │      │ ┌───────────────────────┐ │
│ │  Middleware (Node JS)  │ │      │ │     React-Admin       │ │
│ │------------------------│ │      │ │-----------------------│ │
│ │ ┌────────────────────┐ │ │<-----│ │ ┌───────────────────┐ │ │
│ │ │ Triplestore (Java) │ │ │      │ │ │ Composants SemApps│ │ │
│ │ └────────────────────┘ │ │      │ │ └───────────────────┘ │ │
│ └────────────────────────┘ │      │ └───────────────────────┘ │
└────────────────────────────┘      └───────────────────────────┘

Introduction​

SemApps est une boite à outils open-source, permettant de réaliser des applications sémantiques.

SemApps s'inspire très fortement des propositions du W3C : SOLID.

SemApps est développé par des membres de l'Assemblée Virtuelle.

Pour mieux comprendre la notion de "boite à outils", vous pouvez consulter le schéma d'architecture logicielle ici.

Présentation (non technique) de SemApps​

Cette présentation permet de rentrer doucement dans la compréhension de SemApps.

Non technique, signifie qu'on se permet d'utiliser des termes techniques, mais uniquement s'ils sont explicités.

Elle revient sur la notion de web distribué, sur les standards utilisés (web sémantique, LDP, SPARQL, WAC, Activity Pub), les différentes interfaces utilisatrices possibles et sur la modularité qui permet à SemApps de construire des applications sémantiques.

On peut la considérer comme un pré-requis à la lecture de cette page.

Accès
attention

Pour le moment, vu que cette présentation est encore jeune et peut être amenée à être modifiée, nous utilisons un PAD collaboratif pour la mettre à jour plus facilement.

Le site web de SemApps​

https://semapps.org

Ce site présente :

  • la boite à outil,
  • l'équipe SemApps qui contribue au projet,
  • les projets réalisés,
  • la documentation de tous les composants réutilisables (voir le détail plus bas dans cette page...).

Rappel : Liberté dans le choix des technologies pour Carto4CH​

Pour rappel, ce que nous proposons ici n'est qu'un démonstrateur, un socle technique choisi pour l'exemple.

Nous avons choisi d'utiliser SemApps, mais un partenaire peut choisir d'autres briques logicielles, du moment qu'il partage les standards du web sémantique, et l'ontologie HeCo.

Via ce démonstrateur, nous souhaitons juste montrer qu'il est possible de créer des applications interopérables.

Exemple : Un partenaire peut réécrire des interfaces en utilisant un autre langage que React JS (par exemple Angular JS). Il peut aussi développer son propre serveur de données sémantiques en utilisant un autre language que Node JS (par exemple en Django), du moment qu'il se base sur les propositions du W3C SOLID.

Technologies utilisées pour le démonstrateur​

Schéma du démonstrateurArchitecture technique
Interfaces utilisatrices
- Front-Office et My-competences : React JS / React-Admin
- Cartographie en réseau : D3js

Partie serveur
Node JS / Moleculer

Protocoles
LDP
SPARQL 1.1
WAC
Activity Pub

Ces choix techniques ont été pris par l'Assemblée virtuelle après avoir essayé d'autres technologies (JAVA / PHP) dans les premières versions de SemApps.

Fonctionnement technique de SemApps​

La partie serveur​

SchémaLa partie serveur est composée de deux éléments

- La base de donnée (triplestore) : qui stoque les triplets sémantiques
- Le middleware : écoute les demandes de l'interface utilisatrice, récupère les éléments demandés en base et les renvoit à l'interface.

La partie serveur est réalisée en Javascript, principalement autour de deux librairies :

  • Node JS, qui est la technologie la plus utilisée pour créer des serveurs en Javascript
  • Moleculer, qui est une sorte d'ordonanceur, qui fait le chef d'orchestre entre tous les "services".

Les interfaces utilisatrices​

Les interfaces utilisatrices du démonstrateur Carto4CH est basée sur la boite à outil SemApps, qui elle même est dépendante d'un socle technique (framework) appelé React-Admin. Ce socle technique est maintenu par la société (française) Marmelabs. Il utilise la bibliothèque JavaScript React.

Le framework React-Admin​

Cette librairie React permet de réaliser en très peu de temps, une interface permettant de :

  • Créer des données
  • Afficher et lister des données
  • Modifier des données
  • Supprimer des données

(voir CRUD)

Nous l'avons utilisé pour le back-office et pour My-competence.

Les composants réutilisables​

Introduction​

La boite à outils SemApps est basé sur des composants "atomiques" réutilisables.

Il existe deux types de composants :

  • des composants pour le middleware, par exemple pour aller lire dans la base de donnée, pour importer des données, ou pour formater les données, etc. Voir Semapps.org > Middleware
  • ceux pour les interfaces utilisatrices, par exemple des menus, des titres, des listes, des inputs, des boites de sélections, etc. Voir Semapps.org > Frontend

Cela permet que chaque composant soit maintenu indépendemment, plutôt qu'un gros bloc géré par une seule organisation. On peut à souhait enrichir les composants de base et en proposer de nouveaux.

Chaque composant possède sa documentation, avec des exemples de code.

Trois cas pour le frontend (React)​

Trois cas peuvent se présenter :

  • soit nous utilisons des composants de React JS
  • soit nous utilisons des composants de la librairie React-Admin, qui sont souvent issus de React JS, mais complétés par l'équipe de Marmelab pour simplifier leur utilisation
  • soit nous surchargeons ces composants pour répondre aux besoins de SemApps

Accès aux composants​

Les composants sont mis à disposition sur le dépot NPM, et vous pouvez retrouver leur code sur le Github de l'assemblée virtuelle :

Accès à la documentation des composants​

Pour avoir accès à la documentation technique des composants réutilisables, rendez-vous sur le site https://semapps.org

Archipelago​

La première implémentation de SemApps réalisée, est le projet Archpelago. Son objectif est de cartographier les archipelles de la transition, en étant installé sur chaque archipelle.

Ce projet contient :

  • Le middleware de SemApps
  • Une interface basée sur React-Admin
  • L'ontologie P.A.I.R

C'est sur cette base que nous avons construit le back-office du démonstrateur Carto4CH.

L'ontologie P.A.I.R​

L'Assemblée Virtuelle propose depuis plusieurs années une ontologie permettant de cartographier les écosystèmes de Projets, Acteurs, Idées, Ressources, mais aussi des évènements.

Plus d'informations sur le Blog de l'Assemblée virtuelle

Pour Carto4CH, nous avons au début utilisé cette ontologie, et peu à peu, nous l'avons remplacé par l'ontologie HeCo, car SemApps est compatible avec n'importe quelle ontologie du Web sémantique.

Installation d'Archipelago en local​

Caractéristiques techniques pour faire tourner Archipelago​

  • un accès à internet
  • Une configuration matérielle avec au moins 4 Go de RAM
  • Installer Node JS
Attention

Il semble qu'il y ait une erreur lors du lancement du frontend avec la version Node JS 18 (cela fonctionne en version 16.19)

Procédure sur le Gitlab​

Pour installer simplement Archipelago en local de votre ordinateur, suivez les étapes précisées dans le Github d'Archipelago-Carto4CH.

En résumé : Trois étapes :

  • Lancer la base de donnée
  • Lancer le middleware
  • Puis enfin l'interface utilisatrice

Déploiement d'Archipelago​

Le déploiement d'Archipelago est assez simple, car il utilise Docker et Make. Une fois Docker installé sur un serveur, en une ligne, on peut donc lancer un serveur fonctionnel.

Il lancera traefik (réseau, ports, https, certificats), le triplestore, le middleware et le frontend

Utilisation de SemApps pour le démonstrateur Carto 4CH​

Nous avons utilisé les briques de SemApps pour le démonstrateur.

Pour comprendre le code du démonstrateur, voir la documentation développeur du démonstrateur

Internationalisation​

Pour gérer l'internationalisation (EN/FR), nous nous sommes basé sur la documentation React-Admin

En résumé :

  • Mettre à jour le fichier .env.local avec REACT_APP_LANG=fr
  • Paramétrer le i18nProvider (voir doc RA officielle)
  • Et renseigner les fichiers :
    • frontend/src/config/messages (contenant les traductions EN/FR)
    • Ou les parties "translations" dans les fichiers index.js
  • Enfin, utiliser le hook useTranslate pour utiliser les traductions dans le code souhaité.

Pour approfondir SemApps​

L'Assemblée Virtuelle maintient une documentation de formation sur son Github.