Konzeption und prototypische Realisierung einer Webanwendung zur plattformübergreifenden Verwaltung von Aufgaben in einem Unternehmen

Inhaltsverzeichnis

Abstrakt

Inhaltsverzeichnis

Abbildungsverzeichnis

I. Einleitung und Zielsetzung
1.1. Einleitung
1.2. Motivation
1.3. Aufbau der Arbeit

II. Übersicht über die aktuellen Webentwicklungswerkzeuge
2.1. HTML5 und CSS
2.2. JavaScript. DOM
2.3. Ajax
2.4. Javascript Framework jQuery
2.4.1. jQuery UI
2.4.2. jQuery Mobile

III. Anforderungsanalyse und Konzeption
3.1. Projektstruktur
3.2. Ist-Analyse
3.3. Anforderungsanalyse
3.3.1. Funktionale Anforderungen
3.3.2. Nicht-funktionale Anforderungen
3.4. Funktionsumfang
3.5. Anwendungsfallanalyse
3.6. Programmarchitektur

IV. Entwurf und Umsetzung des Webinterface-Konzepts
4.1. Recherche und Analyse aktueller Tasktool Webapplikationen
4.2. Gestaltung der Benutzeroberfläche. Usabilityvorgaben
4.3. Umsetzung des Weblayouts

V. Technische Realisierung
5.1. Implementierung der Frontend-Backend Kommunikation
5.1.1. Modul „Login/Logout“
5.1.2. Modul „Anzeigen von Informationen“
5.1.3. Modul „neue Aufgabe hinzufügen“
5.1.4. Modul „Aufgabe bearbeiten“
5.2. jQuery Widgets
5.2.1. Kalender
5.2.2. Autovervollständigungsfunktion
5.2.3. Zusatzfunktionen

VI. Usability Test

Fazit und Ausblick

Abkürzungsverzeichnis

Quellenverzeichnis

Anhang 1. Task Tools Handlers Release
Anhang 2. Fragen und Antworten zur Usability

Abstrakt

Gegenstand der Bachelorarbeit ist die Konzeption und Entwicklung eines webbasierten Aufgabenmanagementtools anhand gängiger Webtechnologien und des Frameworks jQuery. Die Anwedung passt sich dabei, was die Auf-lösung und die Darstellung betrifft, automatisch an das jeweilige Endgerät an. Für die Realisierung wurde eine vorläufige Untersuchung der neuesten Webtechnologien durchgeführt.

Abbildungsverzeichnis

Abbildungen

Abbildung II.1. Überblick über die Browserunterstützung der CSS3 Funktionen vom 3.10.2013

Abbildung II.2. Meistbenutze Browserversionen in Deutschland über einen Zeitraum von 7 Tagen

Abbildung II.3. Hierarchie der Elemente in einer Webseite

Abbildung II.4. Das Modell einer traditionellen Webanwendung (links) im Vergleich mit einer Ajax-Webanwendung (rechts).

Abbildung III.1. Softwareprojektstrukturplan

Abbildung III.2. Anwendungsfälle für Projektleiter und Projektbearbeiter

Abbildung III.3. Grafische Darstellung einer Webanwendung-Architektur mit DB Unterstützung

Abbildung III.4. Grafische Darstellung des Datenbankmodels

Abbildung IV.1. Grundstruktur des Weblayouts

Abbildung IV.2. Wireframe: die positionierung der wichtigsten Seitenelemente

Abbildung IV.3. Erstes Designkonzept

Abbildung IV.4. Zweites Designkonzept

Abbildung IV.5. Farbkonzept der Webapplikation

Abbildung IV.6. Logo der Webapplikation

Abbildung IV.7. Grafisches Designkonzept mittels jQuery UI Elementen

Abbildung IV.8. Responsives Webdesign: Einsatz der Technologie an der Webanwendung

Abbildung V.1. Übertragung der Aufgaben-Daten in JSON-Format

Quellcode

(Abbildung in dieser Leseprobe nicht enthalten)

I. Einleitung und Zielsetzung

1.1. Einleitung

In den letzten Jahren wurden Web-Anwendungen (kurz „Apps“^[1]genannt) immer populärer. Mit der fortschreitenden Webtechnologieentwicklung unterscheiden sie sich durch ihre Funktionalität kaum mehr von Desktop-Anwendungen (lokal installierten Anwendungsprogrammen).

Der Hauptvorteil einer Web-Anwendung besteht darin, dass alle logischen Modelle und Algorithmen auf einem Server liegen – im Gegensatz zu herkömm-lichen Anwendungsprogrammen, deren Logik sich auf dem PC jedes Be-nutzers befindet. So erübrigt sich bei Web-Apps die lokale Installation des Programms auf dem Computer. Dadurch spielt es keine Rolle mehr, welches Betriebssystem im Hintergrund läuft. Bei der Aufgabenbearbeitung greift die Webapplikation auf die Systemressourcen des Geräts nicht zu. Der Anwender braucht lediglich einen beliebigen Webbrowser^[2]zu starten und die Adresse der Web-Anwendung einzugeben.

