introducing configurable mobile app development · 2015-02-17 · create native ios, android, mac...

Introduce Configurable Mobile App DevelopmentMoxie Zhang – Esri R&D Center Beijing

Mobile app development starts with many options

…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 cross-

platform.

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

FC P PC F C F P Pf F PlF Pl Pf F Pl Pf F Pl

The Types of Mobile Apps

Pf = Performance F = Function Pl = Platform Dev = Easy Development

HTML5 Native Hybrid “need”

Pf

Dev Dev Dev Dev

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

Web AppBuilder - Jaeger

aegerA new breed of cross platform mobile application development

Developers extend Jaeger by creating widgets using ArcGIS API for JavaScript

A Jaeger app is configurable using Web AppBuilder for ArcGIS

A Jaeger app runs in pure native Runtime SDK includes all interactive and UI

Advanced developers extend Jaeger theme via native development


Native

Advanced UI interactions

Fastest performance

App store distribution

Hybrid

Web developer skills

Access to native platform

Performance issue


HTML5


Instant updates

Usability and performance issue

Unrestricted distribution

Jaeger


High performance

Full platform access



Why hasn’t been done the way before?

Because not everyone has extensive and single-core Runtime SDKs.


Widgets

Functional modules that contain

only programming logics without

dealing with user interactive and

visualization

Panels with UI elements

As part of the Jaeger theme,

panels and a fix number of UI

elements are provided

Map and events

All map, events handling and visual

aspect of Jaeger are handled in

native core. No performance loss

A Jaeger App

How a Jaeger App is Built

Build a Jaeger App with Web AppBuilder A Jaeger App

App

Configurator

Widget

Developers

Theme

Developers

Packaging

and

Signing


`w w w

w w Manual

ConfigurationWAB GUI

Configurationw w w

Jaeger

Core

Jaeger

Core

The Jaeger Ecosystem


Esri Esri CustomersPartners/Developers

Widgets

Themes

Apps

Jaeger

iOS

w www w w www w w www w w www w ww

T T T T T

Jaeger

Android

A A AAAAA

JavaScript

Native

Configuration


Jaeger for iOS


Jaeger for Android

for iOS and Android devices

Create and configure

a Jaeger App

Demo



under the hood

Inside Jaeger App

Map

Manager

Widget

Manager

Panel

Manager

Layout

Manager

Config

Manager

Messaging and Events


w w w

w w


aeger for

developers

Develop Widgets with ArcGIS API for JavaScript (Jaeger)

Develop Jaeger UI template (aka Theme) in platform

native programming

Going beyond

Web AppBuilder for ArcGIS 1.0

Moxie Zhang, Esri R&D Center Beijing, August 2014

Web AppBuilder for ArcGIS Components

Web AppBuilder

v

widgets

Themes

Stem App

A Web App

w w w

w ww w

w w w

config

GUI

Builder

w w w

w w

Web AppBuilder

A menu of tools

Shortcut items

Map, of cause

Interactive content

The “player”

Web AppBuilder

Branding(icon, color, title)

Widgets on screento 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 addingMore widgets

Architecture

Android/iOS SDK

ArcGIS

Runtime

SDKEvent Bus

Base Theme

Map Manager

Callout

Base Widget

Configuration file

App 1

Widge1

Widge2

Widge…

Config1

Config2

Config…

Theme1

App 2

Widge1

Widge3

Widge…

Config11

Config3

Config…

Theme1

App…

Widge4

Widge5

Widge…

Config4

Config5

Config…

Theme2

Widget Lifecycle

App Start

App Exit

Two

Layouts

Screen

Pool

Widget.onCreate()

Widget.onSelected()

Customized Action

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

How to make the builder extensible

Web AppBuilder

Web AppBuilder - Optimus

OptimusProject

• 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

What is the Project Optimus


How eclipse does it

Eclipse Runtime

Plugin Plugin

Plugin


Extension point definition schema(.exsd)

Extension PointExtension

How eclipse does it

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


Hello World plugin.xml

How Optimus will Do it


Extension points

A big Plugin

Plugin

Extension points

• 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

What does Optimus Runtime Provide


Similar to the Eclipse’s architecture, all of the job can be a plugin in builder.

• 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.

What Optimus Offers


introducing configurable mobile app development · 2015-02-17 · create native ios, android, mac...

Documents