这是一篇澳洲的PageRank算法和聚类算法代写
Overview
In this assignment, we are going to develop a single-page online shopping web app iShop using the MERN stack (MongoDB, Express.JS, ReactJS and Node.js). The main work flow of iShop is as follows.
➢ Upon loading, the sketch of the page is shown in Fig. 1. The user can click a category on the top to view products in the category.
Fig. 1
➢ The user can search products by entering search string in the search box and clicking on the dropdown list (initially displaying “All”) to narrow down the search within a specific category, as follows:
Fig. 2
Modern Technologies on World Wide Web
Assignment 2➢ When the user clicks on a product (the area containing the item image, name and price), the page displays the detailed information of the product, as follows:
Fig. 3
The user can adjust the quantity and click “Add to Cart” to add the item(s) to its shopping cart.
After clicking “go back”, the page returns to the last page that the user is viewing.
➢ After the user clicks the “Sign in” link in one of the page views as shown above, or clicks the “Add to Cart” button on a page view as in Fig. 3 (without user signed-in before), a sign-in page is displayed:
Fig. 4
User can enter its username and password and click the “Sign in” button to sign in. An error message should be prompted on top of the form in Fig. 4’s view, if the sign-in fails.
➢ If the sign-in page was brought up when the user was adding some item(s) to the cart, after successfully signing-in, the page view goes to the following (suppose the user name is Jack), where xx indicates the actual number of items in the user’s shopping cart.Fig. 5
After clicking “continue browsing”, the page goes back to the initial display of the web app.
➢ If the sign-in page was brought up by clicking “Sign in” on a page view as in Figures 1-3, after successful signing-in, the page view of Fig. 1 becomes the following, and the page views of Figures 2, 3 change similarly, i.e., the shopping cart icon/information and “Hello, xx (Sign out)” are displayed on the top-right corner of the page, instead of the “Sign in” link.
Fig. 6
➢ When the user clicks the area containing the shopping cart icon and “xx in Cart” on the top-right corner of a page, the shopping cart content is displayed, as shown in Fig.
- The selected quantity of each product is displayed, and the user can change the quantity. When a quantity is changed, “Cart subtotal (xx item(s)): $xx” should change accordingly. Especially, if there is 1 item, it should be “Cart subtotal (1 item): $xx”; if there are more than one item, it should be “Cart subtotal (xx items): $xx”.
Fig. 7
Whenever the total item quantity is changed, “xx in Cart” at the top of the page should be updated accordingly.
➢ When the user clicks the “Proceed to check out” button, the page is as shown in Fig.
- In our simplified shopping app, we omit the payment page, but directly display this order success page (where the total item number and money paid should be showing the actual numbers). Note that the items in the shopping cart should be cleared and “0 in Cart” should be displayed at the top of the page.
Fig. 8
When the “continue browsing>” link is clicked, the page goes back to a view as in Fig.6, with the initial page of the web app displayed (the top-right corner shows the after-sign-in contents).
➢ When the user clicks the “Sign out” link in the page views as in Figures 5-8, the page displays a “Sign in” link in the top-right corner of the page replacing the shopping cart information and “Hello xxx (Sign out)” if the previous page view is Fig. 6, or goes back to the initial page of the web app if the previous page view is Fig. 5, 7 or 8.
We are going to achieve this application by implementing code in a back-end Express app and a front-end React app.
- Express app productservice:
app.js
./routes/products.js
- React app shoppingapp:
./src/App.js
./src/index.js
./src/App.css
Task 1. Back-end Web Service
We implement the back-end web service using Express.js. The web service is accessed at http://localhost:3001/xx.
Preparations
- Following steps you have done in a few labs, install the Node.js environment and the Express framework, create an Express project named productservice, and install the needed modules.
- Following steps you have done in a few labs, install MongoDB, run MongoDB server, and create a database “assignment2” in the database server.
(1) Insert a number of records to a productCollection collection in the database in the format as follows, each corresponding to one product.
db.productCollection.insert({name: ‘iPhone 13’, ‘category’: ‘Phones’, ‘price’: 8000,manufacturer: ‘Apple Inc.’, ‘productImage’: ‘images/iPhone13.jpg’, ‘description’: ‘Most advanced dual‑camera system ever.’})
For implementation simplicity, we do not store images in MongoDB. Instead, we store them in the hard disk under the ./public/images/ folder, and store the path of an image in the productCollection collection only, using which we can identify a product’s image in the images folder. Copy some product images to the images folder under ./public in your project directory.
You should insert information of at least 8 products under each category, for app testing purpose.
(2) Insert a few user records to a userCollection collection in the database in the format as follows. Here productId should be the value of _id generated by MongoDB for the respective product document in the productCollection collection, which you can find out using db.productCollection.find().
