COMP 2406 Winter 2019
Assignment 5: Show Me The Money
Due Date: Tue. Apr. 2 by 12:00 NOON (before start of first tutorial) in culearn
Assignment Revisions and Corrections will be noted here.
Node.js/Express.js Yard&Garage Shopping Site
IMPORTANT: To get a mark for this assignment you MUST demo it in the allocated tutorial session. The setup of the server is involved enough that we won’t expect the TA’s to launch it for you.
The purpose of this assignment is to give you practice working within the code of a realistic Express.js application. The app implements an online store-front, or garage-sale, website call Yard & Garage where registered users can login and buy products.
The site presents products stored in a mongodb database and registered users can browse available items and, if desired, buy them from the site using their PayPal account. There is NOT a lot of code to write for this assignment, in fact, it might be more like a tutorial in terms of lines code. What will make this challenging though is navigating the existing code base and figuring out how to actually allow users to buy items through paypal’s API using the paypal-rest-sdk npm module.
To do this assignment you will need a personal paypal account and a mongodb database server running on your node server hosting machine (we will describe things as though you are hosting on openstack but you are free to host else like Heroku is you wish).
This assignment will require you to do a lot of investigation on how to use the PayPal API. You need to learn the code base, work around issues that it might have and learn how modules work that you might want to use for your solution. (paypal-rest-sdk is the only one you actually need to add but you can investigate others as well.)
You will likely need to stop and start the mongo database a bunch of times, maybe delete all its contents etc. Make a list for yourself of useful mongo commands -we’ve started one in tutorial 8. Remember you will need to have mongodb up and running to be accessed by your node.js/express.js server.
Assignment restrictions:
You are free to use Express.js and whatever other npm modules you find useful. The demo application already contains quite a few npm modules and you should try and figure out what they do and why the author chose them. The only npm module you are required to add is paypal-rest-sdk (or another alternative if you find one).
Note: this, and other assignments, can be done in pairs if you want to work with a partner. Please submit only one copy to culearn with both your names on it.
Marking: This assignment is based on 13 design requirements numbered R1.1…R3.5 for a total of 26 marks.
Marks are awarded, or deducted, based on requirements as follows:
Req Type
Assignment Grading
R0.x
Critical Submission and Intent Requirements. Assignment gets 0 if any critical submission
requirement (shown in red) is not met.
R0.x
Good Practice Requirements. You lose 2 marks for each good practice
requirement (shown in amber) not met.
Rx.x
Design Requirements. You earn 2 marks for each design requirement (green) satisfied and well implemented; 1 mark if it’s partly met or met but not well implemented; and 0 if it’s not met or attempted.
Submission and Good Programming Practice Requirements
The following requirements pertain to all your assignments regardless of what your application is supposed to do (i.e. regardless of the design requirements). These requirements are to ensure that your code is usable, readable, and maintainable.
R0.0 UNIQUENESS REQUIREMENT. The solution and code you submit MUST be unique. That is, it cannot be a copy of, or be too similar to, someone else’s code, or other code found elsewhere. You are, however, free to use any code posted on our course website as part of our assignment solution. [Assignment mark =0 if this requirement is not met.]
R0.1 CODE SUBMISSION ORGANIZATION AND COMPILATION: You should submit all the code files and data files necessary to compile and run your app. The TA’s will execute your app by following the instructions you provide in the README.txt file. If you compress your submission to culearn you must use only .zip format (not .rar or .tar or whatever). Though you are permitted to write code on Windows, Linux, or Mac OS the code should be generic enough to be OS agnostic. Your code must work with at least a current Chrome browser.
[Assignment mark =0 if this requirement is not met.]
R0.2 README FILE: Your submission MUST include a README.txt file telling the TA how to setup and run your app. The TA should not have to look into your code to figure out how to start up your app. Your README.txt MUST contain the following:
• Your name, student number and email address and if you are working with a partner then their name, student number and email address as well.
• Version: node.js version number and OS you tested on your code on.
• Install: how to install needed code. This will likely look like npm install or npm install module_name
• Launch: Instructions on how to launch your app. e.g. node server.js. As the course progresses there will be more launch options to it’s important to provide instructions.
• Testing: Provide Instructions on what the TA should do to run your app. e.g. visit http://localhost:3000/mytest.html?name=Louis. If your app requires a userid/password to run then provide one for the TA to use. Your server should print to the console the URL’s that should be visited by the browser to demonstrate your app. List them in the order you want us to visit them:

