sccapstone/colite

Colite Technology Capstone Repository

Colite Technology README File

APP DESCRIPTION:

Our project is centered around working with Colite Technologies, a company helping businesses switch to renewable energy sources that promote sustainable business and energy resilience. Some of the features we will implement will be:

• Red flags to show batteries' deep discharge, and other abnormalities
• Develop a database and web application that will let users view visualizations of the data the system receives from Colites systems
• Handle data from poles that generate more than 20 data points each from PV panels, wind turbines, batteries, etc. at a 2 second interval (mock data will be used in the current execution)

The main technologies being used will be Amazon Web Services, MYSQL, and HTML/Vue.js, as well as Python for testing features. We will be communicating with Colite Technologies, and the USC electrical engineering capstone team throughout the project to ensure successful coordination and completion.

The web application is now hosted at: http://colite-tech-deployment-v2.s3-website-us-east-1.amazonaws.com/#/

The login information is as follows: Username: nsdemo10-author-DemoUser3 Password: TestPass-1 After you login you can test out the AWS Data Visualization through QuickSight, make sure to click the Home Navbar button link to see the main page and the rest of our implemented features

Running the Application (Open 2 Terminal Windows)

1st Window

Install NPM from nodejs.org

npm install

cd into nodejs-express-sequelize-mysql folder

cd Colite/nodejs-express-sequelize-mysql

Install dependent libraries

npm install

Run API

node server.js

2nd Window

cd into frontend directory

cd Colite/frontend

Install Vue.JS

npm install -g@vue/cli

Install Express

npm install express

Install Sequalize

npm install sequelize

(Optional) The user can also install vue devtools to be able to format and view changes easier.

This can be installed through the google chrome store. 

Install Axios/Ajax

npm install axios

Install Bootstrap

npm install vue bootstrap-vue bootstrap

Production Use

Compiles and minifies for production

npm run build

To view application go to

localhost:8080

Development Use

Compiles and hot-reloads for development

npm run serve

Lints and fixes files

npm run lint

Requirements

Backend SQL Requirements

• The user will need to have MySQL installed.
• The user will need to have MySQL workbench installed.
• The user will need to have security credentials to access the database.
• The user will need to have the IP for the database.

• To install express and node.js for the backend run the following:

npm install express sequelize mysql2 body-parser cors --save

Requirements to Run

• npm
• vue.js
• axios
• postscribe
• bootstrap
• sequelize
• express

Deployment

• The application will be hosted on an AWS server
• The MySQL Database will be hosted on AWS

Testing

• The unit tests will be located in frontend/tests/units
• The behavioral tests will be located in frontend/tests/behavioral
• BEHAVIORAL TESTING: The behaivoral tests will be run using the Selenium IDE which lets us automate web browing.

*Prerequisites:

brew install node npm install -g selenium-side-runner

*Installing Browser Drivers: Chrome:

npm install -g chromedriver

*Launching the Runner:

selenium-side-runner /frontend/tests/behavioral/behavior-tests.side

*TO RUN THE BEHAVIORAL TEST

• The command below worked for me on my terminal, I was in root and then ran the commands:

npm install -g selenium-side-runner npm install -g chromedriver

THEN run the command: (replace ronro with your username or adjust path as intended)

selenium-side-runner C:\Users\ronro\Documents\GitHub\Colite\frontend\tests\behavior\ContactUs.side selenium-side-runner C:\Users\ronro\Documents\GitHub\Colite\frontend\tests\behavior\Maps.side selenium-side-runner C:\Users\ronro\Documents\GitHub\Colite\frontend\tests\behavior\Graphs.side selenium-side-runner C:\Users\ronro\Documents\GitHub\Colite\frontend\tests\behavior\ListOfParts.side

UNIT TESTING

Go to Tests page through the navbar Click on a pole.

Log On Information:

Username: nsdemo10-author-DemoUser3 Password: TestPass-1

Username: default-reader-DemoUser2 Password: TestPass-2

Username: default-author-DemoUser1 Password: TestPass-3

Username: nsdemo10-reader-DemoUser4 Password: TestPass-4

Authors

• Matthew Hayward [email protected]
• Andrew Denman [email protected]
• Simon Benzer [email protected]
• Kundana Narla [email protected]

