Wenn Jira nicht mehr ausreicht: Individuelle Projekt-Roadmap aus Jira-Daten

Mehrere agile Teams? Umfangreiche Projektstruktur? Viele Sonderfälle? …und Jira reicht nicht aus, um eine komplette Übersicht des Projektes darzustellen?

Wir visualisieren den Status der Arbeitspakete über unsere Software „Roadmap“ – automatische Aktualisierung aus Jira[1] heraus inklusive.

In einem unserer Softwareentwicklungsprojekte arbeiten sehr viele verschiedene Teams agil auf der Grundlage von Konzepten und State Charts des Kunden zusammen. Für die Projektkoordinierung wird eine Jira Webanwendung genutzt. Diese bietet einige Möglichkeiten, den aktuellen Projektstand visuell darzustellen. Leider reichen diese Visualisierungen von Jira jedoch nicht aus, um eine komplette Übersicht über unseren Projektstand anzuzeigen. Dies liegt daran, dass es sich um eine große Projektstruktur mit vielen Sonderfällen handelt.

Daher haben sich unsere Teams eine Visualisierung gewünscht, die Zeit spart, stets aktuell ist und auf Grundlage der vorhandenen Jira-Daten basiert. Die Visualisierung sollte gleichzeitig zur Anzeige auf den Team-Flatscreens und in Planungsmeetings genutzt werden können. Dabei sollen sich die Daten automatisch aktualisieren.

Also Jira erweitern?

Die erste Idee führte zur Entwicklung eines Jira-Plugins. Allerdings wurde dies vom Kunden nicht befürwortet, weil dadurch ein erhöhter Pflege- und Support-Aufwand des Jiras befürchtet wurde.

Eine Serverlösung konnte unter anderem aus Datenschutzaspekten nicht abschließend geklärt werden. Also haben wir uns für eine lokale Lösung entschieden.

Wie technisch umsetzen?

Da es bereits von eck*cellent ein in Java entwickeltes Tool zur Datenverarbeitung von Jira-Daten gab, fiel die Entscheidung auf die Entwicklung eines zweigeteilten Tools: der RoadmapGenerator für die Datenverarbeitung und die Roadmap-Webanwendung zur Visualisierung.

Der RoadmapGenerator ist eine kommandozeilenbasierte Java-Anwendung. Der Zugriff auf die Jira-Daten erfolgt über die Jira-REST-API[2]. Die abgerufenen JSON-Daten werden entsprechend aufbereitet und lokal auf der Festplatte gespeichert. Über den Windows-Aufgabenplaner wird der RoadmapGenerator regelmäßige gestartet. So wird eine Aktualität der Daten realisiert, die sich an den Bedürfnissen des Anwenders orientiert.

Da es sich um ein überschaubares Projekt handelte, haben wir nicht auf ein Framework wie Angular gesetzt. Allerdings war uns die Typ-Sicherheit, also Wartbarkeit und Quelltext-Qualität, wichtig. Deswegen verwendeten wir Typescript[3]. Die Timeline wurde mit vis.js[4] realisiert. Als Gestaltungsvorlage wurde Bulma[5] verwendet. Um den Programmcode zu schreiben, haben wir uns für die Entwicklungsumgebung Visual Studio Code[6] entschieden. Mit Hilfe von der Paketverwaltung npm[7] konnten wir uns flexibel und unkompliziert schnell alle notwendigen abhängigen Pakete zusammenstellen. Dabei hat uns gulp[8] die Entwicklung besonders angenehm gemacht, da jede Änderung im Source Code direkt in das Endprodukt übersetzt wurde und on-the-fly ausprobiert werden konnte.

Die Roadmap-Webanwendung ist ausschließlich für die Visualisierung der Daten zuständig. Dies ermöglicht es, das Tool flexibel zu erweitern oder anzupassen um auch in anderen Teams individuelle Anwendungsmöglichkeiten abzubilden. Zusätzlich ermöglicht diese Umsetzung mit Web-Technologien, die Roadmap in eine andere Web-Applikation zu integrieren, ohne den Quelltext komplett neu schreiben zu müssen.

Die Website wird lokal geladen. Dabei werden die Daten des RoadmapGenerators von der Festplatte eingelesen, aufbereitet und angezeigt.

Wie visuell umsetzen?

Den größten Platz der Visualisierung nimmt eine Zeitleiste ein, die mit verschiedenen Markern für verschiedene Ereignisse gekennzeichnet ist. Außerdem sind die Sprintlängen farblich gekennzeichnet.

Mit Hilfe eines Dropdown-Menüs kann man sein Team auswählen. Dadurch werden die Anforderungspakete entsprechend gefiltert.

Außerdem gibt es eine Zoomfunktion, die je nach Detailgrad die Anforderungspakete als Liste untereinander auf der linken Seite darstellt (gruppiert in fachliche Unterteilungen) oder direkt in der Timeline selbst als Item.

Rechts haben wir einen Detailbereich angeordnet, der zusätzliche Informationen eines Items anzeigen kann, sobald man in der Timeline ein Paket auswählt.

Um den aktuellen Stand speichern zu können, haben wir eine Speicher- und Einlese-Funktion implementiert. So kann man auch in späteren Meetings nochmal auf den Stand des Vorherigen schauen. Nach dem Einlesen von zuvor gesicherten Ständen erscheint zusätzlich zur Heute Markierung eine Markierung in dem das Datum des verwendeten Stands angezeigt wird.

Um einen schnellen Überblick über den Stand der einzelnen Features zu bekommen, haben wir in der Timeline jeweils am rechten und linken Rand alle Ereignisse zusammen gefasst, die sich in der Zukunft bzw. Vergangenheit der aktuell angezeigten Timeline befinden. So kann man z.B. schnell erkennen, ob ein Konzept bereits bestehen müsste oder noch in der Planung ist.

Mit Hilfe eines Fullscreen Modus können sämtliche Steuerelemente ausgeblendet werden. Zusammen mit dem Routing für Teamauswahl, Zoomfaktor und Anzeigemodus konnten wir eine optimale Darstellung für unsere Team-Flatscreens umsetzen.

Fazit

Wir hatten viel Spaß bei der Entwicklung der „Roadmap“. Mit Hilfe der verschiedenen Tools und Libraries ist schnell eine ansehnliche Applikation entstanden, die den agilen Softwareentwicklungsprozess ganz individuell unterstützen kann. Mit Hilfe von wenigen Anpassungen ist es denkbar, auch komplett andere Projektsituationen mit Jira sinnvoll unterstützen zu können. Neue Funktionen ließen sich mitunter so überraschend schnell entwickeln, dass das Tool größer wurde als ursprünglich gedacht.

[1] https://de.wikipedia.org/wiki/Jira_(Software)

[2] https://developer.atlassian.com/server/jira/platform/rest-apis/

[3] https://www.typescriptlang.org/

[4] https://visjs.org/

[5] https://bulma.io/

[6] https://code.visualstudio.com/

[7] https://www.npmjs.com/

[8] https://gulpjs.com/