1
Gearing Up for Mobile
Development with AeroGear
Prajod Vettiyattil
@prajods
in.linkedin.com/in/prajod

2

Naveen Raj Balasubramaniam
@Naveenrajbala
in.linkedin.com/in/naveenraj
Agenda
A walk with AeroGear
Simplify mobile development

Front end development support
Server side development support
The Road Ahead

Summary
3
A walk with AeroGear

4
Mobile Development Framework
Local Data
Management

User Interaction
Management

Authentication /
Authorization

Communication
Framework

Native API handler

Patch / Version
Management

Management

Monitoring

UI Framework
Data
Management

Request
Processing

Authentication /
Authorization

Device Variant
Management

Communication
Framework

Metering /
Billing

Patch / Version
Management

Monitoring

Management

Server side Framework
5

User / Device
Registration
Mobile Development Framework
AeroGear features
Local Data
Management

User Interaction
Management

Authentication /
Authorization

Communication
Framework

Native API handler

Patch / Version
Management

Management

Monitoring

UI Framework
Data
Management

Request
Processing

Authentication /
Authorization

Device Variant
Management

Communication
Framework

Metering /
Billing

Patch / Version
Management

Monitoring

Management

Server side Framework
6

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

HTML5,
CSS3, JS

11

• 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
• Native apps
Native App

Native Device
APIs

12

• Platform dependent
• Uses native APIs
• Most powerful, least
portable
• Most popular among
users
• Best user experience
Mobile development options

Option 3: Hybrid App
• Hybrid apps, plugins
Native Shell
Mobile Brower
HTML5, CSS3,
JS

Bridge code

Native Device APIs

13

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
•
•
•
•
Comparing the options
Mobile Brower

Native Shell
Mobile Brower

Native App
HTML5,
CSS3, JS

HTML5, CSS3,
JS

Bridge code

Native Device
APIs

Browser only
14

Native Device APIs

Native only

Hybrid(browser+native)
Which option is AeroGear for ?
• Primarily
• Client-server type of apps
• Browser only apps
• Hybrid apps

• Also
• Native apps
• The communication and server side
features
15
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
Push = messaging
from Server side

The why and how of notification
• Alert apps about events, updates
• High scalability
• Lightweight messages
App 7

Server

Push
Service

Push

19
Push: The platform concept

Push
Servers

20
Security
Authentication

Authorization

• OTP: One Time Password
• HTTPS: SSL
• General: username /password (encrypted transmission)
• Single Sign On
• Federated Identity Management using external Identity
Managers

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

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

24

Data Stores on the mobile platform
Eg: SQLite(iOS, Android), Web Storage(HTML5)

Data Manager
iOS
Store

Android
Store

Web
Store
JavaScript Development
Creating Pipeline and Pipes
Instantiate a Pipeline
Add pipes to the Pipeline

Name

URL

Using Data Manager and Store
Instantiate a DataManager
Adding stores to the DataManager

25

Type
JavaScript Development
Creating Pipeline and Pipes
var memberPipe = AeroGear.Pipeline([{
name: “2014",
settings: {
baseURL: “JUDCon/“
}
}
]).pipes.members;
The pipe’s URL will then look like:

URL

Instantiate a data manager

var dataManager = AeroGear.DataManager(
"membersStore" ),
MemberStore =
dataManager.stores["membersStore"];

26

pipe’s name

http://localhost/application_name/JUDCon/2014

Using Data Manager and Store

Assign a store

Instantiate a pipe

//Create a custom local store
var dManage =
AeroGear.DataManager({
name: "mySessionStorage",
type: "SessionLocal",
id: "customID"
});
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);
}

Pipeline
Operations
•
•
•
•

Read
Save
Update
Remove

void onStart() {
LoaderPipe<Car> pipe = pipeline.get("car", this);
pipe.read(new MyCallback());
}
}

27
Android Development contd…
SQLStore

Memory Store

28

Operations
StoreConfig sqlStoreConfig = new StoreConfig();
sqlStoreConfig.setContext(getApplicationContext());
sqlStoreConfig.setType(SQL);
sqlStoreConfig.setKlass(Data.class);
Store store = dataManager.store("sqlStore",
sqlStoreConfig);
((SQLStore))store).open(/*callback*/);

