Dritte Übungsaufgabe: Digital Typewriter

In der letzten Übungsaufgabe entwickeln Sie selbständig und ohne Vorgaben einen einfachen Texteditor. Die Anwendung ermöglicht es Nutzern, kontinuierlich an einem zusammenhängenden Text zu arbeiten. Während der Bearbeitung werden in regelmäßigen Abständen automatisiert Versionen des Dokuments gespeichert, das sitzungsübergreifend persistiert wird. Zusätzlich zeigt die Anwendung dem Nutzenden in Echtzeit aktualisierte Statistiken zum Dokument an. Alle UI-Komponenten werden von Ihnen selbständig entworfen und umgesetzt. Konzipieren Sie dazu ein einfaches aber ansprechendes User Interface.

Abgabetermin ist der 29. Juli 2019. Wir bewerten den letzten Commit, der an diesem Abgabetag in das Repository gepusht wird. Informationen zur Nutzung von Github finden Sie im GRIPS-Kurs und hier.

Fragen zur Übungsaufgabe können Sie in das GRIPS-Forum posten oder per Mail (mi.mme@mailman.uni-regensburg.de) stellen.

Github Classroom

Das Starterpaket wird über Github Classroom bereitgestellt. Sie implementieren Ihre Lösung über ein Repository auf Github. Das Repository, mit einer Kopie des Starterpakets, können Sie über diesen Link generieren und anschließend mit der Arbeit an der Aufgabe beginnen. Klonen Sie das erstellte Repository dazu auf Ihren Rechner, die notwendigen Rechte für Ihr Github-Konto werden automatisch beim Erstellen des Repository gesetzt. Denken Sie daran, Ihre Arbeit an der Aufgabe durch regelmäßiges Committen der Änderungen und Ergänzungen zu dokumentieren. Laden Sie Ihren aktuellen Stand regelmäßig auf Github hoch (Push bzw. im Github Desktop-Client über den Sync-Befehl).

Vorgaben

Im Starterpaket finden Sie eine minimale Projektstruktur. Die Vorgaben beschränken sich auf ein HTML-Dokument mit rudimentärer CSS-Gestaltung sowie einem ersten Javascript-Modul. Die Konzeption und Implementierung der Benutzeroberfläche gehört in dieser Aufgabe zu den geforderten Leistungen. Überlegen Sie sich, welche Elemente zur Umsetzung der unten aufgeführten, funktionalen Anforderungen notwendig sind. Der Schwerpunkt sollte auf der übersichtlichen, benutzerfreundlichen Gestaltung liegen. Beschränken Sie die aktiven Elemente des User Interface auf die tatsächlich notwendigen Komponenten. Auch das Design und die Umsetzung des Codes liegt vollständig in Ihrer Hand. Verwenden Sie dazu die im Kurs besprochene Modul-API (ES6). Die init-Methode in der Datei index.js stellt den Einstiegspunkt in die Anwendung dar. Erstellen Sie selbstständig weitere Module für die von Ihnen konzipierten Komponenten der Anwendung. Achten Sie dabei darauf, die unterschiedlichen Aufgaben dieser Komponenten klar voneinander abzugrenzen.

Erstellen Sie für jedes neue Modul eine eigene Datei im Ordner resources/js und verwenden Sie geeignete Unterordner zur Strukturierung des Codes.

Formatierung und ESLint: Sie finden im Starterprojekt bereits Dateien mit Formatvorgaben für JS-Beautify bzw. Regeldateien für ESLint. Ihr eingereichter Programmcode darf bei Überprüfung gegen die ESLint-Datei keine Fehler erzeugen.

Bewertungskriterien

Die allgemeinen Bewertungskriterien finden Sie hier. Zusätzlich gelten für diese Aufgabe die folgenden Punkte:

Anforderungen

Die von Ihnen implementierte Anwendung muss die folgenden Funktionen fehlerfrei implementieren:

Tipps für die Umsetzung

Skizzieren Sie vor Beginn der Implementierung sowohl das UI als auch die Javascript-Komponenten der Anwendung. Beginnen Sie anschließend damit, das User Interface durch HTML-Elemente und CSS-Regeln zu strukturieren und zu gestalten. Sobald die wichtigsten Elemente in ihren Grundzügen entwickelt wurden, können Sie mit der Programmierung der Module und Prototypen beginnen. Planen Sie Ihr Vorgehen sinnvoll und versuchen Sie in einer ersten Version zuerst die wichtigsten Funktionen umzusetzen, bevor Sie diese dann nach und nach erweitern. Verbessern Sie anschließend iterativ die Gestaltung der Benutzeroberfläche.