Taking the Wraps Off

Auf Deutsch lesen

During the third semester for my degree in Computer Science (Specializing in iCompetence) I have developed a web application called as part of the module Workshop 3. The workshop was held by a Zürich based company called Amazee Labs. During class topics like HTML, CSS, Bootstrap, SEO, Testing and Responsive CSS were introduced. Since none of the just mentioned topics were new for me, I set up to complete a somewhat more ambitious project. In the end the website mentioned in the title was born. is a simple web application which allows for the user to track time spent studying or working. Optionally, the results of the week can be published on facebook, which will certainly lead to some serious bragging rights! The audience therefore mainly consists of students wanting to show their parents and friends that they are actually doing something respectively did (getan in German) something.

Intentionally I kept the scope down. The programming was done in the two weeks of Christmas holidays. The time during class was enough for me to developed the idea, refine the concept and roughly design the page.

The Application

Die Login Seite

I tried to keep the login as simple as possible. No passwords, email addresses or verification links to prevent the user from using the app. This brings along some drawbacks but more about those later.

All you have to do is enter your first- and last name. After that you’ll be forwarded to the overview:

Die aktuelle Woche

Here the initially added modules are listed.

All that is needed if you are working on a module is to click it. Immediately, a timer starts. To stop the recording, simply click again on the module. I could not imagine a human being which is able to work on two modules at the same time.

A look into the past of what has been tracked can be found on the week overview.

Übersicht aller Wochen

A click on some week will lead to it’s own overview:

Auf Facebook veröffentlichen

Here it gets interesting. Whoever wants to publish her or his results can do this in a simple way. The button Posten directly leads to the Facebook authentication. After you have successfully logged in, the results can be posted with another click on the button Posten. Below you can find an example of such a post.

Der Post auf Facebook

Unfortunately, Facebook posts made through the SDK cannot be formatted which makes getting a quick overview a lot harder. For this reason a click on the link directly leads you back to where you see the same results in a nicely formatted view:

Übersicht der Woche

At this point you will also experience the drawbacks of the simplified login. Everybody knowing the link can now record time on your behalf and add nasty modules. In a productive version before posting to your friends and family you would therefore have to enter a password.


AngularJS Framework

For the implementation I used the new JavaScript Framework AngularJS, the Facebook JavaScript SDK and as backend API the Slim Framework. The start- and end times are being transmitted in a raw format and only in the web browser the totals are being calculated. It has become apparent that this is very time consuming to program and takes a lot of performance on the client side. Furthermore, I had trouble because the JavaScript Date object wasn’t implemented the same way on all browsers and for compatibility I had to add a library which made the construction of Date objects browser independent.

9. March 2014