xây dựng và phát triển ứng dụng hỗ trợ thiết kế phần mềm trên môi trường web

TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
KHOA CÔNG NGHỆ THÔNG TIN
LỚP CỬ NHÂN TÀI NĂNG


LÊ HUY CHƯƠNG
LÊ NGUYỄN THIỆN ÂN


XÂY DỰNG VÀ PHÁT TRIỂN ỨNG DỤNG
HỖ TRỢ THIẾT KẾ PHẦN MỀM
TRÊN MÔI TRƯỜNG WEB




KHÓA LUẬN TỐT NGHIỆP CỬ NHÂN CNTT


TP. HCM, 2013
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
KHOA CÔNG NGHỆ THÔNG TIN
LỚP CỬ NHÂN TÀI NĂNG


LÊ HUY CHƯƠNG – 0912041
LÊ NGUYỄN THIỆN ÂN – 0912021

XÂY DỰNG VÀ PHÁT TRIỂN ỨNG DỤNG
HỖ TRỢ THIẾT KẾ PHẦN MỀM
TRÊN MÔI TRƯỜNG WEB

KHÓA LUẬN TỐT NGHIỆP CỬ NHÂN CNTT

GIÁO VIÊN HƯỚNG DẪN
TS. NGUYỄN VĂN VŨ



KHÓA 2009 – 2013


1



NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………

………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
TP. Hồ Chí Minh, ngày … tháng …… năm 2013
Giáo viên hướng dẫn

2



NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………

Khóa luận đáp ứng yêu cầu của Khóa luận cử nhân CNTT.
TP. Hồ Chí Minh, ngày … tháng …… năm 2013
Giáo viên phản biện



3

LỜI CẢM ƠN
Chúng em xin chân thành cảm ơn Khoa Công nghệ Thông tin, trường Đại học Khoa
học Tự nhiên TP. Hồ Chí Minh đã tạo điều kiện cho chúng em thực hiện đề tài khóa
luận tốt nghiệp này.
Chúng em xin gửi lời cảm ơn sâu sắc đến TS. Nguyễn Văn Vũ, người đã trực tiếp
hướng dẫn và tận tình chỉ bảo chúng em trong suốt thời gian thực hiện đề tài. Thầy đã
truyền đạt cho chúng em nhiều kiến thức quan trọng, cũng như nhiều ý tưởng thú vị, là
nguồn động lực để chúng em thực hiện đề tài với tinh thần làm việc và nghiên cứu
khoa học nghiêm túc.
Chúng em xin chân thành cảm ơn các Thầy và các Cô trong Khoa đã cho chúng em
những kiến thức quý báu trong suốt thời gian khóa học, cho chúng em một nền tảng lý
thuyết vững chắc và những kỹ thuật cơ bản thiết yếu Chúng em cũng xin chân thành
cám ơn Thầy Trần Minh Triết, chủ nhiệm lớp. Thầy đã tận tình quan tâm và thông tin
cho lớp những thông tin quan trọng trong thời gian học cũng như trong thời gian chúng
em làm luận văn.
Chúng con xin chân thành cảm ơn bố mẹ, anh chị em và tất cả người thân trong gia
đình đã tạo mọi điều kiện tốt nhất, động viên khích lệ chúng con trong quá trình học
tập nói chung và quá trình làm khóa luận tốt nghiệp nói riêng.
Với tinh thần làm việc nghiêm túc, chúng em đã hoàn thành được mục tiêu đề ra
ban đầu của khóa luận. Tuy nhiên đây chỉ mới là những bước thử nghiệm ban đầu, vì
thế chúng em mong muốn nhận được sự giúp đỡ, chỉ bảo và góp ý của các Thầy Cô và
các bạn để không ngừng hoàn thiện cả mô hình lý thuyết lẫn ứng dụng.

TP. Hồ Chí Minh, tháng 7 năm 2013

4

Khoa Công Nghệ Thông Tin
Lớp Cử nhân tài năng
ĐỀ CƯƠNG CHI TIẾT
Tên Đề Tài: Xây dựng và phát triển ứng dụng hỗ trợ thiết kế phần mềm trên môi
trường Web.
Giáo viên hướng dẫn: TS. Nguyễn Văn Vũ
Thời gian thực hiện: từ 20/10/2012 đến 28/6/2013
Sinh viên thực hiện:
+ Lê Huy Chương - 0912041
+ Lê Nguyễn Thiện Ân – 0912021
Loại đề tài:
+ Tìm hiểu công nghệ và phát triển ứng dụng, cụ thể là tìm hiểu công nghệ lập
trình Web để xây dựng một ứng dụng Web theo yêu cầu đặc tả của đề tài.
+ Nghiên cứu và tổng hợp hiện trạng các sản phẩm liên quan đến hướng phát
triển của đề tài để làm cơ sở xây dựng, phát triển ứng dụng theo yêu cầu của đề
tài.
Nội Dung Đề Tài:
Nội dung và yêu cầu đề tài:
+ Nghiên cứu và tổng kết hiện trạng về các công cụ và môi trường hỗ trợ thiết
kế phần mềm trên môi trường Web và Desktop.
+ Nghiên cứu các công nghệ lập trình Web, các hệ thống thư viện lập trình
Web, các hệ mã nguồn mở cho phép phát triển ứng dụng Web theo giao diện
thân thiện với người dùng cuối.
+ Triển khai thiết kế và cài đặt ứng dụng dựa trên các kết quả nghiên cứu, đáp
ứng được các nhu cầu cơ bản trong hoạt thiết kế phần mềm trên môi trường
Web.

5

Phương pháp thực hiện:
+ Tận dụng các nguồn tham khảo trên Web, thông qua các trang báo điện tử,
diễn đàn của các đội ngũ phát triển, các blog của các lập trình viên bên cạnh
các tài liệu chính thức như sách và bài báo khoa học.
+ Tận dụng các sản phẩm có sẵn bao gồm sản phẩm trên môi trường Web và
Desktop.
Kết quả khóa luận:
+ Ứng dụng thử nghiệm cung cấp dịch vụ hỗ trợ thiết kế phần mềm trên môi
trường Web.
+ Báo cáo tổng hợp nghiên cứu hiện trạng về các công cụ và môi trường hỗ trợ
thiết kế phần mềm trên môi trường Web và Desktop.
Kế Hoạch Thực Hiện:
20/10/2012 – 31/10/2012: Tiếp nhận đề tài.
Nhóm liên hệ giáo viên hướng dẫn xin được tham gia đề tài. Giáo viên
hướng dẫn giới thiệu đề tài và hai bên cùng tham gia thảo luận về quá trình
làm đề tài.
1/1/2012 – 20/11/2012: Tìm hiểu các sản phẩm hiện có.
Nhóm tìm các công cụ có những chức năng tương tự hiện có trên thị trường.
Sau đó trải nghiệm và rút ra những kết luận tổng quát về hiện trạng của các
công cụ này.
21/11/2012 – 18/12/2012: Đánh giá tính khả thi của đề tài.
Xây dựng chương trình mẫu đơn giản để đánh giá tính khả thi của đề tài.
19/12/2012 – 19/2/2013: Xác định và phân tích các yêu cầu.
Tổng hợp các chức năng của các công cụ hiện có, tìm hiểu cách thức hoạt
động của các chức năng. Sau đó phân tích, chọn lọc các chức năng sẽ triển
khai.
20/2/2013 – 19/3/2013: Tìm hiểu các công nghệ lập trình web và các thư

viện mã nguồn mở.
Nhóm nghiên cứu các công nghệ lập trình web hiện đại. Nghiên cứu các thư

6

viện mã nguồn mở hiện có trên thị trường. Tiến hành sử dụng thử và đánh
giá các thư viện mã nguồn mở này, từ đó lựa chọn bộ thư viện tối ưu nhất để
xây dựng hệ thống.
20/3/2013 – 14/4/2013: Thiết kế hệ thống.
Nhóm phân tích các thành phần và sự liên kế giữa các thành phần bên trong
hệ thống. Xây dựng kiến trúc tổng quát cho toàn bộ hệ thống.
15/4/2013 – 8/6/2013: Cài đặt.
Sau khi đã chọn được các thư viện mã nguồn mở thích hợp, xác định xong
kiến trúc và chức năng của hệ thống, nhóm tiến hành cài đặt hệ thống.
10/6/2013 – 28/6/2013: Tổng hợp và báo cáo.
Nhóm tổng hợp các nghiên cứu đã thực hiện, các tài liệu đã ghi chép trong
suốt quá trình làm việc; trình bày các kết quả thành bản báo cáo hoàn thiện

Xác nhận của GVHD




TS Nguyễn Văn Vũ
Ngày …… tháng …… năm 2013
Sinh viên thực hiện



Lê Huy Chương Lê Nguyễn Thiện Ân



7

MỤC LỤC

