How to use the IBM Social Business Toolkit in HTML/JavaScript Applications - SBT Webinar 06/12/13

© 2011 IBM Corporation
How to use the IBM Social Business Toolkit in
HTML / JavaScript Applications
Mark Wallace, Technical Lead Social Business Toolkit SDK
IBM SBT Webinar 06/12/13

© 2013 IBM Corporation2
IBM Social Business Toolkit Webinars

Future Webinars

About Me
Based Ireland Lab, Dublin
Working on Social Business Toolkit SDK with
team of developers in Ireland and India Labs
Email: mark_wallace@ie.ibm.com
Twitter: mewallace
LinkedIn: http://ie.linkedin.com/in/markewallace/
Previously worked
● Sametime Unified Telephony
● XSP Runtime
● IBM Data Access
● Translation Services for Sametime

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.

IBM Social Business Toolkit SDK – JavaScript API
SDK includes a JavaScript API for
Web Developers
The goal of this session is to
answer these three questions
● What is it?
● Why would I want to use it?
● How do I get started?

JavaScript API – What is it?

JavaScript API - What is it?
JavaScript wrapper API for IBM Social Platform
and
Collection of reusable JavaScript controls

JavaScript API - What is it?
Easiest way to explain this is to 'Try It'
● SDK includes online application called Playground
● First you need a Greenhouse account:
https://greenhouse.lotus.com/gh_next/lotusgreenhouserequests.nsf/MainDocumentSelf?
openForm
● Playground is available here:
https://greenhouse.lotus.com/sbt/SBTPlayground.nsf/Home.xsp
● Categorized collection of JavaScript samples

JavaScript API – Try It with Playground
1. Samples Navigator
2. Sample Editor
3. Sample Preview

JavaScript API – Key Concepts
Five key concepts (design patterns) used in the JavaScript API
● Modules
● Endpoints
● Promises
● Services + Entities
● Controls

JavaScript API – Modules
Using the RequireJS JavaScript file and module loader (requirejs.org)
● Enables efficient download of JavaScript files
Provide a function which get's called when
the required modules are available
Reference the modules using the name
provided. Module can be class or
collection of static methods.
List the modules required by this
JavaScript snippet

JavaScript API – Endpoints
Provide an abstraction around the connection to a service
● Isolates application code from details of the deployment
Reference endpoint instance using name
that you provide in toolkit configuration.
Use the endpoint to make REST calls to
the service it handles. Call is portable
across deployments.

JavaScript API – Promises
Using JavaScript Promises to deal with asynch nature of REST calls
● Popular design pattern being used for asynchronous method calls
Asynch calls return a Promise
First function passed to then is called for
success.
Second function passed to then is called
for an error.

JavaScript API – Services + Entities
Isolates application code from details of the Connections REST API
● Common pattern across the SDK JavaScript and Java API
Service API supports Create, Read,
Update, Delete operations.
Entity encapsulates request to or response
from the service and also supports
simplified data access.

JavaScript API – Controls
Reusable controls allow Social data to be easily visualized
● Right now only support Dojo but plan to also support JQuery UI
Grid type specifies the data that will be
displayed. Grid is highly customizable.
Grid DOM can be inserted into your page
at any location.

JavaScript API – Why use it?

JavaScript API - Why use it?
Add new social features to your applications
or
Build new social applications on IBM Social Platform
Easiest way to explain this is to 'Show It'
● SDK includes demo application called Acme Airlines
● First you need the SDK and IBM Connections (or Quick Start)
http://ibmsbt.openntf.org/
http://heidloff.net/home.nsf/dx/29.04.2013080743NHE97V.htm
● Demonstrates value of adding social features to an existing application

Introducing Acme Airlines
Flight booking sample application which allows:
● Users to book flights
● Approvers to approve travel requests

Adding Social Features
When booking a flight know
● I'd like to know who from my network has booked which flight (or when they arrive)
● Be social
● Share taxi's
● Get recommendations
● I'd like to have my request sent to the approver (my manager) automatically
When approving travel requests
● I'd like to be notified
● By email or better still as an event
● I'd like not to have to leave my current work context
● Minimize effort to click that Approve button
And this is just the start...

Introducing Social Acme Airlines
Adds social features to main application through extension
● Exploit the users network to help them make better decisions
● Leverage their reporting chain to route approval automatically
● Use E-mail, Activity Stream and Embedded Experiences for approval processing

Social Acme Airlines – Booking a flight
Show who from your network has booked flight
● Prebuilt control which displays profile pictures for selected contacts
● Application could optionally store users connections on server-side

Social Acme Airlines – Approving a flight
Approver identified from users reporting chain
● Simple policy is users manager should approve flights
● Notifications are automatically sent to approver
● Use admin account to post to any users Activity Stream

Approver receives notifications
● Action Required post to their Activity Stream
● Email
Action Required posting
Email notification

Approver can use Embededd Experience to approve the flight
● Available in Activity Stream
Request approve and deny actions

Approver can use Embededd Experience to approve the flight
● Also available in from E-mail