• Issues: List any issues that you want the marker to be aware of. In particular, tell us what requirements you did not implement or that you know are not working correctly in the submitted code. Here you are giving us your own assessment of your app.
• Pay attention to any specific URL’s that must be supported by your app.
[Assignment mark =0 if this requirement is not met.]
R0.4 INTENT REQUIREMENT: The solution and code you submit must comply with the intent of the assignment. For example if you are required to build a node.js/javascript server and you choose to build an apache/PHP server instead you will have violated the intent of the assignment even though the user input-output experience might be the same. As another example, if you are asked to build a “thick client” solution where the server just supplies data and the browser renders it but you build a “thin client” solution where the server renders all the HTML pages you will have violated the intent even though the user’s experience would look the same.
[Assignment mark =0 if this requirement is not met.]
R0.3 VARIABLE AND FUNCTION NAMES: All of your variables and functions should have meaningful names that reflect their purpose. Don’t follow the convention common in math courses where they say things like: “let x be the number of customers and let y be the number of products…”. Instead call your variables numberOfCustomers or numberOfProducts. Your program should not have any variables called “x” unless there is a good reason for them to be called “x”. (One exception: It’s OK to call simple for-loop counters i,j and k etc. when the context is clear and VERY localized.) Javascript variables don’t have types which can help clarify things so choosing good names is even more important. Many functions in javascript are annonymous (have no name) and so the name of the variable that refers to them is even more important.
Remember: any fool can write code that a computer will understand; the goal is to write code that we can understand. [Minus 2 marks from assignment if this requirement is not met.]
R0.4 COMMENTS: Comments in your code must coincide with what the code actually does. It is a very common bug to modify or cut-and-paste code and forget to modify the comments and so you end up with comments that say one thing and code that actually does another. Don’t over-comment your code – instead choose good variable names and function names that make the code “self commenting”. Don’t be reluctant to create local variables so that the variable name provides more clarity -there is no prize for having the fewest lines of code. [Minus 2 marks from assignment if this requirement is not met.]
R0.5 CITATION REQUIREMENT: If you use code from other sources you should cite the source in comments that appear with the code. If the source is an internet website then put the URL in the comments. You may use bits of code from outside sources but this may not form the complete solution you are handing in.You DON’T have to cite demo code we provide on the course web site or with tutorials and assignments, however that code should not be used for things you post publicly (like on GitHub). [Minus 2 marks from assignment if this requirement is not met.]
VERY IMPORTANT: Any sample code fragments provided may have bugs (although none are put there intentionally). You must be prepared to find errors in the requirements and sample code. Please report errors so they can be fixed and an assignment revision posted.
Application Requirements
R0.4 INTENT REQUIREMENT: You MUST demo your assignment in the allocated tutorial session to get a mark. The TA’s are not expected to get your server up and running -that will be up to you. Your server must be hosted on a remote machine (e.g. openstack, or Heroku).
Background
The demo code yardGarage provided with this assignment is extensive. It has been put together by Cuneyt Celebican over the last few terms. Cuneyt is one of our current TA’s who also recently took 2406 and 2601 with me. He has written this express.js app specifically for the COMP 2406 students to explore, modify, and make use of after the course ends. Thanks Cuneyt!
The application makes use of the following features that relate to COMP 2406:
• MongoDB database to store users and product details and other items.
• Makes use of cookies and or session storage to implement a shopping cart (actually a shopping bag).
• Uses some bootstrap styling for the pages (bootstrap is a CSS wrapper to simplify CSS coding).
• Uses handlebars template rendering.
• Makes use of server npm modules to help out (code in other files that are required()).
• Uses 302-redirects to redirect the browser client to new routes (e.g. after login or authentication).
• Uses the Express.js Router feature (uses router modules that export routing functions).
What you need to do first is get the app running and play with it a bit and proceed with the assignment requirements. We may have to work around known issues but we are not aware of any at this point.
It is expected that you will add to the base code to build the missing features and you are free to make whatever modifications you want. Part of the fun will just be figuring out how all the parts of the app work. It is typical of how Express.js apps are organized.
Running The Demo Code
Here are the instructions for running the demo code (You will be doing these on your Openstack virtual machine):
• Install all the required npm modules listed in package.json by exectuing npm install.
• Start a mongodb database server running on its default port 27017.
• Populate the mongodb database with the initial products by executing node populate-for-startup.js from the seed directory provided.
• Start the server by executing npm start. (Look in the package.json file to see why this starts the server and what actual node.js command gets executed.)
• Visit the Yard&Garage shopping site at http://134.117.XXX.XXX:3000 (That is, using your host machine’s Floating IP address).
• On the Yard&Garage site login as user: admin@admin.com password: admin (this user has admin privileges so you can use the dashboard in the app as well as being a shopping client). Note you can add yourself as a user in the database as well.
When you are up and running the initial login page at http://134.117.XXX.XXX:3000 should look something like this: (The screen captures below show the server running on localhost but we will be testing your app at your remote server host.)

