Créez un panneau d'administration pour votre projet en minutes
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.
Pour démarrer l'application localement, ouvrez le dossier créé et exécutez npm run dev :
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 » :
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 » :
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,
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
Copier après la connexionCopier après la connexionVous 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 :
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.
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!
Déclaration de ce site WebLe 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
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour4 Il y a quelques semaines By DDDComment réparer KB5055523 ne parvient pas à s'installer dans Windows 11?3 Il y a quelques semaines By DDDInzoi: Comment postuler à l'école et à l'université1 Il y a quelques mois By DDDComment réparer KB5055518 ne parvient pas à s'installer dans Windows 10?3 Il y a quelques semaines By DDDOù trouver la clé du bureau du site dans Atomfall4 Il y a quelques semaines By DDD
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
See all articles
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
JavaScript est-il difficile à apprendre?
Apr 03, 2025 am 12:20 AM
Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.
L'évolution de JavaScript: tendances actuelles et perspectives d'avenir
Apr 10, 2025 am 09:33 AM
Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
Zustand Asynchronous Operation: Comment assurer le dernier État obtenu par Usestore?
Apr 04, 2025 pm 02:09 PM
Problèmes de mise à jour des données dans les opérations asynchrones de Zustand. Lorsque vous utilisez la bibliothèque de gestion de l'État de Zustand, vous rencontrez souvent le problème des mises à jour de données qui entraînent des opérations asynchrones prématurées. � ...
