Wie man winzige programmierbare Roboter benutzt, um Kindern das Codieren näher zu bringen

Vielleicht fragst du dich: "Eh, warum interessiert es mich wirklich, ob Kinder das Codieren lernen?" Nun, ich kann dir versichern, dass du nicht die einzige Person bist, die das gedacht hat. Sie haben vielleicht nicht einmal eigene Kinder. Warum sollte es Sie interessieren?

"Unabhängig davon, ob Sie die Geheimnisse des Universums aufdecken oder nur eine Karriere im 21. Jahrhundert anstreben möchten, ist die grundlegende Computerprogrammierung eine wesentliche Fähigkeit, die Sie erlernen müssen."
- Stephen Hawking

Dies gilt sowohl für Kinder als auch für Eltern und Großeltern.

In diesem Artikel geht es nicht um Codierung, sondern darum, Kindern das strukturierte Denken und Lösen von Problemen beizubringen.

Vor 6 Jahren veröffentlichte der Netscape-Pionier Marc Andreesen im Wall Street Journal einen Aufsatz mit dem Titel „Why Software is Eating the World“.

Dieser Artikel ist jetzt fast 6 Jahre alt, was zeigt, dass dies schon vor 6 Jahren ein heißes Thema war. Und seine Popularität ist exponentiell gewachsen. Sie sollten Ihre Kinder also nicht davor schützen, was ihnen in Zukunft helfen wird.

Lesen Sie diesen Link, um zu sehen, wie der Aufbau eines Tools, das Bibliotheken, Schulen und Bildungseinrichtungen hilft, das Unterrichten unterhaltsam und unterhaltsam zu gestalten.

Warum würden Sie Ihren Kindern das Codieren beibringen?

Die Arbeit mit Kindern ist großartig. Wenn Sie sehen, wie sie schneller lernen, kreativer sind und sich auf ihre Vision konzentrieren, können Sie Ihre Freizeit mit etwas füllen, das wichtig ist.

Wir haben fast ein Jahr lang Scratch- und Makey-Makey-Workshops gegeben, bevor wir beschlossen, ein neues Tool zu entwickeln, mit dem wir Logik lernen und die Grundlagen der Programmierung vermitteln können.

Makey-Makey-Workshop in der Stuttgarter Stadtbibliothek

Als wir Kindern die Aufgabe gaben, einen neuen Wecker zu erstellen, hatten sie einige sehr kreative Lösungen. Viele davon würden uns zumindest komisch vorkommen.

Es gab viele Male Fälle, in denen ich dachte, ich hätte keine Lösung finden können.

Eine der Lösungen für die Weckeraufgabe

Wir dachten anfangs darüber nach, eine Plattform zu verwenden, die CodeCombat oder Code.org ähnelt. Mit CodeCombat müssen Sie jedoch "Code schreiben", was nicht das war, was wir wollten. Und Code.org war wirklich einfach, zu einfach für unseren Anwendungsfall.

Wir wollten, dass die Plattform ihren Nutzern eine steile Lernkurve bietet. Die Levels fangen ganz einfach an und steigen dann schnell auf einen höheren Schwierigkeitsgrad auf, damit die Benutzer das Beste daraus machen können. Da wir wussten, dass dieses Tool in Ereignissen verwendet wird (was später beschrieben wird), könnten wir einige Ebenen mit Hilfe und Erklärungen versehen.

Wir haben auch einige der bereits veröffentlichten verfügbaren Tools recherchiert. Dies hat uns geholfen, einen besseren Überblick über die Vor- und Nachteile bereits etablierter Spiele und Tools zu bekommen. Wir haben diese Suche hier dokumentiert.

Nachdem wir unsere Nachforschungen angestellt und uns mit Professoren und Projektleitern Per getroffen hatten, wussten wir (unser technischer Berater David, Paul, Johannes und ich), wohin wir mit unserer Reise wollten.

Die Idee

Unsere Idee war, dass das Programm für jüngere Kinder geeignet ist und gleichzeitig ältere Kinder nicht abschreckt.

