Installer ruby (Extraire ce fichier et l’ajouter dans le path, attention choisir plutôt le zip 32bit si votre windows est 32 bits)

• MSYS2 est une plate-forme de construction pour Windows. Il fournit un environnement similaire à Unix, une interface en ligne de commande et un référentiel logiciel facilitant l’installation, l’utilisation, la construction et le port de logiciels sur Windows.
• Installer msys2 (pas besoin d’admin rights)
• Ouvrir une console cmd, aller dans le dossier bin du repertoire d’install de ruby et faire ‘ridk install’ ⇒ Cette commande installera des outils indispensables pour compiler certains packages natives ruby sous windows (Bash, autotools, Make, Git, GCC, GDB...)
• Mettre à jour les packages pour compiler les librairies ruby natives :
• Ouvrir la console msys2 et faire:
• • pacman -Syu
• • pacman -Su

• Installer bundler “> gem install bundler”
• Installer smashing“gem install smashing” (ou d’un coup “gem install bundler smashing”)

• Créer un nouveau projet “smashing new my_awesome_project”
• Installer les dépendance du projet “bundle” ⇒ Bundler est un gestionnaire de dépendance pour ruby
• Lancer le procher “smashing start” ⇒ Smashing utilise un serveur web ruby appelée ‘Thin’ pour lancer le projet. Thin est le serveur web ruby le plus utilisé. On pourrait en utiliser d’autres comme puma ‘(regarder comment lancer dashing avec puma)” ou ‘unicorn’ ou ‘Passenger’.

• If “Failed to build gem native extension” problem with gem install (proxy issue) run: export http_proxy=http://xxx.myproxy:port export https_proxy=http://xxx.myproxy:port ou gem install nom_du_module_a_installer -p http://user:password@proxy:port/

• if “eventmachine” problem with smashing start (Unable to load the EventMachine C extension; To use the pure-ruby reactor, require 'em/pure_ruby'), then run : gem uninstall eventmachine gem install eventmachine --platform ruby Ces commandes doivent être lancer depuis le bash cmd de windows (et non gitbash, mysys2 ou autres…).

Every new Dashing project comes with sample widgets & sample dashboards for you to explore. The directory is setup as follows:

• Assets — All your images, fonts, and js/coffeescript libraries. Uses Sprockets
• Dashboards — One .erb file for each dashboard that contains the layout for the widgets.
• Jobs — Your ruby jobs for fetching data (e.g for calling third party APIs like twitter).
• Lib — Optional ruby files to help out your jobs.
• Public — Static files that you want to serve. A good place for a favicon or a custom 404 page.
• Widgets — All the html/css/coffee for individual widgets.

Voici l'exemple d’un dashboard avec le nom sample.erb dans le dossier /dashboard. Il sera accessible depuis l’url mydashingapp:mydashingport/sample ⇒ ERB is a ruby templating engine that allows you to mix html & ruby. It is the default Rails engine for rendering views. <% content_for(:title) { "My super sweet dashboard" } %> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div data-id="karma" data-view="Number" data-title="Karma" style="background-color:#96bf48;"></div> </li> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div data-id="valuation" data-view="Number" data-title="Current Valuation" data-prefix="$"></div> </li> </ul> </div>

Chaque widget est représenté par un element div qui a besoin des attribut data-id et data-view: Sets the widget ID which will be used when pushing data to the widget. Two widgets can have the same widget id. Push data to that id, and each instance will be updated.

• data-view: Specifies the type of widget that will be used. data-view=”Mywidget” ⇒ le widget utilisé sera ./widgets/mywidget
• data-xxx : will pass xxx variable to the widget logic (widget code).
• Les élements “li” sont utilisées pour faire le layout en utilisant gridster. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns.
• data-row : correspond au numéro de la ligne sur laquelle le widget se positionnera
• data-col : est le numéro de la colonne
• data-sizex : correspond à la largeur du widget en nombre de bloc
• data-sizey : idem que data-sizex mais pour la hauteur

Un widget est composé de 3 fichiers (dans le dossier /widget/monwidget) : an HTML file used for layout and bindings a SCSS file for styles a coffeescript file which allows you to handle incoming data & functionality

<h1 class="title" data-bind="title"></h1> <h2 class="value" data-bind="current | shortenedNumber | prepend prefix"></h2> <p class="change-rate"> <i data-bind-class="arrow"></i><span data-bind="difference"></span> </p> <p class="more-info" data-bind="moreinfo | raw"></p> <p class="updated-at" data-bind="updatedAtMessage"></p>

Les widgets utilisent les batman bindings pour mettre à jour leur contenues. Le DOM se met automatiquement à jour dès que les données changent. Les pipe ‘|’ permettent de formater les données (comme les pipes angular). By default, whenever a widget receives JSON data, it mixes in the received data onto itself. This means that if you pass in data with a title attribute, the widget's title variable will change, and so will all DOM elements bound to it. No need to handle that yourself. ⇒ Cofeejs est du code compilé en javascript (comme typescript). En coffeescript il n’y a pas de parenthèse ni d'accolades et les fonctions sont tous sous forme ‘arrow fonction’. Les variables précédés par ‘@’ sont des variables d’instance tandis que les fonctions précédés par ‘@’ sont des fonctions statiques. Les héritages de class sont disponibles dans Coffejs. Dans notre exemple tous les widgets héritent de Dashing.Anatomie

Les jobs permettent d’amener les données aux widgets en spécifiant un widget_id et en lui passant le JSON data. Les JOBS sont écrient en ruby. Les jobs utilisent le 'rufus-scheduler' qui est une librairie cron pour ruby.

#:first_in sets how long it takes before the job is first run. In this case, it is run immediately SCHEDULER.every '1m', :first_in => 0 do |job| send_event('karma', { current: rand(1000) }) end This job will run every minute, and will send a random number to ALL widgets that have data-id set to 'karma'. You send data using the following method: send_event(widget_id, json_formatted_data) Jobs are where you put stuff such as fetching metrics from a database, or calling a third party API like Twitter. Since the data fetch is happening in only one place, it means that all instances of widgets are in sync. Server Sent Events are used in order to stream data to the9. shboards.

Au lieu d’utiliser les jobs ruby, on peut directement mettre à jour les widgets par les APIS http en postant le json à l’url http://my_dashig:port/widgets/widget_id. Pour la sécurité on peut inclure un auth_token (le même que celui dans le config.ru).

curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "current": 100 }' http://localhost:3030/widgets/karma. L’API dashboard permet également d’envoyer des évènement à tout un dashboard. Pour l’instant, seul l’évènement “reload” est disponible.

curl -i -d '{ "auth_token": "YOUR_AUTH_TOKEN", "event": "reload"}' http://localhost:3030/dashboards/sample.