Software Project Management Plan (SPMP) : Web-Based Drawing Tool
Software Project Management Plan (SPMP) : Web-Based Drawing Tool
Software Project Management Plan (SPMP) : Web-Based Drawing Tool
TABLE OF CONTENTS
1.
Project Overview...................................................................3
P a g e 2 | 22
1.Project Overview
The topic of our project concerns the development of a web-based drawing tool. The motivation for
this project is to create a drawing tool accessible and simple to use for all users, especially young
children.
This web-based application should be available on every computer device connected to Internet.
The target customers are young children and people interested in drawing and coloring in general.
The main functions of this application is to allow user to create a graphic file in format .png using
the features available such as brush, line and shapes or color picture. Then, the user have the possibility
to save the file created in a personal user gallery available in the web page called My Gallery, and
also view, write a comment, report or rate like the work of other users registered on the website using
the Discovery page.
The user need to register an account online to fully use the features of this web-based application. If
not registered yet, the default setting for a user is a guest account which does not allowed the guest user
to save the files created during the current drawing session, use the Coloring Book page and navigate
in the Discovery page of the website to view other users work.
This web-based application can be considered as a new product because we are developing a new
concept of drawing, coloring and publishing art works online all reunited in one web domain.
The drawing features are required to be user-friendly so we are trying to cover all potential
problems that may occur when using a complex graphic software to draw.
The estimated time needed to accomplish this project is 8 weeks. The due date to deliver the final
product is the 11th of December 2015.
We are starting by making this web-based application run on computer devices only but in the
future, we may extend its utilization to mobile devices and tablets.
P a g e 3 | 22
P a g e 4 | 22
Create a user-friendly interface for all users to freely draw using the available drawing tools
Create a creative and well-structured workplace with high response speed
Provide to each registered user a personal gallery treated as a user portfolio
Implement quality tools to draw and color pictures and maintain a frequent update of new
features
Protect users rights with the report button system managed by administrators and notifications
via mail for every 3 corrupted tentative of log in
Allow a rating system with number of likes and reports of files from the personal galleries in the
Discovery page.
By working on this project, we expect to reach the organizational goals listed below:
-
During the development of our project, some constraints may interfere in our work such as:
-
Time limit when developing the drawing sub-features such as air brush thickness
Lack of knowledge related to the computer graphics and web-development hence we will have
to do a lot of research work during our development process that may causes delays
Testing might sometimes fails to detect the system problems.
P a g e 5 | 22
Project Scope
2.1.1. Included
-
Workplace Page
This page contains a blank canvas drawing sheet for the user to draw on and buttons of drawing tools such
as pen, brush, line, shape, ...
-
My Gallery
My Gallery is a page where all the art works of a user are displayed.
-
Discovery Page
The Discovery page is a page where every user can view the work of other users, comment, report files
and rate like.
-
Coloring book
The Coloring book is a page where all pictures available for coloring are shown to users. The coloring
book will be frequently updated with new coloring pattern samples for users to pick and color. The Coloring
studio is an area where the user can color a chosen picture from the slider. The coloring tools used in the
Coloring studio are quite similar to the drawing tools found in the Workplace Page.
2.1.2. Excluded
The following functions are considered as excluded from our project:
-
P a g e 6 | 22
3. Project Organization
Our team has 3 members. Each member will be assigned a specific task in our project development
process.
Product owner: Dr. Nguyn Th Thanh Sang
Full name
Dang Toan Phat
Tran Dieu Vi
Vu Minh Duc Martin
Student ID
ITITIU13052
ITITIU12060
ITITIU13156
Role
Scrum Master / Software engineer
Business Analyst / Tester
Software engineer / Designer
RESOURCE REQUIREMENTS
Hardware resource
Device
MacBook Pro
Asus Transformer
Software resource
Application
Windows 10
Dreamweaver
NetBeans
Photoshop
Sublime text
Microsoft Office 2016
Domain + Host (*)
Database Server (**)
Navicat GUI
Description
Laptop
Laptop
Description
Operating System
Interface design
Compiler
Photo editing
Compiler
Document application
Quantity
2
1
Quantity
1
2
3
2
3
3
1
1
3
Price
$1500
$500
Cost
$3000
$500
Price
$26 per device per month
$26 per device per month
Free
$26 per device per month
$70 per device
200$ per device
$10 each
$300
$800 per device
Cost
$0
$156
$0
$156
$210
$600
$20
$300
$2400
Database Administration
Tool
(*)(**)The cost of domain/host and database server will be abstracted if the customer provides us
with the available ones.
Human resources
Name
Position
Salary (Per month)
Dang Toan Phat
Product Manager + Software Engineer
$1500
Tran Dieu Vi
Business Analyst + Tester
$1200
Vu Minh Duc Martin
Software Engineer + Designer
$800
Total estimated cost: $10,842 for the first month and $3,812 for each following month.
P a g e 7 | 22
4. Schedule
Work Breakdown
P a g e 8 | 22
Register
Actor
Guest user
Registered user
Draw
Save file
Registered user
Comment, report or
rate like for files
Registered user
Manage personal
workplace or gallery
Registered user
Color Picture
Manage user
Registered user
Administrator
Description
For the first visit, the default user (guest) is required to log in to
the server by creating a personal account in order to save the work done
in the current session.
To register the guest user will need to give personal information such
as:
- Full name
- Gender
- Date of Birth
- Email
- Chosen user name
- Account password
The server will automatically send an email to the user to activate
the account created.
The registered user logs in by using the username and password
registered before. The server will send an email to the user to report if
there are more than 3 corrupted login tentative.
To log out, the registered user will just need to disconnect from
the current account.
The user can draw on the blank drawing sheet included in the
workplace by using the drawing tools available.
Only the registered user has the possibility to save a file created
during the session. All files saved will be stored in a folder of the
webpage database. The database will point to the link of each file,
connected to the personal user gallery. The format of the files saved is
.png.
For each file saved, the user can view the file in the user personal
gallery in the My Gallery page. For each file created by the user, the
user name will be set automatically as a tag to easily list the files from
a user. Each user can view, comment, report and rate like the files
personally created or files from other users available on the webpage.
Each user when creating an account on the webpage will be given a
drawing workshop and a personal gallery.
The workplace will give the user the possibility to create or edit files.
The gallery is to store the files that the user have created.
The webpage will also allow to edit the profile of the user.
This feature allows the registered user to choose a picture from the
coloring book and freely color it as pleased using the functionalities
available in the Coloring studio.
In order to enhance the user experience, the administrator is allowed to
manage all users. The administrator have the rights to ban a user from
using the website if the user has violated the publishing rules of the
website. The administrator is responsible for checking profiles,
managing the Discovery page and check the number of reports if
any.
P a g e 9 | 22
Sprint 2
Wednesday
Thursday
28/10/2015
Friday
Saturday
Product
Backlog
P a g e 10 | 22
DATABASE
DESIGN
Tasks
Design ERD and use
cases
Database
Implementation:
Login Controller
Database
Implementation:
Log out Controller
Database
Implementation:
Register Controller
Implement: Canvas
(Drawing sheet)
Implement: Brush
(Drawing tool)
Implement: Color
palette (Color picker
buttons)
Check and test
drawing tools
Test login form &
registration form
Write
documentation:
System
Requirements
Specification (SRS)
Merge all
implementations and
backup all files
latest version
WEEK 3:
Sprint 3
IMPLEMENTATION Monday
Tuesday
Wednesday Thursday
Friday
OF THE DRAWING
TOOLS (2),
SECONDARY
02/11/2015 03/11/2015 04/11/2015 05/11/2015 06/11/2015
PAGES AND
DATABASE
Tasks
Database
Implementation: Edit
Profile Controller
Database
Implementation: Delete
User Controller
Milestones
Database login
/ register
controller for
the website
Canvas, brush
and color
palette
System
Requirements
Specification
Document
Saturday
Product
Backlog
07/11/2015
Milestones
Database edit
profile /
delete user
controller for
the website
P a g e 11 | 22
Design: Administrator
Page
Design: Edit Profile
Page
Test Administrator
Page
Administrator
page and edit
profile page
Line tool,
thickness of
the drawing
line and
rectangle
Implement: Thickness
of the drawing line
Implement: Rectangle
Check and test drawing
tools
Write documentation:
System Requirements
Specification (SRS)
Merge all
implementations and
backup all files latest
version
System
Requirements
Specification
Document
WEEK 4:
Sprint 4
IMPLEMENTATION Monday
Tuesday
Wednesday Thursday
Friday
Saturday
OF THE DRAWING
TOOLS (3),
SECONDARY
09/11/2015 10/11/2015 11/11/2015 12/11/2015 13/11/2015 14/11/2015
PAGES (2) AND
DATABASE (2)
Tasks
Database
Implementation: Save
file to "My Gallery"
Database
Implementation: Edit
existing file Controller
Design: Edit existing
file Page
Test Edit existing file
Page
Test Save file to "My
Gallery"
Implement: Eraser
Implement: Eyedrop
Implement: Triangle
Product
Backlog
Milestones
Database
save file and
edit existing
file
controller for
the website
Edit existing
file page
Eraser,
eyedrop,
triangle and
P a g e 12 | 22
circle
Implement: Circle
Check and test drawing
tools
Write documentation:
System Design
Specification (SDS)
Merge all
implementations and
backup all files latest
version
System
Design
Specification
Document
WEEK 5:
Sprint 5
IMPLEMENTATION Monday
Tuesday
Wednesday Thursday
Friday
Saturday
OF THE DRAWING
TOOLS (4),
SECONDARY
16/11/2015 17/11/2015 18/11/2015 19/11/2015 20/11/2015 21/11/2015
PAGES (3) AND
DATABASE (3)
Tasks
Design: View specific
file Page
Database
Implementation:
Comment Controller
Test View specific file
Page
Implement: Tool
selector functions
Implement: Clear all
function
Implement: Bucket
Tool
Implement: Save file to
"my Gallery" function
Check and test drawing
tools
Write documentation:
System Design
Specification (SDS)
Merge all
implementations and
backup all files latest
version
Product
Backlog
Milestones
Database
save file and
comment
controller for
the website
View
specific file
page
Tool
selector,
Clear all
button,
bucket tool
and save file
to "My
Gallery"
System
Design
Specification
Document
P a g e 13 | 22
WEEK 6:
Sprint 6
IMPLEMENTATION Monday
Tuesday
Wednesday Thursday
Friday
Saturday
OF THE DRAWING
Product
TOOLS (5),
Backlog
SECONDARY
16/11/2015 17/11/2015 18/11/2015 19/11/2015 20/11/2015 21/11/2015
PAGES (4) AND
DATABASE (4)
Tasks
Milestones
Database
Database like
Implementation: Like
and report a
Controller
file controller
Database
for the
Implementation:
website
Report Controller
View
Test View specific file
specific file
Page
page
Implement: Coloring
Coloring
book tools
book
Check and test drawing
functions
tools
Write documentation:
User Manual & Test
cases
User Manual
Merge all
Document
implementations and
backup all files latest
version
WEEK 7:
Sprint 7
SYSTEM
Monday
Tuesday
Wednesday Thursday
TESTING &
OPTIMIZATION 23/11/2015 24/11/2015 25/11/2015 26/11/2015
Tasks
System optimization
Friday
Product
Backlog
Saturday
27/11/2015 28/11/2015
Milestones
Final product
with all related
documents
P a g e 14 | 22
5. Measurement program
To create the best user experience for our clients, we have made various tests to assure that our
web-based application is functioning efficiently and effectively.
By using http://tools.pingdom.com/fpt/, we checked the websites loading time, using the pingdom
servers.
We have also used ExpressVPN to change the VPN server on our computer devices and checked the
connection to the webpage server from various locations all over the world. These tests were made on
multiple Internet browsers, like Firefox, Internet Explorer, Google Chrome, and on different computers
machines with different Internet connection speeds, to make sure there will not be any client problems.
To test the website support on mobile devices, we have tested the website with all its functionalities
on multiple mobile devices, each with different screen sizes and operating systems (IOS, android, wp).
To be sure that our User Interface was comprehensible for our clients, we had the website tested by
a group of about 15 persons. Everything the end-users testers did not understand or took more time than
needed to comprehend, was made simpler to use in the following product delivery for the clients.
The database was tested by errors by testers and us. This was to make sure there were not problems
with data loss and privacy.
6. Risk Management
During the development phase of this project, our group may get some problems concerning the
project implementation, delivery of the final product and business issues in case our final product can be
commercialized. We will list the potential problems in the following paragraph and solutions on how to
solve them.
Probability
Low
Effect
Solution
The development of core functions is prioritized
so if the development time is reduced, the
application will still work with the main
functions. To avoid missing the deadline of
P a g e 15 | 22
Very low
Requirements
for
the
system are added, modified
Moderate
or removed during the
development process
Serious
Serious
Serious
Serious
Tolerable
Disagreements
team members
between
Low
Probability
Very low
Effect
Solution
Fatal
P a g e 16 | 22
Very low
Very low
Low
Fatal
Serious
Tolerable
7. Delivery Plan
WEEK 1: IMPLEMENTATION
OF THE FOUR MAIN PAGES
OF THE WEBSITE
Tasks
Brainstorm concepts for the
webpages interface
Design: Homepage
Design: Coloring Book Page
Design: My Gallery Page
Design: Discovery Page
Login Form
Registration Form
Check and test all designs of
the web pages
Test login form & registration
form
Write documentation: Project
Plan
Merge all implementations
DELIVERY DATES
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
x
x
x
x
x
P a g e 17 | 22
WEEK 2: IMPLEMENTATION
OF THE DRAWING TOOLS
AND DATABASE DESIGN
Tasks
Design ERD and use cases
Database Implementation:
Login Controller
Database Implementation:
Log out Controller
Database Implementation:
Register Controller
Implement: Canvas (Drawing
sheet)
Implement: Brush (Drawing
tool)
Implement: Color palette
(Color picker buttons)
Check and test drawing tools
Test login form & registration
form
Write documentation: System
Requirements Specification
(SRS)
Merge all implementations
and backup all files latest
version
DELIVERY DATES
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
x
x
x
x
x
WEEK 3: IMPLEMENTATION
DELIVERY DATES
OF THE DRAWING TOOLS (2),
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
SECONDARY PAGES AND
DATABASE
02/11/2015 03/11/2015 04/11/2015 05/11/2015 06/11/2015 07/11/2015
Tasks
Database Implementation:
x
Edit Profile Controller
Database Implementation:
x
Delete User Controller
Design: Administrator Page
x
Design: Edit Profile Page
x
P a g e 18 | 22
x
x
x
x
x
x
x
x
WEEK 4: IMPLEMENTATION
DELIVERY DATES
OF THE DRAWING TOOLS (3),
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
SECONDARY PAGES (2) AND
DATABASE (2)
09/11/2015 10/11/2015 11/11/2015 12/11/2015 13/11/2015 14/11/2015
Tasks
Database Implementation:
x
Save file to "My Gallery"
Database Implementation:
x
Edit existing file Controller
Design: Edit existing file Page
x
Test Edit existing file Page
x
Test Save file to "My Gallery"
x
Implement: Eraser
x
Implement: Eyedrop
x
Implement: Triangle
x
Implement: Circle
x
Check and test drawing tools
x
x
x
x
x
x
Write documentation: System
x
Design Specification (SDS)
Merge all implementations
and backup all files latest
x
version
WEEK 5: IMPLEMENTATION
DELIVERY DATES
OF THE DRAWING TOOLS (4),
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
SECONDARY PAGES (3) AND
DATABASE (3)
16/11/2015 17/11/2015 18/11/2015 19/11/2015 20/11/2015 21/11/2015
Tasks
Design: View specific file Page
x
P a g e 19 | 22
Database Implementation:
Comment Controller
Test View specific file Page
Implement: Tool selector
functions
Implement: Clear all function
Implement: Bucket Tool
Implement: Save file to "my
Gallery" function
Check and test drawing tools
Write documentation: System
Design Specification (SDS)
Merge all implementations
and backup all files latest
version
x
x
x
x
x
x
x
x
x
x
WEEK 6: IMPLEMENTATION
DELIVERY DATES
OF THE DRAWING TOOLS (5),
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
SECONDARY PAGES (4) AND
DATABASE (4)
16/11/2015 17/11/2015 18/11/2015 19/11/2015 20/11/2015 21/11/2015
Tasks
Database Implementation:
x
Like Controller
Database Implementation:
x
Report Controller
Test View specific file Page
x
x
x
x
Implement: Coloring book
x
x
x
tools
Check and test drawing tools
x
x
x
Write documentation: User
x
Manual & Test cases
Merge all implementations
and backup all files latest
x
version
DELIVERY DATES
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
x
x
x
x
x
P a g e 20 | 22
Report submission
Merge all implementations
and backup all files latest
version
Application
Database
ER diagram
(ERD)
Hardware
Interface
Layer
Software
Use case
Web
Web-based
application
Website
Definition
A computer program with an interface, enabling people to use the computer as a
tool to accomplish a specific task.
A collection of data arranged for ease and speed of search and retrieval by a
computer.
Entity-Relationship Diagram: A computer, its components, and its related
equipment. Hardware includes disk drives, integrated circuits, display screens,
cables, modems, speakers, and printers.
A computer, its components, and its related equipment. Hardware includes disk
drives, integrated circuits, display screens, cables, modems, speakers, and
printers.
The point of interaction or communication between a computer and any other
entity, such as a printer or human operator. The layout of an application's
graphic or textual controls in conjunction with the way the application responds
to user activity.
Separate "drawing boards" or "canvasses" in a drawing, CAD or image editing
program that are overlaid one on top of the other to complete the picture. Layers
provide greater control over the illustration or image and offer different
functions depending on the application.
The programs, programming languages, and data that direct the operations of a
computer system. Word processing programs and Internet browsers are
examples of software.
A description of a potential scenario in which a system receives an external
request (such as user input) and responds to it.
The World Wide Web is another way to describe the Internet, which is a
network of computers which are connected and that share information and allow
communication around the world.
An application in which all or some parts of the software are downloaded from
the Web each time it is run.
A collection of HTML and subordinate documents on the World Wide Web that
are typically accessible from the same URL and residing on the same server, and
form a coherent, usually interlinked whole.
P a g e 21 | 22
HTML
The definition of URL is an acronym for Uniform Resource Locator, the address
of a website on the Internet.
URL
Source: http://www.yourdictionary.com/
9. References
+ How to implement drawing tools:
http://code.tutsplus.com/tutorials/how-to-create-a-web-based-drawing-application-using-canvas--net-14288
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
+ How to save a file:
http://www.avajava.com/tutorials/lessons/how-do-i-save-an-image-from-a-url-to-a-file.html
http://weworkweplay.com/play/saving-html5-canvas-as-image/
+ How to access jsp variables in JavaScript:
http://stackoverflow.com/questions/3116058/how-can-i-access-javascript-variables-in-jsp
+ How to create a div from codes, showing it and hiding it:
https://www.script-tutorials.com/html5-color-picker-canvas/
+ How to upload a file image using servlet:
http://afewdoubts.blogspot.com/2013/03/upload-fileimage-in-folder-using-servlet.html
+ How to draw a MVC diagram:
http://www.w3schools.com/html/
http://blog.codinghorror.com/understanding-model-view-controller/
http://www.javatpoint.com/MVC-in-jsp
+ Computer graphics algorithms:
http://groups.csail.mit.edu/graphics/classes/6.837/F98/Lecture6/circle.html
https://en.wikibooks.org/wiki/Java_Programming/Graphics/Drawing_shapes
Books :
-
P a g e 22 | 22