15. Unterrichtsblock

KI Entwicklerkurs

Kursinhalte

  • Funktionsplanung
  • Logik
  • Technische Umsetzung

Login Funktion

Funktionsverständnis & Planung

Die Login- und Registrierungsfunktion gehört zu den zentralen, aber auch komplexeren Aufgaben in deiner App. Sie verbindet Benutzeroberfläche, Eingabelogik, Validierung und Datenverarbeitung – und erfordert ein gutes Verständnis für Abläufe und Zustände. Damit du diese Funktion gezielt umsetzen kannst, ist es hilfreich, die Logik vorab zu skizzieren – unabhängig davon, ob du später manuell programmierst oder mit KI arbeitest.

Beim Prompt Coding ist die Planung kein nachgelagerter Schritt, sondern ein integraler Bestandteil: Du musst wissen, was du brauchst, wie die Funktion ablaufen soll und welche Zustände berücksichtigt werden müssen. Erst dann kannst du einen sinnvollen Prompt formulieren, der dir funktionalen und wartbaren Code liefert.

In dieser Phase entwickelst du eine visuelle Skizze des Registrierungsprozesses – ein sogenanntes „Flowchart-Light“. Du überlegst dir Schritt für Schritt, was passieren soll, wenn ein:e Nutzer:in sich registriert: vom Klick auf den Button über die Eingabe bis zur Validierung und Speicherung. So entsteht ein klarer Ablauf, den du später entweder selbst umsetzt oder als Grundlage für dein Prompting nutzt.

Diese Art der Funktionsplanung hilft dir, komplexe Abläufe zu durchdenken, Fehlerquellen frühzeitig zu erkennen und deine App strukturiert weiterzuentwickeln – ganz gleich, mit welcher Methode du arbeitest.

Aufgabe: Skizziere den Registrierungs-Flow

Ziel: Du entwickelst ein einfaches Ablaufdiagramm („Flowchart-Light“) für den Registrierungsprozess deiner App.

Beispielhafte Schritte:

  1. Nutzer:in klickt auf „Registrieren“-Button
  2. Eingabefelder erscheinen (z. B. Name, E-Mail, Passwort)
  3. Eingaben werden geprüft (z. B. Passwortlänge, E-Mail-Format)
  4. Bei Erfolg: Daten werden gespeichert
  5. Bei Fehler: Fehlermeldung erscheint

Vorgehen

  • Einzelarbeit: Skizziere den Ablauf auf Papier oder digital (z. B. in Notion, Figma, Excalidraw)
  • Nutze Pfeile, Icons oder einfache Kästen, um die Schritte zu visualisieren
  • Markiere Entscheidungspunkte (z. B. „Eingabe gültig?“ → Ja/Nein)
  • Halte die Logik einfach, aber vollständig

Dokumentation

  • Lade deine Skizze in dein Notion-Dashboard hoch oder verlinke sie dort
  • Ergänze eine kurze Beschreibung: Was passiert wann – und warum?

Login-Logik verstehen und anwenden

Die technische Umsetzung einer Login- oder Registrierungsfunktion beginnt nicht mit Code, sondern mit dem Verständnis der dahinterliegenden Logik. Diese Logik beschreibt, was passieren soll, unter welchen Bedingungen und in welcher Reihenfolge. Sie ist das Bindeglied zwischen Benutzerinteraktion und technischer Reaktion – und damit entscheidend für die Funktionalität deiner App.

Was gehört zur Login-Logik?

Ein Login-Prozess besteht aus mehreren logischen Bausteinen:

  • Zustände: Diese beschreiben, in welchem Stadium sich der Prozess gerade befindet. Beispiele: Start, Eingabe erfolgt, Validierung erfolgreich, Fehler erkannt, Login abgeschlossen
  • Bedingungen: Sie prüfen, ob bestimmte Anforderungen erfüllt sind. Beispiele: „Ist das Passwort lang genug?“ „Ist die E-Mail korrekt formatiert?“ „Sind alle Felder ausgefüllt?“
  • Reaktionen: Sie definieren, was als Nächstes passiert – abhängig vom Zustand und den Bedingungen. Beispiele: „Fehlermeldung anzeigen“, „Daten speichern“, „Weiterleitung zur Startseite“

Beispielhafte Logik-Kette

  1. Nutzer:in klickt auf „Registrieren“
  2. Zustand: Eingabe erforderlich
  3. Bedingung: „Sind alle Felder ausgefüllt?“
    • Nein → Reaktion: Fehlermeldung
    • Ja → Zustand: Eingabe erfolgt
  4. Bedingung: „Sind die Eingaben gültig?“
    • Nein → Reaktion: Fehlermeldung
    • Ja → Zustand: Validierung erfolgreich
  5. Reaktion: Daten speichern → Zustand: Login abgeschlossen

Aufgabe: Logik sichtbar machen

Erstelle eine Logikliste oder ein Ablaufdiagramm, das die Zustände, Bedingungen und Reaktionen deiner Login-Funktion zeigt. Du kannst dafür dein Flowchart aus Teil 1 erweitern oder eine neue Darstellung wählen (z. B. als Tabelle oder kommentierter Ablauf).

Dokumentation:

  • Ergänze deine Logikliste in deinem Notion-Dashboard
  • Kommentiere sie direkt im Code oder Prompt, wenn du bereits mit der Umsetzung begonnen hast

