How to use the IBM Social Business Toolkit in HTML/JavaScript Applications - SBT Webinar 06/12/13
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 3,840 views
Uploaded on

IBM Social Business Toolkit: http://developer.ibm.com/social ...

IBM Social Business Toolkit: http://developer.ibm.com/social

Video: http://youtu.be/L0pN1oJtigg

Abstract:
In this webinar you will learn about the JavaScript API provided in the IBM Social Business Toolkit. Starting with the Playground, which is an online, interactive application that allows you to “try out” the JavaScript API this session will show you how to explore the different parts of the API and to understand the key design patterns being used. We will also show you what options exist to quickly get the SDK running locally. Next the session will introduce you to why you would add Social capabilities to an existing application and how the SDK simplifies this process. In this section you will see how the functionality of a traditional web application has been greatly improved by the addition of new social features. Finally the session will cover how to start using the JavaScript API from within a simple dynamic web application. This part of the session will introduce a getting started application which shows how easy it can be to use the JavaScript API.

Speaker:
Mark Wallace, @mewallace
IBM, Social Business Toolkit Architect

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,840
On Slideshare
2,952
From Embeds
888
Number of Embeds
7

Actions

Shares
Downloads
73
Comments
0
Likes
1

Embeds 888

http://heidloff.net 831
http://www.heidloff.net 32
http://www.youtube.com 12
https://twitter.com 7
http://niklasheidloff.wordpress.com 4
http://www.365dailyjournal.com 1
http://www-10.lotus.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. © 2011 IBM CorporationHow to use the IBM Social Business Toolkit inHTML / JavaScript ApplicationsMark Wallace, Technical Lead Social Business Toolkit SDKIBM SBT Webinar 06/12/13
  • 2. © 2013 IBM Corporation2IBM Social Business Toolkit Webinars
  • 3. © 2013 IBM Corporation3Future Webinars
  • 4. © 2013 IBM Corporation4About MeBased Ireland Lab, DublinWorking on Social Business Toolkit SDK withteam of developers in Ireland and India LabsEmail: mark_wallace@ie.ibm.comTwitter: mewallaceLinkedIn: http://ie.linkedin.com/in/markewallace/Previously worked● Sametime Unified Telephony● XSP Runtime● IBM Data Access● Translation Services for Sametime
  • 5. © 2013 IBM Corporation5Please noteIBM’s statements regarding its plans, directions, and intent are subject to change orwithdrawal without notice at IBM’s sole discretion.Information regarding potential future products is intended to outline our general productdirection 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 aboutpotential future products may not be incorporated into any contract. The development,release, and timing of any future features or functionality described for our products remainsat our sole discretion.Performance is based on measurements and projections using standard IBM benchmarks ina controlled environment. The actual throughput or performance that any user willexperience will vary depending upon many factors, including considerations such as theamount of multiprogramming in the user’s job stream, the I/O configuration, the storageconfiguration, and the workload processed. Therefore, no assurance can be given that anindividual user will achieve results similar to those stated here.
  • 6. © 2013 IBM Corporation6IBM Social Business Toolkit SDK – JavaScript APISDK includes a JavaScript API forWeb DevelopersThe goal of this session is toanswer these three questions● What is it?● Why would I want to use it?● How do I get started?
  • 7. © 2013 IBM Corporation7JavaScript API – What is it?IBM Social Business Toolkit SDK – JavaScript API
  • 8. © 2013 IBM Corporation8JavaScript API - What is it?JavaScript wrapper API for IBM Social PlatformandCollection of reusable JavaScript controls
  • 9. © 2013 IBM Corporation9JavaScript 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
  • 10. © 2013 IBM Corporation10JavaScript API – Try It with Playground1. Samples Navigator2. Sample Editor3. Sample Preview
  • 11. © 2013 IBM Corporation11JavaScript API – Key ConceptsFive key concepts (design patterns) used in the JavaScript API● Modules● Endpoints● Promises● Services + Entities● Controls
  • 12. © 2013 IBM Corporation12JavaScript API – ModulesUsing the RequireJS JavaScript file and module loader (requirejs.org)● Enables efficient download of JavaScript filesProvide a function which gets called whenthe required modules are availableReference the modules using the nameprovided. Module can be class orcollection of static methods.List the modules required by thisJavaScript snippet
  • 13. © 2013 IBM Corporation13JavaScript API – EndpointsProvide an abstraction around the connection to a service● Isolates application code from details of the deploymentReference endpoint instance using namethat you provide in toolkit configuration.Use the endpoint to make REST calls tothe service it handles. Call is portableacross deployments.
  • 14. © 2013 IBM Corporation14JavaScript API – PromisesUsing JavaScript Promises to deal with asynch nature of REST calls● Popular design pattern being used for asynchronous method callsAsynch calls return a PromiseFirst function passed to then is called forsuccess.Second function passed to then is calledfor an error.
  • 15. © 2013 IBM Corporation15JavaScript API – Services + EntitiesIsolates application code from details of the Connections REST API● Common pattern across the SDK JavaScript and Java APIService API supports Create, Read,Update, Delete operations.Entity encapsulates request to or responsefrom the service and also supportssimplified data access.
  • 16. © 2013 IBM Corporation16JavaScript API – ControlsReusable controls allow Social data to be easily visualized● Right now only support Dojo but plan to also support JQuery UIGrid type specifies the data that will bedisplayed. Grid is highly customizable.Grid DOM can be inserted into your pageat any location.
  • 17. © 2013 IBM Corporation17JavaScript API – Why use it?IBM Social Business Toolkit SDK – JavaScript API
  • 18. © 2013 IBM Corporation18JavaScript API - Why use it?Add new social features to your applicationsorBuild new social applications on IBM Social PlatformEasiest 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
  • 19. © 2013 IBM Corporation19Introducing Acme AirlinesFlight booking sample application which allows:● Users to book flights● Approvers to approve travel requests
  • 20. © 2013 IBM Corporation20Adding Social FeaturesWhen booking a flight know● Id like to know who from my network has booked which flight (or when they arrive)● Be social● Share taxis● Get recommendations● Id like to have my request sent to the approver (my manager) automaticallyWhen approving travel requests● Id like to be notified● By email or better still as an event● Id like not to have to leave my current work context● Minimize effort to click that Approve buttonAnd this is just the start...
  • 21. © 2013 IBM Corporation21Introducing Social Acme AirlinesAdds 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
  • 22. © 2013 IBM Corporation22Social Acme Airlines – Booking a flightShow 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
  • 23. © 2013 IBM Corporation23Social Acme Airlines – Approving a flightApprover 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
  • 24. © 2013 IBM Corporation24Social Acme Airlines – Approving a flightApprover receives notifications● Action Required post to their Activity Stream● EmailAction Required postingEmail notification
  • 25. © 2013 IBM Corporation25Social Acme Airlines – Approving a flightApprover can use Embededd Experience to approve the flight● Available in Activity StreamRequest approve and deny actions
  • 26. © 2013 IBM Corporation26Social Acme Airlines – Approving a flightApprover can use Embededd Experience to approve the flight● Also available in from E-mail
  • 27. © 2013 IBM Corporation27Introducing Social Acme AirlinesSamples 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
  • 28. © 2013 IBM Corporation28JavaScript API – How to get started?IBM Social Business Toolkit SDK – JavaScript API
  • 29. © 2013 IBM Corporation29JavaScript 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
  • 30. © 2013 IBM Corporation30IBM 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.htmRevision: JuneIBM Connections 4.0 CR3IBM Domino® 9.0 IF1 + Social EditionIBM Sametime® community server 8.5.2 IFR1IBM Sametime Proxy Server 8.5.2 IFR1IBM Social Business Toolkit / Playground / TroubleTickets
  • 31. © 2013 IBM Corporation31Installing 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>sbtsdktomcat) to your tomcat folder3.Set JRE_HOME=<location of your JRE>4.Edit <your tomcat folder>confsbt.propertiesChange qs.renovations.com to your quick start host e.g. vhostNNNN.dc1.on.ca.compute.ihost.comSet OAuth 2.0 for your Quick Start5.Start Tomcat using <your tomcat folder>binstartup.bat
  • 32. © 2013 IBM Corporation32Installing the SDK - sbt.propertiesProperty 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/authoriconnectionsOA2.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
  • 33. © 2013 IBM Corporation33Installing 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
  • 34. © 2013 IBM Corporation34Setting 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 SDKinitWin.cmd or initLinux.sh or initMacOS.sh● Launch Eclipse and point to the workspaceC:sbtkworkspaceWin or sbtkworkspaceNix● Clean and build all projects● Launch Tomcat and you can now run the sample frameworkhttps://localhost:8443/sbt.sample.web/javascript.jsp
  • 35. © 2013 IBM Corporation35Setting 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
  • 36. © 2013 IBM Corporation36First SDK ApplicationStart 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 workflowTwo common patterns people have used to get started● Add new samples to the sample framework● Edit an existing application
  • 37. © 2013 IBM Corporation37First SDK Application – Sample FrameworkEach 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 formatSamples are located in the sbt.sample.web projectSocialSDKsamplesj2eecom.ibm.sbt.sample.webWebContentsamplesjs● Create a new folder and add your sample● Restart Tomcat and your sample sample frameworkSample can be previewed in isolation using the preview pagehttps://localhost:8443/sbt.sample.web/javascriptPreview.jsp?snippet=Webinar_My_Communities&jsLibId=dojo180
  • 38. © 2013 IBM Corporation38First SDK Application – Sample FrameworkSample 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 SocialEnvironments are defined in managed-beans.xml<!-- SmartCloud Environment --><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>
  • 39. © 2013 IBM Corporation39First SDK Application – Modify Existing SampleCreated 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 sampleDisplay users profile Post Activity StreamList users connections List users communities List users files
  • 40. © 2013 IBM Corporation40JavaScript 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 Documentationsbtsdkdocjsdocindex.html
  • 41. © 2013 IBM Corporation41IBM Social Business Toolkit SDK – JavaScript APIUseful Links● Social Business Toolkit on developerWorkshttps://www.ibmdw.net/social/● Download the SDKhttp://ibmsbt.openntf.org/● Ask and answer questions on Stack Overflowhttp://stackoverflow.com/questions/tagged/ibmsbt● Get the code from GitHubhttps://github.com/OpenNTF/SocialSDK● Follow us on Twitterhttps://twitter.com/ibmsbt● Follow us on YouTubehttp://www.youtube.com/ibmsbt● Experiment with latest samples on Greenhousehttp://bit.ly/sbtplayground
  • 42. © 2013 IBM Corporation42Acknowledgements 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 withIBM Corp.IBM, the IBM logo, ibm.com, Rational, the Rational logo, Telelogic, the Telelogic logo, Green Hat, the Green Hat logo, and other IBMproducts 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 atrademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this informationwas published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks isavailable 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 allcountries in which IBM operates.The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They areprovided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance oradvice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in thispresentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arisingout 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 andconditions 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 theymay have achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in thesematerials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specificsales, revenue growth or other results.