Assignment 1 — Mobile client application
Due date: 11:50 pm AEST, Friday Week 6 ASSIGNMENT
Weighting: 20%
Length: Less than 50 MB 1
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 objective of this assignment is for students to:
• Develop, test and maintain a mobile internet application using an integrated suite of mobile software development tools. More specifically on the client side jQuery Mobile, JavaScript and HTML5 and CSS are used. On the server side we use JavaScript and the node server with various node packages. The Mongo database is used as a data store and that data is also stored locally on the mobile device.
Introduction
You are assigned the task of creating a data logger to capture package location data in a mobile application that stores the data in a local database. The app has fields to record data for each of five cities were the app is employed. If a city is selected, a page (fragment) is shown to record data values for that city. An entry consists of city data. When the Save Log Entry button is pressed this data is saved locally in the application in a SQLDatabase. When the Show Log Entries button is pressed a related page (fragment) is shown that list all the date/time and data entries made for that city.
We will refer to our app as CityLogs. More details of these pages will be given in the sections below. You should also consult the weekly lecture/tutorials on the Moodle website for help and more information on completing the assignment. The tutorials contain step-by-step procedures for working through the assignment as well as some tips and extra help. Please read the lecture/tutorials on the Moodle website.
The specification of this app will be further refined in Assignment 2.
This app is to be tested using the Safari, FireFox or Chrome browser and tested on an Android or iPhone mobile device.
Client Side HTML / CSS / JavaScript Mobile Application
You are to implement this app using HTML5, CSS and JQuery Mobile. The app is used by a parcel delivery company to record city logs for five cities the company operates in. A number of cities exist and an ID number is used to identify these. For each individual city records are kept of parcel information.
The app should be based on a multi-page template structure. The client side application home page is shown in Fig. 1. The Perth, Brisbane, Sydney, Melbourne and Adelaide buttons should link to pages in a JQuerymobile multi-page structure.
JQuery-mobile examples of the page/views required to implement the assignment are given in the following figures. Please note that the illustrations are for reference only, and your actual pages will be based on the CSS style-guide in use on your actual mobile device.
Home page view
The home page view is shown in Fig. 1. This is the opening page for the app. A user clicks on a page link and is transferred to that page.
Fig 1: Home page view
Package details view
The pages for entering the package data are all the same so it makes sense to use one html page to show the basic structure and then use Javascript to customise parts of the page, based on what vehicle type we clicked on the home page. The view shown is for the Cities type.
The header has text from the vehicle types {Perth, Brisbane, Sydney, Melbourne, Adelaide} based on what button was pressed on the Home page. Note that this is the only part of the page that differs between the vehicle types.
It also has a Clear and Show logs buttons visible in the header bar. The Clear button will clear the values in all the text entry fields on the page and reset the time buttons to their initial state.
The footer has 3 buttons. The Next button will take you to the next element in the sequence { Perth, Brisbane, Sydney, Melbourne, Adelaide}. The Previous button will take you to the previous element. The Home button will take you back to the home page.
The content of a city page has a time button and two text entry fields with labels, Contact: and Invoice #:, and a drop down list for selectingthe package destination as shown in Fig. 2.
When valid data is entered into all the text entry fields the Save log entry button can be pushed to save a log for the city. If any of the data values are null (empty strings) then an alert should be shown to indicate the problem, as in Fig. 3.
Fig 2: City packages page view
Fig 3. Sample dialogs.
Dialogs must also be shown when there were problems saving the log (Fig. 3), alternatively a success dialog should be shown (Fig. 3).
Any number of log entries of a particular city can be made in this manner. Thus the app will build a list of saved items for each city.
City logs view
Pressing the Show logs button also triggers a request for the location (latitude/longitude) to be added to the city data. The city log entries list should then be saved in the devices localStorage.
The final effect of pressing the Show logs button is that a city logs page is shown with a list used to display all the current city logs for that city, as shown in Fig. 4a. Fig. 4b shows the display when more than 1 entry has been saved.
Pressing the Back button on the footer should take you to the previous page.
(a) (b)
Fig. 4: City logs page.
Send button
The Send button on the city logs header bar is used to send the data over the WWW and clear the particular city logs in the app. This will be done in the second assignment. For now we will use this to clear all this city data for this city in the localStorage. As this deletes data you must present a dialog box to the user with a choice to either send the logs or not, as shown in Fig. 5.
Fig. 5: Send logs confirmation dialog.
If the Yes button is pressed the Send logs dialog shown in Fig. 6 is presented and we return to the city data entry page shown in Fig. 2 and if No is pressed we just return to the city view in Fig. 2.
Fig. 7: Logs sent confirmation.
Required Documentation
You are also to prepare a Word document. Your document should include an appropriate title page. Your document should have two sections that address the hardware and software requirements and application commentary given below.
Hardware and Software Requirements
Your document should:
• Create a list of mobile devices targeted for the mobile web app. State what devices you tested the web app on.
Application Commentary
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.
• Include a description of any additional functionality you believe would be useful to add to this app. Explain what these new features are and how they would help to improve the web app.
Submission
You are required to submit your assignment electronically via the Moodle course website. The deliverable is a rar or zipped directory containing all the code and resources needed for testing. You must tar, rar or zip together:
• The directory containing all the files, folders, images required to test your mobile application
• Your Word document
The resulting gzip, rar or zip file should be submitted on the course website. 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 criteria
Lecturer’s Signature Date: