Implement the client for app using html5 css and jquery


Assignment - Mobile client/server application

Introduction

You where 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 data for each of five treatments. If a treatment is selected, a page is shown to add data values for that treatment.

A treatment 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 Logs button is pressed a page is shown that list all the date/time and data entries made for that treatment. On this screen a Send button is used for submitting the data to a web service provider that stores the data in a MongoLab cloud database setup for that purpose. The data is also "logged" on the local PC.

The treatment values are removed from the phone's localStorage after they are successfully uploaded to the MongoLab database. Also on this screen a Get button is used for getting the data from the mongdb you created for this purpose at MongoLab. More details of these pages will be given in the Client and Server Side sections below.

We referred to our app as TreatmentLogs. The specification of this app was given in assignment 1. This specification is further refined below. 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 the client for this app using HTML5, CSS and JQuery Mobile. The website should be based on a multi-page template structure. The client side application home page was shown in assignment 1. The HP 1, HP 2, FO, MZ and Control buttons should link to pages in a JQuery-mobile multi-page structure.

Images for the page/views required to implement the assignment where given in assignment 1 and are refined 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 the same as in assignment 1.

Treatment view

The pages for entering the treatment data are all the same as in assignment 1 and so are not discussed further.

Treatment logs view

When the Show logs button in the treatment's page header is pressed the current date/time should be added to the data structure used to store the four treatment values being recorded, as in assignment 1. The log entries should then be saved in the device's localStorage. Then a treatment logs page is shown with all the locally saved logs listed, as shown in Fig. 1. Note the view now has a Get button on the left of the header bar, and a region for displaying cloud log entries has now been added to the display.

2379_log entries.png

Fig. 1: Treatments logs page.

Send button

When the Send button is tapped all the treatment logs for the treatment are sent to the local server and saved to the cloud mongolab mongdb database set up for this purpose. You should provide a success or failure alert. In the success alert, show the data that has been sent. When a response is received another alert should indicate success or failure. When a treatment's logs have been sent the treatment's local logs should be cleared from localStorage so that the treatment's page will not show any local logs.

If the Yes button is pressed the Send logs dialog shown in Fig. 2 is presented and we return the treatments view shown in Fig. 1. If the No button is pressed we just return to the treatment view page shown in Fig. 1.

Get button

194_logs.jpg

Fig. 8: Logs sent confirmation.

The Get button is used to search the mongolab mongdb database for all database entries that match the treatment number (FO in the figure). If successful these entries are to be shown below the Cloud log entries: label as shown in the figure 1. Again appropriate alerts need to be made when the request is sent and when a response is received.

Server Side: node+packages and JavaScript
Our user data scheme has the following fields:

-ID- user ID (always 9999)

- treatment - one of {HP1, HP2, FO, MZ, CONTROL}

- date -date and time stamp of log

- conductivity - measured conductivity of soil

- moisture - measured moisture of soil

- pH - measured pH of water

- dissolvedOxygen - measured dissolved oxygen in water in ppm

This data is to be stored in the mongolab mongdb database in a treatment_logs collection. Entries are also to be echoed (written) to a file in the ./logs directory of the local server in a file called logs.dat.

The server will have the following URL that provides requested services. The URL is based on https://your.IP.address/treatment/user/. A security feature has been added to trial a username based on an ID. For the purposes of this assignment the value of ID is set to '9999'. Only if this key is present should Get or Send requests be accepted by the server. Hence the base URL will be https://your.IP.address/treatment/user/9999.

Your web service API will support these actions:

search/:query- searches for users in the mongoLabs database and returns all logs with that :query value, where :query will be the treatment {HP1, HP2, FO, MZ or CONTROL} to search for.

:treatment/log - appends a treatment entry to the local server file ./logs/logs.dat and to the mongoLabs treatment_log mongdb databases logs collection.

933_logs1.jpg

The above diagram shows the message streams in the application. Ideally the mobile device POST's requests to the WWW and receives responses from the WWW. The node server listens for requests on a port. The requests data will be routed to the local mongdb database at mongoLabs. Requests for the information in the mongdb database would be returned to the node server for POST'ing back to the mobile device. The server should produce meaningful output each time a request is received or sent.

Your treatments node server code will consist of a number of files; server.js will contain your business logic, common.js and config.js contains common utility functions and network configuration information. The server.js file will use express middleware to create a server and router to route the web service API to the handler code that writes the JASON data to your mongdb mongoLabs database, and returns data from this database to the mobile device. A sample of the kind of responses the server should produce is given in the figure below.

921_figure.jpg

Required Documentation

You are also to prepare a Word document. Your word document should include an appropriate title page. Your word document should have sections that address the commentary, hardware and software requirements and financial analysis given below

Plan for a Testing Strategy for your Mobile Web Site
Your document should:
- Review the list of mobile devices, browsers and networks targeted for the mobile web site.
- Discuss the selection of mobile browser models, mobile OS's and device manufacturers for your testing process
- Discuss whether testing is required on actual devices and what part emulators/simulators and desktop browsers can play in this process

Financial Case & Commentary of Application Features

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.

- A description of any additional functionality you believe would be useful to add to this Website should be included. Explain what the features are and how they would help to improve the Website.

- Are there any ethical considerations in making this kind of service available?

- Discuss the economic/financial case for the proposed system.
Assume this simple exercise leads you to consider developing a fully-fledged treatmentLogs application (that is generalised to handle any kind of log data) with increased functionality. Assume you model 3 cases; one with 100 users, one with 10,000 users and one with 100,000 users.

- Assume staff development time is costed at $100/hour. Given how long it has taken you to develop this exercise what do you estimate technical development costs to be in hours? What are the development costs for the 3 models, assuming development time increase by 50% for each of the scenarios?

- Database storage costs. If you use the mongdb mongoLabs service to store treatmentLogs entries, how much would this cost for your proposed user base, assuming 10 entries per month per employee?

- When do you estimate you break even (costs=revenue) in the 3 scenarios?

Request for Solution File

Ask an Expert for Answer!!
: Implement the client for app using html5 css and jquery
Reference No:- TGS01419240

Expected delivery within 24 Hours