Partie 1
Préparation du projet
🎯 Objectifs de cette partie
À la fin de cette section, vous aurez :
- ✓ Un projet 4D opérationnel
- ✓ Le composant BWEB installé avec un domaine admin.myblog.fr configuré
- ✓ Une table POST avec tous les champs nécessaires
1.1 Création du projet 4D
Nouveau projet
- Lancez 4D v20R9 (ou version supérieure)
- Menu : Fichier > Nouveau > Projet...
- Choisissez un emplacement et nommez votre projet : MyBlog
💡 Dans ce QuickStart nous partons d'un projet neuf mais vous pouvez aussi utiliser un projet 4D existant si vous souhaitez ajouter BWEB à une application déjà développée.
1.2 Téléchargement et installation de BWEB
Téléchargement du composant
- Rendez-vous sur https://bspoke.fr/ressources
- Remplissez le formulaire de téléchargement
- Téléchargez BWEB version 20R (fichier zip pour Windows, ou dmg pour Mac)
- Dézippez le fichier téléchargé et copiez le dossier Components à la racine de votre projet MyBlog
Arborescence du projet
⚠️ Redémarrez votre projet pour la bonne prise en compte du composant
Installation via le lanceur BWEB
- Démarrez le lanceur BWEB en exécutant la méthode BSPK_LAUNCH
- Il vous sera demandé de confirmer l'installation des méthodes du composant
- Puis vous arriverez sur l'écran du lanceur proprement dit dans lequel vous cliquerez sur Installer BWEB
Lanceur BWEB
📚 Vous pouvez retrouver les étapes de l'installation complète sur la documentation BWEB
- Suivez les étapes de l'assistant graphique
- À l'étape de sélection des certificats, prenez ceux fournis dans les ressources de ce QuickStart. Ce sont des certificats auto-signés pour le domaine myblog.fr
Vous pouvez télécharger le projet complet en suivant ce lien : Ressources du Quick Start
⚠️ Important : Lors de la création du premier domaine, saisissez : admin.myblog.fr
- Complétez l'installation
💡 L'installeur configure automatiquement tous les fichiers et dossiers nécessaires au fonctionnement de BWEB (composant, dépendances Node.js, Tailwind CSS, etc.)
📚 Documentation complète : Pour les détails techniques de l'installation, consultez la documentation officielle BWEB.
Vérification de l'installation
- À la fin de l'installation, le lanceur vous propose d'ouvrir votre domaine admin.myblog.fr
- Le certificat fourni étant auto-signé il est normal que votre navigateur vous affiche une alerte mais vous pouvez continuer
- Votre navigateur s'ouvre sur la page de login de BWEB
Page de login
✅ Si la page de login s'affiche correctement, BWEB est bien installé !
💡 Le login du 1er utilisateur créé automatiquement par BWEB est obligatoirement DEV et vous pouvez choisir votre mot de passe.
Création du mot de passe
Après validation vous devriez obtenir la page d'accueil, en français ou en anglais selon vos préférences système.
Dashboard de BWEB
1.3 Création de la table POST
Structure de la table
De retour dans 4D, vous allez créer la table POST qui contiendra tous vos articles de blog.
- Menu : Fichier > Structure... (ou Cmd/Ctrl + Shift + S)
- Nota : vous constaterez que votre structure contient déjà un grand nombre de tables créées par le composant, que vous ne devez ni supprimer ni renommer
- Cliquez sur Nouvelle table
- Nommez la table : POST
- Ajoutez les champs et index suivants :
| Nom du champ | Type | Index | Description |
|---|---|---|---|
| title | Alpha (255) | Oui | Titre de l'article |
| slug | Alpha (255) | Oui | URL-friendly de l'article |
| summary | Texte | Non | Résumé court |
| content | Texte | Non | Contenu complet HTML |
| imageName | Alpha (255) | Non | Nom du fichier image |
| isPublished | Booléen | Oui | Statut de publication |
| publicationDate | Date | Oui | Date de publication |
- Enregistrez la structure
À quoi servent ces champs ?
slug
Utilisé dans les URLs pour avoir des liens lisibles
Exemple : /article/mon-premier-article au lieu de /article/1
summary
Texte court affiché sur la page d'accueil dans la liste des articles
imageName
Nom de l'image affichée à la fois sur la page d'accueil (grille d'articles) et en haut de la page détail. On utilisera le même ratio partout pour un rendu cohérent, notamment sur mobile.
isPublished
Permet de créer des brouillons (false) avant de les publier (true). Seuls les articles avec isPublished = true apparaîtront sur le blog public.
💡 BWEB va également pouvoir générer ou compléter automatiquement vos classes (DataClass, Entity et EntitySelection).
Vous devez dans un premier temps autoriser le composant à modifier vos dataclass (en créant le paramètre « vbAddBSPKDataClass » ou simplement en le passant à « True » s'il existe déjà dans vos paramètres, selon la version du composant BWEB) puis en lançant la génération avec la méthode BSPK_UTIL_UPDATE_DATACLASS :
⚠️ Important : Tout le code est généré entre les balises /*** START BSPK ***/ et /*** END BSPK ***/
Vous pouvez donc ajouter votre propre code en dehors de ces balises sans risque d'écrasement.
Pour des raisons de respect du code existant, cette action n'est pas réalisée par défaut par BWEB, bien que non destructive.
1.4 Ajout de données de tests
Nous allons maintenant ajouter des données de tests pour la suite du Quick Start. Pour ce faire nous allons utiliser l'ATL (pour Administration Table List) qui est un outil de visualisation et d'édition des données puissant et intuitif à destination des développeurs 4D.
1.5 Vérification finale
Avant de passer à la suite, vérifiez que :
- ✅ BWEB est installé et la page de login est accessible
- ✅ Le domaine admin.myblog.fr a été créé lors de l'installation
- ✅ La table POST existe avec tous les champs requis et les classes POST, POSTEntity et POSTSelection
- ✅ Vous pouvez vous connecter avec l'utilisateur DEV
🎉 Prochaine étape
Votre projet est maintenant prêt ! Direction la Partie 2 : Domaine Admin - Backend pour créer le back-office de gestion des articles.
Besoin des ressources du projet ?