JUDCon 2014: Gearing up for mobile development with AeroGear

1

Gearing Up for Mobile

Development with AeroGear Prajod Vettiyattil

@prajods

in.linkedin.com/in/prajod

Naveen Raj Balasubramaniam

@Naveenrajbala

in.linkedin.com/in/naveenraj

2

Agenda

A walk with AeroGear

Simplify mobile development

Front end development support

The Road Ahead

Summary

3

Server side development support

A walk with AeroGear

4

Mobile Development Framework

5

Server side Framework

Data

Management

Request

Processing

Authentication /

Authorization

Device Variant

Management

Communication

Framework

Metering /

Billing

UI Framework

Patch / Version

Management

Communication

Framework

User Interaction

Management

Authentication /

Authorization

Patch / Version

Management

Local Data

Management

Native API handler

Management Monitoring

Monitoring

Management User / Device

Registration

Mobile Development Framework AeroGear features

6

Server side Framework

Data

Management

Request

Processing

Authentication /

Authorization

Device Variant

Management

Communication

Framework

Metering /

Billing

UI Framework

Patch / Version

Management

Communication

Framework

User Interaction

Management

Authentication /

Authorization

Patch / Version

Management

Local Data

Management

Native API handler

Management Monitoring

Monitoring

Management User / Device

Registration

Mobile web Development

There many mobile

phone operating systems

in the market.

7

And there are Frameworks

• There are lot of technologies for every platform

• Native and non–native technologies

8

Overview of AeroGear

AeroGear is for mobile development

• A set of libraries • Android library, iOS library, JavaScript Library

• AeroGear Connectivity

• AeroGear Controller, Security

• AeroGear Persistence

• Unified approach to development

• Multi-platform support

• Out of the box push notification and

security

9

Browser support in Aerogear

Currently AeroGear supports the following desktop

web browsers

• Firefox

• Chrome

• IE

• Safari

Currently AeroGear Supports the following mobile web

browsers.

• Android Browser

• Safari

In General all the web browsers with html5 support

will support Aerogear apps too 10

Mobile development options

Option 1: Mobile Browser app

11

Mobile Brower

HTML5,

CSS3, JS

• Mobile browser app(web

app)

• HTML5 + CSS3 +

javascript

• Most portable

• Platform independent

code

• No access to native

APIs

Mobile development options

Option 2: Native App

12

Native App

• Native apps

• Platform dependent

• Uses native APIs

• Most powerful, least

portable

• Most popular among

users

• Best user experience

Native Device

APIs

Mobile development options

Option 3: Hybrid App

13

Native Shell

• Hybrid apps, plugins

• Developed as web apps

• Deployed and run as native apps

• Javascript calls the bridge code

• Plugins for direct access to native

APIs

• Looks like a native app

• Has limitations in accessing native

APIs

• Cordova, PhoneGap, Appcelerator,

Sencha

Native Device APIs

Mobile Brower

HTML5, CSS3,

JS

Bridge code

Comparing the options

14

Mobile Brower

HTML5,

CSS3, JS

Native App

Native Device

APIs

Native Shell

Native Device APIs

Mobile Brower

HTML5, CSS3,

JS

Bridge code

Browser only Native only Hybrid(browser+native)

Which option is AeroGear for ?

15

• Primarily

• Client-server type of apps

• Browser only apps

• Hybrid apps

• Also

• Native apps

• The communication and server side

features

Simplify mobile development

with AeroGear

16

AeroGear Mobile Development

Aerogear makes front end development easier and

unified in the following platforms

• Android

• iOS

• Mobile web

For the server side, AeroGear touches the following areas

• Push Notification (Android, JS, iOS)

• Security

• More coming up… 17

Unified Development

Libraries for different platforms

• Java for Android

• JavaScript for web browsers

• Objective-C for iOS

• Unified approach

• Single application for multiple Mobile platforms

• Same deployment can be viewed by both mobile device

browsers and desktop browsers

18

Push Notification

Notifications are a popular method of communication

The why and how of notification

• Alert apps about events, updates

• High scalability

• Lightweight messages

Push = messaging

from Server side

Push

19

App 7

Server

Push

Service

Push: The platform concept

20

Push

Servers

Security

21

Authentication Authorization

• OTP: One Time Password

• HTTPS: SSL

• General: username /password (encrypted transmission)

