Làm việc với Worklight, Phần 1: Bắt đầu với ứng dụng Worklight đầu tiên của bạn

Thiết lập một ứng dụng cho iOS và Android

Với IBM® Worklight® V5 (Phiên bản 5.0 Worklight của IBM), một Nền tảng ứng dụng doanh nghiệp di động (MEAP) hàng đầu, IBM mở rộng toàn diện các khả năng di động của mình trên danh mục sản phẩm của công ty. Loạt bài này giới thiệu nền tảng Worklight bằng cách dạy cho bạn cách có thể xây dựng các ứng dụng di động có sử dụng một loạt các sản phẩm của IBM. Phần 1 mô tả quá trình thiết lập một môi trường phát triển Worklight và tạo ra một ứng dụng đơn giản, sẽ được sử dụng làm cơ sở cho việc phát triển lặp lại trong các bài tiếp theo.

Jeremy Nortey, Nhà phát triển phần mềm, IBM China

Jeremy Nortey là một nhà phát triển phần mềm cho Quỹ di động của IBM trong Tập đoàn phần mềm. Ông phát triển phần mềm và bảo đảm chất lượng cho các giải pháp di động. Ông chuyên về iOS và học xây dựng các ứng dụng nguyên bản cho iPhone trong thời gian rãnh rỗi. Ông thích bóng đá và chạy bộ.



Carlos Andreu , Nhà phát triển phần mềm, IBM China

Carlos Andreu là một nhà phát triển phần mềm trong Tập đoàn phần mềm IBM. Công việc hiện tại của ông là tạo các framework để xây dựng các ứng dụng Hybrid, Android và iOS. Phạm vi quan tâm của ông trải rộng từ việc theo đuổi các xu hướng và các blog công nghệ mới nhất, đến đọc sách, xem truyền hình và thưởng thức tất cả các thể loại âm nhạc. Bạn có thể tìm hiểu thêm về ông tại địa chỉ http://dev.yapr.org/carlosandreu.



Raj Balasubramanian, Kiến trúc sư sản phẩm, IBM

Raj Balasubramanian là một tư vấn viên về kiến trúc CNTT cho Tập đoàn phần mềm IBM. Ông làm về ứng dụng phân phối các cam kết khách hàng và các dự án liên quan đến cơ sở hạ tầng. Các mối quan tâm của ông trải rộng từ bất cứ thứ gì về kỹ thuật cho đến lịch sử và vật lý. Trong những lúc rảnh rỗi của mình, ông thích hẹn hò với vợ và nói chuyện về người máy với các con trai của mình. Bạn có thể đọc về các cuộc phiêu lưu cá nhân và kỹ thuật của ông trên blog Gurukulam.



20 09 2012

Giới thiệu

Trong những năm gần đây, IBM đã đầu tư rất nhiều vào vùng di động bằng cách bảo đảm hỗ trợ các sản phẩm phần mềm cốt lõi của mình trên các thiết bị di động khác nhau và cũng bằng cách cung cấp công cụ và các chế độ chạy thực của ứng dụng để xây dựng các ứng dụng di động. Với IBM Worklight, IBM có thể tiếp tục mở rộng các khả năng di động toàn diện của mình trên danh mục sản phẩm của mình.

IBM Worklight cung cấp một nền tảng ứng dụng di động cao cấp, toàn diện và mở, có thể giúp bạn phát triển, chạy và quản lý có hiệu quả các ứng dụng HTML5, lai và nguyên gốc, bằng cách sử dụng các công nghệ và các công cụ dựa trên các tiêu chuẩn, phần mềm trung gian tối ưu hóa cho di động, một loạt các cơ chế bảo mật và các khả năng phân tích và quản lý tích hợp.

Là một bài giới thiệu về Worklight, bài này thiết lập luồng công việc của nhà phát triển ứng dụng di động cơ bản và giới thiệu việc thiết lập môi trường Worklight để phát triển các ứng dụng. Trong quá trình này, bạn sẽ được hướng dẫn về cách xây dựng một ứng dụng "Hello World" đơn giản. Phần 2 của loạt bài này sẽ dạy bạn cách có thể sử dụng cách thiết lập môi trường này với việc phát triển ứng dụng lặp lại để tạo ra một ứng dụng chức năng xung quanh trường hợp sử dụng đơn giản về tạo một ứng dụng danh sách nhiệm vụ (được gọi là "To do"). Các bài tiếp theo sẽ mở rộng thêm sự tích hợp với các sản phẩm khác của IBM để giới thiệu các chức năng và các tính năng của Worklight.

