Homework 8: Ajax, JSON, Responsive Design and Node.js Entertainment Event Search ObjectivesGet familiar with the AJAX and JSON technologies.Use a combination of HTML5, Bootstrap, Angular and jQuery on client side.Use 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 popular APIs such as Ticketmaster APIs, Spotify APIs, Google Maps APIs, Google Customized Search APIs, Songkick APIs, and Twitter APIs.1.1 PrerequisitePlease apply Songkick APIs as soon as possible, as it will take 2 to 7 days to obtain your API key. See more on section 4.2.BackgroundAJAX 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 http://csci571.com/slides/ajax.pdfJSON, 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:http://csci571.com/slides/JSON1.pdfBootstrapBootstrap 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:http://csci571.com/slides/Responsive.pdfAmazon 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.The Amazon Web Services homepage is available at: http://aws.amazon.com/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/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 Microsoft- managed 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-latestAngularAngular 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, either AngularJS, Angular 2, Angular 4, Angular 5, or Angular 6 can be used, but Angular 6 is recommended since AngularJS enter LTS support. However, please note Angular 2+ will be a little difficult to learn if the developer is not familiar with Typescript and component-based programming.To learn more about AngularJS visit this page:https://angularjs.org/To learn more about Angular 2+, visit this page:https://angular.io/jQueryjQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to- use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.To learn more about jQuery visit this page:https://jquery.com/Node.jsNode.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event- driven, 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 “jQuery/Angular” it means that you can either use a jQuery or Angular function; and when you see GAE/AWS/Azure it means that you can either use Google App Engine, Amazon Web Services or Microsoft Azure Services.There are typically three ways to implement the client side:Use jQuery + AngularJSUse entirely AngularJSUse entirely Angular2+You can use either way.All APIs calls should be done through your Node.JS server, except calls to the ip-api and Google Maps display.High Level DescriptionIn this exercise you will create a webpage that allows users to search for events using the Ticketmaster API and display the results on the same page below the form. Once the user clicks on a button to search for event details, your webpage should display several tabs which contain an event info table, artist info table, venue info table, and upcoming events related to this event respectively. Your webpage should also support adding events to and removing events from favorites list and posting events info to 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.Search FormDesignFigure 1 Initial Search FormYou must replicate the search form displayed in Figure 1 using a Bootstrap form. The formfields are the same as in Homework #6.There are four input fields in the search form:Keyword: This field is required. Validation is performed on this field. Please refer to section 3.1.3 for details of validation. This input field should support autocomplete whichis 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.Category: The default value of “Category” is “All”, which covers all of the “types”provided by the Ticketmaster API. The other options are shown in Figure 2.Distance: This is the radius of the area within which the search is performed. The centerof the area is specified in the “From” field. There are two units: “miles” and “kilometers”. The default value is 10 miles.From: The center of t
he area within which the search is performed. The user can choosebetween their current location or a different location. This field is required (the user must either choose the first radio button or choose the second one and provide a location) andmust be validated. Please refer to section 3.1.3 for details of validation. The input boxbelow the second radio button is disable by default. If the user chooses to provide a different location, this input field should be enabled.The search form has two buttons:Figure 2 Category OptionsSearch: 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 user location.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.AutocompleteAutocomplete is implemented by using the suggestion service provided by Ticketmaster. Please go to this page to learn more about this service:https://developer.ticketmaster.com/products-and-docs/apis/discovery-api/v2/#find-suggest-10-v2An example of an HTTP request to the Ticketmaster API Get Suggestion that searches for the keyword “laker” is shown below:https://app.ticketmaster.com/discovery/v2/suggest?apikey=YOUR_API_KEY&keyword=lakerThe response is a JSON object shown in Figure 3.Figure 3 Autocomplete JSON ResponseYou should use “Attractions” only with the name field to implement the autocomplete. You must use Angular Material to implement the Autocomplete. (See section 6.4)Figure 4 Autocomplete exampleValidationYour application should check if the “Keyword” contains something other than spaces. If not, thenit’s invalid and an error message should be shown, and the border of the input field should turn red as in Figure 5.If the second radio button of “From” field is chosen, the same validation should be performed for the input field below the second radio button. Please watch the reference video carefully to understand the validation.Obtaining User LocationFigure 5 An Invalid FormAs 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/jsonThe “Search” button should be disabled before the user location is obtained.Search ExecutionOnce 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 Ticketmaster API to get the events information. This will be explained in the next section.
