SlideShare a Scribd company logo
1 of 72
1402 - Getting Technically Cozy with IBM
Connections Cloud APIs and App Dev
Patrick Li, AppFusions; David Simpson, AppFusions
Introduction
• Who?
• Inside-out vs. outside-in integrations
• Activity Stream Integration
• Embedded Experience
• Community Apps
• UI Extension Points
Who are we?
David Simpson
Senior Developer and Architect at AppFusions
@dvdsmpsn
Patrick Li
Co-Founder / CTO and Architect at AppFusions
@patrickli
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
Using real code…
https://github.com/dvdsmpsn/ibm-connect-2016-examples
Integration types
Inside-out: Injecting IBM Connections content
to your external app
Outside-in: Injecting your external content
into IBM Connections
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
Inside-out integrations - example
1507: Building Applications Using the IBM Connections Cloud Developer Experience
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
Outside-in integrations - example
Powered by
Outside-in integrations - example
Powered by
Outside-in integrations - example
Powered by
Outside-in integrations - example
Powered by
Live Demo:
Salesforce in IBM Connections Cloud
Deep Dive: Posting to Activity Streams
Steps to build smart looking activity events
Reference
http://tiny.cc/activity-streams-api
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
A little setup
• Using curl on the command line
• Using some variables to hide user credentials, community_uuid
Basic Activity
Basic Activity with title
Activity with templated title
Activity with templated title & target
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}.
Activity with generator
Activity with basic HTML content
Deep Dive: Embedded Experience
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
Embedded Experience - Registration
• Customers must register each cloud embedded experience
• Registration is in the admin UI
• As a user with the AppDeveloper role
Embedded Experience - Registration
Embedded Experience - Posting an activity
OpenSocial object in activity
External App URL
Custom data / payload
iframe dimensions
Message posted
Message posted
Context data as a string
Message posted
personData
Message posted
customPayload (from openSocial object)
Message posted
Cloud EE URL
Message posted
concise userData
Embed responsively…
https://cdn.rawgit.com/dvdsmpsn/ibm-connect-2016-
examples/master/activity-streams/cloud-embedded-experience/ee.html
Deep Dive: Community Apps
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!
Community Apps - Registration
• Via REST API
• As a user with the AppDeveloper role
• Using curl:
Documentation:
http://tiny.cc/create-community-app
skeleton.json
External App URL
iframe dimensions
Community Apps – in situ
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
UI Extensions
Adding the IBM Connections header into your
external app
• 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
• 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
Service Menu extension
Documentation:
http://tiny.cc/service-menu
Service Menu extension
Use a 1 pixel x 1 pixel
transparent gif/png for the
icon
Documentation:
http://tiny.cc/service-menu
Service Menu extension
Documentation:
http://tiny.cc/service-menu
Contact Record extension
Documentation:
http://tiny.cc/contact-record
Contact Record extension
${contact_id}
The ID of the contact record.
Use a 1 pixel x 1 pixel
transparent gif/png for the
icon
Contact Record extension
Person Component extension
Documentation:
http://tiny.cc/person-component
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
Person Component extension
File Menu extension
Documentation:
http://tiny.cc/file-menu
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.
File Menu extension
• Specifies which mime type to use
• Leave blank for all file types
• Otherwise, a separate extension definition per mime type
File Menu extension
New File Menu extension
Documentation:
http://tiny.cc/new-file-menu
New File Menu extension
New File Menu extension
What’s next?
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
Talk to us…
David Simpson
david@appfusions.com
@dvdsmpsn
Patrick Li
patrick@appfusions.com
@patrickli
We are grateful and thankful for the support
of the IBM Connections Cloud product and
engineering teams.
Thank you
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.
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.

More Related Content

What's hot

SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
Klaus Bild
 

What's hot (20)

What is new in IBM Connections 5.5 and IBM Docs 2.0
What is new in IBM Connections 5.5 and IBM Docs 2.0What is new in IBM Connections 5.5 and IBM Docs 2.0
What is new in IBM Connections 5.5 and IBM Docs 2.0
 
Xcc layout-options
Xcc layout-optionsXcc layout-options
Xcc layout-options
 
Hack IBM Connections - Advance Use - Iframes & more...
Hack IBM Connections - Advance Use - Iframes & more...Hack IBM Connections - Advance Use - Iframes & more...
Hack IBM Connections - Advance Use - Iframes & more...
 
Are You Ready for an Alternative in Application Development?
Are You Ready for an Alternative in Application Development?Are You Ready for an Alternative in Application Development?
Are You Ready for an Alternative in Application Development?
 
