Aufgabe 3: Anwendung im Browser (12 Punkte)

Erstellen Sie eine optisch ansprechende Single-Page Application (SPA), die komplett ohne einen Webserver (Backend) auskommt.

Kontext

Sie sollen die ToDo-Listen-Verwaltung "Todora" komplett im Browser entwickeln. Sie haben von Ihrer Entwicklungsleiterin die unten stehende Spezifikation inklusive Wireframe-Zeichnung erhalten.

Übersicht und Begriffe

• Todora verwaltet mehrere ToDo-Zettel.
• Ein ToDo-Zettel hat einen Titel und eine Liste von ToDos.
• Ein ToDo hat einen Bezeichner und einen Status (offen/erledigt).

Funktionale Anforderungen

• Erster Aufruf: Begrüßung des Nutzers und Vorschlag per Button-Klick einen neuen Zettel anzulegen.
• Neuen Zettel anlegen: Es gibt einen Button, um einen neuen Zettel anzulegen. Bei Klick wird ein neuer Zettel mit Platzhaltertitel (z.B. "Neue Liste") und einer Liste mit einem einzelnen Dummy-Todo angelegt.
• Zettel/Listen-Eintrag umbenennen: Klickt man auf einen Zettel-Titel/Listen-Eintrag an, kann dieser direkt bearbeitet werden. Klickt man dann außerhalb des Textfeldes, wird der Bearbeitungsmodus verlassen und der neue Inhalt gespeichert.
• Zettelanzeige: Alle verfügbaren Zettel sollen in einem Raster nebeneinander (und bei vielen Zetteln/schmalen Bildschirm auch untereinander) angezeigt werden. Der Titel jedes Zettels soll oben angezeigt werden, darunter folgt eine Auflistung der jeweiligen Eintäge.
• Listenanzeige: Neben jedem Listeneintrag soll es eine Checkbox geben. Bei erledigten Einträgen ist die Checkbox angekreuzt und der Eintrag selbst durchgestrichen; bei offenen Einträge ist die Checkbox leer und der Text wird normal angezeigt.
• Eintrag hinzufügen: Unterhalb der Liste der Einträge auf jedem Zettel soll es einen Button geben, um der Liste einen weiteren Eintrag hinzuzufügen.
• Eintrag löschen: Neben jedem Eintrag soll es einen Lösch-Button geben, der den jeweiligen Eintrag löscht.
• Zettel löschen: Jeder Zettel soll einen Lösch-Button haben, der den jeweiligen Zettel löscht. Wenn alle Zettel gelöscht sind, soll die Anwendung wieder wie beim ersten Start aussehen.

Wireframe für Todora mit drei Listen:

Nicht-funktionale Anforderungen

• Robustheit: Die Anwendung soll komplett ohne eine Internet-Verbindung und ohne Webserver funktionieren, d.h. Anwender sollen die benötigten Ressourcen in einen Ordner auf ihrer Festplatte kopieren und die HTML-Datei direkt im Browser öffnen können.
• Persistenz: Jede Änderungen an den Zetteln und ihren Einträgen soll lokal gespeichert werden, sodass die Seite ohne Internetverbindung jederzeit wieder geöffnet werden kann und den jeweils letzten Stand aller Zettel und ToDos anzeigen.
• Erweiterbarkeit: Für den Fall, dass in Zukunft weitere Features hinzugefügt werden, soll die Todora die Listeninhalte unabhängig vom konkreten Design speichern -- d.h. es soll im Browser-Speicher insbesondere kein HTML-Code, sondern die "reinen" Inhalte gespeichert werden.

0. Vorbereitung

• Erstellen Sie wie üblich auf f4 ein neues Git-Repository für diese Aufgabe an, geben Sie dem Dozenten (Nutzername zieris) Zugriffsrechte und klonen Sie das Repository auf Ihren Arbeitsrechner. Legen Sie alle Arbeitsergebnisse rechtzeitig, d.h. vor 15:30 Uhr des Abgabetages, in Ihrem Git-Repository ab (git push nicht vergessen!).
• Sorgen Sie außerdem dafür, dass Ihre Website unter http://home.htw-berlin.de/~s0xxxxxx/ (bzw. einem Unterordner) erreichbar ist. Es steht Ihnen frei, ob Sie dafür ein Deployment-Skript verwenden wollen.

Für die Teilaufgabe 1 sollten Sie bereits nach der dritten Lehreinheit (Websites) bestens gewappnet sein. Teilaufgabe 2 sollten Sie nach der vierten Einheit (CSS) bearbeiten können, während die Teile 4 und 5 auf der fünften Einheit (JavaScript) aufbauen.

1. Mockup: Statisches Markup

Erstellen Sie zunächst statische Ansichten der Anwendung, sog. Mockups. Ziel ist es, eine manuell erstellte Referenz für das fertige HTML-Markup aller späteren Ansichten/Zustände Ihrer Anwendung zu haben. In der laufenden Anwendung (Schritt 4) wird später der DOM nach dem erstmaligen Laden des HTML-Dokuments durch JavaScript verändert.

• Legen Sie ein (oder mehrere) HTML-Dokument(e) in einem Ordner mockups in Ihrem Git-Arbeitsverzeichnis an, um zunächst statische Ansichten der Anwendung zu erstellen. Für alle aus Anwendersicht relevanten Ansichten/Zustände sollen Sie vollständiges HTML-Markup erstellen, d.h. mindestens für die folgenden Zustände sollten Sie fertige HTML-"Code-Schnipsel" haben:
  • Ein leeres Todora ohne ToDo-Zettel, das den Anwender begrüßt und einen Button zur Zettel-Erstellung beinhaltet.
  • Ein Todora mit mehreren Zetteln.
  • Zettel mit 0, 1, und mehreren Listeneinträgen, sowie den nötigen Bedienelementen (siehe funktionale Anforderungen).
  • Offene und erledigte Listeneinträge, sowie jeweils einem Lösch-Button.
• Im Browser könnten diese Mockups nun z.B. ungefähr so aussehen:

2. Optische Gestaltung

Wenn Sie das Markup fertiggestellt haben, nutzen Sie nun CSS, um Ihre Anwendung ansprechend zu gestalten.

• Legen Sie ein neues Stylesheet an (z.B. todora.css) und binden Sie dieses in Ihren Mock-Dateien ein.
• Fügen Sie in der todora.css neue CSS-Regeln hinzu, und überprüfen Sie die Anzeige jeweils anhand Ihrer Mock-Dateien im Webbrowser.
• Führen Sie nach Bedarf Klassen ein, die Sie bestimmten HTML-Elementen Ihres Mockup-Codes zuweisen (z.B. <div class="todo">) und für die Sie in der todora.css entsprechende Regeln definieren.
  • Tipp: Insbesondere für das allgemeine Layout Ihrer Anwendung dürfen Sie auch Bootstrap-Klassen verwenden.
  • Tipp: Fügen Sie bei Bedarf in Ihr Markup neue semantikfreie Elemente (span und div), um bestimmte Teile der Anwendungs-Oberfläche für CSS "ansprechbar" zu machen.
• Denken Sie daran, die Entwicklerwerkzeuge (F12) zu benutzen, um Ihren DOM und die CSS-Regeln zu analysieren.
• Achtung: Verwenden Sie keine externen CSS-Dateien außer Bootstrap (und evtl. Font-Awesome). Verwenden Sie insbesondere auch kein Bootstrap-Theme. Der Sinn dieser Übung besteht in der Entwicklung eigener CSS-Regeln.

Ihre Mockups sollten nun wie Schnappschüsse der fertigen Anwendung aussehen.

3. jQuery einbinden

Behalten Sie Mockup-Dateien weiterhin als Referenz, aus denen Sie fertige HTML-Codeschnipsel übernehmen können und an denen Sie auch weiterhin CSS-Änderungen ausprobieren können, ohne jedes Mal erst Ihre Anwendung in den jeweiligen Zustand klicken zu müssen.

• Erstellen Sie ein neues HTML-Dokument (z.B. index.htm), in dem letztlich die gesamte Anwendung stecken wird.
• Beginnen Sie mit einer Ansicht, die mindestens einen ToDo-Zettel beinhaltet. Übernehmen Sie den entsprechenden Quellcode aus den Mockup-Dateien.
• Fügen Sie die aktuelle jQuery-Version ein. Da Ihre Seite auch ohne Internet-Verbindung funktionieren soll, laden Sie folgende Datei herunter und speichern Sie sie in Ihrem Projektverzeichnis: https://code.jquery.com/jquery-3.2.1.min.js. Fügen Sie den folgenden Code-Schnipsel direkt vor den schließenden <body>-Tag ein:

  <script src="jquery-3.2.1.min.js"></script>

• Erstellen Sie nun eine eigene JavaScript-Datei (z.B. todora.js), fügen Sie testweise folgenden Inhalt ein:

  $(document).ready(function() {
    alert("jQuery funktioniert");
  });

• Fügen Sie nun noch folgenden Schnipsel nach dem jQuery-Import und vor dem schließenden body-Tag ein und öffnen Sie die index.htm im Browser, um sicherzugehen, dass jQuery geladen werden kann:

  <script src="todora.js"></script>

