1. Tag: Einstieg (8 Stunden) — ohne NAO

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?
• Was sind Ihre Erfahrungen mit Programmierung?
• Was haben Sie in Informatik in der Schule behandelt?

⟶ Strichliste zu den Fragen am Whiteboard (Vorkenntnisse, Informatik in der Schule, Programmiersprachen)

Ziele dieser Veranstaltung

⟶ zu den Folien wechseln…

MakeCode Arcade (bis zu 45 Minuten)

Tutorial „Chase the Pizza“ parallel auf iPad oder zweitem Laptop durchklicken und vorführen zum Mitmachen, siehe https://arcade.makecode.com

→ Sprache in MakeCode Arcade auf Deutsch umstellen, damit Studies leichter folgen können!

Studierende gehen zu makecode.com und starten Arcade

Icons aus Galerie auswählen, Hardware, Konsole Vollbild, Am Ende auf Smartphone laden (Tutorial fertig), andere Tipps/Tricks?

Aufgabe: Geschwindigkeit ändern, Countdown ändern, stay in screen, second food with higher score, eigene Anpassungen?

MakeCode Arcade (bis zu 45 Minuten)

p5.js (Teil 1: Einführung, ca. 35 Minuten)

• p5.js-Editor vorstellen: https://editor.p5js.org
• Play, Stop, Auto Refresh, Edit -> Tidy Code usw.
• setup, draw, console.log zeigen
• Koordinationsystem beginnt links oben, Referenz zeigen

Einfaches Beispiel:

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER); // Rechtecke ausgehend von ihrer Mitte zeichnen
  noFill(); // Rechtecke nicht farbig ausfüllen
  noLoop(); // Programm nur einmal ausführen
}
 
function draw() {
  background('white');  // Farben: RGB, hexadezimale Werte, … möglich
  
  square(100, 120, 50); // kleines Quadrat oben links
  square(width/2, height/2, 200); // größeres Quadrat unten rechts
}

Generatives oder Creative Coding:

In Anlehnung an „Untitled 1974 (Squares)“ von Vera Molnár (*1924, Pionierin der Computerkunst).

Zwischenschritt 1 (nur draw, ohne setup):

function draw() {
  background("white");
 
  // 3 Quadrate mit aufsteigender Größe
  square(width / 2, height / 2, 20);
 
  square(width / 2, height / 2, 40);
 
  square(width / 2, height / 2, 60);
}

Zwischenschritt 2 (nur draw, ohne setup):

function draw() {
  background("white");
 
  // 3 paar Quadrate (aufsteigend groß, „zufälliger“ Versatz)
  let offsetX = 20;
  let offsetY = -10;
  let length = 20;
  square(width / 2 + offsetX, height / 2 + offsetY, length);
 
  offsetX = -12;
  offsetY = 23;
  length = 40;
  square(width / 2 + offsetX, height / 2 + offsetY, length);
 
  offsetX = 5;
  offsetY = -19;
  length = 60;
  square(width / 2 + offsetX, height / 2 + offsetY, length);
}

Lösung mit for-Schleife und random-Werten für offset:

// Eine Lösung für "Untitled 1974 (Squares)" von Vera Molnar
function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  noLoop();
  noFill();
}
  
function draw() {
  background('white'); // Farben: RGB, hexadezimale Werte, … möglich
  
  for(let length = 10; length < 300; length += 10) {
    let offsetX = random(-30, 30);
    let offsetY = random(-30, 30);
  
    square(width/2 + offsetX, height/2 + offsetY, length);
  }
}

Aufgaben zum Experimentieren

⟶ Mit circle() Kreise statt Quadrate erstellen

