มาสร้าง Dashboard จาก Dashing กัน

ChaingMai Maker Club เปิด Workshop การทำ Dashboard ด้วย Dashing และ deploy ขึ้น Heroku ซึ่ง Workshop ต่อเนื่องจาก Workshop ครั้งที่แล้ว เข้าใจว่าเป็นเรื่อง ESP8266 + MQTT + Thingspeak ดูน่าสนุกดี เลยมาลองเล่น Dashing บ้าง Dashing เป็นโครงการภายในของ Shopify เอาไว้ดูข้อมูลผ่านจอใหญ่ๆ ของ Shopify เองแถมเปิดโค้ด Dashing เป็นโอเพนซอร์สให้ได้พัฒนาต่อกันอีกด้วย หากนึกไม่ออกอาจจะดูตัวอย่างได้ที่หน้าโครงการ

โครงการ Dashboard แบบนี้มีอยู่หลายค่าย ไม่เว้นแต่ Mozilla ก็มีเช่นกัน ชื่อ Geckoboard เป็นบริการ และมี integration ต่างๆ ในการเชื่อมต่อกับบริการอื่นๆ อีกหลายตัว เพื่อดึงข้อมูลทางสถิติมาแสดงผล


จำได้ว่าเคยเขียนเกี่ยวกับ Geckoboard เมื่อนานมาแล้วท่านใดสนใจก็ลองค้นหาข้อมูลดูได้ กลับมาที่ Dashing กันก่อน วิธีการติดตั้งง่ายมากๆ เราสามารถติดตั้ง Dashing ผ่าน gem ได้ง่ายๆ ดังนี้
sudo gem install dashing
จากนั้น สร้าง dashboard ใหม่ดังนี้
dashing new myboard
cd myboard
สั่ง bundle เพื่อติดตั้ง component ให้ครบ
bundle
จากนั้นก็ start server ได้เลย
dashing start
เปิดเบราเซอร์ไปที่ http://localhost:3030 ก็จะพบ dashboard ของเรา

สำหรับ widget ใน dashboard พัฒนาเพิ่มเติมได้ง่ายๆ โดยใช้ coffee script ถ้าท่านใดสนใจก็ลองดูข้อมูลเพิ่มเติมได้ สำหรับท่านที่ไม่อยากเขียนเองก็ลองดู additional widget ที่มีคน contribute ให้ในโครงการก็ได้ ซึ่งมีอยู่หลายตัวเชื่อมต่อกับบริการต่างๆ ได้เลย เช่น Google Play, Google Analytics, JIRA, Bacula, CicleCI, GitHub เป็นต้น
ปิดท้ายด้วยการ deploy ขึ้น Heroku ก็ง่ายมากๆ เมื่อเราได้ board พร้อม widget ที่เราต้องการแล้ว สั่ง init git repo ได้เลยดังนี้
git init
เพิ่มโค้ดลงใน local repo
git add .
สั่ง commit ลง local repo
git commit -m "my dashboard"
จากนั้นใช้ toolbelt สร้าง project ขึ้นมาดังนี้
heroku apps:create myboard
Heroku จะตรวจสอบว่า directory ปัจจุบันมี git repo หรือไม่ถ้ามี Heroku จะ add remote git repo ให้อัตโนมัติ 🙂 เมื่อสร้างเสร็จแล้วก็สั่ง push ไปยัง heroku ได้เลยดังนี้
git push heroku master
ระหว่างนี้รอให้ git push ไฟล์ไปยัง heroku และ start service ในฝั่ง heroku เราก็จะสามารถเรียกใช้ app ผ่าน Heroku ได้แล้ว