LỜI CẢM ƠN 3!
MỤC LỤC 7!
DANH MỤC HÌNH 10!
DANH MỤC BẢNG 12!
THUẬT NGỮ VÀ CÁC TỪ VIẾT TẮT 13!
TÓM TẮT KHÓA LUẬN 15!
CHƯƠNG 1.! GIỚI THIỆU 16!
1.1.! Ứng dụng thiết kế trong dự án phần mềm 16!
1.2.! Hạn chế của những công cụ thiết kế trên desktop 16!
1.3.! Nhu cầu xây dựng công cụ thiết kế tích hợp trên Web 18!
1.4.! Mục tiêu khóa luận 19!
1.5.! Kết quả khóa luận 20!
1.6.! Cấu trúc của báo cáo khóa luận 21!
CHƯƠNG 2.! NGHIÊN CỨU KIẾN THỨC NỀN TẢNG 22!
2.1.! UML 22!
2.1.1.! UML là gì? 22!
2.1.2.! Tại sao cần UML? 23!
2.1.3.! Các lược đồ UML. 24!
2.2.! Các công nghệ lập trình web 30!

8

2.2.1.
! JavaScript 30!

2.2.2.! HTML5 31!
2.3.! Một số ứng dụng liên quan 33!
2.3.1.! Công cụ thiết kế phần mềm trên desktop 33!
2.3.2.! Công cụ thiết kế phần mềm trên web 34!
CHƯƠNG 3.! KHẢO SÁT VÀ XÁC ĐỊNH YÊU CẦU 36!
3.1.! Khảo sát hiện trạng. 36!
3.2.! Yêu cầu phần mềm của hệ thống 36!
CHƯƠNG 4.! THIẾT KẾ VÀ CÀI ĐẶT HỆ THỐNG 39!
4.1.! Kiến trúc tổng quan 39!
4.1.1.! Thành phần phía server 40!
4.1.2.! Thành phần phía client 42!
4.1.3.! Hệ thống Framework 43!
4.1.4.! Kết nối và giao tiếp 44!
4.2.! Thiết kế hệ thống 45!
4.2.1.! Sơ đồ lớp 45!
4.2.2.! Thiết kế giao diện 49!
4.2.3.! Cài đặt hệ thống 54!
CHƯƠNG 5.! KẾT QUẢ ĐẠT ĐƯỢC 58!
5.1.! Kiến trúc 58!
5.2.! Những tính năng quan trọng 59!
CHƯƠNG 6.! KẾT LUẬN 68!

9

6.1.
! Kết quả đạt được 68!
6.1.1.! Kiến thức tìm hiểu được 68!
6.1.2.! Các kinh nghiệm tích lũy 69!
6.1.3.! Đánh giá kết quả đạt được 69!
6.2.! Những hạn chế 70!

6.3.! Hướng phát triển trong tương lai 71!
6.3.1.! Các tính năng bổ sung 71!
6.3.2.! Ứng dụng trong môi trường sư phạm. 73!
TÀI LIỆU THAM KHẢO 74!
PHỤ LỤC 75!
A.1.! Thư viện Dojo toolkit 75!
A.2.! NodeJS 77!
A.3.! Hệ thống Framework 79!
A.4.! Hướng dẫn sử dụng 80!
A.4.1.! Triển khai ứng dụng 80!
A.4.2.! Tạo mới một lược đồ lớp 82!
A.4.3.! Tạo mới một lược đồ use case 83!
A.4.4.! Các chức năng tiện ích khác 83!




10

DANH MỤC HÌNH
Hình 2-1 Các loại lược đồ mà UML 2.0 hỗ trợ 24!
Hình 2-2 Ví dụ Class Diagram 25!
Hình 2-3 Ví dụ Object Diagram 26!
Hình 2-4 Ví dụ Component Diagram 26!
Hình 2-5 Ví dụ Deployment Diagram 27!
Hình 2-6 Ví dụ Use Case Diagram 28!
Hình 2-7 Ví dụ Sequence Diagram 28!
Hình 2-8 Ví dụ State Diagram 29!
Hình 2-9 Ví dụ Activity Diagram 29!
Hình 3-1 Lược đồ use case mô tả các chức năng chính của hệ thống 37!

