Übungsaufgaben ia3.netz+ia3.data

ehemalige Veranstaltungen ia3.netz + ia3.data sowie ia4.Netz im Studiengang Interaktive Medien

(c) 2020 Hochschule Augsburg - Fakultät für Informatik - Prof.Dr.Nik Klever

Grundlegendes zu den Übungsaufgaben

Beachten sie die Abgabetermine

Bearbeiten sie die Übungsaufgaben regelmäßig

Abgabe

Laden sie ihre Abgabe - wie anschliessend beschrieben - in ihren Accout im JupyterHub hoch

Benamung der Abgaben

Bitte nennen sie ihr Jupyter Notebook unbedingt wie folgt:

IA3_Aufgabe_{1|2|3|4|5|6|7}_{Matrnr}_{Nachname}_{Vorname}

beispielhaft also für Thomas Müller mit der Matrikelnummer 934567 und der 3. Aufgabe lautet der Name

IA3_Aufgabe_3_934567_Müller_Thomas

und laden sie bitte die Jupyter Notebooks nur als .ipynb Datei und nicht als Zip- oder Web-Archiv Datei in den JupyterHub (Einloggen mittels RZ-Account) ab.

  • Download: Jupyter Notebook Menü -> File -> Download as -> Notebook (.ipynb)
  • Upload: Jupyter Dashboard Menü -> Upload -> Datei auswählen -> evtl. Namen ändern -> Upload

Teamarbeit ist mit maximal 2 Teilnehmern pro Team möglich

Fügen sie bei der Abgabe einer Teamarbeit beim Namen des Jupyter Notebooks noch

_{Matrnr}_{Nachname}_{Vorname}

ihres Teampartners hinzu, sodass letztendlich der Name folgendermaßen aussieht:

IA3_Aufgabe_{1|2|3|4|5|6|7}_{Matrnr1}_{Nachname1}_{Vorname1}_{Matrnr2}_{Nachname2}_{Vorname2}

Aufgabe 1: Jupyter Notebook Basics

  • Erstellen sie ein erstes Notebook mit folgenden Inhalten:

    • eine Markdown Zelle mit Matrikelnummer, Namen und Vornamen
    • eine Markdown Zelle mit einem Bild von ihnen
    • eine Code Zelle mit einem Statement und
    • eine Code Zelle mit einer Print-Funktions Ausgabe
    • eine Markdown Zelle mit einem Link
    • eine Markdown Zelle mit einer Liste
    • eine Markdown Zelle mit unterschiedlich formatiertem (fett, kursiv, normal) Text
    • zwei Heading Zellen unterschiedlichen Levels

Abgabe: 16.10.2018 23:00

Aufgabe 2: Einführung in Python

  • Arbeiten sie die Webseite Erich Seifert's Java-Python Vergleich bis zum Abgabetermin komplett durch.
  • Erstellen sie von dieser Webseite alle Python-Beispiele in einem eigenen Jupyter Notebook und geben dieses anschliessend als Übungsaufgabe ab.

Abgabe: 23.10.2018 23:00

Aufgabe 3: Einführung in XML und SVG

Abgabe: 30.10.2018 23:00

