Demos und Beispiele (4 Stunden)

Es werden verschiedene Themen vorgestellt und gemeinsam ausprobiert.

Wenn wir wollen, können wir Gruppenarbeit mit NAO ermöglichen.

Auf der [Webseite von Microsoft Makecode Arcade 
(arcade.makecode.com)](https://arcade.makecode.com) finden Sie 
mehrere Tutorials unter „_Beginner Skillmaps_“ und 
„_Next Level Skillmaps_“. Suchen Sie sich je nach eigenem Interesse 
und verfügbarer Zeit ein oder mehrere Tutorials aus und arbeiten 
Sie diese durch. 
 
Zusätzlich können Sie bestehende Spiele nach eigenen Vorstellungen 
anpassen oder damit beginnen, eine eigene Spielidee umzusetzen.

Vibe Coding einer App (bis zu 60 Minuten)

→ Ziel dieser Vorführung ist zu zeigen, wie mächtig aktuelle KI-Agents sind.

In der Vorlesung „App-Entwicklung“ im 5. Semester des Studiengangs Informatik (TIF) war viele Jahre folgende Prüfungsleistung für eine zu programmierende App vorgegeben:

Folgende mobile Lern-App soll mit Expo (React Native) umgesetzt werden. Ich gebe dir eine Liste von Anforderungen. Falls dir etwas unklar ist oder du mehr Infos von mir benötigst, dann kläre diese mit mit bevor du anfängst zu programmieren.
 
- **Allgemeines**
  - Die Daten werden lokal auf dem Gerät gespeichert.
  - Es gibt eine Liste von Kategorien (oder Themen bzw. Kurse) — diese stehen für beliebige Themen oder Vorlesungsinhalte, die jemand lernen möchte (Beispiele: Englisch, Geographie, Marketing, Kotlin, Algorithmen, etc.). Kategorien enthalten beliebig viele Fragen.
- **Verwaltungsmodus:** 
  - Kategorien haben einen Namen und können erstellt, bearbeitet und gelöscht werden.
  - Fragen bestehen aus Frage und Antwort(en) und gehören zu einer Kategorie. Sie können erstellt, bearbeitet und gelöscht werden.
  - Es soll mindestens drei unterschiedliche Fragetypen geben, z. B. 
      - „Multiple Choice für die Auswahl einer Antwort aus 3-4 Möglichkeiten, 
      - Frei formulierbare Antwort in einer Texteingabe,
      - Vorgegebene Antwort mit Fehlern muss in einer Texteingabe korrigiert werden (z. B. bei Code),
      - Lückentext,
      - oder weitere Fragetypen passend zur Kategorie.
- **Anwendungsmodus (hier Lernmodus)**
  - Die Auswahl einer Kategorie führt zu einer Liste von Fragen zu dieser Kategorie.
  - Die Fragen können als Quiz zum Lernen durchgearbeitet werden:
       - Es wird gefragt, wie viele Fragen zu dem Thema  beantwortet werden sollen.
       - Für diese Anzahl werden aus dem Thema zufällige Fragen gewählt.
       - Hierbei werden nacheinander die einzelnen Fragen gestellt und dazu können Antworten eingegeben werden. Zu den Antworten gibt es passende Rückmeldungen (richtig/falsch o.ä.).
   - Lernfortschritt anzeigen (z. B. „X Fragen von Y Kategorien richtig beantwortet“).
 
Weitere Ideen: 
- Zählen der Lernversuche für bestimmte Kategorien
- Erinnerungen zum Lernen
- Lernstatistiken

Gruppen von 2-3 Leuten konnten diese App bauen oder eigene Ideen mit entsprechendem Umfang umsetzen. Dafür waren sie einige Wochen beschäftigt.

Mit KI Coding Agents wie z. B. Replit  oder OpenAI Codex  lässt sich diese App durch „Vibe Coding“ ohne Beachtung des Codes in ca. 30 Minuten erstellen.

Wir führen dies in zwei Schritten durch:

• Designs bzw. UI-Mockups erstellen
• App mit Coding Agent umsetzen

Vorgehen:

• https://stitch.withgoogle.com  mit Prompt: Erstelle mir Designs zu folgender App (Aufgabentext von oben und dann den Aufgabentext von oben einfügen)
• Replit  oder OpenAI Codex CLI ? mit Prompt mit Plan-Modus: Lass uns folgende App bauen (+ Aufgabentext von oben) und dann in Build-Modus

PAUSE

In der Pause kann der Coding Agent weiterarbeiten und ggf. Inputs erhalten.

Vibe Coding App: Ergebnis und Diskussion (bis zu 30 Minuten)

Wir schauen uns das Ergebnis des Coding Agents an und diskutieren die aktuellen Möglichkeiten von KI und deren Auswirkung auf die Bildungs- und Arbeitswelt (nicht nur im Coding-Bereich).

Weitere Demos (restliche Zeit)

Wir könnten weitere Coding Agents wie Claude Code oder GitHub Copilot zeigen.

Außerdem wären weitere Informationen zum Umgang mit KI Agents sinnvoll:

• Begriffe: LLMs, Modelle, Reasoning, Tokens, Context, Subagents,
• Text, Bilder, Code im Chat erstellen
• Computer Use: Work mit jeglichem digitalem Tool, z. B. mit Powerpoint
• AGENTS.md, Skills/Plugins, MCP, usw.
• Kritischer Umgang: Berechtigungen, Halluzinationen, Brain Rot
• → dies könnte Ausgangspunkt eines eigenen Workshops sein (TIF und weitere?)
• u.v.a.m.

→ Aus den Live-Beispielen etwas auswählen, siehe nächste Seite

→ Heute werden weitere mögliche Themen gezeigt und spätestens beim nächsten Termin wird eine Themenliste in Moodle veröffentlicht.

→ Teams dürfen sich auch eigene Themen suchen (sollten praktisch anwendbar sein).