GIỚI THIỆU GIẢI PHÁP IBM Worklight

VietSoftware International, Room 104, 152 Thuy Khue, Ha Noi, Viet Nam.P.O.BOX 426 BOHO, HANOI 10000 VIETNAM

Tel: (84-4) 7280366; Fax: (84-4) 7280367; E-mail: [email protected]; Page 1

GIỚI THIỆU GIẢI PHÁP

IBM Worklight

Vũ Xuân Thức – VSII SDC – IBM Worklight team

Email: [email protected]

Hà nội 14/01/2015

mailto:[email protected]



Nội dung chương trình giới thiệu Worklight cho lập trình viên Ngân hàng

Nông nghiệp và Phát triển nông thôn

Ngày thứ nhất - Giới thiệu tổng quan về giải pháp IBM Worklight

- Giới thiệu Worklight Studio

- Cài đặt môi trường lập trình

- Các bước xây dựng ứng dụng Worklight

o Xây dựng ứng dụng; biên dịch; và cài đặt

o Xây dựng và sử dụng Worklight Adapter

- Kiến trúc Worklight Runtime

Ngày thứ hai - Cài đặt các các thành phần của Worklight

- Deploy ứng dụng Worklight và cài đặt trên thiết bị mobile

- Sử dụng các thành phần quản trị của IBM Worklight

Tổng quan

Worklight Server - Thành phần nằm giữa Worklight mobile app và hệ thống backend, cung cấp các giải pháp an

ninh cho ứng dụng (security) và tạo các thông báo (notifications)

- Cung cấp giải pháp trực tiếp cập nhật ứng dụng

- Giải pháp caching cho Worklight adapter



Worklight Runtime Components Các bộ thư viện để giao tiếp với thiết bị mobile

Worklight Console - Ứng dụng WEB GUI để phân tích và điều khiển hệ thống app và hạ tầng cho app

- Giải pháp Push notification

IBM Worklight Application Center Đùng để tạo ra các Mobile Application Store cho từng tổ chức, dùng để quản lý việc việc phân phối

application cho người dùng

Worklight Studio Môi trường lập trình Worklight, có đầy đủ môi trường cho thiết bị và các thành phần của hệ thống

Worklight



Mô hình phát triển ứng dụng

Các mô hình xây dựng ứng dụng cho Mobile

Ưu điểm Worklight - Worklight solutions: cung cấp giải pháp xây dựng Kho ứng dụng cho doanh nghiệp

- Viết một lần, biên dịch ra nhiều nền tảng hệ điều hành khác nhau

- Theo mô hình Mobile Enterprise application

Worklight Studio

Giới thiệu chung



- Được xây dựng dựa trên Eclipse; là plugin của Eclipse

- Viết ứng dụng sử dụng công nghệ dựa trên từng nền tảng mobile và sử dụng công nghệ HTML 5:

HTML 5; CSS3 và JavaSciprt (Jquery và Dojo, Sencha)

- Hỗ trợ Auto-Complete

- Tích hợp với thự viện SDK của các hệ điều hành mobile hiện tại: cho phép truy cập trực tiếp

trong IDE, Emulator và các công cụ debug

- Cho phép viết 1 lần, chạy trên nhiều hệ điều hành (Single Shared Codebase)

- Tích hợp với hệ thống BackEnd thông qua Worklight Server

o Cung cấp giải pháp security

o Hỗ trợ kết nối: Web service; JDBC, JMS ...

Yêu cầu môi trường (Requirements) Worklight Studio có thể được cài đặt trên các hệ điều hành sau:

- Windows

- Mac OS

- Linux

Với các ứng dụng chạy trên iOS, tốt nhất nên chạy và biên dịch trên máy Mac OS

Cài đặt Worklight Studio và các phần mềm môi trường

Cài đặt SDK

- Tất cả Java JDK 6 hoặc version mới hơn.

- Do vấn đề tương thích, tốt nhất nên cài đặt SDK 1.6.

- Địa chỉ: http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-

javase6-419409.html

http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase6-419409.html

http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase6-419409.html



Cài đặt Eclipse

Hỗ trợ các version của Eclipse như sau:

– Eclipse Juno v4.2.2 (SR2)

– Eclipse Kepler v4.3.1 (SR1)

– Eclipse Classic v4.2.2

– Eclipse Classic v4.3.1

Địa chỉ: http://www.eclipse.org

Cài đặt Worklight Studio

Worklight Studio là plugin của Eclipse, cho phép thực hiện các công việc sau:

- Tạo và sửa đổi ứng dụng

- Deploy ứng dụng lên Worklight Server

- Xem và quản lý ứng dụng trên Worklight Console

- Tạo module Java server side – được sử dụng bởi Worklight Adapter

- Tạo và sửa đổi Worklight Adapter

- Deploy Worklight Adapter lên máy chủ Worklight Server

- Test Worklight Adapter ...

Có 3 cách cài đặt Worklight Studio:

- Download Worklight Studio

- Sử dụng Eclipse Market

- Sử dụng Eclipse Install new software

Tất cả các phương pháp trên đều yêu cầu máy tính được kết nối Internet

Nên xóa hết tất cả các cài đặt Worklight Studio trước đó

Download Worklight Studio

1. Download IBM Worklight Studio về máy theo địa chỉ sau:

- http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/

- File: iws_eclipse_6.2.0.0.zip

2. Cài đặt:

- Chọn Help > Install New Software

- Chọn Add

- Chọn Archive

http://www.eclipse.org/

http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/



- Chọn file Worklight Studio zip file vừa download

- Nhập “IBM Worklight” và chọn “OK”

- Chọn “IBM Worklight Studio Development Tools” và Next

- Click Finish và làm theo hướng dẫn của Eclipse

Sử dụng Eclipse Market

- Từ Eclipse, chọn: Help > Eclipse Marketplace

- Từ trường “Find field” nhập "Worklight" và click “Go”

- Click “Install”

- Làm theo hướng dẫn trên Eclipse

Sử dụng Eclipse Install new software

- Truy cập http://marketplace.eclipse.org/content/ibm-worklight-studio

- Kéo thả Button “Install” vào Eclipse Workspace đang chạy

- Làm theo các hướng dẫn còn lại trên Eclipse

Cài đặt Web Sphere Application Server

Tất cả các thành phần Worklight Studio chạy như một ứng dụng trong một Web Application server. Có

thể sử dụng một Web Sphere riêng biệt hoặc một Plugin Web Sphere Application Server. Trong tài liệu

này sẽ hướng dẫn bạn cài đặt WebSphere Application Server Liberty Profile:

- Từ Eclipse, Chọn Windows / Preferences / Server / Runtime Environments

http://marketplace.eclipse.org/content/ibm-worklight-studio



- Chọn “Worklight Development Server”, chọn “Edit”

- Phần JRE, nên chọn thư viện jdk 1.6

- Trong mục “Installation folder” Kiểm tra phần Path; nếu đã được thiết lập nghĩa là server đã

được cài đặt. Ngược lại click mục “download or install” và làm theo hướng dẫn.

Sau khi cài đặt xong, phần “server” của Eclipse sẽ hiện ra Worklight Development Server.

Cài đặt SDK Tools cho từng nền tảng thiết bị

Bộ SDK cho từng nền tảng thiết bị sẽ được sử dụng để xuất bản ứng dụng chạy trên loại thiết bị đó.

Tham khảo cài đặt SDK cho đầy đủ các hệ điều hành Mobile tại đây:

http://www.ibm.com/developerworks/mobile/worklight/getting-started.html#GS_set

http://www.ibm.com/developerworks/mobile/worklight/getting-started.html#GS_set



Trong tài liệu này, sẽ giới thiệu cách cài môi trường cho Android.

- Cài đặt Android tại địa chỉ: http://developer.android.com/sdk

ADT là bộ thư viện APIs và các công cụ để xây dựng ứng dụng Android apps; nó có chứa cả Android SDK.

- Để cài đặt, từ Eclipse, chọn: Help > Install New Software

- Click Add, nhập địa chỉ: https://dl-ssl.google.com/android/eclipse và click “OK”

http://developer.android.com/sdk

https://dl-ssl.google.com/android/eclipse



- Chọn: “Developer Tools”, click “Next” và làm các bước tiếp theo.

Có thể download ADT để cài đặt trên Eclips tại địa chỉ: http://developer.android.com/sdk/index.html

Để chạy Android Application trên máy ảo, có thể cài đặt Android Virtual Device. Từ Eclipse, mở:

Window>Android Virtual Device Manager, sau đó tạo các thiết bị tương ứng mong muốn:

http://developer.android.com/sdk/index.html



Lập trình ứng dụng sử dụng Worklight Studio

Tạo dự án Worklight - Từ Icon Worklight, Chọn Worklight Project

- Trong cửa sổ mới, nhập tên project: MyLab1, chọn “Hybrid Application” và click “Next”



- Nhập MyLab1 và phần “Application name”, và click “Configure JavaScript Library”



- Trong cửa sổ mới hiện ra, chọn “Add jquery mobile” rồi chọn thư viện jquery



- Trong phần thư viện jquery, chọn tối thiểu các thư viện sau:

Jquery.mobile-1.4.4.css

Jquery.mobile-1.4.4.js

Jquery.mobile.icons-1.4.4.css

Jquery.mobile.inline-png-1.4.4.css

Jquery.mobile.inline-svg-1.4.4.css

Jquery.mobile.structure-1.4.4.css

Jquery.mobile.theme-1.4.4.css

- Click finish



Cấu trúc Project Worklight

JavaScript Resources: Chứa các classes JavaScript của Project

adapters: Chứa các Adapter cuar project tạo ra

apps: Chứa các app có trong project

server: chứa file cấu hình để deploy lên Worklight server

server/java: Chứa mã nguồn viết cho phần server side.

server/bin: Chứa các file binary để deploy lên server (được tạo ra sau bước build và deploy)



Common

- Common: thư mục chứa các mã nguồn chia sẻ giữa các hệ điều hành

- application-descriptor.xml: mô tả thuộc tính ứng dụng



Environment

- JavaScript trong environment folder sẽ được chèn vào thư mục tương tự trong common folder

- CSS file trong environment folder sẽ được chèn vào thư mục tương tự trong common folder

- HTML file trong environment folder sẽ ghi đè lên file trong common folder

- IMAGE files trong environment folder sẽ ghi đè lên file trong common folder



Lập trình phía Clients

Tạo homepage cho project MyLab1

- Từ cửa sổ “Project Explorer” của Eclipsemở file: MyLab1/apps/MyLab1/common/index.html

- Từ cửa sổ “Mobile Navigation” chọn “page(default)”, chọn “Rename”

- Nhập “homepage ” và click “OK”



- Mở file index.html, xóa chữ “Hello Worklight”

- Từ cửa sổ “jQuery Mobile Widgets” chọn Header, kéo thả vào cửa sổ soan thảo của trang

index.html; chèn vào phần trên nội dung.

- Thay đổi tiêu đề từ Header thành My Memories



- Tương tự, chèn đối tượng Button vào phần nội dung của trang “Insert into Content”

- Thay đổi tiêu đề button sang: My Memories

- Chọn button vừa tạo, chọn Properties. Thay đổi Id từ button sang listBtn. Chọn Theme thành

d.

Tạo thêm trang “Add Memory”

Để tạo trang mới, ta có thể sử dụng đối tượng “jQuery Page” chèn vào mã HTML chèn vào nội dung

HTML ở trang chính: index.html. Tại mỗi thời điểm, chỉ có một trang được hiển thị. Phần sau sẽ hướng

dẫn kết nối giữa các trang.

- Sử dụng đối tượng “page” và chèn vào phần nội dung của Homepage: “Insert into <body>

‘content’ below Page ‘homepage’”.



- Vào phần “Mobile Navigation”, đổi tên page sang cameraPage

