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: [email protected]: mewallaceLinkedIn: http://ie.linkedin.com/in/markewallace/

Previously worked● Sametime Unified Telephony● XSP Runtime● IBM Data Access● Translation Services for Sametime

mailto:[email protected]


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 Platformand

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

https://greenhouse.lotus.com/sbt/SBTPlayground.nsf/Home.xsp


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 applicationsor

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: JuneIBM 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 OpenNTFhttp://ibmsbt.openntf.org/

● Includes Tomcat server● Requires Java JRE v6● Sample applications pre-deployed● Configuration for Quick Start● Configuration for Smart Cloud

● Setting up a development environment1. Download build and unzip to your sdk folder2. Unzip Tomcat (located in <your sdk folder>\sbtsdk\tomcat) to your tomcat folder3. Set JRE_HOME=<location of your JRE>4. Edit <your tomcat folder>\conf\sbt.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>\bin\startup.bat


Installing the SDK - sbt.properties

Property file containing configuration settings for Sample Framework

# Connections Basic Endpoint Parametersconnections.url=https://qs.renovations.com:444connections.authenticationPage=/sbt/loginForm.html?endpoint=connectionsconnections.authenticationService=communities/service/atom/communities/myconnections.apiVersion=4.0# Connections OAuth 2.0 Endpoint ParametersconnectionsOA2.url=https://qs.renovations.com:444connectionsOA2.serviceName=SBTKconnectionsOA2.appId=SBTKconnectionsOA2.consumerKey=SBTKconnectionsOA2.consumerSecret=NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNconnectionsOA2.authorizationURL=https://qs.renovations.com:444/oauth2/endpoint/connectionsProvider/authorizeconnectionsOA2.accessTokenURL=https://qs.renovations.com:444/oauth2/endpoint/connectionsProvider/tokenconnectionsOA2.apiVersion=40# SmartCloud OAuth 1.0 Endpoint Parameterssmartcloud.url=https://apps.na.collabservtest.lotus.comsmartcloud.consumerKey=NNNNNNNNNNNNNNNNNNNNNNNNNNNNNsmartcloud.consumerSecret=NNNNNNNNNNNNNNNNNNNNNNNNNNNNNsmartcloud.requestTokenURL=https://apps.na.collabservtest.lotus.com/manage/oauth/getRequestTokensmartcloud.authorizationURL=https://apps.na.collabservtest.lotus.com/manage/oauth/authorizeTokensmartcloud.accessTokenURL=https://apps.na.collabservtest.lotus.com/manage/oauth/getAccessTokensmartcloud.appId=Social Business Toolkitsmartcloud.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 folderunzip sbtsdk-1.0.0.20130603-0843.zip

● Copy Tomcat archive to /opt and unzip itcd /opt/sbtsdk/tomcatcp apache-tomcat-7.0.30-sbt.zip /optunzip apache-tomcat-7.0.30-sbt.zip

● Make shell scripts the executablecd /opt/apache-tomcat-7.0.30/binchmod +x ./*.sh

● Update the IP Tablesiptables -A INPUT -p tcp -m state --state NEW -m tcp --dport 8080 -j ACCEPTiptables -A INPUT -p tcp -m state --state NEW -m tcp --dport 8443 -j ACCEPT/etc/init.d/iptables saveservice iptables stopservice iptables start

● Configure the SDK to use your Quick startEdit /opt/apache-tomcat-7.0.30/conf/sbt.propertiesChange '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:\sbtk\workspaceWin or \sbtk\workspaceNix● 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 Sampleshttps://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 projectSocialSDK\samples\j2ee\com.ibm.sbt.sample.web\WebContent\samples\js

● Create a new folder and add your sample● Restart Tomcat and your sample sample framework

Sample can be previewed in isolation using the preview pagehttps://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 [email protected])● 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 Documentationsbtsdk\doc\jsdoc\index.html



Useful Links● Social Business Toolkit on developerWorks

https://www.ibmdw.net/social/● Download the SDK

http://ibmsbt.openntf.org/● 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.shtmlOther 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.

http://www.ibm.com/legal/copytrade.shtml

how to use the ibm social business toolkit in html/javascript applications - sbt webinar 06/12/13

Technology

ibm corporation7javascript

ibm corporation8javascript

ibm corporation9javascript

ibm connections

ibm corporationhow

javascript wrapper api

ibm social platformeasiest

social data