Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Ricardo Henriques

Min Read

23 février 2024

Panneaux d'administration Node.js - Strapi et Express Admin révisés

Récemment, j'ai fait des recherches pour trouver un moyen rapide et simple de développer un back office en JavaScript, sans avoir à tout écrire à partir de zéro. Au cours de mes recherches, j'ai trouvé deux excellentes options : Sangles et Administrateur Express.

En les regardant d'emblée, nous pouvons voir que la principale différence en ce qui concerne la pile de construction est que l'interface d'administration de Strapi est construite avec React JS. Chaque option mérite cependant une analyse beaucoup plus approfondie afin de connaître ses particularités. Je profiterai de cette occasion pour fournir également quelques informations sur la façon de les configurer et de les faire fonctionner correctement en un rien de temps.

blue arrow to the left
Imaginary Cloud logo

Administrateur Express

Express Admin UI (www.github.com/simov/express-admin)

Express Admin vous permet de vous connecter aux bases de données MySQL, MariaDB, SQLite et PostgreSQL, mais notez qu'il est orienté vers les bases de données relationnelles. Les configurations d'Express Admin sont effectuées via des fichiers JSON créés manuellement.

Ses principales caractéristiques sont les suivantes :
• Relations entre tables SQL : vous pouvez définir tous les types de relations entre tables ;
• L'internationalisation est possible ;
• Possibilité de créer des vues et des événements personnalisés ;
• Toutes sortes de bibliothèques et de contrôles côté navigateur ;
• Autorise les thèmes (Bootswatch).

Comment faire fonctionner Express Admin