Es besteht auch keine Notwendigkeit mehr, die Anwendung auf dem Computer neu zu installieren, nachdem eine neue Version der Applikation verfügbar ist. Darüber hinaus greift man immer auf die neueste Version der Web-Anwendung zu, sowohl aus dem lokalen Netzwerk einer Organisation als auch aus dem Internet. Im zweiten Fall haben die Mitarbeiter die Möglichkeit die internen Unternehmensressourcen an jedem Ort der Welt zu nutzen. Dafür benötigt man nicht einmal einen Computer: ein Mobilgerät mit Internetzugang reicht völlig aus.

1.2. Motivation

Die effektive Zeitverteilung, die Möglichkeit einer wirksamen Kommunikation innerhalb eines Teams, unabhängig davon, wo sich die Mitglieder in diesem Moment befinden, die Frage, wie viele Menschen am Projekt arbeiten, die Verteilung von Pflichten und die Einzelaufgaben: Das sind die Komponenten, ohne die es schwierig ist, in der modernen Welt wirksam gemeinsam an einem Projekt zu arbeiten.

Zur optimalen Organisation einer effizienten Arbeit mit zahlreichen Kunden soll in der Communication & Design Werbeagentur (WCD) eine Task-Manager- Webapplikation^[3]entwickelt und auch prototypisch umgesetzt werden.

Folgende Problematik ergibt sich dabei: Die klassischen Instrumente zur Aufgabenplanung, wie Terminkalender oder Notizbücher, sind in modernen Unternehmen schnell veraltet; die einfache Eingabe von Informationen über den Outlook-Kalender ist für eine effektive Planung und Durchführung von Aufgaben meistens ebenfalls nicht ausreichend. Im Internet existieren heut-zutage viele Möglichkeiten zur Lösungen der dargestellten Problematik; einige von ihnen sind in der Regel weit verbreitet. Allerdings müssen Programmierer häufig eine zusätzliche spezifische Funktionalität in den Anwendungen implementieren, um die Applikationen dem Firmenbedarf anzupassen. Das heißt, es muss ein System entwickelt werden, das es Firmen erlaubt, eigene Datenbanken anzuschließen. Dadurch verschafft man sich einen Überblick über die aktuellen Aufgaben und zugehörigen Projektbearbeiter in der Firma, ferner werden Beschäftigung und Effektivität der Firmenmitarbeiter optimiert. Bereits bei der Entwicklung durch die Verwendung entsprechender Standards wird versucht, eine größtmögliche Betriebssystem- und Browserunabhängigkeit zu erreichen.

Hauptziel der vorliegenden Bachelorarbeit ist die Entwicklung und physische Realisierung einer plattformübergreifenden Lösung, die die Aufgabenverwal-tung und das Projektmanagement im Unternehmen optimieren soll. Die Bedeutung der Arbeit und die Aktualität des vorliegenden Themas werden sich über die Produktivität der Nutzung der Entwicklungsergebnisse rechtfertigen.

1.3. Aufbau der Arbeit

Die Struktur der vorliegenden Bachelorarbeit entspricht der typischen Arbeitsteilung von Webdesignern und Webprogrammierern bei der Erstellung von Webapplikationen. Meine Bachelorprojektaufgaben bestehen in:

- Der Durcharbeitung der Konzeption,
- der Frontend-Implementierung,
- der Realisierung der Verbindungen zu Datenbanken,
- einem Usabilitytest und Abgabe des fertigen Produkts.

Mit der Einrichtung des Backends, der Implementierung von Datenbank und dem Systemtest befasste sich ein anderer angestellter Programmierer der Firma. Dieser Teil des Projekts wird in der Bachelorarbeit nicht erwähnt.

Da für die Projektrealisierung die neuesten Webtechnologien zum Einsatz kommen, wird zunächst in Kapitel II ein Überblick über moderne Webtools gegeben, auf deren Basis die Tasktool-Webapplikation entwickelt wurde. Nach der Erläuterung der technischen Grundlagen geht man auf die eigentliche Bachelorprojektarbeit ein. Kapitel III stellt die Projektstruktur vor sowie die Prob-lematik der Aufgaben und die Hauptwege ihrer Lösung. In Kapitel IV wird das Design der Webapplikation unter Beachtung von Usability-Vorgaben entworfen und umgesetzt. Kapitel V beschreibt die Umwandlung des statischen Temp-lates zur dynamischen Anwendung in den ausgewählten Webtechnologien. Der Programm-Quellcode beinhaltet die Frontend-Backend Kommunikation. Alle Arbeiten auf dem Server: Backend-Implementierung, Erstellung von Daten-banken hat der angestellte Programmierer der Firma WCD übernommen. Die Testphase ist der nächste Schritt der Entwicklungsarbeiten und wird in Kapitel VI dargestellt. Am Schluss werden in Kapitel VII ein Fazit der Bachelorarbeit gezogen und ein Vorschlag auf zukünftige Aufgaben gemacht.

II. Übersicht über die aktuellen Webentwicklungswerkzeuge

2.1. HTML5 und CSS3

Die Technologien HTML5 und CSS3 sind die Grundlagen für die Next-Generation Webanwendungen. Sie sind nach Brian und Hogan „mehr als lediglich zwei neue Standards, die vom World Wide Web Consortium (W3C) und seinen Arbeitsgruppen vorgeschlagen wurden“. Das ist der nächste Schritt im Hinblick auf die Webtechnologien, die dabei helfen sollen, bessere und modernere Webanwendungen zu entwickeln. Vgl. [Hogan, 2011, S. 9].

