More Related Content Similar to Getting Started: How to Set Up Your "Data as a Feature" Project (20) More from TIBCO Jaspersoft (12) Getting Started: How to Set Up Your "Data as a Feature" Project3. 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
5. 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.
7. “Embedded” is not “BI” (business intelligence)
New World
Answers
in context
Intuitive
visualizations
embedded analytics
Old World
your app
analytics
Actionable
Information
© Copyright 2000-2019 TIBCO Software Inc.
8. 8
Apps do it differently…
© Copyright 2000-2019 TIBCO Software Inc.
Data
Product
Design
Data as a feature,
UX Driven Analytics
9. 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
© Copyright 2000-2019 TIBCO Software Inc.
Data for UX: APIs
11. • 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…
© Copyright 2000-2019 TIBCO Software Inc.
12. • 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
© Copyright 2000-2019 TIBCO Software Inc.
13. • 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
© Copyright 2000-2019 TIBCO Software Inc.
14. 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
© Copyright 2000-2019 TIBCO Software Inc.
15. 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
© Copyright 2000-2019 TIBCO Software Inc.
16. 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
© Copyright 2000-2019 TIBCO Software Inc.
17. 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
© Copyright 2000-2019 TIBCO Software Inc.
18. 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
© Copyright 2000-2019 TIBCO Software Inc.
19. 19
Architecture
Load balancer or Proxy
Bikeshare DBRepository DB
JasperReports
Server
Node.js API Nginx. Static site
or Node.js
© Copyright 2000-2019 TIBCO Software Inc.
20. 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
© Copyright 2000-2019 TIBCO Software Inc.
21. 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
© Copyright 2000-2019 TIBCO Software Inc.
26. 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
© Copyright 2000-2019 TIBCO Software Inc.
27. 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
© Copyright 2000-2019 TIBCO Software Inc.
28. 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
© Copyright 2000-2019 TIBCO Software Inc.
29. 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
© Copyright 2000-2019 TIBCO Software Inc.
31. 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?
© Copyright 2000-2019 TIBCO Software Inc.
32. 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
© Copyright 2000-2019 TIBCO Software Inc.
33. 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.
© Copyright 2000-2019 TIBCO Software Inc.
34. 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
© Copyright 2000-2019 TIBCO Software Inc.
35. 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. 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.
© Copyright 2000-2019 TIBCO Software Inc.
38. 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
© Copyright 2000-2019 TIBCO Software Inc.
39. 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
© Copyright 2000-2019 TIBCO Software Inc.
40. 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. 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
© Copyright 2000-2019 TIBCO Software Inc.