IA3data IA3netz Aufgaben

Übungsaufgaben der Veranstaltungen ia3.data (Datenmanagement) und ia3.netz (Netzwerkprogrammierung) im Studiengang Interaktive Medien

Beachte: Benamung des Jupyter Notebook
Bitte nennen sie ihr Jupyter Notebook unbedingt wie folgt:
{Matrnr}_{Nachname}_{Vorname}_Aufgabe_{AufgabenNr}
und geben sie bitte die Jupyter Notebooks nur als .ipynb Datei und nicht als Zip- oder Web-Archiv Datei ab. (Jupyter Menü -> File -> Download -> Ipython Notebook (.ipynb))
Beachte:
Fügen sie in jedes abzugebende Jupyter Notebook als erste Zelle eine Markdown-Zelle mit ihrem Namen und Vornamen sowie ihrer Matrikel-Nr. in der Form Name;Vorname;Matr.-Nr; hinzu. Falls sie ihr Notebook gemeinsam mit einer/m Kommilitonin/en im Team erstellt haben, fügen sie zusätzlich eine weitere Markdown-Zelle mit dem Namen und Vornamen sowie der Matrikel-Nr. ihrer/s Kommilitonin/en in der gleichen Form Name;Vorname;Matr.-Nr; hinzu
Beachte:
Bevor sie ihre Aufgaben auf den JupyterHub hochladen, müssen sie sich über den Anmelde-Link anmelden und eine generelle, automatisch generierte - für alle Abgaben - gültige Erstellungserklärung abgeben.

0. Jupyter Basics - optionale Übungsaufgabe

  1. Installieren sie Jupyter auf ihrem eigenen Rechner
  2. Arbeiten sie die folgenden Tutorials aus der Dokumentation The Jupyter Notebook intensiv durch:
    1. What is the Jupyter Notebook
    2. Notebook Basics
    3. Running Code
    4. Working with Markdown Cells
  3. Erstellen sie ein erstes Notebook mit folgenden Inhalten:
    1. eine Code Zelle mit einem Statement und
    2. eine Code Zelle mit einer Print-Funktions Ausgabe
    3. eine Markdown Zelle mit einem Link
    4. eine Markdown Zelle mit einer Liste
    5. eine Markdown Zelle mit unterschiedlich formatiertem (fett, kursiv, normal) Text
    6. zwei Heading Zellen unterschiedlichen Levels

1. Einführung in Python

  1. Arbeiten sie die Webseite Erich Seifert's Java-Python Vergleich bis kommende Woche Mittwoch komplett durch.
  2. Erstellen sie von dieser Webseite alle Python-Beispiele in einem eigenen Jupyter Notebook und geben dieses anschliessend als Übungsaufgabe bis spätestens Dienstag, 1.11. 23:59 Uhr über den JupyterHub ab.

2. Einführung in XML, SVG und DOM

  1. Arbeiten Sie aus dem Anhang A The XML You Need for SVG von J. David Eisenberg: SVG Essentials bis zur Abgabe kommende Woche die Kapitel 1 bis 5 komplett durch.
  2. Arbeiten Sie zudem die Seite Getting Started bis zur Abgabe kommende Woche komplett durch.
  3. Verändern Sie das letzte Beispiel von dieser Seite indem Sie die Farbe des linken Auges auf Weiß setzen
  4. Erstellen Sie nun ein Python DOM Programm, welches dieses Beispiel einliest und
  5. 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.
  6. Erstellen Sie ein weiteres Python DOM Programm, welches das SVG Dokument aus dem letzten Aktiven Plenum im Skript XML Programmierung Teil 2 über eine Klasse svgdocument und den 5 Methoden elem, xyElem sowie rect, text und path entsprechend dem untenstehenden Code erstellt.
  7. 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
  8. Erweitern Sie das Programm 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.
  9. Erstellen sie alle Programme und hierfür notwendigen SVG-Dokumente in einem Jupyter Notebook und geben dieses anschliessend als Übungsaufgabe bis spätestens Dienstag, 22.11. 23:59 Uhr wieder über den JupyterHub ab.
  10. Beachte: Um die Funktionen display und SVG aufrufen zu können, müssen sie vorher aus IPython.display importiert werden
  11. Beachte: Um SVG in einer Code-Zelle anzuzeigen stellen sie vor die entsprechenden SVG-Elemente das entsprechende SVG-Magic: %%SVG
  12. 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.

