1. Enterprise Supervisor: Byron Ling Academic Supervisor: Dr. Mike Lance / Dr. Luofeng Xu Course Supervisor: Malcolm Wieck
Project Background
Project Design and Concepts
The project is based on a flat Single
Page Application design, which allows
a user to stay at one web page and
perform a number of activities without
refreshing the entire web page. The
underlying technology is the
increasingly popular Asynchronous
JavaScript and XML (AJAX) technology
Page loads or user triggered events in
the web browser user interface send
requests to the server.
The server gets the request and posts
data to the underling Model. The Model
holds the logic to update, delete, insert
or return required data according to
the given request and calling method.
Model than pass long the result back to
API, and API will either return it back to
the interface with a flag of success or
failure.
The web browser interface, on
receiving the data back, refresh
appropriate parts of the screen.
On the left are a UML class diagram
and ERD diagram showing the relation
between class and data table.
The figure below illustrates how the
application works.
Project Management
Tools Description
Project Brief
Scope of the project requirements
and functionality.
Project Design
UML diagram , ERD, Design Pattern
and Wireframe.
Weekly Report
Time management and document
small releases & problems.
Version
Control
Different version of the project by
date as backups.
Project
Schedule
Make sure project running according
to scheduled with each sprint and a
plan to catch up needed if not.
Quality
Assurance
Make sure project meet the coding
standards and the project fulfilled
the requirements.
Risk
Management
Reduce the chance of identified risk
from happening and lower the
impact when it does happen.
Documentation
Document comments of coding and
other required documents.
Project Procedure
Project Presentation
Technologies & Tools
Gun City wanted a Task Management
System to allow staff to create tasks. Tasks
can be shared (view only) and delegated
to designated staff members. Task have
status, priority, ETA and duration. This
system helps both staff and management
with decision making and work allocation.
Two type of task can be created: top level
tasks and sub-task. Top level takes can
take zero to many sub tasks. A sub-task
must belong to a top level task and it may
have number of sub-tasks nested under it.
The two type of task are interchangeable.
The figure to the left shows the task
structure.
Defined
Requirements
Top Level
Design
Database
Creation
Front End
Programing
Back End
Programing
Documentation
Testing
(test cases)
List the all the requirements
as backlogs, and targets
each backlog for a sprint.
Function and interface design,
write some test cases. UML,
ERD, Wireframe will be the
tools for this step.
Built required data tables in
the database, testing table
with dummy data.
According to requirements and
wireframe, built HTML, CSS
and JavaScript. This step will
be active through whole SDLC.
Corresponded with front end build API
and Model. This will allow interface to
display information it required without
refresh whole page. This step will be
active through whole SDLC.
Integration Testing preforming on
the functionalities according to the
requirements with test cases, and
along with unit tests when each
function been developed.
Document comments and
weekly report as reference
when comes to modify or
extend the program.
Create a top level task.
Same form will display in task
details page to make a sub task
for a selected top level task.
Toggle tabs show tasks created by login user
Show tasks shared to login user by toggle tabs
Show tasks delegated to login user by toggle tabs
Click to
redirect to a
new page &
show details
of a task
Expand when number of sub task <> 0.
Task can be archived
Task can be unarchived
Details of a
selected
task
Table collapse when button clicked, reactive by expanding any task.
Show staff designation page by toggle tabs
Share
staff to
task
Delegate
staff to
task
Remove Staff
Remove Staff
Show top
level task and
sub tasks
Inline Editable
example
Show current
task(incomplete) and
able to show completed
task by select
completed tasks.
Toggle between complete and uncompleted tasks
Asynchronous Web Application
By Rui Zheng