Zuerst dachten wir darüber nach, den Computerteil durch die Verwendung der Welt der Magie zu vereinfachen. Die Idee war, die Konzepte des Programmierens mit verschiedenen Zaubersprüchen einzuführen, die von einem kleinen Zauberer beigebracht wurden. Dies hätte uns den Vorteil gegeben, "Magie" bereitzustellen, wenn komplexere Logik benötigt wurde, wie im Fall der Pfadfindung.

Die Kinder konnten dann später die Logik hinter diesen „magischen“ Zaubersprüchen beobachten und verstehen, wie die Wegfindung mit der Grundlogik umgesetzt wurde, die sie gelernt hatten.

Eines der ersten Modelle der Zaubereridee

Nach vielen Iterationen und Diskussionen entschieden wir uns für einen weniger märchenhaften Ansatz und den Einsatz von Robotern, die mit den bereitgestellten Logikblöcken „programmierbar“ sein könnten. Die Roboter würden aus einer Fabrik gespawnt, in der sie bei einer Produktion ihr Verhalten bekamen.

Benutzer haben die Möglichkeit, Roboter zu bauen, die unterschiedliche Aufgaben ausführen können, z. B. Ressourcen abbauen oder andere Roboter suchen und bekämpfen.

Das war der Moment, an dem Robotopia (zu dieser Zeit hieß es „Project-X“) geboren wurde.

Robotopia-Logo

Per, unser Projektmanager, entschied, dass wir mehr experimentelle Frameworks und Technologien verwenden müssen, um das Beste aus diesem Projekt herauszuholen.

Er präsentierte uns ein unbekanntes (zumindest zu diesem Zeitpunkt) Front-End-JavaScript-Framework, das einen schönen funktionalen Ansatz ermöglichte. Es erinnerte uns an Elm.

Das Tool hieß Choo. Stellen Sie sicher, dass Sie es überprüfen. Es ist toll.

Die Kommunikation für den Ereignismodus sollte mit der Peer2Peer-Kommunikation (P2P) funktionieren. Johannes wurde unser P2P-Forscher. Seine Aufgabe war es, eine feste Verbindung zu unseren Schülern herzustellen.

Wenn Sie interessiert sind, können Sie sich eingehend mit den im Abschnitt "Technik" verwendeten Technologien befassen. Von dort aus können Sie wahrscheinlich mehr über Tools erfahren, von denen Sie noch nie zuvor gehört haben (zumindest für mich war dies der Fall).

Der wahrscheinlich wichtigste Teil des Projekts war die Benutzeroberfläche. Unsere Benutzer waren Kinder und junge Erwachsene, die noch nie zuvor codiert hatten. Deshalb mussten wir eine Schnittstelle wählen, die das Codieren nicht vereinfacht, sondern das Zusammenstellen und Testen erleichtert.

So fanden wir Blockly.

Es war die perfekte Wahl für unser Projekt. Es war einfach zu integrieren, modular und vor allem JavaScript-kompatibel. Sie können die Website besuchen und sich einen Eindruck von der Leistungsfähigkeit verschaffen.

Ein Beispiel für die Programmiersprache Blockly

Hinweis: Schauen Sie sich Blockly an und überlegen Sie, ob Sie es für Ihr nächstes Projekt verwenden möchten. Es ist einfach zu integrieren und verfügt über leistungsstarke Codegeneratoren für alle wichtigen Programmiersprachen. Es ist nicht nur für Kinder gedacht, sondern bietet auch Nicht-Programmierern ein Forum zum Aufbau komplexer Logik.

Um mehr Informationen zu erhalten, klicken Sie hier.

Es war die richtige Kombination von Werkzeugen, die uns den Impuls gab, Robotopia zu verwirklichen.

Das Spiel

Sobald wir unsere Idee und unseren technischen Stack hatten, konnten wir endlich mit dem Codieren beginnen.
Da wir jedoch noch nie mit den Werkzeugen gearbeitet hatten, mussten wir eine steile Lernkurve durchlaufen, um an Dynamik zu gewinnen und dem Projekt die gebührende Aufmerksamkeit zu schenken.