- Vào phần “Mobile Navigation” chọn page ‘cameraPage’ và double click để sang trang soạn thảo



- Chèn đối tượng Header vào phần cửa sổ phía trên trang ‘cameraPage’:

- Đổi nhãn từ Header sang Add Memory



- Chèn đối tượng button vào bên trái Header:

- Đổi nhãn từ Button sang Cancel

- Chọn button cancel, di chuột và chọn Edit Navigation Link

- Chọn homepage từ mục Inline link target. Click Finish



- Tiếp tục thêm đối tượng Button vào bên phải Header: “Insert into Header ‘header0’ after

Heading”

- Đổi nhãn của button vừa tạo từ Button sang Save.

- Mở Properties của button Save, đổi thuộc tính Id sang savePicBtn.

- Thêm đối tượng Text Input vào phần nội dung của trang: “Insert into Content”.



- Đổi nhãn từ Text Input: sang Title:

- Chèn đối tượng Label vào bên dưới trường text: Insert into Content below Text Input ‘text’.

- Đổi nội dung của Label sang Description:.



- Tiếp tục thêm đối tượng Text Area vào bên dưới đối tượng Label description: Insert into

Content below Label ‘label’

- Chọn đối tượng Text Area vừa tạo; chọn mục Properties . Đổi thuộc tính Id sang picDetailTxt



- Thêm đối tượng Button dưới đối tượng Text Area: “Insert into Content below Text Area

‘picDetailTxt’

- Đổi giá trị title của button từ Button sang Capture Picture

- Chuẩn bị một ảnh camera_icon.png ở Explorer và kéo thả vào thực mục:

MyLab1/apps/MyLab1/common/images



- Chuyển đến cửa sổ mã nguồn HTML, chèn them nội dung sau dưới đối tượng “Capture Picture ”

<div class="capturedImage" id="capturedImage">

<img id='captareImageImg' src='images/camera_icon.png'

height='200px' width='200px' style='display:block'>

</div>

- Chuyển về trang homepage và thêm button “Add Memory ”

- Đặt link của button đến trang cameraPage



Tạo thêm trang My Memories

- Từ cửa số “Mobile Navigation” chọn nút (“+”) để thêm một trang mới

- Từ trang “jQuery Mobile Page”, thay đổi Id sang listPage. Chọn “Create from UI pattern”, chọn

“Lists”, Dưới mục “Patterns”, chọn “Search List”. Cuối cùng click Finish



- Thêm đối tượng Header vào đầu trang: Insert into Page ‘listPage’ above Content.

- Đổi nhãn từ Header sang Memories List

- Thêm button “Back” vào bên trái của header và đặt link đến trang homepage.

- Quay lại trang homepage và đặt link của button: My Memories về trang listPage



Thêm môi trường thiết bị và xem ứng dụng trong Mobile Browser Simulator

Thêm môi trường thiết bị Android

- Từ cửa sổ Project Explorer view, mở rộng MyLab1 project, chọn chuột phải cho MyLab1

project, vào mục New > Worklight Environment

- Chọn “Android Phones and tablets”



- Mà hình kết quả

Khởi động “Worklight Development Server”

- Vào phần server, chọn “Worklight Development Server”, chọn Start



Đã khởi động xong

Sau khi khởi động xong, ứng dụng console đã được chạy trên nền Websphere Application Server:

- Worklight console: http://thucvx-w7.vsii.com:10080/worklightconsole/

Tài khoản username/password default là: admin/admin

Tài khoản này có thể được cấu hình trong file

workspace\WorklightServerConfig\servers\worklight\server.xml

Deploy ứng dụng mobile lên Worklight server

- Chọn MyLab1 > apps. Kích chuột phải vào MyLab1, chọn Run As > Build All and Deploy.

http://thucvx-w7.vsii.com:10080/worklightconsole/



- Kết quả chạy thành công

Xem ứng dụng trên Mobile Browser Simulator

- Mở project MyLab1 > apps > MyLab1, chọn thư mục iphone. Kích chuột phải trên thư mục

iphone, chọn Run As > Preview.





Màn hình kết quả:

Lập trình phía Server Trong phần này, ta sẽ tạo một Adapter để gọi đến API của Google map. Sau đó viết mà để mobile app có

thể gọi được đến Adapter vừa gọi.



Tạo Worklight Adapter

- Trong cửa sổ “Project Explorer”, kích chuột phải lên MyLab1 project, vào New > Worklight

Adapter

- Trong cửa số mới mở ra, chọn Adapter type là: HTTP Adapter; Adapter name: GPSLocator , click

Finish

- Xóa phần Procedure “getStoriesFiltered”.



- Mở Adapter “GPSLocator” > Connectivity > Connection Policy, đổi giá trị của trường Domain từ

rss.cnn.com sang maps.googleapis.com

- Từ cửa sổ “Project Explorer”, mở rộng MyLab1 project > adapters folder > GPSLocator folder.

Mở file GPSLocator-impl.js. Sau đó xóa toàn bộ mã nguồn trong cửa sổ soạn thảo.

- Chèn mã nguồn sau đây:

// Google Map API call function getLocation(gpsLat, gpsLong) { path = "/maps/api/geocode/json?latlng=" + gpsLat + "," + gpsLong + "&sensor=false"; var input = { method : 'get',



returnedContentType : 'json', path : path }; return WL.Server.invokeHttp(input); }

- Ghi và đóng cửa sổ soạn thảo

- Mở file MyLab1 project > adapters folder > GPSLocator > GPSLocator.xml, đổi tên procedure từ

getStories sang getLocation

Test Worklight Adapter

- Trong cửa sổ “Project Explorer”, click chuột phải vào GPSLocator folder, chọn Run As > Invoke

Worklight Procedure.



- Trong cửa sổ mới hiện ra, mục Parameters nhập: 43.6481,-79.4042



- Màn hình kết quả trả về:

Deploy Worklight Adapter

- Kích chuột phải lên Adapters/GPSLocator folder, chọn Run As -> Deploy Worklight Adapter



- Màn hình kết quả:



Gọi Worklight Adapter từ mobile app

- Mở file MyLab1 project > apps > MyLab1 > common > js > main.js trong cửa sổ soạn thảo:

- Thêm đoạn mã sau đây sau method: wlCommonInit() { }

//Global variables var globalLong; // GPS Longitude var globalLat; // GPS Latitude var globalAddress = '(not available)'; // translated address info $( '#cameraPage' ).bind('pagebeforeshow',function(event){



console.log( ' cameraPage() - pagebeforeshow' ); getLocation(); }); ///////////////////////////// //Get the GPS coordinates ///////////////////////////// function getLocation() { console.log('getLocation'); var win = function(position) { console.log('-getLocation:win'); globalLat = position.coords.latitude; globalLong = position.coords.longitude; console.log('Obtained GPS location information: ' + globalLat + '/' + globalLong); getGlobalAddress(); }; var lose = function(error) { console.log('-getLocation:lose'); globalLat = 30.377047; globalLong = -91.123484; console.log('Failed to get GPS information, using default address.'); }; var options = { enableHighAccuracy: true }; navigator.geolocation.getCurrentPosition(win, lose, options); } function getGlobalAddress(){ console.log('getGlobalAddress: ' + globalLat + ', ' + globalLong + ')'); if (typeof(globalLat) != 'undefined' || globalLat != null || typeof(globalLong) != 'undefined' || globalLong != null ){ callGeoAdapter(); } else { globalAddress = '(Could not get GPS info)'; } } //////////////////////////////////////////////////////////////// //Call the Worklight adapter and get the street/local address //////////////////////////////////////////////////////////////// function callGeoAdapter(){ // store translated address, to globalAddress console.log('callGeoAdapter: online'); if (typeof(globalLat) == 'undefined' || globalLat == null || typeof(globalLong) == 'undefined' || globalLong == null ){



