Salesforce1 Developer Week - UYSDUG - The Force.com Canvas spark

Integrating an existing mobile app built on Ionic + AngularJS into Salesforce1 using Force.com Canvas and NodeJS Express

Transcript

1. The Force.com Canvas’ spark: ! Integrating an existing mobile app built on Ionic + AngularJS into Salesforce1 using Force.com Canvas and NodeJS Express Salesforce1 Developer Week! May 2, 2014 #UYSDUG Aldo Fernandez! Software Engineer! @aldoforce
2. Aldo Fernandez! Software Engineer @aldoforce! aldo@sopwithcode.com
3. Follow UYSDUG for the latest news @uysdug #uysdug! /Uruguay-Salesforce-Developer-User-Group/! www.uysdug.com
4. Agenda ▪ Salesforce1 Platform! ▪ Canvas revisited! ▪ The Force.com Canvas’ spark ! ▪ Creating a mobile app! ▪ Architecting the integration with Force.com Canvas! ▪ Demo
5. Salesforce1 Platform Every developer is a mobile developer - #DF13 Session (http://www.youtube.com/watch?v=tKdrVU3Ycec) ! “If you can build an app on force.com, you can build a mobile app today.”! • but…! • What about integrating existing non Force.com apps?!
6. Salesforce1 Platform - API’s List ➡ SOAP! ➡ REST! ➡ Metadata! ➡ Streaming! ➡ Bulk! ➡ Tooling! ➡ Analytics! ➡ Chatter! ➡ Exact Target! ! ★ Heroku Connect*! ★ Force.com Canvas! ! What this really means?
7. It’s an INVITATION
8. Salesforce1 Platform - API’s List ▪ It’s an invitation to code your app in the language and platform of your choose! ▪ Heroku! ▪ Joyent! ▪ Engine Yard! ▪ Digital Ocean! ▪ Your own private server! ▪ …etc
9. Salesforce1 Platform - API’s List ▪ Benefits:! ▪ More options:! ▪ Language! ▪ Platform! ▪ Technology Stack! ▪ Build process! ▪ Developer’s resources! ▪ Ownership cost! ▪ NO Governor LIMITS
10. Force.com Canvas revisited “It enables you to easily integrate a third-party application in Salesforce. Force.com Canvas is a set of tools and JavaScript APIs that you can use to expose an application as a canvas app. ! This means you can take your new or existing applications and make them available to your users as part of their Salesforce experience.”! Force.com Canvas Developer’s Guide (developer.force.com)
11. Force.com Canvas revisited ▪ Includes tools to handle:! ▪ Authentication! ▪ OAuth flow! ▪ Signed Request! ▪ Context! ▪ Cross-domain XHR! ▪ Resizing! ▪ Events
12. Force.com Canvas revisited ▪ You can use in:! ▪ Visualforce page! ▪ Publisher! ▪ Chatter Feed/Tab! ▪ Salesforce Console! ▪ Salesforce1 app! ▪ The only requirement:! ▪ The hosting app has a secure URL (HTTPS)
13. The Force.com Canvas’ spark ▪ Are we able to integrate an existing mobile app using Force.com Canvas and wrap it in Salesforce1?! ▪ Can we make the mobile app to seamlessly interact and consume Salesforce.com services?! ▪ How fast we can deploy the app to an entire organization?
14. The Force.com Canvas’ spark ▪ The answer to all of these questions, begins with a single spark.
15. Creating a Mobile app - The basics ▪ A concept or idea! ▪ Technical requirements! ▪ Choose technology stack (mobile framework, language, libraries, build tools, monitoring, etc)! ▪ Development cycle (Code / Debug / Test)! ▪ Publish (Apple Store, Google Play, Blackberry World, etc)
16. Creating a Mobile app - Mobile framework
17. Creating a Mobile app - Mobile framework www.ionicframework.com
18. Creating a Mobile app - Ionic + Angular ▪ The new cool-guy in the block (beta Mar/14)! ▪ Javascript! ▪ Cordova / PhoneGap Integration! ▪ Ionic CLI build on top of Cordova CLI! ▪ Mobile-Optimized UI components! ▪ Build “native-feeling” hybrid applications! ▪ NodeJS friendly
19. Creating a Mobile app - The idea: Directory app ▪ Cloned the @ccoenrats Directory demo app (https:// github.com/ccoenraets/directory-angular-ionic)! ▪ QUICK DEMO!
20. Architecting the integration with Force.com Canvas Ionic App Salesforce.com Platform NodeJS Express App Javascript Library to interact with SFDC Canvas App ! ! ! ! ! iFrame SalesforceCanvas-nodejs Salesforce.com External platform User Authenticates with Signed Request Verifies Origin and get Context Embed the Context (JSON) object in a rendered Express View (EJS) using Context create a query SalesforceCanvas Javascript SDK Sfdc.canvas.client.ajax(url, settings)
21. Demo ▪ Create the Canvas App! ▪ Review Signed Request / Context object! ▪ Test on Canvas App Preview! ▪ Wrap Canvas app in Salesforce1! ▪ Test on Salesforce1! ▪ …SHOWTIME!
22. Additional Resources + Kudos ▪ @ccoenraets mobile framework stack and demo app https://github.com/ccoenraets/directory-angular-ionic.git ! ▪ @geekymartian https://github.com/bfagundez/salesforcecanvas-nodejs! ▪ Salesforce Canvas Javascript SDK https://github.com/forcedotcom/SalesforceCanvasJavascriptSDK! ▪ Canvas SDK Documentation https://bluejeans.com/static/js/thirdparty/sfdc/sdk/docs/symbols/ Sfdc.canvas.client.html! ▪ Ionic http://ionicframework.com ! ▪ Angular https://angularjs.org ! ▪ Express http://expressjs.com ! ▪ SSL Hack with Tunnels rubygems.org/gems/tunnels! ▪ Every developer is a mobile developer http://www.youtube.com/watch?v=tKdrVU3Ycec! ▪ Force.com Canvas Developer’s Guide developer.force.com
23. Q & A @aldoforce! aldoforce.com! /aldoforce
24. The Force.com Canvas’ spark: ! Integrating an existing mobile app built on Ionic + AngularJS into Salesforce1 using Force.com Canvas and NodeJS Express Salesforce1 Developer Week! May 2, 2014 #UYSDUG Aldo Fernandez! Software Engineer! @aldoforce Thank You! #s1devweek! #uysdug! #canvas! #angularjs! #node! #ionic!