Assignment - Mobile client application
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 species of cattle. If a cow type is selected, a page is shown to record data values for that type. A cow entry consists of a date and log 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 log entries made for that cow.
We will refer to our app as CowLogs. 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. A number of individual cows exist for each species and an ID number is used to identify these. For each individual cow the farmer wishes to record data that can be used to determine how well that cow performs compared to others.
The app should be based on a multi-page template structure. The client-side application home page is shown in Fig. 1. The Angus, Hereford, Brahman, Shorthorn and Brangus buttons should link to pages in a JQuery-mobile multi-page structure.
Images for 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.
Cow view
The pages for entering the cow 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 cow variety we clicked on the home page. The view shown is for the Angus variety.
The header has titles from the variety sequence {Angus, Hereford, Brahman, Shorthorn, Brangus} based on what button is pressed on the Home page. 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.
The footer has 3 buttons. The Next button will take you to the next element in the sequence { Angus, Hereford, Brahman, Shorthorn, Brangus }. 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 cow page has five text entry fields with labels, ID:, Weight (kg): , Age (whole weeks): and
Condition in Fig. 2 and are all number entry fields except Condition which is a drop down list.
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 cow. If any of the data values are null (empty strings) then an alert should be shown to indicate the problem, as in Fig. 3.
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 cow type can be made in this manner. Thus the app will build a list of saved items for each cow breed.
Cow logs view
Pressing the Show logs button also triggers a request for the location (latitude/longitude) to be added to the cow breed data. The cow log entries list should then be saved in the device's localStorage.
The final effect of pressing the Show logs button is that a cow breed logs page is shown with a list used to display all the current cow breed logs for the breed, 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.
Send button
(a) (b)
The Send button on the cow logs header bar is used to send the data over the WWW and clear the particular cow logs in the app. This will be done in the second assignment. For now we will use this to clear all this cow breed data for this cow 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.
If the Yes button is pressed the Send logs dialog shown in Fig. 6 is presented and we return to the cow breed data entry page shown in Fig. 2 and if No is pressed we just return to the cow breed view in Fig. 2.
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.
Attachment:- Assignment.rar