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

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 Visio1: Sản phẩm thương mại của Microsoft và người dùng phải chịu c

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

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

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

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

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

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ư

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

Sinh viên thực hiện

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

!!!

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!

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!

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!

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!

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

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!

THUẬT NGỮ VÀ CÁC TỪ VIẾT TẮ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

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

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

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

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

CHƯƠNG 1 GIỚI THIỆU

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à

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 Visio1: 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 Rose2: Sản phẩm do IBM phát triển Rational Rose cũng là một sản phẩm có thu phí

• ArgoUML3: 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.44 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

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

• Ứ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

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

• 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

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ở)

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

• Reverse engineering: là chức năng cho phép người dùng đưa đầu vào là các

mã nguồn chương trình có sẵn để các công cụ hỗ trợ phát sinh là các lược đồ UML tương ứng

2.1.3 Các lược đồ UML

Tại thời điểm thực hiện đề tài, UML hỗ trợ 14 loại lược đồ được chia thành hai nhóm chính là lược đồ cấu trúc (structural diagram) và lược đồ ứng xử (behavioral diagram) Lược đồ cấu trúc thể hiện các vấn đề liên quan đến cấu trúc thiết kế cấu tạo nên hệ thống Còn lược đồ ứng xử thể hiện các vấn đề liên quan đến xử lý giao tiếp 1Dưới đây sẽ tóm tắt một số lược đồ được sử dụng thường xuyên khi mô hình hóa phần mềm 2

Nguồn hỉnh ảnh ví dụ các lược đồ : http://creately.com/blog/diagrams/uml-diagram-types-examples/

Hình 2.1 Các loại lược đồ mà UML 2.0 hỗ trợ

Lược đồ thành phần (component diagram): Mô tả các thành phần thực thi của hệ thống Các thành phần thực thi ở đây là các tập tin thực thi được (executable file), các thư viện, tài liệu và các tập tin lưu trữ thông tin khác

Hình 2.3 Ví dụ Object Diagram

Hình 2.4 Ví dụ Component Diagram

Lược đồ triển khai (deployment diagram): Mô tả cấu hình của các thành phần môi trường và sự xếp đặt các thành phần thực thi trên đó Lược đồ thành phần và lược đồ triển khai có quan hệ mật thiết với nhau Nếu như lược đồ thành phần mô tả các thành phần thực thi và mối quan hệ giữa chúng, thì lược đồ triển khai mô tả các thành phần thực thi này được triển khai trên các hệ thống phần cứng như thế nào

Nhóm lược đồ ứng xử

Lược đồ use case (use case diagram): Là một trong những loại lược đồ UML được dùng phổ biến nhất Lược đồ use case dùng để mô tả các chức năng của hệ thống Hay nói cách khác, lược đồ use case mô tả các thành phần bên ngoài nào có sự tương tác với hệ thống Và hệ thống sẽ có những ứng xử nào khi chịu những sự tương tác đó

Hình 2.5 Ví dụ Deployment Diagram

Lược đồ tuần tự (sequence diagram): Mô tả sự tương tác giữa các đối tượng bên trong hệ thống theo một trình tự thời gian

Hình 2.6 Ví dụ Use Case Diagram

Hình 2.7 Ví dụ Sequence Diagram

Lượt đồ trạng thái(state diagram): Mô tả những trạng thái khác nhau của đối tượng trong suốt thời gian sống của nó Sự thay đổi từ trạng thái này sang trạng thái khác là kết quả của những sự kiện bên ngoài hoặc bên trong hệ thống

Lược đồ hoạt động(activity diagram): Mô tả luồng thực hiện từng bước từ hoạt động này sang hoạt động khác để hoàn thành một tác vụ nào đó của hệ thống

Hình 2.8 Ví dụ State Diagram

Hình 2.9 Ví dụ Activity Diagram

2.2 Các công nghệ lập trình web

