MAS202 Customizing IBM Connections

At IBM ConnectEd 2015, I am lucky enough to be one of the Jumpstart Presenters.  It’s at least my fifth year presenting at the Conference (neé Lotusphere, IBM Connect); I’ve lost track how many times.

Once again, I am going to present on Social Application Development, and I am joined by my team (as noted on the team blog).

MAS202 Customizing IBM Connections 
 Sun 25-Jan, 03:45 PM - 04:45 PM @ Swan - Mockingbird 1-2
 Presenter: Paul Bastide
 IBM Connections enables you to connect and socialize with colleagues, find experts, and quickly share and organize information to get work done.  As a developer, you can leverage the IBM Connections data to provide a better experience for your users.  In this session, you learn what features you can extend, leverage and use to build a compelling experience.  The session highlights how best to extend and work with the IBM Connections Cloud.

You locate the Swan – Mockingbird 1-2 using the Swan’s map.

Swan Mockingbird Presentation
Swan Mockingbird Presentation

My Introduction to Liberty and WebSockets

Recently, I’ve been turned on to IBM WebSphere Libertysuper fast and highly configurable Application Server Runtime.  The runtime requires Java 7.0 to get access to the latest features to build web applications, OSGi applications and EJBs.

Two features caught my eye were Java Servlet 3.1 and Java API for WebSocket 1.0.  The WebSocket component (JSR356) in combination with the Servlet 3.1 component offer a super foundation for realtime web applications.  The WebSocket is superbly interesting as it’s “full duplex, long-lived” (per the blog).   Make that 3 features, I forgot the JSON-P feature

I just had to play around and investigate the websockets component. I setup the Eclipse environment with the WebSphere Liberty Profile. I then setup a Maven Project for Liberty.

Click File > New Maven Project
Select Use Default Workspace Location
Click Next
Select the http://public.dhe.ibm.com/ibmdl/export/pub/software/websphere/wasdev/maven/repository Catalog
Select the com.ibm.tools.archetype webapp-jee7-liberty
Click Next

Maven Achetype
Maven Achetype

Enter a Group Id: com.ibm.ess.appdev.liberty
Enter a Artifact Id: demo
Enter Package: com.ibm.ess.appdev.liberty
Click Finish

Archetype Parameters
Archetype Parameters

If you find an error after creating the project, such as:

ArtifactDescriptorException: Failed to read artifact descriptor for com.ibm.tools.target:was-liberty:pom:LATEST: VersionResolutionException: Failed to resolve version for com.ibm.tools.target:was-liberty:pom:LATEST: Could not find metadata com.ibm.tools.target:was-liberty/maven-metadata.xml in local (/Users/paulbastide/.m2/repository)
pom.xml error
pom.xml error

Open the pom.xml
Copy the following snippet to the pom.xml
Click Save

 <repositories>
 <repository>
 <id>maven online</id>
 <name>maven repository</name>
 <url>https://repo1.maven.org/maven2/</url>
 </repository>
 <repository>
 <id>liberty maven online</id>
 <name>liberty maven repository</name>
 <url>http://public.dhe.ibm.com/ibmdl/export/pub/software/websphere/wasdev/maven/repository/</url>
 </repository>
 </repositories>

Right Click on the demo project, and go to Run As -> Run on Server

Select Manually define a new server
Expand IBM
Select WebSphere Application Server Liberty Profile
18015657

Click Next
Select Install from an archive or a repository
Leave the default JRE selected
Click Next

Runtime Environment
Runtime Environment

Enter a Destination Path, such as /Users/paulbastide/Desktop/liberty
Select Download and Install a New Runtime Environment from Liberty Repository
Select Liberty Profile Beta Runtime
Click Next

Install the Runtime
Install the Runtime

Click Next

Select I accept the terms of all the license agreements

Click Next

Leave the defaults
Click Next

You should see demo under configured
Click Finish (It could take a few minutes to download the entire profile)

Once complete you’ll see the notice that it was installed successfully.

Success
Success

Let’s setup the server part.

Click on the Servers tab
Expand WebSphere Application Server Liberty Profile at localhost
Double Click on Server Configuration

Configuration
Configuration

Click Source
Add Children to the Feature Manager
<feature>servlet-3.1</feature>
<feature>websocket-1.0</feature>

Feature Manager
Feature Manager

Click File > Save

The server is setup to host our WebSockets.

Expand Java Resources > src/main/java > com.ibm.ess.appdev.liberty
Right Click the Package
Create a new Java Class (extending java.lang.object) – DemoEndpoint.java

