Software entwickeln und debuggen / Digitale Grundbildung

Vom Algorithmus zur Software

Ein Algorithmus beschreibt, wie ein Problem Schritt für Schritt gelöst wird. Manchmal kann diese Schritte ein Mensch und manchmal ein Computer ausführen.

Beispielsweise wissen wir dank dem Algorithmus der rechten Hand-Regel (vorherige Seite), wie die virtuelle Maus aus vielen Labyrinthen herausfinden kann.

Doch wie bringen wir die Maus dazu, diesem Algorithmus zu folgen?

Lustige Illustration der GamBu-Spielfiguren, die auf die Anweisungen der Software warten. — Ohne Regieanweisungen, weiß niemand was er tun soll.

Hier kommt die Software ins Spiel:

Software löst das Problem, indem sie den Algorithmus ausführt.

Software ist eine Sammlung von Code-Anweisungen, die einen Computer so steuern, dass er Aufgaben erledigen kann.

Grundlegende Schritte der Softwareentwicklung

Bringe den Ablauf in die richtige Reihenfolge!

In klaren und detaillierte Schritten definieren, wie die Aufgabe oder das Problem gelöst werden soll.

Entscheiden, in welcher Programmiersprache die Software entwickelt werden soll. Programmiersprachen wie Python, C#, Java oder C++ sind häufige Optionen.

Jeden Schritt des Algorithmus zu einer Anweisung oder einer Gruppe von Anweisungen in die gewählte Programmiersprache übersetzen.

Einen Compiler oder Interpreter verwenden, um den geschriebenen Code in ausführbaren Code umzuwandeln. Dies ist notwendig, damit der Computer den Code verstehen kann.

Die Software gründlich testen, um sicherzustellen, dass sie wie erwartet funktioniert. Wenn Fehler (Bugs) auftreten, müssen sie durch Debugging behoben werden.

Bravo!

Softwarekomponenten

Softwarekomponenten sind eigene Programme oder Teilbereiche der Applikation mit einer ganz bestimmten Aufgabe. Sie werden benötigt, um verschiedene Teile einer Software miteinander arbeiten zu lassen. Nur so kann man sicherstellen, dass eine Applikation (z. B. das GamBu Spiel) gemäß den gewünschten Anforderungen funktioniert.

Ordne die Softwarekomponenten von oben den richtigen Bereichen unten zu. Die Bereiche unten beschreiben Aufgaben die ein Videospiel oder eine Generative KI können müssen.

Info für Lehrende

Videospiel

Generative KI

Auf den Spuren von Bugs

Programmieren ist wie ein schwieriges Rätselspiel, bei dem man ständig nach neuen und cleveren Möglichkeiten sucht, um Probleme zu lösen. Ein bekanntes Problem, das jede Programmiererin und jeder Programmierer kennt, sind sogenannte Bugs.

Lies im SchuBuch woher der Bergriff Bug kommt und mache die dazugehörigen Übungen!

Abbildung eines Entwicklers der versucht mit einer Fliegenklatsche, Bugs auf seinem Bildschirm zu vertreiben. — Bugs können tierisch nerven.

Bugs können während des Entwicklungsprozesses oder nach der Veröffentlichung auftreten und beeinträchtigen die Funktionalität der Anwendung. Insgesamt sind Bugs unvermeidlich, aber Fehlerprotokolle ermöglichen es Entwicklerinnen und Entwicklern, systematisch mit ihnen umzugehen.

Fehlerprotokoll

Oft finden Software-Benutzerinnen und Benutzer Fehler. Zum Beispiel kann jemand in einem Web-Shop nicht auf bestellen klicken, weil der Bestellbutton außerhalb des Fensters liegt. Er schreibt an den Shop: „Ich finde keinen Bestellbutton in Ihrem Shop.“
Wie können nun die Programmiererinnen und Programmierer den Fehler ausbessern? Es reicht jedenfalls nicht, wenn sie auf ihrem Computer die Seite aufmachen, den Bestellbutton sehen und zurückschreiben: „Alles gut, der Button ist wieder da.“

