Web Administration Dashboard - Developer's Guide

From RifidiWiki

Jump to: navigation, search


This document details the steps necessary to set up a development environment in order to modify Web Administration Dashboard.

Development tools

In developing this responsive html5 web application, we leverage on these technologies:

Npm

A package manager for javascript
Web site https://www.npmjs.com/package/npm

Yeoman

The web's scaffolding tool for modern web applications
Web site http://yeoman.io/

Node JS

A platform built on Chrome's JavaScript runtime for building network applications
Web site https://nodejs.org/

Grunt

A JavaScript task runner
Web site http://gruntjs.com/

Bower

A package manager for the web
Web site http://bower.io/

Bootstrap

HTML, CSS, and JS framework for developing responsive, mobile first projects on the web
Web site http://getbootstrap.com/

Angular JS

HTML enhanced for web apps
Web site https://angularjs.org/

Angular Modules

Find modules for AngularJS
Web site http://ngmodules.org/

Angular UI

Companion suite(s) to the AngularJS framework
Web site https://angular-ui.github.io/

WebStorm

A lightweight IDE for client-side development and server-side development with Node.js
Web site https://www.jetbrains.com/webstorm/

Configuring environment

In order to setup a development environment follow the next steps:

  1. Setup Edge Server Development Environment, as source code for web administration dashboard is located in folder Rifidi-SDK / RifidiHome / admin
  2. Download an appropriate license of WebStorm, or use another JavaScript IDE
  3. Open the project source code in IDE.
    Open webproject.png
  4. Inside Gruntfile.js project file, set the appropriate port number for nodejs development server to run
    Devportsetting webproject.png
  5. Open an operating system command console and locate the root of web app source code, where the Gruntfile.js file is located.
    Opencommandconsole webproject.png
  6. Start the development nodejs web server by running grunt serve command
    Runinggrunt webproject.png
  7. Ensure the server is successfully started by looking at console message
    Serverstarted webproject.png
  8. It automatically opens the default web browser pointing to web application
    Browse webproject.png
  9. Enjoy coding!
Personal tools