Catégories
Astuces et Design

Utiliser Trello comme CMS super simple

Parfois, nos sites ont besoin d'un peu de gestion de contenu. Pas toujours. Pas beaucoup. Mais un peu. Le marché des CMS est en plein essor avec des produits abordables et accessibles, nous ne sommes donc pas à court d'options. Heureusement, c'est un monde très différent de celui qui obligeait les entreprises à dépenser un ga-jillionty-one dollars (pas un coût exact: j'ai arrondi au bazillion le plus proche) pour un tout chantant, tout dansant, tout -plateforme CMS intégrée, entièrement personnalisable, certifiée pour les grandes entreprises ™.

Parfois, cependant, il est agréable d'utiliser un outil très simple que toute personne qui met à jour le contenu du site est déjà familier, plutôt que de se familiariser avec un nouveau CMS.

J'aime beaucoup Trello pour la gestion des idées et des tâches. Et il a une API. Pourquoi ne pas l'utiliser comme source de contenu pour un site Web? Je veux dire, hé, si nous pouvons le faire avec Google Sheets, qu'est-ce qui nous empêchera d'essayer d'autres choses?

Bonjour Trello

Voici un site simple à explorer. Il obtient son contenu de ce tableau Trello et ce contenu est affiché dans des sections. Chaque section est remplie par les champs de titre et de description d'une carte dans notre tableau Trello.

Deux pages Web côte à côte. La gauche est une planche Trello avec un fond rose vif. La droite est une capture d'écran du site Web de construction utilisant les données Trello.

Trello utilise Markdown, ce qui est pratique ici. Toute personne éditant du contenu dans une carte Trello est capable d'appliquer un formatage de texte de base et d'avoir le même flux Markdown dans le site et transformé en HTML par un processus de construction.

Blocs de construction

Je suis un grand fan de ce modèle d'exécution d'une compilation qui extrait le contenu de divers flux et sources, puis les assemble avec un modèle pour générer le code HTML d'un site Web. Il dissocie la présentation de la gestion du contenu (d'où vient le terme «découplé» dans les produits CMS modernes populaires). Et cela signifie que nous sommes libres de créer le site Web comme nous le souhaitons avec toutes les astuces et techniques astucieuses que nous avons apprises ici sur CSS-Tricks.

Diagramme montrant le flux de données, allant de Trello en JSON à Build où les données et le modèle sont couplés, puis enfin, au front-end.

Étant donné que nous récupérons le contenu au moment de la création, nous n'avons pas à nous soucier des quotas d'utilisation ou des performances de nos sources de données si nos sites deviennent populaires et génèrent beaucoup de trafic. Et pourquoi pas? Regardez comme nous les avons faites!

Je veux jouer!

Bien. Vous pouvez récupérer une copie du code de ce site et bricoler à votre guise. Cette version comprend des informations sur la façon de créer votre propre tableau Trello et de l'utiliser comme source de contenu pour la construction.

Si vous voulez d'abord découvrir comment cela fonctionne plutôt que de vous y plonger vous-même, lisez la suite.

Découvrir l'API

Trello dispose d'une API bien documentée et d'un ensemble de ressources de développement. Il existe également un module Node pratique pour simplifier la tâche d'authentification et d'interaction avec l'API. Mais vous pouvez également explorer l'API en bricolant les URL lorsque vous explorez vos tableaux Trello.

Par exemple, l'URL du tableau Trello ci-dessus est:

https://trello.com/b/Zzc0USwZ/hellotrello

Si nous ajoutons .json à cette URL, Trello nous montre le contenu représenté sous forme de JSON. Regarde.

Nous pouvons utiliser cette technique pour inspecter les données sous-jacentes dans Trello. Voici l'URL d'une carte en particulier:

https://trello.com/c/YVxlSEzy/4-sections-from-cards

Si nous utilisons cette petite astuce et ajoutons .json à l'URL, nous verrons les données qui décrivent cette carte.

