Learn Dashing Widget in 90 minutes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Learn Dashing Widget in 90 minutes

on

  • 2,973 views

Learn how to write Dashing widget in 90 minutes

Learn how to write Dashing widget in 90 minutes

Statistics

Views

Total Views
2,973
Views on SlideShare
2,959
Embed Views
14

Actions

Likes
2
Downloads
25
Comments
1

3 Embeds 14

http://www.slideee.com 12
https://twitter.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 赞一个!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Learn Dashing Widget in 90 minutes Presentation Transcript

  • 1. Larry cai <larry.caiyu@gmail.com>
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. CoffeeScript Learn Dashing Widget11 05/14/14
  • 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. Pull data in Jobs  Jobs/sample.rb  $ dashing generate job sample_job Learn Dashing Widget13 05/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. 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