The document outlines the development of a desktop application called AcJIM for working with antigenic maps. It discusses the international team that developed the application, the technologies used including Node.js, NW.js and AngularJS, and the process of integrating the application with an existing backend. The document also notes challenges such as operating system compatibility issues and managing a geographically distributed team. It concludes with discussing future work including adding more features and ensuring user data security.

1. 0
Project System
Development 2
acjim/AcmacsDesktop
Darmstadt, 17. February 2015

2. 1
1
1. Introduction
a. Who we are / Team
b. Antigenic Cartography
2. Application History
3. How we did it
a. Project Management and VCS
b. AcJIM Application
c. How to start developing
4. Live presentation
5. Issues
6. Conclusion & Outlook
7. Q&A
AGENDA

3. 2
2
Who we are
● Project part of “System development” module
at JIM MSc @ h_da
● Project team split across three continents -
Germany, Australia and South America
● Challenging team communication resulted in
splitting development team to Australia and
project management & support to the rest of
the world
Lastname Firstname Tasks
Benarafa Idriss Software Engineering, System
Design, Quality Assurance
Gora Daniel Project Management, Quality
Assurance, System Analysis
Idelhauser Johannes Software Engineering, System
Design, Project Management
Khan Hifa Project Management, Quality
Assurance
Maleku Shrestha Rohan Software Engineering, System
Design, Quality Assurance
Schäfer Kristina Project Management, Quality
Assurance, Software
Engineering
Schuchmann Felix Software Architecture &
Engineering, System Design,
Code Quality Assurance
Project Roles Overview

4. 3
3
Antigenic Cartography
Description
● Antigenic cartography is a method that quantifies and visualize fine-grain phenotypic
differences among strains of viruses or bacteria
● part of project system development module at the JIM Masters program
● International and interdisciplinary project
Purpose
● develop a desktop application with which antigenic maps can be displayed, analysed
and worked with
Goal
● Create an app consisting of our own frontend using the backend already developed
for ACMACS web
Motivation
● project aims at providing a desktop application for researcher which work with
antigenic maps
● Desktop application is aimed towards virology researchers at the Department of
Zoology, University of Cambridge

5. 4
4
History - How it all began
Early System Architecture idea
● App running on Web and Desktop
● Connect to remote or local Server
Early Analysis
● Java
● C++
● Chrome App
● NW.js
After first meeting with Derek
● Desktop-only application
● no remote connections
● integrating Acmacs backend

6. 5
5
History - Tabbed

7. 6
6
History - Windowed

8. 7
7
History - Split windows

9. 8
8
History - One Table only

10. 9
9
History - Split

11. 10
10
History - Current

12. 11
11
Project Management via GitHub
● GitHub is developer centric and projects are viewed as code repositories
● ZenHub used as project management and collaboration tool inside GitHub
Team Organization
● Weekly virtual meetings and communication via Google Drive, GitHub issue
tracking and Messenger
QA and issue management
● Continuous integration used through Travis-CI server used for QA and automated
testing
● One “master” branch on Github that holds runnable version
● feature branches for issue & feature handling
Requirements Analysis
● Functionality for the application was gathered from several sources
○ Derived from the existing programs, Lisp MD5 and ACMACS web app
Project Management & QA

13. 12
12
ZenHub for Project Management

14. 13
13
Development sequence
Beginning: parallel tasks
Merging phase
Features and improvements
Deployment process
Bugfixing

15. 14
14
AcJIM Application - Technical components
Node.js
● node.js and its package manager npm installed on your system in order to get
AcmacsDesktop running in development mode
NW.js
● NW.js (node-webkit) is used to deploy the application as a multi platform
desktop executable
AngularJS
● modern dynamic html handling is provided by AngularJS as a future proof and
feature rich framework
● pre defined structures and public documentation ensures maintainability for
future teams/developers
● karma as test runner and PhantomJS to emulate browser to test angular
D3.js
● D3 is used to visualize the the data on the map

16. 15
15
Node.js
NW.js
AngularJS
D3
AcJIM Application - Technical components

17. 16
16
AcJIM Application - Component bindings

18. 17
17
AcJIM Application - File support
Input OutputAcmacs
Desktop
.acd1
.save
.lispmds
.xls
.xlsx
.txt
.save
.acd1
.acd1.bz2
.acd1.xz
.acp1
.acp1.bz2
.acp1.xz

19. 18
18
1. Menu Icons for Rotating the map and selecting multiple nodes.
2. Zoom In / Zoom Out.
3. Toggle Error / Connection Lines.
4. Show Labels.
5. Reoptimize.
6. Fix Selected Nodes.
7. Disconnect Selected Nodes.
8. Randomize Nodes.
9. Creating a New Map from an Existing Map.
Main Developed Functionalities:

20. 19
19
Screenshots and Tool Demonstration
Detailed
video

21. 20
20
Multi Platform
● All frontend components were chosen to support multi
platform applications
● Early frontend application worked perfectly under Windows
But
● The strong dependency of the core backend on UNIX
features made it impossible to deploy as a Windows version.
● Packing the backend into a virtualbox environment failed due
to
○ Performance bottlenecks with ssh calls and
○ File handling for argument passing
Future possibility
● Changing the frontend<->backend protocol from system calls
to a HTTP/SOAP API and deploying the core with an own
server
Platform/Windows issue

22. 21
21
Normal company
● Interest for the company's scope/project
● Job interviews
● Working together to maintain a wealthy company
● Team events/coachings
● CEO/CTO/Team Leader
● Common enemy/competitor
JIM Team
● Different skills & expectations
● Forced to work together
● “Culture shock” in the abroad semester
● No “boss” to handle conflicts or diverging opinions
But in the end...
...we developed a working project!
Team issues

23. 22
22
Additional Issues and Challenges
Limitations
● Not all functionality integrated available in backend
○ modification of titer tables
○ get best map
○ displaying blobs
● Keep track of a user's interactions (undo/redo)
● Operating system compatibilities
● nw.js problems
User requirements
● Challenging requirement engineering during the course of the project
Communication
● Challenges of managing a team that is geographically spread across the
globe

24. 23
23
Future work and more...
What next
● Fix known bugs
● Add more features
○ Increase compatibility with import and export of
different file formats
○ Implementation of state management (undo/redo
feature)
○ and more…
● Develop core libraries in javascript
● Analysis of the user interface based on user feedback
● Develop cloud and mobile based applications
● Ensure that user data is securely encrypted

25. 24
24
Where to get it?
Packaged App: https://github.com/acjim/AcmacsDesktop/releases
Code: https://github.com/acjim/AcmacsDesktop
Technical Documentation and User Guide: goo.gl/tuARin
Presentation: http://www.slideshare.net/hda_jim/acjim-acmacs-
presentation-58365576
slideshare keywords: acmacs, antigenic cartography, acmacs-desktop

26. 25
25
Q&A
Open for Discussion