{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Informatische Werkzeuge in den Geistes- und Sozialwissenschaften I\n", "\n", "## Hausaufgabe 11 (Projekt.2, 100 Punkte)\n", "\n", "**Erschienen:** 06.02.2021 \n", "**Abgabe bis:** 14.02.2021\n", "\n", "Bitte laden Sie Ihre Notebooks bis 23:59 Uhr am Abgabetag in Ihrer Übungsgruppe bei [StudOn](https://www.studon.fau.de) hoch.\n", "\n", "Wenn Ihnen einige der hier verwendeten Konzepte unbekannt sind oder Sie nicht wissen, wie Sie fortfahren sollen, können Sie die [Vorlesungsunterlagen](https://kwarc.info/teaching/IWGS/) zu Rate ziehen oder jederzeit Fragen im [Forum](https://www.studon.fau.de/studon/ilias.php?ref_id=2719645&cmdClass=ilobjforumgui&cmdNode=yf:os&baseClass=ilRepositoryGUI) oder auf [Slack](https://join.slack.com/t/fauiwgs/shared_invite/enQtODIxNTA0OTA5MjE4LTRmNDBlODVmMTdmZWRkOWM2ODdmYmZmNTI1MTIxMTVjYjc2YWIxMzE0ZWFiYzZhNzMyMzZiMWRlNDJkODUwMDY) stellen, im [Tutorium](https://univis.fau.de/form?__s=2&dsc=anew/lecture_view&lvs=forsch/fokomp/izdihu/inform&anonymous=1&dir=tech/IMMD/pkosy&founds=forsch/fokomp/izdihu/inform&nosearch=1&ref=pande&sem=2019w&__e=190) nachfragen, oder Ihrem Tutor eine Mail schreiben." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Zusammenfassung Projekt\n", "\n", "Im Übungszettel 9 haben Sie bereits damit begonnen die notwendigen Komponenten einer Web Application für ein *Choose-Your-Own-Adventure*-Abenteuer, ein so genanntes [Spielbuch 🇩🇪](https://de.wikipedia.org/wiki/Spielbuch), zu entwickeln. Zettel 9 hat sich hauptsächlich mit dem Auslesen der nötigen Informationen aus Dateien in einem geeigneten Format beschäftigt. Es verbleibt die Funktionalität, die Informationen in einer Webapp anzuzeigen, sodass Interaktion ermöglicht wird.\n", "\n", "Dieser Übungszettel bildet den Abschluss für das Projekt. Sie bekommen von uns Story-Dateien für das interaktive Abenteuer _\"Beatrice Beispiel und die Magische Musterlösung\"_ gestellt, welche Sie natürlich beliebig ersetzen oder erweitern können (siehe auch Aufgabe P2.5). Ihre WebApp sollte unabhängig vom konkreten Inhalt dieser Dateien funktionieren.\n", "\n", "Für die Aufgaben auf diesem Zettel wird abermals stark Gebrauch von der Bibliothek `bottle` gemacht. Wenn Sie damit noch nicht vertraut sind, können Sie Zettel 10, das verfügbare `bottle`-[Tutorial 🇬🇧](https://bottlepy.org/docs/dev/tutorial.html) oder Ihre Tutoren konsultieren." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Projekt P2.1 (Startseite, 10 Punkte)\n", "\n", "Der erste Schritt zur WebApp ist die Startseite, auf der Besuchende landen und darüber informiert werden, was sie erwartet. Da diese Seite statisch (d.h. immer gleich) ist, ist die Route für die WebApp außerdem relativ einfach zu schreiben.\n", "\n", "Wir wollen ermöglichen, als unterschiedliche Charaktere zu spielen (auch wenn das nur minimale Auswirkungen auf die Beispielgeschichte hat, vgl. Aufgabe P1.5). Momentan haben Sie noch nicht die Techniken, den Nutzer selbst einen Namen eingeben zu lassen, der dann entsprechend verwendet wird, also werden wir drei Möglichkeiten stellen, die sich mit einfachen Links realisieren lassen.\n", "\n", "**Aufgabe:** Fügen Sie der Datei `cyoa_server.py` eine Route `/` hinzu, die eine Startseite mit einem kurzen erklärenden Text zurück gibt. \n", "Sie soll außerdem drei Links enthalten, mit denen die Geschichte begonnen werden kann. Ein Link soll auf `/story/Beatrice/start` verlinken (für Menschen, die als Beatrice Beispiel spielen wollen), einer auf `/story/Max/start` (für Max Mustermann) und der dritte auf `/story/Nova/start` (für Nova Neuling)." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Projekt P2.2 (Template für Kapitel, 40 Punkte)\n", "\n", "Der nächste Schritt, nachdem die Information ausgelesen wurde, ist, sie zu präsentieren. Wir werden uns den Fakt zunutze machen, dass (abgesehen von der Startseite) alle anderen Seiten in unserer Spielbuch-WebApp die gleiche Struktur haben (Titel, Inhalte und Handlungsoptionen). Das bedeutet, dass wir eine _Template-Datei_ schreiben und für _alle_ Kapitel verwenden können, indem wir lediglich den angezeigten Text ändern. Das erspart uns im Vergleich zur Alternative (einzelne HTML-Seiten für jedes einzelne Kapitel schreiben oder generieren) nicht nur enorm viel Arbeit, es erleichtert auch die spätere Wiederverwendbarkeit und Erweiterung der WebApp.\n", "\n", "Die `bottle`-Bibliothek stellt uns für diese Zwecke die [SimpleTemplate Engine 🇬🇧](http://bottlepy.org/docs/dev/stpl.html) (oder kurz: `stpl`) zur Verfügung. Der größte Vorteil an dieser Engine ist, dass sie uns erlaubt, mit Python-Code _programmatisch_ die HTML-Seite aufzubauen. Die wichtigsten Arten, dies zu tun, sind hier kurz angerissen und werdem im [Tutorial 🇬🇧](http://bottlepy.org/docs/dev/stpl.html) ausführlicher behandelt. Das Prinzip ist jedoch immer das gleiche. Beim Aufruf einer Template-Datei (die zunächst Mal identisch zu einer normalen HTML-Datei sein kann) können Sie mehrere Python-Variablen übergeben, deren Inhalt dann Teil der HTML-Datei werden kann.\n", "\n", "- Setzen Sie einen Variablennamen wie etwa `title` in der Template-Datei in geschweifte Klammern (`{{title}}`), wird der Inhalt der Variable beim Aufruf dort als Text eingefügt.\n", "- Mit der Syntax `%` können Sie eine Zeile Python-Code beginnen.\n", "- Mit der Syntax `<%` ... `%>` können Sie mehrere Zeilen Python-Code einbinden.\n", "\n", "Mit diesen Werkzeugen können Sie in der Template-Datei quasi frei programmieren. Weil nun HTML aber (anders als Python) keine Rücksicht auf Whitespace nimmt, gibt es einen großen Unterschied: Code-Blöcke (wie If-Abfragen, Schleifen o.Ä.) können nicht mehr allein durch Einrückung beendet werden, sondern benötigen ein `end` keyword.\n", "\n", "Dazu ein Beispiel! Angenommen Sie rufen folgende Template-Datei `example.tpl` auf:\n", "```\n", "\n", "
\n", "