xây dựng framework joo lập trình ứng dụng ria xây dựng thành phần quản lý luồng diễn tiến ứng dụng

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
──────── * ───────
ĐỒ ÁN
TỐT NGHIỆP ĐẠI HỌC
NGÀNH CÔNG NGHỆ THÔNG TIN
Xây dựng framework JOO lập trình ứng dụng
RIA: Xây dựng thành phần quản lý luồng diễn
tiến ứng dụng
Sinh viên thực hiện : Bùi Anh Dũng
Lớp Công nghệ phần mềm A – K51
Giáo viên hướng dẫn: PGS.TS Huỳnh Quyết Thắng
HÀ NỘI 6-2011
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
PHIẾU GIAO NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP
1. Thông tin về sinh viên
Họ và tên sinh viên: Bùi Anh Dũng
Điện thoại liên lạc: 0127 506 5837 Email:
Lớp: Công nghệ phần mềm Hệ đào tạo: Đại học chính quy
Đồ án tốt nghiệp được thực hiện tại: Bộ môn Công nghệ phần mềm, Viện CNTT & Truyền
Thông – Đại học Bách Khoa Hà Nội
Thời gian làm ĐATN: Từ ngày 15 / 01 / 2011 đến 25 / 05 /2011
2. Mục đích nội dung của ĐATN
Xây dựng framework JOO để đơn giản hóa và chuẩn hóa việc lập trình các ứng dụng RIA
bằng HTML/Javascript.
3. Các nhiệm vụ cụ thể của ĐATN
• Xây dưng phiên bản 1.0 của framework
• Ứng dụng framework để xây dựng hệ thống cụ thể (BKProfile)
4. Lời cam đoan của sinh viên:
Tôi – Bùi Anh Dũng - cam kết ĐATN là công trình nghiên cứu của bản thân tôi dưới sự
hướng dẫn của PGS.TS Huỳnh Quyết Thắng.

Các kết quả nêu trong ĐATN là trung thực, không phải là sao chép toàn văn của bất kỳ
công trình nào khác.
Hà Nội, ngày 12 tháng 4 năm 2011
Tác giả ĐATN
Bùi Anh Dũng
5. Xác nhận của giáo viên hướng dẫn về mức độ hoàn thành của ĐATN và cho phép bảo
vệ:
Hà Nội, ngày tháng năm
Giáo viên hướng dẫn
PGS.TS Huỳnh Quyết Thắng
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆP
Mục tiêu của người viết luận văn là xây dựng JOO - framework nhằm chuẩn hóa lại
mô hình lập trình các ứng dụng web, quản lý và tối ưu hóa hiệu năng xử lý dữ liệu ở máy
chủ, truyền dữ liệu phân tán qua mạng…
JOO ra đời giải quyết những trở ngại còn tồn tại trong quá trình xây dựng các ứng
dụng này: có khả năng tương đương với những ứng dụng thông thường trên máy tính cá
nhân, tương thích với nhiều loại nền tảng và phần cứng, hiệu năng truyền tải dữ liệu qua
mạng, hiệu năng xử lý dữ liệu ở máy chủ, khả năng phân tán
Người viết luận văn đã nghiên cứu trên các mô hình lập trình web truyền thống và
một số framework tiêu biểu, sau đó thiết kế các giải pháp nhằm kế thừa những ưu điểm,
khắc phục nhược điểm của những mô hình này.
Kiến trúc hệ thống của JOO là kết quả của quá trình nghiên cứu và tích hợp các giải
pháp thu được – đáp ứng hầu hết các thuộc tính về mặt chất lượng của ứng dụng web.
JOO đồng thời chuẩn hóa mô hình lập trình và mô hình xử lý dữ liệu ở các ứng dụng loại
này.
JOO đã được triển khai thực tế trên hệ thống BKProfile, hệ thống kết nối chia sẻ tri
thức. Với những lí do trên, JOO có khả năng tạo ra một hướng tiếp cận hiệu quả cho việc
lập trình ứng dụng web, đáp ứng được những hệ thống phân tán cỡ lớn, đồng thời giải
quyết những trở ngại trong lĩnh vực này.

Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
ABSTRACT OF THESIS
The goal of this thesis is to develop JOO Framework for normalizing web
application programming model, managing and optimizing server performance, data
transfer on the Internet, etc.
JOO deals with the many difficulties and problems which are still existed when
building high performance rich web applications: the application must provide the same
functionalities, same interactivity with these of normal desktop applications, must be
compatible with as many platforms and hardware as possible, must provide a high
performance in data transfer, server processing, scalability, etc.
The author has researched some major and featured platforms and frameworks, as
well as the traditional programming model, designed a solution which made use of some
advantages of those platforms and remedy their disadvantages.
The architecture of JOO Framework is the result of a long progress of researching,
implementing and testing; it satisfies most quality criteria in web programming framework,
also normalizes the programming model to help developers to build web applications more
quickly and efficiently.
JOO has been deployed and tested in some real systems, such as: BKProfile, IDEE,
Joob Location-based Social Network. To conclude, JOO has potential to promote a new
approach of programming web applications.
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
LỜI CẢM ƠN
Đầu tiên, em xin gửi lời cảm ơn chân thành sâu sắc đến các thầy cô giáo
trong trường đại học Bách Khoa Hà Nội nói chung và các thầy cô giáo trong Viện
Công nghệ thông tin và truyền thông nói riêng, nhất là các thầy cô giáo trong bộ
môn Công nghệ phần mềm, đã tận tình giảng dạy, cho em niềm đam mê với ngành
học, đồng thời truyền đạt cho em nhiều kiến thức, kinh nghiệm quý báu trong suốt 5
năm vừa qua.
Đặc biệt, em xin gửi lời cảm ơn đến thầy Huỳnh Quyết Thắng và thầy Lê
Quốc, những người đã hướng dẫn và chỉ bảo em trong suốt giai đoạn thực tập

