Recent Question/Assignment

Assignment 2 — Mobile client/server application
Due date: 11:45 pm AEST, Friday Week 10 ASSIGNMENT
Weighting: 30%
Length: Less than 50 MB 2

Objectives
This assessment item relates to the learning outcome 1, 2, 3 and 4. More specifically to design and implement a complex mobile application.
The objectives of this assignment:
• Client - Develop, test and maintain a mobile internet application using an integrated suite of mobile software development tools. More specifically on the client-side jQuery, jQuery Mobile, JavaScript, HTML5, and CSS.
• Server - Develop, test and maintain an Express Web Server and API using JavaScript and node with various node packages. Data is stored locally on the mobile device and in the cloud - (MongoDB). The API facilitates access to a MongoDB Atlas cloud service for online storage and retrieval using node express middleware.
• Deploy /Develop - Cordova Platform
o access to native hardware
o access to platforms (Browser, Android etc)
o project structure allowing deployment as a Hybrid App to mobile devices (i.e. Android smartphone).
o plugins
Introduction
This app, whilst building of previous concepts, is a separate project.
You are assigned the task of creating a “Barcode Reader App”.
Overview:
1. Create a file “barcodes.png’ containing 6 product barcodes.
2. Data structure for each product barcode as outlined herein
3. Client
a. Set up a JQueryMobile SPA (Single Page Application) with LOCAL supporting files (no CDN References)
b. Implement a menu system
c. Create a Cordova File structure and install your files there
d. Implement the Barcode Reader as a Cordova Plugin
e. Barcode data is saved (persistent and non-persistent)
i. “Save to Cloud” action - removes all local data and saves to MongoDB Cloud database – Advice to client giving choice – continue or not
f. “Display Cloud Data” action – retrieves cumulative Cloud data and displays in appropriate jQuery Mobile UI structure – This is the extent of this function.
g. Menu Option (Delete Local Data/Delete Cloud Data)
4. Server
a. Create a node/Express web server – apiServer.js
b. Establish required middleware
c. Establish MongoDB account and connect
d. Create appropriate API route points to enable the Client functions
This app is to be tested using the Safari, FireFox and Chrome browsers and tested on Android or iPhone mobile devices.
Client Side JQueryMobile SPA Mobile Application
You are to implement this app using HTML5, CSS, jQuery and JQueryMobile. You must use these technologies exclusively.
Images for the page/views required to implement the assignment are given in the following figures.
Design and styling choices may be made by the student in accordance with the requirements herein and best practice whilst maintaining the required functionality and utility.
Basic Schematic

General Overview [Using development tools outlined above]
UI
Moto G5 (Android Hybrid App) Firefox (Browser – Development Platform) Edge Browser


Samsung Galaxy Emulator
(Android Hybrid App) Firefox (Browser – Development Platform) Firefox Browser

Wider View


1. Client
Home Page

1. Title
2. 4 Buttons
3. Background Imagery
4. Admin Menu
Admin menu
• Top 2 items are self-describing
• Showing Menu Item (Admin) in the Actual Menu not necessary

Scan

QR Code

1. Open Scanner
2. Reads your QR Code
3. Saves Data (non- persistent and persistent)
4. Message to User
5. Returns to home
6. At least 6 data items (one an image)
Note: We are storing the data as an Array of Objects. The image reference is just the name of the image (file name) and is used to generate the img tag on render

Display Local Data

1. Reads Data
2. Display Data in a Responsive manner
• jQueryMobile provides many ways for you to do this.
3. Home button
Note: We are reading from the non-persistant data source – a local array
Upload to Cloud

• Offers jQueryMobile Custom Dialog
• Decline
• No Action
• Home
• Confirm
• Delete all local data (message)
• Display return message from API
• Home
Note: Alarms are ok for most responses.
Confirm:
1. We send ALL of the local data as JSON to the API server ( approptiate end point )
2. The API sends an approriate request to Mongo Atlas
3. Mongo saves the data to the cloud and replies to the API
4. We show the client a useful mesage
5. Clear all local data
Display Cloud Data

1. Response Status Message
2. Change to display cloud data page with dynamically injected data
3. Display Data in a Responsive manner
• jQueryMobile provides many ways for you to do this.
4. Navigation up to client
5. Home Button

2. Server
Express/Node

The Server provides the API services between the Client and Mongo Atlas required to upload the data and retrieve the data.
When running the apiServer should show meaningfull messages.

3. Development Environment
MS Code

Command Shell & Text Editor


Android Studio


Required Documentation

You are also to prepare a Word document. Your document should include an appropriate title page. Your document should have sections that address the items below.
Application Commentary
Instructions and Testing
Your document should detail:
• Instructions on how to run your app – make this clear so someone who does not understand this material can at least run your app.
• Testing – Images, process (what formal type of testing are you using), target platforms and general reflections
Application Review
Your document should:
• List the 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.
Research (1000 words ± 5%)
Report: Discuss current trends in Web Development and your thoughts on future directions with emphasis on our Unit work. Look at the components we have used and discuss relevance and utility. What do you think will be the “next big thing”?
Some sources will be provided in the sessions on Moodle; however, your own research will be required.
Referencing:
Please use this – is NOT the standard Harvard Reference
The Abridged Harvard Referencing Style Guide 2020 based on Style manual for authors, editors and printers (Commonwealth of Australia, 2002).
https://sportal.cqu.edu.au/__data/assets/pdf_file/0018/107433/Harvard-Guide-2020.pdf

Submission
You are required to submit your assignment electronically via the Moodle course website.
The deliverable is a compressed file containing all your assessment work.
Required:
• A folder containing all the files, folders and images required to test your application – this will vary in terms of your choice of development environment.
• Your Word document including your 6 QR Codes (table setout – 2 per row)
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.

Assessment 2 – Marksheet
Assessment criteria – Ass2 - COIT20269 Mobile Web Apps
Student Name
Student Number
Mark Given Mark/Brief Comments
Client App
jQuery Mobile SPA • Correct Framework
• Correct support files – local implementation
2
General Functionality
HTML - UI
• Design - Items are appropriately formatted
• Navigation – as required
JavaScript - Functionality
• Events correctly handled
• Uses jQuery Mobile Plugins – Bar Code Reader
• Button Actions function to support Specification requirements
1
2

Cordova Framework • Correctly implemented
• Application runs in Android Studio / CLI
• Deploys to both emulator and smart device 3
Bar Code Reader • Functions as required
• QRCodes supplied
• Data Structures correct
• Stores in local memory and localStorage
4
Save to Cloud • Functions correctly
• Appropriate messages to user 2
Display Cloud Data • Functions correctly
• Appropriate messages to user 2
Server
Node/Express web server • Web Server setup correctly
o Includes
o Middleware
o Routes
• Connects with online database
• Appropriate/ functioning API 3
1
3
Commentary

Instructions and Testing
1
Application
1
Research 4
General
• Use appropriate naming conventions
• Adequate commenting
• Correct grammar
• Appropriate Title Page
• Citation of references, copyright use
1
See Document for comments
Penalties
Total
30
Marker Comments
Markers Signature Date:

Looking for answers ?