Add the Framework for the Annotations

 @ServerEndpoint sets the path at which the websocket is hosted, and can contain a macro/text replacement like common JAX-RS code
 @OnOpen - start of the session
 @OnMessage - when there is a message in the session
 @OnClose - when the session is closed
 @OnError - when there is an error related to the ongoing session
 @ServerEndpoint(value = "/DemoEndpoint/{channel}")
 public class DemoEndpoint {
@OnOpen
 public void open(Session session, @PathParam("channel") String channel) {
}
@OnMessage
 public String message(String message, Session session, @PathParam("channel") String channel) {
 String result = "";
return result;
 }
@OnClose
 public void close(Session session, CloseReason reason) {
}
@OnError
 public void error(Throwable t) {
 t.printStackTrace();
 }
 }

I’m not going to extend open/error or close, and just going to focus on the message part.

Let’s do a simple channel based echoing.

Replace the method – message with the following java

 String result = "" + channel + " " + message;
 System.out.println("Message: " + message);
 return result;

Expand src > webapp
Right Click on webapp
Create a new HTML Page – demo.html

Replace the HTML page with the following Content

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
 <script type="text/javascript">
 var socket = new WebSocket("ws://localhost:9080/demo/DemoEndpoint/vampire");
function sendMessage(){
 socket.send("example data");
 }
socket.onmessage = function (event) {
 document.getElementById('content').innerHTML = document.getElementById('content').innerHTML
 + "<br/>"
 + event.data;
 }
</script>
 </head>
 <body>
 <button onClick="javascript:sendMessage()">Send Sample Content to Channel
 </button>
 <div id="content">
 </div>
 </body>
 </html>

Navigate to http://localhost:9080/demo/demo.html
Click Send Sample Content to Channel

Demo
Demo

I plan on playing around with the code more, and see what I can really do with WebSockets, they offer a lot of potential (specifically with Handlers).

I am going to have to play around with error handling and sending messages across multiple sessions/users/authentication.

Some good reference articles are:

WebSphere Liberty – WebSockets Maven and WebSphere WebSocket Sample
WASDev Planning Poker WebSockets Sample WebSockets Overview WebSockets Overview From Mozilla
StackOverflow Maven Repositories Question Derby WebSockets Java Code
Configure Liberty Profile WebSockets and Liberty Overview WebSocket Cookbook

IBM Connections Cloud Application Development Workshop – Q4 2014

Thanks to Paul Godby, a colleague in the Ecosystem Development group in IBM, there is an update to the IBM Collaboration Solutions Ecosystem Development Community. The update is compelling a new set of self-paced workshops are available for IBM Connections Cloud Application Development.

Anyone that is a member of IBM Greenhouse can access the materials.  To become a member, you have to sign up for Greenhouse at the account sign up page.

Per Paul, developers “learn how to develop applications for the IBM Connections Social Cloud”.  Some cool things to think about are – “no need to provision a hosted server environment,” IBM BlueMIx, and using REST APIs to build social applications with Connections data in the cloud. You can read his detailed Description in the community, and access the Self-Paced Materials – https://greenhouse.lotus.com/files/app#/folder/925ed061-f7a9-40fb-9ae3-90a4df350651

Other workshops area available in the Available Workshops

I hope you all find this update helpful.

Business Support Systems Subscription API and Part Numbers

The Business Support Systems enable an administrator or vendor to create a subscription (or entitlement) for a user.  There is one thing for those that are new… where do I get the part number.

Part numbers are the available in the Announcement Letter for the Service or Release.  I went to the Offering Site, and did a search. I entered “IBM Connections Cloud S1” and selected Announcement Letter.  I clicked Search

Announcement Letter Search
Announcement Letter Search

A quick link to my search is here .

I scroll down and find the entry that corresponds to the Announcement letter for my geography and purpose.  I click on the entry.

My Entry
My Entry

I scroll down and find my part numbers.

Part Number
Part Number

Bam,  I can call the BSS API mentioned above with the part number, and entitle a user for that part number.

 

Getting Started With Activity Streams and OAuth

Activity Streams is a way to generate a social record of what happened and what’s happening around a person or group of persons (community). The social record is super powerful when combined with business applications that provide updates on behalf of users. IBM paired these activity streams with OpenSocial so that a well formatted context automatically triggers actions with third party backends. On Click, there is a third party embedded application, called an embedded experience.

Examples are – updates that there is a CRM Opportunity that requires your attention.

To get the deep dive… Bill Looby wrote a nice a presentation which outlines the Activity Stream [ Link ] and Paul Godby wrote a nice presentation [ Link ]

In IBM Connections, the key protocol for 3rd party developers to securely access to a user’s data is oAuth 1.0a and oAuth 2.0. The supported oAuth flows are described here.

