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

2

Naveen Raj Balas...
Agenda
A walk with AeroGear
Simplify mobile development

Front end development support
Server side development support
The...
A walk with AeroGear

4
Mobile Development Framework
Local Data
Management

User Interaction
Management

Authentication /
Authorization

Communica...
Mobile Development Framework
AeroGear features
Local Data
Management

User Interaction
Management

Authentication /
Author...
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, JavaSc...
Browser support in Aerogear
Currently AeroGear supports the following desktop
web browsers
• Firefox
• Chrome
• IE
• Safar...
Mobile development options

Option 1: Mobile Browser app
Mobile Brower

HTML5,
CSS3, JS

11

• Mobile browser app(web
app)...
Mobile development options

Option 2: Native App
• Native apps
Native App

Native Device
APIs

12

• Platform dependent
• ...
Mobile development options

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

Bridge...
Comparing the options
Mobile Brower

Native Shell
Mobile Brower

Native App
HTML5,
CSS3, JS

HTML5, CSS3,
JS

Bridge code
...
Which option is AeroGear for ?
• Primarily
• Client-server type of apps
• Browser only apps
• Hybrid apps

• Also
• Native...
Simplify mobile development
with AeroGear

16
AeroGear Mobile Development
Aerogear makes front end development easier and
unified in the following platforms
• Android
•...
Unified Development
Libraries for different platforms
• Java for Android
• JavaScript for web browsers
• Objective-C for i...
Push Notification
Notifications are a popular method of communication
Push = messaging
from Server side

The why and how o...
Push: The platform concept

Push
Servers

20
Security
Authentication

Authorization

• OTP: One Time Password
• HTTPS: SSL
• General: username /password (encrypted tra...
Support for
front end development

22
User Interface Development
• UI Coding: Use HTML 5, CSS3 and
Javascript
• aerogear.js: javascript library
• REST: used for...
AeroGear Development
Communication and Storage
Pipe
•
•

A connection made to the server
Connectivity to asynchronous data...
JavaScript Development
Creating Pipeline and Pipes
Instantiate a Pipeline
Add pipes to the Pipeline

Name

URL

Using Data...
JavaScript Development
Creating Pipeline and Pipes
var memberPipe = AeroGear.Pipeline([{
name: “2014",
settings: {
baseURL...
Android Development
Pipeline and Pipes
public class MyActivity extends ListActivity {

Pipeline pipeline;
void onCreate() ...
Android Development contd…
SQLStore

Memory Store

28

Operations
StoreConfig sqlStoreConfig = new StoreConfig();
sqlStore...
iOS Development
Pipeline and Pipes
// NSURL object:
NSURL* serverURL = [NSURL URLWithString:@"http://todoaerogear.rhcloud....
iOS Development contd…
SQLite

Memory Store

30

// create the datamanager
AGDataManager* dm = [AGDataManager manager];
//...
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 Jav...
AeroGear Controller continued…
Routes
public class Routes extends AbstractRoutingModule {
@Override
public void configurat...
AeroGear Controller continued…
Pagination
•
•

If a page is too long for the screen
Returns a limited number of elements

...
Push Notification: Registration
1

2 User

Developer

Push Notification Server
Application
Registration
Storage
Sender

JB...
Push Notification: Runtime
Push Notification
Server

5

Application
Registration

Simple Push

Storage

4
Sender

GCM

APN...
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
• Sing...
Security

Hawk

Java OTP

PicketLink

iOS OTP

Shiro

41
Security
AeroGear Security Implementation
• Providing integration with security providers like
PicketLink, Shiro
• Complet...
Security: Filters and HSTS
Filters

• A security mechanism with many applications
• Eg: prevent ClickJacking
HSTS
• HTTP S...
Security: OTP

AeroGear OTP
• One time password
• Increased security while executing transaction
• OTP and AeroGear Securi...
The Road Ahead

45
Road Ahead
Browser Support
•
•
•

Windows Mobile
Mobile Chrome
Opera Mobile and Desktop

Push Notification
•
•

46

MQTT
S...
Summary
• What is Aerogear
• Supported platforms
• Front end development
• AeroGear Libraries for each platform

• Server ...
Useful Links
AeroGear References
• http://aerogear.org

External References
• http://www.markus-falk.com/mobile-frameworks...
Thank You
@prajods

@Naveenrajbala

Start Gearing…

49
Upcoming SlideShare
Loading in...5
×

JUDCon 2014: Gearing up for mobile development with AeroGear

1,615

Published on

#NammaJUDCon. This presentation explains the concepts and featues of the AeroGear Mobile development project. The project is part of the JBoss community
This was presented at the JBoss Users and Developers Conference(JUDCon), Jan 2014, Bangalore

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,615
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "JUDCon 2014: Gearing up for mobile development with AeroGear"

  1. 1. 1
  2. 2. 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
  3. 3. Agenda A walk with AeroGear Simplify mobile development Front end development support Server side development support The Road Ahead Summary 3
  4. 4. A walk with AeroGear 4
  5. 5. 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
  6. 6. 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
  7. 7. Mobile web Development There many mobile phone operating systems in the market. 7
  8. 8. And there are Frameworks • • There are lot of technologies for every platform Native and non–native technologies 8
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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 • • • •
  14. 14. 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)
  15. 15. 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
  16. 16. Simplify mobile development with AeroGear 16
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Push: The platform concept Push Servers 20
  21. 21. 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
  22. 22. Support for front end development 22
  23. 23. User Interface Development • UI Coding: Use HTML 5, CSS3 and Javascript • aerogear.js: javascript library • REST: used for communications 23
  24. 24. 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
  25. 25. 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
  26. 26. 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" });
  27. 27. 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
  28. 28. 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);
  29. 29. 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"]; }];
  30. 30. 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"]; }];
  31. 31. The server side components AeroGear Controller AeroGear Security UnifiedPush 31
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. Push Notification: Registration 1 2 User Developer Push Notification Server Application Registration Storage Sender JBoss AS backend server 35
  36. 36. Push Notification: Runtime Push Notification Server 5 Application Registration Simple Push Storage 4 Sender GCM APN 3 JBoss AS backend server 36
  37. 37. Push for web clients http 37
  38. 38. Push for Android XMPP 38
  39. 39. Push for iOS 39
  40. 40. 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
  41. 41. Security Hawk Java OTP PicketLink iOS OTP Shiro 41
  42. 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. 43. 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
  44. 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. 45. The Road Ahead 45
  46. 46. Road Ahead Browser Support • • • Windows Mobile Mobile Chrome Opera Mobile and Desktop Push Notification • • 46 MQTT STOMP
  47. 47. Summary • What is Aerogear • Supported platforms • Front end development • AeroGear Libraries for each platform • Server side development • AeroGear Push Notification • AeroGear Security 47
  48. 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. 49. Thank You @prajods @Naveenrajbala Start Gearing… 49
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×