In this session, you'll learn techniques for extending your IBM Websphere Portal to mobile applications across iOS and Android devices. Experts from our User Experience team will demonstrate how to easily build IBM Worklight applications that integrate with personalization and web content features provided by Portal. You'll see how to use tools such as IBM Web Experience Factory and IBM Web Content Manager and how to leverage capabilities such as Portlet Services and mobile themes to develop a mobile application running on IBM Worklight in both online and offline modes. At the end of this session, you will be ready to take advantage of the IBM Worklight entitlement provided by IBM to take your Portal to the mobile world!
6. Consumers do not see “channels”
Research Schedule Check Status Schedule Initiate/Track
Call Create Order Change Cancel Order Store Pickup
Product Delivery Return
Center Order
Research Change Schedule Check Status Schedule Initiate/Track
Mobile Product Create Order Order Delivery Cancel Order Store Pickup Return
Research Change Schedule Check Status Schedule Initiate/Track
Web Create Order Delivery Cancel Order Store Pickup
Product Order Return
Research Change Schedule Check Status
Store Create Order Cancel Order Pickup Initiate/Track
Product Order Delivery
Return
… they want a consistent experience everywhere!
6
7. You need a way to deliver that experience
Multi-channel Sites and Applications
IBM® WebSphere® Portal®
IBM Web Content Manager®
IBM Mobile Foundation®
– IBM Worklight®
– IBM Cast Iron®
– IBM Mobile Endpoint Manager®
IBM Web Experience Factory®
IBM WebSphere MQ®
7
9. IBM Worklight – What is it?
Worklight Studio
Eclipse based IDE including design tools, code reuse, and per-
device optimization
Worklight Server
Unified push notifications, runtime skins, version management,
security, integration and delivery
Worklight Console
A web-based console for real-time analytics and control of your
mobile apps and infrastructure
Worklight Runtime Components
Extensive libraries and client APIs that expose and interface
with native device functionality
9
10. Device Runtime Components
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
• Offline Authentication
• Runtime Skinning
• Statistics and Diagnostics Reporting
• Apache Cordova (PhoneGap)
10
11. Application Updates
1. Web resources initially
Native Shell packaged with the app to
1 Download
ensure first offline availability
Pre-packaged
resources 2. Web resources transferred to
App Store app's cache storage
2 Transfer 3. App checks for updates
• On startup
3 Check for
updates • On return to foreground
Cached 4. Updated web resources
Worklight Web resources downloaded when
Server resources necessary
4 Update web
resource
11
12. Multichannel Feature Pack for Web Experience Factory 8.0
Available now as a download from the Solutions Catalog
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
– New wizard making it easy to include this new
support
IBM Worklight Camera Builder
– Easily add hybrid camera capabilities to a
model
12
13. Web Experience Factory
Applications 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 tablets
13
14. New models and wizards reference new Feature pack styles and
layouts
Select from CTC4
compatible
layout
templates to
easily build
RWD
application
portlets
14
20. Approach 1: Standalone Portal: Responsive Web Design
Servers
Mobile Browser
Back End Systems
• Application HTML
DOJO Portlet
• Personalized content
Connectors
WebSphere
• Access Control Portal
Browser cache
(HTML5) Navigation
Responsive
• Form submission Themes
20
21. 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
28. Approach 2: Standalone Worklight Deployment
Servers
Worklight App IBM Worklight Server
• Core application HTML
Back End Systems
Service Adapters
Pre-packaged
resources
• HTML updates Application Mgt
• JSON data
Data
• Push Notifications/SMS
Synchronization
Cached Unified Push
resources Engine
• Authentication
• Adapter requests
28
30. Approach 3: Using Portal to host application pages
Servers
• Worklight application shell
• Push Notifications/SMS
Worklight App
Adapters
IBM Worklight
Back End Systems
Server
• Adapter requests
Pre-packaged
resources
Single Sign On
• Application HTML & JS
Worklight Portlet
• JSON data
WebSphere
Connectors
Cached Portal
resources
• Authentication
Managed web
resources
Mobile JS
resources
30
35. Approach 4: Personalized Content driven by WCM
Servers
• Worklight application shell
• Push Notifications/SMS
Worklight App
Adapters
IBM Worklight
Back End Systems
Server
• Adapter requests
Pre-packaged
resources
Single Sign On
WebSphere
WCM Rendering
• Targeted Content Portal &
Connectors
Cached Web Content
resources Manager
• Authentication
WCM
Authoring
Content
Templates
35
36. 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
• 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
39. Approach 5: Integration with back end systems
Servers
Worklight TIP
Connectors
Worklight App
Cast Iron
Adapters
• Core app
HTML WebSphere
Cast Iron
Back End Systems
Pre-packaged
resources
IBM
• HTML Worklight
updates
Notifications
Server
• JSON data
Message Flows
• Push WebSphere
MQ
MQ Broker
Notification
Adapters
Cached
resources
• JSON data Message
REST
• Adapter Broker
requests Service
39
40. Summary of Approaches
Worklight + Worklight + Worklight +
Portal RWD Worklight Only
Need Portal WCM BPM
Existing Portal ✔ ✔ ✔
Native Features ✔ ✔ ✔ ✔
Offline ✔ ✔ ✔ ✔
App Store
presence ✔ ✔ ✔ ✔
Content
Management ✔
Personalization ✔ ✔ ✔
40
Good morning. I am Handly Cameron, an IBM Champion and Technology Manager for Prolifics for our social and mobile solutions. I have been working with Lotus technologies since Notes 3.0 in 1993 and have worked extensively with Portal, WebSphere, and mobile technologies. I’m Laks Sundararajan, IBM Champion and Solution Architect @ Prolifics. I have extensive experience in WebSphere and mobile technologies and have executed several large scale engagements.
Ok, What do we have in store for you today. We will start with a quick overview of Multi channel websites, applications and Worklight. You might have heard about this from other sessions so we intend to keep it short. After that, we will discuss various approaches for building multi-channel applications. We intend to showcase 5 different approaches today and summarize our discussions. Time permitting, we would do a speed round and conclude with a Q&A session.
First, let’s talk about the need for sites and applications that provide access across channels. How many people here are carrying 3 or more mobile devices right now? See! There are people in this room who have more devices than they have hands!
Many customers, including myself, now work across devices. I work with my iPad open next to my Mac and routinely interact with the same applications across my phone, iPad, and laptop while at my desk. I even know people who have started using their iPad as their main screen and an iPad mini for their interaction I expect that the applications and businesses I work with will allow me to use the appropriate user experience for each interaction, whether it is through a mobile Portal site, through a mobile device, or even through business interactions triggered from telemetry or geolocation updates. I also want these applications to be in sync, all the time. Some examples of this might include: Ordering products on the web and tracking the delivery on your phone Or the opposite: Read reviews and add to cart while at the store, complete the order when you get home You might check off or approve workflow items on your mobile, but do deeper content creation and project management on your laptop.
You need a way to provide a consistent integrated web experience across multiple channels (desktop browser, smartphones, tablets, etc..) while providing an experience that takes full advantage of the user’s device and its ecosystem. IBM provides many tools to deliver this experience. The core of our presentation is to help you understand how to leverage all of these tools together.
Poll: Who Worklight overall Worked with Worklight Studio Built apps with Web Experience Factory How many of you have built a mobile web site or application?
Worklight Studio is a free development environment that includes visual design tools for Dojo Mobile and JQuery, code, and an embedded test server environment. It also hooks into the device SDKs such as Anrdoid and Apple’s xCode to provide device emulation and native coding capabilities. Let’s Take a Look The Worklight server provides application services, including version management, data synchronization and integration, and a unified push notification system. Laks will go into detail on these later in our talk. One area we won’t cover much is that the server can also provide an internal Enterprise App Store to allow you to publish and manage applications within your organization. Included in the Worklight server (and in your Studio test environment) is the Worklight Console. Show the Console , mention application updates, version control, and locking. The final component of Worklight is the runtime application shell. Let’s look at that in more detail …
On the device, Worklight runs as an application shell. This shell manages application updates and communication with the server. Your application itself runs as an HTML5 page in an embedded webkit browser with authentication, offline data storage and skinning capabilities. Included in the shell is the Apache Cordova (aka PhoneGap) extension library that gives you easy access to native device features such as the camera, GPS, contacts, etc.
Let’s talk about how the application updates work. Once you have developed your application, you will publish it to an app store, to an internal OTA site or enterprise app store, or push it out using MDM tools. The application will include the Worklight shell and all HTML, Javascript, images, and other resources you have built into the application. When the application first starts, it will load these resources into the internal cache, then check back with the Worklight server to see if there are any updates to load. Finally, the application will launch and run your application. This process is a key to how we will integrate Worklight and Portal as we can also load HTML pages and resources from other sources such as Portal or Web Content Manager.
You need a way to provide a consistent integrated web experience across multiple channels (desktop browser, smartphones, tablets, etc..) while providing an experience that takes full advantage of the user’s device and its ecosystem. IBM provides many tools to deliver this experience. The core of our presentation is to help you understand how to leverage all of these tools together.
HANDOVER TO LAKS
Thanks Handly. Now that we have a good overview of Multi channel applications and Worklight what are the things to consider before we choose an approach with IBM Worklight? The most common questions are – Does my business mandate an App in AppStore? Do I need to provide Offline access to consumers? Generally, we have seen that a website caters to the entire business while a mobile application focuses on a specific area. For example, GEICO has a mobile application for Auto insurance and they provide a nice feature where the ID card could be stored offline to device so that it could be accessed in a disconnected mode. In future, I wouldn’t be surprised if there is a feature called ‘Report an Accident’ that lets you take a picture, add geo co-ordinates and file a report at an accident site. The other question that keeps popping up is reusability. How could I leverage existing infrastructure to cater to mobile world? Could I reuse my content across multichannel devices and personalize markup based on individual device? Could I use the same authentication mechanism across devices? The answer in one word is ‘Yes’ it is very much possible. We will discuss each of these points and summarize our findings as we discuss techniques for integrating Worklight.
Now that we have a fair idea of the things that are discussed before working on a mobile app lets get into approaches we have in place for integrating IBM Worklight with Portal. The first couple of approaches are Standalone ones – How to leverage existing Portal infrastructure to cater to multi-channel world and how to leverage Worklight to build a Mobile application. Next we talk about how Worklight and Portal could co-exist i.e Worklight could leverage existing Portal infrastructure to host application pages or Worklight could leverage existing Portal to host personalized content. Finally, we talk about how Worklight could integrate with backend systems – Cast-iron and MQ
Responsive Web Design – Off late responsive web design has been gaining lot of traction in Non-App world. It could also referred as ‘Design Once Run Everywhere’ – the ability to resize content across devices by employing flexible layouts would be the way to go in such a scenario. Websites like Boston Globe etc. The first approach is a pretty simple one. Let us say Portal infrastructure is present and requirement is to provide multi channel capabilities. However, the nature of business is such that there is no requirement to have an AppStore presence nor is the need to provide offline capabilities except for browser caching. In such a situation, WebSphere Portal could leverage on Responsive themes and Web 2.0 capabilities to cater to multiple channels through single code base.
Approach1: Responsive Web Design – Works across devices We add the missing piece here (Mobile/Tablet/Desktop browser) and show various interactions with Portal and Backend systems. A number of customers whose business requirements do not mandate and AppStore presence or native capabilities have taken this approach and implemented it successfully. Jyske Bank
Response Theme is OOB in Portal 8.0.0.1 – you have seen it before – available in download – quick walkthrough
Enhanced experience
Multiple columns
Rich content from WCM
Inline editing
Multichannel view
The second approach is about using IBM Worklight to provide an end-end mobile solution. If the business requirement mandates that an AppStore presence is required along expected lines of Push Notifications, Offline storage etc. and no WebSphere Portal currently exists WL could help develop device independent apps targeting leading mobile platforms. WL provides adapters that helps talk to backend systems and Unified Push notification API provides an abstraction layer for all supported platforms. WL – Unified Push API Unified APU for tab bars Adapters Authentication
Approach 2: Standalone Worklight Deployment The detailed architecture diagram is shown here. WL App has a copy of HTML resources and as explained before changes could be pushed from WL server to the App through prepackaged updates without going through an AppStore update process. WL also provides necessary infrastructure to connect to backend systems and massage the output data to required formats. JSON Synchronization Marchon example No portal, no worries – WL addresses all your mobile needs!
Approach 3: Using Portal to host Worklight application pages How do we get the best of both solutions. U have Portal, U have WL – Can both work together?
Approach 3: Using Portal to host Worklight application pages How do we get the best of both solutions. U have Portal, U have WL – Can both work together?
Approach 3: Using Portal to host Worklight application pages How do we get the best of both solutions. U have Portal, U have WL – Can both work together?
Approach 3: Using Portal to host Worklight application pages How do we get the best of both solutions. U have Portal, U have WL – Can both work together?
Approach 4: Personalized Content driven by WCM Benefits of WCM: Business users drive content Content leverages the personalization engine in USE WCM TO ENGAGE DYNAMIC CONTENT FROM BUSINESS USERS Business values – Site is content heavy. News site. eCommerce promotion site ----- This approach is slightly different from Approach 3 in the sense that it is content heavy. If Portal is part of existing infrastructure as before and the site is content heavy with lots of personalization and business rules – then WL makes it easier to provide a mobile presence by integrating with Portal as before. Some examples of content heavy sites could be news sites or ecommerce applications that provide newsletter functionality, promotions etc.
Approach 4: Personalized Content driven by WCM Mobile templates? Need some research --- The architecture is similar to Approach 3 with the exception that WL integrates with Web Content Manager and renders content generated by templates. Once responsive design is employed by portal, content generated by templates would cater to multichannel world and WL would provide app-specific features to provide an overall rounded mobile experience.
Shopping mall example
Looks like we have time, let’s do a speed round
Examples; Cast Iron is really cool Push notifications from MQ Direct calls from the app to RESTs (need to whitelist) Complete ecosystem Ties into the overall solution.
Here is everything we talked about. Pick what works best and expand later. Transition to Laks reference architecture. How does it all fit together.
Now that we have seen the 5 approaches what does it take to put them all together as a reference architecture. This is a simple illustration of how it would look like if we have WL talking to Portal and WCM. As you can see, the multi channel capabilities are provided by WebSphere Portal and WL integrates with Portal to provide mobile specific features. The services layer is more like an ESB or WSSR and talks to various databases, Sales Force DB, Cloud etc. WL and Portal connect to Services layer through adapters and connectors and massage the data to render corresponding UI. Don’t forget you need your firewall, services layer etc. Enterprise Arch is still needed! The reference arch serves as a blue print for the kind of integration that happens behind the scenes in a real world system. We simplified the integration techniques in our approaches to focus more on the touch points and talk about various scenarios.
Looks like we have time, let’s do a speed round
Here are some tips to help you build great mobile applications
Here are some tips to help you build great mobile applications
Here are some tips to help you build great mobile applications
Here are some tips to help you build great mobile applications