• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Do Try This at Home! Extend IBM Connections using IBM Worklight
 

Do Try This at Home! Extend IBM Connections using IBM Worklight

on

  • 1,622 views

DO Try This at Home! Extend IBM Connections using IBM Worklight ...

DO Try This at Home! Extend IBM Connections using IBM Worklight

Speakers:
Handly Cameron, Prolifics
Smriti Kapuria , Prolifics

Abstract: In this session you will learn how to extend IBM Connections and build a mobile app using IBM Worklight. Come see a live demo as we show you how to construct a mobile app and make use of the Social Business Toolkit, OpenSocial, and REST APIs. Experts from Prolifics will cover techniques for integrating with IBM Connections and mobile app construction. We will walk you through the steps of developing a mobile app in Worklight and using Worklight adapters to add social features through the Connections API. After this session, you will be ready to start building your own app. Both Worklight Studio and IBM Greenhouse are free to use, so you CAN try this at home!

Statistics

Views

Total Views
1,622
Views on SlideShare
1,622
Embed Views
0

Actions

Likes
3
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Do Try This at Home! Extend IBM Connections using IBM Worklight Do Try This at Home! Extend IBM Connections using IBM Worklight Presentation Transcript

    • SHOW302: Do Try This at Home! Extend IBM Connections using IBM Worklight Handly Cameron, Prolifics Smriti Kapuria, Prolifics © 2014 IBM Corporation
    • Who We Are  Handly Cameron – Enterprise Architect, Prolifics Software Group – Agile, Developer, Architect, Photographer, IBM Champion – Master of Madness, Herder of Chaos Monkeys (i.e. father of 3) – @handly, handly.org – hcameron@prolifics.com  Smriti Kapuria – Technology Manager, Prolifics User Experience Practice – UX designer, Developer, Architect, Really Cool Ceramicist – skapuria@prolifics.com 2
    • No products were harmed in the making of this session Products and resources used in this presentation:  IBM Worklight® and IBM Worklight Studio®  Eclipse™  IBM Connections®  Apache Tomcat™  IBM Social Business Toolkit®  IBM Greenhouse®  IBM Mobile Test Workbench®  IBM WebSphere® and IBM WebSphere Liberty Server®  IBM Cast Iron® … now you won‟t have to see tons of ® and ™! 3
    • Are You Ready? YES! You don‟t need to know Connections or Worklight to be here. Slides and code downloads for this session can be found at: http://handly.org/show302 The Additional Resources at the end of this presentation has links to some great learning materials to learn more about Connections and Worklight architecture, mobile development, and related topics. 4
    • Agenda After this session, you will be able to:  Discuss real world uses of extending IBM Connections to mobile apps  Know the standard components of IBM Connections and IBM Worklight  Understand when to use Connections REST APIs, OpenSocial APIs, and the IBM Social Business Toolkit  Install your own IBM Worklight Studio development environment  Build an IBM Worklight mobile application integrated with Connections APIs 5
    • Mobile Project Coordination A Real World Example 6
    • Business Case Mobile Project Coordination Business Need  The Design Services department is using Activities in IBM Connections to track Job Requests and Workflow Management.  New requests are added to an Activity and then assigned to a person on the team to work on.  Team managers want to be able to quickly view and assign incoming design requests from their mobile device. Solution: An IBM Worklight application and mobile web app proof of concept was developed to provide request management through integration with IBM Connections. 7
    • Project Calendar Mobile Project Coordination The application opens to a calendar view that provides several options for navigating the calendar, and highlights days with project due dates. Technical Design  A Worklight Adapter provides integration with the Connections REST APIs.  Authentication via a server identity for the PoC  UI is JQuery within the Worklight app shell 8
    • Project Details Mobile Project Coordination Clicking on a date in the calendar shows a list of designers assigned to the project due on that day. 9
    • Incoming Requests Mobile Project Coordination Clicking on Incoming Requests on the main page displays the list of requests that need to be reviewed and assigned. 10
    • Request Details Mobile Project Coordination Selecting a project request provides a detailed description with options to review attached files and accept or reject the request. 11
    • Accept Request form Mobile Project Coordination Accepting a project allows the user to assign designers, click through to see detailed availability, assign deadlines, and save the changes to Connections. 12
    • Orientation IBM Worklight and IBM Connections 13
    • IBM Worklight Orientation 14
    • The Worklight Studio IDE Orientation 15
    • IBM Connections Orientation Profiles Home page Find the people you need See what's happening across your social network Communities Social Analytics Work with people who share common roles and expertise Discover who and what you don‟t know via recommendations Files Micro-blogging Post, share, and discover documents, presentations, images, and more Reach out for help or share news with your social network Wikis Bookmarks Create web content together Save, share, and discover bookmarks Activities Blogs Organize your work and tap your professional network Present your own ideas, and learn from others Forums Exchange ideas with, and benefit from the expertise of others 16 Mobile Access Connections anywhere, anytime with mobile & tablet access
    • IBM Connections Mobile Application Orientation IBM supplies a very nice mobile application for Apple, Android, and Blackberry devices Advantages  Access all of the core social features of Connections  Secure access for your users  Extendable with links and add-ons … so why would you want custom mobile apps integrated with Connections? 17
    • Use Cases for building / integrating with your own app Orientation Enhance your app Standalone App Ideas Connections has many features that could add value into your app. The full IBM Connections app is great, but sometimes you want to focus quickly…  Display profile images and information  Person Finder  Update Connections status and activities  Leverage the Connections social graph to link people within your app  Reference and update files  Other task specific „micro-apps‟ 18  Feed monitor  To Do – Quickly reference and manage your Connections action list  Calendar integration – view and connect with people in your meetings and calls  Ideation – quick voting, submit new ideas, dashboards
    • Integration Options Orientation There are multiple APIs and options for extending IBM Connections at an application level.  IBM Connections Mobile App  IBM Connections REST API  IBM Connections OpenSocial API  IBM Social Business Toolkit SDK 19
    • IBM Connections REST APIs Orientation Features  Access and update Connections applications including Activities, Blogs, Bookmarks, Communities, Files, Forums, Profiles, Wikis, Home Page, and Search  Uses Atom feeds to return data in a common XML format  Supports basic, form, and Oauth authentication Examples Activities: https://activities.enterprise.example.com/activities/service/atom2/completed Blogs: http://blogs.enterprise.example.com/blogs/writer/feed/comments/atom Bookmarks: https://dogear.enterprise.example.com:9443/dogear/atom/popular Communities: http://communities.enterprise.example.com:9080/communities/service/atom/communities/my Home page: https://home.enterprise.example.com:9443/forums/atom/mysearch/results? query="blue" Profiles: https://profiles.enterprise.example.com:9443/profiles/atom/reportingChain.do?userid=7fb4abl0-8f0a-1028-8b5a-db08933b51b2 20
    • IBM OpenSocial APIs Orientation Implementation of the OpenSocial Activity Stream, Microblogging, and People APIs. Features  Open standard API calls, based off current user stream  Returns JSON (JavaScript Object Notation) data  Supports basic and Oauth authentication Examples Activities: https://activities.enterprise.example.com/activitystreams/@me/@all/activities Blogs: http://blogs.enterprise.example.com/activitystreams/@me/@all/blogs Bookmarks: https://dogear.enterprise.example.com:9443/activitystreams/@me/@all/bookmarks Communities: http://communities.enterprise.example.com:9080/activitystreams/@me/@all/@communities Status Updates: https://home.enterprise.example.com:9443/activitystreams/@me/@all/@status Profiles: https://profiles.enterprise.example.com:9443/activitystreams/@me/@all/@people 21
    • IBM OpenSocial Example With Greenhouse Orientation https://greenhouse.lotus.com/connections/opensocial/rest/activitystreams/@me/@all/activities 22
    • IBM Social Business Toolkit Orientation  Makes the APIs much easier!  Single source for developing integrations and leveraging IBM SmartCloud for Social Business and IBM Connections.  Provides a set of extensible tools and resources for developers who want to incorporate social capabilities into their applications and business processes. Get it here: http://www.ibm.com/cloud-computing/social/us/en/toolkit or https://www.ibmdw.net/social … click Docs to find the Download the SDK link. 23
    • IBM Social Business Toolkit – Let’s go to the Playground! Orientation  The SBT Playground is a web-based live demonstration of the JavaScript and Java APIs that are exposed by the SDK. The Playground contains a large set of code snippets and examples that you can customize and use in your own applications.  Connect to Greenhouse, Smartcloud, or a custom Domino or Connections environment.  You can also install a local playground  Go to http://bit.ly/sbtplayground 24
    • IBM Social Business Toolkit – Play Time! 25
    • IBM Social Business Toolkit Orientation Sweet – a JavaScript API? I‟ll just plug that into my hybrid app! Not so fast …  The SBT SDK has a JavaScript API, but the core is still Java classes, intended to run on a server such as Tomcat or IBM WebSphere. (and many phones don‟t even have Java) It is a good thing you just learned about this cool IBM Worklight server, which happens to run on WebSphere and provides server adapters to integrate with mobile applications! 26
    • Let’s Get Started Building your own toolkit 27
    • Install Worklight Studio – For Free! Getting Started Worklight Studio is a free license from IBM! Similar to IBM Domino Designer, you get the full development tool to build and test apps, but will need a license for production. Three easy steps: 1. Go to eclipse.org and download the latest Eclipse IDE for Java EE Developers 2. Load Eclipse and open Help – Eclipse Marketplace… 28
    • Install Worklight Studio – For Free! Getting Started Three easy steps, continued: 3. Search for “Worklight” and install the IBM Worklight Developer Edition V6.1 Tips:  When installing a new version of Worklight Studio, use a new copy of Eclipse in a new directory.  You can also install from your IBM Passport Advantage site.  The IBM Mobile Test Workbench is also free! 29
    • Get an IBM Greenhouse account Getting Started Go to https://greenhouse.lotus.com to sign up. IBM Greenhouse:  Provides demos of IBM collaboration software. Go exploring!  Includes a full IBM Connections environment  Is a demo site, not production. Expect frequent maintenance windows and do not store sensitive information there. 30
    • First Steps/Project Setup Setting up your project in Worklight 31
    • Let’s build an app! Our example will have these features:  Display your current activity stream from Connections.  Display information from your Connections profile.  Let you to update your status on in Connections We will use:  Worklight Studio application development  Dojo Mobile  IBM Connections REST API  IBM Social Business Toolkit 32
    • Create a new project in Worklight Studio 1. 33 Click on the Worklight icon and select Worklight Project. 2. Enter a project name and click Next.
    • Create a new project in Worklight Studio 3. 34 Enter an Application name and click Configure JavaScript Libraries
    • Create a new project in Worklight Studio 4. Select Add Dojo Toolkit 5. Click Finish on the JavaScript Libraries dialog. 6. Click Finish on the New Worklight Project dialog. 7. Wait a minute or so while Worklight builds your new project. Tips:  Worklight 6.1 includes Dojo Mobile 1.9 libraries.  Worklight can optimize which Dojo libraries are included in your application.  You can also choose to include JQuery Mobile or Sench Touch libraries that you have downloaded. 35
    • Worklight Project Structure The Worklight Project wizard will have created a new project structure for you. Key Areas: index.html – This is the core page for your app, acting as the UI and the single page structure used by Worklight apps. js folder – Contains client-side Javascript that controls the app UI, calls to Worklight adapters, and adapters folder – Contains server-side code to coordinate authentication and to send and receive data with back end systems. 36
    • Worklight Rich Page Editor The center of the Worklight IDE will be displaying the Rich Page Editor with the default index.html opened. Tips:  Change the orientation, device type, and zoom level. For this session, we will change to iPhone 5s for the device type.  In split mode, click in the Design pane to select UI elements and place the cursor in the Source pane in the appropriate code.  When selecting elements in the Design pane, popup controls will help with adding new list items or linking navigation.  Many developers use the Source tab at the bottom for faster coding. 37
    • Worklight Components Palette When the Rich Page Editor is open, the Palette view on the right of the IDE provides drawers of HTML, DOJO, and other components that can be dragged into your design. Tips:  Like the mobile navigation wizard, dragging a component in from the Palette will automatically add the needed Dojo (or JQuery) code into your project JavaScript initialization sections.  Components can be dragged from the Palette to either the Design or Source panes.  Worklight provides property completion and other support for Dojo components. Detailed documentation can be found at http://dojotoolkit.org/reference-guide 38
    • Adding a mobile view 1. Find the Mobile Navigation tab in the lower left of the Eclipse workbench and click the icon to add a new mobile view. 2. Select Dojo Mobile View from the popup menu: 39
    • Select a Worklight Mobile View Pattern Worklight provides UI patterns to speed development by providing views common to many mobile apps. 3. Scroll down to third row and select Rich List 4. Click Next > Tips:  Change the orientation, device type, and zoom level to see how the pattern looks with different styles.  For complex projects, create views as external page fragments (html files) for easier code coordination.  The UI Pattern wizard can be used to create your own application view patterns for quick reuse. 40
    • Name your view 5. Enter a descriptive View Id, such as “mainView” 6. Select Set as default 7. Click Finish to insert the view code into your index.html file. 41
    • Home Page The center of the Worklight IDE will be displaying in the Rich Page Editor. 42
    • Add a Header 1. Find Heading in the Dojo Mobile Widgets Palette. 2. Drag the Heading over to the Rich Text Editor and drop at the top of your lists. 3. Double click on the Heading and type in a name for your heading. 43
    • Rename the list items 1. Double-click each of the Item labels and the Item descriptions and type in names for each function. 2. We won‟t use Item 4 or 5, so you can click on each list item and hit Delete. 3. Save index.html (It is always a good idea to save often!) 44
    • Add a detail view This time, we add an empty view to the app so we can add components that are not in a provided template. 1. Click the 2. Select Dojo Mobile View from the popup menu: 3. Select Create empty view 4. Click Next > 45 icon again to add a new mobile view.
    • Add a detail view 5. Enter “activityStreamView” as the View Id. 6. Click Select… next to the Linked From field. 46
    • Add a detail view 7. Select ListItem “Activity Stream” 8. Click OK. 47
    • Add a detail view 9. 48 Click Finish
    • Add a detail view Your view will be created and display in the Rich Page Editor. Don‟t worry! – it is supposed to be blank because you have not added any components. 49
    • Set up the Activity Stream detail view 1. Add a Heading as before from the Dojo Mobile Widgets Palette, name it “Activity Stream”. 2. Select the Heading and click on the Properties pane on the lower right. 3. Select the Dojo tab. 4. Enter Back for the button label. 5. Select mainView for the “Move to” value. 50
    • Set up the Activity Stream detail view 6. Find EdgetoEdgeList in the Pallete. 7. Drag an EdgetoEdgeList to your view below the Header. 51
    • Activity Stream view In the source view, you will see the HTML code for your new view. <div data-dojo-type="dojox.mobile.View" id="activityStreamView"> <div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'Activity Stream',back:'Back',moveTo:'mainView'"></div> <div data-dojo-type="dojox.mobile.EdgeToEdgeList"> <div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"></div> </div> </div> The Items for the Activity Stream will be dynamically added, so we will leave the view as-is for now. 52
    • Set up the Profile detail view This time, we are going to add a view manually. 1. Find the activityStreamView in the Source view and add an extra line after the last </div>. 2. Find a ScrollableView in the Dojo Mobile Widgets Palette. 3. Drag the ScrollableView component to the blank line under the activityStreamView. 53
    • Set up the Profile detail view 4. Enter “profileView” for the Id 5. Select Include heading 6. Enter the following Details: Label: Profile Back button label: Back Back button target: mainView 7. 54 Click Finish
    • Link navigation to the Profile detail Now you need to link from the home page. 1. Find the <div> in the Source view for the Profile item in the mainView. 2. Right click on dojox.mobile.ListItem and choose ListItem – Link to Mobile View. 3. Select profileView for the Inline mobile view 4. Click Finish Note: This dialog also lets you link to view code in an HTML fragment and modify the transition animation used for the navigation. 55
    • Get back to the Profile detail view After setting up the navigation from the mainView, you will find that the Rich Page Editor is not focused on your Profile page. To regain focus, double-click on the profileView in the Mobile Navigation pane on the lower right of Worklight Studio. 56
    • Set up the Profile detail view 1. Add a table as follows in the profileView <div>. 2. Include id attributes in the second column. You will use those to update the field with data. 57
    • Set up the Status Update detail view Add the Status Update view manually. 1. Under the profileView code you just added, add an extra line after the last </div>. 2. Find a ScrollableView in the Dojo Mobile Widgets Palette. 3. Drag the ScrollableView component to the blank line under the profileView. 58
    • Set up the Status Update detail view 4. Enter “updateView” for the Id 5. Select Include heading 6. Enter the following Details: Label: Update Status Back button label: Back Back button target: mainView 7. 59 Click Finish
    • Get back to the Update Status detail view After setting up the navigation from the mainView, you will find that the Rich Page Editor is not focused on your Update Status page. To regain focus, double-click on the update View in the Mobile Navigation pane on the lower right of Worklight Studio. 60
    • Set up the Update Status detail view 1. Double-click under the Update Status Heading and enter the following text: What are you working on? 2. Find this text in the Source view and add a <br/> tag after it. 3. Find ExpandingTextArea in the Pallete. 4. Drag an ExpandingTextArea to your view after the <br/> tag. 61
    • Set up the Update Status detail view 1. Add id="status" style="width:95%” to the textarea tag that was added. Note: It is important that you drag the component onto your application from the Palette as you did in the last step. Worklight Studio automatically updates the JavaScript statements to include the correct components. If you add a component to your page by just entering code, you will need to update the requires statement in main.js manually. This only needs to be done once for each component type. 2. Find Button in the Dojo Mobile Widgets Pallete and drag it under the textarea. 3. Name the button “Post” 4. Add onClick="updateStatus(document.getElementById('status').value)” to the button tag. 62
    • Set up the Update Status detail view 1. Find Button in the Dojo Mobile Widgets Pallete and drag it after the textarea. 2. Name the button “Post” 3. Add onClick="updateStatus(document.getElement ById('status').value)” to the button tag. 63
    • Link navigation to the Status Update detail Now you need to link from the home page. Just update the code directly this time. 1. Find the <div> in the Source view for the Status Update item in the mainView. 2. Change the # in the moveTo property to “updateView” 64
    • Running the application Before you start building the back end integration, let‟s verify that the application is running so far. 1. Add a table as follows in the profileView <div>. 2. Include id attributes in the second column. You will use those to update the field with data. 65
    • Deploying the application Before you start building the back end integration, let‟s verify that the application is running properly on the development server included in Worklight Studio. 1. Right-click on the application folder under the apps directory in your project. 2. Select Run As – Run on Worklight Development Server. 66
    • Server deployment Worklight Studio will build your application and deploy it to the embedded Worklight server. Once the server is done, you will see a server log similar to the following in the Console view.: 67
    • Launching the Worklight Console 1. Right-click on your project and select Open Worklight Console. 2. The Worklight Console will be displayed in the browser defined in your Eclipse settings. 68
    • Preview the Application You can now click around the application to verify that navigation to and from each screen and your layouts are working properly. 69
    • Worklight Server Adapters Setting up your project in Worklight 70
    • Back End Integration Worklight Adapters:  Defined using simple XML syntax, and easily configured with a JavaScript API. Data is converted to JSON for all adapter types.  HTTP, SQL, JMS, Cast Iron, Node.js adapter types Query  Provides authentication, including single sign on and offline access control Alternative: Conventional XHR requests  Direct REST calls in the mobile browser framework  Useful for independent client apps and third party services, but limits the enterprise benefits above 71 Update data 3 2  A single point of access to back end systems; can aggregate data from several sources  Logging, auditing, and analytics Response SQL Node JMS SOA P CAST IRON REST Worklight 1 Invoke adapter procedure Data/Result as JSON 4
    • Worklight Adapter Call Sequence 72
    • Create a new Worklight Adapter in Worklight Studio 1. 73 Click on the Worklight icon and select Worklight Adapter. 2. Select your Project Name and select an Adapter type of HTTP Adapter.
    • Create a new Worklight Adapter in Worklight Studio 3. 74 Enter an Adapter name and click Finish
    • Worklight Adapter configuration Worklight Studio will create the adapter and open up the related XML file. This file is used to configure connectivity to the back end application and to declare the procedures exposed to applications and other adapters. 75
    • Create a new Worklight Adapter in Worklight Studio 4. Click on Connection Policy 5. Enter the following Details: Protocol: https Domain: greenhouse.lotus.com (or to your Connections server) Port: 6. 76 443 Click Add…
    • Create a new Worklight Adapter in Worklight Studio 7. Select Authentication 8. Click OK. 77
    • Create a new Worklight Adapter in Worklight Studio 9. Enter your User name and Password for the Connections environment. 10. Click Add… Notes:  The “1 error detected” message is expected. We will fix that on the next slide.  We are using a single user account for this session. In production, you normally would use End User authentication. 78
    • Create a new Worklight Adapter in Worklight Studio 11. Select Basic 12. Click OK. 79
    • Create a new Worklight Adapter in Worklight Studio 13. Select Adapter “ConnectionsAPI” on the left. 14. Click Add… 80
    • Create a new Worklight Adapter in Worklight Studio 15. Select Procedure 16. Click OK. 81
    • Create a new Worklight Adapter in Worklight Studio 17. Enter “getActivityStream” for the Name of your procedure. 18. Save and close the ConnectionsAPI.xml file. Notes:  The Connect as setting is used to switch to end user authentication. 82
    • Create a new Worklight Adapter in Worklight Studio 19. Open the ConnectionsAPI-impl.js JavaScript file. All code and a complete Eclipse project for this session are available at http://handly.org/show302 20. At the bottom of the file, add this procedure: function getActivityStream(){ var input = { method : 'get’, returnedContentType : 'xml’, path: '/connections/opensocial/basic/rest/activitystreams/@me/@all/@status?rollup=true&format=atom’ }; return WL.Server.invokeHttp(input); } 21. Save the file. 83
    • Wait a minute! Where did you get that crazy long OpenSocial URL?? Two choices: 1. Read about the Open Social API in the IBM Connections InfoCenter, and try a bunch of different options, or … 2. Cheat and look at the bottom of your Connections page! The link under that “Feed for these entries” is: https://greenhouse.lotus.com/connections/opensocial/basic/rest/activitystreams/@me/@all/@ status?rollup=true&format=atom Look familiar? 84
    • Deploying your Worklight Adapter 1. Right-click on the ConnectionsAPI folder and select Run As – Deploy Worklight Adapter. 2. Wait a few seconds until “Adapter build and deploy finished” appears in the Console view. 85
    • Testing your Worklight Adapter 1. Right-click on the ConnectionsAPI folder and select Run As – Invoke Worklight Adapter. 2. Select the Procedure name getActivityStream 3. Click Run 86
    • Testing your Worklight Adapter – View Results Worklight displays the JSON results from your adapter in the default Eclipse browser. Notes:  Worklight automatically converts the XML returned into JSON, which is easier to parse using JavaScript in your application.  Watch the Console view in Worklight Studio to see any error messages or output logging you included in your adapter.  You can use an external browser by changing the settings in the Eclipse preferences.  Use a browser plug-in, such as JSONView for Chrome, to see the results formatted for easier reading. 87
    • TIP: Using Worklight server logging How to turn on server log output in your Worklight Studio: 1. In Project Explorer, expand the Worklight Development Server and open server.xml 2. Change the Console log level to INFO and save server.xml 3. The server will detect the change and automatically update the the log level. Usage: In your JavaScript adapter, use this logging code: WL.Logger.info(“text”); 88
    • Let’s build some JavaScript 1. Open the core JavaScript file for your app: appsShow302Democommonjsmain.js main.js is called at the bottom of the index.html file and includes the code to initialize the Worklight and Dojo frameworks. For the examples in this session, we are going to put the code to call adapters and write the results to the application pages inside the init procedures. In a production or more complex application, you should use dojo/app or a similar MVC framework or pattern to trigger adapter calls as needed during page transitions and other events. 89
    • Calling the Worklight Adapter 2. 90 Update the ready(function () { section to include the following invokeProcedure function call:
    • Handling the Adapter Response 2. 91 Add the following function to the bottom of main.js:
    • Testing your app At this point, you should have a fully working Activity Stream! Cool tip: In Worklight Studio 6.x, you no longer have to re-build the app to see changes to HTML or client side JavaScript code. (Server adapters still need to be re-deployed after a change) 1. Refresh your browser window where you were previewing the application. 2. Click the Activity Stream choice. 3. You should see your Connections Activity Stream in the app! 92
    • Adding the IBM Social Business Toolkit to your app Weren‟t we going to the playground? The SDK download includes everything you need to get started, including docs, distribution files, samples with source code, and a Tomcat server. 1. Go to http://ibmsbt.openntf.org and download the SDK. 2. Expand the SDK .zip file into a directory. 93
    • Copy the SBT JAR files to Worklight Studio The SDK download includes everything you need to get started, including docs, distribution files, samples with source code, and a Tomcat server. 1. Copy the files from the SBTSDKredistjar directory to the server/lib directory in your application project in Worklight Studio. 2. You will see the server console update as Worklight Studio detects the new file and automatically deploys them to the embedded development server. 94
    • What you won’t do… A few of the first steps in the SBT deployment documentation are to edit the sbt.properties and managed-beans.xml configuration files. Unfortunately, the embedded WebSphere Liberty profile server in Worklight Studio does not include the new managed beans feature that was recently added to the Liberty profile in WebSphere 8.5.5. Oops. No worries – we have a solution!  We can call Java classes from our Worklight Server Adapters to manually create a Connections endpoint, authenticate with the Connections server, and set up the SBT services to support our needs. 95
    • Create a new Worklight Adapter in Worklight Studio Add the new procedures to your adapter configuration. 1. Open ConnectionsAPI.xml again. 2. Select Adapter “ConnectionsAPI” on the left. 3. Click Add… 4. Add a getProfileName procedure. 5. Click Add… 6. Add a updateStatus procedure. 7. Save the file. 96
    • Create a new Worklight Adapter in Worklight Studio 1. 97 Open the ConnectionsAPI-impl.js JavaScript file.
    • Calling the Worklight Adapter 2. 98 Add the getProfileName function (change the user/password to match your account):
    • Deploying your Worklight Adapter (again) 1. Right-click on the ConnectionsAPI folder and select Run As – Deploy Worklight Adapter. 2. Wait a few seconds until “Adapter build and deploy finished” appears in the Console view. 99
    • Testing your Worklight Adapter 1. Right-click on the ConnectionsAPI folder and select Run As – Invoke Worklight Adapter. 2. Select the Procedure name getProfileName 3. Click Run 100
    • Testing your Worklight Adapter – View Results Worklight displays the JSON results from your adapter in the default Eclipse browser. Notes:  IBM Greenhouse will let you set a telephone number, but clears the value fairly quickly for privacy purposes. For testing, you may need to set the value just before running your adapter or application. 101
    • Add the getProfileName call to main.js 1. 102 Open the core JavaScript file for your app: appsShow302Democommonjsmain.js
    • Calling the Worklight Adapter 2. 103 Update the ready(function () { section to include the following invokeProcedure function call, just after the previous invokeProcedure call you created:
    • Testing the Profile page At this point, you should have a fully working Profile page! 1. Refresh your browser window where you were previewing the application. 2. Click the Profile choice. 3. You should see your Profile in the app! 104
    • Now, let’s update some data in Connections! 1. 105 Open the ConnectionsAPI-impl.js JavaScript file.
    • Calling the Worklight Adapter 2. 106 Add the updateStatus function (change the user/password to match your account):
    • Deploying your Worklight Adapter (again) 1. Right-click on the ConnectionsAPI folder and select Run As – Deploy Worklight Adapter. 2. Wait a few seconds until “Adapter build and deploy finished” appears in the Console view. 107
    • Testing your Worklight Adapter 1. Right-click on the ConnectionsAPI folder and select Run As – Invoke Worklight Adapter. 2. Select the Procedure name updateStatus 3. Enter a status message to post to your Connections status. 4. Consider that message carefully! We set SELF as the privacy scope for our message, but do understand that you are posting to a live system. 5. Click Run 108
    • Testing your Worklight Adapter – View Results Worklight displays the JSON results from your adapter in the default Eclipse browser. You can also see the result in Connections: IMPORTANT:  If you refresh this result page, it will trigger a new call to the Worklight Adapter. That will post a new update to Connections and show you the results. 109
    • Add the updateStatus call to main.js 1. 110 Open the core JavaScript file for your app: appsShow302Democommonjsmain.js
    • Calling the Worklight Adapter 2. 111 Add the updateStatus function to the bottom of main.js and save the file. This function is called from the onclick event on the button on the Update Status page.
    • Testing the Status Update page At this point, you can now update Connections. 1. Refresh your browser window where you were previewing the application. 2. Click the Status Update choice. 3. Enter a status and click Post 4. You will get a Success message if your update was posted. 112
    • Checking the result using our app We can check the Connections status page to confirm the post, but we now have another way. 1. Refresh your browser window where you were previewing the application. 2. Click the Activity Stream choice. 3. Your test posts are displayed. 113
    • Now it’s your turn … GO TRY THIS AT HOME! 114
    • Any Questions? 115
    • Additional Resources  Slides, code, and resources for this session http://handly.org/show302  DeveloperWorks (tutorials, articles, blogs, free Worklight Studio) http://www.ibm.com/developerworks/mobile http://www.ibm.com/developerworks/mobile/worklight https://www.ibmdw.net/social  IBM Worklight InfoCenter (a very good reference!) http://pic.dhe.ibm.com/infocenter/wrklight/v6r1m0  Ask and answer questions on Stack Overflow http://stackoverflow.com/questions/tagged/ibmsbt http://stackoverflow.com/questions/tagged/worklight  Download the SDK http://ibmsbt.openntf.org  @handly, @ibmsbt on Twitter 116
    • Related Sessions  CUST118 – MLB: Fostering a Collaborative Approach to Conduct Baseball Business Pete Murphy, Baseball Office of the Commissioner; Smriti Kapuria, Prolifics Wed 10:00 am, Swan Mockingbird 1 & 2  JMP103 – Extending Your Application Arsenal With OpenSocial Yun Zhi Lin, IBM China Investment Company Limited; Ryan Baxter, IBM Sun, 26/Jan 08:00 AM - 10:00 AM, Dolphin S. Hem III  BOF203 – Social Application Development Mark Wallace, IBM Mon, 27/Jan 06:15 PM - 07:15 PM, Swan Parrot 1  KEY108 – IBM Collaboration Solutions Application Development Strategy Philippe Riand, IBM; Kramer Reeves, IBM; Mikael Orn, IBM Tue, 28/Jan 11:15 AM - 12:15 PM, Dolphin N. Hem A-D  AD101 – Extending IBM SmartCloud Applications in 30 Minutes Michael Blackstock, IBM Tue, 28/Jan 01:30 PM - 02:30 PM, Dolphin S. Hem I  AD301 – What's New on the IBM Social Business  AD501 – IBM Worklight for IBM Domino Toolkit Version 2.0 Developers Mark Wallace, IBM Mon, 27/Jan 02:15 PM - 03:15 PM, Dolphin S. Hem IV-V Mat Newman, IBM Tue, 28/Jan 04:15 PM - 05:15 PM Dolphin N. Hem A-C and Wed, 29/Jan 03:00 PM - 04:00 PM Dolphin N. Hem E  AD304 – The Power of Collaborating IBM Domino,  AD206 – Build Apps Rapidly by Leveraging IBM Connections and IBM Worklight Services from IBM Collaboration Solutions Jaya Nampalli, IBM; Leslie Hans, IBM Mon, 27/Jan 03:45 PM - 04:45 PM, Swan Mockingbird 1 & 2 117 Henning Schmidt, hedersoft GmbH; Niklas Heidloff, IBM Wed, 29/Jan 05:30 PM - 06:30 PM, Dolphin S. Hem III
    •  Access Connect Online to complete your session surveys using any: – Web or mobile browser – Connect Online kiosk onsite  Then … Go try this at home! 118
    • Acknowledgements and Disclaimers 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. © Copyright IBM Corporation 2014. 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, IBM WebSphere, IBM Worklight, IBM Connections, IBM Social Business Toolkit, IBM Greenhouse, IBM Mobile Test Workbench, and IBM Cast Iron 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  Eclipse is a trademark of the Eclipse Foundation, Inc.  Apache Tomcat and Tomcat are trademarks of the Apache Software Foundation  Other company, product, or service names may be trademarks or service marks of others. 119