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

  • 1,204 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,204
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Social Collaboration On Enterprise Data In Salesforce sforce Sale Co nities mmu e alForc Visu
  • 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. 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. 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. 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. 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. External Chatter App – First Try Cross-Domain Request X
  • 9. External Chatter App – High Level Architecture
  • 10. Architecture of an Externalized Chatter Application
  • 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. 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. 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. 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. Chatter Proxy Server – Sequence Of Events
  • 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. All about Appirio Technology-enabled professional services, supported by 1,000 cloud experts and a 600,000+ cloud developer community
  • 18. Michael Press Technical Architect & Cloud Asset Library Program Lead Appirio michael@appirio.com
  • 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. 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. 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. 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. Demo Backup Slides – Container Integration Screenshot of link post integration Screenshot of new feed item notification Screenshot of hide/close integration