Những điều cơ bản về Worklight

Hãy nhận lấy Worklight ngay bây giờ

Tải IBM Worklight Developer Edition 5.0 (Phiên bản 5.0 của Ấn bản Nhà phát triển Worklight của IBM) ngay bây giờ miễn phí và sử dụng vô hạn!

Worklight là một MEAP hàng đầu, là một phần không thể thiếu của IBM Mobile Foundation (Quỹ di động của IBM). Có bốn thành phần chính của nền tảng Worklight:

  • IBM Worklight Studio (Xưởng Worklight của IBM) là một IDE dựa trên Eclipse để tạo ra các ứng dụng Worklight.
  • IBM Worklight Device Runtime Components (Các thành phần chế độ chạy thực của thiết bị Worklight của IBM) tạo nên SDK (Bộ công cụ cho nhà phát triển phần mềm) để tạo điều kiện thuận lợi cho chế độ chạy thực của ứng dụng di động trên thiết bị.
  • IBM Worklight Server (Máy chủ Worklight của IBM) là máy chủ dựa trên-Java™ cung cấp kết nối bảo mật cho các nguồn thông tin doanh nghiệp và trên Internet.
  • IBM Worklight Console (Bàn điều khiển Worklight của IBM) là một giao diện người dùng dựa trên web được dành riêng để giúp quản lý và giám sát toàn bộ hệ sinh thái ứng dụng di động.

Các thành phần này được mô tả trong Hình 1.

Hình 1. Các thành phần của Worklight
Hình 1. Các thành phần của Worklight

Ở một mức cao, các nhiệm vụ của luồng công việc mà bạn làm theo khi phát triển một ứng dụng di động tương tự như các nhiệm vụ phát triển ứng dụng truyền thống. Một khung nhìn đơn giản hóa các bước có thể trông như sau (Hình 2):

  1. Thiết lập Worklight và bắt đầu xây dựng ứng dụng.
  2. Tiến hành thông qua quá trình phát triển và thử nghiệm thông thường về kiểm tra chức năng ứng dụng bằng cách chạy hoặc giả lập ứng dụng.
  3. Khi bạn nghĩ rằng nó đã sẵn sàng, hãy công bố ứng dụng thử nghiệm để lấy ý kiến phản hồi từ những người dùng quan trọng.
  4. Dựa trên các ý kiến phản hồi, hoặc tiếp tục cải tiến ứng dụng, hoặc làm cho nó có sẵn cho một đối tượng thử nghiệm lớn hơn.
  5. Nếu bạn quyết định mở rộng việc sử dụng ứng dụng thử nghiệm, bạn có thể xuất bản ứng dụng này đến một tập hợp những người dùng hạn chế trên một kho lưu trữ ứng dụng cục bộ hoặc riêng tư hoặc đến một doanh nghiệp hoặc kho lưu trữ ứng dụng công cộng (chẳng hạn như Apple App Store, Google Play và v.v..).
Hình 2. Phát triển một ứng dụng di động
Hình 2. Phát triển một ứng dụng di động

Phần còn lại của bài này mô tả cách thiết lập Worklight và các SDK của thiết bị liên quan và tạo ra một ứng dụng rỗng ví dụ. Mục đích của quá trình này là để đảm bảo có thể xem ứng dụng trên một thiết bị và xuất bản ứng dụng đến một máy chủ Worklight cục bộ. Kết quả sẽ là cơ sở để phát triển ứng dụng di động sắp tới của bạn.


Thiết lập môi trường

Ứng dụng ví dụ mà cuối cùng bạn sắp xây dựng là một ứng dụng "to do" (cần làm) rất đơn giản, cho phép người dùng tạo ra một danh sách các nhiệm vụ đơn giản mà bạn hiển thị trong một bảng. Người dùng sẽ có thể thấy ngày tháng của mỗi nhiệm vụ, xóa các nhiệm vụ và lọc mỗi nhiệm vụ theo từ khóa. Phần đầu của ứng dụng (được viết bằng cách sử dụng JQuery Mobile) và các chi tiết khác về xây dựng ứng dụng này sẽ được mô tả trong Phần 2.

