Erstellen Sie in wenigen Minuten ein Admin-Panel für Ihr Projekt

Kottster ist ein kostenloses Tool, das Entwicklern hilft, Admin-Panels schnell zu erstellen und bereitzustellen. In nur 5 Minuten können Sie ein voll funktionsfähiges Admin-Panel erstellen, es in der Cloud bereitstellen und mit Ihrem Team teilen.

Wenn Sie Apps mit Kottster erstellen, laufen diese auf Remix, einem Web-Framework zum Erstellen von Full-Stack-Apps mithilfe der React- und Node.js-Umgebung.

In diesem Artikel zeige ich Ihnen, wie Sie eine Kottster-App erstellen, sie mit Ihrer Datenbank verbinden, Seiten für bestimmte Tabellen generieren und sie überall hosten.

---

Ein Projekt erstellen

Bevor Sie beginnen, stellen Sie sicher, dass Node.js (v20 oder höher) auf Ihrem Computer installiert ist.

Um ein neues Projekt zu erstellen, führen Sie diesen Befehl aus:

npx @kottster/cli new

Sie werden nach einem Projektnamen gefragt, ob Sie JavaScript oder TypeScript verwenden möchten und welchen Paketmanager Sie verwenden möchten. Danach wird ein neuer Projektordner mit allem erstellt, was Sie für den Start benötigen.

Um die App lokal zu starten, öffnen Sie den erstellten Ordner und führen Sie npm run dev:

aus

Wenn die App geladen wird, wird die Anmeldeseite angezeigt. Klicken Sie auf „Konto erstellen“, um sich bei Kottster anzumelden. Geben Sie nach der Anmeldung einen Namen für Ihre App ein und klicken Sie auf „App erstellen“. Dadurch wird Ihre App erstellt und Sie werden angemeldet.

Sobald alles eingerichtet ist, wird die Seite „Erste Schritte“ angezeigt:

---

Verbinden Sie Ihre Datenbank

Wählen Sie auf der Seite „Erste Schritte“ Ihren Datenbanktyp aus, geben Sie die Verbindungsdetails ein und klicken Sie auf „Verbinden“.

Dadurch werden die erforderlichen Pakete installiert und eine Datei mit einer mit Ihrer Datenbank verbundenen Datenquelle in Ihrem Projektordner erstellt.

Bitte beachten Sie, dass Ihre Anmeldeinformationen immer privat bleiben und das Kottster-Tool keinen Zugriff auf Ihre Datenbank hat, wenn Ihre App selbst gehostet wird.

---

Seiten generieren

Nachdem Sie Ihre Datenbank verbunden haben, sehen Sie die Registerkarte „Seiten generieren“:

Mit dieser Seite können Sie schnell Seiten erstellen, um Daten aus Ihren Datenbanktabellen anzuzeigen oder zu verwalten.

Wenn Sie „Einfügung zulassen“ oder „Aktualisierung zulassen“ aktivieren, sind Formulare zum Hinzufügen und Aktualisieren von Datensätzen verfügbar. Durch Aktivieren von „Löschen zulassen“ wird die Möglichkeit zum Löschen von Datensätzen hinzugefügt.

Sobald Sie Ihre Auswahl getroffen haben, klicken Sie auf „Seiten generieren“. Das Tool generiert automatisch die Seitendateien und aktualisiert das Seitenleistenmenü mit neuen Elementen.

---

So funktionieren Seiten

Jede Seite in Ihrem Admin-Panel befindet sich im Verzeichnis app/routes. Bei diesen Seiten handelt es sich im Wesentlichen um Remix-Routen, die sowohl als Benutzeroberfläche als auch als API dienen. Sie können sie nach Ihren Wünschen anpassen.

Jede Seitendatei in der Kottster-App sollte eine React-Komponente exportieren, die die Seite selbst darstellt. Sie können beliebige Inhalte in diese Komponente einfügen.

Wenn Sie eine Seite für eine bestimmte Datenbanktabelle generieren, enthält diese Folgendes:

• Eine Remix-Aktion, die die Funktion createTableRpc aufruft. Diese Funktion steuert das Verhalten der Tabelle und aktiviert ihre Funktionen.
• Eine Komponente, die eng mit den in der Aktion definierten createTableRpc-Einstellungen verknüpft ist.

Beispiel einer generierten Seite für die Tabelle „Benutzer“:

npx @kottster/cli new

Sie können mehr über createTableRpc und das

erfahren. Komponente in unserer Dokumentation. Ich empfehle außerdem, in der offiziellen Dokumentation mehr über Remix und seinen Fullstack-Datenfluss zu erfahren.

---

Einsatz

Wenn Sie bereit sind, können Sie Ihre Kottster-App bereitstellen, um sie online verfügbar zu machen. Stellen Sie vor der Bereitstellung sicher, dass die App ordnungsgemäß erstellt und fehlerfrei ist.

Erstellen Sie dazu Ihre App lokal, indem Sie npm run build:

ausführen

Wenn keine Fehler vorliegen, ist Ihre App bereit, live zu gehen. Da es selbst gehostet wird, können Sie es überall bereitstellen. Erfahren Sie hier mehr über Bereitstellungsoptionen.

---

Kostenlose Bereitstellung in Vercel

In diesem Artikel werde ich eine der beliebtesten kostenlosen Optionen behandeln: die Bereitstellung einer Kottster-App auf Vercel.

Eröffnen Sie zunächst ein Konto bei vercel.com, falls Sie noch keins haben. Klicken Sie nach der Anmeldung auf „Neues Projekt“ und verbinden Sie Ihr Repository mit der von Ihnen erstellten App.

Nachdem Sie Ihr Repository ausgewählt haben, klicken Sie auf „Bereitstellen“. In nur wenigen Augenblicken wird Ihre App auf einer kostenlosen Vercel-Domain live sein.

Sobald Ihre App live ist, können Sie sie öffnen und sich bei Ihrem Konto anmelden.

Das ist es! Ihr Admin-Panel ist jetzt online verfügbar.

Sie können es jetzt mit Ihrem Team teilen. Klicken Sie dazu in der linken Seitenleiste Ihrer App auf „Zugriffe verwalten“. Dadurch wird eine Seite geöffnet, auf der Sie den Zugriff für andere Benutzer einrichten können, indem Sie deren E-Mail-Adressen eingeben.

---

Schlussbemerkungen

Mehr über Kottster erfahren Sie auf unserer Website: kottster.app

Wenn Sie Fragen haben oder Hilfe benötigen, schauen Sie sich unsere Dokumentation an, besuchen Sie unser GitHub-Repository oder treten Sie unserer Discord-Community bei, um Fragen zu stellen und Ihr Feedback zu teilen.

Vielen Dank fürs Lesen und Viel Glück mit Ihrem Projekt!

Das obige ist der detaillierte Inhalt vonErstellen Sie in wenigen Minuten ein Admin-Panel für Ihr Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!