Damit Programmiererinnen und Programmierer einen Fehler ausbessern können, müssen sie folgende Informationen haben:

Was ist der Fehler? Eine Fehlerbeschreibung, zum Beispiel:
„Ich wollte bestellen, aber konnte nirgends einen Button dafür finden.“
Wo ist der Fehler aufgetreten? Zum Beispiel:
„iPhone 12, Safari-Browser, Internet-Adresse des Webshops“
Wie lässt sich der Fehler verursachen? Das ist ein sehr wichtiger Punkt. Zum Beispiel:
„Zuerst klicke ich auf das Bild der Ware, dann auf das Einkaufswagensymbol. Dort kann ich dann einstellen, wie ich bezahlen möchte usw, das funktioniert alles aber darunter ist dann kein Button, um die Bestellung abzuschicken.“

Mit diesem Fehlerprotokoll können Programmiererinnen und Programmierer nun den Fehler nachvollziehen und ausbessern. Am Schluss versuchen sie ihn genau nach der Anleitung nocheinmal zu verursachen und wenn dann alles funktioniert, haben sie den Fehler erfolgreich debuggt.

Bugs finden und beseitigen

Da das Finden und Debuggen von Fehlern sehr viel Spaß machen kann, haben wir in den GamBu-Spielen unten einfache Bugs versteckt.

Zuvor wurde die GamBu Game-Engine mit neuen Möglichkeiten versehen:

In Spielen kann man links unten Gravitation einschalten.
Dazu passend gibt es ein neues Element, damit man nach einem Sprung gut landen kann:
-Element: Wenn eine Spielfigur dieses Element berührt, wird sie gestoppt.

Syntaxfehler

Ein Syntaxfehler tritt auf, wenn der geschriebene Code nicht den Regeln und Strukturen der verwendeten Programmiersprache entspricht. Der Computer kann diesen Code nicht richtig verstehen und zeigt eine Fehlermeldung an, sobald man versucht, das Programm auszuführen.

Auffrischung von ein paar GamBu-Skript-Regeln

Alle Befehle werden klein geschrieben.
Um einer Variablen einen Wert zu geben, schreibt man zum Beispiel: merkwert = 1.5
Eine Programmschleife beginnt immer mit dem Befehlswort: wiederhole

Syntaxfehler finden

Im Bot-Script haben sich Fehler eingeschlichen. Klicke auf die Sprechblase „Debugge mich!" und debugge die 3 Syntaxfehler! Wenn das Script fehlerfrei ist, wird der Affe erfolgreich die Bananen fressen.

Info für Lehrende

GamBu Konsole

Gewonnen!

Bots starten?

Verloren!

Der Seppibär is los!

Assets

Texturen Sounds

Wenn alle Texturen, Bilder und Grafiken von dir selbst erstellt, gemalt oder gezeichnet worden sind, dann stehen sie bei einer Veröffentlichung automatisch unter CC BY-ND. Außer den selbst gemachten dürfen auch Grafiken enthalten sein, die ausdrücklich OHNE NAMENSNENNUNG frei verwendbar sind, dann stehen alle Grafiken, auch deine eigenen, nach Veröffentlichung unter CC0.

Die Texturen sollten genau 62 x 62 Pixel groß sein

Wenn alle Musikstücke und Geräusche von dir selbst erstellt, gesungen, gespielt und komponiert worden sind, dann stehen sie bei einer Veröffentlichung automatisch unter CC BY-ND. Außer den selbst gemachten dürfen auch Sounds enthalten sein, die ausdrücklich OHNE NAMENSNENNUNG frei verwendbar sind, dann stehen alle Sounds, auch deine eigenen, nach Veröffentlichung unter CC0.

Logikfehler