3. Dako Anwendungen

  1. Erstellen Sie alle nachfolgenden Aufgaben mittels der telnetlib in einem IPython Notebook und geben das IPython Notebook anschliessend als Übungsaufgabe bis spätestens Dienstag, 29.11. 23:59 Uhr wieder über den JupyterHub ab.
  2. Laden Sie die Seite der Bundesregierung (www.bundesregierung.de) herunter. Die heruntergeladene Seite sollte identisch mit dem HTML-Seitenquelltext der Webseite sein !
  3. Laden Sie die Seite www.bundeskanzler.de herunter ohne der Eingabe eines Host-Header-Feldes. Welche Antwort bekommen sie ? Wie interpretieren sie diese Antwort.
  4. Laden Sie die Seite www.bundeskanzler.de mit der Eingabe eines Host-Header-Feldes (Host-Header-Parameter) herunter. Welche Antwort bekommen sie jetzt ? Wie interpretieren sie diese Antwort.
  5. Laden Sie die Seite www.w3.org mit dem Protokoll HTTP/1.0 ohne einem Host-Header-Feld (Host-Header-Parameter) herunter. Welche Antwort bekommen sie ? Wie interpretieren sie diese Antwort.
  6. Laden Sie jetzt die Seite www.w3.org mit dem Protokoll HTTP/1.1 ohne einem Host-Header-Feld (Host-Header-Parameter) herunter. Welche Antwort bekommen sie jetzt ? Wie interpretieren sie diese Antwort.
  7. Welche Fehlermeldung kommt bei einem Timeout, z.B. bei www.audi.de. Simulieren sie den Timeout über ein time.sleep(30)-Befehl (aus dem Standardmodul time) innerhalb der Anfrage an den Webserver.
  8. 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
  9. 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.

4. Flask Server + Client

Tip: Schauen sie sich für alle Aufgaben das Quickstart Beispiel der Flask Dokumentation dazu an.
Erstellen Sie alle nachfolgenden Aufgaben in einem einzigen Jupyter Notebook und geben dieses Notebook anschliessend als Übungsaufgabe bis spätestens Dienstag, 13.12. 23:59 Uhr wieder über den JupyterHub ab.
  1. Erstellen Sie einen Flask-Webserver der analog reagiert wie der Apache-Webserver der Hochschule, d.h. wenn auf ihrem Home-Verzeichnis ein Verzeichnis WWW existiert, werden alle darunterliegenden Ordner und Dateien als HTML-Dateien ausgeliefert, wenn das Verzeichnis nicht existiert, wird eine Fehlermeldung ausgegeben. Erstellen Sie in dem Verzeichnis WWW auch eine index.html Seite. Ihr Home-Verzeichnis können sie dabei simulieren, indem sie in ihrem 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 Verzeichnissen dann entweder ein WWW-Verzeichnis erstellen oder nicht.
  2. Verändern sie den obigen 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()`
  3. Binden Sie zusätzlich einige Bilder oder Logos in ihren Webserver mit ein. Was müssen sie hierfür tun ?
  4. 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)
  5. Verändern sie den Webserver nochmals, indem sie ein einfaches Login einbauen. Nehmen sie dafür als Grundlage den Teil "Login and Logout" aus dem Kapitel 5 The View Functions des Flaskr Tutorials sowie die beiden Templates layout.html (für die Root-Seite) und login.html aus dem Kapitel 6 The Templates des Tutorials (stellen sie beide Templates auch in dem Ordner templates zur Verfügung). Als Setup verwenden sie den folgenden Code und passen USERNAME und PASSWORD entsprechend an.
  6. 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()
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
# -*- coding: utf-8 -*-
from flask import Flask, request, session, g, redirect, url_for, \
abort, render_template, flash

# configuration
DEBUG = True
SECRET_KEY = 'irgendeinenganzlangentextderzurverschlüsselungdient'
USERNAME = '....'
PASSWORD = '....'

app = Flask(__name__)
app.config.from_object(__name__)

5. Geolocation Beispiele

Erstellen Sie alle nachfolgenden Aufgaben in einem einzigen Jupyter Notebook und geben dieses Notebook anschliessend als Übungsaufgabe bis spätestens Dienstag, 17.1. 23:59 Uhr über den JupyterHub ab.
  1. 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.
  2. Erweitern sie die Anwendung aus der Praktikumsaufgabe 4 (FlaskServerGeoLocation) 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