AD201: IBM Domino Application Development Today And Tomorrow
AD201: IBM Domino Application Development Today And TomorrowAD201: IBM Domino Application Development Today And Tomorrow
AD201: IBM Domino Application Development Today And Tomorrow
 
IBM Connections Cloud Application Development Strategy
IBM Connections Cloud Application Development StrategyIBM Connections Cloud Application Development Strategy
IBM Connections Cloud Application Development Strategy
 
XPages is Workflow's new best friend
XPages is Workflow's new best friendXPages is Workflow's new best friend
XPages is Workflow's new best friend
 
IBM Presents the Notes Domino Roadmap and a Deep Dive into Feature Pack 8
IBM Presents the Notes Domino Roadmap and a Deep Dive into Feature Pack 8IBM Presents the Notes Domino Roadmap and a Deep Dive into Feature Pack 8
IBM Presents the Notes Domino Roadmap and a Deep Dive into Feature Pack 8
 
IBM Connect 2014 - AD105: IBM iNotes and IBM SmartCloud Notes Web Customizati...
IBM Connect 2014 - AD105: IBM iNotes and IBM SmartCloud Notes Web Customizati...IBM Connect 2014 - AD105: IBM iNotes and IBM SmartCloud Notes Web Customizati...
IBM Connect 2014 - AD105: IBM iNotes and IBM SmartCloud Notes Web Customizati...
 
IDI103 - What is New in IBM Connections - IBM ConnectED 2015
IDI103 - What is New in IBM Connections - IBM ConnectED 2015IDI103 - What is New in IBM Connections - IBM ConnectED 2015
IDI103 - What is New in IBM Connections - IBM ConnectED 2015
 
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
 
IBM Connections 4.5 CR2 Installation - From Zero To Social Hero - 2.02 - with...
IBM Connections 4.5 CR2 Installation - From Zero To Social Hero - 2.02 - with...IBM Connections 4.5 CR2 Installation - From Zero To Social Hero - 2.02 - with...
IBM Connections 4.5 CR2 Installation - From Zero To Social Hero - 2.02 - with...
 
IBM Connections Cloud Administration
IBM Connections Cloud AdministrationIBM Connections Cloud Administration
IBM Connections Cloud Administration
 
IBM Connections 4.5 Integration - From Zero To Social Hero - 2.0 - with Domin...
IBM Connections 4.5 Integration - From Zero To Social Hero - 2.0 - with Domin...IBM Connections 4.5 Integration - From Zero To Social Hero - 2.0 - with Domin...
IBM Connections 4.5 Integration - From Zero To Social Hero - 2.0 - with Domin...
 
IBM Connections – Managing Growth and Expansion
IBM Connections – Managing Growth and ExpansionIBM Connections – Managing Growth and Expansion
IBM Connections – Managing Growth and Expansion
 
Installing community surveys in connections 5.5
Installing community surveys in connections 5.5Installing community surveys in connections 5.5
Installing community surveys in connections 5.5
 
DEV-1430 IBM Connections Integration
DEV-1430 IBM Connections IntegrationDEV-1430 IBM Connections Integration
DEV-1430 IBM Connections Integration
 
Ibm connections docs 2 install guide
Ibm connections docs 2 install guideIbm connections docs 2 install guide
Ibm connections docs 2 install guide
 
IBM InterConnect 2015 - What is New in IBM Connections 2015
IBM InterConnect 2015 - What is New in IBM Connections 2015IBM InterConnect 2015 - What is New in IBM Connections 2015
IBM InterConnect 2015 - What is New in IBM Connections 2015
 
IBM Collaboration Mobile Strategy and a New Way To work
IBM Collaboration Mobile Strategy and a New Way To workIBM Collaboration Mobile Strategy and a New Way To work
IBM Collaboration Mobile Strategy and a New Way To work
 

Viewers also liked

Ibm connections4 webcast
Ibm connections4 webcastIbm connections4 webcast
Ibm connections4 webcast
EmmarHoel
 
Behind the scenes: Making of the IBM Smarter Planet Ads
Behind the scenes: Making of the IBM Smarter Planet AdsBehind the scenes: Making of the IBM Smarter Planet Ads
Behind the scenes: Making of the IBM Smarter Planet Ads
Colleen Burns
 

Viewers also liked (8)

Ibm connections4 webcast
Ibm connections4 webcastIbm connections4 webcast
Ibm connections4 webcast
 
Behind the scenes: Making of the IBM Smarter Planet Ads
Behind the scenes: Making of the IBM Smarter Planet AdsBehind the scenes: Making of the IBM Smarter Planet Ads
Behind the scenes: Making of the IBM Smarter Planet Ads
 
