Leopold-Franzens-University Innsbruck Institute of Computer Science Research Group Quality Engineering BACHELOR THESIS Cheetah Goes Web Patrick Ober und Michael Tscholl Supervisor: Assoc.-Prof. Dr. Barbara Weber Dr. Stefan Zugal Innsbruck, 15. Januar 2015 Inhaltsverzeichnis 1 Einleitung 1.1 Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Anforderungsspezifikation 2.1 Ausgangssituation . . . . 2.1.1 Cheetah . . . . . 2.1.2 Probleme . . . . . 2.2 Ziele . . . . . . . . . . . 2.3 Ablaufdiagramm . . . . . 2.4 UseCase Diagramm . . . 2.5 Detaillierte UseCases . . . 2.6 Klassendiagramm (UML) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Softwarearchitektur 3.1 Theoretische Ansätze der Softwarearchitektur 3.1.1 Scrum . . . . . . . . . . . . . . . . 3.1.2 Pair Programming . . . . . . . . . . 3.2 Module . . . . . . . . . . . . . . . . . . . . 3.2.1 Backend . . . . . . . . . . . . . . . 3.2.2 Frontend . . . . . . . . . . . . . . . 3.3 Datenbankmodell . . . . . . . . . . . . . . 3.4 Technologien . . . . . . . . . . . . . . . . . 3.4.1 Java IDE . . . . . . . . . . . . . . . 3.4.2 Eclipse . . . . . . . . . . . . . . . . 3.4.3 IntelliJ . . . . . . . . . . . . . . . . 3.4.4 Apache Tomcat v7.0 . . . . . . . . . 3.4.5 Java EE 7 . . . . . . . . . . . . . . 3.4.6 Maven . . . . . . . . . . . . . . . . 3.4.7 JAXB . . . . . . . . . . . . . . . . . 3.4.8 MySQL . . . . . . . . . . . . . . . . 3.4.9 Hibernate . . . . . . . . . . . . . . 3.4.10 HQL . . . . . . . . . . . . . . . . . 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 5 . . . . . . . . 6 6 6 6 7 8 9 9 19 . . . . . . . . . . . . . . . . . . 24 24 24 25 26 26 26 29 29 30 30 30 31 31 31 32 32 32 33 3.4.11 3.4.12 3.4.13 3.4.14 3.4.15 3.4.16 Git . . . . . . . . Bitbucket . . . . . XML . . . . . . . XML Schema . . CSV . . . . . . . Web Technologien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 33 34 34 34 34 4 Arbeitsteilung 37 5 Benutzerhandbuch 5.1 Installation . . . . . . . . . . . . . . 5.2 Verwendung . . . . . . . . . . . . . 5.2.1 Erstellung eines Fragebogens 5.2.2 XML Elemente . . . . . . . . 5.2.3 XML Attribute . . . . . . . . 5.2.4 Adminbereich . . . . . . . . 5.2.5 Ausfüllen eines Fragebogens . 39 39 45 45 55 67 71 72 6 Referenzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 3 Zusammenfassung Diese Arbeit beschäftigt sich mit dem Ablauf der Erstellung einer webbasierten Software, die zur Generierung und Verwaltung von Fragebögen dient. Anfangs wird auf die Ausgangssituation eingegangen, da die Software bereits als Java-Applikation vorhanden ist. Es wird auf die Probleme der Vorgängerversion eingegangen und beschrieben welche Vorteile und Möglichkeiten die webbasierte Version mit sich bringt. Im weiteren Verlauf werden Use Cases beschrieben und der Ablauf und die Verwendung näher erklärt. Zur Veranschaulichung der Module in der Software, sowie jene der Datenbank, sind grafische Modelle aufgeführt um einen Überblick zu verschaffen und Beziehungen darzustellen. Der letztere Teil beschäftigt sich mit der Vorgehensweise dieses Projektes und den verwendeten Technologien. Zur Hilfestellung bei der Erstellung von Fragebögen, sowie deren Verwendung, ist ein Benutzerhandbuch inkludiert. Dieses beinhaltet eine Installationsanleitung, sowie eine ausführliche Erklärungen zum Komplettumfang der Funktionalitäten der Software. 4 1 1.1 Einleitung Vorwort Diese Bachelorarbeit entstand im Rahmen des Studienganges Bachelorstudium Informatik an der Universität Innsbruck. Auf den Wunsch ein gemeinsames Projekt zu starten, welches im Bereich der Web- und Datenbank-Entwicklung angesiedelt ist, wurde eine Anfrage an die Forschungsgruppe Quality Engineering gestellt, ein solches als Bachelorarbeit durchführen zu können. Frau assoz. Prof. Mag. Dr. Barbara Weber hatte den Vorschlag, den Fragebogenteil der Cheetah Experimental Platform zu entkoppeln und als Webanwendung zu implementieren. Da dies genau unseren Wünschen entsprach, entschieden wir uns dieses Projekt anzunehmen. 5 2 2.1 2.1.1 Anforderungsspezifikation Ausgangssituation Cheetah Cheetah Experimental Platform (CEP) ist ein Projekt der Universität Innsbruck, welches darauf hin zielt, empirische Untersuchungen im Bereich des Geschäftsprozessmanagements (business process management) durchzuführen. Die Grundidee von CEP ist, eine Infrastruktur für Experimente einfach zur Verfügung zu stellen. Zu den Features der Software zählt, dass der Workflow eines Experimentes definiert werden kann. Somit kann eine Abfolge von Komponenten festgelegt werden, die dem Teilnehmer des Experimentes angezeigt werden. Es gibt eine Vielzahl an vorgefertigten Komponenten, aus denen man auswählen kann. Dazu zählen Fragebögen, ein Modellierungseditor, Messageboxen, ein Feedbackformular und Modellierungstutorials. Bei bedarf können eigene Komponenten dazuentwickelt werden. Im Bereich des Datenmanagements verfügt CEP über die Möglichkeit, Daten während des Experiments zu speichern, welche unter Anderem auch für Analysen herangezogen werden können. Zur Auswertung der gesammelten Daten existiert eine Exportmöglichkeit in Form von CSV-Dateien. Damit können diverse Tools, wie SPSS, Excel, etc., eingesetzt werden, um die Daten zu analysieren. 2.1.2 Probleme CEP ist eine Java basierte Anwendung. Dies führt dazu, dass der Benutzer das Programm am Rechner installieren muss. Die Software wird per E-Mail verteilt, in welchem sich ein Link zum Download befindet. Die Installation stellt sich als problematisch dar, da man für jedes Betriebssystem einen eigenen Download anbieten muss. Dies macht es schwieriger, Leute für Experimente zu motivieren. Die Daten eines Fragebogens werden lokal gespeichert und dann automatisch in eine Datenbank geschrieben. Hat der Teilnehmer zum Zeitpunkt der Durchführung des Experiments keine Internetverbindung, so wird er aufgefordert, die Daten per E-Mail zu senden. Somit ist man auf die Kooperation des Anwenders angewiesen, um Daten zur Auswertung zu erhalten. Die Erstellung eines Fragebogens findet im Quellcode statt. Somit sind folgende 6 Anforderungen nötig: • Zugriff auf den Quellcode • Erfahrung in Java Programmierung • Verständnis der bestehenden Programmstruktur • Kenntnisse in der Entwicklungsumgebung Eclipse 2.2 Ziele Das Augenmerk des Projektes lag darin, das Fragebogen-Tool von CEP zu entkoppeln und als Webkomponente zu gestalten. Die Anwendung sollte auf einem Tomcat 7 Server laufen und in Java EE 7 geschrieben werden. Die Erstellung von Fragebögen geschieht in Form eines XML-Imports. Dabei werden die Fragen und Antwortmöglichkeiten, sowie Design und Gültigkeitszeitraum bezüglich eines Schemas definiert. Folglich erreicht man, dass jeder, unabhängig des Quellcodes, einen Fragebogen erstellen kann. Durch die Verwendung des XML Formates reduziert sich die Problematik der erforderlichen Kenntnisse, zur Erstellung von Fragebögen, lediglich auf Kenntnisse im Schreiben von XML Dateien. Hilfestellung leistet dabei ein vordefiniertes Schema, bezüglich wessen ein erstellter Fragebogen validiert wird. Das Schema ist zwei geteilt. Zum einen wurden diverse Konfigurationsmöglichkeiten, wie Laufzeit eines Fragebogens, Auswahl eines Designs, sowie die Wartezeit zwischen dem Ausfüllen des selben Fragebogens, implementiert. Der Ersteller hat die Möglichkeit, ein eigenes optisches Design in Form einer CSS- und HTML-Datei zu übergeben. Zum anderen werden die Fragen und Antwortmöglichkeiten definiert. Das Schema zur Generierung eines Fragebogens ist an die Überlegung, zur Erstellung eines pen-and-paper Fragebogens, angelehnt. Durch die Definition verschiedener Typen kann angegeben werden, ob die Antworten als Multiple-Choice, in Form eines Textfeldes, oder sonstiges, erscheinen. Beschränkungen und Abhängigkeiten bezüglich der Eingaben sind bestimmbar. Nach der Erstellung eines Fragebogens wird eine URL generiert, welche genutzt werden kann, um diesen zu verteilen. Um Datenverlust zu vermeiden, werden 7 Antworten laufend am Server gespeichert. Mit Hilfe von Cookies wird gewährleistet, dass durch unerwartetem, oder gewolltem Abbruch eines Fragebogens, der Benutzer wieder an die zuletzt besuchte Stelle geleitet wird. Neben den Antworten, die ein Teilnehmer abgibt, werden noch weitere Informationen gespeichert. Dazu zählen Browserinformationen, Auflösung, benötigte Zeit, IP-Adresse, etc.. Auch Scrollverhalten und Mausbewegungen werden aufgezeichnet. Dies dient zur Evaluierung des Fragebogens aus Sicht des Erstellers. Anhand dieser Daten kann auf ungünstiges Design eines Fragebogens geschlossen werden. Wie schon in der Vorgängerversion, können Daten als CSV-Datei exportiert werden. Neben einem Export von Antworten, ist es auch möglich Informationen zum Teilnehmer zu erhalten. 2.3 Ablaufdiagramm Abbildung 1: Ablaufdiagram 8 2.4 UseCase Diagramm Abbildung 2: UseCase Diagramm 2.5 Detaillierte UseCases 9 01 UseCase: Login Auslöser Administrator Kurzbeschreibung Der Administrator kann sich mit Hilfe eines Usernamens und Passworts authentifizieren. Vorbedingung Administrator darf nicht angemeldet sein. Nachbedinung Administrator ist eingeloggt. Basisablauf 1. Eingabe des Usernamens. 2. Eingabe des Passwortes. 3. Versenden der Daten durch das Klicken auf den Login Button. 02 UseCase: Logout Auslöser Administrator Kurzbeschreibung Durch das Klicken auf den Logout Button wird der Benutzer abgemeldet und es wird ein erneuter Login benötigt, um wieder auf die Administratorfunktionen zugreiffen zu können. Vorbedingung Man muss angemeldet sein. Nachbedinung Administrator ist abgemeldet. Basisablauf 1. Klick auf den Logout Button. 10 03 UseCase: Fragebogen hochladen Auslöser Administrator Kurzbeschreibung Der Administrator ist in der Lage Fragebögen hochzuladen. Ist der Fragebogen valide (bzgl. des XMLSchemas) wird dieser in die Datenbank geschrieben. Vorbedingung Der Fragebogen ist valide. Nachbedinung Der Fragebogen wurde zur Datenbank hinzugefügt. Basisablauf XML-Datei: 1. Auf choose file klicken. 2. Zum Verzeichnis, in dem sich der Fragebogen befindet, navigieren. 3. Fragebogen durch Doppelklick oder durch Auswahl und Klick auf open auswählen. 4. Mit Klick auf Upload File den Fragebogen auf den Server laden. Alternative Abläufe, Ausnahmen A ZIP-Datei: 3. Der Fragebogen muss den Dateinamen survey.xml haben. 4. Komprimierten Ordner auswählen. (MIME-Type zip). 5. Zip-Datei hochladen. 11 04 UseCase: Daten exportieren Auslöser Administrator Kurzbeschreibung Der Administrator ist hier in der Lage Daten, bezüglich eines Fragebogens, zu exportieren. Vorbedingung Angemeldet als Administrator und Fragebogen wurde ausgefüllt. Basisablauf 1. Auswahl eines Fragebogens durch Dropdown Menü. 2. Klick auf Download survey data. Alternative Abläufe, Ausnahmen A 2. with user tracking auswählen, um Trackingdaten des Users hinzuzufügen. 3. Klick auf Download survey data. B 2. with page tracking auswählen, um Pagetrackingdaten hinzuzufügen. 3. Klick auf Download survey data. C 2. with user tracking auswählen, um Trackingdaten des Users hinzuzufügen. 3. with page tracking auswählen, um Pagetrackingdaten hinzuzufügen. 4. Klick auf Download survey data. 12 05 UseCase: Fragen/Antworten exportieren Auslöser Administrator Kurzbeschreibung Antworten des Users werden bezüglich der Fragen im CSV-Format generiert und zum Download freigegeben. Vorbedingung Angemeldet als Administrator und Fragebogen wurde ausgefüllt. Basisablauf 1. Klick auf Download survey data. 06 UseCase: Tracking Auslöser Administrator Kurzbeschreibung Daten bezüglich des Users werden im CSV-Format generiert. Diese beinhalten Informationen zum User, sowie dessen Verhalten beim ausfüllen eines Fragebogens. Vorbedingung Angemeldet als Administrator und Fragebogen wurde ausgefüllt. Basisablauf 1. Haken bei gewünschtem export setzen. 2. Klick auf Download survey data. 13 07 UseCase: Benutzerverhalten exportieren Auslöser Administrator Kurzbeschreibung Daten bezüglich des Benutzerverhaltens werden im CSV-Format generiert. Diese beinhalten Informationen wie: Mausbewegung, Scroll-Verhalten sowie die Zeit die der User auf einer Seite verbrachte. Vorbedingung Angemeldet als Administrator und Fragebogen wurde ausgefüllt. Basisablauf 1. Haken bei with page tracking setzen. 2. Klick auf Download survey data. 08 UseCase: Benutzerinformationen exportieren Auslöser Administrator Kurzbeschreibung Daten bezüglich des Users werden im CSV-Format generiert. Diese beinhalten technische Spezifikationen (zB.: Auflösung, Betriebssystem, Browser, etc.) und die benötigte Zeit für den Fragebogen. Vorbedingung Angemeldet als Administrator und Fragebogen wurde ausgefüllt. Basisablauf 1. Haken bei with user tracking table setzen. 2. Klick auf Download survey data. 14 09 UseCase: Testmodus starten Auslöser Administrator Kurzbeschreibung Der Administrator ist in der Lage, den Testmodus zu starten. In diesem Modus werden eingetragene Daten nicht in der Datenbank gespeichert. Auch ist man in der Lage zwischen verschieden Fragebögen zu wechseln, ohne zeitliche Einschränkung (cooldown) oder bereits angefangene Fragebögen zu beachten. Expiringund Releasedates werden ebenfalls ignoriert. Vorbedingung Als Administrator angemeldet. Basisablauf 1. Auswählen eines Fragebogens im Bereich URLs mit dem Spaltennamen Test mode. 2. Testen des Fragebogens im neu geöffneten Tab des Browsers. Alternative Abläufe, Ausnahmen A 1. Direkter Zugriff über die URL: <domain>/Page?mode=test&survey=<titel>. 10 UseCase: Fragebogen validieren Auslöser System Kurzbeschreibung Nach dem Hochladen eines Fragebogens wird dieser bezüglich des Schemas validiert. Nur valide Fragebögen werden in die Datenbank geschrieben. Vorbedingung Vorhandener Fragebogen. Nachbedinung Fragebogen ist valide. Basisablauf 1. Fragebogen wird hochgeladen. 15 11 UseCase: URL erstellen Auslöser System Kurzbeschreibung Zu jedem hochgeladenen Fragebogen wird eine URL zu diesem generiert. Vorbedingung Fragebogen wurde hochgeladen. Basisablauf 1. Fragebogen wird hochgeladen. 12 UseCase: Fragebogen erweitern Auslöser Administrator, Fragebogenersteller Kurzbeschreibung Ein bereits aktiver Fragebogen wird erweitert oder verbessert und wieder hochgeladen. Vorgängerversion bleibt erhalten und wird mit Zeitstempel versehen. Vorbedingung bestehender Fragebogen. Nachbedinung XML ist valide. Basisablauf 1. Dokument erweitern oder verbessern. 2. Fragebogen hochladen. 16 13 UseCase: Fragebogen ausfüllen Auslöser Teilnehmer, Administrator, Fragebogenersteller Kurzbeschreibung Aufteilung in Beantwortung und Senden der Fragen. Diverse Userdaten werden im Hintergrund mitgeloggt. Vorbedingung Fragebogen ist online und aktiv (im Zeitfenster des Release-/Expiringdates). Nachbedinung Server erreichbar. Basisablauf 1. Beantworten der Fragen. Alternative Abläufe, Ausnahmen A 1. Fragebogen wird beendet. 14 UseCase: Fragen beantworten Auslöser Teilnehmer, Administrator, Fragebogenersteller Kurzbeschreibung Ausfüllen der Fragen. Vorbedingung Fragebogen ist online und aktiv (im Zeitfenster des Release-/Expiringdates). Nachbedinung Server ist online. Basisablauf 1. Beantworten der Fragen. Alternative Abläufe, Ausnahmen A 1. Fragebogen wird beendet. 17 15 UseCase: Antworten senden Auslöser Teilnehmer, Administrator, Fragebogenersteller Kurzbeschreibung Senden der beantworteten Fragen an den Server. Vorbedingung Fragen beantwortet. Nachbedinung Server ist online. Basisablauf 1. Klick auf Next. Alternative Abläufe, Ausnahmen A 1. Fragebogen wird beendet. 18 2.6 Klassendiagramm (UML) Abbildung 3: Alle Klassen mit allen Attributen und Methoden 19 Abbildung 4: Klassendiagramm mit Beziehungen 20 Abbildung 5: Packagediagramm 21 Abbildung 6: Alle Klassen die benötigt werden um eine Seite Darzustellen 22 Abbildung 7: Hibernate Klassendiagramm 23 3 3.1 Softwarearchitektur Theoretische Ansätze der Softwarearchitektur Die Qualität der Software-Architektur ist einer der entscheidenden Erfolgsfaktoren bei der Entwicklung von Softwareprojekten. Man benötigt ein fundiertes und umfassendes Entwurfswissen, das über die reine Programmierung hinaus geht. Entwicklungsteams haben oft spezielle Anforderungen an das zu entwickelnde Software-System. Beispielsweise müssen Entwicklungsaufgaben sinnvoll teilbar sein, damit mehrere Personen parallel am Projekt arbeiten können. Dieses Qualitätsmerkmal wird durch die Anwendung von agilem Vorgehen wie Scrum verstärkt. 3.1.1 Scrum Scrum ist ein kundenorientiertes, iteratives Vorgehensmodell zur Entwicklung von Software. Scrum versucht, die Prinzipien agiler Softwareentwicklung in der Praxis anzuwenden. Das Framework besteht aus vordefinierten Tools und Prozessen, die nach klar definierten Schemata angewendet werden. Durch seinen Aufbau sorgt Scrum für Effizienz und Transparenz der Entwicklung. Das starre Gebilde von Pflichten- und Lastenheft fallen hier weg. Durch Meetings am Ende eines Intervalls (Sprints) können Kunden Teile des Produktes bereits sehen und Einfluss darauf nehmen. So können Unstimmigkeiten und fehlenden Anforderungen behoben werden ohne große Probleme zu verursachen. Bezüglich der Definition stellten unsere Betreuer den Kunden dar. Durch regelmäßige Meetings wurden Ziele klar definiert. Nach der Vollendung eines Intervalls wurden die Ergebnisse präsentiert. Dadurch konnte sofort Einfluss darauf genommen werden, um Folgeproblemen vorzubeugen. 24 Abbildung 8: Scrum Ablauf [19] 3.1.2 Pair Programming Pair Programming bedeutet, dass bei der Erstellung des Quellcodes jeweils zwei Programmierer an einem Rechner arbeiten. Ein Programmierer schreibt den Code, während der andere über die Problemstellungen nachdenkt, den geschriebenen Code kontrolliert sowie Probleme, die ihm dabei auffallen, sofort anspricht. Diese können dann sofort im Gespräch zu zweit gelöst werden. Die beiden Programmierer sollten sich bezüglich dieser beiden Rollen abwechseln. Zunächst soll Pair Programming die Softwarequalität steigern. Durch die Kontrollfunktion der zweiten Person sollen problematische Lösungen vermieden werden. Pair Programming dient aber auch zur Verbreitung von Wissen über den Quellcode. Bei diesem Projekt wurde hauptsächlich Pair Programming angewandt. Grob wurden die Rollen zwischen Backend und Frontend gewechselt, da sich auch dort die Erfahrung beider unterscheidet. Nachdem das Grundgerüst gemeinsam erarbeitet wurde, wurden diverse Verbesserungen und Anpassungen untereinander delegiert. 25 3.2 Module Grob betrachtet besteht die Software aus 2 Modulen, dem Adminbereich und dem Antworten- bzw. Fragebogenbereich. Wir unterteilen diese Module in Backend (Adminbereich) und Frontend (Fragebogenteil). Es werden beide Bereiche, aus Sicht des Users und des Entwicklers, erklärt. 3.2.1 Backend User Das Backend, aus Sicht des Users, besteht aus dem Adminbereich. In diesem finden sich Funktionalitäten zum Hochladen von Fragebögen wobei auch eine Validierung geschieht. Antworten, sowie diverse Daten bezüglich der Teilnehmer, können als CSV Datei exportiert werden. Weiters gibt es einen Bereich zum Testen eines Fragebogens. Dabei sind Konfigurationen, bezüglich des Cooldowns, Releasedates und Expiringdates, deaktiviert. Der Cooldown bestimmt die Zeit die vergehen muss, damit ein Benutzer den selben Fragebogen erneut ausfüllen kann. Release- und Expiringdate geben an, in welchem Zeitraum der Fragebogen gültig ist. Zusätzlich werden keine Daten in die Datenbank geschrieben, da diese für eine Auswertung nicht relevant sind. Zusätzlich sind die jeweiligen URLs zu den Fragebögen angeführt. Diese können zur Verteilung herangezogen werden. Entwickler Die Umsetzung des Exports bezieht sich auf multiple Datenbankabfragen. Bezüglich des Downloads der Fragen und Antworten werden die jeweiligen Spalten zu Reihen transformiert. Dies geschieht, um Formate für Auswertungswerkzeuge von CSV Dateien zu unterstützen (siehe Abb. 19). 3.2.2 Frontend User Als Frontend bezeichnen wir den Fragebogenteil. Dieser ist so aufgebaut, wie man einen Fragebogen überlicherweise auf einem Blatt Papier vorfindet. Ein Fragebogen hat, optional, ein Veröffentlichungsdatum und ein Ablaufdatum. Ist man in diesem Zeitfenster, kann man den Fragebogen ausfüllen. Ansonsten wird man darauf hingewiesen, dass der Fragebogen noch nicht zur Verfügung steht, oder bereits abgelaufen ist. 26 Wird ein neuer Fragebogen gestartet, so ist der Fokus auf jeder Fragebogenseite jeweils auf die erste Frage gesetzt. Dadurch ist es möglich, mit der TabulatorTaste schnell über die Fragen zu iterieren. Es gibt Fragen, bei denen die Beantwortung verpflichtend ist, um auf die nächste Seite zu gelangen. Wird sie nicht beantwortet, so wird der Fortschritt verwehrt und es wird darauf hingewiesen, dass man die Frage beantworten muss. Der User steht verschiedenen Eingabefeldern gegenüber. So gibt es neben den Standard-Inputfeldern für Text und Selektierfelder auch komplexere Auswahlmöglichkeiten. Mit den in HTML5 neu eingeführten Inputfeldern gibt es auch verschiedene Eingabeformate (Datum, EMail, Zahlen,. . . ). Ist die Eingabe nicht im gewünschten Format, so wird darauf aufmerksam gemacht. Nachdem eine ausgefüllte Seite abgeschickt wurde, kann der User nicht mehr zurück gehen, um Änderungen vorzunehmen. Wurde ein Fragebogen vollständig ausgefüllt, so muss man, sofern ein Cooldown angegeben wurde, eine gewisse Zeit abwarten, um den selben Fragebogen ein erneutes mal ausfüllen zu können. Entwickler Mit Hilfe der Klasse Parse2html wird aus den Informationen aus der Datenbank eine statische HTML-Seite generiert, somit ist die fertig geladene Seite bereits auf dem Server. Mit dem Servlet PageServlet wird nur noch entschieden welche Seite ausgeliefert wird und wie die empfangenen Daten weiter verarbeitet werden. Durch das Vorladen erreichen wir ein schnelleres ausliefern der Seite und es fällt auch weniger Last am Server an. Logging Folgende Informationen zum User werden geloggt: • IP • Location • Browser • OS • Auflösung 27 Das Auslesen der IP und Location geschieht durch eine JSON Abfrage an www. telize.com/geoip?callback=?. Die Location wird aber nicht gespeichert. Informationen zum Browser und Betriebssystem werden mit Hilfe der WhichBrowser.js Bibliothek ausgelesen. Die Auflösung erhalten wir mit einem Javascript Aufruf. Antwortanalyse Hier wird das Verhalten des Users geloggt. Es wird die Zeit gemessen, die der User pro Seite eines Fragebogens benötigte. Des weiteren werden die Koordinaten der Maus und das Scrollen periodisch aufgezeichnet. • Zeit • Mausbewegungen • Scrollverhalten Das Auslesen dieser Informationen geschieht mit Hilfe von jQuery. Maus- und Scrollbewegungen führen zu einem Event. Durch diesen werden alle 1000 Millisekunden die Koordinaten des Mauszeigers ausgelesen und alle 500 Millisekunden wird die Information der unteren Kante des Fensters festgehalten. 28 3.3 Datenbankmodell Abbildung 9: ER-Diagramm 3.4 Technologien Im folgenden Absatz wird beschrieben, welche Technologien bei dem Projekt zum Einsatz kamen. 29 3.4.1 Java IDE Als Entwicklungsumgebung wurden sowohl Eclipse als auch IntelliJ IDEA verwendet. 3.4.2 Eclipse Eclipse ist eine Open-Source-Entwicklungsumgebung, die mit der Zielsetzung der Modularität realisiert wurde. Je nach Aufgabenstellung kann Eclipse durch diverse Plugins erweitert werden. Ursprünglich als integrierte Entwicklungsumgebung (IDE) ausschließlich für die Programmiersprache Java entworfen, werden nun eine Vielzahl anderer Sprachen wie C++, PHP, Ruby und andere durch entsprechende Erweiterungen unterstützt. [8] Download: https://eclipse.org 3.4.3 IntelliJ IntelliJ IDEA ist eine integrierte Entwicklungsumgebung (IDE) des Softwareunternehmens JetBrains für die Programmiersprache Java. Zu den Features gehören Refactoring, Unterstützung von Java EE, Ant, JUnit, ein grafischer GUI-Editor, Tools zur Versionskontrolle sowie verschiedene Möglichkeiten zur automatischen Erstellung von Code. [9] [10] Der Funktionsumfang kann mittels Plugins erweitert werden. Diese werden teils von JetBrains, teils von der IntelliJ-Community entwickelt. Es wurde vor allem Version 13, mit folgenden Plugins, verwendet: • Hibernate Support v1.0 • Persistent Framework Support • Git Integration v8.1 • Java EE: Java Server Faces • Maven Integration • Maven Integration Extension 30 Download: https://www.jetbrains.com/idea/ 3.4.4 Apache Tomcat v7.0 Apache Tomcat ist ein Open-Source-Webserver, der die Spezifikation für Java Servlets und JavaServer Pages (JSP) implementiert. Es wird ermöglicht, in Java geschriebene Web-Anwendungen auf Servlet- beziehungsweise JSP-Basis auszuführen. Ab Tomcat 7 wurden Annotations (z.B @test) eingeführt, sowie die Unterstützung für Java EE 7. [11] Download: http://tomcat.apache.org/download-70.cgi 3.4.5 Java EE 7 Die Java Enterprise Edition ist der Standard in der communitygetriebenen Unternehmenssoftware. Java EE wurde in Kooperation mit der Java Community, sowie kommerziellen Open-Source-Organisationen, Beiträgen von industriellen Experten, sowie Java User Groups, entwickelt. Jede Version integriert neue Funktionalitäten, die an industrielle Bedürfnisse angepasst sind. Auch wird die Portierbarkeit von Anwendungen verbessert. Durch die Neuerungen soll die Produktivität der Entwickler erhöht werden. [12] Download: http://www.oracle.com/technetwork/java/javase/downloads/ index.html 3.4.6 Maven Maven ist ein automatisches Build-Tool, welches vor allem bei Java Projekten verwendet wird. Es besteht aus zwei Teilen. Erstens wird beschrieben wie das Programm erstellt wird und zweitens werden alle Abhängigkeiten beschrieben. Mit Hilfe eines XML Files ist man in der Lage alle nötigen Bibliotheken in der richtigen Version automatisch herunter zu laden und das Programm zu erstellen.[13] Download: http://maven.apache.org/ 31 3.4.7 JAXB Java Architecture for XML Binding, kurz JAXB, ist eine Programmschnittstelle in Java, die es ermöglicht, Daten aus einer XML-Schema-Instanz heraus automatisch an Java-Klassen zu binden und diese Java-Klassen aus einem XML-Schema heraus zu generieren. Somit ist ein Arbeiten mit XML-Dokumenten möglich, ohne dass der Programmierer direkt Schnittstellen zur Verarbeitung von XML wie SAX oder DOM verwenden muss. Marshalling generiert bei JAXB aus einem Baum von Java-Objekten ein XMLDokument. Dies ist eine spezielle Form der Serialisierung. Der umgekehrte Weg heißt Unmarshalling - eine spezielle Form der Deserialisierung. Hierbei wird aus einem gegebenen XML-Dokument wieder ein Baum von Java-Objekten generiert. Um eine solche Umwandlung eindeutig zu realisieren, verwendet man XMLSchemata. Die verwendeten XML-Dokumente gehorchen den im Schema definierten Regeln. Ab Java EE 5 ist JAXB in der Standardlibrary inkludiert.[14] 3.4.8 MySQL MySQL ist ein relationales Datenbankmanagementsystem (RDBMS) welches unter der GNU Lizenz entwickelt wird. Es handelt sich dabei um eine Rationale Datenbank welche einen SQL Dialekt verwendet. Gerade bei Web Projekten wird sehr oft auf MySQL zurück gegriffen. CMS Systeme wie TYPO3, Joomla, WordPress, . . . arbeiten mit MySQL. Download: http://www.mysql.com/ 3.4.9 Hibernate Hibernate ist eine ORM (Object-Relational Mapping) Bibliothek, welche eine Schnittstelle zwischen relationale Datenbanken und objektorientierten Umgebungen schafft. Unter ORM versteht man das Projizieren von Entitäten auf Java Objekte, somit scheint die Datenbank als objektorientierte Hierarchie auf. Das Lesen aus der Datenbank, sowie das Schreiben, aus Sicht der Applikation, geschieht über die erstellten POJOs (Plain Old Java Object). Folglich werden Datenbankeinträge objektbasiert generiert oder manipuliert und im Nachhinein in 32 die Datenbank geschrieben. Download: http://hibernate.org/ 3.4.10 HQL Hibernate verwendet eine eigene Query Language welche SQL ähnelt. HQL ist zur Gänze objektorientiert und beruht sich auf das gemappte Datenbankmodell. Abhängig von der Datenbank, wird die Hibernate Query in den entsprechenden SQL-Dialekt umgewandelt. Die Umwandlung geschieht mittels JDBC (Java Database Connectivity). 3.4.11 Git Git ist ein verteiltes Versionskontrollsystem mit dem Schwerpunkt auf Geschwindigkeit, Datensicherheit und Unterstützung für verteilte, nicht-lineare Workflows. Git wurde ursprünglich von Linus Torvalds für die Linux-Kernel-Entwicklung entworfen. Wie bei den meisten anderen verteilten Versionskontrollsystemen und anders als die meisten Client-Server-Systeme, ist jedes Git-Arbeitsverzeichnis ein vollwertiges Repository mit kompletter Historie und tracking Funktionen unabhängig von Netzwerkzugang oder eines zentralen Servers. Git ist eine freie Software unter den Bedingungen der GNU General Public License. [17][18] 3.4.12 Bitbucket Bitbucket ist ein Web-basierter Hosting Service von Atlassian für die verteilten Versionskontrollsysteme Git und Mercurial(hg). Es gibt gratis Accounts sowie kostenpflichtige Accounts. Bei der freien Version können unbegrenzt viele private und öffentliche Repositories erstellt werden und bis zu 5 Personen können an einem Repository arbeiten. Bei der kostenpflichtigen Version ist diese Anzahl unbegrenzt. Bitbucket stellt alle nötigen Features für das Repository-Management zur Verfügung (Code-Browser, Forks, Commit-History, etc.) und bietet mit einem 33 integrierten Wiki, sowie einem Issue-Tracking-System, zwei praktische Werkzeuge zur Verfügung.[7] 3.4.13 XML Die Extensible Markup Language, abgekürzt XML, ist eine Auszeichnungssprache zur Darstellung hierarchisch strukturierter Daten in Form von Textdateien. XML wird u.a. für den plattform- und implementationsunabhängigen Austausch von Daten zwischen Computersystemen eingesetzt. [16] 3.4.14 XML Schema XML Schema, abgekürzt XSD (XML Schema Definition), beschreibt, in einer komplexen Schemasprache, Datentypen und einzelne XML-Schema-Instanzen. Ein konkretes XML Schema wird auch als eine XSD (XML Schema Definition) bezeichnet und hat als Datei üblicherweise die Endung .xsd.[16] 3.4.15 CSV Das Dateiformat CSV (Character-separated values) beschreibt den Aufbau einer Textdatei zur Speicherung oder zum Austausch einfach strukturierter Daten. In CSV-Dateien können Tabellen oder eine Liste unterschiedlicher Länge abgebildet werden. Kompliziertere, beispielsweise geschachtelte Datenstrukturen können durch zusätzliche Regeln oder in verketteten CSV-Dateien gespeichert werden. [15] 3.4.16 Web Technologien HTML 5 HTML ist eine Auszeichnungssprache für Webdokumente. Elemente einer Webseite, zum Beispiel Texte, Bilder oder Videos, werden mit dieser Sprache strukturiert und plattformübergreifend dargestellt. Ein entscheidender Nachteil von HTML4 ist zum Beispiel die Wiedergabe von Audio und Video, die ohne externe Plugins nicht möglich ist - das ist unter anderem immer eine potenzielle Sicherheitslücke. Auch bewirkt die Notwendigkeit von Plugins den zusätzlichen Aufwand von Ressourcen. Zur Lösung dieses Problems wurde HTML5 34 entwickelt. HTML5 stellt beispielsweise für Audio und Video eine eigene Semantik zur Verfügung. Die Strukturierung und Auszeichnung von Content wird mit HTML5 spürbar besser. Vor allem die einheitliche Strukturierung macht es den Robots der Suchmaschinen einfacher, die Inhalte von Webseiten zu analysieren und einzuordnen. [1] [2] CSS3 CSS (Cascading Style Sheet) ist eine Stilsprache die das Aussehen von HTML-Dokumenten definiert. CSS entstand um die Struktur von der Formatierung, wie Layout, Farben und Schriftarten zu trennen. Durch die Einbindung einer CSS-File in den HTML-Head kann zentral das Design erstellt werden und an alle Dokumente ausgeliefert werden. JSP JSP (JavaServer Pages) ist eine Java Technologie um dynamische Inhalte mit statischen Inhalten einer Web-Resource zu verbinden. Im wesentlichen findet sich diese Technologie in Kombination mit HTML oder XML. Vom Prinzip her gesehen, kann jede HTML Seite als JSP Seite angesehen werden wobei die dynamischen Inhalte fehlen. Um aus einer HTML Seite eine JSP Seite zu erzeugen, muss lediglich die Endung .html durch .jsp ersetzt werden. JSP ist auf Basis der Servlet Technologie entstanden. Die Grundidee ist, dass der statische Inhalt einer Web-Resource nicht aufwendig in der Servlet-Programmierung mit dem dynamischen Inhalt zusammengestellt werden kann. [3] JQuery JQuery ist eine schnelle und featurereiche JavaScript-Bibliothek.Dadurch wird das traversieren von HTML-Dokumenten, sowie das Manipulieren, EventHandling, Animationen und vorallem Ajax, vereinfacht. Die easy-to-use API von jQuery funktioniert auf nahezu allen Browsern gleich. [4] JavaScript Form Validator 4.0 Durch die Verwendung des JavaScript schafft man eine effiziente Lösung zur Validierung von Inputfeldern. Existiert jedoch eine große Anzahl an solchen Feldern auf einer Seite, so wird die Validierung sehr komplex. Hier kommt der JavaScript Form Validator ins Spiel. Wozu Form Validation: • um dem User zu helfen, schnell und einfach das Formular auszufüllen. 35 • um den User dazu zu bringen, korrekte Eingaben zu tätigen. • zur Identifizierung von fehlerhaften Eingaben und automatischer Behebung.[5] Download: http://www.javascript-coder.com/html-form/ javascript-form-validation.phtml WhichBrowser.js WhichBrowser von Niels Leenheer ist eine JavaScript-Bibliothek, welche dazu Genutzt werden kann, Informationen über den Browser, Renderengine, Betriebssystem und Gerät herauszufinden. Because everybody lies. [. . . ] there is not a single browser that is completely truthful.[6] Diese Bibliothek wurde verwendet da sehr viele User Agents oft fehlerhafte Informationen geben. Download: https://github.com/WhichBrowser/WhichBrowser 36 4 Arbeitsteilung Der Ablauf des Projektes geschah in zwei Phasen. Das Grundgerüst wurde im Stile von Pair Programming durchgeführt. Somit konnten die Unterschiede, in den Kenntnissen der Programmierung, gut ausgeglichen werden, da sich diese im Bereich der Backend- und Frontendentwicklung differenzierten. Nachdem das Fundament stand, wurde die Entwicklung einzelner Module untereinander verteilt. Die Module wurden in gemeinsamen Sessions entwickelt, jedoch ist die Verantwortung der Bereiche wie Folgt aufgeteilt: Gemeinsam: • XML-Schema - Definierung der Struktur eines Fragebogens • Datenbank - Modellierung der Tabellenstruktur und Beziehungen • XML Mapper - Fragebogen in Datenbank ablegen und validieren Patrick Ober: • Datentransformation der zu exportierenden Datensätze • Export - Generierung der CSV-Dateien mit Fragen/Antworten, Benutzerinformationen und Benutzerverhalten • Hibernate Datenbank-Model - Erstellung der Datenbankstruktur in Objektorientierter Form • Speichern der Daten - Antworten und Loggingdaten in Datenbank schreiben Michael Tscholl: • Upload - Hochladen der Dateien die für den Fragebogen nötig sind (XML, Bilder und Templates) • Adminbereich - Authentifizierung, Testmodus, CSV-Download • Logging - Aufzeichnen der Benutzerinformationen beim Ausfüllen eines Fragebogens 37 • HTML Seiten - Logik der Seitenauslieferung (Controller) Es wurden Termine vereinbart, an denen gemeinsam am Projekt gearbeitet wurde. In diesen Sessions wurden die verschiedenen Verantwortungsbereiche weiterentwickelt. Somit konnte man sich bei Problemen gegenseitig helfen. 38 5 5.1 Benutzerhandbuch Installation Herunterladen Der Sourcecode des Projektes ist auf Bitbucket als Git Repository zu finden. Die aktuelle Version befindet sich im beta Branch. Durch klonen des Repositorys kann das Projekt heruntergeladen werden (siehe Abb. 10). Abbildung 10: git clone cheetah Vorbereitung der Datenbank Im heruntergeladenen Projekt befindet sich im Verzeichnis: cheetah − maven/src/main/resources/ ein SQL-Importscript. Dieses kann, beispielsweise mit phpMyAdmin, importiert werden (siehe Abb. 11 und Figure 12). Alternativ kann der Import auch über die Kommandozeile ausgeführt werden: mysql -u username -p <cheetah−maven/src/main/resources/cheetah_2014− 11 − 06.sql 39 Abbildung 11: SQL import Abbildung 12: Import Ergebnis 40 Eclipse Import Maven ist ein automatisches Buildprogramm für Javaprojekte. Beispielhaft an Eclipse wird gezeigt wie das Projekt korrekt importiert wird (siehe Abb. 13). Für das Root Directory wird der Pfad zur pom.xml Datein angegeben (bsp.: Figure 14). Abbildung 13: Maven Import, File -> Import. . . 41 Abbildung 14: pom.xml Hibernate Konfiguration Zur Verknüpfung der Datenbank mit dem Projekt, muss die Hibernatekonfigurationsdatei (hibernate.cfg.xml) angepasst werden. Hierfür gibt man den Benutzernamen und das Passwort, sowie die JDBC Datenbank URL, an (siehe Abb. 15). 42 Abbildung 15: hibernate.cfg.xml WAR Export Um Cheetah auf dem Server zu deployen, muss eine WAR Datei erstellt werden (siehe Abb. 16 und Figure 17). 43 Abbildung 16: Export WAR, File -> Export. . . 44 Abbildung 17: WAR-Container abspeichern Projekt online stellen Abschließend muss die WAR Datei auf dem Tomcat Server ins webapps Verzeichnis geschoben werden. Dort wird es automatisch erkannt und deployt. 5.2 5.2.1 Verwendung Erstellung eines Fragebogens Einfaches Beispiel mit Config Beschreibung <?xml version="1.0" encoding="utf-8"?> <survey title="01_example"> <!-- title ist ein Pflichtattribut und wird zur Identifizierung eines Fragebogens benutzt--> 45 <config> <releasedate>2014-01-04</releasedate> <!-- optional --> <expiringdate>2016-01-04</expiringdate> <!-- optional --> <template>path/to/template.html</template><!-- man kann sein eigenes Design angeben, optional--> <cooldown>10</cooldown> <!-- Zeitraum, den man warten muss, bis man diesen Fragebogen wieder ausfüllen kann. Wird in Minuten angegeben und ist optional --> </config> <page> <!-- neue Seite --> <issue> <!-- neue Frage --> <question>1. Frage</question> <!-- Frage --> <hint>Hilfe</hint> <!-- Hilfestellung, optional --> <input type="textbox" /> <!-- Typ des Antwortfeldes --> </issue> <issue> <!-- mehrere Fragen pro Seite--> <question>2. Frage</question> <hint>Hilfe</hint> <input type="textbox" /> </issue> </page> <page> <!-- mehrere Seiten möglich --> <issue> <question>3. Frage</question> <hint>Hilfe</hint> <input type="textbox" /> </issue> </page> </survey> 46 Verwendung von required <?xml version="1.0" encoding="utf-8"?> <survey title="02_example"> <config> <releasedate>2014-01-04</releasedate> <expiringdate>2016-01-04</expiringdate> </config> <page> <issue> <!-- Die Frage muss beantwortet werden, required=" true" ist die Default-Einstellung --> <question>1.Frage</question> <input type="textbox" /> </issue> <issue required="false"> <!-- Mit dem required Attribut kann man den Default-Wert ändern, die Frage ist nun optional --> <question>2.Frage</question> <input type="textbox" /> </issue> <issue required="true"> <!-- Die Frage muss beantwortet werden --> <question>3.Frage</question> <input type="textbox" /> </issue> </page> </survey> 47 Beispiele zu allen Arten von Input-Feldern <?xml version="1.0" encoding="utf-8"?> <survey title="03_example"> <config> <releasedate>2014-01-04</releasedate> <cooldown>5</cooldown> </config> <page> <issue> <question>1. Frage</question> <hint>Hilfe</hint> <input type="text" /> <!--Standardmäßig sind maximal 100 Zeichen erlaubt --> </issue> <issue> <question>2. Frage</question> <hint>Hilfe</hint> <input type="text" minlength="5" /> <!-- Anzahl der Zeichen die mindestens eingegeben werden müssen --> </issue> <issue> <question>3. Frage</question> <hint>Hilfe</hint> <input type="text" maxlength="15"/> <!-- maximale Anzahl von erlaubten Zeichen --> </issue> <issue> <question>4. Frage</question> <hint>Hilfe</hint> <input type="text" minlength="5" maxlength="15"/> <!-Kombination aus beiden --> 48 </issue> </page> <page> <issue> <question>1. Frage</question> <hint>Hilfe</hint> <input type="textbox" /> <!-- für lange Texte maximal 4000 Zeichen erlaubt --> </issue> <issue> <question>2. Frage</question> <hint>Hilfe</hint> <input type="textbox" minlength="5" /> <!-- Anzahl der Zeichen die mindestens eingegeben werden müssen --> </issue> <issue> <question>3. Frage</question> <hint>Hilfe</hint> <input type="textbox" maxlength="15"/> <!-- maximale Anzahl von erlaubten Zeichen --> </issue> <issue> <question>4. Frage</question> <hint>Hilfe</hint> <input type="textbox" minlength="100" maxlength="400"/> < !-- Kombination aus beiden --> </issue> </page> <page> <issue> <question>1. Frage</question> <hint>Hilfe</hint> <input type="number" /> <!-- Hier sind nur Zahlen erlaubt 49 --> </issue> <issue> <question>2. Frage</question> <hint>Hilfe</hint> <input type="number" min="1"/> <!-- Eine Zahl >= 1 --> </issue> <issue> <question>3. Frage</question> <hint>Hilfe</hint> <input type="number" max="100"/> <!-- Eine Zahl <= 100 -> </issue> <issue> <question>4. Frage</question> <hint>Hilfe</hint> <input type="number" min="18" max="100"/> <!-Kombination aus beiden --> </issue> </page> <page> <issue> <question>1. Frage</question> <hint>Hilfe</hint> <input type="date" /> <!-- Eingabe eines Datums --> </issue> </page> <page> <issue> <question>1. Frage</question> <hint>Hilfe</hint> <input type="email" /> <!-- Eingabe einer Mailadresse --> </issue> 50 </page> <page> <issue> <question>1. Frage</question> <input type="checkbox"> <!-- Checkboxen die Mehrfachauswahl erlauben --> <option value="topic_1">Topic 1</option> <!-- der Wert im Attribut value wird in der Datenbank gespeichert --> <option value="topic_2">Topic 2</option> <option value="topic_3">Topic 3</option> <option value="topic_4">Topic 4</option> </input> </issue> </page> <page> <issue> <question>1. Frage</question> <input type="radio"> <!-- Radio-Buttons die nur eine Auswahl erlauben --> <option value="topic_1">Topic 1</option> <!-- der Wert im Attribut value wird in der Datenbank gespeichert --> <option value="topic_2">Topic 2</option> <option value="topic_3">Topic 3</option> <option value="topic_4">Topic 4</option> </input> </issue> </page> <page> <issue> <question>1. Frage</question> 51 <input type="select"> <!-- Dropdown menu --> <option value="topic_1">Topic 1</option> <!-- der Wert im Attribut value wird in der Datenbank gespeichert --> <option value="topic_2">Topic 2</option> <option value="topic_3">Topic 3</option> <option value="topic_4">Topic 4</option> </input> </issue> </page> </survey> Abhängikeiten von Fragen <?xml version="1.0" encoding="utf-8"?> <survey title="04_example"> <config> <releasedate>2014-01-04</releasedate> <expiringdate>2016-01-04</expiringdate> </config> <!-- Die 2. Frage ist von der 1. Frage abhängig, nur wenn man bei der 1. Frage "true" auswählt kann man die 2. Frage beantworten --> <page> <issue name="frage"> <!-- wird benötigt um auf die Frage zu referenzieren--> <question>1. Frage</question> <input type="radio"> <option value="1">true</option> 52 <option value="2">false</option> </input> </issue> <issue dependency="frage:1"> <!-- Mit dem dependency Attribut wird eine Abhängigkeit erstellt. Links vom Doppelpunkt steht der Name des Issues, rechts der value der ausgewählt werden muss --> <question>2. Frage</question> <input type="checkbox"> <option value="topic_1">Topic 1</option> <option value="topic_2">Topic 2</option> <option value="topic_3">Topic 3</option> <option value="topic_4">Topic 4</option> </input> </issue> </page> </survey> Einbindung eines Bildes <?xml version="1.0" encoding="utf-8"?> <survey title="05_example"> <config> <releasedate>2014-01-04</releasedate> <expiringdate>2016-01-04</expiringdate> </config> <page> <issue> <question>1. Frage</question> 53 <!-- Die Größe kann man mit width und height anpassen und mit src wird der Pfad zum Bild angegeben --> <img src="path/to/img" height="600" width="700" /> <input type="textbox" /> </issue> </page> </survey> Zip Bei einem Fragebogen, der keine Bilder beinhaltet, reicht eine XML-Datei als Upload. Sind jedoch Bilder beinhaltet, so muss eine Zip-Datei importiert werden. In diesem Falle, muss der Name der XML-Datei survey.xml lauten. Die Bilder müssen sich im selben Verzeichnis befinden. Beispiel: Abbildung 18: Zip 54 5.2.2 XML Elemente Element survey Diagram Properties content: complex Model config, page Children config, page Instance <survey title=""> <config>{1,1}</config> <page pagenumber="">{1,unbounded}</page> </survey> Attributes 1. title als xs:string Description Survey ist das Root-Element und definiert einen neuen Fragebogen. 55 Element survey / config Diagram Properties content: complex Model releasedate0,1 , expiringdate0,1 , template0,1 , cooldown0,1 Children cooldown, expiringdate, format, releasedate Instance <config> <releasedate>{0,1}</releasedate> <expiringdate>{0,1}</expiringdate> <template>{0,1}</template> <cooldown>{0,1}</cooldown> </config> Description Das config-Element definiert Einstellungen bezüglich des Fragebogens. Start- und Ablaufdatum können definiert werden, sowie die Wartezeit zwischen dem Ausfüllen des selben Fragebogens. Über das Template kann ein gewünschtes Design angegeben werden. 56 Element survey / config / releasedate Diagram Type xs:date Properties • content: simple • minOccurs: 0 Description Mit dem releasedate-Element kann ein Datum gesetzt werden, ab wann der Fragebogen gültig ist. Ruft man einen Fragebogen zu einem Zeitpunkt auf, der vor dem gesetzten Startdatum ist, so wird man auf eine Seite umgeleitet, die darauf hinweist, dass der Fragebogen noch nicht aktiv ist. Element survey / config / expiringdate Diagram Type xs:date Properties • content: simple • minOccurs: 0 Description Mit dem expiringdate-Element kann ein Datum gesetzt werden, ab wann der Fragebogen ungültig ist. Ruft man einen Fragebogen zu einem Zeitpunkt auf, der nach dem gesetzten Ablaufdatum ist, so wird man auf eine Seite umgeleitet, die darauf hinweist, dass der Fragebogen noch bereits abgelaufen ist. 57 Element survey / config / template Diagram Type xs:string Properties • content: simple • minOccurs: 0 Description Über das template-Element kann ein Pfad zu einem gewünschten .html File angegeben werden, welches eine andere Darstellung des Fragebogens beinhaltet. Element survey / config / cooldown Diagram Type xs:int Properties • content: simple • minOccurs: 0 Description Mit dem cooldown-Element kann angegeben werden, wieviel Zeit vergehen muss, bis ein User den selben Fragebogen nochmals ausfüllen darf. 58 Element survey / page Diagram Properties • content: simple • minOccurs: 0 • maxOccurs: unbounded Model issue Children issue Attributes 1. pagenumber als xs:int, optional Instance <page pagenumber=""> <issue dependency="" id="" name="" required="" style="">{1,unbounded}</issue> </page> Description Der page-Knoten fasst sämtliche Inhalte, die auf einer Seite angegeben werden sollen. 59 Element survey / page / issue Diagram Properties • content: simple • minOccurs: 0 • maxOccurs: unbounded Model issue Children issue 60 Attributes 1. id als xs:string, optional 2. name als xs:string, optional 3. dependency als xs:string, optional 4. required als xs:boolean, optional 5. style als xs:string, optional Instance <issue dependency="" id="" name="" required="" style=""> <question>{1,1}</question> <hint>{0,1}</hint> <img height="" src="" width="">{0,1}</img> <input max="" maxlength="" min="" minlength="" size="" type="" value="">{1,1}</input> </issue> Description Der issue-Knoten fasst den Inhalt einer Frage. Hier kann angegeben werden ob diese Frage verpflichtend ist und ob Abhängigkeiten zu anderen Fragen bestehen. Element survey / page / issue / question Diagram Type xs:string 61 Properties • content: simple • minOccurs: 1 Description Durch das question-Element wird die Frage in Form eines Textes angegeben. Element survey / page / issue / hint Diagram Type xs:string Properties • content: simple • minOccurs: 0 Description Mit dem optionalen hint-Element kann eine Hilfestellung zur beantwortung der Frage angegeben werden. 62 Element survey / page / issue / img Diagram Properties • content: simple • minOccurs: 0 • maxOccurs: unbounded Attributes 1. src als xs:string, optional 2. width als xs:int, optional 3. height als xs:int, optional Description Hier kann der Pfad zu einem Bild angegeben werden, welcher im Zusammenhang mit der Frage steht 63 Element survey / page / issue / input Diagram Properties • content: simple • minOccurs: 0 Model option Children option 64 Attributes 1. type als restriction of xs:string 2. max als xs:int, optional 3. min als xs:int, optional 4. maxlength als xs:int, optional 5. minlength als xs:int, optional 6. size als xs:int, optional 7. value als xs:string, optional Instance <input max="" maxlength="" min="" minlength="" size="" type="" value=""> <option value="">{0,unbounded}</option> </input> Description Mit dem input-Element wird festgelegt, in welcher Form die Antwort abgegeben wird (Textfeld, Aufwahlfeld, etc.). Auch diverse Beschränkungen bezüglich der Eingabe können angegeben werden. Diese beziehen sich auf reguläre Ausdrücke. Werden optionale Antwortfelder gewählt, müssen im option-Knoten die Antwortmöglichkeiten angegeben werden. 65 Element survey / page / issue / input / option Diagram Properties • content: simple • mixed: true • minOccurs: 0 • maxOccurs: unbounded Model Attributes 1. value als xs:string Instance <input max="" maxlength="" min="" minlength="" size="" type="" value=""> <option value="">{0,unbounded}</option> </input> Description Mit dem option-Element gibt man die optionalen Antwortmöglichkeiten an. Diese sind nur dazugehörigen Antwortfelden anzugeben. 66 5.2.3 XML Attribute Attribute survey / page / issue / img / @src Type xs:string Properties content ->simple Used by Element survey/page/issue/img Description Pfad zur Bilddatei. Attribute survey / page / issue / img / @width Type xs:int Properties content ->simple Used by Element survey/page/issue/img Description Breite des Bildes. Attribute survey / page / issue / img / @height Type xs:int Properties content ->simple Used by Element survey/page/issue/img Description Höhe des Bildes. 67 Attribute survey / page / issue / input / option / @value Type xs:string Properties content ->simple Used by Element survey/page/issue/input/option Description Eindeutiger Bezeichner des Auswahlfeldes. Attribute survey / page / issue / input / @size Type xs:int Properties content ->simple Used by Element survey/page/issue/input Description Textlänge des Antwortfeldes. Attribute survey / page / issue / input / @type Type xs:string Properties content ->simple Facets • enumeration text • enumeration textbox • enumeration number • enumeration date • enumeration email • enumeration radio • enumeration checkbox • enumeration select Used by Description Element survey/page/issue/input Auswahl des Typs des Antwortfeldes. (Siehe Auswahlmöglichkeiten unter Facets.) Attribute survey / page / issue / input / @minlength Type xs:string Properties content ->simple Used by Element survey/page/issue/input Description Minimale Länge der Antwort. 68 Attribute survey / page / issue / input / @maxlength Type xs:string Properties content ->simple Used by Element survey/page/issue/input Description Maximale Länge der Antwort. Attribute survey / page / issue / input / @value Type xs:string Properties content ->simple Used by Element survey/page/issue/input Description Eindeutiger Bezeichner des Antwortfeldes. Attribute survey / page / issue / input / @min Type xs:int Properties content ->simple Used by Element survey/page/issue/input Description Minimale Anzahl an Checkboxes, die ausgewählt werden müssen. Attribute survey / page / issue / input / @max Type xs:int Properties content ->simple Used by Element survey/page/issue/input Description Maximale Anzahl an Checkboxes, die ausgewählt werden müssen. Attribute survey / page / issue / @name Type xs:string Properties content ->simple Used by Element survey/page/issue Description Eindeutiger Bezeichner des issue-Knotens. Dieser Bezeichner wird für eine Abhängigkeit zu anderen Fragen herangezogen. Attribute survey / page / issue / @id Type xs:string Properties content ->simple Used by Element survey/page/issue Description Eindeutiger Bezeichner des issue-Knotens. Dieser Bezeichner wird verwendet, um ein spezielles Design auf dieses Element anzuwenden. 69 Attribute survey / page / issue / @dependency Type xs:string Properties content ->simple Used by Element survey/page/issue Description Durch angabe einer dependency, wird eine Abhängigkeit zu einer anderen Frage hergestellt. So wird jene Frage nur angezeigt, wenn die angegebene Antwort der Abhängigen Frage ausgewählt wurde. Das Format der dependency ist definiert durch <issue/@name>:<option/@value >(z.B.: newsletter:yes) Attribute survey / page / issue / @required Type xs:boolean Properties content ->simple Used by Element survey/page/issue Description Wird requiered auf true gesetzt oder nicht angegeben, so ist eine Antwort verpflichtend. Mit false ist eine Antwort optional. Attribute survey / page / issue / @pagenumber Type xs:int Properties content ->simple Used by Element survey/page Description Mit pagenumber kann eine Seitenzahl angegeben werden. Diese dient rein zur Hilfestellung bei Datenbankabfragen und ist optional. Attribute survey / @title Type xs:string Properties content ->simple Used by Element survey Description Name des Fragebogens. 70 5.2.4 Adminbereich Um in den Adminbereich zu gelangen, muss man sich als solcher anmelden. Standardmäßig ist der Benutzername root und das Passwort alaba. Nach dem Login wird die Session für eine Stunde aufrecht erhalten. Dem Administrator stehen folgende Features zur Verfügung: Upload Im File Upload Bereich lässt sich über Choose File zur gewünschten XML-, oder Zip-Datei navigieren. Nach Auswahl jener Datei, kann diese über Upload File hochgeladen werden. Anschließend wird der Fragebogen validiert. Sollte die Form der XML Datei nicht dem Schema entsprechen, werden fehlerhafte Stellen auf einer Seite angezeigt. Im Falle eines validen Fragebogens wird dieser in der URL liste im unteren Teil des Adminbereichs angezeigt. Testmodus Wird ein Fragebogen hochgeladen, so wird im URL Bereich ein Link mit dem Namen des Fragebogens und eine URL zu diesem erzeugt. Klickt man auf den Link, so kann der Fragebogen getestet werden. Dadurch erscheint dieser so, wie er für einen Teilnehmer aufscheinen würde. Der Unterschied ist, dass die Antworten nicht in die Datenbank geschrieben werden und Konfigurationen bezüglich des Releasedates, Expiringdates und Cooldowns werden ignoriert. Export Der Administrator hat die Möglichkeit, diverse Daten aus der Datenbank zu exportieren. Der Export besteht aus bis zu drei CSV-Dateien welche sich auf den ausgewählten Fragebogen beziehen. Diese Informationen beinhalten Fragen und Antworten eines jeden Teilnehmers, sowie Benutzerinformationen aus technischer Sicht. Die Benutzerinformationen inkludieren unter anderem dessen Bildschirmauflösung, den verwendeten Browser, Betriebssystem und die benötigte Zeit für den Fragebogen. Diese Daten können zur Evaluierung des Fragebogens herangezogen werden. Das Benutzerverhalten bezieht sich auf das Verhalten des Users im Bezug auf jede Seite im Fragebogen. Es wird das Maus- und Scrollverhalten ausgegeben, sowie die Zeit die der Benutzer auf einer Seite verbrachte. Verteilung Nachdem ein Fragebogen hochgeladen wurde, erscheint dieser in einer Liste im unteren Teil des Adminbereiches. Die URL zur Verteilung des Frage71 bogens befindet sich in der Textbox nebem dem jeweiligen Link zum Testmodus. Die Webadresse setzt sich aus der Domain und dem Servletnamen zusammen, sowie einer Query, bei welcher der Name des Fragebogens als Parameter übergeben wird. Bsp.: http://localhost:8080/cheetah/Page?survey= Businessprocessmodel53_survey http://qe-informatik.uibk.ac.at/cheetah/Page?survey= WorkflowDiagram02_survey Abbildung 19: Adminbereich 5.2.5 Ausfüllen eines Fragebogens Die Gestalt des Fragebogens orientiert sich an jener, eines gedruckten Fragebogens. Die Antworten zu den Fragen sind pro Seite abzugeben und werden nach 72 Seitenwechsel in der Datenbank gespeichert. Die Zurück-Funktion des Browsers ist deaktiviert. Folglich lassen sich Antworten nicht mehr ändern nachdem man eine Seite weiter geht. Nach Beendigung des Fragebogens wird man auf die Startseite verwiesen. Im Falle eines Internetausfalles oder Browserabsturzes, gelangt man auf die zuletzt aktive Seite des Fragebogens. 73 6 Referenzen Literatur [1] http://webtalk-blog.de/html5-geschichte - HTML5 Geschichte, Zugriff 09.01.2015 [2] http://webtalk-blog.de/was-ist-html5 - Was ist HTML5, Zugriff 09.01.2015 [3] http://timpt.de/topic69.html - Java Server Pages (JSP), 09.01.2015 [4] http://jquery.com/ - jQuery, 09.01.2015 [5] http://www.html-form-guide.com/best-practices/ form-validations-definitive-guide.html - A Definitive Guide to Sensible Form Validations, 09.01.2015 [6] https://github.com/WhichBrowser/WhichBrowser - WhichBrowser, NielsLeenheer, 09.01.2015 [7] https://bitbucket.org/ - Bitbucket, 09.01.2015 [8] https://eclipse.org/home/index.php - Eclipse, 09.01.2015 [9] http://de.wikipedia.org/wiki/IntelliJ_IDEA - IntelliJ IDEA, 09.01.2015 [10] https://www.jetbrains.com/idea/ - JetBRAINs, 09.01.2015 [11] http://en.wikipedia.org/wiki/Apache_Tomcat 09.01.2015 - Tomcat, [12] http://www.oracle.com/technetwork/java/javaee/overview/ index.html - Oracle Java, 09.01.2015 [13] http://maven.apache.org/ - Apache Maven, 09.01.2015 [14] https://jaxb.java.net/ - jaxb, 09.01.2015 74 [15] http://en.wikipedia.org/wiki/Comma-separated_values Comma-separated values, 09.01.2015 - [16] http://en.wikipedia.org/wiki/XML - XML, 09.01.2015 [17] https://www.atlassian.com/git/ - Atlassian Git - Getting Git Right, 09.01.2015 [18] http://en.wikipedia.org/wiki/Git_(software) - Git, 09.01.2015 [19] http://blog.vanharen.net/project-management/ scrum-in-3-minutes-2/ - scrum in 3 minutes, 09.01.2015 Abbildungsverzeichnis 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Ablaufdiagram . . . . . . . . . . . . . . . . . . . . . . . . UseCase Diagramm . . . . . . . . . . . . . . . . . . . . . Alle Klassen mit allen Attributen und Methoden . . . . . . Klassendiagramm mit Beziehungen . . . . . . . . . . . . . Packagediagramm . . . . . . . . . . . . . . . . . . . . . . Alle Klassen die benötigt werden um eine Seite Darzustellen Hibernate Klassendiagramm . . . . . . . . . . . . . . . . . Scrum Ablauf [19] . . . . . . . . . . . . . . . . . . . . . . ER-Diagramm . . . . . . . . . . . . . . . . . . . . . . . . git clone cheetah . . . . . . . . . . . . . . . . . . . . . . . SQL import . . . . . . . . . . . . . . . . . . . . . . . . . Import Ergebnis . . . . . . . . . . . . . . . . . . . . . . . Maven Import, File -> Import. . . . . . . . . . . . . . . . . pom.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . hibernate.cfg.xml . . . . . . . . . . . . . . . . . . . . . . . Export WAR, File -> Export. . . . . . . . . . . . . . . . . . WAR-Container abspeichern . . . . . . . . . . . . . . . . . Zip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Adminbereich . . . . . . . . . . . . . . . . . . . . . . . . . 75 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 9 19 20 21 22 23 25 29 39 40 40 41 42 43 44 45 54 72