Wir haben unsere gesamte Freizeit genutzt, um das Projekt zu erstellen. Am Anfang haben wir sogar an einem Wochenend-Hackathon-Event teilgenommen, damit wir das ganze Wochenende über programmieren konnten. Für die Kernlogik des Spiels hatten wir nur zwei Entwickler und ungefähr vier Monate Zeit, um alle Vorlesungen und Tests für dieses Semester einzuschließen. Johannes hat sich zuerst um die P2P-Ereignislogik gekümmert und ein Minispiel (das später aufgegeben wurde) entwickelt, das eine bessere Beteiligung im Ereignismodus ermöglicht.

Das Hackathon-Wochenende, an dem wir über 20 Stunden lang programmiert haben, hat sich als wertvoll erwiesen. Am ersten Tag hatten wir etwas, das den Leuten gezeigt werden konnte. Wir hatten einen Editor und eine Figur, die wir mithilfe der grafischen Programmiersprache Blockly auf einem Raster bewegen konnten.

Eine ältere Version mit Robot Rick ist noch im Programm

Da wir keinen Künstler hatten, der Vermögenswerte zur Verfügung stellen konnte, mussten wir sicherstellen, dass unsere Werkzeuge nicht wie Müll aussahen. Da wir große Fans von Rick und Morty sind, haben wir einige ihrer mobilen Spiele genutzt, um unser Tool zu verbessern, auch wenn es nicht für Kinder geeignet ist.

Als unsere Frist näher rückte, ersetzten wir die Vermögenswerte von Rick und Morty durch Roboter. Wir haben auch dafür gesorgt, dass die Leute unser Spiel spielen können, indem wir diese Website genutzt haben.

Die endgültige Version hatte einen schönen Überblick, in dem die Leute frühere Levels besuchen und so ihr Wissen festigen können.

Eine nach Themen getrennte Liste von Tutorials

Nach Auswahl eines Levels erhalten Sie Informationen zu den Zielen für das Level. Dann können Sie das Level mit einer vorgewählten Anzahl von Blöcken lösen. Dies gab uns die Möglichkeit, in den späteren Levels langsam immer komplexere Blöcke hinzuzufügen.

If-Bedingungsstufe (Fortgeschrittene)

Sobald Benutzer ein Level bestanden haben, erhalten sie eine Zusammenfassung der erreichten Ziele. Dadurch wird ein neuer Block für die nächsten Level freigeschaltet.

Schalte einen neuen Block für die nächsten Level frei

Lass den Wettbewerb beginnen

Nachdem die Kinder etwas über die Funktionsweise der Blöcke gelernt hatten, testeten wir ihr Wissen, indem wir einen Wettbewerb veranstalteten, bei dem sie versuchten, die meisten Ressourcen in kürzester Zeit abzubauen.

Deshalb mussten wir zwei verschiedene Ansichten erstellen.

Benutzer können den Robotopia-Editor verwenden, um die Logik ihrer Roboter zu erstellen, ihre Implementierung zu testen und gleichzeitig ihr Verhalten permanent zu verbessern.
Benutzer geben ihren Anzeigenamen und den Raum ein, dem sie beitreten möchten (Räume sind die Wettbewerbe, die mit der Präsentatoransicht geöffnet werden können).

Benutzer können ihre eigene Logik entwickeln, um zu gewinnen

Die Moderatoransicht wird mit einem Projektor einem Klassenzimmer von Kindern gezeigt, damit diese den Wettbewerb sehen können. In dieser Ansicht können Benutzer einen Raumnamen eingeben, mit dem Benutzer am Wettbewerb teilnehmen können. In dieser Ansicht können Sie sehen, wie viele Punkte jeder Benutzer hat und wie viel Zeit bis zum Ende der Runde verbleibt.

Zwei Benutzer können eins gegen eins spielen. Ihre Roboter werden aus den grauen Fabriken gespawnt.