Warum ist das wichtig?

Wenn du die Logik klar durchdenkst, kannst du:

Fehlerquellen frühzeitig erkennen

gezielter prompten oder programmieren

deine Funktion später leichter erweitern oder debuggen

Technische Umsetzung & Vertiefung der Login-Funktion

Nachdem du die Logik deiner Login- oder Registrierungsfunktion geplant und visualisiert hast, geht es nun an die technische Umsetzung. Ziel ist es, eine funktionale Eingabemaske zu erstellen, die Eingaben prüft und sinnvoll auf Fehler oder Erfolg reagiert. Du entscheidest selbst, ob du manuell programmierst oder mit KI-Unterstützung arbeitest – wichtig ist, dass du die Abläufe bewusst steuerst und dokumentierst.

Was soll technisch umgesetzt werden?

Die Login-Funktion besteht aus mehreren technischen Bausteinen:

  • HTML: Struktur der Eingabemaske (z. B. Felder für E-Mail, Passwort, Button)
  • CSS: Gestaltung der Maske (z. B. Farben, Abstände, visuelles Feedback)
  • JavaScript: Validierung der Eingaben (z. B. Mindestlänge des Passworts, Format der E-Mail)
  • Optional: Reaktion auf Erfolg oder Fehler (z. B. Anzeige einer Meldung, Weiterleitung)

Alternativ kannst du mit einem gezielten Prompt arbeiten, z. B.: „Erstelle eine Login-Maske mit E-Mail- und Passwortfeld, prüfe die Eingaben und zeige eine Fehlermeldung bei ungültiger Eingabe.“

Erweiterung der Funktionalität

Sobald die Grundfunktion steht, vertiefst du sie durch folgende Elemente:

  • Feedback bei Erfolg und Fehler: z. B. „Willkommen, Selina!“ oder „Passwort zu kurz“
  • Zustandswechsel: z. B. Anzeige eines neuen Bereichs, Wechsel zur Startseite, Aktivierung eines Menüs
  • (Simulierte) Speicherung: z. B. Übergabe der Daten an eine Variable, Speicherung im Local Storage oder Konsolenausgabe

Diese Erweiterungen machen deine App interaktiv und bereiten sie auf reale Anwendungsszenarien vor.

Aufgabe: Login-Funktion umsetzen

  • Wähle deine Methode: manuelles Coden oder Prompting
  • Setze die Eingabemaske technisch um
  • Implementiere eine einfache Validierung
  • Baue eine Reaktion auf Erfolg oder Fehler ein (z. B. „Willkommen“ oder „Passwort zu kurz“)

Hinweis: Du kannst mit Dummy-Daten arbeiten – es geht um die Logik, nicht um echte Accounts oder Datenbanken.

Dokumentation

  • Notiere, welche Methode du gewählt hast und warum
  • Dokumentiere deinen Prozess: Was funktioniert? Wo gab es Schwierigkeiten?
  • Lade Screenshots, Code-Snippets oder Prompts in dein Notion-Dashboard hoch
  • Ergänze deine Logikliste aus Teil 2, falls du neue Zustände oder Bedingungen umgesetzt hast

Abschluss: Fortschritt sichern & Ausblick

Am Ende dieses Blocks nimmst du dir bewusst Zeit, um deine bisherigen Fortschritte zu reflektieren und zu dokumentieren. Du hast in dieser Woche nicht nur deine Webseite strukturell und visuell verbessert, sondern auch begonnen, komplexe Funktionen wie Login und Registrierung zu planen und technisch umzusetzen.

Fortschrittsüberprüfung

PM-Tool aktualisieren: → Markiere erledigte Aufgaben → Ergänze neue To-Dos für die nächste Woche

Was hast du konkret verbessert? → Strukturell: z. B. HTML-Gliederung, Komponentenlogik → Visuell: z. B. Layout, Farben, Icons → Logisch: z. B. Funktionsabläufe, Validierung

Was funktioniert bereits gut – und wo gibt es noch offene Punkte? → Notiere deine Einschätzung in deinem Notion-Dashboard → Ergänze Screenshots, Code-Snippets oder Flowcharts

Reflexion

„Was hat dir bei der Umsetzung geholfen – deine Skizze, dein Prompt oder dein eigenes Verständnis? Was würdest du beim nächsten Mal anders planen oder formulieren?“

→ Notiere deine Gedanken in 3–5 Sätzen. → Du kannst sie später in deiner Präsentation verwenden oder als Grundlage für deine nächste Funktion nutzen.

Hausaufgabe:

Präsentation vorbereiten (Block 10 als Orientierung)

Dauer: ca. 10 Minuten Format: frei wählbar – z. B. Slides, Live-Demo, Notion-Seite, Video, PDF

Inhalte (Vorschläge):

  • Kurze Vorstellung deiner App/Webseite
  • Was hast du manuell programmiert, was per Prompt erstellt?
  • Was hat gut funktioniert – und was war schwierig?
  • Was hast du über Struktur, Codequalität und KI gelernt?
  • Was würdest du beim nächsten Projekt anders machen?

Tipp: Nutze deine Screenshots, Notizen und Reflexionen aus dieser Woche als Grundlage.