HTML5 und CSS3 brachten eine Vielzahl neuer Funktionen in der Web-Entwicklung und im Web-Design. In Bezug auf die Strukturierung der Organi-sation eines Web-Dokuments sind HTML5-Funktionen weniger kompliziert und ihr Quellcode ist übersichtlicher. Franke und Ippen weisen auf neue seman-tische Komponenten^[4]hin, wieheader,section, nav, aside, article,footer. Sie können anstelle von Div-Containern der Version HTML 4.0 verwendet werden.

Die Input-Elemente wurden um verschiedene Typen erweitert, so zum Beipiel um"password","datetime","number", was eine automatische Validierung der Daten in Formularfeldern ohne Skript mit regulären Ausdrucken^[5]erlaubt. Vgl. [Franke, 2012, S. 40].

Neue Typen von Eingabefeldern werden noch nicht von allen Browsern unterstützt, aber trotzdem korrekt angezeigt. Wenn dem Browser zum Beispiel ein Eingabefeldtyp unbekannt ist, ersetzt er es mit einem einfacheninput type = "text".

CSS3 bietet erhöhte Flexibilität für die Darstellung des Webseiteninhalts. Nach [Murphy, 2012, S. 236] sind die wichtigsten CSS3-Neuerungen:

- Erstellen von Div-Elementen mit abgerundeten Ecken;
- Erstellen von radialen und linearen Farbverläufen (für das flexiblere Hintergrundbild);
- Hinzufügen von Schlagschatten auf die Div- und Textelemente;
- Integrierung von beliebigen Schriftarten (ohne die Schrift als Grafik zu speichern);
- Erstellen von Animationen und Überblendungseffekten;
- verschiedene Farbdarstellungen und vieles mehr.

Der einzige Nachteil bei der Verwendung der neuen Standards CSS3 und HTML5 ist die schwache Unterstützung durch ältere Browser.

Es ist sehr wichtig, vor der Erstellung einer Webseite oder Webapplikation die aktuellen Statistiken dahingehend zu untersuchen, welche Browser überhaupt die Anweisung von CSS3 und HTML5 unterstützen (Abbildung II.1.).

Abbildung in dieser Leseprobe nicht enthalten

Abbildung II.1. Überblick über die Browserunterstützung der CSS3 Funktionen vom 3.10.2013

Quelle: Norman's Blog, 2013, Zugriff am 6.11.2013

Auf der Webseite www.webmasterpro.de bekommt man einen Überblick über die aktuelle Verteilung der Browser auf dem Markt (Abbildung II.2.).

Abbildung in dieser Leseprobe nicht enthalten

Abbildung II.2. Meistbenutze Browserversionen in Deutschland über einen Zeitraum von 7 Tagen (November 2013).

Quelle: Webmasterpro, 2007, Zugriff am 9.11.2013

Wenn man die vorliegende Statistik für den November 2013 betrachtet, fällt auf, dass mit Abstand an erster Stelle mit 27,7% Mozilla Firefox 24.0 liegt. Die neueste Version 25.0 von Firefox wird dabei allerdings nur von 8,4% der Surfer benutzt. An zweiter Stelle liegt der Browser Chrome 30.0, bei dem der Nutzeranteil 15,6% beträgt. Die weniger häufig genutzten Browser mit einem gesamten Anteil von unter 5% sind Internet Explorer, Safari, Opera und Chrome.

Aus den Daten der Grafik kann man schließen, dass man die neuen Webtechnologien, wie HTML5 und CSS3, für den Desktop-Browser nur teil-weise anwenden kann. Die marktführende Browser Mozilla Firefox und Chrome gewährleisten zwar eine ziemlich gute CSS3-Unterstützung, man darf aber nicht die Benutzer, die den Internet Explorer 8 verwenden, außer Acht lassen. Safari und Opera basieren auf derselben Technologie wie Mozilla Firefox, deswegen wären für diese Browser ohnehin keine Anpassungen erforderlich.

Im Gegensatz zu Desktopbrowsern sind auf mobilen Geräten nur moderne Web-Browser installiert. Das erlaubt eine schnellere Integration von HTML5 und CSS3. Sie überholen die Desktopbrowser in der Funktionalität und Realisierung dieser Standards. Vgl. [Franke, 2012].

2.2. JavaScript. DOM

JavaScript ist eine Skriptsprache und ermöglicht es, Web-Seiten interaktiver und funktionaler zu gestalten. Es ist eine objektbasierte Programmiersprache, entwickelt von Netscape für die Erstellung von interaktiven HTML-Dokumenten, die sowohl auf der Client- als auch auf der Serverseite funktionieren.

Powers listet die wichtigsten JavaScript-Anwendungsgebiete wie folgt auf:

- Dynamische Erstellung der Dateien mithilfe eines Skripts;
- operative Validierung der Benutzereingaben von ausfüllbaren Formularfeldern in HTML vor der Übergabe an den Server;
- Erstellen von dynamischen HTML-Seiten, zusammen mit Cascading Style Sheets und dem Document Object Model;
- Interaktion mit dem Benutzer und dem Browser.