Nach unserer Präsentation erhielten wir viele positive Rückmeldungen. Dies hat unser Vertrauen gestärkt. Wir zeigten dann die Präsentation einem Klassenzimmer von Kindern und arbeiteten mit ihnen durch die verschiedenen Ebenen.

Erschöpft aber glücklich. Unser Team: Paul, Per, Tim und Johannes (von links nach rechts, von oben nach unten)

Hier ein kurzer Eindruck von der Veranstaltung:

Die Tech

Per hatte ein paar Meilensteine ​​für unser Projekt. Er wollte nicht nur testen, was wir gemeinsam erarbeitet hatten, sondern auch, dass wir Open-Source-Szenen verwenden. Das bedeutete für uns, dass wir ermutigt wurden, kleine JavaScript-Bibliotheken zu verwenden und den Entwicklern die aufgetretenen Probleme mitzuteilen.

Per hatte die Möglichkeit, mit dem Schöpfer von Choo, Yoshua, Kontakt aufzunehmen und ihn in einem Online-Meeting zu bitten. Dies sollte uns dazu bringen, mit Choo loszulegen!

Obwohl das Treffen nicht stattfand (wegen eines Fahrradunfalls von Yoshua), konnten wir uns bei mindestens zwei verschiedenen Gelegenheiten mit Yoshua über Choo unterhalten.

Wir haben auch ein paar Patches für andere Open-Source-Projekte über GitHub eingereicht.

Gelernte Lektion: Wenn Sie ein Projekt mit Open Source-Technologie durchführen, greifen Sie zu. Kontaktieren Sie den Ersteller. In den meisten Fällen hilft Ihnen der Ersteller gerne weiter. Hinter den wirklich großen Projekten stehen nur wenige Menschen, die gerne mit Open Source-Inhalten arbeiten. Sie wollen nur zeigen, was sie getan haben, und die Leute wollen sie benutzen.

Blockartig

Wie bereits erläutert, haben wir Blockly für unsere Benutzeroberfläche ausgewählt. Wenn Sie ihre Webseite besuchen und sich ihre Beispiele ansehen, werden Sie feststellen, dass sie bereits viele Lehrmittel eingerichtet hat. Da das abstrakte Design das Erstellen neuer Blöcke vereinfacht, können Sie es in jedes gewünschte Spiel oder jede gewünschte App integrieren.

Es ist einzigartig, wie Einzelpersonen und insbesondere Kinder die verschiedenen Codierungsblöcke verwenden, um das Verhalten zu erstellen. Die verschiedenfarbigen Blöcke erleichtern es, jeden Block mit einem Verhalten zu verknüpfen. Darüber hinaus steht es Entwicklern frei, bei der Einführung neuer Konzepte einige Blöcke zur Verfügung zu stellen. Ein weiteres unglaubliches Merkmal dieses Frameworks ist, dass Sie einfach vom Stapeln von Blöcken zum Schreiben von Code und dann schnell zwischen ihnen wechseln können.

Eigenschaften

Hier sind einige Funktionen von Blockly:

  • Es ist eine grafische Programmiersprache
  • Sie können damit eigene Blöcke erstellen und formatieren
  • Es ist mit dem Web und mobilen Geräten kompatibel
  • Es ist in vielen Projekten etabliert
  • Es hat die Fähigkeit, die meisten Sprachen zu interpretieren

Auch Projekte wie Microsofts Micro: Bit verwenden Blockly zum Unterrichten.

Micro: Das Spiel des Lebens

Peer2Peer

Die Peer2Peer (P2P) -Technologie ist cool.

Warum? Weil Entwickler damit Apps erstellen können, die nicht nur hervorragende Funktionen bieten, sondern auch die Abhängigkeit von zentralen Diensten verringern.

Glücklicherweise haben die großen Player auf dem Markt (vor allem Google) versucht, P2P im Browser verfügbar zu machen. Die Technologie heißt WebRTC und ist ein Webstandard. Dies bedeutet, dass sie über JavaScript im Browser verfügbar ist.

