Develop Mobile hybrid application with WebSphere Commerce and Worklight

Mohammad Omer Raza

Security Analytics ManagementManagement

De

ve

lop

me

nt&

Inte

gra

tion

Se

rvic

es

Str

ate

gy

&D

es

ign

Se

rvic

es

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

IBM Worklight

Mobile OS platforms

Networks

Devices

OS’s

Mobile Commerce Applications

IBM SmarterCommerce

9/30/2013 Mohammad Omer Raza

Worklight overview

7

Worklight Console (Monitor)A web-based console for real-time analytics andcontrol of your mobile apps and infrastructure

←

Worklight Runtime Components (Run)Extensive libraries and client APIs that expose andinterface with native device functionality

Worklight Server (Deploy)Unified notifications, runtime skins, versionmanagement, security, integration and delivery

Worklight Studio (Build)The most complete, extensible environment withmaximum code reuse and per-device optimization

9/30/2013 Mohammad Omer Raza

Worklight ConsoleMobile Applications Management

Selected version

Set version status

9/30/2013 Mohammad Omer Raza

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 smartphone 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

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 Worklighttoolkit environment

runtime libraries into their

•

109/30/2013 Mohammad Omer Raza

Commerce website and hybrid applications

Content development and management

Business Users

(Commerce Management Center)

Desktop / Notebook

Developers

(Worklight Studio)

WebContent

Tablets

Page Composer - Layout Editor

1.2.

3.

Select UI templates and layout for web contentConfigure business rules for merchandising

Preview content across all devices

Mobile Applications

- iOS, Android, Windows,..

- Barcode scan, voice search,

contact list, …

Mobile Phones9/30/2013 Mohammad Omer Raza

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 promotionBuy-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 pageVoice 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

WebSphere Commerce and Worklight integrationDeliver seamless user experience for web and mobile applications

Download

Mobile Commerceapplications

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 PromotionREST

api

9/30/2013 Mohammad Omer Raza

Thank you

17

9/30/2013 Mohammad Omer Raza