Build a mobile web app prototype with jQuery and jQuery Mobile - Assignment 1

Assignment 1

Due Date:

Softcopy: 9th February, 2020, Sunday, at 11:59PM.

Hardcopy and Demo: The first day your class takes place after the softcopy is due. Check the course Calendar in eConestoga under Content->Course Information->Schedule Summary.

Topic:

Build a mobile web app prototype with jQuery and jQuery Mobile. This prototype will be utilized in the subsequent assignments. Assignment 2 and 3 will be built on top of Assignment1. You must complete assignment 1 before proceeding any other future assignments.

Before you begin:

·         You must know how to search and use the online jQuery Mobile Docs to enhance your mobile app.

·         Make yourself familiarize with the hands on examples done in the lab during class time.

·         Make sure you see the screenshots in color, as you will be required to match the color themes used.

·         The assignment specification and screenshots are made assuming a student’s name Jason Bourne (and initial is JB). Replace Jason Bourne with your full name, JB with your own initial. Also replace xx with your own initials.

·         Make sure to fulfill all programming and assignment standards. The Standards Summary is available at eConestoga.

·         All id attributes must have your initial (e.g., jb for Jason Bourne) as prefix.

Problem Specification:

Task 1: Application icon

·         Create your own app icon (xx-icon.png, where xx is your initials).

·         Please do not choose the same icon used in the screenshot below.

·         Check http://www.iconarchive.com to get your free icon.

Task 2: Create your mobile app project

·         Project/ Folder name: xxFeedbackA1, where xx is your initials

·         Add the required library files. The required library files for jQuery and jQuery mobile are available at

eConestoga->Table of Content->Resources->_lib.

Task 3: Build your prototype

·         Create an html file, if viewed on a browser will match the screen shots provided.

·         Name the file as index.html. NO need to add prefix in the name of this file.

·         The html file will contain 5 pages.

·         For each page add 3 sections: header, content, and footer

·         Header and footer section is fixed; they will always be in sight when scrolling a lengthy page.

·         For each header section, the title must match the current action (e.g., List of Reviews is displayed when the Reviews tab is selected)

·         For navigation bar tab selection must persist and change the color showing the tab is currently selected.

·         Match the color themes as screenshot. Unselected: White, Selected: Blue

·         Special(Phone/Email/External Link): White

·         Prefix the id attribute of page, listview and input elements with your initials (e.g., xxHomePage)ask 4: Home Page

·         Set the template data to match the design layout including the title and header (XX Feedback A1) similar to the screenshots below.

·         Use your xx-icon.png to display the image. Use your own Student Name instead of Jason Bourne and your own initial instead of JB and xx.

·         The 3 buttons at the bottom are links. Use anchor tag and make them look like buttons.

 

 


Task 5: Add Feedback Page

·         Set the page’s Id to xxAddFeedbackPage, where xx is your initials.

·         Add the template data to match the design layout including the header (Add a Feedback) similar to the screenshot shown below.

·         Assign a form id that it unique (i.e., xxAddForm)

·         Business name and email are text input fields

·         Comments is a textarea input field.

·         Rating is a numeric input field

·         Save button is a “Button” not an <a>

·         All input controls (textbox, buttons, textarea etc.) must have proper id and name with your initial as prefix.

·         No form validation is needed, save button does not do anything in this assignment.

 

Task 6: List of Reviews Page

·         Set the page’s id to xxViewFeedbackPage, where xx is your initials.

·         Add the template data to match the design layout including the header (List of Reviews) similar to the screenshot shown below.

·         Provide your own sample realistic data. Do not use My Coffee Shop and My Burger Shop as your template data.

·         Assign listview id that it unique (i.e., xxFeedbackList)

·         Both items have a link to the same xxEditFeedbackPage (next task).

·         This is just a prototype. The two items have static data. In future assignment you will require to provide dynamic data.

 

 

Task 7: Modify Feedback Page

·         Set the page’s id to xxEditFeedbackPage.

·         Add the template data to match the design layout including the header (Modify Feedback) similar to the screenshot shown below.

·         Match the default data to the first item of Task 6 (your own sample data).

·         This page is similar to the xxAddFeedbackPage except for the header and buttons (Cancel, Delete, Update) and some static values in the input fields.

·         Give ids and names for all input controls (textbox, buttons etc.) with your initial as prefix.

·         Cancel, Delete, Upate are “Buttons”, not <a>

·         This is a prototype. The buttons do not need to work.

 

Task 8: Settings Page

·         Set the page’s id to xxSettingsPage.

·         Add the template data to match the design layout including the header (Settings) similar to the screenshot below.

·         All input controls will have your initial as prefix for id and names.

·         The buttons (not <a>) in this page do not need to work.

 

 

Task 9: Test your app

·         Go to Developer Tool of chrome. Click toggle device toolbar icon located on the upper left side of the Developer Tool window. Choose Pixel 2 as your device screen.

·         Take screenshot of all the 5 pages.

·         Save your screenshots to xxA1Screenshots.doc file.

Task 10: Upload app

·         Make a zip file xxAssignment1.zip that will contain

o   Complete project for your app

o   xxA1Screenshot.doc file.

o   After unzipping, I should be able to run your application without any modification.

·         Login to eConestoga and upload to the dropbox: Assignment 1.

·         For late submission: marks will be deducted per day as specified on the cover page.

Task 11: Demo your app

·         Demo your app during class time. Check course calendar available at eConestoga under Course Information->Calendar for the demo dates.

·         Bring your hard copy during the demo containing:

o   Assignment coversheet and marking sheet

o   Printout of HTML File

o   Printout of xxA1Screenshot.doc containing all screenshots

o   Assignment 1 marking sheet (The last page of this document)

·         If you choose not to demo at all, you may drop the hardcopy of your assignment at 2A603; in this case marks will be deducted, see the marking sheet for details. However, if you don’t submit the hardcopy, marks will not be uploaded.

Marking Sheet

 

 

Description

Marks Allocated

Marks Achieved

1

Home Page designed as specified

15

 

2

Add a Feedback page is designed as specified

20

 

3

List of Reviews page is designed as specified

15

 

4

Modify Feedback page is designed as specified

15

 

5

Settings page is designed as specified

10

 

6

Every page has 3 main sections.

10

 

7

Header and footer are fixed.

5

 

8

5 Screenshots

10

 

Deduction

 

Assignment Standard

5 x ________

 

 

id attribute is missing for any input control

3 x ________

 

 

name attribute is missing for any input control

3 x ________

 

 

Id, name not prefixed with initial

2 x ________

 

 

Programming Standard

1 x ________

 

 

Bug

3-10 based on severity

 

 

Late

­­_________days

 

 

No Demo

40

 

 

No hardcopy

100

 

Total

 

 

 

 

Answer Preview
This is only a preview of the solution. Please use the purchase button to see the entire solution