AJAX/JSON代写、代做Java程序语言、代写Java、代做Web Services-代写Java编程

联系方式

QQ：99515681
邮箱：99515681@qq.com
工作时间：8:00-21:00
微信：codinghelp

您当前位置：首页 >> Java编程Java编程

AJAX/JSON代写、代做Java程序语言、代写Java、代做Web Services

日期：2019-11-07 09:41

Homework 8: Ajax, JSON, Responsive Design and Node.js

Weather Search

(AJAX/JSON/HTML5/Bootstrap/Angular/Node.js/Cloud Exercise)

1. Objectives

• Get familiar with the AJAX and JSON technologies.

• Use a combination of HTML5, Bootstrap, and Angular on client side.

• Learn to use JavaScript / Node.js on server side.

• Get familiar with Bootstrap to enhance the user experience using responsive design.

• Get hands-on experience of Amazon Web Services/Google Cloud App Engine/Microsoft

Azure.

• Learn to use APIs such as Forecast.io API, Google Customized Search API and Twitter

API.

2. Background

2.1 AJAX and JSON

AJAX (Asynchronous JavaScript + XML) incorporates several technologies:

• Standards-based presentation using XHTML and CSS;

• Result display and interaction using the Document Object Model (DOM);

• Data interchange and manipulation using XML and JSON;

• Asynchronous data retrieval using XMLHttpRequest;

• JavaScript binding everything together.

See the class slides at https://csci571.com/slides/ajax.pdf

JSON, short for JavaScript Object Notation, is a lightweight data interchange format. Its main

application is in AJAX web application programming, where it serves as an alternative to the use

of the XML format for data exchange between client and server. See the class slides at:

https://csci571.com/slides/JSON1.pdf

2.2 Bootstrap

Bootstrap is a free collection of tools for creating responsive websites and web applications. It

contains HTML and CSS-based design templates for typography, forms, buttons, navigation and

other interface components, as well as optional JavaScript extensions. To learn more details about

Bootstrap please refer to the lecture material on Responsive Web Design (RWD). Please use

Bootstrap 4 in this homework. See the class slides at:

https://csci571.com/slides/Responsive.pdf

2.3 Amazon Web Services (AWS)

AWS is Amazon’s implementation of cloud computing. Included in AWS is Amazon Elastic

Compute Cloud (EC2), which delivers scalable, pay-as-you-go compute capacity in the cloud,

and AWS Elastic Beanstalk, an even easier way to quickly deploy and manage applications in

the AWS cloud. You simply upload your application, and Elastic Beanstalk automatically

handles the deployment details of capacity provisioning, load balancing, auto-scaling, and

application health monitoring. Elastic Beanstalk is built using familiar software stacks such as

the Apache HTTP Server, PHP, and Python, Passenger for Ruby, IIS for .NET, and Apache

Tomcat for Java.

To learn more about AWS support for Node.js visit this page:

https://aws.amazon.com/getting-started/projects/deploy-nodejs-web-app/

2.4 Google App Engine (GAE)

Google App Engine applications are easy to create, easy to maintain, and easy to scale as your

traffic and data storage needs change. With App Engine, there are no servers to maintain. You

simply upload your application and it’s ready to go. App Engine applications automatically scale

based on incoming traffic. Load balancing, micro services, authorization, SQL and noSQL

databases, memcache, traffic splitting, logging, search, versioning, roll out and roll backs, and

security scanning are all supported natively and are highly customizable.

To learn more about GAE support for Node.js visit this page:

https://cloud.google.com/appengine/docs/flexible/Node.js/

2.5 Microsoft Azure

Microsoft Azure is a cloud computing service created by Microsoft for building, testing,

deploying, and managing applications and services through a global network of Microsoftmanaged

data centers. It provides software as a service (SaaS), platform as a service (PaaS) and

infrastructure as a service (IaaS) and supports many different programming languages, tools and

frameworks, including both Microsoft-specific and third-party software and systems.

To learn more about Azure support for Node.js visit this page:

https://docs.microsoft.com/en-us/javascript/azure/?view=azure-node-latest

2.6 Angular

