Teil 1: Deine ersten Schritte beim Programmieren

Dieser Artikel ist der erste Teil des Kurses „Programmieren lernen für Anfänger„. Falls du direkt hier gelandet bist, empfehlen wir dir, zuerst diese Vorstellung des Kurses anzusehen.

Deine ersten Programmierbefehle

Wenn man sich verschiedene Anleitungen im Internet anschaut, dann kann Programmieren ganz schön kompliziert und fast ein wenig langweilig wirken. Es wird mit abstrakten Zahlen gerechnet, irgendwelche Texte werden auf der Kommandozeile ausgegeben und bei all dem soll man auch noch etwas lernen. Laaangweilig! Nicht so bei uns! Bei codefuchs hast du von Anfang an anschauliche Beispiele. Du siehst gleich, was du programmiert hast und erlebst, wie der Computer funktioniert. Zu diesem Zweck haben wir ein Spiel entwickelt, mit dem du interaktiv und mit Spaß Programmieren lernen kannst.

Wir präsentieren: Nana.

Nana ist ein Weltraum-Abbaufahrzeug. Es wird von Planet zu Planet gebeamt und muss diverse Aufgaben erfüllen. Hauptsächlich, das seltene, grüne Loridium einsammeln. Loridium wird im ganzen Universum zur Energieerzeugung verwendet und ist besonders wertvoll. Nana wird nicht von einer Zentrale aus gesteuert, sondern vom Bordcomputer. Diesen wirst du programmieren! Machen wir uns erst einmal mit der Basis-Steuerung vertraut.

Klicke rechts oben neben dem folgenden Code auf den grünen Knopf. Dieser startet das Programm und du erlebst Nana bei der Arbeit.


fun solution() {
//sampleStart
    forward()
    turnLeft()
    forward()
//sampleEnd
}

Wie du siehst, hat sich unser Abbaufahrzeug einmal nach vorne bewegt, dann nach links gedreht und danach nochmals ein Feld nach vorne bewegt. Programmcode wird vom Computer grundsätzlich von oben nach unten ausgeführt. Dabei steht eine Anweisung in jeder Zeile. Schauen wir uns den Code mal genauer an:

  1. Der Befehl forward(), zu Deutsch also „vorwärts“ bewegt Nana um ein Feld nach vorne.
  2. Der Aufruf turnLeft(), zu Deutsch „nach links drehen“ in der zweiten Zeile, dreht unser Fahrzeug einmal nach links. Es zeigt nun also nach oben.
  3. Die 3. Zeile forward() bewegt Nana wieder einen Schritt nach vorne.
  4. Da unser kleines Programm an dieser Stelle zu Ende ist, bleibt Nana einfach stehen.

Beim Programmieren ist es üblich, dass alle Befehle wie zum Beispiel forward() und turnLeft() auf Englisch sind. Weil die Computer-Industrie in Amerika als erstes groß geworden ist, hat sich das so weltweit durchgesetzt.

Aufgabe: Verändere den Programmcode oben so, dass Nana zur roten Fahne fährt und dort stehen bleibt.
Tipp: Verwende den „Zurücksetzen“ Knopf am oberen Rand um zu sehen wo Nana startet.

Geschafft? Sehr gut! Das bedeutet, du hast bereits etwas programmiert, yeah!
Solltest du einmal irgendwo stecken und nicht weiterkommen, dann helfen wir dir gerne weiter! Schreib uns dazu einfach ein Kommentar unter dem Artikel oder sende uns eine Nachricht auf Facebook oder per E-Mail.

Wir haben oben noch ein kleines bisschen Code vor dir verborgen, damit die ersten Schritte leichter fallen. Du kannst mit dem (+) Knopf am oberen Rand des Code-Eingabefelds diesen Code sichtbar machen. Was er bedeutet, lernen wir ein bisschen später im Abschnitt über Funktionen.

Fehler

Überall, wo Menschen am Werke sind, passieren Fehler. So auch beim Programmieren. Du vertippst dich, hast dir nicht genau gemerkt, wie der Befehl heißt, oder das Programm macht etwas ganz anderes, als du dir erwartet hast. Merk dir: Fehler sind wichtig! Nur wenn du diese Fehler machst, wirst du dich weiterentwickeln und Neues lernen. Sieh eine Fehlermeldung nicht als einen Rückschritt, sondern als Chance zu verstehen, was passiert ist und warum es so nicht funktioniert hat!

