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

💡

Todo für Dozent — Vorbereitungen:

NAO mit Basic Channel mitnehmen (NAO8 oder NAO9)
Windows-Laptop aus A335 mitnehmen

NAO und VR-Brillen für Studieninfotag einsetzen? (⟶ Hilfe von Laboringenieur)

Vorstellung (bis zu 60 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)

NAO stellt sich vor

Wir steigen mit der Vorstellung von NAO in die Vorlesung ein…

NAO

Beispiel: Sprachdialog mit NAO (NAO9). Eventuell kurz Choregraphe zeigen.

⟶ Funktioniert Basic Channel ohne WLAN?

⟶ Nur NAO8 und NAO9 haben den Basic Channel installiert

⟶ Im NAO-Labor (A335) haben wir ein WLAN für die NAOs.

⟶ NAO-Programmierung später in A335 in einer kleineren Gruppe (ca. 12 Leute).

⟶ Choregraphe mit NAO auf MacBook testen (v.2.8.8 funktioniert, ggf. Windows-Laptop aus A335 mitnehmen)

💡

Todo für Dozent —

PDFs für NAO in Moodle (Aufgaben, Handbuch)

Textseite in Moodle („Aufgaben für NAO“) erstellen mit folgendem Text:

Mit diesen Aufgaben lernen Sie den Umgang mit NAO und der Software Choregraphe kennen.
 
Vorbemerkungen:
 
- Auf den Laptops in Raum A335 ist die Software Choregraphe Version mit der Nummer > 2.8.… zu verwenden.
- Sie können NAO nach seiner IP-Adresse fragen, indem Sie den Knopf vorne auf seinem Oberkörper drücken
- Zur Verbindung zu NAO in Choregraphe trennen Sie zunächst bestehende Verbindungen mit dem roten Netzwerksymbol (sieht aus wie ein WLAN-Zeichen) und stellen Sie mit dem grünen Netzwerksymbol die Verbindung her, indem Sie dort die IP-Adresse eintragen  (`Used fixed IP/hostname` markieren) und mit `Select` bestätigen.
- Ein Programm besteht aus Boxen, die Sie aus der `Box library` auf die große Fläche in der Mitte ziehen. Boxen werden miteinander verbunden. 
- Bevor Sie ein Programm ausführen, stellen Sie sicher, dass der „Herz“-Knopf deaktiviert ist (Autonomer Modus des NAO muss ausgeschaltet sein)
 
**Tipps**
 
- In der Box Library sind die Boxen für NAO relevant (nicht Pepper)
- Es gibt eine Ordnung von Boxen, z.B. finden sich positive Gemütsgesten in „Moods/Positive/NAO“
- In der Box Library kann nach Boxen gesucht werden (Lupe)
 
### Aufgaben
 
Beschäftigen Sie sich mit folgenden Aufgaben in dem PDF-Dokument `V6 aufgabenheft einsteiger`, das im Moodle-Raum zu finden ist:
 
- 1 Einstiegsaufgabe: Boxprinzip (S.3)
- 5 NAO bewegt seine Hände (S. 8)
- 6 NAO hat Hunger (S. 9)
 
**Sie können aus den Aufgaben frei wählen**
 
**Sie können auch gerne eigene Ideen umsetzen oder Experimente mit verschiedenen Boxen durchführen**
 
Falls Sie mehr zu NAO oder bestimmten Boxen in Choregraphe wissen möchten, 
dann steht Ihnen dazu das NAO-Handbuch zur Verfügung (`handbuch V6`)
 
### Restliche Zeit
 
Falls Sie noch Zeit haben, dann können Sie sich mit weiteren Aufgaben aus dem PDF-Dokument 
`V6 aufgabenheft einsteiger` beschäftigen. 
Hinweis: Manche im PDF erwähnte Boxen haben evtl. andere Bezeichnungen in Choregraphe.

Ziele dieser Veranstaltung

⟶ zu den Folien wechseln…

💡

Todo für Dozent — Folien hier einbetten?

🗓️

Präsentationstermine und Ablauf auf dem Whiteboard skizzieren.

Kurskalender am Projektor zeigen.

PAUSE

💡

Sollten Studierende kein Laptop oder Tablet haben, dann könnten sie für heute einen Laptop aus Raum A335 erhalten.

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?

💡