Để xây dựng được một ứng dụng web chúng tôi phải tìm hiểu nhiều ngôn ngữ, công nghệ dùng để phát triển web khác nhau Ở phía client, toàn bộ việc xử lý được thực hiện bằng ngôn ngữ client-side phổ biến nhất hiện nay là JavaScript và đặc biệt theo chuẩn HTML5 Ớ phía server nhóm vẫn tiếp tục dùng ngôn ngữ JavaScript để thực hiện các xử lý Đặc biệt ở phía server nhóm triển khai ứng dụng trên nền tảng NodeJS NodeJS là công nghệ đang thu hút nhiều sự chú ý tại thời điểm thực hiện đề tài NodeJS là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả năng mở rộng, đặc biệt là máy chủ web Chương trình được viết bằng ngôn ngữ JavaScript, sử dụng các kỹ thuật lập trình hướng sự kiện, bất đồng bộ nhập/xuất nhằm giảm thiểu chi phí và tăng tính mở rộng của hệ thống Về phần trao đổi thông tin giữ client và server nhóm sử dụng công nghệ AJAX và REST

và các ứng dụng chạy trên môi trường desktop Microsoft hiện đang đưa JS vào một trong các ngôn ngữ để phát triển ứng dụng trên hệ điều hành Windows 8

Bởi vì Java và JavaScript có tên gọi gần giống nhau, nên nhiều người nhầm lẫn JavaScript là phiên bản rút gọn của Java Tuy nhiên hay ngôn ngữ này không liên quan

gì nhau và đôi khi rất khác nhau về một số khía cạnh sử dụng Đôi khi JS được xem là một ngôn ngữ kịch bản, chỉ làm các tác vụ nhỏ và dành cho những người không chuyên lập trình Điều đó hoàn toàn không đúng Qua đề tài này, nhóm chúng tôi nhận

thấy JS là một ngôn ngữ rất linh động và không kém phần phức tạp như các ngôn ngữ khác

JS hiện đang được sử dụng để lập trình ở phía server và đang được cộng đồng sử dụng rộng rãi Một công nghệ đang phổ biến tại thời điểm hiện tại của JS là NodeJS Sau một thời gian tìm hiểu, nhóm chúng tôi nhận thấy NodeJS thích hợp để viết những ứng dụng web mà phần xử lý chủ yếu ở phía client Do đó chúng tôi đã quyết định sử dụng NodeJS vào trong đề tài này

Sau khi trải nghiệm, nhóm đã có những tổng kết và so sánh giữa hai loại đồ họa mà HTML5 hỗ trợ

Pixel-based: canvas cơ bản là một bức

tranh Bức tranh này cung cấp các API

cho phép chúng ta vẽ các đối tượng lên

đó

Object Model-based: các đối tượng được đối xử giống như một phần tử HTML là một phần của Document Object Model (DOM)

Việc tạo và chỉnh sửa đối tượng phải thực

hiện quá ngôn ngữ lập trình (JavaScript)

Việc tạo một đối tượng bằng một ngôn ngữ đánh dấu (XML) và định dạng thông

qua Cascading Style Sheets (CSS)

Rất khó để bắt các sự kiện tương tác giữa

người dùng với các đối tượng Để thực

hiện sự tương tác thì người lập trình phải

lưu các số liệu của đối tượng đồng thời

phải luôn bắt các sự kiện chuột trên

canvas

Do các đối tượng là một phần tử thuộc DOM Mà JavaScript có các library hỗ trợ rất mạnh về xử lý các sự kiện với DOM,

ví dụ như JQuery, Dojo

Rất khó giao tiếp với các ứng dụng đồ họa

khác

Do các đối tượng để thể hiện bằng XML nên dễ dàng trao đổi với các ứng dụng khác

Xử lý từng pixel dễ dàng Xử lý từng pixel khó khăn

Vẽ với Canvas giống như viết code

Window GDI

Vẽ với SVG giống như viết code HTML

Bảng 2-1 So sánh HTML5 Canvas và HTML5 SVG

Khi nào dùng HTML5 Canvas

• Phát triển game thì cần xử lý chi tiết từng pixel nền đòi hỏi phải sử dụng các Graphics low-level API

• Đòi hỏi hiệu năng đến từng mili giây Load một tài liệu DOM chắc chắn là

o Biểu đồ số liệu tài chính kế toán

• Khi ứng dụng có các nhu cầu sau:

o Có thể dùng các số liệu có sẵn để tạo nên tài liệu XML rùi chuyển sang SVG

