Table of Content

1/ Install StravistiX
- 1.1/ From Chrome / Opera Store
- 1.2/ From continuous integration
2/ Install from sources
3/ How to develop in ?
4/ Git repository structure and GitFlow
5/ Code Editor and Indentation plugin used

1/ Install StravistiX

1.1/ From Chrome / Opera Store

Go to http://thomaschampagne.github.io/stravistix/

1.2/ From continuous integration

Latest develop build: https://ci.appveyor.com/project/thomaschampagne/stravistix/branch/develop/artifacts

Install steps to follow: https://github.com/thomaschampagne/stravistix/wiki/How-to-install-stravistix-build-archive

2/ Install from sources

2.0/ Infos

StravistiX is using bellow frameworks/libs/tools:

Node package manager (npm) provided by nodejs.org to fetch modules from npmjs.com.
Gulp task runner.
Chart.js Simple yet flexible JavaScript charting.
underscore.js that provides a whole mess of useful functional programming helpers.
AngularJS 1.* for options page.
Angular Material design 1.* for options page.
TypeScript that adds typing & class-based syntax over javascript then compile back to JavaScript (ES5/ES2015/ES6).

Learn TypeScript in 5 minutes. Try it and buy it !.

2.1/ Install NodeJS with node package manager

You must run npm cli command via nodejs.org to fetch JS dependencies.

2.2/ Install Gulp task runner and TypeScript via node package manager

npm install --global gulp-cli typescript

2.3/ Install gulp plugins dependencies

npm install

This will install required gulp plugins in order to run project tasks. Gulp plugins are specified into ./package.json file as devDependencies

2.4/ Build the project

gulp build

First, this will download others JS dependencies (underscore, angularjs, chart.js, ...) specified in plugin/package.json file if not already downloaded.

Next, all the extensions files from plugin/ will be copied to dist/ folder.

2.5/ Loading the extension

You can now load extension from chrome://extensions chrome tab:

In chrome, open new tab and type chrome://extensions then enter
Tick Developer Mode checkbox
Click Load Unpacked Extension button, then choose dist/ folder (this is where you have manifest.json file)
Done !

3/ How to develop in ?

3.1/ Making changes and view them

Development must be done inside plugin/ folder. You can code using TypeScript OR Javascript. But i strongly recommend you to use TypeScript.

Remember: Here you can learn TypeScript in 5 minutes Most IDE support TypeScript through plugins (Atom, Sublime, WebStorm, VisualStudio code, ...) @see https://www.typescriptlang.org/

In chrome, use dist/ folder as Unpacked Extension for development

To apply files changes from plugin/ to dist/ you must run the build command:

gulp build

You can automatically execute this task on a file change with command:

gulp watch

3.2/ Create a package archive

gulp package

This will create zip archive of dist/ folder in package/StravistiX_vX.X.X_[date].zip

3.3/ Clean the project

gulp clean

This will clean dist/, package/ & plugin/node_modules/ folders

4/ Git repository structure and GitFlow

This project repository is fitted for GitFlow branches management workflow. Learn more @ http://nvie.com/posts/a-successful-git-branching-model/

5/ Code Editor and Indentation plugin used

I used Atom editor with atom-typescript and atom-beautify plugin for code indentation.

Others Atom plugin list i recommend: https://gist.github.com/thomaschampagne/fa8fa9615b2fac236ac3

barthus13/stravistix