I explained oAuth for those unfamiliar in more detail in this presentation You should walk away with a good understanding of oAuth and Activity Streams, when combined the powers are immense.

Seamless User Experience with IBM SmartCloud for Social Business

I work with many partners to integrate with IBM Collaboration Solutions products and projects – IBM Domino, IBM Sametime, IBM Connections, IBM Social Business Toolkit, IBM Collaboration QuickStart for Social Business.

Recently, I have been focusing on integrating with the IBM SmartCloud for Social Business. Many partners ask how they can make a seamless experience between IBM SmartCloud for Social Business and their custom application. This article introduces the IBM SmartCloud for Social Business, the Trials you can use to prototype your integrations, and how to make the seamless experience.

Overview

IBM SmartCloud for Social Business is a suite of business networking and collaboration cloud-based services hosted by the IBM Collaboration Solutions division of IBM. The integrated services include social networking for businesses, online meetings, file sharing, instant message, data visualization and e-mail.

Trials

You can use various trials. Customer Trials are:

No charge, 60 day trial, 25 accounts
Anyone can sign up
Once Per Domain
Available at http://ibm.co/1coI7gP

Partner Trials are:

No charge, 1 year trial, 30 accounts
Use the account to demonstrate and develop solutions for your clients
Must be a PartnerWorld Member
Available at http://ibm.co/1kbh7eL

Starting Point and Extensions

When you first log in with your trial, you see a great starting point, your dashboard.

Dashboard

Click the Apps Menu

Apps Menu

You can add your own application here.

Let’s add our own extension.

Click the Admin Menu

Click Manage Organization

Manage Organization

Click Organization Extensions

Click Add Extension

Add Extension

Select Top Navigation Bar

Type Name : Demo

Enter Icon Url: http://www-03.ibm.com/ibm/history/ibm100/images/icp/D562347I16459C79/us__en_us__ibm100__sustainable_cocoa__icon__540x324.png

This is for the image that you want displayed to the left of the entry on the Apps Menu. You can use any icon that is web accessible by the User’s browser.

Enter Url:  http://bastide.org/wp-content/uploads/2014/03/demo-seamless1.html

You can point to any webpage that your user can access via their web browser (internal or external to a corporate network).

Click Save

Extension-Save

Click The Apps Menu

Notice the Demo is added.

New Apps Menu

You have completed the first step of the seamless experience.

Making your App Seamless

Making an application seamless is a multiple step process,
add the linked styles, so you can take full advantage of the styles.

<link rel="stylesheet" href="https://apps.na.collabserv.com/theming/theme/css/3" type="text/css" />

Next, you want to add a class and div to add the menu bar.

<div class=”lotusui30 lotusui30_body lotusui30_fonts scloud3“> <div id=”smartcloudExt” class=”scloud3” > <script src=”https://apps.na.collabserv.com/navbar/banner/notes9/smartcloudExt?displayName&orgName=Demo Org&oneui=3” language=”javascript“></script> </div>

Notice, smartcloudExt exists as the div id and is the last component in the URL, they must exist, the javascript loads the banner in the div in a specific div based on that component.  It can be anything as long as they agree.   Notice also, that the div is surrounded by the div with class – that’s the theme/User Interface specific definitions necessary to render the menu bar.

Next, if you want to take advantage of the styles from IBM, called OneUI, you can navigate and find the elements of the style and use the sample as a starting point http://infolib.lotus.com/resources/oneui/3.0/docPublic/components

Copy and paste it in place.

Save

Launch in Firefox .

Result

You can inspect each element, and find the CSS you want to override. Look to the right…

CSS_Inspector_Firebug

Copy the CSS and inline the CSS with your own definition.

For instance, I wanted to increase the size of the cloud table.

<style type="text/css">
.scloud3 table, .scloud3_gecko input, .scloud3_gecko select, .scloud3_webkit input, .scloud3_webkit select {
    font-size: 1.5em;
}
</style>

This results in expanded font sizes.

Result with Expanded Font

Note, you might see an issue with no banner, such as this image. This means you have not previously logged into the SmartCloud, login to activate the banner.

Screen Shot 2014-03-09 at 8.01.34 AM

The source for the demo is available here

You now know how to take advantage of the IBM SmartCloud for Social Business to build a seamless experience for your users.

References

Copied Detailed Table Information http://infolib.lotus.com/resources/oneui/3.0/docPublic/components/tableSummaryDetails.htm
OneUI 3.0 Documentation http://infolib.lotus.com/resources/oneui/3.0/docPublic/index.htm
Linked CSS https://apps.collabservnext.com/theming/theme/css/3
CSS Formatter  http://www.codebeautifier.com/