afm-client/README.md

   1 ### Sample client application for Application Framework Binder
   2
   3 ![AFB-Client screenshot](http://iot.bzh/images/afm-client.jpg)
   4
   5 _(Application Framework Binder can be found on https://github.com/iotbzh/afb-daemon)_
   6
   7 ## Installation
   8
   9 Install HTML5 development toolchain on your host
  10
  11     1. Check out this repository
  12        git clone https://github.com/iotbzh/afm-client.git
  13
  14     2) Install NodeJs [not used on target]
  15        zypper install nodejs
  16        yum install nodejs
  17
  18     3) Install building tools [bower, gulp, ....]
  19        npm install # this install all development tool chain dependencies
  20        sudo npm install --global gulp  # this is not mandatory but it will make your live simpler
  21
  22
  23 ### Overload ./app/etc/AppDefaults.js with '.noderc.js'
  24     var config= {
  25         APPNAME : 'AFBclient',   // AppName is use as main Angular Module name
  26         FRONTEND: "Frontend",    // HTML5 frontend  [no leading ./]
  27         URLBASE : '/opa/',       // HTML basedir when running in production [should end with a /]
  28         APIBASE : '/api/',       // Api url base dir [should end with a /]
  29     };
  30     module.exports = config;
  31
  32     WARNING: in current development version Frontend/services/AppConfig.js is not updated automatically
  33     you should manually assert that backend config is in sync with frontend config.
  34
  35 ### Build project
  36     gulp help
  37     gulp build-app-dev
  38     rsync -az dist.dev xxxx@agl-target:afm-client
  39
  40 ### Test with Application
  41
  42     # Start AppFramework Binder
  43         export MYWORKSPACE=$HOME/Workspace
  44         $MYWORKSPACE/afb-daemon/build/afb-daemon --port=1234 --verbose --token=123456789 --rootdir=$MYWORKSPACE/afm-client/dist.dev
  45
  46     Point your browser onto: http://agl-target:1234/opa
  47
  48     Note:
  49       - do not forget '/opa' that should match with your config.URLBASE
  50       - if you change --token=xxxx do not forget to update ./Frontend/pages/HomeModules.js
  51       - Force HTML/OPA reload with F5 after each HTML5/OPA update or new pages may not be loaded.
  52       - When reloading HTML/OPA with F5 do not forget that your initial token wont be accepted anymore. You should either:
  53         + restart to clean existing session
  54         + cleanup AJB_session cookie
  55         + start an anonymous web page to get a fresh and clean environment.
  56
  57 ### Move to Target
  58     cd $MYWORKSPACE/afm-client
  59     gulp build-app-prod
  60     scp -r ./dist.prod/* user@mytarget:/rootdir/afm-client
  61     ssh user@mytarget "afb-daemon --port=3001 --token='' --rootdir=/rootdir/afm-client"
  62     http://mytarget:3001/opa
  63
  64 ### Directory structure
  65     /AppClient
  66     |
  67     |---- package.json
  68     |---- bower.json
  69     |---- gulpfile.js
  70     |
  71     |---- /Frontend
  72     |     |
  73     |     |---- index.html
  74     |     |---- app.js
  75     |     |
  76     |     |---- /styles
  77     |     |     |
  78     |     |     |---- _settings.scss
  79     |     |     |---- app.scss
  80     |     |
  81     |     |---- /Widgets
  82     |     |     |
  83     |     |     |--- Widget-1
  84     |     |     |...
  85     |     |
  86     |     |-----/Pages
  87     |           |--- Home-Page
  88     |           |...
  89     |
  90     |
  91     |---- (/dist.dev)
  92     |---- (/dist.prod)
  93