Skip to content

Developer documentation

Jump to bottom
Dominik Skalník edited this page May 7, 2016 · 7 revisions

Quick facts

  • We use SCSS for styling

  • The recommended IDE is VS Code

  • For the debugging of the TypeScript, vscode-chrome-debug is recommended

  • If you use the ionic serve command, the page get’s refreshed as soon as you save changes to the file

  • During the development follow the coding guidelines of the Microsoft

  • To ensure the quality of the product, do the code-reviews (TODO: decide on the process how to do it on the GitHub)

  • As a developer, please be active in the app folder only.

Environment setup

1) Install the Node.js, the LTS version is fine.

2) Install the Ionic CLI tools

 npm install -g ionic@beta (on the Mac OSX use sudo)

3) Go to the CitizenApp directory

4) Install the NPM dependencies

 npm install

5) Start the integrated web server

ionic serve

Useful tips:

Create a new page:

ionic generate page nameOfThePage --v2 --ts

Change the device:

http://YOUR_IP:8100/?ionicplatform=android | ios

Example file structure

The development-related files are in the app folder.

The built application is in the www folder.

The rest are the build-related tools and libraries, we do not need to touch these.

Some files and folders are omitted for brevity.

 .
 ├── app                     // The application enviroment.
 │   ├── app.ts              // The entry point of the application.
 │   ├── pages               // Folder containing the definitions of the pages.
 │   │   ├── pageX
 │   │   │   ├── page1.html  // Html of the page.
 │   │   │   ├── page1.scss  // Styles of the page, please follow the scss conventions.
 │   │   │   └── page1.ts    // The controller of the page. Please keep there only the interaction-related logic.
 │   │   └── tabs
 │   │       ├── tabs.html
 │   │       └── tabs.ts
 │   └── theme               // Contains the application global scss varaibles, mixins, etc.
 │       ├── app.core.scss
 │       ├── app.ios.scss
 │       ├── app.md.scss
 │       ├── app.variables.scss  // For example here are the application-wide color variables defined.
 │       └── app.wp.scss
 ├── config.xml             // Some Ionic configuration.
 ├── gulpfile.js            // Here the Gulp build tasks are defined. We don't need to touch these, Ionic reated these for us. For more info see: Gulpjs.com
 ├── ionic.config.js        // Is no longer necessary as Gulp take over the responsibilities defined in this file.
 ├── ionic.config.json      // ionic configuration.
 ├── package.json           // The Node.js dependencies are defined here.
 ├── tsconfig.json          // Configuration of the TypeScript to JS transpiler.
 ├── typings                // TypeScript's static types definitions. Some Typings are available here: https://github.com/DefinitelyTyped/DefinitelyTyped
 ├── typings.json
 └── www
     ├── build
     │   ├── css            // Folder containing the built css files out of the scss.
     │   ├── fonts          // Folder containing the (icon)fonts.
     │   ├── js             // Folder containing the JS
     │   │   ├── angular2-polyfills.js // Polyfill of the AngularJS2.
     │   │   ├── app.bundle.js         // Bundled built and minified sources of the application.
     │   │   ├── app.bundle.js.map     // JS map file. Useful for the reconstruction of the minified file.
     │   │   └── es6-shim.min.js       // ES6 shim.
     │   └── pages                     // Folder containing the HTML files of the pages.
     └── index.html         // Index.html file, the entry point to our application.

Git Branches

We use Git Flow in this repository. The main branch is therefore NOT meant for development. In the main branch only working Snapshots or releases should be commited. Git Flow gives us several branches to work with.

  1. develop branch is used for the main development work. A priori all developers should commit to this branch. If necessary you can create an own branch for your work. The name of that branch should look like devName.

  2. feature/ is a branch container for branches in that new features are developed. Each branch is named like feature/name.

  3. hotfix/ branch is a container for important bug fixes. There can only be one open at each time. A hotfix branch is closed when it is merged into develop.

  4. releases/ contains branches for release preparations. This won’t be very important for us.

We recommend to use Sourcetree as git client since Git Flow is implemented in it. If you create a new branch you should always use a descriptive name.

Example Interface

interface ClockInterface {
    currentTime: Date;
    /**
    * @param d      Comment for parameter ´d´.
    * @returns      Comment for special return value.
    */
    setTime(d: Date):number;
}

Testing server

@skaldo has developed a mock server that can help us with testing of the application. This server is located in:

 /RestServer

How to use it?

First of all

cd RestServer

Run

npm install

As soon as the npm dependencies get installed, you can use the mock server by running this command:

node index.js

It is possible to change the iteration as well as port using following params:

node index.js -p 8080 -i 2

Clone this wiki locally