Build your own secure and real-time dashboard for mobile and web
-
Upload
coldfusionconference -
Category
Technology
-
view
283 -
download
0
Transcript of Build your own secure and real-time dashboard for mobile and web
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Build your own secure and real-time Dashboard for Mobile and WebKailash Bihani
© 2016 Adobe Systems 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
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Dashboard?
A UI that organizes and presents information in a way that is easy to read
3
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Why?
“if you can’t measure it, you can’t improve it.”
4
-Peter Drucker
© 2016 Adobe Systems 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
© 2016 Adobe Systems 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
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Server
7
Various systems in the network run the Monitoring Agent
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Server
8
Collected data pushed to a FTP location periodically
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Server
9
Data queried by server periodically
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Server
10
Server processes the data
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Server
11
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DEMOTHE MONITORING DASHBOARD
12
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Dashboard
13
SummaryServer
Other ScreensAPI Manager
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Dashboard
14
Hey Server, I am a monitoring dashboard and I am up
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Dashboard
15
No Problem. I have added you. You will now be served
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Dashboard
16
Hey component, this is the dashboard. Can you please come up?
© 2016 Adobe Systems 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
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Dashboard
18
Hey server, give me the data for the IP: xyz
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Dashboard
19
Here’s the data for the IP: xyz
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Architecture - Dashboard
20
Hey xyz, here’s your data
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CODE SNIPPETSMonitoring Dashboard and Server
21
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Websockets
Define the various channels
Application.cfc
22
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Websockets
Register as soon as summary page loads
23
Summary.cfm
Summary.js
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Websockets
Server publishes the data
24
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Websockets
Data captured by the client
25
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Websockets
Websockets over SSL ColdFusion should run over SSL
Make changes in admin
26
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Analytics
To find when was the machine last down
27
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Report Generation
Using HTMLTOPDF
28
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Notifications
Send mail using CFMAIL
29
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Zing Charts
Create graphs using Zing Charts
30
© 2016 Adobe Systems 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
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
© 2016 Adobe Systems 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
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DEMOFOR ECOMMERCE DASHBOARD
34
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Summary
Key Learnings Securing your application
Use websockets for real-time communication
35
© 2016 Adobe Systems 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 “[email protected]” or “[email protected]”
36
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Questions?
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Thank You