Le CMS HeadLess va permettre de fournir du contenu dynamique au client mobile.

Installation

PostgreSQL ou MySQL

Le CMS se lance avec Docker. Par défaut, la configuration proposée utilise PostgreSQL, mais il est aussi possible d'utiliser MySQL (voir la section MySQL ci-dessous).

https://docs.directus.io/self-hosted/docker-guide.html

1. Rendez-vous dans le dossier env/local/docker/directus 
2. Modifiez les variables d'environnement suivantes dans le fichier docker-compose.yml (optionnel pour une installation locale, passez à l'étape 3) :
   1. dans le conteneur directus-db  :
      1. MYSQL_PASSWORD 
   2. dans le conteneur directus  :
      1. KEY 
      2. SECRET 
      3. ADMIN_EMAIL  (identifiant de l'admin sur la page d'administration du CMS)
      4. ADMIN_PASSWORD  (mot de passe de l'admin sur la page d'administration du CMS)
      5. DB_PASSWORD  (doit correspondre à MYSQL_PASSWORD du conteneur directus-db)
3. Lancez Directus :

   $ docker compose up --build -d

4. Le CMS sera accessible sur http://localhost:8055 (à moins que vous ayez modifié la configuration), connectez-vous avec les identifiants renseignés plus tôt (ADMIN_EMAIL et ADMIN_PASSWORD).
5. S'authentifier une 1ère fois
6. Dans Settings > Project Settings, passez le CMS en français (optionnel, mais les explications suivantes se font avec l'interface en français).

Pour utiliser PostgreSQL, Voici les différences dans le fichier docker-compose.yml, la config de directus-db  :

  directus-db:
-    image: postgis/postgis:14-master
+    image: mysql:8.0
    ports:
-      - "5432:5432"
+      - "3306:3306"
    # Uncomment to persist data on your local storage
    # volumes:
-    #   - './postgres-data:/var/lib/postgresql/data'
+    #   - './mysql-data:/var/lib/mysql'
    networks:
      - directus
+    command: mysqld --default-authentication-plugin=mysql_native_password
    environment:
-      POSTGRES_USER: 'directus'
-      POSTGRES_PASSWORD: 'directus'
-      POSTGRES_DB: 'directus'
+      MYSQL_USER: 'directus'
+      MYSQL_PASSWORD: 'directus'
+      MYSQL_DATABASE: 'directus'
+      MYSQL_ROOT_PASSWORD: 'directus'

Et dans l'environnement du conteneur directus  :

-      DB_CLIENT: 'pg'
+      DB_CLIENT: 'mysql'
      DB_HOST: 'directus-db'
-      DB_PORT: '5432'
+      DB_PORT: '3306'
      DB_DATABASE: 'directus'
      DB_USER: 'directus'
      DB_PASSWORD: 'directus'

Import de la structure de données

Pour importer la structure des données :

$ docker compose exec directus npx directus schema apply --yes ./snapshot/snapshot.yaml

Import des données d'exemple

Pour importer les collections :

1. Dans Réglages > Modèles de données, pour la collection Languages, sélectionnez Voir le contenu.
2. Sélectionnez le fichier des langues (languages xxxxx.json) et importez-le.
3. Pour chaque collection visible dans le panneau latéral (dans l'onglet Contenu), importez le contenu.
4. Saisir les informations demandées dans Contact US et Login (pour plus d'explication consultez la page suivante) 
5. Créez un dossier dans l'onglet Bibliothèque de fichiers, « important-news-folder ».
   
6. Dans Réglages > Modèles de données > important-news > image > Interface, sélectionnez le dossier de destination que l'on vient de créer.

Import des images

Dans la collection important-news on pourra par exemple ajouter l'image esup-day-37.png fournit dans /data sur la news correspondante/

Permissions

1. Si vous êtes sur une installation locale, vous pouvez directement passer à l'étape 6.
2. Nous allons ajouter un rôle pour notre application, rendez-vous dans Réglages > Rôles et autorisations.
3. Créer un nouveau rôle intitulé "Application" par exemple. Le champ "Accès à l'application" indique si les utilisateurs avec ce rôle pourront accéder à l'interface du CMS ou non. Ici, on peut décocher les deux options.
   
4. Donnez les permissions de lecture à toutes les collections (pas les collections système).
   
5. Créez un nouvel utilisateur pour ce rôle (donnez uniquement un nom).
6. Générez un token pour l'utilisateur que l'on vient de créer (en local : le compte admin). Gardez-le, vous en aurez besoin pour la configuration du backend.
7. Rendez visible le dossier des images d'important-news (créé préalablement) au rôle Public comme indiqué sur les captures d'écran ci-dessous :
   

Les collections

Les languages

Il s'agit de la 1ère collection à créer (ou importer) elle précise les langues dans lesquelles seront traduits les contenus dynamiques saisis dans directus. Pour la cohérence, il faudra prévoir également les fichiers i18n pour les traductions statiques de l'interface.

Les features

Les features représentent les services que l'on souhaite afficher dans l'application.

Ils sont caractérisés par :

• Un statut : brouillon, publié ou archivé
• Un titre, un titre cours, une description et des mots clés
• Une icône qui peut être une icone ionic ou le code d'un SVG
• Un emplacement
  • burger : menu de l'app
  • service : page des services
  • top : dans la barre du haut
  • tabs : dans la barre du bas
• Une position (absolue) + une position en fonction du rôle qui viendra supplanter la position par défaut si précisé
• Des autorisations : Liste blanche ou liste noire sur une liste de rôles autorisé ou pas à accéder au service. Attention, les rôles doivent être ceux fourni par le module user-provider
• Un type :
  • Interne : Service interne à l'application indiqué par sa route dans l'app
  • Externe : Lien vers une URL externe qui peut être protégée par CAS. Le cas échéant, il faudra préciser l'emplacement du ServiceTicket dans l'URL et l'URL du service pour lequel l'application devra faire la demande de ticket.

Les widgets

Les widget représentent les accroches que l'on souhaite afficher sur la page d'accueil de l'application.

Elles sont caractérisés par :

• Un statut : brouillon, publié ou archivé
• Le code du widget : Le module qui traitera l'affichage des éléments de la widget
• Un titre, un titre cours, une description et des mots clés
• Une icône qui peut être une icone ionic ou le code d'un SVG et une couleur de fond
• Une position (absolue) + une position en fonction du rôle qui viendra supplanter la position par défaut si précisé
• Des autorisations : Liste blanche ou liste noire sur une liste de rôles autorisé ou pas à accéder au service. Attention, les rôles doivent être ceux fourni par le module user-provider
• Un type :
  • Interne : Service interne à l'application indiqué par sa route dans l'app
  • Externe : Lien vers une URL externe qui peut être protégée par CAS. Le cas échéant, il faudra préciser l'emplacement du ServiceTicket dans l'URL et l'URL du service pour lequel l'application devra faire la demande de ticket.

Les important-news

Les important news permettent de saisir des informations qui s'affichent dans la widget important-news (module important-news) en page d'accueil.

Elles sont caractérisées par :

• Un titre et un contenu
• Un bouton et un lien de redirection
• Une image et une couleur de fond
• Des autorisations : Liste blanche ou liste noire sur une liste de rôles autorisé ou pas à voir la news. Attention, les rôles doivent être ceux fourni par le module user-provider

Les social-network

Les social network permettent de saisir les liens vers les réseaux sociaux affichés dans le menu.

Les channels

Les channels sont les canaux utilisés par le système de notification. Chaque notification indique un nom "logique" de channel auquel on fait correspondre une couleur, un logo, un nom parlant et traduit dans le CMS. On peut également y indiquer une route de redirection vers un service interne à l'application.

Les pages

Les pages permettent de saisir des contenus statiques qui seront accessible depuis le menu de l'application et affiché dans l'ordre choisi sur le CMS.

Le contact us

L'objet contact us est un peu particulier cas il ne s'agit pas d'une collection mais d'une instance unique. Il permet d'indiquer le texte d'accueil du formulaire de contact ainsi que l'adresse e-mail de redirection de message postés.

Le login

L'objet login est un peu particulier cas il ne s'agit pas d'une collection mais d'une instance unique. Il permet d'indiquer le texte d'accueil du formulaire de connexion à l'application.

Pour aller plus loin

Organisation des colonnes

Après l'import l'affichage des collections dans directus n'est pas très heureux. Il est possible de réorganiser les colonnes à sa guise grace au "+", au cliquer-déplacer et au clique-droit > supprimer.

Conseil UL : ôter les descriptions, ajouter les positions, autorisations, les titres traduits

Export des données

Pour exporter les données, depuis chaque collection :

1. Choisir Importer/exporter depuis le panneau latéral de droite
2. Puis le bouton Exporter
3. Choisir le format JSON
4. Ajouter l'ensemble des attributs. Attention ! par défaut l'export ne propose que les attributs affichés en colonne il faut donc bien ajouter tous les attributs ainsi que leur dépendances. Inutile d'exporter les ID.
5. Enfin cliquer sur le bouton de téléchargement en haut à droite

Cas particulier des dépendances

Les rôles

Les autorisations

Les traductions

Export de la structure de données

Pour exporter la structure : depuis l’intérieur du conteneur Docker directus, exécuter :

$ docker compose exec directus npx directus schema snapshot --yes ./snapshot/snapshot.yaml