Assignment 1 Mobile client application

Weighting : 20%
Length : Less than 50 MB

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 experimental data in a mobile application that stores data in a local database. The app has fields to record scientific data for each of five species of chicken.If a chicken species is selected, a page is shown to record data values for that species. A chicken entry consists of a date and log data. When the Save Log Entry button is pressed these values are saved locally in the devices' localStorage. When the Show Log Entries button is pressed a related page is shown that lists all the date/time, location and chicken entries. More details of these pages will be given in the sections below.

We will refer to our app as ChickenLogs. 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 also 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 JQueryMobile. The app is used by a chicken farmer who the five varieties of chicken on his farms. A number of individual chickens exist for each species and an ID number is used to identify these. For each individual chicken the farmer wishes to record data that can be used to determine how well that chicken 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 Foghorn, Little, Tweety, Hawk and Bertha buttons should link to pages in a JQueryMobile 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.

Chicken data entry view

The pages for entering the chicken 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 chicken variety we clicked on the home page. The view shown is for the Foghorn variety

The header has titles from the variety sequence {Foghorn, Little, Tweety, Hawk, Bertha} 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 {Foghorn, Little,Tweety, Hawk, Bertha}. 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 chicken page has text entry fields with labels, ID: Weight (g): , Eggs laid:, Grain eaten (g): and a drop down Condition field (“”, “Poor”, “Average”, “Good”). Each text entry field initially has the hint shown as indicated in Fig. 2 and are all number entry fields.

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 chicken. If any of the data values are out of range or nothing is in a text entry then an alert should be shown to indicate the problem, as in Fig. 3 for the id.

A second dialog must also be shown when there were problems saving the log (Fig. 4a), alternatively a success dialog will be shown (Fig 4b). Any number of log entries can be made to a chicken variety in this manner.

Chicken logs view

When the Show logs button in the chicken's data entry page header is pressed, the current date/time and location should be added to the data structure used to store the chicken data values being recorded. Pressing this button also triggers a request for the location (latitude/longitude) to be added to the chicken data. The log entries should then be saved in the device's localStorage. A chickens logs page is then shown with all the saved logs for the variety listed, as shown in Fig. 5a. Fig. 5b shows the display when more than 1 entry has been saved.

Send button

The Send button on the chicken logs header bar is used to send the data over the WWW and clear the particular chicken varieties logs. This will be done in the second assignment. In this assignment this is used to clear all this chicken variety data in the localStorage, and thus clear the existing chicken variety logs. As this deletes data you must present a dialog box to the user with the choice to either send the logs or not, as shown in Fig. 6

If the Yes button is pressed the Send logs dialog shown in Fig. 7 is presented and we return the chickens view shown in Fig. 2. If the No button is pressed we just return to the chicken view page shown 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 bugsmay 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 thisWebsite. 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 zipped directory containing all the code and resources needed for testing. You must tar, rar or zip(preferred) together:- The directory containing all the files, folders, images required to test your mobile application Your Word document

The resulting file should be submitted on the course website. Please note that you should use your student number as the name for the file when uploading to Moodle so that all students work can be linked back to the author.

To Continue Click Here > Assignment 1 Mobile client application.pdf