Premiers pas avec Strapi CMS : un guide complet pour les développeurs

Introduction

Strapi CMS est un sans tête, système de gestion de contenu open source conçu pour le moderne la toile et applications mobiles. Contrairement aux plateformes CMS traditionnelles, Strapi est un outil moderne où la partie qui gère le contenu (backend) est séparée de la partie que les utilisateurs voient (frontend). Cela permet aux développeurs de choisir n’importe quelle conception ou technologie pour leur site Web ou leur application tandis que Strapi s’occupe de la gestion du contenu. Il fournit une architecture API robuste qui prend en charge REST et GraphQL, permettant une intégration transparente avec divers outils et frameworks.

La flexibilité de Strapi réside dans sa nature personnalisable : vous pouvez facilement créer et gérer des types de contenu, étendre ses fonctionnalités avec des plugins et même le connecter à n’importe quelle base de données de votre choix. Grâce à un panneau d’administration convivial, les créateurs de contenu peuvent gérer le contenu efficacement, tandis que les développeurs bénéficient d’un contrôle total sur la structure du projet et la base de code. Que vous construisiez un site Web, un application mobileou un Commerce électronique plateforme, Strapi vous permet de fournir des solutions évolutives et flexibles.

Principales fonctionnalités et pourquoi avons-nous besoin de Strapi CMS

Déchirures simplifie la gestion de contenu dans le développement Web moderne grâce à son architecture sans tête. Voici pourquoi les développeurs l’adorent :

• Personnalisation : Entièrement personnalisable grâce à des plugins et des extensions.
• API d’abord : Génère automatiquement des API RESTful ou GraphQL.
• Architecture sans tête : Découple le backend et le frontend pour plus de flexibilité.
• Facilité d’utilisation : Panneau d’administration simple pour gérer le contenu.
• Flexibilité: Vous permet d’utiliser n’importe quel framework ou bibliothèque frontend.
• Évolutivité : Idéal pour les applications à grande échelle avec des besoins de contenu divers.
• Open Source : Utilisation gratuite avec une communauté croissante.

Gestion de contenu facile avec Strapi

Strapi simplifie la gestion du contenu d’un site Web ou d’une application, même pour les utilisateurs non techniques. Son panneau d’administration convivial permet aux gestionnaires de contenu, aux spécialistes du marketing et aux propriétaires d’entreprise de mettre à jour et d’organiser le contenu sans écrire de code.

• Mises à jour faciles : Ajoutez, modifiez ou supprimez du contenu rapidement via un tableau de bord intuitif.
• Organisation du contenu : Gardez tout structuré et accessible sans savoir-faire technique.
• Outils collaboratifs : Attribuez des rôles et des autorisations aux membres de l’équipe pour un travail d’équipe fluide.
• Publication rapide : Publiez, dépublier ou planifiez du contenu en quelques clics.

Comment configurer et installer Strapi CMS

Conditions préalables :

Avant d’installer Strapi, assurez-vous que les outils et technologies suivants sont installés sur votre système :

1. Node.js : Strapi nécessite une version minimale de Node.js pour fonctionner. Au moment de la rédaction, Node.js version 14 ou supérieure est prise en charge. pour les versions futures et le support, vérifiez toujours le document officiel (Exigence générale Strapi) pour connaître la dernière version requise.

node -v # To check Node.js version

2. npm ou fil : Installé avec Node.js. Utilisez l’un ou l’autre pour la gestion des packages.

npm -v # To check npm version
yarn -v # To check yarn version (if installed)

3. Base de données : Strapi utilise SQLite comme base de données par défaut, c’est une base de données légère basée sur des fichiers. Strapi prend en charge plusieurs bases de données, telles que SQLite, MongoDB, MySQL et PostgreSQL. Il simplifie le processus de configuration et est idéal pour un développement rapide.

Pourquoi utiliser une base de données externe :

• Évolutivité : Les bases de données externes gèrent plus efficacement de gros volumes de données et les demandes simultanées.
• Performance: Optimisé pour les opérations de lecture et d’écriture élevées dans des environnements exigeants.
• Caractéristiques: Prise en charge de fonctionnalités avancées telles que la réplication, le clustering et les requêtes avancées.

Étape 1 : Installer le CMS Strapi
Vous pouvez installer Strapi à l’aide de la commande npx ou manuellement via npm/yarn.

npx create-strapi-app my-project

créer-strapi-app : L’outil officiel pour générer un nouveau projet Strapi.
mon-projet : Le nom du dossier de votre projet.

Lien de référence d’installation : – Documentation officielle

Comprendre la structure du projet

Voici une répartition de la structure des dossiers créée par Strapi :

• src/ : Contient tout le code source des API, des composants et des configurations.
  – API/ : Stocke les API générées automatiquement et personnalisées.
  – composants/: Définit des composants réutilisables pour les types de contenu.
  – extensions/: Contient des plugins ou des personnalisations.
• config/ : Stocke les configurations spécifiques à l’environnement.
• node_modules/ : Contient les dépendances installées.
• package.json : Répertorie les dépendances et les scripts du projet.

Note: Strapi utilise un cache dossier pour stocker des données temporaires qui contribuent à améliorer les performances en réduisant le besoin de récupérer ou de recalculer certaines informations. Les mécanismes de mise en cache peuvent inclure des éléments tels que les résultats des requêtes de base de données, les réponses API ou les données de contenu qui ne changent pas fréquemment.

Structure des dossiers Strapi

Structure du dossier Src

Étape 2 : Démarrer le serveur de développement
Une fois l’installation terminée, démarrez le serveur de développement Strapi :