chuyên ngành và toàn bộ quá trình làm đồ án tốt nghiệp. Làm việc với thầy, em
không chỉ nhận được những kiến thức chuyên ngành cần có, mà ở thầy em còn nhận
được nhiệt huyết tìm hiểu, sự đam mê công việc, tình cảm của một người anh, và
nhất là những định hướng, động viên. Nhờ đó em đã hình thành cho mình một định
hướng tương lai đầy đủ, vững chắc. Một lần nữa, xin cảm ơn thầy!
Không thể thiếu được là lời cảm ơn em muốn gửi tới thầy Lê Quốc – bộ môn
Công nghệ phần mềm, Viện Công nghệ thông tin và truyền thông, ĐH Bách Khoa
Hà Nội, và công ty Cazoodle Việt Nam, cùng với tất cả các thành viên trong nhóm
BKProfile Team. Thời gian làm việc cùng nhóm BKProfile tại công ty Cazoodle
dưới sự hướng dẫn, động viên và góp ý của thầy Lê Quốc cùng với sự cổ vũ và
nhiệt huyết làm việc đầy đam mê, sáng tạo của các thành viên trong đội ngũ phát
triển BKProfile, em đã học hỏi được rất nhiều từ tinh thần và cách làm việc của các
bạn. Không có thầy và các bạn, có lẽ đồ án này của em không bao giờ hoàn thành
tốt được.
Cuối cùng, em xin gửi lời cảm ơn chân thành nhất tới tất cả bạn bè, đồng
nghiệp, và người thân… Những người đã bên em, động viên, đóng góp ý kiến và
giúp đỡ em trong suốt khoảng thời gian vừa qua.
Hà Nội, tháng 5 năm 2011
Chân thành cảm ơn!
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
MỤC LỤC
PHIẾU GIAO NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP 2
TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆP 3
ABSTRACT OF THESIS 4
LỜI CẢM ƠN 5
MỤC LỤC 6
DANH MỤC CÁC BẢNG 7
DANH MỤC CÁC TỪ VIẾT TẮT 8
DANH MỤC CÁC HÌNH MINH HỌA 9
PHẦN MỞ ĐẦU 10

CHƯƠNG 1 – ĐẶT VẤN ĐỀ VÀ GIẢI PHÁP 11
CHƯƠNG 2 – JOO FRAMEWORK 20
2.4.Kết chương 43
CHƯƠNG 3 - ỨNG DỤNG JOO XÂY DỰNG HỆ THỐNG BKPROFILE 44
CHƯƠNG 4 - KẾT LUẬN VÀ ĐÁNH GIÁ 48
4.1.Kết quả đạt được 48
4.2.Những khó khăn và thuận lợi 48
4.3.Phương hướng phát triển 49
TÀI LIỆU THAM KHẢO 50
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
DANH MỤC CÁC BẢNG
Bảng 1 – So sánh tốc độ tải trang trung bình của ứng dụng web khi xây dựng bằng Zend
Framework & khi xây dựng bằng Joo framework 47
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
DANH MỤC CÁC TỪ VIẾT TẮT
STT Tên Giải thích
1 RIA Rich Internet Application, chỉ các ứng dụng chạy trên nền
web nhưng mang đầy đủ đặc tính của một ứng dụng desktop.
Được nhắc đến ở chương 1.
2 AJAX Asynchronous Javascript and XML. Thuật ngữ được ra đời
năm 2005 dùng để chỉ một tập hợp các công nghệ hỗ trợ việc
phát triển ứng dụng web theo cơ chế bất đồng bộ.
3 JSON Javascript Object Notation. Là định dạng để ký hiệu các đối
tượng của ngôn ngữ Javascript, nhưng rất hay được dùng
trong việc trao đổi dữ liệu, đặc biệt là trong mô hình AJAX.
4 SPA Single Page Application hay ứng dụng web một trang, chỉ
những ứng dụng web chỉ chạy trên một trang HTML duy
nhất, sử dụng AJAX để truyền tải dữ liệu.
5 MVC Model – View – Controller. Là một kiến trúc, đồng thời cũng
là một mẫu thiết kế trong lập trình hướng đối tượng. MVC

hay được sử dụng trong các hệ thống web.
6 GWT Google Web Toolkit. Một framework được phát triển bởi
Google, cho phép xây dựng ứng dụng một trang bằng Java
7 JSP JavaServer Pages. Là một nền tảng được phát triển bởi Sun,
được xây dựng trên ngôn ngữ Java, được sử dụng để phát
triển các trang web động.
7 HTML Hypertext Markup Language. Một loại ngôn ngữ đánh dấu sử
dụng các thẻ quy ước để hiển thị nội dung.
8 HTTP Hypertext Transfer Protocol. Giao thức truyền tải các dữ liệu
siêu văn bản. Là giao thức cơ bản của truyền tải dữ liệu trên
Internet
9 DOM Document Object Model. Là một quy chuẩn độc lập nền tảng
dành cho các nhà phát triển ứng dụng được dùng để biểu
diễn và tương tác với các ngôn ngữ HTML, XHTML, XML.
10 CSS Cascading Style Sheets, là một ngôn ngữ để biểu diễn mặt
hiển thị của các ngôn ngữ đánh dấu.
11 URL Uniform Resource Locator: Là một định dạng được sử dụng
để xác định một tài nguyên trên Internet, chỉ ra vị trí cũng
như phương thức để truy cập tài nguyên đó.
12 UI User Interface: Giao diện người dùng. Chỉ các thành phần
hiển thị và cung cấp tương tác giữa người dùng và hệ thống.
13 API Application Programming Interface. Là một giao diện cung
cấp cho các nhà phát triển ứng dụng để thao tác với một hệ
thống nào đó mà không cần phải quan tâm cách thức hoạt
động bên trong hệ thống đó.
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
DANH MỤC CÁC HÌNH MINH HỌA
Hình 1 – Ví dụ về văn bản web đơn giản 12
Hình 2 – Mô hình lập trình web động 13
Hình 3 – Ajax ứng dụng trong mô hình web truyền thống 14

Hình 4 – Mô hình xử lý dữ liệu của Spiar 21
Hình 5 – Mô hình xử lý dữ liệu của GWT 22
Hình 6 – Kiến trúc Joo framework 23
Hình 7 - Biểu đồ luồng diễn tiến của chương trình 25
Hình 8 - Các lớp đồ họa chính trong JOO 26
Hình 9 – Biểu đồ trạng thái Porlet trong Joo framework 28
Hình 10 – Biểu đồ tuần tự mô tả tương tác của portlet 29
với các thành phần giao diện trong Joo 29
Hình 11 – Biểu đồ trạng thái plugin trong Joo framework 30
Hình 12 – Biểu đồ thành phần mô tả tương tác giữa Porlet, Plugin và Template trong Joo
framework 33
Hình 13 – Biểu đồ thành phần của thành phần quản lý chương trình Application 35
Hình 14 – Biểu đồ lớp của thành phần Bootstrap 36
Hình 15 – Biểu đồ lớp thành phần Resource Manager 37
Hình 16 – Biểu đồ lớp thành phần Request Handler 38
Hình 17 – Biểu đồ lớp thành phần Porlet & Plugin Manager 39
Hình 18 – Biểu đồ tuần tự mô tả hoạt động của framework 40
Hình 19 – Mối liên hệ giữa tiêu chí chất lượng với các đặc tính của mô hình lập trình ứng
dụng web 43
Hình 20 – Kiến trúc thành phần hệ thống BKProfile 45
Hình 21 – Giao diện hệ thống BKProfile (www.bkprofile.com) 46
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
PHẦN MỞ ĐẦU
Tóm tắt các nhiệm vụ đề ra trong ĐATN
• Tìm hiểu mô hình lập trình ứng dụng web và các framework lập trình
• Xây dưng phiên bản 1.0 của JOO framework
• Ứng dụng framework để xây dựng hệ thống cụ thể (BKProfile)
Môi trường thực hiện đồ án:
• Bộ môn công nghệ phần mềm, Viện CNTT & TT – Đại học Bách Khoa Hà
Nội

Bố cục đồ án
• Phần mở đầu : giới thiệu tóm tắt nhiệm vụ đề tài, xác định mục tiêu và phạm
vi thực hiện.
• Phần nội dung : có kết cấu bốn chương, nội dung chính như sau:
Chương 1. Đặt vấn đề và giải pháp. Giới thiệu về mô hình xây dựng web
truyền thống, giới thiệu về ứng dụng RIA và các công nghệ hiện tại. Đề xuất
mục tiêu của một framework xây dựng ứng dụng web hiệu quả và nhiệm vụ
của đồ án tốt nghiệp.
Chương 2. Joo framework. Giới thiệu và đánh giá ưu nhược điểm của kiến
trúc một số framework xây dựng ứng dụng web. Từ đó đề xuất mô hình xây
dựng ứng dụng web Joo framework, bao gồm kiến trúc tổng quan của Joo
framework và kiến trúc chi tiết thành phần quản lý luồng diễn tiến của ứng
dụng trong Joo framework.
Chương 3. Ứng dụng Joo xây dựng hệ thống BKProfile. Sau khi phân tích
mô hình của Joo framework, để làm rõ tính hiệu quả của Joo, chương này
trình bày việc xây dựng BKProfile trên Joo, bao gồm: giới thiệu sơ lược hệ
thống BKProfile, vai trò của Joo framework trong việc xây dựng BKProfile.
Đánh giá Joo framework qua thực tiễn.
Chương 4. Kết luận và đánh giá. Đánh giá kết quả đạt được trong quá trình
làm đồ án. Các nhận định toàn bộ công việc đồ án và đề ra phương hướng
phát triển tiếp theo.
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
CHƯƠNG 1 – ĐẶT VẤN ĐỀ VÀ GIẢI PHÁP
1.1 Mô tả bài toán
1.1.1 Giới thiệu cách xây dựng web truyền thống
Khái niệm Web (WWW-World Wide Web) được ra đời từ thập kỉ 80, là cách
thức con người có thể đọc và viết thông qua máy tính kết nối với Internet [1]. Để
hiện thực hóa cách thức đó cần một công cụ là các website; mỗi website là một tập
hợp các trang web chứa các hình ảnh, video hoặc các loại dữ liệu điện tử khác. Mỗi
trang web là một văn bản thường được viết dưới dạng “plain text” đi kèm với các

