SlideShare a Scribd company logo
1 of 42
Getting Started
(Part 2 / 5) Data as a Feature webinar series
How to set up your data as a feature project
2
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.
© 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
© Copyright 2000-2019 TIBCO Software Inc.
8
Apps do it differently…
© Copyright 2000-2019 TIBCO Software Inc.
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
© Copyright 2000-2019 TIBCO Software Inc.
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…
© Copyright 2000-2019 TIBCO Software Inc.
• 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.
• 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
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.
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
● 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
● 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.
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
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.
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
● 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.
22
Agenda
Project overview
Defining the user
experience foundation
Setting up the
application environment
Preparing data
© Copyright 2000-2019 TIBCO Software Inc.
23
24
Defining the Brand
© Copyright 2000-2019 TIBCO Software Inc.
25
Defining the Brand
© Copyright 2000-2019 TIBCO Software Inc.
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
● 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
• 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
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.
30
Agenda
Project overview
Defining the user
experience foundation
Setting up the
application environment
Preparing data
© Copyright 2000-2019 TIBCO Software Inc.
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
● 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
● 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
● 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
● 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.
© Copyright 2000-2019 TIBCO Software Inc.
37
Agenda
Project overview
Defining the user
experience foundation
Setting up the application
environment
Preparing data
© Copyright 2000-2019 TIBCO Software Inc.
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
• 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
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
© Copyright 2000-2019 TIBCO Software Inc.
© Copyright 2000-2019 TIBCO Software Inc.

More Related Content

What's hot

Xcelsius vs. Design Studio
Xcelsius vs. Design StudioXcelsius vs. Design Studio
Xcelsius vs. Design Studio
Iliya Ruvinsky
 

What's hot (20)

Back to Basics: Reporting 101
Back to Basics: Reporting 101Back to Basics: Reporting 101
Back to Basics: Reporting 101
 
Back to Basics: Embedded Analytics 101
Back to Basics: Embedded Analytics 101Back to Basics: Embedded Analytics 101
Back to Basics: Embedded Analytics 101
 
Back to Basics: Data Integration and Virtualisation 101
Back to Basics: Data Integration and Virtualisation 101  Back to Basics: Data Integration and Virtualisation 101
Back to Basics: Data Integration and Virtualisation 101
 
Embedding Reports & Data Visualizations into Applications: JasperReports IO T...
Embedding Reports & Data Visualizations into Applications: JasperReports IO T...Embedding Reports & Data Visualizations into Applications: JasperReports IO T...
Embedding Reports & Data Visualizations into Applications: JasperReports IO T...
 
Community or Commercial: Which Edition of JasperSoft is Right For You?
Community or Commercial: Which Edition of JasperSoft is Right For You?Community or Commercial: Which Edition of JasperSoft is Right For You?
Community or Commercial: Which Edition of JasperSoft is Right For You?
 
JasperReports IO: Reporting and data visualization in a world of cloud, micro...
JasperReports IO: Reporting and data visualization in a world of cloud, micro...JasperReports IO: Reporting and data visualization in a world of cloud, micro...
JasperReports IO: Reporting and data visualization in a world of cloud, micro...
 
WSO2Con USA 2017: Iterative Architecture: A Pragmatic Approach to Digital Tra...
WSO2Con USA 2017: Iterative Architecture: A Pragmatic Approach to Digital Tra...WSO2Con USA 2017: Iterative Architecture: A Pragmatic Approach to Digital Tra...
WSO2Con USA 2017: Iterative Architecture: A Pragmatic Approach to Digital Tra...
 
Advanced Dashboards using Design Studio Extensions
Advanced Dashboards using Design Studio ExtensionsAdvanced Dashboards using Design Studio Extensions
Advanced Dashboards using Design Studio Extensions
 
The Role of Integration in Microservice Architecture (MSA)
The Role of Integration in Microservice Architecture (MSA)The Role of Integration in Microservice Architecture (MSA)
The Role of Integration in Microservice Architecture (MSA)
 