Login with a user account that was added to mongodb as part of the populate script (e.g. admin@admin.com password admin), then the app should look something like this:

Play around with the app’s features. They include among others:
• Multiple Search with comma => itemName,ItemName2
• Filters
• Add, Delete, Update Products
• Add, Delete, Update Product Variants
• Add, Delete, Update Depatment or Category
• Add, or delete discount code
• Sends email on the signin
• Advance search bar (search for product and categories)
• Buy item
• Shopping cart
• Distunguishes user and admin
• Filters
There are many features you could add or modify but what we want you to do for this assignment is the following:
• Pay for items at checkout using Paypal
• Add an Order History to database
• Modify the store to be your own business. (Find something interesting to sell -but keep it clean.)
Application Requirements
PART 1 -Completing the Yard & Garage Site
1) Paypal Account and NPM Module Requirements
The main assigment exercise is to complete the application by allowing the user to actually pay for items when they checkout and press the Pay button. When this happens the app should connect to Paypal and allow the user to actually pay for the items using their personal paypal account.
Here is a screen capture video of what we are going after for problems 1 and 2 (note the video is showing a version running on localhost).
Your browser does not support the video tag.
To proceed with this you will need a personal Paypal account and you will use the “sandbox” developer feature that Paypal provides so you can test Paypal accounts without risk. (Be careful: if you go live instead you will be working with real accounts and real money -if some of you are brave enough to try this show me.)
You can sign up for a Paypal personal account at https://www.paypal.com/ca/home
The accounts are free and don’t require that you link a credit card or bank account at time of creation. (It might ask for one but if you ignore the request it should create the personal account anyway.)
Use your personal paypal account and log into the Paypal developer site: https://developer.paypal.com. There you can create a sandbox account:

The sandbox account will provide you with two sandbox, or pretend, user accounts: username-buyer@whereever.com and username-facilitator@whereever.com. You would presumably use the buyer account to buy products from the shopping site and you will hard-code the facilitator account into your app to receive the money from buyers.
You need to create an associated app with your sandbox account. Here I’ve created an app LDNShopping that will access paypal’s REST API:

Once your Paypal app is created you need to generate API keys that consist of a client-id and a client-secret. These serve both as API keys and also identify the client which allows you to make that account the target where money from purchases can be deposited. Here is a screen capture of how client-id and client-secret might appear. The client-id and client-sercret will be hard-coded into your app to receive payments from purchases.

