The objective of this assignment is to:
ou 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.
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 JQuery- mobile 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: see image.
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: see image.
Fig 3. Sample dialogs. see image.
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 device's 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.
Fig. 4: City logs page: see image.
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. see image.
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. see image.
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.
Your document should:
Your document should: