(AJAX/JSON/HTML5/Bootstrap/Angular/jQuery/Node.js/Cloud Exercise)
1. Objectives· Get 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 Platform App Engine/Microsoft Azure.· Learn to use popular APIs such as eBay API, Google Customized Search API and Facebook API
1.1PrerequisitePlease register Facebook API as soon as possible. In previous semesters, Facebook may take a long time to check your account if you did not used Facebook frequently.
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 http://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: http://csci571.com/slides/JSON1.pdf
2.2 BootstrapBootstrap 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.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. The Amazon Web Services homepage is available at: http://aws.amazon.com/
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/standard/nodejs/
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 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-latest
.6 AngularAngular 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 or Angular 2+ (Angular 2,4,5,6 or 7) can be used, but Angular 7 is recommended as AngularJS entered LTS. 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/
2.7 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/
2.8 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:1. Use jQuery + AngularJS2. Use entirely AngularJS3. Use entirely Angular2+ You can use either way.All APIs calls should be done through your Node.JS server, except calls to the ip-api.
3. High Level Description
In this exercise you will create a webpage that allows users to search for products using the eBay API and display the results on the same page below the form. Once the user clicks on a product name to search for product details, your webpage should display 5 tabs which contain a Product info tab, Product photos tab, Shipping info tab, Seller info tab and a Similar products tab related to the product, respectively. Your webpage should also support adding products to and removing products from the wish list and sharing products info to Facebook. 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 in Figure 1.
Figure 1 Initial Search Form
3.1 Search Form3.1.1 DesignYou must replicate the search form displayed in Figure 1 using a Bootstrap form. The form fields are similar to Homework #6. There are six input fields in the search form:
1. Keyword: This field is required. Validation is performed on this field. Please refer to section 3.1.3 for details of validation. Initially, please show the placeholder shown in the picture.
2. Category: The default value of “Category” is “All Categories”, which covers most of the “types” provided by the eBay API. The other options are shown in Figure
2.3. Condition: There are 3 options for the user to select from: New, Used and Unspecified. Multiple options could be selected to get results for all of them.
4. Shipping Options: There are 2 options provided: Local Pickup and Free Shipping. The user again has the option to select 1 or both of them.5. Distance (Miles): This is the radius of the area within which the search is performed. The center of the area is specified in the “Current Location” field. The default value is 10 miles.
6.
From: The center of the area within which the search is performed. The user can choose between their current location or other location based on the zip code. This field is required (the user must either choose the first radio button or choose the second one and provide a location) and must be validated. Please refer to section 3.1.3 for details of validation. The input box below the second radio button is disable by default. If the user chooses to provide a different location, this input field should beenabled.
