0
Hybrid MobileApp Development          Prepared by: Tuan Abdeen          Certified Salesforce.com Developer
Agenda•   ABSI•   SL Force.com Team•   Introduction to Mobile Development•   Hybrid Development Approaches     • HTML5 Hyb...
•   First Salesforce.com partner in Belgium (from 2002)•   Sri Lanka operations started from 2009                         ...
Sri Lanka Force.com Team           Tuan Abdeen           SCJP         Certified Salesforce Developer           Malaka Silv...
Intro to Mobile Development1. NativeYou can code native apps for each mobile platform (Android, iOS), taking advantage of ...
Hybrid Development Approaches                   Prepared by: Tuan Abdeen                   Certified Salesforce.com Develo...
PhoneGapWhat PhoneGap does here is, it will convert the web based application(developed with HTML5, CSS3 & JQueryMobile) i...
HTML5 Hybrid DevelopmentThe system was developed using pure HTML5, CSS3 and JQueryMobile.Because this application requires...
Prepared by: Tuan AbdeenCertified Salesforce.com Developer
VisualForce Hybrid DevelopmentThe solution was made using Visualforce, Apex Controller, SOQL with HTML5,CSS3 and JQueryMob...
Prepared by: Tuan AbdeenCertified Salesforce.com Developer
Mobile SDK Hybrid Development          The Mobile SDK is an open-source suite of          familiar technologies—like a RES...
Prepared by: Tuan AbdeenCertified Salesforce.com Developer
Other Technologies Used1. OAuth 2.0Salesforce OAuth 2 User-Agent authentication flow is used by iPad application.         ...
Other Technologies Used …2. Offline Data StorageOffline Date Storage was implemented with Apache Cordova’s Local Storage  ...
Other Technologies Used …3. PIN Code Authentication•   The User’s does not want to enter SFDC credentials every time when ...
Ongoing Research Areas• Mobile SDK enhancements   • Configure PIN timeout value   • Replace SmartStore with SQLite (SmartS...
Prepared by: Tuan AbdeenCertified Salesforce.com Developer
Upcoming SlideShare
Loading in...5
×

Hybrid mobile app development

2,165

Published on

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

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
2,165
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
63
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • ABSI salesforce gold partner Certified Consultants from Belgium SL has done 14 big projects for the last 3.5 years Knowledge in - Customer Portal - Force.com Sites - Sales cloud & Sales cycle (Opp, Product, PriceBook, Lead, Quote etc..) - we have people with Heroku Experience - Data Integration with Pervasive - Appexchahnge (all ready published Utility + report scheduler in due time)
  • All developers from Java background (almost everybody SCJP certified) Except for the 2 new comers all are Force.com DEV 401 certified Malaka already 501 certified and Me and Dhanusha is waiting for 501 results
  • Intro we were focusing on Force.com custom development and also Appexchange for last couple of years Because of the current trend and demand for iPad based mobile app development, we are now researching on SFDC mobile development
  • In Hybrid development all front end development is based on HTML5. We use Phonegap to wrap the application to become a native app as well as to get native platform device features. In Hybrid development we have tried 3 alternative approaches. Every single approach has its pros and cons. Pure HTML5 based approach. In this approach the HTML files are store at PhoneGap container and works well in Online and offline mode. But to connect to SFDC the only option is the Force.com Rest API. Well known VF page, APEX controllers and SOQL approach. Less development time, but offline mode does not work. Salesforce Mobile SDK – recently released as a pilot after last Dreamforce. It uses VF, apex controllers, SOQL, JS remoting plus many more features.
  • xCode => ABSI tuan@absi.be.ipad / isba1210 Pin => 1111
  • xCode => defiproIpad absi@renault.be.test / isba1234
  • Xcode => CT [email_address] 1qaz2wsx@
  • Transcript of "Hybrid mobile app development"

    1. 1. Hybrid MobileApp Development Prepared by: Tuan Abdeen Certified Salesforce.com Developer
    2. 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. 3. • First Salesforce.com partner in Belgium (from 2002)• Sri Lanka operations started from 2009 Prepared by: Tuan Abdeen Certified Salesforce.com Developer
    4. 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. 5. Intro to Mobile Development1. NativeYou can code native apps for each mobile platform (Android, iOS), taking advantage of each platforms 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. Prepared by: Tuan Abdeen Certified Salesforce.com Developer
    6. 6. Hybrid Development Approaches Prepared by: Tuan Abdeen Certified Salesforce.com Developer
    7. 7. PhoneGapWhat 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, notin a web browser), but as a native app. Prepared by: Tuan Abdeen Certified Salesforce.com Developer
    8. 8. HTML5 Hybrid DevelopmentThe system was developed using pure HTML5, CSS3 and JQueryMobile.Because this application requires to get information from Salesforce, the onlypossible approach was to use the Salesforce REST API.The application communicates with Force.com REST API using the forcetk.jsJavaScript wrapper. Forcetk.js (Force.com JavaScript REST Toolkit) is an opensource wrapper to the REST API.PhoneGap was used to convert the web base app to a native iOS app to install itto the iPad. Prepared by: Tuan Abdeen Certified Salesforce.com Developer
    9. 9. Prepared by: Tuan AbdeenCertified Salesforce.com Developer
    10. 10. VisualForce Hybrid DevelopmentThe 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 CSSto 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 itto the iPad. Prepared by: Tuan Abdeen Certified Salesforce.com Developer
    11. 11. Prepared by: Tuan AbdeenCertified Salesforce.com Developer
    12. 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. 13. Prepared by: Tuan AbdeenCertified Salesforce.com Developer
    14. 14. Other Technologies Used1. OAuth 2.0Salesforce 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 users 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. 15. Other Technologies Used …2. Offline Data StorageOffline 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. 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. 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. 18. Prepared by: Tuan AbdeenCertified Salesforce.com Developer
    1. A particular slide catching your eye?

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

    ×