Introduce Configurable Mobile App Development. Moxie Zhang Esri R&D Center Beijing

Transcription

1 Introduce Configurable Mobile App Development Moxie Zhang Esri R&D Center Beijing

2 Mobile app development starts with many options

3 and there are different approaches to build an app

4 and there are different approaches to build an app

5 Beyond Native Apps Create native ios, Android, Mac and Windows apps in C#. Anything you can do in Objective-C, Swift or Java, you can do in C#. Develop in Lua, use the same code-base and go crossplatform. Deploying HTML5, native, or hybrid mobile apps using open and standards-based `tools. Build native apps for ios and Android using JavaScript Native UI, push, analytics, login modules "out-of-the box" Cloud build service, no need to setup Eclipse / Xcode Update your app without re-submitting to the App Store Open platform, extend with hooks, write native modules

6 The Types of Mobile Apps Dev Dev Dev Dev Pf C F PlP Pf C F PlP Pf C F PlP Pf F Pl HTML5 Native Hybrid need Pf = Performance F = Function Pl = Platform Dev = Easy Development

7 Love Native App Has better performance and user experience Works connected and disconnected from internet Has access of all device capabilities Works with sensors connected to the device

8 however, native app development is not easy A well rounded native app needs on ios and Android, at least Need good mobile developers Need two at least Esri customers usually do not have the above

9 Jaeger

10 aeger A new breed of cross platform mobile application development A Jaeger app runs in pure native Runtime SDK includes all interactive and UI A Jaeger app is configurable using Web AppBuilder for ArcGIS Developers extend Jaeger by creating widgets using ArcGIS API for JavaScript Advanced developers extend Jaeger theme via native development Web AppBuilder - Jaeger

11 Native Advanced UI interactions Fastest performance App store distribution Jaeger Web developer skills High performance Full platform access App store distribution Hybrid Web developer skills Access to native platform Performance issue App store distribution Web AppBuilder - Jaeger HTML5 Web developer skills Instant updates Usability and performance issue Unrestricted distribution

12 Why hasn t been done the way before? Because not everyone has extensive and single-core Runtime SDKs. Web AppBuilder - Jaeger

13 A Jaeger App Panels with UI elements As part of the Jaeger theme, panels and a fix number of UI elements are provided Widgets Functional modules that contain only programming logics without dealing with user interactive and visualization Map and events All map, events handling and visual aspect of Jaeger are handled in native core. No performance loss Web AppBuilder - Jaeger

14 How a Jaeger App is Built App Configurator Widget Developers w w w ` Build a Jaeger App with Web AppBuilder w w Manual WAB GUI Configuration Configuration A Jaeger App Jaeger Core w w w Theme Developers Jaeger Core Packaging and Signing Web AppBuilder - Jaeger

15 The Jaeger Ecosystem Esri Partners/Developers Esri Customers Jaeger ios Jaeger Android Widgets w w w w w w w w w w w w w w w w w w w w w w JavaScript Themes T T T T T Native Apps A A A A A A A Configuration Web AppBuilder - Jaeger

16 Jaeger for ios Web AppBuilder - Jaeger

17 Jaeger for Android Web AppBuilder - Jaeger

18 Demo Create and configure a Jaeger App for ios and Android devices Web AppBuilder - Jaeger

19 Web AppBuilder - Jaeger under the hood

20 Inside Jaeger App Messaging and Events Map Manager Widget Manager Panel Manager Layout Manager Config Manager w w w w w Web AppBuilder - Jaeger

21 aeger for developers Develop Widgets with ArcGIS API for JavaScript (Jaeger) Develop Jaeger UI template (aka Theme) in platform native programming Web AppBuilder - Jaeger

22 Going beyond Web AppBuilder for ArcGIS 1.0 Moxie Zhang, Esri R&D Center Beijing, August 2014

23 Web AppBuilder for ArcGIS Components GUI Builder w w w w w widgets Themes v w w w w w Stem App A Web App w w w w w config Web AppBuilder

24 A menu of tools Interactive content Shortcut items Map, of cause The player Web AppBuilder

25 Branding (icon, color, title) Widgets on screen to form the UI items Theme Widget: HeaderController Panel contains widget s content. It determines how widget is shown. Placeholder as part of App layout for adding More widgets Web AppBuilder

26 Architecture App 1 App 2 App Widge1 Config1 Widge1 Config11 Widge4 Config4 Widge2 Config2 Widge3 Config3 Widge5 Config5 Widge Config Widge Config Widge Config Theme1 Theme1 Theme2 Base Theme Map Manager Callout Base Widget Configuration file Event Bus Android/iOS SDK ArcGIS Runtime SDK

27 Widget Lifecycle App Start Widget.onCreate() Two Layouts Screen Pool Customized Action Widget.onSelected() App Exit Widget.onDestroy()

28 Widget Development ZoomIn.h ZoomIn.m

29 Widget Development ZoomIn : ZoomIn -(void)selected { [super selected]; [self.mapview zoomin:yes]; }

30 HelloWorld

31 HelloWorld HelloWorld : HelloWorld -(void)create { [super create]; UIButton * button = [UIButton buttonwithtype:uibuttontypecustom]; [button setframe:cgrectmake(40, 20, 200, 44)]; [button settitle:@"helloworld" forstate:uicontrolstatenormal]; [button setbackgroundcolor:[uicolor graycolor]]; [button addtarget:self action:@selector(helloworld:) forcontrolevents:(uicontroleventtouchdown)]; [self.datapanelview addsubview:button]; } -(void)selected { [super selected]; [self showdatapanel]; } -(void)helloworld:(id)sender { [self.mapview zoomin:yes]; }

32 HelloWorld

33 Web AppBuilder How to make the builder extensible

34 Web AppBuilder - Optimus Project Optimus

35 What is the Project Optimus Re-architecture Web AppBuilder to enable extendibility Optimus allow extend the AppBuilder to add new type of build, such as: - Web 3D application - Jaeger Mobile app - ArcPad project - Storymap Like Eclipse, it ll enable common build environment with plugins Web AppBuilder - Optimus

36 How eclipse does it Extension point definition schema(.exsd) Extension Point Plugin Extension Plugin Plugin Eclipse Runtime Web AppBuilder - Optimus

37 How eclipse does it Hello World plugin.xml <extension point="org.eclipse.ui.views"> <category name="hello Category" id="com.example.helloworld"> </category> <view name="hello View" icon="icons/sample.gif" category="com.example.helloworld" class="com.example.helloworld.helloworldview" id="com.example.helloworld.helloworldview"> </view> </extension> Web AppBuilder - Optimus

38 How Optimus will Do it Extension points A big Plugin Plugin Extension points Web AppBuilder - Optimus

39 What does Optimus Runtime Provide Manage app (list, create, delete, deploy, etc.) Build app s config file Assembling app (move all need parts together) Build app Package app Publish events when building app, so app can preview in real time Preview app in real time Similar to the Eclipse s architecture, all of the job can be a plugin in builder. Web AppBuilder - Optimus

40 What Optimus Offers Provides an extensible framework Provide out-of-box plugins, such as map config, app management (list, delete, etc.), ArcGIS Portal/AGOL integration and so on Provides many dijits, such as ServiceBrowser, RendererChooser, etc. If a new type of app uses widget/theme, Optimus provides widget/theme repository management and good community support. Web AppBuilder - Optimus

41

42