Für die Übung *"Digitale Werkzeuge"* verwenden wir die Programmierumgebung *Jupyter-Notebooks*. Dieses Notebook bietet eine kurze Einführung in *Jupyter* und erklärt das Bedienungskonzept. Viele Inhalte werden auch in der Übung gezeigt. Falls du nur noch einmal schnell nachlesen willst, welche Taste was machst, kannst du auch direkt zur [Kurzrefrenz](#referenz) springen.
Was du hier siehst ist deine private Kopie von unserem Notebook. Du kannst sie nach belieben verändern.
Nach der Einführung in *Jupyter-Notebooks* gibt es noch zwei [Beispiele](#Aufgaben), die dir einen Eindruck der Möglichkeiten von Jupyter-Notebooks zeigen sollen. Wie sie genau funktionieren, ist an dieser Stelle noch nicht relevant. Am Ende des Dokumentes findest du noch einen Absatz über [technische Hintergründe](#weiterfuehrendes). Dieser Absatz ist für die kommenden Übungen nicht relevant, er soll dir nur einen Einstiegspunkt bieten, falls du genauer wissen möchtest, wie *Jupyter* und *Jupyter-Notebooks* funktioniert, oder wie du zu einer Kopie von unserem Notebook gekommen bist.
Im Verlauf der Übung wird *Jupyter-Notebooks* sowohl als Lehrmaterial als auch als Umgebung zur Bearbeitung der Übungsaufgaben genutzt. In diesem Dokument erklären wir euch, wie und wieso man *Jupyter-Notebooks* zum Programmieren in Python einsetzt. An Ende dieser Einheit sollst du:
## **Was ist Jupyter und was ist Jupyter-Notebooks**
*Jupyter* ist ein Projekt, das eine Reihe von Tools rund um die Verwendung von Programmiersprachen als Webanwendung im Browser bereitstellt. Dabei wird Programmcode an einen Server geschickt, der ihn anschließend ausführt und die Ergebnisse in eine Form aufbereitet, die in einem Browser dargestellt werden kann. Auch die Beispiele in diesem Notebook werden nicht auf eurem PC ausgeführt, sondern auf einem Server des GITZ. Dadurch wird prinzipiell nur ein Browser benötigt. *Jupyter* bietet neben *Python* prinzipiell auch die Anbindung an weitere Programmiersprachen an, worauf wir im Verlauf der Übung allerdings nicht eingehen werden.
*Jupyter-Notebooks* ist als Teil des *Jupyter* Projektes eine einfache Programmierumgebung als Browseranwendung, die auf sogenannten Notebooks basiert. Das Notebook erlaubt es strukturierten Text (Text, Bilder, Tabellen, Formeln, Inhaltsverzeichnis, etc.) mit Programmcode zu vermischen, diesen bei bedaruf auszuführen und die Ausgabe des Programmcodes gleich im Browser anzuzeigen. Das ist beispielsweise in diesem Notebook illustriert.
Der Fokus von *Jupyter-Notebooks* liegt primär auf der interaktive Nutzung von *Python* (z.B. Datenanalyse und Visualisierung, oder auch interaktive Tutorials) und weniger auf der Programmierung klassischer Anwenderprogramme (obwohl prinzipiell beides möglich ist). Das ist so zu verstehen, dass *Jupyter-Notebooks* die Möglichkeit bietet, den Programmcode anzuschauen, zu verändern und direkt zu testen. Dadurch sind Notebooks oft so aufgebaut, das es vorgesehen ist, den Programmcode bei jeder verwendung anzupassen oder zu erweitern, wohingegen Anwenderprogramme normalerweise vom Anwender nicht modifiziert werden müssen, um zu funktionieren.
Ein weiterer großer Vorteil von *Jupyter-Notebooks* ist, dass ihr es auch auf eurem PC installieren könnt, falls ihr nicht auf den Servern des GITZ arbeiten wollt. Das kann sinnvoll sein, wenn ihr zum Beispiel keine Internetverbindung habt, oder euch der Server zu langsam ist, oder ihr unabhängig der Übung selbst etwas programmieren wollt. Die Installation ist relativ einfach, im StudIP werden wir eine Anleitung bereitstellen. Damit erstellt ihr sozusagen die gleiche Umgebung wie auf dem Server des GITZ, nur eben viel kleiner und nur für die lokale Benutzung durch einen Benutzer gedacht.
Das Dokument, das ihr gerade lest, ist ein Notebook. Ein Vergleibares Bedienkonzept gibt es auch in anderen Programmierumgebungen (z.B. *Wolfram Mathematica*). Das Notebook ist eine Datei bzw. ein Dokument. Dieses Dokument ist in untereinanderliegende Zellen aufgeteilt. Jede Zelle hat einen Inhalt, der zusammengehört. Wenn du zum Beispiel mit der linken Maustaste einmal links neben diesen Text klickst, erscheint ein Rahmen. Das ist die Zelle, in der diese Text steht. Diese Zelle ist jetzt ausgewählt. Darüber und darunter befinden sich weitere Zellen.
Es gibt drei wichtige Arten von Zellen in Jupyter-Notebooks, die sich in ihrer Funktionalität unterscheiden:
* Textzellen: Eine Zelle wie diese, die formatierten Text enthält
* Codezelle: Eine Zelle, die Programmcode enthält, der ausgeführt werden kann
* Ergebniszelle: Enthält die Ausgaben, die beim Ausführen einer Codezelle entstehen
Die Ergebniszellen werden automatisch beim Ausführen von Codezellen erstellt.
Ein Notebook ist wie ein eigenes Programm, das du beim öffnen startest. Wenn du ein Notebook öffnest, wird im Hintergrund ein eigener *Python-Interpreter* für das Notebook gestartet. Der Interpreter wartet so lange, bis du eine Codezelle ausführst. Nach der Ausführung einer Zelle bleibt er an diesem Punkt stehen und wartet darauf, dass du die nächste Zelle ausführst. Wenn du das Notebook beendest, beendest du damit auch das laufende Programm bzw. den Python-Interpreter. Beim erneuten öffnen ist zwar der eingegebene Quellcode noch vorhanden, er wird aber nicht automatisch erneut ausgeführt. Da der Python-Interpreter neu gestartet wird ist der Zustand (wie z.B. bereits definierte Python-Varaiblen) nicht mehr vorhanden. Die Codezellen müssen erneut ausgeführt werden
### *Der modale Editor*
Der Editor ist die Webanwendung, in der ihr dieses Notebook gerade betrachtet. Er dient zum Erstellen, Bearbeiten und Anschauen von Notebooks.
*Jupyter-Notebooks* ist ein sogenannter modaler Editor. Er kennt zwei Modi
* Edit-Mode: zum Bearbeiten des Inhalts einer Zelle
* Command-Mode: zum verändern der Struktur des Dokumentes (z.B. einfügen neuer Zellen, umsortieren, etc.)
Momentan befindest du dich im Command-Mode. Das erkennt ihr daran, dass der Balken links der markierten Zelle (sofern eine Zelle ausgewählt wurde) blau ist.
Direkt unter dieser Textzelle befindet sich eine Codezelle mit dem Inhalt "3+5". Wenn du mit der linken Maustauste auf die Zelle klickt, befindest du dich im Edit-Mode. Der Balken links neben der Zelle ist jetzt grün. Du kannst den Inhalt der Zelle beliebig verändern.
Um den *Edit-Mode* zu verlassen kannst du links neben die Zelle klicken, oder Esc drücken. Der Balken wird dann wieder Blau und du befindest dich wieder im Command-Mode
Die Codezellen Erkennt man an den eckigen Klammern am linken Rand. Du kannst den Programmcode in einer Codezelle ausführen, indem du sie ausfwählst und Shift+Enter drückst oder alternativ das Play-Symbol am oberen Rand des Editors. In der eckigen Klammer erscheint dann eine Zahl. Diese Zahlen gibt an, Wie viele Zellen bereits ausgeführt wurden und damit einen Anhaltspunkt, in welcher Reihenfolge die Zellen ausgeführt wurden. Das kann wichtig sein, wie weiter unten beschrieben. Probier es einfach in der nächsten Codezelle aus. Damit hast du dein erstes Programm ausgeführt, auch wen dessen Ausgabe etwas vorhersehbar war. So lange der Programmcode in der Zelle ausgeführt wird, erscheint ein * zwischen den Klammern. Dieses Beispiel funktioniert so schnell, dass das *-Symbol nicht sichtbar ist. Die Codezelle unter dem "3+5" wartet 3 Sekunden. Dabei kannst du dieses Verhalten beobachten. Das * ist wie die Sanduhr bei anderen Programmen
Eine letzte besonderheit bieten die Textzellen. Wenn du einmal auf eine Textzelle klickt, dann wird sie nur ausgewählt, du bleibst aber im Command-Mode. Mit einem Doppelklick kommst du in den Edit-Mode. Du siehst dann den Quelltext der Zelle (Die Auszeichnungssprache heißt [Markdown](https://de.wikipedia.org/wiki/Markdown"Beschreibung von Markdown"), die du vielleicht aus Internetforen o.ä. kennst). Wenn du den Editmode wieder verlässt, ist die Zelle weiterhin grau unterlegt und zeigt den Quelltext an. Mit Shift-Enter kannst du die Textzelle sozusagen ausführen. Das Ergebnis ist dann der formatierte Text, der nicht mehr grau hinterlegt ist.
### *Die Wichtigsten Kommandos des Editors als Kurzreferenz* <a name="referenz"></a>
#### *Bearbeitung des Notebooks*
Um in den Edit-Mode zu gelangen auf eine Zelle klicken (Bei formatiert angezeigten Textzellen doppelklick)
Um in den Command-Mode zu kommen Esc drücken oder links neben die Zelle klicken
Im Command Mode (blauer Balken):
* y: Macht die aktuelle Zelle zur Code-Zelle
* m: Nacht die aktuelle Zelle zur Text-Zelle
* a: Fügt eine Zelle über der aktuellen Zelle ein
* b: Fügt eine Zelle unter der aktuellen Zelle ein
* d-d: Zweimal d drücken löscht die Zelle. Kann durch ctrl-z rückgängig gemacht werden, bzw über das Menü "Edit->Undo Delete Cells")
Im Edit Mode (grüner Balken):
* Esc: Wechselt in den Command Mode
* tab : Autoverfollständigung (Funktioniert beim Programmieren in etwa so, wie die Autoverfollständigung von Worten auf eurem Handy)
Ansonsten funktionieren die gängigen Tastenkombinationen wie ctrl-c, ctrl-x, ctrl-v und ctrl-z für Kopieren, Ausschneiden, Einfügen und Rückgängig machen
* shift-enter: unabhängig vom Modus
* Codezelle: Der gesamte Programmcode in der Zelle wird ausgeführt
* Textzelle: Der Text wird formatiert angezeigt (und ist dann nicht mehr grau hinterlegt)
Alle Aktionen sind auch über das Menü am oberen Ende des Editors zugänglich
Du kannst Änderungen am Notebook mit dem "Speichern" Symbol am oberen Rand des Editors speichern. Die Änderungen werden auch von Zeit zu Zeit automatisch gespeichert und sie werden gespeichert, wenn du das Notebook schließt.
Mit dem Menüpunkt "File"->"Rename" kannst du Notebooks umbenennen
#### *Interaktion mit dem Python Kernel*
Am oberen Rand des Editors sind 4 Symbole zur Interaktion mit dem im Hintergrund laufenden Python-Interpreter
* Play-Symbol (Dreieck) : Führt die aktuell markierte Zelle aus. Das gleiche wie das Tastenkürzel shift+enter
* Stop-Symbol (Viereck) : Bricht die Ausführung einer Zelle ab. Das kann praktisch sein, falls die Ausführung einer Zelle sehr lange dauert und du etwas ändern möchtest
* Replay-Symbol (Runder Pfeil) : Startet das Notebook (bzw. den Python-Interpreter) komplett neu. Selber effekt als wenn du es beendest und es neu startest
* Vorspul-Symbol (zwei Pfeile) : Startet das Notebook komplett neu und führt alle Zellen in der Dokumentenreihenfolge aus
Der *Jupyter Hub* ist eine Art simpler Dateiexplorer, in dem du deine Notebooks auf dem Server durchsuchen und öffnen kannst. Du erreichst ihn, indem du auf das Jupyter-Hub Symbol am oberen Ende des Editors klickst (du kannst ihn auch problemlos in einem neuen Browsertab öffnen), oder den Link <https://jupyter.rz.tu-bs.de/> öffnest. Du solltest im Hub einen Ordner für die Dokumente dieser Übung sehen und ggf. Notebooks, die du selbst angelegt hast.
Wenn du auf ein Notebook in der Liste klickst, öffnet sich der Editor. Du kannst Problemlos mehrere Notebooks in mehreren Browsertabs öffnen. Die einzelnen Notebooks laufen komplett unabhängig voneinander und beeinflussen sich nicht gegenseitig. Jedes Notebook kann allerdings nur einmal gestartet werden.
Mit der Schaltfläche "New" kannst du ein neues Notebook erstellen. Das neu erstellte Notebook heißt immer "Untitled". Du kannst ihm im Editor einen neuen Namen geben.
Die Notebooks und ihr Python-Interpreter werden übrigends nicht beendet, wenn du ausversehen den Browsertab des Notebooks schließt. Sie laufen weiter, bis du sie im Editor mit dem Menüpunkt "File"->"Close and Halt" beendest. Geöffnete Notebooks werden auf dem GITZ-Server allerdings nach einiger Zeit der Inaktivität automatisch beendet. Noch geöffnete Notebooks werden im Jupyter Hub mit einem grünen Symbol dargestellt (evtl. Aktualisieren drücken). Wenn du das Notebook öffnest ist es noch in dem Zustand, wie du es verlassen hast
Das Notebook-Konzept von Jupyter hat einige Besonderheiten, die man im Hinterkopf behalten sollte!
Jedes Notebook stellt ein Programm für sich dar. Mehrere Notebooks die gleichzeitig laufen beeinflussen sich nicht. Allerdings kann jedes Notebook nur einmal geöffnet sein. Du solltest es vermeiden ein Notebook in mehreren Browsertabs anzuzeigen, da das zu Problemen führen kann.
Der Code in den Zellen wird nie automatisch ausgeführt, sondern erst, wenn shift-enter bzw. der entsprechende Knopf im Menü gedrückt wird. Das gilt sowohl wenn ein Notebook geöffnet wird, als auch wenn der Programmcode modifiziert wird. Veränderst du den Inhalt einer Codezelle musst du sie erst erneut ausführen, damit die Änderungen auch im *Python-Interpreter* ankommen.
Das Notebook behält seinen aktuellen Zustand, solange es geöffnet bleibt, da der *Python-Interpreter* im Hintergrund auch geöffnet bleibt. Das Ausführung des Notebooks kann unter dem Menüpunkt "File"->"Close and Halt" beendet werden. Das Programm, das du mit deinem Codezellen ausführst, läuft also auch immer weiter und sind nicht in sich abgeschlossen. Daher ist auch die Reihenfolge, in der du die Codezellen ausführst nicht immer unerheblich. Die nächsten zwei Zellen sollen das verdeutlichen. Das Prinzip ist hoffentlich auch ohne Programmierkentnisse halbwegs verständlich, bzw. wird im weiteren Verlauf der Übungen verständlich.
Die erste Zelle erzeugt eine Variable mit dem Namen x, in der der Wert 7 gespeichert wird. Anschließend wird der Wert von x ausgegebe. Die zweite Zelle gibt den Wert von x noch einmal aus und löscht die Variable anschließend. Das ist möglich, da das Notebook, bzw. der *Python-Interpreter* zum Notebook, nach Ausführen einer Zelle nicht beendet wird. Eine Zelle findet den Zustand also so vor, wie ihn die letzte ausgeführte Zelle hinterlassen hat. Versucht man jetzt die zweite Zelle erneut auszuführen, oder führt man die zweite Zelle vor der ersten Zelle aus, dann gibt es einen Fehler, da die Variable in keinem der beiden Fälle bekannt ist (sie wurde ja gelöscht). D.h. die Reihenfolge, in der die Zellen ausgeführt werden ist nicht egal und entspricht nicht zwingend der Reihenfolge im Notebook! Sollte das Notebook nach dem Ausführen der Ersten Zelle beendet oder neu gestartet werden (siehe oben), kann die zweite Zelle auch nicht funktionieren, da der Zustand des Notebooks mit dem Beenden verloren geht. Die erste Zelle muss erneut ausgeführt werden.
Du kannst über das Menü im Editor die Zellen nach oben und unten schieben. Es ist oft eine gute Idee, die Code-Zellen in eine Reihenfolge zu bringen, in der sie auch ausführbar sind!
Die Nächste Zelle enthält Programmcode, der eine zufällige Zahl ausgibt. Unter der Zelle siehst du bereits ein Ergebnis (0.827...) und in der Eckigen Klammer eine Zahl (die 36). Das Ergebnis wurde nicht beim öffnen des Notebooks erstellt, sondern ist das Ergebnis, das ich beim erstellen dieses Notebooks erhalten habe. Der Inhalt der Ausgabezellen wird standardmäßig mit dem Notebook gespeichert, sozusagen als Vorschau. Außerdem die Reihenfolge, in der die Zellen zuletzt ausgeführt wurden. Das kann praktisch sein, um die Verwendung eines komplexeren Notebooks zu verstehen, kann aber auch verwirrend sein, da unter Umständen nicht zu erkennen ist, ob eine Zelle bereits ausgeführt wurde, oder ob nur das Ergebnis mit dem Notebook gespeichert wurde. Du kannst alle Ausgabezellen über das Menü "Cell"->"All Output"->"Clear" löschen.
Wenn du die foglende Zelle ausführst, erhälst du jedesmal ein neues, zufälliges Ergebnis.
Wenn du die Codezellen in diesem Dokument ausführst und dir die Ergebniszellen genau anschaust wirst du entdecken, dass manche Ausgabezellen links eine eckige Klammer mit der gleichen Zahl wie die zugehörige Codezelle haben. Andere nicht. Das ist kein Zufall und wir werden später in den Übungen noch darauf eingehen. Es hat allerdings nichts damit zu tun, ob die Ergebniszellen noch im Notebook gespeichert waren, oder ob sie bei dieser Ausführung berechnet wurden.
* Probiere aus Zellen einzufügen, Zellen zu löschen und zu editieren. Du befindest dich gerade in deiner eigenen, privaten Kopie unseres Dokuments und kannst damit machen, was du willst
* Da es in diesem Notebook noch nicht um das Programmieren an sich geht, ist es ein bisschen langweilig. Deswegen kannst du dir einige Möglichkeiten von *Jupyter-Notebooks* in den nächsten zwei Codezellen anschauen. Führe sie einfach aus und schaue dir das Ergebnis an. An diesem Punkt der Übung kannst du vermutlich nicht nachvollziehen, wie das Programm funktioniert, aber wir kommen auf das Beispiel vielleicht in späteren Übungen noch einmal zurück
Was du als Ergbebnis siehst, ist ein [Lorenz-Attraktor](https://de.wikipedia.org/wiki/Lorenz-Attraktor). Das ist anschaulich beschrieben der Weg (also die Trajektorien) von Partikeln, die sich mit der Konvektionsströmung einer Flüssigkeit zwischen einer warmen und einer kalten Platte bewegt (natürlich in einer stark vereinfachten physikalischen Modellierung).
Das erste Beispiel ist eine statische Darstellung, beim zweiten Beispiel kannst du die Parameter der zugrundeliegenden Differentialgleichung interaktiv mit den Reglern anpassen.
## **Technische Hintergründe und weiterführendes** <a name="weiterfuehrendes"></a>
Hier ein paar weitere technische Hintergründe zu [Jupyter](https://jupyter.org/), Jupyter-Notebooks und der bereitstellung dieser Übung, falls sie dich interessieren
### *Jupyter und Jupyter-Notebooks*
#### *Jupyter-Notebooks*
Jupyter-Notebooks ist eine Webanwendung, die auf Jupyter basiert. Es ist der Notebook-Editor den du im Browser verwenden kannst. Dabei liegt der Fokus auf dem interaktiven Arbeiten mit Programmiersprachen. Es gibt neben Jupyter-Notebooks noch weiterer solcher Schnitstellen. Z.B. Jupyter-Lab (Eine modernisierte Version von Notebooks), Jupyter-Books (Ein Werkzeug um statische Webinhalte zu erstellen, bei denen z.B. Diagramme bei der Erstellung durch Programmcode erzeugt werden) oder Jupyter-flex (ein Werkzeug um interaktive Dashboards zu erstellen. Ähnlich den Notebooks, nur dass der Benutzer den Quellcode nicht sehen oder verändern kann um die ausführung beliebigen Programmcodes auf dem Server zu verhindern). Alle diese Webanwendungen interagieren im Hintergrund mit einem Jupyter-Server um den in ihnen enthaltenen Programmcode auszuführen.
#### *Jupyter*
Jupyter oder Jupyter-Server ist das Backend für alle Jupyter Webanwendungen. Der Serber bietet dabei eine Schnittstelle um verschiedene Programmiersprachen (z.B. Python) anzubinden. Die Anbindung an eine Programmiersprache wird bei Jupyter als Kernel bezeichnet, somit übernimmt der Python-Kernel die Anbindung an Python. Jupyter kann solche Kernel starten und bietet Protokolle, mit denen die Webapplikationen Quellcode an den Kernel schicken können. Der Python-Interpreter ist der selbe, den du auch auf deinem PC starten kannst. Da Python an sich einen interaktiven Modus besitzt ist die Anbindung relativ einfach. Bei anderen Programmiersprachen kann dieser Aspekt deutlich komplizierter werden.
Auf der anderen Seite nimmt der Python-Kernel Programmausgaben entgegen und stellt sie über den Jupyter-Server den Webanwendungen bereit. Dies gescheiht in einer Form, die für die Ausgabe in einem Webbrowser vorgesehen ist. Dieser Teil ist im Fall von simplem Text noch einfach, aber in den Beispielen oben siehst du Bilder und sogar ein interaktives Diagramm, das bei Veränderung der Regler neu berechnet wird. Diese Art von Integration ist deutlich komplizierter, für den Fall von Python aber sehr weit entwickelt. Das Python-Packet, dass zur grafischen Darstellung verwendet wurde heißt matplotlib und du wirst es im Laufe der Übungen noch kennen lernen. Das die gezeichneten Bilder im Browser ankommen, funktioniert nicht automatisch. Matplotlib kann Diagramme auf verschiedene Arten anzeigen. Z.B. kann es die Bilder in Dateien speichern, oder in einem Fenster anzeigen, oder auch an Jupyter senden. Es wurde also speziell mit einer Integration für Jupyter entwickelt. Das ist nicht selbstverständlich. Um komplexere Ergebnisse über Jupyter anschauen zu können, müssen auch die Pakete, die diese Ergebnisse liefern, dafür vorgesehen sein. Das Jupyter-Notebooks viel im Zusammenhang mit Python und Datenanalyse verwendet wird, bieten die meißten einschlägigen Pakete eine gute Integration.
### *Bereitstellung der Übungsaufgaben*
Die Übungsaufgaben werden von uns über eine Quellcodeverwaltungssoftware bereitgestellt, die sich [Git](https://git-scm.com/) nennt. Die ist eigentlich dafür vorgesehen, dass mehrere Personen an Programmen arbeiten können und sich ihre Änderungen gegenseitig bereitstellen können. Git wird in sehr vielen großen Software-Projekten verwendet (z.B. dem Linux-Kernel). Wenn du dich später einmal eingehender mit Programmierung beschäftigen solltest, wirst du auch dieses Tool fast zwangsweise kennenlernen. Wenn du auf den von uns generierten Link zur Übung klickst, wird die entsprechende Datei automatisch aus unserem Repository heruntergeladen und in deinem privaten Verzeichnis auf dem GITZ-Server gespeichert. Anschließend wird das Notebook auf dem Server geöffnet. So kannst du mit einem Link automatisch das Notebook auf den Server herunterladen und ausführen. Anschließend kannst du die Datei daher auch in deinem Jupyter-Hub sehen. Da genau dieses Verhalten oft gewünscht ist bietet Jupyter diese Option von sich aus an. Das Tool was das übernimmt heißt nbgitpuller.
