Edanaga project - Environmental Decision ANAlysis with Games

Get started

To run, you just have MongoDB installed and running, and NodeJS installed.

• Start MongoDB
• Clone the repo
• npm install to install API dependencies and npm start to start the API
• Open a new terminal and navigate to the client directory, npm install to setup the Angular dependencies, and npm start to start the local development server
• Open http://localhost:4200 to see the application

Detailed setup & deployment documentation

Introduction

An online preference elicitation survey, following the "Swing" procedure (a standard in Multi-Criteria Decision Analysis). This survey aimed at collection experimental data. This project was developed by MEAN Stack and deployed on http://www.heruko.com:

• Mongo DB : http://mlab.com
• Express.js : ~4.11.1
• Angular : ~5.2.2
• Node.js : ~8.11.0

You can find a deployed version of this Web Application:

• Survey 1
• Survey 2
• Results for survey 1
• Results for survey 2

Run on your local machine

1. Prerequisite You should install Mongo DB, npm and node.js on your local machine.

After cloning the project, first you need to run below commands on your terminal to activate your local Mongo DB:

sh
$ mongod

In another tab:

sh
$ mongo
// to create a db with "eawag" name on mongo 
> use eawag

Then run "npm start" in the mean directory of the project if your local server is connected to your local mongodb, then you will run "npm start" in the client subfolder to compile your client side.

sh
$ npm start

In another tab:

sh
$ cd client 
$ npm start

Run -> http://localhost:4200

Deployment

1. Prerequisite Before everything, you should have installed Git, npm and node on your local computer. Also, you need an account on Heroku and Mlab.

Configuration

Ensure you are connected to your Heroku account on your local machine.

sh
$ heroku login
/// Please complete your authentication process

First, make an app on heroku. The name of the app should be a unique name.

Run below commands on your project directory. "eawag" was reserved here, you can choose another name for your app.

sh
$ heroku create eawag
//Creating ⬢ eawag... done
//https://eawag.herokuapp.com/ | https://git.heroku.com/eawag.git

You can use the "git remote" command to confirm that a remote named Heroku has been set for your app:

sh
$ git remote -v
heroku  https://git.heroku.com/eawag.git (fetch)
heroku  https://git.heroku.com/eawag.git (push)

But if you already made app on heroku web, please follow "For an existing Heroku app" method.

Then, you need to set your database information which should be in Mongo DB type. Here, we are using Mlab.

api/models/db.js

javascript
var dbURI = 'mongodb://localhost/eawag'; // to run locally
if (process.env.NODE_ENV === 'production') {
  dbURI = process.env.MONGOLAB_URI; // to deploy
}

If you would like to deploy, you must save your db url as environmental variable on the server. More Information

Please replace [dbuser:dbpass], [host1:port1/dbname] with appropriate information. You will get it when you registered at Mlab and made a database. Then you need to add a databse user.

sh
$ heroku config:set PROD_MONGODB=mongodb://[dbuser:dbpass]@[host1:port1/dbname]

For instance, if the name of your registered database was "eawag", this is a kind of url

mongodb://[dbuser]:[dbpassword]@ds115523.mlab.com:15523/eawag

And [dbuser], [dbpassword] are your created user for this databse, not your mlab account!

Also, you can verify it by:

sh
$ heroku config:get MONGODB_URI

After configuration, you don't need to repeat it again.

Deployment client-side (Angular)

After applying your changes in client-side, which written in Angular framework, you must be able to deploy it successfully. You can find client-side files in /client directory.

sh
$ cd client
$ ng build

Copy everything within the output folder (dist/ by default) to a folder on the server.

sh
cp -r  client/dist ../eawag/

Deployment on Heroku

Before you can deploy your app to Heroku, you need to initialize a local Git repository and commit your application code to it.

sh
$ cd ..
$ git init
$ git add .
$ git commit -m "My first commit"

Deploy on heroku:

sh
$ git push heroku master

Run your app URL, for example here "eawag" -> https://eawag.herokuapp.com/

Server-side

Node.js was used as server-side scripting here which is doing backend stuff like collecting data from client side and save them in DB.

app.js

This file is a mean file which runs on the server at the beginning.

/api

This Folder contains the configuration of MONGO DB and REST API.

• api/config

passport.js

This file makes the restriction for admin page by login page.

• api/controllers

survey.js

This file implements the HTTP GET request for both surveys as finding all data in each database.

survey1.js & survey2.js

This file implements the HTTP POST request for each survey as describing all requested elements to handle this request.

• api/models

survey1.js & survey2.js

These files describe the schema of your Mongo DB regarding each survey.

• api/routes

index.js

This file is called by app.js which itself calls sub files to map them. Here you can make the restriction to access some routes on your server side. All these routs are linked to your server.

javascript 
// [SH] Use the API routes when path starts with /api
app.use('/api', routesApi);

This means, all HTTP API address which is implemented, will be under subdirectory /api.

Also, you must link a route to your HTTP requests logic here.

javascript
// This makes an HTTP GET request with http://yourweb.com/api/getsr
router.get('/getsr', survey.surveyfind);

Client-side

Angular 5 was used as client-side scripting here which handles client-side pages. All files of client-side are in /client subdirectory.

Site Map : start > token > introduction > branch1 > branch1-r > branch2 > branch2-r > branch3 > branch3-r > branch4 > branch4-r > branch-ul > branch-ul-r > end

Survey 1

/client/src/app/survey-v1

Survey 2

/client/src/app/survey-v2

Adding a new page

If you want to add a new component to the project, you can follow below instruction:

Please run below commands in the project folder.

sh
$ cd client/src/app/
$ ng generate component newcomponent

You can choose any other name for your component instead of "newcomponent".

It will generate a folder with four subfiles.

• newcomponent.component.css -> CSS file for your component
• newcomponent.component.html -> HTML file for your component
• newcomponent.component.spec.ts
• newcomponent.component.ts -> Js file in TypeScript form for your component

You should configure it in app.module.ts file.

javascript
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  //....
  // give a specific route to your component 
  { path: 'newcomponent', component: NewcomponentComponent },
  { path: '**', component: PageNotFoundComponent }
];

When you call sub address /newcomponent, it will route to this path and run your component.

Apendix

A Comparison of Common DOS and Linux Commands

Version control

Author and Contributors

 <br />

Ali Sahandabadi

<Ali.Sahandabadi@gmail.com>

Please feel free to contact me or project owner Dr. A.H. Aubert.

License

• MIT license

• Copyright @ EAWAG