Skip to end of metadata
Go to start of metadata

Titel

Diff Viewer im Open Source Projekt Scenarioo

Studenten

Manuel Scheuber, Pascal Forster

Betreuer

Prof. Dr. Markus Stolze

Projektpartner

Zühlke Engineering AG

Ausgangslage

Scenarioo ist ein von Zühlke Engineering gegründetes Open Source Projekt, welches einen innovativen Ansatz zur umfassenden und anschaulichen Softwaredokumentation anhand von Screenshots verfolgt. Die Daten für die Dokumentation werden automatisiert aus User Interface Tests generiert. Die so generierte Dokumentation wird allen Projektbeteiligten in einer Weboberfläche zur Verfügung gestellt. Durch das tägliche generieren der Softwaredokumentation entstehen unterschiedliche Softwaredokumentationsstände. Ist man nun an den Änderungen zwischen zwei Dokumentationsständen interessiert, so muss man sich Schritt für Schritt durch die beiden Dokumentationen durcharbeiten und die einzelnen Unterschiede müssen von blossem Auge identifiziert werden. Dieser Prozess ist nicht nur fehleranfällig, sondern auch äusserst zeitintensiv.

Ziel

Ziel dieser Arbeit war es, die bestehende Webapplikation Scenarioo mit einer sogenannten Diff Viewer Funktionalität zu erweitern. Diese Erweiterung soll dem Benutzer helfen, strukturelle und visuelle Unterschiede zwischen zwei Dokumentationsständen möglichst einfach zu erkennen. Auf gute Usability ist besonderen Wert zu legen.

Vorgehen, Technologien

In einem ersten Schritt wurden die User Stories in enger Zusammenarbeit mit unserem Industriepartner erarbeitet. Damit wir ein besseres Gespür für die unterschiedlichen Anforderungen erhielten, haben wir Benutzerinterviews mit Personen aus den verschiedensten Bereichen durchgeführt. Danach wurde ein Benutzungs- und Architekturkonzept erstellt, welches die Integration der neuen Funktionalität in die bestehende Webapplikation detailliert beschreibt. Als auch dieser Meilenstein erreicht war, konnte mit der Implementation begonnen werden. Die auf Java und AngularJS basierende Webapplikation wurde gemäss den vorgängig priorisierten User Stories nach und nach ausgebaut. Damit wir die nicht-funktionale Anforderung der Bedienbarkeit des Diff Viewers überprüfen konnten, wurde ein Usability Test mit verschiedenen Testpersonen durchgeführt. Aus den daraus gewonnenen Erkenntnissen konnten noch letzte Optimierungen am Endprodukt vorgenommen werden.  

Ergebnis

Das Resultat ist eine produktiv verwendbare Erweiterung zu Scenarioo, im Sinne eines Minimum Viable Product. Mit dem Diff Viewer kann der Benutzer beliebig konfigurierbare Vergleiche zwischen zwei Dokumentationsständen durchführen. Die Unterschiede zwischen zwei Ständen werden einmalig berechnet und im entsprechenden Scenarioo-Format abgelegt. Sobald der Vergleichsvorgang abgeschlossen ist, werden dem Benutzer auf jeder Dokumentationsebene die signifikanten Änderungen benutzerfreundlich dargestellt. In einem Progress-Bar ähnlichem Diff-Icon ist schnell ersichtlich, wie fest und was genau sich an einem einzelnen Element geändert hat. Die Diff Viewer Funktionalität ist auch in der Lage neue und gelöschte Elemente in der Weboberfläche entsprechend darzustellen. Der Benutzer hat ausserdem die Möglichkeit, die Screenshots von zwei unterschiedlichen Dokumentationsständen miteinander zu vergleichen. Die Änderungen auf dem Screenshot werden farblich hervorgehoben und können bei Bedarf ausgeblendet werden. Wie dies aussehen kann, ist im nachfolgenden Screenshot ersichtlich.

Ausblick

Schon bei den ersten Benutzerinterviews wurde klar, dass wir nicht alle Anforderungen an den Diff Viewer im Rahmen dieser Arbeit umsetzen können. Deshalb haben wir uns auf die am höchsten priorisierten User Stories konzentriert. Dennoch möchten wir hier einen zusammenfassenden Überblick über die weiteren Möglichkeiten vom Scenarioo Diff Viewer geben.

Interaktiver Screenshot-Vergleich auf Client

Zusätzlich zum aktuellen Screenshot-Vergleich auf dem Server könnte man ein JavaScript Framework wie zum Beispiel Resemble.js auf dem Client einsetzen. Dieses erlaubt dem Anwender noch weitere dynamische Konfigurationsmöglichkeiten beim Screenshot-Vergleich. So könnte der Benutzer unter anderem konfigurieren, dass eine geänderte Farbe nicht als Unterschied dargestellt wird.

Oberfläche zur Konfiguration der Vergleiche

In der jetzigen Lösung erfolgt die Konfiguration der verschiedenen Vergleiche der Dokumentationsstände direkt in einem XML-File. In Scenarioo ist es üblich, dass die Konfiguration über die Weboberfläche erfolgt. Es wäre deshalb angenehmer, wenn die Vergleichs-Konfiguration über eine Benutzeroberfläche möglich wäre.

Weitere Werte vergleichen

Scenarioo kennt noch mehr Elemente als jene, welche momentan mit dem Diff Viewer verglichen werden. So könnte es beispielsweise auch spannend sein, zusätzlich zu Use Cases, Szenarios, Steps und Screenshots, auch Pages oder Metadaten miteinander zu vergleichen.

Beispiel einer Vergleichsansicht

  • No labels