Zeiterfassungs-App

Beschreibung des Projekts

Ausgangssituation: Die MitarbeiterInnen der IT-Consulting-Firma SD&C benutzen für ihr Projektmanagement den Microsoft Project Server 2013. Über dessen Arbeitszeittabelle werden auch die geleisteten Arbeitsstunden projektbezogen eingetragen. Dies ist im Moment nur über ein Webinterface möglich und nicht sehr benutzerfreundlich.

Unser Auftrag: Das Erstellen einer Mobile-App mit der die MitarbeiterInnen ihre Projektstunden bequem und schnell deviceübergreifend eintragen können. Dazu erarbeiteten wir ein verteiltes System mit einer REST-Api als Backend und einer Web-App als Frontend. Das Backend wurde mit NodeJS umgesetzt und läuft auf dem Microsoft-Cloud-Server "Azure". Das Backend nutzt die REST-Schnittstelle des firmeneigenen Microsoft-Project Servers, arbeitet die Daten auf und stellt sie wiederum über REST-Schnittstellen dem Frontend zur Verfügung. Das Frontend wurde mit Ionic2 und Angular2 umgesetzt. Damit kann die App für verschiedene Plattformen realisiert werden.

Verwendete Technologien und Frameworks

Frontend

Axure RP: für die Erstellung der Mockps.
Ionic 2: für die Entwicklung eine hybride App. Dieses lässt eine Webanwendung auf dem Smartphone wie eine native App wirken.
AngularJS 2: die eigentliche App wurde mit dem Google-Framework AngularJS 2 als moderne Single-Page-Application entwickelt.

Backend

Microsoft Azure: für die hosting der beide Anwendungen.
NodeJS
Express-Framework: erleichtert das Erstellen von Middlewares und das Anlegen der Routing-Tabelle. MS Project Server 2013 (MS-PS)
Drei-Stufen-Architektur: für die personenbezogenen Projektdaten und Arbeitszeiten des jeweiligen Users vom Project Server der SD&C GmbH abzurufen und für die Verwendung im Frontend sinnvoll aufzubereiten und die Speicherung der Eingaben vom Frontend zum MS-PS.
Postman: ein API-Entwicklungswerkzeug, mit dem die Abfragen getestet werden konnten.

APK

Inoic-Clients: um die App auf das Smartphone spielen zu können.

Projektergebnisse

Konzeption und Design

Zusammen mit dem ganzen Team und dem Product Owner von SD&C wurden zu Beginn des Projekts alle Anforderungen besprochen und gesammelt. Auf dieser Grundlage wurden von Silvia Calafuri und Bulqis Kurniati die Mockups für die Mobile App erstellt. Für die ersten Mockup-Versionen der Zeiterfassungs-Apps wurden die User Stories analysiert und Anforderungen herausgearbeitet.
Wir entschieden uns für die Konzeption von vier verschiedenen Basis-Seiten: ‘Login’, ‘List Overview’, ‘Vorgang Overview’ und ‘Vorgang hinzufügen’. Dabei wurden auch verschiedene Alternativen präsentiert, um die Seiten in unterschiedlichen Varianten darstellen zu können. Nach vielen konstruktiven Gesprächen zwischen dem Team und dem Auftraggeber entstanden mehrere Versionen der Mockups, das Design wurde verfeinert und neue Features hinzugefügt. Der wichtigste Aspekt bei der Konzeption unserer App, war dem User ein schnell und einfaches Eintragen seiner geleisteten Arbeitsstunden auf das entsprechende Projekt, auch von außerhalb des Firmennetzwerkes zu ermöglichen.

Am Ende einigten wir uns auf eine finale Version (siehe Abbildung unten).

Die Android-App (Frontend)

