hybrid mobile app development

18
Hybrid Mobile App Development Prepared by: Tuan Abdeen Certified Salesforce.com Developer

Upload: chamil-madusanka

Post on 11-May-2015

2.067 views

Category:

Technology


1 download

DESCRIPTION

Sri Lanka Salesforce Platform Developer User Group : First Meetup : Technical session : Hybrid Mobile App Development

TRANSCRIPT

Page 1: Hybrid mobile app development

Hybrid Mobile App Development

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 2: Hybrid mobile app development

Agenda

• ABSI

• SL Force.com Team

• Introduction to Mobile Development

• Hybrid Development Approaches

• HTML5 Hybrid Development

• VisualForce Hybrid Development

• Mobile SDK Hybrid Development

• Other Technologies Used

• OAuth 2.0

• Offline Data Storage

• PIN Code Authentication

• Ongoing Research Areas

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 3: Hybrid mobile app development

• First Salesforce.com partner in Belgium (from 2002)

• Sri Lanka operations started from 2009

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 4: Hybrid mobile app development

Tuan Abdeen SCJP

Certified Salesforce Developer

Malaka Silva SCJP

Certified Salesforce Advance Developer

Sri Lanka Force.com Team

Inshar Anas SCJP, SCWCD

Certified Salesforce Developer

Shermal Warnakula SCJP

Amila Pathirana

Dhanusha Mahatantila SCJP

Certified Salesforce Developer

Vishanka Perera SCJP

Certified Salesforce Developer

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 5: Hybrid mobile app development

1. Native You can code native apps for each mobile platform (Android, iOS), taking advantage of each platform's

native capabilities.

2. HTML5You can build HTML5 apps using familiar technologies such as HTML5, CSS, and JavaScript. Same

app can run on all platforms, but no access to native platform features.

3. HybridYou can create hybrid apps that use a JavaScript bridge in a native container to merge the portability of

HTML5 with native device capabilities, such as the camera or address book.

Intro to Mobile Development

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 6: Hybrid mobile app development

Hybrid Development Approaches

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 7: Hybrid mobile app development

What PhoneGap does here is, it will convert the web based application (developed with HTML5, CSS3 & JQueryMobile) into a native iOS, Android, Blackberry, Windows Phone, Palm OS and Symbian kind of an application.

Therefore, the end-user will use the app not as a web based app (meaning, not in a web browser), but as a native app.

PhoneGap

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 8: Hybrid mobile app development

HTML5 Hybrid Development

The system was developed using pure HTML5, CSS3 and JQueryMobile.

Because this application requires to get information from Salesforce, the only possible approach was to use the Salesforce REST API.

The application communicates with Force.com REST API using the forcetk.js JavaScript wrapper. Forcetk.js (Force.com JavaScript REST Toolkit) is an open source wrapper to the REST API.

PhoneGap was used to convert the web base app to a native iOS app to install it to the iPad.

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 9: Hybrid mobile app development

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 10: Hybrid mobile app development

VisualForce Hybrid Development

The solution was made using Visualforce, Apex Controller, SOQL with HTML5, CSS3 and JQueryMobile.

Best Practices:•Marking a VF page as HTML5. <apex:page docType="html-5.0“ … >

•Set standardStylesheets="false" on the apex:page for JQueryMobile CSS to apply iPad styles on the VF page.

•Using the ‘viewport’ meta tag. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

PhoneGap was used to convert the web base app to a native iOS app to install it to the iPad.

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 11: Hybrid mobile app development

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 12: Hybrid mobile app development

Mobile SDK Hybrid Development

The Mobile SDK is an open-source suite of familiar technologies—like a REST API and OAuth 2.0 - that you can use to build great mobile apps.

The Mobile SDK for iOS contains native Objective-C libraries, and an XCode template to enable developers to rapidly build iOS applications that securely connect to Force.com and Database.com.

The Mobile SDK provides a container based on PhoneGap. The container enables HTML5-based applications to leverage the libraries such as OAuth and secure offline storage, effectively providing an enterprise-ready hybrid application container.

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 13: Hybrid mobile app development

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 14: Hybrid mobile app development

Other Technologies Used

1. OAuth 2.0

Salesforce OAuth 2 User-Agent authentication flow is used by iPad application.

After the consumer has an access

token, they can use the access

token to access Salesforce data on

the end user's behalf and a refresh

token to get a new access token if it

becomes invalid for any reason.

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 15: Hybrid mobile app development

Other Technologies Used …

2. Offline Data Storage

Offline Date Storage was implemented with Apache Cordova’s Local Storage

API.

This API was used within the PhoneGap context to use the iPad Device’s

storage support.

SQLite is a software library that implements a self-contained, 

server-less, zero-configuration, transactional SQL database engine.

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 16: Hybrid mobile app development

Other Technologies Used …

3. PIN Code Authentication

• The User’s does not want to enter SFDC credentials every time when they

want to access the iPad Application. (OAuth 2.0 User Agent Flow with

Access & Refresh token)

• In subsequent logins, we use the access & refresh token that has been

locally saved and do automatic login on behalf of the User.

• Next issue was the security problem of not asking any credentials to access

the iPad Application.

• PIN Code Authentication built for that purpose. (4 digit)

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 17: Hybrid mobile app development

Ongoing Research Areas

• Mobile SDK enhancements

• Configure PIN timeout value

• Replace SmartStore with SQLite (SmartStore in one or more ‘soups’. A

soup, conceptually speaking, is a logical collection of data records -

represented as JSON objects)

• How to represent Relational DB structure in SQLite

• Way of pushing offline stored data to SFDC when the device is

connected (synching stale data)

• Dynamically creating iPad screen, depend on SFDC metadata (Page

Layout & Field-level security)

• Synch device contacts with SFDC contacts (QRCODE Integration)

Prepared by: Tuan AbdeenCertified Salesforce.com Developer

Page 18: Hybrid mobile app development

Prepared by: Tuan AbdeenCertified Salesforce.com Developer