search

mahahahajan / WebApp

0 stars 0 forks source link

readme

Simplicity Cloud

Semester project for EE461L.
Team: Sylvia Vu, Pulkit Mahajan, and Anuv Gupta.      

 

User Documentation

Table of Contents

1. Getting Started

2. Home Page

3. User Functions and Features

4. Hardware Page

5. Datasets Page

6. Billing Page

 

1. Getting Started

2. Home Page

3. User Functions and Features

4. Hardware Page

5. Datasets Page

6. Billing Page

 
 

Developer Documentation

Quickstart

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) - Set up Mongo database & log directories - Create folder `/usr/local/var/mongodb` if doesn't exist - Create folder `/var/log/mongodb` if doesn't exist - Start Mongo server - Run in terminal: `sudo mongod --config={/absolute/path/to/repo}/mongo/mongo-dev.conf` - Make sure the command is `mongod` and not `mongo` - Math sure the path is an absolute path, ie. use `/Users/anuv/Documents/School/EE461L/project/WebApp/mongo/mongo-dev.conf`, not `WebApp/mongo/mongo-dev.conf` - 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. - Start Mongo shell _(optional)_ - Run in terminal: `mongo` - Make sure the command is `mongo` and not `mongod` - 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.
Backend - Install [python3](https://realpython.com/installing-python/) - Navigate to repository in terminal: `{path/to/repo}/` - You should be in the folder `WebApp`, which is the main repository folder which contains the `.git` folder and the `requirements.txt` file - 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 % ` - 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` - 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` - Development Environment: - Run in terminal: `export FLASK_APP=app.py` - Confirm that the command worked; run in terminal: `echo $FLASK_APP` —> should output `app.py` - 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`](https://www.npmjs.com/package/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 `sudo` if necessary: `sudo bash n lts` - 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 --version` and `npm --version` - 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` - 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 the `package.json` file - 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` - 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](https://www.npmjs.com/package/serve) to `/usr/local/bin/serve` (with NPM) - Run in terminal: `./serve.sh` - 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/](http://localhost:3000/). For production environments, reverse proxy & DNS setup is required._

 

Sources

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.