Angular is a toolset for building the framework most suited to your application development. It is

fully extensible and works well with other libraries. Every feature can be modified or replaced to

suit your unique development workflow and feature needs. Angular combines declarative

templates, dependency injection, end to end tooling, and integrated best practices to solve

development challenges. Angular empowers developers to build applications that live on the

web, mobile, or the desktop.

For this homework, Angular 2+ (Angular 2,4,5,6 or 7) can be used, but Angular 7 is

recommended. However, please note Angular 2+ will be a little more difficult to learn if the

developer is not familiar with Typescript and component-based programming.

To learn more about Angular 2+, visit this page:

https://angular.io/

Note: AngularJS cannot be used in this project.

2.7 Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an eventdriven,

non-blocking I/O model that makes it lightweight and efficient. Node.js package

ecosystem, npm, is the largest ecosystem of open source libraries in the world.

To learn more about Node.js, visit:

https://Node.js.org/en/

Also, Express.js is strongly recommended. Express.js is a minimal and flexible Node.js web

application framework that provides a robust set of features for web and mobile applications. It is

in fact the standard server framework for Node.js.

To learn more about Express.js, visit:

http://expressjs.com/

Note: In this document when you see GAE/AWS/Azure it means that you can either use Google

App Engine, Amazon Web Services or Microsoft Azure Services.

The only way to implement the client side: Use entirely Angular2+

All APIs calls should be done through your Node.JS server, except call to the ip-api.

3. High Level Description

In this exercise you will create a webpage that allows users to search for weather information using

the Forecast.io API and display the results on the same page below the form.

The user provides the location information such as Street address, City and State for which they

would want to find the detailed weather information or provide their current location.

Once the user has provided the data and clicks on the Search button, validation must be done to

check that the entered data is valid. Once the validation is successful, 3 tabs should be displayed.

The 3 tabs correspond to Current tab, Hourly tab and Weekly tab.

Your webpage should also support adding cities to and removing cities from the Favorites tab and

sharing the weather info with Twitter. All the implementation details and requirements will be

explained in the following sections.

When a user initially opens your webpage, your page should look like Figure 1.

Figure .1 Initial Search Form

3.1 Search Form

3.1.1 Design

You must replicate the search form displayed in Figure 1 using a Bootstrap form. The form

fields are similar to Homework #6.

There are 3 fields in the search form which are required if the Current Location is not

checked:

1. Street: Initially, please show the placeholder shown in the picture.

2. City: This input field should support autocomplete which is explained in section 3.1.2.

Please note that the user does not necessarily chooses what suggested by the

autocomplete. Initially, please show the placeholder shown in the picture.

3. State: There are multiple options for the user to select from which contain all the States

of US.

Figure 2. State Options

The search form has two buttons:

1. Search: The “Search” button should be disabled whenever either of the required fields is

empty or validation fails, or the user location is not obtained yet. Please refer to section

3.1.3 for details of validation. Please refer to section 3.1.4 for details of obtaining user

location.

2. Clear: This button must reset the form fields, clear all validation errors if present, switch

the view to the results tab and clear the results area.

3.1.2 AutoComplete

Autocomplete for Cites is implemented by using the Place Autocomplete service provided by

Google. Please go to this page to learn more about this service:

https://developers.google.com/places/web-service/autocomplete

An example of an HTTP request to the Places Autocomplete API Get Suggestion that searches

for the city textfield “Los” is shown below:

https://maps.googleapis.com/maps/api/place/autocomplete/json?input=LOS&types=(cities)&lan

guage=en&key=[Your_API_Key]

To get the API key in the above URL:

1. Please follow the steps provided in the following link:

https://developers.google.com/places/web-service/get-api-key

Note:

1. Set the type to cities to provide suggestions for cities.

2. Set the language to en for specifying that the language is English.

3. If the API doesn’t work, hide the autocomplete feature. This situation should be

handled and not throw any error.

The response is a JSON object similar to the one shown in Figure 3.

Figure 3. Autocomplete JSON Response

The fields to get the suggested options are highlighted in red in the JSON response above.

