Homework 8: Ajax, JSON, Responsive Design and Node.jsWeather 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/MicrosoftAzure.• Learn to use APIs such as Forecast.io API, Google Customized Search API and TwitterAPI.2. Background2.1 AJAX and JSONAJAX (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.pdfJSON, short for JavaScript Object Notation, is a lightweight data interchange format. Its mainapplication is in AJAX web application programming, where it serves as an alternative to the useof the XML format for data exchange between client and server. See the class slides at:https://csci571.com/slides/JSON1.pdf2.2 BootstrapBootstrap is a free collection of tools for creating responsive websites and web applications. Itcontains HTML and CSS-based design templates for typography, forms, buttons, navigation andother interface components, as well as optional JavaScript extensions. To learn more details aboutBootstrap please refer to the lecture material on Responsive Web Design (RWD). Please useBootstrap 4 in this homework. See the class slides at:https://csci571.com/slides/Responsive.pdf22.3 Amazon Web Services (AWS)AWS is Amazon’s implementation of cloud computing. Included in AWS is Amazon ElasticCompute 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 inthe AWS cloud. You simply upload your application, and Elastic Beanstalk automaticallyhandles the deployment details of capacity provisioning, load balancing, auto-scaling, andapplication health monitoring. Elastic Beanstalk is built using familiar software stacks such asthe Apache HTTP Server, PHP, and Python, Passenger for Ruby, IIS for .NET, and ApacheTomcat 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 yourtraffic and data storage needs change. With App Engine, there are no servers to maintain. Yousimply upload your application and it’s ready to go. App Engine applications automatically scalebased on incoming traffic. Load balancing, micro services, authorization, SQL and noSQLdatabases, memcache, traffic splitting, logging, search, versioning, roll out and roll backs, andsecurity 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 AzureMicrosoft Azure is a cloud computing service created by Microsoft for building, testing,deploying, and managing applications and services through a global network of Microsoftmanageddata centers. It provides software as a service (SaaS), platform as a service (PaaS) andinfrastructure as a service (IaaS) and supports many different programming languages, tools andframeworks, 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-latest2.6 AngularAngular is a toolset for building the framework most suited to your application development. It isfully extensible and works well with other libraries. Every feature can be modified or replaced tosuit your unique development workflow and feature needs. Angular combines declarativetemplates, dependency injection, end to end tooling, and integrated best practices to solvedevelopment challenges. Angular empowers developers to build applications that live on theweb, mobile, or the desktop.3For this homework, Angular 2+ (Angular 2,4,5,6 or 7) can be used, but Angular 7 isrecommended. However, please note Angular 2+ will be a little more difficult to learn if thedeveloper 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.jsNode.js is a JavaScript runtime built on Chromes V8 JavaScript engine. Node.js uses an eventdriven,non-blocking I/O model that makes it lightweight and efficient. Node.js packageecosystem, 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 webapplication framework that provides a robust set of features for web and mobile applications. It isin 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 GoogleApp 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.43. High Level DescriptionIn this exercise you will create a webpage that allows users to search for weather information usingthe 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 theywould 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 tocheck 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 andsharing the weather info with Twitter. All the implementation details and requirements will beexplained in the following sections.When a user initially opens your webpage, your page should look like Figure 1.Figure .1 Initial Search Form3.1 Search Form3.1.1 DesignYou must replicate the search form displayed in Figure 1 using a Bootstrap form. The formfields are similar to Homework #6.There are 3 fields in the search form which are required if the Current Location is notchecked:51. 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 theautocomplete. 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 Statesof US.Figure 2. State OptionsThe search form has two buttons:1. Search: The “Search” button should be disabled whenever either of the required fields isempty or validation fails, or the user location is not obtained yet. Please refer to section3.1.3 for details of validation. Please refer to section 3.1.4 for details of obtaining userlocation.2. Clear: This button must reset the form fields, clear all validation errors if present, switchthe view to the results tab and clear the results area.3.1.2 AutoCompleteAutocomplete for Cites is implemented by using the Place Autocomplete service provided byGoogle. Please go to this page to learn more about this service:https://developers.google.com/places/web-service/autocomplete6An example of an HTTP request to the Places Autocomplete API Get Suggestion that searchesfor the city textfield “Los” is shown below:https://maps.googleapis.com/maps/api/place/autocomplete/json?input=LOS&types=(cities)&language=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-keyNote: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 behandled and not throw any error.The response is a JSON object similar to the one shown in Figure 3.7Figure 3. Autocomplete JSON ResponseThe 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 inthe predictions array.You must use Angular Material to implement the Autocomplete. (See section 6.4). 8Figure 4. Autocomplete exampleNote: Restrict the number of options in the “autocomplete” suggestion to 5.3.1.3 ValidationYour application should check if the “Street” and “City” edit boxes contain something other thanspaces 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 bedisabled with their values retained.Please watch the reference video carefully to understand the validation.9Figure 5. An Invalid Form3.1.4 Obtaining User LocationAs in Homework #6, you should obtain the current user location using one of the geolocationAPIs. The usage of this API has been explained in the Homework #6 documents.http://ip-api.com/json3.1.5 Search ExecutionOnce the validation is successful and the user clicks on “Search” button, your application shouldmake an AJAX call to the Node.js script hosted on GAE/AWS/Azure. The Node.js script onGAE/AWS/Azure will then make a request to forecast.io API to get the weather information. Thiswill be explained in the next section.3.2 Results TabThe results should be displayed below the form as shown in Figure 6. You are supposed todisplay the results in a responsive mode compatible with mobile devices. If the page is loadingon a smart phone or a tablet, the display should be modified according to the width and height ofthe devices.In this section, we outline how to use the form inputs to construct HTTP requests to the Googlegeocode 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 geocodeAPI, it has to be passed to the DarkSky API to fetch the weather details.The DarkSky API is documented here:https://darksky.net/dev/docsThe 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 informationfrom the user’s current location or the location provided by the user is shown below:https://api.darksky.net/forecast/[key]/[latitude],[longitude]10Note: Important changes in the URL from Homework 61. 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 thereturned 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 sampleoutput 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. Thedetailed description of all the tabs is given in the following sections.3.2.1 Current TabThis tab is in a card layout which provides the details of the Current weather for that day at thecorresponding location provided by the user.Figure 6. An Example of a Valid Search resultWhen the search result contains at least one record, you need to map the data extracted from theAPI results to the card layout to render the HTML result as shown in Figure 6.11Figure 7. Card view of Current Weather with TooltipOn hovering the icons, a tooltip should be displayed for that corresponding icon, please useAngular Material or bootstrap tooltip to implement this. The style between bootstrap tooltip andAngular 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 layout12Table Column Data from result of Forecast.io API callCity The value of the city can be taken from the inputform if the user provides the address or from ipapito get current location.Timezone The value of the key “timezone”.Temperature The value of the key “temperature” in thecurrently object. You should display the valuewith a degree sign and F to indicate temperaturein Fahrenheit. For the degree sign use this image- https://cdn3.iconfinder.com/data/icons/virtualnotebook/16/button_shape_oval-512.pngSummary The value of “summary” in the currently object.Humidity The value of “humidity” in the currently object.It should also be provided with thecorresponding icon -https://cdn2.iconfinder.com/data/icons/weather-74/24/weather-16-512.pngPressure The value of “pressure” in the currently object.It should also be provided with thecorresponding icon -https://cdn2.iconfinder.com/data/icons/weather-74/24/weather-25-512.pngWind Speed The value of “windSpeed” in the currentlyobject. It should also be provided with thecorresponding icon for it -https://cdn2.iconfinder.com/data/icons/weather-74/24/weather-27-512.pngVisibility The value of “visibility” in the currently object.It should also be provided with thecorresponding icon for it -https://cdn2.iconfinder.com/data/icons/weather-74/24/weather-30-512.pngCloudCover The value of “cloudCover” in the currentlyobject. It should also be provided with thecorresponding icon -https://cdn2.iconfinder.com/data/icons/weather-74/24/weather-28-512.png13Ozone The value of “ozone” in the currently object. Itshould also be provided with the correspondingicon for it -https://cdn2.iconfinder.com/data/icons/weather-74/24/weather-24-512.pngTable 1: Mapping the result from DarkSky API into card layoutThe state seal provided in the card is provided by the Google Custom Search API.The Google Custom Search Engine is documented at:https://developers.google.com/custom-search/json-api/v1/overviewTo retrieve a photo of the State Seal, the request needs 6 parameters (output should be JSON):• q: The search expression• cx: The custom search engine ID to use for this request.• imgSize: Returns images of a specified size.• num: Number of search results to return. (Valid values are integers between 1 and 10,inclusive.). Please specify 1.• searcAJAX/JSON代写、代做Java程序语言、代写Java、hType: Specifies the search type: image. If unspecified, results are limited towebpages.• key: Your applications API key. This key identifies your application for purposes ofquota management.An example of an HTTP request to the Google custom search API is shown below:https://www.googleapis.com/customsearch/v1?q=[STATE]%20State%20Seal&cx==[YOUR_SEARCH_ENGINE_ID]&imgSize=huge&imgType=news&num=1&searchType=image&key=[YOUR_API_KEY] 14The JSON response from the Google Custom Search:Figure 8. Google Custom Search API responseWhen the search result contains at least one record, you need to map the data extracted from theAPI results to the seal symbol.State Seal in Card API service responseState Seal You should display 1 photo, which is present in“link” attribute inside the ‘items’ array.Table 2: Mapping the result from Google Custom Search APINote: If any value is 0 or missing in the first card please do not display them.3.2.2 Hourly TabThis tab provides a bar chart for all the parameters of the weather. There are 6 parameters:1. Temperature (Fahrenheit) vs Time (Hourly).2. Pressure (Millibars) vs Time (Hourly).153. Humidity (%) vs Time (Hourly).4. Ozone (Dobson Units) vs Time (Hourly).5. Visibility (Miles) vs Time (Hourly).6. Wind Speed (Miles per hour) vs Time (Hourly).Figure 9 Hourly tab with Temperature vs Time bar chartThere are 6 charts corresponding to the parameter, which is provided by the dropdown menu.Figure 10. Dropdown for the type of Parameters16The hourly details for the chart are provided by the DarkSky API. The following JSON structureprovides the data:Figure 11: A sample JSON response from DarkSky API to get the hourly data. 17Bar Chart Data from result of Forecast.io API callTemperature vs Time The value of the key “temperature” in the dataarray present in the hourly object.Pressure vs Time The value of the key “pressure” in the data arraypresent in the hourly object.Humidity vs Time The value of the key “humidity” in the data arraypresent in the hourly object.Ozone vs Time The value of the key “ozone” in the data arraypresent in the hourly object.Visibility vs Time The value of the key “visibility” in the data arraypresent in the hourly object.Wind Speed vs Time The value of the key “windSpeed” in the dataarray present in the hourly object.Table 3: Mapping the result from DarkSky API to get hourly data for chartsNote: Please take the first 24 values from the data array since it provides hourly data for the next48 hrs.The bar chart should be implemented with the help of Chart.js:1. https://www.chartjs.org/docs/latest/charts/bar.html2. https://medium.com/codingthesmartway-com-blog/angular-chart-js-with-ng2-chartse21c8262777f183.2.3 Weekly TabThis tab provides a range bar chart of the minimum and maximum temperature for the next 7days in the week.Figure 12: The Weekly tab which provides a chart for temperature range for next 7 days in theweek. 19This JSON response provides the necessary weekly data:Figure 13: A sample JSON response from DarkSky API to get the weekly data.Fields in the Chart Corresponding response object fieldstime The value of the “time” attribute that is part of the “data” array in thedaily object.temperatureLow The value of the “temperatureLow” attribute that is part of the “data”array in the daily object.temperatureHigh The value of the “temperatureHigh” attribute that is part of the “data”array in the daily object.Table 4: Mapping the result from DarkSky API for the range bar chart.20On clicking on any one of the range bar chart rows, a corresponding modal window is displayedfor that date. The modal window provides the detailed weather information for that date.Figure 14: Modal providing weather information for that date.The data for the modal is provided by another DarkSky API call:https://api.darksky.net/forecast/[key]/[latitude],[longitude],[time]Note: The time required here is in Unix format.21The JSON response for the modal data is shown below:Figure 15: JSON response from the DarkSky API for a particular date.Fields in the Modal Corresponding response object fieldsDateThe value of the “time” attribute that is part of the “data” array in thedaily object. The time has to be converted into the form dd/mm/yyyy.CityThe value of the city can be taken from the input form if the userprovides the address or from ip-api to get current location.TemperatureThe value of the key “temperature” in the currently object. Youshould display the value with a degree sign and F to indicatetemperature in Fahrenheit. For the degree sign use this image -https://cdn3.iconfinder.com/data/icons/virtualnotebook/16/button_shape_oval-512.pngSummary The value of “summary” in the currently object. 22Icon The value of “icon” in the currently object. It is possibly one of thefollowing values:• clear-day | clear-night: The icon for this ishttps://cdn3.iconfinder.com/data/icons/weather-344/142/sun-512.png• rain: The icon for this ishttps://cdn3.iconfinder.com/data/icons/weather-344/142/rain-512.png• snow: The icon for this ishttps://cdn3.iconfinder.com/data/icons/weather-344/142/snow-512.png• sleet: The icon for this ishttps://cdn3.iconfinder.com/data/icons/weather-344/142/lightning-512.png• wind: The icon for this ishttps://cdn4.iconfinder.com/data/icons/the-weather-is-nicetoday/64/weather_10-512.png• fog: The icon for this ishttps://cdn3.iconfinder.com/data/icons/weather-344/142/cloudy-512.png• cloudy: This icon for this ishttps://cdn3.iconfinder.com/data/icons/weather-344/142/cloud-512.png• partly-cloudy-day | partly-cloudy-night: The icon for this ishttps://cdn3.iconfinder.com/data/icons/weather-344/142/sunny-512.pngPrecipitation The value of “precipIntensity” in the currently object. The value is tobe rounded to 2 decimal places.Chance of Rain The value of “precipProbability” in the currently object. The value isto be multiplied by 100 to give the percentage.Wind Speed The value of “windSpeed” in the currently object. The value should beprovided with the unit “mph”. The value should be rounded to 2decimal placesHumidity The value of “humidity” in the currently object.The value is to be multiplied by 100 to give the percentage.Visibility The value of “visibility” in the currently object. The value should beprovided with the unit miles.Table 5: Mapping the result from DarkSky API for the modal.Note: If any value is 0, display the 0 value. If the key is null/ not present, display N/A.233.2.4 Favorite Button and Twitter ButtonThe Favorite button (star) provides the user the ability to add or remove the city to theirfavorites tab.The Twitter button allows the user to compose a Tweet and post it to Twitter. Once the button isclicked, a new dialog should be opened and display the default Tweet content in this format:“The current temperature at (City) is (Temperature). The weather conditions are (Summary)Website: URL #CSCI571WeatherSearch”.Replace City, Temperature and Summary with the actual city searched with the temperature andsummary or that day. For example, see Figure 16.Figure 16 TweetAdding the Twitter button to your webpage is very easy. You can visit these two pages to learnhow to use Twitter Web Intents:https://dev.twitter.com/web/intentshttps://dev.twitter.com/web/tweet-button/web-intentThe favorites button should be disabled until the content of the event tab and venue tab areavailable.Figure 17 Favorite and Twitter Buttons3.4 Favorite TabIn the Favorites tab, the favorite cities are listed in a table format. The user can search forweather information for that city by clicking on the City name in the “City” column.24The information displayed in the Favorites tab is saved in and loaded from the local storage ofthe browser; the buttons in the “Favorites” column of the Favorites tab is only used to remove acity from the list and has a “trash” icon for it to be removed from the Favorite. (Refer to 5.5 forthe icons).The columns in this tab are:1. Counter: Just a counter value indicating the number of cities in the favorites list.2. Image: The state seal provided by the Google Custom search API.3. City: The favorite city the user put in their favorites list. On clicking it should provide theweather details for that city.4. State: The State abbreviations, which are present in the section 3.8 below and in thestates.txt file. Same as given in HW 6 documentation.Please note if a user closes and re-opens the browser, its Favorites will still be there.If there are no cities in Favorites, please show ‘No Records’. (see Figure 20)Figure 18 Favorites253.5 Error MessagesIf for any reason an error occurs due to location error, an appropriate error message should bedisplayed.Figure 19 Error Message3.6 No RecordsWhenever the search receives no records, an appropriate message should be displayed.Figure 20 No Records on Favorites263.7 Progress BarsWhenever data is being fetched, a dynamic progress bar must be displayed as shown in Figure 23.You can use the progress bar component of Bootstrap to implement this feature. You can findhints about the bootstrap components in the Hints section.Figure 21 Progress Bar3.8 List of US States and Their Two-Letter AbbreviationsTwo-Letter Abbreviation State3.9 Responsive DesignThe following are snapshots of the webpage opened with Safari on iPhone 7 Plus. See the videofor more details.You must watch the video carefully to see how the page looks like on mobile devices. Allfunctions must work on mobile devices.Mobile browsers are different from desktop browsers. Even if your webpage works perfectly ona desktop, it may not work as perfectly as you think on mobile devices. It’s important that youalso test your webpage on a real mobile device. Testing it in the mobile view of a desktopbrowser will not guarantee that it works on mobile devices. You can use Firefox “ResponsiveDesign Mode” Tool for initial testing. 314. API Documentation4.1 DarkSky APITo use the DarkSky API, you need first to register for DarkSky Account. This is the same App idused for the HW6.4.2 Google Customized Search APIThis link will provide the details to get the API key:https://developers.google.com/custom-search/json-api/v1/overviewNote: You can use any additional Angular libraries and Node.js modules you like.5. Implementation Hints5.1 ImagesThe images needed for this homework are available here:http://csci571.com/hw/hw8/Images/Twitter.png5.2 Get started with the Bootstrap LibraryTo get started with the Bootstrap toolkit, please refer to the link:https://getbootstrap.com/docs/4.0/getting-started/introduction/.You need to import the necessary CSS file and JS file provided by Bootstrap.5.3 Bootstrap UI ComponentsBootstrap provides a complete mechanism to make Web pages responsive to different mobiledevices. In this exercise, you will get hands-on experience with responsive design using theBootstrap Grid System.At a minimum, you will need to use Bootstrap Forms, Tabs, Progress Bars and Alerts toimplement the required functionality.Bootstrap Forms https://getbootstrap.com/docs/4.0/components/forms/Bootstrap Tabs https://getbootstrap.com/docs/4.0/components/navs/#tabsBootstrap Progress Bars https://getbootstrap.com/docs/4.0/components/progress/Bootstrap Alerts https://getbootstrap.com/docs/4.0/components/alerts/Bootstrap Tooltip https://getbootstrap.com/docs/4.1/components/tooltips/Bootstrap Cards https://getbootstrap.com/docs/4.0/components/card/5.4 Angular MaterialAngular Material (Angular 2+) :https://material.angular.io/Autocomplete: https://material.angular.io/components/autocomplete/overview32Tooltip: https://material.angular.io/components/tooltip/overview5.5 Material IconIcons for the search, clear_all, star, star_border and delete can be viewed here:https://google.github.io/material-design-icons/https://material.io/tools/icons/5.6 Google App Engine/Amazon Web Services/ Microsoft AzureYou should use the domain name of the GAE/AWS/Azure service you created in Homework #7to make the request. For example, if your GAE/AWS/Azure server domain is calledexample.appspot.com/example.elasticbeanstalk.com/ example.azurewebsites.net, the JavaScriptprogram will perform a GET request with keyword=”xxx”, and an example query of thefollowing type will be generated:GAE - http://example.appspot.com/weatherSearch?keyword=xxxAWS - http://example.elasticbeanstalk.com/weatherSearch?keyword=xxxAzure – http://example.azurewebsites.net/weatherSearch?keyword=xxxYour URLs don’t need to be the same as the ones above. You can use whatever paths andparameters you want. Please note that in addition to the link to your Homework #8, you shouldalso provide a link like this URL in the table of your Node.JS backend link. When your graderclicks on this additional link, a valid link should return a JSON object with appropriate data.5.7 Deploy Node.js application on GAE/AWS/AzureSince Homework #8 is implemented with Node.js on AWS/GAE/Azure, you should selectNginx as your proxy server (if available), which should be the default option.5.8 AJAX callYou should send the request to the Node.js script(s) by calling an Ajax function (Angular). Youmust use a GET method to request the resource since you are required to provide this link to yourhomework list to let graders check whether the Node.js script code is running in the “cloud” onGoogle GAE/AWS/Azure (see 6.6 above). Please refer to the grading guidelines for details.Note: jQuery .ajax cannot be used in this project.5.9 HTML5 Local StorageLocal storage is more secure, and large amounts of data can be stored locally, without affectingwebsite performance. Unlike cookies, the storage limit is far larger (at least 5MB) andinformation is never transferred to the server. There are two methods, getItem() and setItem(),that you can use. The local storage can only store strings. Therefore, you need to convert the datato string format before storing it in the local storage. For more information, see:https://developer.mozilla.org/en-US/docs/Web/API/Window/localStoragehttp://www.w3schools.com/html/html5_webstorage.asp336. Files to SubmitIn your course homework page, you should update the Homework #8 link to refer to your newinitial web page for this exercise. Additionally, you need to provide an additional link to theURL of the GAE/AWS/Azure service where the AJAX call is made with sample parametervalues (i.e. a valid query, with keyword, location, etc. See 6.6).Also, submit all files (HTML, JS, CSS, TS) you have written yourself, electronically to theGitHub Classroom repository so that can be compared to all other students’ code. Don’t includelibrary, node-js modules, any config files, any angular-cli build files, or any images that weprovided or that are included in any library or any code generated by the tools.Please note, you need to submit your files (HTML, JS, CSS, TS), both backend andfrontend, directly to the root folder of your homework 8 GitHub repository. That is, do notsubmit any subfolders on GitHub. If you submit some subfolders, you will receive a 2-pointspenalty.**IMPORTANT**:All videos are part of the homework description. All discussions and explanations in Piazzarelated to this homework are part of the homework description and will be accounted intograding. So please review all Piazza threads before finishing the assignment.转自：http://www.3daixie.com/contents/11/3444.html
