JMP102 Extending Your App Arsenal With OpenSocial

Please note:

IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal
without notice at IBM’s sole discretion.
Information regarding potential future products is intended to outline our general product direction
and it should not be relied on in making a purchasing decision.
The information mentioned regarding potential future products is not a commitment, promise, or
legal obligation to deliver any material, code or functionality. Information about potential future
products may not be incorporated into any contract. The development, release, and timing of any
future features or functionality described for our products remains at our sole discretion.

Performance is based on measurements and projections using standard IBM benchmarks in a
controlled environment. The actual throughput or performance that any user will experience will
vary depending upon many factors, including considerations such as the amount of
multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the
workload processed. Therefore, no assurance can be given that an individual user will achieve
results similar to those stated here.

2 © 2013 IBM Corporation

Credit

 IBM® Notes® Social Edition
 IBM® Domino® Social Edition
 IBM® iNotes® Social Edtiion
 IBM® Connections®
 IBM® Social Business Toolkit


About Us
 IBMer for 4 years
 OpenSocial (and open source) enthusiast
 Notes Java UI APIs, IBM Social Business Toolkit
 @ryanjbaxter, http://ryanjbaxter.com

 Lead template developer for Widget Catalog and Cred. Store
 XPages and Eclipse plugin development
 Helps business partners and other product teams to integrate
their applications with OpenSocial

 Notes Java UI APIs, Eclipse plugin development
 Manages internal deployments of Notes/iNotes Social Edition
 Apache Shindig committer


Agenda

 Introduction to OpenSocial
 OpenSocial in IBM Connections
 OpenSocial in IBM Notes and iNotes Social Edition 9.0
 Using The Social Business Toolkit in OpenSocial Gadgets
 XPages and OpenSocial


OpenSocial
Implementations Include: Cisco, SAP,
 Social APIs and Mini Applications Jive, Atlassian, IBM SmartCloud,
(Gadgets) Google, Yahoo, MySpace, LifeRay,
 IBM has a leadership role in the Oracle, Magneto, Tibco Tibbr, Surfnet,
Foundation including Paypal . . .

─ On the Board of Directors SmartCloud, IBM Connections, IBM
Notes/Domino®, Rational Team
─ Committers on Apache Shindig ConcertTM, Sterling. . .
─ Has been instrumental in drafting the INV211: The
OpenSocial 2.0 & 2.5 specification New Social
Business
─ Invented and gave to the community Paradigm
Embedded Experiences and many, with
many more capabilities OpenSocial
─ Provided enterprise extensions


Why Use OpenSocial?

 IBM sees value in OpenSocial because it offers two very important things to IBM,
its partners, and its customers
─ An application model based on modern web standards that easily isolates third party code
─ APIs for interacting with and creating social data (we still have a long way to go with this one)


 Cross product integration with Notes, iNotes, and Connections
─ Integrate your application into one or all of these products
─ Stand-alone (web) applications
─ Embedded within an envelope, i.e., email or activity entry
─
 Access to social data and data models from Connections and SmartCloud
─ Connections 4 activity streams API
─ SmartClouds person and contacts APIs


The Gadget Model And APIs

 The OpenSocial specification is broken into two pieces
─ Gadget Model
Gadgets are essentially applications built out of HTML, JavaScript, and CSS wrapped in a
–
little XML
─ Gadget and Social APIs
– Gadget APIs allow you to manipulate the gadget and call web services
– APIs for accessing the social data within a social network


Sample Gadget XML
<?xml version="1.0" encoding="UTF-8" ?>
<Module specificationVersion='2'>
<ModulePrefs title="Acme Airlines">

<Require feature="dynamic-height" />
<Require feature="embedded-experiences" />
</ModulePrefs>


<Content type="html" view="default, home">
<![CDATA[

]]>
</Content>
<Content type="html" view="embedded" href="ee.html"></Content>
</Module>

The Basics

 ModulePrefs
