Semester project for EE461L.
Team: Sylvia Vu, Pulkit Mahajan, and Anuv Gupta.
- What is hardware?
- Hardware for a project
- Hardware for personal use
- Check out hardware for a project
- Check in hardware for a project
- Check out hardware for personal use
- Check in hardware for a project
-
Create an account
Good news, creating an account is simple! Click this link to head to the Simplicity home page. Click 'Sign Up'; you'll be redirected to the registration page. Fill out the fields listed on the screen. Once you do that, you're ready to work with Simplicity! 😎
-
How do I sign in?
If you've just created an account, you should be redirected to your user portal. Similarly, if you have signed in previously and are re-visiting the website without having signed out, you will be redirected to your user portal when you try to reach the home page. Alternatively, click this link to head to the Simplicity home page. Click 'Sign In'; you'll be redirected to the login page. Input the same credentials you signed up with. If your information is correct, you've successly signed in and you're ready to work!
-
Home Page summary
Welcome home! 🥳 At a glance, you'll be able to see a summary of all of the working parts of your account. In the top layer, you can see how many projects you're involved in and how many units of hardware you have checked out for personal use. In the second layer, you can view your projects in greater detail; they're shown as cards with each project's name, description, and Project ID. In the third layer, you can keep track of all things hardware! You can see your total checked-out quantities of hardware, as well as how much is being used for personal use and for projects.
-
-
What is a Project ID?
A Project ID is a string of characters (max 20 characters) that is unique to each project (yes, we make sure that no two projects have the same ID!). This ID is used to identify your project and also used by collaborators to join you on this project. Keep your project ID's a secret from non-collaborators to prevent uninvited guests from showing up to your project party! 🤫
-
Create a project
To create a new project, refer to the navigation menu on the left side; click on 'Projects'. Then, click on 'NEW PROJECT'; you will then be presented with the project-creation form. Give your project a unique Project ID, a name, a maybe a fun description! Click 'CREATE PROJECT' when you're satisfied with your input. Congratulations, you've just created a project! 😄
-
Join a project
First, make sure that you know the specific Project ID of the project (this is your key to getting in!). To join a project, refer to the navigation menu on the left side of the screen; click on 'Projects'. Then, click on 'JOIN PROJECT'. You will be presented with a form that asks for a Project ID. Input the ID of the project you are trying to join and click 'JOIN PROJECT'. If successful, a green 'Success!' message will flash under the text box. Happy collaborating! 🙌
-
Edit a project
Head over to the 'Projects' page and locate the project you are attempting to edit among the project cards shown on the screen. Once you've done that, click the three vertical dots in the top right-hand corner of the card. Click 'Edit'. You'll be presented with a form where you can edit the name and/or the description of the project. Side note: You cannot change a project's ID. 🚫
-
Delete a project
If you've completed a project or simply would like to get rid of one, no problem! Head over to the 'Projects' page and locate the project you would like to delete. Once you've done so, click the three vertical dots in the top right-hand corner of the project card. Click 'Delete'. A pop will appear and ask you to confirm or cancel your decision. Side note: Once a project is deleted, its ID is free to be used by a newly-created project. 🔄
-
-
Change my password
Go to your 'Settings' page via the navigation bar on the left side of the page. In the text box to the right of 'Password', input a new password (and make it good!). Below this field, you'll be asked to input your current/old password for verification. Click 'UPDATE INFO' to save your changes.
-
Change user theme
If you ever get tired of the look of your website, here's a neat way to switch it up! Head over to your 'Settings' page via the navigation bar on the left side of the page. Click the long colorful rectangle to the right of 'Theme' and a color chart will appear. Use your cursor to click and drag around the color selection. Change the hue and saturation to your liking! 🌈 If you know the hex code to the color you'd like, feel free to input the code in the text box above 'Hex'. Or, if you can't decide on a color right away, we've got you covered with some presets at the bottom of the color chart pop-up. 😊
-
Check out hardware for a project
To check out hardware for a project, head to the 'Projects' page. Locate the project you would like to check out hardware for, and click 'MANAGE' on that project's card. You'll be able to see what hardware, if any, has been checked out for that project already. Below this is the check out form. Select the hardware set you'd like to check out and input the check out quantity under 'Requested Quantity'. The total quantity available for checkout can be seen under 'Total Availability'. The price per unit of a hardware set is shown as well under 'Projected Pricing and Cost' in the left text box. The right text box will automatically be updated with the calculated cost according to the requested quantity. Click 'CHECK OUT' to officially check out your hardware.
-
Check in hardware for a project
To check in hardware for a project, head to the 'Projects' page. Locate the project you would like to check out hardware for, and click 'MANAGE' on that project's card. You'll be able to see what hardware, if any, has been checked out for that project already. Below this is the check in form. Select the hardware set you'd like to check in and input the check in quantity under 'Requested Quantity'. Click 'CHECK IN' to officially check in hardware. After doing so, a bill for each project member will automatically be calculated and can be viewed on the 6. Billing Page.
-
Check out hardware for personal use
To check out hardware for personal use, head to the 'Hardware' page. According to the cards shown at the top of the page, you'll be able to see how many units of each hardware set you have currently checked out. Below these cards is the check out form. Select the hardware set you'd like to check out and input the check out quantity under 'Requested Quantity'. The total quantity available for checkout can be seen under 'Total Availability'. The price per unit of a hardware set is shown as well under 'Projected Pricing and Cost' in the left text box. The right text box will automatically be updated with the calculated cost according to the requested quantity. Click 'CHECK OUT' to officially check out your hardware.
-
Check in hardware for personal use
To check in hardware for personal use, head to the 'Hardware' page. According to the cards shown at the top of the page, you'll be able to see how many units of each hardware set you have currently checked out. Below these cards is the check in form. Select the hardware set you'd like to check in and input the check in quantity under 'Requested Quantity'. Click 'CHECK IN' to officially check in your hardware. After doing so, a bill for your used hardware will automatically be calculated and can be viewed on the 6. Billing Page.
-
-
Billing Overview
Here, you are able to view all of your bills and able to change/set your payment method! At the top of the page are your bills. These are calculated when you Check in hardware for a project or Check in hardware for personal use. You will be able to pay your bills directly from this page, given that you have set your payment method.
-
What is hardware?
Bills are automatically created when any 'Check In' operation is performed. For hardware checked in for shared projects, the subtotal for the entireity of the hardware = price_per_unit_of_hardware * quantity_checked_in. This subtotal is then divided evenly amongst all of the project memebers. For hardware checked in for personal use, the subtotal is calculated the same way as it would be for a project. However, the user is responsible for the entire bill.
-
Why can't I pay my bill?
Users are unable to pay bills if they have not set their payment on the 'Billing Page'. Click here to find out how to do this.
-
-
-
Is setting a payment method required?
Yes, and no. Setting a payment is not required to create/access an account, to make projects, or to check out hardware. However, it is required to pay for bills associated with checking in hardware. Users who have not set their payment method will be prevented from paying their bills.
-
Update my payment method
To set/update your payment method, go to the 'Billing' Page via the navigation bar on the left side of the screen. In the middle of the screen below any bill cards, is the payment method form. Input the presented fields and click 'UPDATE INFO' to save your information. PLEASE DO NOT ENTER REAL CREDIT CARD INFORMATION. SIMPLICITY IS NOT LIABLE FOR ANY SENSITIVE INFORMATION.
-
Follow the steps in each of the following sections (in correct order) to set up the application for development or production service.
Database
-
Install Mongo
- ie.
brew install mongodb(macOS)
- ie.
-
Set up Mongo database & log directories
- Create folder
/usr/local/var/mongodbif doesn't exist - Create folder
/var/log/mongodbif doesn't exist
- Create folder
-
Start Mongo server
- Run in terminal:
sudo mongod --config={/absolute/path/to/repo}/mongo/mongo-dev.conf- Make sure the command is
mongodand notmongo - Math sure the path is an absolute path, ie. use
/Users/anuv/Documents/School/EE461L/project/WebApp/mongo/mongo-dev.conf, notWebApp/mongo/mongo-dev.conf
- Make sure the command is
- Should see a message like the following (with a different PID):
about to fork child process, waiting until server is ready for connections. forked process: 78683 - Since the Mongo process forked, you can close the terminal window.
- Run in terminal:
-
Start Mongo shell (optional)
- Run in terminal:
mongo- Make sure the command is
mongoand notmongod
- Make sure the command is
- The Mongo shell should open up. If not, the Mongo server did not start correctly, so go back to the previous step.
- Run in Mongo shell:
use simplicity-cloud- Leave this terminal window open with the shell running to observe, query, and manage the database as an administrator.
- Run in terminal:
Backend
-
Install python3
-
Navigate to repository in terminal:
{path/to/repo}/- You should be in the folder
WebApp, which is the main repository folder which contains the.gitfolder and therequirements.txtfile
- You should be in the folder
-
Activate python virtual environment
- Run in terminal:
source ./venv/bin/activate- Confirm that your shell prompt begins with
(venv), ie.(venv) anuv@Anuvs-MacBook-Pro WebApp %
- Confirm that your shell prompt begins with
- Run in terminal:
-
Install required python modules
- Run in terminal:
python3 -m pip install -r requirements.txt- Pip should install all the required python modules, as specified in
requirements.txt
- Pip should install all the required python modules, as specified in
- Run in terminal:
-
Start Flask backend:
-
To test the backend API, use the development environment steps. To serve the backend API in the cloud, use the production environment steps.
-
Production Environment:
- Run in terminal:
./serve.sh
- Run in terminal:
-
Development Environment:
-
Run in terminal:
export FLASK_APP=app.py- Confirm that the command worked; run in terminal:
echo $FLASK_APP—> should outputapp.py
- Confirm that the command worked; run in terminal:
-
Run in terminal:
python3 -m flask run- Confirm that output looks like:
* Serving Flask app "app.py" * Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Debug mode: off * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) -
Leave this terminal window open with the Flask server running to keep the backend alive and to observe API requests and errors.
-
-
Frontend
-
Install Node.js and NPM
- A good way to do this is to use
n:- Navigate to Downloads folder in terminal:
~/Downloads - Run in terminal:
curl -L https://raw.githubusercontent.com/tj/n/master/bin/n -o n - Run in terminal:
bash n lts- Use
sudoif necessary:sudo bash n lts
- Use
- This will install the latest versions of both Node.js and NPM
- Confirm that Node.js and NPM are installed by running in terminal:
node --versionandnpm --version
- Navigate to Downloads folder in terminal:
- A good way to do this is to use
-
Install Yarn
- A good way to do this is to use NPM:
- Run in terminal:
npm install --global yarn- Confirm that Yarn is installed by running in terminal:
yarn --version
- Confirm that Yarn is installed by running in terminal:
- Run in terminal:
- A good way to do this is to use NPM:
-
Navigate to repository in terminal:
{path/to/repo}/frontend- You should be in the folder
WebApp/frontend, which is the frontend root folder which contains thepackage.jsonfile
- You should be in the folder
-
Install React.js (and all frontend modules)
- Run in terminal:
yarn install- Yarn should install all the required Node.js & React.js, as well as all other required frontend modules as specified in
package.json
- Yarn should install all the required Node.js & React.js, as well as all other required frontend modules as specified in
- Run in terminal:
-
Start React frontend:
-
To test the frontend UI, use the development environment steps. To serve the frontend UI in the cloud, use the production environment steps.
-
Production Environment:
- Install serve to
/usr/local/bin/serve(with NPM) - Run in terminal:
./serve.sh
- Install serve to
-
Development Environment:
-
Run in terminal:
yarn start- Confirm that output looks like the following, followed by a series of warnings (the output lines may be spaced out by a few seconds with console clears):
yarn run v1.22.10 $ react-scripts start Starting the development server... Compiled with warnings. -
Leave this terminal window open with the React development server running to keep the frontend alive and to access & test the UI in a browser.
-
-
Access the application for development environments at http://localhost:3000/. For production environments, reverse proxy & DNS setup is required.
Backend
- https://flask.palletsprojects.com/en/1.1.x/tutorial/factory/ - Used to set up the Flask application.
- https://realpython.com/introduction-to-mongodb-and-python/ - We wanted to find out how to use MongoDB with Flask and initially we thought our only option was to use PyMongo. With this website we came across MongoEngine and we found that MongoEngine was more pythonic and easier to read/use so committed to using MongoEngine.
- https://flask.palletsprojects.com/en/1.1.x/patterns/mongoengine/ - Used for setting up MongoEngine.
- https://docs.mongoengine.org/apireference.html - Used this documentation to navigate our use of MongoEngine.
- https://stackoverflow.com/questions/60803402/flask-jwt-or-flask-login - We needed a method of keeping a user logged-in if they have already signed in. Flask-login didn't seem to work well with the front-end without some hacky methods, so this stack overflow post helped us determine that we should use json web tokens instead.
- https://realpython.com/token-based-authentication-with-flask/ - Used to better understand jwt and helped with setup.
- https://flask-jwt-extended.readthedocs.io/en/stable/ - Used to navigate our use of flask-jwt.