Teil unserer Projektspezifikation war es, so wenig Back-End-Infrastruktur wie möglich zu haben. Also keine schweren Server, nur eine einfache HTML-Seite mit JavaScript. Wir müssten unseren Spielstatus-Client verwalten, indem wir nur WebRTC-Signalisierungsserver verwenden (die mit digitalen Telefonbüchern verglichen werden können), um die P2P-Verbindung herzustellen.

Eigenschaften

Hier sind einige Funktionen von P2P:

  • Es ist dezentralisiert
  • Es ist für das Web verfügbar (WebRTC)
  • Es ist einfach zu bedienen (einfacher Peer)
  • Es wird nur ein Singling-Server für die Erstverbindung verwendet
Fotoquelle: curlewresearch.com

Mit der P2P-Technologie können Sie großartige Dinge tun. Beispielsweise können Sie Dateien ohne zentrale Berechtigung zwischen Clients senden. Sie können dies in Ihrem Browser tun. Ein Beispiel dafür finden Sie hier.

Wenn Sie die nächste Stufe erreichen möchten, können Sie einen vollständig dezentralen Open-Source-Spotify-Klon (PeerMusic) erstellen. Klicken Sie hier, um ein Beispiel zu sehen.

Peermusic ist ein mobiler Musikplayer, der den Browser lokal ausführt. Durch die Kombination mit der einfachen und verschlüsselten P2P-basierten Freigabe von Musikdateien sollen alle praktischen Funktionen moderner Musikplayer bereitgestellt werden.

Choo

Choo ist eine unterhaltsame und funktionale Programmiersprache, mit der robuste Front-End-Anwendungen erstellt werden. Die Entwickler von Choo hatten bei der Erstellung eine besondere Philosophie im Hinterkopf. Sie glaubten, dass das Programmieren Spaß machen und leicht und nicht stressig sein sollte und dass es cool ist, süß zu sein. Und das Verwenden von Fachwörtern, ohne sie zu erklären, führt zu schlechten Ergebnissen und macht den Leuten Angst.

Informationen zur Philosophie von Choo finden Sie auf der GitHub-Repository-Seite. Es ist interessant und inspirierend.

Eigenschaften

Hier sind einige Funktionen von Choo:

  • Das Mindestgewicht beträgt 4 kb
  • Es ist ereignisbasiert
  • Es ist eine kleine API mit nur sechs Methoden
  • Es hat nur minimale Werkzeuge
  • Es hat ein isomorphes Design, das sich nahtlos in Node und Browser einfügt
  • Es ist niedlich. Choo Choo!

Die Art von "Hello World" für Funktionsprogrammiersprachen ist eine "Counter" -App. Bei Choo sieht das ungefähr so ​​aus.

Das sieht einfach und leicht aus, oder? Wenn Sie interessiert sind, sollten Sie es auf jeden Fall ausprobieren. Sie haben viele großartige Ressourcen.

Esper.js

Dies ist ein großartiger JavaScript-Selbstinterpreter mit einem hohen Fokus auf Testausführung und Laufzeit-Introspektion. Unserer Meinung nach ist dieses Programm nicht so seriös, wie es sein sollte, wie gut es ist.

Leider gibt es für esper.js keine echte Dokumentation. Es gibt nur die Kommentare im Code und einige kleinere Erklärungen, die die Verwendung erschweren. Aber es lohnt sich auf jeden Fall, einen Blick darauf zu werfen. Auf der Seite Blockly befindet sich ein Dolmetscher. Aber für unseren Anwendungsfall war es nicht gut genug. Und wir haben uns einfach in esper.js verliebt. Vielen Dank an CodeCombat für das Open Sourcing.

Eigenschaften

Hier sind einige Funktionen von esper.js:

  • Es hat einen JavaScript-Interpreter
  • Es hat eine Testumgebung für die Ausführung
  • Es ist für CodeCombat gebaut
  • Es bietet schrittweise Ausführungen
  • Es erstellt einen kompletten Abstract Syntax Tree (AST)

