Externalizing Chatter Using Heroku, Angular.js, Node.js and Chatter REST APIs


Published on

Enterprises love the social collaboration of Chatter, especially since Chatter is tightly aligned with enterprise data in Salesforce. Many companies that integrate their legacy data into Salesforce want to extend Chatter to these mission critical, integrated systems allowing employees to engage in communities right where they work. Join us as Appirio shows how you can use Chatter to engage user communities in external systems using the Chatter UI in the cloud to plug Chatter into external systems with just one line of code. We'll walk through architectural patterns for avoiding browser cross-domain restrictions, access Chatter APIs from the browser, then dive deep into the implementation details of the AngularJS User Interface, NodeJS Chatter Proxy server on Heroku, use of Oauth2, Heroku platform considerations, and specific Chatter REST APIs used.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Externalizing Chatter Using Heroku, Angular.js, Node.js and Chatter REST APIs

  1. 1. Chatter Everywhere Externalizing Chatter with Heroku and the Chatter REST APIs Michael Press, Technical Architect & Cloud Asset Library Program Lead, Appirio michael@appirio.com
  2. 2. Social Collaboration On Enterprise Data In Salesforce sforce Sale Co nities mmu e alForc Visu
  3. 3. Collaboration On Enterprise Data Outside of Salesforce tranet In r rowse B Order Detail Document Libraries Comments Conversations Chatter > Order #1234 Chatter > Groups > Marketing Group Point Share egacy L ystem S
  4. 4. Chatter Everywhere - Design Goals Trivial installation – embed Chatter in any app with 1 line of code SaaS Subscription - Chatter As A Service Standard UX - Closely follow standard Chatter look-and-feel Standard Salesforce Authentication – Oauth2 Adaptable - Conform to any container size Contextual - Parameterized context & container integration Customizable – Custom branding, language translation, etc. Browser-independent– Chrome, Firefox, IE 8+
  5. 5. Challenges to Externalizing Chatter Chatter REST APIs return data – you need to write a UI Cross-Domain restriction – can’t directly call APIs from client Authentication & Authorization Refresh Token storage & security Multiple apps & multiple languages
  6. 6. Considerations for an External Chatter App User Interface – Which Chatter features do you need? Cross-Domain browser restrictions – Where is your proxy server? Authentication – Oauth2 vs. Session ID vs. SSO Refresh Token security – How to encrypt? Store in cookie or db? Server Security – Entitlements or access keys Other Integrations – Google Translate or enterprise application Chatter Licenses – Not all licenses support all Chatter features UI Flow - When/how to link back to Salesforce
  7. 7. Chatter Everywhere Demo External Chatter locations ▪ Intranet, SharePoint, Legacy App, Browser sidebar Chatter Features ▪ Feeds – comments, likes, posts ▪ Navigation – Feeds, People, Groups ▪ Custom features – branding, views, language translation Container Integration ▪ Show/hide, link post population, new feed item notification
  8. 8. External Chatter App – First Try Cross-Domain Request X
  9. 9. External Chatter App – High Level Architecture
  10. 10. Architecture of an Externalized Chatter Application
  11. 11. Chatter Everywhere Technologies Browser client • AngularJS - Single-page app, HTML markup, two-way data binding, MVCish, dependency injection, handles JSON well Chatter Proxy Server • Heroku for price, scalability, add-ons (app monitoring, db) • Node.JS for package mgmt, Heroku support, fast & non-blocking • Nforce for authentication (Salesforce Oauth2 web server flow), utilities • Npm.Crypto.js for refresh token encryption • Google Translate APIs for language translation
  12. 12. Chatter REST API Authentication OAuth2 ▪ Requires one-time authentication & authorization step by the user ▪ Provides permanent (revocable) access via refresh token. ▪ Treat refresh tokens as securely as a password (encrypt it) Salesforce Session ID ▪ Direct replacement for Oauth token for custom Chatter apps in VisualForce SSO & Connected Apps ▪ <company>.my.salesforce.com as your OAuth2 endpoint + Connected Apps = users skip authentication and authorization
  13. 13. Chatter REST APIs for User Data /connect/organization – determine if feed polling enabled /chatter/feeds/news/me/is-modified – new feed item available? /chatter/feeds/to/me/feed-items – my feed /chatter/feeds/news/<userid>/feed-items – user’s feed /chatter/users/<userid> – user profile /chatter/users/me/following/filterType==005 – users I’m following /chatter/users?q=<chars>* – search by user name
  14. 14. Code: AngularJS Client <!-- CHATTER PUBLISHER --> <div data-chatterpublisher></div> <!-- CHATTER FEED --> <ul class="feedcontainer actionsOnHoverEnabled" data-ng-controller="MainCtrl"> <!-- FEED ITEMS --> <li ng-repeat="item in feed.items"> <div data-translatablefeed="item"/> </li> </ul> <!-- SHOW MORE BUTTON --> <div class="cxshowmorefeeditemscontainer" data-ng-show="feed.nextPageUrl != null"> <a href data-ng-click="loadNextPage($event,feed.nextPageUrl);">Show More</a> </div>
  15. 15. Chatter Proxy Server – Sequence Of Events
  16. 16. A Few Specific Technical Challenges Chatter Images – URLs are provided in JSON, but access token expires, URL fails without proxy server being aware No sorting on Group and User discovery feeds New feed item notification • “Enabled Chatter Feed Polling” must be enabled in Salesforce org. • Query Identity service, poll isModifiedUrl on the “me” feed Translations – may fail without warning, UI looks unresponsive
  17. 17. All about Appirio Technology-enabled professional services, supported by 1,000 cloud experts and a 600,000+ cloud developer community
  18. 18. Michael Press Technical Architect & Cloud Asset Library Program Lead Appirio michael@appirio.com
  19. 19. Chatter Everywhere - Implementation Product Manager/Architect fulltime for 3 months 45 CloudSpokes contests $35,000 total prizes AngularJS, NodeJS on Heroku, Chatter REST APIs XXX lines of code < $100/month Heroku fees
  20. 20. Externalizing Chatter With 1 Line Of Code Conversations Chatter > Groups > Marketing Group <iframe src="https://chattereverywhere.com/base#?record=000012345&notify&refreshbtn”/> server branding context (feed) container options app options
  21. 21. Demo Backup Slides – Chatter externalized locations Screenshot of CE in SharePoint Screenshot of CE in Intranet Screenshot of CE in Legacy App Screenshot of CE in browser sidebar
  22. 22. Demo Backup Slides – Chatter Everywhere features Screenshot of CE feed w/ • Text, link, image feed items • Comments • Likes • Filled in post form Screenshot of CE Group Search w/typeahead Screenshot of CE People Search w/typeahead Screenshot of CE Gallery View Screenshot of CE custom branding – presscorp, avon Screenshot of CE language translation
  23. 23. Demo Backup Slides – Container Integration Screenshot of link post integration Screenshot of new feed item notification Screenshot of hide/close integration