Project Rui Full Size
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
Transcript of Project Rui Full Size
Printing:
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 BriefScope 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
ControlDifferent 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
AssuranceMake 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.
DocumentationDocument 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 Editableexample
Show current
task(incomplete) and
able to show completed
task by select
completed tasks.
Toggle between complete and uncompleted tasks
Asynchronous Web ApplicationBy Rui Zheng
