Welcome
# T C 1 8 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 Embedded Analytics Integrations 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 Experiences Executive Mode
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 Embedded analytics with the Tableau Platform Oct-23 12:30 13:30 Oct-24 13:45 14:45 Tableau JS API The most delicious ingredient for custom apps Oct-24 10:15 11:15 Oct-25 10:45 11:45 How to build a Tableau portal in 60 minutes or less Oct-24 10:15 11:15 Oct-25 14:15 15:15
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 Designer Oct-24 10:15 11:15 Your journey to amazing mobile dashboards Oct-23 10:45 11:45 Oct-24 12:00 1:00
M O B I L E R E L AT E D S E S S I O N S Deploy and Enjoy Tableau Mobile at enterprise scale Oct-24 1:45 2:45 Tableau Mobile rising You CAN take it with you Oct-24 3:30 4:30
#DataDev Resources TC18 Developer Track Content https://tabsoft.co/tcdevtrack Tableau Developer Program https://tableau.com/developer Free environment for development Early access to info and APIs Tableau on GitHub https://github.com/tableau
#TC18 Thank you! Ron Theis rtheis@tableau.com
#DataDev Resources TC18 Developer Track Content http://tabsoft.co/tcdevtrack Tableau Developer Program http://tableau.com/developer Free environment for development Early access to info and APIs Tableau on GitHub http://github.com/tableau Ron Theis: rtheis@tableau.com