# T C 1 8. Mobile App Bootstrap. Custom mobile apps with embedded Tableau visualizations. Ron Theis. Staff Software Engineer Tableau

Size: px

Start display at page:

Download "# T C 1 8. Mobile App Bootstrap. Custom mobile apps with embedded Tableau visualizations. Ron Theis. Staff Software Engineer Tableau"

Camilla Cameron
5 years ago
Views:

2 Welcome

3 # T C 1 8 Mobile App Bootstrap Custom mobile apps with embedded Tableau visualizations Ron Theis Staff Software Engineer Tableau

4 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?

5 Enabling Integrations for Developers Embedded Analytics Integrations Extensions Data Connectivity Data Science Automation Tableau Platform

6 What It Isn t

7 Warning: Not Tableau Mobile! Tableau Mobile already provides server browsing & viz interaction

8 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

9 The Mobile App Bootstrap (MAB) Open source Mobile app Embedded Tableau visualizations

10 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!

11 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

12 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

13 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

14 Out of the Box

15 What Has Changed

16 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

17 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

18 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

19 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

20 Deep Dive

21 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

22 Connect: Private Network (aka Intranet) Private Network

23 Connect: Reverse Proxy Private Network

24 Connect: Virtual Private Network (VPN) Private Network

25 Connect: The Cloud

26 How Does an App Connect?

27 Connect Viz A? Username? Password? + A Viz B? + B

28 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

29 Connected Clients

30 Connected Clients Server Settings Idle time expiration refresh_token.idle_expiry_in_seconds: # 14 days, set to -1 to turn off Lifetime expiration refresh_token.absolute_expiry_in_seconds: # 365 days, set to -1 to turn off

31 Connected Clients on Tableau Server Server admin can enable/disable connected clients Server admin and users can delete tokens

32 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

33 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 px: tablet 801+px: desktop Images can be stored for later/offline use

34 WebView WebViews get used extensively in the app Authentication Viz display Android: default WebView works fine ios: big difference between UIWebView and WKWebView

35 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

36 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

37 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

38 Device and OS Compatibility

39 Device and OS Compatibility

40 Works on Tablets Too

41 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

42 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

43 Delivering Your App Mobile Device Management systems can auto-deliver TC Session: Deploy and Enjoy

44 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

45 Supporting Your App Intercom for Mobile In-app user support One-way messaging Two-way interactions Intercom.com

46 Testing AWS Device Farm Google Firebase Microsoft App Center

47 Wrap Up

48 What s Next Breadth More languages: Swift Depth Offline snapshots Re-authentication Debugging techniques Authentication library

49 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

50 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?

51 Please complete the session survey from the My Evaluations menu in your TC18 app

52 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

53 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

54 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

55 #DataDev Resources TC18 Developer Track Content Tableau Developer Program Free environment for development Early access to info and APIs Tableau on GitHub

56 #TC18 Thank you! Ron Theis

57 #DataDev Resources TC18 Developer Track Content Tableau Developer Program Free environment for development Early access to info and APIs Tableau on GitHub Ron Theis:

Deploy and Enjoy: Tableau Mobile at Enterprise Scale

# D e p l o y E n j o y M o b i l e Deploy and Enjoy: Tableau Mobile at Enterprise Scale Paul Cardon Staff Software Engineer Tableau Sham Dorairaj Senior Software Engineer Tableau # D e p l o y E n j o