Nous trouverons des choses intéressantes – des identifiants uniques pour le tableau, la liste et la carte. Nous pouvons voir le contenu de la carte et de nombreuses métadonnées.

J'adore faire ça! Regardez toutes les belles données! Comment allons-nous l'utiliser?

Décider comment utiliser un tableau

Pour cet exemple, supposons que nous ayons un site avec une seule page de contenu gérable. Une liste ou une colonne dans notre tableau serait idéale pour contrôler les sections de cette page. Un éditeur pourrait leur donner des titres et du contenu, et les faire glisser dans l'ordre de leur choix.

Nous aurons besoin de l'ID de la liste pour pouvoir y accéder via l'API. Heureusement, nous avons déjà vu comment découvrir cela. Jetez un œil aux données de l’une des cartes de la liste en question. Chacun a un idBoard propriété. Bingo!

Générer le site

Le plan est de récupérer les données de Trello et de les appliquer à certains modèles pour peupler notre site. La plupart des générateurs de sites statiques (SSG) feraient le travail. C’est ce pour quoi ils sont bons. J'utiliserai Eleventy parce que je pense qu'il a les concepts les plus simples à comprendre. De plus, il est très efficace pour obtenir des données et générer du HTML propre avec Nunjucks (un langage de modélisation populaire).

Nous souhaitons pouvoir utiliser une expression dans notre modèle qui génère un section élément pour chaque élément trouvé dans un objet JavaScript appelé trello:


{% for card in trello %}

{{ card.name }}

{% markdown %} {{- card.desc | safe }} {% endmarkdown %}
{% endfor %}

Récupérer les données pour la construction

Une technique populaire avec les sites Jamstack comme celui-ci consiste à exécuter une construction avec Gulp, Grunt ou (insérer la dernière nouveauté du script de construction ici) qui va chercher des données à partir de diverses API et flux, cache les données dans un format approprié pour le SSG, et exécute ensuite le SSG pour générer le HTML. Cela fonctionne plutôt bien.

Eleventy simplifie les choses ici en prenant en charge l'exécution de JavaScript dans ses fichiers de données. En d'autres termes, plutôt que d'exploiter uniquement les données stockées au format JSON ou YAML, il peut utiliser tout ce qui est renvoyé par JavaScript, ouvrant la porte à des demandes directement aux API lorsque la build Eleventy s'exécute. Nous n'avons pas besoin d'une étape de compilation distincte pour commencer à récupérer les données. Eleventy le fera pour nous.

Utilisons cela pour obtenir les données de notre trello objet dans les modèles.

Nous pourrions utiliser le client Trello Node pour interroger l'API, mais il s'avère que toutes les données que nous voulons se trouvent juste là dans le JSON pour le tableau. Tout! En une seule demande! Nous pouvons simplement le récupérer en une seule fois!

// trello.js
module.exports = () => {
  const TRELLO_JSON_URL='https://trello.com/b/Zzc0USwZ/hellotrello.json';

  // Use node-fetch to get the JSON data about this board
  const fetch = require('node-fetch');
  return fetch(TRELLO_JSON_URL)
    .then(res => res.json())
    .then(json => console.log(json));
};

Cependant, nous ne voulons pas montrer tout les données de cette carte. Il comprend des cartes sur d'autres listes, des cartes qui ont été fermées et supprimées, etc. Mais nous pouvons filtrer les cartes pour n'inclure que celles qui vous intéressent grâce à JavaScript filter méthode.

// trello.js
module.exports = () => {
   const TRELLO_JSON_URL='https://trello.com/b/Zzc0USwZ/hellotrello.json'
   const TRELLO_LIST_ID='5e98325d6d6bd120f2b7395f',
 
   // Use node-fetch to get the JSON data about this board
   const fetch = require('node-fetch');
   return fetch(TRELLO_JSON_URL)
   .then(res => res.json())
   .then(json => {
 
     // Just focus on the cards which are in the list we want
     // and do not have a closed status
     let contentCards = json.cards.filter(card => {
       return card.idList == TRELLO_LIST_ID && !card.closed;
     });
 
     return contentCards;
 });
};

