Objectifs et mise en route - Créer un blog avec Adonis

Bonjour,

Bienvenue dans ce tutoriel pour apprendre à utiliser le framework web Adonis ! Si tu souhaites en savoir plus sur Adonis en 1 coup œil, je t'invite à lire cette page.

Présentation du projet

Tu trouveras aussi sur GiHub l'ensemble du code source du projet si ça t'intéresse !

Objectifs

Les objectifs de ce tutoriel sont multiples. Dans un premier temps, il va te permettre de mettre un premier pied dans l'utilisation d'Adonis. Ensuite, on va créer ensemble, pas à pas, une application utile avec des fonctionnalités similaires à ce que l'on peut retrouver sur d'autres web app sur internet ! Je vais aussi t'expliquer les raisons qui nous poussent à utiliser telle ou telle fonctionnalité pour te rendre le plus autonome sur le framework et te donner l'envie de l'utiliser.

Cependant, il ne sera pas utilisé de CSS durant l'ensemble du tutoriel. On se concentre sur l'apprentissage du framework ! On ne fera pas non plus de mise en production !

Tout au long du tutoriel, tu trouveras différents liens t'amenant directement sur la ressource de la documentation Adonis ! Cette dernière est très bien faite et te donnera plus de détails ! Dans ce tutoriel, nous allons mettre en lien tous ces éléments pour construire notre blog et plus généralement pour construire un site !

N'oublie pas que la doc est ta meilleure amie !

Prérequis

Pour ce tutoriel, assez peu de prérequis sont nécessaires ! Tout de même, il faut :

• Avoir des bases en HTML et javascript et en SQL
• Avoir des bases dans le fonctionnement d'un serveur web
• Avoir Node, PostgreSQL, pgAdmin sur sa machine
• Avoir un éditeur de texte comme VSCode

En cas de doutes, je te partage ici un ensemble de ressources pour en savoir plus :

• HTML: HyperText Markup Language
• JavaScript
• SQL
• Client-Server Overview
• A wonderful way to learn, to understand and to create server-side website
• Nodejs
• PostgreSQL
• VSCode

Sommaire

Ce tutoriel est découpé en différente partie pour t'aider et pour éviter d'avoir des articles trop longs où l'on pourrait se perdre !

Nous allons donc voir ensemble :

• Objectifs et mise en route - Créer un blog avec Adonis
• Création d'un utilisateur - Créer un blog avec Adonis
• Création de l'authentification pour l'utilisateur - Créer un blog avec Adonis
• Création et visualisation des articles - Créer un blog avec Adonis
• Gestion des articles - Créer un blog avec Adonis

Finalement, tu auras un blog fonctionnel !

Cahier des charges

Avant de commencer à programmer, on va créer ensemble le cahier des charges de cette superbe web application. Créer le cahier des charges en amont nous permettra, lorsqu'il faudra coder, d'avoir tout en tête, de savoir avec précision ce que nous sommes en train et de faire et pourquoi nous sommes en train de le faire ! Comme ça, quand on code, on code et on ne réfléchit plus à ce à quoi doit ressembler ou ce que doit faire notre web app !

Nous allons créer un blog. C'est à dire une web application permettant à ses visiteurs de visualiser l'ensemble des articles du blog, d'y naviguer via une pagination et de les visualiser 1 à 1. Sur cette page de visualisation, on pourra lire l'article en entier et voir son auteur.

L'auteur du blog sera un utilisateur présent en base de données. Il pourra s'authentifier auprès du site pour créer un article et éditer ses différents articles.

D'un point de vue design, notre blog ne sera que de l'HTML. Aucun style ne sera appliqué.

Ainsi, nous aurons les routes suivantes dans notre blog :

• GET /, redirige vers GET /articles
• POST /login, pour authentifier un utilisateur
• GET /login, pour avoir accès au formulaire d'authentification
• GET /articles, pour visualiser les articles
• GET /articles/:id, pour visualiser un article
• POST /articles, pour créer un article dans la base de données, accessible que pour les utilisateurs authentifiés
• GET /article/create, pour avoir accès à la page de création d'un article, accessible que pour les utilisateurs authentifiés
• PATCH /articles/:id, pour mettre à jour un article dans la base de données, accessible que pour les utilisateurs authentifiés
• GET /articles/edit, pour avoir accès à la page de modification d'un article, accessible que pour les utilisateurs authentifiés

L'ensemble des données envoyées au serveur seront vérifiées.

D'un point de vue base de données, nous allons construire la chose suivante :

Il faut comprendre le trait, qui est en forme de fourche sur article comme : un utilisateur peut avoir plusieurs articles mais un article n'a qu'un utilisateur !

Mise en route du projet

Initialisation de l'application

Pour commencer à coder, commençons par sortir un terminal, place-toi dans l'un de tes répertoires et exécute la commande suivante :

npm init adonis-ts-app@latest create-a-blog-using-adonis

Cette commande permet de créer rapidement un squelette d'une application Adonis ! Lorsque l'on te demande le choix du projet, il faut prendre web. En ce qui concerne eslint/prettier, je te conseille de répondre oui. Cela te permet de garder un style de code consistant. Pour webpack encore, nous n'allons pas en avoir besoin donc tu peux répondre non.

Cette configuration nous permettra de répondre à l'ensemble du cahier des charges en installant le template engine pour créer différentes vues. Nous installerons nous même d'autres modules par la suite !

Une fois cela fait, tu peux te rendre dans le dossier et lancer la commande

npm run dev

Qui lancera le serveur.

Rendez-vous sur http://localhost:3333 pour voir notre web app en action !

Pour en savoir plus : Installation

Conclusion

Et voilà pour cette première partie d'explication et de mise en route où l'on a vu ce qu'on allait faire. On a créé le cahier des charges et on a initialisé l'application !

N'hésite pas à commenter si tu as des questions, si ça t'a plus ou même pour me faire des retours !

Et tu peux aussi me retrouver sur Twitter ou sur LinkedIn !

On se donne rendez-vous ici, Création d'un utilisateur - Créer un blog avec Adonis, pour la suite du tutoriel et créer notre premier utilisateur !