The document outlines the development of mobile hybrid applications using IBM Worklight and WebSphere Commerce, emphasizing integration across various platforms such as iOS and Android. It discusses components like Worklight Console, Runtime, and Studio, which facilitate app management, real-time analytics, and code reuse. Additionally, it highlights the capabilities of native device features and seamless user experiences for mobile commerce applications.

1. Develop Mobile hybrid
application with
WebSphereCommerce
andWorklight
Mohammad Omer Raza

2. Security Analytics ManagementManagement
Development&Integration
Services
Strategy&DesignServices
Industry Solutions
Banking Insurance Retail Transport Telecom Government Healthcare Automotive
IBM & Partner Applications
IBM Endpoint Manager IBM Cast Iron
Application Web
API
Devices Network Servers
Cloud & Managed Services
9/30/2013 Mohammad Omer Raza

3. IBM Worklight
Mobile OS platforms
Networks
Devices
OS’s
Mobile Commerce Applications
IBM Smarter
Commerce
9/30/2013 Mohammad Omer Raza

4. Worklight overview
7
Worklight Console (Monitor)
A web-based console for real-time analytics and
control of your mobile apps and infrastructure
←
Worklight Runtime Components (Run)
Extensive libraries and client APIs that expose and
interface with native device functionality
Worklight Server (Deploy)
Unified notifications, runtime skins, version
management, security, integration and delivery
Worklight Studio (Build)
The most complete, extensible environment with
maximum code reuse and per-device optimization
9/30/2013 Mohammad Omer Raza

5. Worklight Console
Mobile Applications Management
Selected version
Set version status
9/30/2013 Mohammad Omer Raza

6. Worklight Studio and WebSphere Commerce
• Standalone Eclipse-based IDE
–
–
Common JavaScript frameworks are included
Android SDK plugins can be added
• Used to develop client-side portion of smart
phone hybrid app
– Client-side HTML / CSS / JavaScript
• For example splash screen and settings
page
Android native code
• For example app shell, initialization code,
native feature interface
–
9
9/30/2013 Mohammad Omer Raza

7. Worklight Runtime Components and
WebSphere Commerce
• Worklight runtime API
–
–
–
Built on top of Apache Cordova
Replaces JavaScript bridge code from FEP 4
Used to access native device features
• Address book
•
•
•
•
Store locator / maps
Barcode scanner
Voice search
Menu options
• Store developers need to import Worklight
toolkit environment
runtime libraries into their
•
10
9/30/2013 Mohammad Omer Raza

8. Commerce website and hybrid applications
Content development and management
Business Users
(Commerce Management Center)
Desktop / Notebook
Developers
(Worklight Studio)
Web
Content
Tablets
Page Composer - Layout Editor
1.
2.
3.
Select UI templates and layout for web content
Configure business rules for merchandising
Preview content across all devices
Mobile Applications
- iOS, Android, Windows,..
- Barcode scan, voice search,
contact list, …
Mobile Phones
9/30/2013 Mohammad Omer Raza

9. Android and iPhone hybrid web
Hybrid reference applications for Android and
iPhone applications built with Worklight Studio
WC mobile starter store available in FEP6
applications
•
•
• Key Features:
–
–
–
–
–
–
User registration, Login, My Account
Product navigation and Search Cross
channel inventory and pricing Location
based marketing and promotion
Buy-Online, Pickup-In-Store, Ship-To Address
Store Locator and Quick checkout profile
Barcode scan
• Device Integration Features:
–
–
–
–
–
Barcode scan for product or marketing landing page
Voice search for product information
Address book integration with Billing & Shipping
Store locator with local maps
SMS notification for order & marketing messages
Map integration
9/30/2013 Mohammad Omer Raza

10. WebSphere Commerce and Worklight integration
Deliver seamless user experience for web and mobile applications
Download
Mobile Commerce
applications
Web Content
WebSphere Commerce Web Site (desktop, tablet, smartphones)
Store ServersFulfillmentBackend Systems
ESB
Push Notification Servers
Worklight Web Content
(HTML5, CSS3)
Search Customer Marketing
Products Order Stores
Location Promotion
REST
api
9/30/2013 Mohammad Omer Raza

11. Thank you
17
9/30/2013 Mohammad Omer Raza