Google Analytics 使用者多層檢視 User Explorer
Google Analytics 使用者多層檢視 User Explorer Google Analytics 使用者多層檢視 User Explorer
Google Analytics 使用者多層檢視 User Explorer
 
BEST AND WORST PRACTICES DEPLOYING IBM CONNECTIONS
BEST AND WORST PRACTICES DEPLOYING IBM CONNECTIONSBEST AND WORST PRACTICES DEPLOYING IBM CONNECTIONS
BEST AND WORST PRACTICES DEPLOYING IBM CONNECTIONS
 
IBM Connect 2016 - IS1406 #UserBLAST
IBM Connect 2016 - IS1406 #UserBLASTIBM Connect 2016 - IS1406 #UserBLAST
IBM Connect 2016 - IS1406 #UserBLAST
 
A (XPages) developers guide to Cloudant - MeetIT
A (XPages) developers guide to Cloudant - MeetITA (XPages) developers guide to Cloudant - MeetIT
A (XPages) developers guide to Cloudant - MeetIT
 
DEV-1129 How Watson, Bluemix, Cloudant, and XPages Can Work Together In A Rea...
DEV-1129 How Watson, Bluemix, Cloudant, and XPages Can Work Together In A Rea...DEV-1129 How Watson, Bluemix, Cloudant, and XPages Can Work Together In A Rea...
DEV-1129 How Watson, Bluemix, Cloudant, and XPages Can Work Together In A Rea...
 
Socialytics: Accelerating IBM Connections Adoption with Watson Analytics
Socialytics: Accelerating IBM Connections Adoption with Watson AnalyticsSocialytics: Accelerating IBM Connections Adoption with Watson Analytics
Socialytics: Accelerating IBM Connections Adoption with Watson Analytics
 

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

Similar to IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud APIs and App Dev (20)

Nwtl2017 extending and customizing ibm connections cloud
Nwtl2017 extending and customizing ibm connections cloudNwtl2017 extending and customizing ibm connections cloud
Nwtl2017 extending and customizing ibm connections cloud
 
Hands-on Workshop: Intermediate Development with Heroku and Force.com
Hands-on Workshop: Intermediate Development with Heroku and Force.comHands-on Workshop: Intermediate Development with Heroku and Force.com
Hands-on Workshop: Intermediate Development with Heroku and Force.com
 
7 Ways to Maximize ROI on your Digital Experience Investement
7 Ways to Maximize ROI on your Digital Experience Investement7 Ways to Maximize ROI on your Digital Experience Investement
7 Ways to Maximize ROI on your Digital Experience Investement
 
IIBA® Sydney Unlocking the Power of Low Code No Code: Why BAs Hold the Key
IIBA® Sydney Unlocking the Power of Low Code No Code: Why BAs Hold the KeyIIBA® Sydney Unlocking the Power of Low Code No Code: Why BAs Hold the Key
IIBA® Sydney Unlocking the Power of Low Code No Code: Why BAs Hold the Key
 
Building out a Microservices Architecture with WebSphere Liberty Profile and ...
Building out a Microservices Architecture with WebSphere Liberty Profile and ...Building out a Microservices Architecture with WebSphere Liberty Profile and ...
Building out a Microservices Architecture with WebSphere Liberty Profile and ...
 
Progetta, crea e gestisci Modern Application per web e mobile su AWS
Progetta, crea e gestisci Modern Application per web e mobile su AWSProgetta, crea e gestisci Modern Application per web e mobile su AWS
Progetta, crea e gestisci Modern Application per web e mobile su AWS
 
Adapting Deployment Pipelines for Complex Applications
Adapting Deployment Pipelines for Complex ApplicationsAdapting Deployment Pipelines for Complex Applications
Adapting Deployment Pipelines for Complex Applications
 
Ad402 create self-service apps in minutes with ibm forms experience builder
Ad402   create self-service apps in minutes with ibm forms experience builderAd402   create self-service apps in minutes with ibm forms experience builder
Ad402 create self-service apps in minutes with ibm forms experience builder
 
Rational developer for z systems : DevOps benefits here and now
Rational developer for z systems : DevOps benefits here and nowRational developer for z systems : DevOps benefits here and now
Rational developer for z systems : DevOps benefits here and now
 
OpenWhisk Introduction
OpenWhisk IntroductionOpenWhisk Introduction
OpenWhisk Introduction
 
Ibm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsIbm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applications
 
Fire up your mobile app!
Fire up your mobile app!Fire up your mobile app!
Fire up your mobile app!
 
