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.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/
.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/
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.
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.