Hierbei handelt es sich um Fehler im Programmablauf, bei dem die Logik des Codes nicht korrekt ist. Das bedeutet, dass der Code ausgeführt wird, aber das Ergebnis ist nicht das, was man ursprünglich erzielen wollte. Solche Fehler können schwer zu finden sein, weil das Programm ohne Fehlermeldung durchläuft. Das ist auch in folgendem Spiel so. Es ist schwer, den Logikfehler zu finden und es ist noch viel schwerer, ihn auszubessern.

Logikfehler finden

Achtung, das ist eine besonders schwierige Aufgabe. Im folgendem GamBu-Spiel gibt es einen Logikfehler: Manchmal wird eine Spielfigur unsichtbar und damit wird das Spiel dann unspielbar. Finde diesen Fehler und debugge ihn! Gehe folgendermaßen vor:

Gewinne das Spiel!
Finde heraus, wie man den Fehler hervorrufen kann!
Schreibe alle notwendigen Schritte, die eine Spielerin oder ein Spieler machen muss, bis der Fehler auftritt, in ein Fehlerprotokoll!
Debugge den Logikfehler im Gambu-Script!

Info für Lehrende

GamBu Konsole

Gewonnen!

Bots starten?

Verloren!

Der Seppibär is los!

Fehlerprotokoll

UI-Fehler

Diese Fehler beziehen sich auf Probleme in der Benutzeroberfläche, die das Aussehen oder die Funktionalität beeinträchtigen können. Dazu gehören beispielsweise falsch platzierte Schaltflächen oder schlecht lesbare Texte.

UI-Fehler finden

Ist im User Interface dieses GamBu-Spiels etwas nicht so, wie man es erwarten würde?

Info für Lehrende

Bestimmt als Klasse, welche Lösung ihr am besten findet!

In eine Entwicklungsumgebung blicken

Eine Entwicklungsumgebung, oft auch als Integrated Development Environment (IDE) bezeichnet, ist eine Applikation. Sie hilft Entwicklerinnen und Entwicklern dabei, Software-Anwendungen zu erstellen, zu bearbeiten, zu testen und zu debuggen. Eine IDE bietet in der Regel eine integrierte Suite von Werkzeugen und Funktionen, die den gesamten Softwareentwicklungsprozess unterstützen.

Eine kostenlose, weit verbreitete und für fast alle Programmiersprachen konfigurierbare IDE ist zum Beispiel Visual Studio Code:

Abb. 3

Game- oder KI-Code?

Nimm die Bilder unter die Lupe und bestimme von welcher Applikation der Code ist!

Hacks & Tricks

Log-Befehl

Zum Debuggen in GamBu-Script hilft der Log-Befehl.

Syntax

Beispiel

Anmerkung

log ["Text" oder Variable]

bot_nummer = 7 bei sicht von element bot_nummer gruessen block gruessen log "grüße Bot" bot_nummer blockende

Text (in Anführungszeichen "") oder Werte von Variablen können in der Konsole geloggt werden.

Auch in anderen Programmiersprachen wie JavaScript funktioniert der Log-Befehl sehr ähnlich.

console.log(myName, myAge);

Konsole im Browser

Dein Browser hat eine eingebaute Konsole. Die Konsole kann durch Rechtsklick auf eine beliebige Webseite im letzten Eintrag im Kontext-Menü „Untersuchen“ angezeigt werden. Wähle den Tab „Konsole“, um die Konsole zu öffnen.

Kontextmenü zum Öffnen der Entwicklertools im Browser — Die Entwicklertools öffnet man mit Rechtsklick → „Untersuchen“.

Wenn eine Webseite nicht richtig funktioniert, wird oft ein Fehler in der Konsole angezeigt. Der Fehlertext hilft der Programmiererin oder dem Programmierer, das Problem zu beheben.

Fehler in der Konsole des Browsers — Hier wird ein Fehler in der Konsole angezeigt.

Eine Webseite „hacken“

Kopiere folgenden Befehl in die Eingabezeile der Konsole und drücke auf Enter:

document.body.contentEditable = true

Der Text der Webseite kann jetzt bearbeitet werden. Man bearbeitet allerdings nur die Darstellung der Seite. Beim Neuladen der Seite ist wieder alles wie vorher.