recherche

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
DDDoriginal
2024-12-22 03:38:10531parcourir

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

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 :

  • Une action Remix qui appelle la fonction createTableRpc. Cette fonction contrôle le comportement de la table et active ses fonctionnalités.
  • Une composant, qui est étroitement lié aux paramètres createTableRpc définis dans l'action.

    Exemple de page générée pour la table "utilisateurs" :

    npx @kottster/cli new

    Vous pouvez en savoir plus sur createTableRpc et l'outil

    composant dans notre documentation. Je recommande également d'en savoir plus sur Remix et son Fullstack Data Flow dans leur documentation officielle.

    Déploiement

    Lorsque vous êtes prêt, vous pouvez déployer votre application Kottster pour la rendre disponible en ligne. Avant le déploiement, assurez-vous que l'application est correctement construite et exempte d'erreurs.

    Pour ce faire, créez votre application localement en exécutant npm run build :

    Create an Admin Panel for your project in inutes

    S'il n'y a aucune erreur, votre application est prête à être mise en ligne. Comme il est auto-hébergé, vous pouvez le déployer où vous le souhaitez. Apprenez-en davantage sur les options de déploiement ici.

    Déployer sur Vercel gratuitement

    Dans cet article, je couvrirai l'une des options gratuites les plus populaires : le déploiement d'une application Kottster sur Vercel.

    Commencez par créer un compte sur vercel.com si vous n'en avez pas déjà un. Une fois connecté, cliquez sur "Nouveau projet" et connectez votre référentiel contenant l'application que vous avez créée.

    Après avoir sélectionné votre référentiel, cliquez sur "Déployer". Dans quelques instants, votre application sera live sur un domaine Vercel gratuit.

    Create an Admin Panel for your project in inutes

    Une fois votre application en ligne, vous pouvez l'ouvrir et vous connecter à votre compte.

    Ça y est ! Votre panneau d'administration est désormais disponible en ligne.

    Vous pouvez désormais le partager avec votre équipe. Pour cela, cliquez sur "Gérer les accès" dans la barre latérale gauche de votre application. Cela ouvrira une page où vous pourrez configurer l'accès pour d'autres utilisateurs en saisissant leurs adresses e-mail.

    Notes finales

    Vous pouvez en savoir plus sur Kottster sur notre site Web : kottster.app

    Si vous avez des questions ou avez besoin d'aide, consultez notre documentation, visitez notre référentiel GitHub ou rejoignez notre communauté Discord pour poser des questions et partager vos commentaires.

    Merci d'avoir lu et bonne chance avec votre projet !

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    JavaScript typescript npm if for include Directory using private delete JS function this table github database ui everything Access Other
    Déclaration：
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent：Comment les fonctions fléchées en JavaScript gèrent-elles la liaison « this » et quelles sont les solutions de contournement ?Article suivant：Comment les fonctions fléchées en JavaScript gèrent-elles la liaison « this » et quelles sont les solutions de contournement ?

    Articles Liés

    Voir plus