Konzeption Und Prototypische Implementierung Eines Web-Basierten Dashboards Zur Softwarevisualisierung
Total Page:16
File Type:pdf, Size:1020Kb
Universität Leipzig Wirtschaftswissenschaftliche Fakultät Institut für Wirtschaftsinformatik Betreuender Hochschullehrer: Prof. Dr. Ulrich Eisenecker Betreuender Assistent: Dr. Richard Müller Thema Konzeption und prototypische Implementierung eines web-basierten Dashboards zur Softwarevisualisierung Masterarbeit zur Erlangung des akademischen Grades Master of Science – Wirtschaftsinformatik vorgelegt von: Mewes, Tino Leipzig, den 11.10.2018 Abstract Der Schwerpunkt dieser Arbeit liegt auf der Konzeption sowie prototypischen Implemen- tierung eines web-basierten Dashboards zur Softwarevisualisierung. Ziel der Arbeit ist es, ein Dashboard zu entwickeln, welches Informationen eines Softwareprojekts dynamisch aus einer Graphdatenbank visualisiert und Projekteitern aufgabenbezogen zur Entscheidungs- unterstützung darstellt. Derzeit existiert keine Softwarelösung, die diesen Anforderungen vollumfänglich gerecht wird. Es existieren jedoch bereits Bibliotheken und Softwaresyste- me, welche Teilaspekte zu einer möglichen Gesamtlösung beitragen können. Diese können bei der prototypischen Implementierung von Nutzen sein und müssen daher beachtet wer- den. Um die Ziele der Arbeit zu erreichen, werden verschiedene Forschungsmethoden ange- wandt. Es wird eine Literaturrecherche durchgeführt, mit dem Ziel, typische Aufgaben von Projektleitern im Bereich Software Engineering zu identifizieren. Um die vom Dashboard zu unterstützenden Aufgaben ableiten zu können, werden außerdem verschiedene existierende Dashboard-Werkzeuge analysiert. Mithilfe der gewonnenen Ergebnisse wird das Dashboard konzipiert und prototypisch implementiert. Durch eine Fallstudie anhand von Open-Source- Projekten wird das Dashboard abschließend evaluiert. Schlagwörter: Dashboard, Softwarevisualisierung, jQAssistant, Neo4j, React, D3.js Inhaltsverzeichnis III Inhaltsverzeichnis Abbildungsverzeichnis VI Tabellenverzeichnis VIII Verzeichnis der Listings IX Abkürzungsverzeichnis X 1 Einleitung 1 1.1 Motivation und Problemstellung . .1 1.2 Zielstellung . .2 1.3 Methodisches Vorgehen . .2 2 Grundlagen 4 2.1 Softwarevisualisierung . .4 2.2 jQAssistant . .5 2.3 Neo4j . .5 2.4 Webanwendungen und web-basierte Frameworks . .5 2.5 D3.js . .6 2.6 Dashboards . .7 3 Konzeption 9 3.1 Mission Statement . .9 3.2 Architekturziele . .9 3.3 Kontextabgrenzung . 10 3.3.1 Fachlicher Kontext . 10 3.3.1.1 Literaturrecherche zu typischen Aufgaben von Projektlei- tern . 10 3.3.1.2 Analyse existierender Dashboard-Werkzeuge . 14 3.3.1.3 Use-Case-Diagramm der zu unterstützenden Aufgaben . 19 3.3.1.4 Mockups der Benutzungsschnittstelle . 19 3.3.2 Technischer Kontext . 22 Inhaltsverzeichnis IV 3.4 Randbedingungen . 23 3.4.1 Technische Randbedingungen . 23 3.4.2 Organisatorische Randbedingungen . 24 3.5 Risiken und technische Schulden . 24 3.6 Entwurfsentscheidungen . 24 3.6.1 Auswahl des Neo4j-Treibers . 24 3.6.2 Vergleich existierender Webframeworks . 25 3.6.2.1 Angular . 25 3.6.2.2 Backbone.js . 27 3.6.2.3 Ember.js . 27 3.6.2.4 Vue.js . 27 3.6.2.5 React . 28 3.7 Lösungsstrategie . 29 4 Implementierung 30 4.1 Implementierungskomponenten . 30 4.1.1 CoreUI . 30 4.1.2 Nivo . 31 4.2 Dashboard . 32 4.2.1 Startseite . 32 4.2.2 Einstellungen . 35 4.2.3 Benutzerdefinierte Abfragen . 36 4.2.4 Visualisierungskomponenten . 37 4.2.4.1 Struktur . 38 4.2.4.2 Dateitypen . 39 4.2.4.3 Abhängigkeiten . 40 4.2.4.4 Aktivitäten . 41 4.2.4.5 Wissensverteilung . 44 4.2.4.6 Hotspots . 45 4.2.4.7 Statische Quellcodeanalyse . 47 4.2.4.8 Testabdeckung . 48 4.2.4.9 Erstellung . 49 4.3 Eingesetzte Werkzeuge . 51 4.3.1 Entwicklung und Test . 51 4.3.1.1 Jest . 51 4.3.1.2 Codecov . 52 Inhaltsverzeichnis V 4.3.1.3 Travis CI . 53 4.3.1.4 Prettier . 54 4.3.1.5 Docker . 54 4.3.2 Installation und Wartung . 55 5 Evaluation 57 6 Fazit und Ausblick 60 Anhang XI A jQAssistant-Konzeptregeln . .XI B Dateistruktur . XIII Glossar XVIII Literaturverzeichnis XXIII Selbstständigkeitserklärung XXV Abbildungsverzeichnis VI Abbildungsverzeichnis 1.1 Software-Engineering-Prozesse mit Stakeholdern und Artefakten . .1 2.1 Darstellung von Verkaufsmaßnahmen zur Analyse der Produktleistung nach Kategorie in Form eines Dashboards . .7 3.1 Standpunkt des technischen Leiters innerhalb eines Entwicklerteams . 11 3.2 Use-Case-Diagramm der zu unterstützenden Aufgaben des Dashboards . 19 3.3 Mockup der Startseite des Dashboards . 20 3.4 Mockup für die Darstellung der Hotspots innerhalb des Dashboards . 20 3.5 Mockup für die Darstellung der Autoren des Softwareprojekts innerhalb des Dashboards . 21 3.6 Mockup für die Darstellung der Einstellungsmöglichkeiten des Dashboards 22 3.7 Komponentendiagramm des Dashboards . 23 3.8 Die fünf populärsten web-basierten Frameworks zum Stand der Erstellung der Arbeit . 26 3.9 Die Flux-Architektur . 28 4.1 Startseite des Dashboards . 35 4.2 Einstellungsmöglichkeiten des Dashboards . 36 4.3 Benutzerdefinierte Abfragen des Dashboards . 37 4.4 Struktur-Visualisierungskomponente des Dashboards . 38 4.5 Dateitypen-Visualisierungskomponente des Dashboards . 39 4.6 Abhängigkeiten-Visualisierungskomponente des Dashboards . 40 4.7 Visualisierungskomponenten Commits pro Autor sowie Dateien pro Autor 42 4.8 Visualisierungskomponenten Commitkalender sowie letzte 20 Commits . 43 4.9 Kalenderkomponente zur Filterung der Aktivitäten . 44 4.10 Visualisierungskomponente zur Darstellung der Wissensverteilung . 45 4.11 Hotspots-Visualisierungskomponente des Dashboards . 46 4.12 Visualisierungskomponente für die Darstellung der statischen Quellcodeana- lyse ..................................... 47 4.13 Darstellung der Details der einzelnen Verstöße im Quellcode . 48 4.14 Visualisierungskomponente zur Darstellung der Testabdeckung . 49 4.15 Graphische Darstellung der Testabdeckung des Dashboard-Quellcodes . 53 4.16 Kennzeichnung von Commits mittels Travis CI .............. 54 Abbildungsverzeichnis VII 5.1 Startseite des Dashboards mit den eingelesenen Daten von Spring Petclinic 58 5.2 Startseite des Dashboards mit den eingelesenen Daten von jUnit ..... 59 B.1 Dateistruktur des Dashboards . XVII Tabellenverzeichnis VIII Tabellenverzeichnis 3.1 Typische Aufgaben von technischen Leitern . 12 3.2 Aufgaben der Stakeholder zur Verwendung als Checkliste für Tools . 13 3.3 Analyse des Dashboard-Werkzeugs Teamscale ............... 15 3.4 Analyse des Dashboard-Werkzeugs CodeScene .............. 15 3.5 Analyse des Dashboard-Werkzeugs SonarQube .............. 16 3.6 Analyse des Dashboard-Werkzeugs Structurizr .............. 17 3.7 Analyse des Dashboard-Werkzeugs NDepend ............... 17 3.8 Analyse des Dashboard-Werkzeugs Structure101 ............. 18 3.9 Zusammenfassung der Analyse existierender Dashboard-Werkzeuge . 18 3.10 Gegenüberstellung von Qualitätszielen und passenden Architekturansätzen 29 6.1 Gegenüberstellung der Qualitätsziele und deren jeweiliger Umsetzung . 60 Verzeichnis der Listings IX Verzeichnis der Listings 4.1 Cypher-Abfrage für die Ausgabe der Strukturmetrik . 32 4.2 Cypher-Abfrage für die Ausgabe der Abhängigkeitsmetrik . 33 4.3 Cypher-Abfrage für die Ausgabe der Aktivitätsmetrik . 33 4.4 Cypher-Abfrage für die Ausgabe der Hotspotmetrik . 34 4.5 Cypher-Abfrage für die Ausgabe der statischen Quellcodeanalyse . 34 4.6 Cypher-Abfrage für die Ausgabe der Testabdeckung . 34 4.7 Cypher-Abfrage für die Ausgabe der Struktur mittels geschachtelter Kreise 38 4.8 Cypher-Abfrage für die Analyse der Dateitypen . 39 4.9 Cypher-Abfrage für die Abhängigkeitsanalyse . 40 4.10 Cypher-Abfrage für die Ausgabe der Commits pro Autor . 41 4.11 Cypher-Abfrage für die Ausgabe der geänderten Dateien pro Autor . 41 4.12 Cypher-Abfrage für die Ausgabe der Commits sowie zugehörigen Erstel- lungsdaten . 42 4.13 Cypher-Abfrage für die Ausgabe der letzten 20 Commits . 43 4.14 Cypher-Abfrage für die Analyse der Wissensverteilung . 44 4.15 Cypher-Abfrage für die statische Quellcodeanalyse . 47 4.16 Cypher-Abfrage für die Analyse der Testabdeckung . 48 4.17 Test der Breadcrumb-Komponente des Dashboards . 52 4.18 Dockerfile des Dashboards . 55 4.19 Befehl für die Erstellung des Docker-Images ................ 55 4.20 Befehl für die Installation des Dashboards mittels Docker ......... 55 4.21 Benötigte Befehle für die Aktualisierung des Dashboards . 56 5.1 Dockerfile für die Evaluation des Dashboards am Beispiel von Spring Pet- clinic .................................... 57 5.2 Befehl für die Installation der vorbefüllten Neo4j-Graphdatenbank mittels Docker .................................... 57 A.1 jQAssistant-Konzeptregeln für die Datenvorverarbeitung . .XI Abkürzungsverzeichnis X Abkürzungsverzeichnis API JSON Application Programming Interface [50] JavaScript Object Notation [27] CI LOC Continuous Integration [16] Lines of Code [61] CSS Cascading Style Sheet [6, 30] MVC D3 Model View Controller [26–28] Data Driven Documents [6] MVVM DOM Model View ViewModel [26–28] Document Object Model [6] HTML NPM Hypertext Markup Language [6, 25] Node Package Manager [31, 60, 61] HTTP SVG Hypertext Transfer Protocol [5] Scalable Vector Graphics [6] ISO International Organization for Standar- URL dization [9] Uniform Resource Locator [21, 35] 1 Einleitung 1 1 Einleitung Dieses Kapitel motiviert das Thema der Arbeit und formuliert die entsprechende Problem- stellung. Darüber hinaus beschreibt es die angestrebten Ziele der Arbeit. Abgeschlossen wird das Kapitel mit der Beschreibung des methodischen Vorgehens. 1.1 Motivation und Problemstellung Softwaretechnik (engl. software engineering) hat die zielorientierte Bereitstellung und sys- tematische Verwendung von Prinzipien, Methoden und