Mặc dù mục tiêu cuối cùng của bạn là xây dựng một ứng dụng "to do" (xem thanh bên cạnh), thì mục tiêu trước mắt của bài này là thiết lập luồng công việc phát triển cơ bản để xây dựng, triển khai và thử nghiệm ứng dụng di động của bạn trong một bộ giả lập thiết bị. Để làm điều đó, bạn có thể bắt đầu làm việc với môi trường phát triển Worklight theo một số bước đơn giản sau:

  1. Tải về và cài đặt phiên bản mới nhất của Eclipse Java Development Edition (Ấn bản Phát triển Java của Eclipse).

    Nếu bạn cần tải về Eclipse, bạn có thể làm việc đó từ trang web Các bản tải Eclipse. Với mục đích của bài này, chúng tôi sẽ giả sử bạn đã cài đặt Eclipse rồi. Để biết thêm thông tin, xem Bắt đầu tài liệu hướng dẫn của Worklight.

  2. Cài đặt các trình cắm thêm Eclipse của Worklight

    Nếu bạn đang quen với việc cài đặt bất kỳ trình cắm thêm nào vào Eclipse, thì phần này sẽ không có vấn đề gì. Từ bên trong Eclipse, điều hướng đến Help > Install New Software (Cài đặt phần mềm mới) rồi nhấn nút Add ở gần đỉnh bên phải (Hình 3). Trong hộp thoại Add Repository (Thêm Kho lưu trữ), nhập vào:

    • Tên: Worklight Studio
    • Vị trí: http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/wdeupdate/
    Hình 3. Cài đặt các trình cắm thêm Eclipse
    Hình 3. Cài đặt các trình cắm thêm Eclipse

    Tiếp tục các bước tiếp theo để tải về và cài đặt môi trường mà bạn cần theo trình hướng dẫn.

  3. Cài đặt các SDK đặc trưng-thiết bị

    Loạt bài này sẽ giới thiệu ứng dụng Worklight hoạt động trên cả hai thiết bị Android và iOS.

    1. Cài đặt Android SDK (tùy chọn)

      Làm theo các hướng dẫn trên trang web của nhà phát triển Android để cài đặt Android SDK và bộ giả lập bên trong trình vỏ Eclipse tương tự như Worklight Studio.

    2. Cài đặt iOS SDK (tùy chọn)

      Làm theo các hướng dẫn trên trang web phát triển của Apple để cài đặt Xcode trên một máy tính chạy hệ điều hành (OS) Mac. Nếu bạn không có máy tính Mac, thì bạn sẽ không thể giả lập ứng dụng Worklight mà bạn phát triển trên một thiết bị iOS. Các lựa chọn thay thế sẽ được cung cấp trong một bài tiếp theo khi sử dụng các tùy chọn Worklight Build (Xây dựng của Worklight), nhưng bây giờ, hãy bỏ qua các hướng dẫn riêng cho iOS nếu bạn không có một máy tính Mac.

  4. Khởi động một dự án Worklight mới

    Bây giờ bạn sẽ có thể tạo một dự án Worklight mới trong Eclipse. Hãy điều hướng đến File > New > Worklight Project (Dự án Worklight), như trong Hình 4. (Nếu Worklight Project không được liệt kê, hãy thử theo File > New > Other > Worklight Project). Đặt tên thư mục dự án của bạn là Todo Project.

    Hình 4. Tạo dự án Worklight mới
    Hình 4. Tạo dự án Worklight mới
  5. Thêm một ứng dụng mới vào dự án

    Cuối cùng, bạn cần phải thêm một ứng dụng Worklight mới vào thư mục apps (các ứng dụng) trong dự án của bạn. Để làm điều này, hãy nhấn phím chuột phải vào thư mục apps trong Todo Project (Dự án To do) và chọn New > Worklight Application (Ứng dụng Worklight) (Hình 5). (Nếu Ứng dụng Worklight không được liệt kê, hãy thử theo New > Other > Worklight Application). Đặt tên cho ứng dụng là Todo.

    Hình 5. Thêm ứng dụng vào dự án
    Hình 5. Thêm ứng dụng vào dự án

    Worklight sẽ tự động tạo ra cấu trúc tệp mà bạn cần để phát triển ứng dụng Worklight của mình. Thư mục common là nơi bạn sẽ đặt tất cả các tệp mà bạn cần để tạo ra ứng dụng của mình, gồm có các tệp HTML, JavaScript™ và CSS. Đặt tên ứng dụng là ToDo và hoàn thành phần tạo ứng dụng này.

    Hình 6. Cấu trúc của thư mục apps
    Hình 6. Cấu trúc của thư mục apps

Cài đặt máy chủ