Je suppose que Node.js et NPM sont déjà installés au préalable (je suggère également d'utiliser NVM ici) :

Pour obtenir le module

$ [sudo] npm install [-g] express-admin
# PostgreSQL uniquement : lancez-le dans le dossier express-admin
$ npm install pg @2 .8.2
# SQLite uniquement : lancez-le dans le dossier express-admin
$ npm install sqlite3 @2 .2.0

Pour créer un projet

chemin d'administration/vers/config/dir

L'exécution de cette commande vous demandera de saisir le type de base de données, le port, l'utilisateur, le nom de la base de données, le mot de passe, l'utilisateur administrateur et le mot de passe administrateur. Veuillez noter qu'Admin Express nécessite que vous disposiez d'une base de données existante contenant des données.

Express Admin building project

Comme vous pouvez le constater, votre interface d'administration est désormais opérationnelle ! Accédez simplement à votre navigateur et accédez à hôte local : 3000.

Express Admin Login

Connectez-vous pour accéder à l'écran principal :

Express Admin Main screen

Ma base de données ne contient qu'une seule table (produits), mais à partir de là, vous pouvez ajouter de nouvelles entrées, les supprimer ou mettre à jour celles qui existent déjà. Tu en as plein.

Express Admin Entity screen

Express Admin est capable de lire votre schéma et de le mapper dans un fichier de configuration JSON. Cela fait partie du fichier settings.json qui était

généré par l'administrateur :

Express Admin settings.json configurations

Comme vous pouvez le constater, tous les champs de la table sont définis ici. C'est ainsi qu'Express Admin crée le crud pour chaque table. Quant aux configurations d'accès à la base de données, elles sont stockées dans le fichier config.json.

Si vous souhaitez en savoir plus sur la configuration d'Express Admin, rendez-vous sur cette page et suivez les étapes répertoriées.

Principales fonctionnalités d'Express Admin

Relations SQL

Express Admin vous permet également de configurer les relations entre les tables pour créer automatiquement les champs appropriés. Vous pouvez avoir des relations un à plusieurs, plusieurs à plusieurs, plusieurs à un et un à un. Accédez simplement à settings.json et modifiez-le en fonction de vos besoins. L'image suivante montre un exemple d'une ou de plusieurs relations :


Pour en savoir plus sur les relations, parcourez simplement ici.

Personnalisation (vues par exemple)

Oui, c'est possible, puisque vous disposez d'un fichier .json personnalisé dans lequel vous pouvez configurer votre code personnalisé :


Créez simplement votre fichier app.js personnalisé et un fichier de vue. Pour en savoir plus à ce sujet, il suffit de suivre cette page.

Mon avis sur Express Admin

Si vous n'avez besoin que d'une interface d'administration dotée des fonctionnalités CRUD et d'un certain niveau de personnalisation, Express Admin est une bonne solution. Comme nous l'avons vu précédemment, il permet les relations entre les tables, prend en charge les vues personnalisées et fonctionne avec plusieurs bases de données (relationnelles uniquement — bases de données MySQL, MariaDB, SQLite et PostgreSQL). À mon avis, Express Admin est une excellente option à choisir en raison de sa simplicité et de sa personnalisation.

Il manque un autre type de personnalisation pour le tableau de bord, mais vous pouvez toujours bifurquer le code et le modifier en fonction de vos besoins.

blue arrow to the left
Imaginary Cloud logo

Sangles

Comme vous l'avez certainement remarqué, Express Admin est une bonne interface d'administration et très bonne pour ce qu'elle est. Imaginez maintenant que vous pourriez disposer de toutes ces fonctionnalités et être capable de générer une API, ainsi que d'autres fonctionnalités telles que l'autorisation et l'authentification des utilisateurs. Ce serait génial, non ? Eh bien, c'est possible avec Strapi !

Ensuite, je vais vous donner un aperçu du fonctionnement de Strapi et de la façon de commencer à l'utiliser. Pour plus d'informations, consultez la documentation Strapi.

Commençons par installer Strapi :

npm install strapi @alpha -g


Créez ensuite un nouveau projet. Vous serez invité à entrer le type de base de données, le nom de la base de données et les données d'accès.

strapi new my-project


Strapi building project

Avant de démarrer le projet, vous devez exécuter la configuration d'exécution de NPM. Alors, tu es prêt à partir.

cd my-project
configuration de npm run
démarrage à bretelles

Si vous accédez hôte local : 1337/admin vous devriez pouvoir voir l'écran de création de l'utilisateur administrateur :

Strapi Login

Créez simplement votre utilisateur administrateur et vous serez ensuite redirigé vers le tableau de bord :

Strapi Main Screen

Caractéristiques principales de Strapi :

Création de contenu (types de contenu)

Passons directement aux bonnes choses et expliquons comment créer du contenu. Vous pouvez utiliser le « Content Type Builder » dans le menu de gauche ou des générateurs. Je vais expliquer ici comment utiliser le générateur de types de contenu, mais n'oubliez pas d'essayer également les générateurs.

Les types de contenu sont simplement les modèles (et API) connectés à votre base de données MySQL qui sont utilisés par Strapi afin de générer les écrans CRUD. Ajoutons donc un nouveau type de contenu :

Strapi Add new content type

En ce qui concerne les champs, lorsque vous cliquez sur Ajouter un nouveau champ, vous obtiendrez ceci :

Strapi Field type selection

Strapi vous permet de choisir le type de données, qui constitue l'une de ses fonctionnalités les plus intéressantes. Ajoutons 2 champs (description et prix) et cliquez sur Enregistrer. C'est là que les choses deviennent vraiment intéressantes. Il suffit de regarder les fichiers générés :

Strapi API routing

Génial, n'est-ce pas ? Strapi vient de générer le service, le modèle et le contrôleur pour votre API, et bien sûr, vous pouvez toujours personnaliser

selon vos besoins.

Une autre caractéristique intéressante est la possibilité de créer des relations au sein des types de contenu. Supposons un autre type de contenu (catégorie) que nous voulons associer au produit. Lors de l'ajout d'un champ, nous sélectionnons le type de relation, puis :

Strapi Relating content type

Vous pouvez choisir entre un type de relation, un à plusieurs et plusieurs types de relations. Ainsi, si vous ajoutez un produit, vous verrez apparaître un champ de catégorie.

Strapi Showing new relation with content type

Création d'API

L'API est générée automatiquement et vous pouvez modifier le code en fonction de vos besoins.

Strapi API code generated

Rôles et autorisations

Afin de donner un accès public à l'API, vous pouvez définir les rôles et les autorisations, ce qui est une autre fonctionnalité intéressante de Strapi. Il est livré prêt à l'emploi avec un plugin de gestion des rôles et des autorisations.

Strapi Roles and permissions

Pour autoriser l'accès public à l'API, vous modifiez le rôle :

Strapi Roles and permissions changing

Mon avis sur Strapi

Si vous avez besoin d'une interface d'administration, mais que vous souhaitez également créer et diffuser une API, Strapi est un excellent choix pour vous. Le générateur de type de contenu de Strapi est excellent et répondra à presque tous vos besoins. Si ce n'est pas le cas, vous pouvez toujours développer vos propres plugins. Une autre fonctionnalité intéressante concerne les rôles/autorisations.

Malheureusement, Strapi est encore en développement et présente quelques bugs d'utilisation, mais la communauté grandit et elle est très active sur GitHub. Nous attendons donc toujours des améliorations.

Vue d'ensemble

En fonction de vos besoins, vous pouvez choisir Express Admin si vous souhaitez simplement intégrer une interface d'administration à votre application afin de gérer vos données (interfaces CRUD simples) et un certain niveau de personnalisation.

Si vos besoins incluent la création d'une API, de rôles et d'autorisations pour les utilisateurs, Strapi devrait certainement être votre choix.

Nous pouvons donc dire que les deux options sont excellentes et que le choix doit être fait en fonction de vos besoins.

Ready for a UX Audit? Book a free call

Vous avez trouvé cet article intéressant ? Ceux-ci vous plairont peut-être aussi !

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Ricardo Henriques
Ricardo Henriques

Développeur @Imaginary Cloud, dédiée à la création de solutions logicielles exceptionnelles, engagée dans l'innovation et adoptant des technologies de pointe.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon