Vorhang Auf Für Getan.ch

Während dem dritten Semester im Studium iCompetence habe ich als Teil des Moduls Workshop 3 die Webapplikation getan.ch entwickelt. Veranstaltet wurde der Workshop von der Firma Amazee Labs. Im Unterricht wurde Themen wie HTML, CSS, Bootstrap, SEO, Testing und Responsives CSS behandelt. Da keines der eben erwähnten Themen für micht komplettes Neuland darstellte, begann ich augenblicklich mit einem etwas ambitiöseren Projekt. Schliesslich entstand daraus die im Titel erwähnte Webseite.

Bei getan.ch handelt es sich um eine simple Web-Applikation, die dem User ermöglicht ihre Zeit, die sie zum Lernen oder Arbeiten aufwendet, aufzuzeichnen. Wenn gewünscht können die Resultate einer Woche anschliessend auf Facebook veröffentlicht werden. Die Zielgruppe sind vor allem Studenten, die ihren Eltern oder Freunden zeigen möchten, dass sie auch im Studium etwas tun beziehungsweise getan haben.

Den Umfang habe ich absichtlich gering gehalten. Die Programmierung erledigte ich während den Weihnachtsferien. Für die Idee, Konzeption und das Design reichte die Zeit während den Lektionen.

Die Applikation

Ich wollte das Login möglichst einfach gestalten. Keine Passwörter, Mailadressen und Bestätigungslinks sollten den Benutzer am Loslegen hindern. Dies bringt natürlich auch Nachteile mit sich, auf die ich später eingehen werde.

Alles was man tun muss, ist den Vor- und Nachnamen einzugeben. Danach geht es zur Übersicht weiter:

Hier werden jeweils die anfangs erfassten Module aufgelistet.

Alles was nötig ist, wenn man an einem Modul arbeitet ist ein Klick darauf. Sofort startet ein Timer. Um die Aufzeichnung zu beenden genügt ein weiterer Klick. Ich ging davon aus, dass niemand gleichzeitig an mehreren Modulen arbeiten kann oder möchte.

Einen Blick in die Vergangenheit des Trackings liefert die Wochenübersicht.

Ein Klick auf eine Woche führt zu deren Übersicht:

Hier wird es nun speziell interessant. Wer nämlich seine Ergebnisse veröffentlichen möchte kann dies ganz einfach. Posten führt direkt zur Facebook Authentifikation. Ist man erfolgreich eingeloggt können die Ergebnisse mit einem weiteren Klick auf Posten dann veröffentlicht werden. Unten ein Beispiel eines solchen Postings.

Leider kann man Facebook Posts nicht speziell formatieren, was das Lesen wesentlich erschwert. Aus diesem Grunde führt ein Klick auf den Link direkt zurück auf getan.ch und zur Detailansicht:

Hier wird auch klar, wo das Problem mit dem vereinfachten Login liegt. Jeder der den Link kennt, kann nun über diesen Account Zeit eintragen und Module hinzufügen. In einer produktiven Version müsste also nachträglich ein Passwort verlangt werden, bevor man etwas auf Facebook veröffentlichen kann.

Technologien

Für die Umsetzung nutzte ich das neue JavaScript Framework AngularJS, das Facebook JavaScript SDK und als API das Slim Framework. Die Start- und Endzeiten werden roh übertragen und erst im Webbrowser kommt es zur Berechnung der anzuzeigenden Totale. Dies stellte sich als sehr aufwändig und performancelastig heraus. Weiterhin hatte ich Probleme, da das Date-Objekt von JavaScript nicht in allen Browsern gleich implementiert ist und die Applikation so erst in allen Browsern funktionierte, als ich eine Library hinzufügte, die die Erstellung der Date-Objekte Browser unabhängig machte.

March 1, 2014