„Ein konsistentes zu Grunde liegendes Objektmodell“ wurde vom W3C Team zusammen mit allen Browserherstellen geschaffen [Powers, 2007, S. IX-208]. Das Document Object Model (DOM) nach W3C-Definition ist eine plattform- und sprachunabhängige Schnittstelle, die einen dynamischen Zugriff und eine Änderung von Inhalt, Struktur und Design des Webdokumentes erlaubt. Vgl. [W3C, 1997-2005, Zugriff am 5.12.2013].

Das Objektmodell kann zu jedem HTML-Dokument angewendet werden. Das heißt, man kann jedes HTML-Dokument, als DOM-Baum darstellen. Jeder Knoten eines solchen Stammbaums stellt ein Dokument-Element dar, sein Attribut, seinen Text, seine Grafik oder jede andere Art von Objekt. Manche Knoten können „Eltern“ von den anderen sein und zugleich „Kinder“.

Betrachten wir ein Beispiel von einem HTML-Dokument (Quellcode II.1.):

Abbildung in dieser Leseprobe nicht enthalten

Quellcode II.1. Beispiel eines HTML-Dokuments

Quelle: Vgl. [Powers, 2007, S. 220]

Diesem Beispiel entspricht folgender DOM-Baum in der Abbildung II.3.:

Abbildung in dieser Leseprobe nicht enthalten

Abbildung II.3. Hierarchie der Elemente in einer Webseite

Quelle: Vgl. [Powers, 2007, S. 220]

Jeder Knoten enthält Eigenschaften, die die Struktur des Dokuments reflektieren. Das eröffnet die Möglichkeit, durch den Baum zu navigieren. Vgl. [Powers, 2007, S. 220].

2.3. Ajax

AsynchronousJavascriptandXML (Ajax) ist nach [Lubkowitz, 2007, S. 457] ein Konzept des Datenaustauschs zwischen Webbrowser und Server. So kann man die Daten auf der Webseite schnell und einfach aktualisieren, ohne die Seite neu zu laden. Beispiele für den Einsatz dieser Technologie in Web-anwendungen sind: Autovervollständigungsfelder (Google Suggest), Laden der Landkarte im Hintergrund (Google Maps), serverseitige Programmzugriffs-kontrolle. Ferner wird das Ajax-Modell einer Web-Anwendung im direkten Ver-gleich mit dem klassischen Modell abgebildet (Abbildung II.4.):

Abbildung in dieser Leseprobe nicht enthalten

Abbildung II.4. Das Modell einer traditionellen Webanwendung (links) im Vergleich mit einer Ajax-Webanwendung (rechts).

Quelle: Vgl. [Wikipedia, 2012, Zugriff am 8.11.2013]

Die asynchrone Kommunikation mit dem Server verläuft in folgenden Schritten:

1. Erfassen und Aufbereitung von Informationen, um die Anforderung an den Server zu senden;
2. Instanzieren eines XMLHttpRequest-Objekts;
3. Einstellung einer Event-Handler-Funktiononreadystatechange: dieses Event findet bei jeder Änderung des Status des XMLHttpRequest-Objekts statt;
4. Öffnen einer Verbindung mit der Angabe der Parameter GET oder POST, Server URL, Flag des asynchronen Modus sowie des Benutzernamens und des Kennworts (falls erforderlich);
5. Senden der Anfrage;
6. Verarbeiten der Antwort.

Das ursprüngliche Konzept von AJAX wurde mit Einsatz von XML entwickelt. Die Daten müssen dabei aber nicht unbedingt im XML-Format vorhanden sein. Obwohl das eine bewährte Technologie mit einer großen Anzahl von Anwendungen ist, ist der Nutzen des JSON-Formats höher. Dieses Format ist kompakter und seine Interpretation ist weniger aufwändig. Vgl. [Lubkowitz, 2007, S. 461]. Franke und Ippen weisen darauf hin, dass man „von fremden Webservern Daten nur im JSON-Format, also einer Art JavaScript-Array abru-fen (kann)“ [Franke, 2012, S. 98], was ein herausragend wichtiges Feature für den Webentwickler ist.

2.4. Javascript Framework jQuery

jQuery ist nach der Definition von [Franke, 2012, S. 88] eine Klassenbibliothek für JavaScript, also eine Sammlung vorgefertigter Werkzeuge und Funktionen, die die grundlegende Funktionalität der interaktiven Website realisieren.

Heutzutage gibt es unzählige Javascript-Bibliotheken: Sie vereinfachen den Javascript-Quellcode, kapseln benötigte Funktionalität^[6]und erleichtern damit die Browserkompatibilität. Die meisten von ihnen haben allerdings einen großen Nachteil: die Dateigröße, was bei der Erstellung einer Web-Anwendung eine sehr wichtige Rolle spielt.

Im Gegensatz zu vielen anderen JavaScript-Frameworks ist jQuery eine sehr kompakte JS-Bibliothek. Das Framework zieht dank seiner bequemen und ein-fachen Funktionen die Aufmerksamkeit einer Menge von Webentwicklern der ganzen Welt auf sich. Vgl. [Webstandarts, 2008, Zugriff am 20.11.2013].

