Getting Started: How to Set Up Your "Data as a Feature" Project

Getting Started
(Part 2 / 5) Data as a Feature webinar series
How to set up your data as a feature project

3
Hello from the project team!
3
Shane Swiderek
Product Marketing Manager, TIBCO
San Francisco, CA
Chad Lumley
Senior UI Developer, projekt202
Seattle, WA
Rachael Ross
Solutions Architect, projekt202
Seattle, WA
Crystal Phiripes
Program Manager, projekt202
Dallas area, TX
Sherman Wood
Director Solution Consulting WW, TIBCO
San Francisco, CA
Xavier Harrell
Sr. Experience Designer, projekt202
Dallas area, TX

4
Agenda
4
Project overview
Defining the user
experience foundation
Setting up the
application environment
Preparing data

5
Build a complete demo app to show the
best practices of user experience and
web application design, development
process and implementation; leveraging
Jaspersoft's "embedded BI" data
visualizations, reports and self service.
Bikeshare Project Goal
© Copyright 2000-2019 TIBCO Software Inc.

Embedded BI Reporting
Inform the massesBI that blends in

“Embedded” is not “BI” (business intelligence)
New World
Answers
in context
Intuitive
visualizations
embedded analytics
Old World
your app
analytics
Actionable
Information

8
Apps do it differently…
Data
Product
Design
Data as a feature,
UX Driven Analytics

Web Developers don’t
think about “BI”
Your audience are consumers,
not data analysts!
Reports: Interactive and
distributed
Self Service: with
guard rails
Visualizations and
Dashboards
Deliver
Data for UX: APIs

10
Current Web App Architectures

• An integrated, seamless result, consistent with design
• A productive development process
• A tight fit into the application architecture
• Flexible security/personalization
• Performance and scalability on demand for a wide
variety of use cases and workloads
Excellent data visualization for apps
provides…

• UX-driven design workflow
• Use visual and JavaScript frameworks
• https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0
• Build data microservices manually
• not web developer skills? => a major headache
• Reporting is data dumps or a custom framework
• Self service is not implemented or limited
• Security rules implemented manually in UI, data
access
Current web development processes

• Service and tools to build and run the visualizations and
data access
• Simple, powerful APIs to embed
• Security rules leveraging single sign on, multi-tenancy
• Out of the box self service and reporting
• Scalable configurations
⮚ Faster, cheaper, easier to maintain and evolve…
Embedded development with Jaspersoft

14
Bikeshare project timeline
Assemble
project team
Determine use
case
Create
application
style guide
Research user
personas
Design
application UX
Choose tech
stack & set up
app foundation
“Wrestle” data
into shape
Develop UI
layout
Develop
reports &
visualizations
Embed reports &
visualizations
into app UI
Testing & bug
fixes
Implement
self-service BI
into app
Define project
goals
Project start Month 1 Month 2 Month 3 Month 4
Implement
self-service BI
into app
Ongoing iteration

Implementing Jaspersoft
Deploy & manage
your platform
Server
Cloud or on-premises
Open web development platform
Clustering, built-in multi-tenancy
Connect to
your data
Data Tier
Relational, Big Data, NoSQL
ETL, data virtualization, direct
Metadata layer, in-memory
engine
Inside any app
or process
Delivery
Javascript API
Extensive REST APIs
Mobile apps & SDKs
Your
apps
Output
Create beautiful
reports & visualizations
Pixel Perfect and
complex designs via IDE
Self-Service via browser

16
● Agile process: 2 week sprints, standups, JIRA, Slack
● Team makeup
● Chose a scenario: Bikeshare "franchise management"
○ Public bikeshare systems
● Defined personas
● UX design: look and feel, workflows and visualizations to support personas
○ Invision, Zepplin
● Detailed design
○ Data dictionary
○ Workflow and UI details: defining meaning
Project Process

17
● Development environment and tools
● Architecture
● Requirements for different roles
● Visual framework: CSS Grid, React
● Jaspersoft integration into UI: visualize.js, REST, iFrame
● App to Jaspersoft SSO
Project Process - Infrastructure

Jaspersoft as a service to applications
Repository
Database
Services
Web applications,
Load balancer
Browser user
Web services client
Repository
database
Data sources
Email Services
External Auth
e.g. CAS, LDAP,
JAAS

19
Architecture
Load balancer or Proxy
Bikeshare DBRepository DB
JasperReports
Server
Node.js API Nginx. Static site
or Node.js

TIBCO Jaspersoft Product Family
Jaspersoft Studio
Desktop report designer for
creating pixel-perfect reports
JasperReports Library
World’s most popular
Java reporting library
JasperReports Server
Reports, visualizations, APIs
Self-serviceDistribute Secure & manage
Data visualization and
reporting microservice
JasperReports IO
Data virtualization: blending
multiple data sources
Jaspersoft ADS
Jaspersoft ETL
Data integration for improved
reporting & analysis
TIBCO Cloud Integration (Connect)
Low Code cloud APIs,
Data Replication

21
● Data needed to support workflows and visualizations
● Web forms and visualizations (map, controls, dialogs)
● Jaspersoft visualizations and data for UI
● Jaspersoft data access and metadata (domain) to support self service
● CI/CD process: Github -> AWS deployment
Project process - Artifacts

22
Agenda
Project overview
Defining the user
Setting up the
Preparing data

24
Defining the Brand

25
Defining the Brand

26
● User Personas
○ Using information collected
from user observations and
interviews patterns and themes
can be identified
○ Information is then grouped
and analyzed to create
personas
Revealing Reality

27
● View all Regions / Franchises
● Drill down into regions to view
bike status
● Using available metrics and
visual indicators, should be able
to identify problem areas
● Take action to resolve problem
areas
User Personas: Manager

28
• Transport Bikes to Stations
• Repair bikes at stations
• Uses app to follow most efficient
route
• Respond to route updates given by
the manager
User Personas: Driver

29
UI Designs
● Page Layouts
● Interactive pages to
demonstrate interactions
and workflows
● Reusable component styles
○ Buttons
○ links
○ charts
○ etc
● Design Guidelines
○ Colors
○ Fonts
○ Layouts
○ Interactions

30
Agenda
Project overview
Defining the user
Setting up the
Preparing data

31
● SPA - Single Page Application
● Performance - Virtual DOM = Faster/More efficient page loading
● Easy to Learn, Lots of documentation/community
● Easy to test
● Pre configured projects CLI (Create-React-App) to automatically setup project
○ Package Managers
○ All startup packages setup
○ Starting point for initializing an app
● Not really a framework
Why React.js?

32
● SASS - Compiled CSS
● BEM - CSS Structure
● Normalize.css or CSS reset -
Remove default browser styling
● CSS Grid Layout
● Responsive
Front End: Best Practices
● Typescript - Superset of javascript, static types
○ ES6 - Babel
○ Lint, Prettifier - Code cleanup post
processes
● React
○ Axios - HTTP Client
○ Redux - State Management
○ React Router
CSS JavaScript
React.js

33
● Testing
○ Jest - framework
○ Enzyme - DOM traversal helper
○ E2E - Cypress, protractor
● CI/CD
○ Docker - Container for application
○ Husky - commit hooks
○ Git - Git Flow
Front End: Best Practices Cont.

34
● Translate Designs into HTML
○ Break pages apart into components and identify reusable pieces
○ Develop all components separately and assemble
○ Style HTML to exactly match design comps
○ Work with designers to develop expected interaction behaviors
● Testing functionality
○ TDD - Test driven development
○ Code Coverage
Front End Development Process Overview

35
● How Visualize.js works:
○ Global instance
○ Log into services using Authentication to
create session
○ Send Request through Javascript API
○ Instance adds report to specified DOM location
○ Returns data
● Local vs Served
○ Importing Locally
■ Download the latest version of the
Javascript file from Jaspersoft Server
■ Download Visualize Styles From the
Jaspersoft Server
■ Put both in public folder
■ Import using the index.html
Interfacing With Jaspersoft using
Visualize.js

36
● Javascript Helper Class
○ Interact with global instance of Visualize by accessing API with our own functions
■ Login/Logout w/ SSO token
■ Get Reports
■ Get Ad-hoc Reports
■ Get Input Controls
■ Get List of Reports (Resources Search)
■ All methods return data if needed
○ Wrapped requests in promises
■ Helps order when things are loaded
■ Use “promiseAll()”, to pause page loading until all resources are loaded
■ More Control
Interfacing With Jaspersoft using
Visualize.js Cont.

37
Agenda
Project overview
Defining the user
Setting up the application
environment
Preparing data

38
• Public data through the General Bikeshare Feed Specification
“GBFS” API
• Trip data from bikeshare systems
• Generated data to support app use cases: KPIs, people
• User profiles
• Transactional updates for actions
Data supports the application and
visualizations

39
• Make it fast to meet user expectations
• Don’t filter and analyze in the UI: too much data?
• Centralize calculations and aggregations as much as
possible: avoid sprawl
• How do you scale? Watch backend per user compute,
memory and data access
• Make it current
• Data has to be live: microservices
• Data security is a backend process
Making data support app user experience

40
Key Takeaways
40
Get complimentary
eBook from
Jaspersoft.com
• User requirements first, design second
• Use best practices for setting up application
foundation
• Optimize data access to support user expectations

41
Get involved with the demo app
“How we built it” webinar
series
*Ongoing
Workshops and
documentation
* First workshop available Jul 16 on Jaspersoft
Community
Guided demo app for on-
demand consumption
*Available on Jaspersoft.com
Access to source code for app
and dataset
* Available Jul 16 on Jaspersoft BikeShare GitHub
repo

Getting Started: How to Set Up Your "Data as a Feature" Project

Recommended

More Related Content

What's hot (20)

Similar to Getting Started: How to Set Up Your "Data as a Feature" Project (20)

More from TIBCO Jaspersoft (12)

Recently uploaded (20)

Getting Started: How to Set Up Your "Data as a Feature" Project