Introduction
Ce QuickStart vous guide dans la création d'un blog complet avec le composant BWEB : interface publique et back-office d'administration. Vous développerez l'application en parallèle de la lecture.
⏱️ Durée estimée : 2-3 heures
📌 Note importante
Le composant BWEB évolue régulièrement avec de nouvelles fonctionnalités et améliorations. L'interface que vous verrez dans votre version peut présenter quelques différences visuelles par rapport aux captures d'écran de ce QuickStart. Les concepts et la logique restent identiques.
Ce que vous allez construire
🌐 Blog Public (Frontend)
- ▸ Page d'accueil : liste des articles publiés
- ▸ Page détail : affichage complet d'un article
- ▸ Page contact : formulaire simple
⚙️ Back-office Admin (Backend)
- ▸ Liste des articles avec actions (éditer, supprimer, publier)
- ▸ Formulaire de création/édition d'articles
- ▸ Gestion des droits : profil admin et profil rédacteur
Pré-requis
💻 Technique
🎓 Connaissances
- ✓ Bases de 4D (tables, méthodes, dataclasses)
- ✓ Modélisation de données (entités, relations)
- ✓ Notions web de base (HTTP, routes) appréciées mais non obligatoires
- ✗ Pas besoin de connaître : HTML, JavaScript, Tailwind CSS en détail
💡 BWEB installe automatiquement toutes les dépendances (Tailwind, npm, etc.)
Approche de développement
BWEB utilise un éditeur WYSIWYG : vous composez vos interfaces par glisser-déposer et configurez le style via des formulaires visuels. Deux approches possibles pour le styling :
1️⃣ Visuelle
Remplissez les champs de configuration (bordure, espacement, couleurs, etc.) via un inspecteur
2️⃣ Classes Tailwind
Ajoutez directement les classes CSS si vous préférez
Les deux approches donnent le même résultat. Ce QuickStart privilégie l'approche visuelle, qui ne requiert aucun bagage technique préalable.
Structure du tutoriel
Partie 1 : Préparation du projet
Installation, modèle de données, données de test
Partie 2 : Domaine Admin – Back-Office
Liste des articles, formulaires CRUD, gestion des droits
Partie 3 : Domaine Front - Blog Public
Pages d'accueil, détail article, contact + navigation