Einstieg in die Veranstaltung (4 Stunden)

• Vorstellungsrunde
• Ziele der Veranstaltung
• Vibe Coding Demo
• weiteres Demo

Vorstellung (ca. 45 Minuten)

Persönliche Vorstellung

• Prof. am SZI der DHBW Lörrach seit 2013
• davor 15 Jahre in unterschiedlichen Bereichen der Software-Entwicklung gearbeitet
• Entwicklungsleiter der DHWB Lörrach Campus App  (und auch der Campus Rallye App)
• Themen: Programmierung, Webentwicklung, mobile Apps, …
• Digitale Lehre: Online/Präsenz, Didaktik, …

Anekdote: Programmieren ist heute viel zugänglicher als zu meiner Studienzeit. Mitte der 90er Jahre gab es nur wenige Webseiten und kaum jemand besaß einen Computer…

Vorstellung des Kurses

• Wie lautet Ihr Name?
• In welchem Unternehmen sind Sie angestellt?
• Mit welchen Programmiersprachen haben Sie Erfahrung zusätzlich zu Java aus 1. Semester?

→ Strichliste zu Programmiersprachen am Whiteboard

Fragen an den gesamten Kurs

• Wer hatte in der Schule Informatik/Programmieren?
• Welche Programmiersprache wurde unterrichtet?
• Gibt es Leute, die regelmäßig KI-Tools einsetzen? Wenn ja, welche?

Ziele dieser Veranstaltung (15 Minuten)

⟶ zu den Folien wechseln…

Vibe Coding einer App (ca. 30 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 CLI  lässt sich diese App durch „Vibe Coding“ ohne Beachtung des Codes in knapp 45 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-Bereicht).

Nächstes Demo (restliche Zeit)

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