câu lệnh của ngôn ngữ đánh dấu văn bản (HTML) nhằm định nghĩa cách hiển thị.
Những định nghĩa trên (được đông đảo cộng đồng sử dụng Internet chấp nhận và
xuất hiện trên trang wikipedia) giúp ta hình dung được cách xây dựng một website
truyền thống: là việc tạo ra những văn bản đi kèm các dòng mã lệnh định nghĩa cách
hiển thị văn bản đó.
Một ví dụ của một văn bản web có thể được hình dung như sau:
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
Nội dung chương 1:
• Giới thiệu về mô hình xây dựng web truyền thống.
• Giới thiệu về ứng dụng RIA và các công nghệ hiện tại.
• Mục tiêu của một framework xây dựng ứng dụng web hiệu quả.
• Nhiệm vụ của đồ án tốt nghiệp.
Hình 1 – Ví dụ về văn bản web đơn giản
Hình trên mô tả cách xây dựng một văn bản web với các thẻ HTML mô tả
cách thức hiển thị và kết quả khi hiển thị trang web trên trình duyệt. Các trang web
được xây dựng như trên được gọi là các trang web tĩnh.
Tuy nhiên hạn chế của phương pháp này là việc nội dung của các văn bản
web là cố định và mỗi khi muốn thay đổi cần phải soạn lại văn bản. Nếu như người
chủ trang web muốn cung cấp thông tin thay đổi theo thời gian (ví dụ: trang báo),
người dùng hoặc theo tương tác người dùng … thì các trang web tĩnh không còn
đáp ứng được nhu cầu này nữa, chính vì vậy các trang web động ra đời. Các trang
web động là các trang web mà nội dung trang web được sinh ra dựa vào vào tương
tác người dùng hoặc các điều kiện được người tạo ra trang web lập trình trước bằng
ngôn ngữ server script. Có rất nhiều loại server script và cách lập trình web động
như tựu chung có thể hình dung như sau:
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
Hình 2 – Mô hình lập trình web động
Có thể liệt kê hàng loạt các loại ngôn ngữ server script như: JSP, PHP, ASP,
ASP.NET, …
Trong khoảng từ những năm 2005, một phương thức xây dựng web mới trở

nên phổ biến, có tên gọi là Ajax. AJAX – Asynchronous JavaScript and XML
(Javascript và XML bất đồng bộ) không phải là một công nghệ mới mà là tên của
một nhóm các phương pháp được sử dụng tại phía máy người dùng để tạo ra các
ứng dụng web. Khác với các phương pháp truyền thống, một ứng dụng Ajax tạo ra
nhiều kết nối với server để lấy về những thông tin cần thiết mà không cần phải load
lại toàn bộ trang. Hoạt động của Ajax so với mô hình web truyền thống có thể được
hình dung như sau:
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
Hình 3 – Ajax ứng dụng trong mô hình web truyền thống
Sự ra đời của Ajax mở đầu cho một kỉ nguyên mới với việc các trang web
không còn là tập hợp các văn bản như trước đây nữa mà thực sự đã trở thành các
ứng dụng web với tính năng và sức mạnh không thua kém gì so với các ứng dụng
trên máy tính để bàn truyền thống. Các trang web như vậy được gọi là RIA – Rich
Internet Application.
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
1.1.2 Giới thiệu về ứng dụng RIA và các công nghệ hiện tại
1.1.2.1 Giới thiệu về RIA
Cụm từ ứng dụng Internet (Rich Internet Application ~ RIA) nhằm chỉ
những ứng dụng web có đặc điểm và tính năng của các ứng dụng desktop truyền
thống. RIA thường bao gồm một ứng dụng phía máy khách và một tầng ứng dụng
nằm phía máy chủ độc lập, cung cấp dữ liệu cho ứng dụng máy khách. RIA thường
mang 2 đặc điểm chính là chạy trên trình duyệt, không yêu cầu cài đặt và chạy trong
một môi trường bảo mật được gọi là sandbox nhằm hạn chế tương tác giữa ứng
dụng RIA và máy khách.
Cụm từ RIA được đưa ra vào tháng 3 năm 2002 bởi hãng Macromedia (đã sát
nhập vào Adobe), mặc dù khái niệm về RIA đã tồn tại trước đó khá lâu dưới những
cái tên như:
- Remote Scripting (Microsoft - 1998)
- X Internet Forrester Research – tháng 10 năm 2000
- Rich (web) clients