Dashboard Factory - most efficient way to develop with SAP Design Studio
Dashboard Factory - most efficient way to develop with SAP Design Studio Dashboard Factory - most efficient way to develop with SAP Design Studio
Dashboard Factory - most efficient way to develop with SAP Design Studio
 
Microsoft Reporting Dashboarding and visual Analytics January 2016
Microsoft Reporting Dashboarding and visual Analytics January 2016Microsoft Reporting Dashboarding and visual Analytics January 2016
Microsoft Reporting Dashboarding and visual Analytics January 2016
 
Xcelsius vs. Design Studio
Xcelsius vs. Design StudioXcelsius vs. Design Studio
Xcelsius vs. Design Studio
 
Neo4j GraphTour New York_ Adobe Presentation_David Fox
Neo4j GraphTour New York_ Adobe Presentation_David FoxNeo4j GraphTour New York_ Adobe Presentation_David Fox
Neo4j GraphTour New York_ Adobe Presentation_David Fox
 
Fundamentals of Ad Hoc Reporting: Create a beautiful report-building oasis fo...
Fundamentals of Ad Hoc Reporting: Create a beautiful report-building oasis fo...Fundamentals of Ad Hoc Reporting: Create a beautiful report-building oasis fo...
Fundamentals of Ad Hoc Reporting: Create a beautiful report-building oasis fo...
 
How to Use iPaaS to Scale Your Business - Case Study
How to Use iPaaS to Scale Your Business - Case StudyHow to Use iPaaS to Scale Your Business - Case Study
How to Use iPaaS to Scale Your Business - Case Study
 
Using SignalR with Kendo UI
Using SignalR with Kendo UIUsing SignalR with Kendo UI
Using SignalR with Kendo UI
 
Migrating DataPower to IBM's API Connect Using Custom Policies//DataPower Wee...
Migrating DataPower to IBM's API Connect Using Custom Policies//DataPower Wee...Migrating DataPower to IBM's API Connect Using Custom Policies//DataPower Wee...
Migrating DataPower to IBM's API Connect Using Custom Policies//DataPower Wee...
 
Migrating from IBM API Connect v5 to v2018
Migrating from IBM API Connect v5 to v2018Migrating from IBM API Connect v5 to v2018
Migrating from IBM API Connect v5 to v2018
 
Drag and Drop Application Development with Progress Rollbase
Drag and Drop Application Development with Progress RollbaseDrag and Drop Application Development with Progress Rollbase
Drag and Drop Application Development with Progress Rollbase
 
Establishing an SOA Focused Enterprise Architecture
Establishing an SOA Focused Enterprise ArchitectureEstablishing an SOA Focused Enterprise Architecture
Establishing an SOA Focused Enterprise Architecture
 

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

Domino app dev competitive advantage for blug
Domino app dev competitive advantage for blugDomino app dev competitive advantage for blug
Domino app dev competitive advantage for blug
John Head
 
VERSNEL INNOVATIE MET DATA SCIENCE - WERK SAMEN, OPERATIONALISEER EN SCHAAL M...
VERSNEL INNOVATIE MET DATA SCIENCE - WERK SAMEN, OPERATIONALISEER EN SCHAAL M...VERSNEL INNOVATIE MET DATA SCIENCE - WERK SAMEN, OPERATIONALISEER EN SCHAAL M...
VERSNEL INNOVATIE MET DATA SCIENCE - WERK SAMEN, OPERATIONALISEER EN SCHAAL M...
webwinkelvakdag
 

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

Enabling Ad Hoc Reporting
Enabling Ad Hoc ReportingEnabling Ad Hoc Reporting
Enabling Ad Hoc Reporting
 
PART 1: Intro To JasperReports IO And How To Build Your First Report
PART 1: Intro To JasperReports IO And How To Build Your First ReportPART 1: Intro To JasperReports IO And How To Build Your First Report
PART 1: Intro To JasperReports IO And How To Build Your First Report
 