•
•
•
•
•

Read
Save
Remove
Filter
Reset

StoreConfig memoryStoreConfig = new StoreConfig();
memoryStoreConfig.setContext(getApplicationContext());
memoryStoreConfig.setType(MEMORY);
memoryStoreConfig.setKlass(Data.class);
Store store = dataManager.store("memoryStore", memoryStoreConfig);
iOS Development
Pipeline and Pipes
// NSURL object:
NSURL* serverURL = [NSURL URLWithString:@"http://todoaerogear.rhcloud.com/todo-server/"];

Pipeline
Operations
•
•
•
•

29

Read
Save
Update
Remove

// 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"];
}];
iOS Development contd…
SQLite

Memory Store

30

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

// create the datamanager
AGDataManager* dm = [AGDataManager manager];
// add a new (default) store object:
id<AGStore> myStore = [dm store:^(id<AGStoreConfig> config) {
[config setName:@"tasks"];
}];
The server side components

AeroGear Controller
AeroGear Security
UnifiedPush

31
AeroGear Controller
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();
}
}
32
AeroGear Controller continued…
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();
}
}

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

2 User

Developer

Push Notification Server
Application
Registration
Storage
Sender

JBoss AS backend server
35
Push Notification: Runtime
Push Notification
Server

5

Application
Registration

Simple Push

Storage

4
Sender

GCM

APN

3
JBoss AS backend server
36
Push for web clients

http

37
Push for Android

XMPP

38
Push for iOS

39
Push Notification: feature list
AeroGear Unified Push Notification Server
App 7

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

A single place to manage configurations
Register new push apps
Register variants of platforms
Currently supported: Android, iOS and Simple push
variants
Security

Hawk

Java OTP

PicketLink

iOS OTP

Shiro

41
Security
AeroGear Security Implementation
• Providing integration with security providers like
PicketLink, Shiro
• Completely decoupled from the AeroGear controller
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

}
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
// Get a user’s otp

// verify the user’s otp

public class Otp {

public User otp(SimpleUser user, String otp) {

@Inject
@Secret
private Instance<String> secret;

Totp totp = new Totp(secret.get());
boolean result = totp.verify(otp);
if (!result)
throw new RuntimeException("Invalid OTP");

@Inject
@LoggedUser
private Instance<String> loggedInUserName;

return user;
}

public String secret() {
return new
Totp(secret.get()).uri(loggedInUserName.get());
}

44

}
The Road Ahead

45
Road Ahead
Browser Support
•
•
•

Windows Mobile
Mobile Chrome
Opera Mobile and Desktop

Push Notification
•
•

46

MQTT
STOMP
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-comparisonchart/
• http://www.infoq.com/articles/javaee-mobile-applicationdevelopment-aerogear
• http://www.slideshare.net/lfryc/the-gear-you-need-to-gomobile-with-java-enterprise
• http://www.slideshare.net/jaxlondon2012/html-alchemy-thesecrets-of-mixing-javascript-and-java-ee
• http://www.ohloh.net/p?ref=homepage&q=aerogear
48
Thank You
@prajods

@Naveenrajbala

Start Gearing…

49

