Welcome

Mobile App Bootstrap

Ron Theis

Staff Software Engineer

Tableau

# T C 1 8

Custom mobile apps with embedded Tableau visualizations

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?

Automation

Extensions

Embedded Analytics

Data Connectivity

Data Science

Tableau Platform

Inte

gra

tion

s

Enabling Integrations for Developers

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 featuresInteractive previewsProject browsingOptional TouchID

See the beta in actionDevs on StageTC 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 codeBasic sample app in multiple programming languagesSamples demonstrating specific techniquesFree for you to use, copy, or be inspired byNo special Tableau licensing involved

Available at github.com/tableau

You own and maintain your app

Computer programming required!

Customers have approached us with several custom mobile use cases

Warehouses Hospitals Custom Branding Broad Access

Grocery Stores Field Sales Integrated Experiences

“Executive Mode”

The Mobile App Bootstrap (MAB)

Customer Mobile Familiarity

Starting from scratchNo existing app

Open to any programming language/solution that works

Less mobile-specific knowledge

Modifying an existing appExisting programming language requirements

Already have an app person/team

More mobile-specific knowledge

What Is Available?

Two platforms: iOS and Android

Two frameworksObjective-C: Native iOS

React Native: iOS and Android

Sample appsOverview with three visualizations

Barcode scanner

Out of the Box

What Has Changed

What’s New: React Native

Cross-platform frameworkSame code runs on iOS and Android

App is completely native

JavaScript and ReactCommon web development technologies

Created and maintained primarily by FacebookOpen source

What’s New: React Native

Tableau Mobile’s new frameworkWe’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

Private Network

Connect: Private Network (aka Intranet)

Private Network

Connect: Reverse Proxy

Private Network

Connect: Virtual Private Network (VPN)

Connect: The Cloud

How Does an App Connect?

Connect

Username?Password?

Viz A?

+A

Viz B? +

B

Authentication Settings

Idle time expiration (minutes)wgserver.session.idle_limit: 240

Lifetime expiration (minutes), must be enabled belowwgserver.session.lifetime_limit: 1440

Turns on lifetime expirationwgserver.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 visualizationsDon’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 layoutStandard 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 appAuthentication

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 problemsHigh 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 advantagesUses 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 versionEnables 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 MABTC 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

AndroidDo whatever you want

Delivering Your App

Mobile Device Management systems can auto-deliver

TC Session: “Deploy and Enjoy”

Analytics in Your App

Track app usageDevice 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 MobileIn-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

BreadthMore languages: Swift

DepthOffline snapshots

Re-authentication

Debugging techniques

Authentication library

Your Role

You, customer, play an important roleDirect 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 AN A LY T I C S R E L AT E D S E S S I O N S

Tableau JS API | The most delicious ingredient for custom appsOct-24 | 10:15 – 11:15 Oct-25 | 10:45 – 11:45

How to build a Tableau portal in 60 minutes or lessOct-24 | 10:15 – 11:15 Oct-25 | 14:15 – 15:15

Embedded analytics with the Tableau PlatformOct-23 | 12:30 – 13:30 Oct-24 | 13:45 – 14:45

M O B I L E R E L AT E D S E S S I O N S

On the road again | Bring dashboards mobile with Device DesignerOct-24 | 10:15 – 11:15

Your journey to amazing mobile dashboardsOct-24 | 12:00 – 1:00Oct-23 | 10:45 – 11:45

M O B I L E R E L AT E D S E S S I O N S

Tableau Mobile rising | You CAN take it with youOct-24 | 3:30 – 4:30

Deploy and Enjoy | Tableau Mobile at enterprise scaleOct-24 | 1:45 – 2:45

#DataDev Resources

TC18 Developer Track Contenthttps://tabsoft.co/tcdevtrack

Tableau Developer Programhttps://tableau.com/developer

Free environment for development

Early access to info and APIs

Tableau on GitHubhttps://github.com/tableau

Thank you!

#TC18

Ron Theis

rtheis@tableau.com

#DataDev Resources

TC18 Developer Track Contenthttp://tabsoft.co/tcdevtrack

Tableau Developer Programhttp://tableau.com/developerFree environment for developmentEarly access to info and APIs

Tableau on GitHubhttp://github.com/tableau

Ron Theis: rtheis@tableau.com