General Update
The month of January consisted of more research and planning, creating a list of tasks, dividing up these tasks, and working on them. Each member of the team tackled a specific task to work on for the final product. The last two weeks were spent learning new software, learning how to use and work with the chosen microcontroller (ESP32) as well as trying to use its Wi-Fi and Bluetooth features, communicating between hardware and software platforms, as well as creating our own server for data storage and authentication. The tasks are divided up as follows:
Stage 1 Tasks: | Notes | Member |
Front-End Website | React (JavaScript) | Hetal |
Back-End Bridging | Python --> Django | Laila |
Database + Server | PostgreSQL | Selina |
Data Collection | Arduino/ESP32 --> PostgreSQL | Rachel |
| | |
Stage 2 Tasks: | Notes | Member |
Backend Processing | Python (after data is received) | TBD |
This post will mainly cover the progress made with the Front-end React Web Application.
Why do we need a web application?
A front-end environment is necessary to be able to communicate with different types of users in real time. There will be two different types of users which include players and supervisors (coaches, therapists, etc.). Each user can follow each other and create a team within their account. If a player were to get impacted in the head by a large amount of force, it will directly alert their corresponding supervisors through the front-end environment (a web application) such that the player can get assessed immediately.
Why not a mobile application?
Last term, a mobile application was chosen as the front-end communication platform which has since been changed into a web application that can also be accessed on a mobile phone. This was because it is easier to see large amounts of data on a laptop/computer/desktop than on a mobile device. It also doesn’t restrict the user to only use their phone as they will be able to access the website through any preferred device. A mobile application will have to be published on PlayStore or AppStore which can be time consuming, and it will need to be made and tested for both Android and iOS devices. Thus, a web application was decided instead.
How did we choose to use React?
The team decided to use React for the front-end web application. The table below shows a brief summary of the advantages and disadvantages that the team considered:
Software Framework/Language | Advantages | Disadvantages |
React (JavaScript) | interactive programming language, commonly used, more familiar, dynamic | not as easy to learn as HTML but feasible |
HTML + CSS | easy to learn | mainly static, slow |
PHP | language of databases, dynamic | complex language, hard to learn in a small amount of time |
Progress with React Website
Since JavaScript and React were relatively new, we watched several tutorials on how to set up, create and run a website as well as looked into several documentations and resources online.
React uses node.js as its backend which was downloaded, installed and set up
A new react web application was set up on Visual Studio with npm as its default (yarn would work just as well but chose to keep the default)
Able to run the website and troubleshoot any errors
Created a file structure with appropriate website sections and created a folder with images and icons used for the website design. This can be seen in the images below.
Created a section for user data
Created a navigation bar to link different sections of the website together
Next steps:
Finish adding in images, icons and design to each page
CSS formatting to complete website
Login/Sign-Up and authentication
Data storage
Privacy permissions
Connect With Server
Opmerkingen