Todo für Dozent — Falls mit NAO gearbeitet wird und sich der Kurs aufteilt, dann Textseite in Moodle („Aufgaben für MakeCode Arcade”) erstellen mit folgendem Text:

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.

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

💡

Spickzettel (cheat sheet) für p5.js:

https://bmoren.github.io/p5js-cheat-sheet/de.html

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:

Vera Molnar

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));

💡

Todo für Dozent — Textseite in Moodle („Aufgaben für p5.js“) erstellen mit folgendem Text:

Auf [dieser Webseite](https://workshops.progcontent.com/kennenlerntag/02-basics) 
finden Sie ein Tutorial, das Sie durch die Grundlagen von p5.js führt. Dabei 
wird das Logo der DHBW nachgezeichnet.
 
Arbeiten Sie sich durch dieses Tutorial inklusive der Aufgaben durch und 
versuchen Sie, die Beispiele nachzuvollziehen. 
 
Danach können Sie sich mit 
[diesem Tutorial](https://behrends.github.io/mini-tutorials/memory/) beschäftigen, 
das ein einfaches Memory-Spiel mit p5.js erstellt.
 
Falls Sie danach immer noch Zeit und Interesse an p5.js haben, dann können Sie 
versuchen ein Malprogramm zu erstellen, das mit der Maus bedient wird. Mit gedrücktem 
Mausknopf wird ein Kreis (`circle()`) gezeichnet. Änderung der Farbe und der 
Pinselgröße kann durch passende Tastendrücke erreicht werden.

MakeCode Arcade (bis zu 45 Minuten)

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

Einteilung in 2-3 Gruppen für Aufgaben mit NAO, MakeCode, p5.js

👨🏻‍💻

Eventuell kurz crisp-game-lib vorstellen:

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 der Spiele für den Browser: http://www.asahi-net.or.jp/~cs8k-cyu/browser.html
⟶ Tutorial: https://behrends.github.io/mini-tutorials/pin-climb/
API-Referenz von crisp-game-lib: https://abagames.github.io/crisp-game-lib/ref_document/modules.html

🤖

Tipps zu GitHub Copilot geben? (siehe Tag 1 ohne NAO…)

💡

Todo für Dozent — Textseite in Moodle („Aufgaben für Spiele mit crisp-game-lib“) erstellen mit folgendem Text:

Falls Sie Zeit und Interesse haben, dann können Sie sich mit 
[diesem Tutorial](https://behrends.github.io/mini-tutorials/pin-climb/) beschäftigen, 
das ein minimalistisches „Ein-Knop-Spiel“ mit JavaScript und crisp-game-lib erstellt.
 
Mit crisp-game-lib wurde z.B. das Spiel [1D-Pacman](https://abagames.github.io/ crisp-game-lib-11-games/?pakupaku) programmiert.

💡

Aufgaben werden in Moodle veröffentlicht (siehe Markdown-Inhalte für MakeCode Arcade, p5.js und crisp-game-lib oben).

Je nach Geschwindigkeit und Interesse können Tutorials zu MakeCode Arcade (Spiele), p5.js (2D-Grafiken) und crisp-game-lib (Spiele) bearbeitet werden.

Gruppenwahl in Moodle (2 Gruppen, 3 Gruppen wenn mehr als 30 Leute)

Gruppe A geht ins NAO-Labor (Raum A335)
⟶ dort wird NAO und die Aufgabe vorgestellt (siehe Moodle).

Gruppe B bleibt im Kursraum und befasst sich mit Microsoft Makecode Arcade (und bei Interesse mit p5.js).
⟶ Aufgaben siehe Moodle.

Zeit	Gruppe A	Gruppe B
60-90 Min.	NAO (A335)	MakeCode, p5.js, …
15 Min.	PAUSE	PAUSE
60-90 Min.	MakeCode, p5.js, …	NAO (A335)
15 Min.	ggf. gemeinsamer…	…Abschluss

⟶ Ablauf am Whiteboard skizzieren

Tipps für den Umgang mit NAO:

Programm startet nicht? —> Autonomen Modus ausschalten
Roboprax hat Vorführ-App mit Cheat Sheet (siehe NAO-Ordner auf OneDrive)

💡

Liste der Themen (nächste Seite) kurz zeigen und in Moodle veröffentlichen?

1. Tag: Überblick 1. Tag: Einstieg (ohne NAO)