Hình 4-1 Kiến trúc tổng quan của hệ thống 40!
Hình 4-2 Lược đồ lớp mô tả các thành phần ở server 46!
Hình 4-3 Lược đồ lớp mô tả các thành phần đảm nhiệm vai trò đồ họa 47!
Hình 4-4 Lược đồ lớp mô tả các thành phần đảm nhiệm vai trò quản lý 48!
Hình 4-5 Thiết kế giao diện chính của hệ thống 50!
Hình 4-6 Thiết kế giao diện chức năng vẽ các lược đồ 51!
Hình 4-7 Thiết kế giao diện chức năng ghi chú 52!
Hình 4-8 Thiết kế giao diện chức năng chat (1) 53!
Hình 4-9 Thiết kế giao diện chức năng chat (2) 54!
Hình 4-10 Tổng quan các thành phần phía client 55!
Hình 5-1 Giao diện chính của hệ thống 60!
Hình 5-2 Giao diện khi tạo mới một lược đồ lớp 61!
Hình 5-3 Giao diện khi tạo mới một lược đồ use case 61!
Hình 5-4 Giao diện một lược đồ lớp hoàn chỉnh 62!
Hình 5-5 Giao diện một lược đồ use case hoàn chính 63!

11

Hình 5-6 Giao diện chỉnh sửa thuộc tính của đối tượng vẽ (1) 64
!
Hình 5-7 Giao diện chỉnh sửa thuộc tính của đối tượng vẽ (2) 65
Hình 0.1 Tích hợp với hệ thống Framework 67




12

DANH MỤC BẢNG
Bảng 2-1 So sánh HTML5 Canvas và HTML5 SVG 32!

Bảng 3-1 So sánh đặc điểm của một số công cụ thiết kế UML 36!
Bảng 6-1 So sánh kết quả đề tài với mục tiêu ban đầu 70!


13

THUẬT NGỮ VÀ CÁC TỪ VIẾT TẮT
STT
Từ viết tắt
Tiếng Anh
Giải nghĩa tiếng Việt
1
Ajax
Asynchronous
JavaScript and XML
Một nhóm các công nghệ phát triển
web được sử dụng để tạo các ứng
dụng web động hay các ứng dụng
giàu tính Internet.
2
CSS
Cascading Style Sheets
Một phương pháp dùng để miêu tả
cách trình bày các tài liệu viết bằng
ngôn ngữ HTML và XHTML
3
DOM
Document Object
Model
Mô hình dùng để biểu diễn và tương

tác với các đối tượng trong các tài
liệu HTML, XHTML, XML.
4
JSON
JavaScript Object
Notation
Một định dạng đơn giản dùng đề trao
đổi dữ liệu dữa các ứng dụng khác
nhau.
5
PDF
Portable Document
Format
Một định dạng tập tin văn bản khá
phổ biển của hãng Adobe Systems.
6
PNG
Portable Network
Graphics
Một dạng hình ảnh sử dụng phương
pháp nén dữ liệu không làm mất đi
dữ liệu gốc và đang được sử dụng
phổ biến trên Internet.
7
REST
Representational state
transfer
Một kiến trúc phần mềm để phát
triển các hệ thống phân tán siêu
phương tiện, phổ biến trong các dịch

14

vụ Web.
8
SVG
Scalable Vector
Graphics
Một ngôn ngữ đánh dấu XML và
dùng để miêu tả các hình ảnh đồ họa
véc tơ hai chiều, tĩnh và hoạt hình,
thường dành cho ứng dụng trên các
trang mạng.
9
UML
Unified Modeling
Language
Ngôn ngữ mô hình hóa thống nhất,
là ngôn ngữ phổ biến dùng để mô
hình hóa hệ thống phần mềm.
10
XMI
XML Metadata
Interchange
Tên của một chuẩn dùng để đặc tả
các lược đồ UML bằng ngôn ngữ
XML với mục đích là trao đổi thông
tin giữ các ứng dụng thiết kế UML
với nhau.
11

XML
eXtensible Markup
Language
Ngôn ngữ biểu diễn dữ liệu trao đổi
giữa các hệ thống khác nhau, đặc
biệt là các hệ thống được kết nối với
Internet.


15