Customize configuration

See Configuration Reference.

colite's Issues

Update Personal Log

Your Personal Log has not been updated in 3 weeks.

Add Beta Issues

Please add all the features you will implement for the Beta Milestone as Issues, with label:enhancement, and associate them with the Beta Milestone.

When you are done adding your Beta Issues, close this Issue. I will then take a look at them and might comment on them, ask you add more, etc. In the end I will approve the issues and paste their numbers right in here.

Please add your Beta Issues by January 25.

Clean/Prep Data

remove duplicates, change to .csv format

Display "Red Flags"

On the alter parts page users will be able to view the battery flag to determine if the wattage is inside of the requisite threshold that Colite needs for each poll. If it is outside then it will be toggled red so users are aware.

Start Personal Log

See Personal Log

New Team member

I just added

Kailen King [email protected] @kailenking

to this team. Say hi!

They might not appear here just now because they have to first accept the github email invite I just sent.

Data Visualization Page

Implement a website page that will highlight the wattage produced by the inputted data. Users will be able to filter by location and data type. All of the poll numbers listed in the data will be reflected in the data visualization through a graph.

Progress Report: September 20

Please write below a short summary of any progress you have made up to September 20. Not everyone has to write a comment but do @-mention who worked on what. Feel free to cut-n-paste from your Personal Log.

When done reporting, close this Issue. I might re-open it later if I have questions.

The deadline for closing this is September 23.

Map of All Parts

Implement a map of all the selected parts that the user has selected in the input data page. The map will have labels for all the polls that are selected and it will change dynamically based on which polls are selected.

Which web framework will you use?

Your Project Description says you will be implementing a webapp. Which web framework will you use?

Checkout my Web Applications lectures for some recommendations.

Integrate Map to SQL Database

Have our current google maps API integrated with our SQL database so the polls shown in the map are derived from our data in the database.

Graph Filtering

Users will have the ability to filter the graph by location, data types, and active polls.

Progress Report: November 15

Everyone write below a short summary of any progress you have made in the last two weeks, specifically between the last Progress Report and November 15. Feel free to cut-n-paste from your Personal Log.

When everyone is done reporting, close this Issue. I might re-open it later if I have questions.

The deadline for closing this is November 18.

Delete .DS_Store. Add .gitignore at root

Colite/.DS_Store should not be there (macs create this file automatically).

Also, there is a Colite/package-lock.json but no package.json. That is wrong. The package-lock.json is probably there by mistake.

Color Scheme

Aim to have our color scheme and formatting matching for every page as well as being responsive if the user attempts to resize our reload the page.

Navigation Bar

Set up a navigation bar on the top of all pages besides login to navigate between pages

Unit Test

Write a test which verifies that your methods/functions do what you think they should do. Need to have at least 1 for the January 31st early deadline, need to have the instructions for how to run it in the readme.

Progress Report: October 18

Everyone write below a short summary of any progress you have made between the last Progress Report and October 18. Feel free to cut-n-paste from your Personal Log.

When everyone is done reporting, close this Issue. I might re-open it later if I have questions.

The deadline for closing this is October 21.

Progress Report: November 1

Everyone write below a short summary of any progress you have made between the last Progress Report and November 1. Feel free to cut-n-paste from your Personal Log.

When everyone is done reporting, close this Issue. I might re-open it later if I have questions.

The deadline for closing this is November 4.

Load Clean Data into MySQL DB

see title of issue.

Security Certificate for Website

Add a SHA2 security certificate so that our website is more protected and secure.

Progress Report: October 4

Please write below a short summary of any progress you have made between the last Progress Report and October 4. Not everyone has to write a comment but do @-mention who worked on what. Feel free to cut-n-paste from your Personal Log.

When done reporting, close this Issue. I might re-open it later if I have questions.

The deadline for closing this is October 7.

Missing Personal Log

Please add your personal log to the wiki

Design feedback

On the login page there should be a forgot password link/button in case a user happens to lose their information. There is no sign up page, how are you going to add users to the program?

You do not have to update your Design wiki, but keep this in mind when you are creating the program.

We need to be able to test it

Please keep in mind that the TAs and I will need to be able to test your app, using our laptops. This means that it is very important that the webapp completely work with mock (fake) data.

