Learn Dashing Widget in 90 minutes

17 %
83 %
Information about Learn Dashing Widget in 90 minutes

Published on May 6, 2014

Author: larrycai

Source: slideshare.net


Learn how to write Dashing widget in 90 minutes

Larry cai <larry.caiyu@gmail.com>

Agenda  Introduction  Exercise 1: Install Dashing  Exercise 2:Add one widget  Exercise 3: Update the view  Exercise 4: Control the data  Exercise 5: Update the data with color (coffeescript)  Exercise 6: Pull the data (jobs)  Reference Learn Dashing Widget2 05/14/14

Introduction Learn Dashing Widget3  Dashing is a Sinatra based framework that lets you build beautiful dashboards.  Key features:  Use premade widgets, or fully create your own with scss, html, and coffeescript.  Widgets harness the power of data bindings to keep things DRY and simple. Powered by batman.js.  Use the API to push data to your dashboards, or make use of a simple ruby DSL for fetching data.  Drag & Drop interface for re-arranging your widgets. Source http://shopify.github.io/dashing 05/14/14

Environment Preparation  Ruby environment (Ruby 1.9.x+, Node.Js 0.10+)  Ubuntu 14.04  $ sudo apt-get install ruby, ruby-dev, gem  $ sudo apt-get install bundler, g++,make,  $ sudo apt-get install nodejs  $ sudo gem install dashing  Windows (use virtualbox with UbuntuVM)  http://virtualboxes.org/  http://virtualboxes.org/images/ubuntu-server/  Or use codio.com for exercise online (recommend) Learn Dashing Widget4 05/14/14

Exercise 1: Install Dashing  Create new dashboard  $ dashing new dashboard  $ cd dashboard  Remove twitter  Comment twitter in Gemfile  Delete twitter.rb in jobs (dir)  Start it  $ bundle  $ dashing start  Point your browser to localhost:3030 Learn Dashing Widget5 05/14/14

Widget  Dashboard : sample.erb (ruby template) contains widget  Dashboard is created with widgets  Pre-made 50+ widgets (market place)  Create own widget using css/html  Widget (set of related files)  widgetnumbernumber.html –View (html)  widgetnumbernumber.scss – Style (css)  widgetnumbernumber.coffee – Data (coffeescript) Learn Dashing Widget6 05/14/14

Exercise 2: Add new widget  Generate `log` widget  $ dashing generate log  Add into Dashboard  $ update sample.erb  (data-id=“log”, data-view=“Log”,data-value=“Hello World”) Learn Dashing Widget7 05/14/14 https://gist.github.com/larrycai/79cf4c63927957a37eba/a909ff38b411eff8cf714c29973a7dc26d9f309e

Exercise 3: Update the view  Update the view using buzzword widget css Learn Dashing Widget8 05/14/14 # log.html <li> <span class="label">Access Log</span> <span id="access" class="value-ok" data-bind="access">0/0</span> </li> <li> <span class="label">Event Log</span> <span id="event2" class="value-warning" data-bind="event2">0/1</span> </li>

Data in Dashing  2 ways to get the live data  Each widget has the data-id (like valuation)  Push data to dashing using REST API  $ curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "title": "Current Hour Rate" }'  Pull data in dashing jobs (ruby)  jobs/sample.rb Learn Dashing Widget9 05/14/14

Exercise 4: Control the Data  Update the data using curl  Update the data using curl with file  $ curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", “access": “1/0"}' http://localhost:3030/widgets/log  $ curl -d @log.json http://localhost:3030/widgets/log Learn Dashing10 05/14/14

CoffeeScript Learn Dashing Widget11 05/14/14

Exercise 5: Update the color with data  <error>/<warning> if there is error, it is red, if there is warning, it is yellow. Otherwise green  Use css class to change the color  Use chrome developer to debug .. Learn Dashing Widget12 05/14/14 # log.coffee ready: -> # This is fired when the widget is done being rendered onData: (data) -> # Fired when you receive data for key,value of data break if key in ["id","updatedAt"] id = $(@node).find("##{key}") console.log(id) [error,warning] = value.split("/") if error != "0" id.attr("class","value-error")

Pull data in Jobs  Jobs/sample.rb  $ dashing generate job sample_job Learn Dashing Widget13 05/14/14

Exercise 6: Pull data in jobs  Write log job to simulate fetching the log and send event to widget  $ dashing generate job log  Update the data in every 5 second with random data  Check sample.rb Learn Dashing Widget14 05/14/14

Reference  http://shopify.github.io/dashing/  https://github.com/Shopify/dashing/wiki/Additional- Widgets  http://dashing.challengepost.com/submissions  https://www.andreydevyatkin.com/archives/getting- started-with-dashing/  http://www.alexecollins.com/content/team-dashboard- dashing/  Log widget gist: https://gist.github.com/larrycai/79cf4c63927957a37eba Learn Dashing Widget15 05/14/14

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Learn Dashing Widget in 90 minutes - Technology

Learn how to write Dashing widget in 90 minutes
Read more

Shopify Dashing auth_token - Stack Overflow

... http://www.slideshare.net/larrycai/learn-dashing-widget-in-90-minutes But when dashing web server is up and ... Shopify Dashing auth_token.
Read more

Hotness Widget for the Dashing dashboard from Shopify - GitHub

Dashing Hotness Widget. Are you dashing? Are you hot? Then you need the Dashing Hotness Widget! See the blog post for more details. About. This widget is ...
Read more

RescueTime widget for Dashing.io · GitHub

RescueTime widget for Dashing.io. Skip to content. All gists; ... Learn more about clone URLs ... (5*60 minutes).
Read more

dashing | Juju

Deploy dashing to bare metal and public or private clouds using the Juju GUI or ... * Widgets harness the power of data bindings to keep things DRY and ...
Read more

Newest 'dashing' Questions - Stack Overflow

Help Center Detailed answers to any questions you might have ... http://www.slideshare.net/larrycai/learn-dashing-widget-in-90-minutes ...
Read more

Install on CentOS Linux release 7.0.1406 (Core) json error ...

Install on CentOS Linux release 7 ... For Ubuntu slide 4 of this http://www.slideshare.net/larrycai/learn-dashing-widget-in-90-minutes ... dashing (1.3.4 ...
Read more

Dashing | LinkedIn

DASHING Kuldeep Lakra Talent Acquisition at Jobline Consultant India Pvt Ltd. New Delhi Area, India. Human Resources. Current HR Executive at Job line ...
Read more

«90 minutes» - Android Apps on Google Play

... "90 Minutes" for readers collects the most relevant and interesting information about the world of ... Learn more. Permissions. View details ...
Read more