Make your application stand out with bi that blends in
Make your application stand out with bi that blends inMake your application stand out with bi that blends in
Make your application stand out with bi that blends in
 
Introduction to jaspersoft7 customer webinar
Introduction to jaspersoft7 customer webinarIntroduction to jaspersoft7 customer webinar
Introduction to jaspersoft7 customer webinar
 
INT Inc | Benefits of a Microservices Architecture
INT Inc | Benefits of a Microservices ArchitectureINT Inc | Benefits of a Microservices Architecture
INT Inc | Benefits of a Microservices Architecture
 
Domino app dev competitive advantage for blug
Domino app dev competitive advantage for blugDomino app dev competitive advantage for blug
Domino app dev competitive advantage for blug
 
AI Foundations: Simpler Technologies, Smarter Business
AI Foundations: Simpler Technologies, Smarter BusinessAI Foundations: Simpler Technologies, Smarter Business
AI Foundations: Simpler Technologies, Smarter Business
 
VERSNEL INNOVATIE MET DATA SCIENCE - WERK SAMEN, OPERATIONALISEER EN SCHAAL M...
VERSNEL INNOVATIE MET DATA SCIENCE - WERK SAMEN, OPERATIONALISEER EN SCHAAL M...VERSNEL INNOVATIE MET DATA SCIENCE - WERK SAMEN, OPERATIONALISEER EN SCHAAL M...
VERSNEL INNOVATIE MET DATA SCIENCE - WERK SAMEN, OPERATIONALISEER EN SCHAAL M...
 
Delivering New Digital Experiences Fast - Introducing Choreo
Delivering New Digital Experiences Fast - Introducing ChoreoDelivering New Digital Experiences Fast - Introducing Choreo
Delivering New Digital Experiences Fast - Introducing Choreo
 
The Future of DevOps and UrbanCode
The Future of DevOps and UrbanCodeThe Future of DevOps and UrbanCode
The Future of DevOps and UrbanCode
 
Optimize your CI/CD with GitLab and AWS
Optimize your CI/CD with GitLab and AWSOptimize your CI/CD with GitLab and AWS
Optimize your CI/CD with GitLab and AWS
 
Elevate Your Continuous Delivery Strategy Above the Rolling Clouds (Interconn...
Elevate Your Continuous Delivery Strategy Above the Rolling Clouds (Interconn...Elevate Your Continuous Delivery Strategy Above the Rolling Clouds (Interconn...
Elevate Your Continuous Delivery Strategy Above the Rolling Clouds (Interconn...
 
Notes/Domino Application Development Competitive Advantage - UKLUG 2011 Edition
Notes/Domino Application Development Competitive Advantage - UKLUG 2011 EditionNotes/Domino Application Development Competitive Advantage - UKLUG 2011 Edition
Notes/Domino Application Development Competitive Advantage - UKLUG 2011 Edition
 
Learn Why your Technology Toolkit needs a Low Code Platform Upgrade!
Learn Why your Technology Toolkit needs a Low Code Platform Upgrade!Learn Why your Technology Toolkit needs a Low Code Platform Upgrade!
Learn Why your Technology Toolkit needs a Low Code Platform Upgrade!
 
Microservices = Death of the Enterprise Service Bus (ESB)?
Microservices = Death of the Enterprise Service Bus (ESB)?Microservices = Death of the Enterprise Service Bus (ESB)?
Microservices = Death of the Enterprise Service Bus (ESB)?
 
Powering the digital economy with CICS and z/OS connect - at the "z Systems...
Powering the digital economy with CICS and z/OS connect  -  at the "z Systems...Powering the digital economy with CICS and z/OS connect  -  at the "z Systems...
Powering the digital economy with CICS and z/OS connect - at the "z Systems...
 
Platform Strategy to Deliver Digital Experiences on Azure
Platform Strategy to Deliver Digital Experiences on AzurePlatform Strategy to Deliver Digital Experiences on Azure
Platform Strategy to Deliver Digital Experiences on Azure
 
Digital Reinvention by NRB
Digital Reinvention by NRBDigital Reinvention by NRB
Digital Reinvention by NRB
 
Tokyo Release.pdf
Tokyo Release.pdfTokyo Release.pdf
Tokyo Release.pdf
 
Getting Started with ThousandEyes Proof of Concepts
Getting Started with ThousandEyes Proof of ConceptsGetting Started with ThousandEyes Proof of Concepts
Getting Started with ThousandEyes Proof of Concepts
 

More from TIBCO Jaspersoft

More from TIBCO Jaspersoft (12)

Easy Data Integrations Tips for High-Value Reporting
Easy Data Integrations Tips for High-Value ReportingEasy Data Integrations Tips for High-Value Reporting
Easy Data Integrations Tips for High-Value Reporting
 
Throwing IoT in the Trash (literally) - How sensor data, analytics, and AWS c...
Throwing IoT in the Trash (literally) - How sensor data, analytics, and AWS c...Throwing IoT in the Trash (literally) - How sensor data, analytics, and AWS c...
Throwing IoT in the Trash (literally) - How sensor data, analytics, and AWS c...
 
PART 2: Producing reports & data visualizations with JasperReports IO
PART 2: Producing reports & data visualizations with JasperReports IOPART 2: Producing reports & data visualizations with JasperReports IO
PART 2: Producing reports & data visualizations with JasperReports IO
 
How Analytic Solutions Drive Real-world Change (Interesting Use Cases)
How Analytic Solutions Drive Real-world Change (Interesting Use Cases)How Analytic Solutions Drive Real-world Change (Interesting Use Cases)
How Analytic Solutions Drive Real-world Change (Interesting Use Cases)
 
Make Your Reports Over the Counter
Make Your Reports Over the CounterMake Your Reports Over the Counter
Make Your Reports Over the Counter
 
Upgrading to TIBCO Jaspersoft 7 with The Customer Success Team
Upgrading to TIBCO Jaspersoft 7 with The Customer Success TeamUpgrading to TIBCO Jaspersoft 7 with The Customer Success Team
Upgrading to TIBCO Jaspersoft 7 with The Customer Success Team
 
Modern Reporting At Scale - Migration Path for Dummies
Modern Reporting At Scale - Migration Path for DummiesModern Reporting At Scale - Migration Path for Dummies
Modern Reporting At Scale - Migration Path for Dummies
 
The Case for Embedded Analytics: Improve the Value of your Applications with ...
The Case for Embedded Analytics: Improve the Value of your Applications with ...The Case for Embedded Analytics: Improve the Value of your Applications with ...
The Case for Embedded Analytics: Improve the Value of your Applications with ...
 
INTRODUCING JASPERSOFT ADVANCED DATA SERVICES: DATA VIRTUALIZATION AT SCALE
INTRODUCING JASPERSOFT ADVANCED DATA SERVICES: DATA VIRTUALIZATION AT SCALEINTRODUCING JASPERSOFT ADVANCED DATA SERVICES: DATA VIRTUALIZATION AT SCALE
INTRODUCING JASPERSOFT ADVANCED DATA SERVICES: DATA VIRTUALIZATION AT SCALE
 
4 REASONS TO LEAVE YOUR LEGACY REPORTING SOLUTION FOR JASPERSOFT
4 REASONS TO LEAVE YOUR LEGACY REPORTING SOLUTION FOR JASPERSOFT4 REASONS TO LEAVE YOUR LEGACY REPORTING SOLUTION FOR JASPERSOFT
4 REASONS TO LEAVE YOUR LEGACY REPORTING SOLUTION FOR JASPERSOFT
 
JASPERSOFT LIVE DEMO - EMEA
JASPERSOFT LIVE DEMO - EMEAJASPERSOFT LIVE DEMO - EMEA
JASPERSOFT LIVE DEMO - EMEA
 
Modern Reporting at Scale: How to Distribute Information and Answers to the M...
Modern Reporting at Scale: How to Distribute Information and Answers to the M...Modern Reporting at Scale: How to Distribute Information and Answers to the M...
Modern Reporting at Scale: How to Distribute Information and Answers to the M...
 

Recently uploaded

JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)
Max Lee
 

Recently uploaded (20)

Workforce Efficiency with Employee Time Tracking Software.pdf
Workforce Efficiency with Employee Time Tracking Software.pdfWorkforce Efficiency with Employee Time Tracking Software.pdf
Workforce Efficiency with Employee Time Tracking Software.pdf
 
StrimziCon 2024 - Transition to Apache Kafka on Kubernetes with Strimzi.pdf
StrimziCon 2024 - Transition to Apache Kafka on Kubernetes with Strimzi.pdfStrimziCon 2024 - Transition to Apache Kafka on Kubernetes with Strimzi.pdf
StrimziCon 2024 - Transition to Apache Kafka on Kubernetes with Strimzi.pdf
 
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
 
The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)
 
INGKA DIGITAL: Linked Metadata by Design
INGKA DIGITAL: Linked Metadata by DesignINGKA DIGITAL: Linked Metadata by Design
INGKA DIGITAL: Linked Metadata by Design
 
Sourcing Success - How to Find a Clothing Manufacturer
Sourcing Success - How to Find a Clothing ManufacturerSourcing Success - How to Find a Clothing Manufacturer
Sourcing Success - How to Find a Clothing Manufacturer
 
Malaysia E-Invoice digital signature docpptx
Malaysia E-Invoice digital signature docpptxMalaysia E-Invoice digital signature docpptx
Malaysia E-Invoice digital signature docpptx
 
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
 
What need to be mastered as AI-Powered Java Developers
What need to be mastered as AI-Powered Java DevelopersWhat need to be mastered as AI-Powered Java Developers
What need to be mastered as AI-Powered Java Developers
 
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdfImplementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
 
Weeding your micro service landscape.pdf
Weeding your micro service landscape.pdfWeeding your micro service landscape.pdf
Weeding your micro service landscape.pdf
 
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdfThe Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
 
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
 
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdfMicrosoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
 
SQL Injection Introduction and Prevention
SQL Injection Introduction and PreventionSQL Injection Introduction and Prevention
SQL Injection Introduction and Prevention
 
OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024
 
Food Delivery Business App Development Guide 2024
Food Delivery Business App Development Guide 2024Food Delivery Business App Development Guide 2024
Food Delivery Business App Development Guide 2024
 
Crafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM IntegrationCrafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM Integration
 
JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)
 

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

  • 1. Getting Started (Part 2 / 5) Data as a Feature webinar series How to set up your data as a feature project
  • 2. 2
  • 3. 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. 4 Agenda 4 Project overview Defining the user experience foundation Setting up the application environment Preparing data
  • 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.
  • 6. © Copyright 2000-2019 TIBCO Software Inc. Embedded BI Reporting Inform the massesBI that blends in
  • 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
  • 10. 10 Current Web App Architectures
  • 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.
  • 22. 22 Agenda Project overview Defining the user experience foundation Setting up the application environment Preparing data © Copyright 2000-2019 TIBCO Software Inc.
  • 23. 23
  • 24. 24 Defining the Brand © Copyright 2000-2019 TIBCO Software Inc.
  • 25. 25 Defining the Brand © 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.
  • 30. 30 Agenda Project overview Defining the user experience foundation Setting up the application environment Preparing data © 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.
  • 37. 37 Agenda Project overview Defining the user experience foundation Setting up the application environment Preparing data © 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.
  • 42. © Copyright 2000-2019 TIBCO Software Inc.