Durbar Kandari Ventilator Web Application

# Durbar Kandari Ventilator Web Application A web application for monitoring and controlling ventilator. ### Features: - Visualize graph of various sensor data - Real time data communication with ventilator machine using firebase realtime database - Remotely controlling ventilator from web application - Connect with multiple ventilator - Responsive web UI to run the web application in different devices - Smooth UX and optimized graph visualization for device compatibility ### Language, Framework and technology - Javascript with React js ( for client side web application ) - Node JS ( for server side data computation ) - Firebase ( for user authentication, database and cloud function ) ### Tasks - [x] Analyze and test different network protocol (HTTP, MQTT, Web socket ) for fast data transaction - [x] Develop demo application for UI overview - [x] Testing [firebase realtime database](https://firebase.google.com/docs/database) with Node MCU / ESP 8266 to analyze the data transaction speed and compatibility - [ ] Develop an simulator program to simulate the data communication of our ventilator machine - [ ] Develop cloud function for [database trigger](https://firebase.google.com/docs/functions/database-events) to receive data from simulation program and send data from cloud to web application within few milliseconds - [ ] Develop two way communication between machine and web app - [ ] Design and develop responsive UI and data visualization component in web app - [ ] Develop the web application as [Progressive Web App ( PWA )](https://web.dev/progressive-web-apps/) - [ ] Test on different configurations of devices to ensure device and network compatibility ### Client side web application Our web application will be developed using [React JS](https://reactjs.org/) and primarily we have selected [Chart JS](https://www.chartjs.org/) for data visualization library as it uses HTML Canvas to render graphs. But we will do further analyzing to achieve more performance efficiency as our app will run in different browsers on different devices with different platform compatibility. The web application should always be accessible on any device that has internet access but the app user should avoid using browser like opera mini, uc mini as those browsers has various compatibility issues. Primarily we will test our app on chrome, firefox, edge on desktop and mobile. Browser support is very important as we will be visualizing graph in real time. The following web api should be available in a browser to access our web app. - Canvas ( Method of generating fast, dynamic graphics using JavaScript ). See browser support for Canvas API at this [link](https://www.quora.com/Which-browsers-support-the-HTML5-Canvas-element) - Web Sockets ( Bidirectional communication technology for web apps ). See browser support for web socket at this [link](https://caniuse.com/#search=web%20socket) Our web application will also be a progressive web app so that browsers can install the application and users could be able to run the web application as a stand alone mobile application. [Service worker](https://developers.google.com/web/fundamentals/primers/service-workers) for offline support and [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) for performance efficiency will also be used in the web application. ### Server side data computation Server side computation is necessary to to perform the following task: - Data analyzing and generating dynamic data if necessary - Run [cloud function](https://firebase.google.com/docs/functions) for [Firebase realtime database trigger](https://cloud.google.com/functions/docs/calling/realtime-database) - Send data to web app using web socket on *database trigger events* - Manage multiple connection with database associated for each We will be using firebase cloud function to run our server program. ## Contributing **I am new to web development** You can learn from wherever you want. But here are some learning path suggestions for quickly jump into this project. 1. Javascript core functionality ( [Quick tutorial link](https://youtu.be/Ukg_U3CnJWI) ) 2. ES6 [intro](https://youtu.be/9A_jkh2AKR8) , [basic concept](https://youtu.be/LTbnmiXWs2k?list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX) , [arrow function](https://youtu.be/oTRujqZYhrU?list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX) , [class](https://youtu.be/EUtZRwA7Fqc?list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX) and [modules](https://youtu.be/aQr2bV1BPyE?list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX) 3. React js [intro](https://youtu.be/N3AkSS5hXMA) , [tutorial link](https://youtu.be/Ke90Tje7VS0) 4. Node js [intro](https://youtu.be/uVwtVBpw7RQ) , [tutorial link](https://youtu.be/TlB_eWDSMt4) 5. Firebase [intro](https://youtu.be/O17OWyx08Cg) , [realtime datbase for web](https://youtu.be/noB98K6A0TY) 6. GitHub [intro](https://youtu.be/w3jLJU7DT5E) , [tutorial link](https://youtu.be/nhNq2kIvi9s) **I know react js, node js and firebase** Awesome ♥ Lets get started: Run the following commands to clone the repository and start coding 🔥 ```sh git clone https://github.com/Durbar-Kandari/dk-website.git cd dk-website npm install npm start ``` Firebase admin sdk authentication key will be provided to each team member. ## Conclusion This project is under development. Changes in instruction and guidance may come often in future. Stay alert for any changes on this documentation. Learn about Durbar Kandari at this link: [http://www.durbarkandari.org/](http://www.durbarkandari.org/)