Ça va le faire! Avec ceci enregistré dans un fichier appelé trello.js dans le répertoire de données d'Eleventy, nous disposerons de ces données prêtes à être utilisées dans nos modèles dans un objet appelé trello.

Fait-zo! 🎉

Mais nous pouvons faire mieux. Traitons également les images jointes et ajoutons également un moyen de préparer le contenu pour examen avant sa mise en ligne.

Pièces jointes d'image

Il est possible de joindre des fichiers à des cartes dans Trello. Lorsque vous joignez une image, elle apparaît juste là dans la carte avec l'URL source de l'actif décrit dans les données. Nous pouvons en profiter!

Si une carte comporte une image en pièce jointe, nous souhaitons obtenir son URL source et l'ajouter en tant que balise d'image à ce que notre modèle insère dans la page au moment de la création. Cela signifie ajouter le Markdown pour une image au Markdown dans la propriété description de notre JSON (card.desc).

Ensuite, nous pouvons laisser Eleventy transformer cela en HTML pour nous avec tout le reste. Ce code recherche les cartes dans notre JSON et masse les données dans la forme dont nous aurons besoin.

// trello.js

// If a card has an attachment, add it as an image 
// in the description markdown
contentCards.forEach(card => {
  if(card.attachments.length) {
    card.desc = card.desc + `n!(${card.name})(${card.attachments(0).url} '${card.name}')`;
  }
});

Maintenant, nous pouvons également déplacer des images dans notre contenu. Pratique!

Mise en scène du contenu

Ajoutons une autre touche à la façon dont nous pouvons utiliser Trello pour gérer le contenu de notre site.

Il y a plusieurs façons dont nous pourrions vouloir prévisualiser le contenu avant de le lancer dans le monde. Notre tableau Trello pourrait avoir une liste pour mise en scène et une liste pour production contenu. Mais cela rendrait difficile de visualiser comment le nouveau contenu coexiste avec celui qui est déjà publié.

Une meilleure idée serait d'utiliser les étiquettes de Trello pour indiquer quelles cartes sont publiées en direct et lesquelles ne devraient être incluses que dans une version par étapes du site. Cela nous donnera un bon flux de travail. Nous pouvons ajouter plus de contenu en ajoutant une nouvelle carte au bon endroit. Étiquetez-le avec «étape» et filtrez-le des cartes figurant sur notre branche de production.

Capture d'écran du tableau Trello avec un fond rose vif. Il contient des cartes dans une colonne intitulée Publié.
Indices d'étiquette dans Trello montrant quel contenu est mis en scène et ce qui est en direct

Un peu plus de filtrage de notre objet JavaScript est nécessaire:

// trello.js

// only include cards labelled with "live" or with
// the name of the branch we are in
contentCards = contentCards.filter(card => {
  return card.labels.filter(label => (
    label.name.toLowerCase() == 'live' ||
    label.name.toLowerCase() == BRANCH
   )).length;
 });

Nous voulons que le contenu étiqueté "en direct" apparaisse sur chaque version de la compilation, en préparation ou non. En outre, nous chercherons à inclure les cartes dont le libellé correspond à une variable appelée "BRANCH".

Comment venir? Qu'est-ce que c'est?

C'est là que nous devenons astucieux! J'ai choisi d'héberger ce site sur Netlify (clause de non-responsabilité: j'y travaille). Cela signifie que je peux exécuter la compilation à partir de l’environnement CI / CD de Netlify. Cela redéploie le site chaque fois que je pousse des modifications à son référentiel git, et donne également accès à quelques autres choses qui sont vraiment utiles pour ce site.

