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


Agenda

What is a dashboard? Features required in a dashboard? How ColdFusion helps Demo Architecture Code Snippets Summary Q & A

2


Dashboard?

A UI that organizes and presents information in a way that is easy to read

3


Why?

“if you can’t measure it, you can’t improve it.”

4

-Peter Drucker


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


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

Various systems in the network run the Monitoring Agent



8

Collected data pushed to a FTP location periodically



9

Data queried by server periodically



10

Server processes the data



11


DEMOTHE MONITORING DASHBOARD

12


Architecture - Dashboard

13

SummaryServer

Other ScreensAPI Manager



14

Hey Server, I am a monitoring dashboard and I am up



15

No Problem. I have added you. You will now be served



16

Hey component, this is the dashboard. Can you please come up?



17

Hey API Manager, this is the component. Please serve me the data? My IP is xyz



18

Hey server, give me the data for the IP: xyz



19

Here’s the data for the IP: xyz



20

Hey xyz, here’s your data


CODE SNIPPETSMonitoring Dashboard and Server

21


Websockets

Define the various channels

Application.cfc

22


Websockets

Register as soon as summary page loads

23

Summary.cfm

Summary.js


Websockets

Server publishes the data

24


Websockets

Data captured by the client

25


Websockets

Websockets over SSL ColdFusion should run over SSL

Make changes in admin

26


Analytics

To find when was the machine last down

27


Report Generation

Using HTMLTOPDF

28


Notifications

Send mail using CFMAIL

29


Zing Charts

Create graphs using Zing Charts

30


Secure

Run ColdFusion over SSL Websocket served over SSL Run API Manager over SSL Import proper certificates to run CFHTTP

31


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


DEMOFOR ECOMMERCE DASHBOARD

34


Summary

Key Learnings Securing your application

Use websockets for real-time communication

35


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


Questions?


Thank You

build your own secure and real-time dashboard for mobile and web

Technology