Agentic Coding

JavaScript Projekt LLM-Reflexion

Assignment 3: Abschlussprojekt — DH-Web-Applikation

Abgabe: 22. Juni 2026 — Präsentation: 23. Juni 2026 (Einheit 09)

Beschreibung

Entwickeln Sie eine vollständige DH-Web-Applikation, die mindestens zwei Datenquellen oder Datenformate kombiniert und eine Visualisierung (Karte, Zeitleiste oder Diagramm) enthält. Dieses Abschlussprojekt bündelt alle im Semester erworbenen Kompetenzen: HTML, CSS, JavaScript, Datenverarbeitung und Agentic Coding.

Die Applikation soll ein kohärentes DH-Thema behandeln und zeigen, dass Sie in der Lage sind, heterogene Daten sinnvoll zu verknüpfen und für ein breites Publikum aufzubereiten. Das Projekt wird als eigenständiges GitHub-Repository mit CLAUDE.md und README.md abgegeben.

Projektumfang

Das Abschlussprojekt ist umfangreicher als die vorherigen Assignments. Planen Sie ausreichend Zeit ein und beginnen Sie frühzeitig mit der Konzeption. Es wird empfohlen, spätestens in Einheit 08 (19. Mai) ein grobes Konzept zu haben.

Anforderungen

Applikation

  • Vollständige Web-Applikation — Funktionierende Anwendung mit HTML, CSS und JavaScript
  • Mindestens 2 Datenquellen oder -formate kombiniert — z. B. TEI-XML + GeoJSON, JSON + CSV, API + lokale Daten
  • Visualisierung — Mindestens eine der folgenden Darstellungsformen:
    • Karte — z. B. mit Leaflet.js und GeoJSON-Daten
    • Zeitleiste — Chronologische Darstellung von Ereignissen oder Dokumenten
    • Diagramm — z. B. Balkendiagramm, Netzwerkgraph, Wortwolke (mit Canvas oder SVG)
  • Durchdachtes UI/UX-Konzept — Die Applikation ist intuitiv bedienbar und visuell ansprechend
  • Responsive Design — Die Applikation funktioniert auf verschiedenen Bildschirmgrößen

Code-Organisation

  • CLAUDE.md im Repository — Eine Datei, die beschreibt, wie ein LLM mit diesem Projekt arbeiten soll (Kontext, Regeln, Konventionen)
  • README.md — Projektbeschreibung mit:
    • Kurzbeschreibung des Projekts und seines DH-Bezugs
    • Screenshot oder Link zur Live-Version
    • Verwendete Datenquellen (mit Links)
    • Technologien und Libraries
    • Anleitung zum lokalen Ausführen
  • Sinnvolle Dateistruktur — Trennung von HTML, CSS und JavaScript in eigene Dateien; Daten in eigenem Ordner
  • Deployed auf GitHub Pages — Die Applikation ist online erreichbar
  • Nachvollziehbare Git-History — Regelmäßige, aussagekräftige Commits (nicht alles in einem Commit)

Technik

  • Vanilla HTML/CSS/JS — Keine Frameworks (React, Vue etc.). Erlaubt sind Libraries wie Leaflet.js oder Chart.js.
  • Async/Await für asynchrone Operationen
  • Fehlerbehandlung mit try/catch
  • Keine API-Keys im Code — Falls Sie eine API nutzen, darf der Key nicht im öffentlichen Repository liegen

Bewertungskriterien

Insgesamt 100 Punkte, verteilt wie folgt:

Technische Umsetzung 20 Punkte
Datenintegration (mind. 2 Quellen/Formate) 15 Punkte
Visualisierung und Interaktion 15 Punkte
UI/UX und Responsive Design 10 Punkte
Code-Organisation und Dokumentation 10 Punkte
LLM-Abschlussreflexion (1500 - 2000 Wörter) 20 Punkte
Präsentation (10 Minuten) 10 Punkte
Gesamt 100 Punkte

Detaillierte Kriterien

Technische Umsetzung (20 Punkte)

  • Funktionierende Applikation ohne JavaScript-Fehler
  • Sauberer, lesbarer Code mit sinnvoller Struktur
  • Modernes JavaScript (const/let, async/await, Template Literals)
  • Sinnvolle Aufteilung in Funktionen und Module
  • Fehlerbehandlung und Edge Cases berücksichtigt

Datenintegration (15 Punkte)

  • Mindestens zwei verschiedene Datenquellen oder -formate eingebunden
  • Daten werden sinnvoll miteinander verknüpft
  • Quellenangabe und Lizenzhinweise für alle Daten
  • Daten werden dynamisch per JavaScript geladen (nicht hartcodiert)

Visualisierung und Interaktion (15 Punkte)

  • Mindestens eine Visualisierungsform (Karte, Zeitleiste, Diagramm)
  • Visualisierung ist interaktiv (Hover, Klick, Filter)
  • Sinnvolle Verbindung zwischen Daten und Visualisierung
  • Visualisierung ergänzt das Verständnis der Daten

UI/UX und Responsive (10 Punkte)

  • Kohärentes, ansprechendes Design
  • Intuitive Navigation und Bedienung
  • Responsive auf verschiedenen Bildschirmgrößen
  • Ladezeiten berücksichtigt (Ladeindikator, progressive Darstellung)

Code-Organisation und Dokumentation (10 Punkte)

  • CLAUDE.md vorhanden und sinnvoll befüllt
  • README.md mit vollständiger Projektbeschreibung
  • Sinnvolle Ordnerstruktur (HTML, CSS, JS, Daten getrennt)
  • Nachvollziehbare Git-History (mindestens 10 Commits)
  • Funktionierendes GitHub Pages Deployment

LLM-Abschlussreflexion (20 Punkte)

  • 1500 - 2000 Wörter Umfang
  • Gesamter Agentic-Coding-Workflow beschrieben
  • Analyse der 7 AI-Coding-Literacy-Dimensionen
  • Entwicklung der Prompt-Kompetenz über das Semester reflektiert
  • Ethische Reflexion enthalten

Präsentation (10 Punkte)

  • 10 Minuten Dauer
  • Live-Demo der Applikation
  • Technische Architektur und Datenquellen erklärt
  • Agentic-Coding-Workflow reflektiert
  • Fragen der Lehrenden und Studierenden beantwortet

LLM-Abschlussreflexion

Die Abschlussreflexion ist die umfangreichste Reflexion des Semesters. Sie blicken auf den gesamten Lernprozess zurück und analysieren Ihre Entwicklung im Umgang mit LLM-gestütztem Coding.

Pflichtinhalte der Abschlussreflexion

  • Gesamter Agentic-Coding-Workflow beschreiben: Wie sah Ihr typischer Workflow aus? Beschreiben Sie den Kreislauf von Anforderung formulieren, Prompt schreiben, Code generieren, prüfen, iterieren.
  • Entwicklung der Prompt-Kompetenz: Vergleichen Sie Ihre Prompts vom Anfang des Semesters (Assignment 1) mit Ihren aktuellen Prompts. Was hat sich konkret verändert? Belegen Sie dies mit Beispielen.
  • 7 AI-Coding-Literacy-Dimensionen analysieren: Bewerten Sie Ihre eigene Kompetenz in jeder der sieben Dimensionen. In welchen Bereichen haben Sie sich am meisten verbessert?
  • Erste vs. letzte LLM-Interaktion vergleichen: Stellen Sie einen frühen und einen aktuellen Prompt-Dialog gegenüber. Analysieren Sie die Unterschiede in Qualität, Spezifität und Ergebnis.
  • Ethische Reflexion: Diskutieren Sie die Grenzen von LLM-gestütztem Coding. Wann ist es sinnvoll, wann problematisch? Welche Verantwortung tragen Sie als Entwickler/in?

Die 7 AI-Coding-Literacy-Dimensionen

Reflektieren Sie Ihre Kompetenzentwicklung in diesen sieben Bereichen:

Kürzel Dimension Leitfrage
CT Computational Thinking Kann ich Probleme in bearbeitbare Schritte zerlegen?
RE Requirement Engineering Kann ich Anforderungen präzise formulieren, bevor Code entsteht?
CE Context Engineering Kann ich dem LLM den richtigen Kontext bereitstellen?
PE Prompt Engineering Sind meine Prompts spezifisch, kontextreich und iterativ?
CL Code Literacy Kann ich generierten Code lesen, verstehen und anpassen?
RV Review Prüfe ich systematisch, ob der Code korrekt und sinnvoll ist?
EW Expertenwissen Bringe ich mein DH-Domänenwissen sinnvoll ein?

Zur ausführlichen Reflexionsvorlage mit Beispielen und Bewertungskriterien

Beispielprojekte

Die folgenden Projektideen dienen als Inspiration. Sie können eine davon aufgreifen oder ein eigenes Thema wählen. Besprechen Sie Ihre Projektidee spätestens in Einheit 08 mit den Lehrenden.

Idee 1 Historischer Briefatlas Kombinieren Sie TEI-kodierte Briefmetadaten mit GeoJSON-Daten, um Korrespondenz-Netzwerke auf einer Leaflet-Karte darzustellen. Filter nach Zeitraum, Absender und Empfänger. Detailansicht zeigt den Briefinhalt. TEI GeoJSON Leaflet
Idee 2 Sammlungs-Dashboard Europeana-API-Suche kombiniert mit lokalen CSV-Daten einer Museumssammlung. Dashboard mit Diagrammen (Objekte nach Epoche, nach Typ), Suchfunktion und Detailansicht mit IIIF-Bildern. API CSV Charts
Idee 3 Digitale Edition Explorer Laden Sie ein TEI-XML-Dokument und zugehörige Metadaten (JSON). Zeigen Sie den Text mit hervorgehobenen Entitäten (Personen, Orte) an. Beim Klick auf einen Ort wird eine Karte gezeigt, bei Personen ein Infokasten. TEI JSON Leaflet
Idee 4 Kulturerbe-Zeitleiste Kombinieren Sie eine JSON-Datei mit historischen Ereignissen und CSV-Daten zu kulturellen Artefakten. Zeigen Sie eine interaktive Zeitleiste, die beim Klick auf ein Ereignis zugehörige Objekte und Bilder anzeigt. JSON CSV Timeline

Tipp: CLAUDE.md schreiben

Die CLAUDE.md-Datei ist Ihre Kontextdatei für das LLM. Schreiben Sie hinein, was das Projekt tut, welche Technologien verwendet werden, welche Konventionen gelten und wo die Daten liegen. Wenn Sie eine neue Chat-Session mit dem LLM starten, geben Sie diese Datei als Kontext mit. So arbeitet das LLM konsistenter und macht weniger Fehler.

Hinweis zur Eigenständigkeit

Das Abschlussprojekt soll zeigen, dass Sie gelernt haben, LLMs als Werkzeug einzusetzen — nicht, dass Sie ein LLM die gesamte Arbeit machen lassen. Die Reflexion muss deutlich machen, dass Sie den Code verstehen und aktiv gesteuert haben. Rein LLM-generierte Projekte ohne nachvollziehbare eigene Entscheidungen erhalten keine volle Punktzahl.

Abgabe

  1. Erstellen Sie ein eigenes GitHub-Repository für das Abschlussprojekt.
  2. Stellen Sie sicher, dass CLAUDE.md und README.md im Repository vorhanden sind.
  3. Deployen Sie die Applikation auf GitHub Pages.
  4. Reichen Sie im Moodle-Kurs folgende Informationen ein:
    • Link zum GitHub-Repository
    • Link zur GitHub Pages-Website
    • Die LLM-Abschlussreflexion (als reflexion-3.md oder reflexion-3.html im Repository)
  5. Bereiten Sie eine 10-minütige Präsentation für Einheit 09 (23. Juni 2026) vor.