Codemotion Rome 2015 Bluemix Lab Tutorial
Codemotion Rome 2015 Bluemix Lab TutorialCodemotion Rome 2015 Bluemix Lab Tutorial
Codemotion Rome 2015 Bluemix Lab Tutorial
 
IBM Connect 2014 - BPD406: Ignite your IBM SmartCloud for Social Business Int...
IBM Connect 2014 - BPD406: Ignite your IBM SmartCloud for Social Business Int...IBM Connect 2014 - BPD406: Ignite your IBM SmartCloud for Social Business Int...
IBM Connect 2014 - BPD406: Ignite your IBM SmartCloud for Social Business Int...
 
IBM Connect 2016: Speaker Session with Teresa Deane, Senior Developer, BCC
IBM Connect 2016: Speaker Session with Teresa Deane, Senior Developer, BCCIBM Connect 2016: Speaker Session with Teresa Deane, Senior Developer, BCC
IBM Connect 2016: Speaker Session with Teresa Deane, Senior Developer, BCC
 
How to Adopt Docker Within Your Enterprise Using IBM UrbanCode Deploy (Interc...
How to Adopt Docker Within Your Enterprise Using IBM UrbanCode Deploy (Interc...How to Adopt Docker Within Your Enterprise Using IBM UrbanCode Deploy (Interc...
How to Adopt Docker Within Your Enterprise Using IBM UrbanCode Deploy (Interc...
 
IBM Collaboration Solutions Application Development - Frequently Asked Questions
IBM Collaboration Solutions Application Development - Frequently Asked QuestionsIBM Collaboration Solutions Application Development - Frequently Asked Questions
IBM Collaboration Solutions Application Development - Frequently Asked Questions
 
How to Containerize WebSphere Application Server Traditional, and Why You Mig...
How to Containerize WebSphere Application Server Traditional, and Why You Mig...How to Containerize WebSphere Application Server Traditional, and Why You Mig...
How to Containerize WebSphere Application Server Traditional, and Why You Mig...
 
Design, Auto-Generate and Expose RESTful Microservices Using Open Source and ...
Design, Auto-Generate and Expose RESTful Microservices Using Open Source and ...Design, Auto-Generate and Expose RESTful Microservices Using Open Source and ...
Design, Auto-Generate and Expose RESTful Microservices Using Open Source and ...
 
[IBM Pulse 2014] #1579 DevOps Technical Strategy and Roadmap
[IBM Pulse 2014] #1579 DevOps Technical Strategy and Roadmap[IBM Pulse 2014] #1579 DevOps Technical Strategy and Roadmap
[IBM Pulse 2014] #1579 DevOps Technical Strategy and Roadmap
 

Recently uploaded

audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkkaudience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
lolsDocherty
 
Production 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxProduction 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptx
ChloeMeadows1
 

Recently uploaded (16)

Reggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirts
 
Pvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdf
 
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital PresenceCyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
 
The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyThe Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case Study
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirts
 
Statistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfStatistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdf
 
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkkaudience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
 
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
 
Production 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxProduction 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptx
 
Bug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's GuideBug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's Guide
 
GOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdfGOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdf
 
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfPremier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdf
 
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebiThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
 
Development Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of appsDevelopment Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of apps
 
How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirt
 

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

  • 1. 1402 - Getting Technically Cozy with IBM Connections Cloud APIs and App Dev Patrick Li, AppFusions; David Simpson, AppFusions
  • 2. Introduction • Who? • Inside-out vs. outside-in integrations • Activity Stream Integration • Embedded Experience • Community Apps • UI Extension Points
  • 3. Who are we? David Simpson Senior Developer and Architect at AppFusions @dvdsmpsn Patrick Li Co-Founder / CTO and Architect at AppFusions @patrickli
  • 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
  • 6. Integration types Inside-out: Injecting IBM Connections content to your external app Outside-in: Injecting your external content into IBM Connections
  • 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. Inside-out integrations - example 1507: Building Applications Using the IBM Connections Cloud Developer Experience
  • 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. Outside-in integrations - example Powered by
  • 11. Outside-in integrations - example Powered by
  • 12. Outside-in integrations - example Powered by
  • 13. Outside-in integrations - example Powered by
  • 14. Live Demo: Salesforce in IBM Connections Cloud
  • 15. Deep Dive: Posting to Activity Streams
  • 16. Steps to build smart looking activity events Reference http://tiny.cc/activity-streams-api
  • 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. A little setup • Using curl on the command line • Using some variables to hide user credentials, community_uuid
  • 22. Activity with templated title & target
  • 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}.
  • 25. Activity with basic HTML content
  • 26. Deep Dive: Embedded Experience
  • 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. Embedded Experience - Registration • Customers must register each cloud embedded experience • Registration is in the admin UI • As a user with the AppDeveloper role
  • 29. Embedded Experience - Registration
  • 30. Embedded Experience - Posting an activity
  • 31. OpenSocial object in activity External App URL Custom data / payload iframe dimensions
  • 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. Community Apps - Registration • Via REST API • As a user with the AppDeveloper role • Using curl: Documentation: http://tiny.cc/create-community-app
  • 43.
  • 45. 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
  • 47. Adding the IBM Connections header into your external app
  • 48. • 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
  • 49. • 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
  • 51. Service Menu extension Use a 1 pixel x 1 pixel transparent gif/png for the icon Documentation: http://tiny.cc/service-menu
  • 54. Contact Record extension ${contact_id} The ID of the contact record. Use a 1 pixel x 1 pixel transparent gif/png for the icon
  • 57. 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
  • 60. 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.
  • 61. File Menu extension • Specifies which mime type to use • Leave blank for all file types • Otherwise, a separate extension definition per mime type
  • 63. New File Menu extension Documentation: http://tiny.cc/new-file-menu
  • 64. New File Menu extension
  • 65. New File Menu extension
  • 67. 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
  • 68. Talk to us… David Simpson david@appfusions.com @dvdsmpsn Patrick Li patrick@appfusions.com @patrickli
  • 69. We are grateful and thankful for the support of the IBM Connections Cloud product and engineering teams. Thank you
  • 70.
  • 71. 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.
  • 72. 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.

Editor's Notes

  1. We can post using Basic Auth or OAuth Public updates – for the Discover stream Personal updates – for your followers Community updates – for community members
  2. For my examples I’m using curl on the command line rather than any browser based REST client This means that if you have the code, you can copy and paste it in your terminal window and it should easily produce an event in IBM Connections
  3. No `event.title`, so the title defaults to use the actor’s displayName, the verb and the `event.object.displayName` Verb examples: `post`, `shares`, `update`
  4. `event.title` is provided, so this is used for the title
  5. Always use templated titles whenever you can. With templated titles, you get i18n for free.
  6. Now added an icon, tooltip and link
  7. * HTML support is limited. * All attributes are stripped. * Use tables for layout! Yes.
  8. `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections `useData` - concise alternativeof `personData`
  9. `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections `useData` - concise alternativeof `personData`
  10. `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections `useData` - concise alternativeof `personData`
  11. `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections `useData` - concise alternativeof `personData`
  12. `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections – including the opensocial info from the posted event `useData` - concise alternativeof `personData`
  13. `context` is stringified version of the `source.resourceContext` lower down `personData` - info on the person & the organization they belong to `source` - details of where this is displayed in IBM Connections – including the opensocial info from the posted event `useData` - concise alternativeof `personData`
  14. Cloud embedded experiences will work on desktop and mobile, so embed responsively, so that they display correctly on both
  15. Deviate from the documentation here… Don't ever add the Lotus/OneUI classes to your body tag …unless you use OneUI yourself Add an empty div as the first body element only when you want to display the IBM Connections header in your external app: … This one act isolates the OneUI styles from the rest of your page, removing untold pain.
  16. Adds external links into to the IBM Connections header
  17. - Added in Admin | Organization Extensions - Use a 1 pixel x 1 pixel transparent gif/png for the icon - This makes the design consistent with the rest of the dropdown menu - This is just a dumb link – no templating of parameters
  18. - Contact Record Extension - Adds a new menu item in the contact record before the “More” dropdown
  19. Added in Admin | Organization Extensions Supports URL Templating With the contact_id of the displayed contact record Use a 1px transparent image to keep the UI consistent
  20. In Profile pages - Adds new button / menu item next to the Download vCard menu
  21. Added in Admin | Organization Extensions Use a 1px transparent image to keep the UI consistent Supports templating of the user_id in the URL
  22. Click on the new menu item and you can see the URL templating in action Here, we’re just echoing out the user_id, but I’ve also added the header integration in the external web page for fun
  23. Add an item to the files dropdown/context menu next to any file listing
  24. Use a 1 pixel x 1 pixel transparent gif/png for the icon
  25. - Added in Admin | Organization Extensions - Use a 1 pixel x 1 pixel transparent gif/png for the icon - This makes the design consistent with the rest of the dropdown menu - This is just a dumb link – no templating of parameters
  26. Lets extend IBM Connections together..
  27. Lets extend IBM Connections together..