communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Créez un panneau d'administration pour votre projet en minutes

Créez un panneau d'administration pour votre projet en minutes

DDD
Libérer： 2024-12-22 03:38:10
original
481 Les gens l'ont consulté

Kottster est un outil gratuit pour aider les développeurs à créer et déployer rapidement des panneaux d'administration. En seulement 5 minutes, vous pouvez générer un panneau d'administration entièrement fonctionnel, le déployer sur le cloud et le partager avec votre équipe.

Lorsque vous créez des applications avec Kottster, elles s'exécutent sur Remix, un framework Web permettant de créer des applications full-stack à l'aide de l'environnement React et Node.js.

Dans cet article, je vais vous montrer comment créer une application Kottster, la connecter à votre base de données, générer des pages pour des tables spécifiques et l'héberger n'importe où.

Créer un projet

Avant de commencer, assurez-vous que Node.js (v20 ou supérieur) est installé sur votre machine.

Pour créer un nouveau projet, exécutez cette commande :

npx @kottster/cli new
Copier après la connexion
Copier après la connexion

Il vous sera demandé un nom de projet, si vous souhaitez utiliser JavaScript ou TypeScript, et quel gestionnaire de packages utiliser. Après cela, un nouveau dossier de projet sera créé avec tout ce dont vous avez besoin pour commencer.

Create an Admin Panel for your project in inutes

Pour démarrer l'application localement, ouvrez le dossier créé et exécutez npm run dev :

Create an Admin Panel for your project in inutes

Lorsque l'application se charge, vous verrez la page de connexion. Cliquez sur « Créer un compte » pour vous inscrire sur Kottster. Après vous être inscrit, saisissez un nom pour votre application et cliquez sur « Créer une application ». Cela créera votre application et vous connectera.

Une fois que tout est configuré, vous verrez la page « Démarrer » :

Create an Admin Panel for your project in inutes

Connectez votre base de données

Sur la page de démarrage, choisissez votre type de base de données, saisissez les détails de connexion et cliquez sur « Connecter ».

Cela installera les packages nécessaires et créera un fichier avec une source de données connectée à votre base de données dans votre dossier de projet.

Veuillez noter que votre application étant auto-hébergée, vos informations d'identification restent toujours privées et l'outil Kottster n'a pas accès à votre base de données.

Générer des pages

Après avoir connecté votre base de données, vous verrez l'onglet « Générer des pages » :

Create an Admin Panel for your project in inutes

Cette page vous aide à créer rapidement des pages pour afficher ou gérer les données de vos tables de base de données.

Si vous activez « Autoriser l'insertion » ou « Autoriser la mise à jour », des formulaires d'ajout et de mise à jour d'enregistrements seront disponibles. L'activation de « Autoriser la suppression » ajoutera la possibilité de supprimer des enregistrements.

Une fois vos sélections effectuées, cliquez sur "Générer des pages". L'outil générera automatiquement les fichiers de page et mettra à jour le menu de la barre latérale avec de nouveaux éléments.

Comment fonctionnent les pages

Chaque page de votre panneau d'administration se trouve dans le répertoire app/routes. Ces pages sont essentiellement des itinéraires Remix qui servent à la fois d'interface utilisateur et d'API, et vous pouvez les personnaliser comme bon vous semble.

Chaque fichier de page de l'application Kottster doit exporter un composant React, , qui représente la page elle-même. Vous pouvez inclure n'importe quel contenu à l'intérieur de ce composant.

Lorsque vous générez une page pour une table de base de données spécifique, elle comprendra les éléments suivants :