View this project live: https://team1-iot.firebaseapp.com/
The aim of the project, which will help Data Work Wales in achieving its objectives, is to build a modularised learning platform in the form of a web application to assist Trainers, Apprentices and Communities in developing sensor based, Internet of Things Use Cases – all managed through a centralised learning platform. Peter Trott, the Managing Director, stated three example Use Cases; Monitoring of Fridge Temperatures in a hospital ward, assisting people with autism to detect if they slip under the water when in the bath and thirdly, monitoring heavy metal pollution for contamination in rivers.
The aim of the project is to build a generalised learning platform that involves the use of an Arduino to feed data using sensors with live and historic data graphs with the ability to produce a notification based on given criteria (email/SMS).
Built with
- Hardware - Arduino UNO board with provided sensors (e.g. thermometer)
- Database - Firebase: https://team1-iot.firebaseio.com/
- IoT framework - johnny-five
- Backend - Node.js server
- Frontend - React.js client
- State Management – Redux, Redux Saga, Redux Thunk
- Routing - react-router
- Charting libraries - EON.js, Chart.js
- HTTP Client - axios
- Authentication - Firebase Auth API
- Hosting: Firebase
- Real-time data transfer - websockets
- Email framework – nodemailer
- Styling: Ant.d, node-sass, normalize.css
- Development: Redux Chrome Tools, Nodemon
- Accessibility: jsx-a11y
- Testing: Enzyme
- Authentication
- Customised User Experience
- User Profiles
- Admin Area
- Use Cases
- Email notifications
- Full range of CRUD operations
- Tips and tricks
- Feedback system
- Community Forum
- Documentation
- Form validation
- Highly dynamic and customised design
- Notification system generated when sensors values fall above/below range
- Form validation
Clean, high contrast was implemented to ensure that it provided an optimum experience for users who are visually impaired
- Autism adapted design
- Every care has been taken to implement as many feature as possible to ensure the most optimum experience for visually impaired users
- Testing with Chrome Vox
- Implementation of React a11y library, use of aria-label and React features for enhanced screen reading compatability
Styling has been primarily achieved through use of an external library – Ant Design. This has been further customised with use of inline, dynamic css styling and css/scss.module files which have allowed us to style components and functionality further to our own choosing. Alternative options styling that we could have chosen include a variety of other frameworks, such as React-Material-UI or Boostrap.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Alternatively, you can run
$ npm test -- --coverage
Runs the server in the development mode using Nodemon.
This currently is set-up to post data to Firebase and live data to client via websockets.
Alternatively, you can run 'node server/index' from terminal.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance, ready for deployment to Firebase
Please follow these steps when setting up the Arduino for the first time
After correctly setting up your Arduino Uno as per the relevant Docs and having connected it to your computer via a USB cable, please ensure that you have downlaoded and installed the Arduino IDE. On Arduino IDE, go to Tools > Port and ensure that the correct board (Arduino Uno) is connected to the correct port - tty.usbmodem… for Mac, cu.usbmodem…for Windows.
- On the IDE, copy the StandardFirmata.cpp script from the project directory 'scripts folder' and run in the IDE
- lternatively, on the IDE. Open File > Example > Firmata > StandardFirmata
- Click the upload (right arrow) button and wait for a message from the IDE displaying "Done uploading"
- Close the IDE
- Create an account for Firebase
- Import firebase.json from Server/data/Firebase/Firebase.json
- Edit baseURL from server/axios-instance to the url of the database you created in firebase.
Provide step by step series of examples and explanations about how to get a development env running.
$ npm install
$ npm startAs a Trainer
- Login using these credentials:
- username: [email protected]
- password: testing
- Create new use case at the bottom of the main menu
- Edit use cases by clicking on a use case and go to the settings section
- Edit user details in Admin Area
- Add new feedback for a Use Case
- Change the list of support sensors in the Sensors tab in Admin Area
- Update details, change role and delete users from Users tab in Admin Area
The only way to create a new trainer account is through Admin Area page accessed by the [email protected] account. Find the user you want to change its role to a trainer in the Users section from the right-side menu. Then change the role of that user from Apprentice to a Trainer. This user now has all the privileges [email protected] has.
As an Apprentice
- Login/sign up to apprentice user account
- Example Apprentice Account
- username: [email protected]
- password: testing
- Example Apprentice Account
- Can only look at use cases assigned by trainer
- Look at sensor readings in the use case page
- Can change email and sensor settings
As a Community
- Login/sign up to community user account – select community mode and select Newport from the dropdown list
- Password for Newport account: newport16
- Can only look at the use cases associated with the community
- Look at sensor readings in the use case page
- Can change email and sensor settings
- Post messages on the community forum page
- Antd
- Axios
- bootstrap
- dateFormat
- EON
- Nodemailer
- Nodemon
- PropTypes
- React-App-Rewired
- React-Redux
- React-Router-Dom
- React a11y
- React Chart JS 2
- ReduxSaga
- Redux Thunk
- Redux
- Socket.io
- Socket.io-client
Jest and Enzyme were implemented to test the functionality of components through component testing and snapshots. Jest was also used to test the implementation of Redux.
React frontend
React frontend was structured using best practise methods. Components hold all stateless, functional components used in the project whereas Containers hold all stateful, class based components. Routers holds all routing for the application. Store hold all actions, reducers and sagas used within the implementation of advanced Redux in the project.
Node.js backend
Node.js app was structured with a models folder to hold all the data-related logic that used within the application - including the retrieval of data from Arudino, sending off data to React frontend using websockets and sending sensor data to Firebase.
- Enhanced Security
- Notifcation system
- Improved feedback system
- Make design responsive for mobile, laptop and tablet devices
- Setting up of a CI-CD pipeline for easier depolyments