L03_Aufgabenliste_Formular

In den nächsten Wochen wirst Du eine kleine Web-App konzipieren und entwickeln, mit der ein Haushalt (z.B. eine WG) interaktiv eine Aufgabenliste pflegen kann. Dabei kann die App jederzeit mit den verschiedenen Geräten der Haushaltsmitglieder bedient werden, seien es PCs, Laptops, Tablets und insbesondere Smartphones. Jeder Eintrag in der Liste zeigt eine Aufgabe mit Titel, dem Datum und die Uhrzeit, zu der die Aufgabe spätestens erledigt sein muss, dem Namen der Person, welche die Aufgabe erledigen soll oder gerade erledigt, sowie einem Kommentar für nähere Angaben zu der Aufgabe. Es wird zudem angezeigt, ob die Aufgabe in Bearbeitung ist. Aufgaben, die noch nicht in Bearbeitung sind, deren Frist aber abgelaufen ist, werden deutlich sichtbar markiert. Alle Felder einer Aufgabe können editiert werden und es ist auch möglich Aufgaben komplett zu löschen.

Ein Beispiel: Kevin wohnt mit Lydia und Oliver in einer WG. Er meint, dass das Klo dringend geputzt werden müsste. Er startet die App auf seinem Smartphone und trägt "Kloputzen" als neue Aufgabe ein, als Datum 20 Uhr des nächsten Tages, Lydia als Bearbeiterin und als Kommentar "die große Bürste benutzen". Als Lydia wenig später die App öffnet um selbst eine Aufgabe einzutragen, fällt ihr die Kloputzen-Aufgabe auf. Da sie aber bereits vor einiger Zeit schonmal das Klo geputzt hatte, sie weiß zwar nicht mehr genau wann, weist sie die Aufgabe Oliver zu und schreibt in den Kommentar "der kann auch mal". Am Abend des nächsten Tages hat sich der Zustand des Klos noch nicht verändert und Kevin schaut mit der App, was aus der Aufgabe geworden ist. Sie ist überfällig, das ist gut zu erkennen. Da er weiß, dass Oliver alles nur schlimmer machen wird, weist er die Aufgabe sich selbst zu, markiert sie als "in Bearbeitung" und fängt an zu schrubben...

Aufgabe

In dieser ersten Teilaufgabe geht es zunächst nur um die Oberfläche. Was im System geschieht, insbesondere damit alle Nutzeris auf die gleiche Liste zugreifen können, wird Gegenstand der weiteren Lektionen sein.

Erstelle ein Use-Case-Diagramm für die Web-App mit der oben angeführte Funktionalität und ein Scribble für ein User-Interface, das die Bedienung erlaubt. Markiere dabei, an welchen Elementen EventListener installiert werden sollen. Sie dienen dir später als Einstiegspunkte in die Algorithmen.
Produziere dann die Oberfläche vollständig mit HTML und CSS, setze dabei schon einige Aufgaben als Platzhalter zur Demonstration ein. Fange die Ereignisse bei der Interaktion ab und lasse das System mit aussagekräftigen Konsolenausgaben reagieren.
Ein Aktivitätsdiagramm ist hierzu nicht erforderlich, da noch keine nennenswerten Algorithmen zum Einsatz kommen.