Das Framework wurde ursprünglich von John Resig im Jahr 2006 entwickelt und als eine kostenlose Open-Source-Software unter der MIT-Lizenz veröffent-licht.

Die jQuery-Bibliothek erlaubt das Navigieren durch die DOM-Struktur eines Web-Dokuments, das dynamische Einfügen und Löschen der DOM-Elementen, während der Programmausführung, und das Bearbeiten von Ereignissen (beim Mausklick, Betätigen der Tastaturtasten, nach einem gewissen Zeitablauf des Timers) [Franke, 2012, S. 88]. Das Arbeiten mit jQuery kann man in zwei Typen unterteilen:

- Selektieren von Objekten mit $()-Funktion. Mit dem CSS-Selektor als Parameter kann man zum Beispiel auf alle HTML-Elemente zugreifen, die dieses Kriterium erfüllen und weiterhin damit arbeiten mithilfe von jQuery-Objektmethoden. Wenn die Methode keinen Rückgabewert beinhaltet, gibt es einen Verweis auf das jQuery-Objekt, was den Aufruf einer Reihe von Methoden entsprechend dem Interface-Konzept erlaubt;

- Aufruf von globalen Objektmethoden.

Eine sehr wichtige Eigenschaft von jQuery ist die Durchführung und Vereinfachung von AJAX-Funktionen. Die jQuery-Bibliothek verfügt über eine Reihe von Methoden, zum Beispiel getJSON() und parseJSON(), die die Abfrage von JSON-Daten via AJAX vereinfachen. Ein simpler AJAX-Request^[7]mit jQuery besteht nur aus einer Codezeile und ist für die Verwendung mit alten und neuen Versionen von Browsern optimiert. Vgl. [Franke, 2012, S. 98].

2.4.1. jQuery UI

jQuery UI ist als Teil des jQuery-Projekts eine JavaScript-Bibliothek zum ein-fachen Erstellen von User-Interfaces für die Web-Anwendungen. Sie zeichnet sich durch eine große Auswahl von Widgets^[8], visuellen Effekten und Anima-tionen aus.

Mit Hilfe von jQuery UI wird das Erstellen von Elementen, wie zum Beispiel Datepicker, Akkordeon-Menü oder Tooltip, leicht umgesetzt durch Eingabe einer entsprechenden Funktion und ohne den Anschluss zusätzlicher Skripte. In diesem Fall kann das Aussehen des ausgewählten Elements aus schon be-stehenden Themen ausgesucht werden, aber auch eine Modifikation des Designs ohne viel Aufwand ist möglich.

2.4.2. jQuery Mobile

Auf der Basis von jQuery und jQuery UI wurde jQuery Mobile erstellt. jQuery Mobile ist ein bequemes JavaScript-Framework, das die Erstellung von Web-Anwendungen und Websites für mobile Geräte, meistens mit Touch-Interface, vereinfacht. Einfach zu bedienen: Dies ist nach Reid einer der wichtigsten Vorteile von jQuery Mobile, da die meiste Arbeit zur Erstellung einer Webapplikation ohne den Ansatz von JavaScript geschieht, aber mit HTML5.

Jedes moderne Tablet und Smartphone unterstützt jQuery Mobile einschließlich Betriebsystemen wie IOS, Android, Chrome, Firefox, BlackBerry und Symbian.

Die wichtigsten Merkmale eines Frameworks sind:

- Kostenlos erhältlich als Open Source;
- Plattform- und Browser-Kompatibilität;
- die Benutzeroberfläche ist für Touch-Geräte optimiert;
- anpassbares Design;
- AJAX-Aufrufe werden automatisch vorgenommen, um dynamische Inhalte zu laden;
- kleine Programmspeicher der Größe bis 12 KB. Vgl. [Reid, 2011, S. IX ff.]

III. Anforderungsanalyse und Konzeption

3.1. Projektstruktur

Die Projektorganisation ergibt sich aus den die Projektphasen (Abbildung III.1.). Sie entsprechen dem klassischen sequentiellen Vorgehensmodell zur Softwareentwicklung^[9].

Abbildung in dieser Leseprobe nicht enthalten

Abbildung III.1. Softwareprojektstrukturplan

Quelle: eigene Abbildung

In der ersten Phase wird eine Analyse von funktionalen und nicht funktionalen Anforderungen, sowie eine Analyse der Anwendungsfälle durchgeführt. Ausge-hend von dieser Analyse, wird weiter sowohl die Strukturierung des Inhalts (Content) als auch ein geeignetes Design der Webapps erarbeitet. Danach wird das gewählte Konzept technisch umgesetzt und die Anwendung wird getestet. Schließlich wird die Webapplikation in dem Unternehmen eingesetzt oder bei Bedarf weiterentwickelt.

3.2. Ist-Analyse

Zu Begin der Bachelorprojektarbeit wurde eine Bestandsaufnahme in der Firma durchgeführt, um die gesammelten Erfahrungen mit der aktuell verwendeten Software zu analysieren und die Hauptprobleme bei ihrer Anwendung zu identifizieren. Die ermittelten Informationen wurden in den Soll-Anforderungen berücksichtigt.