o Trao đổi dễ dàng với các loại ứng dụng thiết kế khác (inkscape, Adobe Illustrator, Microsoft Visio, and various CAD programs)

o Dễ dàng tương tác với người dùng

Sau những trải ngiệm, phân tích và đánh giá, nhóm đã quyết định sử dụng HTML5 SVG làm thư viện xử lý đồ họa để cài đặt ứng dụng

2.3 Một số ứng dụng liên quan

2.3.1 Công cụ thiết kế phần mềm trên desktop

Một ứng dụng thiết kế thương mại nổi tiếng là Microsoft Visio1 Visio là ứng dụng cho phép mô hình hóa hệ thống phần mềm bằng các lược đồ UML như lược đồ lớp, lược đồ tuần tự, lược đồ use case, và các lược đồ khác Không chỉ ứng dụng trong lĩnh vực công nghệ phần mềm, Visio còn cho phép người dùng mô hình hóa cơ sở dữ liệu ở dạng Entity-Relationship Model (ERD), mô hình hóa hệ thống mạng Ứng dụng trong quản lý, Visio hỗ trợ vẽ lược đồ tổ chức hay lên kế hoạch cho dự án Được tích hợp chung với bộ Microsoft Office nên Visio tương thích rất tốt với các sản phẩm khác trong bộ Microsoft Office Những lược đồ được vẽ trong Visio có thể dễ dàng đưa vào các ứng dụng như Word và Excel Visio là sản phẩm có phí

1 Microsoft Visio: http://office.microsoft.com/en-us/visio/

Một sản phẩm thiết kế phần mềm trên desktop khác mà hầu như các bạn sinh viên

và giới công nghiệp ngành Công Nghệ Thông Tin đều biết đó là Rational Rose1 Rational Rose là phần mềm thiết kế Đây là sản phẩm của IBM Rational Rose hỗ trợ nhiều chức năng hay như vẽ các lược đồ chính trong ngôn ngữ UML, tự động tạo tài liệu cho các lược đồ, tự động tạo mã nguồn cho một vài ngôn ngữ lập trình phổ biến như VB, C++, và Java Rational Rose cũng là một sản phẩm có thu phí

Một ứng dụng thiết kế phần mềm miễn phí nổi tiếng là ArgoUML2 ArgoUML cũng cho phép người dùng mô hình hóa hệ thống phần mềm bằng các lược đồ UML tương tự như Microsoft Visio 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 và ít tài liệu hướng dẫn sử dụng

Vì đều là ứng dụng desktop nên các ứng dụng này đều đòi hỏi người dùng phải cài đặt Những ứng dụng hay thường là có phí, đều này gây trở ngại cho sinh viên Các phần mềm miễn phí thì hạn chế về tính năng ArgoUML được viết bằng ngôn ngữ Java nên buộc trên máy người dùng phải có Java Runtime Environment (JRE)

2.3.2 Công cụ thiết kế phần mềm trên web

Để khắc phục những nhược điểm như tốn thời gian cài đặt và không quản lý tập trung của phần mềm desktop thì một số công cụ thiết kế trên web ra đời Đáng kể nhất

là Gliffy3 và Cacoo4 Tương tự như Viso, Gliffy cũng cho phép người dùng mô tả chi tiết hệ thống phần mềm bằng những lược đồ UML phổ biến Ngoài ra Gliffy còn hỗ trợ thiết kế các hệ thống mạng, lược đồ nhà và giao diện của phần mềm Đáng chú ý ở

1 Rational Rose: http://www.ibm.com/developerworks/rational/products/rose/

