Mechanical Engineering Machine Scheduler

The goal of the project is, to create a website that will have an automated system for students and professors alike that improve upon the current whiteboard based system for scheduling and reserving machine times for mechanical engineering students.

=Problem Definition=

Background
As Mechanical Engineer students at the University of Idaho, there is currently not an efficient way to schedule machine shop times for specific machines, outside of the email-based system currently in use. As enrollment increases and the university grows the current system of requesting machine shop times with machines will be difficult to manage, and an improved system will help greatly in this regard. This system will also allow for automatic powering off and on of machines for their specific scheduled machine usage times.

Deliverables
Deliverables for our project consist of:

Specifications
Our website uses multiple systems in order to communicate with the user and the database. Below is a basic outline of how these systems communicate with each other.

=Design Considerations=

React
A JavaScript library – it is loosely referred to as a framework – for building user interfaces. React is one of the most commonly used web frameworks for frontend development. React’s virtual DOM makes the manipulation of the DOM faster than other frameworks due to JSX syntax. It can be used server side or client side. The component-based architecture allows for easy reuse of code throughout a project, allowing for easier team development.

Pros: + Reusable components + Scalable + Big open source community + Has many add-on components we can use from other developers – extensive libraries and extensions + Can be for native or web apps (for later down the road) Cons - No clear documentation compared to other frameworks - JSX – mixture of HTML and JavaScript. Could be large learning curve - Fast paced development – may lead the website to needing more maintenance than wanted - None of the team has used React before

Potential Cost: React is an open source – so there are no costs involved in using the framework.

Conclusions: This framework appears to be one of the more durable and scalable of the frameworks for the project that it will be implemented for. This will allow for easier updates and maintenance of the site in the future, as well as during the development.

Angular
Angular is an open source JavaScript framework that can build web applications in JavaScript, HTML, and Typescript. From the initialization of an Angular app it provides built-in features for animation, HTTP service and materials. Angular uses more of a traditional approach of the MVC for the design than just a view design like React and Vue use.

Pros + Lots of documentation and tutorials available + TypeScript – much easier adaptation of JavaScript + Has a lot of add-on components we can use from other developers – extensive libraries and extensions + Some experience with team members with the framework + Angular CLI

Cons - Not as component-based as React – may cause merge conflicts in the team - Considered complicated to learn - May be a heavier-weight framework than we need - Many different versions out – with the most recent not having as much documentation (most notably significant dependency changes) Potential Cost: Angular is an open source – so there are no costs involved in using the framework.

Conclusions: This framework adds a lot more features right out of the box than other frameworks, leading to a potentially bloated project. While the feature built into the framework are useful, other frameworks allow for the same functionality without as much clutter.

=Project Learning=

Website Design: ( React Web Framework )
Use Case: - The React framework makes web development easier by initializing a starter app that comes with a built-in npm/yarn scripts, testing folders, and a base starter page to work from. This allows for a more organized approach to starting the web page. - The component-based architecture allows for easy re-usability of code. - The large open-source community and libraries means that there will be more off the shelf technology available for use.

Setup: The repository was initialized with the create-react-app started application for React. This app is aimed towards beginners and single page applications but allows for scaling for more complicated websites later. Required Environment Setup: Node.js -- version: 12.11.1 Npm – version: 6.11.3 Yarn – version: 1.19.0 Brew – version: 2.1.11 Npx – version: 6.11.3

Complications: - No current testing of the component has happened, so there are no concerns of complications yet.

Material-Ui Dashboard
Material-Ui Dashboard template is a mixture of an admin and dashboard template. It allows for more of a pre-made admin role organization in the website, dashboard navigation for ease of use for the website, and other add-ons that can be used including a login portal. Use Case: - The template would allow for already built-in admin, navigation, and login portal pages for the project. Allowing for more time to focus on other aspects of the project. - The design is simple and clean, allowing for less time for the team to design a clean design.

Complications: - Unfamiliarity of React and JavaScript now is holding us back from implementing the design at the moment, but later addition of the individual components is possible. - The template would need to be gutted of a lot of features that the project either doesn’t need or want to implement for the website.

React-Big-Scheduler NPM:
React-big-scheduler NPMpackage is an immediately useful and easy to install component that could possibly be useful for multiple points in our project. The organization of adding resources and locking the time slots allows for more of a product that is useful for our project.

Use Case: - This npm package allows for easy installation and use of the scheduler for the project. This component would also be easy for support teams down the road to update the calendar with new releases of the component. - Simplistic look and design make the calendar easy to read, as well as easy for us to change the functionality of how a user can interact with it.

Complications: - No current testing of the component has happened, so there are no concerns of complications yet.

API Flow
Overview: - Mongoose manages create, read, update, and delete (CRUD) actions with model schema with database​ - Express creates a route and HTTP method for the frontend to utilize​ - Fronted can receive JavaScript Object Notation (JSON) objects or create, update, and delete data via HTTP method​

Security Design
Overview: - Express.js uses Passport.js ldap-auth package to validate user against University Active Directory​ - If valid Passport.js returns with the JavaScript Object Notation (JSON) object of the user and then checks the database for the user role​ - Database returns JSON object of the user the role​ - Passport.js assigns a JSON Web Token (JWT) token and returns a JSON object with the User and Token which is passed to the frontend via API endpoint =Final Design=

=Validation=

=Team Members=

=Additional Documentation=

Project Schedule Our revised schedule that we kept to and accomplished. Our first schedule. This was our projected time frame for completing this project, and we did not keep to this schedule.

Meeting Minutes



Presentations



Client Interview