- Rich web application
Các ứng dụng web truyền thống xoay quanh cấu trúc client-server với một client
đảm trách rất ít nhiệm vụ. Dưới mô hình truyền thống này, tất cả các xử lý được
máy chủ đảm trách và phía máy khách chỉ hiển thị các dữ liệu tĩnh (HTML là một
ví dụ). Điều tệ hại nhất của mô hình này là tất cả các tương tác với ứng dụng buộc
phải thông qua máy chủ ,yêu cầu dữ liệu phải được gửi tới máy chủ, máy chủ đáp
trả và các trang web được nạp lại (reload) bên phía máy khách. Điều này gây lãng
phí đường truyền rất lớn vì có rất nhiều thông tin được gửi từ máy chủ về phía máy
khách nhiều lần (các banner quảng cáo là một ví dụ). Việc sử dụng mô hình mà máy
khách đảm nhận nhiều nhiệm vụ hơn, RIA có thể tránh được rất nhiều sự trùng lặp
dữ liệu.
Các công nghệ Internet phát triển liên tục và từ từ qua thời gian nhằm đáp ứng
các yêu cầu mới, vậy nên khó nói cho đủ các đặc điểm của ứng dụng RIA. Nhưng
tất cả các ứng dụng RIA đều có chung một đặc tính: chúng chứa một lớp xử lý nằm
giữa người dùng và máy chủ được gọi là client engine. Client engine đóng vai trò là
một máy ảo để chạy các ứng dụng RIA, các client engine này thường tồn tại dưới
dạng các phần mở rộng của trình duyệt. Client engine đảm nhận việc xử lý giao
diện và kết nối máy chủ.
Những gì làm được trong một ứng dụng RIA có thể bị giới hạn bởi khả năng của
hệ thống mà người dùng có. Nhưng nói chung các client engine được lập trình để
chạy các chức năng của ứng dụng mà người thiết kế nó tin tưởng rằng sẽ nâng cao
hơn một vài khía cạnh nào đó của giao diện người dùng, khả năng tương tác, … so
với ứng dụng web bình thường. Hơn thế nữa, khi thêm vào client engine các ứng
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
dụng phía máy khách sẽ có khả năng hoạt động bình thường trong khi các xử lý
phía máy chủ vẫn diễn ra đồng thời và gửi kết quả về cho máy khách hiển thị.
Các công nghệ tạo nên RIA có rất nhiều nhưng số lượng nổi bật thì cũng chỉ
đếm trên đầu ngón tay. Để tạo nên một nền phát triển các ứng dụng RIA hoàn chỉnh
cần rất nhiều công sức và giải quyết rất nhiều vấn đề phức tạp, từ tương thích trình
duyệt đến kết nối máy chủ với máy khách.

1.1.2.2 Các công nghệ RIA
Số lượng các công nghệ tạo nên các ứng dụng RIA có rất nhiều, nhưng có
thể liệt kê ra một vài công nghệ chính sau:
Java applet (Sun Microsystem)
Java applet ra đời từ năm 1995 và có thể được coi là nền tảng đầu tiên để tạo
nên các ứng dụng RIA. Java applet có nhiều ưu điểm như chạy khá nhanh so với
các ứng dụng tương tự viết bằng C hay C++, đa nền, … nhưng cùng thời gian Java
applet cũng bộc lộ các điểm yêu thuộc về bản chất như: buộc phải chạy cùng máy
ảo Java làm chậm thời gian khởi tạo ứng dụng, vấn đề tương thích trình duyệt, …
và hiện nay Java applet còn không nhiều thị phần trong thị trường RIA. Tuy nhiên
với các ứng dụng web lớn sử dụng JSP thì Java applet vẫn là một sự lựa chọn ưa
thích.
Adobe Flash (Adobe)
Nhắc đến Flash người ta thường nói đến các hoạt cảnh động nhiều hơn là
một nền tảng ứng dụng. Nhưng với việc Macromedia sát nhâp với Adobe và sau đó
là sự ra đời của Flex (một nền tảng dựa trực tiếp trên Flash, thiết kế chuyên biệt cho
RIA vào năm 2004) thì Flash đã trở thành một nền tảng tốt hơn giành cho RIA.
Việc lập trình RIA trên flex đã đơn giản hơn rất nhiều với việc sử dụng ngôn ngữ
MXML để định nghĩa giao diện và sự kiện.
Silverlight (Microsoft)
Silverlight ra đời tháng 4 năm 2007, được phát triển trên việc tăng cường sự
kết nối giữa ứng dụng RIA và trình duyệt. Phiên bản Silverlight 1.0 là một bộ thư
viện Javascript nên đảm bảo tính đa nền, nhưng từ phiên bản 2.0 bắt buộc phải
có .NET cài sẵn trên máy khách, điều này làm cho đối tượng sử dụng được
Silverlight giảm đi rất nhiều.
Javafx (Sun Microsystem)
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
Javafx ra đời từ năm 2007 nhưng chỉ thực sự nổi lên trong năm 2009. Javafx
được coi là sự kế tục của Java Applet nhưng mang rất nhiều ưu điểm của Java
Applet và còn hỗ trợ media mạnh mẽ, hỗ trợ 3D …