─ The gadget's ModulePrefs element contains basic information about the gadget
– Title, author, description, icon
– Features are also placed in the ModulePrefs element
• Features provide a set of functionality and sometimes APIs to the gadget
– Message Bundles can be added to provide translated strings for your gadget
–

 Content Sections
─ Content sections contain the UI and business logic for your gadget
– You can have multiple content sections in one gadget XML
– The HTML, CSS, and JavaScript of your gadget can either be inside the content section or
externally in a separate file
─ Different content sections can be distinguished via the view attribute


Gadget Views

 Gadget views originally were used to distinguish between the amount of real-
estate available to a gadget
─ Home = little real-estate
─ Canvas = large amount of real-estate
─
 Since OpenSocial 2.0 we have been moving more towards views indicating
different uses
─ Embedded view for embedded experiences
─ Dialog views for when a gadget is opened in a dialog
─
 Content sections with the same view name will be concatenated together


Gadget Preferences

 Any application is likely to have user
preferences to allow the user to
customize portions of the application
 Gadget preferences are specified in
UserPref elements in the gadget XML
─ Strings, Booleans, Enums, Numbers, and
Lists all specified in the type attribute
─ Display name attribute shows in the UI
─ Name attribute can be used to access the
preference within your code
─ You can also set a default value for a
preference
 Get and set preferences via
gadgets.Prefs
─ Require the feature setpefs when setting
preferences


Getting Started Writing JavaScript

 Use your favorite JavaScript library
 Just like any other web app you don't want to begin running your business logic
before the app has completely loaded
 gadgets.util.registerOnLoadHandler(function)
─ When the function passed to this API is called the gadget has completely loaded
─ Similar to JQuery and Dojo's ready functions
─ You can use those instead if you are using those libraries


Making REST API Calls

 All web applications need to make some kind of API calls and gadgets are no
different
 Use gadgets.io.makeRequest
─ Asynchronous
─ Takes a URL, parameters object, and callback function
─ Supports OAuth endpoints
─ DO NOT USE OTHER LIBRARIES' XHR METHODS

var params = {};
params[gadgets.io.RequestParameters.METHOD]
=gadgets.io.MethodType.GET;
params[gadgets.io.RequestParameters.CONTENT_TYPE]=gadgets.io.Content
Type.JSON;
var callback = function(response){
...
};
gadgets.io.makeRequest('http://example.com/api/foo', callback,
params);


OAuth

 OpenSocial uses OAuth for making protected API calls
─ Support for OAuth 1.0a and 2.0
 OAuth stands for OPEN AUTHORIZATION not OPEN AUTHENTICATION
─ Authentication technologies may be used when authorizing
 OAuth is very easy to use within a gadget, most of the hard work is done by
the container
 Use makeRequest and simply specify which OAuth version to use
 The OAuth services used within the gadget need to be registered with the
container


Browser
Request

Acme Gadget Do you want to allow Acme Gadget access
Approval to your data?
YES NO


OAuth 1.0a in The Gadget XML

 Service name must match what is registered in the container
 URLs come from the provider you are authenticating with


<OAuth>
<Service name="my service">
<Request url="http://provider.com/requestToken"/>
<Access url="http://provider.com/accessToken"/>
<Authorization url="http://provider.com/authorize"/>
</Service>
</OAuth>


OAuth 2.0 in The Gadget XML

 OAuth 2.0 is simpler, all URLs are configured on the container.
─ Service name needs to match what you register in the container
─ Scope indicates the API set you plan on accessing

<OAuth2>
<Service name="service name" scope="ProviderScope">
</Service>
</OAuth2>


Using OAuth in makeRequest

 In the parameters passed to makeRequest indicate you are using OAuth 1.0a or
2.0
─ gadgets.io.AuthorizeType.OAUTH2
─ gadgets.io.AuthorizeType.OAUTH
─
 Require the feature “oauthpopup”
─ This feature can be used to open the popup window for the user to enter their credentials
─ Lets the gadget know when the OAuth dance is complete


