Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learn Dashing Widget in 90 minutes

32,564 views

Published on

Learn how to write Dashing widget in 90 minutes

Published in: Technology
  • Sex in your area is here: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2Q98JRS ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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 06/16/16
  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 06/16/16
  4. 4. Environment  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 online service for exercise http://c9.io , http://codio.com Learn Dashing Widget4 06/16/16
  5. 5. Environment using c9.io  https://c9.io/  New Ruby workspace  In console: gem install dashing Learn Dashing Widget5 06/16/16
  6. 6. Exercise 1: Install Dashing  Create new dashboard  $ dashing new dashboard  $ cd dashboard  Remove twitter (need both)  Comment out twitter in Gemfile  Delete twitter.rb in jobs (dir)  Start it  $ bundle  $ dashing start –p 8080 # default is 3030  Point your browser to http://localhost:8080  Or Run panel (if c9.io) Learn Dashing Widget7 06/16/16
  7. 7. Widget  Dashboard : 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 Widget8 06/16/16 Dashboard Widget
  8. 8. Exercise 2: Add new widget  Generate `log` widget  $ dashing generate widget log  Add into Dashboard  # update sample.erb  Check log.html  Change data-view from Log to Text  View can be used in other widget “instance” /”object” !! Log shall be capitalized for data-view !!! Learn Dashing Widget9 06/16/16 https://gist.github.com/larrycai/79cf4c63927957a37eba/a909ff38b411eff8cf714c29973a7dc26d9f309e
  9. 9. Exercise 3: Update the view  Update log.html  Update log.scss  Copy the view using list widget css (list.scss -> log.scss)  Change inside .widget-list -> .widget-log Learn Dashing Widget10 06/16/16 # log.html <h1 class="title" data-bind="title"></h1> <ul class="list-nostyle"> <li> <span class="label">Access Log</span> <span class="value" data-bind="access">0</span> </li> <li> <span class="label">Event Log</span> <span class="value" data-bind="event2">0</span> </li> </ul> <p class="updated-at" data-bind="updatedAtMessage"></p>
  10. 10. Data in Dashing  Each widget has the data-id (like log), which provides the URL access point to update the data  Push data to dashing using REST API (see bottom)  $ curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "title": "Current Hour Rate" }' http://<your url>/widgets/log Learn Dashing Widget11 06/16/16
  11. 11. Exercise 4: Control the Data  Update the data using curl for welcome message  Find in the bottom of your dashboard (remove 443, front of http)  Update the data using curl for log  $ curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", “access”: “100“, “event2”:”87”}' http://<url>/widgets/log  Update the data using curl for log  # Save the request into log.json  $ curl -d @log.json http://<url>/widgets/log  Write your own script from anywhere!! (homework) Learn Dashing12 06/16/16
  12. 12. Data in Dashing (more)  Push data from anywhere using any language besides curl  i.e. Python in jenkins job  Push data in dashing jobs (ruby)  jobs/sample.rb Learn Dashing Widget13 06/16/16
  13. 13. CoffeeScript  CofferScript is like javascript to control views when data comes (like color) (log.coffeescript) Learn Dashing Widget14 06/16/16
  14. 14. (Skipped) 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 Widget15 06/16/16 # 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")
  15. 15. (Skipped) 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 Widget16 06/16/16
  16. 16. Summary  Dashing is a Radiator framework  Dashboard consists of Widgets  Widget:  Connect with widget view (html/css) (may share one) coffeescript is used to update view when data comes  Connect with widget id (expose as HTTP/REST API)  Update Dashboards can be done  HTTP/REST API using any language  Or internal ruby based jobs (crontab) inside Dashing Learn Dashing Widget17 06/16/16
  17. 17. 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 Widget18 06/16/16

×