Bis jetzt wurde in der Firma WCD überwiegend die Webapplikation „Wunderlist“^[10]für die Aufgabenverwaltung genutzt. Nach der systemischen Betrachtung der Anwendung präsentiert sich die Software als sehr aufgeräumt und übersichtlich. Sie ist ein einfacher Aufgabenplaner ohne überflüssige Features.

Nach Gesprächen mit Mitarbeitern der Firma wurde folgendes Fazit gezogen: Der Fokus der Applikation liegt eindeutig auf der Optik und weniger auf der Funktionalität. So ist es zum Beispiel unpraktisch, dass im Notizenfeld hinzugefügte Links nicht als solche verwendet werden können, sondern lediglich als Textinhalte vorliegen. Hinsichtlich der Fälligkeit lässt sich zwar ein Datum, nicht aber eine Uhrzeit zuordnen. Erfahrungsgemäß ist das Anlegen neuer Task per E-Mail im Programm nicht ganz verlässlich. In manchen Fällen wird die Task nicht übernommen. Es besteht keine Möglichkeit, eine Übersicht nur über die eigenen Aufgaben zu bekommen; genauso ist es nicht möglich, anderen Mitarbeitern eine einzelne Aufgabe zuzuordnen. Dafür benötigt man die Freigabe der ganzen Liste, wobei man die Änderungsrechte weitergibt, was in vielen Fällen sehr nachteilig ist.

Es lässt sich feststellen, dass die Webapplikation kein passendes Tasktool für die Projektverwaltung ist, sie ist mehr für den täglichen Bedarf geeignet. Die Firma benötigt eine personalisierte Anwendung, individuell an die eigenen Mitarbeiter und Kundendatenbanken angepasst.

3.3. Anforderungsanalyse

Dieses Kapitel stellt grundlegende Anforderungen an das Bachelorprojekt dar. Die Softwareanforderungen bestehen aus funktionalen und nicht-funktionalen Anforderungen.

Nach der Definition von [Balzert, 2008, S. 109] legen funktionale Anforderungen die Funktionalität des Systems fest. Die folgende Frage ist zu beantworten: Was muss der Entwickler implementieren, damit der Benutzer die Aufgaben innerhalb der Geschäftsprozesse durchführen kann?

Die Bezeichnung „Nichtfunktionale Anforderungen“ beschreibt Applikations-eigenschaften und Softwarequalitätsmerkmale, die für den Benutzer während der Arbeit mit dem System wichtig sind.

3.3.1. Funktionale Anforderungen

Funktionale Anforderungen sind direkt aus den Benutzeranforderungen^[11]ab-geleitet.

Anforderung 1

(Abbildung in dieser Leseprobe nicht enthalten)

Die Anmeldung des Users geschieht über die in der Datenbank hinterlegten Logindaten „Benutzernamen“ und „Passwort“. Das Hinzufügen weiterer Informationen zum Nutzer wird durch die gestaltete Oberfläche ermöglicht. Nach der erfolgreichen Anmeldung landet man auf der Hauptseite, zu der eine Liste von Aufgaben mit der Kategorie „Wichtig “ gehört. Falls Loginname oder Passwort falsch sind, wird eine Fehlermeldung angezeigt.

Anforderung 2

(Abbildung in dieser Leseprobe nicht enthalten)

Im Programm ist eine „Aufgabe“ die Grundeinheit der Informationen. Den Be-nutzern soll es möglich sein, über eine Eingabemaske eine neue Aufgabe an-zulegen. Zu den erforderlichen Angaben zählen Kundenname und Aufgabenbeschreibung. Dazu soll man die entsprechende Viewliste anwählen, wohin die Aufgabe gespeichert werden soll; dabei bekommt die Aufgabe entsprechende Eigenschaften. Jede angelegte Aufgabe bekommt eine eindeutige ID zugewiesen, die in die Datenbank eingetragen wird.

Beim Eintragen der Task kann der Benutzer die Priorität „Wichtig“ für die Aufgabe setzen, die neue Aufgabe wird dabei gleichzeitig in der Leiste „Important“ angezeigt. Da das System voraussetzt, dass jede Aufgabe ein Datum hat, wird das Datum jeder einzelnen Aufgabe automatisch auf den höchstmöglichen Datumswert „31.12.9999 23:59“ gesetzt. Wenn die jeweilige Aufgabe in der Leiste „Today“, „Week“ gespeichert ist, soll ihr das aktuelle Da-tum zugewiesen werden.

Die neu angelegte Aufgabe richtet sich nach der Zeit in der Liste aus. Die Aufgabe, die als „Wichtig“ markiert ist, hat in der Auflistung immer Priorität.

Anforderung 3

(Abbildung in dieser Leseprobe nicht enthalten)

Beim Speichern einer neuen Task wird der aktuell eingeloggte User zum „Projektleiter“ und „Projektbearbeiter“ es sei denn, dass er seine Aufgabe an andere Mitarbeiter delegiert hat. In diesem Fall wird die Task in der Leiste der neuen Aufgabenbearbeiter erscheinen.

Anforderung4

(Abbildung in dieser Leseprobe nicht enthalten)

