COIT20269 Mobile Web Apps

COIT20269 Mobile Web Apps

Assignment 1 Mobile Web App

Due date:11:45pm AEST, Tuesday Week 6ASSIGNMENT

Weighting:20%

Length:Less than 50 MB1

Objectives

This assessment item relates to Learning Outcome 4. More specifically, using an integrated development environment to build, debug and test a mobile application.

The main outcome of this assignment is a client-side mobile web app, i.e. all data should be stored and processed on the client side. The mobile web app should be developed using an integrated suite of mobile software development tools. More specifically, you have to use the client-side jQuery, jQuery Mobile, JavaScript, HTML5, and CSS.

Task Description

You are to develop a client-side mobile web app, named the Gift Delivery app from a partially-completed source code, which used HTML5, CSS, JavaScript, jQuery and JQueryMobile. You must use these technologies exclusively for the development. All the necessary resources (e.g., images, CSS files) are given with the partially partially-completed source code. You are required to add HTML code to the jQuery pages in the HTML files, add styles in the CSS files and add JavaScript code to the .js files to complete the app. We call it version 1 as you will have to develop another version, named version 2 for Assignment 2.

(a) (b)

Fig 1. The Gift Delivery app: (a) Login page, and (b) Home page

The Gift Delivery app

You are given partially completed source code of the Gift Delivery app version 1 as a starting point for development. Please adhere to the style and design choices made in the partially completed app, while completing the project. The partially completed app works as follows.

The mobile web app creates a default user account to log into the app. The default user account details are as follows.

{email:"admin@domain.com",password:"admin",firstName:"CQU", lastName:"User",state:"QLD",phoneNumber:"0422919919", address:"700 Yamba Road", postcode:"4701"}

When the app is started, the user sees the Login page (Fig 1.a), which is the first jQuery page in the app. In this page, the user can enter their credentials to log into the mobile app.

If the users email id is not registered with the mobile app, then the user has to register with their email account via the Sign up button on the Login page. The Sign up page is not included in the partially implemented source code.

After successfully logging in with a valid username and a password, the user moves to the Home page (Fig 1b). The Home page contains a link, named Order a gift item that allows the user to order a gift item.

Clicking on the Order a gift item link from the Home page takes the user to the Select page (Fig 2a), where the user can choose an item from a list of items.

(a) (b) (c)

Fig 2. The Gift Delivery app: (a) Select page, (b) Fill Order page, and (c) Confirm page

Clicking on any of these items will take the user to the Fill Order page (Fig 1b), where user can fill the order details.

After completing all details, the user would need to press the Confirm button to complete the order.

Once an order is completed, the Confirm page (Fig 2c) shows the details of the current order.

The Gift Delivery app has a few limitations:

Multiple gift items not allowed: A user cannot select multiple gift items while placing an order for delivery.

Using backward button of the browser: If another user has visited this app recently using the current browser, a new user can visit the pages that were visited by the former user using the browsers backward button without needing to login.

For this assignment, you are required to complete several development and documentation tasks, described as follows.

Development Tasks to Completed

Task 1: Updated Home page

Add two more links to the Home page. The links should be named, See past orders, and User profile. The updated Home page should look like this (Fig 3).

Fig 3. The Gift Delivery app: Updated Home page

Clicking on the See past orders link should take you to the Order List page, where you should see all past orders.

Clicking on the User profile link should take you to the User page, where you should see the details of the currently logged user account.

Each of the See past orders and User profile links must contain an image.

Task 2: Sign up page

Create a Sign up page to register new user accounts. The page should be accessed through the Sign up button at the bottom of the Login page. The Sign up page should look like this (Fig 4).

Fig 4. The Gift Delivery app: User Sign up page

In the Sign up page, the user will provide their email id, password, name and contact details. Once the user clicks on the Submit button after completing all the details, the user will be registered with the app. The email id and password of the newly created user could then be used to log onto the app. You must implement validation rules for the input fields in the Sign up form.

The partially completed app creates a default user account and saves details in the localStorage item, "localStorage.allUsers". Whenever a new user signs up through the Sign up page, it should be added to the "localStorage.allUsers" item.

Task 3: Order List page

Create the Order List page (as mentioned in Task 1) to show the list of all past orders made by the users. The page should be accessed through the See past orders link in the Home page. The page should look like this (Fig 5).

Fig 5. The Gift Delivery app: Order List page

The partially completed app saves details of the current order into the local storage item "localStorage.orderInfo". Apart from that, you should append all orders into another local storage item, "localStorage.allOrders". To display all past orders, your JavaScript code should retrieve information from the local storage item, "localStorage.allOrders" and populate the Order List page with that information.

Task 4: User page

Create the User page (as mentioned in Task 1) to show the profile of the currently logged in user account. The page should be accessed through the User profile link in the Home page. The page should look like this (Fig 6).

Fig 6. The Gift Delivery app: User page

The information about the currently logged in user is stored in the local storage item, "localStorage.userInfo". Read this information from the local storage item and populate the User page with the information.

Documentation tasks to be completed

You are also required to prepare a Word document for this assignment. Your document should include an appropriate title page. Your document should detail:

Explanation of your implemented JavaScript code

User acceptance testing. Provide screenshots of testing and comments. Features you successfully implemented and those you were unable to successfully implement.

You should describe the problem in a few sentences and also briefly describe anything you attempted to do to get it to work.

Your approach to identifying and attempting to fix these bugs may gain you some partial credit for those features you were unable to implement.

Submission

You are required to submit your assignment electronically via the Moodle unit website. The deliverable is a compressed gzip, rar or zip file containing all your assessment work.

Required:

A folder containing all the files, subfolders and images required to test your application.

A Word document.

Please note that you should use your student number as the name for your gzip, rar or zip file when uploading to Moodle so that all students work can be linked back to the author.

Submission of the partially completed Gift Delivery app as it is will result in zero marks in the assignment.

Assessment Criteria Assignment 1

Name ID Note: Please read this is conjunction with finer detail in Specification

Mark Given Mark Brief Comments

Client App

Updated Home page The page contains three links including Order a gift item.

Each link contains an image and a text description.

Clicking on each link takes the user to the correct jQuery page.

1

1

1 Sign up page The form contains eight input fields.

Input validation is performed and proper error message is displayed.

Form data is processed after the Submit button is clicked.

Pressing the Clear button clears data in the form.

Information about the new user is added to the allUsers local storage item.

Switches to the Home page after signing up is complete. 2

1

1

1

1

1

Order List page

Copies all past order information from the allOrders local storage item into an object array.

The page shows information about all past orders correctly.

Switches to the Home page after the Done button is clicked. 1

2

1

User page

Copies information about the currently logged in user from the userInfo local storage item into an object.

Displays user information correctly on the page. 1

1

Report

User acceptance testing Provided screenshots of testing as well as comments. 2

Implemented

features Features correctly implemented

Features not correctly implemented

1

1 Penalties Total

30 General Marker Comments

Markers Signature/NameDate: