Mobile Development using Worklight Studio

By Amine GAHBICHE - Proxym-IT

!  IBM Worklight Overview

2

IBM Worklight Overview

!   Open platform, built around HTML5 & supporting hybrid apps

!  Focus on new devices and OS’s and their unique capabilities

!  Cater to enterprise needs regarding app capabilities, delivery, integration, security and management

!  Handle the entire lifecycle of mobile apps

3

IBM Worklight Overview

4

IBM Worklight applications main types

5

IBM Worklight Overview

6

IBM Worklight Overview

7

Single Shared Codebase

8

Integrating Best-in-class Tools

9

IBM Worklight Server

10

Device Runtime Components

11

IBM Worklight Console

12

!  IBM Worklight environment setup

13

Eclipse IDE

!  Multi-purpose integrated development environment (IDE)

!  Open source !  Supported for Windows, Mac OS X, Linux !  Eclipse versions that are compatible with

IBM Worklight Studio are: – Eclipse V4.2.2 (Juno) – Eclipse V4.3.1 (Kepler)

14

IBM Worklight Studio Setup 1/2

!  The instructions to install IBM Worklight Studio are: – Start your Eclipse IDE. – Click Help > Install new software. – Beside the Work with field, click Add. –  In the Add Repository window, click Archive. – Browse to the location of the.zip file on your

machine, and click Open. You can download the zip from this link

– Click OK to exit the Add Repository window. 15

IBM Worklight Studio Setup 2/2

– On the Available Software page, select IBM Worklight Studio Development Tools, and click Next.

– On the Install Details page, review the features of Worklight Studio to be installed, and then click Next.

– On the Review Licenses page, review the license text. Select I accept then click Finish.

– The installation process starts. Follow the prompts to complete the installation.

16

Android environment setup

!  The Android SDK separates tools, platforms, and other components into packages you can download using the SDK Manager.

! SDK Manager can be downloaded from google website

17

ADT Plugin for Eclipse

– Start Eclipse, then select Help > Install New Software.

– Click Add, in the top-right corner. – Enter ADT Plugin Zip file path or link, click OK. –  In the Available Software dialog, select

Developer Tools and click Next. – Accept the license agreements, then click

Finish. –  Restart Eclipse after installation completes.

18

Add Android SDK Platform

– From Eclipse, select Window > Android SDK Manager.

– Select packages to install. – Click install packages.

19

iOS Environment

! Need a Mac with Mac OS X 10.9.4 or later.

!  Install the latest version of Xcode (version 6.1) from Mac App Store.

20

Windows Phone 8 Environment

!  Needs a PC running 64-bit Windows 8 operating system.

!  The Windows Phone 8.1 development tools are included with Visual Studio 2013 (Update 2 or later).

!  More details at https://dev.windowsphone.com/en-us/downloadsdk

21

!  Creating your first IBM Worklight application

22

23

! Create a new IBM Worklight project

24

!  JavaScript frameworks can be added to your project in this screen.

25

!  IBM Worklight structure

26

Adding mobile environments

27

Adding mobile environments

28

29

!   Common Environment: –  index.html: The main HTML file. –  css: main.css – main application CSS file. –  images: Default Worklight images for the common

environment. –  js:

! initOptions.js: Contains initialization options for the application.

! main.js: The main JavaScript file for the application.

! messages.js: JSON object that holds all app messages. Can be used as the source for translation.

IBM Worklight project structure

30

!   The resources of the new environment have the following relationship with the common resources: –  images – overrides the common images

when both have the same name. –  css – extends, overrides, or both, the

common CSS files. –  js – extends the common application

instance JS object. The environment class extends the common app class.

–  index.html – optional HTML file that overrides the common HTML code when both have the same name.

application-descriptor.xml file

31

32

Index.html file

33

Building the application

34

IBM Worklight console

35

Preview the application

36

!  IBM Worklight Adapters

37

!  An Adapter is a transport layer used by the Worklight Platform to connect to various back-end systems.

!  Adapters are used for:

!  Retrieving information !  Performing actions

38

Adapters benefits

!   Universality : Supports multiple integration technologies and back-end information systems

!   Fast Development : Defined using simple XML syntax, and easily configure with JavaScript API

!   Security : Use of flexible authentication facilities to create connections with back-end systems – Adapters offer control over the identity of the connected user

!   Scalability : Adapters reduce the number of transactions performed on back-end systems by using cache to store retrieved back-end data

!   Transparency : Data retrieved from back-end applications is exposed in a uniform manner regardless of the adapter type

39

Adapter Anatomy

!  Each Worklight Adapter consists of: !  An XML file, describing the connectivity options and

listing the procedures exposed to the application or other adapters

!  A JavaScript file, containing the implementation of procedures declared in the XML file

!  Zero or more XSL files, containing a transformation scheme for retrieved raw XML data

40

Adapter Anatomy

!  Adapter functionality is available to the app using procedures

!  Procedures call back-end services to retrieve data or to perform actions

!  Procedures are declared using XML and are implemented using server-side JavaScript

!  Using server-side JavaScript, a procedure can process the data before or after calling the service

41

42

Creating an Adapter

43

44

45

Testing adapter procedure

46

Testing adapter procedure

47

Invoking a Procedure From the Client App

48

!  Client side technologies

49

Cordova

!  Cordova - an open source JavaScript-based development framework for building multiplatform mobile apps.

!  The Worklight Framework make use of the Cordova library. Developers can access native device functionalities through those services.

50

Cordova – usage sample

51

Cordova – usage sample

52

Cordova Plugin

!  Cordova allows developers to create custom native code blocks and invoke them via JavaScript

!  This technique is called a Cordova Plugin !  An Apache Cordova plugin consists of two

parts – Java code which runs natively within the

Android OS – A JavaScript wrapper

53

Worklight JavaScript SDK

! WL.Client – WL.Client.isUserAuthenticated (realm) – WL.Client.getUserInfo (realm, key) – WL.Client.invokeProcedure (invocationData,

options)

! WL.Logger – WL.Logger.debug (message)

54

Worklight JavaScript SDK – common controls

!  Some controls are common to most environments, such as modal pop-up windows, loading screens, and tab bars.

! Worklight JavaScript API automatically renders these controls in a native way for each mobile platform.

!  Some of these controls are Busy indicator, Simple dialog, Tab bar, Options menu

55

Worklight JavaScript SDK – common controls

! WL.BusyIndicator !   It uses native implementation on the each

platforms

56