CSCI 571 JavaScript Web开发 代写案例

1. Objectives

• ●  Get familiar with the AJAX and JSON technologies.

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

• ●  Use Node.js Express framework on the server side.

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

• ●  Get experience with MongoDB as NoSQL database.

• ●  Get hands-on experience on Amazon Web Services/Google Cloud Platform/Microsoft Azure.

• ●  Learn to use popular APIs such as eBay API and Google Customized Search API.
  
  

  2. General Directions

1. The backend of this homework must be implemented in JavaScript using the Node.js Express framework. Refer to Node.js website for installing Node.js and learning how to use it. Have a look at “Getting started” guides in the Express website to learn how to create backend applications using Express. Also, refer to the Node.js Express framework tutorial to learn more about it. The Axios library can be useful to make requests from your Node.js backend to eBay servers, or you can use any library with similar functionality as you like. Implementing the backend in anything other than Node.js will result in a major point reduction.

2. The frontend of this homework should be implemented using the Angular framework. Refer to the Angular setup docs for installing Angular and creating Angular projects. The Angular tutorial is a very good tutorial to see different Angular concepts in action. Implementing the frontend in anything other than Angular or React will result in a major point reduction.

3. You are expected to create a responsive website. For that reason, we require you to use Bootstrap, a CSS framework for responsive, mobile-first web development. Bootstrap will save you from the burden of dealing with CSS peculiarities and the website you create will be responsive automatically, if you develop within the framework provided by Bootstrap. Please refer to the Bootstrap docs for reference (especially look at the “Layout” section, and the components that you want to use). Refer to this post to learn how to add Bootstrap to Angular projects. Not using Bootstrap will result in a major point reduction.

4. The backend and frontend of this homework must be deployed to the cloud on GCP, Azure, or AWS. The backend should serve the frontend as well as other endpoints you may define.

5. In this homework you will use MongoDB as a database to store your product wish list. Refer to section 5.6 for more information on how to deploy MongoDB on GCP, AWS, or Azure. 
   

   6. You must refer to the homework description document (this document), grading guidelines, and the reference videos and instructions on Piazza while developing this homework.

   7. The assignment will be graded using the latest version of the Google Chrome browser. Developing this assignment using the latest version of Google Chrome is recommended.
      
      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. It includes three parts: search form, result table and item info card.

      Your webpage should also support adding products to and removing products from the wish list and sharing products info using Facebook. All the implementation details and requirements will be explained in the following sections.
      
      

      3.1 Search Form 3.1.1 Design

      You must replicate the search form displayed in Figure 1 using Bootstrap, so that it would be a responsive search form. The form fields are like Assignment #2.
      
      

      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 has the option to select 1 or both.

   5. Distance (Miles): This is the radius of the area within which the search is performed. 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. When the second option is not chosen, the input box below the second radio button should be disabled. If the user chooses to provide a different location, this input field should be enabled.
      
      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, and clear the results area including result table and item info card.
         
         

      3.1.2 AutoComplete

      Autocomplete for zip code is implemented by using the suggestion service provided by Geonames. Please go to this page to learn more about this service: https://www.geonames.org/export/web-services.html
      
      

      An example of an HTTP request to the Geonames API Get Suggestion that searches for the zip code “900” is shown below: http://api.geonames.org/postalCodeSearchJSON?postalcode_startsWith=900&maxRows=5&use rname=[Username]&country=US

      To get Username in the above URL:

      1. Register at http://www.geonames.org/login

      2. In the API call, the “Username” is the username you entered during registration.

      3. Do not use the 'demo' account for your app or your tests. It is only meant for the sample

         links on the documentation pages. Create your own account instead. 
         
         

         Note:
         1. Set the maxRows to 5 to limit the number of suggestions.
         2. If the Geonames API doesn’t work, hide the autocomplete feature. This situation should be handled and not throw any error.

         
         

         3.1.3 Validation

         Your application should check if the “Keyword” text box contains something other than spaces. If not, then it’s invalid, 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 the “From” field is chosen, the same validation should be performed for the input field below the second radio button.

         The zip code is restricted to only 5 digits. The search button should be disabled until and unless a 5-digit zip code is provided. If any other characters are included, the search button should not be enabled.