Downloaded 67 times
Uploaded byColdFusionConference
Build your own secure and real-time dashboard for mobile and web
This document discusses how to build secure and real-time dashboards for mobile and web using ColdFusion. It covers the features required in a dashboard like real-time updates, graphs, notifications and report generation. It demonstrates the architecture of a monitoring dashboard with ColdFusion running on a server collecting and processing data that is displayed. It provides code snippets for implementing websockets, analytics, report generation and security. Customizable dashboards can be created by changing configuration files.
Build your own secure and real-time dashboard for mobile and web
- 1. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Build your own secure and real-time Dashboard for Mobile and Web Kailash Bihani
- 2. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Agenda What is a dashboard? Features required in a dashboard? How ColdFusion helps Demo Architecture Code Snippets Summary Q & A 2
- 3. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Dashboard? A UI that organizes and presents information in a way that is easy to read 3
- 4. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Why? “if you can’t measure it, you can’t improve it.” 4 -Peter Drucker
- 5. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Features required? 5 Real-time CFWEBSOCKET Responsive HTML Frameworks Customizable Modular code Graphs ColdFusion based Zing Charts Notifications CFMAIL Report Generation CFHTMLTOPDF Secure SSL/API Manager
- 6. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Server 6 SYSTEM: Runs the monitoring agent SERVER FTP Location DASHBOARD Collects the data Stores the data Processes the data Displays the data
- 7. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Server 7 Various systems in the network run the Monitoring Agent
- 8. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Server 8 Collected data pushed to a FTP location periodically
- 9. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Server 9 Data queried by server periodically
- 10. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Server 10 Server processes the data
- 11. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Server 11
- 12. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. DEMO THE MONITORING DASHBOARD 12
- 13. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Dashboard 13 SummaryServer Other ScreensAPI Manager
- 14. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Dashboard 14 Hey Server, I am a monitoring dashboard and I am up
- 15. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Dashboard 15 No Problem. I have added you. You will now be served
- 16. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Dashboard 16 Hey component, this is the dashboard. Can you please come up?
- 17. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Dashboard 17 Hey API Manager, this is the component. Please serve me the data? My IP is xyz
- 18. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Dashboard 18 Hey server, give me the data for the IP: xyz
- 19. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Dashboard 19 Here’s the data for the IP: xyz
- 20. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Architecture - Dashboard 20 Hey xyz, here’s your data
- 21. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. CODE SNIPPETS Monitoring Dashboard and Server 21
- 22. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Websockets Define the various channels Application.cfc 22
- 23. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Websockets Register as soon as summary page loads 23 Summary.cfm Summary.js
- 24. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Websockets Server publishes the data 24
- 25. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Websockets Data captured by the client 25
- 26. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Websockets Websockets over SSL ColdFusion should run over SSL Make changes in admin 26
- 27. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Analytics To find when was the machine last down 27
- 28. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Report Generation Using HTMLTOPDF 28
- 29. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Notifications Send mail using CFMAIL 29
- 30. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Zing Charts Create graphs using Zing Charts 30
- 31. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Secure Run ColdFusion over SSL Websocket served over SSL Run API Manager over SSL Import proper certificates to run CFHTTP 31
- 32. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 32
- 33. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. How to make it Customizable? Change the configuration files Dashboard transforms to serve any purpose (Monitoring, Ecommerce, etc.) No front-end or back-end code change required 33
- 34. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. DEMO FOR ECOMMERCE DASHBOARD 34
- 35. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Summary Key Learnings Securing your application Use websockets for real-time communication 35
- 36. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. What Next? Source Code can be found at: https://www.dropbox.com/sh/9oef2jh0t28a9jq/AAATd85J4gxP5pcFTsw8BF7Ma?dl=0 For any information, mail me at “bihani@adobe.com” or “kailashkbihani@gmail.com” 36
- 37. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Questions?
- 38. © 2016 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. Thank You