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: contact@vsi-international.com; Page 1
GIỚI THIỆU GIẢI PHÁP
IBM Worklight
Vũ Xuân Thức – VSII SDC – IBM Worklight team
Email: vu.xuan.thuc@vsi-international.com
Hà nội 14/01/2015

HANOI 10000 VIETNAM
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

HANOI 10000 VIETNAM
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

HANOI 10000 VIETNAM
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

HANOI 10000 VIETNAM
- Đượ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

HANOI 10000 VIETNAM
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

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
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”

HANOI 10000 VIETNAM
- 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:

HANOI 10000 VIETNAM
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”

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

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

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
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)

HANOI 10000 VIETNAM
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

HANOI 10000 VIETNAM
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

HANOI 10000 VIETNAM
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”

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
- 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’”.

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
- 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”.

HANOI 10000 VIETNAM
- Đổ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:.

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
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

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
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”

HANOI 10000 VIETNAM
- 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

HANOI 10000 VIETNAM
Đã 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
workspaceWorklightServerConfigserversworklightserver.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.

HANOI 10000 VIETNAM
- 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.

HANOI 10000 VIETNAM

HANOI 10000 VIETNAM
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.

HANOI 10000 VIETNAM
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”.

HANOI 10000 VIETNAM
- 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',

HANOI 10000 VIETNAM
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.

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

HANOI 10000 VIETNAM
- 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

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

HANOI 10000 VIETNAM
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){

HANOI 10000 VIETNAM
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 ){

HANOI 10000 VIETNAM
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

HANOI 10000 VIETNAM
- 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.

HANOI 10000 VIETNAM
Mô hình chạy ứng dụng Worklight
Thêm các giải pháp bảo mật:

HANOI 10000 VIETNAM
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

HANOI 10000 VIETNAM
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/

HANOI 10000 VIETNAM
- 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/

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

Recomendados

Recomendados

Mais conteúdo relacionado

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

Semelhante a GIỚI THIỆU GIẢI PHÁP IBM Worklight (20)

Mais de hearme limited company

Mais de hearme limited company (17)

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