# iCovid - Marihacks 2021

A web and AR application that lets you gain insight in the latest COVID-19 trends through a live simulation with accurate data on the current COVID cases from around the globe and the predicted spread of the virus according to certain parameters that you define.

* [Link to the web app](https://unruffled-keller-faf15c.netlify.app/)
* [Link to the AR version of the simulation (Be prepared to turn on your camera to test it out!)](https://afternoon-sierra-62737.herokuapp.com/live-simulation-ar)

| [2D interactive map](https://unruffled-keller-faf15c.netlify.app/live-simulation) | [Charts](https://unruffled-keller-faf15c.netlify.app/charts) | [Augmented Reality](https://afternoon-sierra-62737.herokuapp.com/live-simulation-ar) |
| -------- | -------- | -------- |
|  | |  |

---

## Walkthrough
A walkthrough of how you can build this app on your own from scratch!

### Assumptions
Before following this tutorial, we will assume that you have basic knowledge of programming in Javascript (methods, for loops,etc.), HTML and CSS, as well as a little bit of Machine Learning experience.

### Technologies Used
Here is a brief overview of the technologies that will be used to create this app:

**Programming languages:**
* Javascript
* HTML & CSS

**Frameworks and packages**
In order to run this website, you will need:
* **[npmjs](https://www.npmjs.com/get-npm)**: Install the following npm packages!
* **[Node.js](https://nodejs.org/en/)**: Allows asynchronous calls!
* Frontend: **[Vue.js](https://www.npmjs.com/package/vue)**
* [bootstrap-vue](https://www.npmjs.com/package/bootstrap-vue): Integrates bootstrap components to speed up our frontend development!
* [leaflet](https://www.npmjs.com/package/leaflet): Draws a map for us!
* [axios](https://www.npmjs.com/package/axios): Connects our frontend with our backend!
* [vue-chartjs](https://www.npmjs.com/package/vue-chartjs): Display pretty charts!
* [vue-sidebar-menu](https://www.npmjs.com/package/vue-sidebar-menu): Displays a sidebar menu!
* [vue-top-progress](https://www.npmjs.com/package/vue-top-progress): Displays a progress bar at the top of our website!
* [vue-router](https://www.npmjs.com/package/vue-router): Routing and dynamic hot reload feature!
* [vuetify](https://www.npmjs.com/package/vuetify): Add a slider component!
* [vue-head](https://www.npmjs.com/package/vue-head): Modify the title of the web pages!
* Backend: **[Express.js](https://www.npmjs.com/package/express)**
* [cors](https://www.npmjs.com/package/cors): Send cross-server requests to communicate with our frontend!
* [nodemon](https://www.npmjs.com/package/nodemon)(optional): Reloads the server whenever a file is saved, speeds up the development!
* Augmented reality:
* [ar.js](https://github.com/AR-js-org/AR.js)
* [A-frame](https://github.com/aframevr/aframe)
* Machine Learning:
* [TensorFlow.js](https://www.npmjs.com/package/@tensorflow/tfjs)
* [TensorFlow.js for Node.js](https://www.npmjs.com/package/@tensorflow/tfjs-node)

A more complete version of all the packages that we're using as well as their specific versions can be found in the `package.json` file [here](https://github.com/Miniapple8888/iCovid-MariHacks/blob/main/package.json).

**Version Control System**
* **[git](https://git-scm.com/downloads)**
* **[github](https://github.com/)**

**Deployment**
* **[Netlify](https://www.netlify.com/)**: Hosts our frontend!
* **[Heroku](https://www.heroku.com/)**: Hosts our backend!

------
### Setting up our app
After installing `npm.js` and `node.js` from the links above, create a new directory and move inside:

mkdir myapp
cd myapp

Initialize your application:

npm init

After you have finished initializing the application, you can run the following commands to install each npm package individually or copy from the `package.json` file:

npm i [package-name]

For installing `vue` globally, run this:

npm install -g @vue/cli

You can then use the `vue create` command to create your vue.js project inside the root directory of your project:

vue create client

You can install all the packages under `vue.js` in the `client` directory:

cd client
npm i [package-name]

### File architecture
This will be the file architecture for this project!

myapp
|-ar/               # Augmented reality part
|-client/           # Frontend with Vuejs
| |-public/
| |-src/
|   |-assets/       # Stores images for our website
|   |-components/   # Components
|   |-router/       # Mimics router from frontend
|   |-views/        # Web pages
|   |-App.vue       # To have our sidebar menu!
|   |-main.js       # Starting point of the frontend part
| |-.gitignore
| |-package.json
|-middlewares/      # All of our useful functions
|-node_modules/     # Contains all of our node modules
|-routes/           # Receives requests from frontend
|-tensorflow/       # Contains the machine learning files
|-.gitignore        # git ignores the specified files and folders
|-app.js            # Starting point of the backend part
|-package-lock.json
|-package.json      # Package information useful for npm

### Starting with the backend
In `app.js` file, write the following:

/* Getting our main packages */
const express = require('express');
const cors = require("cors");
const morgan = require('morgan');
const bodyParser = require('body-parser');
const app = express();

const corsOptions = {
    optionsSuccessStatus: 200,
}
// Setting up our middlewares
app.use(cors(corsOptions));
app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// Main routing
require('./routes')(app);

// Running the app on port 8082
const port = process.env.PORT || 8082;
app.listen(port, () => {
  console.log("App is running.");
});

// exports app so routes can use it :)
module.exports = {app}

Now we can run:

npm start

Alright, cool, our backend is running! You can check it out at [http://localhost:8082](http://localhost:8082). For now, it should be displaying a blank page as we have nothing in it.

### Starting the frontend
Run the following in the root directory of the project:

cd client
npm run serve

Our frontend is open on [http://localhost:8081](http://localhost:8081). You should see a nice welcome page from Vue!

In `http-common.js` file:

import axios from 'axios';
// For production
let origin = 'https://nameOfYourHerokuApp.herokuapp.com/';
if (process.env.NODE_ENV === 'development') {
  origin = 'http://localhost:8082'; /* this is where our backend server is hosted! */
} 
export default axios.create({
  baseURL: origin,
  headers: {
    'Content-type': 'application/json',
  },
});

Here we are setting up `axios`, so we can use it in our components and views!

Our `main.js` file:

/* importing our plugins! */
import Vue from 'vue'
import VueSidebarMenu from 'vue-sidebar-menu'
import App from './App.vue'
import { BootstrapVue } from 'bootstrap-vue';
import Vuetify from 'vuetify';
import router from './router/index.js';
import BarChart from './BarChart';
import Pie from './Pie';

// Importing the CSS!
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import "vue-sidebar-menu/dist/vue-sidebar-menu.css";
import 'vuetify/dist/vuetify.min.css';

// Using all of our plugins!
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.use(VueSidebarMenu);
Vue.use(Pie);
Vue.use(Vuetify);
Vue.component('BarChart', BarChart);
Vue.component('Pie', Pie);
Vue.config.productionTip = false;

// Creates new Vue with router as an argument
new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

In the `App.vue` file, we display our sidebar menu:

<template>
  
  <div id="app">
  <!-- Our custom sidebar menu --!>
    <sidebar-menu :menu="menu" :hideToggle="menuCollapsed"/>
    <div>
        <router-view></router-view>
      </div>
  </div>
</template>

<script>
import { SidebarMenu } from 'vue-sidebar-menu';
export default {
  name: 'App',
  components: {
    SidebarMenu,
  },
  data() {
    return {
      menu: [
        {
          header: true,
          title: 'iCovid',
          hiddenOnCollapse: true
        },
        {
          href: '/',
          title: 'Home',
          icon: 'fa fa-home',
        },
        {
          href: '/live-simulation',
          title: 'Live Simulation',
          icon: 'fa fa-gamepad',
          child: [
            {
              href: '/live-simulation/ar',
              title: 'Augmented Reality',
              icon: 'fa fa-mobile'
            }
          ]
        },
        {
          href: '/charts',
          title: 'Charts',
          icon: 'fa fa-chart-line',
        }, 
        {
          href: '/statistics',
          title: 'Statistics',
          icon: 'fa fa-chart-bar',
        },
        {
          href: '/self-test',
          title: 'Self-test',
          icon: 'fa fa-vial',
        },
        {
          href: '/about',
          title: 'About',
          icon: 'fa fa-user',
        }, 
     ],
    menuCollapsed:true,
  }
},
}
</script>

<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.1/css/all.min.css');
body {
  font-family: 'Font Awesome 5 Free',Avenir, sans-serif;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.v-sidebar-menu .vsm--arrow::after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
}
.btn {
  font-family: 'Font Awesome 5 Free',Avenir, sans-serif;
  color: #fff;
}
</style>

## How you can change it!

## Installation and Usage
To install and run this website without complemeting the tutorial, first clone the repository:

git clone https://github.com/Miniapple8888/iCovid-MariHacks.git

Then change directory into it

cd iCovid-MariHacks

Then run the following command to start the server:

npm start

To start the website, run the following command in a seperate terminal in the ```iCovid-MariHacks/client``` directory:

npm run serve

To access the website, visit this **[link](http://localhost/8081)**:
Or copy paste it:

http://localhost/8081