Portal at the Speed of Light

BP407 Portal at the Speed of Light: Techniques for IBM Worklight Integration

© 2013 IBM Corporation

Handly Cameron | Technology ManagerLaks Sundararajan | Solution Architect

Who We Are� Handly Cameron

─ Agile, Developer, Architect, Photographer, Father─ @handly, handly.org─ [email protected]

Laks Sundararajan

2 © 2013 IBM Corporation

� Laks Sundararajan─ Mobile Evangelist, Developer, Architect, Golfer─ @lakssundar─ [email protected]

Agenda

� Multichannel web sites and applications

� Quick overview of IBM® Worklight®

� Approaches for building multi-channel applications


� Best Practices Speed Round

� Q & A

Agenda


� Quick overview of Worklight




� Q & A

Consumers do not see “channels”

5

Consumers do not see “channels”

Call Center

Create Order Check StatusCancel Order

Initiate/Track Return

Schedule DeliveryChange

Order

Schedule Store Pickup

Research Product

Create Order Check StatusCancel Order

Initiate/Track Return

Initiate/Track

Schedule Delivery

Change Order


Research ProductMobile

Check StatusSchedule Change Schedule Research

6

Create Order Check StatusCancel Order Initiate/Track

Return

Schedule DeliveryChange

OrderPickupResearch

ProductStore

Initiate/Track ReturnCreate Order Check Status

Cancel OrderSchedule Delivery

Change Order


Research Product

Web

… they want a consistent experience everywhere!

You need a way to deliver that experience

Multi-channel Sites and Applications

�IBM® WebSphere® Portal®

�IBM Web Content Manager®

�IBM Mobile Foundation®

7

�IBM Mobile Foundation®– IBM Worklight®– IBM Cast Iron®– IBM Mobile Endpoint Manager®

�IBM Web Experience Factory®

�IBM WebSphere MQ®

Agenda


� Quick overview of IBM Worklight




� Q & A

Worklight ServerUnified push notifications, runtime skins, version management, security, integration and delivery

Worklight StudioEclipse based IDE including design tools, code reuse, and per-device optimization

IBM Worklight – What is it?

Worklight ConsoleA web-based console for real-time analytics and control of your mobile apps and infrastructure

Worklight Runtime ComponentsExtensive libraries and client APIs that expose and interface with native device functionality

9

Extensive libraries and client APIs that expose and interface with native device functionality and the Worklight server

• Cross-Platform Compatibility Layer

• Server Integration Framework

• Encrypted Storage

Device Runtime Components

• Encrypted Storage

• Offline Authentication

• Runtime Skinning

• Statistics and Diagnostics Reporting

• Apache Cordova (PhoneGap)

10

Native Shell

Pre-packaged resources

1 Download

App Store

2 Transfer

1. Web resources initially packaged with the app to ensure first offline availability

2. Web resources transferred to app's cache storage

3. App checks for updates

1. Web resources initially packaged with the app to ensure first offline availability

2. Web resources transferred to app's cache storage

3. App checks for updates

Application Updates

11

Worklight Server

4 Update web resource

Web resources

Cached resources

2 Transfer

3 Check for updates

3. App checks for updates • On startup• On return to foreground

4. Updated web resources downloaded when necessary

3. App checks for updates • On startup• On return to foreground

4. Updated web resources downloaded when necessary

Multichannel Feature Pack for Web Experience Factory 8.0

Key Features:

� Multichannel and Responsive UI support:– New Layouts for the Data Layout builder– New Responsive Web Design (RWD) themes

including compatibility with CTC4 and WebSphere Portal Mobile themes

Available now as a download from the Solutions Catalog

12

WebSphere Portal Mobile themes– New wizard making it easy to include this new

support

� IBM Worklight Camera Builder– Easily add hybrid camera capabilities to a

model

Web Experience FactoryApplications now support new out of the box responsive theme

Out of the box capabilities including CTC4 and and stand-alone Responsive Web Design themes

Key benefits include:•Faster and easier to build solution•Fits in with other CTC4 based solutions•Supports multiple channels including desktop browsers, smartphones and tablets13

New models and wizards reference new Feature pack s tyles and layouts

Select from CTC4 compatible layout templates to easily build RWD application portlets