Aufgabe 4: Programmierung mit DOM - Teil 1

  • Erstellen Sie nun ein Python DOM Programm, welches dieses obige Beispiel einliest und
  • anschliessend das eingelesene Dokument 10 mal mit wechselnder Farbe (ursprünglich und weiß) als jeweiliges SVG Image über IPython Image mittels der Methoden display und SVG ausgibt.
  • Erstellen Sie ein weiteres Python DOM Programm, welches das SVG Dokument aus dem Aktiven Plenum 2 im Skript XML Programmierung Teil 2 über eine Klasse svgdocument und den 5 Methoden elem, xyElem sowie rect, text und path entsprechend erstellt.
  • Erweitern Sie das Programm um die Methode ellipse und erstellen Sie in jedem Eck des Canvas einen zusätzlichen Viertelkreis (zur besseren Visualisierung der SVG-Fläche

Abgabe: 6.11.2018 23:00

Aufgabe 5: Programmierung mit DOM - Teil 2

  • Erweitern Sie das Programm aus Aufgabe 4 um eine Methode template, welches aus dem SVG Dokument Example Markup Grid aus der englischen Wikipedia Seite von SVG das dort unterlegte Grid als Template erstellt und hängen mit der Methode includesvg ein g-Element an, welches den Inhalt unterschiedlicher SVG Dokumente (z.B. das Bild "Cat") an das Template anfügt.
  • Erstellen sie alle Programme und hierfür notwendigen SVG-Dokumente in einem Jupyter Notebook und geben dieses anschliessend wieder ab.
  • Beachte: Um die Funktionen display und SVG aufrufen zu können, müssen sie vorher aus IPython.display importiert werden
  • Beachte: Um SVG in einer Code-Zelle anzuzeigen stellen sie vor die entsprechenden SVG-Elemente das entsprechende SVG-Magic: %%SVG
  • Beachte: Um in einem SVG-Dokument einen Link zu verwenden, müssen sie im svg-Tag noch das Attribut für den Namensraum von xlink xmlns:xlink="http://www.w3.org/1999/xlink" hinzufügen.

Abgabe: 20.11.2018 23:00

Aufgabe 6: Dako Anwendungen

Web

  • Erstellen Sie alle nachfolgenden Aufgaben mittels der telnetlib in einem Jupyter Notebook und geben das Jupater Notebook anschliessend als Übungsaufgabe wieder über den JupyterHub ab.
  • Laden Sie die Seite der ARD (ard.de) herunter ohne der Eingabe eines Host-Header-Feldes. Welche Antwort bekommen sie ? Interpretieren sie diese Antwort.
  • Laden Sie die Seite der ARD (ard.de) mit der Eingabe eines Host-Header-Feldes (Host-Header-Parameter) herunter. Welche Antwort bekommen sie jetzt ? Interpretieren sie diese Antwort und handeln danach !
  • Laden Sie die Seite w3.org mit dem Protokoll HTTP/1.0 ohne einem Host-Header-Feld (Host-Header-Parameter) herunter. Welche Antwort bekommen sie ? Interpretieren sie diese Antwort.
  • Laden Sie jetzt die Seite w3.org mit dem Protokoll HTTP/1.1 ohne einem Host-Header-Feld (Host-Header-Parameter) herunter. Welche Antwort bekommen sie jetzt ? Interpretieren sie diese Antwort.
  • Laden sie die Seite wetteronline.de herunter. Interpretieren sie die Antwort.

E-Mail

  • Verschicken Sie eine E-Mail an meine E-Mail-Adresse nik.klever@hs-augsburg.de über den E-Mail-Server der Hochschule mit dem Telnet-Protokoll. Beachte: Bearbeiten sie diese und die nächste Aufgabe nur innerhalb der Hochschul-Netzes ! Wenn sie zuhause arbeiten, dann erstellen sie eine VPN-Verbindung zum Hochschulnetz her - siehe die VPN-Beschreibung des Hochschulrechenzentrums
  • Fassen sie das Absenden eines SMTP-Requests und das entsprechende Lesen des SMTP-Response darauf in einer einzigen Funktion zusammen und rufen sie diese Funktion für das Verschicken einer E-Mail mit dem SMTP-Protokoll auf. Benutzen sie für den Inhalt der SMTP-Nachricht das Internet Message Format des RFC 5322.

Abgabe: 27.11.2018 23:00

Aufgabe 7: Flask Tutorial

  • Erstellen Sie die folgenden Aufgaben in entsprechenden Dateien wie im nachfolgenden Tutorial beschrieben über einzelne Zellen mittels des Magic-Befehls %%writefile ... in einem Jupyter Notebook und geben das Jupyter Notebook anschliessend als Übungsaufgabe wieder über den JupyterHub ab.
  • Bearbeiten sie das Flask Tutorial der älteren Version 0.12. Verwenden sie dabei anstelle der Datenbank eine CSV-Datei flaskr.csv mit den Spalten

      nr;title;text
  • Lassen sie daher Step 1, Step 3, Step 4 und Step 5 aus

  • In flaskr.py verändern sie die folgende Zeile:

      DATABASE=os.path.join(app.root_path, 'flaskr.csv'),
  • Und verwenden sie stattdessen eine Funktion

      def init_csv():
          with open(app.config['DATABASE'],"r") as f:
              alllines = f.read()
          app.entries = [line.split(';') for line in alllines.split("\n")[1:-1]]
    
    

    die sie vor dem Aufruf von app.run() aufrufen.

  • Verändern sie show_entries.py entsprechend so ab, dass alle Zeilen in denen ein Zugriff auf die Datenbank db vorkommt wegfallen und erzeugen stattdessen eine Liste über alle Entries app.entries, wobei jedes Entry als Dictionary mit den Schlüsseln title und text abgespeichert werden soll.
  • Verändern sie desweiteren add_entry.py so ab, dass wieder alle Zeilen in denen ein Zugriff auf die Datenbank db vorkommt wegfallen und hängen einen neuen Eintrag mit der nächsten Eintrags-nr, dem Titel und dem entsprechenden Text sowohl an app.entries an als auch an die entsprechende CSV-Datei an.

Hinweis: Bedenken sie dabei, in welcher Form ein Eintrag in app.entries abgespeichert wird und in welcher Form ein Eintrag in der entsprechenden CSV-Datei !

Abgabe: 4.12.2018 23:00

8. Flask Server + Client

Tip: Schauen sie sich für alle Aufgaben das Quickstart Beispiel der Flask Dokumentation dazu an.

Erstellen Sie alle nachfolgenden Aufgaben jeweils über %%writefile dateiname in einem einzigen Jupyter Notebook und geben dieses Notebook anschliessend als Übungsaufgabe ab.

Generell lautet die Aufgabe einen Flask-Webserver zu erstellen der analog reagiert wie der Apache-Webserver der Hochschule sowie analog reagiert wie der Firefox-Browser bei der Eingabe vom Scheme file://

  • Testen sie daher vorher, wie der Apache-Webserver der Hochschule mit ihrem Web-Verzeichnis funktioniert. Z.B. wenn ihr Web-Verzeichnis /www/ eine index.html Seite enthält, wird diese angezeigt, wenn das Verzeichnis leer ist, wird eine Forbidden-Fehlermeldung ausgegeben. Erstellen Sie in dem Web-Verzeichnis /www/ auch mehrere Ordner und darin enthaltene HTML-Dateien, die sie jeweils verlinken.
  • Eine frühere Konfiguration des Apache-Webservers hat alle darunterliegenden Ordner und HTML-Dateien als HTML-Dateien ausgeliefert (ohne dass diese verlinkt waren), analog wie dies z.B. der Explorer unter Windows oder der Finder unter dem Mac anzeigen oder wie der Firefox-Browser bei der Eingabe vom Scheme file://
  • Ihr Web-Verzeichnis können sie dabei simulieren, indem sie in ihrem lokalen Arbeitsverzeichnis ein Verzeichnis erstellen mit einem (z.B. ihrem) Benutzernamen. Sie sollten zum Testen auch mehrere Verzeichnisse mit unterschiedlichen Benutzernamen erstellen und jeweils in diesen Benutzer-Verzeichnissen dann entweder ein Web-Verzeichnis, welches für alle Benutzer gleich benamt sein muss (z.B. WWW) erstellen oder nicht.
  • Verändern sie den anschliessend den Webserver in der Art, dass sie ein eigenes Logging in die Anwendung einbauen und jeden Aufruf mit einem Zeitstempel und seinen entsprechenden Parametern mitloggen. Verwenden sie hierzu die Methode app.logger.info()
  • Binden Sie zusätzlich einige Bilder oder Logos in ihren Webserver mit ein. Was müssen sie hierfür tun ? Denken sie dabei an das Header-Feld Content-Type
  • Programmieren Sie ein unterschiedliches Verhalten für ihren Webserver, wenn die index.html Seite vorhanden ist (dann wird sie auch angezeigt) und wenn nicht (dann werden alle Dateien auf diesem Verzeichnis angezeigt, analog dem Firefox-Browser mit dem Scheme file://)
  • Verändern sie den Webserver nochmals, indem sie ein einfaches Login einbauen. Nehmen sie dafür als Grundlage den Teil "Login and Logout" aus der letzten Aufgabe 6 - Verwenden sie dabei ein Dictionary für ihre Benutzer mit ihren Passwörtern, welches sie analog wie den Blog aus Aufgabe 6 aus einer CSV-Datei einlesen können.
  • Erweitern sie die Flask Anwendung aus dem letzten Aktiven Plenum des Skripts Flask Grundlagen und stellen sicher, dass nur .xml und .csv Extensions in hochgeladenen Dateinamen erlaubt werden. Wenn nun eine XML-Datei hochgeladen wird, liefern sie diese anschliessend als HTML Datei aus.

Tip: Schauen sie sich für die erlaubten Dateinamen das Beispiel in Uploading Files an und verwenden sie für die HTML Auslieferung einer XML Datei ''Markup.escape()''

Abgabe: 11.12.2018 23:00

9. Geolocation Beispiele

Erstellen Sie alle nachfolgenden Aufgaben in einem einzigen Jupyter Notebook und geben dieses Notebook anschliessend als Übungsaufgabe ab.

  • Ergänzen Sie die Anwendung aus der Praktikumsaufgabe 1 mit einer Klasse KMLSAXParser (analog der Praktikumsaufgabe 2 aus dem Skript Grundlagen GeoLocation). Bedenken Sie, dass nun zur Unterscheidung welcher Parser verwendet werden muss eine weitere Zeile aus der hochgeladenen XML-Datei gelesen werden muss.
  • Bearbeiten sie die Praktikumsaufgaben 2, 3 und 4 aus dem Skript Grundlagen GeoLocation)
  • Erweitern sie die Anwendung aus der Praktikumsaufgabe 4 (FlaskServerGeoLocation) aus dem Skript Grundlagen GeoLocation noch um die beiden Methoden GPXDOMParser und KMLDOMParser.

Hinweis: Ändern Sie die Webanwendung so ab, dass automatisch der richtige Parser für eine hochgeladene Datei verwendet wird

Abgabe: 8.1.2019 23:00