Falls du bei der Lösung der obigen Aufgabe noch auf keine Fehlermeldung gestoßen bist, wird es Zeit die ersten Fehler zu provozieren. Schließlich willst du ja etwas lernen 😉 Es ist nicht schwer, einen Fehler zu provozieren. Lösche ein paar Zeichen oder schreibe den Namen deiner Lieblingsspeise ins Code-Eingabefeld. Was passiert?

Aufgabe: Schaffst du es folgende Fehlermeldungen zu erzeugen? Ein bisschen weiter unten findest du ein Code-Eingabefeld.

  1. Unresolved reference: …
  2. Function invocation ‚…‘ expected
  3. Expecting an expression
    Too many arguments for public fun …: Unit defined in root package

fun solution() {
//sampleStart
    forward()
//sampleEnd
}

Auf welche Fehlermeldungen bist du gestoßen? Hast du neue gefunden? Wir sind neugierig 🙂 Lass es uns in den Kommentaren am Ende der Seite wissen!

Du erhältst den Fehler Unresolved reference: ... wenn du einen Befehl eingibst, den Kotlin nicht kennt. Es sagt dir, dass du auf etwas verweist (englisch to reference), das es nicht auflösen (englisch „resolve“) kann. Wörtlich übersetzt bedeutet „Unresolved reference“: „Unaufgelöster Verweis“. Du wirst diesen Fehler in deiner Programmierlaufbahn wahrscheinlich ziemlich oft sehen. Es reicht, wenn du dich ein klein wenig vertippst. So produziert zum Beispiel die Eingabe forwar() anstatt forward() diesen Fehler.