14

WEF integration with WorklightNew Camera Builder

• Easily support multiple channels with point and click development

• Minimal coding/learning curve required

IBM Web Experiences - © 2012 IBM Corporation

Easily add native device capabilities to mobile web applications.

JMP306: Build Hybrid Multi-Channel Apps Using IBM Worklight, WebSphere Portal and Web Experience Factory15

Agenda


� Quick overview of IBM Worklight




� Q & A

Things to consider

� Native device capabilities (camera, contacts, location, etc.)

� Presence in a device app store

� Offline use

� Cross-channel authentication


� Want to reuse application infrastructure and design

� Content management

� Role based personalization

Approaches for building multi-channel applications

1. Standalone Portal: Responsive Web Design

2. Standalone Worklight: Mobile Application

3. Using Portal to host Worklight application pages


3. Using Portal to host Worklight application pages

4. Personalized content driven by Web Content Manager

5. Integration with back end systems

Approach 1: Standalone Portal: Responsive Web Design

Standard WebSphere Portal deployment.

When to use

� Existing WebSphere Portal infrastructureWebSphere

Connectors

DOJO Portlet


� Limited/ No Offline support is required

� Limited/No support for native mobile services is required

� AppStore presence is not required

WebSpherePortal

Connectors

Responsive Themes

Navigation

DOJO Portlet

WebSphere

Connectors

Approach 1: Standalone Portal: Responsive Web Design

Mobile Browser

• Application HTML• Personalized content

ServersServers

Back End Systems

DOJO Portlet

WebSpherePortal

Connectors

20

Responsive Themes

Browser cache (HTML5)

• Access Control

• Form submission

Back End Systems

Navigation

DOJO Portlet

Responsive Design Themes� More than just allowing RWD

� Portal supports device classes to enable smarter rendering on the server side (themes, content and portlets)

21

Updated Page Templates in CTC 4

22

With Modern, Attractive Designs

23

That are Responsive

25

And since it's all based on WCM and Portal's common theme, of course it supports all your devices without any additional work.

26

Approach 2: Standalone Worklight Deployment

Standard IBM Worklight deployment.

When to use

� No existing WebSphere Portal

� No personalization or integration with existing web sites

IBM Worklight Server

Service Adapters


existing web sites

� App store presence

� Push notifications

� Sync JSON data for offline use

� Automatic JSON data conversion

Application Mgt

Service Adapters

Data Synchronization

Unified Push Engine

ServersServers

Worklight App


• Core application HTML IBM Worklight Server

Service Adapters

Approach 2: Standalone Worklight Deployment

Back End Systems

28

Cached resources

• Authentication• Adapter requests

Application Mgt

Service Adapters

Data Synchronization

Unified Push Engine

• HTML updates• JSON data• Push Notifications/SMS

Back End Systems

Approach 3: Using Portal to host Worklight application pages

WebSphere Portal and Worklight

When to use

� Existing Portal infrastructure and apps

� Portal provides multi-channel capabilities

IBM WorklightServer

Single Sign On

Adapters


� App store presence required

� Push notifications

� Support for native mobile services

� Limited support for content management within mobile application is required

ConnectorsWebSphere

Portal

Worklight Portlet

Mobile JS resources

Single Sign On

Managed web resources

IBM WorklightServer

ServersServers

Worklight App


Single Sign On

Adapters

• Worklight application shell• Push Notifications/SMS

Approach 3: Using Portal to host application pages

• Adapter requests

Back End Systems

ConnectorsWebSphere

Portal

Worklight Portlet

30

Cached resources

Mobile JS resources

Single Sign On

• Authentication

• Application HTML & JS• JSON data

Managed web resources

Back End Systems

Technique 1: Override initial Worklight WebView load1. Change iOS whitelist: \iphone\native\cordova.plist

<key>OpenAllWhitelistURLsInWebView</key>

<false/>

<key>ExternalHosts</key>

<array>

<string>*</string>

</array>


</array>

2. Change Android whitelist: \android\native\res\xml\config.xml

<access origin="http://myportal.com"/>

3. Change Request load in didFinishLaunchingWithOptions:\iphone\native\Classes\appName.m

(See handly.org for details)