AJAX
AJAX (asynchronous JavaScript and XML) là một công nghệ kết hợp giữa
Javascript và Xml nhằm tạo nên các ứng dụng RIA. Bản thân AJAX không mới,
nhưng phải đến năm 2005 thì nó mới giành được sự quan tâm của các lập trình viên
trên toàn cầu. Các bộ thư viện hỗ trợ AJAX (viết bằng javascript) như JSON, Dojo
Toolkit, jQuery, Prototype, … đã phát triển rất đa dạng và lớn mạnh bởi cộng đồng
mã nguồn mở và Google.
Google Web Toolkit
Trong 6 công nghệ RIA được nêu ở trên, các công nghệ từ 1 -> 4 đều chạy
dựa trên một máy ảo là một plug-in nhúng vào trình duyệt nên việc so sánh giữa các
công nghệ đó với JOO không quá tương đương, chính vì vậy trong phần 2 của đồ án
khi đi sâu vào phân tích các công nghệ RIA đã có, người viết luận văn chỉ tập trung
vào công nghệ 5 và 6.
1.1.3 Mục tiêu của một framework xây dựng ứng dụng web hiệu quả
Với các phân tích đưa ra ở mục trên, người viết luận văn đề xuất một framework
xây dựng web hiệu quả phải thỏa mãn 6 tiêu chí sau (dựa theo [2]):
- Khả năng tương tác người dùng
- Độ trễ trong cảm nhận người dùng: khoảng thời gian kể từ lúc người dùng
tiến hành 1 thao tác đến thời điểm đầu tiên họ nhận được phản hồi của hệ
thống.
- Hiệu năng của việc truyền gửi dữ liệu qua mạng: Đước tính theo dung lượng
được truyền gửi giữa máy khách và máy chủ.
- Chi phí công sức để xây dựng ứng dụng: Thời gian để hoàn thiện ứng dụng
trên nền framework
- Tính khả chuyển: Khả năng tương thích giữa nhiều trình duyệt và nhiều loại
nền tảng.
Các tiêu chí trên chính là các mục tiêu mà JOO hướng tới, để đạt được các tiêu
chí trên, người viết luận văn đặt ra các đặc điểm mà JOO cần phải đạt được:
- Tương tác bất đồng bộ với server: Mọi cơ chế gửi nhận đều dựa trên AJAX
- Dữ liệu truyền gửi giữa client và server nhỏ: Không bao gồm các thành phần

hiển thị
- Sing page application: Mỗi khi thay đổi trang chỉ tải thêm các thành phần
mới mà không cần tải lại toàn bộ trang. Đặc tính này tận dụng triệt để cơ chế
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
cache của trình duyệt: Dữ liệu được tải về một lần và cache tại trình duyệt
máy khách, do đó những lần tiếp theo vào trang web, máy khách hầu như
không phải tải lại dữ liệu trang web lần nữa.
- Việc sinh ra và quản lý các thành phần hiển thị đều ở phía client, giảm bớt
công việc cho server.
- Phân tách trang thành các portlet và plugin, dễ quản lý và cấu hình. Mỗi
portlet là một thành phần độc lập, liên kết lỏng lẻo với các thành phần khác.
- Scalable: Việc trao đổi dữ liệu giữa client và server được thông qua Ajax
Interface, đảm bảo tính độc lập giữa client và server. Khi đó một client có thể
được phục vụ bởi nhiều server mà không ảnh hưởng đến kết quả.
- Sử dụng bộ UI widget để xây dựng các thành phần giao diện, giảm bớt thời
gian xây dựng ứng dụng; đồng thời đảm bảo tính linh hoạt khi tạo giao diện,
hướng tới các ứng dụng có giao diện sáng tạo tương tự như các ứng dụng sử
dụng Adobe Flash.
1.2 Nhiệm vụ của đề tài
1.2.1 Nhiệm vụ cụ thể trong phạm vi đề tài
• Nghiên cứu và đánh giá về các mô hình xây dựng ứng dụng web, cách
xây dựng framework, Javascript, HTML5, CSS3, RIA (Rich Internet
Application).
• Thiết kế framework hỗ trợ xây dựng RIA bằng HTML/Javascript.
• Xây dựng ứng dụng sử dụng framework nhằm minh họa cho sức mạnh
của framework. Ứng dụng xây dựng minh họa: BKProfile
1.2.2 Nhiệm vụ cụ thể trong phạm vi đồ án
• Nghiên cứu và đánh giá về các mô hình xây dựng ứng dụng web, cách
xây dựng framework, Javascript, HTML5, CSS3, RIA.
• Thiết kế và xây dựng Joo framework: Xây dựng thành phần quản lý

luồng diễn tiến của ứng dụng.
• Xây dựng ứng dụng BKProfile sử dụng Joo framework: cụ thể là minh
họa việc sử dụng các thành phần quản lý luồng diễn tiến trong ứng dụng
BKProfile.
1.3 Kết chương
Tóm lại trong chương một, người viết luận văn đã giới thiệu sơ qua về mô
hình xây dựng web truyền thống, bài toán xây dựng các ứng dụng RIA và các công
nghệ hiện tại. Từ đó có thể thấy mô hình lập trình web truyền thống khi áp dụng
vào bài toán xây dựng ứng dụng RIA còn nhiều vấn đề tồn tại như hiệu năng hệ
thống, quản lý lưu lượng truyền tải dữ liệu giữa máy chủ - máy khách. Trong phần
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
1.2, người viết luận văn đã đề xuất mục tiêu của một framework xây dựng ứng dụng
web hiệu quả và trình bày cụ thể về mục tiêu, nhiệm vụ của đồ án tốt nghiệp.
Ở chương 2 sẽ đi sâu vào trình bày cụ thể hơn những phân tích, đánh giá trên
những framework lập trình ứng dụng RIA hiện tại, từ đó đưa ra ý tưởng và phân
tích về kiến trúc tổng quan của Joo framework và phần nội dung chính của đồ án:
kiến trúc chi tiết của thành phần quản lý luồng diễn tiến của ứng dụng trong Joo
framework.
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
CHƯƠNG 2 – JOO FRAMEWORK
2.1. Kiến trúc của các framework xây dựng ứng dụng web truyền thống và
phân tích đánh giá
Trước khi phân tích ưu nhược điểm của các framework trước, chúng ta sẽ
xem xét lại mô hình lập trình web truyền thống, hay còn gọi là mô trình lập trình
web nhiều trang (multi-page website)[2].
Một website thông thường được cấu tạo từ nhiều trang, mỗi trang phục vụ
cho một mục đích khác nhau (ví dụ: một website bán hàng trực tuyến thường có các
trang để tìm kiếm hàng hóa, trang để đặt mua qua mạng và trang để thanh toán). Mô
hình này hoạt động theo cơ chế thay đổi trạng thái giữa các trang. Người dùng từ
trang này sẽ truyền đến trang khác bằng các đường link. Mỗi khi truyền trạng thái,