For reference: The value is provided by the key main_text in the structured_formatting object in

the predictions array.

You must use Angular Material to implement the Autocomplete. (See section 6.4).

Figure 4. Autocomplete example

Note: Restrict the number of options in the “autocomplete” suggestion to 5.

3.1.3 Validation

Your application should check if the “Street” and “City” edit boxes contain something other than

spaces or blank. If not, then it’s invalid and an error message should be shown as in Figure 5.

If the Current Location checkbox is checked, then the Street, City and the State controls should be

disabled with their values retained.

Please watch the reference video carefully to understand the validation.

Figure 5. An Invalid Form

3.1.4 Obtaining User Location

As in Homework #6, you should obtain the current user location using one of the geolocation

APIs. The usage of this API has been explained in the Homework #6 documents.

http://ip-api.com/json

3.1.5 Search Execution

Once the validation is successful and the user clicks on “Search” button, your application should

make an AJAX call to the Node.js script hosted on GAE/AWS/Azure. The Node.js script on

GAE/AWS/Azure will then make a request to forecast.io API to get the weather information. This

will be explained in the next section.

3.2 Results Tab

The results should be displayed below the form as shown in Figure 6. You are supposed to

display the results in a responsive mode compatible with mobile devices. If the page is loading

on a smart phone or a tablet, the display should be modified according to the width and height of

the devices.

In this section, we outline how to use the form inputs to construct HTTP requests to the Google

geocode API and DarkSky API services and display the result in the webpage.

The Google geocode API call looks like this:

https://maps.googleapis.com/maps/api/geocode/json?address=[STREET, CITY,

STATE]&key=[YOUR_API_KEY]

Note:

1. We use JSON response to get the latitude and longitude from the Google geocode API.

2. Please refer to the Homework 6 documentation to get the Google geocode API key.

Once the latitude and longitude are fetched from the Current Location or the Google geocode

API, it has to be passed to the DarkSky API to fetch the weather details.

The DarkSky API is documented here:

https://darksky.net/dev/docs

The usage of these two APIs has been explained in the Homework #6 documents.

An example of an HTTP request to the DarkSky API that searches for the weather information

from the user’s current location or the location provided by the user is shown below:

https://api.darksky.net/forecast/[key]/[latitude],[longitude]

Note: Important changes in the URL from Homework 6

1. No need to exclude any parameters. Call the API as given above.

The Node.js script should pass the JSON object returned by the API to the client side or parse the

returned JSON and extract useful fields and pass these fields to the client side in JSON format.

You should use TypeScript to parse the JSON object and display the results using 3 tabs. A sample

output is shown in Figure 6. See the tabs on upper left.

The display of the results is divided into 3 tabs, i.e. Current tab, Hourly tab and Weekly tab. The

detailed description of all the tabs is given in the following sections.

3.2.1 Current Tab

This tab is in a card layout which provides the details of the Current weather for that day at the

corresponding location provided by the user.

Figure 6. An Example of a Valid Search result

When the search result contains at least one record, you need to map the data extracted from the

API results to the card layout to render the HTML result as shown in Figure 6.

Figure 7. Card view of Current Weather with Tooltip

On hovering the icons, a tooltip should be displayed for that corresponding icon, please use

Angular Material or bootstrap tooltip to implement this. The style between bootstrap tooltip and

Angular Material tooltip will be a slightly different, but both are fine. (See section 6.3 and 6.4)

The details for the Card are from the corresponding JSON structure:

Figure 8: Sample JSON-formatted object returned from Forecast.io API call for the card layout

Table Column Data from result of Forecast.io API call

City The value of the city can be taken from the input

form if the user provides the address or from ipapi

to get current location.

Timezone The value of the key “timezone”.

Temperature The value of the key “temperature” in the

currently object. You should display the value

with a degree sign and F to indicate temperature

in Fahrenheit. For the degree sign use this image

- https://cdn3.iconfinder.com/data/icons/virtualnotebook/16/button_shape_oval-512.png

Summary The value of “summary” in the currently object.

Humidity The value of “humidity” in the currently object.

It should also be provided with the

corresponding icon -