Larry cai <larry.caiyu@gmail.com>
Agenda
 Introduction
 Exercise 1: Install Dashing
 Exercise 2:Add one widget
 Exercise 3: Update the view
 Exercise 4...
Introduction
Learn Dashing Widget3
 Dashing is a Sinatra based framework that
lets you build beautiful dashboards.
 Key ...
Environment Preparation
 Ruby environment (Ruby 1.9.x+, Node.Js 0.10+)
 Ubuntu 14.04
 $ sudo apt-get install ruby, ruby...
Exercise 1: Install Dashing
 Create new dashboard
 $ dashing new dashboard
 $ cd dashboard
 Remove twitter
 Comment t...
Widget
 Dashboard : sample.erb (ruby template) contains widget
 Dashboard is created with widgets
 Pre-made 50+ widgets...
Exercise 2: Add new widget
 Generate `log` widget
 $ dashing generate log
 Add into Dashboard
 $ update sample.erb
 (...
Exercise 3: Update the view
 Update the view using buzzword widget css
Learn Dashing Widget8 05/14/14
# log.html
<li>
<sp...
Data in Dashing
 2 ways to get the live data
 Each widget has the data-id (like valuation)
 Push data to dashing using ...
Exercise 4: Control the Data
 Update the data using curl
 Update the data using curl with file
 $ curl -d '{ "auth_toke...
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...
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 j...
Reference
 http://shopify.github.io/dashing/
 https://github.com/Shopify/dashing/wiki/Additional-
Widgets
 http://dashi...
Upcoming SlideShare
Loading in...5
×

Learn Dashing Widget in 90 minutes

10,079

Published on

Learn how to write Dashing widget in 90 minutes

Published in: Technology
1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,079
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
104
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide

Learn Dashing Widget in 90 minutes

  1. 1. Larry cai <larry.caiyu@gmail.com>
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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>
  9. 9. 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" }' http://192.168.56.152:3030/widgets/valuation  Pull data in dashing jobs (ruby)  jobs/sample.rb Learn Dashing Widget9 05/14/14
  10. 10. 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
  11. 11. CoffeeScript Learn Dashing Widget11 05/14/14
  12. 12. 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")
  13. 13. Pull data in Jobs  Jobs/sample.rb  $ dashing generate job sample_job Learn Dashing Widget13 05/14/14
  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
  15. 15. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×