phía máy chủ sẽ xử lý lại toàn bộ trang web. Mô hình này tuy có ưu điểm là việc lập
trình đơn giản tuy nhiên lại có nhiều nhược điểm về hiệu năng của hệ thống:
• Mỗi khi chuyển trang, phía máy chủ và máy khách đều phải xử lý lại toàn bộ
trang web: Phía máy chủ phải xử lý lại trang web và gửi lại máy khách nội
dung, phía máy khách thì phải tải lại HTML và xử lý lại javascript. Trong
khi đó, thông thường các trang web đều có những thành phần không thay đổi
qua các trang,
• Dữ liệu truyền giữa máy chủ và máy khách rất lớn (bao gồm cả dữ liệu
HTML, javascript. CSS và các thành phần liên quan). Việc lập trình các
trang web “động” không tận dụng được cơ chế cache của browser.
• Khả năng tương tác người dùng không cao, do người dùng phải đợi một thời
gian lâu khi chuyển trang.
Cơ chế tải nội dung trang web không đồng bộ (async loading of content) lần
đầu tiên được ứng dụng thực tế trong bộ Java Applet của Java năm 1995. Kể từ đó
đã có nhiều công nghệ mới được phát triển dựa trên cơ chế bất đồng bộ, như IFrame
được giới thiệu trong IE năm 1996, XMLHTTP năm 1999 và về sau là
XMLHttpRequest. Thuật ngữ Ajax ra đời năm 2006 đánh dấu một bước nhảy vọt
trong công nghệ lập trình web[4][3], tuy rằng Ajax không phải một thứ mới mẻ tại
thời điểm đó.
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
Nội dung chương 2:
• Giới thiệu và đánh giá ưu nhược điểm của kiến trúc một số framework
xây dựng ứng dụng web truyền thống.
• Đề xuất mô hình xây dựng ứng dụng web Joo Framework
o Kiến trúc tổng quan
o Kiến trúc chi tiết thành phần quản lý luồng diễn tiến của ứng dụng
Tận dụng mô hình truyền tải bất đồng bộ, một hướng tiếp cận mới được ra
đời năm 2005, khởi xướng bởi Steve Yen là Single-page application (SPA)[1]. Theo
hướng tiếp cận này, toàn bộ nội dung của trang web được tải về trong một lần duy
nhất, bao gồm HTML, Javascript, CSS. Khi cần thay đổi nội dung, phía máy khách

chỉ cần tải thêm những nội dung mà thay đổi. Một mô hình thực tế của hướng tiếp
cận này là Spiar, được Fielding giới thiệu năm 2000[2].
Hình 4 – Mô hình xử lý dữ liệu của Spiar
Trong mô hình này, cả server và client đều lưu trữ thành phần tương tác
người dùng, nhưng server chỉ lưu trữ dữ liệu và các hoạt động của thành phần này,
còn client chỉ lưu trữ phần hiển thị của chúng (HTML). Mỗi khi có một sự kiện
được phát sinh ở client, client thông báo cho server, server dựa vào sự kiện, cùng
với trạng thái hiện thời của các thành phần tương tác người dùng để quyết định
trạng thái tiếp theo. Sau đó server thông báo lại cho client sự thay đổi. Điểm đặc
biệt của mô hình này là ở bộ Mã hóa/Giải mã Thay đổi (Delta Encoder/Decoder).
Nhờ có bộ này, dữ liệu truyền gửi giữa client và server chỉ là sự thay đổi giữa 2
trạng thái kế tiếp chứ không phải toàn bộ trang web. Mô hình này rất giống với các
mô hình truy cập từ xa[7].
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
Client browser
Server application
Service Provider
Encod
er
DOM
Decoder
Ajax Engine
UI
∆S
∆C
Event ∆ Update
Event
UI Comp
HTTP
∆ Update

∆ Update
∆ Update
∆ Update
Invoke
Tuy có những ưu điểm như trên, nhưng mô hình này vẫn còn nhược điểm:
Server phải xử lý khá nhiều công việc, bao gồm cả việc quản lý trạng thái của các
thành phần tương tác người dùng trên client. Mặc dù nó thích hợp cho việc xây
dựng các ứng dụng truy cập từ xa, khi mà số lượng người dùng nhỏ, nhưng lại
không thích hợp với các ứng dụng có số lượng người dùng lớn (như một trang web
thông thường)
Để khắc phục nhược điểm đó, Google đã đưa ra một mô hình khác dựa trên
mô hình Spiar trong framework GWT [1][2] của mình.
Hình 5 – Mô hình xử lý dữ liệu của GWT
Theo mô hình này, việc quản lý hoạt động của các thành phần tương tác
được chuyển về phía client, làm giảm bớt công việc của server.
GWT có một điểm mạnh khác là nó phân tách được thời gian biên dịch (bằng
Java) và thời gian chạy (bằng Javascript). Việc phát triển bằng GWT dễ dàng hơn vì
cấu trúc của một chương trình được phân tách thành các thành phần sử dụng lại
được. Đây cũng là một điểm nổi bật mà người viết luận văn đã áp dụng trong JOO
Framework.
Tuy nhiên GWT được xây dựng trên nền tảng Java, việc lập trình và biên
dịch đều bằng Java, đôi lúc không tận dụng được thế mạnh của Javascript và mặt
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
Client browser
Server application
Service Provider
Encod
er
DOM
Decoder

