Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud APIs and App Dev

12,352 views

Published on

From setting up your development environment to shipping a great new app for your IBM Connections Cloud instance, this session shows you how to achieve all that and more. We define and review a baseline project with basic scaffold code, including a structured layout, events, modules, package conventions, functional skeletons for streams, embedded experiences, apps interactions, native UI/UX dialogs, buttons, and more. We review best practice tips and "gotcha" areas, and provide detailed examples.

Full code samples available at:
https://github.com/dvdsmpsn/ibm-connect-2016-examples/

Published in: Internet
  • Be the first to comment

IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud APIs and App Dev

  1. 1. 1402 - Getting Technically Cozy with IBM Connections Cloud APIs and App Dev Patrick Li, AppFusions; David Simpson, AppFusions
  2. 2. Introduction • Who? • Inside-out vs. outside-in integrations • Activity Stream Integration • Embedded Experience • Community Apps • UI Extension Points
  3. 3. Who are we? David Simpson Senior Developer and Architect at AppFusions @dvdsmpsn Patrick Li Co-Founder / CTO and Architect at AppFusions @patrickli
  4. 4. Who are we? AppFusions solves mixed-technology integration problems, bringing engineering and business workflows together, so you can work better, faster, smoother. Lately, we have been developing a scalable framework to develop, enable and deploy dozens of integrations for IBM Connections Cloud and on-premise. … and many more… IBM Connections
  5. 5. Using real code… https://github.com/dvdsmpsn/ibm-connect-2016-examples
  6. 6. Integration types Inside-out: Injecting IBM Connections content to your external app Outside-in: Injecting your external content into IBM Connections
  7. 7. Inside-out integrations Enhances the stickiness of the external app • Adding the IBM Connections header into your external app • Community Cards & Business Cards (on-premise only) • Using IBM Connections Cloud for authentication • Using any published IBM Connections REST API to pull content from IBM Connections into your app
  8. 8. Inside-out integrations - example 1507: Building Applications Using the IBM Connections Cloud Developer Experience
  9. 9. Outside-in integrations Enhances the stickiness of IBM Connections • Adding external links into to the IBM Connections Cloud header • Activity Streams • Cloud Embedded Experiences • Community Apps • Profiles
  10. 10. Outside-in integrations - example Powered by
  11. 11. Outside-in integrations - example Powered by
  12. 12. Outside-in integrations - example Powered by
  13. 13. Outside-in integrations - example Powered by
  14. 14. Live Demo: Salesforce in IBM Connections Cloud
  15. 15. Deep Dive: Posting to Activity Streams
  16. 16. Steps to build smart looking activity events Reference http://tiny.cc/activity-streams-api
  17. 17. Several REST endpoints available Public Updates /connections/opensocial/basic/rest/activitystreams/@public/@all/@all /connections/opensocial/oauth/rest/activitystreams/@public/@all/@all Personal Updates /connections/opensocial/basic/rest/activitystreams/@me/@all/@all /connections/opensocial/oauth/rest/activitystreams/@me/@all/@all Community Updates /connections/opensocial/basic/rest /activitystreams/urn:lsid:lconn.ibm.com:communities.community:COMMUNITY_UUID_HERE/@all/@all /connections/opensocial/oauth/rest /activitystreams/urn:lsid:lconn.ibm.com:communities.community:COMMUNITY_UUID_HERE/@all/@all Reference http://tiny.cc/activity-streams-api
  18. 18. A little setup • Using curl on the command line • Using some variables to hide user credentials, community_uuid
  19. 19. Basic Activity
  20. 20. Basic Activity with title
  21. 21. Activity with templated title
  22. 22. Activity with templated title & target
  23. 23. Templated titles == i18n for free http://tiny.cc/templated-titles In English: • ${add}=${Actor} added ${Object}. • ${add.target}=${Actor} added ${Object} to ${Target}. • ${create}=${Actor} created ${Object}. • ${create.target}=${Actor} created ${Object} in ${Target}. • ${post}=${Actor} posted ${Object}. • ${post.target}=${Actor} posted ${Object} to ${Target}. • ${comment}=${Actor} created a comment. • ${comment.target}=${Actor} commented on ${Target}. • ${update}=${Actor} updated ${Object}. • ${update.target}=${Actor} updated ${Object} in ${Target}.
  24. 24. Activity with generator
  25. 25. Activity with basic HTML content
  26. 26. Deep Dive: Embedded Experience
  27. 27. Embedded Experience • Based on opensocial technology • Produces an iframe which points to your server • iframe uses HTML5 sandbox attribute for security sandbox="allow-scripts allow-popups allow-forms allow-same-origin” • Cross-origin communication made possible with window.postMessage Reference: https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe#attr-sandbox https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
  28. 28. Embedded Experience - Registration • Customers must register each cloud embedded experience • Registration is in the admin UI • As a user with the AppDeveloper role
  29. 29. Embedded Experience - Registration
  30. 30. Embedded Experience - Posting an activity
  31. 31. OpenSocial object in activity External App URL Custom data / payload iframe dimensions
  32. 32. Message posted
  33. 33. Message posted Context data as a string
  34. 34. Message posted personData
  35. 35. Message posted customPayload (from openSocial object)
  36. 36. Message posted Cloud EE URL
  37. 37. Message posted concise userData
  38. 38. Embed responsively… https://cdn.rawgit.com/dvdsmpsn/ibm-connect-2016- examples/master/activity-streams/cloud-embedded-experience/ee.html
  39. 39. Deep Dive: Community Apps
  40. 40. Community Apps • A single reusable embedded app* hosted on the IBM Connections Cloud server • Produces an iframe which points to your server • iframe uses HTML5 sandbox attribute for security sandbox="allow-scripts allow-popups allow-forms allow-same-origin” • Cross-origin communication made possible with window.postMessage * Embedded Apps – the term iWidget is retired from the lexicon!
  41. 41. Community Apps - Registration • Via REST API • As a user with the AppDeveloper role • Using curl: Documentation: http://tiny.cc/create-community-app
  42. 42. skeleton.json External App URL iframe dimensions
  43. 43. Community Apps – in situ
  44. 44. Persisting user data in your app • OAuth 2 against IBM Connections Cloud  /manage/oauth2/authorize  /manage/oauth2/token • Collect user info /connections/opensocial/oauth/rest/people/@me • Store user data in your app
  45. 45. UI Extensions
  46. 46. Adding the IBM Connections header into your external app
  47. 47. • Add an empty div only when you want to display the IBM Connections header in your external app: • Isolate OneUI styles from the rest of your page Adding the IBM Connections header into your external app
  48. 48. • Test for the presence of this div and only then inject the IBM Connections banner CSS & JS • apps.na.collabserv.com - North America • apps.ce.collabserv.com - Central Europe • apps.ap.collabserv.com - Asia Pacific Example: https://cdn.rawgit.com/dvdsmpsn/ibm-connect-2016-examples/master/connections-header/example/index.html Adding the IBM Connections header into your external app
  49. 49. Service Menu extension Documentation: http://tiny.cc/service-menu
  50. 50. Service Menu extension Use a 1 pixel x 1 pixel transparent gif/png for the icon Documentation: http://tiny.cc/service-menu
  51. 51. Service Menu extension Documentation: http://tiny.cc/service-menu
  52. 52. Contact Record extension Documentation: http://tiny.cc/contact-record
  53. 53. Contact Record extension ${contact_id} The ID of the contact record. Use a 1 pixel x 1 pixel transparent gif/png for the icon
  54. 54. Contact Record extension
  55. 55. Person Component extension Documentation: http://tiny.cc/person-component
  56. 56. Person Component extension ${user_id} The ID of the current user from where the this button was clicked (i.e. the ID of the user whose Profile this was clicked from). Use a 1 pixel x 1 pixel transparent gif/png for the icon
  57. 57. Person Component extension
  58. 58. File Menu extension Documentation: http://tiny.cc/file-menu
  59. 59. File Menu extension ${file_id} The ID of the file. ${user_id} The ID of the current user. ${subscriber_id} The ID of the current user. ${org_id} The ID of the organization of the current user. ${customer_id} The ID of the organization of the current user.
  60. 60. File Menu extension • Specifies which mime type to use • Leave blank for all file types • Otherwise, a separate extension definition per mime type
  61. 61. File Menu extension
  62. 62. New File Menu extension Documentation: http://tiny.cc/new-file-menu
  63. 63. New File Menu extension
  64. 64. New File Menu extension
  65. 65. What’s next?
  66. 66. Coming soon – Q1/Q2 2016 • General availability of integration apps for IBM Connections Cloud & on-premise • Dozens of flavors: … and many more… IBM Connections OneDrive/Office 365, Google Drive, IBM Jazz, Box, Dropbox, Asana, Salesforce, GitHub, Zendesk, Trello, JIRA, Confluence, Twitter, New Relic, IBM Maximo, WordPress, Chatter, Sharepoint, Alfresco and many more
  67. 67. Talk to us… David Simpson david@appfusions.com @dvdsmpsn Patrick Li patrick@appfusions.com @patrickli
  68. 68. We are grateful and thankful for the support of the IBM Connections Cloud product and engineering teams. Thank you
  69. 69. Acknowledgements and Disclaimers Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.
  70. 70. Acknowledgements and Disclaimers cont. © Copyright IBM Corporation 2016. All rights reserved. U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. IBM, the IBM logo, ibm.com, and IBM Connections are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml AppFusions and AppSpokes are trademarks of AppFusions, Inc. in the United States and other countries. Other company, product, or service names may be trademarks or service marks of others.

×