I think, for your app this means users should be able to upload data files, which are stand-in for the real data that would come from the poles, turbines, etc.

This is a readme issue. After you read it, unassign yourself from this issue. If you are the last person assigned to this issue then close it. After 2 weeks this issue can be closed even if there are still people assigned.

How does the user filter or export in data visualization page?

Update the Design page with instructions.

Deploy MySQL Database on Amazon Web Services

deploy MySQL database on aws to interface with web application

PoC Demo

Video Link to PowerPoint with Application Demo Video:
PoC_Demo_Colite.pptx
Video Link to just Application Demo Video: https://www.youtube.com/watch?v=IzrEaspHGkE&feature=youtu.be

Login Page

Implement a login page with the correct color scheme so users can create an account, login or click forgot password if they do not remember their login information.

Navigation Bar

After users login there will be a navigation bar at the top of the page that allows redirection to the home page, input data page, data visualization page, alter parts page, and map pages

Part Information/Selection Page

Implement a parts page that allows for users to filter parts through an advanced search bar. They will be able to filter by location, battery, voltage, and flags.

Integrate List of Parts and Data Visualization

Integrate the list of parts page with the data visualization page. Such that data selected on the list of parts page will be shown on the data visualization page.

Client has yet to respond

An email has been sent to Arash Anzalchi, PhD at his email [email protected]. It has been a week since the email has been sent and no response has been received. How should we move forward?

Retrieve Password

Users will be able to retrieve forgotten account information by selecting a 'forgot password' button on the sign up page. They will have the ability to reset it through email.

Behavioral Test

Need to have at least 1 behavioral test for the early deadline milestone. The behavioral test should emulate what a user is attempting to do when using our app. The tests should make sure your app does what the user expects it to do, that is, what your Specifications say. Behavior tests test the whole program.

CRUD Functions for Data

Allow for users to CRUD sensor data and this data is displayed as line chart, bar chart on the data visualization page

Progress Report: September 6

Please write below a short summary of any progress you have made up to September 6. Not everyone has to write a comment but do @-mention who worked on what. Feel free to cut-n-paste from your Personal Log.

When done reporting, close this Issue. I might re-open it later if I have questions.

The deadline for closing this is September 9 (yes, 3 days after September 6).

Export Data Visualization

Users can export the data visualization graph and data input from the data visualization page. This will allow for them to view the current iteration they selected.

Behavior Tests Problem

I am currently running our behavior test using the Selenium IDE and I am able to have it pass all tests by running it through the Selenium IDE. However, when I try and run it either through my own terminal or through Visual Studio's I get the following error:

I have tried to change the PATH by I am not sure how to get it to run correctly, any advice would be appreciated.

Images

Add code to repo

There is no code in repo.

Login System

Have a working login system where the user is able to enter a username or email, and password to be able to be taken to the working application.

Update Personal Log

Your Personal Log has not been updated in 2 weeks.

Input Data Page

Implement an input data page where users will be able to alter the following: polls, location, PV panels, wind turbines and batteries. In addition they will be able to toggle each poll so that it will or will not show up in the data visualization and map pages.

Requirements Feedback

Do this:

• Requirement say " if a battery is out of threshold", and "see red flags/alerts associated with malfunctioning poles " but do not explain where that data comes from. How does the webapp know the state of a battery? state of a pole? Explain in Requirements.

Otherwise, the Requirements are detailed and complete.

POC Issues: #11 #12 #13 #14 #15 #16 #17 #18 #19 #20 #21 #22 #23 #24

#12 (comment)
#20 (comment)
#14 (comment)

Home Page

Design a home page for the website that comes up after a user login with the proper color scheme being used

Create login system for web application

create a system with pairs of users and passwords, wherein you can add/remove users and login as them

Deploy Web App to Amazon Web Services

Host a "hello world" web application on AWS

Removing node modules

@josemvidal I was just wondering how to remove the node_modules code from our github repository while at the same time still being able to use it? I tried adding node_modules to .gitignore and then the following and it did not work:
git rm -r --cached node_modules
git add .
git commit -m "remove gitignore files"
git push

Log Out Button

In the top right of all pages, on the navigation bar, users have an option to log out which will redirect them back to the login screen and they will need to re-sign in to access the application again.