Der Benutzer soll die Informationen zu der Task ergänzen/ändern können. Mit dem Mausklick auf die Aufgabe soll eine Seitenleiste angezeigt werden, auf der man zusätzliche Informationen über die Task auslesen und ändern kann. Änderungsrechte bestehen für den Benutzer, soweit die Task nicht als erledigt markiert ist und der eingeloggte User in der Rolle des „Projektleiters“ ist.

Man hat die Möglichkeit Tasktitel, Datum, Beschreibung sowie die Namen der Projektbeteiligten an den eigenen Aufgaben zu ändern. Die Taskliste wird sofort aktualisiert und die neue Aufgabe in der richtigen Reihenfolge an die Taskliste angehängt.

Eingetragene Taskänderungen sollen in der Datenbank registriert werden. Bei einem baldigen Ablauf der gesetzten Projektfrist soll das Datum neben der Task rot markiert sein.

Anforderung 5

(Abbildung in dieser Leseprobe nicht enthalten)

Der Benutzer soll die Möglichkeit haben, sich die Aufgaben anzeigen zu lassen, in denen er die Rolle „Projektleiter“ und/oder „Projektbearbeiter“ einnimmt.

Anforderung 6

(Abbildung in dieser Leseprobe nicht enthalten)

Es besteht die Möglichkeit, die Aufgabe auf „erledigt“ zu setzen. Sie wird dabei deaktiviert und an den Anfang der Liste mit erledigten Aufgaben gesetzt. Man kann die Aufgabe wieder aktivieren, sie wird dabei in die ursprüngliche Liste eingefügt und als unerledigt markiert.

Anforderung 7

(Abbildung in dieser Leseprobe nicht enthalten)

Es besteht die Mögllichkeit, die Aufgabe zu löschen. Nach der Bestätigung im Popup-Fenster soll diese Aktion nicht widerrufbar sein.

3.3.2. Nicht-funktionale Anforderungen

In diesem Kapitel werden die nicht-funktionalen Anforderungen aufgeführt, die an das Projekt gestellt werden.

Anforderung 1

(Abbildung in dieser Leseprobe nicht enthalten)

Die Arbeit mit der Webapplikation soll möglichst intuitiv sein. Nach maximal 30 Minuten soll ein Anwender in der Lage sein, das Programm zu bedienen und die wichtigen Funktionen auszuführen.

Anforderung 2

(Abbildung in dieser Leseprobe nicht enthalten)

Ein Sicherheitszertifikat^[12]für den Mozilla Firefox-Browser herunterladen.

Die erfassten Daten sollen verschlüsselt zum Server übertragen werden, um die Datenintegrität und die Geheimhaltung sicherzustellen.

Anforderung 3

(Abbildung in dieser Leseprobe nicht enthalten)

Die Applikation soll plattformübergreifend erreichbar sein und wird deswegen als Weblösung implementiert. So ist sie über einen Desktop-Rechner, ein Tab-let oder über einen Server erreichbar.

Anforderung 4

(Abbildung in dieser Leseprobe nicht enthalten)

Die Applikation soll in unterschiedlichen Browsern und Betriebssystemen verwendet werden kann. Da der Aufwand für eine derartige Überprüfung jedoch

relativ hoch ist und in der Firma intern eine einheitliche Softwareausstatung vorhanden ist, werden die bereitgestellten Funktionen zunächst nur für folgende Systeme getestet: Windows 7: Mozilla Firefox 25, MacOS: Safari 5.1.7 (Desk-top, Ipad), Mozilla Firefox 25. Über eine Unterstützung anderer Systeme (z.B. Handyarchitektur) muss bei Bedarf entschieden werden.

Anforderung 5

(Abbildung in dieser Leseprobe nicht enthalten)

Auf Softwarequalität und Zuverlässigkeit sind folgende Anforderugen gestellt:

- Programmreaktionszeit bis 0,5 Sekunden;

- minimale Menge des Traffics^[13]: Ladezeit bis 10 Sekunden;

- minimale Fehlerhäufigkeit: 25 Fehler pro 1000 Programmzeilen.

Anforderung 6

(Abbildung in dieser Leseprobe nicht enthalten)

Bei der Gestaltung der Webapplikation sollen allgemeine Kriterien für die Gebrauchstauglichkeit („usability“, engl.) der Anwendungssoftware berücksich-tigt werden.

Für die Vereinfachung des Kundeneintrags soll man im Eingabefeld eine Ver-vollständigungsfunktion einbauen.

Man soll im System unterschiedliche Eingabemodalitäten (Tastatur, Maus) unterstützen. Die Listennavigation erfolgt sowohl mithilfe von Navigationstasten als auch per Maus-Klick.

3.4. Funktionsumfang

Auf der Basis von Programmanforderungen werden die wichtigsten Funktionen zusammengefasst, die im Rahmen der Webapplikationsimplementierung reali-siert werden sollen:

- Einloggen, Ausloggen von Benutzern;
- Anlegen einer neuen Aufgabe in die eigene oder die Liste von anderen
- Bearbeitung und Löschen von eigenen Aufgaben;
- Aufgabenliste filtern;
- Zugriffsmöglichkeiten auf die Aufgaben von anderen Mitarbeitern.