Mit stroke() lässt sich die Linienfarbe festlegen (siehe https://p5js.org/reference/#/p5/stroke)

⟶ Farbe der Linien (zufällig) ändern, siehe Code-Beispiel:

let colors = ['red','white','blue','green','yellow','orange','black'];
 
// in der Schleife:
stroke(random(colors));

PAUSE

Gemeinsam arbeiten wir uns durch dieses Mini-Tutorial, welches ein einfaches Memory-Spiel mit p5.js schrittweise entwickelt.

Das fertig gestellte Memory-Spiel kann kurz im p5.js-Editor gezeigt werden: https://editor.p5js.org/behrends/sketches/gpnqu4ATk

p5.js (Teil 1: Einführung, ca. 35 Minuten)

Aufgaben zum Experimentieren

• Perplexity: https://perplexity.ai → beantwortet Fragen in Kombination mit Websuchen und Angaben von Quellen
• ChatGPT: https://chatgpt.com → als Lerntutor und zur Code-Generierung (am Besten in der kostenpflichtigen Version)
• Es gibt auch gute Alternativen zu ChatGPT, z.B.:
  • Claude: https://claude.ai
  • Google’s Gemini: https://gemini.google.com

p5.js (Teil 2: Memory-Spiel, ca. 55 Minuten)

Vorstellung der Funktionsweise von GitHub Copilot in VS Code.

Vorbereitung Studierende:

• VS Code installieren
• p5.js-Extension installieren: P5-Server (https://marketplace.visualstudio.com/items?itemName=osteele.p5-server)
• p5.js in VS Code kurz vorführen, siehe p5 in „Activity Bar“ (linke Leiste)
• GitHub Copilot wird später beantragt (siehe unten)

Nun beginnen wir, das Spiel „Vier Gewinnt“ in p5.js mit Hilfe von GitHub Copilot zu entwickeln. Das fertige Spiel kann hier kurz gezeigt werden: https://editor.p5js.org/behrends/sketches/a3POvmyKN

Interaktive Demo von GitHub Copilot:

• Die meisten Schritte werden in Copilot Chat ausgeführt.
• Vorgehensweise für Spielentwicklung mit Copilot festlegen
• Schrittweise durchgehen.

Tipps zur Benutzung von Copilot:

• Copilot Chat kann über „Activity Bar“ (linke Leiste) geöffnet werden.
• Fenster von Copilot Chat in Editor öffnen (mit …-Menu oben und dann „Open Chat in Editor“). Danach nach unten oder neben den Code verschieben.
• Copilot Chat beantwortet nur Fragen zur Programmierung. Manchmal müssen die Fragen mit direktem Bezug zum Code oder zur Programmierung umformuliert werden.
• Anhand von Kommentaren und Autovervollständigung geniert Copilot passenden Code („ghost code“).
• Copilot reagiert auf einige Tastenkombinationen:
  • TAB → Codevorschlag vervollständigen
  • Alt-] → durch alternative Vorschläge blättern
  • Hover → durch alternative Vorschläge blättern
  • CTRL-Enter → Alternativen anzeigen (neuer Bereich rechts wird geöffnet)
• Rechtsklick im Code und dann Copilot-Menu wählen (inline chat, explain, fix, …)
• jedes Jahr neue Features checken, Studierende fragen und ggf. aktualisieren
• Copilot bei Bedarf ausschalten durch Klick auf das Copilot-Icon unten in der Status-Bar (wichtig für das Lernen der Programmierung im 1. Semester!)

GitHub Copilot kostenlos für Studierende beantragen:

• 1. Schritt: Studierenden-Zugang freischalten
     https://docs.github.com/en/education/explore-the-benefits-of-teaching-and-learning-with-github-education/github-global-campus-for-students/apply-to-github-global-campus-as-a-student
• 2. Schritt Github Copilot einrichten (u.a. in VS Code)
     https://docs.github.com/en/copilot/using-github-copilot/getting-started-with-github-copilot
• ⟶ Links jedes Mal checken und in Moodle stellen

MITTAGSPAUSE (ca. 45 Minuten)

KI-Tools allgemein (ca. 30 Minuten?)

crisp-game-lib ist eine JavaScript-Bibliothek für die Programmierung klassischer Arcade-Spiele, die im Browser ausgeführt werden. Oftmals sind diese Spiele so minimalistisch, das sie nur einen Button benötigen, d.h. nur mit einer Taste, Mausklick oder Antippen des Bildschirms gespielt werden können. Beispiele:

• Paku Paku (1D-Pacman): https://abagames.github.io/crisp-game-lib-11-games/?pakupaku
• Quellcode besteht aus 189 (!) Zeilen JavaScript: https://github.com/abagames/crisp-game-lib-11-games/blob/main/docs/pakupaku/main.js
• Liste einiger crisp-game-lib-Spiele für den Browser: http://www.asahi-net.or.jp/~cs8k-cyu/browser.html

Gemeinsam entwickeln wir nun ein Spiel namens pin climb mit crisp-game-lib. Es kann hier gespielt werden: https://abagames.github.io/crisp-game-lib-11-games/?pinclimb

Für dieses Spiel werden wir nur ca. 60 Zeilen JavaScript-Code benötigen.

Mit dem folgenden Tutorial geht es nun los: https://behrends.github.io/mini-tutorials/pinclimb/

Nützliche Links zu crisp-game-lib:

• API-Referenz von crisp-game-lib: https://abagames.github.io/crisp-game-lib/ref_document/modules.html
• Code einiger Spiele: https://github.com/abagames/crisp-game-lib-11-games/tree/main/docs
  Das kürzeste Spiel besteht aus 84 Zeilen JavaScript-Code (Pillars3D), das längste aus 553 Zeilen (Skygolf).

GitHub Copilot (bis zu 90 Minuten)

Weitere Tools (jedes Jahr checken):

• https://leonardo.ai
• https://makereal.tldraw.com