Projekte für Studierende der Natur- und Ingenieurwissenschaften
Geeignet für Benutzer mit Programmiergrundlagen. Durch API-Dienste und die Entwicklung von Full-Stack-Anwendungen können Sie ein tiefes Verständnis für die praktische Anwendung von KI-Tools in der Softwareentwicklung gewinnen und die Best Practices für die Entwicklung auf Unternehmensniveau beherrschen.
Projekt 1: Entwicklung des API-Dienstes
Projektübersicht
Analyse der Technologieauswahl: Warum diese Werkzeugkombination wählen?
Cursor Agent: Architekturdesign und Codegenerierung
- • Generierung der Projektstruktur: Der Agent kann Anforderungen verstehen und automatisch eine sinnvolle Projektstruktur erzeugen
- • Architekturdesign：Hilft bei der Gestaltung von Architekturen wie API-Routen, Middleware, Fehlerbehandlung usw.
- • Codegenerierung: Vollständigen CRUD-Operationscode basierend auf der Anforderungsbeschreibung generieren
- • Best Practices: RESTful-Designprinzipien, Fehlerbehandlungsmuster usw. automatisch anwenden
GitHub Copilot: Codevervollständigung in Echtzeit
- • Code-Vervollständigung：Funktionsnamen oder Kommentare eingeben, um die Code-Implementierung automatisch zu vervollständigen
- • Kontextverständnis: den aktuellen Codekontext verstehen und relevante Vorschläge machen
- • Schnelle Iteration: Die Erstellung von Doppelcode reduzieren und die Entwicklungsgeschwindigkeit erhöhen
- • Mehrsprachige Unterstützung：Unterstützt mehrere Programmiersprachen und Frameworks
Continue.dev: Code-Review und Optimierung
- • Code-Review: lokale Modelle verwenden, um die Codequalität zu prüfen und potenzielle Probleme zu erkennen
- • Leistungsoptimierung: Leistungsengpässe identifizieren und Optimierungsvorschläge machen
- • Sicherheitsaudit: Sicherheitslücken prüfen und Korrekturvorschläge bereitstellen
- • Private Bereitstellung: Der Code wird nicht in die Cloud hochgeladen, was die Privatsphäre schützt
Werkzeugsynergie: Cursor Agent ist für die Gesamtarchitektur und die Generierung komplexer Logik verantwortlich, Copilot für die tägliche Codevervollständigung und schnelle Iteration und Continue.dev für die Sicherung der Codequalität. Diese Kombination ermöglicht einen vollständigen Entwicklungsprozess von der Konzeption über die Implementierung bis zur Optimierung und stellt sowohl Entwicklungsgeschwindigkeit als auch Codequalität sicher.
Detaillierte Schritte
Schritt 1: Anforderungsanalyse und API-Design (1–2 Stunden)
1. API-Anforderungen klären: Benutzerverwaltung, Daten-CRUD, Authentifizierung und Autorisierung
2. Verwenden Sie Cursor Agent, um die API-Struktur zu entwerfen:
- POST /api/users (Benutzer erstellen)
- GET /api/users (Benutzerliste abrufen, unterstützt Paginierung und Filterung)
- GET /api/users/:id (einen einzelnen Benutzer abrufen)
- PUT /api/users/:id (Benutzer aktualisieren)
- DELETE /api/users/:id (Benutzer löschen)
- POST /api/auth/login (Benutzeranmeldung)
- POST /api/auth/register (Benutzerregistrierung)
JWT zur Authentifizierung verwenden und RBAC-Berechtigungssteuerung implementieren"
3. Cursor generiert API-Designdokumente und die Routing-Struktur
4. Datenmodelle definieren (User, Role usw.)
Schritt 2: Verwenden Sie Cursor Agent, um die Projektstruktur zu generieren (1 Stunde)
1. Erstellen Sie in Cursor ein neues Projekt und wählen Sie einen Tech-Stack aus (z. B. Node.js + Express)
2. Verwenden Sie den Agent-Modus, um Cursor Ihre Anforderungen mitzuteilen:
- Projektstruktur (routes, controllers, models, middleware)
- Datenbankkonfiguration (mit Prisma ORM)
- Umgebungskonfiguration der Variablen
- Fehlerbehandlungs-Middleware
- Logging-Middleware
- Authentifizierungs-Middleware (JWT)"
3. Cursor generiert die vollständige Projektstruktur und den Grundcode
4. Die erzeugte Struktur überprüfen und bei Bedarf anpassen
Schritt 3: Copilot nutzen, um die Entwicklung zu beschleunigen (3–4 Stunden)
1. Copilot verwenden, um CRUD-Operationscode zu vervollständigen:
- • Funktionssignatur eingeben, Copilot vervollständigt die Implementierung automatisch
- • Anforderungen in Eingabekommentaren beschreiben, und Copilot generiert den Code
- • Copilot verwenden, um Datenvalidierungslogik zu generieren
- • Copilot verwenden, um Fehlerbehandlungscode zu generieren
2. Authentifizierungs- und Autorisierungsfunktionen implementieren:
- • JWT-Token generieren und verifizieren
- • Passwortverschlüsselung (bcrypt)
- • Middleware zur Berechtigungsprüfung
3. Datenvalidierung hinzufügen (mit Joi oder Zod)
4. Paginierung und Filterfunktionen implementieren
Schritt 4: Continue.dev für das Code-Review verwenden (1 Stunde)
1. Continue.dev konfigurieren und mit dem lokalen Modell (Ollama) verbinden
2. Continue.dev zur Code-Überprüfung verwenden:
- • Codequalität und Best Practices prüfen
- • Potenzielle Leistungsprobleme erkennen
- • Sicherheitslücken prüfen
- • Optimierungsvorschläge bereitstellen
3. Den Code anhand der Prüfergebnisse optimieren
4. Sicherstellen, dass der Code den Teamstandards entspricht
Schritt 5: Testen und Bereitstellung (2 Stunden)
1. Unit-Tests schreiben (mit Jest)
2. Integrationstests schreiben (API-Endpunkte testen)
3. Verwenden Sie Postman oder Thunder Client, um die API zu testen
4. Auf einer Cloud-Plattform bereitstellen (z. B. Railway, Render, Vercel)
5. CI/CD-Workflows konfigurieren (GitHub Actions)
Wichtige Codebeispiele
Benutzer-Controller (von Cursor Agent generiert)
// controllers/userController.js
const User = require('../models/User')
const { validationResult } = require('express-validator')
exports.createUser = async (req, res) => {
try {
const errors = validationResult(req)
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() })
}
const { name, email, password, role } = req.body
// Prüfen, ob die E-Mail bereits existiert
const existingUser = await User.findOne({ email })
if (existingUser) {
return res.status(400).json({ error: 'Email already exists' })
}
// Benutzer erstellen
const user = await User.create({
name,
email,
password: await bcrypt.hash(password, 10),
role: role || 'user'
})
res.status(201).json({
id: user.id,
name: user.name,
email: user.email,
role: user.role
})
} catch (error) {
res.status(500).json({ error: error.message })
}
}Authentifizierungs-Middleware (Copilot-Vervollständigung)
// middleware/auth.js
const jwt = require('jsonwebtoken')
const authenticate = (req, res, next) => {
const token = req.headers.authorization?.split(' ')[1]
if (!token) {
return res.status(401).json({ error: 'No token provided' })
}
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET)
req.user = decoded
next()
} catch (error) {
res.status(401).json({ error: 'Invalid token' })
}
}
const authorize = (...roles) => {
return (req, res, next) => {
if (!req.user) {
return res.status(401).json({ error: 'Unauthorized' })
}
if (!roles.includes(req.user.role)) {
return res.status(403).json({ error: 'Forbidden' })
}
next()
}
}
module.exports = { authenticate, authorize }Häufige Probleme und Lösungen
Problem 1: Das API-Design entspricht nicht den RESTful-Prinzipien
Lösung: Verwenden Sie Cursor Agent, um die API-Struktur neu zu gestalten und sich an den RESTful-Best Practices zu orientieren. Stellen Sie sicher, dass die richtigen HTTP-Methoden (GET, POST, PUT, DELETE) und Statuscodes verwendet werden.
Problem 2: Die Fehlerbehandlung ist uneinheitlich
Lösung: Erstellen Sie eine einheitliche Middleware für die Fehlerbehandlung, verwenden Sie Continue.dev, um den Fehlerbehandlungscode zu überprüfen, und stellen Sie sicher, dass alle Fehler in einem Standardformat zurückgegeben werden.
Problem 3: Leistungsproblem (langsame Datenbankabfragen)
Lösung: Verwenden Sie Continue.dev, um Leistungsengpässe zu analysieren, Datenbankindizes hinzuzufügen, Abfrageoptimierung zu nutzen und Cache-Mechanismen zu implementieren.
Problem 4: Sicherheitsprobleme (SQL-Injection, XSS)
Lösung: Verwenden Sie parameterisierte Abfragen, Eingabevalidierung und Bereinigung und nutzen Sie Continue.dev für Sicherheitsprüfungen.
Projekt-Checkliste
Projekt 2: Entwicklung einer Full-Stack-Anwendung
Projektübersicht
Analyse der Technologieauswahl: Warum bolt.new + Cursor + Fabric wählen?
bolt.new: Full-Stack-Entwicklung im Browser
- • WebContainers-Technologie: Node.js im Browser ausführen, keine lokale Umgebung erforderlich
- • Sofortige Vorschau：Codeänderungen werden sofort wirksam, Effekte in Echtzeit sehen
- • Schnelles Prototyping: In wenigen Minuten eine vollständige Frontend-Anwendung erstellen
- • Zusammenarbeitsfreundlich：Gemeinsam entwickeln, einfach per geteiltem Link
- • Bereitstellung mit einem Klick: direkt auf Plattformen wie Vercel bereitstellen
Cursor: Backend-API-Entwicklung
- • API-Entwicklung: Verwenden Sie den Agent-Modus, um Backend-APIs schnell zu generieren
- • Datenbankintegration：ORM-Frameworks wie Prisma und TypeORM integrieren
- • Authentifizierungssystem: Authentifizierungsmethoden wie JWT und OAuth implementieren
- • Geschäftslogik: Komplexe Geschäftslogik und Datenvalidierung verarbeiten
Fabric: Optimierung der Codequalität
- • Code-Review：Mit Patterns die Codequalität überprüfen
- • Leistungsoptimierung: Leistungsengpässe identifizieren und optimieren
- • Best Practices：Branchenbest Practices und Entwurfsmuster anwenden
- • Code-Refactoring：Den Code refaktorisieren, um die Wartbarkeit zu verbessern
Werkzeugsynergie: bolt.new ist für den schnellen Aufbau der Frontend-UI und grundlegender Interaktionen verantwortlich, Cursor für die Entwicklung von Backend-APIs und Geschäftslogik, und Fabric für die Optimierung von Codequalität und Leistung. Diese Kombination ermöglicht eine entkoppelte Frontend- und Backend-Entwicklung, stellt sowohl Entwicklungsgeschwindigkeit als auch Codequalität sicher und eignet sich für mittelgroße bis große Full-Stack-Projekte.
Detaillierte Schritte
Schritt 1: Mit bolt.new das Frontend schnell aufbauen (3–4 Stunden)
1. Besuchen Sie bolt.new und erstellen Sie ein neues Projekt
2. Verwenden Sie den KI-Assistenten, um die Frontend-Anforderungen zu beschreiben:
- Anmelde-/Registrierungsseite
- Aufgabenlisten-Seite (zeigt alle Aufgaben an)
- Seite mit Aufgabendetails
- Formular zum Erstellen/Bearbeiten von Aufgaben
- Benutzer-Einstellungsseite
Verwenden Sie Next.js + TypeScript + Tailwind CSS und unterstützen Sie das dunkle Design"
3. bolt.new generiert vollständigen Frontend-Code
4. UI-Stil und Interaktionen anpassen und Animationseffekte hinzufügen
5. Zustandsverwaltung implementieren (mit Zustand oder Context API)
Schritt 2: Backend-API mit Cursor entwickeln (4–5 Stunden)
1. Ein Backend-Projekt in Cursor erstellen (Node.js + Express)
2. Verwenden Sie den Agent-Modus, um die API-Struktur zu generieren:
- Benutzer-Authentifizierungs-API (Registrierung, Anmeldung, Token-Aktualisierung)
- Task-CRUD-API
- Aufgabenfilterung und Such-API
- API für Benutzereinstellungen
Verwenden von Prisma ORM, PostgreSQL-Datenbank, JWT-Authentifizierung"
3. Datenbankmodelle und Beziehungen implementieren
4. API-Endpunkte und Geschäftslogik implementieren
5. Datenvalidierung und Fehlerbehandlung hinzufügen
Schritt 3: Frontend- und Backend-Integration (2–3 Stunden)
1. API-Client konfigurieren (mit axios oder fetch)
2. Die API-Aufruffunktion implementieren:
- • APIs im Zusammenhang mit der Benutzerauthentifizierung
- • Aufgaben-CRUD-API
- • Fehlerbehandlung und Wiederholungslogik
- • Token-Aktualisierungsmechanismus
3. Frontend und Backend verbinden, API-Aufrufe testen
4. Ladezustände und Fehlerzustände behandeln
5. Optimistische Aktualisierungen und Fehler-Rollback implementieren
Schritt 4: Fabric verwenden, um die Codequalität zu optimieren (2–3 Stunden)
1. Den Code mit Fabric’s Patterns überprüfen:
- • Code qualityPattern
- • Muster zur Leistungsoptimierung
- • Sicherheitsprüfungs-Pattern
- • Best-Practice-Muster
2. Den Code basierend auf den Vorschlägen von Fabric optimieren
3. Doppelte Codeabschnitte refaktorisieren und gemeinsame Komponenten extrahieren
4. Datenbankabfragen optimieren und Indizes hinzufügen
5. Einen Cache-Mechanismus implementieren (Redis)
Schritt 5: Integrationstests und Bereitstellung (1–2 Stunden)
1. End-to-End-Tests schreiben (mit Playwright oder Cypress)
2. Frontend- und Backend-Integrationsfunktionen testen
3. Das Frontend auf Vercel bereitstellen
4. Das Backend auf Railway oder Render bereitstellen
5. Umgebung variablen und Datenbankverbindung konfigurieren
6. Funktionen der Produktionsumgebung testen
Häufige Probleme und Lösungen
Problem 1: Kommunikationsfehler zwischen Frontend und Backend (CORS-Fehler)
Lösung: CORS-Middleware im Backend konfigurieren, um Zugriff vom Frontend-Domain zu erlauben. Prüfen Sie, ob die API-URL-Konfiguration korrekt ist.
Problem 2: Problem der Zustandsynchronisierung (Frontend-Zustand stimmt nicht mit dem Backend überein)
Lösung: Implementieren Sie optimistische Aktualisierungen und Fehler-Rollbacks und verwenden Sie React Query oder SWR zur Verwaltung des Serverzustands.
Problem 3: Die Bereitstellungskonfiguration ist komplex
Lösung: Verwenden Sie Umgebungsvariablen zur Verwaltung der Konfiguration, Docker zur Containerisierung der Bereitstellung und CI/CD zur Automatisierung des Bereitstellungsprozesses.
Projekt-Checkliste
Lernergebnisse
Nach Abschluss dieses Kapitels werden Sie:
- 1Die Best Practices der API-Entwicklung beherrschen und APIs entwerfen können, die den RESTful-Konventionen entsprechen
- 2Den vollständigen Full-Stack-Entwicklungsprozess verstehen und ein Projekt mit getrennter Frontend- und Backend-Architektur eigenständig abschließen können
- 3Fähig, mehrere Werkzeuge koordiniert zusammen einzusetzen und die Synergie von Werkzeugkombinationen zu nutzen
- 4Methoden der Code-Qualitätssicherung beherrschen und Tools für Code-Review und Optimierung verwenden können
- 5Die Fähigkeit besitzen, reale Probleme zu lösen und komplexe Themen wie Frontend-Backend-Integration und Bereitstellung zu bewältigen