Frontend-Beispiel ansehen

Wenn Sie die API erstellen, werden im Arbeitsbereich automatisch ein Ordner und Dateien für das Beispiel-Frontend erzeugt. Sie können dieses Ergebnis unverändert verwenden oder es mit Hilfe von KI zu einem Bildschirm verfeinern, der zu Ihrem Team passt.

Ordner mit dem Frontend-Beispiel

index.html — Startbildschirm

Ein grundlegender CRUD-Bildschirm, der Listenabfrage, Detailansicht, Anlegen, Bearbeiten und Löschen auf einem Bildschirm vereint. style.css ist bereits eingebunden, sodass der Bildschirm in sofort nutzbarer, fertiger Form bereitgestellt wird.

Startbildschirm index.html

Wenn der Arbeitsbereich Skripte blockiert, können Sie sie mit Für diese Datei immer zulassen aktivieren.

test.html — API-Testbildschirm

Ein Testbildschirm, mit dem Sie, ähnlich wie mit Swagger, Postman oder Insomnia, die automatisch erzeugten APIs direkt auf dem Bildschirm aufrufen und die Antworten prüfen können.

API-Testbildschirm test.html

style.css / README.md

Datei	Zweck
`style.css`	Gemeinsame Stile der Beispielbildschirme.
`README.md`	Ein Dokument, das erklärt, wie die API verwendet wird. Es enthält die Standard-Endpunkte, den Spaltenaufbau von Liste und Eingabeformular sowie die Anfrage-/Antwortfelder und das Datensatzschema jeder API.

Wenn Sie index.html und style.css nach Ihren Wünschen anpassen, können Sie den automatisch erzeugten Standardbildschirm in eine auf Ihr Team zugeschnittene Website verwandeln.

index.html mit KI verfeinern

Da README.md die Tabellenstruktur und die API-Spezifikation ausführlich beschreibt, können Sie diese Datei unverändert an eine KI (Claude, ChatGPT usw.) übergeben und ohne weitere Erklärung direkt Änderungen an Logik oder Design von index.html anfordern.

Kopieren Sie den Inhalt von README.md und übergeben Sie ihn der KI.
Beschreiben Sie dazu den gewünschten Bildschirmaufbau oder das Design. (Beispiel: „Zeige die Liste als Karten an und verwende je nach Statuswert unterschiedliche Farben“)
Überschreiben Sie die index.html im selben Ordner mit der von der KI überarbeiteten Version.
Prüfen Sie mit test.html erneut, ob die API funktioniert.

Fertigen Bildschirm nutzen

Wenn Sie index.html verfeinert und ein eigenes System für Ihr Team fertiggestellt haben, können Sie es auf zwei Arten verwenden.

Variante	Beschreibung
Teamintern	Öffnen Sie es im Arbeitsbereichsordner mit der Webansicht für Ordner und nutzen Sie es mit Ihren Teammitgliedern als internen Bildschirm zur Datenverwaltung. → Internen Webservice für das Team erstellen
Öffentlich	Stellen Sie es über Webspace bereit und nutzen Sie es als öffentlich zugänglichen Dienst. → Öffentlich zugänglichen Webservice erstellen