Implement the client for app using html5

Assignment Help Web Project
Reference no: EM131073442

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?

Reference no: EM131073442

Questions Cloud

Quantitative risk analysis and prioritization : Qualitative risk analysis is helpful in initial screening and prioritization of risks, but quantitative methods are needed to more rigorously and objectively sort risks. Quantitative risk analysis is used to more accurately determine the potentia..
Determine the force that needs to be applied on the plate : determine the force that needs to be applied on the plate to maintain this motion.
Shared practice-cost-profit-and investment centers : Companies are often organized into departments by functions, such as operations, marketing, sales, corporate headquarters, etc. Typically, each one of these departments is then assigned specific responsibilities and referred to as either a cost ce..
Different cultures before planning work motivation strategy : Why is it necessary to understand the meaning of work in different cultures before planning work motivation strategies? Professional answer please.
Implement the client for app using html5 : Implement the client for app using HTML5, CSS and JQuery Mobile. The website should be based on a multi-page template structure - The Get button is used to search the mongolab mongdb database for all database entries that match the treatment number.
Find the location where the oil velocity is zero : plot the velocity profile and find the location where the oil velocity is zero and
Focus on ideas for current and possible future technologies : Write a 750 word APA formatted paper that focus on your ideas for current and possible future technologies to be used in presentations and on the potential use of Social Media in presentations.
Design the steel framework shown below at minimum cost : Design the steel framework shown below at minimum cost. The cost of each horizontal member in one direction is $20w and in the other direction it's $30d. The cost of a vertical column is $50h. The length units are in meters. The frame must enclose..
Process theories of motivation : Compare and contrast the need theories of motivation to the process theories of motivation. How can these theories be applied in multinational management?

Reviews

Write a Review

Web Project Questions & Answers

  Describe two popular web server software products

Web server configuration depends on the web server software that is used. Describe two popular web server software products and the advantages of each

  Cost estimation in software development projects

Cost Estimation in Software Development Projects

  Discuss the apache web server in regard to cost

Discuss the Apache Web server in regard to cost, functionality, and compatibility. Are there certain implementations were it may not be suitable?

  Create a goal in a google analytics account

Create a goal in a Google Analytics account and An analysis of the impact that the information which is generated in the form of reports will have on the client

  Create and edit web pages in a number of ways

Would another person feel the same way and if not, why not?Post your answer, which should state the recording software used and attach the passages so that others can discuss the contribution

  What would like to web page to do

What would like to web page to do? Who is my audience and What do I want it to look like? How simple do I want it? How complex?

  Develop a word-guessing game

Develop a word-guessing game, like Hangman. The game will have two users, Person A and Person B. While B isn't looking, Person A will input a word up to a specified appropriate maximum length. The word that has been input should contain only lette..

  Provide an expert review of the wet and wild sydney web site

You have been asked to provide an expert review of the Wet and Wild, Sydney web site https://wetnwildsydney.com.au/#/. You are to make specific reference to the use of Navigational features.

  System development life cycle

As part of your job, you must complete a 10-to-15 page paper that follows this project through the system development life cycle (SDLC). This assignment will require you to do the following: Discuss what it will take to build a Web architecture, mo..

  Create a small web site that cover html css js and php

You are required to create a small Web site. You have to choose the project idea and work in it as individual or with a group. The website must cover all aspects in the course (HTML, CSS, JS and PHP or JSP/Servlet).

  Explains how to use active content in apache web servers

Explains how to use active content in Apache Web servers - installing Apache on Fedora, installing Apache in Windows Server 2008, and adding IIS to Windows Server 2008 as a role.

  Write a program for fetching the content

Write a program for fetching the content of a web url and storing it into a file and most important thing write its j-unit test cases maximum 3 cases

Free Assignment Quote

Assured A++ Grade

Get guaranteed satisfaction & time on delivery in every assignment order you paid with us! We ensure premium quality solution document along with free turntin report!

All rights reserved! Copyrights ©2019-2020 ExpertsMind IT Educational Pvt Ltd