Để thử nghiệm các ứng dụng mà bạn xây dựng, bạn sẽ cần phải xuất bản nó đến một máy chủ Worklight cục bộ. Các bước sau sẽ giúp bạn cài đặt máy chủ Worklight. IBM Worklight Studio V5 có chứa một máy chủ cục bộ có thể được sử dụng để thử nghiệm ứng dụng mà bạn đã tạo ra ở trên bằng cách xây dựng và chạy ứng dụng này. Hãy nhấn phím chuột phải vào ứng dụng và chọn Build All and Deploy (Xây dựng tất cả và Triển khai). Việc này sẽ khởi động máy chủ cục bộ trên cổng 8080, kích hoạt dự án này và triển khai ứng dụng này để bạn có thể thử nghiệm trong một trình duyệt.

Hình 7. Xây dựng và triển khai ứng dụng trên máy chủ cục bộ
Hình 7. Xây dựng và triển khai ứng dụng trên máy chủ cục bộ

Bạn có thể thấy quá trình của các sự kiện trong bàn điều khiển (Hình 8).

Hình 8. Bàn điều khiển máy chủ cục bộ
Hình 8. Bàn điều khiển máy chủ cục bộ

Bây giờ bạn có thể truy cập vào bàn điều khiển máy chủ của máy chủ cục bộ bằng cách chuyển đến http://localhost:8080/console trong trình duyệt của mình. Bạn sẽ thấy ứng dụng Todo mà bạn vừa mới triển khai.

Hình 9. Truy cập vào bàn điều khiển máy chủ cục bộ
Hình 9. Truy cập vào bàn điều khiển máy chủ cục bộ

Phát triển ứng dụng

Ứng dụng "Hello World" này sẽ trình bày sự lập lại đầu tiên về xây dựng và giả lập phát triển để giúp bạn làm quen với quá trình này và ứng dụng này sẽ được sử dụng trong Phần 2 với việc điền vào logic ứng dụng và màn hình thực tế cho ứng dụng Todo để giới thiệu toàn bộ mô hình phát triển ứng dụng Worklight. Để xây dựng ứng dụng của trình khởi động này:

  1. Chọn một thư viện JavaScript

    Thư viện JavaScript được lựa chọn cho ví dụ này là JQuery Mobile. Bạn có tùy chọn để sử dụng các thư viện như là di động Dojo hoặc Sencha Touch. Ngoài ra, bạn chỉ cần phát triển bằng cách sử dụng JavaScript thuần và tạo ứng dụng của bạn từ đầu.

  2. Tải về các thư viện

    Đối với ví dụ này, bạn cần phải tải về các thư viện Jquery sau:

    Hình 10. Các chi tiết về JQuery
    Hình 10. Các chi tiết về JQuery
  3. Di chuyển các tệp vào Worklight

    Di chuyển những tệp sau vào thư mục common/js:

    • jquery-1.7.1.min.js
    • jquery.mobile-1.1.0-rc.1.min.js

    Di chuyển những tệp sau vào thư mục common/css:

    • jquery.mobile-1.1.0-rc.1.css
    • jquery.mobile.structure-1.1.0-rc.1.min.css
    • jquery.mobile-1.1.0-rc.1/images

    Hình 11 cho thấy cấu trúc tệp sau khi các tệp ở trên đã được bổ sung vào dự án Worklight.

    Hình 11. Tham khảo thư viện JQuery trong ứng dụng Todo
    Hình 11. Tham khảo thư viện JQuery trong ứng dụng Todo
  4. Thêm mã khuôn mẫu

    Tài liệu hướng dẫn JQuery Mobile chứa mã dựng sẵn tiêu chuẩn để bắt đầu một ứng dụng di động đơn giản (Hình 12). Hãy chắc chắn rằng ứng dụng Todo có chứa mã này trong các thẻ <body>.

    Hình 12. Mã dựng sẵn của ứng dụng JQuery Mobile
    Hình 12. Mã dựng sẵn của ứng dụng di động JQuery
  5. Tạo các môi trường đặc trưng-thiết bị

    Vì bạn có ý định xây dựng ứng dụng Todo cho cả các thiết bị Android và iPhone, bạn cần tạo một môi trường Worklight cho từng kiểu thiết bị. Nhấn phím chuột phải vào thư mục Todo và chọn Worklight > Worklight Environment rồi Next (Hình 13).

    Hình 13. Chọn trình hướng dẫn thiết bị
    Hình 13. Trình hướng dẫn thiết bị

    Chọn iPhone (Máy điện thoại iPhone) và Android phones and tablets (Máy điện thoại Android và các máy tính bảng) trong danh sách và nhấn Finish (Hình 12). Việc này sẽ tạo thêm một dự án nữa cho Android và thêm cấu trúc thư mục trong ToDo.

    Hình 14. Tạo các thư mục đặc trưng-thiết bị
    Hình 14. Tạo các thư mục đặc trưng-thiết bị

