hybrid mobile app development
DESCRIPTION
Sri Lanka Salesforce Platform Developer User Group : First Meetup : Technical session : Hybrid Mobile App DevelopmentTRANSCRIPT
Hybrid Mobile App Development
Prepared by: Tuan AbdeenCertified Salesforce.com Developer
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
• First Salesforce.com partner in Belgium (from 2002)
• Sri Lanka operations started from 2009
Prepared by: Tuan AbdeenCertified Salesforce.com Developer
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
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
Hybrid Development Approaches
Prepared by: Tuan AbdeenCertified Salesforce.com Developer
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
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
Prepared by: Tuan AbdeenCertified Salesforce.com Developer
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
Prepared by: Tuan AbdeenCertified Salesforce.com Developer
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
Prepared by: Tuan AbdeenCertified Salesforce.com Developer
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
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
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
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
Prepared by: Tuan AbdeenCertified Salesforce.com Developer