COMP249讲解、Java程序辅导、JSON API留学生讲解、辅导Java 解析C/C++编程|讲解Processing

COMP249 will re-implement the online store using Javascript against a JSON API.
Details are on iLearn. Please let me know if you have questions.

The third assignment for COMP249 is a Javascript based re-implementation of the WT online store web application. In this version, the server will deliver data in JSON format to the front end (browser) which will handle the generation of the HTML display and interaction with the user. This is a different style of implementation for web applications that has become much more prevalent in recent years and is typified by toolkits like Angular and ReactJS. In this project you will use two Javascript libraries to help write the application: jQuery and Handlebars.
Server Side Application
I have written a new version of the online store application that has a JSON API to deliver details of products and interact with the shopping cart. This new application only serves one HTML page. You will modify this page and use Javascript and CSS to implement your application.
You can get the starter-pack for this assignment containing this application in this Github repository or download a zip file here:comp249-2019-jstore-starter-master.zip. Unpack the application and run main.py in the usual way (run dbschema.py first to create the database). There are some tests in the project that test my back-end implementation.
The supplied Bottle application supports the following URL routes:
- delivers the index.html template, you will use this template to write the HTML for your application, this is the only URL that web users would access directly. In the starter kit, this contains links to some of the URLs below and a sample form for demo purposes; you do not need to retain any of these in your solution.
/static/- delivers static files in the normal manner
/products- delivers a JSON representation of a list of products
/cart- accepts a POST request to add an item to the shopping cart with form fields:
oproductid - id of the product to be added
oquantity - quantity to be added
oupdate - if set (value=1), quantity of item is set to quantity, otherwise quantity is added to any existing quantity in the cart already. If quantity=0 and update=1, item is removed from the cart.
/cart returns a JSON representation of the shopping cart
The application uses the?beaker?module to implement sessions. You will need to install the modules:
beaker
bottle-beaker
to run the application in addition to the usual bottle, bottle-sqlite and WebTest modules.
A sample response to /products:
{
"products": [
{
"id": 0,
"name": "Ocean Blue Shirt",
"description": "Ocean blue cotton shirt with a narrow collar and buttons down the front and long sleeves. Comfortable fit and tiled kalidoscope patterns. ",
"category": "men",
"image_url": "https://burst.shopifycdn.com/photos/young-man-in-bright-fashion_925x.jpg",
"unit_cost": 111.53,
"inventory": 0
},
{
"id": 1,
"name": "Classic Varsity Top",
"description": "Womens casual varsity top, This grey and black buttoned top is a sport-inspired piece complete with an embroidered letter. ",
"category": "women",
"image_url": "https://burst.shopifycdn.com/photos/casual-fashion-woman_925x.jpg",
"unit_cost": 13.28,
"inventory": 10
},
...
}
A sample response to /cart:
{
"cart": [
{
"id": 9,
"quantity": 1,
"name": "Black Leather Bag",
"cost": 150.6
},
{
"id": 7,
"quantity": 3,
"name": "Navy Sports Jacket",
"cost": 497.19
}
]

}
Your Task
Your task is to build the front-end code that will be run in the browser to provide an interface to the online store. Your code will read the JSON product descriptions from /products and create the product display and will allow the user to add items to the shopping cart and view their cart. Your application will have the following features:
1.The main page shows a table of products available, the list includes the product name and the price of the product. The display should be a table with appropriate column headings.
2.Clicking on the name of a. product shows the detail of that product in another part of the page, this includes the product image, description and cost. Within the display of a product there is a 'Close' button or link that when clicked, removes the product from the display.
3.The user can add an item to the shopping cart via a form displayed with each product.
4.At all times, the current state of the shopping cart is shown on the page, this includes the number of items in the cart and the total cost of the items.??? If the user adds something to the cart, this display is immediately updated to reflect the change.
5.Clicking on the cart display shows a list of the items in the cart in another part of the page. This includes the names of the items, the quantity and the cost (quantity * unit cost).It also includes an overall cost for the cart.
In addition, the following features may be implemented as an extension of the core requirements:
1.The list of products can be sorted by either name or price by clicking on the table headings.
2.The quantity of an item in the shopping cart can be updated or an item can be removed from the cart
Your Tools
I have provided a very basic project template for you to start with, this includes the code to run the back-end application and a basic HTML template referencing CSS and Javascript files. Also included are copies of the jQuery and Handlebars libraries and these are loaded into the HTML template.
You should use jQuery and Handlebars to complete this project. You may not use other Javascript libraries unless given explicit permission to do so (I will maintain a list of approved libraries, but I don’t expect there to be many). ?You should not use high-level toolkits like Angular or ReactJS. The goal is that you write the code in relatively low level Javascript to enable you to understand how everything works together without the kind of ‘magic’ that is often a feature of high level toolkits.
One thing you should take care of is to make your Javascript code well-organised and readable. This might include separating your code into identifiable ‘model’, ‘view’ and ‘controller’ modules, for example (but I acknowledge that there won’t be only one good structure).
Design
You will also be marked on the overall design of your web application.? This is a single page application with a layout that is not the same as that in the first assignment. In your design, think about how the user is interacting with the site and try to optimise the design to improve usability. Amazing graphic design is less important that a usable design with page elements in the right place and with good interaction.
Grading
This is the second part of the web development application, following on from the Python part which was largely marked on the unit tests. As such, it was relatively easy to score well on the first part as long as you passed most of the tests. To balance that, this assignment will be harder to score high marks on this assignment. A ‘pass’ mark for this assignment would be about 10/25, eg. implement the first three requirements with reasonable code quality and design.
Completeness 17 Marks
Your application includes all of the required features above
Requirements 1-5 together will be worth 2 marks each if implemented fully.
Extension requirement 1 (sorting) is worth 3 marks
Extension requirement 2 (modify cart) is worth 4 marks
Your implementation of these features may be evaluated with the help of automated tests - if so these will be released in time for you to be able to apply them yourselves.
Code Quality & Documentation 4 Marks
Your code is well organised, easy to follow, uses Javascript language features correctly
You provide a README file that describes how your implementation fits together and any extension features you have implemented
If you don’t have much code because you didn’t implement all requirements, you will score fewer marks here
Design 4 Marks
Marks for the visual design of your pages and the user-interface design (how your page interacts with the user).