Introducing Social Acme Airlines
Samples are provided which isolate these social features
● Promote a model were you can copy and paste working code
● Playground and sample framework provide editors for sample code
● Common practice is to start developing by creating a new sample

JavaScript API – How to get started?

JavaScript API – Getting started
● IBM Collaboration Quick Start for Social Business
● Installing the SDK
● On your development machine or an internal server
● On IBM Collaboration Quick Start for Social Business
● Setting up a development environment
● Using stable build downloaded from OpenNTF
● Using latest code from GitHub
● Creating your first SDK application
● Using with Sample Framework
● Modifying an existing sample
● Documentation
● Samples
● API Documentation

IBM Collaboration Quick Start for Social Business
● IBM Collaboration Quickstart for Social Business is an IBM SmartCloud™ Enterprise image
● Quickly get an instance without any installation, hardware, or maintenance
● All you need is Internet Access (SSH, SCP, VNC)
For more information go here: http://heidloff.net/home.nsf/dx/29.04.2013080743NHE97V.htm
Revision: June
IBM Connections 4.0 CR3
IBM Domino® 9.0 IF1 + Social Edition
IBM Sametime® community server 8.5.2 IFR1
IBM Sametime Proxy Server 8.5.2 IFR1
IBM Social Business Toolkit / Playground / TroubleTickets

Installing the SDK
● Stable builds are available on OpenNTF
● Includes Tomcat server
● Requires Java JRE v6
● Sample applications pre-deployed
● Configuration for Quick Start
● Configuration for Smart Cloud
● Setting up a development environment
1.Download build and unzip to your sdk folder
2.Unzip Tomcat (located in <your sdk folder>sbtsdktomcat) to your tomcat folder
3.Set JRE_HOME=<location of your JRE>
4.Edit <your tomcat folder>confsbt.properties
Change 'qs.renovations.com' to your quick start host e.g. 'vhostNNNN.dc1.on.ca.compute.ihost.com'
Set OAuth 2.0 for your Quick Start
5.Start Tomcat using <your tomcat folder>binstartup.bat

Installing the SDK - sbt.properties
Property file containing configuration settings for Sample Framework
# Connections Basic Endpoint Parameters
connections.url=https://qs.renovations.com:444
connections.authenticationPage=/sbt/loginForm.html?endpoint=connections
connections.authenticationService=communities/service/atom/communities/my
connections.apiVersion=4.0
# Connections OAuth 2.0 Endpoint Parameters
connectionsOA2.url=https://qs.renovations.com:444
connectionsOA2.serviceName=SBTK
connectionsOA2.appId=SBTK
connectionsOA2.consumerKey=SBTK
connectionsOA2.consumerSecret=NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
connectionsOA2.authorizationURL=https://qs.renovations.com:444/oauth2/endpoint/connectionsProvider/authori
connectionsOA2.accessTokenURL=https://qs.renovations.com:444/oauth2/endpoint/connectionsProvider/token
connectionsOA2.apiVersion=40
# SmartCloud OAuth 1.0 Endpoint Parameters
smartcloud.url=https://apps.na.collabservtest.lotus.com
smartcloud.consumerKey=NNNNNNNNNNNNNNNNNNNNNNNNNNNNN
smartcloud.consumerSecret=NNNNNNNNNNNNNNNNNNNNNNNNNNNNN
smartcloud.requestTokenURL=https://apps.na.collabservtest.lotus.com/manage/oauth/getRequestToken
smartcloud.authorizationURL=https://apps.na.collabservtest.lotus.com/manage/oauth/authorizeToken
smartcloud.accessTokenURL=https://apps.na.collabservtest.lotus.com/manage/oauth/getAccessToken
smartcloud.appId=Social Business Toolkit
smartcloud.apiVersion=4.0