Xây dựng một ứng dụng có thể triển khai vào các thiết bị iOS và Android

Worklight được cấu trúc bằng các tệp nguồn phổ biến (HTML, CSS và JavaScript) trong một thư mục gọi là common và các tệp đặc trưng-nền tảng trong các thư mục tương ứng của chúng; android với các tệp Android, iphone với các tệp iPhone và v.v.. Ví dụ, do quá trình xây dựng iOS và Android sẽ vẫn sử dụng JQuery, nên tệp jquery.js nằm trong common/jquery.js. Nếu bạn có một số mã đặc trưng iOS, thì mã JavaScript sẽ nằm trong ios-plugin.js và sẽ chuyển vào iphone/js/iso-plugin.js chứ không vào commonjs/iso-plugin.js. Worklight sẽ đảm bảo đồng bộ các tệp phổ biến vào từng môi trường thiết bị riêng.

Sau khi bạn có mã nguồn sẵn sàng triển khai, chỉ cần nhấn phím chuột phải vào ứng dụng Android của bạn và chọn Run as... > Build All and Deploy (Hình 15). Một thư mục mới sẽ xuất hiện trong vùng làm việc của bạn với tiêu đề ứng dụng của bạn là: Tên ứng dụng Android của chúng tôi.

Hình 15. Xây dựng và triển khai
Hình 15. Xây dựng và triển khai

Tiếp theo, nhấn phím chuột phải vào dự án đó và chọn Run as.. > Android Application (Ứng dụng Android) (Hình 14). Nếu bạn có một máy điện thoại Android thực sự được nối qua USB trong chế độ nhà phát triển được phép chạy theo các giá trị thiết lập, thì ứng dụng này sẽ tự động chạy, nếu không nó sẽ chạy trong AVD (Thiết bị ảo Android) hiện có. Việc này sẽ khởi động trình mô phỏng và hiển thị chuỗi ký tự "Hello World" mà bạn đã nhập vào ở trên (Hình 16 và 17).

Hình 16. Chạy ứng dụng Android
Hình 16. Chạy ứng dụng Android
Hình 17. Thử nghiệm ứng dụng Android
Hình 17. Thử nghiệm ứng dụng Android

Các bước triển khai ứng dụng của bạn trên một thiết bị iOS tương tự như quá trình triển khai Android. Nhấn phím chuột phải vào ứng dụng iPhone của bạn và chọn Run as... > Build All and Deploy rồi nhấn Run as XCode Project (Hình 18). Trong Xcode, bạn chỉ cần chọn hoặc là một thiết bị thực tế hoặc bộ giả lập iPhone hoặc iPad, rồi nhấn vào nút Run (Hình 19). Hình 20 cho thấy ứng dụng này đang chạy trong một môi trường iPhone.

Hình 18. Xây dựng và triển khai ứng dụng iOS
Hình 18. Xây dựng và triển khai ứng dụng iOS
Hình 19. Chọn thiết bị hoặc bộ giả lập để thử nghiệm
Hình 19. Chọn thiết bị hoặc bộ giả lập để thử nghiệm
Hình 20. Thử nghiệm ứng dụng iPhone
Hình 20. Thử nghiệm ứng dụng iPhone

Kết luận

Trong bài giới thiệu này, bạn thiết lập một môi trường phát triển Worklight và xây dựng một ứng dụng ví dụ "Hello World" đơn giản cho iPhone và Android. Vì thiết lập này đã có chế độ chạy thực của máy chủ Worklight và tất cả các phần mềm hỗ trợ, bạn sẵn sàng bắt đầu bổ sung nội dung và logic ứng dụng cho ứng dụng Todo của mình. Các bước này đã đưa ra một bản xem trước về cách bạn sẽ lặp lại qua luồng công việc phát triển để tạo ra một ứng dụng và thử nghiệm nó trên một thiết bị hoặc bộ giả lập.

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=836222
ArticleTitle=Làm việc với Worklight, Phần 1: Bắt đầu với ứng dụng Worklight đầu tiên của bạn
publish-date=09202012