With your Paypal sandbox account created you can now proceed with the assignment’s main feature requirements.
Here are the requirements.
R1.1 The application should make use of the paypal-rest-sdk npm module that allows your app to connect with paypal’s REST API. You can learn more about it at these links and others that you search for:
https://www.npmjs.com/package/paypal-rest-sdk
http://paypal.github.io/PayPal-node-SDK/
This is the big part of the assignment – learning how this works from the online documentation and then incorporating it into the application.
R1.2 Your application should hard-code the paypal configuration keys so we can run, or use, your app without entering that. It would look something like the following: Here paypal would be the result of executing var paypal = require(‘paypal-rest-sdk’) in app.js file (already there).
//Paypal configuration
paypal.configure({
‘mode’: ‘sandbox’, //sandbox or live
‘client_id’: ‘XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX’,
‘client_secret’: ‘XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX’
});
You will use the client_id and client_secret from your paypal developer sandbox account as described above. Again make sure you hard-code this so we can run code you submit to culearn if we want to. The client_id used above represents the paypal (sandbox) account where money will be deposited when users buy products using their own paypal account. That is, this app hard-codes the app id of the account where money will be deposited but buyers will enter their own paying account details as part of the paypal checkout procedure. That way, if the marking TA buys an item from your webapp a record of that will show up in your facilitator paypal account (in effect, paying you with money rather than marks -this could be the future of how assignments get graded).
2) Checkout Requirements
When a user has added an item to their shopping bag and they click on the shopping bag they are taken to a page that looks like this:

Upon clicking the Checkout button the user is taken to a page which includes a Pay button:

Currently, in the demo code, when you click the Pay button you will randomly either be directed to a success or cancelled page (find out where this happens in the code):


Here is the behaviour you need to implement:
R2.1 When the client presses the Pay button on the checkout page the application should connect to Paypal. A buyer’s account may or may not already be provided (that is up to you). The user should see the paypal page:

The above behaviour, for example, might be the result of the website making a GET or POST request to the server to a /checkout/checkout-progress route or whatever you decide to use.
R2.2 When the client logs into Paypal as the result of the above screen they should see the Continue screen from Paypal as shown below (There is nothing you likely need to do to have this happen because the user is now seeing Paypal pages.)

R2.3 When the client makes a payment they should be taken to a screen in your app that might look like the following:

The page should provide them with an Order History option and a Go to Home option. If the Order History option is selected they should see the order history which includes that purchase and any others they made since the server was started:

The Order History page is actually already coded in the demo code however it will likely be empty because no order data is being written to the mongodb database yet. To get this to work you need to add order data as part of the checkout process (see the the next requirement). Note you will also be able to see the orders in your paypal facilitator sandbox account (though the marker can’t because that is in your account):

R2.4 As a result of a successful purchase the server should add information about that order to the mongodb database. For example, the screen above is based on a document added to mongo with the following code:
var newOrder = new Order({
orderID : paymentInformation.id,
username : req.user.username,
address : userAddress,
orderDate : payment.create_time,
shipping : true
});
newOrder.save();
These are the orders that would be shown as a result of clicking the Order History button.
R2.5 When the client makes a purchase the shopping bag should be cleared (items removed). It is up to you whether you clear it as well if they cancel a payment -typically they would not be removed.
R2.6 If the user chooses to cancel the payment on the paypal screen they should be taken to a “payment cancelled” screen in your app. It is up to you whether you leave current items in the shopping bag.


Application Requirements PART 2
3) Make It Your Business
Now that you have the demo application fully working we want you to make this a site for your business. We want you to modify the database and the application logo to be a business of your choice subject to the following requirements. [Note when we mark your assignment we will be seeing it as your business and not the Yard & Garage version from problems 1,2 and 3.]
R3.1 Decide what your store is going to sell and what products you want to offer. Replace the “Yard & Garage” logo with one that reflects your business. (Make whatever other styling changes you want.)
R3.2 Replace the populate-for-startup.js file or change its contents in the seed directory to populate the mongodb database with your products instead. (use the mongo client to drop the old database first -reivew tutorial 08 if necessary.) Provide at least 10 products. You are free to, and encouraged to, change the properties (mongoose schema) of the products. Also add a user, or two, to the database including yourself (include the userid/password in your readme.txt file for the marker). Be mindful of the next requirement.
R3.3 The package.json file that you submit with your files must include any additional npm modules you might have used.
R3.4 We should be able to run your server by executing npm start and then visit your website at http://localhost:3000 with a browser or whatever actual IP address your server is being hosted at.
R3.5 Your business site should support all the features implemented in parts 1,2.
IMPORTANT: Grading of the assignment will be based on marking the live application. If the marking TA cannot access your application at the URL you provide the assignment mark will be zero.
If you complete these requirements you will have a pretty much working storefront ready for the big time!