Introduce Configurable Mobile App Development Moxie Zhang Esri R&D Center Beijing
Mobile app development starts with many options
and there are different approaches to build an app
and there are different approaches to build an app
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
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
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
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
Jaeger
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
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
Why hasn t been done the way before? Because not everyone has extensive and single-core Runtime SDKs. Web AppBuilder - Jaeger
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
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
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
Jaeger for ios Web AppBuilder - Jaeger
Jaeger for Android Web AppBuilder - Jaeger
Demo Create and configure a Jaeger App for ios and Android devices Web AppBuilder - Jaeger
Web AppBuilder - Jaeger under the hood
Inside Jaeger App Messaging and Events Map Manager Widget Manager Panel Manager Layout Manager Config Manager w w w w w Web AppBuilder - Jaeger
aeger for developers Develop Widgets with ArcGIS API for JavaScript (Jaeger) Develop Jaeger UI template (aka Theme) in platform native programming Web AppBuilder - Jaeger
Going beyond Web AppBuilder for ArcGIS 1.0 Moxie Zhang, Esri R&D Center Beijing, August 2014
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
A menu of tools Interactive content Shortcut items Map, of cause The player Web AppBuilder
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
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
Widget Lifecycle App Start Widget.onCreate() Two Layouts Screen Pool Customized Action Widget.onSelected() App Exit Widget.onDestroy()
Widget Development ZoomIn.h ZoomIn.m
Widget Development //ZoomIn.h @interface ZoomIn : BaseWidget @end //ZoomIn.m @implementation ZoomIn -(void)selected { [super selected]; [self.mapview zoomin:yes]; }
HelloWorld
HelloWorld //HelloWorld.h @interface HelloWorld : BaseWidget @end //HelloWorld.m @implementation 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]; }
HelloWorld
Web AppBuilder How to make the builder extensible
Web AppBuilder - Optimus Project Optimus
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
How eclipse does it Extension point definition schema(.exsd) Extension Point Plugin Extension Plugin Plugin Eclipse Runtime Web AppBuilder - Optimus
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
How Optimus will Do it Extension points A big Plugin Plugin Extension points Web AppBuilder - Optimus
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
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