Zeiterfassung mit Smallinvoice

smallinvoice-logoNach vier Jahren mit Salesforce weiss ich: Zeiterfassung kann ein mühsamer Zeitvertrieb sein. Oh, Zeitvertrieb? Nicht gut, wenn man es so nennen muss. Bei der comotive GmbH werden wir Smallinvoice einsetzen, ein fantastisch einfaches, schnelles und günstiges Tool um Kunden, Rechnungen und Projekte zu verwalten. Mit einem Klick kann man sogar Briefe & Rechnungen per Post verschicken. Die Zeiterfassung von Smallinvoice ist  ganz klar effizienter als bei Salesforce. Aber wir dachten uns: Da geht noch mehr. Dank der API von Smallinvoice konnten wir unsere Ideen umsetzen.

Wir arbeiten schnell mal an verschiedenen Projekten. Interne Entwicklungen, Kundenprojekte oder Support. Wenn man für jeden Zeiteintrag ein Formular ausfüllen muss kann das schnell zeitraubend und mühsam werden. In Salesforce ist dies genau wie in Smallinvoice leider der Fall. Abgesehen von Fakt, dass Smallinvoice die Daten schnell speichert, was die Zeiterfassung deutlich angenehmer gestaltet. Daher wollten wir ein Tool schaffen, in dem man seine aktuellen Projekte wählt und mit möglichst wenigen Eingaben Zeit erfassen oder per Stopuhr aufnehmen kann.

Präsenzzeit und Projektzeit

Präsenzzeit gibt es in Salesforce gar nicht, ausser man macht sich ein spezielles Projekt dafür. Ein klassischer Fall in dem man keine „von-bis“-Zeit eingeben, sondern die Stopuhr ihren Dienst verrichten lassen will. Erfasst man Projektzeit, möchte man nicht jedesmal auswählen auf welches Projekt gestempelt werden soll. Bei Smallinvoice muss man zuvor noch auswählen, dass man überhaupt auf ein Projekt stempeln will – Für uns der klassische Fall. Also haben wir ein 3x3er Feld in dem wir bis zu neun Projekte auf dem Bildschirm darstellen können. Per Shortcut oder Maus kann man das Projekt wählen und rein mit 2-3 Tastatureingaben die Zeit erfassen. Man soll dabei die Wahl haben zwischen einer Stundeneingabe oder einer Stopuhr.

Nach genau 17.25h Arbeit (Tja, das weiss ich jetzt ganz genau :-)) ist unser Prototyp fertig. Screencast am Ende des Blogposts.

Eingesetzte Technologie

Ich wollte erst was neues ausprobieren (Neue Frameworks, welche wohl besser geeignet wären), habe aber erstmal auf bekannte Technologien gesetzt (jQuery, Bootstrap, localStorage) um das ganze effizient umzusetzen. Vielleicht setzen wir eine definitive Variante mit AngularJS um. Die Applikation läuft (fast) komplett im Browser. Jegliche Konfigurationsdaten und Zwischenspeicher sind im localStorage (nicht etwa in Cookies). Von alledem, was der Nutzer der App macht, kriegt der Server also (fast) nichts mit. Da uns die Smallinvoice API keine „Access-Control-Allow-Origin“ Header ausgibt, erlaubt es der Browser nicht, direkt POST Requests abzufeuern. Für jegliche Speicher-Funktionen, auf die Smallinvoice API müssen wir also einen simplen PHP Wrapper verwenden. Dieser wäre aber sehr einfach austauschbar.

Für das Frontend verwenden wir Bootstrap 3. Nur 20 zusätzliche Zeilen CSS waren nötig, um die Darstellung zu optimieren. Weiterhin kamen einige jQuery Plugins zum Einsatz (UI, Templating, Scrollbars) und natürlich ein paar spezifische JS-Klassen. Nebeneffekt: Die App kann sogar auf dem Smartphone verwendet werden, da sie vollständig responsive ist.

Screencast

Und so sieht das ganze aus. Ich habe absichtlich nichts verschwimmen lassen. Die Welt darf gerne wissen, dass wir c36daily.ch künftig auf den comotive GmbH Systemen betreiben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.