JUDCon 2014: Gearing up for mobile development with AeroGear

  • 1.
  • 2.
    Gearing Up forMobile Development with AeroGear Prajod Vettiyattil @prajods in.linkedin.com/in/prajod 2 Naveen Raj Balasubramaniam @Naveenrajbala in.linkedin.com/in/naveenraj
  • 3.
    Agenda A walk withAeroGear Simplify mobile development Front end development support Server side development support The Road Ahead Summary 3
  • 4.
    A walk withAeroGear 4
  • 5.
    Mobile Development Framework LocalData Management User Interaction Management Authentication / Authorization Communication Framework Native API handler Patch / Version Management Management Monitoring UI Framework Data Management Request Processing Authentication / Authorization Device Variant Management Communication Framework Metering / Billing Patch / Version Management Monitoring Management Server side Framework 5 User / Device Registration
  • 6.
    Mobile Development Framework AeroGearfeatures Local Data Management User Interaction Management Authentication / Authorization Communication Framework Native API handler Patch / Version Management Management Monitoring UI Framework Data Management Request Processing Authentication / Authorization Device Variant Management Communication Framework Metering / Billing Patch / Version Management Monitoring Management Server side Framework 6 User / Device Registration
  • 7.
    Mobile web Development Theremany mobile phone operating systems in the market. 7
  • 8.
    And there areFrameworks • • There are lot of technologies for every platform Native and non–native technologies 8
  • 9.
    Overview of AeroGear AeroGearis 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
  • 10.
    Browser support inAerogear 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
  • 11.
    Mobile development options Option1: Mobile Browser app Mobile Brower HTML5, CSS3, JS 11 • Mobile browser app(web app) • HTML5 + CSS3 + javascript • Most portable • Platform independent code • No access to native APIs
  • 12.
    Mobile development options Option2: Native App • Native apps Native App Native Device APIs 12 • Platform dependent • Uses native APIs • Most powerful, least portable • Most popular among users • Best user experience
  • 13.
    Mobile development options Option3: Hybrid App • Hybrid apps, plugins Native Shell Mobile Brower HTML5, CSS3, JS Bridge code Native Device APIs 13 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 • • • •
  • 14.
    Comparing the options MobileBrower Native Shell Mobile Brower Native App HTML5, CSS3, JS HTML5, CSS3, JS Bridge code Native Device APIs Browser only 14 Native Device APIs Native only Hybrid(browser+native)
  • 15.
    Which option isAeroGear for ? • Primarily • Client-server type of apps • Browser only apps • Hybrid apps • Also • Native apps • The communication and server side features 15
  • 16.
  • 17.
    AeroGear Mobile Development Aerogearmakes 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
  • 18.
    Unified Development Libraries fordifferent 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
  • 19.
    Push Notification Notifications area popular method of communication Push = messaging from Server side The why and how of notification • Alert apps about events, updates • High scalability • Lightweight messages App 7 Server Push Service Push 19
  • 20.
    Push: The platformconcept Push Servers 20
  • 21.
    Security Authentication Authorization • OTP: OneTime Password • HTTPS: SSL • General: username /password (encrypted transmission) • Single Sign On • Federated Identity Management using external Identity Managers 21
  • 22.
    Support for front enddevelopment 22
  • 23.
    User Interface Development •UI Coding: Use HTML 5, CSS3 and Javascript • aerogear.js: javascript library • REST: used for communications 23
  • 24.
    AeroGear Development Communication andStorage Pipe • • A connection made to the server Connectivity to asynchronous data sources Pipeline pipe 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 • • 24 Data Stores on the mobile platform Eg: SQLite(iOS, Android), Web Storage(HTML5) Data Manager iOS Store Android Store Web Store
  • 25.
    JavaScript Development Creating Pipelineand Pipes Instantiate a Pipeline Add pipes to the Pipeline Name URL Using Data Manager and Store Instantiate a DataManager Adding stores to the DataManager 25 Type
  • 26.
    JavaScript Development Creating Pipelineand Pipes var memberPipe = AeroGear.Pipeline([{ name: “2014", settings: { baseURL: “JUDCon/“ } } ]).pipes.members; The pipe’s URL will then look like: URL Instantiate a data manager var dataManager = AeroGear.DataManager( "membersStore" ), MemberStore = dataManager.stores["membersStore"]; 26 pipe’s name http://localhost/application_name/JUDCon/2014 Using Data Manager and Store Assign a store Instantiate a pipe //Create a custom local store var dManage = AeroGear.DataManager({ name: "mySessionStorage", type: "SessionLocal", id: "customID" });
  • 27.
    Android Development Pipeline andPipes public class MyActivity extends ListActivity { Pipeline pipeline; void onCreate() { pipeline = new Pipeline("http://www.judcon.com"); pipeline.pipe(Car.class); } Pipeline Operations • • • • Read Save Update Remove void onStart() { LoaderPipe<Car> pipe = pipeline.get("car", this); pipe.read(new MyCallback()); } } 27
  • 28.
    Android Development contd… SQLStore MemoryStore 28 Operations StoreConfig sqlStoreConfig = new StoreConfig(); sqlStoreConfig.setContext(getApplicationContext()); sqlStoreConfig.setType(SQL); sqlStoreConfig.setKlass(Data.class); Store store = dataManager.store("sqlStore", sqlStoreConfig); ((SQLStore))store).open(/*callback*/); • • • • • Read Save Remove Filter Reset StoreConfig memoryStoreConfig = new StoreConfig(); memoryStoreConfig.setContext(getApplicationContext()); memoryStoreConfig.setType(MEMORY); memoryStoreConfig.setKlass(Data.class); Store store = dataManager.store("memoryStore", memoryStoreConfig);
  • 29.
    iOS Development Pipeline andPipes // NSURL object: NSURL* serverURL = [NSURL URLWithString:@"http://todoaerogear.rhcloud.com/todo-server/"]; Pipeline Operations • • • • 29 Read Save Update Remove // 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"]; }];
  • 30.
    iOS Development contd… SQLite MemoryStore 30 // 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 // create the datamanager AGDataManager* dm = [AGDataManager manager]; // add a new (default) store object: id<AGStore> myStore = [dm store:^(id<AGStoreConfig> config) { [config setName:@"tasks"]; }];
  • 31.
    The server sidecomponents AeroGear Controller AeroGear Security UnifiedPush 31
  • 32.
    AeroGear Controller What isthe 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(); } } 32
  • 33.
    AeroGear Controller continued… Routes publicclass Routes extends AbstractRoutingModule { @Override public void configuration() { route() .from("/").roles("admin") .on(RequestMethod.GET) .consumes(JSON) .produces(JSP, JSON) .to(Home.class).index(); } } 33
  • 34.
    AeroGear Controller continued… Pagination • • Ifa 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
  • 35.
    Push Notification: Registration 1 2User Developer Push Notification Server Application Registration Storage Sender JBoss AS backend server 35
  • 36.
    Push Notification: Runtime PushNotification Server 5 Application Registration Simple Push Storage 4 Sender GCM APN 3 JBoss AS backend server 36
  • 37.
    Push for webclients http 37
  • 38.
  • 39.
  • 40.
    Push Notification: featurelist AeroGear Unified Push Notification Server App 7 • 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 • • • • 40 A single place to manage configurations Register new push apps Register variants of platforms Currently supported: Android, iOS and Simple push variants
  • 41.
  • 42.
    Security AeroGear Security Implementation •Providing integration with security providers like PicketLink, Shiro • Completely decoupled from the AeroGear controller 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 }
  • 43.
    Security: Filters andHSTS Filters • A security mechanism with many applications • Eg: prevent ClickJacking HSTS • HTTP Strict Transport Security • Force https usage • Optional in AeroGear 43
  • 44.
    Security: OTP AeroGear OTP •One time password • Increased security while executing transaction • OTP and AeroGear Security can be used together or separately // Get a user’s otp // verify the user’s otp public class Otp { public User otp(SimpleUser user, String otp) { @Inject @Secret private Instance<String> secret; Totp totp = new Totp(secret.get()); boolean result = totp.verify(otp); if (!result) throw new RuntimeException("Invalid OTP"); @Inject @LoggedUser private Instance<String> loggedInUserName; return user; } public String secret() { return new Totp(secret.get()).uri(loggedInUserName.get()); } 44 }
  • 45.
  • 46.
    Road Ahead Browser Support • • • WindowsMobile Mobile Chrome Opera Mobile and Desktop Push Notification • • 46 MQTT STOMP
  • 47.
    Summary • What isAerogear • Supported platforms • Front end development • AeroGear Libraries for each platform • Server side development • AeroGear Push Notification • AeroGear Security 47
  • 48.
    Useful Links AeroGear References •http://aerogear.org External References • http://www.markus-falk.com/mobile-frameworks-comparisonchart/ • http://www.infoq.com/articles/javaee-mobile-applicationdevelopment-aerogear • http://www.slideshare.net/lfryc/the-gear-you-need-to-gomobile-with-java-enterprise • http://www.slideshare.net/jaxlondon2012/html-alchemy-thesecrets-of-mixing-javascript-and-java-ee • http://www.ohloh.net/p?ref=homepage&q=aerogear 48
  • 49.