Die beiden anderen Fehler haben mit vergessenen Klammern zu tun:
Wenn du beide Klammern nach dem Befehl forward weg lässt, erhältst du Function invocation 'forward()' expected.
Wenn du nur die schließende Klammer weg lässt, also zum Beispiel forward( erhältst du Fehler Nummer 3.

Was diese Fehler genau bedeuten und wozu die Klammern eigentlich gut sind, lernen wir etwas später im Abschnitt über Funktionen.

Tipp: Mache es dir zur Angewohnheit Fehlermeldungen zu lesen! Klingt logisch und ist es auch. Leider gibt es sehr viele Programmierer, die anstatt Fehler zu lesen, einfach weiter und weiter probieren. Manchmal kommen sie so auch zu einer Lösung. Der Prozess ist aber sehr frustrierend.

Du hast viel mehr davon, wenn du die Fehlermeldung verstehen kannst. Dabei lernst du und verstehst den Computer besser. Ab dann kennst du die Meldung und weißt genau, auf was du achten musst, wenn sie wieder auftritt.

Abstände, Kommentare und Einrückungen

Beim Programmieren ist es wichtig, dass du selber den Überblick über deinen geschriebenen Code behältst. Das schaffst du, indem du eine Struktur erstellst. Wie genau das funktioniert, schauen wir uns in diesem Kapitel an.

Unten findest du eine weitere Aufgabe, um Nana zu navigieren. Abgesehen von den schon bekannten Befehlen, steht auch etwas Text in brauner Farbe. Dieser Text ist kein gültiger Programmcode. Trotzdem lässt sich das Programm problemlos ausführen. Diese Art von Hinweise, die für Menschen gedacht sind, nennt man beim Programmieren „Kommentare„. Kommentare werden von der Programmiersprache ignoriert. Du schreibst diese, um dir oder anderen Personen, die den Code verstehen wollen, das Leben leichter zu machen. Programmcode kann schnell unübersichtlich und lang werden. Sinnvolle Kommentare helfen, den Code verständlich zu halten.

Jede Zeile die mit einem doppelten Schrägstrich, also // beginnt, ist ein Kommentar. Alles bis zum ende der Zeile wird von der Programmiersprache ignoriert.


fun solution() {
//sampleStart
    turnLeft()
    // Starte das Programm wieder mit dem Pfeil rechts oben.
    // So siehst du wie der Planet aussieht.
    // Diese 3 Zeilen kannst du danach löschen.
    forward()
//sampleEnd
}

Es gibt auch Kommentare, die sich über mehrere Zeilen erstrecken. Diese Beginnen mit /* und enden mit */. Alles dazwischen wird ignoriert, auch wenn es mehrere Zeilen sind. Die folgende Eingabe ist also praktisch gleich, wie das obere Beispiel.


fun solution() {
//sampleStart
turnLeft()
/*
Starte das Programm wieder mit dem Pfeil rechts oben.
So siehst du wie der Planet aussieht.
Diese 3 Zeilen kannst du danach löschen.
*/
forward()
//sampleEnd
}

Aufgabe: Löse die Aufgabe von oben. Welches der beiden Eingabefelder du verwendest ist dabei egal.

Genau wie Kotlin Kommentare ignoriert, werden auch leere Zeilen, sowie Leerzeichen am Anfang einer Zeile ignoriert. Auch diese können dabei helfen, den Code übersichtlich zu halten. Versuche dir anzugewöhnen, hilfreiche Kommentare in deinen Code einzufügen und ihn gut zu strukturieren. Du wirst dankbar sein, wenn du zu deinem Code nach mehreren Monaten Abwesenheit wieder zurück kehrst.

Bei Kommentaren ist es sinnvoller, den Zweck des Codes zu beschreiben, anstatt zu beschreiben was der Code macht.

Aufgabe: Finde den Fehler im Code unten und navigiere Nana zur Fahne!


fun solution() {
//sampleStart
    // rufe 3 mal drehe mach links auf
    turnLeft()
    turnLeft()
    turnLeft()
    // rufe 1 mal vorwärts auf
    forward()
    // rufe 3 mal drehe nach links auf
    turnLeft()
    turnLeft()
    turnLeft()
    // rufe 1 mal vorwärts auf
    forward()
    // rufe 2 mal drehe nach links auf
    turnLeft()
    turnLeft()
    // rufe 4 mal vorwärts auf
    forward()
    forward()
    forward()
    forward()
    // rufe 3 mal drehe nach links auf
    turnLeft()
    turnLeft()
    turnLeft()
    // rufe 1 mal vorwärts auf
    forward()
    // rufe 1 mal drehe nach links auf
    turnLeft()
    // rufe 1 mal vorwärts auf
    forward()
//sampleEnd
}

Wie lange hast du benötigt um den Fehler zu finden? Die Kommentare von oben sind völlig nutzlos und helfen dir nicht bei der Suche des Fehlers! Jeder Programmierer, der ein kleines bisschen Englisch versteht oder Nana schon kennt sieht, dass X mal forward() oder turnLeft() aufgerufen wird.

Aufgabe: Finde den Fehler in folgendem Code und hilf Nana zum Ziel!


fun solution() {
//sampleStart
    // nach unten ausrichten
    turnLeft()
    turnLeft()
    turnLeft()
    
    // durchfahre die Kurve
    forward()
    turnLeft()
    forward()
    
    // fahre ganz nach unten
    turnLeft()
    turnLeft()
    turnLeft()
    forward()
    forward()
    
    // fahre ganz nach rechts
    turnLeft()
    forward()
    forward()
    
    // fahre zur fahne hoch
    turnLeft()
    forward()
    forward()
    forward()
//sampleEnd
}

Wie ist es dir diesmal gegangen?

Die Kommentare in diesem Beispiel machen schon viel mehr Sinn. Sie beschreiben den Zweck des Codes. So kannst du die fehlerhafte Stelle viel schneller finden. Der Kommentar sagt, „fahre ganz nach unten“ aber Nana ist nicht bis ganz nach unten gefahren. So kannst du sofort erkennen, in welchem Abschnitt der Fehler liegt.

Funktionen

In diesem Kapitel beschäftigen wir uns mit Funktionen und beginnen dazu mit einem weiteren Beispiel. Bringe Nana zur grünen Fahne. Diesmal ist es schon etwas komplizierter 🙂 Schreibe dir Kommentare, um die Übersicht im Code zu behalten.


fun solution() {
//sampleStart
    // schreibe hier deine Lösung
//sampleEnd
}

Phuuu, ein ganz schön langes Programm. Meine Lösung hat ganze 25 Zeilen! Das muss besser gehen. Überlegen wir also, wie wir den Code noch kompakter gestalten können.

Jedes mal, wenn wir Nana nach rechts drehen wollen, müssen wir dreimal turnLeft() schreiben. Dabei wäre es doch viel einfacher wenn wir einfach turnRight(), also „drehe nach rechts“ schreiben. Probier es aus!


fun solution() {
//sampleStart
   // Probiere turnRight() mal aus
//sampleEnd
}

Da ist er schon wieder dieser Unresolved reference Fehler. Unser Bordcomputer kennt den Befehl turnRight() nicht. Noch nicht! Wir können ihm diesen nämlich beibringen.

Was ist eine Funktion ?

Alle Befehle, die wir bisher ausgeführt haben, sind sogenannte Funktionsaufrufe. Ein Funktionsaufruf besteht immer aus dem Namen der Funktion, die aufgerufen wird, gefolgt von runden Klammern. Im Falle von turnLeft() ist der Name der Funktion „turnLeft“, danach folgen die Klammern. Bei forward() ist der Name der Funktion „forward“.

Wie entstehen nun diese Funktionen und Befehle, wo kommen sie her? Zunächst bringt jede Programmiersprache zahlreiche Funktionen mit. Aber Programmierer wie du und ich können noch mehr Funktionen hinzufügen. Die beiden Funktionen turnLeft() und forward() sind praktischerweise für dich im Bordcomputer von Nana einprogrammiert. Sie sind dort nicht durch Zauberhand erschienen, sondern wir von codefuchs haben diese hinzugefügt.

So eine Funktion ist einfach ein Block von Code, der einen Namen hat. Dieser Code wird, wie sonst auch, von oben nach unten ausgeführt. Versuchen wir nun, Nana das Rechts drehen mit dem Funktionsaufruf turnRight() beizubringen.

Eigene Funktionen erstellen

Um eine Funktion zu erstellen, verwenden wir das Wort fun.

fun turnRight() {
    // Hier kommt der Code der Funktion hin.
}

Schauen wir uns den Code etwas genauer an. Die erste Zeile beginnt mit dem Wort fun. Es sagt, dass wir eine neue Funktion erstellen wollen. Danach kommt der Name der Funktion. Wir haben uns für unsere Funktion den Namen turnRight ausgedacht. Danach kommen zwei runde Klammern ().  Zwischen der öffnenden geschweiften Klammer { und der schließenden } kann beliebiger Programmcode stehen. Dieser Code wird ausgeführt sobald die Funktion aufgerufen wird.

Das Wort fun ist die Abkürzung vom Englischen Wort „function“. Auf Deutsch also „Funktion“.

Wir haben für unsere Funktion den englischen Namen „turnRight“ gewählt. Weil alle in der Programmiersprache eingebauten Funktionen auf Englisch sind, wäre es inkonsistent und verwirrend wenn wir Deutsch verwenden würden.

Mache bei einem der Beispiele von oben den verborgenen Code sichtbar. Verwende dazu den (+) Knopf am oberen Rand des Eingabefelds. Du siehst, der verborgene Code hat eine Funktion mit dem Namen solution erstellt. Der Code, den du bisher geschrieben hast, war immer zwischen den geschweiften Klammern dieser Funktion! Der Bordcomputer ruft beim Start die Funktion solution() auf. In dieser steht der Code den du in das Eingabefeld schreibst.

fun turnRight() {
   // Hier kommt der Code hin der Nana nach rechts dreht.
}

fun solution() {
   // Hier kommt wie bisher der Haupt-Code hin.
   // Diese Funktion wird vom Bordcomputer beim Start aufgerufen.
}

Du kannst nun mittels turnRight() den Code in der Funktion „turnRight“ ausführen. Das funktioniert genau so wie wenn duturnLeft() oder forward() aufrufst. Der einzige Unterschied ist, dass die Funktion turnLeft für dich nicht sichtbar ist, weil sie von uns mit Nana’s Bordcomputer mitgeliefert wurde. turnRight hingegen hast du selbst erstellt.

Aufgabe: Erstelle im folgenden Eingabefeld die Funktion turnRight. Die Funktion soll Nana nach rechts drehen. Die Funktion solution haben wir von codefuchs schon für dich erstellt. Verwende das (+) um sie zu sehen.


//sampleStart
fun turnRight() {
    // Schreibe hier den code, damit sich Nana nach rechts dreht
}
//sampleEnd

fun solution() {
    turnRight()
    forward()
    turnRight()
    forward()
}

Super! So fällt rechts abbiegen gleich viel leichter 🙂 Es wäre aber auch praktisch, wenn wir gleich 2 oder 3 Schritte nach vorne machen können. Schreib doch auch Funktionen dafür! Wir nennen sie forward2 und forward3.

Aufgabe: Erstelle die Funktionen forward2 und forward3, die Nana zwei bzw. drei Schritte nach vorne bewegen. Die Funktion solution haben wieder wir für dich erstellt.


//sampleStart
// erstelle hier die Funktionen forward2 und forward3

fun turnRight() {
    turnLeft()
    turnLeft()
    turnLeft()
}

fun solution() {
    forward3()
    turnRight()
    forward2()
    turnRight()
    forward3()
}
//sampleEnd

Siehst du wie kurz die Lösung in der Funktion solution ist? Ohne die neuen Funktionen wäre diese viel länger und unübersichtlicher. Normalerweise würdest du von dir erstellte Funktionen in einer eigene Datei abspeichern. So kannst du diese überall in deinem Code verwenden, ohne sie jedes mal neu zu schreiben.

Verwende die neuen Funktionen

Da du jetzt im Funktionen erstellen geübt bist, haben wir im nächsten Beispiel die Funktionen forward2, forward3 und turnRight schon für dich vorbereitet. Außerdem bist du nun bereit, mit Hilfe von Nana endlich das wertvolle Loridium aufzusammeln.

Abschlussaufgabe: Bringe Nana zum Ziel und nimm dabei alle Loridium Steine mit. Zum Aufheben eines Steines kannst du die Funktion takeStone verwenden. Diese ist bereits in Nana’s Bordcomputer vorhanden.

Vergiss nicht, dir hilfreiche Kommentare zu schreiben. Sonst kann es schnell unübersichtlich werden.


fun forward2() {
    forward()
    forward()
}

fun forward3() {
    forward2()
    forward()
}

fun turnRight() {
    turnLeft()
    turnLeft()
    turnLeft()
}

//sampleStart
fun solution() {
    
}
//sampleEnd

Wie ist es dir dabei gegangen? Wie lange ist der Code in der Funktion solution geworden? Kannst du ihn noch abkürzen? Kommen bestimmte Teile immer wieder vor, die du in neue Funktionen verpacken könntest?

Unterhalb findest du unsere Lösung zum Aufklappen. Wir empfehlen dir, diese erst zu öffnen, nachdem du versucht hast, deine eigene Lösung zu optimieren. Nur so lernst du effektiv.


fun forward2() {
    forward()
    forward()
}

fun forward3() {
    forward2()
    forward()
}

fun turnRight() {
    turnLeft()
    turnLeft()
    turnLeft()
}

// Diese Funktion führt Nana um eine Linkskurve im Labyrinth.
// Das Wort "bend" bedeutet auf Deutsch "Kurve".
fun leftBend() {
    turnLeft()
    forward2()
    turnLeft()
}

// Diese Funktion führt Nana um eine Rechtskurve im Labyrinth.
fun rightBend() {
    turnRight()
    forward2()
    turnRight()
}

fun solution() {
    // 1. mal nach unten + kurve
    forward3()
    takeStone()
    forward2()
    leftBend()
    
    // 1. mal nach oben + kurve
    forward3()
    takeStone()
    forward()
    rightBend()
    
    // 2. mal nach unten + kurve
    forward3()
    forward()
    leftBend()
    
    // 2. mal nach oben + kurve
    forward3()
    rightBend()
    
    // 3. mal nach unten + kurve
    forward3()
    leftBend()
    
    // 3. mal nach oben + fahrt zum ziel
    forward()
    takeStone()
    forward()
    turnRight()
    forward()
}

//sampleStart
// Klappe diesen Block auf um unsere Lösung zu sehen
//sampleEnd

Der krönende Abschluss

Hier noch ein Beispiel mit verborgenem Twist 🙂 Es sieht auf den ersten Blick sehr einfach aus…

Aufgabe: Sammle alle Loridium Steine auf und führe Nana zur Flagge.


fun forward2() {
    forward()
    forward()
}

fun forward3() {
    forward2()
    forward()
}

fun turnRight() {
    turnLeft()
    turnLeft()
    turnLeft()
}

//sampleStart
fun solution() {

}
//sampleEnd

Was ist denn da los? Es gibt einen zweiten, verborgenen Level! Deine Lösung muss so gestaltet sein, dass der gleiche Code für beide Level funktioniert. Bisher werden alle unsere Programme immer gleich ausgeführt. Das Programm kann nicht auf Änderungen der Umgebung reagieren. Genau das werden wir im nächsten Teil dieses Kurses „Programmieren für Anfänger“ lernen.

Melde dich bei unserem Newsletter an! Wir erinnern dich sobald der nächste Teil verfügbar ist 🙂

Bis zum nächsten Mal!

5 Kommentare zu „Teil 1: Deine ersten Schritte beim Programmieren“

  1. Hallo ihr lieben, ihr schreibt zwei Mal „roten Fahnen“… der war bei mir aber immer grün! 🙂
    Es hat bis zum Schluss Spaß gemacht!! Ich freue mich auf das nächste Level!

    1. Hi Celine, danke für den Hinweis, ich hab es umgeschrieben.
      Freut uns sehr, dass es dir Spaß gemacht hat. Wir arbeiten bereits fleissig am nächsten Kapitel 🙂

    1. Klicke rechts oben neben dem Code auf den Grünen Pfeil. Dann siehst du den Planeten mit dem Abbaufahrzeug und der Fahne. Das Abbaufahrzeug hat den Namen Nana.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.