Académique Documents
Professionnel Documents
Culture Documents
Product Vision
Project Objectives
1. To create a prototype hybrid application that allows the creation of a digital scrapbook. 2. To create a system that allows the app user to order physical copies of their scrapbooks. 3. To allow the user to share a digital version of the scrapbook online and through social media. 4. To enable multiple users the ability to create a joint scrapbook of memories together. 5. To allow users a way to give context to their memories through photos, text and other annotations.
Initial scope
The hybrid application would allow users: 1. To combine both existing photos with new photos taken with the built in camera to display them in a book-like layout, creating a digital scrapbook. 2. To create scrapbooks that can have multiple pages. 3. To fill up each page using a range of pre-existing templates. 4. To store these scrapbooks on the server. This will use the application as a front end client to edit and manage the content, which is synced and stored on a server. 5. To view or share their online scrapbooks through the websites online scrapbook viewer. 6. Each scrapbook can also be purchased in physical form, directly from the phone or via the website. It will be printed and delivered using a third party printing company.
Functional Requirements
Requirement analysis
The stakeholders represent everyone who has an interest or power over this project and need to be kept in mind when developing the application thought-out the entire lifecycle. The list below shows the key stakeholders and the interest or role they have. It also listed the requirements and expectations they each have of the project which I have further categorised into three sections.
Functional Requirements Technical Requirements Project Management Requirements These look at how the product should function from an end users perspective. These look at what the technical issues are that need to be addressed. These look at what needs to be done in order for the new product to be developed smoothly.
Edward Marriner Has the responsibility for keeping the product in-line with the vision. Will expect the product to follow closely to what the original vision for the product with a great overall user experience for the application.
Functional Requirements
Will expect the product to make shifts in direction when required, but only when the result will create a better application for the end user.
Edward Marriner Has the responsibility of making sure the project is moving forwards and development is kept to schedule. Will expect the product to follow closely to what the original vision for the product with a great overall user experience for the application. Will expect the application to keep to the standards within each of the technologies used.
Functional Requirements
Technical Requirements
Will expect the user interface of the application to work across all IOS and Android devices that meet the minimum spec. Will expect the website to have up to date information about each book created. Will expect the latest CSS3 and HTML5 functionality to be used when possible. Project Management Req. Will expect the project to meet the deadlines and milestones set out as closely as possible throughout the whole project lifecycle. Will expect the project to follow the SCRUM methodology when developing the product. Will expect regular communication with key stakeholders. Will expect the development of the application to carried out in sprints. Will expect a fully functional prototype application to be completed by the end of the project.
Supervisor Description
John Ford Has the role of overseeing the project from an executive position. Will make sure the project lead is keeping to the schedule that was set and will support the project when required.
Functional Requirements
Will expect the product to be able to allow users to create scrapbooks that can be purchased or shared online. Will expect the latest and relevant technologies to be used during the project. Will expect the product to gain regular user feedback to keep it focused on the end users. Will expect regular communication with the project lead/vision. Will expect to see the application at different stages of the development process to monitor its progress. Will expect to see bi weekly reports on the progress of the project. Will expect a fully function prototype application to be completed by the end of the project. Will expect to see signs that the SCRUM methodology is being used to develop the product.
Technical Requirements
Customers Description
Android and IOS Users The potential customer will have an interest in making sure the application is easy to use and works well on their android smart phone. Will expect to be able to work the application without reading any large amounts of documentation. Will expect the application to allow them to buy a copy of their book directly from within the mobile application. Will expect to be able to share the book that they have created online with other friends. Will expect to be able to collaborate with other friends of a single book. Will expect to be able to create new scrapbooks. Will expect to be able to delete old or unfinished scrapbooks. Will expect to be able to edit books at any point.
Functional Requirements
Technical Requirements
Will expect to be able to create their scrapbooks when they have no internet connection available. Will expect the application to use the phones hardware to enhance the experience of the product. Examples would be using the built in camera. Will expect the product to work without bugs on their own phone.
Supplier Description
Peecho.com Has the role of printing the PDF books. Has an interest in the application working well to generate book sales.
Functional Requirements
Will expect the product to be able to allow users to create scrapbooks that can be purchased or shared online. Will expect the PDFs to formatted correctly ready for printing. Will expect the Peecho brand to be kept in high regard.
Partner 6
Plymouth University
Description
Has an interest in students doing well with their final major projects so students gain a good knowledge of the industry. Has an interest in promoting the University teaching through successful projects. Will expect the project to completed before the deadline set out. Will expect the student leading the project to meet regularly with their supervisor to gain feedback. Will expect the product to be created from scratch and not plagiarised. Will expect the student to put as much effort as required into creating a good final year project.
Community Description
Class Members Other class members have an interest in what other projects students are doing to offer suggestions or share back about their projects. Will expect the product to be a unique idea. Will expect the project to be conducted in a fair way that does not damage or inflict with any other student projects.
Press -
Small technology blogs covering mobile apps Has an interest in covering what new apps are being released or developed.
Description
Will expect the application to be posted openly on to the app store when finalised. Will expect information about what the product does, who it is aimed at and why people should use it.
Not all stakeholders will have as much input or power over the project as other and so it is important that each of the key stakeholders are kept up to date and satisfied with the project development in a way that is relevant and suitable. To visualise how much power and input each stakeholder has I have created a graph below.
Keep Satisfied
Peecho
Manage Closely
Power
Monitor
Keep Informed
Press Class Members
Interest
Project Management
Method of approach
Instead of using outdated methods to complete and manage the workload of the project such as the water fall model I will be using SCRUM. This means that throughout the project there will different focus on different parts of the applications, known as sprints. Sprints target an particular area of development and aim to complete it to a functional level by the end of the sprint. The Sprints I will be completing are listed within the Gant Chart for this project. The main advantage of using a methodology such as SCRUM is that it allows a working product to developed stage by stage in a structured manner helping plan out how much time each area of the project will take. It also makes it much easier to manage a small team of people that need to have input into the project. The methodology uses set roles to delegate what each stakeholder or developer should be aiming to keep update to date with and how often they should be meeting with each other to discuss the projects progress. I have listed below the roles of the SCRUM members.
Edward Marriner
Product Owner Oversees the project vision for the application and steers the project to create a product that the end users will want and find easy to use. Oversees the execution of development for the whole project, also makes sure all of the people taking take in the scrum and doing the talks they should be.
Scrum Master
John Ford
Team Member Oversees the running of the project and is the supervisor of the project as a whole.
Gant Chart
9
To keep track of what needs to be complete for the project to be successful I have adopted the use of a Gant Chart. This shows all of the tasks plotted in a time line giving everyone on the project an overview of how far we have come, what we should be working on and whether we are starting to fall behind from the schedule. The Gant chart will need to be referenced at most meetings I have with my supervisor to keep everyone updated with how well the project is going.
Control plan
At the start of each stage I will create a short report breaking down how each area will need to be tackled, I will then follow this up with a more complete end of Stage report. At the end of each stage I will organise a formal meeting to review what was achieved in the stage with my supervisor. Throughout the whole project I will document the activity around the project and use this to create bi-weekly reports of the progress of my project through the use of a simple blog I have set up. I have created a risk list to highlight areas that will require more attention and care. I aim to meet with my supervisor regularly plus any other staff or stakeholder as often as required as previously laid out in my communication plan. I have created a quality plan to make sure I keep my work up to a good standard throughout, minimising the bugs in the project and aiding the ease of use of the application.
Communication plan
I will hold regular bi-weekly meetings with my supervisor in addition to end of stage reviews to make sure good communication is kept. During the end of stage reviews I will present what work has been complete and any areas that need further work. I will also go through the next stage in the project plan. Communication with the target user will also be critical in creating a product that meets my user requirements, to ensure this is met I will be holding feedback session at every point where it will be suitable to get feedback into the design and functionality.
Risk Assessment
Overrun on schedule
Description The project has started to slip from where progress should be at during the point in time. My bi-weekly report and bi-weekly meeting with my supervisor will provide regular monitoring of the progress. In the event I fall a week behind I will draw up a plan on how I aim to get back on schedule.
Management Strategy
10
Management Strategy
Management Strategy
Technology failure
Description Management Strategy My computer or hard drive dies and I cant access my work locally I will keep regular backups of the project and check-in my changes to a revision control system such as git.
Illness
Description Management Strategy I become too ill to work I will keep my supervisor up to date and see if the contingency time in the current Gant chart plan can be used up.
Management Strategy
11
12
User Engagement
User Groups
Description A user group is where you get a selection of people together to discuss a problem or question to do with your project. User groups are great ways of getting people to bounce thoughts off each other and allow people to share their views without the need for closed questions. In a user group you can also respond to a persons answer with a follow up questions to dive deeper into their thoughts on a subject.
Benefits
Interviews
Description A one-on-one interview with a user where you ask questions and talk about your product or problem. Very much like a user group however there is only one person. They can be helpful in finding out very specific details and people have more time to express and articular their answers than when in a group. They are also not influenced by other strongly opinionated group members.
Benefits
Questionnaires
Description Often a paper based set of questions that can be handed out in large quantities. Questionnaires are very easy to create and can be the fastest way of finding out a general opinion of things from a large user base. People can also feel
Benefits
13
they can be more honest than if they are speaking face to face with a product owner.
A / B Testing
Description Seeing how people react when something is shown or asked of them a second in a similar but slightly different way than the first time around. A / B testing makes it very easy to see how small changes in design affect the users perception of your product and whether the change is an improvement or not.
Benefits
14
Technological Specification
15
and develop against. When combined with Asynchronous Module Definition techniques each model and controller can be easily name spaced and only loaded in when require (lazy loading).
Technology Breakdown
The project will be made up many different elements that rely on different technologies that interact with networks, mobile devices and web browsers. Below is breakdown of the technologies that will be used.
PhoneGap
Description PhoneGap is an open platform that allows HTML5 applications to be wrapped in a native webview, giving users a native like feel to a web application. The main benefits of this technology is the way you can package up local web applications to be distributed through the app store for iPhone, Android and many other platforms. By using web technologies to build an application the layouts can be responsive allowing for a write once, run anywhere environment. PhoneGap also fills the gap in most mobile browsers for hardware interactions by providing a native bridge that allows JavaScript and native code to communication. Although PhoneGap is a relatively recent project, it backed by Adobe and has been open-sourced with large community developing for the platform. Documentation is very good for the APIs and many native plugins have been written to add extra functionality to the native bridge. Trigger.io and Sencha Touch both provide similar platforms, although neither has as mature communities providing support and developing for the platforms. My current experience of the specific platform is reasonable and my knowledge of the technologies I would use to interact with the platform (Java, Object C and JavaScript) is good. I will need to read up on the specifics of the API documentation. Performance will need to be closely monitored when using HTML5 hybrid application on mobile devices in order to create an app that is as responsive and as fast as a native app.
Maturity
Fall Back
Skill Level
HTML5
Description HTML5 is the latest specification of the HTML standard of marking-up web documents. HTML5 builds on the foundations of HTML 4 and extends it further with a focus on semantic mark-up that is accessible to all types of
16
browser. HTML5 adds new tags that aid support for new media formats, as well as new sections, navigation and more. Maturity The HTML5 spec is stilling being actively worked on and implemented by browser vendors and overseen by the HTML5 working group at the W3C. Although the spec is still not finished the modern browser support is very good allowing developers to use the new spec now. HTML4 can be used where HTML5 tags are not implemented on mobile browsers. My knowledge of HTML5 is very good and I am very comfortable with the spec and its developments. I will need to reference which tags are supported on mobile versions of Webkit for iPhone and Android. Caniuse.com provides a very up to date resource backed by the community for browser support of the new spec.
Fall Back
Skill Level
Learning required
Other Notes
CSS3
Description Cascading Style Sheets are used to style the different elements within a HTML webpage. The CSS standard revolves around the box model, where every element is treated like a box and different styling properties can be set to change the look of the element. The latest specification for CSS3 updates the properties that have been included to increase the amount of control you can have over your HTML mark-up. Popular additions include things such adding rounded corners. The CSS3 spec is also currently in active development and will continue to evolve over the coming years, however the core new properties has now be standardised within the working spec. The box model works the same in CSS2 and so if there are any issues with the CSS3 properties the browser will fall back onto CSS2. I have very good knowledge of CSS and how to style every element in a suitable way. I will need to check the performance of some of the more graphic intense CSS3 properties before using them on mobile devices. CSS3 can be used to reduce the number of elements in the DOM, increasing performance on mobile browsers.
Maturity
Fall Back
Skill Level
Learning required
Other Notes
17
SASS
Description SASS is a CSS pre-compiler that introduces a number of powerful ways of writing CSS including the use of variables, functions and true inheritance. SASS is well developed and very popular with many top web development firms. SASS is built on the CSS spec and using the same syntax and compiles down into pure CSS and so pure CSS can be used as an alternative. I have a good understanding of SASS and how to use some of the more powerful features. The user guide will be used as a reference for some of the more obscure functionality. SASS can be auto complied down using a build script when required
Maturity
Fall Back
Skill Level
Learning required
Other Notes
JavaScript
Description JavaScript will be the primary front end user facing language used to write the project and will provide the interactivity, scrapbook rendering engine and API calls through AJAX using the JSONP format to get data from the server when required. JavaScript allows you to create web applications that act as if there are native apps by allowing users to use a whole app without having to refresh the website. Different sections of a DOM can be inspected or manipulated without affecting the rest of the page. JavaScript has become one of the most popular languages used in the world with millions of developers who have had some level of interaction with JavaScript. This leads to many online resources of plugins, librarys and optimisation. Static pages would work as an alternative to using JavaScript however the usability of the app would be greatly reduced. I have a good understanding of how JavaScript works and how to use prototypal functions to make the language object orientated. I will need to look into the different ways I can optimise my JavaScript code to run well on mobile browsers. Android performance is much poorer compared to IOS
Maturity
Fall Back
Skill Level
Learning required
Other Notes
Backbone.JS
18
Description
Backbone.js is a JavaScript MVC framework that allows for template code to be separated out of the script file to allow for better optimisations and easier maintenance of projects. Backbone integrates routing similar to what ruby on rails made popular and page navigation with full use of the back and forward browser functionally. Backbone.js has only been around for a few years but has become one of the most active open source projects within the JavaScript developer world with many watchers, pull requests and forks on GitHub. There are many different alternative frameworks. Suitable alternatives would be Spine, AngualrJS, Knockout or ember.js My skill level is mixed with more theory knowledge than practical experience. I will need to follow up any ideas of the framework I am unsure of and gain a better understanding of the API. Getting the model, view and controller structure correct will be vital to making sure the product is both maintainable and fast.
Maturity
Fall Back
Skill Level
Learning required
Other Notes
Jasmine
Description Jasmine is a JavaScript behaviour testing framework that allows you to write a set of tests for your application to help you catch any small bugs and let you know when new features break old code. Jasmine has become the most popular JavaScript testing framework as the API has been tuned to be developer friendly. Mocha is a similar project that aims to help developers write tests for their code. My knowledge of the API is good however I have not written many projects with a full test suite before. I will need to think about how I write my tests and lookup common examples. The test suite should not be included within the final production versions of the application and is purely for debugging purposes.
Maturity
Fall Back
Skill Level
Learning required
Other Notes
Require.js
Description With no built in way of efficiently loading multiple JavaScript files like Javas @import many JavaScript applications are slow to load and write all their objects are varaibles to the global namespace. Require.js follows the AMD
19
pattern to lazy load dependencies when needed and assigning modules to a namespace in the application vastly improving speed and maintainability. Maturity Fall Back Require.js has become the standard way of loading in AMD modules. yepnope.js is another alternative that performs a similar job but also includes other functionality for CSS importing. I have a good knowledge of require.js and have used it in past projects. I will need to learn how to integrate backbone.js and require.js in the best way. Testing will be required to see if require.js is effective on a mobile device.
Other Notes
Uglify
Description Uglify is a tool that will minify JavaScript code down by removing spaces and new lines to reduce the file size. By having smaller file sizes the mobile browsers can load the file much faster. Uglify has been worked on for many years and is very effective at compressing down code while not breaking any of the code it shrinks. I can manually remove any extra comments or new lines to reduce the file size. There is not any skill required to use uglify. None. Once the code is processed it is hard to debug and so a production and development codebase will be kept.
Maturity
Fall Back
PHP 5
Description PHP will be used on the server side to code the server API and make parts of the website function. PHP 5 will be used as in has much better support for Object Orientated Programming. PHP is one of the longest standing server languages and is very well documented. Ruby can be used to complete the same tasks as PHP if required on the same server set up. I have a very good PHP knowledge and have written many PHP projects.
Maturity
Fall Back
Skill Level 20
Very little. The PHP INI configuration file should be tweaked to gain the best performance.
Laravel
Description Laravel is a popular PHP MVC framework that will be used to create the API the mobile devices will use as well as for parts of the online website. The code base is very modular and the framework is known for being fast and easy to understand. Laravel has gained popular support from the PHP community and is very well maintained. CodeIgniter is an alternative framework that has a more hands off approach that could also be used. I have a good skill level using the framework. I will need to make sure I know all the API mappings for the framework. There are also plugins available to include popular commonly used functionality.
Maturity
Fall Back
Snappy
21
Description
Snappy is a PHP Wrapper around wkhtmltopdf which uses a QT Widget is a headless mode to render a HTML file using Webkit and export it to a PDF or image format. The PDF will be formatted ready for printing and stored on the server. Snappy is a clone of other wrapper and so while it has not been around very long it replicates the same logic used in more mature libraries. I could use wkhtmltopdf directly through PHP without a wrapper method. My skill level is only API knowledge deep I will need to test the integration and PDF creation API before using it on my project. wkhtmltopdf will need to be installed on a linux server with root permissions by hand before snappy can be used.
Maturity
Other Notes
Fall Back
Description
Git along with Git Hub is a source /version control system that can be used to keep track of changes to code and revert back when things go wrong to a working version. Source control also allows the code to be forked off into a separate branch and merged back later, this is useful when experimental features need to be worked on in isolation. Git is an industry wide standard Bit Bucket is popular with some developers as an online version control platform. I have a good understanding of how most of the basic commands work. I will need to learn how some of the more advanced commands work from the online guide. Regular commits to Git Hub will be vital in making sure my work is backed up and safe.
Other Notes
MySQL
Description MySQL is a database product that stores data in relational tables. The database will be used to store all the user account information as well as keeping the scrapbook content in sync across all of the applications working on it at any given point. The database tables can be joined together to keep data duplication to a minimum. Postgres is another popular Database system used for online projects. I have a good understanding of SQL and the data structures MySQL supports. I will need to read up on some of the more complex SQL statements as I have not made large complex SQL statements recently. The right SQL will need to be used to make sure database retrieval speed is not really slow.
Learning required
Other Notes
JSON
Description JSON is a lightweight data transfer format that has become the standard way of sending data back and forth between a server and mobile device or web browser. It is structured as a native JavaScript array and so integrates with JavaScript very easily.
23
Fall Back
XML also could be used, it is similar to JSON but the syntax is more verbose and therefore the file size will be larger. I have a very good understanding of the JSON format I will have to look into how the JSONP format can be used to transfer data across a different domain. JavaScript can read JSON files through an AJAX call.
Other Notes
Coding Styles
Hen developing a complex large applications across different platforms it is vital to have strong coding conventions to keep the code readable and easy to maintain.
JavaScript
Comments Variables Global Variables Functions New Array New Object Comparing values // comments with double slash var myVarNameHere; var MYAPP; function myFunction (){ } var myArray = [] var mObject = {} ===
PHP
Comments Variables Classes Constants Functions Comparing values // comments with double slash $myVarNameHere; class myClass ($a, $b){ } $MYAPP; function myFunction (){ } ===
For both the JavaScript and PHP code I will be written sets of tests that try and assert values as if the user was seeing a page in real life. By checking to see if element exist when we need them and values are what we expect them to be you can quickly reduce the number of edge case bugs and errors that are hard to detect without hours of intense debugging. I will be using Jasmine for the JavaScript code and PHP Unit for the PHP code. Both tests should pass 100% of the tests every time I run them. If they do not pass any of the tests then I will stop development to figure out what has happened and what needs to be fixed. This will not only create a much more stable product but it will also reduce the amount of time I need to spend tweaking and bug fixing at the end of my project.
Device Testing
Testing will have to be completed during the project both on emulators, desktop browsers and mobile app prototypes. Below is a table of testing platforms that the app will need to be regularly tested against to stop any bugs.
Emulators
Android 4.0 Phones Tablets IOS 6 iPhone 4 iPhone 5 iPad mini iPad 4
Browsers
Chrome Firefox version 20 + version 17 +
Real Devices
Android Phone around a year old Recently released phone IOS Iphone 4/4s/5 Ipad Mini 25
Ipad 2/3/4
26