Le premier est le déploiement de Branch. Si vous voulez un nouvel environnement pour un site, vous pouvez en créer un en créant une nouvelle branche dans le référentiel Git. La compilation s'exécutera dans ce contexte et votre site sera publié sur un sous-domaine qui comprend le nom de la branche. Comme ça.

Jetez un œil et vous verrez toutes les cartes de notre liste, y compris celle qui porte l'étiquette orange «scène». Nous l'avons inclus dans cette version car son étiquette correspondait au nom de la branche du contexte de construction. BRANCH était une variable d'environnement qui contenait la branche dans laquelle la construction s'exécutait.

label.name.toLowerCase() == BRANCH

En théorie, nous pourrions créer autant de branches et d'étiquettes que nous le souhaitons, et disposer de toutes sortes d'environnements de préparation et de test. Prêt à promouvoir quelque chose de «scène» à «live»? Échangez les étiquettes et vous êtes prêt à partir!

Mais comment se met-il à jour?

Le deuxième avantage que nous tirons de l’exécution de la compilation du site dans un CI / CD tel que Netlify est que nous pouvons déclencher une compilation à exécuter quand nous le souhaitons. Netlify nous permet de créer des hooks de construction. Ce sont des webhooks qui lancent un nouveau déploiement lorsque vous leur envoyez un HTTP POST.

Si Trello prend également en charge les webhooks, nous pourrions associer ces services et actualiser automatiquement le site chaque fois que le tableau Trello change. Et devinez quoi… ils font! Hoorah!

Pour créer un hook de build Netlify, vous devez visiter le panneau d'administration de votre site. (Vous pouvez amorcer ce site de démonstration dans un nouveau site Netlify en quelques clics si vous souhaitez l'essayer.)

Capture d'écran de l'écran des hooks de build netlify avec des options pour ajouter un hook de build et générer une clé de déploiement publique.
Création d'un hook Netlify Build

Désormais, armés d'une nouvelle URL de hook de build, nous devrons enregistrer un nouveau webhook Trello qui l'appelle lorsque le contenu change. La méthode de création de webhooks dans Trello se fait via l'API de Trello.

Le référentiel pour ce site comprend un petit utilitaire pour appeler l'API Trello et créer le webhook pour vous. Mais vous aurez besoin d'un jeton et d'une clé de développeur Trello. Heureusement, il est facile de les créer gratuitement en visitant le portail des développeurs Trello et en suivant les instructions sous «Autoriser un client».

Je les ai? Génial! Si vous les enregistrez dans un .env dans votre projet, vous pouvez exécuter cette commande pour configurer le webhook Trello:

npm run hook --url https://api.netlify.com/build_hooks/XXXXX

Et avec cela, nous avons créé un joli petit flux pour gérer le contenu sur un site simple. Nous pouvons concevoir notre interface comme nous le souhaitons et faire en sorte que les mises à jour du contenu se produisent sur un tableau Trello qui met automatiquement à jour le site chaque fois que des modifications sont apportées.

Puis-je vraiment l'utiliser?

Ceci est un exemple simpliste. C'est par conception. Je voulais vraiment démontrer les concepts de découplage, et d'utiliser l'API d'un service externe pour piloter le contenu d'un site.

Cela ne remplacera pas un CMS découplé complet pour les projets plus complexes. Mais les principes sont totalement applicables à des sites plus complexes.

Ce modèle, cependant, pourrait être un bon match pour les types de sites Web que nous voyons pour les entreprises telles que les magasins indépendants, les bars et les restaurants. Imaginez un tableau Trello contenant une liste pour gérer la page d’accueil d’un restaurant et une autre pour gérer les éléments de son menu. Très accessible pour le personnel du restaurant à gérer, et bien plus agréable que de télécharger un nouveau PDF du menu à chaque fois qu'il change.

Prêt à explorer un exemple et à expérimenter avec votre propre tableau et contenu? Essaye ça:

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *