0% found this document useful (0 votes)

140 views

18BI-074 - Mobile App Bootstrap Custom Mobile Apps With Embedded Tableau Visualizations

The document provides information about a Mobile App Bootstrap (MAB) that allows developers to create custom mobile apps with embedded Tableau visualizations. It discusses authentication methods, connecting to data sources, using WebViews to display visualizations, compatibility with devices and operating systems, and delivering the app. It encourages attendees to consider questions around how an app would connect and authenticate, the importance of custom branding, whether users mainly use a few known visualizations, and available resources for development.

Uploaded by

van de bosch

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

140 views

18BI-074 - Mobile App Bootstrap Custom Mobile Apps With Embedded Tableau Visualizations

Uploaded by

van de bosch

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 58

Welcome

#TC18

Mobile App Bootstrap

Custom mobile apps with embedded Tableau visualizations

Ron Theis
Staff Software Engineer
Tableau
Questions to Consider

How would our app connect and authenticate?

How important is custom branding?

Do our users mainly use a few known visualizations?

Do we have the resources for this?

In-house programmers?
Third-party contractors?
Who would wrangle this long-term?
Enabling Integrations for Developers
Integrations Embedded Analytics
Extensions
Data Connectivity
Data Science
Automation

Tableau Platform
What It Isn’t
Warning: Not Tableau Mobile!
Tableau Mobile already provides server browsing & viz interaction
Warning: Not Tableau Mobile Beta!

The beta is Tableau Mobile re-written in

React Native

The beta has delicious new features

Interactive previews
Project browsing
Optional TouchID

See the beta in action

Devs on Stage
TC Session: “Tableau Mobile rising: You CAN take
it with you”
On your phone: download at kiosk
The Mobile App Bootstrap (MAB)

Open source

Mobile app

Embedded Tableau visualizations

The Mobile App Bootstrap (MAB)

Open source sample code

Basic sample app in multiple programming languages
Samples demonstrating specific techniques
Free for you to use, copy, or be inspired by
No special Tableau licensing involved

Available at github.com/tableau

You own and maintain your app

Computer programming required!

The Mobile App Bootstrap (MAB)
Customers have approached us with several custom mobile use cases

Warehouses Hospitals Custom Branding Broad Access

Grocery Stores Field Sales Integrated “Executive Mode”

Experiences
Customer Mobile Familiarity

Starting from scratch

No existing app
Open to any programming language/solution that works
Less mobile-specific knowledge

Modifying an existing app

Existing programming language requirements
Already have an app person/team
More mobile-specific knowledge
What Is Available?

Two platforms: iOS and Android

Two frameworks
Objective-C: Native iOS
React Native: iOS and Android

Sample apps
Overview with three visualizations
Barcode scanner
Out of the Box
What Has Changed
What’s New: React Native

Cross-platform framework
Same code runs on iOS and Android

App is completely native

JavaScript and React

Common web development technologies

Created and maintained primarily by Facebook

Open source
What’s New: React Native

Tableau Mobile’s new framework

We’ve been delighted with React Native
~99% code re-use between iOS and Android
React developers are instantly familiar with the code
UX designers can make modifications themselves

Well-known companies are using React Native

What’s Old: Cordova

MAB-Cordova has been deprecated

Cordova relies on UIWebView

UIWebView has been deprecated by Apple

Additional complexity of WebView-within-a-WebView

Low adoption, high frustration

What’s Improved: Objective-C

Samples now use WKWebView

Github repositories: search for “mobile”

github.com/tableau
github.com/tableau/mobile-app-bootstrap-react-native
github.com/tableau/mobile-app-bootstrap-objc
github.com/tableau/mobile-connected-client
Deep Dive
Authentication

Mobile authentication is a huge challenge

Tableau has a 5-person team focused on mobile

authentication

Your app will have to deal with authentication*

* = Unless it only connects to Tableau Public

Connect: Private Network (aka Intranet)

Private Network
Connect: Reverse Proxy

Private Network
Connect: Virtual Private Network (VPN)

Private Network
Connect: The Cloud
How Does an App Connect?
Connect

Viz A?

Username?
Password?

+
A

Viz B? +

B
Authentication Settings

Idle time expiration (minutes)

wgserver.session.idle_limit: 240

Lifetime expiration (minutes), must be enabled below

wgserver.session.lifetime_limit: 1440

Turns on lifetime expiration

wgserver.session.apply_lifetime_limit: false
Connected Clients
Connected Clients Server Settings

Idle time expiration

refresh_token.idle_expiry_in_seconds: 1209600
# 14 days, set to -1 to turn off

Lifetime expiration
refresh_token.absolute_expiry_in_seconds:
31536000
# 365 days, set to -1 to turn off
Connected Clients on Tableau Server
Server admin can enable/disable connected clients

Server admin and users can delete tokens

URL for embedding
URL to use when embedding visualizations
Don’t use the URL shown in the browser location
Use the URL from the Share menu: the Link URL

Tableau Help: “Parameters for Embed Code”

Images
Append .png to a view URL to get an image
/WorkbookName/ViewName
/WorkbookName/ViewName.png
/WorkbookName/ViewName.png?:size=width,height

Images and embedded views will use correct layout

Standard size-to-layout logic applies: based on smallest of height and width
Less than 500px: phone
501-800px: tablet
801+px: desktop

Images can be stored for later/offline use

WebView

WebViews get used extensively in the app

Authentication
Viz display

Android: default WebView works fine

iOS: big difference between UIWebView and WKWebView

iOS: UIWebView vs. WKWebView

UIWebView: old
WKWebView: new

UIWebView has serious problems

High memory usage
JavaScript incompatibilities, behaves like an old browser
Tendency to crash randomly
Complex visualizations = likely sadness

UIWebView has been deprecated by Apple

iOS: WKWebView
WKWebView: new

WKWebView advantages
Uses less memory
Handles modern JavaScript & CSS
Less crashy
Maintained by Apple

iOS 11: cookie reads/writes enabled

Switching from UIWebView to WKWebView solves customer

problems
Device and OS Compatibility

What are your organization’s device needs?

Organization-owned or BYOD?
Tablets, or phones, or both?
iOS, or Android, or both?

Declare iOS 11 as minimum version

Enables WKWebView cookie reading/writing
Reduces support surface area
Tableau Mobile beta: minimum iOS 11
Device and OS Compatibility
Device and OS Compatibility
Works on Tablets Too
Device Designer
Device Designer works great with MAB
TC Session: “On the road again | Bring dashboards mobile with Device Designer”
TC Session: “Your journey to amazing mobile dashboards”

Consider locking your app’s orientation

Delivering Your App

Apple Developer program

$99/year
Limited to 100 devices

Apple Enterprise distribution program

$300/year, extra vetting by Apple
Unlimited distribution within your organization

Android
Do whatever you want
Delivering Your App
Mobile Device Management systems can auto-deliver

TC Session: “Deploy and Enjoy”

Analytics in Your App

Track app usage

Device model, OS version, app version, session length, etc.
Actions taken inside the app
Your marketing team might already have a solution
Many options for “mobile analytics”
Google Analytics
Amazon Mobile Analytics
Flurry (Yahoo)
Mixpanel
Localytics
Some can easily become Tableau Data Sources
Supporting Your App

Intercom for Mobile

In-app user support
One-way messaging
Two-way interactions

Intercom.com
Testing
AWS Device Farm
Google Firebase
Microsoft App Center
Wrap Up
What’s Next

Breadth
More languages: Swift

Depth
Offline snapshots
Re-authentication
Debugging techniques

Authentication library
Your Role

You, customer, play an important role

Direct influence on our priorities

We often discover that a project is in progress only when

there’s a problem/deadline/crisis
Let us know early in the process
We can save you some headaches
Contact your friendly neighborhood salesperson
Questions to Consider

How would our app connect and authenticate?

How important is custom branding?

Do our users mainly use a few known visualizations?

Do we have the resources for this?

In-house programmers?
Third-party contractors?
Who would wrangle this long-term?
Please complete the
session survey from the My
Evaluations menu
in your TC18 app
E M B E D D E D A N A LY T I C S R E L AT E D S E S S I O N S