Ajax Engine
UI
∆S
∆C
Event ∆ Update
Event
HTTP
∆ Update
∆ Update
Invoke
khác, nó lại không hỗ trợ khá nhiều bộ thư viện hay dùng của Java. Ngoài ra, mặc
dù cũng là một Ajax framework, nhưng GWT tập trung vào việc xây dựng các ứng
dụng trên client cho Java Servlet. Quá trình phát triển ứng dụng cũng hơi phức tạp
do yêu cầu phải có server bằng Java.
Từ việc nghiên cứu những ưu nhược điểm của các mô hình và framework
hiện tại, JOO Framework đã tận dụng được một số ưu điểm của các framework kể
trên, như cơ chế Ajax[10], thiết kế trang web dạng SPA[7], tổ chức cấu trúc chương
trình thành các thành phần độc lập, liên kết lỏng lẻo với nhau và dễ dàng cấu hình.
Phần sau sẽ phân tích rõ hơn kiến trúc của framework cũng như cấu trúc của một
ứng dụng được xây dựng trên nền framework.
2.2. Đề xuất một framework hiệu quả - JOO Framework
JOO Framework là một framework hỗ trợ xây dựng các ứng dụng web một
trang trên máy khách (chạy trên các trình duyệt hỗ trợ Javascript). Tư tưởng cơ bản
của JOO là tải toàn bộ mã nguồn phía client về trong một lần đầu tiên và được
cache lại tại ngay trình duyệt. Những lần sau đó, và cả lúc chuyển trang, chỉ có
những dữ liệu hay phần thay đổi mới được cập nhật bằng cách gửi yêu cầu lên máy
chủ. Toàn bộ việc trao đổi giữa client và server đều là AJAX.
2.2.1. Kiến trúc tổng quan
Hình 6 – Kiến trúc Joo framework
Kiến trúc hệ thống bao gồm 4 thành phần chính:

* Porlet & Plugins: tiếp nhận các yêu cầu từ người dùng dưới dạng các sự kiện
(event), sau đó gửi các Ajax request lên máy chủ và nhận về dữ liệu dưới dạng
JSON. Các plugin & porlet sẽ xử lý dữ liệu dạng JSON gửi cho tầng Application,
thông qua UI hiển thị dữ liệu. Điểm khác biệt giữa portlet và plugin là: portlet là các
thành phần hiển thị và xử lý dữ liệu độc lập và được gọi khi trang web được tải, còn
plugin chỉ được gọi với những sự kiện nhất định.
* Event Manager: bộ quản lý sự kiện: sử dụng mẫu thiết kế Observer, giúp các
portlet, plugin có thể tương tác với nhau thông qua sự kiện, làm cho cấu trúc
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
JOO framework architecture
UI
Portlets, Plugins & Template
Application
Event
Manager
chương trình trở nên lỏng lẻo và các portlet, plugin có thể hoạt động độc lập với
nhau. Các sự kiện có thể được sinh ra do tương tác của người dùng hoặc do chính
portlet/plugin sinh ra.
* Application: bao gồm 4 thành phần chính:
• Bộ khởi tạo (Bootstrap)
• Bộ quản lý tài nguyên (Resource Manager)
• Bộ xử lý yêu cầu (Request Handler)
• Bộ quản lý porlet & plugin (Porlet&Plugin Manager)
Ở tầng này xử lý các template và layout, thực thi các cấu hình cho porlet và
plugin. Thông qua lớp Bootstrap tiếp nhận các yêu cầu, lớp xử lý yêu cầu gửi các
yêu cầu này đến plugin & porlet tương ứng. Các lớp Plugin Manager, Porlet
Container kiểm tra và nạp (load) các plugin, porlet tương ứng.
* UI: bao gồm các lớp và các thành phần (widget) hỗ trợ xây dựng giao diện giao
tiếp với người dùng. UI trực tiếp nhận các yêu cầu của người dùng và thông qua bộ
quản lý sự kiện (Event Manager) gửi sự kiện đến tầng ứng dụng (Application) và

tầng Porlets & Plugins để xử lý.Hoạt động của chương trình có thể được thể hiện
qua biểu đồ diễn tiến như sau:
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A
Hình 7 - Biểu đồ luồng diễn tiến của chương trình
Một phần rất được chú trọng trong JOO là thiết kế các lớp hiển thị để có thể
giúp lập trình viên tạo được các chương trình có giao diện đẹp và thuận tiện như các
chương trình viết bằng Adobe Flash. Cây kế thừa của các lớp hiển thị và các lớp sự
kiện chính của JOO được trình bày khái quát như sau:
Sinh viên thực hiện: Bùi Anh Dũng - 20060543 Khóa 51 Lớp Công nghệ phần mềm A