globalAddress = '(No valid GPS info)'; // alert(globalAddress); // busyIndicator.hide(); return; } // Called when the adapter completes successfully var win = function(result){ globalAddress = result.invocationResult.results[0].formatted_address; // alert('globalAddress[' + globalAddress.length + '] '+ globalAddress); if(globalAddress.length == 0){ globalAddress = '(Could not translate address via adapter)'; } console.log('-callGeoAdapter:win - address: ' + globalAddress); $('#picDetailTxt').val(globalAddress); return; }; // Called when the adapter does NOT complete successfully var lose = function(){ console.log('-callGeoAdapter:lose - Failed to obtain address for GPS'); globalAddress = '(Could not translate address for given GPS)'; // alert(globalAddress); return; }; var invocationData = { adapter : 'GPSLocator', procedure : 'getLocation', parameters : [globalLat, globalLong] }; var options = { onSuccess : win, onFailure : lose }; WL.Client.invokeProcedure(invocationData, options); }

Test việc gọi Adapter trên Mobile Browser Simulator

- Mở MyLab1 project > apps > MyLab1 folder, kích chuột phải lên iphone folder, chạy Run As >

Preview



- Mở tab: Geolocation, nhập Latitude: 43.65 và Longitude: -79.41

Trường description hiện ra địa chỉ của tọa độ đã nhập vào.



Mô hình chạy ứng dụng Worklight

Thêm các giải pháp bảo mật:



Giải pháp Security (Tham khảo) - Mã hóa dữ liệu

- Xác thực và phân quyền người dùng



Tài liệu tham khảo - Làm việc với Worklight, Phần 1: http://www.ibm.com/developerworks/vn/library/12/mo-

aim1206-working-with-worklight-1/

http://www.ibm.com/developerworks/vn/library/12/mo-aim1206-working-with-worklight-1/

http://www.ibm.com/developerworks/vn/library/12/mo-aim1206-working-with-worklight-1/



- Làm việc với Worklight, Phần 2:

http://www.ibm.com/developerworks/vn/library/mobile/2013Q1/mo-aim1207-working-with-

worklight-2/

- IBM MobileFirst Platform Foundation V6.3.0: https://www-

01.ibm.com/support/knowledgecenter/SSHS8R_6.3.0/wl_welcome.html

- IBM MobileFirst Platform Foundation 6.3 – All tutorials:

https://developer.ibm.com/mobilefirstplatform/documentation/getting-started-all-tutorials-6-

3/

- Worklight Archive:

http://public.dhe.ibm.com/ibmdl/export/pub/software/products/en/MobileFirstPlatform/

- Build a Mobile Hybrid App Using IBM Worklight: Part 1 http://www.sitepoint.com/build-a-

mobile-hybrid-app-using-ibm-worklight-part-1/

- Build a Hybrid Mobile App Using IBM Worklight, Part 2 http://www.sitepoint.com/build-hybrid-

mobile-app-using-ibm-worklight-part-2/

http://www.ibm.com/developerworks/vn/library/mobile/2013Q1/mo-aim1207-working-with-worklight-2/

http://www.ibm.com/developerworks/vn/library/mobile/2013Q1/mo-aim1207-working-with-worklight-2/

https://www-01.ibm.com/support/knowledgecenter/SSHS8R_6.3.0/wl_welcome.html

https://www-01.ibm.com/support/knowledgecenter/SSHS8R_6.3.0/wl_welcome.html

https://developer.ibm.com/mobilefirstplatform/documentation/getting-started-all-tutorials-6-3/

https://developer.ibm.com/mobilefirstplatform/documentation/getting-started-all-tutorials-6-3/

http://public.dhe.ibm.com/ibmdl/export/pub/software/products/en/MobileFirstPlatform/

http://www.sitepoint.com/build-a-mobile-hybrid-app-using-ibm-worklight-part-1/

http://www.sitepoint.com/build-a-mobile-hybrid-app-using-ibm-worklight-part-1/

http://www.sitepoint.com/build-hybrid-mobile-app-using-ibm-worklight-part-2/

http://www.sitepoint.com/build-hybrid-mobile-app-using-ibm-worklight-part-2/