TÓM TẮT KHÓA LUẬN
Ngày nay công nghệ thông tin đã và đang đó vài trò quan trọng trong đời sống kinh
tế và xã hội của nhiều quốc gia trên thế giới. Nhắc đến công nghệ thông tin, chúng ta
không thể không nhắc đến công nghệ phần mềm. Hiện nay, việc phát triển phần mềm
đang là một ngành kinh tế mũi nhọn của nhiều quốc gia trên thế giới trong đó có nước
ta.
Để xây dựng một phần mềm chất lượng cao thì phải đảm bảo các công đoạn trong
quy trình phần mềm từ xác định yêu cầu phần mềm đến phân tích thiết kế, cài đặt và
kiểm thử đều phải được thực hiện chặt chẽ và chính xác. Một trong những công đoạn
quan trọng nhất trong quy trình phần mềm là phân tích và thiết kế phần mềm. Thấy
được điều đó, hàng loạt các công cụ thiết kế phần mềm ra đời nhằm hỗ trợ các lập trình
viên phát triển được các phần mềm chất lượng cao. Tuy nhiêu các công cụ hiện tại chủ
yếu là những ứng dụng chỉ thực thi được trên môi trường desktop, chi phí bản quyền
khá cao, và đồng thời thiếu sự tương tác trực tuyến cho phép nhiều người dùng cùng
lúc tham gia vào làm việc trên một bản thiết kế. Vì là sản phẩm thương mại nên các
công cụ này tập trung hướng tới người dùng là các doanh nghiệp làm phần mềm chứ
không hỗ trợ nhiều cho môi trường giáo dục vào đào tạo.
Qua đề tài này, nhóm chúng tôi muốn xây dựng một công cụ thiết kế phần mềm
miễn phí trên môi trường web có thể truy cập mọi lúc mọi nơi hỗ trợ cho các bạn sinh

viên hoàn thành tốt các bài tập thiết kế phần mềm. Đ
ồng thời cũng xây dựng một môi
trường có hỗ trợ sự tương tác trực tuyến, cho phép các thành viên trong nhóm có thể
cùng tham gia làm việc chung trong các bài tập thiết kế phần mềm. Hơn thế nữa, các
giảng viên cũng có thể tham gia vào theo dõi, đánh giá các bài tập thiết kế phần mềm
của các nhóm sinh viên bất kỳ lúc nào hay bất kỳ nơi đâu.


16

CHƯƠNG 1. GIỚI THIỆU
1.1. Ứng dụng thiết kế trong dự án phần mềm
Thiết kế là công đoạn quan trọng trong dự án phần mềm, kết nối giữa công đoạn
thu thập phần mềm và công đoạn viết mã nguồn. Công đoạn phác thảo các mô hình của
hệ thống nhằm hiện thực hóa yêu cầu phần mềm. Bằng việc sử dụng các ký hiệu hình
học đơn giản, ta có thể mô hình hóa phần mềm ở mức độ tổng quát. Thiết kế phần
mềm giúp ta quan sát được phần mềm ở nhiều góc độ khác nhau. Ngày nay, hầu như
các công đoạn trong quá trình thiết kế đều sử dụng ngôn ngữ mô hình hóa UML. Ngôn
ngữ UML cho ta bản mô tả kiến trúc phần mềm (software architecture) và thiết kế chi
tiết (detailed design) dưới dạng các biểu đồ lớp (class diagram), biểu đồ đối tượng
(object diagram), biểu đồ tuần tự (sequence diagram), biểu đồ thành phần (component
diagram), mô hình use case (use case model), và các loại mô hình khác.
Nhờ vào các mô hình mô tả kiến trúc và thiết kế, công đoạn viết mã nguồn sẽ trở
nên dễ dàng. Các lập trình viên có thể hiểu được sơ bộ kiến trúc của hệ thống, các tính
năng và sự liên kết của các thành phần trong hệ thống.
Thiết kế phần mềm còn giúp chúng ta có thể mô hình hóa phần mềm trước khi viết
mã nguồn. Điều này làm cho phần mềm tăng độ khả thi, tránh những lỗi mà nếu khi
phát hiện ở công đoạn viết mã nguồn hay kiểm thử thì chi phí bảo trì sẽ cao. Một phần
mềm được mô hình hóa tốt làm cho hệ thống hoạt động ổn định, dễ tiến hóa, dễ sửa
chửa và thay thế.

1.2. Hạn chế của những công cụ thiết kế trên desktop
Để xây dựng một phần mềm chất lượng cao thì phải đảm bảo các công đoạn trong
quy trình phần mềm từ xác định yêu cầu phần mềm đến phân tích thiết kế, cài đặt và

17

