SmartCitizen Web

The SmartCitizen front-end. Working together with SmartCitizen API.

Development

Using nvm (recommended but optional) do:

1. Install the correct Node version:

nvm install

2. Load the correct version:

nvm use

3. Install dependencies

npm i

4. Start development server

gulp serve

To be able to login from localhost:8080 with our real username:password connected to the SC API, we need to comment out the following lines in app.route.js:

/* Allow cookies across *.smartcitizen.me Apps */
$cookiesProvider.defaults.path = '/';
$cookiesProvider.defaults.domain = '.smartcitizen.me';

(We are looking for a better solution).

Prerequisites

You need git to clone the repository. You can get git from http://git-scm.com/.

We also use a number of node.js tools to initialize and test the Web App. You must have node.js and its package manager (npm) installed. You can get them from http://nodejs.org/.

Also gulp: npm install -g gulp (with sudo if you are using Mac).

Clone the project

Clone the repository using:

git clone https://github.com/fablabbcn/smartcitizen-web.git
cd smartcitizen-web

Install dependencies

• Install tools to manage and test the application: npm install.
• No need of bower install, npm install will take care of it.

Docker quickstart (optional)

If you want to use Docker in development mode, you should enable the volume: in docker-compose.yml so you won't need to rebuild after every file change. The image needs you to do npm install locally before running the container. It needs the node_modules/ to exist.

docker-compose up

Use Gulp tasks

• gulp or gulp build to build an optimized version of your application in /dist
• npm run dev (or gulp serve) to launch a browser sync server on your source files
• gulp serve:dist to launch a server on your optimized application
• gulp test to launch your unit tests with Karma
• gulp test:auto to launch your unit tests with Karma in watch mode
• gulp protractor to launch your e2e tests with Protractor. Tests are in the ./e2e/ folder.
• gulp protractor:dist to launch your e2e tests with Protractor on the dist files
• npm run deploy to publish the project to Github pages (gh-pages branch).

Note: in case you see something like:

Error: Command failed: fatal: unable to read c6a8d370f3e95d9110eca4a03b704bd8940ca40b

Run: rm -Rf $(node -e "console.log(require('path').join(require('os').tmpdir(), 'tmpRepo'))")

Talking to a different API

In app.route.js the app can be configured to talk to another API: RestangularProvider.setBaseUrl('http://localhost:3000/v0');

Directory structure

Best Practice Recommendations for Angular App Structure

Git Commit Guidelines

Visit https://github.com/ajoslin/conventional-changelog/blob/master/CONVENTIONS.md

Naming conventions for files

Same for all types of components: ..js Ex: kit.controller.js, sensor.service.js, profileTools.constant.js

Naming conventions for components

Controller: Controller. Ex: MapController Service: . Ex: device, kit, user Constructor: . Ex: User, Kit. Note: Constructors are actually made using services. Constants: . Ex: PROFILE_TOOLS

For data that has been resolved from the router, I've normally appended 'Data' to the name.

Deployment

Master branch is auto deployed to https://smartcitizen.me/ which is on Github Pages

Funding

This work has received funding from the European Union's Horizon 2020 research and innovation program under the grant agreement No. 689954