Executive Summary
In this project we build a complete shopping-cart web application with an SPA frontend and a TCP, Tomcat, and NodeJS backend.The Environment
For the client-side frontend (i.e. HTML, CSS, and JavaScript), any simple text editor (such as nano or vim) will do, but if you prefer to work in a GUI environment then a few possibilities that come to mind include Atom, Sublime, Eclipse, and VScode.
To serve the frontend from Tomcat, store its files under WEB-CONTENT. For Node,
use the middleware app.use('/serve', express.static(.
If you serve the frontend from one endpoint and invoke services from another, you
may need to include the header Access-Control-Allow-Origin: * in the
service's response to get around the cross-domain scripting policy of the browser.
The Backend
You will be using the services you created in Projects A-C plus the following two (which were discussed in class). It is up to you to implement these two in Java (Tomcat) or in JavaScript (Node):- list: This service receives the parameter
id, an integer, and returns the id's and names of all products in theProducttable of the Models_R_US.db database (which resides in~/4413/pkg/sqlite) whose category ID catID is equal to the passed parameter. The return should be mimed as "application/json" and should be an array of JSON objects with keys: "id" and "name". - cart: This service receives the parameter
item, a JSON object containing the "id", "price", and "qty" of a product, and returns the updated cart as an array of JSON objects. If the qty of any item is not positive, the item is to be deleted from the cart. If the parameter is missing, the current cart is returned.
The Frontend
Name the source files of your client-side SPA as follows:projD.html,
projD.js, and projD.css (the CSS is optional). The
SPA must have the four views listed below all in one page. At a minimum,
each view must have a link to the previous view (except for catalog), a header
that acts as a title for the view, and a body.
- catalog:
Upon visiting the single-page application (SPA) frontend, the user should be presented with all the product categories. Only the name of each category should be visible; the id should not. The user can click on a category (or on a button or image next to one) to select it. - category:
All products belonging to the selected category are displayed. Only the name of each product should be visible; the id should not. The display format is optional (list, table, paragraphs, etc.). The user can click on a product (or on a button or image next to one) to select it. - product:
All details of the selected product are displayed. The user can click a product (or on a button) to add the product to the cart. - cart:
If a product was added, the cart is displayed. The user can change the quantity of any product in it and click an update button residing next to the modified item. An html table is rercommended for positioning the display elements.