kiểm thử đều phải được thực hiện chặt chẽ và chính xác. Một trong những công đoạn
quan trọng nhất trong quy trình phần mềm là phân tích và thiết kế. Công đoạn này giúp
chúng ta mô hình hóa toàn bộ hệ thống để có cái nhìn tổng quan về hệ thống sẽ xây
dựng. Từ đó xác định được tính khả thi của hệ thống, xác định rủi ro, hay ước lượng
thời gian và công sức sẽ đầu tư vào hệ thống.
Thấy được tầm quan trọng của giai đoạn này, một loạt các công cụ hỗ trợ thiết kế
phần mềm ra đời. Sau đây là sơ lược về một số công cụ hỗ trợ thiết kế phần mềm đang
rất nổi tiếng và được sử dụng rộng rãi:
• Microsoft Visio
1
: Sản phẩm thương mại của Microsoft và người dùng phải
chịu chi phí bản quyền nếu muốn sử dụng.
• Rational Rose
2
: Sản phẩm do IBM phát triển. Rational Rose cũng là một sản
phẩm có thu phí.
• ArgoUML
3
: Sản phẩm miễn phí. Vì là phần mềm miễn phí nên ArgoUML
có một số hạn chế như chỉ hỗ trợ UML 1.4
4
và ít tài liệu hướng dẫn sử dụng.
Sau quá trình tìm hiểu và sử dụng thử các công cụ trên, nhóm nhận thấy các công
cụ này có những mặt hạn chế như sau:

Một là, những công cụ này chỉ sử dụng được trên môi trường desktop nên bắt buộc
người dùng phải cài đặt mới có thể sử dụng được. Đồng thời những công cụ này không
tận dụng và nắm bắt xu hướng công nghệ và cách tiếp cận hiện đại: công nghệ và
tương tác trên môi trường web.


1


2


3


4



18

Hai là, các công cụ thiết kế hiện tại đang còn là một công cụ riêng lẻ chưa có sự kết
hợp với các công cụ khác như công cụ quản lý dự án, công cụ thu thập yêu cầu phần
mềm để trở thành một hệ thống hoàn chỉnh để có thể phục vụ trong môi trường sư
phạm ở các khoa Công nghệ thông tin (CNTT) hay trong môi trường phát triển phần
mềm của giới công nghiệp. Chính vì vậy, chỉ xét riêng trong môi trường sư phạm, các
sinh viên khi thực hành các bài tập thiết kế phần mềm sử dụng các công cụ khác nhau.
Các giáo viên phụ trách môn học cũng lựa chọn các công cụ một cách tùy biến, do vậy,
hiệu quả của giảng dạy và thực hiện đề án môn học có thể bị ảnh hưởng.
Ba là, các công cụ hiện tại đều không hỗ trợ tương tác cho nhiều người dùng. Chưa

cho phép nhiều người dùng cùng tham gia vào làm việc chung trên một bản thiết kế. Ví
dụ như, một thành viên muốn nhận xét bản thiết kế của thành viên khác thì phải gửi
mail hoặc chat. Điều đó góp phần làm gián đoạn công việc của các thành viên trong
nhóm.
Cuối cùng là, các công cụ hiện tại đa phần là các sản phẩm thương mại và chưa
đóng góp nhiều vào giáo dục và đào tạo. Chi phí để sử dụng những sản phẩm như IBM
Rational Rose hay Microsoft Visio là quá đắt đối với sinh viên.
1.3. Nhu cầu xây dựng công cụ thiết kế tích hợp trên Web
Để khắc phục những mặt hạn chế nêu trên, trong đề tài này nhóm chúng tôi hướng
tới xây dựng một công cụ thiết kế phần mềm trên web có khả năng tích hợ
p với các hệ
thống khác như: hệ thống quản lý môn học, hệ thống quản lý dự án môn học, Wiki và
môi trường phát triển tích hợp để tạo thành một hệ thống tích hợp hỗ trợ đào tạo,
nghiên cứu và phát triển dự án trong công nghệ phần mềm trên web. Công cụ này có
các tính năng cơ bản như sau:
• Có thể dễ dàng truy cập bản thiết kế ở bất kỳ đâu nhờ vào Internet.

19

• Ứng dụng triển khai trên môi trường web nên không cần cài đặt.
• Bản thiết kế được quản lý tập trung bởi phân hệ Repository & Version Control
cho phép nhiều người dùng cùng tham gia vào làm việc.
• Bản thiết kế có thể được nhúng vào các trang Wiki cho phép chia sẻ bản thiết
kế với các thành viên trong nhóm. Các thành viên trong nhóm có thể đánh giá,
cho điểm và gửi phản hồi trực tiếp trên bản thiết kế.
• Liên kết với hệ thống quản lý môn học, các nhóm sinh viên có thể cùng nhau
xây dựng bản thiết kế vào nộp cho giáo viên theo yêu cầu.
• Cho phép các thành viên trong nhóm thiết kế phản hồi, đánh giá, và báo cáo lỗi
trực tiếp trên bản thiết kế.
• Công cụ sẽ được cung cấp miễn phí cho các khoa CNTT tại các trường đại học

