Project Overview
This course is an introduction to agile development methods, appropriate for medium sized teams and rapidly moving projects. Basic software development infrastructure; requirements elicitation and tracking; estimation and prioritization; teamwork skills; basic UML; design patterns and refactoring; security, discussion of ethical issues and professional responsibility.
Technologies used
In this course, Subversion was an important tool for version control and checking out code. Javascript was the scripting language used in this course. Dr Project was the project management system. In addition, JSCoverage gave code coverage, while Firebug was the primary debugging tool and JSUnit was a valuable testing tool.
Responsibilities and Roles
I worked with three of my CS peers (who were picked at random by the professor) as a group. My responsibilities were mainly helping my other group members write the Javascript code for this project.
I was the primary coder for the final design.
Project Details
Goal: The goal of this course is to develop a family tree viewer using Javascript that runs on Mozilla’s canvas element. There are no restrictions to what external libraries we use as long as we credit all the owners of those libraries.
Stage two – writing a GUI toolkit library
Since stage one of our viewer was just making up the personas, user stories and basic GUI framework, stage two is where we started implementing things by writing out the code to draw the nodes. We have a test family here, showing the basic relationships of marriage and having kids. We have males and females as distinct colors.
Here we show the functionality we implemented, being able to drag nodes around, pan around the canvas, using the zoom buttons and having the mini-map mimic our actions. This functionality provides for a more smoother, Web 2.0-like feel ala Google Maps. The user can drag nodes freely and the max zoom distance is capped so that the user cannot zoom too far in.
Stage three – testing, debugging and reading from external file
Here is where our layout develops. We read from an external JS file which allows us to populate our objects. After the user searches for a person, the function will automatically draw the nodes and relationships closest to that person. We intend to have a function to add nodes to the external file so that the family tree can grow as the user adds more members.
We test our layout functions with a variety of test suites to make sure our algorithm and design patterns passes each test. Each test suite is located inside its own external js file. Each other team in the course also submits their own test case which we use to make sure that almost all situations can be covered.
Final stage- Impressing the Professor
The final stage involved swapping code with other teams and having to design a final family tree viewer application to impress the professor. In the end, we decided to have the layout be more Web 2.0-like with simple and intuitive controls. 
The features we decided to have were adding family members, searching for family members, storing and selecting different trees, zoom/pan controls, photo support and information editing support.
Source/repos
Github Repo
Leave a Reply