EcoSwitch Administrator Website
- About The Project
- Software Module Overview
- Dependencies Between Modules
- Development and Build Information
- Getting Started
- Contact
The EcoSwitch website was designed to provide housing administrators and faculty with a way to register and install new devices, as well as monitor and control currently existing ones. The original problem statement required the EcoSwitch system to be tamper-proof, so the administration website was conceptualized and developed to meet that feature.
There are several pages that currently make up the EcoSwitch website. While some of them are simple in their functions and exist to provide information about the website and overall system, others have more significant purposes and provide access to the main features that are described in detail below.
All of these pages take the form of JS functions or components that are imported and linked together in the App.js file located in the src folder of this directory.
The home page provides an overview of our system and gives users an easy way to access the rest of the website's components, including the device registration form and housing portal sign in page.
ComponentReplace and StudentApp do not currently contain interactive content; however, they are placeholders that have been created to give users a more thorough understanding of the other features we have designed our product to contain. For example, we planned to allow the device's attachment to be swappable in case it somehow became damaged. This allows facility workers to simply replace the attachment rather than the entire device, making it a cost-effective solution. Additionally, while the mobile app is not currently available through any app store, it is an important part of our deliverables and should be accessible to our users with any future usage of our system. Finally, the error page provides users with a readable error message in case they try to access a page that does not exist. These last three pages will not be shown below due to their lack of content.
.png)
.png)
This page is directly accessible from the website's home page and does not require users to be logged in for usage. It is important to the system's initial installation, as it allows individuals to register new EcoSwitch devices. It consists of a simple form that requests for the user to input the device ID, installation building location, installation room number. Additionally, we have designed a QR code that links to this page and would be placed within the device's packaging so users can easily scan it to set it up.
These pages allow administrators to create an account and use it to sign in. They can also use Google as a provider and sign in with their Google account. This feature has been implemented with the JavaScript Firebase library and connects the application to a Firebase project that logs all user activity.
The dashboard contains all the information for every EcoSwitch device that currently exists in the database. It is shown in a dynamic table that is bound to the database's entries. The empty space below was meant to hold a graph that provides a visual for the temperature and humidity levels for each building; however, this was not implemented due to a lack of time.
In addition to this page, there are the DeviceAdjust and StudentAdd pages that can be accessed through the sidebar. Both pages have a similar format that presents two tabs for the user to click on. Each tab brings up a separate form that does the opposite action of the other tab. For the DeviceAdjust page, there is a lock and unlock tab that allows admin to either prevent student input for a certain location and shut down all its FCUs or unlock the location and provide students with access to the devices in it again. For the StudentAdd page, one tab provides a form for registering students to a specific EcoSwitch device and the other provides a form for removing a student from a device's user list.
Finally, the profile page is another placeholder that has been designed to eventually display user information, such as one's name and email. Since this page does not contain any content, it has been emitted from the image set below.
A high-level description of all the website's main features are provided in this section, respective to the list of pages provided in the "Pages" section.
The UI and UX of the website's main pages have been designed to be user-friendly and provide content that helps them easily find their way around. The colors have also been chosen to reflect EcoSwitch's logo and general aesthetic. This is immediately evident upon the arrival of the home page, as it provides a navigation bar and large buttons that redirect users to the sign in page and device registration form.
As mentioned in the "Register" section, the EcoSwitch website offers the ability for users to register new EcoSwitch devices. This effectively adds them to the database and allows them to start communicating with the rest of the system. It is meant to be accessible and easy to use so the facility workers who would be setting up the devices in the dormitories would be able to do so without any difficulties. At the moment, the submission form does not have any error checking that guarantees the location and EcoSwitch ID is valid; however, this would be necessary to establish before product deployment.
Users are able to create an account with their email and a chosen password or through Google sign in. Upon a successful sign in request, they will be redirected to the dashboard page and their activity will be documented in the corresponding Firebase project. Currently, any individual can achieve this, though we would like there to be greater restrictions to those who can view all the EcoSwitch data and interact with the devices. However, we are unable to use Kerberos due to the security risks that would introduce. As a result, the dashboard does not require user authenitcation and the login feature has been implemented for concept development with the integration of Firebase.
A significant capability of the website is to communicate with the back end and its various databases through API calls. This is achieved with the JavaScript fetch function with the endpoint being chosen based on whether a GET or POST request is being made and from which database the information is being queried. API calls are used to register new devices, assign and remove students to and from EcoSwitch devices, attain all the information stored by each device, and lock and unlock specified locations.
This section provides a flowchart that illustrates all the dependencies and connections between the aforementioned software modules, as well as any relevant functions within them.
All installed dependencies for the project can be found within the package.json and package-lock.json files located in this directory.
This project was developed and built using the following programs and versions:
- NodeJS v14.17.6
- NPM v8.6.0
Install the software mentioned above in the Development and Build Information section. This varies per system and operating system. Please refer to the respective websites for further installation information.
Once the repository is cloned, navigate to this directory (.../EcoSwitch/EcoSwitch Website) and run the following code to automatically build the project and install its dependencies:
npm installFor development mode, npm can be used as well.
- In the project directory, start the session with the following command:
npm startThis will start the development server and the project can be accessed through localhost port 3000 (http://localhost:3000).
OR
- Access the project's pre-production build, hosted using Amplify.
- Deployed Version
- Please note that popups may be blocked, so the best way to create an account and subsequently log in is by entering your email and choosing a password through the sign-up page.
If there are any further questions about the application project, please contact the lead developer via email.