Nachdem Sie beim Laden der index.htm die Meldung "jQuery funktioniert" gesehen haben, können Sie den alert-Aufruf aus der todora.js wieder entfernen.

4. Erstellen der Anwendung

• Die Reihenfolge, in der Sie Ihre statische Seite nun mit Funktionalität ausstatten, ist Ihnen überlassen.
  • Tipp: Das HTML-Attribut contenteditable (Doku, Guide) wird von allen großen Browsern unterstützt und dürfte Ihnen viel Arbeit ersparen.
  • Tipp: Ein möglicher Startpunkt wäre das Registrieren von Event-Listenern auf die Ereignisse, die für Sie relevant sind, also z.B. das Verlassen des Editier-Modus von Zettel-Titeln und Listen-Einträgen: Jedes Mal, wenn das passiert, können Sie alle Inhalte der Listen aus dem DOM extrahieren und im Browser-Speicher hinterlegen.
  • Analog dazu können Sie bei jedem Öffnen der Seite die Inhalte aus dem Browser-Speicher abrufen und den DOM entsprechend erstellen/verändern.
• In der fertigen Anwendung sollte der initiale DOM der Todora-Startansicht (d.h. ohne ToDo-Zettel) entsprechen; die JavaScript-Funktionalität sollte ihre Arbeit auf diesem Zustand beginnen.
  • Achtung: Dass Sie bei der Einbindung von jQuery (Schritt 3) mit einer existieren Liste begonnen haben, sollte nur den Einstieg in die Entwicklung erleichern. Ihre fertige Anwendung sollte aber keinen "vorinstallierten" ToDo-Zettel haben.
• Denken Sie wiederum daran, die Entwicklerwerkzeuge (F12) zu benutzen, insbesondere können Sie damit die an DOM-Elemente angehängte Event-Listener, JavaScript-Code und den lokalen Browser-Speicher inspizieren und so Ihre Anwendung debuggen.
• Achtung: Verwenden Sie außer jQuery keine externen JavaScript-Dateien (auch keine jQuery-Plugins). Der Sinn dieser Übung besteht in der Entwicklung eigenen JavaScript-Codes.

5. Wahl-Erweiterung

Wählen Sie zusätzlich zum oben beschriebenen Basisfunktionsumfang mindestens eine Erweiterung aus, und implementieren Sie diese mit HTML, CSS und JavaScript. Natürlich sollen neue Eigenschaften für Zettel und Einträge sollen ebenfalls persistent gespeichert werden. Ergänzen Sie außerdem Ihre Mockup-Dateien um weitere HTML-Elemente, insbesondere um etwaige neue CSS-Regeln leicht testen zu können.

1. Neue Zettel erhalten eine zufällige Pastellfarbe als Hintergrund. Bestehende Zettel lassen sich auf Knopfdruck umfärben (ebenfalls mit Zufallsfarbe).
   • Tipp: Wenn hsl-Farbangaben benutzen, sind Pastellfarben einfach zu erzeugen: hsl([0-360], 50%, 90%).
2. Zwischen Zettel-Titel und Liste wird ein farbiger Fortschrittsbalken und daneben die Anzahl erledigter/gesamter Einträge angzeigt. Bei 3 von 4 erledigten Einträgen hat der Balken eine Breite von 75% und daneben müsste stehen 3/4.
3. Wenn Einträge eine Ausrufezeichen ! beinhalten, werden diese als "wichtig" betrachtet. Wichtige Einträge werden besonders hervorgehoben (z.B. fett) und oben in der Liste angezeigt. Entfernt man das Ausrufezeichen, ist der Eintrag wieder normal.
4. Wenn Einträge mit einem Datum in Klammern enden (Format (2017-11-15)), haben sie ein Fälligkeitsdatum. Offene Einträge vor ihrem Fälligskeitsdatum werden normal angezeigt; an ihrem Fälligkeitsdatum werden sie leicht hervorgehoben (z.B. gelb); nach ihrem Fälligkeitsdatum werden sie deutlich hervorgehoben (z.B. rot). Erledigte Einträge werden immer gleich dargestellt, unabhängig von ihrem Fälligkeitsdatum.
5. Drückt man beim Bearbeiten eines Textes die ENTER- oder die ESC-Taste, soll die Bearbeitung beendet werden. Bei einem ENTER soll der neue Inhalt (ohne den Zeilenumbruch) gespeichert werden; bei einem ESC soll der ursprüngliche Inhalt wiederhergestellt werden.