Installing Social Business Toolkit SDK on Quick Start
● Copy latest SDK build to your Quick start using WinScp or download directly from the image
● See: http://heidloff.net/home.nsf/dx/29.04.2013080743NHE97V.htm
● Unzip to the /opt folder
unzip sbtsdk-1.0.0.20130603-0843.zip
● Copy Tomcat archive to /opt and unzip it
cd /opt/sbtsdk/tomcat
cp apache-tomcat-7.0.30-sbt.zip /opt
unzip apache-tomcat-7.0.30-sbt.zip
● Make shell scripts the executable
cd /opt/apache-tomcat-7.0.30/bin
chmod +x ./*.sh
● Update the IP Tables
iptables -A INPUT -p tcp -m state --state NEW -m tcp --dport 8080 -j ACCEPT
iptables -A INPUT -p tcp -m state --state NEW -m tcp --dport 8443 -j ACCEPT
/etc/init.d/iptables save
service iptables stop
service iptables start
● Configure the SDK to use your Quick start
Edit /opt/apache-tomcat-7.0.30/conf/sbt.properties
Change 'qs.renovations.com' to your quick start host e.g. 'vhostNNNN.dc1.on.ca.compute.ihost.com'
● Start Tomcat
/opt/apache-tomcat-7.0.30/startup.sh

Setting up a Development Environment
● Using a stable build downloaded from OpenNTF
● Download and install the SDK
● You need to install Eclipse IDE for Java EE Developers
● Execute the script to initialize the Eclipse workspace provided in the SDK
initWin.cmd or initLinux.sh or initMacOS.sh
● Launch Eclipse and point to the workspace
C:sbtkworkspaceWin or sbtkworkspaceNix
● Clean and build all projects
● Launch Tomcat and you can now run the sample framework
https://localhost:8443/sbt.sample.web/javascript.jsp

Setting up a Development Environment
● Using latest code from GitHub
● Install required software (JRE, Eclipse, SDK)
● Import required projects
● Use File -> Import -> Team -> Team Project Set to import this project set j2ee-projectset.psf
● Configure Tomcat server
● Configure your own version of Tomcat or the one from the SDK
● Add All projects to Tomcat
● In Project Explorer open Servers -> Tomcat v7.0 Server at localhost-config
● Add sbt.properties and keystore from SDK Tomcat to that directory
● Edit context.xml and add this line:
<Resource name="url/ibmsbt-sbtproperties" auth="Container" type="java.net.URL"
factory="com.ibm.commons.runtime.naming.UrlFactory" url="sbt.properties" />
● Edit server.xml and modify the SSL Connection to be this:
<Connector SSLEnabled="true" clientAuth="false" keystoreFile="conf/keystore"
keystorePass="passw0rd" maxThreads="150" port="8443" protocol="HTTP/1.1"
scheme="https" secure="true" sslProtocol="TLS"/>
● Start Tomcat and go Toolkit Samples
https://localhost:8443/sbt.sample.web/javascript.jsp

First SDK Application
Start with an application that accesses a users Social data
● Connections or Communities or Files or …
Enable some new functionality based on this data
● Post entries to your Activity Stream with an associated Embedded Experience
● Display options based on intersection of your connections or another list of people
● Start a meeting call with members of a Community
● Update or create a file for a workflow
Two common patterns people have used to get started
● Add new samples to the sample framework
● Edit an existing application

First SDK Application – Sample Framework
Each sample is made up of several files
● JavaScript file (.js) containing the code for the sample, this is the only required file
● HTML (.html) file containing any markup or templates required by the sample
● Stylesheet (.css) file containing any styling information
● Properties (.properties) file containing a description, tags and theme name
● Documentation (.doc.html) file containing documentation in HTML format
Samples are located in the sbt.sample.web project
SocialSDKsamplesj2eecom.ibm.sbt.sample.webWebContentsamplesjs
● Create a new folder and add your sample
● Restart Tomcat and your sample sample framework
Sample can be previewed in isolation using the preview page
https://localhost:8443/sbt.sample.web/javascriptPreview.jsp?snippet=Webinar_My_Communities&jsLibId=dojo180

First SDK Application – Sample Framework
Sample Framework supports multiple environments
● Each environment is a collection of endpoints
● You can test the same samples against Quick Start or Smart Cloud or Open Social
Environments are defined in managed-beans.xml

<managed-bean>
<managed-bean-name>smartcloudEnvironment</managed-bean-name>
<managed-bean-class>com.ibm.sbt.jslibrary.SBTEnvironment</managed-bean-class>
<managed-bean-scope>application</managed-bean-scope>
<managed-property>
<property-name>endpoints</property-name>
<value>smartcloud:connections,smartcloud</value>
</managed-property>
<managed-property>
<property-name>properties</property-name>
<value>sample.email1,sample.email2</value>
</managed-property>
</managed-bean>

First SDK Application – Modify Existing Sample
Created a new Sample specifically for this purpose
● Included in upcoming SDK release (mail me if you want it now mark_wallace@ie.ibm.com)
● Providing a 'Getting Started' application to generate this sample
Display users profile Post Activity Stream
List users connections List users communities List users files

JavaScript API - Documentation
● Samples
● Demonstration – Show Create, Read, Update and Delete operations
● API – Show how to use each method and the expected result
● REST – Show how to invoke the IBM Connections REST API directly
● API Documentation
sbtsdkdocjsdocindex.html

Useful Links
● Social Business Toolkit on developerWorks
https://www.ibmdw.net/social/
● Download the SDK
● Ask and answer questions on Stack Overflow
http://stackoverflow.com/questions/tagged/ibmsbt
● Get the code from GitHub
https://github.com/OpenNTF/SocialSDK
● Follow us on Twitter
https://twitter.com/ibmsbt
● Follow us on YouTube
http://www.youtube.com/ibmsbt
● Experiment with latest samples on Greenhouse
http://bit.ly/sbtplayground

Acknowledgements and Disclaimers
© Copyright IBM Corporation 2013. 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, Rational, the Rational logo, Telelogic, the Telelogic logo, Green Hat, the Green Hat logo, and other IBM
products and services 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
Other company, product, or service names may be trademarks or service marks of others.
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.

How to use the IBM Social Business Toolkit in HTML/JavaScript Applications - SBT Webinar 06/12/13

Recommended

Recommended

More Related Content

More from IBM Connections Developers

More from IBM Connections Developers (17)

Recently uploaded

Recently uploaded (20)

How to use the IBM Social Business Toolkit in HTML/JavaScript Applications - SBT Webinar 06/12/13