có nhu cầu. Hỗ trợ các sinh viên và giảng viên hoàn thành tốt các khóa học có
liên quan đến các công việc thiết kế phần mềm.
1.4. Mục tiêu khóa luận
Trong giới hạn khóa luận, nhóm chúng tôi hướng tới một công cụ hỗ trợ thiết kế
phần mềm trên web. Người dùng có thể sử dụng công cụ này bất kỳ ở đâu, bất kỳ lúc
nào miễn là có kết nối Internet. Công cụ cho phép người dùng vẽ hai loại lược đồ UML
cơ bản là lược đồ use case và lược đồ lớp. Công cụ có đầy đủ chức năng cơ bản của
một công cụ thiết kế phần mềm: hỗ trợ xuất lược đồ ra các định dạng như PDF hay
PNG, sao lưu và mở lại các lược đồ đã sao lưu. Công cụ còn hỗ tr
ợ đa người dùng và
tương tác trực tuyến, cho phép nhiều người dùng cùng lúc tham gia vào thiết kế trên
cùng một bản thiết kế. Cho phép các thành viên trong nhóm bình luận trong lúc thiết kế.
Các bản thiết kế có thể được chia sẽ giữa các thành viên trong nhóm. Công cụ có thể
được đưa vào môi trường sự phạm hỗ trợ các sinh viên và giảng viên hoàn thành tốt
các khóa học mà có yêu cầu thực hiện các công việc về thiết kế phần mềm.

20

Công cụ còn là một bộ phận trong một đề tài nghiên cứu được tài trợ của Đại học
Quốc gia – TP. Hồ Chí Minh. Đề tài này là xây dựng một hệ thống tích hợp hỗ trợ đào
tạo, nghiên cứu và phát triển dự án trong công nghệ phần mềm trên web. Đề tài còn có
các phân hệ khác như: hệ thống quản lý môn học, hệ thống quản lý dự án môn học,
Wiki và môi trường phát triển tích hợp. Công cụ mà nhóm xây dựng cũng để thử
nghiệm và đánh giá tính khả thi của toàn bộ hệ thống.
Do giới hạn về thời gian, kỹ năng cũng như yêu cầu một khóa luận tốt nghiệp đại
học, sản phẩm được tạo ra còn có nhiều hạn chế như có nhiều lỗi và thiếu chức năng
cần thiết. Vì vậy, sau khi đề tài được bảo vệ thì ban chủ nhiệm đề tài sẽ thành lập nhóm
chuyên nghiệp hơn để kiểm thử, sửa lỗi, và thêm chức năng mới để đảm bảo công cụ
này có thể sử dụng được trong thực tế.
1.5. Kết quả khóa luận

Sau một thời gian dài làm việc nghiêm túc, chúng tôi đã hoàn thành khóa luận
với các kết quả nổi bật sau:
• Tổng hợp được các kiến thức hiện trạng về các công cụ hỗ trợ thiết kế phần
mềm trên môi trường desktop và web.
• Nghiên cứu và áp dụng các công nghệ phát triển web hiện đại vào đề tài.
• Xây dựng được
ứng dụng thử nghiệm cung cấp công cụ cho phép thiết kế
phần mềm trên web. Qua đó đánh giá được tính khả thi của phân hệ trong
toàn bộ hệ thống.
• Cung cấp nền tảng cho các nhóm phát triển sau có thể phát triển tiếp phân hệ
để có thể phục vụ nhu cầu thực tế.
• Tích lũy được những kiến thức quý báu về quy trình phần mềm, ngôn ngữ
mô hình hóa UML, và xây dựng một ứng web từ server đến client.

21

• Tích lũy các kinh nghiệm cần thiết để đi làm trong giới công nghiệp hay tiếp
tục còn đường học thuật như các kinh nghiệm khi làm việc nhóm, nghiên
cứu công nghệ mới và đặc biệt là kinh nghiệm phát triển một dự án đi từ pha
lấy cầu đến phân tích, thiết kế, cài đặt, kiểm thử và triển khai hệ thống.
1.6. Cấu trúc của báo cáo khóa luận
Nội dung chính của báo cáo khóa luận được trình bày từ chương 2 đến
chương 6:
Chương 2: Giới thiệu những kiến thức nền tảng cần thiết khi thực hiện đề tài.
Chương 3: Khảo sát và xác định yêu cầu của hệ thống cần xây dựng.
Chương 4: Trình bày kiến trúc và các giải pháp thiết kế được chọn lựa để xây
dựng hệ thống.
Chương 5: Trình bày sơ lược về hệ thống sau khi hoàn thành.
Chương 6: Tổng hợp những kết quả đạt được sau khi thực hiện đề tài. Đánh
giá kết quả đạt được; trình bày các hướng phát triển trong tương lai.