Gliffy hơn các công cụ thiết kế trên môi trường desktop khác là Gliffy cho phép nhóm thiết kế tương tác với nhau thông qua chức năng mời người khác tham gia thiết kế hoặc gởi thông báo bằng email Gliffy còn cho phép người dùng sao lưu bản thiết kế nếu muốn Hiện tại Gliffy đã hỗ trợ người dùng có thể lưu vào Google Drive của mình Nhờ đó người dùng có thể truy cập vào bản thiết kế của mình mọi lúc mọi nơi miễn Tuy nhiên Gliffy là một sản phẩm thương mại Với phiên bản dùng thử Gliffy cho phép người dũng vẽ tối đa năm lược đồ với dung lượng tối đa là 2Mb Trước đây Gliffy được phát triển dựa trên công nghệ Flash nhưng hiện nay Gliffy đã hỗ trợ HTML5 Cacoo là một công cụ vẽ online miễn phí cho phép người dùng tạo ra nhiều loại lược đồ phong phú như sơ đồ các trang của một trang web (site map), sơ đồ tư duy (mind map), sơ đồ mạng (network diagram), và các loại lược đồ UML Cacoo hỗ trợ nhiều người cùng tương tác trên một lược đồ cùng lúc Khi có một người khác đang thay đổi nội dung lược đồ thì sự thay đổi này lập tức được cập nhật để các người đang xem khác cùng thấy Cacoo hỗ trợ chia sẽ lược đồ cho các thành viên trong nhóm, người dùng khác hay đưa lên các trang mạng xã hội nổi tiếng như Twitter, Facebook, Google Plus Cacoo cho phép những người đang cùng làm việc trên một lược đồ có thể giao tiếp dễ dàng thông qua chức năng tán gẫu (chat) Hiện tại Cacoo vẫn đang chạy trên nền Flash và chưa hỗ trợ HTML5

Ngoài ra cũng có một số công cụ thiết kế trên web miễn phí khác như Draw.io hay jsUML2 Tuy nhiên những công cụ này còn thiếu các chức năng cho phép làm việc nhóm, các thành viên có thể tương tác hay chia sẽ bản thiết kế với nhau

CHƯƠNG 3 KHẢO SÁT VÀ XÁC ĐỊNH YÊU CẦU

Trong chương này chúng tôi trình bày nhưng yêu cầu của hệ thống mà chúng tôi đã xây dựng Những yêu cầu này được thu thập sau những sự trải nghiệm của chúng tôi với các công cụ thiết kế phần mềm hiện có

3.1 Khảo sát hiện trạng

Sau khi tìm hiểu và trải nghiệm nhiều công cụ hỗ trợ thiết kế phần mềm trên môi trường web và desktop thì nhóm đã có một số kết quả được tổng hợp như sau:

ArgoUML Microsoft Viso Rational Rose

SVG

BMP, JPG, PNG, VSD, GIF, TIFF, DWG

GIF, JPG, BMP (Add-in)

JPG, PNG, PDF

JPG, PNG, SVG

Code Generation C++, C#, Java,

Bảng 3-1 So sánh đặc điểm của một số công cụ thiết kế UML

3.2 Yêu cầu phần mềm của hệ thống

Hình 3.1 Lược đồ use case mô tả các chức năng chính của hệ thống

Theo giới hạn của khóa luận, ứng dụng của chúng tôi chỉ cung cấp những chức năng thực sự cần thiết, được sử dụng nhiều sau đây:

• Tạo một lược đồ và bắt đầu làm việc Hiện tại ứng dụng hỗ trợ hai loại lược

đồ được sử dụng thường xuyên nhất trong pha thiết kế phần mềm là lược đồ use case và lược đồ lớp

• Làm việc cùng lúc trên nhiều lược đồ Các lược đồ được vẽ độc lập nhau và

có thể chuyển đổi qua lại giữa các lược đồ

• Xuất lược đồ ra các định dạng thông dụng như PNG hoặc PDF

• Sao lưu lược đồ trên máy chủ dưới định dạng đang được sử dụng phổ biến là JSON Mở và tiếp tục làm việc với một lược đồ đã được sao lưu

• Để tăng tính tiện dụng, ứng dụng còn hỗ trợ phóng to hay thu nhỏ lược đồ đang vẽ Cho phép Undo/Redo khi vẽ

• Tận dụng sức mạnh của các công nghệ web, ứng dụng đẩy mạnh hỗ trợ tương tác trực tuyến, cho phép nhiều thành viên trong nhóm cùng tham gia vào làm việc trên một bản thiết kế như: Nhiều thành viên có thể trực tiếp cùng lúc vẽ trên một bản thiết kế Trong lúc vẽ, các thành viên có thể chat với nhau hay bình luận về bản thiết kế Sau khi hoàn thành bản thiết kế, thành viên có thể chia sẻ bản thiết kế của mình với các thành viên khác để các thành viên trong nhóm cho điểm hay bình luận về bản vẽ