• Single Sign On

• Federated Identity Management using external Identity

Managers

Support for

front end development

22

User Interface Development

• UI Coding: Use HTML 5, CSS3 and

Javascript

• aerogear.js: javascript library

• REST: used for communications

23

AeroGear Development Communication and Storage

Pipe • A connection made to the server

• Connectivity to asynchronous data sources

Pipeline • A wrapper for a set of pipes

• Has management features for pipes

DataManager • Data connections

• Data models

• Data connection is represented as a Store

Store • Data Stores on the mobile platform

• Eg: SQLite(iOS, Android), Web Storage(HTML5)

24

Pipeline

pipe

Data Manager

iOS

Store

Android

Store

Web

Store

JavaScript Development

Creating Pipeline and Pipes

Using Data Manager and Store

25

Instantiate a Pipeline

Add pipes to the Pipeline

Name URL Type

Instantiate a DataManager

Adding stores to the DataManager

JavaScript Development

Creating Pipeline and Pipes

Using Data Manager and Store

var memberPipe = AeroGear.Pipeline([{

name: “2014",

settings: {

baseURL: “JUDCon/“

}

} ]).pipes.members;

//Create a custom local store

var dManage =

AeroGear.DataManager({

name: "mySessionStorage",

type: "SessionLocal",

id: "customID"

});

var dataManager = AeroGear.DataManager(

"membersStore" ),

MemberStore =

dataManager.stores["membersStore"];

26

The pipe’s URL will then look like: http://localhost/application_name/JUDCon/2014

Assign a store

Instantiate a data manager

Instantiate a pipe

pipe’s name

URL

Android Development Pipeline and Pipes

public class MyActivity extends ListActivity {

Pipeline pipeline;

void onCreate() {

pipeline = new Pipeline("http://www.judcon.com");

pipeline.pipe(Car.class);

}

void onStart() {

LoaderPipe<Car> pipe = pipeline.get("car", this);

pipe.read(new MyCallback());

}

}

Pipeline

Operations • Read

• Save

• Update

• Remove

27

Android Development contd…

StoreConfig memoryStoreConfig = new StoreConfig();

memoryStoreConfig.setContext(getApplicationContext());

memoryStoreConfig.setType(MEMORY);

memoryStoreConfig.setKlass(Data.class);

Store store = dataManager.store("memoryStore", memoryStoreConfig);

SQLStore

Memory Store

StoreConfig sqlStoreConfig = new StoreConfig();

sqlStoreConfig.setContext(getApplicationContext());

sqlStoreConfig.setType(SQL);

sqlStoreConfig.setKlass(Data.class);

Store store = dataManager.store("sqlStore",

sqlStoreConfig);

((SQLStore))store).open(/*callback*/);

Operations • Read

• Save

• Remove

• Filter

• Reset

28

Pipeline and Pipes

iOS Development

Pipeline

Operations • Read

• Save

• Update

• Remove

// NSURL object:

NSURL* serverURL = [NSURL URLWithString:@"http://todo-

aerogear.rhcloud.com/todo-server/"];

// create the 'todo' pipeline, which points to the baseURL

of the REST application

AGPipeline* todo = [AGPipeline

pipelineWithBaseURL:serverURL];

// Add a REST pipe for the 'projects' endpoint

id<AGPipe> projects = [todo pipe:^(id<AGPipeConfig>

config) {

[config setName:@"projects"];

// this is the default, can be emitted

[config setType:@"REST"];

}];

29

iOS Development contd…

// create the datamanager

AGDataManager* dm = [AGDataManager manager];

// add a new (default) store object:

id<AGStore> myStore = [dm store:^(id<AGStoreConfig> config) {

[config setName:@"tasks"];

}];

SQLite

Memory Store

// create the datamanager

AGDataManager* dm = [AGDataManager manager];

// add a new (default) store object:

id<AGStore> store = [dm store:^(id<AGStoreConfig>

config) {

[config setName:@"tasks"];

[config setType:@"SQLITE"];

}];

Data

Operations • Read

• Save

• Remove

• Filter

• Reset

30

The server side components

AeroGear Controller

AeroGear Security

UnifiedPush

31

AeroGear Controller

32

What is the AeroGear Controller ? • A lean MVC implemented in java

• Routes HTTP requests to plain Java Object endpoint, and

handles the results

• Can be deployed on any container supporting CDI(Context and

Dependency Injection)

public class Routes extends AbstractRoutingModule {

@Override

public void configuration() {

route()

.from("/").roles("admin")

.on(RequestMethod.GET)

.consumes(JSON)

.produces(JSP, JSON)

.to(Home.class).index();

}

}

AeroGear Controller continued…

33

Routes

public class Routes extends AbstractRoutingModule {

@Override

public void configuration() {

route()

.from("/").roles("admin")

.on(RequestMethod.GET)

.consumes(JSON)

.produces(JSP, JSON)

.to(Home.class).index();

}

}

AeroGear Controller continued…

Pagination

• If a page is too long for the screen

• Returns a limited number of elements

Sample code returning a page in AeroGear controller, with pagination

route()

.from("/cars")

.on(RequestMethod.GET)

.produces(JSON)

.to(Cars.class).findCarsBy(param(PaginationInfo.class), param("color"));

Error Handling

route()

.on(YourException.class)

.to(ExceptionHandler.class).errorPage();

34

Push Notification: Registration

35

Push Notification Server

Application

Registration

Sender

Storage

Developer

JBoss AS backend server

1

2 User

Push Notification: Runtime

36

Push Notification

Server Application

Registration

Sender

Storage

JBoss AS backend server

3

4

5

GCM

APN

Simple Push

Push for web clients

37

http

Push for Android

38

XMPP

Push for iOS

39

Push Notification: feature list

AeroGear Unified Push Notification Server • Single unified push notification

• Single server for multiple apps and mobile platforms

• Currently supports Google Cloud Messaging, Apple

Push Notification

• Web push based on Mozilla’s Simple Push

Unified Push Administration Console • A single place to manage configurations

• Register new push apps

• Register variants of platforms

• Currently supported: Android, iOS and Simple push

variants

40

App 7

Security

Java OTP

iOS OTP

Shiro

PicketLink

Hawk

41

Security

import org.jboss.aerogear.controller.spi.SecurityProvider;

public class AeroGearSecurityProvider implements SecurityProvider {

@Inject

private IdentityManagement identityManagement;

@Override

public void isRouteAllowed(Route route) throws ServletException {

if (!identityManagement.hasRoles(route.getRoles())) {

throw new AeroGearSecurityException(HttpStatus.AUTHENTICATION_FAILED);

}

}

}

42

AeroGear Security Implementation • Providing integration with security providers like

PicketLink, Shiro

• Completely decoupled from the AeroGear controller

Security: Filters and HSTS

Filters

• A security mechanism with many applications

• Eg: prevent ClickJacking

HSTS

• HTTP Strict Transport Security

• Force https usage

• Optional in AeroGear

43

Security: OTP AeroGear OTP

• One time password

• Increased security while executing transaction

• OTP and AeroGear Security can be used together or

separately

// verify the user’s otp public User otp(SimpleUser user, String otp) {

Totp totp = new Totp(secret.get());

boolean result = totp.verify(otp);

if (!result)

throw new RuntimeException("Invalid OTP");

return user;

}

}

44

// Get a user’s otp public class Otp {

@Inject

@Secret

private Instance<String> secret;

@Inject

@LoggedUser

private Instance<String> loggedInUserName;

public String secret() {

return new

Totp(secret.get()).uri(loggedInUserName.get());

}

The Road Ahead

45

Road Ahead

Browser Support • Windows Mobile

• Mobile Chrome

• Opera Mobile and Desktop

Push Notification • MQTT

• STOMP

46

Summary

• What is Aerogear

• Supported platforms

• Front end development

• AeroGear Libraries for each platform

• Server side development

• AeroGear Push Notification

• AeroGear Security

47

Useful Links

AeroGear References • http://aerogear.org

External References • http://www.markus-falk.com/mobile-frameworks-comparison-

chart/

• http://www.infoq.com/articles/javaee-mobile-application-

development-aerogear

• http://www.slideshare.net/lfryc/the-gear-you-need-to-go-

mobile-with-java-enterprise

• http://www.slideshare.net/jaxlondon2012/html-alchemy-the-

secrets-of-mixing-javascript-and-java-ee

• http://www.ohloh.net/p?ref=homepage&q=aerogear

48

Thank You

Start Gearing…

49

@prajods @Naveenrajbala