Klicken Sie hier, um sich die aktuelle Demo anzusehen.

Demo von esper.js

Die Robotermaschine

Wenn zwei Teams im Turniermodus gegeneinander antreten, benötigen wir eine Umgebung, die simuliert, dass die Roboter mit der Spielwelt interagieren. Jeder Roboter hat sein eigenes Programm und jeder führt jede Runde eine Aktion aus. Die Laufzeit überwacht den Zustand jedes Roboters und der Spielwelt. Bei jedem getakteten Ereignis führt die Laufzeit die nächste Aktion jedes Roboters aus und sendet ein Ereignis an die Spielwelt.

Die Spielwelt enthält die gesamte Spiellogik. Es ist beispielsweise dafür verantwortlich, dass die Roboter sich nicht auf Wasserfeldern bewegen können.

Eigenschaften

Hier sind die Merkmale der Robotermaschine:

  • Es bietet eine rundenbasierte Simulation
  • Es können mehrere Roboter gleichzeitig ausgeführt werden
  • Es verfügt über ein Ereignissystem, das Bots auslöst, beispielsweise wenn ein Roboter eine Ressource entdeckt
  • Es bietet eine API, mit der die Roboter mit der Welt interagieren können
Konzept der Robotermaschine

Du kannst helfen

Wenn Sie dieses Projekt für interessant halten und Ihre eigene Veranstaltung planen möchten, sind Sie hier genau richtig.

Gehen Sie einfach in unser GitHub-Repository und suchen Sie den Abschnitt „Wie Sie das nutzen können“. Dort wird erklärt, wie Sie dieses Projekt zu Ihrer eigenen Veranstaltung machen können.

Hier sind die Dinge, die Sie benötigen, um eine Veranstaltung wie diese zu organisieren:

Elemente, die Sie zur Planung einer Veranstaltung benötigen

  • Ca. 1,5 Stunden
  • Ein Computer mit einem aktuellen Browser für jedes Kind
  • Ein Projektor und eine große Leinwand zur Darstellung der Konkurrenz
  • Tutoren, die den Kindern helfen können, wenn sie Fragen haben

Die Veranstaltung ist dann in 4 Abschnitte unterteilt:

  • Tutorials
  • Programmierung der Roboter
  • Die Roboter konkurrieren lassen
  • Verbesserung der Programme

Sie können über jeden der Schritte hier lesen.

Wenn Sie Fragen dazu haben, wie und wo Sie eine solche Veranstaltung organisieren oder wie Sie sie am besten planen, wenden Sie sich bitte an uns.

Wir lieben, mit Kindern zu arbeiten. Wenn Sie es versuchen, werden Sie es sicher nicht bereuen. Sie werden lernen, Dinge einfacher und logischer zu erklären, was Ihnen hilft, als Entwickler und als Person zu wachsen.

Versuch es. Wir meinen es ernst.

Danke fürs Lesen.

Wir würden uns freuen, Ihre Meinung zu erfahren. Sie können mich also gerne kommentieren oder per E-Mail kontaktieren.

Folgen Sie uns auch auf YouTube und spielen Sie Robotopia auf GitHub.

Vergessen Sie nicht, auf die Schaltfläche zum Klicken zu klicken und mir auf Twitter, GitHub, Youtube und Facebook zu folgen, um mir auf meiner Reise zu folgen.

Wir suchen immer nach neuen Möglichkeiten.

Sie können uns gerne kontaktieren. Wir würden uns freuen, mit Ihnen in Kontakt zu sein.

Ich werde ab September für ein Praktikum in Palo Alto, Kalifornien, sein. Ich würde dich gerne treffen! Wenn Sie interessiert sind, schreiben Sie mir eine E-Mail. Ich würde mich freuen, in Kontakt zu sein!

Wenn Sie jemand sind, der tatsächlich bei Google arbeitet und dies liest, würde ich mich freuen, das Team hinter Blockly kennenzulernen!