OAuth makeRequest Example

var params = {};
params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.OAUTH2;
params[gadgets.io.RequestParameters.OAUTH_SERVICE_NAME] = 'serviceName';
gadgets.io.makeRequest('url', function(response) {
if (response.oauthApprovalUrl) {
var onOpen = function() {};
var onClose = function() {};
var popup = new gadgets.oauth.Popup(response.oauthApprovalUrl, null, onOpen,
onClose);
var click = popup.createOpenerOnClick();
click();
} else if (response.data) {
//We have data so lets use it!
} else {
gadgets.error('something went wrong');
}
}, params);


Interacting With The Container

 As of OpenSocial 2.0 gadgets can now interact with the container they are
rendered in
─ WARNING: These may not be supported completely in all containers - even every IBM Container
─
 Breaking Out Of The Box
─ Gadgets are rendered in an iFrame and they used to be confined to that frame in the browser
─ With the open-views APIs gadgets can render other gadgets and URLs in new tabs, windows,
dialogs, etc
─
 Contributing To The UI
─ Action contributions allows your gadget to contribute to the toolbar and menus of the container
─ This is very similar to action contributions in Eclipse plugin development
─
 Understanding What Is Selected
─ Gadgets can also listen for selection in Notes and iNotes
─ Emails, Contacts, and Files


Embedded Experiences

 Changing the way you get notifications
─ The goal is to make notifications more useful and interactive
─ Supported in email and activity streams
– IBM Connections, IBM Connections Mail, IBM Notes 9, IBM iNotes 9
– JSON + XML


Notifications Today

Activity Entry

Action Taken In Your App

Standard MIME Email


Notifications With Embedded Experiences

Activity Entry

EE Data Gadget
ion Taken In Your App Model

Standard MIME Email

Your App


Something Of Importance Took Place!

 Embedded experiences are
almost always generated due to Your APP
an action that took place in an
app
─ Someone completed a task
─ Someone sent a survey to a group of
people
─ A travel request was submitted Action Taken
In App
─ A lead was entered in a CRM system
─
 Now that the action took place
you want to let a group of people
know about it
─ BE SOCIAL!


How do you want to let people know about it?

Activity Entry
 Traditionally emails were sent
─ Still applicable today, many apps still do this
 In a social network, emails are not the
