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

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

2. 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 Abdeen
Certified Salesforce.com Developer

3. • First Salesforce.com partner in Belgium (from 2002)
• Sri Lanka operations started from 2009
Prepared by: Tuan Abdeen
Certified Salesforce.com Developer

4. Sri Lanka Force.com Team
Tuan Abdeen SCJP
Certified Salesforce Developer
Malaka Silva SCJP
Certified Salesforce Advance Developer
Dhanusha Mahatantila SCJP
Certified Salesforce Developer
Vishanka Perera SCJP
Certified Salesforce Developer
Inshar Anas SCJP, SCWCD
Certified Salesforce Developer
Shermal Warnakula SCJP
Amila Pathirana
Prepared by: Tuan Abdeen
Certified Salesforce.com Developer

5. Intro to Mobile Development
1. Native
You can code native apps for each mobile platform (Android, iOS), taking advantage of each platform's
native capabilities.
2. HTML5
You 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. Hybrid
You 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.
Prepared by: Tuan Abdeen
Certified Salesforce.com Developer

6. Hybrid Development Approaches
Prepared by: Tuan Abdeen
Certified Salesforce.com Developer

7. PhoneGap
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.
Prepared by: Tuan Abdeen
Certified Salesforce.com Developer

8. 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 Abdeen
Certified Salesforce.com Developer

9. Prepared by: Tuan Abdeen
Certified Salesforce.com Developer

10. 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 Abdeen
Certified Salesforce.com Developer

11. Prepared by: Tuan Abdeen
Certified Salesforce.com Developer

12. 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 Abdeen
Certified Salesforce.com Developer

13. Prepared by: Tuan Abdeen
Certified Salesforce.com Developer

14. 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 Abdeen
Certified Salesforce.com Developer

15. 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 Abdeen
Certified Salesforce.com Developer

16. 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 Abdeen
Certified Salesforce.com Developer

17. 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 Abdeen
Certified Salesforce.com Developer

18. Prepared by: Tuan Abdeen
Certified Salesforce.com Developer