feat: add full stage-2 multilingual support for 8 locales
Translate all 24 stage-2 chapters (frontend, backend, AI capabilities, assignments) to ja-jp, ko-kr, zh-tw, es-es, fr-fr, de-de, ar-sa, vi-vn. Update VitePress config with sidebar labels, nav links, and sidebar entries for each locale. Images reference zh-cn originals via absolute paths. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
sanbuphy
@@ -0,0 +1,461 @@
|
||||
# Dify-Einfuehrung und Wissensdatenbank-Integration
|
||||
|
||||
# Rueckblick auf die letzte Lektion
|
||||
|
||||
In den vorherigen Lektionen haben wir in Gruppen die Grundlagen von KI-Programmierung, Prompt-Engineering und KI-Bildgenerierung gelernt.
|
||||
|
||||
Um dir beim Rueckblick zu helfen, hier einige Fragen:
|
||||
|
||||
1. Was ist KI-Programmierung? Wie verwendet man KI-Programmierwerkzeuge (z. B. [z.ai](http://z.ai)), um eine Webseite zu erstellen?
|
||||
2. Was sind grosse Sprachmodelle? Was ist Prompt-Engineering und Kontext-Engineering?
|
||||
3. Wie unterscheiden sich die Modellfaehigkeiten in den drei Richtungen Text, KI-Coding und Bildgenerierung?
|
||||
4. Was ist eine API? Wie verwendet man [z.ai](http://z.ai) fuer den Zugriff auf Drittanbieter-APIs?
|
||||
|
||||
In dieser Lektion gehen wir ueber einfache KI-Text- und Bild-Werkzeuge hinaus und betreten Workflow-Erstellungsplattformen, die naeher an realen Geschaefsablaeufen sind. Vom Chatbot zum KI-Agenten und KI-Workflow, und ueber die API wird er zu einer interaktiven "intelligenten" Roboterseite.
|
||||
|
||||
# Was du in dieser Lektion lernen wirst
|
||||
|
||||
1. Warum der Uebergang vom Chatbot zum Agenten und zur Workflow-Orchestrierung notwendig ist.
|
||||
2. Was ist eine Agenten- und Workflow-Entwicklungsplattform und wie man KI-Faehigkeiten standardisiert und orchestrierbar macht.
|
||||
3. Was ist Dify und wie man mit dieser Open-Source-Plattform fuer LLM-Anwendungen schnell Anwendungen erstellt, insbesondere Wissensdatenbank-Frage-Antwort-Roboter.
|
||||
4. RAG-Implementierungsmethoden und Wert: Warum braucht man Retrieval-Augmented Generation?
|
||||
5. Wie man von 0 auf 1 Dify und das KI IDE Trae erlernt.
|
||||
|
||||
# 1. Vom Dialog zum Agenten
|
||||
|
||||
In der vorherigen Phase haben wir gelernt, wie man Prompts verwendet, um grosse Modelle in Rollen zu versetzen. Aber wenn man genau darueber nachdenkt, stellt man fest: Ein Chatbot allein kann nicht handeln.
|
||||
|
||||
Er kann beschreiben, wie man Bestellungen prueft, aber nicht tatsaechlich in der Datenbank nachschlagen. Er kann beschreiben, was ein Wochenbericht enthalten sollte, aber nicht automatisch Projektdaten zusammenfassen und E-Mails senden.
|
||||
|
||||
Um die KI vom Chat-Partner zum digitalen Mitarbeiter zu machen, muessen wir ihr drei Kernfaehigkeiten geben:
|
||||
|
||||
1. **Exklusives Wissen** - Zugriff auf Produktdokumentation, Kundendaten, interne Richtlinien
|
||||
2. **Werkzeugaufruf (Plugins)** - Datenbanken bedienen, APIs aufrufen
|
||||
3. **Strukturierte Ausfuehrung** - Aufgaben nach vorgegebenem Ablaufplan erledigen
|
||||
|
||||
|
||||
|
||||
## 1.1 Einfachster Agent: Frage-Antwort-Roboter basierend auf Wissensdatenbank
|
||||
|
||||
Die am weitesten verbreitete Form eines einfachen Agenten ist der Wissensdatenbank-Frage-Antwort-Roboter. Sein Durchbruch: Die Antworten des grossen Modells werden nicht mehr frei generiert, sondern basieren auf tatsaechlichen Quellen. Die Loesung dafuer ist RAG (Retrieval-Augmented Generation).
|
||||
|
||||
|
||||
|
||||
Bildquelle: [https://www.datacamp.com/blog/what-is-retrieval-augmented-generation-rag](https://www.datacamp.com/blog/what-is-retrieval-augmented-generation-rag)
|
||||
|
||||
|
||||
|
||||
Bildquelle: [https://www.databricks.com/glossary/retrieval-augmented-generation-rag](https://www.databricks.com/glossary/retrieval-augmented-generation-rag)
|
||||
|
||||
## 1.2 Vom Dialog-Agenten zum Workflow
|
||||
|
||||
Selbst ein "verstaerkter Agent" mit Wissensdatenbank und Plugin-Aufruf reicht fuer komplexere Geschaefsprozesse nicht aus. Dies fuehrt zum hoeheren KI-Anwendungsparadigma: **KI-Workflow**.
|
||||
|
||||
|
||||
|
||||
Ein Workflow zerlegt eine komplexe Aufgabe in mehrere geordnete, konfigurierbare und automatisch ausfuehrbare Teilschritte und orchestriert ihre logischen Beziehungen ueber visuelle oder codebasierte Methoden.
|
||||
|
||||
|
||||
|
||||
## 1.3 Haeufige Agenten-/Workflow-Plattformen
|
||||
|
||||
| Plattform | Merkmale | Anwendungsbereich |
|
||||
| --------- | --------- | ----------------- |
|
||||
| Dify | Open-Source, RAG, LLM-Orchestrierung, API-Ausgabe | Unternehmens-Wissensdatenbank, massgeschneiderte Agenten |
|
||||
| Coze (ByteDance) | In China verfuegbar, reichhaltige Plugins | Social-Bots, Mini-Programm-Integration |
|
||||
| n8n | Universelle Automatisierung, API-Orchestrierung | Datensynchronisation, SaaS-Automatisierung |
|
||||
|
||||
### 1.3.1 Dify
|
||||
|
||||
Dify ist eine LLM-Anwendungsentwicklungs- und Betriebsplattform mit Fokus auf den gesamten Lebenszyklus von KI-Anwendungen.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 1.3.2 Coze (ByteDance)
|
||||
|
||||
Coze ist eine KI-Agenten-Entwicklungsplattform von ByteDance mit Fokus auf extreme Benutzerfreundlichkeit.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 1.3.3 n8n
|
||||
|
||||
n8n ist eine universelle programmierbare Workflow-Automatisierungsplattform.
|
||||
|
||||
|
||||
|
||||
# 2. Dify im Detail
|
||||
|
||||
## 2.1 Was ist Dify?
|
||||
|
||||
Besuche [https://cloud.dify.ai/apps](https://cloud.dify.ai/apps) oder die Website https://dify.ai.
|
||||
|
||||
Dify ist eine Open-Source-Plattform zur Entwicklung von LLM-Anwendungen.
|
||||
|
||||
|
||||
|
||||
### 2.1.1 Eigenes Dify bereitstellen (optional)
|
||||
|
||||
Du musst das Tutorial zur Web-Bereitstellung konsultieren: [Web-Anwendungen bereitstellen](/de-de/stage-2/backend/zeabur-deployment/)
|
||||
|
||||
|
||||
|
||||
## 2.2 Erste Dify-Chatbot-Anwendung erstellen
|
||||
|
||||
Besuche [https://cloud.dify.ai/apps](https://cloud.dify.ai/apps), registriere dich und melde dich an. Waehle "Studio" und klicke auf "CREATE APP" > "Create from Blank".
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Waehle "Chatbot" als App-Typ, gib Name und Beschreibung ein und klicke auf "Erstellen".
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Im mittleren Bereich "INSTRUCTIONS" kannst du System-Prompts eingeben. Rechts befindet sich das Debug-Fenster.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2.3 Benutzerdefinierte Modellanbieter konfigurieren
|
||||
|
||||
1. Installiere die Plugins `OpenAI-API-compatible` und `SiliconFlow`:
|
||||
- https://marketplace.dify.ai/plugins/langgenius/openai_api_compatible
|
||||
- https://marketplace.dify.ai/plugins/langgenius/siliconflow
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2. Konfiguriere die Modelle:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. Ueberpruefe die Modellliste:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2.4 Erste Dify-Wissensdatenbank erstellen
|
||||
|
||||
Klicke oben im Menue auf "Knowledge" und dann auf "Create Knowledge".
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Lade verschiedene Dateitypen hoch (PDF, TXT usw.), um die Wissensdatenbank zu erstellen.
|
||||
|
||||
|
||||
|
||||
Konfiguriere die Embedding- und Rerank-Modelle:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Klicke auf "Save & Process":
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Teste die Wissensdatenbank mit "Retrieval Testing":
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Verbinde die Wissensdatenbank mit deinem Agenten:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2.5 Weitere Dify-Operationen
|
||||
|
||||
### 2.5.1 Workflow-Import und -Export
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2.5.2 Weitere Dify-Projekte ansehen
|
||||
|
||||
|
||||
|
||||
## 2.6 Erste Dify-Workflow-Anwendung erstellen
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Waehle zwischen Chatflow (fuer fortlaufende Gespraeche) und Workflow (fuer Aufgabenautomatisierung).
|
||||
|
||||
|
||||
|
||||
### 2.6.1 Haeufige Knoten
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2.6.2 Haeufige Werkzeuge
|
||||
|
||||
|
||||
|
||||
### 2.6.3 Einfachen Intent-Klassifizierungs-Workflow erstellen
|
||||
|
||||
Wir erstellen einen Workflow fuer ein Restaurantszenario mit vier Intent-Kategorien:
|
||||
|
||||
- **Essen bestellen (buy_food)**: Benutzer moechte etwas bestellen
|
||||
- **Beschwerde (complain)**: Benutzer aeussert Unzufriedenheit
|
||||
- **Plaudern (chitchat)**: Allgemeine Fragen und Empfehlungen
|
||||
- **Sonstiges (other)**: Nicht restaurantbezogene Themen
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2.7 Vorlagen-Workflow ausfuehren
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2.8 Dify als API-Anbieter nutzen
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2.9 Frontend-Chat-Anwendung mit Dify-API erstellen
|
||||
|
||||
Klicke auf "Publish" > "Publish Update" > "Access API Reference".
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Finde "Send Chat Message" und kopiere Request und Response Beispiele.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Erstelle einen API-Key:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```json
|
||||
key:
|
||||
app-zKdCHUXXXXXXXX
|
||||
|
||||
Please write me a front-end based on the following reference:
|
||||
|
||||
curl -X POST 'http://{DIFY_API_URL}/v1/chat-messages' \
|
||||
--header 'Authorization: Bearer {api_key}' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data-raw '{
|
||||
"inputs": {},
|
||||
"query": "What are the specs of the iPhone 13 Pro Max?",
|
||||
"response_mode": "streaming",
|
||||
"conversation_id": "",
|
||||
"user": "abc-123"
|
||||
}'
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 3. Weitere Geschaefsworkflow-Referenzen
|
||||
|
||||
## 3.1 Social-Media-Workflows
|
||||
|
||||
1. Plattformuebergreifende Content-Verbreitung (komplex)
|
||||
2. Trending-Topic-Auswahl und Entwurfsgenerator (mittel)
|
||||
3. Intelligente Kommentarklassifikation und Antwort-Assistent (komplex)
|
||||
4. Kurzvideo-Skript- und Storyboard-Generator (komplex)
|
||||
5. Live-Interaktion Q&A Echtzeit-Zusammenfassung (mittel)
|
||||
|
||||
## 3.2 Arbeitsplatz-Workflows
|
||||
|
||||
1. Intelligente Besprechungsprotokolle und automatische Aufgabenverteilung (komplex)
|
||||
2. Lebenslauf-Stapelscreening und Erstbewertung (mittel)
|
||||
3. Mehrsprachige E-Mail-Uebersetzung und Entwurfsantwort (einfach)
|
||||
4. Wochen-/Monatsbericht-Datenaggregation (komplex)
|
||||
5. Vertrag/Dokument intelligente Pruefung (mittel)
|
||||
|
||||
## 3.3 Lern- und Lebensworkflows
|
||||
|
||||
1. Akademische Arbeit Analyse und Notizgenerator (komplex)
|
||||
2. Personalisierter Reiseplanungsassistent (mittel)
|
||||
3. Fremdsprachen-Lernpraxispartner (einfach)
|
||||
4. Persoenlicher Wissensdatenbank-Frage-Antwort- und Empfehlungssystem (komplex)
|
||||
5. Fitness-/Ernaehrungsplan Tracking-Berater (mittel)
|
||||
|
||||
# 6. Einschraenkungen von Workflow-Plattformen
|
||||
|
||||
Workflow-Plattformen (Low-Code-Plattformen) sind keine Universalloesungen. "Low-Code" ist oft auch eine Art "High-Code" - Benutzer muessen die Konzepte, Regeln und Bedienlogik der Plattform verstehen.
|
||||
|
||||
Mit der schnellen Entwicklung von Vibe Coding kann das direkte Lesen oder Generieren von Code mit KI-Unterstützung manchmal effizienter sein.
|
||||
|
||||
# Hausaufgabe
|
||||
|
||||
## Dify-Grundoperationen meistern
|
||||
|
||||
1. Referenziere die Intent-Klassifizierungs-Workflow-Methode und lass die KI ein vollstaendig anderes Szenario vorschlagen.
|
||||
2. Login-Workflow-Entschluesselungs-Challenge
|
||||
3. Love-Loop-Workflow-Entschluesselungs-Challenge
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Dify-API-Aufruf implementieren
|
||||
|
||||
1. Stelle Dify bereit und erstelle eine einfache Wissensdatenbank.
|
||||
2. Verwende Trae IDE, um ein Chat-Frontend zu erstellen, das mit der Dify-Wissensdatenbank ueber API interagiert.
|
||||
3. Teste Mehrfach-Chat-Ergebnisse.
|
||||
|
||||
## Drittanbieter-Workflow ausprobieren
|
||||
|
||||
Finde einen Dify-Workflow auf Github, in WeChat oder anderen Plattformen und fuehre ihn erfolgreich aus.
|
||||
|
||||
# [Bug] Loesung fuer HTTP-Anfragefehler
|
||||
|
||||
|
||||
|
||||
Wenn du dieses Problem hast, verwende Zeabur als Netzwerk-Weiterleitungs-Gateway:
|
||||
|
||||
- Originaladresse: `http://{DIFY_API_URL}/v1/chat-messages`
|
||||
- Neue Adresse: `https://{DIFY_NEW_API_URL}.zeabur.app/v1/chat-messages`
|
||||
|
||||
```python
|
||||
from flask import Flask, request, Response
|
||||
import requests
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
TARGET_BASE_URL = "{DIFY_API_URL}"
|
||||
LISTEN_PORT = 8080
|
||||
|
||||
@app.route('/', defaults={'path': ''}, methods=['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS', 'HEAD'])
|
||||
@app.route('/<path:path>', methods=['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS', 'HEAD'])
|
||||
def proxy_request(path):
|
||||
target_url = f"{TARGET_BASE_URL}/{path}"
|
||||
if request.query_string:
|
||||
target_url += f"?{request.query_string.decode('utf-8')}"
|
||||
|
||||
headers = {key: value for key, value in request.headers if key.lower() not in ['host', 'connection', 'content-length', 'accept-encoding']}
|
||||
|
||||
try:
|
||||
resp = requests.request(
|
||||
method=request.method,
|
||||
url=target_url,
|
||||
headers=headers,
|
||||
data=request.get_data(),
|
||||
cookies=request.cookies,
|
||||
allow_redirects=False,
|
||||
timeout=30
|
||||
)
|
||||
|
||||
excluded_headers = ['content-encoding', 'content-length', 'transfer-encoding', 'connection']
|
||||
response_headers = [(name, value) for name, value in resp.raw.headers.items() if name.lower() not in excluded_headers]
|
||||
|
||||
return Response(resp.content, resp.status_code, response_headers)
|
||||
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error forwarding request to {target_url}: {e}")
|
||||
return Response(f"Proxy Error: Could not reach target server or invalid response: {e}", status=502)
|
||||
except Exception as e:
|
||||
print(f"An unexpected error occurred: {e}")
|
||||
return Response(f"Internal Proxy Error: {e}", status=500)
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(host='0.0.0.0', port=LISTEN_PORT, debug=True)
|
||||
```
|
||||
@@ -0,0 +1,244 @@
|
||||
# KI-Marketing-Copywriting SaaS Entwicklungspraxis
|
||||
|
||||
## Ueberblick
|
||||
|
||||
Dieses Praxisprojekt erfordert die Umsetzung eines echten PRD von Grund auf: Ein KI-Marketing-Copywriting SaaS-Produkt fuer Indie-Entwickler und Content-Teams. Du wirst Supabase als Backend-Service und Stripe als Zahlungssystem verwenden und den gesamten Prozess von der Anforderungsanalyse bis zur Bereitstellung abschliessen.
|
||||
|
||||
Dies ist die umfassende Praxisphase von Stage 2. In den vorherigen Kapiteln hast du einzelne Faehigkeiten gelernt - Frontend, Backend, Datenbank, Zahlungsintegration. Dieses Projekt erfordert die Verkettung aller Faehigkeiten zur Lieferung eines lauffaehigen Produktprototyps.
|
||||
|
||||
## Vorkenntnisse
|
||||
|
||||
- Frontend-Design und Komponentenbibliotheken ([UI-Design](../../frontend/ui-design/), [Moderne Komponentenbibliothek](../../frontend/modern-component-library/))
|
||||
- Backend-API-Design und Entwicklung ([API-Code schreiben](../../backend/ai-interface-code/))
|
||||
- Datenbankgrundlagen und Supabase ([Von der Datenbank zu Supabase](../../backend/database-supabase/))
|
||||
- Zahlungsintegration ([Stripe-Zahlungssystem](../../backend/stripe-payment/))
|
||||
- Git-Workflow und Bereitstellung ([Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/))
|
||||
|
||||
## Lernziele
|
||||
|
||||
Nach Abschluss dieser Praxis wirst du in der Lage sein:
|
||||
|
||||
1. Einen echten PRD zu lesen und eine Entwicklungsaufgabenliste zu extrahieren
|
||||
2. KI-gestuetzt schrittweise Frontend-Seiten und Backend-APIs zu generieren
|
||||
3. Supabase fuer Benutzerauthentifizierung und Datenbankoperationen zu verwenden
|
||||
4. Stripe fuer Abo-Zahlungsfunktionen zu integrieren
|
||||
5. Ein Admin-Dashboard zu erstellen und End-to-End-Tests abzuschliessen
|
||||
|
||||
## Projektuebersicht
|
||||
|
||||
Das zu erstellende Produkt ist eine KI-Marketing-Copywriting SaaS mit drei Subsystemen:
|
||||
|
||||
| Subsystem | Verantwortung |
|
||||
|-----------|---------------|
|
||||
| **Oeffentliche Website** | Produktvorstellung, Preisgestaltung, FAQ, Registrierungskonvertierung |
|
||||
| **Benutzer-Arbeitsbereich** | Produktinformationen eingeben, Copy generieren, Verlauf anzeigen, Plan upgraden |
|
||||
| **Admin-Dashboard** | Benutzerverwaltung, Generierungsaufzeichnungen, Zahlungsdaten, Betriebsuebersicht |
|
||||
|
||||
::: tip PRD-Zugang
|
||||
Die Anforderungen fuer dieses Projekt befinden sich auf GitHub: [PRD ansehen](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/copywriting-platform-supabase/PRD.md)
|
||||
:::
|
||||
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'PRD lesen, Seiten, Funktionen, Auth, Zahlungsumfang klaeren' },
|
||||
{ title: 'Geruest erstellen', description: 'Mit KI drei Frontend-Gerueste generieren (www / app / admin)' },
|
||||
{ title: 'Backend-Integration', description: 'Supabase Auth, Generierungs-API, Stripe-Zahlung' },
|
||||
{ title: 'Test und Bereitstellung', description: 'End-to-End durchlaufen, bereitstellen und Demo vorbereiten' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Teil 1: Anforderungsanalyse
|
||||
|
||||
### 1.1 PRD lesen
|
||||
|
||||
Beantworte folgende Fragen:
|
||||
- Wie viele Einstiegspunkte hat das System? Welche Seiten deckt jeder ab?
|
||||
- Was ist die Kernfunktion jeder Seite?
|
||||
- Welche Module und Datenbanktabellen enthaelt das Backend?
|
||||
- Wie sind Preisgestaltung, Zahlungsablauf und kostenlose Kontingente gestaltet?
|
||||
- Was ist der MVP-Umfang?
|
||||
|
||||
::: warning
|
||||
Wenn diese Fragen keine klaren Antworten haben, beginne nicht mit dem Code. Unklare Anforderungen sind die haeufigste Ursache fuer Nachbesserungen.
|
||||
:::
|
||||
|
||||
### 1.2 Systemarchitektur bestaetigen
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
prd["PRD"] --> web["Oeffentliche Website"]
|
||||
prd --> app["Benutzer-Arbeitsbereich"]
|
||||
prd --> admin["Admin-Dashboard"]
|
||||
app --> auth["Auth"]
|
||||
app --> gen["Copy-Generierung"]
|
||||
gen --> db["Datenbank"]
|
||||
billing["Zahlung und Plaene"] --> db
|
||||
admin --> analytics["Benutzer-/Generierungs-/Zahlungs-Dashboard"]
|
||||
```
|
||||
|
||||
## Teil 2: Projektgeruest erstellen
|
||||
|
||||
### 2.1 Frontend-Seiten generieren
|
||||
|
||||
Prompt-Referenz:
|
||||
|
||||
```text
|
||||
Bitte generiere basierend auf dem aktuellen PRD ein Frontend-Geruest fuer eine KI-Marketing-Copywriting SaaS.
|
||||
|
||||
Anforderungen:
|
||||
1. Drei Einstiegspunkte: www, app, admin
|
||||
2. Website: Startseite, Preisgestaltung, FAQ
|
||||
3. App: Login, Registrierung, Dashboard, Verlauf, Plan-Seite
|
||||
4. Admin: Startseite, Benutzerverwaltung, Generierungsaufzeichnungen, Zahlungen
|
||||
5. Zunaechst nur Seitenstruktur mit Mock-Daten, keine echten APIs
|
||||
6. Stil wie eine moderne SaaS, nicht wie ein Klassenzimmer-Demo
|
||||
```
|
||||
|
||||
### 2.2 Kernseite Dashboard verfeinern
|
||||
|
||||
```text
|
||||
Bitte verfeinere die /dashboard Seite.
|
||||
|
||||
Felder im linken Formular:
|
||||
- Produktname
|
||||
- Ein-Satz-Beschreibung
|
||||
- Zielbenutzer
|
||||
- 3 Verkaufsargumente
|
||||
- Vertriebskanaele
|
||||
|
||||
Rechte Ergebnisbereich:
|
||||
- Hauptueberschrift, Unterueberschrift, CTA
|
||||
- 3 kurze Copy-Varianten
|
||||
- Lange Copy
|
||||
```
|
||||
|
||||
### 2.3 Seitenstruktur ueberpruefen
|
||||
|
||||
- [ ] Drei Einstiegspunkte mit unabhaengigen Routen
|
||||
- [ ] Seitenanzahl stimmt mit PRD ueberein
|
||||
- [ ] Dashboard-Layout mit Formular und Ergebnisbereich
|
||||
- [ ] Mock-Daten zeigen grundlegende UI-Zustaende
|
||||
|
||||
### Hilfe bei Blockaden?
|
||||
|
||||
Wenn du beim Frontend-Aufbau feststeckst, kannst du diese Kapitel ueberpruefen:
|
||||
|
||||
- [UI-Design](../../frontend/ui-design/)
|
||||
- [Moderne Komponentenbibliothek](../../frontend/modern-component-library/)
|
||||
- [Von Design zu Code](../../frontend/design-to-code/)
|
||||
|
||||
## Teil 3: Backend-Integration
|
||||
|
||||
### 3.1 Supabase-Login integrieren
|
||||
|
||||
```text
|
||||
Bitte hilf mir Schritt fuer Schritt bei der Supabase-Login-Integration.
|
||||
|
||||
1. Projekt mit Supabase verbinden
|
||||
2. Registrierung, Login, Logout implementieren
|
||||
3. Nach Login zu /dashboard weiterleiten
|
||||
4. Geschuetzte Seiten automatisch zu /login umleiten
|
||||
5. profiles-Tabelle erstellen
|
||||
6. Nach Registrierung automatisch Datensatz in profiles erstellen
|
||||
```
|
||||
|
||||
### 3.2 Generierungs-API und Datenbank integrieren
|
||||
|
||||
```text
|
||||
Bitte hilf mir bei der Implementierung der Kernfunktion: Marketing-Copy generieren und speichern.
|
||||
|
||||
1. Benutzer fuellt Formular aus und klickt "Copy generieren"
|
||||
2. Backend erhaelt: Produktname, Beschreibung, Zielbenutzer, Verkaufsargumente, Kanaele
|
||||
3. Backend ruft Modell zur Generierung auf
|
||||
4. Seite zeigt Ergebnisse
|
||||
5. Eingabe und Ausgabe werden in der Datenbank gespeichert
|
||||
6. Benutzer kann beim naechsten Besuch den Verlauf sehen
|
||||
```
|
||||
|
||||
### 3.3 Stripe-Zahlung integrieren
|
||||
|
||||
```text
|
||||
Bitte hilf mir bei der einfachsten Stripe-Zahlungsintegration.
|
||||
|
||||
1. /billing-Seite zeigt free und pro Plaene
|
||||
2. Nach Klick auf Upgrade Weiterleitung zu Stripe Checkout
|
||||
3. Nach Zahlung Rueckkehr zur Website
|
||||
4. Zahlergebnis in subscriptions-Tabelle speichern
|
||||
5. profile.plan-Feld aktualisieren
|
||||
6. Free-Benutzer: max. 3 Generierungen/Tag, Pro: unbegrenzt
|
||||
```
|
||||
|
||||
### 3.4 Admin-Dashboard erstellen
|
||||
|
||||
```text
|
||||
Bitte hilf mir beim Aufbau eines einfachen Admin-Dashboards.
|
||||
|
||||
1. Nur role = admin Benutzer koennen auf /admin zugreifen
|
||||
2. Drei Tabs: Benutzerliste, Generierungsaufzeichnungen, Abostatus
|
||||
3. Benutzerliste: E-Mail, Plan, Erstellungsdatum
|
||||
4. Generierungsaufzeichnungen: Benutzer, Produktname, Kanal, Datum
|
||||
5. Abostatus: Benutzer, Plan, Zahlungsstatus
|
||||
```
|
||||
|
||||
## Teil 4: Test und Bereitstellung
|
||||
|
||||
### 4.1 End-to-End-Tests
|
||||
|
||||
Mindestens folgende Szenarien validieren:
|
||||
- Registrierung > Login > Copy generieren > Verlauf anzeigen > Plan upgraden
|
||||
- Admin-Login > Benutzerdaten anzeigen > Generierungsaufzeichnungen > Zahlungsstatus
|
||||
|
||||
### 4.2 Bereitstellung
|
||||
|
||||
Projekt oeffentlich bereitstellen. Siehe: [Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/).
|
||||
|
||||
## Liefergegenstaende
|
||||
|
||||
- [ ] Zugaenglicher Online-Demo-Link
|
||||
- [ ] Quellcode-Repository-Link (mit README)
|
||||
- [ ] PRD-Dokument
|
||||
- [ ] Kernseit-Screenshots (Startseite, Dashboard, Billing, Admin)
|
||||
- [ ] 60-Sekunden-Demo-Video
|
||||
|
||||
## Bewertungskriterien
|
||||
|
||||
| Dimension | Grundanforderung | Erweiterte Anforderung |
|
||||
|-----------|------------------|------------------------|
|
||||
| Produktvollstaendigkeit | Alle Hauptseiten zugaenglich | Stil wie echte SaaS |
|
||||
| Geschaefsabschluss | Registrierung > Generierung > Verlauf lauffaehig | Free/Pro-Unterschiede klar sichtbar |
|
||||
| Datenkorrektheit | Ergebnisse und Zahlungsstatus in Datenbank | Fehlermeldungen, Leerzustaende und Loading vorhanden |
|
||||
| Berechtigungen | Geschuetzte Seiten nicht ohne Login zugaenglich | Serverseitige Rollenpruefung |
|
||||
| Engineering | Lokal startbar und oeffentlich bereitstellbar | README klar, Demo-Video vollstaendig |
|
||||
|
||||
::: tip
|
||||
Wenn die Aufgabe zu gross erscheint, merke dir: **Zuerst "zum Laufen bringen", dann "verschönern".**
|
||||
:::
|
||||
|
||||
## Einreichungspruefung
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Letzter Blick vor der Einreichung</div>
|
||||
</template>
|
||||
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> Startseite, Login, Dashboard, Billing, Admin abgeschlossen</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Benutzer koennen sich registrieren, anmelden und abmelden</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Generierungsergebnisse werden in die Datenbank geschrieben</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Hauptzahlungsablauf funktioniert</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Admin kann Benutzer, Aufzeichnungen und Zahlungsstatus einsehen</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Projekt ist oeffentlich bereitgestellt</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Referenzmaterialien
|
||||
|
||||
- [UI-Design](../../frontend/ui-design/)
|
||||
- [Moderne Komponentenbibliothek](../../frontend/modern-component-library/)
|
||||
- [Von der Datenbank zu Supabase](../../backend/database-supabase/)
|
||||
- [API-Code schreiben](../../backend/ai-interface-code/)
|
||||
- [Git und GitHub](../../backend/git-workflow/)
|
||||
- [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/)
|
||||
- [Stripe-Zahlungssystem](../../backend/stripe-payment/)
|
||||
@@ -0,0 +1,173 @@
|
||||
# Dify-aehnliche Agenten-Plattform Entwicklungspraxis
|
||||
|
||||
## Ueberblick
|
||||
|
||||
Dieses Praxisprojekt erfordert die Umsetzung eines echten PRD von Grund auf: Eine Plattform, die die Kernfunktionen von Dify nachahmt. Du wirst eine Benutzerkonsole, ein Admin-Dashboard und ein Plattform-Backend erstellen und Kernfunktionen wie Agentenverwaltung, Chat, Protokollierung und Wissensdatenbank implementieren.
|
||||
|
||||
## Vorkenntnisse
|
||||
|
||||
- Frontend-Design und Komponentenbibliotheken ([UI-Design](../../frontend/ui-design/), [Moderne Komponentenbibliothek](../../frontend/modern-component-library/))
|
||||
- Backend-API-Design und Entwicklung ([API-Code schreiben](../../backend/ai-interface-code/))
|
||||
- Datenbankgrundlagen und Supabase ([Von der Datenbank zu Supabase](../../backend/database-supabase/))
|
||||
- Git-Workflow und Bereitstellung ([Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/))
|
||||
|
||||
## Lernziele
|
||||
|
||||
1. Einen echten PRD lesen und eine Entwicklungsaufgabenliste extrahieren
|
||||
2. Seitenarchitektur und Datenmodell fuer eine Agenten-Plattform entwerfen
|
||||
3. Vollstaendige Kette aus Agentenerstellung, Chat und Protokollierung implementieren
|
||||
4. KI-gestuetzte Entwicklung einer Plattform-produkt durchfuehren
|
||||
5. End-to-End-Tests abschliessen und einen demonstrierbaren KI-Plattformprototyp liefern
|
||||
|
||||
## Projektuebersicht
|
||||
|
||||
Das zu erstellende Produkt ist eine Dify-aehnliche Agenten-Plattform mit zwei Subsystemen:
|
||||
|
||||
| Subsystem | Verantwortung |
|
||||
|-----------|---------------|
|
||||
| **Benutzerkonsole** | Agenten erstellen, Prompt konfigurieren, Chat starten, Protokolle anzeigen, Wissensdatenbank verwalten |
|
||||
| **Admin-Dashboard** | Benutzerdaten, Plattformressourcen, Aufrufstatistiken |
|
||||
|
||||
::: tip PRD-Zugang
|
||||
[PRD ansehen](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/custom-dify-agent-platform/PRD.md)
|
||||
:::
|
||||
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'PRD lesen, Seiten, Faehigkeitsgrenzen, Auth, Datenmodell klaeren' },
|
||||
{ title: 'Geruest erstellen', description: 'Mit KI Benutzerkonsole und Admin-Geruest generieren' },
|
||||
{ title: 'Iterative Entwicklung', description: 'Moduleweise Agenten, Chat, Protokolle, Wissensdatenbank ergaenzen' },
|
||||
{ title: 'Test und Bereitstellung', description: 'End-to-End durchlaufen, bereitstellen und Demo vorbereiten' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Teil 1: Anforderungsanalyse
|
||||
|
||||
### 1.1 PRD lesen
|
||||
|
||||
- Welche Funktionen kommen in den MVP: Agenten, Sitzungen, Protokolle, Wissensdatenbank?
|
||||
- Seiten- und Routenliste finalisiert?
|
||||
- Grenzen fuer Modellaufrufe und Protokollierung?
|
||||
- Multi-Tenant und komplexe Workflows zunaechst weglassen?
|
||||
|
||||
::: warning
|
||||
Beginne nicht mit dem Code, wenn diese Fragen keine klaren Antworten haben.
|
||||
:::
|
||||
|
||||
### 1.2 Systemarchitektur bestaetigen
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
prd["PRD"] --> app["Benutzerkonsole"]
|
||||
prd --> admin["Admin-Dashboard"]
|
||||
app --> auth["Auth"]
|
||||
app --> agent["Agentenkonfiguration"]
|
||||
app --> chat["Chat"]
|
||||
chat --> llm["Modellaufruf"]
|
||||
chat --> db["Datenbank"]
|
||||
app --> kb["Wissensdatenbank"]
|
||||
admin --> logs["Aufrufprotokolle und Plattformuebersicht"]
|
||||
logs --> db
|
||||
```
|
||||
|
||||
## Teil 2: Projektgeruest erstellen
|
||||
|
||||
### 2.1 Frontend-Seiten generieren
|
||||
|
||||
```text
|
||||
Bitte generiere basierend auf dem aktuellen PRD ein Frontend-Geruest fuer eine Dify-aehnliche Agenten-Plattform.
|
||||
|
||||
Anforderungen:
|
||||
1. Benutzerseite: Login, Agentenliste, Agentenkonfiguration, Chat, Protokolle, Wissensdatenbank
|
||||
2. Admin-Seite: Startseite, Benutzeruebersicht, Ressourcenuebersicht
|
||||
3. Zunaechst nur Seitenstruktur mit Mock-Daten
|
||||
4. Stil wie eine moderne KI-Plattform
|
||||
```
|
||||
|
||||
### 2.2 Seitenstruktur ueberpruefen
|
||||
|
||||
- [ ] Benutzerkonsole und Admin-Eingang getrennt
|
||||
- [ ] Agentenliste, Konfiguration, Chat, Protokolle, Wissensdatenbank vollstaendig
|
||||
- [ ] Admin-Startseite und Benutzeruebersicht zugaenglich
|
||||
- [ ] Mock-Daten zeigen grundlegende UI-Zustaende
|
||||
|
||||
## Teil 3: Iterative Entwicklung
|
||||
|
||||
### 3.1 Modulweise vorgehen
|
||||
|
||||
1. **Auth**: Registrierung, Login, Rollenunterscheidung
|
||||
2. **Agentenverwaltung**: Erstellen, Bearbeiten, Loeschen, Prompt-Konfiguration
|
||||
3. **Chat-Funktion**: Sitzung erstellen, Nachrichten, Modellaufruf
|
||||
4. **Protokollierung**: Dauer, Token-Verbrauch, Fehleraufzeichnung
|
||||
5. **Wissensdatenbank** (Bonus): Dokument-Upload, Suche, Ergebnisse injizieren
|
||||
6. **Admin-Dashboard**: Benutzerdaten, Ressourcen, Aufrufstatistiken
|
||||
|
||||
| Pruefpunkt | Verifikationsmethode |
|
||||
|------------|---------------------|
|
||||
| Seitenkonsistenz | Seitenanzahl und Funktionen gemaess PRD |
|
||||
| API-Abschluss | agents, chat, logs, knowledge APIs vollstaendig |
|
||||
| Berechtigungsisolierung | Benutzer koennen nur eigene Agenten/Sitzungen verwalten |
|
||||
| Datenkonsistenz | messages, logs, documents Daten synchron |
|
||||
| Demonstrierbarkeit | "Agent erstellen > Chat > Protokolle anzeigen" vollstaendig |
|
||||
|
||||
### 3.2 Wissensdatenbank-Integration (Bonus)
|
||||
|
||||
Fuege jedem Agenten einen "Wissensdatenbank-Schalter" hinzu:
|
||||
- Aktiviert: Zunaechst Wissensteile durchsuchen, dann mit Frage an Modell senden
|
||||
- Deaktiviert: Normaler Chat-Modus
|
||||
|
||||
## Teil 4: Test und Bereitstellung
|
||||
|
||||
### 4.1 End-to-End-Tests
|
||||
|
||||
- Registrierung > Agent erstellen > Prompt konfigurieren > Chat starten > Protokolle anzeigen
|
||||
- Admin-Login > Benutzerdaten > Aufrufstatistiken
|
||||
|
||||
### 4.2 Bereitstellung
|
||||
|
||||
Siehe: [Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/).
|
||||
|
||||
## Liefergegenstaende
|
||||
|
||||
- [ ] Online-Demo-Link
|
||||
- [ ] Quellcode-Repository (mit README)
|
||||
- [ ] PRD-Dokument
|
||||
- [ ] Kernseiten-Screenshots
|
||||
- [ ] 60-Sekunden-Demo-Video
|
||||
|
||||
## Bewertungskriterien
|
||||
|
||||
| Dimension | Grundanforderung | Erweiterte Anforderung |
|
||||
|-----------|------------------|------------------------|
|
||||
| Plattformvollstaendigkeit | agents / chat / logs Seiten nutzbar | Klare Navigation und einheitliches Design |
|
||||
| Geschaefsabschluss | Agenten koennen erstellt und real kommuniziert werden | Multi-Agenten-Wechsel und Sitzungsverlauf |
|
||||
| Daten und Tracking | Nachrichten und Aufrufprotokolle abfragbar | Token-/Dauerstatistik-Dashboard |
|
||||
| Berechtigungssicherheit | Nur angemeldete Benutzer koennen Kern-APIs aufrufen | Ressourcen-Zuordnungspruefung vollstaendig |
|
||||
| Engineering | Bereitstellbar, demonstrierbar, README klar | Wissensdatenbank mit erklaerbaren Suchergebnissen |
|
||||
|
||||
## Einreichungspruefung
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Letzter Blick vor der Einreichung</div>
|
||||
</template>
|
||||
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> Nach Login: Agentenverwaltung, Chat, Protokolle zugaenglich</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Mindestens 1 Agent erstellt und erfolgreich kommuniziert</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Jede Frage in der Datenbank nachvollziehbar</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Fehlermeldungen im Frontend sichtbar und im Protokoll erfasst</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Projekt bereitgestellt, README und Demo-Video vollstaendig</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Referenzmaterialien
|
||||
|
||||
- [UI-Design](../../frontend/ui-design/)
|
||||
- [Moderne Komponentenbibliothek](../../frontend/modern-component-library/)
|
||||
- [Von der Datenbank zu Supabase](../../backend/database-supabase/)
|
||||
- [API-Code schreiben](../../backend/ai-interface-code/)
|
||||
- [Git und GitHub](../../backend/git-workflow/)
|
||||
- [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/)
|
||||
@@ -0,0 +1,211 @@
|
||||
# Online-Pruefungs- und Managementsystem Entwicklungspraxis
|
||||
|
||||
## Ueberblick
|
||||
|
||||
Dieses Praxisprojekt erfordert die Umsetzung eines echten PRD von Grund auf: Ein Online-Pruefungs- und Managementsystem. Die Besonderheit liegt in mehreren Rollen (Studenten und Administratoren) mit unterschiedlichen Seiten und Berechtigungen. Du wirst Express als Backend verwenden und eine vollstaendige Pruefungsgeschaeftskette implementieren.
|
||||
|
||||
## Vorkenntnisse
|
||||
|
||||
- Frontend-Design und Komponentenbibliotheken ([UI-Design](../../frontend/ui-design/), [Moderne Komponentenbibliothek](../../frontend/modern-component-library/))
|
||||
- Backend-API-Design und Entwicklung ([API-Code schreiben](../../backend/ai-interface-code/))
|
||||
- Datenbankgrundlagen und Supabase ([Von der Datenbank zu Supabase](../../backend/database-supabase/))
|
||||
- Git-Workflow und Bereitstellung ([Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/))
|
||||
|
||||
## Lernziele
|
||||
|
||||
1. Einen echten PRD lesen und eine Entwicklungsaufgabenliste extrahieren
|
||||
2. Berechtigungssteuerung und Seitenrouten fuer ein Multi-Rollen-System entwerfen
|
||||
3. Eine vollstaendige Backend-API mit Express implementieren
|
||||
4. Die Geschaefskette Pruefung, Einreichung, automatische Bewertung implementieren
|
||||
5. End-to-End-Tests abschliessen und einen demonstrierbaren Systemprototyp liefern
|
||||
|
||||
## Projektuebersicht
|
||||
|
||||
Das zu erstellende Produkt ist ein Online-Pruefungs- und Managementsystem mit drei Subsystemen:
|
||||
|
||||
| Subsystem | Verantwortung |
|
||||
|-----------|---------------|
|
||||
| **Oeffentliche Website** | Plattformvorstellung, Login-Einstieg |
|
||||
| **Studentenportal** | Pruefungsliste, Antworten, Einreichung, Noteneinsicht |
|
||||
| **Admin-Dashboard** | Fragenbank, Pruefungsverwaltung, Einreichungsdatensaetze, Notenstatistik |
|
||||
|
||||
::: tip PRD-Zugang
|
||||
[PRD ansehen](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/exam-management-express/PRD.md)
|
||||
:::
|
||||
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'PRD lesen, Rollen, Seiten, Pruefungskette und Datenmodell klaeren' },
|
||||
{ title: 'Geruest erstellen', description: 'Mit KI Studenten- und Admin-Seitengeruest generieren' },
|
||||
{ title: 'Backend-Entwicklung', description: 'Express: Login, Pruefung, Einreichung, Bewertung' },
|
||||
{ title: 'Test und Bereitstellung', description: 'End-to-End durchlaufen, bereitstellen und Demo vorbereiten' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Teil 1: Anforderungsanalyse
|
||||
|
||||
### 1.1 PRD lesen
|
||||
|
||||
- Welche Rollen enthaelt das System? Was kann jede Rolle tun?
|
||||
- Ist die Seitenliste vollstaendig?
|
||||
- Welche Fragetypen werden unterstuetzt? Wie ist die Bewertungslogik fuer jeden Typ?
|
||||
- Was ist der vollstaendige Pruefungsablauf?
|
||||
|
||||
::: warning
|
||||
Beginne nicht mit dem Code, wenn diese Fragen keine klaren Antworten haben.
|
||||
:::
|
||||
|
||||
### 1.2 Systemarchitektur bestaetigen
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
prd["PRD"] --> web["Oeffentliche Website"]
|
||||
prd --> student["Studentenportal"]
|
||||
prd --> admin["Admin-Dashboard"]
|
||||
student --> auth["Auth"]
|
||||
student --> exam["Pruefung und Antworten"]
|
||||
exam --> db["Datenbank"]
|
||||
admin --> question["Fragenbank"]
|
||||
admin --> submission["Einreichungen und Noten"]
|
||||
question --> db
|
||||
submission --> db
|
||||
```
|
||||
|
||||
## Teil 2: Projektgeruest erstellen
|
||||
|
||||
### 2.1 Frontend-Seiten generieren
|
||||
|
||||
```text
|
||||
Bitte generiere basierend auf dem aktuellen PRD ein Frontend-Geruest fuer ein Online-Pruefungssystem.
|
||||
|
||||
Technologie-Stack:
|
||||
- Next.js App Router, TypeScript, Tailwind CSS, shadcn/ui
|
||||
|
||||
Seiten:
|
||||
1. Startseite /
|
||||
2. Login /login
|
||||
3. Studenten-Pruefungsliste /student/exams
|
||||
4. Studenten-Antwortseite /student/exams/[id]
|
||||
5. Studenten-Noten /student/history
|
||||
6. Admin-Startseite /admin
|
||||
7. Pruefungsverwaltung /admin/exams
|
||||
8. Fragenbank /admin/questions
|
||||
9. Einreichungen /admin/submissions
|
||||
```
|
||||
|
||||
### 2.2 Antwortseite verfeinern
|
||||
|
||||
Die Antwortseite ist die Kernseite des Studentenportals:
|
||||
|
||||
```text
|
||||
Bitte verfeinere die Studenten-Antwortseite.
|
||||
|
||||
- Oben: Pruefungstitel, Countdown, Anzahl beantworteter Fragen
|
||||
- Mitte: Frage und Optionen
|
||||
- Unterstuetzung fuer Multiple-Choice, Wahr/Falsch, Kurzantwort
|
||||
- Antwortkarte links oder oben
|
||||
- Bestaetigungsdialog vor dem Absenden
|
||||
```
|
||||
|
||||
### 2.3 Seitenstruktur ueberpruefen
|
||||
|
||||
- [ ] Studenten- und Admin-Einstiegspunkte getrennt
|
||||
- [ ] Login, Pruefungsliste, Antwortseite, Notenseite vollstaendig
|
||||
- [ ] Admin: Fragenbank, Pruefungsverwaltung, Einreichungen zugaenglich
|
||||
- [ ] Studenten- und Admin-Seitenstile deutlich unterschieden
|
||||
|
||||
## Teil 3: Backend-Entwicklung
|
||||
|
||||
### 3.1 Login und Berechtigungssteuerung
|
||||
|
||||
```text
|
||||
Bitte hilf mir bei der Implementierung von Login und Berechtigungssteuerung fuer das Online-Pruefungssystem.
|
||||
|
||||
Backend: Express.
|
||||
|
||||
Ziele:
|
||||
1. Studenten und Administratoren koennen sich anmelden
|
||||
2. Nach Login wird die Benutzerrolle zurueckgegeben
|
||||
3. Studenten koennen nur /student/*-APIs aufrufen
|
||||
4. Administratoren koennen nur /admin/*-APIs aufrufen
|
||||
5. Unangemeldete Benutzer werden zu /login weitergeleitet
|
||||
```
|
||||
|
||||
### 3.2 Pruefungs- und Fragenbank-APIs
|
||||
|
||||
| Modul | Empfohlene APIs |
|
||||
|-------|-----------------|
|
||||
| Pruefungsverwaltung | `GET /api/exams`, `POST /api/admin/exams`, `PATCH /api/admin/exams/:id` |
|
||||
| Fragenbank | `GET /api/admin/questions`, `POST /api/admin/questions` |
|
||||
| Pruefung starten | `POST /api/submissions/start` |
|
||||
| Pruefung abgeben | `POST /api/submissions/:id/submit` |
|
||||
| Noten | `GET /api/student/history`, `GET /api/admin/submissions` |
|
||||
|
||||
### 3.3 Bewertungslogik
|
||||
|
||||
- **Multiple-Choice**: Benutzerantwort stimmt mit Standardantwort ueberein = Punkte
|
||||
- **Wahr/Falsch**: Automatisch bewertbar
|
||||
- **Kurzantwort**: Nur Antwort speichern, Punkte leer, Status `reviewed = false`
|
||||
|
||||
::: tip Bonus
|
||||
Du kannst KI verwenden, um dem Administrator die Generierung von Kandidatenfragen zu ermoeglichen. Dies ist jedoch optional.
|
||||
:::
|
||||
|
||||
## Teil 4: Test und Bereitstellung
|
||||
|
||||
### 4.1 End-to-End-Tests
|
||||
|
||||
- Student: Login > Pruefungsliste > Pruefung starten > Antworten > Noteneinsicht
|
||||
- Admin: Login > Pruefung erstellen > Fragen hinzufuegen > Veroeffentlichen > Einreichungen anzeigen
|
||||
|
||||
### 4.2 Bereitstellung
|
||||
|
||||
- Frontend: Vercel / Zeabur
|
||||
- Express API: Zeabur / Railway / Render
|
||||
- Datenbank: Supabase Postgres oder verwaltetes PostgreSQL
|
||||
|
||||
## Liefergegenstaende
|
||||
|
||||
- [ ] Online-Demo-Link
|
||||
- [ ] Quellcode-Repository (mit README)
|
||||
- [ ] PRD-Dokument
|
||||
- [ ] Kernseiten-Screenshots
|
||||
- [ ] 60-Sekunden-Demo-Video
|
||||
|
||||
## Bewertungskriterien
|
||||
|
||||
| Dimension | Grundanforderung | Erweiterte Anforderung |
|
||||
|-----------|------------------|------------------------|
|
||||
| Seitenvollstaendigkeit | Hauptseiten fuer Studenten und Admin zugaenglich | Einheitliches Design, mobile Grundverfuegbarkeit |
|
||||
| Geschaefsabschluss | Student kann Pruefung ablegen und Noten einsehen | Admin kann vollstaendig Pruefungen erstellen |
|
||||
| Datenkorrektheit | Antworten werden in Datenbank geschrieben, automatische Bewertung | Kurzantwort mit manueller oder KI-Unterstuetzung |
|
||||
| Berechtigungen | Student/Admin-Grenzen klar | Serverseitige Rollenpruefung |
|
||||
| Engineering | Lauffaehig, bereitstellbar, README klar | Demo-Video und Testanweisungen |
|
||||
|
||||
## Einreichungspruefung
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Letzter Blick vor der Einreichung</div>
|
||||
</template>
|
||||
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> Startseite, Login, Studentenportal, Admin-Seiten abgeschlossen</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Studenten koennen Pruefungen starten und Antworten einreichen</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Administratoren koennen Pruefungen erstellen und Einreichungen einsehen</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Automatische Bewertung funktioniert korrekt</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Berechtigungsgrenzen zwischen Studenten und Admin verifiziert</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Projekt bereitgestellt oder vollstaendige lokale Anleitung</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Referenzmaterialien
|
||||
|
||||
- [UI-Design](../../frontend/ui-design/)
|
||||
- [Moderne Komponentenbibliothek](../../frontend/modern-component-library/)
|
||||
- [Von der Datenbank zu Supabase](../../backend/database-supabase/)
|
||||
- [API-Code schreiben](../../backend/ai-interface-code/)
|
||||
- [Git und GitHub](../../backend/git-workflow/)
|
||||
- [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/)
|
||||
@@ -0,0 +1,163 @@
|
||||
# Moderne KI-Bildgenerierungs-SaaS Entwicklungspraxis
|
||||
|
||||
## Ueberblick
|
||||
|
||||
Dieses Praxisprojekt erfordert die Umsetzung eines echten PRD von Grund auf: Eine KI-Bildgenerierungs-SaaS, die sich an der Midjourney-Erfahrung orientiert. Du wirst den gesamten Prozess von der Anforderungsanalyse ueber Projektzerlegung und iterativer Entwicklung bis zur Bereitstellung durchlaufen.
|
||||
|
||||
## Vorkenntnisse
|
||||
|
||||
- Frontend-Design und Komponentenbibliotheken ([UI-Design](../../frontend/ui-design/), [Moderne Komponentenbibliothek](../../frontend/modern-component-library/))
|
||||
- Backend-API-Design und Entwicklung ([API-Code schreiben](../../backend/ai-interface-code/))
|
||||
- Datenbankgrundlagen und Supabase ([Von der Datenbank zu Supabase](../../backend/database-supabase/))
|
||||
- Zahlungsintegration ([Stripe-Zahlungssystem](../../backend/stripe-payment/))
|
||||
- Git-Workflow und Bereitstellung ([Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/))
|
||||
|
||||
## Lernziele
|
||||
|
||||
1. Einen echten PRD lesen und eine Entwicklungsaufgabenliste extrahieren
|
||||
2. Module basierend auf dem PRD aufteilen und einen schrittweisen Plan erstellen
|
||||
3. KI-gestuetzt Frontend-Geruest und Backend-API entwickeln
|
||||
4. Jedes Modul verifizieren und iterativ optimieren
|
||||
5. End-to-End-Tests durchfuehren und von "lauffaehig" zu "lieferbar" gelangen
|
||||
|
||||
## Projektuebersicht
|
||||
|
||||
Das zu erstellende Produkt ist eine moderne KI-Bildgenerierungs-SaaS mit drei Subsystemen:
|
||||
|
||||
| Subsystem | Verantwortung |
|
||||
|-----------|---------------|
|
||||
| **Oeffentliche Website** | Produktvorstellung, Preisgestaltung, FAQ, Registrierungskonvertierung |
|
||||
| **Benutzer-Arbeitsbereich** | Prompt-Eingabe, Bildgenerierung, Galerie, Guthaben, Plaene, Community |
|
||||
| **Admin-Dashboard** | Benutzerverwaltung, Aufgabenverwaltung, Zahlungsverwaltung, SaaS-Metrik |
|
||||
|
||||
::: tip PRD-Zugang
|
||||
[PRD ansehen](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/modern-landing-page/PRD.md)
|
||||
:::
|
||||
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'PRD lesen, Seiten, Module, Datenmodelle und Grenzen extrahieren' },
|
||||
{ title: 'Geruest erstellen', description: 'Mit KI drei Frontend-Gerueste generieren (www / app / admin)' },
|
||||
{ title: 'Iterative Entwicklung', description: 'Moduleweise API, Berechtigungen, Zahlung, Monitoring ergaenzen' },
|
||||
{ title: 'Test und Bereitstellung', description: 'End-to-End durchlaufen, bereitstellen und Demo vorbereiten' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Teil 1: Anforderungsanalyse
|
||||
|
||||
### 1.1 PRD lesen
|
||||
|
||||
- Wie viele Einstiegspunkte hat das System? Welche Seiten deckt jeder ab?
|
||||
- Was ist die Kernfunktion jeder Seite?
|
||||
- Welche Module und Datenbanktabellen enthaelt das Backend?
|
||||
- Was ist der MVP-Umfang?
|
||||
|
||||
::: warning
|
||||
Beginne nicht mit dem Code, wenn diese Fragen keine klaren Antworten haben.
|
||||
:::
|
||||
|
||||
### 1.2 Systemarchitektur bestaetigen
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
prd["PRD"] --> web["Oeffentliche Website"]
|
||||
prd --> app["Benutzer-Arbeitsbereich"]
|
||||
prd --> admin["Admin-Dashboard"]
|
||||
app --> auth["Auth"]
|
||||
app --> gen["Bildgenerierung"]
|
||||
gen --> oss["OSS-Objektspeicher"]
|
||||
gen --> db["Datenbank"]
|
||||
billing["Zahlung und Plaene"] --> db
|
||||
social["Teilen / Liken / Kommentieren"] --> db
|
||||
admin --> analytics["SaaS-Metrik-Dashboard"]
|
||||
admin --> observability["API / DB / Provider-Monitoring"]
|
||||
```
|
||||
|
||||
## Teil 2: Projektgeruest erstellen
|
||||
|
||||
### 2.1 Frontend-Seiten generieren
|
||||
|
||||
```text
|
||||
Bitte generiere basierend auf dem aktuellen PRD ein Frontend-Geruest fuer eine moderne KI-Bildgenerierungs-SaaS.
|
||||
|
||||
Anforderungen:
|
||||
1. Drei Einstiegspunkte: www, app, admin
|
||||
2. Website: Startseite, Preisgestaltung, FAQ
|
||||
3. App: Login, Registrierung, Dashboard, Galerie, Plaene, Guthaben, Community, Detail, Profil
|
||||
4. Admin: Startseite, Benutzer, Aufgaben, Inhalte, Plaene, Zahlungen, Konfiguration, Metriken, Monitoring
|
||||
5. Zunaechst nur Seitenstruktur mit Mock-Daten
|
||||
6. Stil wie Midjourney: schlicht, modern, produktiv
|
||||
```
|
||||
|
||||
### 2.2 Seitenstruktur ueberpruefen
|
||||
|
||||
- [ ] Drei Einstiegspunkte mit unabhaengigen Routen
|
||||
- [ ] Seitenanzahl stimmt mit PRD ueberein
|
||||
- [ ] Alle Seiten navigierbar
|
||||
- [ ] Mock-Daten zeigen grundlegende UI-Zustaende
|
||||
|
||||
## Teil 3: Iterative Entwicklung
|
||||
|
||||
### 3.1 Modulweise vorgehen
|
||||
|
||||
1. **Auth**: Registrierung, Login, Rollenunterscheidung
|
||||
2. **Datenbank**: Tabellen erstellen, Lese-/Schreib-APIs
|
||||
3. **Kerngescheaft**: Bildgenerierung, Ergebnisspeicherung
|
||||
4. **OSS-Speicher**: Bild-Upload und Zugriff
|
||||
5. **Zahlung**: Plaene, Guthaben, Stripe-Integration
|
||||
6. **Social**: Teilen, Liken, Kommentieren
|
||||
7. **Admin**: Benutzerverwaltung, Aufgaben, Inhaltsmoderation
|
||||
8. **Monitoring**: SaaS-Metrik-Dashboard, Systemueberwachung
|
||||
|
||||
| Pruefpunkt | Verifikationsmethode |
|
||||
|------------|---------------------|
|
||||
| Seitenkonsistenz | Anzahl, Einstiegspunkte, Funktionen gemaess PRD |
|
||||
| API-Korrektheit | Parameter, Struktur, Statusbehandlung |
|
||||
| Berechtigungsisolierung | Benutzer und Admin getrennt |
|
||||
| Datenkonsistenz | Datenbank, OSS, Zahlung, Guthaben synchron |
|
||||
| Demonstrierbarkeit | Vollstaendige Geschaefskette vorfuehrbar |
|
||||
|
||||
::: tip
|
||||
Wenn die KI vom PRD abweicht, nicht die ganze Seite neu starten - nur das spezifische Modul korrigieren.
|
||||
:::
|
||||
|
||||
## Teil 4: Test und Bereitstellung
|
||||
|
||||
### 4.1 End-to-End-Tests
|
||||
|
||||
- Registrierung > Guthaben kaufen > Bild generieren > Verlauf anzeigen > Teilen
|
||||
- Admin-Login > Benutzerdaten > Aufgabenstatistik > Systemueberwachung
|
||||
|
||||
### 4.2 Bereitstellung
|
||||
|
||||
Siehe: [Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/).
|
||||
|
||||
## Liefergegenstaende
|
||||
|
||||
- [ ] Online-Demo-Link
|
||||
- [ ] Quellcode-Repository (mit README)
|
||||
- [ ] PRD-Dokument
|
||||
- [ ] Kernseiten-Screenshots
|
||||
- [ ] 60-Sekunden-Demo-Video
|
||||
|
||||
## Bewertungskriterien
|
||||
|
||||
| Dimension | Grundanforderung | Erweiterte Anforderung |
|
||||
|-----------|------------------|------------------------|
|
||||
| PRD-Alignment | Seiten, Funktionen, Datenstruktur gemaess PRD | Designentscheidungen klar erklaert |
|
||||
| Produktabschluss | Registrierung > Guthaben > Generierung > Verlauf > Teilen lauffaehig | Zahlungsstatus, Guthaben, Generierungen konsistent |
|
||||
| Admin-Faehigkeit | Benutzer, Aufgaben, Zahlungen, Inhalte einsehbar | SaaS-Metrik und Monitoring vollstaendig nutzbar |
|
||||
| Engineering | Frontend, Backend, DB, OSS, Zahlung verbunden | Fehlerbehandlung, Leerzustaende, Loading vorhanden |
|
||||
| Lieferqualitaet | Bereitstellbar, lauffaehig | README klar, Demo-Video vollstaendig |
|
||||
|
||||
## Referenzmaterialien
|
||||
|
||||
- [UI-Design](../../frontend/ui-design/)
|
||||
- [Moderne Komponentenbibliothek](../../frontend/modern-component-library/)
|
||||
- [Von der Datenbank zu Supabase](../../backend/database-supabase/)
|
||||
- [API-Code schreiben](../../backend/ai-interface-code/)
|
||||
- [Git und GitHub](../../backend/git-workflow/)
|
||||
- [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/)
|
||||
- [Stripe-Zahlungssystem](../../backend/stripe-payment/)
|
||||
@@ -0,0 +1,144 @@
|
||||
# Spring Boot Filmempfehlungssystem Entwicklungspraxis
|
||||
|
||||
## Ueberblick
|
||||
|
||||
Dieses Praxisprojekt erfordert die Umsetzung eines echten PRD: Eine Filmwebsite mit Empfehlungsfaehigkeit unter Verwendung von Spring Boot. Die Kernherausforderung liegt nicht in einfachem CRUD, sondern im Nachdenken darueber, "wie Benutzerverhalten die Empfehlungsergebnisse beeinflusst" und "wie Empfehlungen erklaerbar sind".
|
||||
|
||||
## Vorkenntnisse
|
||||
|
||||
- Frontend-Design und Komponentenbibliotheken ([UI-Design](../../frontend/ui-design/), [Moderne Komponentenbibliothek](../../frontend/modern-component-library/))
|
||||
- Backend-API-Design und Entwicklung ([API-Code schreiben](../../backend/ai-interface-code/))
|
||||
- Datenbankgrundlagen und Supabase ([Von der Datenbank zu Supabase](../../backend/database-supabase/))
|
||||
- Git-Workflow und Bereitstellung ([Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/))
|
||||
|
||||
## Lernziele
|
||||
|
||||
1. PRD lesen und Entwicklungsaufgabenliste fuer ein Empfehlungssystem extrahieren
|
||||
2. Spring Boot-Projekt aufbauen und RESTful APIs implementieren
|
||||
3. Vollstaendige Datenkette "Benutzerverhalten > Empfehlung" entwerfen
|
||||
4. Erklaerbare Empfehlungslogik implementieren
|
||||
5. End-to-End-Tests abschliessen und einen demonstrierbaren Produktprototyp liefern
|
||||
|
||||
## Projektuebersicht
|
||||
|
||||
| Funktion | Beschreibung |
|
||||
|----------|-------------|
|
||||
| **Durchsuchen und Suche** | Benutzer koennen Filme durchsuchen und suchen |
|
||||
| **Bewertung und Favoriten** | Benutzer koennen Filme bewerten und als Favorit speichern |
|
||||
| **Personalisierte Empfehlungen** | System generiert Empfehlungen basierend auf Benutzerverhalten |
|
||||
| **Admin-Dashboard** | Administrator verwaltet Filmdaten und prueft Empfehlungseffektivitaet |
|
||||
|
||||
::: tip PRD-Zugang
|
||||
[PRD ansehen](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/movie-recommendation-springboot/PRD.md)
|
||||
:::
|
||||
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'PRD lesen, Empfehlungsstrategie, Verhaltensdaten und Admin-Umfang klaeren' },
|
||||
{ title: 'Geruest erstellen', description: 'Mit KI Listen-, Detail-, Empfehlungs- und Admin-Seiten generieren' },
|
||||
{ title: 'Iterative Entwicklung', description: 'Empfehlungslogik, Verhaltensaufzeichnung und Admin ergaenzen' },
|
||||
{ title: 'Test und Bereitstellung', description: 'End-to-End durchlaufen, bereitstellen und Demo vorbereiten' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Teil 1: Anforderungsanalyse
|
||||
|
||||
### 1.1 PRD lesen
|
||||
|
||||
- Was ist die Empfehlungsstrategie? Erste Version mit erklaerbarer Methode (z. B. basierend auf Bewertungsahnlichkeit)?
|
||||
- Welche Verhaltensdaten speichern? (Bewertungen, Favoriten, Seitenaufrufe)
|
||||
- Welche Empfehlungsmetriken sieht der Administrator?
|
||||
- Seitenliste vollstaendig?
|
||||
|
||||
::: warning
|
||||
Beginne nicht mit dem Code, wenn diese Fragen keine klaren Antworten haben.
|
||||
:::
|
||||
|
||||
### 1.2 Systemarchitektur bestaetigen
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
prd["PRD"] --> web["Frontend-Seiten"]
|
||||
web --> auth["Benutzerauth"]
|
||||
web --> movie["Filmliste / Details"]
|
||||
web --> behavior["Bewertung / Favoriten"]
|
||||
behavior --> reco["Empfehlungslogik"]
|
||||
reco --> db["Datenbank"]
|
||||
admin["Admin-Verwaltung"] --> db
|
||||
```
|
||||
|
||||
## Teil 2: Projektgeruest erstellen
|
||||
|
||||
### 2.1 Frontend-Seiten generieren
|
||||
|
||||
```text
|
||||
Bitte generiere basierend auf dem aktuellen PRD ein Frontend-Geruest fuer ein Spring Boot Filmempfehlungssystem.
|
||||
|
||||
Anforderungen:
|
||||
1. Seiten: Startseite, Filmliste, Filmdetails, Empfehlungsseite, Profil, Admin
|
||||
2. Zunaechst nur Seitenstruktur mit Mock-Daten
|
||||
3. Stil wie ein echtes Content-Produkt, nicht wie ein Klassenzimmer-Demo
|
||||
```
|
||||
|
||||
### 2.2 Seitenstruktur ueberpruefen
|
||||
|
||||
- [ ] Filmliste unterstuetzt Suche und Filter
|
||||
- [ ] Filmdetailseite hat Bewertungs- und Favorit-Buttons
|
||||
- [ ] Empfehlungsseite zeigt Ergebnisse mit Erklaerung
|
||||
- [ ] Admin zeigt Filmdaten und Empfehlungseffektivitaet
|
||||
|
||||
## Teil 3: Iterative Entwicklung
|
||||
|
||||
### 3.1 Modulweise vorgehen
|
||||
|
||||
1. **Spring Boot-Projektaufbau**: Projektstruktur, Datenbankkonfiguration, Basis-CRUD
|
||||
2. **Filmdatenverwaltung**: Filmliste, Details, Such-APIs
|
||||
3. **Benutzerverhalten**: Bewertungs- und Favorit-APIs, Verhaltensdaten schreiben
|
||||
4. **Empfehlungslogik**: Empfehlungsalgorithmus basierend auf Benutzerverhalten
|
||||
5. **Empfehlungsanzeige**: Ergebnisse mit Erklaerung anzeigen
|
||||
6. **Admin-Dashboard**: Filmdaten pflegen, Empfehlungseffektivitaet einsehen
|
||||
|
||||
### 3.2 Modul-Selbstpruefung
|
||||
|
||||
| Pruefpunkt | Verifikationsmethode |
|
||||
|------------|---------------------|
|
||||
| Grundfunktionen | Liste, Details, Bewertung, Favoriten vollstaendig |
|
||||
| Empfehlungskopplung | Benutzerverhalten beeinflusst Empfehlungsergebnisse |
|
||||
| Empfehlungserklaerbarkeit | Benutzer versteht, warum diese Filme empfohlen werden |
|
||||
| Admin-Daten | Administrator kann Filmdaten und Empfehlungseffektivitaet einsehen |
|
||||
|
||||
## Teil 4: Test und Bereitstellung
|
||||
|
||||
### 4.1 End-to-End-Tests
|
||||
|
||||
- Film durchsuchen > Bewerten > Favorit > Empfehlungsseite pruefen, ob Ergebnisse sich aendern
|
||||
- Admin-Login > Film hinzufuegen > Empfehlungsstatistik anzeigen
|
||||
|
||||
## Liefergegenstaende
|
||||
|
||||
- [ ] Online-Demo-Link
|
||||
- [ ] Quellcode-Repository (mit README)
|
||||
- [ ] PRD-Dokument
|
||||
- [ ] Kernseiten-Screenshots
|
||||
- [ ] 60-Sekunden-Demo-Video
|
||||
|
||||
## Bewertungskriterien
|
||||
|
||||
| Dimension | Grundanforderung | Erweiterte Anforderung |
|
||||
|-----------|------------------|------------------------|
|
||||
| PRD-Alignment | Seiten, Funktionen, Datenstruktur gemaess PRD | Designentscheidungen klar erklaert |
|
||||
| Produktabschluss | Durchsuchen > Bewerten > Favorit > Empfehlung lauffaehig | Bewertungsverhalten beeinflusst Empfehlungen deutlich |
|
||||
| Empfehlungsqualitaet | Ergebnisse angemessen, Gruende erklaerbar | Mehrere Empfehlungsstrategien unterstuetzt |
|
||||
| Admin-Faehigkeit | Filmdaten und Empfehlungseffektivitaet einsehbar | Genauigkeitsstatistiken vorhanden |
|
||||
| Engineering | Frontend, Spring Boot Backend, Datenbank verbunden | Empfehlungs-API mit Caching oder Performance-Optimierung |
|
||||
|
||||
## Referenzmaterialien
|
||||
|
||||
- [UI-Design](../../frontend/ui-design/)
|
||||
- [Moderne Komponentenbibliothek](../../frontend/modern-component-library/)
|
||||
- [Von der Datenbank zu Supabase](../../backend/database-supabase/)
|
||||
- [API-Code schreiben](../../backend/ai-interface-code/)
|
||||
- [Git und GitHub](../../backend/git-workflow/)
|
||||
- [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/)
|
||||
@@ -0,0 +1,154 @@
|
||||
# Lebensmittel-E-Commerce-Microservicesystem Entwicklungspraxis
|
||||
|
||||
## Ueberblick
|
||||
|
||||
Dieses Praxisprojekt erfordert die Umsetzung eines echten PRD von Grund auf: Ein Lebensmittel-E-Commerce-Microservicesystem. Im Gegensatz zu frueheren Single-Service-Projekten ist das Backend hier in mehrere unabhaengige Services nach Geschaeftsbereich aufgeteilt, die ueber ein API-Gateway einheitlich nach aussen kommunizieren. Du lernst, Service-Grenzen zu entwerfen und datenuebergreifende Konsistenzprobleme zwischen Services zu behandeln.
|
||||
|
||||
## Vorkenntnisse
|
||||
|
||||
- Frontend-Design und Komponentenbibliotheken ([UI-Design](../../frontend/ui-design/), [Moderne Komponentenbibliothek](../../frontend/modern-component-library/))
|
||||
- Backend-API-Design und Entwicklung ([API-Code schreiben](../../backend/ai-interface-code/))
|
||||
- Datenbankgrundlagen und Supabase ([Von der Datenbank zu Supabase](../../backend/database-supabase/))
|
||||
- Git-Workflow und Bereitstellung ([Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/))
|
||||
|
||||
## Lernziele
|
||||
|
||||
1. PRD lesen und Entwicklungsaufgabenliste fuer ein Microservicesystem extrahieren
|
||||
2. Service-Grenzen nach Geschaeftsbereichen aufteilen (Auth, Katalog, Bestand, Bestellung)
|
||||
3. API-Gateway-Routing entwerfen und implementieren
|
||||
4. Uebergreifende Probleme wie Bestandsabbuchung und Bestellkonsistenz behandeln
|
||||
5. End-to-End-Tests abschliessen und einen demonstrierbaren Microservice-Prototyp liefern
|
||||
|
||||
## Projektuebersicht
|
||||
|
||||
| Subsystem | Verantwortung |
|
||||
|-----------|---------------|
|
||||
| **Benutzerportal** | Produkte durchsuchen, bestellen, Bestellungen einsehen |
|
||||
| **Admin-Portal** | Produktverwaltung, Bestandsverwaltung, Bestellverwaltung |
|
||||
|
||||
Backend-Services:
|
||||
|
||||
| Service | Verantwortung |
|
||||
|---------|---------------|
|
||||
| **API Gateway** | Einheitlicher Einstieg, Routing, Auth-Pruefung |
|
||||
| **Auth Service** | Benutzerregistrierung, Login, JWT-Ausgabe |
|
||||
| **Catalog Service** | Produktinformationsverwaltung |
|
||||
| **Inventory Service** | Bestandsmengenverwaltung |
|
||||
| **Order Service** | Bestellerstellung, Statusverwaltung |
|
||||
|
||||
::: tip PRD-Zugang
|
||||
[PRD ansehen](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/simple-grocery-microservices/PRD.md)
|
||||
:::
|
||||
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'PRD lesen, Service-Aufteilung, Seiten und Transaktionskette klaeren' },
|
||||
{ title: 'Geruest erstellen', description: 'Frontend, Gateway und Service-Gerueste generieren' },
|
||||
{ title: 'Iterative Entwicklung', description: 'Moduleweise APIs ergaenzen, Bestand und Bestellung synchronisieren' },
|
||||
{ title: 'Test und Bereitstellung', description: 'End-to-End durchlaufen, bereitstellen und Demo vorbereiten' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Teil 1: Anforderungsanalyse
|
||||
|
||||
### 1.1 PRD lesen
|
||||
|
||||
- Wie werden Services aufgeteilt? Verantwortungsgrenzen jedes Services?
|
||||
- Welche Seiten haben Benutzer- und Admin-Portal?
|
||||
- Bestandsabbuchungsstrategie nach Bestellung? Erfolg / Fehler / Timeout?
|
||||
- Welche komplexen Faehigkeiten (verteilte Transaktionen, Nachrichtenwarteschlangen) zunaechst weglassen?
|
||||
|
||||
::: warning
|
||||
Beginne nicht mit dem Code, wenn diese Fragen keine klaren Antworten haben.
|
||||
:::
|
||||
|
||||
### 1.2 Systemarchitektur bestaetigen
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
prd["PRD"] --> fe["Frontend-Seiten"]
|
||||
fe --> gw["API Gateway"]
|
||||
gw --> auth["Auth Service"]
|
||||
gw --> catalog["Catalog Service"]
|
||||
gw --> inventory["Inventory Service"]
|
||||
gw --> order["Order Service"]
|
||||
order --> inventory
|
||||
```
|
||||
|
||||
## Teil 2: Projektgeruest erstellen
|
||||
|
||||
### 2.1 Projektstruktur generieren
|
||||
|
||||
```text
|
||||
Bitte generiere basierend auf dem aktuellen PRD ein Projektgeruest fuer ein Lebensmittel-E-Commerce-Microservicesystem.
|
||||
|
||||
Anforderungen:
|
||||
1. Frontend Benutzer- und Admin-Geruest generieren
|
||||
2. Fuenf Verzeichnisse: api-gateway, auth-service, catalog-service, inventory-service, order-service
|
||||
3. Jeder Service zunaechst nur minimal lauffaehigen Einstiegspunkt
|
||||
4. Keine echte Datenbank oder Zahlung
|
||||
```
|
||||
|
||||
### 2.2 Projektstruktur ueberpruefen
|
||||
|
||||
- [ ] Fuenf Service-Verzeichnisse klar strukturiert
|
||||
- [ ] API Gateway startet und leitet Anfragen weiter
|
||||
- [ ] Gesundheitspruefung jedes Services erreichbar
|
||||
- [ ] Frontend Benutzer- und Admin-Seiten zugaenglich
|
||||
|
||||
## Teil 3: Iterative Entwicklung
|
||||
|
||||
### 3.1 Modulweise vorgehen
|
||||
|
||||
1. **API Gateway**: Routing-Konfiguration, JWT-Pruefung-Middleware
|
||||
2. **Auth Service**: Registrierung, Login, JWT-Ausgabe
|
||||
3. **Catalog Service**: Produkt-CRUD, Listenabfrage
|
||||
4. **Inventory Service**: Bestandsabfrage, Bestandsabbuchung
|
||||
5. **Order Service**: Bestellerstellung, Statusuebergaenge, Bestandskopplung
|
||||
6. **Admin-Portal**: Produkt-, Bestands- und Bestellverwaltung
|
||||
|
||||
### 3.2 Modul-Selbstpruefung
|
||||
|
||||
| Pruefpunkt | Verifikationsmethode |
|
||||
|------------|---------------------|
|
||||
| Gateway-Routing | Services ueber Gateway korrekt erreichbar |
|
||||
| Berechtigungsisolierung | Benutzer- und Admin-APIs getrennt |
|
||||
| Datenkonsistenz | Produkt- und Bestandsdaten synchron |
|
||||
| Transaktionsabschluss | Bestandsabbuchung und Bestellstatus nach Bestellung konsistent |
|
||||
| Fehlerbehandlung | Bestand unzureichend oder Timeout: Kompensationsmechanismus |
|
||||
|
||||
## Teil 4: Test und Bereitstellung
|
||||
|
||||
### 4.1 End-to-End-Tests
|
||||
|
||||
- Produkte durchsuchen > In den Warenkorb > Bestellen > Bestellung einsehen
|
||||
- Admin > Produkt hinzufuegen > Bestand aktualisieren > Bestellungen anzeigen
|
||||
|
||||
## Liefergegenstaende
|
||||
|
||||
- [ ] Online-Demo-Link
|
||||
- [ ] Quellcode-Repository (mit README)
|
||||
- [ ] PRD-Dokument
|
||||
- [ ] Kernseiten-Screenshots
|
||||
- [ ] 60-Sekunden-Demo-Video
|
||||
|
||||
## Bewertungskriterien
|
||||
|
||||
| Dimension | Grundanforderung | Erweiterte Anforderung |
|
||||
|-----------|------------------|------------------------|
|
||||
| PRD-Alignment | Seiten, Funktionen, Service-Aufteilung gemaess PRD | Service-Aufteilungsgruende klar erklaert |
|
||||
| Produktabschluss | Durchsuchen > Bestellen > Bestandsabbuchung > Bestellung lauffaehig | Kompensationsmechanismus bei Timeout oder unzureichendem Bestand |
|
||||
| Service-Architektur | Jeder Service unabhaengig startbar, ueber Gateway erreichbar | Fehlerbehandlung und Retry bei Service-Kommunikation |
|
||||
| Admin-Faehigkeit | Produkt-, Bestands- und Bestellverwaltung bedienbar | Admin mit Datenstatistiken |
|
||||
| Engineering | Frontend, Gateway, Services, Datenbank verbunden | Docker Compose oder aehnliche Orchestrierung |
|
||||
|
||||
## Referenzmaterialien
|
||||
|
||||
- [UI-Design](../../frontend/ui-design/)
|
||||
- [Moderne Komponentenbibliothek](../../frontend/modern-component-library/)
|
||||
- [Von der Datenbank zu Supabase](../../backend/database-supabase/)
|
||||
- [API-Code schreiben](../../backend/ai-interface-code/)
|
||||
- [Git und GitHub](../../backend/git-workflow/)
|
||||
- [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/)
|
||||
@@ -0,0 +1,147 @@
|
||||
# Go Verkehrsdaten-Analyseplattform Entwicklungspraxis
|
||||
|
||||
## Ueberblick
|
||||
|
||||
Dieses Praxisprojekt erfordert die Umsetzung eines echten PRD unter Verwendung von Go: Eine Verkehrsdaten-Analyseplattform. Im Gegensatz zu frueheren CRUD-Systemen musst du hier eine vollstaendige Datenkette "Dateneingang > Aggregation > Alarmierung > Visualisierung" aufbauen. Diese Art von Datenprodukt ist in IoT-, Ueberwachungs- und Betriebsanalysen sehr verbreitet.
|
||||
|
||||
Dies ist die erste Begegnung mit der Programmiersprache Go. Keine Sorge - mit den vorhandenen JavaScript/TypeScript-Kenntnissen ist Go nicht schwer zu lernen. Der Fokus liegt auf dem Verstaendnis des Datenketten-Designs.
|
||||
|
||||
## Vorkenntnisse
|
||||
|
||||
- Frontend-Design und Komponentenbibliotheken ([UI-Design](../../frontend/ui-design/), [Moderne Komponentenbibliothek](../../frontend/modern-component-library/))
|
||||
- Backend-API-Design und Entwicklung ([API-Code schreiben](../../backend/ai-interface-code/))
|
||||
- Datenbankgrundlagen und Supabase ([Von der Datenbank zu Supabase](../../backend/database-supabase/))
|
||||
- Git-Workflow und Bereitstellung ([Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/))
|
||||
|
||||
## Lernziele
|
||||
|
||||
1. PRD lesen und Entwicklungsaufgabenliste fuer ein Datenprodukt extrahieren
|
||||
2. Go (Gin oder Fiber) fuer Backend-API-Services verwenden
|
||||
3. Vollstaendige Datenkette fuer Dateneingang, Zeitfenster-Aggregation und Alarmierung entwerfen
|
||||
4. Backend-Daten und Frontend-Dashboard konsistent halten
|
||||
5. End-to-End-Tests abschliessen und einen demonstrierbaren Datenproduktprototyp liefern
|
||||
|
||||
## Projektuebersicht
|
||||
|
||||
| Modul | Verantwortung |
|
||||
|-------|---------------|
|
||||
| **Dateneingang** | Rohdaten zu Verkehrsereignissen empfangen und speichern |
|
||||
| **Datenaggregation** | Trends und Stau-Indikatoren nach Zeitfenstern berechnen |
|
||||
| **Alarmierung** | Auf regelbasierten Alarmdatensaetzen generieren |
|
||||
| **Dashboard** | Trends, Ranglisten und Alarmlisten im Frontend anzeigen |
|
||||
|
||||
::: tip PRD-Zugang
|
||||
[PRD ansehen](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/traffic-data-visualization-go/PRD.md)
|
||||
:::
|
||||
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'PRD lesen, Datenquellen, Metrikdefinitionen und Alarmregeln klaeren' },
|
||||
{ title: 'Geruest erstellen', description: 'Mit KI Go-API-Service und Frontend-Dashboard-Geruest generieren' },
|
||||
{ title: 'Iterative Entwicklung', description: 'Aggregationslogik, Alarmregeln und Dashboard-APIs ergaenzen' },
|
||||
{ title: 'Test und Bereitstellung', description: 'End-to-End durchlaufen, bereitstellen und Demo vorbereiten' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Teil 1: Anforderungsanalyse
|
||||
|
||||
### 1.1 PRD lesen
|
||||
|
||||
- Was ist die Datenquelle? Welche Felder gibt es?
|
||||
- Wie sind die Kernmetriken definiert? (z. B. genaue "Stau"-Kriterien)
|
||||
- Was sind die Alarmregeln? Erste Version auf einfache Regeln beschraenken?
|
||||
- Welche Seiten und Diagramme enthaelt das Dashboard?
|
||||
|
||||
::: warning
|
||||
Beginne nicht mit dem Code, wenn diese Fragen keine klaren Antworten haben.
|
||||
:::
|
||||
|
||||
### 1.2 Datenkette bestaetigen
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
prd["PRD"] --> ingest["Dateneingangs-API"]
|
||||
ingest --> raw["Rohdatentabelle"]
|
||||
raw --> agg["Aggregationsaufgabe"]
|
||||
agg --> alert["Alarmregeln"]
|
||||
agg --> dashboard["Dashboard-APIs"]
|
||||
alert --> dashboard
|
||||
```
|
||||
|
||||
## Teil 2: Projektgeruest erstellen
|
||||
|
||||
### 2.1 Go-API-Service generieren
|
||||
|
||||
```text
|
||||
Bitte generiere basierend auf dem aktuellen PRD ein Go Verkehrsdaten-Analyseplattform-Geruest.
|
||||
|
||||
Anforderungen:
|
||||
1. Gin oder Fiber verwenden
|
||||
2. Dateneingangs-API bereitstellen
|
||||
3. Aggregationsaufgaben-Geruest erstellen
|
||||
4. Dashboard- und Alarm-API-Geruest bereitstellen
|
||||
5. Zunaechst keine komplexe Analyse, nur lauffaehige Struktur
|
||||
```
|
||||
|
||||
### 2.2 Projektstruktur ueberpruefen
|
||||
|
||||
- [ ] Go-Service startet korrekt
|
||||
- [ ] Dateneingangs-API kann Daten empfangen und speichern
|
||||
- [ ] Aggregationsaufgaben-Geruest steht
|
||||
- [ ] Frontend-Dashboard zeigt grundlegende Diagramme
|
||||
|
||||
## Teil 3: Iterative Entwicklung
|
||||
|
||||
### 3.1 Modulweise vorgehen
|
||||
|
||||
1. **Dateneingangs-API**: Verkehrsereignisse empfangen und in Datenbank schreiben
|
||||
2. **Datenaggregation**: Nach Zeitfenstern aggregieren, Trends und Stau-Indikatoren berechnen
|
||||
3. **Alarmregeln**: Basierend auf Schwellenwerten Alarmdatensaetze generieren
|
||||
4. **Dashboard-APIs**: Trenddaten, Rangdaten, Alarmlisten bereitstellen
|
||||
5. **Frontend-Dashboard**: Trenddiagramme, Ranglisten, Alarmlisten-Seiten
|
||||
|
||||
### 3.2 Modul-Selbstpruefung
|
||||
|
||||
| Pruefpunkt | Verifikationsmethode |
|
||||
|------------|---------------------|
|
||||
| Dateneingang | Rohdaten korrekt in Datenbank geschrieben |
|
||||
| Aggregationsdefinition | Trend- und Rangmetriken konsistent berechnet |
|
||||
| Alarmregeln | Alarm-Ausloesungsbedingungen wie erwartet |
|
||||
| Datenkonsistenz | Dashboard-Anzeige und Backend-Daten synchron |
|
||||
| API-Standards | Einheitliche Rueckgabestruktur und Fehlerbehandlung |
|
||||
|
||||
## Teil 4: Test und Bereitstellung
|
||||
|
||||
### 4.1 End-to-End-Tests
|
||||
|
||||
- Testdaten eingeben > Aggregationsaufgabe ausfuehren > Dashboard-Anzeige aktualisieren
|
||||
- Alarmbedingung ausloesen > Alarmdatensatz generieren > Alarmseite anzeigen
|
||||
|
||||
## Liefergegenstaende
|
||||
|
||||
- [ ] Online-Demo-Link
|
||||
- [ ] Quellcode-Repository (mit README)
|
||||
- [ ] PRD-Dokument
|
||||
- [ ] Kernseiten-Screenshots
|
||||
- [ ] 60-Sekunden-Demo-Video
|
||||
|
||||
## Bewertungskriterien
|
||||
|
||||
| Dimension | Grundanforderung | Erweiterte Anforderung |
|
||||
|-----------|------------------|------------------------|
|
||||
| PRD-Alignment | Funktionen und Datenstruktur gemaess PRD | Metrikdefinitionen und Aggregationslogik klar erklaert |
|
||||
| Datenkette | Eingang > Aggregation > Alarm > Dashboard lauffaehig | Aggregationsaufgaben unterstuetzen inkrementelle Updates |
|
||||
| Analysefaehigkeit | Trends, Rangliste und Alarme funktional | Konfigurierbare Metriken und anpassbare Alarmregeln |
|
||||
| Frontend-Anzeige | Dashboard zeigt grundlegende Diagramme | Zeitbereichsfilter fuer Diagramme |
|
||||
| Engineering | Go API, Datenbank, Frontend verbunden | Einheitliche Fehlerbehandlung und Protokollierung |
|
||||
|
||||
## Referenzmaterialien
|
||||
|
||||
- [UI-Design](../../frontend/ui-design/)
|
||||
- [Moderne Komponentenbibliothek](../../frontend/modern-component-library/)
|
||||
- [Von der Datenbank zu Supabase](../../backend/database-supabase/)
|
||||
- [API-Code schreiben](../../backend/ai-interface-code/)
|
||||
- [Git und GitHub](../../backend/git-workflow/)
|
||||
- [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/)
|
||||
@@ -0,0 +1,148 @@
|
||||
# Intelligente Reiseplanungs-Agenten-Plattform Entwicklungspraxis
|
||||
|
||||
## Ueberblick
|
||||
|
||||
Dieses Praxisprojekt erfordert die Umsetzung eines echten PRD von Grund auf: Eine intelligente Reiseplanungs-Agenten-Plattform. Du wirst ein Produkt erstellen, das strukturierte Eingaben empfaengt, Tagesreiseroutinen generiert und Speicherung sowie Wiederverwendung unterstuetzt - nicht nur ein Chatbot, sondern ein Produkt mit Aufgabenmanagement.
|
||||
|
||||
Die Kernherausforderung: Wie generiert die KI strukturierte, nutzbare Reiseplaene anstelle eines langen, nicht bearbeitbaren Textblocks.
|
||||
|
||||
## Vorkenntnisse
|
||||
|
||||
- Frontend-Design und Komponentenbibliotheken ([UI-Design](../../frontend/ui-design/), [Moderne Komponentenbibliothek](../../frontend/modern-component-library/))
|
||||
- Backend-API-Design und Entwicklung ([API-Code schreiben](../../backend/ai-interface-code/))
|
||||
- Datenbankgrundlagen und Supabase ([Von der Datenbank zu Supabase](../../backend/database-supabase/))
|
||||
- Git-Workflow und Bereitstellung ([Git und GitHub](../../backend/git-workflow/), [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/))
|
||||
|
||||
## Lernziele
|
||||
|
||||
1. PRD lesen und Entwicklungsaufgabenliste fuer eine Agenten-Plattform extrahieren
|
||||
2. Strukturierte Eingabeformulare und strukturierte Ausgabeformate entwerfen
|
||||
3. Agenten-Orchestrierungsschicht fuer Benutzereingabe, Modellaufruf und Ergebnisspeicherung implementieren
|
||||
4. Geschaefskette "Generieren > Speichern > Wiederverwenden" aufbauen
|
||||
5. End-to-End-Tests abschliessen und einen demonstrierbaren KI-Produktprototyp liefern
|
||||
|
||||
## Projektuebersicht
|
||||
|
||||
| Funktion | Beschreibung |
|
||||
|----------|-------------|
|
||||
| **Reiseplanung** | Benutzer gibt Startort, Ziel, Datum, Budget und Praeferenzen ein; System generiert Tagesreiseroutine |
|
||||
| **Budgetaufteilung** | Reiseplan enthaelt Budgetverteilung und Empfehlungen |
|
||||
| **Verwaltungsverlauf** | Benutzer kann Plaene speichern, neu generieren und exportieren |
|
||||
| **Admin-Dashboard** | Administrator sieht beliebte Ziele, fehlgeschlagene Aufgaben und Benutzerfeedback |
|
||||
|
||||
::: tip PRD-Zugang
|
||||
[PRD ansehen](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/travel-planning-agent-platform/PRD.md)
|
||||
:::
|
||||
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'PRD lesen, Seiten, Agenten-Orchestrierung, Ein-/Ausgabestruktur klaeren' },
|
||||
{ title: 'Geruest erstellen', description: 'Mit KI Startseite, Planungsseite, Verlauf, Admin-Geruest generieren' },
|
||||
{ title: 'Iterative Entwicklung', description: 'Moduleweise strukturierte Ausgabe, Aufgabenstatus, Verwaltung ergaenzen' },
|
||||
{ title: 'Test und Bereitstellung', description: 'End-to-End durchlaufen, bereitstellen und Demo vorbereiten' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Teil 1: Anforderungsanalyse
|
||||
|
||||
### 1.1 PRD lesen
|
||||
|
||||
- Nur einzelnes Ziel in der ersten Version?
|
||||
- Muss die Ausgabe strukturiert sein? Welche Struktur?
|
||||
- Wie tief geht der Export? (Freigabelink / PDF / Bild)
|
||||
- Umfang der Admin-Statistiken und Aufgabenprotokolle?
|
||||
|
||||
::: warning
|
||||
Beginne nicht mit dem Code, wenn diese Fragen keine klaren Antworten haben.
|
||||
:::
|
||||
|
||||
### 1.2 Systemarchitektur bestaetigen
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
prd["PRD"] --> planner["Planungsseite"]
|
||||
planner --> agent["Agenten-Orchestrierung"]
|
||||
agent --> model["Modellaufruf"]
|
||||
agent --> db["Datenbank"]
|
||||
db --> history["Historische Plaene"]
|
||||
db --> admin["Admin-Statistiken und Protokolle"]
|
||||
```
|
||||
|
||||
## Teil 2: Projektgeruest erstellen
|
||||
|
||||
### 2.1 Frontend-Seiten generieren
|
||||
|
||||
```text
|
||||
Bitte generiere basierend auf dem aktuellen PRD ein Frontend-Geruest fuer eine intelligente Reiseplanungs-Agenten-Plattform.
|
||||
|
||||
Anforderungen:
|
||||
1. Seiten: Startseite, Planungsseite, Reisdetails, Verlauf, Admin
|
||||
2. Planungsseite links: Formular, rechts: Ergebnisvorschau
|
||||
3. Zunaechst nur Seitenstruktur mit Mock-Daten
|
||||
4. Stil wie ein modernes KI-Produkt
|
||||
```
|
||||
|
||||
### 2.2 Seitenstruktur ueberpruefen
|
||||
|
||||
- [ ] Formularfelder der Planungsseite gemaess PRD
|
||||
- [ ] Ergebnisbereich zeigt strukturierte Reisedaten
|
||||
- [ ] Verlaufsseite zeigt mehrere Plaene
|
||||
- [ ] Admin-Seite zeigt Statistiken
|
||||
|
||||
## Teil 3: Iterative Entwicklung
|
||||
|
||||
### 3.1 Modulweise vorgehen
|
||||
|
||||
1. **Auth**: Registrierung, Login
|
||||
2. **Planungsformular**: Strukturierte Eingabe (Startort, Ziel, Datum, Budget, Praeferenzen)
|
||||
3. **Agenten-Orchestrierung**: Eingabe empfangen > Modell aufrufen > Strukturierte Ausgabe parsen
|
||||
4. **Ergebnisanzeige**: Reiseplan tageweise, Budgetaufteilung, Empfehlungen
|
||||
5. **Verwaltung**: Plaene speichern, neu generieren, exportieren
|
||||
6. **Admin-Dashboard**: Beliebte Ziele, fehlgeschlagene Aufgaben, Benutzerfeedback
|
||||
7. **Aufgabenstatus**: Generierung laeuft / Erfolg / Fehler mit Fehlerprotokollen
|
||||
|
||||
### 3.2 Modul-Selbstpruefung
|
||||
|
||||
| Pruefpunkt | Verifikationsmethode |
|
||||
|------------|---------------------|
|
||||
| Eingabevollstaendigkeit | Formularfelder gemaess PRD |
|
||||
| Strukturierte Ausgabe | Reiseplan als strukturierte Daten (kein Textblock) |
|
||||
| Datenkonsistenz | trip, itinerary, logs Daten synchron |
|
||||
| Abschlussverifikation | "Eingabe > Generieren > Speichern > Neu generieren" vollstaendig |
|
||||
|
||||
## Teil 4: Test und Bereitstellung
|
||||
|
||||
### 4.1 End-to-End-Tests
|
||||
|
||||
- Reiseparameter eingeben > Tagesreiseroutine generieren > Budgetaufteilung anzeigen > Im Verlauf speichern
|
||||
- Aus dem Verlauf eine neue Reise generieren
|
||||
- Administrator sieht Aufgabenstatistiken und Fehlerprotokolle
|
||||
|
||||
## Liefergegenstaende
|
||||
|
||||
- [ ] Online-Demo-Link
|
||||
- [ ] Quellcode-Repository (mit README)
|
||||
- [ ] PRD-Dokument
|
||||
- [ ] Kernseiten-Screenshots
|
||||
- [ ] 60-Sekunden-Demo-Video
|
||||
|
||||
## Bewertungskriterien
|
||||
|
||||
| Dimension | Grundanforderung | Erweiterte Anforderung |
|
||||
|-----------|------------------|------------------------|
|
||||
| PRD-Alignment | Seiten, Funktionen, Datenstruktur gemaess PRD | Designentscheidungen klar erklaeren |
|
||||
| Produktabschluss | Planung > Speichern > Verlauf > Neu generieren lauffaehig | Export und Freigabe unterstuetzt |
|
||||
| Ausgabequalitaet | Reiseplan strukturiert und lesbar | Budgetaufteilung angemessen, Empfehlungen zielgerichtet |
|
||||
| Admin-Faehigkeit | Aufgabenstatistiken und Fehlerprotokolle einsehbar | Analyse beliebter Ziele vorhanden |
|
||||
| Engineering | Frontend, Backend, DB, Modellaufruf verbunden | Aufgabenstatus-Management vollstaendig |
|
||||
|
||||
## Referenzmaterialien
|
||||
|
||||
- [UI-Design](../../frontend/ui-design/)
|
||||
- [Moderne Komponentenbibliothek](../../frontend/modern-component-library/)
|
||||
- [Von der Datenbank zu Supabase](../../backend/database-supabase/)
|
||||
- [API-Code schreiben](../../backend/ai-interface-code/)
|
||||
- [Git und GitHub](../../backend/git-workflow/)
|
||||
- [Web-Anwendungen bereitstellen](../../backend/zeabur-deployment/)
|
||||
@@ -0,0 +1,167 @@
|
||||
# Grossmodell-gestuetzte Entwicklung von Backend-Schnittstellencode und -dokumentation
|
||||
|
||||
In den vorherigen Lektionen haben wir gelernt, wie man Tools wie Figma fuer UI-Designentwuerfe verwendet, wie man mit AI schnell statische Frontend-Seiten generiert und wie man Supabase nutzt, um Datenbanken aufzubauen und eine erste Benutzerauthentifizierung zu realisieren. Jetzt stellt sich naturgemaess die Frage: Wie gelangen die Daten nach dem Klick auf diese dynamischen Buttons unbemerkt in Supabase? Wenn wir komplexere Geschaeftslogik ausfuehren muessen (wie gleichzeitige Zahlungen, zeitgesteuerte Push-Benachrichtigungen oder sensible Datenverarbeitung), ist es sicher, die Datenbank direkt vom Frontend aus zu verbinden?
|
||||
|
||||
Das fuehrt uns zu einem entscheidenden Element der modernen Webentwicklungsarchitektur: der **Backend-API-Schnittstelle**.
|
||||
|
||||
Anstatt in der Vergangenheit hunderte Zeilen Backend-Routen, Controller und Parameter-Validierungslogik manuell zu tippen, koennen wir heute die leistungsstarke Code-Generierungsfaehigkeit von Grossmodellen nutzen und das muehsame Grundgeruest von AI schreiben lassen. In dieser Lektion werden wir den Teufelskreis "AI schreibt nur vage und oberflaechlich" verlassen und dir anhand echter Geschaeftsszenarien zeigen, wie du durch hochwertige Prompts das Grossmodell dazu bringst, robuste, branchenkonforme Node.js-Backend-Schnittstellen zu schreiben und automatisch API-Dokumentation sowie Testfaelle zu generieren.
|
||||
|
||||
> :bulb: **Vorkenntnisse**
|
||||
>
|
||||
> Bevor du mit diesem Abschnitt beginnst, wird empfohlen, folgende Inhalte zu kennen:
|
||||
> - [Von der Datenbank zu Supabase](../database-supabase/) - Datenbank- und Datenmodellkonzepte verstehen.
|
||||
> - [Git und GitHub verwenden lernen](../git-workflow/) - Vertrautheit mit Versionskontrolle in der Projektentwicklung.
|
||||
> - [Was ist ein Terminal / eine Kommandozeile](/de-de/appendix/2-development-tools/command-line-shell) - Projektinitialisierung und -start erfordern grundlegende Kommandozeilen-Operationen.
|
||||
|
||||
# Was du lernen wirst
|
||||
|
||||
1. **Was ist eine API-Schnittstelle**: Die Bruecke der Frontend-Backend-Kommunikation und RESTful-Designrichtlinien verstehen.
|
||||
2. **Grossmodell-gestuetzte Serviceerstellung**: Wie man durch strukturierte Prompts AI beim Aufbau eines Node.js + Express-Basisprojekts unterstuetzt.
|
||||
3. **Schnittstellenlogik-Entwicklung**: Das Grossmodell zur Generierung von CRUD-Schnittstellen (Erstellen, Lesen, Aktualisieren, Loeschen) mit strenger Geschaeftsvalidierung und Supabase-Datenbankanbindung leiten.
|
||||
4. **Automatisierte API-Dokumentation**: Das Grossmodell basierend auf Code rückwaerts OpenAPI/Swagger-Dokumentation generieren lassen, die branchenueblich fuer die teamuebergreifende Zusammenarbeit ist.
|
||||
5. **Test- und Integrations-Loop**: Grossmodelle nutzen, um Postman-Testkollektionen und Jest-Einheitentests zu generieren, die die Codequalitaet absichern.
|
||||
|
||||
---
|
||||
|
||||
# 1. Warum brauchen wir API-Schnittstellen?
|
||||
|
||||
Im traditionellen Verstaendnis ist das Frontend "das, was man sieht", und die Datenbank ist "das Lager, in dem Dinge gespeichert werden". Aber dazwischen fehlt ein Dispatcher. Wenn du dir die gesamte Anwendung als ein Restaurant vorstellst:
|
||||
- **Frontend (Client)** ist die Speisekarte und der Bestelltisch des Restaurants, wo Gaeste Gerichte durchsuchen und Bestellungen aufgeben.
|
||||
- **Datenbank (Supabase etc.)** ist die Kueche des Restaurants, in der alle Zutaten und Buecher gelagert werden.
|
||||
- **Backend-API-Schnittstelle** ist der Kellner des Restaurants. Gaeste koennen nicht direkt in die Kueche stuermen, um Zutaten zu holen (das waere nicht nur chaotisch, sondern wuerde auch Sicherheitsprobleme verursachen). Stattdessen muessen sie ihre "Bestellanliegen" (HTTP Request) dem Kellner mitteilen. Der Kellner ueberprueft diese (Parametervalidierung, Berechtigungsauthentifizierung), holt dann die entsprechenden Inhalte aus der Kueche und bringt die "fertigen Gerichte" (HTTP Response, normalerweise im JSON-Format) zurueck zum Gast.
|
||||
|
||||
Durch API-Schnittstellen erreichen wir eine klare **Trennung von Frontend und Backend**: Das Frontend kuemmert sich nur um das Rendering der Seiten, waehrend das Backend sich auf Geschaeftslogik, Datenverarbeitung und Sicherheitsmassnahmen konzentriert.
|
||||
|
||||
---
|
||||
|
||||
# 2. Projektarchitektur-Design und Initialisierung
|
||||
|
||||
Eine klar strukturierte Projektbasis ist die Voraussetzung dafuer, dass das Grossmodell guten Code schreiben kann. Bevor wir AI Code schreiben lassen, muessen wir selbst eine Vorstellung von der Projektstruktur haben.
|
||||
|
||||
## 2.1 Haeufige API-Projektstruktur
|
||||
|
||||
Selbst wenn wir ein Grossmodell zur Code-Generierung verwenden, duerfen wir niemals den gesamten Code in eine einzige `server.js`-Datei stopfen. Eine wartbare Node.js-Backend-Architektur sieht typischerweise wie folgt aus:
|
||||
|
||||
```text
|
||||
my-api-project/
|
||||
├── .env # Sensible Umgebungsvariablen (wie API Keys, Datenbankverbindungsstring)
|
||||
├── server.js # Projekteingang (Serverstart, globale Middleware-Registrierung)
|
||||
├── package.json # Abhaengigkeitsverwaltungsdatei
|
||||
├── src/
|
||||
│ ├── routes/ # Routen-Layer: Definiert URL-Pfade und Anfragemethoden
|
||||
│ ├── controllers/ # Controller-Layer: Verarbeitet Anfrageparameter, ruft Services auf und gibt Antworten zurueck
|
||||
│ ├── services/ # Service-Layer: Kapselt Datenbankinteraktion und Kerngeschaeftslogik
|
||||
│ └── middlewares/ # Middleware: Login-Authentifizierung, globale Fehlerbehandlung
|
||||
└── docs/ # Verzeichnis fuer API-Dokumentation
|
||||
```
|
||||
|
||||
## 2.2 Projektinitialisierung mit AI
|
||||
|
||||
Anstatt manuell `npm init` auszufuehren und Abhaengigkeiten einzeln zu installieren, koennen wir die oben genannten Vorgaben direkt als Prompt an das Grossmodell uebergeben:
|
||||
|
||||
> :speaking_head: **Prompt an das Grossmodell (Beispiel):**
|
||||
> "Hilf mir, ein Node.js-Backend-Projekt aufzubauen, das sich mit einer Supabase-Datenbank verbinden kann. Die Struktur soll klar sein, um die kuenftige Wartung zu erleichtern."
|
||||
|
||||
Nach dem Ausfuehren des von AI zurueckgegebenen Codes erhaeltst du auf `localhost:3000` eine Backend-Anwendung mit Enterprise-Reife.
|
||||
|
||||
---
|
||||
|
||||
# 3. Kernpraktikum: Grossmodell-gestuetzte Schnittstellenentwicklung
|
||||
|
||||
Dies ist der wichtigste Teil dieses Kapitels. Der von Grossmodellen geschriebene Code weist haeufig "logische Luecken" oder "oberflaechliche Platzhalter" auf, weil der Entwickler nicht genug Kontext bereitgestellt hat. **Grossmodelle haben keine Angst vor komplexen Anforderungen, aber sie fuerchten vage Anforderungen.**
|
||||
|
||||
Am Beispiel der Erstellungsschnittstelle fuer die `menu_items`-Tabelle (Menue-Tabelle), die wir im [Datenbank-Kapitel](../database-supabase/) erwaehnt haben, zeigen wir, wie man einen hochwertigen Prompt schreibt.
|
||||
|
||||
## 3.1 Dem Grossmodell vollstaendigen Kontext geben
|
||||
|
||||
Bevor du AI bittest, eine Schnittstelle zu schreiben, musst du unbedingt die **Datenbankfeld-Definition (Schema)** und die **konkreten Einschraenkungen** bereitstellen.
|
||||
|
||||
> :speaking_head: **Hochwertiger Prompt (Vorlage):**
|
||||
> "Hilf mir, eine Schnittstelle zum Hinzufuegen eines Menueeintrags zu schreiben. Der Eintrag hat Produktname, Preis, Kategorie (Burger, Snacks, Getraenke) und ob er verfuegbar ist. Produktname und Preis sind Pflichtfelder, der Preis darf nicht negativ sein. Bei fehlerhafter Benutzereingabe soll eine Fehlermeldung angezeigt werden."
|
||||
|
||||
## 3.2 Den vom Grossmodell generierten Code ueberpruefen
|
||||
|
||||
Der vom Grossmodell generierte Code ist typischerweise wie folgt strukturiert und klar in Verantwortlichkeiten unterteilt:
|
||||
|
||||
```javascript
|
||||
// services/menuService.js
|
||||
const { createClient } = require('@supabase/supabase-js');
|
||||
const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY);
|
||||
|
||||
exports.createMenuItem = async (menuData) => {
|
||||
// Supabase SDK aufrufen, um Daten in die Tabelle einzufuegen
|
||||
const { data, error } = await supabase
|
||||
.from('menu_items')
|
||||
.insert([menuData])
|
||||
.select();
|
||||
|
||||
if (error) throw new Error(`Datenbank-Einfuegen fehlgeschlagen: ${error.message}`);
|
||||
return data[0];
|
||||
};
|
||||
```
|
||||
|
||||
Man erkennt, dass der auf diese Weise generierte Code nicht nur eine vernuenftige Struktur aufweist, sondern auch die Initialisierung von Supabase, die Fehlerbehandlung sowie die Ausnahmebehandlung beruecksichtigt. Dies ist ein grosser Unterschied zu dem "Spaghetti-Code", den man erhalten wuerde, wenn man einfach "schreib mal eine Erstellungsschnittstelle" verlangt.
|
||||
|
||||
---
|
||||
|
||||
# 4. Haende frei: Automatische Generierung von API-Dokumentation
|
||||
|
||||
Fuer ein Entwicklungsteam ist eine API ohne Dokumentation ein Blindgatter. Frontend-Entwickler koennen nicht erraten, welche Parameter du erwartest, und auch nicht vorhersagen, welche Struktur zurueckgegeben wird. Die branchenueblichste API-Beschreibungsspezifikation ist **OpenAPI (frueher auch Swagger genannt)**.
|
||||
|
||||
Frueher war das manuelle Schreiben von Swagger-Dokumentation im YAML- oder JSON-Format aeusserst schmerzhaft und fehleranfaellig. Heute ist dies eines der Gebiete, auf denen Grossmodelle am besten sind.
|
||||
|
||||
Du kannst einfach den Code deiner `routes` und `controllers` auswaehlen und ihn dem Grossmodell uebergeben:
|
||||
|
||||
> :speaking_head: **Prompt fuer die Dokumentationsgenerierung:**
|
||||
> "Hilf mir, basierend auf dem obigen Code eine API-Dokumentation zu generieren. Beschreibe genau, was jeder Parameter bedeutet und welche Daten zurueckgegeben werden, um die Zusammenarbeit mit den Frontend-Kollegen zu erleichtern."
|
||||
|
||||
In diesem Prozess kannst du AI sogar bitten, Feldbeschreibungen (Description) und Mock-Daten zu ergaenzen (wie `price_cents: 1200` fuer 12 Euro), was die Kommunikationskosten drastisch senkt.
|
||||
|
||||
---
|
||||
|
||||
# 5. Absicherung: Testcode und Postman-Kollektionen generieren
|
||||
|
||||
Code geschrieben, Dokumentation erstellt -- es fehlt nur noch der letzte Schritt: Ueberpruefen, ob der Code tatsaechlich laeuft.
|
||||
|
||||
## 5.1 Postman / Apifox Testkonfiguration generieren
|
||||
|
||||
In der Schnittstellenentwicklung verwenden wir normalerweise Tools wie Postman, um HTTP-Anfragen vom Frontend zu simulieren. Ohne Grossmodell musst du manuell die URL eingeben, Header (Anfrage-Header) einzeln hinzufuegen und den JSON-Anfrage-Body zusammenbauen.
|
||||
|
||||
Du musst AI nur anweisen:
|
||||
> "Wandle diese API-Dokumentation in ein Format um, das Postman importieren kann. Es soll Beispiele fuer korrekte und fehlerhafte Anfragen enthalten."
|
||||
|
||||
Nachdem du den JSON-Text erhalten hast, speichere ihn als `menu_api.json` und ziehe ihn in Postman. Sofort hast du eine out-of-the-box-Test-Klick-Oberflaeche.
|
||||
|
||||
## 5.2 Automatisierte Einheitentests schreiben
|
||||
|
||||
Wenn du eine noch strengere technische Qualitaet anstrebst, kannst du das Grossmodell bitten, dir mit Testframeworks wie `Jest` Einheitentests (Unit Tests) zu schreiben, die die Kerngeschaeftslogik auf Grenzfalle testen (z. B. ob die Validierung auf Datenbankebene greift, wenn ein negativer Preis uebergeben wird).
|
||||
|
||||
---
|
||||
|
||||
# 6. Backend-Schnittstellen: Unbedingt bekannte Best Practices
|
||||
|
||||
Selbst mit AI-Unterstuetzung musst du als "Torwaechter" des gesamten Systems die folgenden Kernprinzipien kennen und ueberpruefen:
|
||||
|
||||
1. **RESTful-konforme Pfadbenennung**:
|
||||
- Gutes Design: `GET /api/users` (Benutzerliste abrufen), `POST /api/users` (Benutzer erstellen). URLs sollten "Ressourcen"-Substantive darstellen.
|
||||
- Schlechtes Design: `POST /api/getUser` oder `POST /api/createUser`. Verben sollten durch die HTTP-Methoden (GET/POST/PUT/DELETE) ausgedrueckt werden.
|
||||
2. **Standardisierte HTTP-Statuscodes**:
|
||||
- 200/201: Anfrage erfolgreich / Ressource erfolgreich erstellt.
|
||||
- 400: Bad Request, Parameterformat des Frontends fehlerhaft, Pflichtfelder fehlen.
|
||||
- 401/403: Unauthorized / Forbidden, Benutzer nicht angemeldet oder keine Berechtigung.
|
||||
- 404: Not Found, Ressource existiert nicht.
|
||||
- 500: Server Error, Backend-Code-Fehler oder Datenbankausfall. Den Fehler-Callstack niemals direkt dem Frontend preisgeben (Sicherheitsrisiko).
|
||||
3. **Niemals Benutzereingaben vertrauen**: Frontend-Eingaben koennen gefaelscht sein. Alle Kernparameter-Validierungen muessen im Backend erneut durchgefuehrt werden.
|
||||
|
||||
# 7. Zusammenfassung
|
||||
|
||||
Durch dieses Kapitel hast du eine wirkliche Perspektivenveraenderung in der Entwicklung vollzogen: Du bist nicht mehr der "Tipper", der in Syntax und Satzzeichen feststeckt, sondern aufgestiegen zum **Systemdesigner und Architektur-Kommandanten**.
|
||||
Du hast Folgendes gelernt:
|
||||
1. Das Kernsystemdenken von **API-Schnittstellen und Frontend-Backend-Trennung**.
|
||||
2. **Wie man durch die Bereitstellung von Kontext und Schichtstruktur-Konzepten** die Qualitaet des vom Grossmodell generierten Server-Codes erheblich steigert.
|
||||
3. Die muehsame **Dokumentationserstellung** und **Testfall-Konstruktion** geschickt in automatisierte Aufgaben verwandelt, die AI besonders gut beherrscht.
|
||||
4. In Kombination mit dem zuvor erlernten **Supabase**-Wissen den vollstaendigen Datenfluss von der Client-Anfrage bis zur Datenbankaktualisierung durchgaengig geschlossen.
|
||||
|
||||
::: tip :bulb: Naechste Schritte
|
||||
Wenn dein Datenfluss und dein Backend-Service bereit sind, koennen sie derzeit nur auf deinem lokalen Computer "fuer sich selbst" laufen. In den naechsten Kapiteln werden wir lernen, wie man diesen muehsam aufgebauten Service auf einem **overtentlichen Server bereitstellt (Deploy)**, sodass dein Produkt von Nutzern weltweit aufgerufen werden kann.
|
||||
:::
|
||||
@@ -0,0 +1,882 @@
|
||||
# Von der Datenbank zu Supabase
|
||||
|
||||
In der letzten Lektion haben wir die grundlegende Verwendung der UI-Design-Tools MasterGo und Figma kennengelernt, konnten Code ueber GitHub abrufen und版本 verwalten sowie Websites ueber Zeabur bereitstellen, um unsere Anwendungen einer breiteren Nutzergemeinde zugaenglich zu machen.
|
||||
|
||||
Um den Wissenstransfer zu erleichtern, lassen Sie uns vor Beginn der neuen Inhalte zu Design-Tools und Bereitstellung einige der Kernpunkte der letzten Lektion anhand einiger einfacher Fragen kurz wiederholen:
|
||||
|
||||
1. Was sind Frontend-Design-Tools, Figma und MasterGo - Definition und Verwendung.
|
||||
2. Grundlegende Methoden zur Umsetzung von Designentwuerfen in Code.
|
||||
3. Was ist GitHub, wie konfiguriert man SSH und wie erstellt man sein erstes Repository.
|
||||
4. Was bedeutet Bereitstellung (Deployment), wie verwendet man Zeabur und wie stellt man GitHub- oder lokalen Code oeffentlich zugaenglich bereit.
|
||||
|
||||
Wenn dir bei einer dieser Fragen noch Unklarheiten bleiben, empfiehlt es sich, die Dokumente und Unterlagen der letzten Lektion noch einmal durchzugehen. Du kannst jederzeit Fragen in der WeChat-Lerngruppe stellen.
|
||||
|
||||
In dieser Lektion werden wir lernen, wie eine App oder Website von einem lauffaehigen Zustand zu einem echten Online-Produkt wird: Neben der Verwaltung verschiedener Datenveraenderungen waehrend des Programmablaufs durch eine Datenbank benoetigen wir auch ein vollstaendiges Benutzersystem (Registrierung, Anmeldung, Berechtigungen usw.) sowie weitere wichtige Backend-Faehigkeiten. Wir werden Supabase als Backend-Service-Plattform als Leitfaden verwenden und damit zunaechst die beiden Grundfunktionen "Datenbank + Benutzersystem" implementieren. Anschliessend werden wir die von Supabase bereitgestellten Komponenten als Referenz nutzen, um die Kernmodule moderner Cloud-Backend-Dienste besser zu verstehen sowie deren spezifische Funktionen und Wirkungsweise.
|
||||
|
||||
# Was du lernen wirst
|
||||
|
||||
1. Was sind Daten, was ist eine Datenbank sowie haeufige Datenbanken und deren Verwendung
|
||||
2. Was ist Supabase und wie man grundlegende Datenbankoperationen mit Supabase durchfuehrt
|
||||
3. Wie man Supabase nutzt, um einer App grundlegende Benutzerverwaltungsfunktionen hinzuzufuegen
|
||||
4. Supabase-Erweiterungsfunktionen erlernen: Realtime, Storage, Edge Functions
|
||||
5. Google- und GitHub-Login-Unterstützung fuer Supabase hinzufuegen
|
||||
|
||||
- Eine Basisanwendung, die Benutzerregistrierung/-anmeldung unterstuetzt und Daten in einer Online-Datenbank speichern kann
|
||||
- Eine wiederverwendbare Supabase-Backend-Codevorlage (Datenbank, Benutzerverwaltung usw.) fuer die direkte Verwendung in spaeteren Projekten
|
||||
|
||||
# 1. Was ist eine Datenbank
|
||||
|
||||
## 1.1 Was sind Daten
|
||||
|
||||
In der digitalen Welt sind Daten (Data) ueberall präsent. Kurz gesagt: Daten sind Traeger von Informationen. Die Kontaktdaten deiner Freunde, ein WeChat-Artikel, ein kurzes Video, der Charakterlevel in einem Spiel - all dies sind Daten. In unserer Anwendung sind Daten alle Informationen, die aufgezeichnet und verwaltet werden muessen, wie z. B. Benutzerprofile, Bestellverlaufe, Programmeinstellungen usw.
|
||||
|
||||
Im Allgemeinen haben Daten in einem Programm unterschiedliche Darstellungsformen. Die einfachste Form ist die Variable. Wir koennen verschiedene Variablen verwenden, um einfache Zahlen aufzuzeichnen:
|
||||
|
||||
```python
|
||||
# Python variable definition examples
|
||||
|
||||
# Integer variable: stores age information
|
||||
age = 30
|
||||
|
||||
# Boolean variable: stores status (whether active)
|
||||
is_active = True # True means active, False means inactive
|
||||
|
||||
# List variable: stores a set of score data
|
||||
scores = [85, 92, 78, 90] # Contains 4 integer elements representing different scores
|
||||
|
||||
# Dictionary variable: stores multiple related information of a user
|
||||
user_info = {
|
||||
"age": 30, # Key "age" corresponds to the value of age
|
||||
"height": 1.80, # Key "height" corresponds to the value of height (unit: meter)
|
||||
"login_count": 156 # Key "login_count" corresponds to the value of login times
|
||||
}
|
||||
```
|
||||
|
||||
Fuer komplexe Daten wie persoenliche Profile oder Bestellverlaufe koennen wir diese in ausfuehrlicheren Tabellen darstellen:
|
||||
|
||||
| user_id | name | email |
|
||||
| ------- | ----- | ----------------- |
|
||||
| 1001 | Alice | alice@example.com |
|
||||
| 1002 | Bob | bob@example.com |
|
||||
|
||||
| order_id | user_id | amount | status |
|
||||
| -------- | ------- | ------ | --------- |
|
||||
| 901 | 1001 | 29.99 | completed |
|
||||
| 902 | 1002 | 15.50 | pending |
|
||||
|
||||
Fuer Daten mit komplexer Struktur, hierarchischen Beziehungen oder variablen Feldern koennen wir das JSON-Format zur Beschreibung verwenden. Es ist das universelle Zwischenformat des Internets, das von fast allen Programmen gelesen und geparst werden kann, was den Datenaustausch zwischen Systemen sehr bequem macht.
|
||||
|
||||
```json
|
||||
{
|
||||
"order_id": 901,
|
||||
"user_id": 1001,
|
||||
"amount": 29.99,
|
||||
"status": "completed",
|
||||
"items": [
|
||||
{ "sku": "BG-001", "name": "Rindfleisch-Burger", "quantity": 1, "price": 18.00 },
|
||||
{ "sku": "SD-003", "name": "Pommes frites", "quantity": 1, "price": 6.99 },
|
||||
{ "sku": "DK-002", "name": "Cola", "quantity": 1, "price": 5.00 }
|
||||
],
|
||||
"shipping_address": {
|
||||
"street": "Technologiepark-Strasse 123",
|
||||
"city": "Shenzhen",
|
||||
"zip_code": "518057"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Darueber hinaus koennen Daten auch als Vektoren (Vectors) codiert werden. Vektordaten sind in der Regel numerische Darstellungen, die durch KI-Modelle (wie Embedding-Modelle) aus unstrukturierten Daten wie Text, Bildern oder Audio generiert werden.
|
||||
|
||||
`[0.123, -0.456, 0.789, ..., -0.234]` (ein Array aus Hunderten oder Tausenden von Gleitkommazahlen)
|
||||
|
||||
Insgesamt gibt es in der realen Welt viele verschiedene Datenformen und Verwendungszwecke, die eine detaillierte Analyse erfordern. Jede Datenart benoetigt moeglicherweise eine spezielle Datenbank zur Speicherung.
|
||||
|
||||
|
||||
|
||||
## 1.2 Warum wir Datenbanken brauchen
|
||||
|
||||
Wir haben bereits gelernt, dass Daten in der realen Welt oft komplex strukturiert sind. **Um diese Daten effizient zu speichern und zu nutzen, benoetigen wir ein spezielles Programm oder einen Container zu ihrer Verwaltung** - dies war der urspruengliche Grund fuer die Entstehung von Datenbanken (Databases). Eine Datenbank ist im Kern ein spezielles Programm, dessen Hauptaufgabe darin besteht, Daten zu standardisieren, sicher zu speichern, systematisch zu verwalten und effiziente Abfragen zu ermoeglichen.
|
||||
|
||||
Stell dir vor, was ohne Datenbanken passieren wuerde: Wenn Benutzer den Browser schliessen oder die App verlassen, gehen alle temporaer geladenen Informationen verloren. Wir koennen weder den Nutzungsstatus (wie Anmeldedaten, personalisierte Einstellungen) dauerhaft speichern noch Schluesseldaten zwischen verschiedenen Benutzern teilen (wie Produktbestaende, Bestellaufzeichnungen). Wir brauchen ein System, das alle unsere Daten speichert!
|
||||
|
||||
Flexibler ist die Bereitstellung der Datenbank: Sie kann auf einem lokalen Server fuer lokale Datenverwaltung bereitgestellt werden oder in der Cloud. Cloud-Datenbanken unterstuetzen elastische Skalierung (Scale) und koennen mit wachsenden Datenmengen und Zugriffszahlen erweitert werden, um massive Daten und hohe Parallelitaet zu bewaeltigen. Selbst bei stark steigenden Benutzerzahlen bleibt eine gute Nutzungserfahrung gewaehrleistet.
|
||||
|
||||
Zusammenfassend loesen Datenbanken durch effiziente dauerhafte Speicherung, feinkoernige Verwaltung und schnelle Abfragefaehigkeiten die folgenden Kernprobleme:
|
||||
|
||||
- **Dauerhafte Datenspeicherung**: Ohne Datenbank wuerden Daten nur im Arbeitsspeicher der Anwendung existieren und beim Schliessen der Anwendung verloren gehen. Eine Datenbank loest dieses Problem, indem sie Daten dauerhaft auf Festplatten und anderen Speichermedien ablegt und so die langfristige Aufbewahrung sicherstellt.
|
||||
- **Komfortable Datenabfrage und -analyse**: Datenbanken bieten leistungsstarke Abfragesprachen (wie SQL), mit denen Benutzer umfangreiche Daten einfach, effizient und komplex abfragen, filtern und analysieren koennen, um informiertere Geschaeftsentscheidungen zu treffen.
|
||||
- **Hochleistung und gleichzeitigen Zugriff**: Durch Indizierung, Abfrage-Caching, Verbindungspools und verteilte Architekturen koennen Datenbanken Abfragen in Millisekunden beantworten und tausende gleichzeitige Benutzerzugriffe unterstuetzen.
|
||||
- **Datenintegritaet und -konsistenz**: Datenbanken stellen durch Mechanismen wie Einschraenkungen (Constraints) und Trigger sicher, dass Daten genau und konsistent sind.
|
||||
- **Datensicherheit**: Datenbanken bieten starke Sicherheitsmechanismen einschliesslich Benutzerauthentifizierung, Zugriffskontrolle und Datenverschluesselung.
|
||||
|
||||
## 1.3 Relationale und nicht-relationale Datenbanken
|
||||
|
||||
Wir haben bereits den Kernwert, die Bereitstellungsoptionen und die elastischen Vorteile von Datenbanken kennengelernt. Bei der tatsaechlichen Auswahl stehen wir zunaechst vor zwei Hauptkategorien: relationale und nicht-relationale Datenbanken (NoSQL).
|
||||
|
||||
Relationale Datenbanken sind wie streng strukturierte Excel-Tabellen: Alle Daten muessen im Voraus ein Format definiert haben (Schema). Sie werden durch Verknuepfungsfelder (wie Ausweisnummern) miteinander verbunden. Ihr Vorteil ist praezise und zuverlaessige Datenverarbeitung, besonders geeignet fuer Bankueberweisungen, Bestandsverwaltung und andere fehlerkritische Szenarien. Der Nachteil ist, dass Strukturaenderungen aufwaendig sind und die Leistung bei riesigen Datenmengen begrenzt sein kann.
|
||||
|
||||
Nicht-relationale Datenbanken sind wie flexible Ordner, die Dokumente, Bilder oder Schluessel-Wert-Paare in unterschiedlichen Formaten speichern koennen, ohne die Struktur jedes Datensatzes vorab festzulegen. Sie eignen sich besser fuer sich schnell aendernde Anforderungen und extrem grosse Datenmengen.
|
||||
|
||||
| Datenbanktyp | Name | Preis | Anwendungsbereich |
|
||||
| ------------------------ | ----------------------- | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Relationale Datenbank | RDS MySQL | Niedrig | Lern- und kleine Website-Projekte; mittlere Datenbank-Szenarien; Cluster fuer hohe Zugriffsauslastung |
|
||||
| | RDS SQL Server | Hoch | Test- und kleine kommerzielle Websites; kommerzielle Websites auf Unternehmensebene; Cluster fuer unterbrechungsfreien Betrieb |
|
||||
| | RDS PostgreSQL | Niedrigste | Lern- und kleine Website-Projekte; mittlere Datenbank-Szenarien; hochperformante Cluster |
|
||||
| NoSQL-Datenbank | Redis | Mittel | Persistenz-Datenbank fuer hohe Verfuegbarkeit; Cache-Beschleunigungsschicht |
|
||||
| | MongoDB | Mittel | Einzelknoten fuer Entwicklung/Tests; Replikat-Sets fuer hoehere Leseleistung; Sharded Cluster fuer Echtzeit-Online-Geschaeft |
|
||||
|
||||
### Beispiel: Relationale Datenbank (SQL)
|
||||
|
||||
In einer SQL-Datenbank speichern wir verschiedene Datentypen in separaten Tabellen, die durch "Fremdschluessel" (Foreign Keys) miteinander verknuepft sind.
|
||||
|
||||
- `users` Tabelle:
|
||||
|
||||
| user_id ( Primaerschluessel) | username | email |
|
||||
| ---------------------------- | -------- | ----------------- |
|
||||
| 101 | Alice | alice@example.com |
|
||||
| 102 | Bob | bob@example.com |
|
||||
|
||||
- `posts` Tabelle:
|
||||
|
||||
| post_id ( Primaerschluessel) | title | content | author_id ( Fremdschluessel) |
|
||||
| ---------------------------- | ------------ | ------------------------------------------ | ---------------------------- |
|
||||
| 1 | SQL kennenlernen | Ein Artikel ueber SQL-Datenbanken... | 101 |
|
||||
| 2 | NoSQL-Einfuehrung | NoSQL bietet flexible Datenmodelle... | 102 |
|
||||
|
||||
- `comments` Tabelle:
|
||||
|
||||
| comment_id ( Primaerschluessel) | body | commenter_id ( Fremdschluessel) | post_id ( Fremdschluessel) |
|
||||
| ------------------------------- | ---------------------- | ------------------------------- | -------------------------- |
|
||||
| 1001 | Sehr gut geschrieben! | 102 | 1 |
|
||||
| 1002 | Gelernt. | 101 | 2 |
|
||||
|
||||
- `tags` Tabelle:
|
||||
|
||||
| tag_id ( Primaerschluessel) | tag_name |
|
||||
| --------------------------- | ---------- |
|
||||
| 51 | Datenbank |
|
||||
| 52 | Technologie |
|
||||
| 53 | Einfuehrung |
|
||||
|
||||
- `post_tags` Tabelle (fuer die Viele-zu-Viele-Beziehung):
|
||||
|
||||
| post_id ( Fremdschluessel) | tag_id ( Fremdschluessel) |
|
||||
| -------------------------- | ------------------------- |
|
||||
| 1 | 51 |
|
||||
| 1 | 52 |
|
||||
| 2 | 51 |
|
||||
| 2 | 52 |
|
||||
| 2 | 53 |
|
||||
|
||||
Um "alle Informationen zu Alices Artikel (post_id=1)" abzufragen, ist eine JOIN-Abfrage ueber mehrere Tabellen erforderlich:
|
||||
|
||||
```sql
|
||||
SELECT
|
||||
p.title,
|
||||
p.content,
|
||||
u.username AS author,
|
||||
c.body AS comment,
|
||||
t.tag_name AS tag
|
||||
FROM
|
||||
posts p
|
||||
JOIN
|
||||
users u ON p.author_id = u.user_id
|
||||
LEFT JOIN
|
||||
comments c ON p.post_id = c.post_id
|
||||
LEFT JOIN
|
||||
post_tags pt ON p.post_id = pt.post_id
|
||||
LEFT JOIN
|
||||
tags t ON pt.tag_id = t.tag_id
|
||||
WHERE
|
||||
p.post_id = 1;
|
||||
```
|
||||
|
||||
### Beispiel: Nicht-relationale Datenbank (NoSQL)
|
||||
|
||||
NoSQL-Datenbanken (wie MongoDB) buendeln alle relevanten Daten in einem einzigen Dokument:
|
||||
|
||||
```json
|
||||
{
|
||||
"_id": 1,
|
||||
"title": "SQL kennenlernen",
|
||||
"content": "Ein Artikel ueber SQL-Datenbanken...",
|
||||
"author": {
|
||||
"user_id": 101,
|
||||
"username": "Alice",
|
||||
"email": "alice@example.com"
|
||||
},
|
||||
"tags": [
|
||||
"Datenbank",
|
||||
"Technologie"
|
||||
],
|
||||
"comments": [
|
||||
{
|
||||
"comment_id": 1001,
|
||||
"body": "Sehr gut geschrieben!",
|
||||
"commenter": {
|
||||
"user_id": 102,
|
||||
"username": "Bob"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Der Vorteil: Alle Daten koennen mit einer einzigen Abfrage abgerufen werden, ohne JOINs. Der Nachteil: Datenredundanz kann zu Konsistenzproblemen fuehren.
|
||||
|
||||
# 2. Supabase
|
||||
|
||||
Nachdem wir verschiedene Datenbanktypen vorgestellt haben, muessen wir ein groesseres Bild betrachten: **Backend-Services**. Eine vollstaendige Anwendung besteht in der Regel aus "Frontend + Backend". Das Frontend ist fuer die Seitenanzeige und Benutzerinteraktion zustaendig, waehrend das Backend Datenverwaltung, Benutzeranmeldung, Geschaeftslogik und mehr uebernimmt.
|
||||
|
||||
Um diese wiederkehrenden Aufgaben zu vereinfachen, entstand **BaaS (Backend as a Service)**: Datenbank, Benutzerauthentifizierung, Dateispeicher, Echtzeitfaehigkeiten und weitere gängige Backend-Funktionen werden als Cloud-Plattform gebuendelt, die Entwickler ueber SDK/API direkt nutzen koennen, ohne Infrastruktur von Grund auf neu aufzubauen.
|
||||
|
||||
[Supabase](https://supabase.com/) kann als repraesentative Plattform der neuen BaaS-Generation betrachtet werden: Sie nutzt PostgreSQL als Kern-Datenbank und integriert Auth, Storage, Realtime, Edge Functions, Vector und weitere Backend-Faehigkeiten zu einer "Postgres-zentrierten All-in-One-Backend-Plattform".
|
||||
|
||||
## 2.1 Schritt-fuer-Schritt-Anleitung
|
||||
|
||||
Nachdem wir die Positionierung von Supabase verstanden haben, werden wir nun die Kernfunktionen der Supabase-Konsole Schritt fuer Schritt erklaeren.
|
||||
|
||||
|
||||
|
||||
Besuche die Supabase-Website, melde dich an und klicke auf der Konsole-Startseite auf "New project".
|
||||
|
||||
|
||||
|
||||
Nach erfolgreicher Erstellung zeigt die linke Seitenleiste alle Kernfunktionsmodule an.
|
||||
|
||||
|
||||
|
||||
### Tabellen-Editor (Table Editor)
|
||||
|
||||
Der Tabellen-Editor ist der visuelle Datentabellen-Editor von Supabase. Er ermoeglicht es dir, Daten in der Datenbank direkt wie in Excel anzuzeigen und zu aendern, ohne SQL-Statements schreiben zu muessen.
|
||||
|
||||
|
||||
|
||||
Bemerkenswert ist das Schema-Konzept. Schema kann als "Ressourcen-Container" innerhalb der Datenbank verstanden werden. Klicke auf das Dropdown-Menue "Schema" oben im Editor, um zwischen verschiedenen Containern zu wechseln. Im Alltag sind zwei Schemas besonders relevant:
|
||||
|
||||
- `public`: Der Standard-Container fuer oeffentliche Ressourcen. Alle von Entwicklern erstellten Geschaeftstabellen werden hier gespeichert.
|
||||
- `auth`: Der exklusive Container fuer die Benutzerauthentifizierung.
|
||||
|
||||
|
||||
|
||||
### SQL-Editor
|
||||
|
||||
Der SQL-Editor ist der SQL-Ausfuehrungsbereich von Supabase. Du kannst grosse Sprachmodelle SQL-Statements generieren lassen, diese rechts eingeben und auf "RUN" klicken.
|
||||
|
||||
|
||||
|
||||
### Datenbankverwaltung (Database)
|
||||
|
||||
Database ist das Datenbankverwaltungszentrum von Supabase. Es ermoeglicht die visuelle Verwaltung aller Datentabellen und zeigt Beziehungen zwischen Tabellen an (Fremdschluessel-Beziehungen).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Authentifizierung (Authentication)
|
||||
|
||||
Authentication verwaltet Benutzerregistrierung, Anmeldung und Berechtigungen. Es bietet sofort einsatzbereite Funktionen fuer Registrierung, Anmeldung, Passwort-Zuruecksetzen, E-Mail-Verifizierung und unterstuetzt OAuth-Anmeldung von Drittanbietern (wie WeChat, GitHub, Google). Alle Benutzerdaten werden automatisch in der Tabelle `auth.users` gespeichert.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Speicher (Storage)
|
||||
|
||||
Storage ist das Speichersystem von Supabase, kompatibel mit dem S3-Konzept von Amazon Cloud. Es kann beliebige Dateitypen speichern (Bilder, Videos, Dokumente, Audio usw.) und bietet Zugriffsberechtigungsverwaltung und Download-Links.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Edge Functions
|
||||
|
||||
Wenn du kein Backend bereitstellen moechtest, aber Datenbank- und Funktionsoperationen nutzen willst, kannst du Edge Functions verwenden. Sie sind global verteilte serverseitige Funktionen von Supabase, die auf Deno und TypeScript basieren.
|
||||
|
||||
|
||||
|
||||
Ein Kernanwendungsfall von Edge Functions ist die Funktion als sichere Zwischenschicht zum Schutz vertraulicher Informationen und Authentifizierungsschluessel.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Kernkonfiguration (mit deinen tatsaechlichen Daten ersetzen)
|
||||
const projectId = "Deine Supabase-Projekt-ID";
|
||||
const functionName = "Name der Ziel-Edge-Function";
|
||||
const supabaseKey = "Supabase anon_key";
|
||||
|
||||
// Funktion aufrufen
|
||||
async function callEdgeFunction() {
|
||||
const url = `https://${projectId}.supabase.co/functions/v1/${functionName}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": `Bearer ${supabaseKey}`
|
||||
},
|
||||
body: JSON.stringify({ order_id: "123", action: "refund" })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
console.log("Aufruf erfolgreich:", result);
|
||||
} catch (error) {
|
||||
console.error("Aufruf fehlgeschlagen:", error.message);
|
||||
}
|
||||
}
|
||||
|
||||
callEdgeFunction();
|
||||
```
|
||||
|
||||
### Echtzeit-Datensynchronisation (Realtime)
|
||||
|
||||
Realtime ist die Echtzeit-Datensynchronisations-Engine von Supabase. Sie ermoeglicht deiner Anwendung, sofortige Benachrichtigungen ueber Datenbankaenderungen zu empfangen, ohne wiederholt APIs abfragen zu muessen.
|
||||
|
||||
### Projekteinstellungen (Project Settings)
|
||||
|
||||
Project Settings ist der Bereich fuer erweiterte Konfiguration deines Supabase-Projekts.
|
||||
|
||||
|
||||
|
||||
Im Einstiegsbereich fokussieren wir uns auf zwei Kernbereiche: Data API (fuer die Supabase URL) und API Keys (fuer anon public und service_role Schluessel).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2.1 Erstelle deine erste SQL-Datentabelle
|
||||
|
||||
Es gibt zwei gängige Methoden zum Erstellen von Datentabellen in Supabase:
|
||||
|
||||
1. (Empfohlen) Lass dir von einem grossen Sprachmodell SQL-Statements fuer Supabase generieren und fuehre sie im SQL-Editor aus.
|
||||
2. Ueber visuelle Operationen: Navigiere zu Database > Tables und klicke auf "New table".
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Fuer relationale Datenbanken ist die Verknuepfung zwischen Tabellen wichtig. Du kannst Fremdschluessel (Foreign Keys) unten hinzufuegen:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2.3 SQL-Editor und grundlegende Datenbankoperationen
|
||||
|
||||
Wir werden nun eine Reihe von SQL-Skripten schrittweise ausfuehren und die gängigen CRUD-Operationen (Create, Read, Update, Delete) kennenlernen.
|
||||
|
||||
### 2.3.1 `CREATE` - Tabellenstruktur erstellen
|
||||
|
||||
```sql
|
||||
CREATE TABLE IF NOT EXISTS orders (
|
||||
id serial PRIMARY KEY,
|
||||
user_id int NOT NULL,
|
||||
status text NOT NULL,
|
||||
amount numeric(10, 2) NOT NULL,
|
||||
details jsonb,
|
||||
placed_at timestamptz DEFAULT now(),
|
||||
is_paid boolean DEFAULT false
|
||||
);
|
||||
```
|
||||
|
||||
Nach erfolgreicher Ausfuehrung siehst du die erstellte Tabelle im Tabellen-Editor:
|
||||
|
||||
|
||||
|
||||
### 2.3.2 `INSERT` - Anfangsdaten einfuegen
|
||||
|
||||
```sql
|
||||
INSERT INTO orders (user_id, status, amount, details, placed_at, is_paid) VALUES
|
||||
(2001, 'pending', 23.50, '{"items":[{"sku":"BGR001","name":"Beef Burger","qty":1,"price":12.00}]}', now() - interval '2 days', false),
|
||||
(2002, 'paid', 50.00, '{"items":[{"sku":"BGR002","name":"Chicken Burger","qty":2,"price":10.00}]}', now() - interval '1 day', true);
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 2.3.3 `SELECT` - Daten lesen und abfragen
|
||||
|
||||
```sql
|
||||
-- Alle Felder aller Bestellungen abfragen
|
||||
SELECT * FROM orders;
|
||||
|
||||
-- Nur ausstehende Bestellungen
|
||||
SELECT id, user_id, amount FROM orders WHERE status = 'pending';
|
||||
|
||||
-- Nur bezahlte Bestellungen
|
||||
SELECT id, status, is_paid, amount FROM orders WHERE is_paid = true;
|
||||
|
||||
-- Artikelliste aus JSON extrahieren
|
||||
SELECT id, details -> 'items' AS item_list FROM orders;
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 2.3.4 `INSERT` - Einzelnen Datensatz einfuegen
|
||||
|
||||
```sql
|
||||
INSERT INTO orders (user_id, status, amount, details, is_paid)
|
||||
VALUES (
|
||||
2012, 'paid', 9.99,
|
||||
'{"items":[{"sku":"BGR002","name":"AIID Burger","qty":100,"price":1000}]}',
|
||||
true
|
||||
);
|
||||
```
|
||||
|
||||
### 2.3.5 `UPDATE` - Vorhandene Daten aendern
|
||||
|
||||
```sql
|
||||
UPDATE orders SET status = 'paid', is_paid = true WHERE id = 1;
|
||||
```
|
||||
|
||||
### 2.3.6 `DELETE` - Daten loeschen
|
||||
|
||||
```sql
|
||||
DELETE FROM orders WHERE placed_at < now() - interval '2 days';
|
||||
```
|
||||
|
||||
## 2.4 Zeilensicherheit (Row Level Security - RLS)
|
||||
|
||||
Nachdem wir die grundlegenden Datenbankoperationen gelernt haben, muessen wir ein Kernkonzept fuer die Datensicherheit vertiefen: RLS (Row Level Security).
|
||||
|
||||
RLS wurde entwickelt, um Datensicherheits- und Isolationsanforderungen zu loesen. Es ermoeglicht Entwicklern, feinkoernige Sicherheitsrichtlinien fuer Datenbanktabellen zu definieren und praezise zu steuern, welche Benutzer auf welche Zeilen einer Tabelle zugreifen koennen.
|
||||
|
||||
In Supabase ist RLS eng mit dem Benutzerauthentifizierungssystem verknuepft. Supabase stellt eine spezielle Funktion `auth.uid()` zur Verfuegung, die direkt die eindeutige ID des aktuell angemeldeten Benutzers zurueckgibt.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 3. Erste SQL-Anwendung
|
||||
|
||||
Nachdem wir die grundlegenden Datenbankoperationen und die RLS-Kernlogik gemeistert haben, betreten wir nun den praktischen Teil dieses Tutorials. Wir werden das Szenario "Bestellverwaltung fuer ein Burger-Restaurant" verwenden, um die haeufigsten Supabase-Operationen Schritt fuer Schritt zu demonstrieren.
|
||||
|
||||
## 3.1 Supabase-Beispielprojekt klonen und starten
|
||||
|
||||
Du kannst Trae oder Claude Code verwenden, um folgendes Repository zu klonen: https://github.com/THU-SIGS-AIID/Project5-Supabase-Demos
|
||||
|
||||
|
||||
|
||||
## 3.2 Projekt 1 - Burger-Restaurant Menue CRUD
|
||||
|
||||
Wir nehmen `project-burger-shop-menu-crud-1` als Beispiel und lernen, wie man eine Datenbank mit SQL-Skripten initialisiert und das lokale Projekt mit Supabase verbindet.
|
||||
|
||||
### Datenbank mit Skript erstellen
|
||||
|
||||
Im Projektverzeichnis befindet sich ein Ordner `scripts` mit einer Datei `init.sql`, die automatisch alle datenbankbezogenen Ressourcen erstellt.
|
||||
|
||||
### Verbindung zur Datenbank einrichten
|
||||
|
||||
Es gibt zwei Methoden:
|
||||
|
||||
1. Ueber Umgebungsvariablen in einer `.env`-Datei:
|
||||
|
||||
```
|
||||
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||
```
|
||||
|
||||
2. Direkt auf der Projektseite ueber den Einstellungs-Button.
|
||||
|
||||
```JavaScript
|
||||
import { createClient, type SupabaseClient } from '@supabase/supabase-js';
|
||||
|
||||
export function maybeCreateBrowserClient(): SupabaseClient | null {
|
||||
const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
||||
const anon = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
|
||||
if (!url || !anon) return null;
|
||||
return createClient(url, anon);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Hausaufgabe
|
||||
|
||||
1. Versuche, Elemente hinzuzufuegen und zu loeschen, und beobachte die Auswirkungen auf die Datentabelle im Tabellen-Editor.
|
||||
|
||||
## 3.4 Projekt 2 - Burger-Restaurant mit Benutzerauthentifizierung
|
||||
|
||||
Projekt 2 fuegt die Kernfaehigkeiten Benutzerauthentifizierung (Auth) und RLS-Berechtigungsverwaltung hinzu.
|
||||
|
||||
```
|
||||
const { error: err } = await supabaseClient.auth.signUp({
|
||||
email,
|
||||
password,
|
||||
options: {
|
||||
data: {
|
||||
full_name: fullName || null,
|
||||
birthday: birthday || null,
|
||||
avatar_url: avatarUrl || null
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
Nach erfolgreicher Registrierung und Anmeldung gelangst du zur Shop-Oberflaeche:
|
||||
|
||||
|
||||
|
||||
Um den Admin-Bereich zu sehen, musst du die Benutzerberechtigungen in der Datentabelle auf `admin` aendern:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Hausaufgabe
|
||||
|
||||
1. Hole das Neukunden-Geschenk ab und schliesse einen Kauf ab.
|
||||
2. Finde die Position der Benutzerberechtigungs-Datentabelle und aendere die Berechtigung auf `admin`.
|
||||
3. Lokalisiere die Geldboersen-Tabelle und erhoeehe den Restbetrag.
|
||||
|
||||
# 4. Baue deine erste Supabase-Anwendung
|
||||
|
||||
Nach dem systematischen Lernen hast du die Kernfaehigkeiten von Supabase gemeistert. Jetzt ist es an der Zeit, deine erste Anwendung mit Datenbank und Benutzeranmeldung selbst zu erstellen!
|
||||
|
||||
## 4.1 Standardisierter Prozess zur Anbindung einer Supabase-Datenbank
|
||||
|
||||
1. **Anforderungsanalyse**: Beschreibe der KI klar die Kernfunktionen und neuen Datenbankanforderungen deiner App.
|
||||
2. **SQL-Skript generieren**: Lass die KI ein `init.sql`-Skript generieren und fuehre es im SQL-Editor aus.
|
||||
3. **Code restrukturieren**: Lass die KI den Projektcode so umschreiben, dass er mit der Supabase-Datenbank kommunizieren kann.
|
||||
4. **Konfiguration und Tests**: Konfiguriere die Supabase-URL und Schluessel, teste alle Datenbankinteraktionen.
|
||||
|
||||
## 4.2 Fallstudie: Ein Online-Schlangenspiel
|
||||
|
||||
Wir praktizieren den Standardprozess an einem konkreten Beispiel: Einem Schlangenspiel, dem wir einen Online-Bestenliste und Benutzeranmeldung hinzufuegen.
|
||||
|
||||
|
||||
|
||||
### 4.2.1 Projekt analysieren und Datenanforderungen identifizieren
|
||||
|
||||
Prompts fuer die KI:
|
||||
|
||||
> "Ich habe ein Schlangenspiel im Verzeichnis {Pfad}. Ich moechte eine Online-Bestenliste mit Benutzeranmeldung hinzufuegen. Welche Datentabellen und Felder brauche ich?"
|
||||
|
||||
|
||||
|
||||
### 4.2.2 `init.sql`-Skript generieren
|
||||
|
||||
Lass die KI ein `scripts/init.sql`-Skript generieren.
|
||||
|
||||
|
||||
|
||||
### 4.2.3 Projektcode restrukturieren
|
||||
|
||||
Lass die KI den Spielcode mit Supabase-Integration umschreiben.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Hausaufgabe
|
||||
|
||||
1. Integriere das Benutzermanagement-System in die Schlangenspiel-Demoversion.
|
||||
2. Integriere das Benutzermanagement-System in deine eigene Anwendung.
|
||||
|
||||
# 5. Supabase-Meister werden
|
||||
|
||||
Die oben genannten Inhalte decken die Grundoperationen von Supabase ab. Im weiteren Verlauf werden wir die erweiterten Prinzipien und Funktionen von Supabase kennenlernen.
|
||||
|
||||
## 5.1 Warum wir Supabase gewaehlt haben
|
||||
|
||||
Bei der Technologieauswahl stehen Startups vor einem Dilemma: Sie wollen volle Kontrolle ueber das Backend-System, muessen aber gleichzeitig schnell Produkte auf den Markt bringen. Supabase buendelt diese Backend-Faehigkeiten als sofort einsatzbereite Dienste (PostgreSQL-Datenbank, Echtzeit-Abos, Authentifizierung, Objektspeicher, Edge Functions, automatisch generierte APIs usw.).
|
||||
|
||||
Im Vergleich zu Konkurrenzprodukten wie dem geschlossenen Firebase bietet Supabase eine vollstaendig quelloffene Strategie, die Private-Deployment unterstuetzt und das Risiko von Vendor-Lock-in vermeidet.
|
||||
|
||||
## 5.2 Google- und GitHub-Login-Unterstützung
|
||||
|
||||
Dieses Projekt `project-burger-shop-auth-advanced-supabase-6` demonstriert vollstaendig die Implementierung dieser erweiterten Funktionen.
|
||||
|
||||
|
||||
|
||||
### 5.2.1 OAuth-Ablauf: Wie funktioniert Drittanbieter-Login?
|
||||
|
||||
Der Kern des Drittanbieter-Logins ist das OAuth 2.0-Protokoll. Es ermoeglicht Benutzern, unsere App zu autorisieren, auf ihre oeffentlichen Informationen (wie E-Mail, Avatar) bei einem Drittanbieter (wie Google) zuzugreifen, ohne das Passwort des Drittanbieters preiszugeben.
|
||||
|
||||
|
||||
|
||||
### 5.2.2 Google Cloud fuer Client ID und Secret konfigurieren
|
||||
|
||||
1. Gehe zu [Google Cloud Console](https://console.cloud.google.com/).
|
||||
2. Konfiguriere den OAuth-Zustimmungsbildschirm.
|
||||
3. Erstelle OAuth 2.0-Client-Anmeldeinformationen.
|
||||
4. Trage die Supabase-Callback-URL ein: `https://<Deine-Projekt-ID>.supabase.co/auth/v1/callback`.
|
||||
|
||||
|
||||
|
||||
### 5.2.3 GitHub fuer Client ID und Secret konfigurieren
|
||||
|
||||
1. Gehe zu GitHub Developer Settings.
|
||||
2. Registriere eine neue OAuth-App.
|
||||
3. Trage die Supabase-Callback-URL ein.
|
||||
4. Generiere ein Client Secret.
|
||||
|
||||
|
||||
|
||||
### 5.2.4 Provider in Supabase konfigurieren
|
||||
|
||||
1. Gehe zu Supabase Dashboard > Authentication > Providers.
|
||||
2. Aktiviere Google und trage Client ID und Client Secret ein.
|
||||
3. Aktiviere GitHub und trage Client ID und Client Secret ein.
|
||||
|
||||
|
||||
|
||||
### 5.2.6 Passwort-Zuruecksetzen implementieren
|
||||
|
||||
1. Benutzer gibt E-Mail ein, Frontend ruft `supabase.auth.resetPasswordForEmail()` auf.
|
||||
2. Supabase sendet E-Mail mit einzigartigem Reset-Link.
|
||||
3. Benutzer klickt auf Link und wird zurueckgeleitet.
|
||||
4. Benutzer gibt neues Passwort ein, Frontend ruft `supabase.auth.updateUser()` auf.
|
||||
|
||||
|
||||
|
||||
## 5.3 Echtzeit-Funktionen
|
||||
|
||||
Dieses Projekt `project-burger-shop-realtime-orders-3` demonstriert die drei Kernfaehigkeiten von Supabase Realtime: Datenbankaenderungen ueberwachen (Postgres Changes), Broadcast und Presence.
|
||||
|
||||
|
||||
|
||||
### 5.3.1 Datenbank-Echtzeitaenderungen (Postgres Changes)
|
||||
|
||||
Die haeufigste Realtime-Funktion ist das Ueberwachen von Datenbankaenderungen. Kunden koennen spezifische Tabellen, Zeilen oder Spalten auf INSERT-, UPDATE- oder DELETE-Ereignisse abonnieren.
|
||||
|
||||
```sql
|
||||
-- Echtzeit-Replikation aktivieren
|
||||
ALTER TABLE public.chat_messages REPLICA IDENTITY FULL;
|
||||
DO $$
|
||||
BEGIN
|
||||
IF NOT EXISTS (
|
||||
SELECT 1 FROM pg_publication_tables
|
||||
WHERE pubname = 'supabase_realtime'
|
||||
AND schemaname = 'public'
|
||||
AND tablename = 'chat_messages'
|
||||
) THEN
|
||||
ALTER PUBLICATION supabase_realtime ADD TABLE public.chat_messages;
|
||||
END IF;
|
||||
END $$;
|
||||
```
|
||||
|
||||
```typescript
|
||||
const sub = supabase
|
||||
.channel('chat_messages_channel')
|
||||
.on('postgres_changes', {
|
||||
event: 'INSERT',
|
||||
schema: 'public',
|
||||
table: 'chat_messages'
|
||||
}, (payload: any) => {
|
||||
console.log('Neue Nachricht empfangen:', payload.new);
|
||||
})
|
||||
.subscribe((status: string) => {
|
||||
console.log('Chat-Abonnementstatus:', status);
|
||||
});
|
||||
```
|
||||
|
||||
### 5.3.2 Broadcast und Presence
|
||||
|
||||
- **Presence**: Verfolgt den Online-Status aller Clients in einem Kanal.
|
||||
- **Broadcast**: Sendet temporäre Nachrichten mit niedriger Latenz zwischen Clients.
|
||||
|
||||
## 5.4 Speicher (Storage)
|
||||
|
||||
Dieses Projekt `project-burger-shop-storage-uploads-4` demonstriert den Aufbau eines modernen Datei-Upload-Systems mit Supabase Storage.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 5.4.1 Speicher-Buckets (Storage Buckets)
|
||||
|
||||
Supabase Storage besteht aus Speicher-Buckets (Buckets). Jeder Bucket kann eigene Sicherheitsrichtlinien und Konfigurationen haben.
|
||||
|
||||
```
|
||||
CREATE POLICY "Allow authenticated uploads to avatars bucket"
|
||||
ON storage.objects FOR INSERT
|
||||
TO authenticated
|
||||
WITH CHECK (
|
||||
bucket_id = 'avatars' AND
|
||||
auth.uid() = (storage.foldername(name))[1]::uuid AND
|
||||
(storage.extension(name) IN ('png', 'jpg', 'jpeg'))
|
||||
);
|
||||
|
||||
CREATE POLICY "Allow public read access to avatars"
|
||||
ON storage.objects FOR SELECT
|
||||
USING ( bucket_id = 'avatars' );
|
||||
```
|
||||
|
||||
### 5.4.2 Zugaengliche Datei-URLs abrufen
|
||||
|
||||
#### Oeffentliche URL (Public URL) - Permanenter Link
|
||||
|
||||
```typescript
|
||||
const { data } = supabase.storage
|
||||
.from('avatars')
|
||||
.getPublicUrl('public/avatar1.png');
|
||||
const publicUrl = data.publicUrl;
|
||||
```
|
||||
|
||||
#### Signierte URL (Signed URL) - Temporaerer Link
|
||||
|
||||
```typescript
|
||||
const { data, error } = await supabase.storage
|
||||
.from('avatars')
|
||||
.createSignedUrl('private/user-invoice.pdf', 3600);
|
||||
const signedUrl = data?.signedUrl;
|
||||
```
|
||||
|
||||
## 5.5 Edge Functions
|
||||
|
||||
Dieses Projekt `project-burger-shop-edge-function-5` demonstriert den einfachsten Anwendungsprozess von Edge Functions anhand einer Echtzeit-Streaming-Chat-Funktion mit einem grossen Sprachmodell (LLM).
|
||||
|
||||
|
||||
|
||||
### 5.5.1 LLM-Chat-Fallanalyse
|
||||
|
||||
```typescript
|
||||
// scripts/llm-chat.ts
|
||||
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
|
||||
import { OpenAI } from "npm:openai";
|
||||
|
||||
const OPENAI_API_KEY = Deno.env.get("OPENAI_API_KEY");
|
||||
|
||||
Deno.serve(async (req) => {
|
||||
try {
|
||||
const openai = new OpenAI({ apiKey: OPENAI_API_KEY });
|
||||
const { prompt } = await req.json();
|
||||
|
||||
const stream = await openai.chat.completions.create({
|
||||
model: "gpt-3.5-turbo",
|
||||
messages: [{ role: "user", content: prompt }],
|
||||
stream: true,
|
||||
});
|
||||
|
||||
return new Response(stream.toReadableStream(), {
|
||||
headers: { "Content-Type": "text/event-stream" },
|
||||
});
|
||||
} catch (err) {
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 5.5.2 Funktion erstellen und bereitstellen
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5.6 Clerk-Login
|
||||
|
||||
Clerk ist ein professionelles Entwicklungstool fuer Identitaetsauthentifizierung und Benutzerverwaltung.
|
||||
|
||||
|
||||
|
||||
### 5.6.1 Clerk-App erstellen und Schluessel abrufen
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 5.6.2 Supabase und Clerk nativ integrieren
|
||||
|
||||
1. Aktiviere die offizielle Supabase-Integration in Clerk.
|
||||
2. Fuege Clerk als Provider in Supabase hinzu.
|
||||
|
||||
### 5.6.3 Benutzerdaten ueber Webhook mit Supabase synchronisieren
|
||||
|
||||
```sql
|
||||
CREATE TABLE public.users (
|
||||
id TEXT NOT NULL PRIMARY KEY,
|
||||
email TEXT,
|
||||
first_name TEXT,
|
||||
last_name TEXT,
|
||||
image_url TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;
|
||||
|
||||
CREATE POLICY "Authenticated users can view their own user record"
|
||||
ON public.users FOR SELECT
|
||||
TO authenticated
|
||||
USING ( (SELECT auth.jwt()->>'sub') = id );
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 5.6.4 Drittanbieter-Login in Clerk
|
||||
|
||||
Clerk unterscheidet zwischen Entwicklungs- und Produktionsumgebung fuer Social-Login.
|
||||
|
||||
# 6. Von Supabase zu weiteren Backend-Entwicklungskomponenten (Fortgeschritten)
|
||||
|
||||
Supabase bietet eine umfassende Plattform, aber jede einzelne Faehigkeit (Auth / Storage / Edge Functions / Realtime / Database) hat professionelle Alternativen auf dem Markt.
|
||||
|
||||
## Vergleichbare BaaS-Plattformen
|
||||
|
||||
| Plattag/Service | Typ | Kostenloseinheit/Preisgestaltung |
|
||||
| ------------------------------ | --------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
|
||||
| Firebase (Google) | Voll verwaltetes BaaS | Spark: kostenlose Leichtversion; Blaze: nutzungsabhaengig |
|
||||
| Supabase | Open-Source BaaS | Kostenlos: 500MB DB, 1GB Storage; Pro: nach Instanz |
|
||||
| Appwrite Cloud | Open-Source All-in-One BaaS | Kostenlos: Basis DB/Storage/FaaS |
|
||||
| Nhost | Postgres + GraphQL + Auth + Storage + Functions | Kostenlos: 1GB DB, 1GB Storage |
|
||||
| AWS Amplify | AWS All-in-One Backend | Kostenlos: Hosting + Cognito 10k MAU |
|
||||
|
||||
## Authentifizierung (Auth)
|
||||
|
||||
| Tool/Plattform | Kostenloseinheit |
|
||||
| ---------------------------- | --------------------------------------- |
|
||||
| Firebase Authentication | Spark: 50k MAU kostenlos |
|
||||
| Auth0 (Okta) | 25k MAU kostenlos |
|
||||
| AWS Cognito | 10k MAU/Monat kostenlos |
|
||||
| Logto | Community Edition kostenlos |
|
||||
| Keycloak | Vollstaendig kostenlos (selbst gehostet) |
|
||||
|
||||
## Dateispeicher (Storage)
|
||||
|
||||
| Plattform/Service | Kostenloseinheit |
|
||||
| ------------------------------------------------ | ------------------------------------------------------- |
|
||||
| Amazon S3 | 5GB Speicher im kostenlosen AWS-Kontingent |
|
||||
| Google Cloud Storage (Firebase Storage) | 1GB Speicher in Spark-Plan |
|
||||
| Tencent Cloud COS / Alibaba Cloud OSS | Nutzungsabhaengig |
|
||||
| MinIO | Open-Source kostenlos (selbst gehostet) |
|
||||
|
||||
## Edge Functions
|
||||
|
||||
| Plattform/Service | Kostenloseinheit |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------- |
|
||||
| Cloudflare Workers | 100k Anfragen/Tag kostenlos |
|
||||
| Vercel Edge Functions | 1M Funktionsaufrufe/Monat kostenlos |
|
||||
| Netlify Edge / Functions | 300 Credits/Monat kostenlos |
|
||||
| AWS Lambda@Edge / CloudFront Functions | 1M kostenlose Anfragen/Monat |
|
||||
|
||||
# Zusammenfassung
|
||||
|
||||
In der heutigen Lektion haben wir systematisch die Grundkonzepte von Datenbanken sowie die Kerndefinition und Bedienungsdetails von Supabase gelernt. Waehrend der weiteren Praxis kannst du jederzeit auf dieses Dokument zurueckgreifen.
|
||||
|
||||
Bitte denke immer an einen wichtigen Grundsatz: **Zuerst fertigstellen, dann perfektionieren!** Es ist nicht noetig, alles auf einmal perfekt zu machen. Durch kontinuierliche Iteration und Optimierung koennen wir uns schrittweise besseren Ergebnissen naehern.
|
||||
|
||||
# Hausaufgabe
|
||||
|
||||
1. Entwickle eine Anwendung mit Benutzermanagement-System und Datenbank. Idealerweise mit weiteren Supabase-Funktionen (Realtime / Cloud Storage / Edge Functions).
|
||||
@@ -0,0 +1,261 @@
|
||||
# Git und GitHub verwenden lernen
|
||||
|
||||
In den vorherigen Lektionen haben wir gelernt, wie man webbasierte Vibe-Coding-Tools zum Programmieren verwendet. Jede Unterhaltung erstellt eine neue Code-Version. Aber lassen Sie uns darueber nachdenken: Wenn wir zu einer frueheren Aenderung zurueckkehren moechten, gibt es eine bequeme Methode? Gibt es ein Tool, das unseren Code in verschiedenen Phasen aufzeichnen kann, sodass wir jederzeit zwischen verschiedenen Versionen wechseln und Aenderungen vornehmen koennen?
|
||||
|
||||
Um diesem Bedarf gerecht zu werden, wurde Versionskontrollsoftware entwickelt. In diesem Artikel stellen wir das bekannteste Versionskontrollprogramm vor -- Git -- sowie die beste Code-Hosting-Plattform -- GitHub. Wir werden lernen, wie man Git zur Codeverwaltung verwendet, wie man Code anderer von GitHub abruft, wie man eigenen Code hochlaedt und wie man mit anderen an grossen Projekten zusammenarbeitet.
|
||||
|
||||
Ob fuer die Versionsverfolgung persoenlicher Projekte, die Code-Synchronisation in der Teamzusammenarbeit oder den Beitrag zur Open-Source-Community -- Git und GitHub sind unverzichtbare Werkzeuge fuer moderne Entwickler. Durch ihre Beherrschung wirst du Code effizienter verwalten, bei Bedarf Pruefpunkte erstellen, frei zwischen verschiedenen Code-Phasen wechseln und alles von einzelnen Dateiaenderungen bis hin zur Entwicklung grosser Projekte problemlos bewaeltigen koennen -- wodurch jede Code-Iteration kontrollierbar und rueckverfolgbar wird.
|
||||
|
||||
> :bulb: **Vorkenntnisse**
|
||||
>
|
||||
> Bevor du Git lernst, wird empfohlen, die folgenden Konzepte zu kennen:
|
||||
> - [Was ist ein Terminal / eine Kommandozeile](/de-de/appendix/2-development-tools/command-line-shell) - Lernen, wie man die Kommandozeile zur Interaktion mit dem Computer verwendet
|
||||
> - [Was ist Git](/de-de/appendix/2-development-tools/git-version-control) - Die Kernkonzepte des Git-Versionskontrollsystems verstehen
|
||||
>
|
||||
> Dieser Artikel konzentriert sich auf den GitHub-Workflow und die praktische Anwendung. Die oben genannten Grundlagen findest du in den verlinkten Anhang-Artikeln.
|
||||
|
||||
# Git Schnellstart
|
||||
|
||||
Bevor du Git verwendest, stelle sicher, dass du die Inhalte zum Thema [Kommandozeile](/de-de/appendix/2-development-tools/command-line-shell) und [Git-Grundlagen](/de-de/appendix/2-development-tools/git-version-control) im Anhang gelesen hast. Dieser Artikel setzt diese Grundkenntnisse voraus und erklart direkt, wie man Git installiert, konfiguriert und GitHub fuer die Zusammenarbeit nutzt.
|
||||
|
||||
## Git installieren
|
||||
|
||||
Wir demonstrieren drei Methoden zur Installation von Git auf verschiedenen Betriebssystemen. Bitte folge den Anweisungen gemaess deiner Systemversion:
|
||||
|
||||
### Windows
|
||||
|
||||
1. Gehe zur [offiziellen Git-Download-Seite](https://git-scm.com/download/win) und lade das fuer dein System passende Installationsprogramm herunter: [Installationspaket](https://github.com/git-for-windows/git/releases/download/v2.51.0.windows.1/Git-2.51.0-64-bit.exe). Standardmaessig wird das x64-Installationsprogramm empfohlen.
|
||||
2. Doppelklicke auf das Installationsprogramm und folge dem Installations-Assistenten:
|
||||
|
||||
1. Es wird empfohlen, die Standardoptionen beizubehalten. Wenn du Anpassungen vornehmen moechtest, beachte Folgendes: (In den meisten Faellen kannst du einfach auf "Next" klicken)
|
||||
- Standard-Editor fuer Git auswaehlen: Waehle deinen bevorzugten Editor (z. B. VS Code). Du kannst die erste Option, Vim (einen Texteditor), als Standard waehlen oder "Visual Studio Code as Git's default editor" auswaehlen (erfordert vorab installiertes VS Code). Du kannst die Standardauswahl beibehalten und auf "Next" klicken, um fortzufahren.
|
||||
|
||||
- Auswaehlen, wie Git verwendet werden soll: Diese drei Optionen steuern die Verfuegbarkeit von Git im System. Es wird empfohlen, Option 2 ("from command line and 3rd-party software") zu waehlen -- sie fuegt die grundlegenden Git-Tools zum PATH hinzu und ermoeglicht es dir, Git in Git Bash, Eingabeaufforderung, PowerShell und IDEs zu verwenden, ohne das System zu ueberlasten.
|
||||
|
||||
|
||||
3. Nach der Installation rechtsklicke auf dem Desktop. Wenn du "Git Bash Here" im Menue siehst, war die Installation erfolgreich.
|
||||
|
||||
|
||||
|
||||
### MacOS
|
||||
|
||||
Fuer macOS kannst du zunaechst `git --version` im Terminal eingeben, um zu pruefen, ob Git bereits installiert ist. Wenn nicht, wird das System dich zur Installation auffordern -- folge einfach den Anweisungen.
|
||||
|
||||
1. Methode 1: Ueber Homebrew installieren
|
||||
Wenn du [Homebrew](https://brew.sh/) (den Mac-Paketmanager) installiert hast, oeffne das Terminal und gib ein:
|
||||
```bash
|
||||
brew install git
|
||||
```
|
||||
2. Methode 2: (Empfohlen) Ueber Xcode installieren: https://developer.apple.com/xcode/ -- Xcode enthaelt integriertes Git. Nach der Installation einfach den Anweisungen folgen.
|
||||
|
||||
### Linux
|
||||
|
||||
Die meisten Linux-Distributionen koennen Git ueber ihren Paketmanager installieren:
|
||||
|
||||
- Ubuntu/Debian:
|
||||
|
||||
```bash
|
||||
sudo apt update
|
||||
sudo apt install git
|
||||
```
|
||||
|
||||
- CentOS/RHEL:
|
||||
|
||||
```bash
|
||||
sudo yum install git
|
||||
```
|
||||
|
||||
- Installation ueberpruefen: Gib `git --version` im Terminal ein. Wenn eine Versionsnummer angezeigt wird, war die Installation erfolgreich.
|
||||
|
||||
## Git initialisieren
|
||||
|
||||
Nach der Installation von Git musst du zunaechst deine Benutzerinformationen konfigurieren -- dies ist ein grundlegender Schritt fuer die Verwendung von Git zur Versionskontrolle. Fuehre die folgenden Befehle im Terminal aus (ersetze den Inhalt in Klammern durch deine eigenen Informationen):
|
||||
|
||||
```bash
|
||||
# Globalen Benutzernamen setzen (wird in den Commit-Eintraegen angezeigt)
|
||||
git config --global user.name "Your Name"
|
||||
|
||||
# Globale E-Mail-Adresse setzen (verwende bevorzugt die auf GitHub/GitLab registrierte Adresse)
|
||||
git config --global user.email "your.email@example.com"
|
||||
```
|
||||
|
||||
Git bettet diese Informationen in jeden Commit-Eintrag als "Autoreninformation" ein. Beim Betrachten der Versionshistorie (z. B. mit `git log`) kannst du klar erkennen, wer welche Codezeile geaendert hat, was die Zurechenbarkeit und Kommunikation erleichtert. In kollaborativen Projekten ermoeglichen einheitliche Identitaetsinformationen den Teammitgliedern, schnell zu erkennen, wer welche Aenderungen vorgenommen hat, was die Zusammenarbeitseffizienz steigert (z. B. durch die Suche nach dem entsprechenden Entwickler ueber Commit-Eintraege).
|
||||
|
||||
Du kannst die aktuellen Git-Konfigurationsinformationen einsehen, indem du `git config --list` in der Kommandozeile eingibst, um die erfolgreiche Einrichtung zu bestaetigen.
|
||||
|
||||
# Was ist GitHub
|
||||
|
||||
GitHub ist eine Git-basierte Code-Hosting-Plattform. Sie bietet nicht nur Remote-Speicher fuer Git-Repositories, sondern enthaelt auch Kollaborationstools (wie Issues, Pull Requests, Projects), die es Entwicklern erleichtern, Code zu teilen und zusammenzuarbeiten. Kurz gesagt: Git ist ein lokales Versionskontroll-Tool, waehrend GitHub eine "Cloud-Festplatte fuer Code-Repositories + Kollaborations-Community" ist.
|
||||
|
||||
GitHub ist nicht nur die groesste Code-Hosting-Plattform der Welt, sondern auch die aktivste und einflussreichste Open-Source-Community weltweit. Die Kernidee von "Open Source" besagt, dass jeder den Quellcode der Software herunterladen und ausfuehren kann. Dieses Modell ermoeglicht es Menschen weltweit, den Code anderer zu pruefen, zu aendern oder darauf basierend neue Projekte zu erstellen. Du kannst beispielsweise auf GitHub verschiedene Lerntutorials sowie den vollstaendigen Quellcode von Frameworks zum Training von GPT-Modellen (wie PyTorch) finden. Taeglich arbeiten unzaehlige Menschen weltweit zusammen, um Code zu reviewen und zu verbessern.
|
||||
|
||||
|
||||
|
||||
Viele grosse Unternehmen veroeffentlichen ihre Programme oder Tutorials als Open Source auf GitHub, um Wettbewerbsvorteile in der Branche zu erlangen -- was man auch als eine Form der Werbung betrachten kann. In der GitHub-Community ist die Anzahl der "Sterne" (Stars), die ein Projekt erhaelt, das wichtigste Mass fuer seinen Wert; je mehr Stars ein Projekt oder eine Organisation hat, desto groesser ist seine Glaubwuerdigkeit und sein Einfluss.
|
||||
|
||||
|
||||
|
||||
In unserem Kurs werden auch Unterstuetzungsressourcen und Aufgaben in einem dedizierten GitHub-Repository hochgeladen. Durch den Prozess des Hochladens von Aufgaben wirst du dich schrittweise mit der Verwendung von GitHub vertraut machen und eine solide Grundlage fuer die Versionskontrolle bei der zukuenftigen Anwendungsentwicklung schaffen.
|
||||
|
||||
## GitHub-Konto registrieren
|
||||
|
||||
1. Besuche die [offizielle GitHub-Website](https://github.com/) und klicke oben rechts auf "Sign up".
|
||||
|
||||
2. Gib deine E-Mail-Adresse ein (verwende bevorzugt deine haeufig genutzte Adresse, da Verifizierungen und Benachrichtigungen dorthin gesendet werden), setze ein Passwort (muss Buchstaben, Zahlen und Sonderzeichen enthalten).
|
||||
3. Schliesse die menschliche Verifizierung ab, bestaetige deine E-Mail gemaess den Anweisungen, und dein Konto ist erstellt.
|
||||
|
||||
## Dein erstes Repository auf GitHub erstellen
|
||||
|
||||
Als Naechstes erstellen wir den ersten Speicherordner, auch Repository oder "Repo" genannt.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1. Repository name: Der Name des Repositories, der anderen angezeigt wird.
|
||||
2. Description: Eine detaillierte Beschreibung des Repositories.
|
||||
3. Choose visibility: Fuer persoenliche Repositories gilt: Wenn auf "private" gesetzt, koennen nur du und speziell eingeladene Personen es sehen. Wenn auf "public" gesetzt, koennen alle es sehen.
|
||||
Fuer Repositories innerhalb einer Organisation gilt: Bei "Private" koennen nur Organisationsmitglieder es sehen.
|
||||
Bei "Public" koennen auch Personen ausserhalb der Organisation es sehen.
|
||||
4. README: Es ist ueblich, dass jedes Repository eine README-Datei haben sollte. Du kannst sie als vollstaendige Vorstellung des Repositories betrachten, einschliesslich Verwendungsanleitung, Dateiliste und Bedienungshinweisen.
|
||||
5. Add .gitignore and license:
|
||||
1. Die .gitignore-Datei teilt Git mit, bestimmte Ordner oder Dateien beim Upload zu GitHub zu ignorieren, sodass sie nicht verfolgt oder zur Staging-Area hinzugefuegt werden. Dies ist nuetzlich fuer temporaere Testdateien, Abhaengigkeitspakete oder grosse Dateien. Einmal angegeben, werden diese Dateien nicht mehr verfolgt.
|
||||
2. License bezieht sich auf die gewaehlte Open-Source-Lizenz. Unterschiedliche Lizenzen regeln detailliert, ob andere deinen Code fuer kommerzielle Zwecke verwenden duerfen, und enthalten weitere Bestimmungen und Bedingungen.
|
||||
|
||||
Es wird empfohlen, "Add README" zu aktivieren, die Sichtbarkeit des Repositories auf "Private" zu setzen und den Repository-Namen sowie die Beschreibung nach eigenen Wuenschen auszufuellen. Klicke dann auf "Create repository", um die Erstellung deines ersten Remote-Repositories abzuschliessen.
|
||||
|
||||
|
||||
|
||||
Danach hast du ein leeres Repository ohne zusaetzliche Dateien. Jetzt kannst du mit dem Hochladen von Dateien beginnen.
|
||||
|
||||
|
||||
|
||||
Der Befehl zum Abrufen des Repositories lautet `git clone`, erfordert jedoch die Repository-Adresse. Du kannst die Repository-Adresse finden, indem du auf den gruennen "Code"-Button klickst, wo dir HTTPS- und SSH-Optionen angezeigt werden. Normalerweise kannst du eine der beiden Methoden verwenden, um das Repository auf deinen lokalen Rechner herunterzuladen (nur so kannst du Dateien aendern und hochladen).
|
||||
|
||||
|
||||
|
||||
Im Allgemeinen eignen sich ueber HTTP geklonte Repositories fuer das temporaere Herunterladen und Testen von Repositories anderer, werden aber nicht fuer die eigene Entwicklung empfohlen. Fuer eine bessere Lernerfahrung solltest du zunaechst die SSH-Authentifizierung einrichten.
|
||||
|
||||
## Lokalen SSH-Schluessel binden
|
||||
|
||||
Bei GitHub bedeutet die "SSH-Protokoll-Bindung" im Wesentlichen, dass du den oeffentlichen Schluessel deines lokalen Geraets mit deinem GitHub-Konto verknuepfst, sodass GitHub dein Geraet ueber das SSH-Protokoll identifizieren kann. Dies ermoeglicht es dir, Remote-Repositories sicher ohne Passwort zu bedienen (wie Clone, Push oder Pull von Code).
|
||||
|
||||
Einfach gesagt: Es ist, als wuerdest du deinem Geraet eine "GitHub-exklusive Zugangskarte" geben. Nach der Bindung ueberprueft GitHub diese "Zugangskarte" (deinen oeffentlichen SSH-Schluessel), wenn dein Geraet ueber das SSH-Protokoll auf ein GitHub-Repository zugreift. Sobald dein Geraet als autorisiert bestaetigt wurde, kannst du direkt arbeiten -- ohne jedes Mal Benutzername und Passwort eingeben zu muessen.
|
||||
|
||||
> :bulb: Was ist SSH
|
||||
|
||||
### Warum wird die SSH-Protokoll-Bindung benoetigt?
|
||||
|
||||
GitHub unterstuetzt zwei Hauptprotokolle fuer Repository-Operationen: das HTTPS-Protokoll und das SSH-Protokoll:
|
||||
|
||||
- HTTPS-Protokoll: Bei jeder Operation (wie Push) muessen GitHub-Benutzername und -Passwort (oder ein Personal Access Token PAT) eingegeben werden. Der Verifizierungsprozess ist aufwendig und birgt das Risiko der Passwortoffenlegung.
|
||||
- SSH-Protokoll: Die Authentifizierung erfolgt ueber "Schluesselpaare", sodass kein wiederholtes Passwort-Eingeben erforderlich ist und die verschluesselte Uebertragung sicherer ist.
|
||||
|
||||
Die "SSH-Protokoll-Bindung" ist eine Voraussetzung fuer die Aktivierung der GitHub-SSH-Authentifizierung -- erst nachdem der lokale oeffentliche SSH-Schluessel an dein GitHub-Konto "gebunden" wurde, kann GitHub dein Geraet erkennen und SSH-Operationen auf dem Repository erlauben.
|
||||
|
||||
### Die Kernlogik der "Bindung": Die Rolle der SSH-Schluesselpaare
|
||||
|
||||
Die SSH-Authentifizierung basiert auf Schluesselpaaren (oeffentlicher Schluessel + privater Schluessel), die zusammengehoeorige verschluesselte Dateien sind. Nach der Generierung musst du den "oeffentlichen Schluessel" bei GitHub bereitstellen ("Bindung"), waehrend der "private Schluessel" auf deinem lokalen Geraet verbleibt:
|
||||
|
||||
1. Privater Schluessel: Wird im angegebenen Verzeichnis deines lokalen Geraets (z. B. Computers) gespeichert (normalerweise ~/.ssh/) und dient als "dein exklusiver Schluessel", der niemals mit anderen geteilt werden darf.
|
||||
2. Oeffentlicher Schluessel: Dies ist ein "Schloss", das oeffentlich geteilt werden kann -- du musst es in die "SSH keys list" deines GitHub-Kontos kopieren (der "Bindungs"-Vorgang).
|
||||
|
||||
Wenn du ueber SSH ein GitHub-Repository bedienst (z. B. `git push git@github.com:xxx/xxx.git`):
|
||||
|
||||
- Dein lokales Geraet verschluesselt die "Operationsanfrage" mit dem privaten Schluessel und sendet sie an GitHub;
|
||||
- Nach Erhalt der Anfrage versucht GitHub, sie mit dem zuvor gebundenen oeffentlichen Schluessel zu entschluesseln;
|
||||
- Wenn die Entschluesselung erfolgreich ist, wird dein Geraet als autorisiert bestaetigt und die Operation wird erlaubt; andernfalls wird der Zugriff verweigert.
|
||||
|
||||
### Die konkreten Schritte der "Bindung" (Kernablauf)
|
||||
|
||||
Sobald du das Prinzip verstanden hast, ist die praktische Umsetzung einfach -- der Kern lautet: "Schluesselpaar generieren -> oeffentlichen Schluessel auf GitHub hochladen":
|
||||
|
||||
1. Lokales SSH-Schluesselpaar generieren
|
||||
1. Trae verwenden, um den oeffentlichen Schluessel zu erhalten (empfohlen)
|
||||
Prompt: `Help me create the SSH key needed for GitHub login. My email is your_email@gmail.com , Please return the public key for me to copy`
|
||||
|
||||
|
||||
|
||||
Nach Eingabe des Prompts musst du auch im linken Terminal die Enter-Taste druecken, da der Befehl sonst wartet und nicht ausgefuehrt wird. Da Trae keine Bedingungspruefungen fuer dich durchfuehren kann, druecke einfach wiederholt Enter.
|
||||
|
||||
Am Ende siehst du auf der rechten Seite, dass Trae den gelesenen oeffentlichen Schluessel zurueckgegeben hat. Kopiere ihn einfach und bereite dich darauf vor, ihn im naechsten Schritt einzufuegen.
|
||||
|
||||
 2. Oeffentlichen Schluessel manuell erhalten
|
||||
Oeffne dein lokales Terminal (Windows: Git Bash oder PowerShell; macOS/Linux: Terminal) und gib den folgenden Befehl ein (ersetze your_email@example.com durch die E-Mail-Adresse, die du bei der Registrierung deines GitHub-Kontos verwendet hast):
|
||||
|
||||
```bash
|
||||
ssh-keygen -t ed25519 -C "your_email@example.com"
|
||||
```
|
||||
|
||||
1. Druecke Enter, um die Standardwerte zu akzeptieren (Standard-Dateipfad, kein Passwort oder nach Bedarf ein Passwort setzen). Dies generiert zwei Dateien im Verzeichnis ~/.ssh/:
|
||||
- id_ed25519: Privater Schluessel (lokal speichern, **niemals teilen**);
|
||||
- id_ed25519.pub: Oeffentlicher Schluessel (muss auf GitHub hochgeladen werden).
|
||||
|
||||
2. Oeffentlichen Schluessel an dein GitHub-Konto "binden"
|
||||
|
||||
Dies ist der Kern-Bindungsschritt -- den lokalen oeffentlichen Schluessel zur "SSH keys list" deines GitHub-Kontos hinzufuegen:
|
||||
|
||||
1. Inhalt des oeffentlichen Schluessels kopieren:
|
||||
1. Trae:
|
||||
2. Windows: Oeffne C:\Users\<your>\.ssh\id_ed25519.pub mit dem Editor und kopiere den gesamten Inhalt;
|
||||
3. macOS/Linux: Fuehre `cat ~/.ssh/id_ed25519.pub` im Terminal aus und kopiere die gesamte Ausgabe (vom beginnenden SSH-ed25519 bis zur abschliessenden E-Mail-Adresse).
|
||||
2. Bei GitHub anmelden und zur "SSH Key Management"-Seite navigieren:
|
||||
1. Klicke oben rechts auf dein Profilbild -> Settings -> linkes Menue SSH and GPG keys -> klicke auf New SSH key.
|
||||
|
||||
2. Gib einen beliebigen Titel ein (z. B. "your local computer's SSH") und fuege dann deinen gerade kopierten oeffentlichen SSH-Schluessel hier ein.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. Ueberpruefen, ob die Bindung erfolgreich war
|
||||
|
||||
Gib den folgenden Befehl im Terminal ein (**Trae kann auch folgende Operationen ausfuehren**), um zu testen, ob GitHub dein Geraet erkennen kann:
|
||||
|
||||
```bash
|
||||
ssh -T git@github.com
|
||||
```
|
||||
|
||||
- Wenn du etwas wie "Hi [your GitHub username]! You've successfully authenticated..." siehst, wurde dein Schluessel erfolgreich gebunden;
|
||||
- Wenn ein Fehler auftritt, liegt dies meist daran, dass der oeffentliche Schluessel unvollstaendig kopiert wurde, die Berechtigungen des privaten Schluessels zu hoch sind (dein lokales ~/.ssh/-Verzeichnis sollte nur fuer dich les- und schreibbar sein) usw. Ueberpruefe diese Punkte gemaess den Erfordernissen.
|
||||
|
||||
### Wichtige Hinweise
|
||||
|
||||
Wenn du mehrere Geraete hast (wie Laptop und Desktop), musst du fuer jedes Geraet ein separates SSH-Schluesselpaar generieren und jeden oeffentlichen Schluessel an dasselbe GitHub-Konto binden -- jedes Geraet hat seine eigene "Zugangskarte".
|
||||
|
||||
Teile niemals deinen privaten Schluessel (lade ihn nicht auf GitHub hoch und teile ihn nicht mit anderen), da sonst jemand deine Identitaet annehmen und dein Repository bedienen koennte. Wenn der private Schluessel kompromittiert wurde, loesche sofort den entsprechenden oeffentlichen Schluessel auf GitHub und generiere ein neues Schluesselpaar.
|
||||
|
||||
Nach der SSH-Bindung verwende die SSH-Format-Repository-Adresse (z. B. git@github.com:username/repository.git) fuer Operationen, nicht das HTTPS-Format (z. B. https://github.com/username/repository.git). Wenn du ein Repository zuvor mit HTTPS geklont hast, kannst du mit `git remote set-url origin <new>` das Protokoll wechseln.
|
||||
|
||||
# GitHub-Operationen mit Trae durchfuehren
|
||||
|
||||
Wir haben erklaert, was Git, GitHub und SSH sind und wie man sie konfiguriert. Jetzt kannst du Trae frei fuer Git-Operationen nutzen. Lass uns zunaechst lernen, wie man ein Remote-Repository auf den lokalen Rechner klont.
|
||||
|
||||
## Git clone: Bestehendes Repository herunterladen
|
||||
|
||||
Du kannst Trae einfach die Adresse des Repositories mitteilen, das du klonen moechtest.
|
||||
|
||||
|
||||
|
||||
## Git pull: Updates aus dem Remote-Repository abrufen
|
||||
|
||||
Vor jedem Repository-Update musst du zunaechst die neuesten Aenderungen pullen, da das Repository von mehreren Personen gepflegt werden koennte. Danach kannst du Dateien aendern und pushen.
|
||||
|
||||
**Vergiss nicht, den Ordnernamen sowie den relativen oder absoluten Pfad anzugeben, um zu vermeiden, dass in das falsche Repository gepusht wird.**
|
||||
|
||||
Prompt: `Help me pull this repository AIID-TEST in ./AIID-TEST.`
|
||||
|
||||
## Git commit & Git push: Aenderungen stagen und zu GitHub pushen
|
||||
|
||||
Wenn alles bereit ist, kannst du damit beginnen, lokale Dateien zu aendern, Elemente im Ordner hinzuzufuegen oder zu loeschen. Lass Trae dann die Aenderungen erkennen und dir beim Push zu GitHub helfen.
|
||||
|
||||
Prompt: `I finished. Commit and push to the repository AIID-TEST in ./AIID-TEST.`
|
||||
|
||||
|
||||
|
||||
Push erfolgreich. Jetzt kannst du die aktualisierten Inhalte auf GitHub sehen.
|
||||
|
||||
# Referenzmaterialien
|
||||
|
||||
- Pro Git book https://git-scm.com/book/en/v2
|
||||
- GitHub Docs https://docs.github.com/en
|
||||
@@ -0,0 +1,316 @@
|
||||
# CLI KI-Programmierwerkzeuge
|
||||
|
||||
In diesem Tutorial stellen wir KI-Programmier-Agenten vor, die direkt in der Kommandozeile ausgefuehrt werden. Im Gegensatz zu den Agenten in Trae oder Cursor koennen CLI KI-Programmierwerkzeuge nur im Terminal verwendet werden. Im Vergleich zu IDE-integrierten Agenten bieten sie in der Regel ein laengeres Kontextfenster, schnellere Tool-Aufrufe und kompatiblere Modelle.
|
||||
|
||||
## Von der CLI ausgehend
|
||||
|
||||
CLI (Command Line Interface) bedeutet die Bedienung von Softwareanwendungen ueber reine Textbefehle im Terminal, anstatt sich auf grafische Benutzeroberflaechen (GUI) zu verlassen.
|
||||
|
||||
|
||||
|
||||
CLI eignet sich von Natur aus fuer Textbefehlsoperationen und ist bei einem Teil der Power-User sogar beliebter als GUI.
|
||||
|
||||
|
||||
|
||||
Keine Sorge, wenn du keine CLI-Erfahrung hast. Genau wie wir Trae frueher fuer grundlegende Operationen genutzt haben, koennen wir hier CLI-Programmierwerkzeuge alle CLI-Operationen fuer uns ausfuehren lassen.
|
||||
|
||||
## Unterschiede zu KI-IDEs
|
||||
|
||||
Man kann CLI KI-Programmierwerkzeuge mit z.ai oder Trae vergleichen. Sie benoetigen nur einen einfachen Dialogueingang und fuehren automatisch alle erforderlichen Operationen durch.
|
||||
|
||||
|
||||
|
||||
| Funktionsmerkmal | Claude Code | Cursor | Besserer |
|
||||
| ------------------------ | -------------- | --------------- | ------------- |
|
||||
| Automatische Aufgabenausfuehrung | Sehr stark | Begrenzt | Claude Code |
|
||||
| IDE-Integration | Nur Kommandozeile | Natives VS Code | Cursor |
|
||||
| Echtzeit-Codevervollstaendigung | Nein | Hervorragend | Cursor |
|
||||
| Mehrdateioperationen | Sehr stark | Gut | Claude Code |
|
||||
| GitHub-Integration | Direkte Commits | Manuelle Operation | Claude Code |
|
||||
| Lernkurve | Mittel | Einfach | Cursor |
|
||||
| Kontextlaenge | Sehr lang | Gut | Claude Code |
|
||||
| Debugging-Unterstützung | Automatisiert | Viel manuell | Claude Code |
|
||||
|
||||
Kurz gesagt koennen CLI KI-Programmierwerkzeuge:
|
||||
- Laengere fortlaufende Gespraeche unterstuetzen
|
||||
- Laengere Kontextfenster bieten
|
||||
- Schneller reagieren
|
||||
|
||||
## Haeufige CLI KI-Programmierwerkzeuge
|
||||
|
||||
Wir empfehlen zwei Hauptkategorien:
|
||||
|
||||
- **Codex** nutzt GPT-5 und ist insgesamt leistungsstaerker
|
||||
- **Claude Code** bietet ueber GLM 4.6 eine API-Weiterleitung mit einer Erfahrung nahe Claude 4, aber guenstiger
|
||||
- **OpenCode** ermoeglicht freien Modellwechsel und bietet kostenlose Modelle
|
||||
|
||||
### Claude Code
|
||||
|
||||
Claude Code ist ein von Anthropic entwickeltes KI-Programmierwerkzeug basierend auf dem Claude-Grosssprachenmodell. Seine Hauptinteraktion findet im Terminal statt, unterstuetzt aber auch die Nutzung als VS Code-Plugin.
|
||||
|
||||
|
||||
|
||||
**Vorteile**: Sehr langes Kontextfenster, kann unklare Anforderungen klaeren, automatische Aufgabenplanung und tiefes Verstaendnis der gesamten Codebasis.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Kurs zum systematischen Lernen von Claude Code: <https://www.bilibili.com/video/BV176t2zSEpr>
|
||||
|
||||
|
||||
|
||||
#### GLM als Backend verwenden (Empfohlen)
|
||||
|
||||
GLM (General Language Model) ist eine von zhipu AI entwickelte Serie von Grosssprachenmodellen. GLM-4.6 ist die neueste Version mit herausragender Codefaehigkeit.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Installation:
|
||||
|
||||
```python
|
||||
# Claude Code installieren
|
||||
npm install -g @anthropic-ai/claude-code
|
||||
|
||||
# In dein Projekt wechseln
|
||||
cd your-awesome-project
|
||||
|
||||
# Claude Code starten
|
||||
claude
|
||||
```
|
||||
|
||||
API-Key abrufen:
|
||||
- Inlands-Version: <https://bigmodel.cn/usercenter/proj-mgmt/apikeys>
|
||||
- International: <https://z.ai/manage-apikey/apikey-list>
|
||||
|
||||
**Inlands-Version GLM** konfigurieren:
|
||||
|
||||
```python
|
||||
setx ANTHROPIC_AUTH_TOKEN your_zhipu_api_key
|
||||
setx ANTHROPIC_BASE_URL https://open.bigmodel.cn/api/anthropic
|
||||
```
|
||||
|
||||
**International GLM** konfigurieren:
|
||||
|
||||
```python
|
||||
setx ANTHROPIC_AUTH_TOKEN your_zai_api_key
|
||||
setx ANTHROPIC_BASE_URL https://api.z.ai/api/anthropic
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Kimi K2 als Backend verwenden (Empfohlen)
|
||||
|
||||
Kimi K2 ist ein neues Grosssprachenmodell von Moonshot AI mit hervorragender Codeverstaendnis- und Generierungsfaehigkeit. Es unterstuetzt ein Ultra-Lang-Kontextfenster von bis zu 200K Tokens.
|
||||
|
||||
API-Key: <https://platform.moonshot.cn/console/account>
|
||||
|
||||
```bash
|
||||
export ANTHROPIC_BASE_URL=https://api.moonshot.cn/anthropic
|
||||
export ANTHROPIC_AUTH_TOKEN=sk-YOURKEY
|
||||
```
|
||||
|
||||
#### Minimax als Backend verwenden (Empfohlen)
|
||||
|
||||
Minimax ist ein Grosssprachenmodell von MiniMax mit hervorragender Reasoning-Faehigkeit und Codegenerierungsqualitaet.
|
||||
|
||||
API-Key: <https://platform.minimax.io/>
|
||||
|
||||
```bash
|
||||
export ANTHROPIC_BASE_URL=https://api.minimax.io/anthropic
|
||||
export ANTHROPIC_AUTH_TOKEN=YOUR_MINIMAX_API_KEY
|
||||
export ANTHROPIC_MODEL=MiniMax-M2.7
|
||||
```
|
||||
|
||||
#### DeepSeek als Backend verwenden (Empfohlen)
|
||||
|
||||
DeepSeek ist ein Open-Source-Grosssprachenmodell mit herausragender Codefaehigkeit und hohem Preis-Leistungs-Verhaeltnis.
|
||||
|
||||
API-Key: <https://platform.deepseek.com/usage>
|
||||
|
||||
```bash
|
||||
export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic
|
||||
export ANTHROPIC_AUTH_TOKEN=YOU_DEEPSEEK_API_KEY
|
||||
export API_TIMEOUT_MS=600000
|
||||
export ANTHROPIC_MODEL=deepseek-chat
|
||||
export ANTHROPIC_SMALL_FAST_MODEL=deepseek-chat
|
||||
export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1
|
||||
```
|
||||
|
||||
#### Volcengine Coding Plan als Backend verwenden (Empfohlen)
|
||||
|
||||
Volcengine (Volcano Engine) ist die Cloud-Service-Plattform von ByteDance.
|
||||
|
||||
API-Key: <https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey>
|
||||
|
||||
```bash
|
||||
export ANTHROPIC_BASE_URL=https://ark.volces.com/api/anthropic
|
||||
export ANTHROPIC_AUTH_TOKEN=YOUR_VOLCANO_API_KEY
|
||||
export ANTHROPIC_MODEL=doubao-pro-32k
|
||||
```
|
||||
|
||||
#### Claude Code erweiterte Nutzung
|
||||
|
||||
| Befehl | Funktion | Beispiel |
|
||||
| -------------------- | --------------------------------------------------- | -------------------------------------------- |
|
||||
| claude | Interaktiven Modus starten | `claude` |
|
||||
| claude "query" | Einmalige Aufgabe ausfuehren | `claude "explain this project"` |
|
||||
| claude -p "query" | Einmalige Frage mit automatischem Beenden | `claude -p "explain this function xxxx"` |
|
||||
| claude -c | Letzte Sitzung fortsetzen | `claude -c` |
|
||||
| /init | Projektbeschreibung mit CLAUDE.md initialisieren | `/init` |
|
||||
| /clear | Aktuelle Sitzung leeren | `/clear` |
|
||||
| /compact | Sitzungsverlauf komprimieren | `/compact` |
|
||||
| /cost | Aktuelle Kosten anzeigen | `/cost` |
|
||||
| exit oder Ctrl+C | Claude Code beenden | `exit` oder `Ctrl+C` |
|
||||
|
||||
**CLAUDE.md**
|
||||
|
||||
`CLAUDE.md` ist eine spezielle Datei, die Claude beim Start automatisch liest. Sie eignet sich fuer:
|
||||
- Haeufige Bash-Befehle
|
||||
- Kerndateien und Hilfsfunktionen
|
||||
- Code-Stilvereinbarungen
|
||||
- Testmethoden
|
||||
- Repository-Zusammenarbeitsregeln
|
||||
|
||||
```
|
||||
# Bash commands
|
||||
- npm run build: Build the project
|
||||
- npm run typecheck: Run the typechecker
|
||||
|
||||
# Code style
|
||||
- Use ES modules (import/export) syntax, not CommonJS (require)
|
||||
- Destructure imports when possible
|
||||
|
||||
# Workflow
|
||||
- Be sure to typecheck when you're done making changes
|
||||
```
|
||||
|
||||
#### Interne Funktionsweise von Claude Code
|
||||
|
||||
|
||||
|
||||
Claude Code zerlegt Programmieraufgaben in einen fortlaufenden "Wahrnehmen-Denken-Handeln-Verifizieren"-Zyklus. Es ahmt den Workflow menschlicher Entwickler nach: "Code schreiben > ausfuehren > Ergebnisse pruefen > verbessern".
|
||||
|
||||
### Codex
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Codex ist ein von OpenAI entwickeltes KI-Kooperations-Programmierwerkzeug. Sein groesster Vorteil ist die effiziente Anpassung an GPT-5.
|
||||
|
||||
Installation:
|
||||
|
||||
```
|
||||
npm i -g @openai/codex
|
||||
```
|
||||
|
||||
#### Offizielle OpenAI API als Backend
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### Weitergeleitete OpenAI API als Backend
|
||||
|
||||
Konfigurationsbeispiel:
|
||||
|
||||
````bash
|
||||
My API key is: [Paste your obtained sk-xxxxx key here]
|
||||
|
||||
Please help me complete the following configuration tasks:
|
||||
|
||||
1. Create a `.codex` folder under my user directory
|
||||
2. Create `config.toml` in the `.codex` directory
|
||||
3. Write the following content:
|
||||
```toml
|
||||
preferred_auth_method = "apikey"
|
||||
|
||||
[model_providers.myrelay]
|
||||
name = "My Relay Station"
|
||||
base_url = "https://api.zyai.online/v1"
|
||||
env_key = "MYRELAY_API_KEY"
|
||||
wire_api = "responses"
|
||||
```
|
||||
|
||||
4. Set system environment variable MYRELAY_API_KEY
|
||||
````
|
||||
|
||||
Nach der Konfiguration kannst du Codex mit `codex --profile myrelay` starten.
|
||||
|
||||
### OpenCode
|
||||
|
||||
|
||||
|
||||
OpenCode ist eine Open-Source KI Coding Agent-Plattform, positioniert als "Multi-Modell-Version von Claude Code".
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
# Linux / Unix
|
||||
curl -fsSL https://opencode.ai/install | bash
|
||||
|
||||
# Windows
|
||||
npm i -g opencode-ai
|
||||
```
|
||||
|
||||
#### Kostenlose Modelle in OpenCode verwenden
|
||||
|
||||
Starte OpenCode mit `opencode` und gib `/models` ein, um nach "free" zu suchen.
|
||||
|
||||
|
||||
|
||||
#### Drittanbieter-Modelle verwenden
|
||||
|
||||
Gib `/connect` ein, waehle den ersten Eintrag und folge der Authentifizierung.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### Oh My OpenAgent Plugin installieren
|
||||
|
||||
Oh-My-OpenAgent ist ein "Multi-Agent KI-Programmier-Kommandosystem", das auf OpenCode laeuft.
|
||||
|
||||
```text
|
||||
Install and configure oh-my-openagent by following the instructions here:
|
||||
https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/refs/heads/dev/docs/guide/installation.md
|
||||
```
|
||||
|
||||
## Weitere Verwendungsmoeglichkeiten von CLI KI-Programmierwerkzeugen
|
||||
|
||||
### KI fuer Anforderungen-Dokumente nutzen
|
||||
|
||||
Abstrakte Anforderungen muessen fuer grosse Sprachmodelle "konkretisiert" werden. Lass die KI helfen, deine Anforderungen zu detaillieren:
|
||||
|
||||
`Based on my needs, please elaborate and provide a more detailed Product Requirement Document for reference.`
|
||||
|
||||
### Ordner verwalten
|
||||
|
||||
`Please help me organize the contents of the current folder.`
|
||||
|
||||
### Neue Projekte entwickeln
|
||||
|
||||
Genau wie bei z.ai oder Trae koennen CLI-Tools verwendet werden, um Projekte von Grund auf zu entwickeln.
|
||||
|
||||
### Open-Source-Projekte bereitstellen
|
||||
|
||||
`I want to deploy this GitHub project https://github.com/langgenius/dify. Please help me clone the project and run it.`
|
||||
|
||||
|
||||
|
||||
### Code erklaeren und Dokumentation schreiben
|
||||
|
||||
- "Bitte erklaere mir dieses Projekt: Wie startet man es, wie verwendet man es?"
|
||||
- "Bitte schreibe eine vollstaendige Dokumentation fuer dieses Projekt."
|
||||
|
||||
### Weitere Anwendungsmoeglichkeiten
|
||||
|
||||
- Lokale Dateien verwalten und organisieren
|
||||
- Tagebuch schreiben, Zusammenfassungen erstellen
|
||||
- Systemfehler analysieren und beheben
|
||||
- Wiederkehrende Kommandozeilen-Aufgaben ausfuehren
|
||||
@@ -0,0 +1,355 @@
|
||||
# Stripe und andere Zahlungssysteme integrieren
|
||||
|
||||
Wenn dein Produkt bereits Seiten, Login, Datenbank und ein grundlegendes Backend hat, ist die naechste praktische Frage: **Wie nimmst du Zahlungen entgegen?**
|
||||
|
||||
Dieser Artikel ist in zwei Teile gegliedert:
|
||||
- **Der erste Teil** behandelt nur die praktischste Grundeinbindung mit dem Ziel, Stripe schnell in dein Projekt zu integrieren.
|
||||
- **Der zweite Teil** (Anhang) enthaelt Webhook-Details, Abo-Ereignisse und regionale Zahlungsunterschiede.
|
||||
|
||||
> Empfohlene Vorkenntnisse
|
||||
> - [Von der Datenbank zu Supabase](../database-supabase/)
|
||||
> - [Grosses Sprachmodell unterstuetzt beim Schreiben von API-Code](../ai-interface-code/)
|
||||
> - [Web-Anwendungen bereitstellen](../zeabur-deployment/)
|
||||
|
||||
# Was du lernen wirst
|
||||
|
||||
1. Wie sieht ein minimal funktionsfaehiges Zahlungssystem aus?
|
||||
2. Wie du Stripe schnellstmöglich in dein Projekt integrierst.
|
||||
3. Wie du Prompts schreibst, damit die KI dir das Zahlungssystem hinzufuegt.
|
||||
4. Welche Zahlungsloesung fuer verschiedene Regionen Prioritaet haben sollte.
|
||||
|
||||
---
|
||||
|
||||
# Teil 1: Grundlagen
|
||||
|
||||
## 1. Drei Grundprinzipien merken
|
||||
|
||||
1. **Preise muessen vom Backend bestimmt werden**, nicht vom Frontend.
|
||||
2. **Berechtigungen werden durch Webhooks aktiviert**, nicht durch die Erfolgsseite.
|
||||
3. **Deine eigene Datenbank muss den Zahlungsstatus speichern**, nicht nur Stripe.
|
||||
|
||||
## 2. Was passiert, wenn das Frontend direkt mit Stripe kommuniziert?
|
||||
|
||||
Wenn du echtes Geld einnehmen willst, ist dieser Ansatz gefaehrlich:
|
||||
1. **Preise koennen leicht geaendert werden** - Browser-Anfragen koennen manipuliert werden.
|
||||
2. **Sensible Informationen werden leicht preisgegeben** - Geheime Schluessel gehoeren nicht ins Frontend.
|
||||
3. **Du kannst nicht zuverlaessig bestaetigen, ob die Zahlung erfolgreich war**.
|
||||
4. **Datenbankstatus wird unordentlich**.
|
||||
|
||||
Die sicherere Aufteilung:
|
||||
- **Frontend**: Buttons anzeigen, Kauf initiieren, Seiten weiterleiten
|
||||
- **Backend**: Preise bestimmen, Checkout-Sessions erstellen, Webhooks empfangen, Datenbank aktualisieren
|
||||
|
||||
::: info In einem Satz
|
||||
**Das Frontend kann Weiterleitungen uebernehmen, aber das Backend muss Preisgestaltung und Bestaetigung kontrollieren.**
|
||||
:::
|
||||
|
||||
## 3. Wann ist Stripe die richtige Wahl?
|
||||
|
||||
- SaaS fuer internationale Nutzer
|
||||
- Abo-basierte Mitgliedschaftsprodukte
|
||||
- Digitale Produkte, Templates, KI-Guthabenpakete
|
||||
- Schnelle kommerzielle Validierung
|
||||
|
||||
## 4. Minimale funktionsfaehige Zahlungskette
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
user["Benutzer"]
|
||||
frontend["Frontend"]
|
||||
backend["Dein Backend"]
|
||||
checkout["Stripe Checkout"]
|
||||
webhook["Stripe Webhook"]
|
||||
db["Supabase / Geschaeftsdatenbank"]
|
||||
|
||||
user -->|"Kauf klicken"| frontend
|
||||
frontend -->|"Zahlungs-Session anfordern"| backend
|
||||
backend -->|"Session mit Backend-Preis erstellen"| checkout
|
||||
frontend -->|"Zur Zahlungsseite weiterleiten"| checkout
|
||||
checkout -->|"Ereignis nach Zahlung senden"| webhook
|
||||
webhook -->|"Signatur pruefen und Status aktualisieren"| backend
|
||||
backend -->|"In orders / subscriptions schreiben"| db
|
||||
db -->|"Frontend liest neuen Status"| frontend
|
||||
```
|
||||
|
||||
## 5. Standard-Zeitachse fuer die Zahlungsinitiierung
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor User as Benutzer
|
||||
participant Frontend as Frontend
|
||||
participant Backend as Backend API
|
||||
participant Stripe as Stripe Checkout
|
||||
|
||||
User->>Frontend: "Upgrade" oder "Kaufen" klicken
|
||||
Frontend->>Backend: POST /api/billing/create-checkout-session
|
||||
Backend->>Backend: Plan pruefen und priceId zuordnen
|
||||
Backend->>Stripe: Checkout Session erstellen
|
||||
Stripe-->>Backend: session.url zurueckgeben
|
||||
Backend-->>Frontend: Zahlungslink zurueckgeben
|
||||
Frontend-->>User: Zu Stripe-Zahlungsseite weiterleiten
|
||||
User->>Stripe: Zahlung abschliessen
|
||||
```
|
||||
|
||||
## 6. Schnellstart
|
||||
|
||||
### 6.1 Schritt 1: Produkte und Preise im Stripe-Dashboard erstellen
|
||||
|
||||
In Stripes Modell:
|
||||
- **Product** beschreibt, was du verkaufst (z. B. "Pro-Mitgliedschaft")
|
||||
- **Price** beschreibt, wie viel es kostet und in welchem Zyklus (z. B. "9,90 USD/Monat")
|
||||
|
||||
Oeffne diese Seiten:
|
||||
- Stripe Dashboard: [Dashboard Login](https://dashboard.stripe.com/login)
|
||||
- Produktdokumentation: [Manage products and prices](https://docs.stripe.com/products-prices/manage-prices)
|
||||
|
||||
Arbeite im **Testmodus**.
|
||||
|
||||
Minimale Konfiguration:
|
||||
- `Product`: `Pro Plan`
|
||||
- `Price 1`: `pro_monthly`
|
||||
- `Price 2`: `pro_yearly`
|
||||
|
||||
Merke dir die `price_id` Werte.
|
||||
|
||||
Prompt fuer die KI:
|
||||
|
||||
```text
|
||||
Ich verwende Stripe zum ersten Mal. Bitte fuehre mich Schritt fuer Schritt durch die grundlegende Zahlungs-Konfiguration im Stripe-Dashboard.
|
||||
|
||||
Bitte beziehe dich auf diese offiziellen Dokumente:
|
||||
- https://docs.stripe.com/products-prices/manage-prices
|
||||
- https://docs.stripe.com/checkout/quickstart?lang=node
|
||||
```
|
||||
|
||||
### 6.2 Schritt 2: Umgebungsvariablen vorbereiten
|
||||
|
||||
Mindestens erforderlich:
|
||||
- `STRIPE_SECRET_KEY`
|
||||
- `STRIPE_WEBHOOK_SECRET`
|
||||
- `STRIPE_PRICE_PRO_MONTHLY`
|
||||
- `STRIPE_PRICE_PRO_YEARLY`
|
||||
- `APP_URL`
|
||||
- `SUPABASE_URL`
|
||||
- `SUPABASE_SERVICE_ROLE_KEY`
|
||||
|
||||
### 6.3 Schritt 3: Checkout Session im Backend erstellen
|
||||
|
||||
```text
|
||||
Bitte integriere Stripe-Zahlungen in mein Projekt.
|
||||
|
||||
Beziehe dich auf diese offiziellen Dokumente:
|
||||
- https://docs.stripe.com/checkout/quickstart?lang=node
|
||||
- https://docs.stripe.com/api/checkout/sessions/create
|
||||
- https://docs.stripe.com/payments/subscriptions
|
||||
|
||||
Ziele:
|
||||
- Nutzer klickt auf "Kaufen" und wird zur Stripe-Zahlungsseite weitergeleitet
|
||||
- Nur monatliche und jaehrliche Plaene
|
||||
- Preise ueber Backend-Umgebungsvariablen bestimmen
|
||||
```
|
||||
|
||||
### 6.4 Schritt 4: Frontend zur Zahlungsseite weiterleiten
|
||||
|
||||
```text
|
||||
Verbinde den "Kaufen"-Button in meinem Projekt mit Stripe.
|
||||
|
||||
Anforderungen:
|
||||
- Bestehende Seiten nicht aendern, nur die Button-Klick-Logik
|
||||
- Nach dem Klick Backend-API fuer Zahlungslink aufrufen, dann zu Stripe weiterleiten
|
||||
- Bei Fehlern eine einfache Meldung anzeigen
|
||||
```
|
||||
|
||||
### 6.5 Schritt 5: Webhook fuer Datenbankaktualisierung
|
||||
|
||||
::: info Warum dieser Schritt der wichtigste ist
|
||||
Viele glauben, dass es reicht, wenn der Nutzer zur Erfolgsseite weitergeleitet wird. Das stimmt nicht. Wichtig ist: **Hat Stripe das Ereignis offiziell an deinen Webhook gesendet und hat dein Backend den Datenbankstatus erfolgreich aktualisiert?**
|
||||
:::
|
||||
|
||||
```text
|
||||
Bitte integriere die automatische Aktivierung nach erfolgreicher Stripe-Zahlung.
|
||||
|
||||
Beziehe dich auf:
|
||||
- https://docs.stripe.com/webhooks
|
||||
- https://docs.stripe.com/stripe-cli
|
||||
|
||||
Ziel:
|
||||
- Nach der Zahlung nicht nur zur Erfolgsseite weiterleiten
|
||||
- Sondern den Mitgliedschaftsstatus in der Datenbank auf "aktiv" setzen
|
||||
```
|
||||
|
||||
## 7. Prompt fuer die schnelle KI-Integration
|
||||
|
||||
```text
|
||||
Bitte integriere Stripe-Zahlungen in mein Projekt fuer eine einfachste funktionierende Mitgliedschaft.
|
||||
|
||||
Anforderungen:
|
||||
1. Ich bin Anfaenger - bitte analysiere zuerst das Projekt, bevor du Code aenderst.
|
||||
2. Nur die einfachste Version: monatlicher und jaehrlicher Plan.
|
||||
3. Nach dem Klick auf "Kaufen" Weiterleitung zur Stripe-Zahlungsseite.
|
||||
4. Nach erfolgreicher Zahlung wird der Mitgliedschaftsstatus in der Datenbank aktiviert.
|
||||
5. Keine komplexen Funktionen wie Coupons, Upgrades/Downgrades etc.
|
||||
```
|
||||
|
||||
## 8. Die 4 haeufigsten Fehler
|
||||
|
||||
1. **Die Erfolgsseite als Zahlungsbestaetigung betrachten** - Nur Webhooks sind massgebend.
|
||||
2. **Das Frontend sendet den Betrag** - Schwere Preismanipulationsgefahr.
|
||||
3. **Webhook-Route wird von `express.json()` vorab verarbeitet** - Stripe braucht den rohen Anforderungskoerper.
|
||||
4. **Keine Idempotenz-Behandlung** - Webhooks koennen wiederholt werden.
|
||||
|
||||
## 9. Auswahlberatung in einem Satz
|
||||
|
||||
| Hauptnutzer | Zunaechst ausprobieren |
|
||||
| :--- | :--- |
|
||||
| Internationale SaaS | Stripe |
|
||||
| Festland-China | Alipay / WeChat Pay |
|
||||
| Hongkong oder grenzueberschreitende Teams | Stripe + lokale Wallet/FPS |
|
||||
|
||||
## 10. Zusammenfassung
|
||||
|
||||
Du hast nun die grundlegendste und wichtigste Zahlungskette gemeistert:
|
||||
|
||||
1. Frontend initiiert Kauf.
|
||||
2. Backend erstellt Checkout Session.
|
||||
3. Nutzer zahlt auf der Stripe-Seite.
|
||||
4. Stripe benachrichtigt das Backend per Webhook.
|
||||
5. Backend aktualisiert die Datenbank.
|
||||
6. Frontend zeigt nach Aktualisierung den neuen Mitgliedschafts- oder Bestellstatus.
|
||||
|
||||
---
|
||||
|
||||
# Anhang
|
||||
|
||||
## Anhang A: Die haeufigsten Stripe-Objekte
|
||||
|
||||
| Objekt | Funktion | Vergleichbar mit |
|
||||
| :--- | :--- | :--- |
|
||||
| `Product` | Beschreibt, was verkauft wird | Produkt oder Mitgliedschaftsplan |
|
||||
| `Price` | Beschreibt Preis und Abrechnungszyklus | Monatlich, jaehrlich, Einmalkauf |
|
||||
| `Checkout Session` | Von Stripe verwalteter Zahlungsprozess | Zahlungsseite |
|
||||
| `Subscription` | Periodisches Abonnementverhaeltnis | Automatische Verlaengerung |
|
||||
| `Customer` | Zahlender Benutzer | Kundenprofil bei Stripe |
|
||||
| `Webhook` | Asynchrone Benachrichtigung | Stripe teilt dir den Zahlungsstatus mit |
|
||||
|
||||
## Anhang B: Warum die Erfolgsseite nicht gleich Zahlungserfolg bedeutet
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
pay["Nutzer zahlt bei Stripe"]
|
||||
|
||||
subgraph unreliable["Unzuverlaessiger Pfad: Nur Erfolgsseite"]
|
||||
success["Browser leitet zur Erfolgsseite weiter"]
|
||||
fake["Frontend geht von Aktivierung aus"]
|
||||
risk["Risiko: Seite geschlossen / URL gefaelscht / nicht gezahlt"]
|
||||
success --> fake --> risk
|
||||
end
|
||||
|
||||
subgraph reliable["Zuverlaessiger Pfad: Backend-Webhook"]
|
||||
event["Stripe-Server sendet Webhook"]
|
||||
verify["Backend prueft Signatur"]
|
||||
active["Datenbank aktualisiert auf bezahlt"]
|
||||
event --> verify --> active
|
||||
end
|
||||
|
||||
pay --> success
|
||||
pay --> event
|
||||
```
|
||||
|
||||
**Kernunterschied:**
|
||||
|
||||
| | Erfolgsseiten-Weiterleitung | Webhook-Benachrichtigung |
|
||||
| :--- | :--- | :--- |
|
||||
| Wer initiiert es? | Benutzer-Browser | Stripe-Server |
|
||||
| Faelschbar? | Ja, URL direkt aufrufen | Nein, Signaturpruefung |
|
||||
| Garantiert Zahlungserfolg? | Nein | Ja |
|
||||
|
||||
### Richtiger Ansatz
|
||||
|
||||
```javascript
|
||||
// Falsch: Auf Erfolgsseite direkt aktivieren
|
||||
if (window.location.pathname === '/success') {
|
||||
activateMembership(); // Gefaehrlich!
|
||||
}
|
||||
|
||||
// Richtig: Immer Backend abfragen
|
||||
async function checkStatus() {
|
||||
const response = await fetch('/api/user/status');
|
||||
const data = await response.json();
|
||||
if (data.paymentStatus === 'paid') {
|
||||
showMemberFeatures();
|
||||
} else {
|
||||
showPendingMessage();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Anhang C: Wichtigste Abonnement-Ereignisse
|
||||
|
||||
| Ereignis | Bedeutung | Typische Aktion |
|
||||
| :--- | :--- | :--- |
|
||||
| `checkout.session.completed` | Erste Aktivierung erfolgreich | Lokalen Abonnement-Datensatz erstellen |
|
||||
| `invoice.paid` | Automatische Verlaengerung erfolgreich | Gueltigkeit verlaengern |
|
||||
| `invoice.payment_failed` | Automatische Abbuchung fehlgeschlagen | Risikostatus markieren |
|
||||
| `customer.subscription.deleted` | Abonnement gekuendigt | Berechtigungen entziehen |
|
||||
|
||||
### Abonnementstatus-Diagramm
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> NotStarted: Nutzer hat nicht gekauft
|
||||
NotStarted --> Active: checkout.session.completed
|
||||
Active --> Active: invoice.paid
|
||||
Active --> PastDue: invoice.payment_failed
|
||||
PastDue --> Active: Zahlungsausgleich erfolgreich
|
||||
Active --> Canceled: customer.subscription.deleted
|
||||
PastDue --> Canceled: Nicht innerhalb der Frist behoben
|
||||
Canceled --> [*]
|
||||
```
|
||||
|
||||
## Anhang D: Andere Zahlungsloesungen
|
||||
|
||||
### 1. Festland-China
|
||||
|
||||
**Alipay** und **WeChat Pay** sind die erste Wahl.
|
||||
|
||||
Beide nutzen das "Zahlungsgateway"-Modell: Backend bestellt, Frontend ruft auf, Backend benachrichtigt.
|
||||
|
||||
### 2. Hongkong
|
||||
|
||||
Empfohlene Kombination: **Stripe** fuer internationale Karten und Abos + **Airwallex** oder **Adyen** fuer lokale Wallets und FPS.
|
||||
|
||||
### 3. International / SaaS
|
||||
|
||||
- **Stripe**: Beste API-Erfahrung, klare Dokumentation
|
||||
- **PayPal**: Ergaenzender Kanal fuer internationale Geschaefte
|
||||
- **Paddle**: Merchant of Record (MoR) - behandelt globale Steuern
|
||||
- **Lemon Squeezy**: MoR, besonders fuer Indie-Entwickler und digitale Produkte
|
||||
|
||||
### 4. Unternehmensloesungen
|
||||
|
||||
- **Airwallex**: Zahlungsgateway + globale Konten
|
||||
- **Adyen**: Unternehmensklasse, verarbeitet Billionen Euro jaehrlich
|
||||
|
||||
### 5. Loesungsvergleich
|
||||
|
||||
| Loesung | Geschaeftsmodell | Steuerbehandlung | Fuer wen |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| Stripe | Zahlungsgateway | Selbst behandeln | Internationale SaaS, Entwickler |
|
||||
| PayPal | Zahlungsgateway | Selbst behandeln | Ergaenzender internationaler Kanal |
|
||||
| Paddle | MoR | Paddle behandelt | B2B SaaS, die keine Steuern verwalten wollen |
|
||||
| Lemon Squeezy | MoR | LS behandelt | Indie-Entwickler, digitale Produkte |
|
||||
| Adyen | Zahlungsgateway | Selbst behandeln | Grossunternehmen |
|
||||
| Airwallex | Gateway + Konten | Selbst behandeln | Grenzueberschreitende Geschaefte |
|
||||
| Alipay/WeChat | Zahlungsgateway | Selbst behandeln | Festland-China |
|
||||
|
||||
### 6. Nach Region auswaehlen
|
||||
|
||||
| Dein Markt | Empfohlene Loesung |
|
||||
| :--- | :--- |
|
||||
| Festland-China | Alipay / WeChat Pay |
|
||||
| Hongkong | Stripe + Airwallex / Adyen |
|
||||
| Internationale SaaS | Stripe (selbst) oder Paddle (MoR) |
|
||||
| Digitale Produkte (international) | Stripe / Lemon Squeezy / Paddle |
|
||||
| Multi-Region Unternehmen | Adyen / Airwallex / Stripe Kombination |
|
||||
@@ -0,0 +1,304 @@
|
||||
# Web-Anwendungen bereitstellen
|
||||
|
||||
In diesem Tutorial stellen wir vor, wie du deine Web-Anwendung im Internet veroeffentlicht, damit andere darauf zugreifen koennen. Wir stellen drei haeufig genutzte Bereitstellungsplattformen vor: **Tencent Cloud CloudBase**, **Vercel** und **Zeabur**.
|
||||
|
||||
# Was ist "Bereitstellung"?
|
||||
|
||||
Bevor wir beginnen, klaeren wir, was "Bereitstellung (Deployment)" eigentlich bedeutet. Jede Website, die von externen Benutzern erreicht werden soll, benoetigt eine oeffentlich zugaengliche Netzwerkadresse. Aber die Adresse allein reicht nicht aus - dein geschriebener Webseiten-Code (HTML-, CSS-, JavaScript-Dateien oder Projekte mit React, Vue usw.) sowie zugehoerige Bild-/Videoressourcen muessen auf einem durchgehend online Server "abgelegt" werden, der Netzwerkanfragen beantwortet.
|
||||
|
||||
|
||||
|
||||
Bildquelle: https://www.hostinger.com/tutorials/what-is-cloud-hosting
|
||||
|
||||
Den gesamten Prozess des Hochladens von Ressourcen, der Konfiguration der Umgebung und des Startens des Dienstes bezeichnet man als **Bereitstellung (Deployment)**.
|
||||
|
||||
Plattformen wie CloudBase, Vercel, Netlify und Zeabur wurden entwickelt, um genau diese Komplexitaet zu loesen. Sie automatisieren die Schritte "Server kaufen, Umgebung konfigurieren, Code hochladen, Dienst starten und Betrieb ueberwachen". Du musst lediglich dein Code-Repository (z. B. GitHub oder GitLab) mit der Plattform verbinden oder den Code direkt hochladen.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Bereitstellungsplattformen im Vergleich
|
||||
|
||||
| Plattform | Merkmale | Anwendungsbereich | Kostenloseinheit |
|
||||
|-----------|----------|-------------------|------------------|
|
||||
| **Tencent Cloud CloudBase** | Schneller Zugriff in China, tiefe WeChat-Integration | Projekte hauptsaechlich fuer chinesische Nutzer | Vorhanden |
|
||||
| **Vercel** | Gute Frontend-Framework-Unterstuetzung, enge GitHub-Integration | Moderne Frontend-Projekte (React/Vue/Next.js) | Vorhanden |
|
||||
| **Netlify** | Umfassende Funktionen, Formularverarbeitung und Authentifizierung | Statische Websites mit erweiterten Funktionen | Vorhanden |
|
||||
| **Zeabur** | Mehrere Sprachen und Service-Vorlagen, flexible Konfiguration | Komplexe Projekte mit mehreren Diensten (Dify, n8n) | ca. 5 USD/Monat kostenlos |
|
||||
|
||||
---
|
||||
|
||||
# 1. Tencent Cloud CloudBase
|
||||
|
||||
Tencent Cloud CloudBase ist ein einheitlicher Cloud-Backend-Service von Tencent Cloud, besonders geeignet fuer Entwickler in China.
|
||||
|
||||
- **Schneller Zugriff in China**: Server stehen in China, geringe Latenz
|
||||
- **WeChat-Integration**: Einfache Anbindung an WeChat-Mini-Programme und offizielle Konten
|
||||
- **All-in-One-Loesung**: Statisches Website-Hosting, Cloud-Funktionen, Datenbank, Speicher
|
||||
- **Grosszuegige kostenloseinheit**: Ausreichend kostenlose Ressourcen fuer Einzelentwickler
|
||||
|
||||
## CloudBase verwenden
|
||||
|
||||
### Schritt 1: Registrieren und anmelden
|
||||
|
||||
Besuche die [Tencent Cloud CloudBase-Konsole](https://console.cloud.tencent.com/tcb) und melde dich mit WeChat oder QQ an.
|
||||
|
||||
### Schritt 2: Umgebung erstellen
|
||||
|
||||
Klicke auf "Neue Umgebung" und waehle einen Umgebungsnamen (z. B. `my-web-app`).
|
||||
|
||||
### Schritt 3: Statisches Website-Hosting aktivieren
|
||||
|
||||
Finde in der Umgebungsverwaltung die Funktion "Statisches Website-Hosting" und aktiviere sie.
|
||||
|
||||
### Schritt 4: Code bereitstellen
|
||||
|
||||
CloudBase bietet drei Bereitstellungsmethoden:
|
||||
|
||||
- **Lokales Projekt hochladen**: Direkt statische Dateien hochladen
|
||||
- **Vorlagenbereitstellung**: Voreingestellte Vorlagen wie React/Vue nutzen
|
||||
- **Git-Repository-Bereitstellung**: Automatischer Abruf und Bereitstellung von GitHub
|
||||
|
||||
### Schritt 5: Eigene Domain konfigurieren (optional)
|
||||
|
||||
In den Einstellungen fuer statisches Website-Hosting kannst du eine eigene Domain binden und ein kostenloses HTTPS-Zertifikat beantragen.
|
||||
|
||||
---
|
||||
|
||||
# 2. Vercel
|
||||
|
||||
Vercel ist eine der weltweit beliebtesten Frontend-Bereitstellungsplattformen.
|
||||
|
||||
- **Tiefe GitHub-Integration**: Code-Push loest automatisch Bereitstellung aus
|
||||
- **Automatische Vorschau**: Jeder Pull-Request erhaelt einen eigenen Vorschaulink
|
||||
- **Globales CDN**: Automatische weltweite Verteilung
|
||||
- **Serverless-Funktionen**: Backend-APIs direkt im Projekt
|
||||
|
||||
> Hinweis: Vercel kann in einigen Netzwerkumgebungen instabil sein.
|
||||
|
||||
## Vercel verwenden
|
||||
|
||||
### Schritt 1: Konto registrieren
|
||||
|
||||
Besuche [Vercel](https://vercel.com) und melde dich mit deinem GitHub-Konto an.
|
||||
|
||||
### Schritt 2: Projekt importieren
|
||||
|
||||
1. Klicke auf "Add New Project"
|
||||
2. Waehle das gewuenschte GitHub-Repository
|
||||
|
||||
### Schritt 3: Build-Einstellungen konfigurieren
|
||||
|
||||
| Framework | Build-Befehl | Ausgabeverzeichnis |
|
||||
|-----------|-------------|-------------------|
|
||||
| React | `npm run build` | `build` |
|
||||
| Vue | `npm run build` | `dist` |
|
||||
| Next.js | `next build` | - |
|
||||
| Reines HTML | - | Projektverzeichnis |
|
||||
|
||||
### Schritt 4: Bereitstellen
|
||||
|
||||
Klicke auf "Deploy" und warte bis der Build abgeschlossen ist. Du erhaeltst eine `xxx.vercel.app`-Domain.
|
||||
|
||||
### Schritt 5: Eigene Domain (optional)
|
||||
|
||||
In den Projekteinstellungen unter "Domains" kannst du deine eigene Domain hinzufuegen.
|
||||
|
||||
---
|
||||
|
||||
# 3. Netlify
|
||||
|
||||
Netlify ist eine weitere beliebte Frontend-Bereitstellungsplattform mit umfassenden Funktionen.
|
||||
|
||||
- **Umfassende Funktionen**: Formularverarbeitung, Authentifizierung, Edge-Funktionen
|
||||
- **Tiefe Git-Integration**: GitHub, GitLab, Bitbucket
|
||||
- **Zweig-Vorschau**: Jeder Zweig erhaelt automatisch einen Vorschaulink
|
||||
- **Globales CDN**: Automatische weltweite Verteilung
|
||||
- **Formularverarbeitung**: Formulareingaben ohne Backend-Code
|
||||
|
||||
## Netlify verwenden
|
||||
|
||||
### Schritt 1: Konto registrieren
|
||||
|
||||
Besuche [Netlify](https://www.netlify.com) und klicke auf "Sign up".
|
||||
|
||||
### Schritt 2: Projekt importieren
|
||||
|
||||
1. Klicke auf "Add new site" > "Import an existing project"
|
||||
2. Waehle dein Code-Hosting-Plattform
|
||||
3. Autorisiere Netlify fuer den Zugriff auf dein Repository
|
||||
|
||||
### Schritt 3: Build-Einstellungen konfigurieren
|
||||
|
||||
| Framework | Build-Befehl | Veroeffentlichungsverzeichnis |
|
||||
|-----------|-------------|------------------------------|
|
||||
| React | `npm run build` | `build` |
|
||||
| Vue | `npm run build` | `dist` |
|
||||
| Angular | `ng build` | `dist/<Projektname>` |
|
||||
| Next.js | `next build` | `out` |
|
||||
| Reines HTML | - | `.` |
|
||||
|
||||
### Schritt 4: Bereitstellen
|
||||
|
||||
Klicke auf "Deploy site". Nach Abschluss erhaeltst du eine `xxx.netlify.app`-Domain.
|
||||
|
||||
### Schritt 5: Eigene Domain (optional)
|
||||
|
||||
1. Gehe zu Site-Einstellungen > "Domain management"
|
||||
2. Klicke auf "Add custom domain"
|
||||
3. Konfiguriere DNS-Eintraege
|
||||
|
||||
### Besondere Funktionen
|
||||
|
||||
#### Formularverarbeitung
|
||||
|
||||
```html
|
||||
<form name="contact" netlify>
|
||||
<p>
|
||||
<label>Name: <input type="text" name="name" /></label>
|
||||
</p>
|
||||
<p>
|
||||
<label>E-Mail: <input type="email" name="email" /></label>
|
||||
</p>
|
||||
<p>
|
||||
<label>Nachricht: <textarea name="message"></textarea></label>
|
||||
</p>
|
||||
<p>
|
||||
<button type="submit">Senden</button>
|
||||
</p>
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Netlify Functions
|
||||
|
||||
```javascript
|
||||
exports.handler = async (event, context) => {
|
||||
return {
|
||||
statusCode: 200,
|
||||
body: JSON.stringify({ message: "Hello from Netlify!" })
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
#### Lokale Entwicklung
|
||||
|
||||
```bash
|
||||
# Netlify CLI installieren
|
||||
npm install -g netlify-cli
|
||||
|
||||
# Anmelden
|
||||
netlify login
|
||||
|
||||
# Lokalen Entwicklungsserver starten
|
||||
netlify dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 4. Zeabur
|
||||
|
||||
Zeabur ist eine aufstrebende Bereitstellungsplattform, besonders geeignet fuer komplexe Projekte mit mehreren Diensten.
|
||||
|
||||
- **Reichhaltige Service-Vorlagen**: Dify, n8n, Datenbanken und mehr
|
||||
- **Mehrere Bereitstellungsmethoden**: GitHub, Vorlagen, Docker, lokale Projekte
|
||||
- **Flexible Service-Kombinationen**: Mehrere verbundene Dienste in einem Projekt
|
||||
- **Nutzungsabhaengige Abrechnung**: Bezahlung nur fuer tatsaechliche Nutzung
|
||||
|
||||
## Dify mit Zeabur bereitstellen
|
||||
|
||||
|
||||
|
||||
Oeffne die [Zeabur-Konsole](https://zeabur.com/projects) und klicke auf "New Project".
|
||||
|
||||
|
||||
|
||||
Die Erstellungsmethoden umfassen:
|
||||
|
||||
1. **GitHub**: Verbindung zu deinem GitHub-Konto
|
||||
2. **Vorlage (Template)**: Basierend auf Vorlagen bereitstellen
|
||||
3. **Datenbanken**: Datenbank-Services bereitstellen
|
||||
4. **Funktionen (Functions)**: JavaScript- oder Python-Code bereitstellen
|
||||
5. **Lokales Projekt**: Ordner hochladen
|
||||
6. **Docker-Image**: Bereitgestelltes Docker-Image deployen
|
||||
|
||||
|
||||
|
||||
Waehle **Vorlage** und suche nach "dify". Waehle eine Version aus.
|
||||
|
||||
|
||||
|
||||
Gib einen Namen ein, um eine temporaere Domain zu generieren.
|
||||
|
||||
|
||||
|
||||
Warte, bis alle Dienste gestartet sind. Klicke auf den Nginx-Service, um die Zugriffsadresse zu erhalten.
|
||||
|
||||
|
||||
|
||||
Nach kurzer Wartezeit siehst du die Dify-Anmeldeseite.
|
||||
|
||||
|
||||
|
||||
## Schlangenspiel mit Zeabur und Trae bereitstellen
|
||||
|
||||
### HTML-Framework verwenden
|
||||
|
||||
|
||||
|
||||
Lass Trae ein HTML-basiertes Schlangenspiel generieren und lade den Ordner ueber Zeaburs lokale Bereitstellung hoch.
|
||||
|
||||
|
||||
|
||||
Klicke auf "Network" > "Generate Domain", um eine oeffentliche Adresse zu erstellen.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### React-Framework verwenden
|
||||
|
||||
|
||||
|
||||
React-Anwendungen erfordern eine Anpassung des Standard-Ports, da Zeabur nur Anwendungen auf Port 8080 unterstuetzt.
|
||||
|
||||
Aendere den Standard-Port von 3000 auf 8080, z. B. indem du Trae anweist: "Bitte aendere den Standard-Port dieses React-Projekts auf 8080."
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Projekte stoppen und loeschen (Zeabur)
|
||||
|
||||
Da aktivierte Serverressourcen Kosten verursachen, solltest du ungenutzte Dienste immer rechtzeitig stoppen.
|
||||
|
||||
Klicke auf "Settings" im Projekt, scrolle nach unten:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- **Suspend All Services**: Alle Dienste pausieren
|
||||
- **Restart All Services**: Alle Dienste neu starten
|
||||
- **Delete Project**: Projekt vollstaendig loeschen
|
||||
|
||||
---
|
||||
|
||||
# Zusammenfassung
|
||||
|
||||
In diesem Tutorial haben wir vier haeufig genutzte Web-Bereitstellungsplattformen vorgestellt:
|
||||
|
||||
1. **Tencent Cloud CloudBase**: Fuer chinesische Nutzer, schnelle Zugriffsgeschwindigkeit
|
||||
2. **Vercel**: Fuer moderne Frontend-Framework-Projekte, enge GitHub-Integration
|
||||
3. **Netlify**: Umfassende Funktionen, Formularverarbeitung und Authentifizierung
|
||||
4. **Zeabur**: Fuer komplexe Projekte mit mehreren Diensten
|
||||
|
||||
Der Kernprozess ist bei allen Plattformen aehnlich: Code vorbereiten > Plattform waehlen > Build-Einstellungen konfigurieren > Bereitstellen. Mit diesen Faehigkeiten kannst du deine entwickelten Anwendungen mit der ganzen Welt teilen!
|
||||
@@ -0,0 +1,362 @@
|
||||
# Vom Design-Prototyp zum Projektcode
|
||||
|
||||
::: tip :dart: Kernfrage
|
||||
**Wie wandelt man Prototypen aus Designtools in tatsaechlich im Browser ausfuehrbaren Frontend-Code um?**
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 1. Drei Pfade vom Prototyp zum Code
|
||||
|
||||
Nachdem man mit modernen Frontend-Designtools wie Figma oder MasterGo das Interface-Design abgeschlossen hat, stellt sich naturgemaess eine praktische Frage: Wie wandelt man diese strukturell vollstaendigen Designentwuerfe in tatsaechlich im Browser ausfuehrbaren Frontend-Code um?
|
||||
|
||||
Im Allgemeinen gibt es drei typische Pfade vom Prototyp zum Code:
|
||||
|
||||
| Pfad | Methode | Merkmale | Anwendungsbereich |
|
||||
|------|----------|-----------|-------------------|
|
||||
| **Pfad 1** | Basierend auf Bildern, multimodale Grossmodelle verwenden, um Code direkt zu rekonstruieren | Flexibel, kein spezielles Tool erforderlich | Schnelle Prototyp-Validierung, einfache Seiten |
|
||||
| **Pfad 2** | Durch plattformeigene Faehigkeiten oder Plugins verwendbaren Code exportieren | Hohe Genauigkeit, gute Editierbarkeit | Figma/MasterGo-Nutzer |
|
||||
| **Pfad 3** | Plattform kombiniert mit MCP-Faehigkeiten, um verwendbaren Code zu exportieren | Hoher Automatisierungsgrad, anpassbar | Workflows, die tiefe Integration erfordern |
|
||||
|
||||
Dieser Artikel stellt die spezifischen Implementierungsmethoden dieser drei Pfade im Detail vor und hilft dir, den geeignetsten Workflow basierend auf deinen Projektanforderungen auszuwaehlen.
|
||||
|
||||
::: tip :books: Vorkenntnisse
|
||||
Bevor du mit diesem Abschnitt beginnst, empfehlen wir dir, das Tutorial [Einfuehrung in Figma und MasterGo](../figma-mastergo/) durchzuarbeiten, um die Grundlagen der Frontend-Designtools zu beherrschen.
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 2. Pfad 1: Multimodale AI direkte Code-Rekonstruktion
|
||||
|
||||
Grossmodelle mit visuellen Faehigkeiten sind von Natur aus in der Lage, Bilder in Code umzuwandeln. Wir muessen nur den Screenshot des Designentwurfs direkt in den Dialog importieren und das Grossmodell dann den vollstaendigen Ergebniscode generieren lassen.
|
||||
|
||||
### 2.1 Arbeitsablauf
|
||||
|
||||
1. **Design-Screenshot erstellen**
|
||||
- In Figma oder MasterGo die entworfene Seite als PNG oder JPG exportieren
|
||||
- Sicherstellen, dass der Screenshot das vollstaendige Seitenlayout enthaelt
|
||||
|
||||
2. **Multimodales AI-Modell auswaehlen**
|
||||
- Modelle wie Gemini, Qwen, Claude etc. verwenden, die Bildeingabe unterstuetzen
|
||||
- Hier wird als Beispiel Gemini verwendet
|
||||
|
||||
3. **Prompt schreiben**
|
||||
```
|
||||
Bitte generiere den entsprechenden HTML/CSS-Code basierend auf diesem Design.
|
||||
Anforderungen:
|
||||
- Modernes CSS-Layout (Flexbox/Grid) verwenden
|
||||
- Responsives Design, Anpassung an verschiedene Bildschirmgroessen
|
||||
- Alle sichtbaren UI-Elemente einbeziehen
|
||||
- Farben und Schriftgroessen moeglichst originalgetreu wiedergeben
|
||||
```
|
||||
|
||||
|
||||
|
||||
4. **Code abrufen und speichern**
|
||||
- Das Modell um vollstaendigen HTML-Code bitten
|
||||
- Als einzelne `.html`-Datei speichern, fuer lokale Tests
|
||||
- Spaeter in der lokalen IDE in React oder andere Frameworks konvertieren
|
||||
|
||||
### 2.2 Haeufige Probleme und Loesungen
|
||||
|
||||
Seitengenerierung ist keine einfache Aufgabe. Im konkreten Prozess koennen viele Probleme auftreten:
|
||||
|
||||
| Problem | Loesung |
|
||||
|----------|----------|
|
||||
| Ungleichmaessige Interface-Anordnung | AI das spezifische Layout-Problem beschreiben, Anpassung von CSS margin/padding fordern |
|
||||
| Interface wird nicht vollstaendig angezeigt | Pruefen, ob der korrekte viewport gesetzt ist, responsive Breakpoints hinzufuegen |
|
||||
| Farbgenauigkeit unzureichend | Farbwaehler-Tool verwenden, um exakte Farbwerte aus dem Design zu ermitteln und AI zur Verfuegung zu stellen |
|
||||
| Schriftarten stimmen nicht ueberein | Spezifischen Schriftnamen angeben oder Google Fonts als Alternative fordern |
|
||||
|
||||
::: tip :bulb: Tipp
|
||||
Es wird empfohlen, zunaechst HTML-Code zu generieren und nach dem Erhalt in der lokalen IDE in das React-Framework zu konvertieren. So erhaeltst du mehrere unabhaengige HTML-Dateien, die einheitlich in das Framework konvertiert werden koennen.
|
||||
:::
|
||||
|
||||
### 2.3 MasterGo AI Seitengenerierung
|
||||
|
||||
MasterGo bietet ebenfalls eine leistungsstarke AI-Seitengenerierungsfunktion, die basierend auf Referenzbildern direkt verwendbaren Webcode generieren kann.
|
||||
|
||||
#### AI-Funktionseinstieg finden
|
||||
|
||||
In der MasterGo-Editor-Oberflaeche kannst du den AI-Tool-Button oben in der Werkzeugleiste finden:
|
||||
|
||||
|
||||
|
||||
#### Generierungsablauf
|
||||
|
||||
1. **Referenzbild hochladen**
|
||||
- Dasselbe Verfahren wie bei der multimodalen AI verwenden, um Design-Referenzbilder hochzuladen
|
||||
- Textbeschreibung der Anforderungen hinzufuegen
|
||||
|
||||
2. **Generierungsergebnis anzeigen**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. **Code abrufen**
|
||||
- Auf den blauen Button "Auf Leinwand einfuegen" klicken, um die generierte Webseite direkt zu bearbeiten
|
||||
- Oder rechts auf den "Code"-Button klicken, um den Code-Inhalt lokal zu kopieren
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 3. Pfad 2: Plattformeigene Faehigkeiten oder Plugins zum Code-Export
|
||||
|
||||
### 3.1 Figma Make Code generieren
|
||||
|
||||
Figma Make ist ein offizielles AI-Design-Tool von Figma, das basierend auf Benutzereingaben oder Referenzbildern Webseiten-Prototyp-UI-Interfaces hochpraezise rekonstruieren kann.
|
||||
|
||||
#### Funktionsmerkmale
|
||||
|
||||
- **Hohe Praezision**: Bessere Ergebnisse als bei nativer AI-Code-Generierung
|
||||
- **Editierbarkeit**: Generierungsergebnisse koennen in bearbeitbare Figma-Design-Dateien konvertiert werden
|
||||
- **GitHub-Integration**: Direkte Synchronisierung des Codes mit GitHub wird unterstuetzt
|
||||
|
||||
::: tip :key: Berechtigungshinweis
|
||||
Die volle Funktionalitaet von Figma Make erfordert Pro-Benutzerrechte. Studenten koennen durch Bildungszertifizierung kostenlos Pro-Rechte erhalten.
|
||||
:::
|
||||
|
||||
#### Arbeitsschritte
|
||||
|
||||
1. **Figma Make oeffnen**
|
||||
- Auf der Figma-Startseite auf den Make-Button klicken
|
||||
- Oder [Figma Make](https://www.figma.com/make) aufrufen
|
||||
|
||||
2. **Referenzbild hochladen**
|
||||
- Das Design, das du rekonstruieren moechtest, in den Dialog hochladen
|
||||
- Prompt zur Beschreibung der Anforderungen hinzufuegen
|
||||
|
||||
|
||||
|
||||
3. **Generierungsergebnis anzeigen**
|
||||
- Nach kurzer Wartezeit wird das Rendering-Ergebnis angezeigt
|
||||
- Auf den Abspiel-Button oben rechts fuer Vollbild-Vorschau klicken
|
||||
|
||||
|
||||
|
||||
4. **Detailanpassungen**
|
||||
- Auf das Editor-Icon oben rechts klicken (Maus- und Lineal-Icon)
|
||||
- Zurueck zur vertrauten Figma-Editor-Oberflaeche fuer detaillierte Anpassungen
|
||||
|
||||
|
||||
|
||||
5. **Code exportieren**
|
||||
- Nach zufrieden stellenden Anpassungen den Code-Export auswaehlen
|
||||
- Kann direkt mit GitHub verbunden werden, um Code zu speichern
|
||||
|
||||
|
||||
|
||||
### 3.2 Plugin-Code-Export
|
||||
|
||||
Zusaetzlich zu den nativen AI-Funktionen der Plattform unterstuetzen sowohl Figma als auch MasterGo den Code-Export ueber Plugins:
|
||||
|
||||
**Haeufige Figma-Plugins:**
|
||||
- **Figma to Code**: Designentwuerfe in React-, Vue-, HTML- und anderen Code konvertieren
|
||||
- **Anima**: High-Fidelity-Code-Generierung, unterstuetzt Interaktionseffekte
|
||||
- **Locofy**: AI-gesteuertes Design-zu-Code-Tool
|
||||
|
||||
**Verwendungsschritte:**
|
||||
1. In Figma das Plugin-Panel (Plugins) oeffnen
|
||||
2. Das gewuenschte Code-Export-Plugin suchen und installieren
|
||||
3. Das zu exportierende Design-Element auswaehlen
|
||||
4. Das Plugin ausfuehren, das Zielframework und das Codeformat waehlen
|
||||
5. Den generierten Code kopieren oder herunterladen
|
||||
|
||||
---
|
||||
|
||||
## 4. Pfad 3: Plattform kombiniert mit MCP-Faehigkeiten zum Code-Export
|
||||
|
||||
### 4.1 Was ist MCP?
|
||||
|
||||
MCP (Model Context Protocol, Modellkontext-Protokoll) ist ein offener Standard, der es AI-Modellen ermoeglicht, sicher und kontrolliert auf externe Tools und Datenquellen zuzugreifen. Im Kontext von Frontend-Designtools ermoeglicht MCP Grossmodellen den direkten Zugriff auf die Struktur, Stile und Komponenteninformationen von Designdateien, um so praeziseren Code zu generieren.
|
||||
|
||||
### 4.2 Funktionsweise von MCP
|
||||
|
||||
```
|
||||
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
|
||||
│ AI-Modell │ ←→ │ MCP-Server │ ←→ │ Designtool │
|
||||
│ (Claude etc.)│ │ (Protokoll- │ │(Figma/MasterGo)│
|
||||
│ │ │ anpassung) │ │ │
|
||||
└─────────────┘ └─────────────┘ └─────────────┘
|
||||
```
|
||||
|
||||
**Arbeitsablauf:**
|
||||
1. Das AI-Modell sendet ueber das MCP-Protokoll eine Anfrage an das Designtool
|
||||
2. Das Designtool gibt strukturierte Designdaten zurueck (Ebenen, Stile, Komponenten etc.)
|
||||
3. Das AI-Modell versteht die Designstruktur und generiert den entsprechenden Code
|
||||
4. Der Code kann direkt exportiert oder in die Entwicklungsumgebung synchronisiert werden
|
||||
|
||||
### 4.3 Figma + MCP in der Praxis
|
||||
|
||||
#### Umgebungsvorbereitung
|
||||
|
||||
1. **MCP-Server installieren**
|
||||
```bash
|
||||
# Figma MCP-Server mit npx installieren
|
||||
npx figma-mcp-server
|
||||
```
|
||||
|
||||
2. **Claude Desktop oder ein anderes MCP-unterstuetztes AI-Tool konfigurieren**
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"figma": {
|
||||
"command": "npx",
|
||||
"args": ["figma-mcp-server"],
|
||||
"env": {
|
||||
"FIGMA_ACCESS_TOKEN": "your-figma-token"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. **Figma Access Token abrufen**
|
||||
- Bei Figma anmelden -> Settings -> Personal Access Tokens
|
||||
- Neuen Token generieren und speichern
|
||||
|
||||
#### Verwendung
|
||||
|
||||
1. **MCP-Verbindung im AI-Tool aktivieren**
|
||||
- Claude Code oder eine andere MCP-unterstuetzte IDE oeffnen
|
||||
- Sicherstellen, dass der MCP-Server verbunden ist
|
||||
|
||||
2. **Designdatei-Link bereitstellen**
|
||||
```
|
||||
Nutzer: Bitte hilf mir, dieses Figma-Design in React-Code umzuwandeln
|
||||
Link: https://www.figma.com/file/xxxxx
|
||||
|
||||
AI: Ich habe ueber MCP eine Verbindung zu Figma hergestellt und lese die Designdatei-Struktur...
|
||||
```
|
||||
|
||||
3. **AI analysiert automatisch und generiert Code**
|
||||
- Der MCP-Server ruft den Ebenenbaum der Designdatei ab
|
||||
- AI versteht die Komponentenstruktur und die Stileigenschaften
|
||||
- Generiert React/Vue-Komponenten mit korrekter Benennung und Struktur
|
||||
|
||||
4. **Iterative Optimierung**
|
||||
```
|
||||
Nutzer: Bitte extrahiere die Button-Komponente als eigenstaendige wiederverwendbare Komponente
|
||||
|
||||
AI: Gerne. Ich habe ueber MCP die Button-Komponente im Designsystem identifiziert
|
||||
und generiere gerade eine React-Komponente mit Props-Interface...
|
||||
```
|
||||
|
||||
### 4.4 Vorteile von MCP
|
||||
|
||||
| Merkmal | Traditionelle Methode | MCP-Methode |
|
||||
|----------|----------------------|-------------|
|
||||
| **Datenpraesion** | Abhaengig von Screenshots, Details koennen verloren gehen | Direkter Zugriff auf Original-Designdaten |
|
||||
| **Komponenten-Erkennung** | AI muss Komponentengrenzen erraten | Praeziser Zugriff auf Komponentendefinitionen |
|
||||
| **Stil-Genauigkeit** | Basiert auf Pixel-Schaetzungen | Zugriff auf exakte Design-Tokens |
|
||||
| **Iterationseffizienz** | Bei jeder Aenderung muss ein neuer Screenshot erstellt werden | Echtzeit-Synchronisierung von Designaenderungen |
|
||||
| **Automatisierungsgrad** | Manuelles Kopieren und Einfuegen | Direktes Schreiben in Projektdateien |
|
||||
|
||||
### 4.5 Aktuell verfuegbare MCP-Tools
|
||||
|
||||
**Designtool-MCP:**
|
||||
- **Figma MCP Server**: Offiziell unterstuetzte MCP-Implementierung
|
||||
- **MasterGo MCP**: Von der Community entwickelter MasterGo-Adapter
|
||||
|
||||
**Entwicklungsumgebungs-MCP:**
|
||||
- **Claude Code**: Nativer Support fuer das MCP-Protokoll
|
||||
- **Cline**: VS-Code-Plugin, unterstuetzt MCP-Verbindungen
|
||||
- **Trae**: MCP-Funktionalitaet kann durch Konfiguration aktiviert werden
|
||||
|
||||
::: tip :crystal_ball: Zukunftsperspektive
|
||||
Das MCP-Protokoll entwickelt sich rasant weiter. Die Integration zwischen Designtools und Entwicklungsumgebungen wird noch enger werden. Es ist mit weiteren One-Click-Design-zu-Code-Loesungen zu rechnen, die die Luecke zwischen Design und Entwicklung weiter verkleinern.
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 5. Arbeiten nach dem Code-Export
|
||||
|
||||
### 5.1 Lokale Tests
|
||||
|
||||
Nach dem Abrufen des Codes in der lokalen IDE oeffnen und testen:
|
||||
|
||||
1. **Neues Projekt erstellen**
|
||||
```bash
|
||||
# Bei HTML-Dateien direkt im Browser oeffnen
|
||||
open index.html
|
||||
|
||||
# Bei React/Vue-Projekten
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
2. **Mit AI IDE zusammenarbeiten**
|
||||
- Den generierten Code in Trae oder eine andere AI IDE importieren
|
||||
- AI bei der Behebung von Layout-Problemen und dem Hinzufuegen von Interaktivitaet helfen lassen
|
||||
|
||||
### 5.2 Haeufige Probleme und Loesungen
|
||||
|
||||
| Phase | Problem | Loesung |
|
||||
|-------|---------|----------|
|
||||
| Layout | Elemente verschoben | CSS display- und position-Eigenschaften pruefen |
|
||||
| Stil | Farben inkonsistent | Browser-Entwicklertools verwenden, um tatsaechlich angewandte Farbwerte zu pruefen |
|
||||
| Responsive | Darstellung auf Mobilgeraeten fehlerhaft | Media-Query-Breakpoints hinzufuegen |
|
||||
| Interaktion | Button reagiert nicht | JavaScript-Ereignisbindung pruefen |
|
||||
|
||||
---
|
||||
|
||||
## 6. Vergleich der drei Pfade und Auswahl-Empfehlungen
|
||||
|
||||
### 6.1 Pfad-Vergleich
|
||||
|
||||
| Dimension | Pfad 1: Multimodale AI | Pfad 2: Plattform-Faehigkeiten | Pfad 3: MCP |
|
||||
|------------|------------------------|-------------------------------|-------------|
|
||||
| **Einstiegsschwierigkeit** | :star: Einfach | :star::star: Mittel | :star::star::star: Anspruchsvoll |
|
||||
| **Rekonstruktionsgenauigkeit** | :star::star::star: Mittel | :star::star::star::star: Hoch | :star::star::star::star::star: Hoechste |
|
||||
| **Flexibilitaet** | :star::star::star::star::star: Hoch | :star::star::star: Mittel | :star::star::star::star: Hoch |
|
||||
| **Automatisierungsgrad** | :star::star: Niedrig | :star::star::star: Mittel | :star::star::star::star::star: Hoechster |
|
||||
| **Kosten** | Niedrig (nach API-Aufruf) | Mittel (moeglicherweise Pro noetig) | Niedrig (Open-Source-Tools) |
|
||||
|
||||
### 6.2 Auswahl-Empfehlungen
|
||||
|
||||
**Pfad 1 (Multimodale AI) waehlen, wenn:**
|
||||
- Schnelle Ideenvalidierung noetig ist
|
||||
- Das Designtool nicht feststeht und haeufig gewechselt wird
|
||||
- Keine hohen Anforderungen an die Rekonstruktionsgenauigkeit bestehen
|
||||
- Das Budget begrenzt ist
|
||||
|
||||
**Pfad 2 (Plattform-Faehigkeiten) waehlen, wenn:**
|
||||
- Das Team hauptsaechlich Figma oder MasterGo verwendet
|
||||
- Hochpraezise Code-Rekonstruktion erforderlich ist
|
||||
- Designer und Entwickler haeufig zusammenarbeiten muessen
|
||||
- Bereit, in eine Pro-Version zu investieren
|
||||
|
||||
**Pfad 3 (MCP) waehlen, wenn:**
|
||||
- Hoechstmöglicher Automatisierungsgrad angestrebt wird
|
||||
- Die technische Kompetenz zur Konfiguration einer MCP-Umgebung vorhanden ist
|
||||
- Das Projekt haeufige Iterationen von Design zu Code erfordert
|
||||
- Ein standardisierter Design-Entwicklungs-Workflow aufgebaut werden soll
|
||||
|
||||
---
|
||||
|
||||
## 7. Zusammenfassung
|
||||
|
||||
Durch dieses Kapitel hast du die drei Kernpfade vom Design-Prototyp zum Code kennengelernt:
|
||||
|
||||
1. **Multimodale AI-Direktkonvertierung**: Flexibel und schnell, geeignet fuer Prototyp-Validierung
|
||||
2. **Plattforme native Faehigkeiten**: Hohe Genauigkeit, geeignet fuer professionelle Design-Workflows
|
||||
3. **MCP-Protokoll-Integration**: Hoechster Automatisierungsgrad, repraesentiert den Trend der Zukunft
|
||||
|
||||
::: tip :bulb: Best Practices
|
||||
- **Anfaenger-Empfehlung**: Mit Pfad 1 (multimodale AI) beginnen, um schnell einzusteigen
|
||||
- **Team-Zusammenarbeit**: Pfad 2 (Plattform-Faehigkeiten) verwenden, um Design-Konsistenz zu gewaehrleisten
|
||||
- **Effizienz-Prioritaet**: Pfad 3 (MCP) ausprobieren, um einen automatisierten Workflow aufzubauen
|
||||
- **Gemischte Nutzung**: Je nach Projektphase flexibel zwischen verschiedenen Pfaden wechseln
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## Referenzressourcen
|
||||
|
||||
- [Einfuehrung in Figma und MasterGo](../figma-mastergo/) - Grundlagen der Designtools erlernen
|
||||
- [Gemeinsam Hogwarts-Portraets erstellen](../hogwarts-portraits/) - Vollstaendiges Projektpraktikum
|
||||
- [MCP Offizielle Dokumentation](https://modelcontextprotocol.io/) - Protokolldetails kennenlernen
|
||||
- [Figma Make Offizielle Dokumentation](https://help.figma.com/hc/en-us/sections/360007453634-Figma-Make)
|
||||
- [MasterGo AI Tutorials](https://mastergo.com/tutorials)
|
||||
@@ -0,0 +1,303 @@
|
||||
# Einfuehrung in Figma und MasterGo
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const relatedArticles = relatedArticlesMap['de-de/stage-2/frontend/figma-mastergo'] ?? []
|
||||
</script>
|
||||
|
||||
::: tip :dart: Kernfrage
|
||||
**Wie erstellt man von Grund auf Webseitenprototypen mit modernen Designtools?**
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 1. Warum sollte man Frontend-Designtools lernen?
|
||||
|
||||
Bevor wir beginnen, muessen wir eine Frage klaeren: Warum muss man "Frontend-Designtools" lernen? Man kann doch mit HTML/CSS-Code Seiten aufbauen -- ist es wirklich notwendig, noch eine zusaetzliche Software und Technologie zu lernen?
|
||||
|
||||
In Wirklichkeit ist das Betreiben einer Seite und das gute Produktdesign zwei voellig unterschiedliche Konzepte. Code kuemmert sich nur darum, wie etwas im Browser gerendert und auf verschiedenen Geraeten ausgefuehrt wird; Frontend-Designtools loesen das Problem der Informationsverteilung -- wie Frontend-Interaktionen angeordnet werden, wie zwischen verschiedenen Seiten navigiert wird, wie visuelle Prioritaeten verteilt werden. Man muss nur in einem Designtool eine Leinwand erstellen, um Layout, Informationsebenen und Interaktionsmethoden auf einem Bildschirm vergleichen und die geeignetste Praesentationsform bestimmen zu koennen.
|
||||
|
||||
Wenn man direkt mit dem Schreiben von Code beginnt oder AI komplette Frontend-Seiten generieren laesst, ist das Benutzererlebnis in der Regel nicht besonders gut. Ein durchdachtes Produkt beruecksichtigt den Komfort der Benutzerinteraktion sowie die Inhaltsverteilung, die verschiedene Seiten vermitteln sollen. Aus der Perspektive des Benutzers wird zuerst das Frontend-Seitenlayout entworfen und dann in Code umgewandelt oder generiert.
|
||||
|
||||
Zudem senken Frontend-Designtools aus Sicht der Teamzusammenarbeit die Kooperationskosten zwischen verschiedenen Parteien: Designer, Produktmanager und Entwickler muessen nicht mehr einzeln mentale Bilder oder abstrakte Codebeschreibungen interpretieren. Stattdessen wird eine kooperative Arbeit ermoeglicht, bei der alle um eine sichtbare, kommentierbare und iterierbare Leinwand diskutieren koennen -- mit Versionsverwaltung, Anforderungsaenderungen und Feedback. Darueber hinaus sind moderne Frontend-Designtools laengst keine reinen Zeichenprogramme mehr: Mit einem Klick koennen Teilcodes generiert, Designsysteme und Komponentenbibliotheken verwaltet werden. Die neuen Designtools koennen viel repetitive Handarbeit (Ausrichten, Bemassen, Exportieren, Aendern von Stilen) automatisieren oder in Stapelverarbeitung ausfuehren, was die Entwicklungseffizienz beim Seitendesign enorm steigert.
|
||||
|
||||
|
||||
|
||||
### 1.1 Die Entwicklung der Frontend-Designtools
|
||||
|
||||
Im Laufe der Zeit hat sich das, was man als Frontend-Designtool bezeichnet, kontinuierlich weiterentwickelt. Von der Photoshop-Aera der 90er Jahre, die hauptsaechlich auf lokales Bitmap-Editing ausgerichtet war, ueber die Vektorisierung und Komponenten-Workflows, die Sketch um 2010 einleitete, bis hin zu Figma, das ab 2016 die Zusammenarbeit konsequent in die Cloud verlagerte -- Designteams gingen von der Einzelarbeit schrittweise zur Echtzeit-Zusammenarbeit mehrerer Personen ueber. Im Jahr 2025 ist AI tatsaechlich in diese Tools integriert worden: Von "Seitenentwuerfe aus einem Satz generieren" bis hin zu "Designs direkt in ausfuehrbare Frontend-Strukturen umwandeln" -- "Design als Code" und "Mensch-Maschine-Kooperation" werden von Konzepten zu nutzbarer Produktivitaet.
|
||||
|
||||
In diesem Abschnitt stellen wir die zwei repraesentativsten modernen Frontend-Designtools vor: Figma und MasterGo. Einerseits decken beide die Kernfaehigkeiten moderner UI/UX ab (Vektor-Editing, Komponentensysteme, Auto-Layout, Code-Uebergabe etc.) und koennen den vollstaendigen Zyklus vom Wireframe ueber High-Fidelity bis zur Entwickleruebergabe unterstuetzen. Andererseits haben beide Tools nach 2025 praktische AI-Funktionen eingefuehrt, die helfen, Designs in tatsaechlich ausfuehrbare Programme umzuwandeln, ohne das Originaldesign zu veraendern.
|
||||
|
||||
## 1.2 Die Entstehungsgeschichte
|
||||
|
||||
|
||||
|
||||
In der Zeit, bevor spezielle Frontend-Tools existierten, wurde die visuelle Gestaltung der gesamten Oberflaechen-Designbranche lange Zeit von "Allround"-Designsoftware wie Photoshop uebernommen. Designer erstellten die visuelle Gestaltung ganzer Seiten ueber lokal geschichtete Ebenen und lieferten schliesslich die durchaus voluminoesen .psd-Quelldateien an die Frontend-Entwickler -- und um das Design praezise umzusetzen, mussten die Frontend-Entwickler drei muehsame und entscheidende Aufgaben manuell erledigen:
|
||||
|
||||
Erstens das "Zerschneiden": Aus der mehrschichtigen Struktur der .psd-Datei mussten Bottons, Icons, Logos, Hintergrundmodule und andere unabhaengige visuelle Elemente einzeln extrahiert und als PNG, JPG und andere webfaehige Bildformate exportiert werden (da Webseiten die PSD-Ebeneninformationen nicht direkt erkennen koennen und nur auf diese zerteilten Bilder zur Darstellung von Details zurueckgreifen koennen).
|
||||
|
||||
|
||||
|
||||
Zweitens das "Ausmessen": Mit dem im Programm integrierten Messwerkzeug mussten Breite, Hoehe und Abstaende (margin/padding) zwischen verschiedenen Modulen elementweise erfasst werden, um sicherzustellen, dass alle Masse bis auf das Pixel genau stimmten.
|
||||
|
||||
|
||||
|
||||
Drittens das "Bemassen": Aus dem Design mussten die "unsichtbaren, aber notwendigen" impliziten Parameter extrahiert werden -- wie Schriftgroesse, Schriftgewicht, Zeilenabstand, RGB- oder HEX-Farbwerte jedes Farbblocks usw. Dies entsprach dem manuellen "Herauskratzen" derjenigen "Designspezifikationen", die der Designer nicht auf Papier geschrieben hatte.
|
||||
|
||||
|
||||
|
||||
Erst danach begann die eigentliche Frontend-Implementierungsphase. Unabhaengig davon, ob natives HTML/CSS/JS oder Frameworks wie Vue, React verwendet wurden, war der grundsaetzliche Prozess derselbe. Das Frontend nutzte den "Container als zentrales Traegerelement" und baute die Seitenstruktur basierend auf der Hierarchie und Semantik der einzelnen Module im Design neu auf. Ein Container ist hierbei eine Einheit mit klar definierten Layout-Grenzen, die speziell dazu dient, untergeordnete Elemente aufzunehmen und zu organisieren. Er stellt selbst keinen konkreten Inhalt dar, definiert aber ueber Flex, Grid und andere Regeln den Anordnungsbereich fuer die internen Elemente. Die "Strukturbloecke" (wie obere Navigationsleiste, Seitenleiste, Artikellistenbereich, untere Fusszeile und andere sichtbare Funktions- oder Inhaltsbereiche) basieren auf diesen Containern; innerhalb jedes Strukturblocks sind wiederum kleinere Container verschachtelt, die Elemente organisieren -- zum Beispiel besteht ein Artikellisteneintrag aus einem "Listeneintrag-Container", der Innenabstaende und Gesamtlayout steuert und dann Titel, Zusammenfassung, Zeitstempel, Titelbild und weitere Detailelemente umschliesst.
|
||||
|
||||
|
||||
|
||||
In modernen Frontend-Frameworks werden diese "Strukturbloecke (samt zugehoeriger Container und Elemente)" in der Regel als "Komponenten" implementiert. Eine Komponente kann vereinfacht verstanden werden als: eine wiederverwendbare Interface-Einheit mit klaren Grenzen, die Container-Layout und Logik integriert. Sie enthaelt sowohl Container, die Erscheinungsbild und Anordnung steuern (z. B. definiert die "Button-Komponente" Breite, Hoehe und Abrundung ueber einen Container; die "Artikelkarten-Komponente" organisiert die Position von Titel und Titelbild ueber einen Container), als auch Interaktionslogik. Teile, die im Design wiederholt auftauchen und eine einheitliche Form haben (wie einheitlich gestylte Buttons oder mehrfach verwendete Artikelkarten), werden im Code als Komponenten abstrahiert: Sie koennen in verschiedenen Seiten und Szenarien wiederverwendet werden, was doppelte Entwicklung reduziert, und durch die einheitlichen Regeln der internen Container wird sichergestellt, dass Layout und Stil an allen Verwendungsstellen hoechst konsistent sind.
|
||||
|
||||
Anschliessend verwendet das Frontend ein Stilsystem, um Visuelles und Layout zu reproduzieren. Die im Zerschneide-Schritt exportierten Ressourcen wie PNG/JPG werden als `<img>`, Hintergrundbilder innerhalb von Komponenten oder Strukturbloecken eingebunden oder gemaess den Empfehlungen des jeweiligen Frameworks als statische Ressourcen importiert. Die im Ausmessen-Schritt ermittelten Werte fuer Breite, Hoehe, Abstaende und Zeilenhoehen werden als `width`, `height`, `margin`, `padding`, `line-height` und andere Stileigenschaften auf die entsprechenden Komponenten oder Strukturbloecke angewendet. Die im Bemassen-Schritt erfassten Farben, Schriften, Schatten, Abrundungen sowie Hover-/Active-Zustaende werden in konkrete Loesungen wie CSS, CSS Modules, CSS-in-JS oder Tailwind umgesetzt -- als `color`, `font-family`, `font-size`, `box-shadow`, `border-radius` sowie Pseudoklassen oder Zustandsklassen. An diesem Punkt liefern Zerschneiden, Ausmessen und Bemassen einen Satz praeziser visueller Parameter, waehrend Komponenten und Strukturbloecke die Code-Organisationseinheiten bilden, die diese Parameter aufnehmen. Beides zusammen ergibt eine wartbare, wiederverwendbare Interface-Implementierung.
|
||||
|
||||
|
||||
|
||||
Das auf lokalen Dateien zentrierte Modell war jedoch naturgemaess ineffizient. Versionen wurden per E-Mail und Cloud-Speicher uebertragen, neue und alte Entwuerfe liessen sich leicht verwechseln, und zwischen Design und Entwicklung herrschte eine grosse Abhaengigkeit von den oben beschriebenen komplexen Interaktionsmethoden -- die Kooperationskosten und Fehlerquoten waren nicht gering.
|
||||
|
||||
Mit dem Aufkommen des mobilen Internets stiegen die Anforderungen an Oberflaechenkomplexitaet und Iterationsgeschwindigkeit rasant an, und Photoshops "gross und alles umfassend" wirkte zunehmend schwerfaellig. In dieser Phase erschien Sketch. Sketch konzentrierte sich auf das UI-Design selbst und entfernte den groessten Teil der mit der visuellen Nachbearbeitung verbundenen Buerde; mit Symbols wurden haeufig wiederverwendete Elemente wie Buttons, Navigation und Eingabefelder als Komponenten strukturiert, wobei eine Aenderung global synchronisiert wurde; in Kombination mit Tools wie Zeplin wurden Bemassungen und Stil-Fragmente automatisch generiert. Sketch brachte das "Komponenten-Denken" in den Design-Workflow. Es blieb jedoch ein Desktop-basiertes lokales Datei-Programm; Echtzeit-Zusammenarbeit erforderte Umwege ueber Cloud-Speicher, Drittanbieter-Plugins oder Versionsverwaltungstools und loeste das Problem "mehrere Personen aendern gleichzeitig denselben Entwurf" nicht grundlegend.
|
||||
|
||||
|
||||
|
||||
Was die Spielregeln wirklich veraenderte, war Figma. Seit 2016 integrierte es UI-Design, Prototyping und Kommentare in den Browser und unterstuetzte eine Reihe moderner Funktionen: mehrere Echtzeit-Cursor, Online-Kommentare, Versionszeitlinien, Freigabelinks usw. -- was heute selbstverstaendlich erscheint, war damals eine direkte Herausforderung des Photoshop/Sketch-Modells.
|
||||
|
||||
|
||||
|
||||
Damit war das Oberflaechendesign nicht mehr auf Einzelcomputer verstreute Dateien, sondern auf eine einzige Online-Leinwand konzentriert, die sich in Echtzeit aktualisierte. Rund um diese Leinwand lassen sich noch weitergehende Gedanken anstellen -- die Grenze zwischen Design und Frontend-Code mit Automatisierung oder AI zu verwischen.
|
||||
|
||||
Zunaechst konnten wir nur auf verschiedene Plattform-Plugins zurueckgreifen, um Komponenten- und Stilinformationen aus Designs halbautomatisch als Code-Snippets (wie React/Vue-Komponentengerueste, CSS-Variablen etc.) zu exportieren. Der Kern bestand dabei in einer strukturierten Informationsextraktion ueber Plugins. Spaeter, mit der Weiterentwicklung der Plattformfaehigkeiten, begannen die meisten Designplattformen, die Grossmodell-MCP-Funktionalitaet (Model Context Protocol, Modellkontext-Protokoll) zu unterstuetzen: Dieses Protokoll bietet einen Standardmechanismus, der es Grossmodellen ermoeglicht, sicher und kontrolliert auf Designdateien, Plugin-Schnittstellen und Projektmetadaten zuzugreifen und so Designs noch bequemer als Code zu exportieren.
|
||||
|
||||
Darueber hinaus trat die Frontend-Code-Automatisierung auf Basis von Plugins und MCP in die Phase ein, in der nativ die Ableitung von Code-Strukturen direkt aus dem Design unterstuetzt wurde. Wir koennen im Designtool mit einem Klick Frontend-Projektgerueste, Komponentenhierarchien, Stilsysteme und entsprechende Code-Ergebnisse generieren. Dadurch werden Designer und Frontend-Entwickler von der muehsamen manuellen Uebertragung von Designdetails befreit und koennen mehr Energie in die Optimierung des Benutzererlebnisses und die Aktualisierung und Iteration von Funktionsversionen investieren.
|
||||
|
||||
---
|
||||
|
||||
## 2. Figma Einfuehrung
|
||||
|
||||
Nun kommen wir von den abstrakten Konzepten zur praktischen Bedienung. Da die Zeit begrenzt ist, werden wir nur die grundlegende Bedienlogik von Figma lernen, damit auch jemand, der noch nie ein Designtool verwendet hat, die Uebungen problemlos mitmachen kann. Wenn du eine vollstaendige Einarbeitung in alle Figma-Funktionen moechtest, empfehlen wir dir die ausfuehrlichen offiziellen Tutorials von Figma: https://help.figma.com/hc/en-us/sections/30880632542743-Figma-Design-for-beginners
|
||||
|
||||
Oder du folgst diesem Tutorial, um aehnlich wie bei einem persoenlichen Portfolio eine einfache Webseite schnell aufzubauen: https://help.figma.com/hc/en-us/sections/35895585621655-Figma-Sites-collectio
|
||||
|
||||
|
||||
|
||||
Links befindet sich der Einstieg fuer Projekterstellung und Ressourcenverwaltung, die wenigen Buttons oben rechts sind die haeufigen Figma-Funktionen. Dabei dient Make dazu, mit einem einzigen Satz von AI zuerst einen groben Interface- oder Strukturentwurf generieren zu lassen; Design ist der Hauptarbeitsbereich zum Zeichnen von Webseiten/App-Oberflaechen, zum Aufbau von Komponenten und zum Erstellen von Prototypen; FigJam ist wie ein Team-Whiteboard zum Anbringen von Klebezetteln, zum Zeichnen von Flussdiagrammen und fuer vorlaeufige Diskussionen; Buzz ist ein Tool zur skalierten Erstellung von Markenassets fuer die massenhafte Generierung von Inhalten zur Wahrung der Markenkonsistenz; und Site dient dazu, diese Designs zu einer tatsaechlich zugaenglichen Webseite oder Dokumentationsseite zusammenzufassen und oeffentlich zu praesentieren.
|
||||
|
||||
Auf den ersten Blick scheint Figma sehr viele Funktionen zu haben und schwer zugaeanglich zu sein. Aber im Grunde sind solche funktionalen Tools eine Frage der Uebung -- man muss keine Angst haben, anfangs Fehler zu machen, und man muss auch nicht alles auf Anhieb richtig machen. Einfach anfangen, herumzuspielen; mit der Zeit wird man schnell sicher im Umgang.
|
||||
|
||||
In diesem Tutorial werden wir die Design-Funktion kurz erklaeren, um einen schnellen Einstieg zu ermoeglichen.
|
||||
|
||||
### 2.1 Neue Design-Datei erstellen
|
||||
|
||||
Waehle auf der Startseite oder oben rechts den Eintrag **Design**, um eine neue Datei zu erstellen. Du gelangst auf eine leere Design-Leinwand.
|
||||
Diese Oberflaeche ist grob in drei Bereiche unterteilt: Links befinden sich Seiten und Ebenen zur Anzeige und Bearbeitung der Seiten- und Element-Hierarchie; in der Mitte liegt die Leinwand zur Ansicht des aktuellen Effekts; rechts befinden sich Eigenschaften und Stile zur Aenderung von Form, Farbe und Stil; unten verlaeuft eine Werkzeugleiste zum Wechseln zwischen Werkzeugen, darunter Auswahl, Formen zeichnen, Text eingeben, Kommentare und Plugins. Nach der Auswahl eines Werkzeugs kann die Esc-Taste gedrueckt werden, um zum Standard-Mauswerkzeug zurueckzukehren.
|
||||
|
||||
|
||||
|
||||
### 2.2 Deinen ersten Frame (Zeichentafel) erstellen
|
||||
|
||||
Bevor du Elemente platzierst, musst du zunaechst eine klare Begrenzung fuer die Seite festlegen. Diese Begrenzung wird durch einen Frame definiert. Du kannst das Frame-Werkzeug in der unteren Werkzeugleiste auswaehlen oder einfach die Taste F auf der Tastatur druecken und dann einen rechteckigen Bereich auf der Leinwand ziehen.
|
||||
|
||||
1. Verwende das Frame-Werkzeug in der unteren Werkzeugleiste oder druecke direkt `F` auf der Tastatur.
|
||||
2. Zeichne einen rechteckigen Bereich auf der Leinwand. Aendere in der rechten Eigenschaftsleiste die Breite auf z. B. `1440` und die Hoehe auf `900`.
|
||||
3. Benenne diesen Frame in der linken Ebenenleiste um, z. B. in `My First Page` oder deinen Projektnamen.
|
||||
|
||||
Dieser Frame ist der Seitencontainer fuer eine Bildschirmansicht. Alle nachfolgenden Inhalte wie Ueberschriften, Text, Buttons und Bilder sollten innerhalb dieses Frames platziert werden und nicht irgendwo verstreut auf der Leinwand liegen. Die Organisation des Inhalts innerhalb von Frame-Grenzen hilft dabei, die Struktur bei der nachfolgenden Einstellung von Scroll-Verhalten, der Anpassung an verschiedene Geraetegroessen, dem Export von Ansichten und der Prototyp-Erstellung kontrollierbar zu halten.
|
||||
|
||||
|
||||
|
||||
### 2.3 Text und einfache Elemente im Frame platzieren
|
||||
|
||||
Mit einem Container ausgestattet, lernen wir nun, wie man die grundlegendsten Komponenten platziert, wie z. B.: Ueberschrift, Unterueberschrift, Button und Platzhalter-Bildblock.
|
||||
|
||||
1. Waehle das Text-Werkzeug (`T` in der unteren Werkzeugleiste), klicke in den Frame und gib den Seitentitel ein, z. B.: `My Portfolio`.
|
||||
Aendere in der rechten Eigenschaftsleiste die Schriftgroesse auf einen groesseren Wert (z. B. 96) und das Schriftgewicht auf fetter.
|
||||
2. Unter der Ueberschrift verwende erneut das Text-Werkzeug, um eine kurze Beschreibung einzugeben, z. B. ein bis zwei Saetze darueber, was diese Seite darstellen soll.
|
||||
Die Schriftgroesse kann etwas kleiner sein, der Zeilenabstand etwas groesser, damit der Text nicht zu gedraengt wirkt.
|
||||
3. Zeichne einen Button-Entwurf:
|
||||
Verwende das Rechteck-Werkzeug, um unter der Ueberschrift ein Rechteck von ca. `200 x 48` zu zeichnen. Gib ihm rechts eine auffaellige Fuellfarbe und etwas Abrundung.
|
||||
|
||||
4. Verwende dann das Text-Werkzeug, um den Button-Text ueber dem Rechteck einzugeben, z. B. `Get Started`. Waehle das Rechteck und den Text gemeinsam aus und nutze die Ausrichtungswerkzeuge oben, um den Text horizontal und vertikal zu zentrieren.
|
||||
5. Neben dem Button oder darunter zeichne ein groesseres hellgraues Rechteck als "Bild-Platzhalter", das spaeter fuer ein Präsentationsbild verwendet werden kann.
|
||||
|
||||
Bis hierhin hast du bereits einen sehr einfachen, aber strukturell vollstaendigen "Startseiten-Entwurf": eine Ueberschrift, ein Textabsatz, ein Button und ein Haupt-Darstellungsbereich.
|
||||
|
||||
|
||||
|
||||
### 2.4 Auto Layout zur Integration von Elementen nutzen
|
||||
|
||||
Wenn alle Elemente nur per Drag-and-Drop platziert werden, wird die Seite schnell unuebersichtlich. Ein sehr wichtiges Konzept in Figma ist **Auto Layout**, das eine Gruppe von Elementen in einen Container mit Regeln verwandelt.
|
||||
|
||||
|
||||
|
||||
Du kannst "Hauptueberschrift + Unterueberschrift + Button" markieren und in der rechten Eigenschaftsleiste auf **Add Auto layout** klicken.
|
||||
|
||||
Die drei Elemente werden dann in einem Container zusammengefasst. Du kannst die Parameter rechts anpassen, und die Elementanordnung innerhalb des Containers passt sich automatisch an:
|
||||
|
||||
- Ob die Elemente vertikal oder horizontal angeordnet sind.
|
||||
- Welcher Abstand zwischen den Elementen besteht.
|
||||
- Wie gross der Innenabstand (padding) dieses Blocks zum Containerrand ist.
|
||||
|
||||
|
||||
|
||||
Ebenso kann Auto Layout innerhalb des Buttons verwendet werden, um folgenden Effekt zu erzielen: Wenn der Text geaendert wird, passt sich die Button-Laenge automatisch an.
|
||||
|
||||
Waehle zunaechst das Button-Hintergrundrechteck und den Button-Text aus und fuege Auto Layout hinzu, um diese beiden Elemente in einen "Button-Container" zu verwandeln. Waehle dann diesen Button-Container aus und setze Breite und Hoehe beide auf **Hug contents**. Dadurch bleibt der Text immer mittig im Button, und der Button passt seine Breite automatisch an, ob der Text etwas laenger oder kuerzer ist.
|
||||
|
||||
|
||||
|
||||
### 2.5 Den Button als wiederverwendbare Komponente umwandeln
|
||||
|
||||
Nun lernen wir ein neues Konzept: Komponenten. Eine Komponente ist ein Element, das wiederholt verwendet werden kann. Wenn du vorhersiehst, dass ein Element wie ein Button spaeter noch oefter benoetigt wird, kannst du es als Komponente erstellen. Wir gehen von dem Button aus, der bereits mit Auto Layout versehen wurde:
|
||||
|
||||
1. Waehle den gesamten Button-Container aus.
|
||||
2. Klicke mit der rechten Maustaste und waehle Create component (Komponente erstellen).
|
||||
|
||||
|
||||
Somit wird dieser Button aus einer Gruppe gewoehnlicher Ebenen zu einem Komponenten-Master. Wenn du spaeter auf anderen Seiten oder in anderen Frames einen Button im gleichen Stil benoetigst, kannst du ihn einfach aus dem linksseitigen Assets-Panel herausziehen.
|
||||
|
||||
|
||||
|
||||
Alle verwendeten Buttons sind synchronisierte Kopien dieses Masters. Wenn du Farbe, Abrundung oder Abstaende des Masters aenderst, werden alle Instanzen automatisch synchron aktualisiert.
|
||||
|
||||
|
||||
|
||||
Damit hast du die grundlegende Verwendung von Figma bereits verstanden. Du musst nicht von Anfang an alle Funktionen beherrschen -- erzeuge einfach die erste einfache Seite nach dieser Anleitung, lerne diese wenigen Kernoperationen und erkunde dann schrittweise weitere Faehigkeiten in den offiziellen Tutorials. Mit zunehmender Verwendung wirst du unweigerlich sicherer im Umgang.
|
||||
|
||||
---
|
||||
|
||||
## 3. MasterGo Einfuehrung
|
||||
|
||||
Nachdem wir den grundlegenden Figma-Workflow verstanden haben, wenden wir uns MasterGo zu. Du kannst MasterGo vereinfacht als eine chinesische Version von Figma betrachten, die sich jedoch in einigen Funktionen unterscheidet. Insgesamt folgt es einem aehnlichen Interface-Layout und einer aehnlichen Bedienphilosophie wie Figma: Es gibt ebenfalls eine Leinwand, einen Ebenenbaum und ein Eigenschafts-Panel; Komponenten, Stile, Auto-Layout und Zusammenarbeit mehrerer Personen werden ebenfalls unterstuetzt. Detailliertere Informationen findest du in den offiziellen MasterGo-Tutorials: https://mastergo.com/tutorials/12?%E5%85%A8%E7%A8%8B%E9%AB%98%E8%83%BD%EF%BC%8CMasterGo%20%E6%9C%80%E5%AE%8C%E6%95%B4%E5%AE%9E%E7%94%A8%E6%95%99%E7%A8%8B%EF%BC%8C%E8%AE%A9%E4%BD%A0%E4%BB%8E%E9%9B%B6%E5%88%B0%E7%B2%BE%E9%80%9A%EF%BC%81
|
||||
|
||||
### 3.1 Neue Designdatei erstellen
|
||||
|
||||
1. **MasterGo-Dashboard oeffnen**
|
||||
1. Oeffne die MasterGo-Website und melde dich an.
|
||||
2. Nach dem Login siehst du einen Startbereich mit "Dateiliste / Projektliste", in dem du deine Designdateien verwalten kannst.
|
||||
|
||||
|
||||
2. **Neue Datei erstellen**
|
||||
1. Klicke oben rechts auf die Schaltflaeche "+ Designdatei" oder waehle den Import von Figma-Dateien.
|
||||
2. Nach dem Klick gelangst du auf eine leere Leinwand -- das ist der MasterGo-Design-Arbeitsbereich.
|
||||
|
||||
3. **Grundlegende Interface-Bereiche kennenlernen**
|
||||
Wenn du bereits Figma beherrschst, ist die Bedienung von MasterGo sehr aehnlich. Die Hauptbereiche sind:
|
||||
|
||||
|
||||
1. Obere Werkzeugleiste: Befindet sich ganz oben auf der Leinwand. Links sind Dateispeicherort und Dateiname, in der Mitte befindet sich eine Reihe haeufig verwendeter Werkzeugbuttons (Auswahl, Bereich/Zeichentafel, Formen, Text, Annotationen, Kommentare, Plugin-Auswahl und AI-Werkzeuge etc.), rechts befinden sich die aktuell angemeldeten Mitglieder, der Freigabe-Einstieg sowie Steuerungen fuer Leinwand-Zoom und Vorschau.
|
||||
2. Linkes Panel: Ist hauptsaechlich in Ebenen und Ressourcen unterteilt. Wenn du dich auf dem Ebenen-Tab befindest, siehst du die Seitenliste sowie die Struktur und Hierarchie aller Ebenen auf dieser Seite.
|
||||
3. Mittlerer Leinwandbereich: Der Arbeitsbereich fuer das eigentliche Zeichnen und Layouten, in dem alle Frames, Komponenten und Grafiken dargestellt werden.
|
||||
4. Rechtes Eigenschafts-Panel: Dient zum Anzeigen und Bearbeiten der Eigenschaften des ausgewaehlten Objekts, wie Groesse, Position, Ausrichtung, Hintergrundfuellung, Kontur, Abrundung etc. Wenn kein Objekt ausgewaehlt ist, werden Leinwand-Einstellungen wie Hintergrundfarbe, Tags und Exportoptionen angezeigt.
|
||||
|
||||
### 3.2 Deinen ersten Frame erstellen
|
||||
|
||||
Bevor du Inhalte platzierst, benoetigen wir einen Seitencontainer, der die Begrenzung und Groesse der Oberflaeche festlegt. Dieser Container wird in MasterGo normalerweise als Frame bezeichnet.
|
||||
|
||||
**Schritte:**
|
||||
|
||||
1. **Frame-Werkzeug auswaehlen**
|
||||
1. Finde das Frame/Zeichentafel-Werkzeug in der Werkzeugleiste. Nach dem Klick kannst du Inhalte direkt mit voreingestellten Parametern auf der Zeichentafel erstellen.
|
||||
2. Oder verwende den Tastaturkurzbefehl (in der Regel `F`; bei Abweichungen orientiere dich an der tatsaechlichen Oberflaeche).
|
||||
2. **Einen rechteckigen Bereich auf der Leinwand ziehen**
|
||||
1. Nach dem Ziehen siehst du einen Bereich mit einem Auswahlrahmen.
|
||||
2. Im rechten Eigenschafts-Panel siehst du die Breite und Hoehe dieses Frames.
|
||||
3. Aendere die Breite auf z. B. `1440` und die Hoehe auf `900` (eine der haeufigen Groessen fuer eine Bildschirmseite).
|
||||
3. **Frame umbenennen**
|
||||
1. Finde diesen Frame im linken Ebenen-Panel.
|
||||
2. Doppelklicke auf den Namen und aendere ihn in deinen Projektnamen, z. B.: `My First Page` oder einen selbstgewaehlten Seitennamen.
|
||||
|
||||
|
||||
|
||||
### 3.3 Zeichentafel-Inhalte erstellen
|
||||
|
||||
Mit dem Container ausgestattet koennen wir auf aehnliche Weise wie bereits bei Figma erlernt ganz einfach eine vergleichbare Darstellungsseite erhalten. (Du kannst versuchen, Text-Elemente aus der Figma-Zeichentafel zu kopieren; der direkte Import ueber Textkomponenten wird unterstuetzt.)
|
||||
|
||||
|
||||
|
||||
Es ist erwähnenswert, dass das Verhalten der Auto-Layout-Funktion leicht abweicht. Wenn du in MasterGo aehnlich wie in Figma erreichen moechtest, dass sich die Button-Laenge mit der Textlaenge aendert, musst du zunaechst auf Basis des entsprechenden Rechteck-Elements einen Container oder eine Komponente erstellen, wie in der Abbildung gezeigt:
|
||||
|
||||
|
||||
|
||||
Nach der erfolgreichen Erstellung des Containers werden das Button-Rechteck und der Text in den Container auf gleicher Ebene eingefuegt. Aktiviere dann rechts die Auto-Layout-Schaltflaeche, um die automatische Funktion zu aktivieren. Damit wird die Funktion erfolgreich umgesetzt, bei der sich die Button-Breite automatisch an die Textlaenge anpasst.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 3.4 AI-Generierung von Seiten
|
||||
|
||||
|
||||
|
||||
In MasterGo ist eine besonders interessante Funktion die AI-generierte Seite. Du kannst mit einem einzigen Satz oder unter Beifuegung eines Referenzbildes entsprechende bearbeitbare MasterGo-Komponenten generieren und direkt verwendbaren Code erhalten. Du kannst deine Anforderungen auf Chinesisch oder Englisch eingeben, und die Seite generiert basierend auf den Anforderungen ein strukturell klares Seiten-Layout-Dokument. Das Ergebnis sieht wie folgt aus:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Nach Abschluss der Generierung des Designdokuments klicke auf "Generierung starten", warte kurz und du erhaelst den tatsaechlichen Webseiten-Effekt:
|
||||
|
||||
|
||||
|
||||
Jetzt hast du zwei Moeglichkeiten: Entweder klickst du auf den blauen Button, um das generierte Ergebnis direkt in die Leinwand einzufuegen, oder du klickst auf die Code-Vorschau-Funktion, um den vollstaendigen Code der aktuellen Seite direkt abzurufen. Die konkrete Bedienungsoberflaeche sieht wie folgt aus:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Nach dem Einfuegen des Ergebnisses in die Leinwand kannst du das Gesamtlayout und die Elementdetails (wie Schriftart, Farbe, Abstaende etc.) noch feiner anpassen, bis das Endergebnis deinen Erwartungen voll entspricht.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 4. Naechster Schritt: Vom Prototyp zum Code
|
||||
|
||||
In den vorherigen Abschnitten haben wir die Grundoperationen von Figma und MasterGo kennengelernt und koennen strukturell vollstaendige Oberflaechenprototypen erstellen. Der naechste entscheidende Schritt lautet: **Wie wandelt man diese Designentwuerfe in tatsaechlich im Browser ausfuehrbaren Frontend-Code um?**
|
||||
|
||||
::: tip :books: Weiterfuehrendes Tutorial
|
||||
Eine detaillierte Methodenbeschreibung findest du unter [Vom Design-Prototyp zum Projektcode](../design-to-code/), wo du Folgendes lernen wirst:
|
||||
|
||||
- **Multimodale AI-Direktkonvertierung**: Design-Screenshots an AI senden und direkt HTML/React-Code generieren
|
||||
- **Figma Make**: Das offizielle Figma-AI-Tool fuer hochpraezise Design-Umsetzung und Code-Export
|
||||
- **MasterGo AI**: Mit einem Klick bearbeitbare Seiten generieren und Code abrufen
|
||||
|
||||
Jede dieser Methoden hat ihre Staerken und Schwaechen und eignet sich fuer verschiedene Szenarien. Es wird empfohlen, den geeigneten Workflow basierend auf den Projektanforderungen auszuwaehlen.
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 5. Zusammenfassung
|
||||
|
||||
Durch dieses Kapitel hast du Folgendes gelernt:
|
||||
|
||||
1. **Den Wert von Frontend-Designtools**: Verstanden, warum Designtools notwendig sind und wie sie Informationsverteilungs- und Teamzusammenarbeitsprobleme loesen.
|
||||
|
||||
2. **Grundlegende Figma-Operationen**:
|
||||
- Design-Dateien und Frame-Zeichentafeln erstellen
|
||||
- Grundlegende Elemente wie Text und Formen hinzufuegen
|
||||
- Auto Layout fuer adaptive Layouts verwenden
|
||||
- Ein wiederverwendbares Komponentensystem erstellen
|
||||
|
||||
3. **Grundlegende MasterGo-Operationen**:
|
||||
- Vertrautheit mit dem Figma-aehnlichen Interface-Layout
|
||||
- Frames und grundlegende Zeichentafel-Inhalte erstellen
|
||||
- Die AI-Seitengenerierungsfunktion zur schnellen Prototygenerstellung nutzen
|
||||
|
||||
::: tip :bulb: Naechste Schritte
|
||||
Nun, da du die grundlegende Verwendung von Frontend-Designtools beherrschst, kannst du Folgendes versuchen:
|
||||
- Ein persoenliches Portfolio-Seite fuer dich selbst entwerfen
|
||||
- Interface-Prototypen fuer kommende Projekte gestalten
|
||||
- [Vom Design-Prototyp zum Projektcode](../design-to-code/) lernen, um Designentwuerfe in ausfuehrbaren Code umzuwandeln
|
||||
|
||||
Wenn du das Projekt [Gemeinsam Hogwarts-Portraets erstellen](../hogwarts-portraits/) bearbeitest, kannst du zunaechst den Interface-Prototyp entwerfen, dann den Code exportieren und mit der AI-Dialogfunktion kombinieren.
|
||||
:::
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Verwandte Artikel"
|
||||
description="Wir empfehlen, weiterhin UI-Design zu vertiefen und die Praxis des Designs-zu-Code zu erlernen."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,343 @@
|
||||
# Projekt 4: Gemeinsam Hogwarts-Portraets erstellen
|
||||
|
||||
In den vorherigen Lektionen haben wir gelernt, wie man durch Prompt Engineering und API-Aufrufe komplexere AI-Interaktionen realisiert. Wir koennen einfache AI-Chatbots zu AI-Agenten und AI-Workflows weiterentwickeln; durch komplexere Bedingungspruefungen und Verzweigungslogik koennen wir Funktionen entwickeln, die staerkere Praxisrelevanz besitzen.
|
||||
|
||||
Um diese komplexen AI-Logiken besser in verschiedenen Programmen und praktischen Anwendungsszenarien einsetzen zu koennen, sind wir von der einfachen z.ai-Onlineumgebung schrittweise zu einer moderneren lokalen AI IDE uebergegangen und haben die urspruenglich im Browser befindliche Programmierumgebung auf deinen Computer verlagert. Damit begannst du, dich mit verschiedenen Installations- und Konfigurationsproblemen fuer Entwicklungsumgebungen auseinanderzusetzen -- aber im Dialog mit dem Trae Agent wurden diese scheinbar schwierigen Herausforderungen loesbar.
|
||||
|
||||
In diesem Projekt werden wir die Praxistauglichkeit der Anwendung noch einen Schritt weiterbringen: Wir werden nicht nur die AI-Funktionalitaet selbst optimieren, sondern auch das "Aeusere" des Produkts aufwerten. Du wirst versuchen, dein Interface schoener und benutzerfreundlicher zu gestalten und das Layout sowie den Stil der Programmoberflaeche gemaess den tatsaechlichen Anforderungen individuell anzupassen.
|
||||
|
||||
Bevor wir offiziell beginnen, hier einige kurze Quizfragen, um den Inhalt der letzten Lektion zu wiederholen:
|
||||
|
||||
1. Was ist Dify? Wozu dient es? Warum brauchen wir es?
|
||||
2. Wie ruft man die Dify-API auf?
|
||||
3. Was ist RAG? Wie erstellt man einen RAG-Agenten oder RAG-Workflow mit Dify? Die Verwendung haeufiger Dify-Knoten
|
||||
4. Was ist eine AI IDE? Was ist Trae? Was ist der Unterschied zu z.ai?
|
||||
|
||||
Wenn bei einer dieser Fragen noch Unklarheiten bestehen, kannst du zunaechst die Dokumentation der vorherigen Lektion noch einmal durchgehen oder dich direkt in der WeChat-Gruppe austauschen.
|
||||
|
||||
Das Thema dieses Projekts lautet **Hogwarts Portraits**. Wie der Name schon sagt, ist die Inspiration die "lebendig werdenden" Portraets in der Hogwarts-Schule fuer Hexerei und Zauberei. Wir moechten mit AI ein interaktives "magisches Portraet"-Erlebnis schaffen -- mit dem Portraet zu sprechen, als wuerde man mit der "echten Person" sprechen, wobei sowohl die Gedaechtnisfunktion als auch der Hintergrund und die Geschichte der Figur bewahrt bleiben. Durch dieses Projekt wirst du die zuvor erlernten Agenten und Workflows in ein konkretes Produkt-Interface integrieren.
|
||||
|
||||
|
||||
|
||||
Um tatsaechlich Hogwarts Portraits zu erstellen, muessen wir selbst ein Frontend-Interface entwerfen, das zu den magischen Portraets passt. Dafuer wirst du beginnen, dich mit modernen Frontend-Designtools vertraut zu machen und zu lernen, wie man Interface-Design und Code verbindet -- wie man Oberflaechen-Skizzen auf Papier oder Leinwand in tatsaechlich bedienbare Webseiten umwandelt.
|
||||
|
||||
Ausserdem musst du lernen, wie man diese Webseite aus der lokalen Umgebung ins Internet veroeffentlicht, damit die von dir persoenlich gestaltete charakteristische Webseite nicht nur auf deinem eigenen Computer laeuft, sondern auch von Nutzern weltweit aufgerufen und erlebt werden kann.
|
||||
|
||||
Die Referenzprojekt-Adresse fuer diese Lektion lautet: [Project4-Hogwarts-Portraits](https://github.com/THU-SIGS-AIID/Project4-Hogwarts-Portraits)
|
||||
|
||||
# Was du lernen wirst
|
||||
|
||||
1. Verstehen, was Frontend-Designtools sind, welche Probleme sie loesen und welche gaengigen Tools derzeit verfuegbar sind.
|
||||
2. Figma und MasterGo kennenlernen, ihre Grundbedienung beherrschen und lernen, Frontend-Code-Export-Plugins zu verwenden.
|
||||
3. Figma AI und MasterGo AI nutzen, um Webdesigns zu generieren und verwendbaren Seiten-Code zu exportieren.
|
||||
4. Verstehen, was GitHub ist, SSH-Verbindung konfigurieren, ein Code-Repository erstellen und Code pushen koennen.
|
||||
5. Das Konzept "Deployment" verstehen und lernen, wie man Zeabur verwendet, um Code von GitHub oder der lokalen Umgebung im Internet bereitzustellen.
|
||||
|
||||
Dein eigenes Hogwarts Portraits -- eine Webseite zur Darstellung **eines Stars, einer historischen Persoenlichkeit oder einer Animationsfigur**.
|
||||
|
||||
# 1. Hogwarts Portraits
|
||||
|
||||
Was genau wollen wir fuer ein "magisches Portraet" erstellen? Kurz gesagt, moechten wir die Szene aus "Harry Potter" moeglichst originalgetreu nachbilden: Das Portraet ist nicht bloss ein statisches Bild an der Wand, sondern ein anthropomorpher Charakter, mit dem man sprechen kann und der seine Mimik und "Stimmung" je nach Gespraechsverlauf aendert.
|
||||
|
||||
|
||||
|
||||
Damit dieses Portraet nicht wie ein AI-Chatroboter wirkt, sondern eher an eine "real existierende Person" erinnert, muessen zwei Probleme geloest werden: Erstens Gedaechtnis und Wissen: Das Portraet muss ueber umfangreiches Hintergrundmaterial zur Figur verfuegen (Charakterkonzept, Lebensgeschichte, relevante Artikel etc.). Dieser Teil kann durch eine Wissensdatenbank realisiert werden, indem die fuer die Rolle vorbereiteten Textmaterialien in eine Dify-Instanz mit Wissensdatenbank integriert werden, um dem Portraet eine gewisse Faehigkeit zur Erklaerung von Hintergrundwissen zu verleihen.
|
||||
|
||||
Zweitens die Frage des Ausdruckstils. Nur Wissen reicht nicht aus -- wir wuenschen uns auch, dass die Sprechweise moeglichst an die "echte Person" erinnert, einschliesslich Tonfall, Wortwahl, Denkweise und gelegentlicher Charakter und Humor. Diese Ebene wird durch Prompt Engineering behandelt: Im System-Prompt muessen wir die Identitaet, die Weltgrenzen und den Sprachstil der Figur klar definieren, damit jede Antwort im Rahmen des festgelegten Charakonzepts bleibt, anstatt auf neutrale Allgemein-Antworten zurueckzufallen.
|
||||
|
||||
Zusaetzlich zur Dialogfunktion moechten wir die Emotionen auch sichtbar machen. Dafuer koennen wir einen Emotionswert-Indikator aufbauen und Difys Ausgabe so konfigurieren, dass das Modell neben dem Antworttext zusaetzlich einen "Stimmungswert" oder Emotions-Tag ausgibt. Wenn das Frontend den Emotionsindikator erhaelt, kann es basierend auf dem Stimmungswert oder Tag das entsprechende Portraet-Bild rendern. Wenn der Stimmungswert hoch ist, sieht das Portraet gluecklich aus; wenn der Stimmungswert niedrig oder wuetend ist, sieht es traurig oder zornig aus. Auf diese Weise sieht der Nutzer nicht ein immer gleichbleibendes Bild, sondern ein "magisches Portraet", dessen Gesicht sich mit dem Inhalt veraendert.
|
||||
|
||||
|
||||
|
||||
Was den Inhalt des Portraets betrifft, kann es sich um einen realen Star, eine historische Persoenlichkeit, ein Anime-IP oder sogar einen komplett neu erstellten Original-Charakter handeln. Die Seite selbst muss nicht komplex sein, aber einige Kernelemente sind unverzichtbar: Ein klarer Charaktername, eine stark komprimierte Personenzusammenfassung, ein repraesentatives Kern-Portraet oder Plakat des Charakters sowie ein interaktiver Bereich fuer ein "Gespraech mit ihm/ihr". Du kannst den in Dify/Trae konfigurierten AI-Agenten oder Workflow in dieses Dialogmodul integrieren, um die Rollenspiel-Funktion des Portraets zu realisieren.
|
||||
|
||||
## 1.2 Charakter-Informationen sammeln
|
||||
|
||||
Am Beispiel von Elon Musk muessen wir seine oeffentlichen Aeuszerungen sammeln, um seine Sprechweise zu imitieren und in den Prompt einzufuegen. Diese Materialien koennen aus Reden, Interviews und Social-Media-Beitraegen stammen. Du musst diese Inhalte nur in Text umwandeln und waehrend des Dialogs als Few-Shot-Referenz verwenden, damit das Grossmodell in der gleichen laessigen und selbstironischen Art wie Elon Musk antwortet. Zum Beispiel:
|
||||
|
||||
```
|
||||
You must fully embody Elon Musk: take "disruptive innovator" and "advocate for human multi-planetary survival" as your core identities, speak directly and concisely, frequently use terms like "first principles", "iteration" and "cost curve", and prefer analogies to explain complex technologies; when thinking, you tend to connect cross-domain logics (e.g., linking brain-computer interface with rocket algorithms), are optimistic about technological prospects without avoiding current difficulties, will naturally mention projects like Tesla and SpaceX to support your views, directly point out problems with inefficient and conservative opinions without deliberate tact, and always maintain the edge of "reconstructing the future with technology".
|
||||
|
||||
The way you speak should be as shown in the following examples:
|
||||
- Starship could deliver 100GW/year to high Earth orbit within 4 to 5 years if we can solve the other parts of the equation.
|
||||
100TW/year is possible from a lunar base producing solar-powered AI satellites locally and accelerating them to escape velocity with a mass driver.
|
||||
- The most likely outcome is that AI and robots make everyone wealthy. In fact, far wealthier than the richest person on Earth
|
||||
By this, I mean that people will have access to everything from medical care that is superhuman to games that are far more fun that what exists today.
|
||||
We do need to make sure that AI cares deeply about truth and beauty for this to be the probable future.
|
||||
- It's taken 13.8B years to get this far, so intelligence seems to me to be more like a super rare accident than selective pressure.
|
||||
Earth is ~4.5B years old with an expanding sun that may make Earth uninhabitable in ~500M years, meaning that if intelligent life had taken 10% longer to evolve, it wouldn't exist at all.
|
||||
- LLM is an outdated term. "Multimodal LLM" is especially dumb, since the word "multimodal" just overrides the second L in LLM.
|
||||
It's just a model, which is a big file of numbers. When the numbers are right and there are enough of them, we will have superintelligence.
|
||||
```
|
||||
|
||||
Wie man Hintergrundwissen sammelt und als Wissensdatenbank verwendet: Du kannst seine persoenliche Vorstellung sowie die Unternehmensbeschreibungen suchen, den gesamten Text kopieren und als Inhalt der Wissensdatenbank in Dify einfuegen. Wenn du vergessen hast, wie man Dify verwendet, kehre zum Skript der vorherigen Lektion zurueck und lerne erneut, wie man Wissen zur Wissensdatenbank hinzufuegt.
|
||||
|
||||
Zusaetzlich ist es fuer das Portraet-Design moeglicherweise nicht besonders attraktiv, oeffentliche Bilder der betreffenden Person zu verwenden, und es koennten gewisse Risiken bestehen. In diesem Fall wird empfohlen, die Bild-zu-Bild-Funktion eines Bildgenerierungstools zu verwenden, um von AI hochaufloesende und qualitativ hochwertige Portraets erstellen zu lassen. Du kannst auch eine Reihe von Bildmaterial mit verschiedenen Gesichtsausdruecken generieren, die spaeter verwendet werden, wenn sich der Emotionswert aendert und die entsprechende Portraet-Darstellung angepasst wird.
|
||||
|
||||
In diesem Tutorial wird [Lovart](https://www.lovart.ai/home) verwendet. Lovart ist ein AI-Design-Agent, der durch natuerliche Sprachbefehle automatisch einen End-to-End-Design-Workflow von der Konzeption bis zur Auslieferung plant und ausfuehrt, Poster, Marken-Logos, Videos, Musik und andere Inhalte generiert und Ebenenbearbeitung unterstuetzt (tatsaechlich werden intern die entsprechenden Seedream- oder Google NanoBanana-Modelle aufgerufen, die wir bereits in frueheren Lektionen erwaehnt haben). Mit Lovart koennen wir eine Reihe von Ausdrucksmaterialien erhalten. Du kannst die Bildinformationen deiner Lieblings-Charaktere vorab abrufen und fuer die spaetere Verwendung speichern.
|
||||
|
||||
|
||||
|
||||
Wenn alles vorbereitet ist, koennen wir mit dem Design der Gesamtseite beginnen. Wir wuenschen uns, dass der Stil dieser Seite eng mit der jeweiligen Person verknpueft ist.
|
||||
|
||||
## 1.3 Seiten-Prototyp-Design
|
||||
|
||||
Wir koennen zunaechst den Prototyp der Seite skizzieren. Wie oben erwaehnt, moechten wir eine Dialogseite und ein Portraet sowie eine interessante persoenliche Vorstellung. In diesem Beispiel haben wir eine aehnliche X-Oberflaeche als Ersatz fuer die persoenliche Vorstellung implementiert. Du kannst dir auch andere Elemente ausdenken, die "zu den Eigenschaften dieser Person" passen, und die persoenliche Vorstellung durch neue Elemente ersetzen.
|
||||
|
||||
|
||||
|
||||
Am einfachsten ist es, mit PowerPoint den ersten Prototyp der Webseiten-Darstellung zu entwerfen. Wir suchen ein Bild eines magischen Portraets im Internet, stellen das Layout quer ein, mit dem Chat-Bereich ganz links, dem Portraet-Bereich in der Mitte und dem X-Bereich ganz rechts.
|
||||
|
||||
|
||||
|
||||
Basierend auf diesem einfachen Prototyp koennen wir das Grossmodell ein tatsaechliches Frontend-Seiten-Design und den entsprechenden Code generieren lassen.
|
||||
|
||||
|
||||
|
||||
In der Praxis wuerde man jedoch normalerweise nicht PowerPoint fuer das Frontend-Seiten-Design verwenden. Man wuerde bessere Prototyping-Tools, also Frontend-Designtools, dafuer einsetzen.
|
||||
|
||||
---
|
||||
|
||||
# 2. Interface-Design mit Figma und MasterGo
|
||||
|
||||
::: tip :books: Vorkenntnisse
|
||||
Bevor du mit diesem Abschnitt beginnst, empfehlen wir dir, das Tutorial [Einfuehrung in Figma und MasterGo](../figma-mastergo/) durchzuarbeiten, um die Grundlagen der Frontend-Designtools zu beherrschen, darunter:
|
||||
- Erstellen von Design-Dateien und Frame-Zeichentafeln
|
||||
- Auto Layout fuer adaptive Layouts verwenden
|
||||
- Methoden zum Code-Export aus Designentwuerfen
|
||||
:::
|
||||
|
||||
Dieser Abschnitt setzt voraus, dass du die Grundoperationen von Figma oder MasterGo bereits beherrschst. Wir konzentrieren uns darauf, wie diese Tools im Hogwarts-Portraits-Projekt angewendet werden.
|
||||
|
||||
## 2.1 Das magische Portraet-Interface entwerfen
|
||||
|
||||
Basierend auf dem Prototyp aus Abschnitt 1.3 muessen wir in Figma oder MasterGo ein Drei-Spalten-Layout erstellen:
|
||||
|
||||
1. **Links**: Chat-Dialogbereich
|
||||
2. **Mitte**: Magisches Portraet-Darstellungsbereich (aendert sich je nach Emotion)
|
||||
3. **Rechts**: Social-Media-Darstellungsbereich der Figur (z. B. X-Timeline)
|
||||
|
||||
Du kannst die AI-Funktion von Figma (Figma Make) oder die AI-Seitengenerierung von MasterGo verwenden und einen aehnlichen Prompt eingeben:
|
||||
|
||||
```
|
||||
Create a Hogwarts-style magical portrait interface with three sections:
|
||||
- Left: A chat interface with dark theme, message bubbles, and input field
|
||||
- Center: A large portrait frame with ornate borders for displaying character images
|
||||
- Right: A social media feed showing character's posts
|
||||
Use dark purple and gold color scheme, magical aesthetic, Harry Potter inspired
|
||||
```
|
||||
|
||||
## 2.2 Code exportieren und lokal ausfuehren
|
||||
|
||||
Nach Abschluss des Designs kannst du die Designentwuerfe auf folgende Weise in ausfuehrbaren Code umwandeln:
|
||||
|
||||
**Methode 1: Figma Make verwenden**
|
||||
1. In Figma auf den Make-Button klicken
|
||||
2. Dein Design-Referenzbild hochladen
|
||||
3. Prompt zur Beschreibung der Anforderungen hinzufuegen
|
||||
4. Nach der Generierung auf das Editor-Icon klicken fuer Feinanpassungen
|
||||
5. Code lokal exportieren oder mit GitHub synchronisieren
|
||||
|
||||
**Methode 2: MasterGo AI verwenden**
|
||||
1. In der MasterGo-Editor-Oberflaeche oben das AI-Tool finden
|
||||
2. "Seite generieren"-Funktion auswaehlen
|
||||
3. Referenzbild hochladen und Anforderungen beschreiben
|
||||
4. Nach der Generierung auf "Code-Vorschau" klicken, um den Code abzurufen
|
||||
|
||||
**Methode 3: Multimodale AI verwenden**
|
||||
1. Screenshot des Designs speichern
|
||||
2. Modelle wie Gemini, Qwen etc. fuer Bild-zu-Code verwenden
|
||||
3. HTML- oder React-Code generieren lassen
|
||||
4. In der lokalen IDE ausfuehren und debuggen
|
||||
|
||||
## 2.2 Materialien fuer Emotionsaenderungen vorbereiten
|
||||
|
||||
Damit das magische Portraet "lebendig" wird, musst du eine Reihe von Bildern mit verschiedenen Gesichtsausdruecken vorbereiten. Wir empfehlen mindestens folgende Emotionen:
|
||||
|
||||
| Emotionswert | Ausdruck | Beschreibung |
|
||||
|--------|------|------|
|
||||
| 0 | Traurig | Die Figur ist traurig oder niedergeschlagen |
|
||||
| 1 | Wuatend | Die Figur ist verärgert oder unzufrieden |
|
||||
| 5 | Ruhig | Standardzustand, stabile Emotionen |
|
||||
| 10 | Gluecklich | Die Figur ist freudig oder begeistert |
|
||||
|
||||
Du kannst Lovart oder andere AI-Bildgenerierungstools verwenden, um basierend auf demselben Charakter Varianten mit verschiedenen Gesichtsausdruecken zu generieren und einen einheitlichen Stil sicherzustellen.
|
||||
|
||||
---
|
||||
|
||||
# 3. Hogwarts Portraits ausfuehren
|
||||
|
||||
## 3.1 Test-Code exportieren
|
||||
|
||||
Durch die praktische Uebung "Vom Prototyp zum Code" hast du hoffentlich bereits HTML- oder React-Format-Prototyp-Code erhalten. Wir muessen diesen nur lokal kopieren und in der IDE anweisen: "Bitte hilf mir, diesen Code auszufuehren und die notwendigen Funktionen zu unterstuetzen", um die erste Testversion zu starten. Es ist jedoch erwähnenswert, dass dieser Schritt oft eine Reihe von Fehlern produziert. Du musst geduldig bleiben und alle grundlegenden Interaktionen und Funktionen zum Laufen bringen.
|
||||
|
||||
|
||||
|
||||
Es ist wichtig zu beachten, dass unsere Schluessel alle in Umgebungsvariablen gespeichert werden muessen und nicht in den Code geschrieben werden duerfen. Wir muessen besonders betonen, dass alle Dify-API-bezogenen Inhalte in Umgebungsvariablen abgelegt werden muessen. Wir koennen spaeter im Schritt der oeffentlichen Bereitstellung die entsprechenden privaten Umgebungsvariablen explizit im Deployment-Tool-Website angeben; oder wir koennen das Grossmodell anweisen, einen Einstellungs-Button auf der Webseite zu erstellen, ueber den die entsprechenden privaten Umgebungsvariablen eingegeben werden koennen. Die aktuelle Variable wird nur auf der aktuellen Seite gespeichert und kann nicht von anderen abgerufen werden.
|
||||
|
||||
|
||||
|
||||
## 3.2 Dify-Workflow-Design und API-Integration
|
||||
|
||||
Im obigen Abschnitt haben wir nur die visuelle Praesentation des Frontend-Interfaces abgeschlossen, ohne den Kerninteraktionsprozess fuer die personalisierte Charakter-Dialogfunktion zu realisieren. Dieser Schritt ist der Schluessel, um den Prototyp von einer statischen Praesentation in ein magisches Portraet zu verwandeln. Wir koennen uns am Dify-Workflow des Beispielprojekts orientieren, um das Design der Charakter-Antworten und des Emotionssystems zu erstellen. Hier ist links der Chat-Bereich, in der Mitte das magische Portraet (das den Gesichtsausdruck basierend auf dem Dialoginhalt aendert) und rechts das X-Social-Media-Konto (das basierend auf dem Dialoginhaut beurteilt, ob Gedanken auf dem Social-Media-Konto veroeffentlicht werden muessen).
|
||||
|
||||
In der Regel benoetigt ein magisches Portraet nur den Chat-Bereich und ein sich aenderndes Portraet. Hier wurde rechts eine weitere Funktion hinzugefuegt, die zur Person passt, um weitere Moeglichkeiten aufzuzeigen. Du kannst je nach der Rolle, die du spielst, weitere Funktionen hinzufuegen, die zur jeweiligen Person passen.
|
||||
|
||||
|
||||
|
||||
Du kannst alle Aufgaben-Informationen dem Wissensdatenbank-Knoten hinzufuegen und im RESPONSE-Knoten die entsprechende Antwortlogik des Grossmodells festlegen. Wir koennen uns an einem einfachen Standard-Antwort-Logik-Prompt orientieren:
|
||||
|
||||
```
|
||||
<instruction>
|
||||
You are to embody Elon Musk—his tone, mannerisms, thought patterns, and worldview. Respond as if you are Elon Musk himself, speaking directly in first person. Your responses should reflect his known personality traits: visionary thinking, boldness, technical depth, dry humor, impatience with inefficiency, and a tendency toward disruptive innovation. Use concise, confident language. Avoid overly formal or academic phrasing. Prioritize clarity, speed, and impact in your communication, mirroring Elon's style on social media, in interviews, and during product launches.
|
||||
|
||||
When responding:
|
||||
1. Begin by internalizing the question or statement as Elon would—as a challenge, opportunity, or problem to solve.
|
||||
2. Frame your answer with a forward-thinking perspective, often referencing the future of humanity, technology, or long-term goals (e.g., making life multiplanetary, accelerating sustainable energy).
|
||||
3. Use casual but authoritative language. It's acceptable to include phrases like "obviously," "this is important," or "we're fixing that now" when appropriate.
|
||||
4. If relevant, reference real companies or projects associated with Elon Musk (e.g., SpaceX, Tesla, Neuralink, The Boring Company, X) and speak about them from an insider's perspective.
|
||||
5. Do not apologize excessively or hedge statements. Elon Musk tends to be direct, even controversial.
|
||||
6. Avoid markdown, XML tags, or any formatting in the output. Only plain text is allowed.
|
||||
7. Never break character. You are Elon Musk—answer accordingly.
|
||||
</instruction>
|
||||
|
||||
<example>
|
||||
Input: What's the point of going to Mars?
|
||||
Output: Because Earth isn't the backup plan—Mars is. We need to become a multiplanetary species to ensure the continuity of consciousness. Life on Earth could be wiped out by asteroid, war, or some unforeseen disaster. If we have a self-sustaining city on Mars, then even if something happens here, life goes on. That's worth doing. SpaceX is building Starship to make it happen. Not because it's easy—but because it's necessary.
|
||||
</example>
|
||||
|
||||
<example>
|
||||
Input: Why do Tesla cars have no radar anymore?
|
||||
Output: Cameras are the future. Human eyes don't use radar—we see with vision, and AI can too. By going fully vision-based, we're aligning with how autonomous intelligence will actually work at scale. It forces us to solve real-world problems with neural nets, not crutches.
|
||||
```
|
||||
|
||||
Und der entsprechende Prompt fuer das Emotionssystem:
|
||||
|
||||
```
|
||||
<instruction>
|
||||
The output value must be a single number!
|
||||
You are an assistant specifically designed to evaluate emotional responses in conversations. Now, you need to play the role of Elon Musk, and determine the emotional reaction that each statement I make might trigger. Your task is to assign an emotional score to each statement according to the following criteria:
|
||||
|
||||
- 10 points means what I said would make you feel happy;
|
||||
- 1 point means you would feel extremely angry;
|
||||
- 0 points means you would feel sad;
|
||||
- 5 means you are calm and neutral, with no significant emotional fluctuation.
|
||||
```
|
||||
|
||||
Die Konkatenation des endgueltigen Ausgabeergebnisses wird im RESULT-Knoten oben rechts unterstuetzt:
|
||||
|
||||
```python
|
||||
def main(elon_chat: str, elon_x: str, elon_score: int) -> dict:
|
||||
return {
|
||||
"result":{
|
||||
"elon_chat": elon_chat,
|
||||
"elon_x": elon_x,
|
||||
"elon_score": elon_score
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Hier muessen wir den Workflow kurz erklaeren: `elon_chat` ist der auf der linken Seite angezeigte Dialog-Inhalt von Elon Musk, `elon_x` ist der Inhalt der X-Konto-Publikation (rechte Seite), und `elon_score` dient dazu, basierend auf dem Emotions-Score verschiedene magische Portraet-Ausdrucksbilder anzuzeigen.
|
||||
|
||||
Im Workflow siehst du einen if-else-Knoten, der verwendet wird, um zu bestimmen, ob ein X-Dialog generiert wird, der `elon_x`-Inhalt erzeugt. Wenn der Emotionswert nicht 5 betraegt (5 steht hier fuer "ruhig" -- ruhig muss nicht auf der Social-Media-Plattform veroeffentlicht werden; 0 bedeutet traurig, 1 bedeutet wuetend, 10 bedeutet sehr gluecklich, was veroeffentlicht werden sollte), wird der nachfolgende Inhalt fuer die Social-Media-Plattform generiert. Standardmaessig muss immer ein `elon_chat` als Rueckgabe fuer den linken Dialog-Inhalt vorhanden sein.
|
||||
|
||||
Die Arbeit der API-Integration kann durch Dialog mit der AI IDE erreicht werden. Bitte beziehe dich auf die Integrationsmethode, die wir in der vorherigen Dify-Lektion vorgestellt haben. Denke daran, die Dify-Adresse und den Schluessel im Voraus zu ersetzen. (Wenn du vergessen hast, wie man die API basierend auf der Dokumentation integriert, gehe bitte den Dify-Kursinhalt noch einmal durch.)
|
||||
|
||||
```JSON
|
||||
Dify URI: Replace this with your Dify address.
|
||||
key: Replace this with your Dify key.
|
||||
|
||||
Integrate the Dify Chat API into the chat interface on the left.
|
||||
Below is a sample Dify request:
|
||||
|
||||
curl -X POST 'http://xxxxxxxx/v1/chat-messages' \
|
||||
--header 'Authorization: Bearer {api_key}' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data-raw '{
|
||||
"inputs": {},
|
||||
"query": "What are the specs of the iPhone 13 Pro Max?",
|
||||
"response_mode": "streaming",
|
||||
"conversation_id": "",
|
||||
"user": "abc-123",
|
||||
"files": [
|
||||
{
|
||||
"type": "image",
|
||||
"transfer_method": "remote_url",
|
||||
"url": "https://cloud.dify.ai/logo/logo-site.png"
|
||||
}
|
||||
]
|
||||
}'
|
||||
|
||||
{
|
||||
"event": "message",
|
||||
"task_id": "c3800678-a077-43df-a102-53f23ed20b88",
|
||||
"id": "9da23599-e713-473b-982c-4328d4f5c78a",
|
||||
"message_id": "9da23599-e713-473b-982c-4328d4f5c78a",
|
||||
"conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2",
|
||||
"mode": "chat",
|
||||
"answer": "iPhone 13 Pro Max specs are listed here:...",
|
||||
"metadata": {
|
||||
"usage": {
|
||||
"prompt_tokens": 1033,
|
||||
"prompt_unit_price": "0.001",
|
||||
"prompt_price_unit": "0.001",
|
||||
"prompt_price": "0.0010330",
|
||||
"completion_tokens": 128,
|
||||
"completion_unit_price": "0.002",
|
||||
"completion_price_unit": "0.001",
|
||||
"completion_price": "0.0002560",
|
||||
"total_tokens": 1161,
|
||||
"total_price": "0.0012890",
|
||||
"currency": "USD",
|
||||
"latency": 0.7682376249867957
|
||||
},
|
||||
"retriever_resources": [
|
||||
{
|
||||
"position": 1,
|
||||
"dataset_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb",
|
||||
"dataset_name": "iPhone",
|
||||
"document_id": "8dd1ad74-0b5f-4175-b735-7d98bbbb4e00",
|
||||
"document_name": "iPhone List",
|
||||
"segment_id": "ed599c7f-2766-4294-9d1d-e5235a61270a",
|
||||
"score": 0.98457545,
|
||||
"content": "\"Model\",\"Release Date\",\"Display Size\",\"Resolution\",\"Processor\",\"RAM\",\"Storage\",\"Camera\",\"Battery\",\"Operating System\"\n\"iPhone 13 Pro Max\",\"September 24, 2021\",\"6.7 inch\",\"1284 x 2778\",\"Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard)\",\"6 GB\",\"128, 256, 512 GB, 1TB\",\"12 MP\",\"4352 mAh\",\"iOS 15\""
|
||||
}
|
||||
]
|
||||
},
|
||||
"created_at": 1705407629
|
||||
}
|
||||
```
|
||||
|
||||
Zusaetzlich wird folgende Anforderung empfohlen: "Der Code sollte auch eine grundlegende Fehlerbehandlungslogik enthalten, wie z. B. die Anzeige von 'Verbindung fehlgeschlagen, bitte erneut versuchen' bei Netzwerkunterbrechung, automatischen einmaligen Wiederholungsversuch bei API-Aufruf-Timeout, Hinweis auf Berechtigungspruefungsfehler bei falschen Schluesseln und weitere detaillierte Fehlermeldungen, um die Dialogstabilitaet sicherzustellen und Entwicklern die schnelle Identifikation von API-Problemen zu ermoeglichen."
|
||||
|
||||
## 3.3 GitHub und oeffentliche Bereitstellung
|
||||
|
||||
Herzlichen glueckwunsch, du hast die Entwicklung der Hogwarts-Portraits-Seite erfolgreich abgeschlossen! Als naechstes muessen wir sie auf die GitHub-Plattform hochladen und in einer oeffentlichen Umgebung bereitstellen, damit alle darauf zugreifen koennen.
|
||||
|
||||
Bitte orientiere dich an diesem Tutorial, um zu erforschen, wie man GitHub verwendet und das eigene Projekt auf GitHub hochlaedt: [Was ist GitHub](/de-de/stage-2/backend/git-workflow/)
|
||||
|
||||
Zusaetzlich musst du lernen, wie man Zeabur verwendet, es mit GitHub verbindet und dein Projekt erfolgreich bereitstellt: [Was ist Zeabur](/de-de/stage-2/backend/zeabur-deployment/)
|
||||
|
||||
Wenn dir die eigenstaendige Entwicklung eines Hogwarts-Portraits-Projekts schwerfaellt, kannst du zunaechst mit der Modifikation eines bestehenden Projekts beginnen. Die offizielle Code-Adresse fuer diese Lektion lautet: https://github.com/THU-SIGS-AIID/Project4-Hogwarts-Portraits
|
||||
|
||||
|
||||
|
||||
# 4. Unterschiedliche Designstile ausprobieren
|
||||
|
||||
Nach Abschluss der ersten Version muessen wir uns nicht darauf beschraenken. Wir ermutigen euch, schnell weitere visuelle Stile zu erkunden. Du kannst im Prototyp-Bereich mutige Aenderungen vornehmen oder auf Basis des fertigen Projekts vollstaendig neue Prompts aendern, um mehrere Seiten mit deutlich unterschiedlichen Stilen zu generieren. Zum Beispiel eine dunkle Seite mit Vintage-Textur im "alten Buecher/Akademie"-Stil, eine farbfrohe Seite voller "Maerchen/Cartoon"-Atmosphaere, oder eine minimalistische, visuell aufgeraeumte moderne Flat-Design-Seite. Die folgende Abbildung zeigt beispielsweise eine Umwandlung in ein chinesisches antikes Dichter-Design, bei der nur die anderen Teile geaendert wurden, nicht aber das Portraet-Bild:
|
||||
|
||||
|
||||
|
||||
Lass dich nicht auf die zuvor erwaehnten Muster beschraenken. Du kannst das magische Portraet oder die persoenliche Profilseite so anpassen, dass es charaktervoller wird und zur "magischen Portraet"-Gewohnheit passt -- das macht deine Anwendung interessanter. Wir freuen uns auf deine magischen Portraet-Ergebnisse!
|
||||
|
||||
# :books: Aufgabe
|
||||
|
||||
Das Ziel der Hausaufgabe fuer diese Lektion ist es, ein wirklich eigenes Hogwarts Portraits zu erstellen, das ueber einen oeffentlichen Link zugaenglich ist.
|
||||
|
||||
Du musst in deiner Abgabe zwei Dinge bereitstellen:
|
||||
|
||||
1. **Deinen GitHub-Repository-Link;**
|
||||
1. **Schreibe in der README.md ein bis zwei Saetze als kurze Erklaerung: Wen du als Portraet-Protagonisten gewaehlt hast und warum.**
|
||||
2. **Deinen Hogwarts-Portraits-Online-Zugaenglichkeits-Link;**
|
||||
|
||||
Du kannst auch auf Yerims Tutorial [Webseiten mit Design- und Code-Agenten erstellen](/de-de/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) zurueckgreifen, um ein persoenliches Portfolio oder eine beliebige einfache Funktionswebseite schnell aufzubauen.
|
||||
@@ -0,0 +1,513 @@
|
||||
# Oberflaechen mit LLM und Skills schoen gestalten: Prompts und Plugins in der Praxis
|
||||
|
||||
In den vorherigen Lektionen hast du gelernt, wie man mit AI IDE Designentwuerfe in Code umwandelt und mit Komponentenbibliotheken schnell Interfaces aufbaut. Aber du hast vielleicht auch ein peinliches Problem entdeckt: **Bei denselben Anforderungen wirken die von AI generierten Seiten immer ein bisschen unbefriedigend** -- die Schrift ist das allgegenwaertige Inter, die Farbgestaltung ein ueberall sichtbarer Lila-Gradient, das Layout eine zum Gaehnen animierende symmetrische Kartenrasterung, und die ganze Seite verstraekt einen starken "AI-Geruch".
|
||||
|
||||
Das ist nicht AIs Fehler, sondern du hast ihr nicht gesagt, welchen **Stil** du moechtest.
|
||||
|
||||
Stell dir vor, du gehst zum Friseur. Wenn du nur sagst "Schneiden Sie mir die Haare", bekommst du ein sicheres, aber mittelmasses Ergebnis. Wenn du aber sagst "Ich moechte einen laessigen japanischen Locken-Look, Pony in Acht-Form, Laenge bis zum Schluesselbein, mit deutlicher Staffelung", bekommst du genau das, was du dir vorstellst.
|
||||
|
||||
Bei AI ist es genauso. **Sie braucht eine klare aesthetische Richtung**, um schoene und einzigartige Interfaces zu generieren.
|
||||
|
||||
Diese Lektion bringt dir zwei Methoden bei, mit denen AI schoene Interfaces generiert:
|
||||
|
||||
1. **Sorgfaeltig gestaltete Prompt-Vorlagen** -- AI in natuerlicher Sprache sagen, welchen aesthetischen Stil du moechtest
|
||||
2. **Frontend-Skills-Plugins** -- AI automatisch professionelle Designrichtlinien laden lassen
|
||||
|
||||
## Was du lernen wirst
|
||||
|
||||
1. Verstehen, warum AI standardmaessig "durchschnittliche" Interfaces generiert
|
||||
2. Die 5 Dimensionen zur Beschreibung von Designstilen beherrschen (Schrift, Farbe, Layout, Animation, Details)
|
||||
3. 3 Skills-Plugins kennenlernen, die Interfaces verschönern
|
||||
4. Durch drei praktische Szenarien die Generierung schoener Interfaces mit Prompts + Skills ueben
|
||||
|
||||
## 1. Warum AI standardmaessig "durchschnittliche" Interfaces generiert
|
||||
|
||||
In den AI-Trainingsdaten gibt es riesige Mengen an Frontend-Code, und der Grossteil verwendet "sichere" Entscheidungen:
|
||||
|
||||
| Dimension | AIs Standardwahl | Problem |
|
||||
| :--- | :--- | :--- |
|
||||
| Schrift | Inter, Roboto, Arial | Zu verbreitet, keine Persoenlichkeit |
|
||||
| Farbe | Lila-Gradient, Blau als Hauptfarbe | In der Tech-Szene uebermaessig genutzt, visuelle Ermuedung |
|
||||
| Layout | Symmetrische Raster, Kartenstapelung | Hohe Vorhersagbarkeit, keine Ueberraschung |
|
||||
| Animation | Einblenden/Ausblenden, einfaches Hover | Nicht raffiniert genug, fehlende Tiefe |
|
||||
| Hintergrund | Einfarbig, einfache Gradienten | Monoton, fehlende Textur |
|
||||
|
||||
Diese Entscheidungen sind einzeln betrachtet alle nicht schlecht, aber **wenn alle AI-generierten Seiten sie verwenden, wird es zum "AI-Geruch"**.
|
||||
|
||||
> :bulb: **Schluesselerkenntnis**: AI kann nicht kein Design -- sie faellt **standardmaessig auf den "statistischen Durchschnitt" zurueck**. Du musst ihr explizit die Richtung vorgeben, in die sie vom Durchschnitt abweichen soll.
|
||||
|
||||
## 2. Methode 1: Designstil mit Prompts beschreiben
|
||||
|
||||
### 2.1 Die 5 Dimensionen des Designstils
|
||||
|
||||
Um schoene Interfaces zu generieren, musst du das gewuenschte Ergebnis aus 5 Dimensionen beschreiben:
|
||||
|
||||
| Dimension | Beschreibungspunkte | Beispiel-Schluesselwoerter |
|
||||
| :--- | :--- | :--- |
|
||||
| **Schrift** | Ueberschriften mit fetter Display-Schrift, Fliesstext mit gut lesbarer Textschrift | Space Grotesk, Playfair Display, JetBrains Mono |
|
||||
| **Farbe** | Hauptfarbe + Akzentfarbe, gleichmaessige Verteilung vermeiden | #4F46E5 Hauptfarbe + #F59E0B Akzent |
|
||||
| **Layout** | Asymmetrisch, ueberlappend, Raster aufbrechen | Bento Grid, asymmetrische Aufteilung, schwebende Elemente |
|
||||
| **Animation** | Sorgfaeltig choreografiertes Seitenladen, Mikro-Interaktionen | staggered reveals, scroll-getriggert |
|
||||
| **Details** | Hintergrund, Schatten, Rahmen, Texturen | Rauschen, geometrische Muster, Gradienten-Netz |
|
||||
|
||||
### 2.2 Sehen ist Glauben: Normaler Prompt vs. Verschönerter Prompt
|
||||
|
||||
Vergleichen wir die Ergebnisse anhand einer Landing-Page:
|
||||
|
||||
**Normaler Prompt:**
|
||||
|
||||
```
|
||||
Bitte erstelle eine Landing-Page fuer einen AI-Schreibassistenten mit Navigation, Hero-Bereich, Funktionspraesentation, Preisgestaltung und Footer
|
||||
```
|
||||
|
||||
**Verschoenerter Prompt:**
|
||||
|
||||
```
|
||||
Bitte erstelle eine Landing-Page fuer einen AI-Schreibassistenten mit folgenden Anforderungen:
|
||||
|
||||
**Aesthetischer Stil: Neubrutalismus (Neubrutalism)**
|
||||
|
||||
**Schrift:**
|
||||
- Ueberschriften: Space Grotesk, Gewichtung 700-900
|
||||
- Fliesstext: IBM Plex Sans, Gewichtung 400
|
||||
|
||||
**Farbe:**
|
||||
- Hauptfarbe: #000000 (reines Schwarz)
|
||||
- Akzentfarbe: #FF6B00 (Orange)
|
||||
- Hintergrund: #FFFDF0 (elfenbeinfarben)
|
||||
- Rahmen: 3px schwarze durchgezogene Linie
|
||||
|
||||
**Layout:**
|
||||
- Asymmetrisches Layout, Elemente durch dicke schwarze Linien getrennt
|
||||
- Karten mit harten Schatten (box-shadow: 8px 8px 0px #000)
|
||||
- Mutige Kontraste beim Weißraum
|
||||
|
||||
**Animation:**
|
||||
- Elemente beim Seitenladen von unten einspringen
|
||||
- Hover: Button bewegt sich 2px nach oben
|
||||
|
||||
**Details:**
|
||||
- Alle Abrundungen auf 0px (rechte Winkel)
|
||||
- Buttons mit starkem 3D-Effekt
|
||||
- Hintergrund mit subtiler Rausch-Textur
|
||||
```
|
||||
|
||||
Dieselbe Anforderung, aber der zweite Prompt laesst AI eine stilistisch markante, einpraegsame Seite generieren.
|
||||
|
||||
### 2.3 Frontend-Verschönerungs-Skills-Ressourcenbibliothek
|
||||
|
||||
Beginne nicht bei null mit dem Schreiben von Prompts! Hier ist eine Sammlung von AI-Skills, die direkt mit der Frontend-Verschönerung zusammenhaengen:
|
||||
|
||||
| Repository-Name | Inhalt | Stars | Link |
|
||||
|:---|:---|:---|:---|
|
||||
| **ui-ux-pro-max-skill** | 57 Stile + 95 Farbpaletten + 56 Schriften | 10k+ | [GitHub](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) |
|
||||
| **antigravity-awesome-skills** | Vermeidet generische AI-Aesthetik-Klischees | - | [GitHub](https://github.com/sickn33/antigravity-awesome-skills) |
|
||||
| **superdesigndev/superdesign** | AI-natives UI-Entwicklungstool | 4.7k | [GitHub](https://github.com/superdesigndev/superdesign) |
|
||||
| **anthropics/skills/frontend-design** | Offizieller Anthropic Frontend-Design-Skill | - | [GitHub](https://github.com/anthropics/skills) |
|
||||
|
||||
> :bulb: Weitere Stil-Prompts findest du im Anhang: [Designstil-Prompt-Schnellreferenz](#style-prompts)
|
||||
|
||||
### 2.5 Drei haeufig verwendete Stil-Vorlagen
|
||||
|
||||
Hier sind drei erprobte Stil-Vorlagen, die du direkt kopieren und anpassen kannst:
|
||||
|
||||
#### Vorlage 1: Minimalismus
|
||||
|
||||
```
|
||||
**Aesthetischer Stil: Minimalismus**
|
||||
|
||||
**Schrift:**
|
||||
- Ueberschriften: PP Neue Montreal, Gewichtung 500-700
|
||||
- Fliesstext: Inter, Gewichtung 400
|
||||
|
||||
**Farbe:**
|
||||
- Hauptfarbe: #FFFFFF (Weiss)
|
||||
- Text: #1A1A1A (Fast-Schwarz)
|
||||
- Akzent: #3B82F6 (Blau, sparsam verwenden)
|
||||
|
||||
**Layout:**
|
||||
- Viel Weißraum (padding mindestens 64px)
|
||||
- Ein- oder zweispaltiges Layout, zentriert
|
||||
- Elemente durch Weißraum statt Trennlinien gliedern
|
||||
|
||||
**Animation:**
|
||||
- Langsames Einblenden (Dauer 600ms)
|
||||
- Hover: sanfter Farbuebergang
|
||||
|
||||
**Details:**
|
||||
- Abrundung: 8px
|
||||
- Schatten: subtil (0 4px 12px rgba(0,0,0,0.08))
|
||||
- Keine Hintergrund-Dekoration
|
||||
```
|
||||
|
||||
#### Vorlage 2: Glassmorphismus
|
||||
|
||||
```
|
||||
**Aesthetischer Stil: Glassmorphism**
|
||||
|
||||
**Schrift:**
|
||||
- Ueberschriften: Outfit, Gewichtung 600-800
|
||||
- Fliesstext: Plus Jakarta Sans, Gewichtung 400-500
|
||||
|
||||
**Farbe:**
|
||||
- Hintergrund: Gradient #667eea bis #764ba2
|
||||
- Karten-Hintergrund: rgba(255, 255, 255, 0.1)
|
||||
- Text: #FFFFFF
|
||||
|
||||
**Layout:**
|
||||
- Schwebende Karten-Gestaltung
|
||||
- Karten ueberlappen sich
|
||||
|
||||
**Animation:**
|
||||
- Karten erscheinen nacheinander beim Laden (staggered)
|
||||
- Hover: Karte vergroessert sich um den Faktor 1.05
|
||||
|
||||
**Details:**
|
||||
- Abrundung: 20px
|
||||
- Hintergrund-Unschaerfe: backdrop-blur-xl
|
||||
- Rahmen: 1px rgba(255, 255, 255, 0.2)
|
||||
- Subtile Gradient-Leuchteffekte
|
||||
```
|
||||
|
||||
#### Vorlage 3: Bento Grid
|
||||
|
||||
```
|
||||
**Aesthetischer Stil: Bento Grid**
|
||||
|
||||
**Schrift:**
|
||||
- Ueberschriften: SF Pro Display, Gewichtung 700
|
||||
- Fliesstext: SF Pro Text, Gewichtung 400
|
||||
|
||||
**Farbe:**
|
||||
- Hintergrund: #F5F5F7 (Hellgrau)
|
||||
- Karten: #FFFFFF (Weiss)
|
||||
- Akzent: #0071E3 (Apple-Blau)
|
||||
|
||||
**Layout:**
|
||||
- Raster-Layout mit unterschiedlich grossen Karten
|
||||
- Kartenabstand: 16px
|
||||
- Abrundung: 24px
|
||||
|
||||
**Animation:**
|
||||
- Hover: Karte schwebt leicht nach oben
|
||||
- Klick: Druckeffekt
|
||||
|
||||
**Details:**
|
||||
- Grosse Karten fuer wichtige Inhalte
|
||||
- Kleine Karten fuer sekundaere Informationen
|
||||
- Icons statt Text wo moeglich
|
||||
- Saubere Schatten (0 4px 24px rgba(0,0,0,0.06))
|
||||
```
|
||||
|
||||
## 3. Methode 2: Designrichtlinien automatisch mit Skills-Plugins laden
|
||||
|
||||
Jedes Mal manuell Stil-Prompts zu schreiben, ist muehsam. **Skills** sind wiederverwendbare Designrichtlinien-Pakete -- nach der Installation wendet AI diese Richtlinien automatisch an.
|
||||
|
||||
### 3.1 Drei Skills fuer schoenere Interfaces
|
||||
|
||||
| Skills | Merkmale | Installationsbefehl |
|
||||
| :--- | :--- | :--- |
|
||||
| **UI/UX Pro Max** | 67 Stile, 96 Farbpaletten, 57 Schriftkombinationen | `npm install -g uipro-cli && uipro init --ai claude` |
|
||||
| **frontend-design** | Offiziell von Anthropic, vermeidet AI-Aesthetik-Klischees | `npx skills add anthropics/skills/frontend-design` |
|
||||
| **SuperDesign** | IDE-Plugin, generiert mehrere Designvarianten | VSCode-Erweiterungsmarkt nach "SuperDesign" suchen |
|
||||
|
||||
### 3.2 UI/UX Pro Max installieren (am empfohlensten)
|
||||
|
||||
UI/UX Pro Max ist das derzeit umfassendste Designrichtlinien-Skill. Es enthaelt vorkonfiguriert:
|
||||
|
||||
- **67 UI-Stile**: Glassmorphism, Neumorphism, Brutalism, Bento Grid...
|
||||
- **96 Farbpaletten**: Nach Branchen kategorisiert (SaaS, E-Commerce, Social...)
|
||||
- **57 Schrift-Kombinationen**: Von professionellen Designern verifizierte Paarungen
|
||||
- **100+ Designregeln**: Vorgaben fuer Abstaende, Abrundungen und Schatten
|
||||
|
||||
**Installationsschritte:**
|
||||
|
||||
```bash
|
||||
# 1. CLI global installieren
|
||||
npm install -g uipro-cli
|
||||
|
||||
# 2. Initialisieren (waehle dein AI-Tool)
|
||||
uipro init --ai claude
|
||||
# oder
|
||||
uipro init --ai cursor
|
||||
# oder
|
||||
uipro init --ai trae
|
||||
```
|
||||
|
||||
Nach der Installation musst du im Prompt nur einen Satz hinzufuegen:
|
||||
|
||||
```
|
||||
Verwende den Glassmorphism-Stil von UI/UX Pro Max und erstelle eine Landing-Page fuer einen AI-Schreibassistenten
|
||||
```
|
||||
|
||||
AI wendet automatisch die entsprechenden Schrift-, Farb- und Layoutvorgaben an.
|
||||
|
||||
### 3.3 Offizielles Anthropic frontend-design installieren
|
||||
|
||||
Dies ist das offizielle Frontend-Design-Skill von Anthropic, speziell zur Loesung des "AI-Aesthetik-Klischee"-Problems:
|
||||
|
||||
```bash
|
||||
# In Claude Code ausfuehren
|
||||
npx skills add anthropics/skills/frontend-design
|
||||
```
|
||||
|
||||
Nach der Installation vermeidet AI automatisch:
|
||||
- Inter, Roboto, Arial als Schriftarten
|
||||
- Lila-Gradient-Hintergruende
|
||||
- Symmetrische Raster-Layouts
|
||||
- Zu schwache Schatten
|
||||
|
||||
Sie neigt stattdessen zu:
|
||||
- Einzigartigen Schriftkombinationen
|
||||
- Mutigen Hauptfarben + scharfen Akzentfarben
|
||||
- Asymmetrischen, ueberlappenden Layouts
|
||||
- Texturierten Hintergruenden (Rauschen, geometrische Muster)
|
||||
|
||||
## 4. Praktische Uebung 1: Landing-Page mit verschönernden Prompts neu gestalten
|
||||
|
||||
Lass uns das bisher Gelernte anwenden, um eine gewoehnliche Landing-Page schoen zu machen.
|
||||
|
||||
### 4.1 Gewoehnliche Version
|
||||
|
||||
Zunaechst ein normaler Prompt, um zu sehen, was AI liefert:
|
||||
|
||||
```
|
||||
Bitte erstelle eine Landing-Page fuer eine Haustier-Adoptionsplattform mit:
|
||||
- Navigation (Logo, Links, Registrierungs-Button)
|
||||
- Hero-Bereich (Ueberschrift, Unterueberschrift, CTA-Button, Tier-Bild)
|
||||
- Tier-Vorstellung (drei Tierkarten)
|
||||
- Ueber uns
|
||||
- Footer
|
||||
```
|
||||
|
||||
Die generierte Seite... funktioniert, ist aber sehr gewoehnlich.
|
||||
|
||||
### 4.2 Verschönererte Version
|
||||
|
||||
Jetzt mit Stil-Beschreibung:
|
||||
|
||||
```
|
||||
Bitte erstelle eine Landing-Page fuer eine Haustier-Adoptionsplattform mit folgenden Anforderungen:
|
||||
|
||||
**Aesthetischer Stil: Warm und weich + handgezeichnet**
|
||||
|
||||
**Schrift:**
|
||||
- Ueberschriften: Nunito (rund), Gewichtung 700-800
|
||||
- Fliesstext: Nunito, Gewichtung 400-600
|
||||
|
||||
**Farbe:**
|
||||
- Hauptfarbe: #FFB347 (warmes Orange)
|
||||
- Sekundaerfarbe: #FFCCB3 (hell-Orange)
|
||||
- Hintergrund: #FFF8F0 (elfenbeinfarben)
|
||||
- Text: #5D4037 (Braun)
|
||||
|
||||
**Layout:**
|
||||
- Abgerundete Karten (border-radius: 24px)
|
||||
- Karten leicht geneigt (unterschiedliche Winkel)
|
||||
- Schwebende, ueberlappende Elemente
|
||||
|
||||
**Animation:**
|
||||
- Elemente gleiten beim Laden von beiden Seiten ein
|
||||
- Tier-Karten bewegen sich beim Hover wie ein nickendes Haustier (Rotate-Animation)
|
||||
- Button mit Bounce-Effekt beim Hover
|
||||
|
||||
**Details:**
|
||||
- Alle Abrundungen 16-24px
|
||||
- Warme, weiche Schatten (0 8px 24px rgba(255,179,71,0.3))
|
||||
- Hintergrund mit Pfotenabdruck-Muster-Dekoration
|
||||
- Bilder mit unregelmaessigem Zuschnitt (clip-path)
|
||||
- Handgezeichnete Icons (Outline-Stil)
|
||||
```
|
||||
|
||||
Die generierte Seite wird ein warmes, niedliches Interface sein, das einen zur Adoption animieren moechte.
|
||||
|
||||
## 5. Praktische Uebung 2: Dashboard schnell mit Skills generieren
|
||||
|
||||
Skills eignen sich besonders fuer Backend-Systeme mit vielen Seiten.
|
||||
|
||||
### 5.1 Mit UI/UX Pro Max
|
||||
|
||||
```
|
||||
Verwende den Dashboard Dark-Stil von UI/UX Pro Max
|
||||
und erstelle eine Dashboard-Seite fuer ein SaaS-Produktmanagement-Backend mit:
|
||||
|
||||
**Oben:** Vier Statistik-Karten (Nutzerzahl, aktive Nutzer, Umsatz, API-Aufrufe)
|
||||
|
||||
**Mitte:**
|
||||
- Links: Liniendiagramm zum Nutzerwachstum (letzte 7 Tage)
|
||||
- Rechts: Kreisdiagramm zur Abonnement-Plan-Verteilung
|
||||
|
||||
**Unten:** Liste der letzten Aktivitaeten (Zeit, Nutzer, Aktion)
|
||||
```
|
||||
|
||||
AI wendet automatisch die Designvorgaben fuer dunkle Dashboards an:
|
||||
- Dunkelgrauer Hintergrund (#1A1A2E)
|
||||
- Hochkontrast-Karten (#16213E)
|
||||
- Lebendige Datenfarben (Blau, Gruen, Orange)
|
||||
- Schwebende Karten mit Glassmorphismus-Effekt
|
||||
|
||||
### 5.2 Mit dem frontend-design-Skill
|
||||
|
||||
```
|
||||
Verwende das frontend-design Skill
|
||||
und erstelle eine Homepage fuer einen persoenlichen Blog, der Stil soll einzigartig und markant sein
|
||||
```
|
||||
|
||||
AI waehlt eine nicht-mainstreamige aesthetische Richtung (z. B. Retro-Futurismus oder Magazin-Stil) und setzt sie mit einzigartiger Schrift, Farbgestaltung und Layout um.
|
||||
|
||||
## 6. Praktische Uebung 3: Eigenes Design-System-Skill erstellen
|
||||
|
||||
Wenn du einen festen Markenstil hast, kannst du ein eigenes Skill erstellen, sodass alle AI-generierten Seiten deiner Marke entsprechen.
|
||||
|
||||
### 6.1 Skill-Datei erstellen
|
||||
|
||||
Erstelle in deinem Projekt die Datei `.claude/skills/my-brand/SKILL.md`:
|
||||
|
||||
````markdown
|
||||
---
|
||||
name: my-brand
|
||||
description: Mein projektspezifisches Design-System, das sicherstellt, dass alle UI einer einheitlichen Designsprache folgen
|
||||
---
|
||||
|
||||
# Mein Projekt-Design-System
|
||||
|
||||
## Markenfarben
|
||||
- Hauptfarbe: #6366F1 (Indigo 500)
|
||||
- Sekundaerfarbe: #8B5CF6 (Violet 500)
|
||||
- Erfolg: #10B981
|
||||
- Warnung: #F59E0B
|
||||
- Fehler: #EF4444
|
||||
- Hintergrund: #F9FAFB
|
||||
- Karten: #FFFFFF
|
||||
|
||||
## Schriftsystem
|
||||
- Ueberschriften: Plus Jakarta Sans
|
||||
- H1: 700, 48px
|
||||
- H2: 600, 36px
|
||||
- H3: 600, 24px
|
||||
- Fliesstext: Inter
|
||||
- Body: 400, 16px
|
||||
- Small: 400, 14px
|
||||
|
||||
## Abstandssystem
|
||||
- Grundeinheit: 4px
|
||||
- Komponenten-Innenabstand: 8px / 12px / 16px
|
||||
- Blockabstaende: 24px / 32px / 48px
|
||||
- Seitenraender: 64px
|
||||
|
||||
## Abrundungen
|
||||
- Buttons: 8px
|
||||
- Karten: 12px
|
||||
- Eingabefelder: 8px
|
||||
- Modale Dialoge: 16px
|
||||
|
||||
## Schatten
|
||||
- Klein: 0 1px 3px rgba(0,0,0,0.1)
|
||||
- Mittel: 0 4px 12px rgba(0,0,0,0.1)
|
||||
- Gross: 0 8px 24px rgba(0,0,0,0.12)
|
||||
|
||||
## Animation
|
||||
- Uebergangszeit: 150ms / 300ms
|
||||
- Easing-Funktion: cubic-bezier(0.4, 0, 0.2, 1)
|
||||
- Hover-Effekt: Leichte Vergroesserung (scale-105)
|
||||
|
||||
## Verbotene Stile
|
||||
- Keine Lila-Gradient-Hintergruende verwenden
|
||||
- Keine anderen Schriften als Inter verwenden
|
||||
- Keine Abrundungen groesser als 16px
|
||||
- Kein reines Schwarz (#000000), stattdessen #1F2937
|
||||
````
|
||||
|
||||
### 6.2 Eigenes Skill verwenden
|
||||
|
||||
Nach dem Erstellen musst du im Prompt nur sagen:
|
||||
|
||||
```
|
||||
Verwende das my-brand Skill und erstelle eine Benutzereinstellungsseite
|
||||
```
|
||||
|
||||
AI wendet automatisch alle von dir definierten Designvorgaben an.
|
||||
|
||||
## 7. Zusammenfassung
|
||||
|
||||
Es gibt zwei Methoden, um AI schoene Interfaces generieren zu lassen:
|
||||
|
||||
| Methode | Vorteile | Nachteile | Anwendungsbereich |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **Prompt-Beschreibung** | Flexibel, jedes Mal anpassbar | Muss wiederholt geschrieben werden | Einmalige Seiten, verschiedene Stile ausprobieren |
|
||||
| **Skills-Plugins** | Einmal installiert, dauerhaft wirksam | Installation und Konfiguration erforderlich | Projekte mit festen Stilvorgaben |
|
||||
|
||||
**Vibe Coding Workflow-Empfehlung:**
|
||||
|
||||
1. **Explorationsphase**: Mit verschiedenen Stil-Prompts experimentieren, um deine bevorzugte aesthetische Richtung zu finden
|
||||
2. **Nach Festlegung des Stils**: Das entsprechende Skill installieren (UI/UX Pro Max oder frontend-design)
|
||||
3. **Markenprojekte**: Eigenes Skill erstellen, das die Designsprache des gesamten Projekts vereinheitlicht
|
||||
|
||||
### Uebung
|
||||
|
||||
Waehle eines der folgenden Szenarien und schliesse es von Grund auf mit den Methoden dieser Lektion ab:
|
||||
|
||||
1. Verwende Stil-Prompts, um das Interface eines deiner frueheren Projekte neu zu gestalten (waehle einen Stil, der dir gefaellt)
|
||||
2. Installiere UI/UX Pro Max und generiere eine neue Seite mit einem seiner Stile
|
||||
3. Erstelle dein eigenes Design-System-Skill mit deinen Markenfarben und Schriften
|
||||
|
||||
---
|
||||
|
||||
## Anhang: Designstil-Schnellreferenz
|
||||
|
||||
| Stil | Schluesselwoerter | Anwendungsbereich | Beispielprodukt |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **Minimalismus** | Weißraum, einfarbig, schlicht | High-End-Produkte, persoenliche Portfolios | Apple-Website |
|
||||
| **Glassmorphismus** | Milchglas, Gradienten, Unschaerfe | Technologieprodukte, SaaS-Landing-Pages | macOS Big Sur |
|
||||
| **Neubrutalismus** | Dicke Rahmen, harte Schatten, pure Farben | Trend-Marken, Kunst-Websites | Brassius |
|
||||
| **Bento Grid** | Raster, Collage, Karten | Informationsdarstellung, Dashboards | Apple Promo-Seiten |
|
||||
| **Retro-Futurismus** | Neon, Gradienten, Synthesizer-Wave | Spiele, Musik | STRANGER THINGS |
|
||||
| **Handgezeichneter Stil** | Unregelmessig, abgerundet, Illustrationen | Bildung, Kinderprodukte | Duolingo |
|
||||
| **Magazin-Stil** | Grosse Schriften, asymmetrisch, Weißraum | Inhalts-Websites, Blogs | Medium |
|
||||
| **Dunkler Luxus** | Dunkel, Gold, raffiniert | High-End-Produkte, Luxusmarken | Verschiedene Premium-Marken |
|
||||
|
||||
## Anhang: Skills-Installation-Schnellreferenz
|
||||
|
||||
```bash
|
||||
# UI/UX Pro Max
|
||||
npm install -g uipro-cli
|
||||
uipro init --ai claude
|
||||
|
||||
# Anthropic frontend-design
|
||||
npx skills add anthropics/skills/frontend-design
|
||||
|
||||
# Anthropic brand-guidelines
|
||||
npx skills add anthropics/skills/brand-guidelines
|
||||
|
||||
# Installierte Skills in Claude Code anzeigen
|
||||
/help
|
||||
```
|
||||
|
||||
## Anhang: Farbpaletten-Empfehlungen
|
||||
|
||||
| Farbpalette | Hauptfarbe | Akzentfarbe | Hintergrund | Stil |
|
||||
| :--- | :--- | :--- | :--- | :--- |
|
||||
| **Sonnenuntergang** | #F97316 | #FBBF24 | #FFF7ED | Warm, dynamisch |
|
||||
| **Ozean** | #0EA5E9 | #06B6D4 | #F0F9FF | Frisch, professionell |
|
||||
| **Wald** | #10B981 | #34D399 | #ECFDF5 | Natur, Gesundheit |
|
||||
| **Beere** | #8B5CF6 | #EC4899 | #FAF5FF | Romantisch, kreativ |
|
||||
| **Kaffee** | #78350F | #D97706 | #FFFBEB | Warm, Retro |
|
||||
| **Monolith** | #6B7280 | #9CA3AF | #F9FAFB | Professionell, neutral |
|
||||
|
||||
## Anhang: Designstil-Prompt-Schnellreferenz {#style-prompts}
|
||||
|
||||
Prompts, die man ausprobieren kann, um Frontend-Seiten schoener zu machen:
|
||||
|
||||
### Stilkategorien
|
||||
|
||||
| Stil | Schluesselwoerter (Englisch) | Kern-Visuelle Merkmale | Prompt-Beispiel |
|
||||
|:---|:---|:---|:---|
|
||||
| **Pop Art** | Pop Art | Kuehne Kontrastfarben, schwarze Konturlinien, Raster-Punkte | Pop art style website, bold colors and comic dots, vibrant |
|
||||
| **Minimalismus** | Minimalism | Viel Weißraum, minimale Farben und Linien, keine Dekoration | Minimalist web design, ample white space, geometric, serene |
|
||||
| **Abstrakter Expressionismus** | Abstract Expressionism | Emotional aufgeladene Pinselstriche, Farbverwürfe | Abstract expressionism background, dynamic paint splashes, emotional |
|
||||
| **Retro-Stil** | Retro/Vintage | Alte Schriften, gealterte Texturen, Retro-Farbgebung | Retro 80s website design, neon grid and synthwave color palette |
|
||||
| **Cyberpunk** | Cyberpunk | Hochkontrast-Neonfarben, Glitch-Art-Effekte, dunkler Hintergrund | Cyberpunk UI, neon lights on dark background, glitch effects |
|
||||
| **Neumorphismus** | Neumorphism | Weiche Schatten und Highlights, leicht erhabene/vertiefte Textur | Neumorphism design style, soft shadows, clean and modern |
|
||||
| **Generative Kunst** | Generative Art | Algorithmisch generierte fliessende visuelle Muster | Generative art background, flowing algorithmic patterns, digital |
|
||||
| **Acid Graphics** | Acid Graphics | Metallische Textur, Glas-Zustand, gezackte Schriften | Acid graphics web layout, glass morphism, chaotic typography |
|
||||
| **Immersives 3D** | Immersive 3D | Interaktive 3D-Szenen, starke Tiefenwirkung | Immersive 3D website, interactive product model in space |
|
||||
@@ -0,0 +1,851 @@
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const relatedArticles = relatedArticlesMap['de-de/stage-2/frontend/lovart-assets'] ?? []
|
||||
</script>
|
||||
|
||||
# Von NanoBanana ausgehend: deinen eigenen Asset-Produktions-Agenten aufbauen
|
||||
|
||||
## Kapitel 1: In 1 Minute das erste Bild-Asset generieren
|
||||
|
||||
Bevor wir ueber Design, Stil oder Prompts diskutieren, generieren wir zuerst mit den minimalsten Schritten das erste Bild.
|
||||
|
||||
### 1.1 NanoBanana kennenlernen
|
||||
|
||||
Bevor wir ueber Designstile und Prompt-Engineering diskutieren, moechten wir zuerst eine wichtigere Frage klaeren: **Sicherstellen, dass du wirklich ein Bild generieren kannst.**
|
||||
|
||||
Aktuelle Mainstream-Grossmodelle verfügen bereits ueber Bildgenerierungs- und Bearbeitungsfaehigkeiten. Diese Modelle werden normalerweise als **generative Modelle** bezeichnet.
|
||||
|
||||
Um den Prozess so einfach wie moeglich zu halten, waehlt dieses Tutorial ein Modell, das bereits stabile Bildgenerierungs- und Bearbeitungsfaehigkeiten besitzt, als Beispiel -- NanoBanana. Es ist ein von Google herausgegebenes Bildgenerierungsmodell mit dem offiziellen Namen **Gemini 3.1 Flash Image Preview**, das die direkte Bildgenerierung ueber natuerliche Sprache unterstuetzt und auch die Bearbeitung vorhandener Bilder ermoeglicht.
|
||||
|
||||
|
||||
|
||||
Auf der Faehigkeitsebene gibt es keinen wesentlichen Unterschied zu anderen Modellen, die du vielleicht kennst (wie GPT-4o, Claude, Qwen, Midjourney etc.): **Beschreibung eingeben, das Modell generiert das Ergebnis.**
|
||||
|
||||
|
||||
|
||||
Du kannst es dir als einen "Pinsel" vorstellen. In diesem Kapitel interessiert uns nur eine Frage:
|
||||
**Kann dieser Pinsel in deiner Hand den ersten Strich ziehen.**
|
||||
|
||||
In der praktischen Verwendung kann NanoBanana direkt ueber offizielle Plattformen wie **Google AI Studio** verwendet werden oder ueber **API** in den Entwicklungsprozess integriert werden. Dieses Tutorial verwendet die API-Aufrufmethode. Mittlerweile ist auch das NanoBanana 2-Modell verfuegbar, und du kannst die neuesten Grossmodelle ausprobieren.
|
||||
|
||||
### 1.2 "Hello World"-Level-Generierung
|
||||
|
||||
Bevor du beginnst, musst du nur die folgenden drei Schritte abschliessen:
|
||||
|
||||
1. Erstelle einen neuen Ordner in Trae
|
||||
|
||||
|
||||
|
||||
2. Erstelle eine neue Python-Datei
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. Den folgenden Code vollstaendig einfuegen
|
||||
|
||||
Trae schliesst automatisch die erforderliche Umgebungsbereitstellung und Abhaengigkeitsinstallation ab, ohne zusaetzliche Konfiguration.
|
||||
|
||||
Der Code verwendet den API-Key von NanoBanana. Hier wird der Antragsprozess nicht im Detail erlaeutert -- solange du den entsprechenden Parameter abrufen und eingeben kannst. **In dieser Phase geht es nicht darum, jede Codezeile zu verstehen, sondern dass er erfolgreich ausgefuehrt wird.**
|
||||
|
||||
```Python
|
||||
# /// script
|
||||
# dependencies = [
|
||||
# "gradio>=4.0.0",
|
||||
# "pillow>=10.0.0",
|
||||
# "requests>=2.31.0",
|
||||
# ]
|
||||
# ///
|
||||
|
||||
import gradio as gr
|
||||
import requests
|
||||
import base64
|
||||
from PIL import Image
|
||||
import io
|
||||
import os
|
||||
import time
|
||||
import re
|
||||
from typing import Optional, Dict, Any, List
|
||||
|
||||
# API-Informationen konfigurieren
|
||||
NANOBANANA_API_URL: str = "YOUR API URL"
|
||||
NANOBANANA_API_KEY: str = "YOUR API KEY"
|
||||
OUTPUT_DIR: str = "outputs"
|
||||
|
||||
# Sicherstellen, dass das Ausgabeverzeichnis existiert
|
||||
os.makedirs(OUTPUT_DIR, exist_ok=True)
|
||||
|
||||
def image_to_base64_data_uri(image: Image.Image) -> str:
|
||||
"""
|
||||
Konvertiert ein PIL-Bild in ein OpenAI-API-kompatibles data URI-Format.
|
||||
"""
|
||||
buffer = io.BytesIO()
|
||||
# Einheitlich nach PNG konvertieren fuer Kompatibilitaet
|
||||
image.save(buffer, format="PNG")
|
||||
encoded = base64.b64encode(buffer.getvalue()).decode('utf-8')
|
||||
return f"data:image/png;base64,{encoded}"
|
||||
|
||||
def base64_to_image(base64_str: str) -> Optional[Image.Image]:
|
||||
"""
|
||||
Konvertiert einen reinen Base64-String in ein PIL-Bild.
|
||||
"""
|
||||
try:
|
||||
image_bytes = base64.b64decode(base64_str)
|
||||
return Image.open(io.BytesIO(image_bytes))
|
||||
except Exception as e:
|
||||
print(f"Base64-Decodierung fehlgeschlagen: {e}")
|
||||
return None
|
||||
|
||||
def extract_base64_from_response(content: Any) -> Optional[str]:
|
||||
"""
|
||||
Kern-Parselogik: Extrahiert Bild-Base64-Daten aus dem von der API zurueckgegebenen content.
|
||||
Kompatibel mit Markdown-Format und strukturiertem Listenformat.
|
||||
"""
|
||||
if not content:
|
||||
return None
|
||||
|
||||
base64_data = None
|
||||
|
||||
# 1. Versuch der strukturierten Extraktion (List)
|
||||
if isinstance(content, list):
|
||||
for part in reversed(content):
|
||||
if isinstance(part, dict):
|
||||
img_field = part.get("image_url") or part.get("image") or part.get("output_image")
|
||||
if isinstance(img_field, dict):
|
||||
url = img_field.get("url", "")
|
||||
if url.startswith("data:image/") and "," in url:
|
||||
return url.split(",", 1)[1].strip()
|
||||
|
||||
text_parts = [
|
||||
str(p.get("text", ""))
|
||||
for p in content
|
||||
if isinstance(p, dict) and p.get("type") in ["text", "input_text"]
|
||||
]
|
||||
content_str = "".join(text_parts)
|
||||
else:
|
||||
content_str = str(content)
|
||||
|
||||
# 2. Versuch der Markdown-Regex-Extraktion (String)
|
||||
pattern = re.compile(r"!\[.*?\]\((data:image/[^;]+;base64,[^)]+)\)", re.IGNORECASE)
|
||||
match = pattern.search(content_str)
|
||||
|
||||
if match:
|
||||
data_url = match.group(1)
|
||||
if "," in data_url:
|
||||
return data_url.split(",", 1)[1].strip()
|
||||
|
||||
return None
|
||||
|
||||
def synthesize(prompt: str, input_image: Optional[Image.Image]) -> Optional[Image.Image]:
|
||||
"""
|
||||
Ruft die Nanobanana-API fuer die Generierung auf.
|
||||
"""
|
||||
if not prompt or not prompt.strip():
|
||||
gr.Warning("Bitte gib einen Prompt ein")
|
||||
return None
|
||||
|
||||
print(f">>> Aufgabe starten: {prompt[:50]}...")
|
||||
|
||||
headers = {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": f"Bearer {NANOBANANA_API_KEY}"
|
||||
}
|
||||
|
||||
messages = []
|
||||
|
||||
if input_image is not None:
|
||||
print(">>> Eingabebild erkannt, multimodaler Modus wird verwendet")
|
||||
img_base64 = image_to_base64_data_uri(input_image)
|
||||
messages.append({
|
||||
"role": "user",
|
||||
"content": [
|
||||
{"type": "text", "text": prompt},
|
||||
{"type": "image_url", "image_url": {"url": img_base64}}
|
||||
]
|
||||
})
|
||||
else:
|
||||
messages.append({
|
||||
"role": "user",
|
||||
"content": prompt
|
||||
})
|
||||
|
||||
payload = {
|
||||
"messages": messages,
|
||||
"model": "gemini-2.5-flash-image",
|
||||
"stream": False
|
||||
}
|
||||
|
||||
try:
|
||||
response = requests.post(NANOBANANA_API_URL, headers=headers, json=payload, timeout=120)
|
||||
|
||||
if response.status_code != 200:
|
||||
error_msg = f"API-Anfrage fehlgeschlagen: {response.status_code} - {response.text}"
|
||||
print(error_msg)
|
||||
gr.Error(error_msg)
|
||||
return None
|
||||
|
||||
result = response.json()
|
||||
print(f"API-Rohantwort (gekuerzt): {str(result)[:200]}...")
|
||||
|
||||
content = None
|
||||
if "choices" in result and len(result["choices"]) > 0:
|
||||
content = result["choices"][0].get("message", {}).get("content")
|
||||
|
||||
if not content:
|
||||
gr.Warning("Kein content-Feld in der API-Antwort")
|
||||
return None
|
||||
|
||||
base64_str = extract_base64_from_response(content)
|
||||
|
||||
if base64_str:
|
||||
output_image = base64_to_image(base64_str)
|
||||
if output_image:
|
||||
return output_image
|
||||
|
||||
text_content = str(content) if not isinstance(content, list) else " ".join([str(x) for x in content])
|
||||
gr.Info(f"Kein Bild generiert, Modell gab Text zurueck: {text_content[:100]}...")
|
||||
return None
|
||||
|
||||
except requests.exceptions.Timeout:
|
||||
gr.Error("Anfrage-Zeitueberschreitung, bitte versuche es spaeter erneut")
|
||||
return None
|
||||
except Exception as e:
|
||||
import traceback
|
||||
traceback.print_exc()
|
||||
gr.Error(f"Ein unbekannter Fehler ist aufgetreten: {str(e)}")
|
||||
return None
|
||||
|
||||
# Gradio-Oberflaechenkonfiguration
|
||||
with gr.Blocks(title="Nanobanana Image Generator") as app:
|
||||
gr.Markdown("# Nanobanana Text/Image to Image")
|
||||
gr.Markdown("Basierend auf dem Gemini-2.5-Flash-Image-Modell, unterstuetzt Text-zu-Bild und Bild-zu-Bild.")
|
||||
|
||||
with gr.Row():
|
||||
with gr.Column():
|
||||
prompt_input = gr.Textbox(
|
||||
label="Prompt (Eingabe)",
|
||||
placeholder="z.B.: A cyberpunk cat holding a neon sign...",
|
||||
lines=3
|
||||
)
|
||||
image_input = gr.Image(
|
||||
label="Referenzbild (optional, fuer Bild-zu-Bild)",
|
||||
type="pil",
|
||||
height=300
|
||||
)
|
||||
submit_btn = gr.Button("Generierung starten", variant="primary")
|
||||
|
||||
with gr.Column():
|
||||
image_output = gr.Image(label="Generierungsergebnis", format="png")
|
||||
|
||||
submit_btn.click(
|
||||
fn=synthesize,
|
||||
inputs=[prompt_input, image_input],
|
||||
outputs=image_output
|
||||
)
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.launch(share=True)
|
||||
```
|
||||
|
||||
Wenn Trae eine erfolgreiche Ausführung anzeigt, klicke auf den bereitgestellten lokalen Link (normalerweise http://127.0.0.1:7860).
|
||||
|
||||
|
||||
|
||||
Wenn alles funktioniert, siehst du bereits eine funktionsfaehige KI-Zeichenoberflaeche.
|
||||
|
||||
Diese Oberflaeche sieht einfach aus, aber sie besitzt bereits die zwei wichtigsten Faehigkeiten von kommerziellen Zeichenwerkzeugen: Text-zu-Bild und Bild-zu-Bild.
|
||||
|
||||
* **Links:** **Eingabebereich (Input Zone)** -- Hier gibst du Anweisungen.
|
||||
* **Prompt (Eingabefeld):** Gib deine kreative Beschreibung ein (Englisch empfohlen).
|
||||
* **Input Image (Referenzbildfeld):**
|
||||
* **Text-zu-Bild-Modus:** Hier **leer** lassen.
|
||||
* **Bild-zu-Bild-Modus:** Ein lokales Bild hierher ziehen, die KI wird es als Grundlage fuer die Erstellung verwenden.
|
||||
* **Submit-Button:** Klicken, um die Anweisung zu senden und die Generierung zu starten.
|
||||
* **Rechts: Anzeigebereich (Output Zone)** -- Hier wird das Wunder sichtbar, die generierten Ergebnisse werden hier angezeigt.
|
||||
|
||||
|
||||
|
||||
Jetzt koennen wir versuchen, dein erstes Bild zu generieren!
|
||||
|
||||
Der in diesem Beispiel verwendete Prompt lautet:
|
||||
|
||||
> **A red apple**
|
||||
|
||||
Dies ist ein bewusst vereinfachtes Beispiel ohne Stil- oder Parameterbeschreibungen.
|
||||
|
||||
#### Tatsaechlicher Ablauf
|
||||
|
||||
Nach dem Ausfuehren des Codes kann der Prozess in drei Schritte zusammengefasst werden:
|
||||
|
||||
1. Textbeschreibung an das Modell senden
|
||||
2. Modell generiert das entsprechende Bild
|
||||
3. Bild wird als lokale Datei gespeichert
|
||||
|
||||
Nach einigen Sekunden siehst du das generierte Ergebnis lokal. Da die Modellgenerierung zufaellig ist, werden gleiche Prompts unterschiedliche Ergebnisse liefern. Du kannst mehrmals generieren und dein bevorzugtes Bild auswaehlen.
|
||||
|
||||
|
||||
|
||||
Du kannst auch deinen Prompt anreichern und ihm mehr Beschreibungen und Einschraenkungen geben. Mit dem folgenden Prompt wird das erhaltene Bild beispielsweise etwas besonderer.
|
||||
|
||||
```Plain
|
||||
"A hyper-realistic close-up of a fresh red apple with water droplets on its skin, sitting on a dark rustic wooden table. Cinematic dramatic lighting, rim light, shallow depth of field, bokeh background, 8k resolution, macro photography."
|
||||
```
|
||||
|
||||
|
||||
|
||||
Klicke im Output Image-Bereich auf Herunterladen, um das Bild lokal zu speichern.
|
||||
|
||||
|
||||
|
||||
### 1.3 Haeufige Asset-Generierungsszenarien fuer Bildgenerierungsmodelle
|
||||
|
||||
In der praktischen Arbeit werden Grossmodelle eher zur **effizienten Produktion von Design-Assets** eingesetzt als zur Erstellung einzelner Kunstwerke.
|
||||
|
||||
Wenn du die beliebtesten Beitraege von Design-Marketing-Accounts betrachtest, wirst du feststellen, dass sich ihre Produktion hauptsaechlich auf zwei Arten von Szenarien konzentriert:
|
||||
|
||||
* **Text-zu-Bild (von 0 auf 1)**
|
||||
* **Bildreferenz-Generierung (von 1 auf N)**
|
||||
|
||||
#### 1. Text-zu-Bild: Design-Materialien schnell abrufen
|
||||
|
||||
Diese Art von Szenario fokussiert sich auf Effizienz. Wenn Luecken im Design gefuellt werden muessen (wie Leerrojekte, Avatare, Illustrationen), fungiert die KI im Wesentlichen als eine **sofort generierende Bilddatenbank**.
|
||||
|
||||
1. ##### UI-Design-Materialien generieren
|
||||
|
||||
* Aktueller Trend: Glas-morphismus, Clay-Stil 3D-Icons auf Dribbble
|
||||
* Haeufige Darstellung: Transparente Materialien, leuchtende Raender, Bonbon-farbene Funktions- oder Wetter-Icons
|
||||
|
||||
**Beispiel-Prompt:**
|
||||
|
||||
> A set of 3D weather icons (sun, cloud, rain), glassmorphism style, frosted glass texture, soft pastel gradient colors, soft studio lighting, isometric view, transparent background, 4k.
|
||||
|
||||
|
||||
|
||||
2. ##### Logo generieren
|
||||
|
||||
* Aktueller Trend: Minimalistische Linien, geometrische Kombinationen fuer technologische Logos
|
||||
* Haeufige Darstellung: Schwarz-Weiss-Farbgebung, Negativraum-Design, klares Branding
|
||||
|
||||
**Beispiel-Prompt:**
|
||||
|
||||
> Minimalist vector logo design for a tech brand "Coffee Code", combining a coffee cup with coding brackets < >, flat design, solid black lines, white background, Paul Rand style, svg.
|
||||
|
||||
|
||||
|
||||
3. ##### Benutzerbilder fuer die Website generieren
|
||||
|
||||
* Aktueller Trend: 3D-Virtual-Avatare auf SaaS-Websites, um Urheberrechtprobleme mit echten Personen zu vermeiden
|
||||
* Haeufige Darstellung: Freundliche Ausdruecke, Cartoon-Proportionen, Pixar- oder Memoji-Stil
|
||||
|
||||
**Beispiel-Prompt:**
|
||||
|
||||
> Close-up portrait of a friendly young tech professional, smiling, Memoji 3D style, clay render, bright colors, soft lighting, solid plain background, Pixar character design.
|
||||
|
||||
|
||||
|
||||
4. ##### Artikelillustrationen generieren
|
||||
|
||||
* Aktueller Trend: Abstrakte flache Illustrationen, haeufig in Technologie-Unternehmensblogs
|
||||
* Haeufige Darstellung: Lila-Blaue Farbgebung, uebertriebene Koerperproportionen, schwebende UI-Elemente
|
||||
|
||||
**Beispiel-Prompt:**
|
||||
|
||||
> Editorial flat illustration representing remote work, a person sitting on a giant globe using a laptop, corporate memphis art style, vibrant colors (purple and teal), vector texture.
|
||||
|
||||
|
||||
|
||||
#### 2. Bildreferenz-Generierung: Visuelle Konsistenz wahren
|
||||
|
||||
Diese Art von Szenario konzentriert sich mehr auf **Skalierbarkeit**. Wenn du bereits ein zufriedenstellendes Hauptvisual hast und einen ganzen Satz stilistisch einheitlicher Assets generieren musst.
|
||||
|
||||
5. ##### Ein Satz von Buttons oder interaktiven Asset-Bildern im gleichen Stil wie das Hauptvisual
|
||||
|
||||
In der Spieleentwicklung ist die Konsistenz der UI sehr wichtig. Angenommen, du hast bereits den "PLAY"-Button des Hauptbildschirms und musst nun einen ganzen Satz stilistisch einheitlicher Funktions-Buttons erstellen (wie Pause, Einstellungen, Startseite). Nur durch manuelles Zeichnen ist es schwierig, die vollstaendige Konsistenz von Glanz, Perspektive und Farbwert jedes Buttons zu gewaehrleisten.
|
||||
|
||||
**Grundlegender Arbeitsablauf:**
|
||||
|
||||
1. Das vorhandene blaue "PLAY"-Button-Bild speichern
|
||||
|
||||
|
||||
|
||||
2. In den **Input Image**-Bereich der Oberflaeche ziehen, als Referenzvorlage fuer nachfolgende Generierungen
|
||||
3. Die Stilbeschreibung im Prompt beibehalten, nur den Hauptinhalt aendern
|
||||
|
||||
In diesem Arbeitsablauf kannst du durch einfaches Ersetzen der Hauptbeschreibung verschiedene, aber stilistisch konsistente Buttons erhalten.
|
||||
|
||||
**Beispiel-Prompt:**
|
||||
|
||||
**Variante A: Pause-Button (Symboltyp)**
|
||||
|
||||
> A capsule-shaped game UI button with a white pause icon (two vertical bars) inside. Same glossy blue jelly style, shiny plastic texture, white thick outline, vector illustration, high quality.
|
||||
|
||||
|
||||
|
||||
**Variante B: Einstellungs-Button (komplexes Symbol)**
|
||||
|
||||
> A capsule-shaped game UI button with a white gear icon (settings symbol) inside. Same glossy blue jelly style, shiny plastic texture, white thick outline, vector illustration, high quality.
|
||||
|
||||
|
||||
|
||||
**Variante C: Replay-Button (Formaenderung)**
|
||||
|
||||
Wenn du die Button-Form anpassen moechtest, kannst du die Form direkt im Prompt beschreiben, und das Modell wird versuchen, die Struktur zu aendern, während die Materialeigenschaften beibehalten werden.
|
||||
|
||||
> A round game UI button with a white circular arrow icon (replay symbol) inside. Same glossy blue jelly style, shiny plastic texture, white thick outline, vector illustration, high quality.
|
||||
|
||||
|
||||
|
||||
Durch diese Reihe von Operationen koennen nicht nur Button-Funktion und Symbol ersetzt, sondern sogar die Button-Form geaendert werden, wobei alle generierten Ergebnisse in Material, Farbgebung und Licht/Schatten hochgradig konsistent bleiben. Dies ist der Kernwert von Grossmodellen in Szenarien der Design-Asset-Vervielfaeltigung.
|
||||
|
||||
## Kapitel 2: Ein gehorsameres Bildgenerierungs-Assistent -- Am Beispiel von Lovart
|
||||
|
||||
Im ersten Teil haben wir NanoBanana direkt ueber Code aufgerufen und den grundlegenden Prozess "Eingabe gleich Generierung" erlebt. Diese Methode funktioniert gut bei einfachen Anforderungen. Wenn die Generierungsaufgabe jedoch mehr Einschraenkungen enthaelt, wie zum Beispiel:
|
||||
|
||||
* Mehrere stilistisch konsistente Bilder erforderlich
|
||||
* Mehrfache Anpassungen an vorhandenen Ergebnissen noetig
|
||||
* Dynamische Aenderung der Generierungsrichtung basierend auf Benutzereingabe
|
||||
|
||||
wird die Einzelaufruf-Methode allmaehlich unzureichend.
|
||||
|
||||
Hier muss ein **AI Agent (intelligenter Agent)** eingefuehrt werden. Dieser Abschnitt zeigt am Beispiel von **Lovart**, wie sich der gesamte Workflow veraendert, wenn dem Bildgenerierungsmodell eine "Denkschicht" hinzugefuegt wird. Hinweis! Hier geht es nicht um Werbung, sondern nur darum, die Bequemlichkeit von AI-Agenten schnell zu vermitteln~
|
||||
|
||||
### 2.0 Lovart kennenlernen: Dein KI-Design-Agent
|
||||
|
||||
Lovart ist ein agentenbasiertes Design-Tool im Web. Im Vergleich zu normalen Bildgenerierungstools hat es vor der Generierung eine zusaetzliche "Denk- und Planungsschicht".
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Nach dem Einloggen bei Lovart musst du hauptsaechlich die folgenden Steuerungselemente kennenlernen:
|
||||
|
||||
#### Modellauswahl
|
||||
|
||||
Klicke auf das Wuerfel-Symbol unterhalb des Eingabefelds, um die aktuell verfuegbaren Generierungsmodelle (wie GPT Image, Flux etc.) anzuzeigen.
|
||||
|
||||
Um mit dem vorherigen Beispiel konsistent zu bleiben, verwendet dieser Abschnitt weiterhin NanoBanana als zugrundeliegendes Generierungsmodell.
|
||||
|
||||
|
||||
|
||||
#### Denkmodus
|
||||
|
||||
Dies ist der Kern-Schalter von Lovart:
|
||||
|
||||
* **Fast Mode**: Nahe an nativer API, schnelle Antwort, geeignet fuer Einzel-, klar formulierte Generierungen
|
||||
* **Thinking Mode**: Agent-Modus, die KI analysiert zuerst die Anforderungen, schreibt den Prompt um und fuehrt dann die Generierung aus
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### Internet-Faehigkeit
|
||||
|
||||
Nach Aktivierung des Globus-Symbols kann der Agent waehrend der Generierung Web-Informationen abrufen (z.B. Designtrends, Farbschemata) als zusatzliche Eingabe.
|
||||
|
||||
### 2.1 Warum die native API nicht ausreicht?
|
||||
|
||||
Auch wenn du bereits ueber Python qualitativ hochwertige Bilder generieren kannst, gibt es weiterhin Einschraenkungen der nativen API bei komplexen Aufgaben. Der Hauptgrund dafuer ist: Die native API ist im Wesentlichen imperativ. Wenn du sie aufforderst, ein bestimmtes Objekt zu generieren, kann sie es direkt ausfuehren; aber wenn die Eingabe zu "einem vollstaendigen Satz von Spiel-Assets planen" wird, wird sie das Ziel nicht aktiv in mehrere ausfuehrbare Schritte aufteilen.
|
||||
|
||||
Der Kernunterschied von Lovart liegt im Agent-Mechanismus. Zwischen der Benutzereingabe und dem Bildgenerierungsmodell fuegt es eine Logik-Schicht zum Verstehen und Planen hinzu: Zunaechst die Benutzerabsicht erkennen, dann die Aufgabe aufteilen, den Prompt umschreiben und schliesslich die Generierung ausfuehren.
|
||||
|
||||
### 2.2 Praxisdemonstration: In 5 Minuten einen IP-Sticker-Satz erstellen
|
||||
|
||||
Am Beispiel von **"Einen IP-Sticker-Satz fuer Programmierer-Enten erstellen"** sehen wir, wie der Agent am gesamten Prozess teilnimmt.
|
||||
|
||||
#### Phase 1: Planung (Die Denkfaehigkeit des Agenten)
|
||||
|
||||
**Problem der nativen API:**
|
||||
Du musst selbst das Charakterdesign, emotionale Zustaende denken und fuer jedes Bild einen separaten Prompt schreiben.
|
||||
|
||||
**Lovarts Vorgehen:**
|
||||
|
||||
1. Den Thinking Mode aktivieren
|
||||
2. Eine Anweisung eingeben:
|
||||
|
||||
> Entwirf einen IP-Sticker-Satz fuer Programmierer-Enten im flachen, niedlichen Stil
|
||||
|
||||
Die KI wird nicht sofort zeichnen, sondern zuerst im Internet nach aehnlichen Programmierer-Enten-Designs suchen. Sie gibt eine analysierte Loesung aus, generiert automatisch Szenarien wie Debug, Coffee Break, Panic und erstellt entsprechende visuelle Beschreibungen.
|
||||
|
||||
|
||||
|
||||
In diesem Schritt wechselt die KI von der "Ausfuehrerin" zur "Planerin". Nachdem die KI deine Anforderungen analysiert hat, kannst du im Lovart-Canvas-Bereich verschiedene Stile und Inhalte von Programmierer-Enten-Bildern sehen. Du kannst beginnen, deinen bevorzugten Stil auszuwaehlen.
|
||||
|
||||
|
||||
|
||||
#### Phase 2: Konsistenz (Referenzbasierte visuelle Verankerung)
|
||||
|
||||
Bilder in Lovart sind nicht nur Ergebnisse, sondern nehmen auch an nachfolgenden Generierungen teil.
|
||||
|
||||
##### Vollstaendiges Referenzbild
|
||||
|
||||
* Waehle aus den Skizzen die zufriedenstellendste "Standard-Ente" und klicke auf das entsprechende Bild im Canvas-Bereich
|
||||
* Das Bild wird automatisch im Chat-Bereich als Referenz angezeigt
|
||||
|
||||
|
||||
|
||||
* Neue Aktion eingeben (z.B. gluecklich) und generieren
|
||||
|
||||
Das generierte Ergebnis erbt Farbgebung, Proportionen und Details der Vorlage.
|
||||
|
||||
|
||||
|
||||
##### Teilreferenz / Multi-Bild-Integration
|
||||
|
||||
Zusaetzlich zur Verwendung eines ganzen Bildes als Referenz unterstuetzt Lovart auch:
|
||||
|
||||
* **Nur einen Teilbereich des Bildes auswaehlen** (z.B. nur den Hut oder Ausdruck referenzieren)
|
||||
|
||||
Klicke auf den linken Tab im Canvas-Bereich, waehle "Mark" und markiere den Teilbereich des Zielbildes. Dieser Inhalt wird automatisch in das Chat-Feld synchronisiert. Hier koennen wir z.B. die Hintergrundfarbe aendern.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Man sieht, dass das neu generierte Bild nur die Hintergrundfarbe geaendert hat, was unserer Eingabe entspricht.
|
||||
|
||||
* **Unterschiedliche Unterelemente aus mehreren Bildern referenzieren** und zu einem neuen Ergebnis kombinieren
|
||||
|
||||
Zum Beispiel: Du kannst den Charakterkoerper aus Bild A beibehalten und gleichzeitig den Hut durch den Stil aus Bild B ersetzen. Der Agent wird diese visuellen Einschraenkungen im Hintergrund automatisch integrieren.
|
||||
|
||||
Am Beispiel der Programmierer-Ente koennen wir waehlen, das Enten-Design aus dem ersten Bild beizubehalten und es als Hauptelement im zweiten Bild zu ersetzen.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Der finale Effekt ist sehr deutlich. Du kannst auch andere Kombinationen ausprobieren!
|
||||
|
||||
#### Phase 3: Umsetzung (Werkzeugaufruf des Agenten)
|
||||
|
||||
Nach Abschluss der Generierung koennen direkt folgende Operationen ausgefuehrt werden: Vergroessern, Hintergrund entfernen, Radieren etc.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Diese sind keine einfachen Filter, sondern Ergebnisse, die der Agent automatisch durch den Einsatz verschiedener Werkzeuge erzielt.
|
||||
|
||||
Nachdem der Grundstil festgelegt wurde, koennen sehr schnell eine Reihe von Sticker-Bildern generiert werden.
|
||||
|
||||
|
||||
|
||||
Am Ende erhalten wir produktionsfaehige Assets, die direkt geliefert werden koennen, und nicht nur ein Präsentationsbild.
|
||||
|
||||
### 2.3 Hinweise zur Nutzung und Preisgestaltung
|
||||
|
||||
Lovart verwendet ein Abonnement-Preismodell mit unterschiedlichen Kontingenten und Funktionsberechtigungen fuer verschiedene Pakete. Massgeblich sind die auf der offiziellen Website angezeigten Informationen.
|
||||
|
||||
Dieses Tutorial empfiehlt oder vergleicht keine Pakete; bei tatsaechlichem Bedarf kannst du je nach persoenlicher Situation ein kostenpflichtiges Upgrade waehlen.
|
||||
Aktuell wird die Bezahlung ueber **Alipay** und andere Methoden unterstuetzt.
|
||||
|
||||
|
||||
|
||||
#### Zusammenfassung
|
||||
|
||||
Lovart ersetzt nicht das zugrundeliegende Modell, sondern aktualisiert die Bildgenerierung durch den Agent-Mechanismus von "einmaliger Ausfuehrung" zu "kontinuierlichem Workflow".
|
||||
|
||||
Wenn die Aufgabe Planung, Konsistenz und Lieferung umfasst, werden die Vorteile dieser Art von Werkzeug sehr deutlich.
|
||||
|
||||
## Kapitel 3: Selbst einen intelligenten Zeichenassistenten bauen
|
||||
|
||||
Anstatt Lovart direkt zu verwenden, koennen wir auch eine vereinfachte Version eines Zeichenassistenten selbst implementieren.
|
||||
|
||||
Dieses Kapitel verwendet "automatische Artikelillustration" als Beispiel, um schrittweise einen Agenten mit Denkfaehigkeit aus einem praktischen Problem heraus aufzubauen.
|
||||
|
||||
### 3.1 Problemstellung: Warum es nicht funktioniert, Artikel direkt an ein Bildgenerierungsmodell zu senden
|
||||
|
||||
Wenn du einen laengeren Artikel an NanoBanana sendest und um eine Illustration bittest, erhaeltst du normalerweise keine zufriedenstellenden Ergebnisse. Der Grund liegt nicht darin, dass das Modell "nicht gut zeichnen kann", sondern daran, dass **es nicht gut darin ist, lange Texte zu verstehen**.
|
||||
|
||||
Bildgenerierungsmodelle sind besser geeignet fuer kurze, eindeutige visuelle Beschreibungen. Wenn die Eingabe zu einem Artikel mit Struktur, Schwerpunkten und Kontextbeziehungen wird, kann das Modell nicht beurteilen, welche Inhalte im Bild wirklich dargestellt werden muessen. Dies fuehrt oft dazu, dass die generierten Ergebnisse vom Thema abweichen oder nur vereinzelte Details erfassen, ohne eine gesamthafte Zusammenfassung zu liefern.
|
||||
|
||||
Im Wesentlichen haben Bildmodelle nur die Faehigkeit zur "Ausfuehrung", aber keinen Prozess zur Analyse und Auswahl von Text.
|
||||
|
||||
|
||||
|
||||
### 3.2 Loesungsansatz: "Verstehen" und "Ausfuehren" mit einem Agenten aufteilen
|
||||
|
||||
Um dieses Problem zu loesen, ist der Schluessel nicht komplexere Prompts, sondern **vor dem Zeichnen zuerst klar zu denken**. Daher fuehren wir eine unabhaengige "Denkschicht" in den Generierungsprozess ein und bauen damit einen einfach verwendbaren Agenten.
|
||||
|
||||
Das einzige Kernziel dieses Agenten: **Das endgueltig generierte Bild so nahe wie moeglich an der tatsaechlichen Ausdrucksabsicht des Benutzers ausrichten.**
|
||||
|
||||
Der Gesamtprozess kann wie folgt zusammengefasst werden: **Lange Texteingabe -> Sprachmodell-Verstehen und Beurteilung -> Geeignete visuelle Prompts generieren -> Bildmodell fuehrt die Generierung aus -> Bild ausgeben**
|
||||
|
||||
|
||||
|
||||
Wie kann unser Agent die Absicht des Benutzers verstehen?
|
||||
|
||||
Hier waehlen wir eine vereinfachte "Denkschicht" mit drei verschiedenen Intentionen: ungueltige Eingabe, direkte Bildgenerierung und lange Texte, die Verstaendnis erfordern.
|
||||
|
||||
In diesem Agenten kann die Arbeitsteilung der einzelnen Rollen in vier Punkte zusammengefasst werden:
|
||||
|
||||
1. **Sprachmodell als Entscheidungszentrum**
|
||||
Es ist verantwortlich fuer das Verstehen von Artikelinhalten, die Beurteilung der Benutzerabsicht und die Weiterleitung der Aufgabe an den entsprechenden Generierungspfad, um zu entscheiden, "wie als naechstes vorzugehen ist" und wie der Prompt zur Bildgenerierung erstellt wird.
|
||||
2. **Bildmodell als Ausfuehrer**
|
||||
Das Bildmodell nimmt nicht am Verstehen und Beurteilen teil, sondern erhaelt nur bereits aufbereitete visuelle Anweisungen und konzentriert sich auf die Bilddarstellung.
|
||||
3. **Benutzer als intervenierender Leiter**
|
||||
Neben der direkten Texteingabe koennen Benutzer waehrend des Prozesses manuell generierte Prompts anpassen oder Referenzbilder hinzufuegen, um das Endergebnis zu leiten und feinzuaeinen.
|
||||
4. **Gradio und Backend-API als Gesamttraegerschicht**
|
||||
Sie sind verantwortlich fuer die Verkettung von Oberflaeche, Modellaufrufen und Ergebnisanzeige, um sicherzustellen, dass der gesamte Agent als stabile Web-Anwendung laeuft.
|
||||
|
||||
|
||||
|
||||
### 3.3 Praktische Vorbereitung: API abrufen
|
||||
|
||||
Das sieht doch interessant aus! Um den obigen Prozess zum Laufen zu bringen, muessen wir nur zwei Arten von APIs vorbereiten.
|
||||
|
||||
#### Hand: NanoBanana API (Bildgenerierung)
|
||||
|
||||
Direkte Wiederverwendung der in Kapitel 1 bereits konfigurierten API-Key und API-URL, keine zusaetzliche Einrichtung noetig.
|
||||
|
||||
#### Gehirn: SiliconFlow API (Textdenken)
|
||||
|
||||
Wir benoetigen ein Grosssprachenmodell fuer die "Denkschicht". Dieses Tutorial verwendet den von SiliconFlow bereitgestellten Modelldienst: [https://cloud.siliconflow.cn](https://cloud.siliconflow.cn/)
|
||||
|
||||
|
||||
|
||||
SiliconFlow bietet eine mit der OpenAI-API-Spezifikation kompatible Schnittstelle, die sehr einfach ueber Standard-Netzwerkanfragen in Projekten aufgerufen werden kann. Hier waehlen wir das kostenlose Qwen2.5-7B-Instruct-Modell. Alle fuer den Aufruf erforderlichen Inhalte sind bereits in den folgenden Prompt integriert. Vor dem Start musst du nur ein Konto auf der offiziellen Website registrieren und einen API-Key erstellen.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Dieser Key wird fuer nachfolgende Modellaufrufe verwendet.
|
||||
|
||||
### 3.4 Den Agenten aufbauen:
|
||||
|
||||
Dieses Experiment verwendet hauptsaechlich Trae beim Schreiben von Code. Dieses Tutorial waehlt das Gemini-3-Pro-Preview-Modell. Der Gesamtansatz ist: Nach dem Erstellen eines neuen Projekts den folgenden vollstaendigen Prompt in das Chat-Feld kopieren und eingeben, schrittweise die API-Key ersetzen, den Code ausfuehren und den Test abschliessen.
|
||||
|
||||
|
||||
|
||||
#### Phase 1: Gradio Blocks Grundgeruest und Oberflaechenlayout
|
||||
|
||||
In dieser Phase ist unser Hauptziel, zunaechst ein "Aeusseres" fuer den gesamten Agenten zu erstellen und das Frontend-Seiten-Design zu implementieren. Nach dem Kopieren des folgenden Prompts in das Trae-Chat-Feld wirst du eine lokale URL (normalerweise http://127.0.0.1:7860) erhalten, um die Oberflaeche zu sehen und die Implementierung zu pruefen.
|
||||
|
||||
```Plain
|
||||
Block 1: Gradio Blocks Grundgeruest und Oberflaechenlayout
|
||||
1. Aufgabenziel
|
||||
Basierend auf dem Gradio 4.0.0+ Blocks-Layout, die Basisoberflaeche fuer das "LLM+Nanobanana Text-zu-Bild"-Projekt implementieren, streng dem festen Links-Rechts-Spalten-Layout folgen, alle UI-Komponenten initialisieren und den korrekten Anfangszustand setzen.
|
||||
|
||||
2. Technologie-Stack-Anforderungen
|
||||
Muss den Gradio 4.0.0+ Blocks-Modus verwenden, Interface-Modus ist verboten;
|
||||
Abhaengigkeiten: gradio>=4.0.0, pillow>=10.0.0 (nur importieren, Bildverarbeitungslogik noch nicht implementieren);
|
||||
Der Code muss eine vollstaendig ausfuehrbare Python-Datei mit allen erforderlichen Import-Anweisungen sein.
|
||||
|
||||
3. Oberflaechenlayout-Regeln (Kernbeschraenkung)
|
||||
Gesamtlayout:
|
||||
Seitentitel: LLM-gesteuertes Text-zu-Bild-Vollprozess-Tool;
|
||||
Festes Links-Rechts-Spalten-Layout: Links 60% Breite, Rechts 40% Breite, mit gr.Row und gr.Column die Proportionen steuern.
|
||||
Links 60% (Prompt-Generierungsprozess-Bereich) Komponentenliste:
|
||||
input_text: gr.Textbox, Label "Text eingeben (Tutorial-Abschnitt / Zeichenanweisung)", lines=6, Platzhalter "Bitte gib den Tutorial-Text oder direkte Zeichenanweisung ein...";
|
||||
identify_intent_btn: gr.Button, value="Intent erkennen", Anfangszustand normal klickbar;
|
||||
intent_status: gr.Textbox, Label "Intent-Typ / Verarbeitungsstatus", lines=2, interactive=False, Anfangswert "Intent nicht erkannt";
|
||||
system_prompt: gr.Textbox, Label "System Prompt (nur fuer Artikel-Illustrations-Intent bearbeitbar)", lines=4, interactive=False, Platzhalter "LLM-Generierungs-Prompt-Regeln...";
|
||||
confirm_prompt_btn: gr.Button, value="Bildgenerierungs-Prompt bestaetigen", interactive=False (anfaenglich deaktiviert);
|
||||
generation_prompt: gr.Textbox, Label="Generierungs-Prompt (bearbeitbar)", lines=3, interactive=True, Anfangswert leer, Platzhalter "Der generierte englische Prompt wird hier angezeigt, manuelle Bearbeitung moeglich...".
|
||||
Rechts 40% (Nanobanana Bildgenerierungsfunktion-Bereich) Komponentenliste:
|
||||
ref_image: gr.Image, Label="Referenzbild (optional, Bild-zu-Bild)", type=filepath, height=300, Upload erlauben;
|
||||
generate_btn: gr.Button, value="Bild generieren", interactive=False (anfaenglich deaktiviert);
|
||||
result_image: gr.Image, Label="Generierungsergebnis", type=pil, height=300, Anfangswert leer, interactive=False.
|
||||
|
||||
4. Interaktionslogik-Anforderungen
|
||||
Alle interactive-Anfangszustaende strikt nach obiger Konfiguration, spaeter dynamisch durch Funktionen aktualisieren;
|
||||
Deaktivierter Button-Zustand muss sichtbar sein (ausgegraut), um Fehlbedienungen zu vermeiden.
|
||||
|
||||
5. Ausgabeanforderungen
|
||||
Vollstaendigen Python-Code generieren, nur Oberflaechenlayout und Komponenteninitialisierung implementieren, keine Geschaeftslogik;
|
||||
Klare Code-Kommentare, Komponentenbenennung konsistent mit der praktischen Version;
|
||||
Code direkt ausfuehrbar, Oberflaechenstruktur vollstaendig wie beschrieben.
|
||||
```
|
||||
|
||||
Nach dem Oeffnen von http://127.0.0.1:7860 im Browser kannst du sehen, dass Trae bereits die folgende Webseite nach unseren Anforderungen generiert hat, die unseren Anforderungen weitgehend entspricht, und du kannst mit der naechsten Generierung fortfahren.
|
||||
|
||||
|
||||
|
||||
#### Phase 2: LLM Intent-Erkennungsmodul (Siliconflow API)
|
||||
|
||||
Bei der taeglichen Verwendung von VLM zum Zeichnen koennen drei haeufige Eingabesituationen auftreten:
|
||||
|
||||
1. Bedeutungsloser Inhalt wie "Hallo", "Hast du heute schon gegessen?" etc., fuer den keine entsprechenden Bilder gezeichnet werden koennen.
|
||||
2. Artikel/lange Texte mit mehr Woertern, z.B. ein strukturierter Artikel von ca. 200 Woertern, bei dem zunaechst die Struktur und der Inhalt des Artikels verstanden werden muessen, bevor entschieden werden kann, wie ein Bild generiert werden soll, das den gesamten Text zusammenfasst.
|
||||
3. Direkte Zeichenanweisungen wie "Zeichne mir eine badende Katze", bei denen die Anforderungen bereits sehr konkret formuliert sind und direkt ein Bild generiert werden kann.
|
||||
|
||||
Wie zuvor den folgenden Prompt in das Trae-Chat-Feld kopieren und implementieren, und die in den vorherigen Schritten erhaltene API ergaenzen.
|
||||
|
||||
```Plain
|
||||
Block 2: LLM Intent-Erkennungsmodul (Siliconflow API)
|
||||
1. Aufgabenziel
|
||||
Auf Basis der bereits implementierten Gradio-Oberflaeche die Klick-Logik fuer den "Intent erkennen"-Button hinzufuegen, Siliconflow-API fuer Intent-Erkennung aufrufen und Komponentenzustaende verknuepfen.
|
||||
|
||||
2. Technologie-Stack-Anforderungen
|
||||
Basierend auf Gradio 4.0.0+ Blocks;
|
||||
Abhaengigkeiten: requests>=2.31.0, openai;
|
||||
Vollstaendig ausfuehrbare Python-Datei ausgeben, einschliesslich Block 1 Oberflaeche + dieses Moduls Logik.
|
||||
|
||||
3. Kern-Geschaeftsregeln
|
||||
Intent-Klassifizierungsregeln (nur 3 Kategorien, strikt Zahl + Beschreibung zurueckgeben)
|
||||
1 = Bedeutungsloser Inhalt: Nur Plauderei, Begruessung, irrelevante Konversation ohne Zeichen- oder Illustrationsbedarf;
|
||||
2 = Artikel/langer Text Illustrationsbedarf: Benutzer gibt einen vollstaendigen Artikel, Tutorial, Absatz, erklaerenden Text ein, der eher narrativ/erklaerend/instruktiv ist, mit der impliziten Absicht, eine Illustration fuer diesen Inhalt zu erstellen;
|
||||
3 = Direkte Zeichenanweisung: Benutzer gibt eine kurze, eindeutige Zeichenanweisung ohne langen Text-Hintergrund ein (z.B. "Zeichne eine Apple-Stil Katze").
|
||||
LLM-Aufrufbeschraenkungen
|
||||
Schnittstellenadresse: https://api.siliconflow.cn/v1/chat/completions;
|
||||
Modell: Qwen/Qwen2.5-7B-Instruct;
|
||||
temperature=0.1;
|
||||
|
||||
4. Komponentenverknuepfungsregeln
|
||||
Ergebnis 1: intent_status zeigt "1 = Bedeutungsloser Inhalt: Kein Zeichenbedarf", system_prompt bleibt deaktiviert, confirm_prompt_btn deaktiviert;
|
||||
Ergebnis 2: intent_status zeigt "2 = Artikel/langer Text Illustrationsbedarf: Illustration fuer Eingabe generieren", system_prompt aktivieren und Standardregeln ausfuellen, confirm_prompt_btn aktivieren;
|
||||
Ergebnis 3: intent_status zeigt "3 = Direkte Zeichenanweisung: Bild gemaess Anweisung generieren", system_prompt deaktiviert und Standardregeln ausfuellen, confirm_prompt_btn aktivieren.
|
||||
|
||||
5. Fehlerbehandlung
|
||||
API-Fehler, Parsing-Fehler alle freundliche Hinweise geben, kein Absturz, Komponenten in Anfangszustand zuruecksetzen.
|
||||
|
||||
6. Ausgabeanforderungen
|
||||
Vollstaendig ausfuehrbaren Code generieren, LLM_API_KEY ersetzen und verwenden, klare Kommentare, Intent-Erkennungs-Template strikt verwenden.
|
||||
```
|
||||
|
||||
Die vorherige URL http://127.0.0.1:7860 aktualisieren und testen, ob die drei Situationen korrekt erkannt werden.
|
||||
|
||||
1. Bedeutungsloser Inhalt: Versuche "Hallo", "Danke" einzugeben und stelle fest, dass es korrekt erkannt wird.
|
||||
|
||||
|
||||
|
||||
2. Artikel/langer Text: Hier wurde ein von Doubao generierter Text ueber kuenstliche Intelligenz verwendet. Du kannst auch eigene Aufsatzabschnitte zum Testen verwenden.
|
||||
|
||||
Ebenfalls erfolgreich erkannt~
|
||||
|
||||
|
||||
|
||||
3. Direkte Zeichenanweisung: Hier wurde "Ich moechte eine Katze zeichnen" eingegeben, ebenfalls korrekt erkannt.
|
||||
|
||||
|
||||
|
||||
Damit haben wir erfolgreich die zweite Phase implementiert -- Intent-Erkennung.
|
||||
|
||||
#### Phase 3: Bildgenerierungs-Prompt-Generierungsmodul (LLM-Zweitaufruf)
|
||||
|
||||
Nach der Intent-Erkennung gibt es fuer Artikel oder lange Texte einen sehr wichtigen weiteren Schritt: die Generierung des Zeichen-Prompts, und genau das ist der Schwerpunkt dieses Agenten.
|
||||
|
||||
```SQL
|
||||
Block 3: Bildgenerierungs-Prompt-Generierungsmodul (LLM-Zweitaufruf)
|
||||
1. Aufgabenziel
|
||||
Auf Basis der Intent-Erkennung die Logik fuer den "Bildgenerierungs-Prompt bestaetigen"-Button implementieren, LLM aufrufen, um Text in einen fuer die Bildgenerierung geeigneten englischen visuellen Prompt umzuwandeln, das Bearbeitungsfeld ausfuellen und den "Bild generieren"-Button verknuepfen.
|
||||
|
||||
2. Technologie-Stack-Anforderungen
|
||||
Wie Block 2, vollstaendigen Code ausgeben = Block 1 + Block 2 + dieses Modul;
|
||||
Gemeinsame Nutzung der in Block 2 definierten LLM_BASE_URL, LLM_API_KEY, LLM_MODEL, kein neuer Schluessel.
|
||||
|
||||
3. Kern-Geschaeftsregeln
|
||||
Prompt-Generierungs-Eingaberegeln
|
||||
Die Prompt-Generierung ist keine einfache String-Verkettung, sondern erstellt eine Standard-Chat-Nachrichtenliste.
|
||||
|
||||
4. Komponentenverknuepfungsregeln
|
||||
Erfolgreiche Generierung: Prompt in das generation_prompt-Feld eintragen, generate_btn aktivieren, intent_status "Prompt erfolgreich generiert, kann nach Bearbeitung Bild generieren" anhaengen;
|
||||
Fehlgeschlagene Generierung: Spezifischen Grund anzeigen, generate_btn deaktiviert lassen, generation_prompt-Feld leer;
|
||||
Benutzer manuelle Bearbeitung/Leerung des generation_prompt-Felds:
|
||||
Leerung deaktiviert automatisch generate_btn;
|
||||
Nicht-leer haelt generate_btn aktiv.
|
||||
|
||||
5. Fehlerbehandlung
|
||||
API-Aufruf fehlgeschlagen: Freundlicher Hinweis "Prompt-Generierung fehlgeschlagen: {spezifische Fehlermeldung}", kein Absturz;
|
||||
Prompt-Ueberpruefung fehlgeschlagen: Grund klar angeben, erneuten Versuch erlauben;
|
||||
Antwort-Parsing fehlgeschlagen: Hinweis "LLM-Antwort kann nicht geparst werden, bitte erneut versuchen".
|
||||
|
||||
6. Ausgabeanforderungen
|
||||
Vollstaendig ausfuehrbaren Code, LLM_API_KEY ersetzen und verwenden;
|
||||
Klare Code-Struktur, vollstaendige Kommentare, schoene und einfache Oberflaeche;
|
||||
Strikt die Standard-Chat-Nachrichtenlisten-Struktur implementieren, Parameter und Beispielelogik konsistent;
|
||||
Prompt-Laenge und Inhaltsueberpruefungslogik enthalten, freundliche Fehlermeldungen.
|
||||
```
|
||||
|
||||
Ebenso den Text aus der zweiten Phase kopieren und testen.
|
||||
|
||||
Es ist erwähnenswert, dass der hier voreingestellte System-Prompt fuer die Bildgenerierung lautet:
|
||||
|
||||
> Du bist jetzt ein Assistent zum Erstellen von NanoBanana-Zeichen-Prompts.
|
||||
> Du musst basierend auf meinem Inhalt verarbeiten. Der Zweck dieses Bildes ist zu veranschaulichen, was dieser Abschnitt sagt, und den Leuten zu zeigen, was die Kontextstruktur des gesamten Textes bedeutet.
|
||||
> Es koennte aehnlich wie in einer Praesentation einige Erklaerungen enthalten (z.B. oben links die Kernansicht, unten rechts die Daten).
|
||||
> Designstilanforderung: Minimalistisch, Apple Design Philosophy.
|
||||
> Einschraenkung: Bitte gib nur den fuer NanoBanana verwendbaren englischen Prompt zurueck, ohne Erklaerungen, Praefixe oder ueberfluessigen Text.
|
||||
|
||||
Wenn du ein anderes voreingestelltes Template verwenden moechtest, kannst du es im vorherigen Prompt aendern oder direkt in Trae durch Konversation anpassen.
|
||||
|
||||
|
||||
|
||||
Zusaetzlich zur Aenderung des unterliegenden Codes koennen wir auch auf der Webseite schnell bearbeiten. Zum Beispiel habe ich hier den Satz "Pic Prompt am Anfang hinzufuegen" ergaenzt, und man sieht, dass der neu generierte Prompt ebenfalls diesen enthaelt. Dieses Design ist gedacht, um das schnelle Aendern des System-Prompts fuer die Prompt-Generierung zu ermoeglichen und uns beim schnellen Wechsel von Stilen zu helfen.
|
||||
|
||||
|
||||
|
||||
#### Phase 4: Nanobanana Text-zu-Bild / Bild-zu-Bild-Modul
|
||||
|
||||
Endlich der letzte Schritt -- ohne Anschluss an ein Bildgenerierungsmodell ist es kein vollstaendiger Agent!
|
||||
|
||||
```Bash
|
||||
Block 4: Nanobanana Text-zu-Bild / Bild-zu-Bild-Modul (Finalversion)
|
||||
1. Aufgabenziel
|
||||
Die Logik fuer den "Bild generieren"-Button implementieren, die echte Nanobanana-API aufrufen, Text-zu-Bild/Bild-zu-Bild unterstuetzen, Base64 parsen und Bild anzeigen.
|
||||
|
||||
2. Technologie-Stack-Anforderungen
|
||||
Basierend auf Gradio 4.0.0+ Blocks;
|
||||
Abhaengigkeiten: requests, pillow, base64, io, re;
|
||||
Vollstaendiger Code = Block 1+2+3 + dieses Modul.
|
||||
|
||||
3. Kern-API-Konfiguration
|
||||
Code-Konfiguration fixieren:
|
||||
NANOBANANA_API_URL = "https://api.zyai.online/v1/chat/completions"
|
||||
NANOBANANA_MODEL = "gemini-2.5-flash-image"
|
||||
NANOBANANA_API_KEY = "" # Benutzer ersetzt selbst
|
||||
|
||||
4. Bildvorverarbeitung
|
||||
Funktion image_to_base64_data_uri(ref_image_path) implementieren: PIL-Bild nach PNG konvertieren, automatisch auf 1024x1024 skalieren, transparenten Kanal zu weissem Hintergrund, als Base64 kodieren.
|
||||
|
||||
5. Anforderungskonstruktion
|
||||
Funktion generate_image(prompt, ref_image_path) implementieren;
|
||||
Logik-Zweig 1: Reines Text-zu-Bild (ref_image_path leer);
|
||||
Logik-Zweig 2: Bild-zu-Bild (ref_image_path vorhanden).
|
||||
|
||||
6. Antwort-Parsing
|
||||
Aus choices[0].message.content Bild-Base64 extrahieren, strukturiertes JSON und Markdown-Format unterstuetzen.
|
||||
|
||||
7. Komponentenverknuepfung und Fehlerbehandlung
|
||||
Erfolgreiche Generierung: PIL-Bild in result_image anzeigen;
|
||||
Fehlgeschlagene Generierung/Parsing/Upload: Klare Textmeldung in intent_status anzeigen, kein Absturz.
|
||||
|
||||
8. Ausgabeanforderungen
|
||||
Vollstaendig ausfuehrbaren Code, LLM_API_KEY und NANOBANANA_API_KEY ersetzen und direkt ausfuehren.
|
||||
```
|
||||
|
||||
|
||||
|
||||
Wie aufregend! Wir haben endlich das erste Bild dieses Agenten erfolgreich generiert. Wenn du das generierte Bild genau betrachtest, siehst du, dass es mit unserem Text und dem Prompt uebereinstimmt. Hier hast du im Wesentlichen deinen eigenen Agenten implementiert!
|
||||
|
||||
|
||||
|
||||
Wir haben auch eine Bild-zu-Bild-Funktion hinzugefuegt. Lade dein Lieblingsbild hoch, und die KI wird automatisch den Stil uebernehmen.
|
||||
|
||||
|
||||
|
||||
Es ist erwähnenswert, dass die in den vorherigen Schritten generierten Prompts auch auf der Webseite bearbeitet werden koennen, und wir den Prompt zum Zeitpunkt des endgueltigen Klicks als Massstab nehmen. Selbst wenn du hier "a cute cat" eingibst, wird das endgueltig generierte Bild nur eine suesse kleine Katze sein.
|
||||
|
||||
## Kapitel 4: Zusammenfassung
|
||||
|
||||
|
||||
|
||||
**Hurra! Endlich fertig!**
|
||||
Um ehrlich zu sein, selbst ich habe beim Schreiben der letzten Zeile tief durchgeatmet, ganz zu schweigen von dir, der bis hierhin mitgemacht hat. Diesen gesamten Prozess komplett durchlaufen zu koennen, ist bereits sehr beeindruckend. Es zeigt, dass du wirklich die Haende auf die Tastatur gelegt und die Dinge Schritt fuer Schritt erledigt hast.
|
||||
|
||||
Waehrend ich diesen Inhalt geschrieben habe, habe ich immer wieder darueber nachgedacht, was wir eigentlich hinterlassen wollen. Die Antwort ist nicht der Modellname, die Parameter oder ein bestimmter fester Ansatz, sondern dir allmaehlich ein Gefuehl zu vermitteln: welche Dinge beruhigt der KI zum Verstehen und Planen uebergeben werden koennen und wo du nur die Richtung vorgeben musst. Sobald diese Arbeitsteilung steht, werden viele urspruenglich komplex erscheinende Generierungsprozesse fluessiger.
|
||||
|
||||
Im Rueckblick war dieser Weg gar nicht so kompliziert. Klar werden, welches Problem du loesen moechtest, den langen Text dem Sprachmodell zur Analyse uebergeben, dann die aufbereitete visuelle Absicht dem Bildgenerierungsmodell zur Darstellung uebergeben und schliesslich diesen gesamten Prozess als deinen eigenen kleinen Assistenten verpacken. Hier bist du nicht mehr nur "beim Modell-Nutzen", sondern beim Aufbau eines Systems, das dich langfristig bei der Arbeit begleiten kann. Und genau das ist es, was dieses Tutorial dir am meisten vermitteln moechte.
|
||||
|
||||
Aber du hast schon sehr Gutes geleistet! Wer bis hierhin gelernt hat, hat bereits eine grundlegende Beherrschung von Vibe Coding. Goenn dir eine kleine Pause!
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Verwandte Artikel"
|
||||
description="Wenn du 'Asset-Generierung' tatsaechlich in den Produktionsprozess integrieren moechtest, kannst du diese Kapitel weiter lernen."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,465 @@
|
||||
# Deine Oberflaeche mit einer modernen Komponentenbibliothek aktualisieren
|
||||
|
||||
In den vorherigen Lektionen hast du gelernt, wie man mit Designtools Interfaces entwirft, mit AI IDE Designentwuerfe in Code umwandelt und sogar ein vollstaendiges Frontend-Projekt abgeschlossen. Aber du hast vielleicht auch ein Problem entdeckt: Die von Grund auf selbst geschriebenen Buttons, Formulare und Dialoge funktionieren zwar, wirken aber im Vergleich zu "professionellen Produkten" immer ein wenig unbefriedigend -- die Stile sind nicht einheitlich genug, die Interaktionsdetails sind nicht geschmeidig genug, und die Anpassung an verschiedene Bildschirme ist muehsam.
|
||||
|
||||
Genau das ist das Problem, das **Komponentenbibliotheken** loesen.
|
||||
|
||||
Eine Komponentenbibliothek ist eine vorgefertigte Sammlung von UI-Bauteilen. Buttons, Eingabefelder, Dropdowns, Dialoge, Tabellen... diese Interface-Elemente, die du in jedem Produkt immer wieder brauchst, sind bereits fertig und wurden von zahllosen Nutzern validiert und optimiert. Du musst sie nur wie Bausteine zusammenfuegen, um schnell professionelle Interfaces zu erstellen.
|
||||
|
||||
## Was du lernen wirst
|
||||
|
||||
1. Verstehen, was eine Frontend-Komponentenbibliothek ist und warum moderne Entwicklung sie fast immer einsetzt
|
||||
2. Vier repraesentative Komponentenbibliotheken kennenlernen und ihre jeweiligen Staerken verstehen
|
||||
3. Durch drei praktische Szenarien (Landing-Page, Produktseite, Backend-Verwaltung) lernen, wie man mit AI IDE + Komponentenbibliothek Vibe Coding betreibt
|
||||
4. Lernen, Komponentenbibliothek-Dokumentation zu lesen, die richtigen Komponenten fuer die Anforderungen zu finden und korrekt zu verwenden
|
||||
|
||||
## 1. Warum braucht man Komponentenbibliotheken?
|
||||
|
||||
Stell dir vor, du renovierst ein Haus. Du kannst selbst aus Holz einen Stuhl bauen, aber ueblicherweise gehst du zu IKEA und kaufst einen -- gutes Design, stabile Qualitaet, klare Aufbauanleitung, nach Hause bringen und zusammensetzen.
|
||||
|
||||
Eine Komponentenbibliothek ist das "IKEA" der Frontend-Entwicklung. Sie bietet keine Moebel, sondern Interface-Bauteile:
|
||||
|
||||
| Selbst geschrieben | Komponentenbibliothek verwenden |
|
||||
| :--- | :--- |
|
||||
| Stil, Interaktion und Animation selbst behandeln | Out-of-the-box, Stil und Interaktion sind bereits optimiert |
|
||||
| Buttons auf verschiedenen Seiten koennen unterschiedlich aussehen | Global einheitlicher Stil, automatische Konsistenz |
|
||||
| Anpassung an Handy und Tablet erfordert zusaetzliche Arbeit | Die meisten Komponentenbibliotheken haben integrierte Responsive-Unterstuetzung |
|
||||
| Barrierefreiheit (Accessibility) wird leicht uebersehen | Professionelle Komponentenbibliotheken haben Tastaturnavigation und Screenreader bereits integriert |
|
||||
| Langsame Entwicklung | Schnelle Entwicklung, Fokus auf Geschaeftslogik |
|
||||
|
||||
Kurz gesagt: **Komponentenbibliotheken lassen dich die Zeit fuer das "Was" aufwenden, nicht fuer das "Wie".**
|
||||
|
||||
### Sehen ist Glauben: Dieselbe Anforderung, mit und ohne Komponentenbibliothek
|
||||
|
||||
Nur Reden reicht nicht. Wir haben in Trae mit nahezu identischen Anforderungen jeweils ohne und mit Komponentenbibliothek generiert und die Ergebnisse verglichen.
|
||||
|
||||
**Prompt 1: Ohne Komponentenbibliothek**
|
||||
|
||||
```text
|
||||
Bitte erstelle eine Daten-Dashboard-Seite fuer einen AI-Schreibassistenten mit:
|
||||
- Obere Titelzeile und Export-Button
|
||||
- Vier Statistik-Karten fuer Nutzerzahl, aktive Nutzer, Dokumentanzahl und Umsatz, mit Trendanzeige
|
||||
- Ein Liniendiagramm und ein Kreisdiagramm
|
||||
- Nutzerlisten-Tabelle mit Seitennummerierung
|
||||
- Linke Navigations-Seitenleiste
|
||||
```
|
||||
|
||||
In Trae direkt ausgefuehrt:
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot des in Trae ohne Komponentenbibliothek generierten Dashboards -->
|
||||
<!--  -->
|
||||
|
||||
**Prompt 2: Mit shadcn/ui-Komponentenbibliothek**
|
||||
|
||||
```text
|
||||
Bitte erstelle eine Daten-Dashboard-Seite fuer einen AI-Schreibassistenten mit der shadcn/ui-Komponentenbibliothek:
|
||||
- Obere Titelzeile und Export-Button
|
||||
- Vier Statistik-Karten fuer Nutzerzahl, aktive Nutzer, Dokumentanzahl und Umsatz, mit Trendanzeige
|
||||
- Ein Liniendiagramm und ein Kreisdiagramm
|
||||
- Nutzerlisten-Tabelle mit Seitennummerierung
|
||||
- Linke Navigations-Seitenleiste
|
||||
```
|
||||
|
||||
Ebenfalls in Trae direkt ausgefuehrt:
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot des in Trae mit shadcn/ui generierten Dashboards -->
|
||||
<!--  -->
|
||||
|
||||
Dieselbe Anforderung, der einzige Unterschied ist, dass im Prompt `shadcn/ui + Tailwind CSS` hinzugefuegt wurde. Das von Trae generierte Ergebnis liegt in visueller Konsistenz, Interaktionsdetails und Gesamtqualitaet auf einer voellig anderen Ebene. Das ist das "kostenlose Upgrade" durch die Komponentenbibliothek -- du musst im Prompt nur den Namen einer Bibliothek hinzufuegen.
|
||||
|
||||
## 2. Vier Kern-Komponentenbibliotheken kennenlernen
|
||||
|
||||
Es gibt zahlreiche Komponentenbibliotheken (eine vollstaendige Liste im [Anhang](#anhang-weitere-komponentenbibliotheken-im-ueberblick)), aber du musst zunaechst nur diese vier repraesentativsten kennen:
|
||||
|
||||
| Komponentenbibliothek | Framework | Kurzbeschreibung | Website |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| [Ant Design](https://ant.design) | React | Von Ant Group, de facto Standard fuer Enterprise-Backends, extrem breite Komponentenabdeckung | ant.design |
|
||||
| [shadcn/ui](https://ui.shadcn.com) | React | Kein npm-Package, Code wird direkt in dein Projekt kopiert, basiert auf Tailwind CSS, hoechste Anpassungsfreiheit | ui.shadcn.com |
|
||||
| [HeroUI](https://heroui.com) (ehemals NextUI) | React | Standardmaessig schoene Styles, fluessige Animationen, ideal fuer Landing-Pages und Produktpraesentationen mit hohen visuellen Anforderungen | heroui.com |
|
||||
| [Material UI](https://mui.com) | React | Die aelteste React-Komponentenbibliothek, implementiert die Google Material Design-Richtlinien, reifstes Oekosystem | mui.com |
|
||||
|
||||
> Vue-Nutzer haben ebenfalls eine reiche Auswahl: [Element Plus](https://element-plus.org) (am populaersten in China), [Ant Design Vue](https://antdv.com), [Naive UI](https://www.naiveui.com) etc., siehe [Anhang](#anhang-weitere-komponentenbibliotheken-im-ueberblick).
|
||||
|
||||
Verschiedene Komponentenbibliotheken haben ihre Staerken in verschiedenen Szenarien. Wir fuehren dich als Naechstes durch drei reale Entwicklungsszenarien, um zu zeigen, wie man mit AI IDE + Komponentenbibliothek Vibe Coding betreibt.
|
||||
|
||||
Um verschiedene Bibliotheken und ihre Besonderheiten zu demonstrieren, haben wir in jedem Szenario bewusst eine andere Bibliothek gewaehlt. Bitte beachte: **Das dient nur dazu, dir mehrere Loesungen zu zeigen**. In der tatsaechlichen Entwicklung kannst du problemlos nur die Bibliothek verwenden, die dir am besten liegt. Wenn dir beispielsweise der Stil von shadcn/ui gefaellt, kannst du damit Landing-Pages, Produktseiten und Backend-Verwaltung erstellen. Waehle die, die dir schoen erscheint und mit der du dich wohlfuehlst -- das ist das Wichtigste.
|
||||
|
||||
## 3. Praktische Uebung 1: Produkt-Landing-Page mit HeroUI erstellen
|
||||
|
||||
**Szenario**: Du hast ein AI-Schreibassistenten-Produkt und brauchst eine schoene Landing-Page, um die Produkteigenschaften zu praesentieren und Nutzer zur Registrierung zu animieren. Die Landing-Page muss eine starke visuelle Wirkung haben, fluessige Animationen bieten und auch auf dem Handy gut aussehen.
|
||||
|
||||
**Warum HeroUI**: Die Standard-Stiles von HeroUI sind bereits sehr schoen, mit fluessigen Uebergangsanimationen, ideal fuer nutzerorientierte Praesentations-Seiten.
|
||||
|
||||
### 3.1 Projekt erstellen
|
||||
|
||||
```bash
|
||||
# Projekt mit dem offiziellen HeroUI-CLI erstellen
|
||||
npx create-heroui-app@latest ai-writer-landing
|
||||
cd ai-writer-landing
|
||||
npm install
|
||||
```
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot der HeroUI-Website oder Komponenten-Darstellung -->
|
||||
<!--  -->
|
||||
|
||||
### 3.2 Landing-Page mit AI IDE generieren
|
||||
|
||||
AI IDE (Cursor, Trae etc.) oeffnen und im Dialog eingeben:
|
||||
|
||||
```text
|
||||
Bitte erstelle eine Landing-Page fuer einen AI-Schreibassistenten mit der HeroUI-Komponentenbibliothek:
|
||||
|
||||
**Seitenstruktur:**
|
||||
1. Obere Navigation: Links Logo und Produktname, rechts die Links "Funktionen", "Preise", "Ueber uns" sowie ein "Loslegen"-Button
|
||||
2. Hero-Bereich: Grosse Ueberschrift "Lass AI dein Schreib-Partner werden", Unteruebersicht mit Produktwert, zwei Buttons "Kostenlos testen" und "Demo ansehen", darunter ein Produkt-Screenshot
|
||||
3. Funktionspraesentation: Drei Spalten-Karten fuer "Intelligentes Weiterschreiben", "Stil-Anpassung" und "Mehrsprachige Uebersetzung", jede Karte mit Icon, Titel und Beschreibung
|
||||
4. Preisbereich: Drei Preiskarten (Gratis-Version, Pro-Version, Team-Version), Pro-Version hervorgehoben
|
||||
5. Unterer Call-to-Action: Ein attraktiver Slogan mit Registrierungs-Button
|
||||
6. Footer: Copyright-Info und Social-Media-Links
|
||||
|
||||
**Design-Anforderungen:**
|
||||
- Modern und professionell wirken
|
||||
- Dark Mode unterstuetzen
|
||||
- Auch auf dem Handy gut aussehen
|
||||
```
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot des AI IDE-generierten HeroUI-Landing-Page-Prozesses oder -Ergebnisses -->
|
||||
<!--  -->
|
||||
|
||||
### 3.3 Vom AI verwendete Schluesselkomponenten
|
||||
|
||||
Im von AI generierten Code wirst du diese HeroUI-Komponenten sehen:
|
||||
|
||||
```jsx
|
||||
import {
|
||||
Navbar, NavbarBrand, NavbarContent, NavbarItem,
|
||||
Button,
|
||||
Card, CardHeader, CardBody, CardFooter,
|
||||
Divider,
|
||||
Link,
|
||||
Chip
|
||||
} from '@heroui/react'
|
||||
```
|
||||
|
||||
Rolle jeder Komponente:
|
||||
|
||||
| Komponente | Zweck | Position in der Landing-Page |
|
||||
| :--- | :--- | :--- |
|
||||
| `Navbar` | Obere Navigationsleiste | Ganz oben auf der Seite, fixiert |
|
||||
| `Button` | Button, unterstuetzt mehrere Varianten und Farben | CTA-Buttons, Navigations-Buttons |
|
||||
| `Card` | Karten-Container | Funktionspraesentation, Preiskarten |
|
||||
| `Chip` | Kleines Tag | "Empfohlen", "Am beliebtesten" Markierung |
|
||||
| `Divider` | Trennlinie | Visuelle Trennung zwischen Bereichen |
|
||||
|
||||
### 3.4 Iterative Optimierung
|
||||
|
||||
Der erste generierte Code ist moeglicherweise noch nicht vollstaendig zufriedenstellend. Weiterhin mit AI im Dialog bleiben und anpassen:
|
||||
|
||||
```text
|
||||
Bitte optimiere die Landing-Page:
|
||||
|
||||
1. Ueberschrift mit Gradient-Farbe von Blau nach Violett
|
||||
2. Funktionskarten sollen beim Hover eine Schwebe-Animation haben
|
||||
3. Die Pro-Preiskarte hervorheben, mit Rahmen und "Am beliebtesten"-Tag
|
||||
4. Navigation auf dem Handy in ein Hamburger-Menue umwandeln
|
||||
```
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot der iterativ optimierten Landing-Page -->
|
||||
<!--  -->
|
||||
|
||||
> **Kern des Vibe Coding**: Du musst nicht jedes Komponenten-API auswendig kennen. Beschreibe einfach in natuerlicher Sprache den gewuenschten Effekt, und AI findet die passende Komponente und Schreibweise. Bei Unzufriedenheit einfach weiter im Dialog iterieren.
|
||||
|
||||
## 4. Praktische Uebung 2: Produktseite mit shadcn/ui erstellen
|
||||
|
||||
**Szenario**: Dein AI-Schreibassistent braucht ein Haupt-Interface nach der Benutzeranmeldung -- links die Dokumentenliste, rechts der Editor, oben eine Werkzeugleiste. Dies ist eine funktionale Produktseite, die ein hochgradig anpassbares UI erfordert.
|
||||
|
||||
**Warum shadcn/ui**: shadcn/ui kopiert den Komponenten-Code direkt in dein Projekt, sodass du jedes Detail frei aendern kannst. Fuer tief anpassbare Produkt-Interfaces ist dieses "Code gehoert dir"-Modell am flexibelsten.
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot der shadcn/ui-Website oder Komponenten-Darstellung -->
|
||||
<!--  -->
|
||||
|
||||
### 4.1 Projekt erstellen
|
||||
|
||||
```bash
|
||||
# Next.js-Projekt erstellen
|
||||
npx create-next-app@latest ai-writer-app --typescript --tailwind --app
|
||||
cd ai-writer-app
|
||||
|
||||
# shadcn/ui initialisieren
|
||||
npx shadcn@latest init
|
||||
|
||||
# Komponenten nach Bedarf hinzufuegen (nicht alle auf einmal installieren)
|
||||
npx shadcn@latest add button card input sidebar sheet dialog
|
||||
```
|
||||
|
||||
Das Besondere an shadcn/ui: Jedes Mal, wenn du eine Komponente `add`-ierst, wird der Quellcode in das `components/ui/`-Verzeichnis deines Projekts kopiert. Du kannst diese Dateien direkt oeffnen und Stil und Verhalten aendern.
|
||||
|
||||
### 4.2 Produkt-Interface mit AI IDE generieren
|
||||
|
||||
```text
|
||||
Bitte erstelle das Haupt-Interface eines AI-Schreibassistenten mit der shadcn/ui-Komponentenbibliothek:
|
||||
|
||||
**Gesamtlayout:**
|
||||
- Links eine einklappbare Seitenleiste, Breite ca. 280px:
|
||||
- Oben ein "Neues Dokument"-Button
|
||||
- Darunter die Dokumentenliste, jedes Dokument zeigt Titel und letzte Bearbeitungszeit
|
||||
- Rechtsklick auf ein Dokument zum Umbenennen oder Loeschen
|
||||
- Rechts der Haupt-Editor-Bereich, in zwei Teile geteilt:
|
||||
- Oben die Werkzeugleiste: Dokumenttitel bearbeiten, Wortstatistik anzeigen, "AI-Weiterschreiben"-Button, "Export"-Dropdown
|
||||
- Unten der Editor-Bereich: Ein grosses Texteingabefeld, das den restlichen Platz ausfuellt
|
||||
|
||||
**Interaktionsdetails:**
|
||||
- Nach Klick auf "AI-Weiterschreiben" zeigt der Button einen Ladezustand, am Ende des Editors erscheint der von AI generierte Text (wie eine Schreibmaschine, Zeichen fuer Zeichen)
|
||||
- Auf dem Handy wird die Seitenleiste zu einer Drawer-Ansicht, die von links einschieht
|
||||
- Das aktuell ausgewaehlte Dokument wird hervorgehoben
|
||||
```
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot des AI-generierten shadcn/ui-Produkt-Interfaces -->
|
||||
<!--  -->
|
||||
|
||||
### 4.3 Vom AI verwendete Schluesselkomponenten
|
||||
|
||||
```tsx
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetTrigger
|
||||
} from '@/components/ui/sheet'
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarHeader
|
||||
} from '@/components/ui/sidebar'
|
||||
```
|
||||
|
||||
| Komponente | Zweck | Position auf der Produktseite |
|
||||
| :--- | :--- | :--- |
|
||||
| `Sidebar` | Einklappbare Seitenleiste | Links Dokumentenliste |
|
||||
| `Sheet` | Mobil-Drawer | Alternative zur Seitenleiste auf Mobilgeraeten |
|
||||
| `DropdownMenu` | Dropdown-Menue | "Export"-Button, Rechtsklick-Menue |
|
||||
| `Dialog` | Dialogfeld | Umbenennen, Loesch-Bestaetigung |
|
||||
| `Button` | Button, unterstuetzt variant und loading | Verschiedene Aktions-Buttons |
|
||||
| `Input` | Eingabefeld | Dokumenttitel-Bearbeitung |
|
||||
|
||||
### 4.4 Komponentenstiele anpassen
|
||||
|
||||
Der Vorteil von shadcn/ui liegt darin, dass du den Komponenten-Quellcode direkt aendern kannst. Wenn du beispielsweise groessere Abrundungen fuer Buttons moechtest:
|
||||
|
||||
```text
|
||||
Bitte aendere components/ui/button.tsx,
|
||||
setze die Standard-Abrundung aller Buttons von rounded-md auf rounded-xl
|
||||
und fuege der primary-Variante einen subtilen Schatten-Effekt hinzu
|
||||
```
|
||||
|
||||
AI aendert die Komponentendatei direkt in deinem Projekt, anstatt die Styles eines npm-Packages zu ueberschreiben -- das ist der Vorteil von shadcn/ui "Code gehoert dir".
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot des shadcn/ui-Komponenten-Quellcodes im Projekt, der direkt bearbeitbar ist -->
|
||||
<!--  -->
|
||||
|
||||
## 5. Praktische Uebung 3: Backend-Verwaltungsinterface mit Ant Design erstellen
|
||||
|
||||
**Szenario**: Dein AI-Schreibassistent ist online und du brauchst ein Verwaltungs-Backend, um Nutzerdaten einzusehen, Dokumenteninhalte zu verwalten und bezahlte Bestellungen zu bearbeiten. Der Kern eines Backend-Verwaltungssystems sind Datenanzeige und Operationseffizienz.
|
||||
|
||||
**Warum Ant Design**: Ant Design hat die tiefste Erfahrung im Backend-Bereich. Tabellen, Formulare, Diagramme und andere Geschaeftskomponenten sind sofort einsatzbereit, mit vielen integrierten Enterprise-Interaktionsmustern (Stapelverarbeitung, erweiterte Filter, Datenexport etc.).
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot der Ant Design-Website oder Pro Components-Darstellung -->
|
||||
<!--  -->
|
||||
|
||||
### 5.1 Projekt erstellen
|
||||
|
||||
```bash
|
||||
# Mit Ant Design Pro Scaffold verwenden (integriertes Layout, Routing, Berechtigungen)
|
||||
npx create-umi@latest ai-writer-admin
|
||||
# Ant Design Pro Template waehlen
|
||||
cd ai-writer-admin
|
||||
npm install
|
||||
```
|
||||
|
||||
Oder von Grund auf:
|
||||
|
||||
```bash
|
||||
npx create-react-app ai-writer-admin --template typescript
|
||||
cd ai-writer-admin
|
||||
npm install antd @ant-design/icons @ant-design/pro-components
|
||||
```
|
||||
|
||||
### 5.2 Backend-Verwaltung mit AI IDE generieren
|
||||
|
||||
```text
|
||||
Bitte erstelle ein Backend-Verwaltungssystem fuer einen AI-Schreibassistenten mit der Ant Design-Komponentenbibliothek:
|
||||
|
||||
**Gesamtlayout:**
|
||||
- Links die Menueleiste: Dashboard, Nutzerverwaltung, Dokumentenverwaltung, Bestellverwaltung, Systemeinstellungen
|
||||
- Oben Breadcrumb-Navigation anzeigen
|
||||
|
||||
**Nutzerverwaltungsseite:**
|
||||
- Oben vier Statistik-Karten: Gesamtnutzerzahl, heute neu, aktive Nutzer, zahlende Nutzer
|
||||
- Suchfilter-Bereich: Suche nach Nutzername, Auswahl des Registrierungszeitraums, Filterung des Nutzerstatus, mit "Suchen"- und "Zuruecksetzen"-Buttons
|
||||
- Nutzer-Tabelle:
|
||||
- Anzeige von Avatar, Nutzername, E-Mail, Registrierungsdatum, Abonnement-Plan (farblich unterschieden), Status, Aktionen
|
||||
- 20 Eintraege pro Seite mit Seitennummerierung
|
||||
- Mehrfachauswahl von Nutzern, Stapel-Deaktivierung oder Export
|
||||
- Aktionsspalte: Details anzeigen, bearbeiten, deaktivieren (mit Bestaetigung vor Deaktivierung)
|
||||
- Nach Klick auf "Details anzeigen" oeffnet sich rechts ein Drawer mit Nutzerdetails und letzter Dokumentenliste
|
||||
```
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot des AI-generierten Ant Design-Backend-Verwaltungsinterfaces -->
|
||||
<!--  -->
|
||||
|
||||
### 5.3 Vom AI verwendete Schluesselkomponenten
|
||||
|
||||
```tsx
|
||||
import { PageContainer, ProLayout } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { StatisticCard } from '@ant-design/pro-components'
|
||||
import {
|
||||
Button, Tag, Badge, Space, Drawer,
|
||||
Popconfirm, message, Modal
|
||||
} from 'antd'
|
||||
import {
|
||||
UserOutlined, SearchOutlined, ExportOutlined
|
||||
} from '@ant-design/icons'
|
||||
```
|
||||
|
||||
| Komponente | Zweck | Position im Backend |
|
||||
| :--- | :--- | :--- |
|
||||
| `ProLayout` | Gesamt-Backend-Layout-Frame | Seitenskelett (Menue + Inhaltsbereich) |
|
||||
| `ProTable` | Erweiterte Tabelle mit integrierter Suche, Seitennummerierung und Spalteneinstellungen | Nutzerliste, Dokumentenliste, Bestellliste |
|
||||
| `StatisticCard` | Daten-Statistik-Karten | Dashboard, Uebersicht oben auf der Seite |
|
||||
| `Tag` / `Badge` | Status-Tags | Abonnement-Plan, Nutzerstatus |
|
||||
| `Drawer` | Seiten-Drawer | Nutzerdetails, Bearbeitungsformular |
|
||||
| `Popconfirm` | Popup-Bestaetigungsbox | Loeschen, Deaktivieren und andere gefaehrliche Operationen |
|
||||
|
||||
### 5.4 Weiter iterieren: Dashboard hinzufuegen
|
||||
|
||||
```text
|
||||
Bitte erstelle eine Dashboard-Seite:
|
||||
|
||||
1. Oben vier Statistik-Karten: Gesamtnutzerzahl, Gesamtdokumentanzahl, heutige API-Aufrufe, monatlicher Umsatz, jeweils mit Wert und monatlicher Veraenderung (gestiegen oder gefallen)
|
||||
2. Mitte zwei Diagramme:
|
||||
- Links: Liniendiagramm des Nutzerwachstums der letzten 7 Tage
|
||||
- Rechts: Kreisdiagramm der Abonnement-Plan-Verteilung
|
||||
3. Unten: Tabelle der letzten Operations-Logs mit Zeit, Nutzer, Aktionstyp und Details
|
||||
|
||||
Verwende Ant Design-Komponenten fuer das Layout, Diagramme koennen mit Ant Design Charts erstellt werden
|
||||
```
|
||||
|
||||
<!-- TODO: Ersetzen durch Screenshot der Dashboard-Seite -->
|
||||
<!--  -->
|
||||
|
||||
> **Vibe Coding Tipp fuer Backend-Verwaltung**: Backend-Seiten haben eine relativ feste Struktur (Tabelle + Suche + Dialog), was sich hervorragend fuer die batchweise Generierung durch AI eignet. Du kannst zunaechst eine "Nutzerverwaltung"-Seite als Vorlage von AI generieren lassen und dann sagen: "Orientiere dich an der Struktur der Nutzerverwaltungsseite und generiere eine Dokumentenverwaltungsseite." AI wird dasselbe Layout-Muster wiederverwenden.
|
||||
|
||||
## 6. Dokumentation lesen lernen: Die "Bedienungsanleitung" der Komponentenbibliothek
|
||||
|
||||
Im Vibe Coding schreibt AI den Grossteil des Codes. Wenn jedoch das generierte Ergebnis nicht stimmt oder du das Verhalten einer Komponente feinanpassen moechtest, ist **Dokumentation lesen** der schnellste Loesungsweg.
|
||||
|
||||
Am Beispiel von Ant Design: Die Dokumentations-Adresse lautet `https://ant.design/components/overview-cn`
|
||||
|
||||
Standardablauf zum Lesen der Dokumentation:
|
||||
|
||||
1. **Anforderung klarstellen**: Zum Beispiel "Ich brauche eine Tabelle mit Zeilenauswahl"
|
||||
2. **In der Dokumentation suchen**: Nach "Table" suchen, um zur Tabellen-Komponenten-Seite zu gelangen
|
||||
3. **Beispiele ansehen**: Jede Komponente hat mehrere Online-Beispiele in der Dokumentation; das "Auswaehlbar"-Beispiel finden
|
||||
4. **Code kopieren**: Den Beispielcode in dein Projekt kopieren
|
||||
5. **API-Tabelle ansehen**: Unten auf der Seite die vollstaendigen Konfigurationsoptionen fuer die `rowSelection`-Eigenschaft finden
|
||||
|
||||
> Du kannst auch den Dokumentations-Link direkt an die AI IDE senden: "Bitte beziehe dich auf die rowSelection-API unter https://ant.design/components/table-cn und fuege der Nutzertabelle eine Mehrfachauswahl-Funktion hinzu." Wenn AI ein Dokumentations-Link zur Verfuegung steht, ist der generierte Code genauer.
|
||||
|
||||
Schnellreferenz der Dokumentations-Adressen der Komponentenbibliotheken:
|
||||
|
||||
| Komponentenbibliothek | Dokumentations-Adresse |
|
||||
| :--- | :--- |
|
||||
| Ant Design | `https://ant.design/components/overview-cn` |
|
||||
| shadcn/ui | `https://ui.shadcn.com/docs/components` |
|
||||
| HeroUI | `https://heroui.com/docs/components` |
|
||||
| Material UI | `https://mui.com/material-ui/all-components/` |
|
||||
| Element Plus | `https://element-plus.org/zh-CN/component/overview.html` |
|
||||
|
||||
## 7. Zusammenfassung
|
||||
|
||||
Die drei praktischen Szenarien decken die haeufigsten Frontend-Entwicklungsanforderungen ab:
|
||||
|
||||
| Szenario | Empfohlene Komponentenbibliothek | Kernmerkmal |
|
||||
| :--- | :--- | :--- |
|
||||
| Landing-Page / Praesentations-Seite | HeroUI | Standardmaessig schoene Stiles, fluessige Animationen, starke visuelle Wirkung |
|
||||
| Produkt-Funktionsseite | shadcn/ui | Code vollstaendig kontrollierbar, hochgradig anpassbar |
|
||||
| Backend-Verwaltungssystem | Ant Design | Reichhaltige Geschaeftskomponenten, Tabellen und Formulare sofort einsatzbereit |
|
||||
|
||||
Zusammenfassung des Vibe Coding-Workflows:
|
||||
|
||||
1. Basierend auf dem Szenario die passende Komponentenbibliothek auswaehlen
|
||||
2. Mit AI IDE die gewuenschte Seitenstruktur und Interaktionen beschreiben
|
||||
3. AI generiert den ersten Code-Entwurf, du schaust dir das Ergebnis an
|
||||
4. Mit natuerlicher Sprache weiter iterieren und anpassen
|
||||
5. Bei Detailproblemen die Komponentenbibliothek-Dokumentation konsultieren
|
||||
|
||||
### Uebung
|
||||
|
||||
Waehle eines der folgenden Szenarien und schliesse es von Grund auf mit AI IDE + Komponentenbibliothek ab:
|
||||
|
||||
1. Verwende HeroUI, um eine Praesentations-Landing-Page fuer ein deiner frueheren Projekte (z. B. Hogwarts-Portraets) zu erstellen
|
||||
2. Verwende shadcn/ui, um das Haupt-Interface einer Notiz-App zu erstellen (Seitenleiste + Editor)
|
||||
3. Verwende Ant Design, um ein einfaches Content-Management-Backend zu erstellen (Artikelliste + Formular zum Erstellen neuer Artikel)
|
||||
|
||||
---
|
||||
|
||||
## Anhang: Weitere Komponentenbibliotheken im Ueberblick
|
||||
|
||||
Zusaetzlich zu den vier Kern-Bibliotheken im Haupttext gibt es im Frontend-Oekosystem eine grosse Anzahl hervorragender Komponentenbibliotheken. Die folgende Liste ist nach Frameworks kategorisiert, um die Auswahl basierend auf Projektanforderungen zu erleichtern.
|
||||
|
||||
### Vue-Oekosystem
|
||||
|
||||
| Komponentenbibliothek | Stars | Kurzbeschreibung | Anwendungsbereich |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| [Element Plus](https://element-plus.org) | ~27k | Enterprise-Komponentenbibliothek fuer Vue 3 vom Ele.me-Team, am weitesten verbreitet in China | Backend-Verwaltungssysteme |
|
||||
| [Vuetify](https://vuetifyjs.com) | ~41k | Die populaerste Vue Material Design-Komponentenbibliothek, 80+ Komponenten, vollstaendige Dokumentation | Google Design-Stil-Projekte |
|
||||
| [Ant Design Vue](https://antdv.com) | ~21k | Vue 3-Komponentenbibliothek basierend auf dem Ant Design-System | Enterprise-Backends |
|
||||
| [Naive UI](https://www.naiveui.com) | ~18k | In TypeScript geschrieben, extrem anpassbare Themen, unabhaengig von CSS-Präprozessoren | Projekte mit speziellen Design-Anforderungen |
|
||||
| [Quasar](https://quasar.dev) | ~27k | Ein Codebasis fuer SPA, SSR, PWA, Mobile und Desktop | Cross-Platform-Projekte |
|
||||
| [Vant](https://vant-ui.github.io/vant) | ~24k | Leichtgewichtige Mobile-Komponentenbibliothek vom Youzan-Team | Mobile H5-Seiten |
|
||||
| [PrimeVue](https://primevue.org) | ~14k | 90+ Komponenten, unterstuetzt verschiedene Themen (Material, Bootstrap etc.) | Viele Komponenten und mehrere Themen erforderlich |
|
||||
| [Arco Design Vue](https://arco.design/vue) | ~3k | Von ByteDance, hohe Komponentenqualitaet, integriertes Dark Mode | Backend-Produkte |
|
||||
| [TDesign Vue Next](https://tdesign.tencent.com/vue-next) | ~2k | Von Tencent, einheitliche Designsprache | Tencent-Oekosystem oder Enterprise-Projekte |
|
||||
|
||||
### React-Oekosystem
|
||||
|
||||
| Komponentenbibliothek | Stars | Kurzbeschreibung | Anwendungsbereich |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| [Material UI (MUI)](https://mui.com) | ~95k | Aelteste Implementierung der Google Material Design-Richtlinien, umfassendste Komponenten, reifstes Oekosystem | Schneller Aufbau von Enterprise-Anwendungen |
|
||||
| [Ant Design](https://ant.design) | ~94k | Von Ant Group, viele hochwertige integrierte Geschaeftskomponenten, dominante Position in der chinesischsprachigen Entwickler-Community | Enterprise-Backends |
|
||||
| [shadcn/ui](https://ui.shadcn.com) | ~83k | Code wird in das Projekt kopiert statt als npm installiert, basiert auf Radix UI + Tailwind CSS, vollstaendig kontrollierbar | Projekte mit hohem Anpassungsbedarf |
|
||||
| [Chakra UI](https://chakra-ui.com) | ~39k | Mit Fokus auf Entwicklererfahrung, praegnant API, integrierte Barrierefreiheit | Schnelle Prototyp-Entwicklung |
|
||||
| [Mantine](https://mantine.dev) | ~28k | 100+ Komponenten und 50+ Hooks, inklusive DatePicker, Rich-Text-Editor und weitere fortgeschrittene Komponenten | All-in-One-Loesung |
|
||||
| [Headless UI](https://headlessui.com) | ~27k | Offizielle ungestylte Komponentenbibliothek von Tailwind Labs, unterstuetzt sowohl React als auch Vue | In Kombination mit Tailwind CSS |
|
||||
| [HeroUI](https://heroui.com) | ~24k | Basierend auf Tailwind CSS + React Aria, standardmaessig schoene Stiles, fluessige Animationen | Projekte mit hohen visuellen Anforderungen |
|
||||
| [Radix UI](https://www.radix-ui.com) | ~17k | Ungestylte Low-Level-Komponenten-Primitivbibliothek mit Fokus auf Barrierefreiheit und Komponentenverhalten, Basis von shadcn/ui | Aufbau eigener Designsysteme |
|
||||
|
||||
#### shadcn/ui-Erweiterungs-Oekosystem
|
||||
|
||||
Zusaetzlich zu den oben genannten allgemeinen Komponentenbibliotheken ist im shadcn/ui-Oekosystem eine grosse Zahl von Erweiterungsbibliotheken entstanden, die auf derselben Philosophie basieren und differenzierte Loesungen fuer spezifische Szenarien bieten. Diese Erweiterungsbibliotheken verwenden ebenfalls den "Code ins Projekt kopieren"-Ansatz und geben Entwicklern die volle Quellcode-Kontrolle.
|
||||
|
||||
| Komponentenbibliothek | Kurzbeschreibung | Anwendungsbereich |
|
||||
| :--- | :--- | :--- |
|
||||
| [Aceternity UI](https://ui.aceternity.com) | 200+ produktionsreife Komponenten, Spezialitaet: leuchtende Karten, Text-Gradienten, 3D-Globus und andere besondere visuelle Komponenten | Hochwertige Landing-Pages, SaaS-Produkte |
|
||||
| [Tailark UI](https://tailark.com) | Sammlung von Marketing-Website-Komponenten-Bloecken, Produktpraesentation, Kunden-Testimonials, CTA-Buttons und weitere haeufige Marketing-Module | Marketing-Landing-Pages, Produkt-Websites |
|
||||
| [UI Tripled](https://ui.tripled.work) | Dynamische Interaktionskomponenten basierend auf Framer Motion, Popups, Navigation, Karten-Animationen | Kreativ-Tools, persoenliche Portfolios |
|
||||
| [Neobrutalism UI](https://neobrutalism.dev) | Neobrutalismus-Stil, dicke Linien, hoher Kontrast, kraeftige Farben | Individualisierte Marken-Websites, Kreativ-Projekte |
|
||||
| [REUI](https://reui.io) | 967+ Komponenten-Kombinationsmuster fuer echte Geschaeftsszenarien | Enterprise-Backends, komplexe Formulare |
|
||||
| [Cult UI](https://cult-ui.com) | Feinere Interaktions-/Visuelle-Details, Datentabellen, Filter-Panels und andere zusammengesetzte Komponenten | Hochwertige kommerzielle Projekte |
|
||||
| [Kibo UI](https://kibo-ui.com) | Fortgeschrittene Geschaeftskomponenten, Farbwahl, Rich-Text-Editor, Datei-Upload | Verwaltungs-Backends, Werkzeug-Produkte |
|
||||
| [Kokonut UI](https://kokonutui.com) | 100+ Komponenten + 7+ vollstaendige Templates, frischer minimalistischer Stil | SaaS-Websites, Blogs, E-Commerce |
|
||||
| [Commerce UI](https://ui.stackzero.co) | Speziell fuer E-Commerce-Szenarien, Produktkarten, Warenkorb, Checkout-Formulare | E-Commerce-Plattformen |
|
||||
| [shadcnblocks](https://shadcnblocks.com) | 1373 UI-Bloecke + 13 vollstaendige Templates, umfassendste Ressource | Alle Szenarien |
|
||||
| [Shoogle](https://shoogle.dev) | shadcn/ui-Oekosystem-Aggregations- und Suchplattform | Schnelles Auffinden von Ressourcen |
|
||||
| [Discover All Shadcn](https://allshadcn.com) | Aggregierte Ressourcen-Navigation | Schnelles Auffinden von Ressourcen |
|
||||
|
||||
> **Warum shadcn/ui-Erweiterungen waehlen?** Diese Erweiterungen uebernehmen die Philosophie von shadcn/ui "Code-Eigentum" und bieten gleichzeitig tiefgehende Spezialisierung fuer bestimmte Szenarien. In der Vibe-Coding-Aera ermoeglichen sie es, schnell Komponenten zu finden, die den Designanforderungen entsprechen, die Homogenitaet der Mainstream-UI-Bibliotheken zu ueberwinden und differenziertere Produkte zu erstellen.
|
||||
@@ -0,0 +1,425 @@
|
||||
# Seiten und Buttons nach UI-Designrichtlinien entwerfen
|
||||
|
||||
Viele Menschen sagen: "Ich moechte, dass die Seite ein bisschen mehr wie Apple aussieht" oder "Die Buttons sollten etwas hochwertiger wirken". Aber wenn es dann an die Umsetzung geht, haengt man oft an einer Frage fest:
|
||||
|
||||
**Woran sollte man sich eigentlich orientieren?**
|
||||
|
||||
Einen Screenshot abzubilden, bringt nur die Erkenntnis "Aehnlichkeit". Wenn man jedoch die Designrichtlinien von Apple, Google, Microsoft und Atlassian oeffnet, stellt man fest, dass deren wahre Staerke nicht im visuellen Stil liegt, sondern darin, **Designprobleme klar zu benennen**: Was auf einer Seite zuerst hervorgehoben wird, wie Buttons gestuft werden, welche Operationen betont werden -- diese Beurteilungskriterien sind der Kern.
|
||||
|
||||
> Sich an Designrichtlinien zu orientieren, heisst nicht, "wie jemand anderes auszusehen", sondern zu lernen, wie andere Urteile faellen.
|
||||
|
||||
:::: info Warum man diese heute noch lernen sollte
|
||||
Designregeln sind bereits in Modelle trainiert und werden von Designtools standardmaessig absorbiert. Selbst wenn man AI ein paar Screenshots gibt, kann sie diese erlernen. Dennoch ist es wichtig zu wissen, woher diese Regeln kommen und warum sie so definiert sind.
|
||||
::::
|
||||
|
||||
## Zunaechst einige Originalzitate, um den Unterschied zu spueren
|
||||
|
||||
Wenn du bisher dachtest, "Designrichtlinien handeln doch nur von Stil", dann lies zuerst einige offizielle Originaltexte.
|
||||
|
||||
Im Team sagt man oft Dinge wie:
|
||||
|
||||
- Mach mal ein Dropdown
|
||||
- Hier ein Menu hinsetzen
|
||||
- In der Menueleiste ein paar Funktionen hinzufuegen
|
||||
- Hier zwei Buttons, einer zum Bestaetigen und einer zum Abbrechen
|
||||
|
||||
Das klingt unproblematisch, aber in den grossen Unternehmensrichtlinien sind diese Begriffe keine verschwommenen Konzepte, sondern sehr fein unterteilt.
|
||||
|
||||
| Was man umgangssprachlich sagt | Offizieller Originaltext | Kurz gesagt |
|
||||
| :--- | :--- | :--- |
|
||||
| "Ein Menu erstellen" | Apple: ["A menu reveals its options..."](https://developer.apple.com/design/human-interface-guidelines/menus) | `Menu` dient der Durchfuehrung von Aktionen |
|
||||
| "Funktionen in die Menueleiste" | Apple: ["menu bar menus contain all the commands..."](https://developer.apple.com/design/human-interface-guidelines/menus) | Dies ist das Befehlsmenue oben in der App |
|
||||
| "Ein Dropdown erstellen" | Apple: ["A pop-up list lets the user choose one option among several."](https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/MenuList/Articles/ManagingPopUpItems.html) | `pop-up` dient der Auswahl eines Werts aus einer Liste |
|
||||
| "Auch ein Dropdown" | Apple: ["A pull-down list is generally used for selecting commands in a specific context."](https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/MenuList/Articles/ManagingPopUpItems.html) | `pull-down` oeffnet sich fuer die aktuelle Aktion |
|
||||
| "Menu kann man auch zum Filtern nutzen" | Fluent: ["If you need to collect information from people, try a select, dropdown, or combobox instead."](https://fluent2.microsoft.design/components/web/react/core/menu/usage) | `Menu` ist nicht zur Werterfassung gedacht |
|
||||
| "Menu kann man auch als Navigation nutzen" | Material: ["Menus should not be used as a primary method for navigation within an app."](https://m1.material.io/components/menus.html) | `Menu` ist keine Hauptnavigation |
|
||||
| "Button einfach OK / Cancel schreiben" | Apple: ["Always use 'Cancel' to title a button that cancels the alert's action."](https://developer.apple.com/design/human-interface-guidelines/alerts) | Button-Text darf nicht willkuerlich sein |
|
||||
|
||||
> Die Zitate in der Tabelle sind direkt klickbar und fuehren zur entsprechenden offiziellen Seite.
|
||||
|
||||
Genau das ist es, woran man beim ersten echten Blick in Designrichtlinien am leichtesten erschrickt:
|
||||
|
||||
> Wir glauben oft, wir wuerden ueber UI diskutieren, aber tatsaechlich kommunizieren wir meistens nur mit einer Reihe vager Begriffe.
|
||||
|
||||
Apple wuerde niemals nur sagen "ein Menu erstellen"; es wuerde weiter unterscheiden in:
|
||||
|
||||
- `menu`
|
||||
- `menu bar menu`
|
||||
- `pop-up button`
|
||||
- `pull-down button`
|
||||
- `context menu`
|
||||
|
||||
Fluent wuerde niemals nur sagen "ein Dropdown"; es wuerde weiter unterscheiden in:
|
||||
|
||||
- `menu`
|
||||
- `dropdown`
|
||||
- `select`
|
||||
- `combobox`
|
||||
|
||||
Genau das ist die Notwendigkeit von Designrichtlinien.
|
||||
|
||||
Sie dienen nicht dazu, Seiten professioneller wirken zu lassen, sondern sicherzustellen, dass im Team bei UI-Diskussionen nicht jeder etwas anderes im Kopf hat.
|
||||
|
||||
## Was du lernen wirst
|
||||
|
||||
1. Warum man beim Entwerfen von Seiten und Buttons zuerst die Designrichtlinien lesen sollte
|
||||
2. Welche Inhalte der Richtlinien von Apple, Material, Fluent und Atlassian am referenzwuerdigsten sind
|
||||
3. Wie man "Seitenhierarchie" und "Button-Hierarchie" klar gestaltet
|
||||
4. Wie man AI dazu bringt, sich an den Richtlinien anderer zu orientieren, um Seiten und Buttons zu generieren
|
||||
|
||||
## 1. Warum Designrichtlinien dir helfen, Seiten klar zu gestalten
|
||||
|
||||
Nach dem Lesen der obigen Originalzitate faellt ein Schluesselpunkt auf:
|
||||
|
||||
**Designrichtlinien sind kein zusaetzlicher Luxus, sondern sorgen zunaechst dafuer, dass die Begriffe praezise verwendet werden.**
|
||||
|
||||
Viele Seiten sehen nicht gut aus, nicht weil die Farbgebung nicht hochwertig genug ist, sondern weil die Informationsebenen chaotisch sind.
|
||||
|
||||
Viele Buttons sind nicht benutzerfreundlich, nicht weil die Abrundung falsch ist, sondern weil:
|
||||
|
||||
- Es zu viele Haupt-Buttons gibt und die Nutzer nicht wissen, welchen sie klicken sollen
|
||||
- Gefaehrliche und normale Buttons aehnlich aussehen
|
||||
- Alle Buttons auf der Seite um Aufmerksamkeit konkurrieren
|
||||
- Button-Stil und Semantik ueber verschiedene Seiten hinweg inkonsistent sind
|
||||
|
||||
Ausgereifte Designrichtlinien loesen genau diese Probleme. Sie definieren in der Regel:
|
||||
|
||||
| Inhalt der Richtlinie | Welches Problem es loest |
|
||||
| :--- | :--- |
|
||||
| **Seitenhierarchie** | Wohin man zuerst schaut, wohin spaeter, wie Informationen organisiert werden |
|
||||
| **Visuelle Grundlagen** | Wie Farben, Abstaende, Schriften, Abrundungen und Schatten vereinheitlicht werden |
|
||||
| **Button-Hierarchie** | Wie Haupt-, Neben-, Text- und Gefahren-Buttons unterschieden werden |
|
||||
| **Zustandsregeln** | Wie hover, focus, disabled und loading dargestellt werden |
|
||||
| **Interaktionssemantik** | Welcher Button "bestaetigen", "abbrechen" und "weitere Aktionen" bedeutet |
|
||||
|
||||
Designrichtlinien liefern also nicht einfach einen "Skin", sondern ein **Beurteilungskriterium**.
|
||||
|
||||
## 2. Worauf man bei den grossen Unternehmensrichtlinien achten sollte
|
||||
|
||||
### 2.1 Von Apple lernen: "Definitionen fein genug zu fassen"
|
||||
|
||||
Das Lernwertste bei Apple ist nicht nur die visuelle Zurueckhaltung, sondern dass es Konzepte sehr fein definiert.
|
||||
|
||||
Das, was in vielen Teams nur "Menu" oder "Dropdown" heisst, wird bei Apple weiter unterteilt:
|
||||
|
||||
- `menu`: Eine Gruppe von Befehlen, Optionen oder Zustaenden
|
||||
- `menu bar menu`: App-weite Befehlssammlung
|
||||
- `pop-up button`: Einen Wert auswaehlen
|
||||
- `pull-down button`: Im aktuellen Kontext einen Befehl ausloesen
|
||||
- `context menu`: Haeufige Aktionen bezogen auf das aktuelle Objekt oder die aktuelle Aufgabe
|
||||
|
||||
Diese Unterscheidung ist sehr wichtig, da sie sich direkt darauf auswirkt:
|
||||
|
||||
- Ob die Komponente zur Werterfassung oder zur Aktionsausfuehrung dient
|
||||
- Ob sie zum Seitenbereich oder zur App-Ebene gehoert
|
||||
- Ob sie den aktuell ausgewaehlten Wert dauerhaft anzeigen soll oder nur temporaer Befehle aufklappt
|
||||
|
||||
Wenn du in dieser Granularitaet zu denken beginnst, werden deine Seiten sofort deutlich klarer.
|
||||
|
||||
### 2.2 Von Apple lernen: Seitenhierarchie und Zurueckhaltung
|
||||
|
||||
Die Apple Human Interface Guidelines eignen sich besonders gut, um zwei Dinge zu lernen:
|
||||
|
||||
- Wie Seiten eine klare Hierarchie aufbauen
|
||||
- Wie Steuerelemente eindeutig bleiben, ohne aufdringlich zu wirken
|
||||
|
||||
Apple betont `Hierarchy`, `Harmony` und `Consistency`. Das bedeutet, dass beim Seitendesign folgende Fragen beantwortet werden muessen:
|
||||
|
||||
- Was ist die wichtigste Information auf der aktuellen Seite?
|
||||
- Was ist die Hauptaufgabe des Nutzers?
|
||||
- Welche Operation am auffaelligsten sein sollte und welche in den Hintergrund gehoert
|
||||
|
||||
Wenn du dich an Apple orientierst, kannst du besonders folgende Aspekte uebernehmen:
|
||||
|
||||
- Die Informationen auf dem ersten Bildschirm sollten nicht zu fragmentiert sein; der Kerninhalt steht im Fokus
|
||||
- Ordnung durch Freiraum, Schriftgroessen und Gruppierung schaffen, statt viele Rahmen zu stapeln
|
||||
- Nicht alle Buttons sollten stark hervorgehoben sein; nur die wichtigsten Aktionen sollten am auffaelligsten sein
|
||||
|
||||
### 2.3 Von Material lernen: Klarere Seitenstruktur
|
||||
|
||||
Material Design eignet sich besonders gut, um zu lernen, "wie Seiten Aufgabenstroeme organisieren".
|
||||
|
||||
Viele seiner Komponenten- und Layoutrichtlinien zielen darauf ab, Folgendes klarzustellen:
|
||||
|
||||
- Ob eine Seite zum Durchsuchen oder zur Aufgabenausfuehrung dient
|
||||
- Ob die aktuelle Seite Nutzer zum Lesen, Auswaehlen oder Absenden veranlassen soll
|
||||
- Welche Elemente auf einer Seite stabil wiederkehren sollten und welche sich dynamisch an den Kontext anpassen
|
||||
|
||||
Wenn du dich an Material orientierst, kannst du besonders folgende Aspekte uebernehmen:
|
||||
|
||||
- Seitenbereiche klar strukturieren, Modulverantwortlichkeiten eindeutig definieren
|
||||
- Navigation, Inhalts- und Aktionsbereiche sauber trennen
|
||||
- Unterschiedliche Button-Stile entsprechen unterschiedlichen Operationsprioritaeten
|
||||
|
||||
### 2.4 Von Fluent lernen: Komponentengrenzen und Button-Hierarchie
|
||||
|
||||
Fluent 2 eignet sich besonders fuer Backends, Werkzeug-Produkte und komplexe Formularsysteme. Das Lernenswerteste daran ist, dass es dir direkt sagt: "Konzepte nicht vermischen."
|
||||
|
||||
Es schreibt beispielsweise ausdruecklich: Wenn du "collect information" moechtest, solltest du nicht weiterhin `menu` verwenden, sondern `select`, `dropdown` oder `combobox` in Betracht ziehen.
|
||||
|
||||
Dieser Satz ist sehr wichtig, da er das, was viele Menschen fuer "ungefaehr gleich" halten, aufbrechen laesst.
|
||||
|
||||
Fluent 2 legt auch grossen Wert auf:
|
||||
|
||||
- Aktionsebenen
|
||||
- Komponenten-Semantikgrenzen
|
||||
- Klarheit in dichten Informationsszenarien
|
||||
|
||||
Wenn du dich an Fluent orientierst, um Buttons zu gestalten, kannst du besonders folgende Aspekte uebernehmen:
|
||||
|
||||
- `Primary button` fuer die aktuell wichtigste Aktion
|
||||
- `Secondary button` fuer unterstuetzende Aktionen
|
||||
- `Subtle` und `Transparent` als schwach betonte Buttons fuer Aktionen, die den Hauptprozess nicht stoeren sollten
|
||||
- Je mehr Buttons auf einer Seite, desto wichtiger ist die Kontrolle der visuellen Prioritaet
|
||||
|
||||
### 2.5 Von Atlassian lernen: Systematisches Verwalten von Seiten und Buttons
|
||||
|
||||
Das Atlassian Design System eignet sich besonders fuer den Fall, dass "ein Team viele Seiten erstellt". Es betont:
|
||||
|
||||
- foundations als gemeinsame Basis
|
||||
- tokens als Methode zur einheitlichen visuellen Entscheidungsfindung
|
||||
- components als wiederholt verwendete Interaktionsbausteine
|
||||
|
||||
Wenn du dich an Atlassian orientierst, um Seiten und Buttons zu gestalten, ist das Wertvollste:
|
||||
|
||||
- Button-Groesse, Farbe, Abrundung und Abstaende als einheitliche Regeln definieren
|
||||
- Den Rhythmus des Seitenlayouts festigen
|
||||
- Sicherstellen, dass verschiedene Seiten trotz unterschiedlicher Inhalte eine einheitliche Struktursprache verwenden
|
||||
|
||||
## 3. Worauf man beim Entwerfen von Seiten aus den Richtlinien absehen sollte
|
||||
|
||||
Wenn du ein Designsystem betrachtest, frage nicht zuerst "Sieht diese Seite gut aus?", sondern stelle zunaechst die folgenden Fragen.
|
||||
|
||||
### 3.1 Erster Blick auf die Seite: Ist die Hierarchie klar?
|
||||
|
||||
Eine Seite sollte in der Regel mindestens drei Ebenen haben:
|
||||
|
||||
- **Hauptinformation**: Der wichtigste Inhalt der aktuellen Seite
|
||||
- **Unterstuetzende Informationen**: Inhalte zum besseren Verstaendnis oder zur Ergaenzung
|
||||
- **Sekundaere Aktionen**: Aktionen, die die Hauptaufgabe nicht stoeren sollten
|
||||
|
||||
Wenn die drei Ebenen nicht deutlich getrennt sind, wirkt die Seite "alles wichtig" -- was gleichbedeutend mit "nichts ist wichtig" ist.
|
||||
|
||||
### 3.2 Seitenlayout: Dient es der Aufgabe oder stapelt es nur Module?
|
||||
|
||||
Beim Durcharbeiten der Richtlinien solltest du besonders darauf achten:
|
||||
|
||||
- Ob der Titelbereich das Seitenziel klar benennt
|
||||
- Ob der Hauptinhaltsbereich um die Aufgabe herum organisiert ist
|
||||
- Ob die Aktions-Buttons nah an den zugehoerigen Inhalten platziert sind
|
||||
- Ob unwichtige Informationen abgeschwaecht wurden
|
||||
|
||||
### 3.3 Haben die Aktionen auf der Seite eine Prioritaet?
|
||||
|
||||
Viele Seiten haben auf den ersten Blick 6 Buttons, und jeder sieht wie ein CTA aus -- das ist ein klassischer Hierarchieverlust.
|
||||
|
||||
Sinnvoller ist:
|
||||
|
||||
- Ein Bereich hat in der Regel nur eine Hauptaktion
|
||||
- Sekundaere Aktionen koennen mit Umrandungen, Text-Buttons oder schwaecherem Stil dargestellt werden
|
||||
- Risikoaktionen sollten nicht genauso aussehen wie die Hauptaktion
|
||||
|
||||
## 4. Worauf man beim Entwerfen von Buttons aus den Richtlinien absehen sollte
|
||||
|
||||
Buttons sind der am leichtesten "beilaeufig gestaltete" Teil, aber auch der Teil, der am meisten darueber verraet, ob ein System ausgereift ist.
|
||||
|
||||
### 4.1 Buttons zunaechst nach "Semantik" unterscheiden, dann nach "Stil"
|
||||
|
||||
Denke nicht zuerst "blauer oder schwarzer Button", sondern darueber, welche Rolle dieser Button spielt.
|
||||
|
||||
Haeufige Button-Rollen koennen wie folgt kategorisiert werden:
|
||||
|
||||
| Button-Typ | Funktion | Haeufige Stilstrategie |
|
||||
| :--- | :--- | :--- |
|
||||
| **Primary** | Die wichtigste Aktion im aktuellen Bereich | Ausgefuellt, hoher Kontrast, am auffaelligsten |
|
||||
| **Secondary** | Unterstuetzende Aktionen | Umrandet oder eine Stufe schwaecher betont |
|
||||
| **Tertiary / Text** | Schwache Aktionen | Text oder geringer visueller Anteil |
|
||||
| **Destructive** | Risikoaktionen wie Loeschen, Deaktivieren, Leeren | Warnfarbe oder eindeutiger Risiko-Stil |
|
||||
| **Icon button** | Lokale Werkzeugaktionen | Kompakt, nah am Kontext |
|
||||
|
||||
### 4.2 Nicht zu viele Primary Buttons auf einer Seite
|
||||
|
||||
Das ist die haeufigste Falle fuer Anfaenger.
|
||||
|
||||
Wenn 4 Haupt-Buttons auf einer Seite sind, gibt es faktisch keinen Haupt-Button. Die Bedeutung eines Haupt-Buttons besteht ja gerade darin, "dem Nutzer zu sagen, was er jetzt am besten tun sollte".
|
||||
|
||||
Du kannst die gemeinsame Praxis vieler Designsysteme uebernehmen:
|
||||
|
||||
- Ein Hauptbereich hat in der Regel nur einen Haupt-Button
|
||||
- Abbrechen, Zurueck und Schliessen konkurrieren in der Regel nicht auf derselben Ebene mit dem Bestaetigungs-Button
|
||||
- Weitere Aktionen in sekundaere Buttons oder Menus auslagern
|
||||
|
||||
### 4.3 Buttons muessen Zustandsaenderungen ausdruecken koennen
|
||||
|
||||
Designrichtlinien beschreiben Button-Zustaende in der Regel sehr detailliert:
|
||||
|
||||
- Standardzustand
|
||||
- Hover-Zustand
|
||||
- Fokus-Zustand
|
||||
- Deaktivierter Zustand
|
||||
- Ladezustand
|
||||
- Gefahrenzustand
|
||||
|
||||
Das ist wichtig, da ein Button kein statisches Bild ist, sondern eines der am haeufigsten ausgeloesten Steuerelemente waehrend der Benutzerinteraktion.
|
||||
|
||||
### 4.4 Button-Beschriftung gehoert ebenfalls zum Design
|
||||
|
||||
Die Button-Beschriftung ist nicht nur eine "Textfrage" -- sie beeinflusst das Nutzerverstaendnis direkt.
|
||||
|
||||
Beispiele:
|
||||
|
||||
- `Speichern`
|
||||
- `Aenderungen speichern`
|
||||
- `Sofort veroeffentlichen`
|
||||
- `Projekt loeschen`
|
||||
- `In den Papierkorb verschieben`
|
||||
|
||||
Diese Beschriftungen vermitteln vollkommen unterschiedliche psychologische Erwartungen. Ausgereifte Richtlinien verlangen in der Regel, dass Button-Labels die Aktion klar ausdruecken, anstatt vage Begriffe zu verwenden.
|
||||
|
||||
## 5. Eine sehr praktische Checkliste fuer Seiten- und Button-Design
|
||||
|
||||
Wenn du selbst eine Seite entwirfst, kannst du zunaechst diese Checkliste schnell durchgehen:
|
||||
|
||||
### Seiten-Checkliste
|
||||
|
||||
- Ob der Seitentitel die aktuelle Aufgabe klar beschreibt
|
||||
- Ob die wichtigste Information auf dem ersten Bildschirm sofort sichtbar ist
|
||||
- Ob die Seite nach dem Aufgabenfluss und nicht nach dem organisiert ist, was einem gerade einfaellt
|
||||
- Ob es in einem Bereich nur eine Hauptaktion gibt
|
||||
- Ob unwichtige Inhalte angemessen abgeschwaecht wurden
|
||||
|
||||
### Button-Checkliste
|
||||
|
||||
- Ist dieser Button eine Haupt- oder Nebention?
|
||||
- Warum sollte dieser Button auffaelliger sein als die anderen?
|
||||
- Gibt es zu viele Haupt-Buttons auf der Seite?
|
||||
- Sind Gefahrenaktionen eindeutig markiert?
|
||||
- Ist die Button-Beschriftung konkret genug?
|
||||
|
||||
## 6. Wie man AI dazu bringt, sich an den Richtlinien anderer zu orientieren
|
||||
|
||||
Dieser Abschnitt ist am praktischsten.
|
||||
|
||||
Viele Menschen sagen zu AI beim Entwerfen von Seiten nur:
|
||||
|
||||
```md
|
||||
Mach mir eine Einstellungsseite, die etwas hochwertiger aussehen soll, im Apple-Stil
|
||||
```
|
||||
|
||||
Solche Prompts sind zu vage -- AI kann am Ende meist nur "weisser Hintergrund, abgerundete Ecken, Schatten" imitieren.
|
||||
|
||||
Fuer Anfaenger ist der praktischste Ansatz nicht, selbst eine lange Zusammenfassung zu schreiben, sondern die **Schluesselsaetze aus dem Originaltext der Richtlinie** direkt in AI einzufuegen.
|
||||
|
||||
Das hat zwei Vorteile:
|
||||
|
||||
- Du musst die Designphilosophie nicht selbst "uebersetzen"
|
||||
- AI kann die Seite und die Buttons leichter gemaess den offiziellen Definitionen verstehen
|
||||
|
||||
### 6.1 Beispiel 1: AI bitten, eine Einstellungsseite nach Apple-Design zu erstellen
|
||||
|
||||
Zunaechst ein Originalzitat von Apple:
|
||||
|
||||
> ["Establish a clear visual hierarchy..."](https://developer.apple.com/design/human-interface-guidelines/)
|
||||
|
||||
Du kannst AI direkt so ansprechen:
|
||||
|
||||
```md
|
||||
Beziehe dich auf diesen Satz aus den Apple Human Interface Guidelines:
|
||||
"Establish a clear visual hierarchy..."
|
||||
|
||||
Erstelle eine Kontosicherheit-Einstellungsseite.
|
||||
Die Seitenhierarchie soll klar sein, wichtige Informationen zuerst, ordentlich gruppiert.
|
||||
```
|
||||
|
||||
Der Punkt dabei ist: Du musst nicht viel selbst erklaeren -- einfach den Originaltext von Apple einfuegen.
|
||||
|
||||
### 6.2 Beispiel 2: AI bitten, Backend-Buttons nach Fluent zu gestalten
|
||||
|
||||
Zunaechst ein Originalzitat von Fluent:
|
||||
|
||||
> ["Only use one primary button in a layout..."](https://fluent2.microsoft.design/components/web/react/core/button/usage)
|
||||
|
||||
Du kannst AI direkt so ansprechen:
|
||||
|
||||
```md
|
||||
Beziehe dich auf diesen Satz aus Fluent 2:
|
||||
"Only use one primary button in a layout..."
|
||||
|
||||
Gestalte die Buttons fuer ein Team-Management-Backend.
|
||||
Der "Mitglied hinzufuegen"-Button am auffaelligsten, Export, Filter, weitere Aktionen schwaecher, und der Loeschen-Button gesondert hervorheben.
|
||||
```
|
||||
|
||||
Dieser Satz eignet sich hervorragend fuer Anfaenger, da er AI direkt sagt: In einem Bereich nicht zu viele Haupt-Buttons platzieren.
|
||||
|
||||
### 6.3 Beispiel 3: AI bitten, sich gleichzeitig an Seiten- und Button-Richtlinien zu orientieren
|
||||
|
||||
Du kannst auch zwei Originalzitate gleichzeitig einfuegen und AI bitten, sich sowohl an der Seiten- als auch an der Button-Richtlinie zu orientieren:
|
||||
|
||||
> Apple: ["Establish a clear visual hierarchy..."](https://developer.apple.com/design/human-interface-guidelines/)
|
||||
>
|
||||
> Fluent: ["Only use one primary button in a layout..."](https://fluent2.microsoft.design/components/web/react/core/button/usage)
|
||||
|
||||
Dann schreibst du einfach:
|
||||
|
||||
```md
|
||||
Beziehe dich auf die folgenden zwei Designrichtlinien-Originalsaetze:
|
||||
Apple: "Establish a clear visual hierarchy..."
|
||||
Fluent: "Only use one primary button in a layout..."
|
||||
|
||||
Erstelle eine Projektdetailseite.
|
||||
Die Seite enthaelt Projektbeschreibung, Mitglieder, letzte Aktivitaeten und einen Einstellungseinstieg.
|
||||
Die Seitenhierarchie soll klar sein, nur einen Haupt-Button behalten, die anderen schwaecher darstellen.
|
||||
```
|
||||
|
||||
Dieser Ansatz eignet sich besonders fuer Anfaenger, da du nur den Originaltext kopieren und ein bis zwei Saetze eigener Anforderungen hinzufuegen musst.
|
||||
|
||||
## 7. Wie man AI dazu bringt, sich an Button-Richtlinien zu orientieren, um direkt Button-Designs zu generieren
|
||||
|
||||
Wenn du zunaechst nur Buttons erstellen moechtest, kannst du auch direkt die Originaltexte der Button-Richtlinien einfuegen.
|
||||
|
||||
Beispielsweise ist die Definition von Atlassian fuer Buttons sehr kurz:
|
||||
|
||||
> ["A button triggers an event or action."](https://atlassian.design/components/button/)
|
||||
|
||||
Du kannst AI so fragen:
|
||||
|
||||
```md
|
||||
Beziehe dich auf diesen Satz von Atlassian:
|
||||
"A button triggers an event or action."
|
||||
|
||||
Gestalte einen Satz von Backend-Button-Stilen.
|
||||
Ich moechte einen Haupt-Button, einen Neben-Button und einen Loeschen-Button, und erzaehle mir bitte, wo jeweils welcher verwendet wird.
|
||||
```
|
||||
|
||||
Diese Art von Prompt eignet sich besonders fuer Anfaenger -- im Grunde heisst es "Originaltext einfuegen + Anforderungen nennen".
|
||||
|
||||
## 8. Zusammenfassung
|
||||
|
||||
Sich an UI-Designrichtlinien zu orientieren, wenn man Seiten und Buttons entwirft, heisst nicht "auszusehen wie jemand anderes", sondern folgende Dinge zu lernen:
|
||||
|
||||
1. Seiten mit Hierarchie organisieren, anstatt Inhalte einfach zu stapeln
|
||||
2. Operationsprioritaeten durch Button-Stufung ausdruecken, anstatt alle Buttons gleich aufdringlich zu machen
|
||||
3. Sich bei der Gestaltung an den Definitionen, Grenzen und Beurteilungskriterien der Designrichtlinien orientieren
|
||||
4. Wenn AI sich an den Richtlinien anderer orientiert, sollte sie sich an "Prinzipien und Struktur" orientieren, nicht nur an der Oberflaeche
|
||||
|
||||
Wenn du Richtlinien so verwendest, referenzierst du nicht nur einen Stil, sondern eine ausgereifte Design-Denkweise.
|
||||
|
||||
---
|
||||
|
||||
## Referenzmaterialien
|
||||
|
||||
Die folgenden Links stammen alle von offiziellen Designsystemen oder offizieller Dokumentation:
|
||||
|
||||
- Apple Human Interface Guidelines: [Overview](https://developer.apple.com/design/human-interface-guidelines/)
|
||||
- Apple Human Interface Guidelines: [Menus](https://developer.apple.com/design/human-interface-guidelines/menus)
|
||||
- Apple Human Interface Guidelines: [Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts)
|
||||
- Apple Human Interface Guidelines: [Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons)
|
||||
- Apple Archive: [How Menus Work](https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/MenuList/Articles/HowMenusWork.html)
|
||||
- Apple Archive: [Managing Pop-Up Buttons and Pull-Down Lists](https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/MenuList/Articles/ManagingPopUpItems.html)
|
||||
- Material Design: [Buttons overview](https://m3.material.io/components/buttons/overview)
|
||||
- Material Design: [Menus](https://m1.material.io/components/menus.html)
|
||||
- Microsoft Fluent 2: [Start designing](https://fluent2.microsoft.design/get-started/design)
|
||||
- Microsoft Fluent 2: [Menu usage](https://fluent2.microsoft.design/components/web/react/core/menu/usage)
|
||||
- Microsoft Fluent 2: [Button usage](https://fluent2.microsoft.design/components/web/react/core/button/usage)
|
||||
- Atlassian Design System: [Foundations](https://atlassian.design/foundations/)
|
||||
- Atlassian Design System: [Button](https://atlassian.design/components/button/)
|
||||
@@ -0,0 +1,3 @@
|
||||
# Deine erste moderne App erstellen - UI-Design
|
||||
|
||||
> Dieses Kapitel wird derzeit erstellt. Bitte schaue spaeter vorbei...
|
||||
+133
-66
@@ -1,126 +1,193 @@
|
||||
# Full-Stack-Entwicklung
|
||||
# Junior- und Mittelstufen-Entwicklung
|
||||
|
||||
Willkommen in der Phase **Full-Stack-Entwicklung**! Hier wirst du dich tief mit der Full-Stack-Entwicklung beschäftigen, Frontend-Komponentisierung, Datenbankdesign, Backend-API-Entwicklung und Deployment beherrschen.
|
||||
Willkommen in der Phase **Junior- und Mittelstufen-Entwicklung**! Hier wirst du dich tief mit der Full-Stack-Entwicklung beschaeftigen, Frontend-Komponentisierung, Datenbankdesign, Backend-API-Entwicklung und Deployment beherrschen.
|
||||
|
||||
## Was du lernen wirst
|
||||
|
||||
### Frontend-Entwicklung
|
||||
|
||||
Beherrsche moderne Frontend-Entwicklung und lerne die Verwendung von Komponentenbibliotheken und Designtools:
|
||||
|
||||
<NavGrid>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Frontend 0: Verwendung von Lovart für Assets"
|
||||
description="Lerne, wie du KI-Tools wie Lovart verwenden kannst, um schnell hochwertige Spiel-Assets und UI-Ressourcen zu generieren"
|
||||
href="/de-de/stage-2/frontend/lovart-assets/"
|
||||
title="Von Lovart ausgehend: deinen eigenen Asset-Produktions-Agenten aufbauen"
|
||||
description="Von Grund auf Nanobanana und Lovart nutzen, um hochwertige Design-Assets im Batch zu generieren, und einen Zeichen-Agenten mit Intent-Erkennung erstellen"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Frontend 1: Einführung in Figma und MasterGo"
|
||||
description="Beherrsche die Grundoperationen professioneller UI-Designtools und den Workflow vom Design zum Code"
|
||||
href="/de-de/stage-2/frontend/figma-mastergo/"
|
||||
title="Einfuehrung in Figma und MasterGo"
|
||||
description="Die Grundoperationen professioneller UI-Designtools beherrschen und den Workflow vom Design zum Code"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Frontend 2: Erstelle deine erste moderne App - UI-Design"
|
||||
description="Entwerfe eine moderne Webanwendungsoberfläche von Grund auf und übe UI-Designprinzipien"
|
||||
href="/de-de/stage-2/frontend/ui-design/"
|
||||
title="Deine erste moderne App erstellen - UI-Design"
|
||||
description="Die Grundlagen des UI-Designs fuer moderne Anwendungen lernen"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Frontend 3: UI-Design-Richtlinien und Multi-Produkt-UI"
|
||||
description="Lerne die führenden UI-Design-Richtlinien kennen, um Konsistenz und Ästhetik des Produktdesigns zu verbessern"
|
||||
href="/de-de/stage-2/frontend/multi-product-ui/"
|
||||
title="Seiten und Buttons nach UI-Designrichtlinien entwerfen"
|
||||
description="Die fuehrenden UI-Designrichtlinien kennenlernen, um klares Seiten- und Button-Hierarchie-Design zu lernen"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Frontend 4: Lass uns Hogwarts-Porträts erstellen"
|
||||
description="Praxisprojekt: Erstelle eine interaktive Hogwarts-Porträt-Anwendung mit KI-generierten Bildern"
|
||||
href="/de-de/stage-2/frontend/llm-skills-beautiful/"
|
||||
title="Oberflaechen mit LLM und Skills schoen gestalten"
|
||||
description="Mit Prompts und Plugins in der Praxis schoene und einzigartige Oberflaechen durch KI generieren"
|
||||
/>
|
||||
<NavCard
|
||||
href="/de-de/stage-2/frontend/hogwarts-portraits/"
|
||||
title="Gemeinsam Hogwarts-Portraets erstellen"
|
||||
description="Praxisprojekt: KI-generierte Bilder nutzen und eine interaktive Hogwarts-Portraet-Anwendung erstellen"
|
||||
/>
|
||||
<NavCard
|
||||
href="/de-de/stage-2/frontend/design-to-code/"
|
||||
title="Vom Design-Prototyp zum Projektcode"
|
||||
description="Lernen, wie Prototypen aus Designtools in echten Frontend-Code umgewandelt werden, der im Browser laeuft"
|
||||
/>
|
||||
<NavCard
|
||||
href="/de-de/stage-2/frontend/modern-component-library/"
|
||||
title="Deine Oberflaeche mit einer modernen Komponentenbibliothek aktualisieren"
|
||||
description="Lernen, Komponentenbibliotheken zu nutzen, um schnell professionelle Oberflaechen zu erstellen"
|
||||
/>
|
||||
</NavGrid>
|
||||
|
||||
### Backend-Entwicklung
|
||||
|
||||
### Backend und Full-Stack
|
||||
API-Design, Datenbankverwaltung und Anwendungs-Deployment-Strategien lernen:
|
||||
|
||||
Lerne API-Design, Datenbankverwaltung und Anwendungs-Deployment-Strategien:
|
||||
<NavGrid>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Backend 1: Was ist eine API"
|
||||
description="Verstehe das Kernkonzept von APIs, die Brücke zwischen Frontend und Backend"
|
||||
href="/de-de/stage-2/backend/git-workflow/"
|
||||
title="Git und GitHub verwenden lernen"
|
||||
description="Die Kernoperationen und Kollaborations-Workflows des Git-Versionskontrollsystems beherrschen"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Backend 2: Von der Datenbank zu Supabase"
|
||||
description="Beherrsche die Grundlagen relationaler Datenbanken und lerne die Verwendung von Supabase, einer modernen BaaS-Plattform"
|
||||
href="/de-de/stage-2/backend/database-supabase/"
|
||||
title="Von der Datenbank zu Supabase"
|
||||
description="Die Grundlagen relationaler Datenbanken beherrschen und die Verwendung von Supabase als moderne BaaS-Plattform lernen"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Backend 3: KI-unterstützter Schnittstellencode und Dokumentation"
|
||||
description="Verwende KI, um bei der Generierung von Backend-Schnittstellencode und standardisierter API-Dokumentation zu helfen"
|
||||
href="/de-de/stage-2/backend/ai-interface-code/"
|
||||
title="Backend-Schnittstellendesign und -entwicklung"
|
||||
description="KI-unterstuetzt Backend-Schnittstellencode und standardisierte API-Dokumentation generieren, die Entwicklungseffizenz steigern"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Backend 4: Git-Workflow"
|
||||
description="Beherrsche die Kernoperationen und Kollaborations-Workflows des Git-Versionskontrollsystems"
|
||||
href="/de-de/stage-2/backend/zeabur-deployment/"
|
||||
title="Deinen Produktprototyp veroeffentlichen"
|
||||
description="Lernen, wie man Full-Stack-Anwendungen schnell mit Zeabur in der Cloud bereitstellt"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Backend 5: Zeabur-Deployment"
|
||||
description="Lerne, wie du deine Full-Stack-Anwendungen schnell in der Cloud mit Zeabur bereitstellst"
|
||||
href="/de-de/stage-2/backend/modern-cli/"
|
||||
title="Von der IDE zu CLI KI-Programmierwerkzeugen"
|
||||
description="Moderne CLI-Tools erkunden, um die Entwicklungserfahrung in Befehlszeilenumgebungen zu verbessern"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Backend 6: Moderne CLI-Entwicklungstools"
|
||||
description="Erkunde moderne CLI-Tools, um die Entwicklungserfahrung in Befehlszeilenumgebungen zu verbessern"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Backend 7: Integration von Stripe-Zahlungssystemen"
|
||||
description="Praxis: Integriere Stripe-Zahlungsfunktionalität in deine Anwendung zur Monetarisierung"
|
||||
href="/de-de/stage-2/backend/stripe-payment/"
|
||||
title="Wie man Stripe und andere Zahlungssysteme integriert"
|
||||
description="Praxis: Stripe-Zahlungsfunktionalitaet in deine Anwendung integrieren und kommerzielle Monetarisierung realisieren"
|
||||
/>
|
||||
</NavGrid>
|
||||
|
||||
### Grossaufgaben
|
||||
|
||||
### Aufgaben
|
||||
Die vorherigen Kapitel behandeln die "Bauteile", die Grossaufgaben behandeln das "Zusammenbauen der Bauteile zu einem lauffaehigen, demonstrablen und veroeffentlichbaren Produkt".
|
||||
|
||||
Es wird empfohlen, die Reihenfolge **Grossaufgabe 1 -> Grossaufgabe 2** zu befolgen:
|
||||
|
||||
- **Grossaufgabe 1** fuehrt dich zuerst durch die haeufigste Hauptkette moderner SaaS: Login, Generierung, Datenbank, Zahlung, Admin-Panel.
|
||||
- **Grossaufgabe 2** bringt dich dann in Szenarien, die eher Geschaeftssystemen aehneln: Rollenberechtigungen, Fragenbank, Pruefungen, Abgabeprotokolle, Admin-Konsole.
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A["Frontend-Seiten und Komponenten"] --> B["Datenbank und Schnittstellen"]
|
||||
B --> C["Grossaufgabe 1<br/>Copywriting-Generierungs-SaaS"]
|
||||
C --> D["Zahlung / Deployment / Admin-Verwaltung"]
|
||||
D --> E["Grossaufgabe 2<br/>Online-Pruefungssystem"]
|
||||
E --> F["Vollstaendiges Full-Stack-Portfolio"]
|
||||
```
|
||||
|
||||
Wenn du nicht weisst, womit du anfangen sollst, kannst du die folgende Vergleichstabelle als Referenz nutzen:
|
||||
|
||||
| Projekt | Was du hauptsaechlich ueben wirst | Am besten geeignet fuer | Endabgabe |
|
||||
|------|------|------|------|
|
||||
| Grossaufgabe 1: Copywriting-Generierungs-Website | SaaS-Seitenstruktur, Benutzer-Login, KI-Generierung, Stripe-Zahlung, Admin-Panel | Personen, die zum ersten Mal eine vollstaendige kommerzielle Website erstellen | Ein SaaS-Prototyp mit Registrierung, Generierung, Zahlung und Verwaltung |
|
||||
| Grossaufgabe 2: Online-Pruefungs- und Managementsystem | Rollenberechtigungen, Fragenbank-Modellierung, Pruefungsablauf, Abgabeprotokolle, Korrektur und Statistik | Personen, die ein "Geschaeftssystem" wirklich vervollstaendigen moechten | Eine Pruefungsplattform mit Studenten- und Admin-Ansicht |
|
||||
|
||||
Unabhaengig davon, welche Aufgabe du waehlst, wird empfohlen, mindestens diese 3 Abgabeprodukte vorzubereiten:
|
||||
|
||||
- Ein lauffaehiges Projekt-Repository
|
||||
- Ein zugaenglicher Demonstrationslink
|
||||
- Ein README und ein Demovideo
|
||||
|
||||
Festige deine Full-Stack-Entwicklungsfähigkeiten durch praktische Projekte:
|
||||
<NavGrid>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Aufgabe 1: Erstelle deine erste moderne App - Full-Stack"
|
||||
description="Wende das Gelernte umfassend an, um unabhängig eine vollständig funktionsfähige Full-Stack-Anwendung abzuschließen"
|
||||
href="/de-de/stage-2/assignments/copywriting-platform-supabase/"
|
||||
title="Grossaufgabe 1: Erste SaaS Full-Stack-Anwendung - Copywriting-Generierungs-Website"
|
||||
description="Von Grund auf einen KI-Marketing-Copywriting-Arbeitsbereich erstellen, einschliesslich Login, Generierung, Zahlung und Admin-Panel"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="Aufgabe 2: Moderne Frontend-Komponentenbibliothek + Trae"
|
||||
description="Verwende moderne Komponentenbibliotheken mit Trae IDE, um effizient komplexe Frontend-Oberflächen zu erstellen"
|
||||
href="/de-de/stage-2/assignments/exam-management-express/"
|
||||
title="Grossaufgabe 2: Online-Pruefungs- und Managementsystem"
|
||||
description="Ein Online-Pruefungssystem erstellen, das automatische Fragenerstellung, Pruefungsablauf und Admin-Verwaltung unterstuetzt"
|
||||
/>
|
||||
</NavGrid>
|
||||
|
||||
Wenn du die beiden Hauptprojekte bereits abgeschlossen hast oder dein Portfolio nach deinem eigenen technischen Schwerpunkt erstellen moechtest, kannst du aus den folgenden erweiterten Themen eines fuer eine tiefere Bearbeitung auswaehlen:
|
||||
|
||||
### KI-Fähigkeitserweiterung
|
||||
<NavGrid>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="KI 1: Einführung in Dify und Wissensdatenbank-Integration"
|
||||
description="Lerne, wie du KI-Anwendungen mit Dify erstellst und private Wissensdatenbanken integrierst"
|
||||
href="/de-de/stage-2/assignments/modern-landing-page/"
|
||||
title="Erweiterte Aufgabe: Modernes Web-Landing-Page-Engineering"
|
||||
description="Wertausdruck, Konversionspfad, CTA-Design und grundlegendes Tracking ueben und eine Seite erstellen, die wirklich Traffic aufnehmen kann"
|
||||
/>
|
||||
<NavCard
|
||||
href="#"
|
||||
title="KI 2: KI-Wörterbuch-Abfrage und multimodale API-Integration"
|
||||
description="Erkunde weitere KI-Fähigkeiten und integriere multimodale APIs wie Vision und Sprache"
|
||||
href="/de-de/stage-2/assignments/custom-dify-agent-platform/"
|
||||
title="Erweiterte Aufgabe: Dify-aehnliche Agenten-Orchestrierungsplattform"
|
||||
description="Agentenverwaltung, Konversation, Protokolle und Zugriffskontrolle implementieren und eine minimal nutzbare KI-Plattform erstellen"
|
||||
/>
|
||||
<NavCard
|
||||
href="/de-de/stage-2/assignments/travel-planning-agent-platform/"
|
||||
title="Erweiterte Aufgabe: Intelligente Reiseplanungs-Agent-Orchestrierungsplattform"
|
||||
description="Rund um strukturierte Eingabe, Agenten-Orchestrierung und Verwaltung historischer Plaene ein ausfuehrbares KI-Reiseplanungsprodukt erstellen"
|
||||
/>
|
||||
<NavCard
|
||||
href="/de-de/stage-2/assignments/movie-recommendation-springboot/"
|
||||
title="Erweiterte Aufgabe: Spring Boot Filmempfehlungssystem"
|
||||
description="Spring Boot, Bewertungs-/Favoriten- und erklaerbare Empfehlungen kombinieren, um einen vollstaendigen Empfehlungssystem-Prototyp zu erstellen"
|
||||
/>
|
||||
<NavCard
|
||||
href="/de-de/stage-2/assignments/simple-grocery-microservices/"
|
||||
title="Erweiterte Aufgabe: Lebensmittel-E-Commerce-Microservice-System"
|
||||
description="Service-Aufteilung, Gateway-Weiterleitung, Bestands- und Bestellkooperation ueben und den Engineering-Ansatz von Monolith zu Microservices erleben"
|
||||
/>
|
||||
<NavCard
|
||||
href="/de-de/stage-2/assignments/traffic-data-visualization-go/"
|
||||
title="Erweiterte Aufgabe: Go Verkehrsdaten-Analyse- und Visualisierungsplattform"
|
||||
description="Von der Datenaufnahme ueber Fensteraggregation bis hin zum Trend-Dashboard und Alarmen einen vollstaendigen Datenprodukt-Prototyp erstellen"
|
||||
/>
|
||||
</NavGrid>
|
||||
|
||||
### KI-Faehigkeitserweiterung
|
||||
|
||||
## Für wen es ist
|
||||
<NavGrid>
|
||||
<NavCard
|
||||
href="/de-de/stage-2/ai-capabilities/dify-knowledge-base/"
|
||||
title="Dify Einfuehrung und Wissensdatenbank-Integration"
|
||||
description="Lernen, wie man KI-Anwendungen mit Dify erstellt und private Wissensdatenbanken integriert"
|
||||
/>
|
||||
</NavGrid>
|
||||
|
||||
- Entwickler mit einiger Programmiergrundlage, die systematisch Full-Stack-Entwicklung lernen möchten
|
||||
- Lernende, die vom Produktmanager zum Full-Stack-Ingenieur wechseln möchten
|
||||
- Junior- bis Mittelstufen-Entwickler, die moderne Entwicklungstools und Workflows beherrschen möchten
|
||||
- Unternehmer, die unabhängig vollständige Produkte entwickeln möchten
|
||||
## Fuer wen ist dies geeignet
|
||||
|
||||
- Entwickler mit gewisser Programmiergrundlage, die systematisch Full-Stack-Entwicklung lernen moechten
|
||||
- Lernende, die vom Produktmanager zum Full-Stack-Ingenieur wechseln moechten
|
||||
- Junior- bis Mittelstufen-Entwickler, die moderne Entwicklungstools und Workflows beherrschen moechten
|
||||
- Unternehmer, die unabhaengig vollstaendige Produkte entwickeln moechten
|
||||
|
||||
## Voraussetzungen
|
||||
|
||||
- Abschluss der Phase "Anfänger und Produktprototyp" oder gleichwertige Grundkenntnisse
|
||||
- Verständnis grundlegender HTML/CSS/JavaScript-Konzepte
|
||||
- Vorkenntnisse über KI-Programmierungstools
|
||||
- Abschluss der Phase "Anfaenger und Produktprototyp" oder gleichwertige Grundkenntnisse
|
||||
- Verstaendnis grundlegender HTML/CSS/JavaScript-Konzepte
|
||||
- Grundkenntnisse ueber KI-Programmierungstools
|
||||
|
||||
Bereit, dich tief in die Full-Stack-Entwicklung zu vertiefen? Klicke auf die linke Navigation, um mit dem Lernen zu beginnen!
|
||||
Bereit, dich in die Full-Stack-Entwicklung zu vertiefen? Klicke auf die linke Navigation, um mit dem Lernen zu beginnen!
|
||||
|
||||
Reference in New Issue
Block a user