22

CHƯƠNG 2. NGHIÊN CỨU KIẾN THỨC NỀN TẢNG
2.1. UML
2.1.1. UML là gì?
UML - Unified Modeling Language – tạm dịch là Ngôn ngữ mô hình hóa thống
nhất, là một ngôn ngữ mô hình hóa được sử dụng để trực quan hóa, đặc tả, xây dựng và
làm tài liệu cho các sản phẩm phần mềm. UML được công bố lần đầu tiên bởi bộ ba
chuyên gia Grady Booch, Ivar Jacobson and James Rumbaugh tại công ty phần mềm
Rational. Nhờ có UML mà các nhà phát triển phần mềm dễ dàng hiểu rõ, thiết kế, bảo
trì và quản lý các thông tin về phần mềm.
1

Đối với một hệ thống phần mềm, UML dùng để mô tả cấu trúc và các hành vi của
hệ thống phần mềm. Cấu trúc của một hình thống phần mềm là sự mô tả tập hợp các
đối tượng bên trong hệ thống, đồng thời thể hiện sự cài đặt và quan hệ của chúng.
Hành vi của một hệ thống phần mềm cho thấy sự tương tác giữa các đối tượng đó để
hoàn thành một chức năng được yều cầu bởi người dùng.
UML còn hỗ trợ gom nhóm nhiều đối tượng có quan hệ với nhau thành cái gói.
Nhờ đó giúp các nhà thiết kế phần mềm có thể chia nhỏ hệ thống lớn, phức tạp thành
từng gói con độc lập nhau để dễ dàng quản lý và phát triển một cách độc lập.
Không chỉ ứng dụng trong ngành công nghệ phần mềm, bản chất của UML là một
ngôn ngữ mô hình hóa đa dụng. UML được sử dụng để mô hình hóa các hệ thống phần
mềm, ph
ần cứng, và các mạch logic.

1
(Dịch từ
UML của Wikipedia, Bách khoa Toàn thư Mở)

23

2.1.2. Tại sao cần UML?
Là ngôn ngữ chuẩn sử dụng trong thiết kế phần mềm. UML không ngừng được
phát triển và sử dụng rộng rãi trong cộng đồng phát triển phần mềm. Đa số các công cụ
phát triển phần mềm hiện nay đều có hỗ trợ thiết kế UML ví dụ như Visual Studio hày
Eclipse,… Hay nói cách khác UML chính là ngôn ngữ giao tiếp chuẩn nhất giữa những
thành viên tham gia phát triển sản phẩm phần mềm như nhà phát triển, chuyên viên
kiểm thử phần mềm, quản lý dự án, hay thậm chí khách hàng.
Việc mô hình hóa hệ thống bằng UML giúp cho những thành viên tham gia vào
phát triển phần mềm bao gồm lập trình viên, nhà thiết kế phần mềm, kiến trúc sư phần
mềm, quản lý dự án, hay khách hàng sớm nắm rõ những yêu cầu và những kiến thức
chuyên môn của phần mềm. Từ đó nắm được tổng quan toàn bộ hệ thống, có định
hướng để thiết kế hệ thống.
Các lược đồ UML có thể dễ dàng được trao đổi qua lại giữa các công cụ thiết kế
UML nhờ vào chuẩn giao tiếp XML Metadata Interchange (XMI). XMI là một chuẩn
dùng để đặc tả các lược đồ UML bằng ngôn ngữ XML.
Hiện nay trên thị trường có rất nhiều công cụ hỗ trợ vẽ các lược đồ UML. Hầu hết
các công cũ đều hỗ trợ các chức năng vẽ các lược đồ cơ bản. Một số công cụ thương
mại hỗ trợ thêm hai chức năng rất hay đó là Code generation và Reverse engineering
(tạm dịch là phát sinh mã nguồn và dịch ngược mà nguồn).
• Code generation: là chức năng cho phép người dùng vẽ các lược đồ UML rồi
từ các lược đồ đó phát sinh mã nguồn của một số ngôn ngữ lập trình phổ
biến như C++, Java hay C#. Một xu hướng mới để phát triển phần mềm dựa
phương pháp Code geration là Model-Driven Development (MDD). Với

MDD, việc tạo ra sản phẩm phần mềm bằng cách vẽ ra các mô hình của hệ
thống phần mềm rồi sao đó dùng các công cụ hỗ trợ phát sinh mã nguồn.