3.5. Anwendungsfallanalyse

Der Benutzer ist im System in der Rolle „Projektbearbeiter“, „Projektleiter“ oder in beiden Rollen dargestellt. Diese unterscheiden sich je nach der Berechtigung zu Aufgabenänderungen.

Die Abbildung III.2. erläutert die Möglichkeiten für den Einsatz des Systems in beiden Rollen:

Abbildung in dieser Leseprobe nicht enthalten

Abbildung III.2. Anwendungsfälle für Projektleiter und Projektbearbeiter

Quelle: eigene Abbildung

3.6. Programmarchitektur

Die Web-Anwendung basiert auf der "Client-Server"-Architektur. Das heißt, sie läuft auf dem Server – der Client erhält somit nur die Ergebnisse. Die Anwen-dung empfängt die Anträge von dem Benutzer (Client), bearbeitet sie und liefert die Ergebnisse zurück. Transfer-Anfragen und die Ergebnisse ihrer Verarbei-tung erfolgen über das Internet. Die Webapplikation unterteilt sich in drei funk-tionale Schichten: Datenmodell der Webanwendung, Benutzerschnittstelle und Interaktion mit dem Benutzer (Abbildung III.4.). Jede Schicht führt eine bestim-mte Aufgabe aus, und die Modifikation einer der Komponenten hat nur eine minimale Auswirkung auf andere. Diese Realisierung wurde von MVC-Modell präsentiert.

Der Webbrowser ist die grafische Oberfläche, er entspricht der Präsentations-schicht. Die grafische Benutzeroberfläche (GUI engl.) wird im Browser angezeigt.

Die Logikschicht (Applikationsserver) wird serverseitig von spezieller Software (Web-Server) augeführt, sie erhält Client-Anfragen, bearbeitet sie und liefert die Antwort in Form eines HTML-Codes zurück.

Das heißt, die Webanwendung erzeugt dynamisch eine Reaktion auf den ausführbaren Code. Sie führt die folgenden Operationen durch:

- Sie empfängt die Daten von dem Benutzer und speichert sie auf dem Server;
- sie extrahiert die Daten aus einer Datenbank (DB), Hinzufügen, Löschen, Ändern von Daten in der Datenbank;
- sie authentifiziert den Benutzer und die Anzeigen der Benutzeroberfläche, die dem Benutzer entsprechen usw. [Schwarz, 2010, S. 19 ff.].

Der Datenbank-Server (Datenhaltungsschicht) ist die Software auf dem Server, sie speichert die Daten und liefert sie im richtigen Moment. Die Server-Seite der Webanwendung greift auf die Datenbank zu und extrahiert die benötigten Da-ten, um die vom Benutzer angeforderte Seite zu erzeugen.

Für die Datenbank-Implementierung wurde das relationale Datenbankmanage-mentsystem MySQL gewählt.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung III.3. Grafische Darstellung einer Webanwendung-Architektur mit DB Unterstützung

Quelle: Vgl. [Schwarz, 2010, S. 18]

Im folgenden Datenbankdiagramm (Abbildung III.4.) werden die realen Objekte der Webanwendung und die Beziehungen zwischen ihnen in Form eines Daten-bankdiagramms präsentiert.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung III.4. Grafische Darstellung des UML-Klassendiagramms

Quelle: entworfen von zuständigen Programmierer

[...]

^[1]Die Online-Enzyklopädie Wikipedia erläutert den Begriff Applikation wie folgt:

„Im deutschen Sprachraum wird die AbkürzungAppseit dem Erscheinen des iOS App Store (2008) fast ausschließlich mitmobiler Appgleichgesetzt, also Anwendungssoftware für Mobilgeräte wie Smartphones und Tablet-Computer. Allerdings wird inzwischen auch teilweise Desktop- AnwendungssoftwareAppgenannt...“

^[2]Standardmäßig in jedem Betriebssystem enthalten

^[3]folglich auch Tasktool genannt

^[4]Das Prinzip des semantischen Webs (oder auch Web 3.0) ist es, die vorliegenden Informationen nicht nur nach ihrer Hierarchie, sondern vielmehr nach ihrer inhaltlichen Bedeutung zu unterscheiden. [Franke, 2012, S.39]

^[5]eine Zeichenkette, die der Beschreibung von Mengen von Zeichenketten mit Hilfe bestimmter syntaktischer Regeln dient [Wikipedia2, 2013, Zugriff am 7.12.2013]

^[6]Datenkapselung bezeichnet man in der Programmierung das Verbergen von Daten oder Informationen vor dem Zugriff von außen. Vgl. [Wikipedia, 2013, Zugriff am 8.11.2013]

^[7]Server-Anfrage im Hintergrund

^[8]vorprogrammierte Lösungen für Webentwickler

^[9]einschließlich die Entwicklung der webbasierten Applikationen

^[10]www.wunderlist.com/de/

^[11]„..werden aus Sicht der Benutzer spezifiziert. Das sind die Aussagen in natürlicher Sprache, Diagramme und Tabellen..“ [Schneider, 2011 S.84].

^[12]mittels HTTPS-Protokols Verwendung

^[13]verbrauchtes Datenvolumen