primary medium for communication
─ Almost all social networks have an activity
stream so we should post it there EE Data
 Gadget EE Model
{
“gadget” : “http://acme.com/gagdet.xml”,
“context” : {
“id” : 123 Standard MIME
} Email
}
 URL EE
{“url” : “http://domino.com/myxpage.xsp”}



Active Notifications
 With embedded experiences,
notifications are no longer static
─ Active content allows your
notifications to never go stale and
always be up to date
─ Gadget
─ No need to leave your client, stay
where you are and get your work
done
─
 The data used in your
notifications is unlimited, you Your App
have access to anything


Email Embedded Experience
From: notifications@socialnetwork.com
To: johndoe@example.com
Subject: Social Network: Mary Has Commented On Your Status
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="XXXXboundary text"
Mary has commented on your status.
--XXXXboundary text
Content-Type: text/plain
Mary has commeneted on your status.
--XXXXboundary text
Content-Type: text/html
<html>

</html>
--XXXXboundary text
Content-Type: application/embed+json
{
"gadget" : "http://www.socialnetwork.com/embedded/commentgadget.xml",
"context" : 123
}

Activity Stream Embedded Experience

{ AD104:
"postedTime": "2011-02-10T15:04:55Z", Connections
Activity
"actor": {...}, Stream
"verb": "post", Integration
"object" : {...},
"openSocial" : {
"embed" : {
"gadget" : "http://example.org/AlbumViewer.xml",
"context" : {
"albumName": "Germany 2009",
"photoUrls": [...]
}
}
}
}


How Does OpenSocial Integrate Into IBM Connections?

 Leveraging the existing widgets framework
─ OpenSocial is just a new type of widget, just like iWidgets
 OpenSocial gadgets available on your homepage
─ In the activity stream
─ On the right-hand side of your activity stream homepage
─ In the “My Page” of your homepage
 Connections Mail supports embedded experiences in email
 OpenSocial gadgets can also extend the share box
─ Allows you to integrate other sharing capabilities right into Connections
 Connection's REST API and data model follows the OpenSocial standard
 OpenSocial gadgets can interact with their containers
─ Open itself, Embedded Experiences, and URLs as dialogs
─


Activity Streams Keep Your Users Up To Date

 REST API and data model
backed by the OpenSocial
standard
─ JSON data model - easy to use in
your web apps


 3rd party apps can post entries
to the activity stream
─ Inside and outside of Connections
─
 Integrate the Connections
activity stream into your apps
─ This is how we integrate the
activity stream into Notes
─ If your app is an OpenSocial
container you can render
embedded experiences too!


Extending The Share Dialog

 The share dialog allows you to
share content from anywhere
in Connections
─ By default you can update your
status or upload a file


 The share dialog is extensible
using OpenSocial gadgets
─ Take advantage of OpenSocial's
actions feature
─


Connections Mail

 Connections Mail, like Notes and iNotes, supports embedded experiences as
well
 The same embedded experience you build for the activity stream will work in
mail


Developing OpenSocial Gadgets For Connections

 If you are developing gadgets
for Connections and want to
make it easier to test place
the Connections container in
developer mode!
─ Allows you to render any gadget
without first having to go through
a whole deployment
─ You can put the Connections
container in developer mode by
editing the OpenSocial-config.xml
file in your Connections
deployment
─
 Use the developer bootstrap
page to test your gadgets
─ Embedded experiences,
preferences, share box


Deploying OpenSocial Gadgets In Connections

 Only Homepage admins can
deploy gadgets
 Gadgets must be added to the
widget catalog in Connections
─ Security
Restricted or Trusted (SSO)
–

─ UI Integration points for the Share
dialog
─ Proxy access
– Only outside the intranet
– Everything
Custom
–

─ OAuth service mappings


Registering OAuth Clients For Gadgets In Connections

 You must register OAuth clients for gadgets to use in Connections if a gadget is
using OAuth
─ This is a two step process done via the wasadmin console, you must register an OAuth provider
and then register an OAuth client
– A provider may be used by multiple clients. For example Google, Facebook, Twitter,
DropBox etc.
• wsadmin>NewsOAuth2ConsumerService.registerProvider("provider123", "standard",
"true", "false", "http://example.com/oauth/authorization",
"https://example.com/oauth/token")
– A client gets bound to a gadget and points to a provider.
• You specify the client ID and secret obtained from the provider for your gadget
• wsadmin>NewsOAuth2ConsumerService.registerClient("client123", "provider123",
"confidential", "code", "my-client", "my-secret",
"https://connections.com/connections/opensocial/gadgets/oauth2callback")
•
 After the clients have been registered you can bind them via wsadmin
commands or via the Homepage administration UI
─



OpenSocial On IBM Connections Mobile

 The Connection 4.0 mobile app supports the activity stream and embedded
experiences
─ Make sure your gadget is designed correctly so that it will work (render) correctly on a mobile
device


How Does OpenSocial Integrate Into IBM Notes and iNotes?

 Leveraging the existing My Widgets framework
─ OpenSocial is just a new type of widget, just like Google Gadgets or Web Page widgets
 OpenSocial gadgets are available in both Notes and iNotes
─ In the sidebar
─ In tabs
─ In floating (modeless) windows
─ In new windows (Notes only)
─ In Mail as Embedded Experiences
 OpenSocial gadgets can interact with their containers
─ Contribute actions
To top-level menus and toolbars in Notes
–

– To the context menu for mail messages, contacts, attachments (Notes only), and
LiveNames (Notes only)
─ Contribute OpenSearch search engines to the Notes search center
─ Listen for and publish selection
─ Open itself, Embedded Experiences, and URLs in new windows, tabs, floating windows and
the sidebar


How Does OpenSocial Integrate Into IBM Notes and iNotes?

 Use OpenSearch APIs to contribute to the Notes search center
<Optional feature="opensearch">
<Param name="opensearch-description">
<![CDATA[
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" >
<ShortName>CNN.com</ShortName>
<Description>CNN.com Search</Description>
<InputEncoding>UTF-8</InputEncoding>
<SearchForm>http://search.cnn.com/</SearchForm>
<Url type="text/html" method="get"
template="http://www.cnn.com/search/?query={searchTerms}">
</Url>
</OpenSearchDescription>
]]>
</Param>
</Optional>
 More information in the OpenSocial spec
─ http://opensocial-resources.googlecode.com/svn/spec/2.5/Core-Gadget.xml#OpenSearch


Developing OpenSocial Gadgets for Notes and iNotes

 OpenSocial Gadgets must be approved by an administrator before they will
render in Notes and iNotes
 This makes it cumbersome to use Notes/iNotes as a development environment
 The OpenSocial Sandbox provided by the OpenSocial Foundation can be used
to rapidly iterate and test gadgets
 Get your gadget working in the sandbox and then bring it into the Notes and
iNotes environments
 More information on the Sandbox
─ http://opensocial2.org:8080/collabapp/index.html



Creating OpenSocial Widgets in Notes and iNotes

 Widget Catalog is used to manage OpenSocial Gadgets in Notes and iNotes
─ Notes client provides wizards to create OpenSocial Widgets from gadgets.
─ Need to publish OpenSocial widgets to Widget Catalog to make it available for all users
─
–

AD212: Whats
New in IBM Notes
Widgets and
LiveText: Linking
Your Data to the
World!


Approving OpenSocial Widgets in Notes and iNotes

 Only trusted gadgets can run in Notes and iNotes. Catalog administrator needs
to approve the widgets in Widget Catalog and configure necessary settings
 During the approval process, administrators will configure
─ Proxy settings – required
─ OAuth consumer information – required only if a gadget need them
─ IP filters – optional
─


─


Deploying OpenSocial Widgets in Notes and iNotes

 Approved widgets need to
be installed in Notes and
iNotes


 Widgets can be pushed to
end users by policy
settings
─ This is the recommended
way to deploy widgets
─ SHOW110:
 End users can also install Make Your
additional widgets from Business Open
catalog by themselves and Social Using
IBM Notes Social
Edition 9.0


IBM Social Business Toolkit SDK & OpenSocial

 The IBM Social Business Toolkit SDK is meant to help
developers build applications for IBM's social business
portfolio using a common programming model
─ XPages, J2EE, PHP, OpenSocial gadgets, Ruby, it doesn't matter you
should use a consistent set of APIs
AD101 : Social
─ Applications Made
 Do I need to use the SDK if I am building a gadget? Easy with the New
Social Business
─ No you can use the core OpenSocial APIs, but the SDK will make it easier
Toolkit SDK
if you are using APIs from products within IBM's social business portfolio
─
 Why not just use the OpenSocial APIs?
─ Consistency
─ Under the covers the SDK uses the OpenSocial APIs when inside a
gadget


Using The IBM Social Business Toolkit SDK Within A Gadget

 All you have to do to the gadget is add the script tag for the SDK
─ <script type="text/javascript" src="library?env=openSocial"></script>
─ The env parameter tells the toolkit that the SDK is being used inside a gadget


 In the faces-config of the webapp define an OpenSocial environment bean that
has the value of the env parameter used in the script tag
─ Endpoints used within this environment should use the GadgetEndpoint bean
─ If the endpoint uses OAuth, the service name defined within the gadget for the OAuth endpoint
must also be defined in the GadgetEndpoint bean
─
 You may use all the same helper classes from the SDK within your gadget
─ SmartCloud and Connections
─ Profiles, Files, Communities, Activity Streams, etc
─ Define endpoints for your own APIs or 3rd party APIs like, Google etc.
─


Acme Airlines App

DEMO


XPages and OpenSocial

 XPages and Embedded Experience mail
─ XPages can be embedded in mail directly by using a URL embedded
experience
─ Gadget XML can be put in an NSF and access application data via AD206 : IBM
XPages REST API Domino XPages:
─ It's easy to send embedded experience emails from XPage apps Embrace, Extend,
─ Integrate
 XPages and Activity Streams
─ Support to post activities with embedded experiences to activity
streams
─ Support to read activity stream data in XPages appls
─ Need to install XPages Social Enabler from OpenNTF
─
─


Creating Embedded Experience Widgets For XPage Apps

 You need to create a Web Page widget and enable it for embedded experiences


 The URL usually contains an id parameter
─ http://renovations.com/tickets.nsf/viewTicket.xsp?action=openDocument&documentId=A46
─ Use wild cards (*) to create a single embedded experiences widget for all XPage URLs
─



Creating Embedded Experience Emails Using Notes.jar


XPages Simple Action To Send Embedded Experience Emails

 New “Send Mail” simple action
─ Available in 9.0
─ Provides an easy way to send mails and
supports Embedded Experience mail
─ You can either compose JSON by yourself
or XPages will compose it based on your
input.
─


Leveraging SSO For XPage Embedded Experiences

 We do not want users to log in again when opening a XPage embedded
experience


 The mail server and the server hosting the XPages app must have multi-server
SSO enabled
─ For iNotes users, the servers must be in same SSO domain
─ For Notes users, a managed account needs to be created for the server hosting the XPages
application
– This can be pushed via policy

 In the case of XPage embedded experiences in the Connections activity stream,
the Connections server must be in the same SSO domain as the Domino server
hosting the app
─

If you want to integrate a classic web based Domino application with embedded
experience, the above steps apply as well.
─


Posting To The Activity Stream Using The Social Enabler

 Social Enabler provides a helper class to simplify REST API calls
─ com.ibm.xsp.extlib.sbt.services.client.ClientService
─ Need to provide the endpoint and service URL to create an instance
public ClientService(Endpoint endpoint, String serviceUrl)
–

─ Supports GET/POST/PUT/DELETE methods
─
 sbt.ActivityStreamService is extended from ClientService and provides support
to call Activity Stream APIs
─ All you need to do is creating your JSON object and call the post method


var serviceUrl = "/connections/opensocial/basic/rest/activitystreams/@public/@all/@all";
var svc = new sbt.ActivityStreamsService(@Endpoint('connections'),serviceUrl);
var msg = svc.post(null, activity); //activity is your JSON object


XPages Ticketing App

DEMO


Resources

 OAuth Client Registration:
http://www-10.lotus.com/ldd/lcwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Connect
 Developing Gadgets For Connections:
https://www.ibm.com/developerworks/lotus/documentation/osgadgetconnections4/ind
 Connections Activity Streams API:
http://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Co
 IBM Social Business SDK: http://ibmsbt.openntf.org/
 IBM Notes and Domino Beta Forum:
http://www-10.lotus.com/ldd/ndsebetaforum.nsf
 Managed Accounts in Notes and Domino: http://bit.ly/ManagedAccounts
 OpenSocial Spec: http://docs.opensocial.org/display/OSD/Specs



Legal disclaimer
© IBM Corporation 2013. All Rights Reserved.
The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication,
it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice.
IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication 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.
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. Product release dates and/or capabilities referenced
in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any
way. 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.
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.

All references to [insert fictitious company name] refer to a fictitious company and are used for illustration purposes only.


JMP102 Extending Your App Arsenal With OpenSocial

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JMP102 Extending Your App Arsenal With OpenSocial

Similar to JMP102 Extending Your App Arsenal With OpenSocial (20)

JMP102 Extending Your App Arsenal With OpenSocial