Damit die App von allen Angestellten und ihren unterschiedlichen Betriebssystemen (Android, iOS) genutzt werden zu können, wünschten sich die Auftraggeber die Entwicklung einer hybriden App. Diese ist plattformunabhängig, für jedes Betriebssystem müssen hier lediglich individuelle Anpassungen vorgenommen werden. Der Fokus für das Projekt wurde allerdings auf die Entwicklung für Android gelegt.
Bulqis Kurniati und Silvia Calafuri erstellten ein Ionic-Projekt für unsere Webapp und setzten Stück für Stück die Mockups in Angular per Typescript, HTML und SCSS um. Sie schrieben JavaScript-Funktionen mit denen das Frontend mit der REST-Api des Backends kommuniziert, z.B. die Übermittlung von Daten, wie Login-Informationen, eingetragene Arbeitsstunden oder das Abfragen von Informationen, wie die dem Account zugeordneten Projekte und schon gespeicherte Arbeitsstunden.
Die REST-Api des Backends erwartete Daten im JSON-Format und übermittelte Daten auch wieder als JSON. Diese JSON-Objekte mussten in selbstgeschriebenen Funktionen in das HTML-Dokument geladen werden.

Die REST-API (Backend)

Der MS-PS bietet mehrere Schnittstellen an. Vom Auftraggeber wurde die Verwendung der OData-REST-API vorgegeben. Die Aufgabe, die richtigen Requests an den MS-PS herauszufinden, um die vom Frontend benötigten Daten zu erhalten, und bestimmte Daten speichern zu können, wurde von Suzanne Kaupp und Nele Herzog übernommen. Mit Hilfe der identifizierten API-Endpoints des MS-PS wurden in der REST-API insgesamt vier Routen zur Datenabfrage und -speicherung für das Frontend von Suzanne Kaupp umgesetzt.
Der Fokus in der Entwicklung lag vor allem darauf, eine hohe Performance und gleichzeitig möglichst wenig Requests an das Backend zu erreichen, um kostengünstig zu bleiben. Performanceverbesserungen wurden, wo es möglich war, mit asynchronen Calls an den MS-PS umgesetzt. Um die Requests vom Frontend zu reduzieren wurde sich dafür entschieden, den Datenblock, der die userbezogenen Projekte und Tasks in ihrer Ordnerstruktur liefert, in einer einzigen Route umzusetzen. Hierzu mussten über vier aufeinander aufbauende Requests an den MS-PS gesammelt und anschließend in eine selbstentwickelte Datenstruktur gemappt werden, die es dem Frontend ermöglicht unkompliziert darauf zuzugreifen.

Hosting der Anwendung auf der Cloud-Computing-Plattform Microsoft Azure

Für das Frontend wurde das Azure-Produkt “Webapp” gewählt und eingerichtet, für das Backend “API-App”. Als Deployment-Methode wurde jeweils das von uns untereinander genutzte Versionierungs-Tool Git eingerichtet. Die notwendige Konfiguration wurde von Nele Herzog vorgenommen.

Erstellen der APK

Für das regelmäßige Build war Lea Hontiveros zuständig. Sie sorgte regelmäßig dafür, dass eine aktuelle Version unserer Web-App als APK für Demozwecke und fürs Testing für alle zugänglich vorlag.

Dokumentation

User Guide: Um die volle Nutzung der App zu gewährleisten, erstellten Silvia Calafuri und Bulqis Kurniati eine Benutzerdokumentation. Hier findet der/die Nutzer/in alle grundlegenden und spezifischen Informationen wie beispielsweise den Aufbau der Projektübersicht-Seite oder die Anleitung zur Erstellung eines neuen Vorgangs.
Technische Dokumentation: Dieses Dokument soll die App aus der technischen Perspektive beschreiben. Hier wird die Architektur, der Aufbau und die Konfigurationen dokumentiert, um den Entwicklern von SD&C zu erleichtern, die App technisch zu erweitern und zu pflegen. Verantwortlich für die Umsetzung war Nele Herzog, die jeweiligen Expertinnen aus dem Team steuerten ihr Fachwissen bei.
Ergebnisbericht: hier wird unsere Projektergebnis detaillierte beschreibt.

Das Team

Projektleitung

Team Lea Hontiveros

Frontend

Team Silvia Calafuri

Team Bulqis Kurniati

Backend

Team Suzanne Kaupp

Nele Herzog