Technique 1: Override initial Worklight WebView load4. Update protocol, host, port, and wlServerContext in:

\iphone\native\Resources\Worklight.plist

<key>protocol</key> <string>http</string>

<key>host</key> <string>myportal.com</string>

<key>port</key> <string>10039</string>

<key>wlServerContext</key> <string>/wps/portal/apphome</string>

5. Change loadURL in: \android\native\src\com\appName\appName.java


5. Change loadURL in: \android\native\src\com\appName\appName.java

public class appName extends WLDroidGap {

@Override

public void onCreate(Bundle savedInstanceState) {

super .onCreate(savedInstanceState);

//DeviceAuthManager.getInstance().setProvisioningDelegate(<Use default ProvisioningDelegateImplclass or replace with your IProvisioningDelegate implementation>);

super .loadUrl( "http://myportal.com/wps/portal/apphome" );

}

}

Technique 2: Use JavaScript to load a Portal-based page1. User actions calls a viewController

<li data-dojo-type="dojox.mobile.ListItem” data-dojo-props='clickable:true, moveTo:"events",icon:"images/event.png"' onclick="loadEventContent”>Events</li>

2. viewController calls openExternalView and loads a Dojo containervar eventsViewController = ViewController.getInstance() ;loadEventContent = function (e){eventsViewController.openExternalView({url : "http://myportal.com/wps/portal/mobileportlet",transition : "slide"


transition : "slide"}, registry.byId(”events").containerNode);};

3. Container displays your Portal application controls and content

<div id="events" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props='selected:false'>

<h1 data-dojo-type="dojox.mobile.Heading” data-dojo-props="label:'Events',fixed:'top',back:'Back',moveTo:'mainView'"></h1>

</div>

Approach 4: Personalized Content driven by WCM

Web Content Manager and Worklight

When to use

� Similar to Approach 3, add WCM

� You want to to place information into your application using a publishing workflow

IBM WorklightServer

Single Sign On

Adapters


application using a publishing workflow without causing an app update.

� You have special offers that you want to present to specific users based on their account or other attributes.

Connectors

WebSpherePortal &

Web ContentManager

WCM Rendering

ContentTemplates

Single Sign On

WCM Authoring

IBM WorklightServer

ServersServers

Worklight App


Single Sign On

Adapters

• Worklight application shell• Push Notifications/SMS

Approach 4: Personalized Content driven by WCM

• Adapter requests

Back End Systems

Connectors

WebSpherePortal &

Web ContentManager

WCM Rendering

35

Cached resources

ContentTemplates

Single Sign On

• Authentication

• Targeted Content

WCM Authoring

Back End Systems

Content Targeting (aka, Personalization)

Additional Personalization Contexts– Our personalization system is quite powerful and can be based on

just about any context you wish.• However, extending personalization to include additional

context requires programming– There are a number of common contexts that weren't previously

included out of the box, but now they are• Geo-location Object – target a user based on physical location• Geo-location Object – target a user based on physical location• Referrer object – where did this user come from, what search terms

go them here• Device Class – desktop, smart phone, or tablet

Inline Content Targeting– exposes targeting rules directly to Business

Users/Authors

36

Demo


IBM Mobile Foundation– Integration with through Cast-Iron– Leverage existing BPM systems

When to use

� Use this to extend the previous Approaches

Approach 5: Integration with back end systems

Wor

klig

ht T

IP

WebSphereCast Iron

Con

nect

ors


� Existing SOA and cloud deployments

� Drive push notifications from backend applications N

otifi

catio

ns

Mes

sage

Flo

wsWebSphere

MQ

Message Broker ServiceR

ES

T

Wor

klig

ht T

IP

Cas

t Iro

n A

dapt

ers

IBM

ServersServers

Worklight App


Approach 5: Integration with back end systems

WebSphereCast Iron

Con

nect

ors

• Core app HTML

• HTML

Back End Systems

Not

ifica

tions

MQ

Bro

ker

Ada

pter

s

Mes

sage

Flo

ws

IBM Worklight

Server

WebSphereMQ

39

Cached resources

Message Broker ServiceR

ES

T• JSON data• Adapter

requests

• HTML updates

• JSON data• Push

Notification

Back End Systems

Summary of Approaches

NeedPortal RWD Worklight Only

Worklight + Portal

Worklight + WCM

Worklight + BPM

Existing Portal✔✔✔✔ ✔✔✔✔ ✔✔✔✔

Native Features✔✔✔✔ ✔✔✔✔ ✔✔✔✔ ✔✔✔✔

Offline✔✔✔✔ ✔✔✔✔ ✔✔✔✔ ✔✔✔✔

40

Offline✔✔✔✔ ✔✔✔✔ ✔✔✔✔ ✔✔✔✔

App Store presence ✔✔✔✔ ✔✔✔✔ ✔✔✔✔ ✔✔✔✔

Content Management ✔✔✔✔

Personalization✔✔✔✔ ✔✔✔✔ ✔✔✔✔

Reference Architecture

41

Agenda


� Quick overview of Worklight




� Q & A

Best Practices Speed Round

� Application Design Gotchas

� Single Sign On

� New mobile data store in Worklight 5.0.5


� Application Lifecycle Management

Speed Round: Application Design Gotchas

� Don’t forget the URL whitelists

� Be careful of external links in your Portal-driven pages - you may lose navigation

� Worklight 5.0.5 does not support the iOS WebView method in the documentation and DeveloperWorks article. See handly.org for a solution!


and DeveloperWorks article. See handly.org for a solution!

Speed Round: Single Sign On

� Set up LTPAToken SSO between the Worklight Liberty server and Portal

� Requires updates to:─ Worklight server─ Portal server─ Your Application


Details on DeveloperWorks at:

http://www.ibm.com/developerworks/mobile/library/mo-aim1211-worklight-portal-3/index.html(Search for “Worklight Portal SSO”)

Speed Round: Data synchronization with JSONStore

� New in Worklight 5.0.5 (Dec ‘12)

� Maintain a local copy of data

� Data is stored as Documents in Collections

Internal Storage

Customer Collection User Settings Collection

Document:

{_id: 1,json:{background: “blue”}}

Document:

{_id: 1,json:{name: “carlos”}}


� Indexed Search Fields and Queries

� Push local updates on request

� Password-based encryption

Internal Storage

Customer Collection

Search Field: name (string)

Document:

{_id: 1,json:{name: “carlos”}}

“carlos”

Document:

{_id: 1,json:{name: “tim”}}

“tim”

Speed Round: Application Lifecycle Management

� Application design, storyboarding, wireframe UI design

� Team collaboration and code control

� Automated, distributed team builds and integration


� “Mobile device-cloud” service integration for on-device testing

Product Bundle: IBM Mobile Development Lifecycle Solution

─http://www-01.ibm.com/software/rational/mobile/products

Questions?


Additional Resources

� DeveloperWorks (forums, articles, blogs, free Worklight Studio)http://www.ibm.com/developerworks/mobile

� IBM Worklight InfoCenter (very good reference!)http://pic.dhe.ibm.com/infocenter/wrklight/v5r0m5


� New IBM Redbook: Developing Exceptional Multi-Channel Web Experienceshttp://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=IBM%20Redbooks

� Prolifics’ Mobile Bloghttp://expert-tech.blogspot.com/search/label/Mobile

� @handly and @lakssundar on Twitter

Related Sessions

� JMP306: Build Hybrid Multichannel Apps Using IBM Worklight, IBM WebSphere Portal, and Web Experience Factory

� INV301: Understanding the Mobile Features and Options of the IBM Web Experience Platform

� AD303: What's New? Creating Mobile Web Experiences with IBM Web Experience Factory and IBM Worklight


Experience Factory and IBM Worklight

� AD304: Create Multichannel Web Sites with Rational Application Developer, IBM WebSphere Portal, & Worklight

� AD403: Engaging Mobile Apps with IBM Social Business Solutions and IBM WorklightWednesday, 11:15 am, Swan SW 9 - 10

� CUST125: Horizon Case Study: Leveraging IBM WebSphere Portal for the Healthcare IndustryThursday, 8:30 am, Swan Toucan 1 & 2

Legal disclaimer© IBM Corporation 2013. All Rights Reserved.

The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication 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.

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. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. 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.


Portal at the Speed of Light

Technology

Transcript of Portal at the Speed of Light