Programmieren mit »Swift Playgrounds« - HackMD

<style> div.block { hyphens: auto; text-align:justify; } div.blue { hyphens: auto; text-align:justify; background: rgba(7, 60, 110, 0.3); padding-left:5px; padding-right: 5px; padding-top: 18px; padding-bottom: 10px; } div.orange { hyphens: auto; text-align:justify; background: rgba(222, 110, 6, 0.3); padding-left:5px; padding-right: 5px; padding-top: 18px; padding-bottom: 10px; } img.picturezoom { transition: transform 0.2s; } img.picturezoom:hover { transform: scale(2.0, 2.0); z-index: 100; } div.prefont { font-family: "Courier"; font-weight: bold; text-align: justify; background: rgba(255, 255, 255, 1.0); border: 10px solid white; padding-top:5px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; } div.quelle { font-size: 10px; text-align: right; } </style> # Programmieren mit »Swift Playgrounds«: ### **EINLEITUNG:** <div class = "block"> »<a href="https://de.wikipedia.org/wiki/Swift_(Programmiersprache)" target="_blank" title="Programmiersprache Swift">Swift</a>« ist eine Programmiersprache der Firma Apple Inc. für die Entwicklung von iOS- und Mac-Apps. Um aber Programmieranfänger:innen den Einstieg zu erleichtern, hat Apple »<a href="https://www.apple.com/de/swift/playgrounds/" target="_blank" title="Swift Playgrounds">Swift Playgrounds</a>« auf den Markt gebracht. Auch mit »Swift Playgrounds« können vollwertige Apps produziert werden. Aber das Hauptziel von »Swift Playgrounds« ist es, mithilfe geführter Tutorials einen Einblick in grundlegende Programmierkonzepte zu geben. Die »Playgrounds« sind dabei oft wie Bücher aufgebaut, deren Kapitel man Schritt für Schritt abarbeitet. Die Aufgaben werden nach und nach immer komplexer, bis hin zur Gestaltung einer eigenen Spielewelt. <br /> </div> ### **VORBEREITUNG:** <div class = "block"> Sorgen Sie dafür, dass auf Ihrem Gerät das neueste Betriebssystem läuft und laden Sie dann »Swift Playgrounds« aus dem »[App Store](https://apps.apple.com/de/app/swift-playgrounds/id908519492)« herunter. Starten Sie die App und wählen Sie unten WEITERE PLAYGROUNDS. Suchen Sie »Los gehts mit Code«. (Achtung: zum Herunterladen wird ein Internetzugang benötigt ...). Falls Sie den Eintrag nicht sehen, gehen Sie unten rechts auf ALLE ANZEIGEN. Alternativ könnten Sie auch mit »Programmieren lernen 1« beginnen. Aber »Los gehts mit Code« ist manchmal etwas kompakter in den Beispielen. <div style="hyphens: auto;text-align:justify;background: rgba(124, 124, 124, 0.3);padding-top: 10px;padding-bottom: 1px;padding-left:15px;padding-right:15px;"> Tipp: Die Bedienung der App »Swift Playgrounds« funktioniert über das Touch Display Ihres iPads. Dennoch erleichtert der Einsatz von Tastatur & Maus die Arbeit. </div> <br /> Der Playground »Los gehts mit Code« merkt sich die Lösungen, die Sie eingetippt haben. Vorteil: Man kann jederzeit genau dort weitermachen, wo man aufgehört hat. Nachteil: Falls sich Schüler:innen ein Gerät teilen, sehen die Nachfolger:innen bereits fertige Lösungen. <div style="hyphens: auto;text-align:justify;background: rgba(124, 124, 124, 0.3);padding-top: 10px;padding-bottom: 1px;padding-left:15px;padding-right:15px;"> Tipp: Sie können das Buch jederzeit auf seinen Ursprungszustand zurücksetzen. Bleiben Sie im Startbildschirm MEINE PLAYGROUNDS solange mit dem Finger auf »Los gehts mit Code« bis sich das Kontextmenü öffnet und wählen Sie ZURÜCKSETZEN. Es ist auch möglich, nur einzelne Abschnitte zurückzusetzen. Gehen Sie hierzu in dem Abschnitt, den Sie gerade bearbeiten, rechts oben auf die drei Punkte und dann SEITE NEU BEGINNEN. Alternativ können Sie zusätzlich direkt nach dem Herunterladen von »Los gehts mit Code« eine Sicherungskopie anfertigen. Drücken Sie dazu länger auf den Download und wählen Sie TEILEN und IN DATEIEN SICHERN. Suchen Sie in AUF MEINEM IPAD einen geeigneten Speicherplatz. </div> <br /> <br /> </div> ### **ERSTE SCHRITTE:** <div class = "block"> Starten Sie »Los gehts mit Code« und folgen Sie einfach den Anweisungen Schritt für Schritt. Sie möchten einen Überblick über alle Übungen erhalten? Klicken Sie links oben auf das MENÜSYMBOL. Sie wollen kapitelweise vorspringen? Verwenden Sie die Pfeile linsk und rechts vom KAPITELTITEL. Sie beenden die gesamte Übung mit dem Pfeilsymbol links von »Los gehts mit Code«. Nach der Einführung in das jeweilige Thema, öffnet sich die Welt. In der linken Spalte können Sie Ihren Quellcode eingeben. Sobald Sie in das Eingabefeld tippen, erscheinen unten alle bisher verwendeten Befehle (auch selbstgeschriebene ...). Manchmal jedoch verdeckt die sich öffnenden Tastatur das Eingabefeld. Schließen Sie sie und versuchen Sie sie erneut mit der Pfeilspitze ganz unten rechts zu öffnen. Der Ton nervt? Schalten Sie ihn rechts oben über das LAUTSPRECHERSYMBOL aus. Gehen Sie kapitelweise vor bis einschließlich zum Thema »Bugs finden und beheben«. Fehler finden und beheben ist eine der wichtigsten Aufgaben beim Programmieren (»[Debugging](https://de.wikipedia.org/wiki/Debuggen)«). Programmier:innen sagen immer, sie könnten in 10% der Projektzeit 90% der Funktionalitäten fertigstellen; aber dann bräuchten sie die verbleibenden 90% der Zeit, um alle Fehler auszumerzen und Verbesserungen einzufügen. <br /> </div> ### **EIN CODE FÜR ALLE FÄLLE:** <div class = "block"> Sie könnten jetzt problemlos alle weiteren Kapitel von »Los gehts mit Code« durchgehen. Wir wollen an dieser Stelle aber vorspringen zum Kapitel »Den NOT-Operator verwenden«. Die Besonderheit an dieser Welt: Bei jedem Start werden die Edelsteine neu verteilt und die Treppe an eine andere Position gesetzt. Das heißt, wir benötigen einen sehr flexiblen Code, der alle möglichen Situationen berücksichtigt. Lösen können wir das Problem nur mit einigen Befehlen, die in den übersprungenen besprochen werden. Hier eine Auflistung (*es müssen nicht zwangsläufg alle Befehle verwendet werden ...*): <div style="hyphens: auto;text-align:justify;background: rgba(124, 124, 124, 0.3);padding-top: 10px;padding-bottom: 1px;padding-left:15px;padding-right:15px;"> <b>VARIABLEN</b> let nameDerKonstante = Zahl (Konstante definieren) var nameDerVariable = Zahl (Variable definieren) <br /><br /> <b>VERGLEICHSOPERATOREN</b> < (Vergleichsoperator kleiner als – es gibt noch >, =<, =>) <br /><br /> <b>BOOLSCHE WERTE (wahr/falsch)</b> isOnGem – Abfrage, ob Figur auf einem Feld mit Edelstein steht isBlocked – Abfrage, ob Figur in diese Richtung gehen kann ! (Ausrufezeichen – verkehrt den boolschen Wert in sein Gegenteil) <br /><br /> <b>WHILE-SCHLEIFE</b> while BEDINGUNG {       die while-Schleife wird solange ausgeführt wie die BEDINGUNG erfüllt ist       (Befehle die ausgeführt werden sollen ...) } <br /><br /> <b>FOR-SCHLEIFE</b> for i in STARTZAHL ... ENDZAHL {       for-Schleife – wird solange ausgeführt bis ENDZAHL erreicht ist } <br /><br /> <b>BEDINGTE ANWEISUNG (if | else | else if)</b> if BEDINGUNG {       (Befehle die ausgeführt werden sollen, falls BEDINGUNG erfüllt ist) } else {       (Befehle die alternativ ausgeführt werden sollen ...) } <br /><br /> <b>VORGEGEBENE FUNKTIONEN</b> moveForward()    – FUNKTION (daher die runden Klammern) turnLeft()              – FUNKTION (daher die runden Klammern) collectGem()        – FUNKTION (daher die runden Klammern) <br /><br /> <b>EIGENE FUNKTIONEN SCHREIBEN</b> func funktionsName () {       Befehle, die die Funktion ausführen soll       in die runden Klammern können auch Übergabewerte geschrieben werden ([Parameter](https://de.wikipedia.org/wiki/Parameter_(Informatik))) } </div> <br /> Zu kompliziert? Schreiben Sie zunächst einen sogenannten »[Pseudecode](https://de.wikipedia.org/wiki/Pseudocode)«. Der Pseudocode verwendet dabei umgangssprachliche Formulierungen, um das zu lösende Problem einzukreisen. Hier ein Beispiel (*aber ist das die beste Lösung ...*): <div style="hyphens: auto;text-align:justify;background: rgba(124, 124, 124, 0.3);padding-top: 10px;padding-bottom: 1px;padding-left:15px;padding-right:15px;"> Konstante MaxEdelsteine = 4 Variable GefundeneEdelsteine = 0 BEGINN Solange GefundeneEdelsteine < MaxEdelsteine      geheSchrittVor      prüfeObEdelstein      fallsJa          sammleEdelstein          GefundeneEdelsteine = GefundeneEdelsteine + 1      fallsNein          dreheLinks          prüfeObTreppe      ... ENDE Solange </div> <br /> <br /> </div> ### **EIGENE WELT BAUEN:** <div class = "block"> Laden Sie sich den Playground »Programmieren lernen 2« herunter. »Programmieren lernen 2« zeigt fortgeschittene Techniken ([Objektorientierte Programmierung](https://handbuch-programmieren.de/a/kurze-einf%C3%BChrung-in-objektorientierte-programmierung.html)). Schauen Sie sich das Kaptitel »Weltenbau« an und erfahren Sie, wie Sie eigene Welten bauen können. <br /> </div> ### **PROTOTYPING MIT DEM IPAD:** <div class = "block"> Will man im Unterricht nicht gleich mit dem Programmieren beginnen, bietet es sich an, zunächst in die Gestaltung einer möglichen App einzusteigen. Man spricht bei dieser Vorgehensweise auch von »[Prototyping](https://de.wikipedia.org/wiki/Prototyping_(Softwareentwicklung))« oder einem »[MockUp](https://de.wikipedia.org/wiki/Vorf%C3%BChrmodell)«. Man entwirft dabei nur das Design der gewünschten App: Welche Buttons werden benötigt, wie sollen sie aussehen, wo werden sie platziert? Welche Schrift und Hintergrundgestaltung passt zum Thema? Wie muss die grundsätzliche Interaktivität aussehen? Wie verhindert man, dass man beim Navigieren in eine Sackgasse gerät? Die Umsetzung kann nahezu mit jedem beliebigen Programm erfolgen, in dem sich gestalten lässt und Verlinkungen möglich sind. In Frage kämen also beispielsweise »Microsoft Powerpoint« oder die App »Keynote« auf dem iPad. Hier eine Anleitung mit dem Titel [Eine einfache App entwerfen](https://education.apple.com/learning-center/T049524A) aus dem »Apple Learning Center« für »Keynote«. Oder sehen Sie sich das nachfolgende Video an: <div width="100%"> <iframe width="100%" height="531" src="https://www.youtube.com/embed/RFnBBEziaSo" title="Prototyping mit dem iPad" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div> <br /> </div> ### **TUTORIAL UND LINKS:** <div class = "block"> Das Internet quillt über von Tutorials für »Swift Playgrounds«. Der YouTuber »Nico« hat sich die Mühe gemacht, alle Übungen in 26 Videos Schritt für Schritt durchzuspielen: <div width="100%"> <iframe width="100%" height="531" src="https://www.youtube.com/embed/Bfw2dWUH2FA" title="Swift Playgrounds Tutorial - Deutsch - Programmieren lernen - Teil 1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div> Hier die gesamte YouTube-Playlist: [Swift Playgrounds – Programmieren lernen](https://www.youtube.com/playlist?list=PLzGOoHP0-KA04M5i_7eXin9lGYIiq7TXV) Unbedingt empfehlenswert: [Jede:r kann programmieren – Handbuch »Rätsellösungen«](https://education-static.apple.com/geo/de/education/2019/teaching-code/learn-to-code-solutions.pdf). Hier werden alle Lösungen in Schriftform präsentiert, manche in zwei Versionen (einfach oder mit fortgeschrittenen Techniken). Im »Learning Center« von Apple gibt es eine sehr einfache Einführung zum Thema unter dem Titel »[Programmieren unterrichten mit Swift Playgrounds](https://education.apple.com/learning-center/T021339A-de_EMEIA?backTo=%2Flearning-center)«. Außerdem: Starten Sie die App »Bücher« auf Ihrem iPad und suchen Sie dort nach »Swift Playgrounds: Programmieren 1 & 2« und »Swift Playgrounds: Programmieren 3«. Die Bücher enthalten zu Beginn jeden Themas ein paar Vorschläge, wie man in die jeweiligen Programmierkonzepte einsteigen kann (teils ganz ohne Laptop oder iPad). Gedrucktes Buch: Das einzige auf deutsch verfügbare Buch zu »Swift Playgrounds« stammt von Philip Kiefer (»Programmieren lernen mit Swift Playgrounds«) und ist leider nur noch antiquarisch zu bekommen (ISBN: 978-3842103085) <br /> </div> ### **ALTERNATIVEN ZU »SWIFT PLAYGROUNDS«:** <div class = "block"> Informatik ist nicht gleich Programmieren. Die Grundzüge der Informatik (Algorithmen, Schleifen, Bedingte Anweisungen) lassen sich auch ganz ohne eine spezielle Programmiersprache und aufwändige Technik vermitteln. **Informatik ohne Strom:** Die bekannteste Seite zum Thema Informatik ohne Strom ist sicher »[CS Unplugged](https://www.csunplugged.org/de/)«. Auch »[iLearnIT.ch](https://ilearnit.ch/de/)« lohnt einen Blick. »[Die Magie der Informatik](https://www.cs4fn.org/magie/)« nutzt Kartentricks um in das Feld der Informatik einzuführen. »[AI Unplugged](https://www.aiunplugged.org/german.pdf)« verfolgt das Ziel, Künstliche Intelligenz (KI) ohne technische Hilfsmittel zu erklären. Für »[Machine Learning for Kids](https://machinelearningforkids.co.uk/)« ist dann doch Strom nötig ... Die Hopp Foundation bietet zahlreiche kostenfreie Materialien und Brettspiele zur Informatik an: [Coding in der Grundschule](https://www.hopp-foundation.de/unterrichtsmaterial/zum-bestellen/coding-in-der-grundschule/), [Begeisterbox](https://www.hopp-foundation.de/unterrichtsmaterial/zum-bestellen/begeisterbox/#), [Informatikspiel Hopp Bot](https://www.hopp-foundation.de/unterrichtsmaterial/zum-bestellen/informatikspiel-hopp-bot/#), [Informatikspiel Code Mainia](https://www.hopp-foundation.de/unterrichtsmaterial/zum-bestellen/informatikspiel-code-mainia/), [Informatikspiel Code Fred](https://www.hopp-foundation.de/unterrichtsmaterial/zum-bestellen/informatikspiel-code-fred/), [Informatikspiel UCO](https://www.hopp-foundation.de/unterrichtsmaterial/zum-bestellen/informatikspiel-uco-undefined-cat-object/). **Twine – interaktive Geschichten:** »Twine« ist eine kostenfreie Software, die sich hervorragend eignet, um selber interaktive Geschichten und einfache Computerspiele ohne große Vorkenntnisse zu produzieren. Doch wer will, kann auch unter die Motorhaube von »Twine« schauen und direkt mit CSS, HTML, Variablen und JavaScript arbeiten und so einen ersten Einstieg ins Programmieren wagen: <a href="https://www.multimediamobile.de/sued-twine" title="Twine - Download Materialien" target="_blank">Download Twine unserer Materialien</a> **Lego – Bauen und Programmieren:** »Lego« hört sich für Sie nach reinem Spielen mit kleinen, bunten Bausteinen an? Das war einmal. Seit vielen Jahren bringt »Lego« Produkte auf dem Markt, mit denen man Schüler:innen in die Welt der Programmierung einführen kann. Schauen Sie sich »[Lego WeDo 2](https://www.multimediamobile.de/lego-wedo-2-sued)« an und das neue »LEGO Education SPIKE Prime«. Viele [Medienzentren](https://mz-nds.de/pages/uebersicht-der-medienzentren.php) bieten mittlerweile eine Ausleihe der Lego-Kästen an. Fragen Sie vor Ort auch nach »Ozobots«, »Calliope« oder »mBots«. **Scratch – Visuelles Programmieren:** Programmieren kann für Anfänger:innen frustrierend sein, weil man sich zu Beginn oft erst einmal durch die komplizierte Syntax einer Programmiersprache quälen muss. Es geht aber auch einfacher mit Systemen, die eine visuelle Oberfläche einsetzen. Am bekanntesten ist hier »[Scratch](https://www.multimediamobile.de/scratch-sued)«. Fürs iPad kommen unter anderem »[Scratch JR](https://apps.apple.com/us/app/scratchjr/id895485086?ls=1)«, »[Freggers Play](https://apps.apple.com/de/app/freggers-play/id1084720576)« und [Lightbot: Code Hour](https://apps.apple.com/de/app/lightbot-code-hour/id873943739) in Frage. **Mod-Programmierung:** »<a href="https://www.multimediamobile.de/sued-minetest" title="Minetest - Download Materialien" target="_blank">Minetest</a>« ist die kostenfreie Alternative zu »Minecraft«. Man kann es leicht den eigenen Bedürfnissen anpassen oder sogar eigene Erweiterungen (Mods) für das Spiel programmieren? Interessiert? Dann schauen Sie sich unser Material an: <a href="https://minetest-modding.weebly.com/" title="Minetest - Mod-Programmierung" target="_blank">minetest-modding.weebly.com</a> <br /> </div> ### **INTERESSIERT AN EINER KOSTENFREIEN FORTBILDUNG:** <div class = "block"> Sie wollen sich intensiver mit dem Einsatz digitaler Technik im Unterricht beschäftigen? Dann buchen Sie das »<a href="https://www.multimediamobile.de/sued/" target="_blank">multimediamobil</a>«. Wir bieten kostenfreie Fortbildungen zu fast allen Themen rund um Multimedia an. Falls Sie also wissen möchten, wie Sie Bilder, Töne, Videos, Animationen oder das Internet pädagogisch sinnvoll einsetzen können oder was sich mit Computerspielen, 3D-Modelling oder Autorensystemen, Tablets, Apps und interaktiven Tafeln im Schulunterricht, Studienseminar, in der Erwachsenenbildung und Jugendarbeit machen lässt, werden Sie bei uns bestimmt fündig. <br /> </div>  <div style="font-size: 10px;hyphens: auto;text-align:justify;background: rgba(124, 124, 124, 0.3);padding-left:5px;padding-right: 5px;text-align:center"> Verwendung dieser Inhalte und Materialien im Bildungsbereich unter CC-BY-SA-NC 4.0 mit dem Vermerk »<a href="https://www.multimediamobile.de/workshops-sued" target="_blank">© multimediamobil – Region Süd</a>« erlaubt. </div>