cd my-project
npm run develop # This command runs Strapi in development mode, which allows live reloading of changes.

Par défaut Le panneau d’administration est accessible sur hôte local : 1337/admin

Étape 3 : Créer un compte administrateur
Après le lancement, Strapi vous demandera de créer un compte administrateur pour accéder au tableau de bord.
Remplissez tous les détails et cliquez Commençons

Création de compte

Après avoir créé un compte administrateur, vous serez redirigé vers le tableau de bord Strapi –

Tableau de bord Strapi

Que sont les types de collections et comment les créer :

Types de collectes dans Strapi, définissez la structure de votre contenu, semblable aux tables d’une base de données.

• Générateur de types de contenu : C’est ici que vous définissez la structure de votre contenu, comme la création de nouveaux types de contenu (par exemple, blog, événements) et l’ajout de champs (par exemple, texte, texte enrichi, date). Il fournit une interface flexible pour concevoir le modèle de données pour votre application
• Gestionnaire de contenu : Une fois les types de contenu définis, Content Manager vous permet de gérer les données réelles. Vous pouvez ajouter de nouvelles entrées, modifier celles existantes et supprimer des données directement à partir d’une interface intuitive conçue pour les utilisateurs non techniques.
• Composants : Les composants sont des groupes de champs réutilisables qui peuvent être partagés entre plusieurs types de contenu. Par exemple, un composant « Bannière » avec des champs d’image et de vidéo peut être ajouté à différents types de contenu.

types de collectes

Étapes pour créer un type de collection :

1. Accédez au panneau d’administration : Accédez au panneau d’administration et cliquez sur « Générateur de types de contenu« .
2. Ajoutez un nouveau type de collection :
– Cliquez sur Créer un nouveau type de collection.
– Nommez la collection (par exemple, Événement).
3. Ajoutez des champs : Strapi fournit de nombreux champs comme l’image ci-dessous

Champs Strapi

Ici, j’ai ajouté 2 champs pour le type de collection Event :
– Nom de l’événement (texte)
– Détails (texte enrichi)

Ajout d’un champ

4. Enregistrez : Enregistrez la collection et Strapi créera automatiquement les points de terminaison de l’API.

Comment créer une page à l’aide du gestionnaire de contenu :

• Accédez au panneau d’administration : Accédez au panneau d’administration et cliquez sur « Gestionnaire de contenu« .
• Choisissez le type de contenu : Sélectionnez le type de contenu (par exemple, « Événement») où vous souhaitez ajouter une nouvelle entrée.
• Créer une nouvelle entrée : Cliquez sur Créer Nouvelle entrée pour ouvrir le formulaire.
• Remplir les détails : Ajoutez du contenu dans les champs obligatoires (par exemple, EventName, Detail, Banner).
• Enregistrer et publier : Enregistrez l’entrée et publiez-la pour la rendre accessible via l’API.

Page d’événement

Autoriser la collection à accéder aux API

Strapi fournit des fonctionnalités d’authentification et d’autorisation intégrées pour sécuriser les API.

Caractéristiques:
JWT (jeton Web JSON) : Utilisé pour les interactions API sécurisées.
Contrôle d’accès basé sur les rôles (RBAC) : Définir des rôles (par exemple, public, authentifié) pour accéder aux ressources.

Exemple:
1. Activez l’authentification pour une API :
Dans le panneau d’administration, accédez à Paramètres > Rôles.
Configurez les autorisations pour les rôles publics ou authentifiés.

Image d’authentification

API-Autorisation

Une collection d’événements générera les points de terminaison d’API suivants, comme indiqué dans l’image ci-dessus :

create => [POST] /api/events
find => [GET] /api/events
update => [PUT] /api/events/:id
delete => [DELETE] /api/events/:id
findOne => [GET] /api/events/:id

2. Générez JWT :
Utilisez le point de terminaison /auth/local pour authentifier les utilisateurs :

Jeton JWT

POST localhost:1337/api/auth/local
{
"identifier": "<username>",
"password": "<password>"
}

La réponse inclura un jeton JWT comme l’image ci-dessus.

3. Utilisez JWT pour les requêtes API : Incluez le jeton dans l’en-tête Authorization :

GET localhost:1337/api/event
Authorization: Bearer <JWT_TOKEN>

Comment récupérer les données Strapi en tant qu’API

Une fois que vous avez créé votre type de collection d’événements et ajouté des données, vous pouvez utiliser Postman pour tester et récupérer les données via l’API de Strapi. Suivez ces étapes :

• Facteur ouvert
• Définissez la méthode de requête sur OBTENIR.
• Entrez le point de terminaison de l’API hôte local : 1337/api/événements dans le champ URL.
• Cliquez Envoyer pour en faire la demande.

Réponse de l’API

Comme vous pouvez le voir dans l’image ci-dessus, nous avons toutes les données d’événement au format json.
si vous souhaitez récupérer une seule entrée, nous devons la transmettre à la fin du point de terminaison comme ci-dessous :

[GET] /api/events/:id (localhost:1340/api/events/2)

Résultat de l’API par ID

Conclusion

Strapi CMS se distingue comme une solution puissante, flexible et moderne pour créer des applications riches en contenu. Son architecture sans tête, associée à une interface d’administration intuitive, le rend idéal aussi bien pour les développeurs que pour les gestionnaires de contenu. Avec la prise en charge des API REST et GraphQL, des types de contenu personnalisables et une compatibilité multi-bases de données, Strapi offre une évolutivité et une polyvalence inégalées. Que vous développiez une application Web, une application mobile ou une plate-forme pilotée par API, Strapi rationalise votre flux de travail et accélère le développement.

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE