Full-Stack-Entwicklung mit KI - aiMOOC


Full-Stack-Entwicklung mit KI - aiMOOC
Einleitung
Full-Stack-Entwicklung mit KI: Vom Systemdenken zur Implementierung verbindet Softwareentwicklung, Webentwicklung, Künstliche Intelligenz, Systemdenken, Prompt Engineering, Testgetriebene Entwicklung, Debugging, DevOps und Softwarearchitektur. In diesem aiMOOC lernst Du, wie aus einer Idee ein tragfähiges Softwaresystem wird: Du denkst zuerst in Systemen, modellierst Ziele und Abhängigkeiten, formulierst präzise Anforderungen, nutzt KI-gestützte Programmierung verantwortungsvoll und führst Deine Lösung bis zur überprüfbaren Implementierung.
Der Schwerpunkt liegt nicht darauf, möglichst schnell irgendeinen Code zu erzeugen. Professionelle Full-Stack-Entwicklung bedeutet, die gesamte Kette zu verstehen: Frontend, Backend, Datenbank, API, Authentifizierung, Sicherheit, Testing, Deployment, Monitoring, Wartbarkeit und die Zusammenarbeit im Entwicklungsteam. KI kann Dich dabei unterstützen, aber sie ersetzt nicht Deine Verantwortung für Qualitätssicherung, Datenschutz, Barrierefreiheit, Lizenzrecht, Code Review und die fachliche Richtigkeit des Ergebnisses.
Videoimpuls
Das folgende Video dient als Einstieg in das Thema Full-Stack-Entwicklung mit KI: Vom Systemdenken zur Implementierung. Es greift unter anderem Vibe Coding, Prompt-to-Prototype, KI-Pair-Programming, Agentic Coding, professionelles Debugging und den Weg von der Idee zur Umsetzung auf.
{{#ev:youtube|https://www.youtube.com/watch?v=4uqpLdPgmCQ%7C500%7Ccenter}}
Lernziele
Nach diesem aiMOOC kannst Du erklären, warum Systemdenken eine Grundlage professioneller Full-Stack-Entwicklung ist. Du kannst die Rollen von Frontend, Backend, Datenbank, API, Deployment und Monitoring unterscheiden. Du kannst KI-Werkzeuge für Ideenfindung, Prototyping, Code-Erklärung, Testgenerierung, Fehlersuche und Refactoring nutzen. Du kannst Risiken von Vibe Coding, unkritischer Code-Übernahme und KI-Halluzinationen benennen. Du kannst einen sinnvollen Entwicklungsprozess entwerfen, der Prompting, Architektur, Versionierung, Testing, Code Review, Sicherheit und Dokumentation miteinander verbindet.
Zielgruppe und Niveau
Dieser Kurs eignet sich für die Sekundarstufe II, die Berufliche Bildung, ein Studium mit Informatikbezug, Medienbildung, Projektunterricht, IT-Ausbildung und berufliche Weiterbildung. Vorkenntnisse in HTML, CSS, JavaScript, Python oder einer anderen Programmiersprache sind hilfreich, aber nicht zwingend erforderlich. Wichtig ist die Bereitschaft, technische Systeme nicht nur als Code, sondern als Zusammenspiel aus Menschen, Zielen, Daten, Regeln und Rückkopplungen zu betrachten.
Grundlagen: Was bedeutet Full-Stack-Entwicklung?
Full-Stack-Entwicklung beschreibt die Arbeit an mehreren Schichten einer Anwendung. Im Frontend entsteht die sichtbare und bedienbare Oberfläche. Dort geht es um Benutzeroberfläche, Usability, Barrierefreiheit, Responsives Webdesign, Zustandsverwaltung, Formulare, Navigation und die Kommunikation mit dem Backend. Im Backend werden Geschäftslogik, Datenverarbeitung, Zugriffskontrolle, Schnittstellen, Validierung und Verbindungen zu anderen Diensten umgesetzt. Die Datenbank speichert Informationen dauerhaft und strukturiert. Über eine API tauschen Frontend, Backend und externe Systeme Daten aus.
Ein Full-Stack Developer muss nicht in jedem Spezialgebiet Expertin oder Experte sein. Entscheidend ist, die Zusammenhänge zu verstehen: Wie gelangt eine Nutzereingabe vom Browser zur Serveranwendung? Welche Daten werden gespeichert? Welche Fehler können auftreten? Wie wird ein System getestet? Wie wird es veröffentlicht? Wie wird es überwacht? Wie wird verhindert, dass sensible Daten öffentlich werden? Diese Fragen zeigen, dass Softwareentwicklung mehr ist als das Schreiben einzelner Funktionen.
Datei:Network Architecture Diagram - Simple Web Stack.pdf
Das Bild zeigt vereinfacht, dass eine Webanwendung aus mehreren verbundenen Schichten besteht. Für Systemdenken ist genau diese Sicht wichtig: Jede Änderung an einer Schicht kann Auswirkungen auf andere Schichten haben. Eine neue Eingabe im Frontend kann eine neue Validierung im Backend, eine neue Spalte in der Datenbank, neue Tests und eine Anpassung der Dokumentation erforderlich machen.
Der Stack als Denkmodell
Ein Softwarestack ist eine Reihe aufeinander abgestimmter Komponenten. Dazu können Betriebssystem, Webserver, Laufzeitumgebung, Framework, Datenbankmanagementsystem, Bibliothek, Containerisierung, Cloud Computing und Monitoring gehören. Ein Stack ist nicht nur eine Liste von Technologien. Er ist eine Entscheidung darüber, welche Werkzeuge zusammenpassen, welche Abhängigkeiten entstehen und welche Fähigkeiten im Team vorhanden sein müssen.
Beispiel: Eine Lernplattform könnte im Frontend mit React oder Vue.js umgesetzt werden. Das Backend könnte eine REST- oder GraphQL-API anbieten. Die Daten könnten in PostgreSQL gespeichert werden. Tests könnten mit einem Testframework automatisiert werden. Das Deployment könnte über Containerisierung und Continuous Integration erfolgen. Jede dieser Entscheidungen hat Folgen für Wartbarkeit, Sicherheit, Kosten, Geschwindigkeit und Lernaufwand.
Systemdenken in der Softwareentwicklung
Systemdenken bedeutet, ein Problem nicht isoliert zu betrachten. Du untersuchst Elemente, Beziehungen, Grenzen, Ziele, Rückkopplungen und Abhängigkeiten. In der Softwareentwicklung hilft Dir Systemdenken, nicht vorschnell mit Code zu beginnen. Stattdessen fragst Du: Wer nutzt das System? Welches Problem soll gelöst werden? Welche Daten fließen durch das System? Welche Regeln gelten? Welche Fehlerfälle sind wahrscheinlich? Welche Folgen hat eine falsche Entscheidung? Welche Teile müssen stabil sein, welche dürfen experimentell bleiben?
Ein professioneller Entwicklungsprozess beginnt deshalb mit einem Problemraum. Du beschreibst, welche Situation verbessert werden soll. Danach entwickelst Du einen Lösungsraum. Dort sammelst Du mögliche Funktionen, Datenmodelle, Schnittstellen und technische Architekturen. Erst dann folgt die Implementierung. Dieser Weg schützt Dich vor typischen Fehlern: zu frühe Technikwahl, unklare Anforderungen, fehlende Tests, schlecht geschnittene Komponenten oder unkontrollierte Übernahme von KI-generiertem Code.
Vom Problemraum zum Lösungsraum
Im Problemraum geht es um Verständnis. Du sammelst Anforderungen, Zielgruppen, Einschränkungen, Risiken und Erfolgskriterien. Im Lösungsraum entscheidest Du, wie das System aufgebaut werden soll. Dabei helfen User Stories, Use Cases, Datenflussdiagramme, einfache Architekturzeichnungen, API-Skizzen und Testfälle.
Ein Beispiel: Du möchtest eine Anwendung bauen, mit der Lernende Aufgaben abgeben können. Im Problemraum fragst Du: Wer legt Aufgaben an? Wer gibt Lösungen ab? Wer darf Feedback sehen? Welche Daten sind personenbezogen? Was passiert bei verspäteter Abgabe? Im Lösungsraum entwirfst Du Benutzerrollen, Datenbanktabellen, API-Endpunkte, Eingabeformulare, Rechteprüfung und Tests. Erst danach lässt Du eine KI einzelne Teile unterstützen.
Rückkopplungen und Fehlerfolgen
Jedes Softwaresystem enthält Rückkopplungen. Eine langsame Datenbankabfrage kann die Benutzeroberfläche verzögern. Eine unklare Fehlermeldung kann Supportanfragen erhöhen. Eine schlecht formulierte KI-Anweisung kann unsicheren Code erzeugen. Eine fehlende Testabdeckung kann dazu führen, dass ein scheinbar kleiner Fix neue Fehler erzeugt. Systemdenken bedeutet deshalb, nicht nur die gewünschte Funktion zu betrachten, sondern auch Nebenwirkungen, Wartung, Sicherheit und Betrieb.
KI als Werkzeug in der Full-Stack-Entwicklung
KI-gestützte Programmierung kann viele Tätigkeiten beschleunigen. Eine KI kann Anforderungen strukturieren, Alternativen vergleichen, Beispielcode erzeugen, Tests vorschlagen, Fehlermeldungen erklären, Dokumentation entwerfen, Refactorings planen oder Sicherheitsrisiken sichtbar machen. Dabei ist die KI ein Werkzeug, kein verantwortlicher Entwickler. Du musst prüfen, ob Vorschläge fachlich korrekt, sicher, wartbar, lizenzrechtlich unbedenklich und passend zur Architektur sind.

Das vereinfachte Bild eines künstlichen neuronalen Netzes erinnert daran, dass KI-Systeme Muster verarbeiten. Sie verstehen Deinen Projektkontext nicht automatisch vollständig. Gute Ergebnisse entstehen, wenn Du Kontext, Ziel, Einschränkungen, Beispiele, Akzeptanzkriterien und Prüfschritte klar vorgibst.
Typische Einsatzfelder von KI
- Ideenfindung: Du kannst eine KI bitten, mögliche Funktionen, Nutzerrollen, Risiken oder Randfälle zu sammeln.
- Anforderungsanalyse: Du kannst unklare Projektideen in präzisere User Stories, Akzeptanzkriterien und Datenflüsse übersetzen lassen.
- Architekturentwurf: Du kannst Alternativen für Monolith, Microservices, REST, GraphQL, Serverless Computing oder Containerisierung vergleichen.
- Codegenerierung: Du kannst Komponenten, Hilfsfunktionen, Tests, Datenmodelle oder Beispielrouten erzeugen lassen.
- Debugging: Du kannst Fehlermeldungen, Logs und Reproduktionsschritte analysieren lassen.
- Refactoring: Du kannst Verbesserungsvorschläge für Lesbarkeit, Struktur, Wiederverwendbarkeit und Testbarkeit einholen.
- Dokumentation: Du kannst technische Entscheidungen, API-Beschreibungen und Projektanleitungen formulieren lassen.
Grenzen und Verantwortung
KI-generierter Code kann Fehler enthalten. Er kann veraltete Muster nutzen, Sicherheitslücken übersehen, Abhängigkeiten erfinden, Randfälle nicht beachten oder scheinbar überzeugende Erklärungen liefern, die nicht stimmen. Deshalb brauchst Du Code Review, Testautomatisierung, Statische Codeanalyse, Dependency Scanning, Security Testing, Versionierung und klare Verantwortlichkeiten. Besonders wichtig ist der Schutz sensibler Daten: Zugangsdaten, personenbezogene Informationen, interne Dokumente oder vertrauliche Geschäftslogik gehören nicht unkritisch in externe KI-Systeme.
Vibe Coding, Prompt-to-Prototype und professionelle Entwicklung
Vibe Coding beschreibt eine Arbeitsweise, bei der Software stark über natürliche Sprache, Stimmung, Zielbeschreibung und iteratives Ausprobieren mit KI erzeugt wird. Diese Methode kann für schnelle Experimente, Lernprojekte und Prototypen hilfreich sein. Problematisch wird sie, wenn Du den erzeugten Code nicht verstehst, keine Tests schreibst, Fehlermeldungen nur weiterkopierst oder Sicherheitsfragen ignorierst.
Prompt-to-Prototype geht einen Schritt systematischer vor. Du beschreibst ein Ziel, lässt einen ersten Prototyp erstellen und überprüfst ihn anhand klarer Kriterien. Danach verbesserst Du Schritt für Schritt Funktionen, Datenmodell, Oberfläche, Tests und Dokumentation. Professionell wird dieser Ansatz erst dann, wenn Du ihn mit Systemdenken, Versionsverwaltung, Testing, Code Review und Deployment verbindest.
Vom Prompt zur überprüfbaren Funktion
Ein guter Prompt für Full-Stack-Entwicklung enthält nicht nur die gewünschte Funktion. Er beschreibt Kontext, Zielgruppe, vorhandenen Stack, technische Grenzen, Qualitätskriterien, Fehlerfälle und gewünschte Ausgabe. Statt nur zu schreiben: „Baue eine Login-Seite“, formulierst Du besser: „Entwerfe eine barrierearme Login-Komponente für eine Lernplattform. Nutze bestehende API-Endpunkte, validiere Eingaben clientseitig und beschreibe zusätzlich passende Tests und Sicherheitsrisiken.“ Dadurch wird die KI nicht magisch perfekt, aber sie erhält einen klareren Arbeitsrahmen.
Prompt-Muster für professionelle Arbeit
- Kontext-Prompt: Beschreibe Projektziel, Zielgruppe, Stack, vorhandene Dateien und Einschränkungen.
- Architektur-Prompt: Bitte um mehrere Lösungsvorschläge mit Vor- und Nachteilen, bevor Code entsteht.
- Test-Prompt: Fordere Testfälle für Normalfälle, Randfälle, Fehlerfälle und Sicherheitsfälle.
- Review-Prompt: Lasse Code auf Lesbarkeit, Wartbarkeit, Sicherheit und Performance prüfen.
- Debugging-Prompt: Gib Fehlermeldung, erwartetes Verhalten, tatsächliches Verhalten, Reproduktionsschritte und relevante Codeausschnitte an.
- Refactoring-Prompt: Bitte um kleine, nachvollziehbare Änderungen, die bestehendes Verhalten erhalten.
KI-Pair-Programming
Pair Programming ist eine Arbeitsweise, bei der zwei Personen gemeinsam an Code arbeiten. Eine Person schreibt, die andere denkt mit, überprüft, stellt Fragen und achtet auf Struktur. Bei KI-Pair-Programming übernimmt die KI teilweise die Rolle einer Partnerin: Sie schlägt Code vor, erklärt Alternativen, erinnert an Tests oder hilft beim Debugging. Du bleibst aber die Person, die Ziele setzt, Entscheidungen trifft und Verantwortung übernimmt.
Eine sinnvolle Rollenverteilung lautet: Du bist Architektin oder Architekt, Fachperson und Qualitätsverantwortliche oder Qualitätsverantwortlicher. Die KI ist Ideengeberin, Sparringspartnerin, Erklärhilfe und Beschleunigerin. Diese Rollen dürfen nicht verwechselt werden. Wenn Du unkritisch jede Antwort übernimmst, verlierst Du Kontrolle über das System.
Gute Fragen an eine KI-Pair-Programming-Partnerin
- Verständnisfrage: Erkläre mir, welche Komponenten an dieser Funktion beteiligt sind.
- Risikoanalyse: Welche Sicherheits-, Datenschutz- oder Performance-Risiken entstehen durch diese Lösung?
- Testdesign: Welche Unit-, Integrations- und End-to-End-Tests wären sinnvoll?
- Fehlersuche: Welche Hypothesen erklären diese Fehlermeldung, und wie kann ich sie nacheinander prüfen?
- Alternative: Welche einfachere Lösung erfüllt dieselben Anforderungen mit weniger Komplexität?
- Code Review: Welche Stellen sind schwer wartbar, doppelt oder schlecht benannt?
Agentic Coding mit Entwicklungsagenten
Agentic Coding bezeichnet Entwicklungsabläufe, bei denen KI-Agenten nicht nur einzelne Codevorschläge machen, sondern Aufgaben planen, Dateien ändern, Tests ausführen, Fehler auswerten und iterativ weiterarbeiten. Werkzeuge wie Codex oder Antigravity stehen beispielhaft für eine Entwicklung in Richtung agentischer Programmierumgebungen. Für Lernende ist wichtig: Agentische Werkzeuge können mächtig sein, aber sie brauchen klare Aufgaben, begrenzte Rechte, überprüfbare Tests und menschliche Kontrolle.
Ein sinnvoller Auftrag an einen Entwicklungsagenten ist klein, überprüfbar und kontextreich. Statt „Baue die ganze App fertig“ ist besser: „Implementiere den API-Endpunkt zum Erstellen einer Aufgabe, nutze das vorhandene Datenmodell, schreibe Tests für gültige und ungültige Eingaben und ändere keine Authentifizierungslogik.“ So bleibt der Arbeitsbereich begrenzt und überprüfbar.
Sicherheitsprinzipien für Agentic Coding
- Least Privilege: Ein Agent erhält nur die Rechte, die er für die Aufgabe benötigt.
- Versionskontrolle: Jede Änderung wird über Git, Commits, Branches und Pull Requests nachvollziehbar.
- Testautomatisierung: Ein Agent darf Code vorschlagen, aber Tests müssen die Funktion nachweisbar prüfen.
- Code Review: Menschen prüfen Architektur, Sicherheit, Lesbarkeit, Fachlogik und Nebenwirkungen.
- Geheimnisschutz: Zugangsdaten, private Schlüssel und personenbezogene Daten dürfen nicht unkontrolliert verarbeitet werden.
- Rollback: Änderungen müssen rückgängig gemacht werden können, wenn Tests, Sicherheit oder Qualität nicht stimmen.
Architektur: Von der Idee zum Systemmodell
Eine gute Softwarearchitektur ist keine perfekte Zeichnung. Sie ist eine nachvollziehbare Entscheidung über Bausteine, Datenflüsse, Schnittstellen und Qualitätsziele. In der Full-Stack-Entwicklung musst Du klären, welche Aufgaben im Frontend liegen, welche im Backend, wie Daten gespeichert werden, wie Authentifizierung funktioniert, wie externe Dienste angebunden werden und wie Fehler sichtbar gemacht werden.

Das Model-View-Controller-Muster zeigt exemplarisch, wie Verantwortlichkeiten getrennt werden können. Das Modell verwaltet Daten und Regeln, die View stellt Informationen dar, der Controller verarbeitet Eingaben. Moderne Webframeworks nutzen unterschiedliche Varianten solcher Muster. Der Grundgedanke bleibt wichtig: Gute Architektur trennt Verantwortlichkeiten, damit Code verständlicher, testbarer und wartbarer wird.
Architekturfragen vor der Implementierung
- Nutzerrolle: Welche Personen oder Systeme greifen auf die Anwendung zu?
- Datenfluss: Welche Daten entstehen, werden gelesen, verändert, gelöscht oder weitergegeben?
- Schnittstelle: Welche API-Endpunkte, Ereignisse oder Nachrichten verbinden die Komponenten?
- Zustand: Wo wird Zustand gespeichert: im Browser, im Backend, in einer Datenbank oder in einem Cache?
- Sicherheit: Wer darf welche Aktion ausführen, und wie wird das geprüft?
- Skalierbarkeit: Welche Teile könnten bei vielen Nutzenden langsam oder teuer werden?
- Beobachtbarkeit: Welche Logs, Metriken und Fehlermeldungen brauchst Du im Betrieb?
Implementierungsprozess mit KI
Ein professioneller KI-gestützter Entwicklungsprozess kann in mehreren Schleifen ablaufen. Zuerst formulierst Du das Problem. Dann modellierst Du die wichtigsten Systemelemente. Anschließend entwirfst Du eine kleine vertikale Funktion, also einen schmalen Durchstich durch Frontend, Backend, Datenbank und Tests. Danach lässt Du KI gezielt bei Teilaufgaben helfen. Jede Änderung wird geprüft, getestet, dokumentiert und versioniert.
Ein vertikaler Schnitt ist besonders hilfreich. Statt zuerst alle Oberflächen oder alle Datenbanktabellen zu bauen, implementierst Du eine kleine Funktion vollständig. Beispiel: Eine Aufgabe anlegen. Dazu gehören Formular, Validierung, API-Endpunkt, Datenbankeintrag, Test, Fehlerbehandlung und eine sichtbare Erfolgsmeldung. So erkennst Du früh, ob Architektur, Stack und Entwicklungsprozess funktionieren.
Schrittfolge für ein KI-gestütztes Full-Stack-Projekt
- Problemdefinition: Beschreibe Ziel, Zielgruppe, Nutzen und Grenzen der Anwendung.
- Systemmodell: Skizziere Komponenten, Datenflüsse, Rollen und Risiken.
- Technologiewahl: Wähle einen passenden Stack und begründe die Entscheidung.
- Datenmodell: Definiere Entitäten, Beziehungen, Validierungsregeln und Datenschutzanforderungen.
- API-Design: Lege Endpunkte, Eingaben, Ausgaben, Statuscodes und Fehlerformate fest.
- Prototyping: Erzeuge mit KI einen ersten lauffähigen Ausschnitt.
- Testing: Schreibe Tests vor oder während der Implementierung.
- Implementierung: Entwickle kleine, überprüfbare Änderungen.
- Review: Prüfe Code, Architektur, Sicherheit, Performance und Verständlichkeit.
- Deployment: Stelle die Anwendung kontrolliert bereit.
- Monitoring: Überwache Fehler, Antwortzeiten und Nutzung.
- Iteration: Verbessere die Anwendung anhand von Feedback und Messdaten.
Professionelles Debugging
Debugging ist das systematische Finden, Verstehen und Beheben von Fehlern. Professionelles Debugging beginnt nicht mit Raten. Du beschreibst zuerst erwartetes Verhalten, tatsächliches Verhalten, Umgebung, Schritte zur Reproduktion, relevante Eingaben, Fehlermeldungen und letzte Änderungen. Dann formulierst Du Hypothesen und prüfst sie einzeln.
KI kann beim Debugging helfen, wenn Du ihr gute Informationen gibst. Eine Fehlermeldung allein reicht oft nicht. Besser ist eine strukturierte Anfrage mit Kontext: Was sollte passieren? Was passiert wirklich? Seit wann tritt der Fehler auf? Welche Datei wurde geändert? Welche Tests schlagen fehl? Welche Logs gibt es? Welche Vermutung hast Du bereits geprüft? Dadurch wird Debugging zu einem nachvollziehbaren Prozess.
Debugging-Strategien
- Reproduktion: Erzeuge den Fehler zuverlässig mit möglichst wenigen Schritten.
- Minimales Beispiel: Reduziere Code und Daten auf den kleinsten Fall, der den Fehler zeigt.
- Hypothese: Formuliere eine prüfbare Erklärung für den Fehler.
- Instrumentation: Nutze Logs, Breakpoints, Metriken oder Traces, um Verhalten sichtbar zu machen.
- Testfall: Schreibe einen Test, der den Fehler zeigt.
- Root Cause Analysis: Behebe die Ursache, nicht nur das sichtbare Symptom.
- Regressionstest: Stelle sicher, dass derselbe Fehler später nicht unbemerkt zurückkehrt.
Testing, Qualität und Deployment
Testing ist in KI-gestützter Entwicklung besonders wichtig, weil KI schnell viel Code erzeugen kann. Geschwindigkeit ohne Prüfung erhöht das Risiko. Unit Tests prüfen kleine Einheiten. Integrationstests prüfen das Zusammenspiel mehrerer Komponenten. End-to-End-Tests prüfen typische Nutzerwege. Statische Codeanalyse findet bestimmte Fehler, bevor Code ausgeführt wird. Security Testing sucht nach Sicherheitsproblemen.

Continuous Integration und Continuous Delivery sorgen dafür, dass Änderungen regelmäßig gebaut, getestet und bereitgestellt werden können. KI kann Testfälle vorschlagen oder Fehlermeldungen erklären. Die Entscheidung, ob eine Änderung produktionsreif ist, bleibt jedoch eine menschliche und organisatorische Verantwortung.
Qualitätskriterien für KI-generierten Code
- Korrektheit: Der Code erfüllt die fachlichen Anforderungen.
- Lesbarkeit: Namen, Struktur und Kommentare helfen beim Verstehen.
- Wartbarkeit: Änderungen sind möglich, ohne das gesamte System zu gefährden.
- Testbarkeit: Funktionen sind so geschnitten, dass sie automatisiert geprüft werden können.
- Sicherheit: Eingaben werden validiert, Rechte geprüft und Geheimnisse geschützt.
- Performance: Datenbankabfragen, Netzwerkanfragen und Rendering sind angemessen effizient.
- Barrierefreiheit: Anwendungen sind möglichst für viele Menschen nutzbar.
- Dokumentation: Entscheidungen und Nutzung werden verständlich beschrieben.
Sicherheit, Datenschutz und Ethik
KI in der Softwareentwicklung wirft technische und ethische Fragen auf. Wenn Du Code oder Projektdaten an ein KI-System übergibst, musst Du klären, ob vertrauliche Informationen enthalten sind. Datenschutz verlangt, personenbezogene Daten zu minimieren, zu schützen und nur zweckgebunden zu verarbeiten. IT-Sicherheit verlangt, Eingaben zu validieren, Berechtigungen korrekt zu prüfen, Abhängigkeiten aktuell zu halten und Angriffsflächen zu reduzieren.
Auch Urheberrecht und Lizenz sind relevant. KI-generierter Code sollte nicht ungeprüft übernommen werden, wenn unklar ist, ob er aus fremden Quellen rekonstruiert wurde oder inkompatible Lizenzannahmen enthält. In professionellen Kontexten braucht es Regeln: Welche KI-Werkzeuge dürfen genutzt werden? Welche Daten dürfen eingegeben werden? Wie wird dokumentiert, dass KI beteiligt war? Wer prüft die Ergebnisse?
Verantwortungsvolle KI-Nutzung im Projekt
- Transparenz: Dokumentiere, wo KI wesentlich zur Lösung beigetragen hat.
- Prüfbarkeit: Akzeptiere KI-Ausgaben nur, wenn sie getestet und verstanden wurden.
- Datensparsamkeit: Gib nur den Kontext weiter, der für die Aufgabe nötig ist.
- Sicherheitsbewusstsein: Prüfe Eingabevalidierung, Authentifizierung, Autorisierung und Abhängigkeiten.
- Menschliche Verantwortung: Entscheidungen über Architektur, Veröffentlichung und sensible Daten bleiben beim Menschen.
- Lernorientierung: Nutze KI nicht zum Verbergen von Wissenslücken, sondern zum gezielten Aufbau von Verständnis.
Praxisprojekt: KI-gestützte Lernaufgaben-App
Als durchgehendes Beispiel kannst Du eine kleine Webanwendung planen: Eine Lernaufgaben-App, in der Lehrende Aufgaben erstellen und Lernende Lösungen abgeben. Das Projekt eignet sich, weil es typische Full-Stack-Elemente enthält: Benutzerrollen, Formulare, Validierung, Datenbank, API, Rechteprüfung, Dateiupload oder Texteingabe, Feedback und Auswertung.
Beginne mit einem Systemmodell. Definiere Rollen wie Lernende, Lehrende und Administration. Beschreibe Datenobjekte wie Aufgabe, Abgabe, Feedback und Kurs. Entwirf API-Endpunkte wie Aufgabe erstellen, Aufgabenliste laden, Abgabe speichern und Feedback anzeigen. Danach implementierst Du einen vertikalen Schnitt: Eine Aufgabe erstellen und anzeigen. KI kann Dir beim Formulieren von User Stories, beim Entwerfen eines Datenmodells, beim Schreiben von Tests und beim Refactoring helfen.
Beispiel für eine User Story
Als Lehrkraft möchte ich eine Aufgabe mit Titel, Beschreibung und Abgabefrist erstellen, damit Lernende wissen, was sie bis wann bearbeiten sollen. Akzeptanzkriterien könnten sein: Ein Titel ist Pflicht. Eine Beschreibung ist Pflicht. Die Abgabefrist darf nicht in der Vergangenheit liegen. Nur berechtigte Lehrkräfte dürfen Aufgaben erstellen. Nach dem Speichern wird die Aufgabe in der Aufgabenliste angezeigt.
Diese User Story ist besser als ein vager Auftrag wie „Baue Aufgaben“. Sie enthält Rolle, Ziel, Nutzen und prüfbare Kriterien. Genau solche Klarheit verbessert sowohl menschliche Entwicklung als auch KI-Unterstützung.
Interaktive Aufgaben
Quiz: Teste Dein Wissen
Was bedeutet Systemdenken in der Full-Stack-Entwicklung? (Problemraum, Datenfluss und Rückkopplungen betrachten) (!Nur möglichst schnell Code schreiben) (!Ausschließlich das Frontend gestalten) (!Alle Entscheidungen der KI überlassen)
Welche Aussage beschreibt Full-Stack-Entwicklung am besten? (Arbeit an Frontend, Backend, Datenbank und Schnittstellen) (!Nur das Entwerfen von Logos) (!Nur das Schreiben von Datenbankabfragen) (!Nur das Testen fertiger Programme)
Was ist ein sinnvoller Zweck von Prompt-to-Prototype? (Eine Idee schnell in einen überprüfbaren Prototyp überführen) (!Tests dauerhaft vermeiden) (!Sicherheitsregeln abschalten) (!Den Quellcode nie mehr lesen)
Warum ist unkritisches Vibe Coding riskant? (Weil erzeugter Code ohne Verständnis unsicher oder fehlerhaft sein kann) (!Weil KI grundsätzlich keine Texte erzeugen kann) (!Weil Prototypen immer fertige Produkte sind) (!Weil Frontend und Backend dabei verschwinden)
Welche Rolle sollte der Mensch beim KI-Pair-Programming übernehmen? (Ziele setzen, Ergebnisse prüfen und Verantwortung tragen) (!Alle Vorschläge ungeprüft übernehmen) (!Nur Fehlermeldungen kopieren) (!Tests nach der Veröffentlichung schreiben)
Was kennzeichnet Agentic Coding? (KI-Agenten planen Aufgaben, ändern Code und führen Tests aus) (!Eine Datenbank speichert nur Bilder) (!Ein Browser ersetzt das Backend) (!Ein Diagramm wird automatisch zur fertigen App)
Was ist ein professioneller erster Schritt beim Debugging? (Fehler reproduzierbar beschreiben) (!Zufällig Dateien löschen) (!Die Fehlermeldung ignorieren) (!Ohne Test direkt deployen)
Warum ist ein API-Vertrag wichtig? (Er legt Eingaben, Ausgaben und Fehlerformate fest) (!Er ersetzt jede Datenbank) (!Er verhindert automatisch alle Bugs) (!Er ist nur für Farben im Frontend zuständig)
Welche Aussage zu Tests in KI-gestützter Entwicklung ist richtig? (Tests prüfen, ob KI-generierter Code erwartetes Verhalten erfüllt) (!Tests sind bei KI-Code überflüssig) (!Tests dürfen nur manuell erfolgen) (!Tests ersetzen jede Architekturentscheidung)
Was gehört zu verantwortungsvoller KI-Nutzung in Projekten? (Sensible Daten schützen und Ergebnisse prüfen) (!Passwörter in Prompts kopieren) (!Lizenzfragen ignorieren) (!Code ohne Review veröffentlichen)
Memory
| Systemdenken | Beziehungen und Wechselwirkungen erkennen |
| Frontend | Sichtbare Benutzeroberfläche |
| Backend | Serverseitige Logik |
| API | Schnittstelle zwischen Systemteilen |
| Debugging | Fehler systematisch finden |
| Deployment | Anwendung bereitstellen |
| Testautomatisierung | Verhalten wiederholt prüfen |
| Code Review | Änderungen gemeinsam bewerten |
Drag and Drop
| Ordne die richtigen Begriffe zu. | Thema |
|---|---|
| Problemrahmen | Ziele und Grenzen klären |
| Systemmodell | Komponenten und Datenflüsse skizzieren |
| API-Vertrag | Eingaben und Ausgaben festlegen |
| Vertikaler Schnitt | Eine kleine Funktion vollständig umsetzen |
| Monitoring | Verhalten im Betrieb beobachten |
Kreuzworträtsel
| Frontend | Welche Schicht ist vor allem für die sichtbare Oberfläche zuständig? |
| Backend | Welche Schicht verarbeitet Logik und Datenzugriffe? |
| Debugging | Wie nennt man das systematische Finden und Beheben von Fehlern? |
| Deployment | Wie nennt man das Bereitstellen einer Anwendung? |
| Datenbank | Wo werden strukturierte Daten dauerhaft gespeichert? |
| Prompting | Wie heißt das gezielte Formulieren von Eingaben an eine KI? |
LearningApps
Lückentext
Offene Aufgaben
Leicht
- Begriffskarte: Erstelle eine Begriffskarte zu Frontend, Backend, Datenbank, API, Testing und Deployment. Ergänze zu jedem Begriff ein eigenes Beispiel.
- Promptvergleich: Formuliere zwei Prompts für dieselbe kleine Funktion. Einer soll ungenau sein, der andere soll Kontext, Ziel und Prüfkriterien enthalten. Vergleiche die erwarteten Ergebnisse.
- Fehlerbeschreibung: Denke Dir einen einfachen Fehler in einer Webanwendung aus und beschreibe erwartetes Verhalten, tatsächliches Verhalten und Schritte zur Reproduktion.
- Stack-Recherche: Recherchiere einen typischen Softwarestack für Webentwicklung und erkläre, welche Aufgabe jede Komponente übernimmt.
Standard
- Systemskizze: Zeichne eine Architektur für eine kleine Lernplattform mit Frontend, Backend, Datenbank und API. Beschreibe die wichtigsten Datenflüsse.
- User Story: Schreibe drei User Stories für eine Lernaufgaben-App und formuliere zu jeder Story mindestens drei Akzeptanzkriterien.
- KI-Code-Review: Lasse Dir von einer KI Beispielcode für eine kleine Funktion erzeugen. Prüfe anschließend Lesbarkeit, Fehlerfälle, Sicherheitsrisiken und Testbarkeit.
- Testplan: Entwickle einen Testplan für eine Login-Funktion. Unterscheide normale Nutzung, falsche Eingaben, Rechteprüfung und technische Fehler.
Schwer
- Vertikaler Schnitt: Implementiere oder plane eine vollständige Mini-Funktion von der Oberfläche bis zur Speicherung. Dokumentiere Frontend, API, Backend, Datenbank und Tests.
- Agentic-Coding-Regeln: Entwirf Regeln für den sicheren Einsatz eines KI-Entwicklungsagenten in einem Teamprojekt. Berücksichtige Rechte, Tests, Review, Datenschutz und Rollback.
- Debugging-Protokoll: Untersuche einen echten oder simulierten Fehler systematisch. Erstelle ein Protokoll mit Hypothesen, Prüfschritten, Ergebnis und endgültiger Ursache.
- Architekturentscheidung: Vergleiche zwei mögliche Architekturen für eine Webanwendung. Begründe, welche Du wählen würdest, und bewerte Wartbarkeit, Sicherheit, Kosten und Teamfähigkeit.

| <inputbox>
type=create break=no preload=CHAT GPT TEXT HIER EINFÜGEN default= width=30 placeholder= Dein MOOC Titel buttonlabel=MOOC erstellen </inputbox> |

Lernnachweis
Für den Lernnachweis erstellst Du ein kleines, nachvollziehbares Entwicklungsportfolio. Es soll zeigen, dass Du nicht nur Begriffe kennst, sondern einen KI-gestützten Entwicklungsprozess kritisch planen, durchführen und bewerten kannst.
- Projektportfolio: Dokumentiere Problemdefinition, Zielgruppe, Systemmodell, Stack-Entscheidung, API-Idee, Teststrategie und Sicherheitsüberlegungen für eine kleine Webanwendung.
- Prompt-Dokumentation: Sammle mindestens fünf Prompts, die Du für Analyse, Architektur, Implementierung, Test und Debugging verwenden würdest. Erkläre jeweils, warum der Prompt professionell formuliert ist.
- Qualitätsprüfung: Bewerte einen KI-generierten oder selbst geschriebenen Codeausschnitt anhand von Korrektheit, Lesbarkeit, Testbarkeit, Sicherheit und Wartbarkeit.
- Reflexion: Beschreibe, an welchen Stellen KI hilfreich war und an welchen Stellen menschliche Prüfung unverzichtbar blieb.
- Präsentation: Stelle Deinen Entwicklungsweg in einer kurzen Präsentation, einem Lernvideo, einem Poster oder einer schriftlichen Projektdokumentation vor.
Lernkontrolle
- Transferaufgabe Systemdenken: Du sollst eine KI bitten, eine komplette App zu erstellen. Erkläre, warum es gefährlich wäre, ohne Systemmodell zu starten, und entwirf stattdessen eine sinnvolle Schrittfolge.
- Architekturanalyse: Eine Anwendung hat ein schönes Frontend, aber viele Fehler bei Datenvalidierung und Rechteprüfung. Analysiere, welche Full-Stack-Schichten betroffen sind und welche Maßnahmen nötig wären.
- Prompt-Verbesserung: Verbessere einen ungenauen Prompt wie „Mach mir eine Nutzerverwaltung“ zu einem professionellen Entwicklungsauftrag mit Kontext, Akzeptanzkriterien, Tests und Sicherheitsanforderungen.
- Debugging-Transfer: Ein API-Endpunkt liefert manchmal falsche Ergebnisse. Entwickle einen Debugging-Plan, der Reproduktion, Logs, Datenbankprüfung, Tests und mögliche Ursachen berücksichtigt.
- Ethik und Datenschutz: Ein Team kopiert echte Nutzerdaten in ein KI-Werkzeug, um Fehler zu finden. Bewerte das Vorgehen und schlage sichere Alternativen vor.
- Qualitätsbewertung: Eine KI erzeugt lauffähigen Code ohne Tests und Dokumentation. Entscheide, ob dieser Code produktionsreif ist, und begründe Deine Bewertung anhand mehrerer Qualitätskriterien.
OERs zum Thema
Der Wikipedia-Artikel zum Softwarestack bietet eine passende Grundlage für den Begriff des Stacks und die Einordnung von Full-Stack als Zusammenspiel mehrerer Softwarekomponenten.
Links
aiMOOC-Projekte
Schulfach+


aiMOOCs



aiMOOC Projekte


THE MONKEY DANCE





{{#ev:youtube | https://youtu.be/rFhZlg38Zf8?si=9KdMNZYRkRD81YTo%7C 500 | center}}
|
{{#ev:youtube | https://youtu.be/Ob7etf9QuBo?si=t_NBA71bWg3Rq3LI%7C 500 | center}}
| <inputbox>
type=create break=no preload=MOOCit Vorlage default= width=30 placeholder= Dein MOOC Titel buttonlabel=MOOC erstellen </inputbox> |