Do yêu cầu ngay từđầu hệ thống là một ứng dụng chạy trên nền web, cung cấp dịch vụ cho nhiều người sử dụng. Nên hệ thống mang kiến trúc của một ứng dụng web thuần tuý. Có nghĩa hệ thống hoạt động theo kiến trúc client – server. Trong đó, trình duyệt web (browser) đóng vai trò là bên sử dụng (client). Bên cung cấp dịch vụ
(server) giữ vai trò cung cấp các dịch vụ như quản lý người dùng, lưu trữ, và truy suất tới các hệ thống khác. Dưới đây là sơđồ tổng quan của hệ thống.
40 Phía client Phía server Hệ thống framework Javascript core Controller View
Repository Database Service controller Web server Drawing Layout Widgets Real-time processing Comment Chat Notification REST REST Network Network Hình 4.1 Kiến trúc tổng quan của hệ thống
Hệ thống sẽ có 2 thành phần chính là thành phần ở phía client và thành phần ở phía server. Ngoài ra hệ thống cần phải liên lạc với một hệ thống để sử dụng các dịch vụ
liên quan về lưu trữ, quản lý người dùng. Hệ thống đó là hệ thống Framework.
41
Phía server chủ yếu đảm nhận việc cung cấp dịch vụ cho nhiều người sử dụng. Do
đó, việc chọn web server nào cũng là một vấn đề quan trọng sao đảm bảo hiệu năng của hệ thống nhanh và có nhiều người truy cập cùng lúc. Ở phía server chúng tôi chọn kiến trúc MVC1 (Model – View - Controller). Tuy nhiên chúng tôi sẽ không sử dụng model như theo định nghĩa của nó vì chúng tôi không có cơ sở dữ liệu. Do đó chúng tôi sử dụng model này từ xa thông qua hệ thống khác. Hệ thống đó được nói rõ hơn trong phần kế.. Các thành phần ở server:
• Controller: sẽ đảm bảo việc nhận yêu cầu từ phía client, xử lý những tác vụ
liên quan trả về cho client nội dung tương ứng với yêu cầu. Những tác vụđó có thể là kiểm tra chứng thực xem người dùng đó đã đăng nhập chưa, lưu dữ
liệu…Ngoài ra controller còn phải đảm nhận việc liên lạc với hệ thống Framework để sử dụng các dịch vụ của hệ thống đó.
• View: chứa nội dung HTML tuy nhiên controller có thể dễ dàng thêm hoặc sửa nội dung này để phù hợp với yêu cầu người dùng.
• Notification: module này sẽ tiếp nhận những thông báo về sự thay đổi của client nào đó và chuyển thông báo đó cho các client khác đang cùng làm việc. Do đặc tính của mô hình web client – server là những client đang cùng làm việc sẽ không thể thấy nhau và liên lạc với nhau. Cho nên khi một client nào đó cần liên lạc với một client khác thì phải thông qua server. Trong hệ
thống, module notification này sẽ tiếp nhận những thay đổi khi người dùng
đang chỉnh sửa nội dung của một sơ đồ nào đó và thông báo cho các client
đang cùng làm việc trên sơđồđó cập nhật lại nội dung sơđồ.
42
4.1.2. Thành phần phía client
Phía client là phía quan trọng nhất trong hệ thống, do hầu như các thao tác của người sử dụng đều diễn ra ở client. Đặc tính của hệ thống là một ứng dụng vẽ trực tuyến, nên những hoạt động vẽ, thêm, xóa, sửa đều diễn ra ở trình duyệt web. Với sự
phát triển của công nghệ web hiện tại, ta dễ dàng viết được một ứng dụng thỏa mãn yêu cầu vẽđó. Bộ phận ở phía client có các thành phần:
• Javascript core: module này hỗ trợ việc lập trình với ngôn ngữ Javascript dễ
dàng hơn. Nó sẽ cung cấp các API để làm việc với những kiểu đối tượng cơ
bản trong Javascript như đối tượng (object), mảng (array), chuỗi (string)… Module này cũng cung cấp cơ chế lập trình hướng đối tượng trong Javascript. Bản thân Javascript là một ngôn ngữ script, không hỗ trợ hướng đối tượng. Do đó nếu chúng ta sử dụng một cơ chế nào để có thể giúp thiết kế là lập trình theo hướng đối tượng trong Javascript thì việc lập trình dễ dàng hơn nhiều.
• Drawing: module này cung cấp những API giúp cho việc vẽ. Những API đó hỗ trợ vẽ các đối tượng căn bản như: điểm, đường thẳng, đường gấp khúc, hình tròn, hình chữ nhật, vẽ chữ… Cho phép thao tác trực tiếp với các đối tượng vẽđó như tô màu, sửa kiểu nét vẽ, di chuyển, thêm, xóa, sửa.
• Widgets: module này giúp ta tạo những widget đơn giản như hộp thoại (dialog), các đối tượng nhập liệu (button, text box, text area…)
• Layout: cho phép ta định vị những đối tượng trên giao diện một cách linh hoạt, cập nhật vị trí những đối tượng này động khi kích thước giao diện có sự thay đổi. Một ứng dụng web có nhược điểm sẽ phải chạy trên nhiều trình duyện web khác nhau, và ta cũng không thể biết kích thước hiển thị ở các trình duyệt web đó là bao nhiêu. Do đó ta cần module này để đảm bảo việc hiển thị trên các trình duyệt web khác nhau là giống nhau.
43
• Chat: hệ thống hỗ trợ làm việc nhóm, tức là nhiều người cùng làm việc trên một lược đồ cùng lúc. Khi đó, việc giao tiếp lẫn nhau giữa các thành viên là cần thiết. Module này sẽ giúp các thành viên trong cùng một nhóm sẽ có thể
liên lạc nhau một cách dễ dàng.
• Comment: trong môi trường làm việc có tương tác, những người đang cùng làm việc cần biết những thành viên khác đã có sự thay đổi gì, tại sao lại có sự thay đổi đó. Để giúp lưu lại được những thay đổi của các thành viên với nhau, module này cho người dùng trực tiếp chú thích lên lược đồ.
• Real-time processing: module này làm nhiệm vụ cập nhật động. Khi có một thay đổi ở phía client, ví dụ như một người dùng thêm hoặc xóa một đối tượng trên lược đồ. Thì sự thay đổi đó lập tức được gửi về server, server sẽ
làm tiếp việc chuyển thông tin thay đổi đến các client đang cùng thao tác. Module này đảm nhận việc tiếp nhận thông tin thay đổi từ server và cập nhật lại sơđồ cho những client khác thấy sự thay đổi đó.
4.1.3. Hệ thống Framework
Đây là một hệ thống quan trọng. Hệ thống này giúp những ứng dụng cần có tính tương tác có thể gắn kết với nhau thành một hệ thống lớn. Trong phạm vi đề tài này, chúng tôi không nói chi tiết về hệ thống này. Chúng tôi sẽ chỉ liệt kê những dịch vụ mà hệ thống này cung cấp, giúp hệ thống chúng tôi có thể tương tác. Những dịch vụđó là:
• Quản lý người dùng: hệ thống này có cơ sở dữ liệu người dùng, và chúng tôi sử dụng lại cơ sở dữ liệu này. Cụ thể chúng tôi sử dụng lại các dịch vụ
chứng thực, đăng nhập, thoát, lấy và hiển thị thông tin người dùng.
• Quản lý phiên bản: dịch vụ này giúp mỗi khi người dùng lưu lại dữ liệu, nó sẽ tạo ra một phiên bản cho dữ liệu đó. Nên người dùng có thể dễ dàng xem
44
lại các phiên bản củ, nhận thấy sự thay đổi hay đơn giản là lấy lại dữ liệu cũ.
Đây là một tính năng tuyệt mà các hệ thống trên desktop vẫn chưa làm được. • Dịch vụ chat: hệ thống Framework cung cấp dịch vụ này để các thành viên trong cùng một dự án, đang làm việc trực tuyến có thể thấy và giao tiếp với nhau.
• Dịch vụ comment: dịch vụ này cung cấp cơ chế viết ghi chú trực tiếp lên lược đồ, những người dùng khác có thể thấy comment này ngay lập tức.
4.1.4. Kết nối và giao tiếp
Mọi việc giao tiếp và kết nối trong hệ thống đều thông qua mạng internet. Giữa client và server có hai loại giao tiếp chính là thông qua REST1 (Representational state transfer) và AJAX2. REST là một kiểu giao tiếp hiệu quả trong các ứng dụng dựa trên nền web (web based app). Nó không quá phức tạp. Chúng tôi chọn nó vì nó đang được phát triển mạnh và có nhiều công nghệ hộ trỡ cũng như tài liệu viết về nó. AJAX là tập hợp các công nghệ hỗ trợ cho việc giao tiếp của client – server dễ dàng, giúp client có thể cập nhật thông tin động mà không cần phải duyệt lại trang web. AJAX thích hợp trong các ứng dụng web vì nó làm người dùng cảm giác như đang sử dụng một ứng dụng trên nền hệđiều hành hiện tại (native app), do nó không duyệt lại trang web nhiều lần như cơ chế web truyền thống, người dùng được thường xuyên cập nhật thông tin.
Trong hệ thống, REST được sử dụng giúp client lấy các tài nguyên (resource) ở
phía server như dữ liệu các lược đồ, các định dạng khác được tạo ra từ lược đồ (PNG, PDF)… AJAX được sử dụng để client có được những tính năng quan trọng như cập
1
http://rest.elkstein.org/2008/02/what-is-rest.html 2http://en.wikipedia.org/wiki/Ajax_(programming)
45
nhật động nội dung các lược đồ, chat với các thành viên đang cùng online, ghi chú lên lược đồđang thao tác…
Ngoài việc giao tiếp giữa client – server, hệ thống còn cần giao tiếp với hệ thống bên ngoài khác là hệ thống Framework. Việc giao tiếp này chúng tôi cũng dùng REST vì các API mà hệ thống Framework cung cấp dựa trên giao tiếp REST.
Các đối tượng giao tiếp thông qua REST và AJAX đều là định dạng JSON1. JSON là định dạng tương tự như XML. Chúng tôi không chọn XML vì JSON đơn giản hơn nhiều, dễ đọc. Ngoài ra JSON còn dễ dàng đọc được trong Javascript, nó tương tự như
một đối tượng dữ liệu trong Javascript. Mà ngôn ngữ chính được sử dụng trong hệ
thống ở cả client và server đều là ngôn ngữ Javascript.
4.2. Thiết kế hệ thống
4.2.1. Sơđồ lớp
Do hệ thống có hai phần: phía client và phía server, nên sơ đồ lớp hệ thống cũng chia thành hai phần tương ứng.
Dưới đây là sơđồ lớp phía server:
46
Controller
EditorController ExportController FrameworkController NotificationController
Hình 4.2 Lược đồ lớp mô tả các thành phần ở server
Ở server, chúng tôi không có xử lý nhiều tác vụ và do có framework MVC nên sơ đồ lớp tương đối đơn giản. Ở đây chúng tôi chỉ trình bày các lớp quan trọng, xử lý
nghiệp vụ trong các controller. Chúng ta sẽ có ba controller căn bản là:
• EditorController: nhận xử lý những tác vụ liên quan đến vẽ. Cụ thể nó sẽ
trả về cho client những lược đồ mà người dùng đã lưu…
• ExportController: xử lý khi người dùng cần xuất lược đồ ra những định dạng khác. Những định dạng đó là ảnh (PNG) hay tập tin PDF.
• NotificationController: giúp server nhận các thông báo từ client khi có sự
thay đổi nào đó trên lược đồ và chuyển những thông báo đó đến các người dùng khác đang cùng thao tác để cập nhật nội dung lược đồ.
• FrameworkController: xử lý các tác vụ liên quan đến việc cần giao tiếp với hệ thống Framework.
Sơđồ lớp ở phía client:
Để thuận tiện cho việc trình bày, chúng chia sơ đồ lớp ở phía client thành các sơđồ
47 Sau đây là sơđồ lớp cho các đối tượng vẽ:
!∀#∃%&∋()∗#
+,−#()∗# .)∀/()∗#
!∀#∃%& ∋%∀∀(#)%&
!∀#∃%&∋
Hình 4.3 Lược đồ lớp mô tả các thành phần đảm nhiệm vai trò đồ họa
• StencilBase: đây là lớp cơ bản cho các đối tượng vẽ. Mỗi đối tượng vẽ đều kế thừa lớp này. Lớp này qui định những phương thức tổng quát cho việc vẽ. • Stencil: lớp này vẽ các đối tượng cơ bản. Đây là lớp ảo, kế thừa lớp này là
những lớp vẽ các hình căn bản: đường thẳng, đường gấp khúc, hình chữ nhật, hình tròn, vẽ chữ…
• NodeBase: giúp vẽ các đối tượng là nút của những lược đồ. Ví dụ: đối tượng class, interface, package của sơ đồ lớp, đối tượng actor, use-case của sơ đồ
use-case.
• PathBase: vẽ các đối tượng là đường của những lược đồ. Ví dụ: đối tượng
đường aggregation, composition, association của sơđồ lớp, đối tượng đường include, extend của sơđồ use-case.
• Anchor: lớp này có nhiệm vụ gắn thêm các nút ở bốn góc của mỗi đối tượng trong lược đồ UML khi chúng được người dùng chọn (select). Khi người dùng chọn một đối tượng trên lược đồ, chúng ta sẽ vẽ bốn anchor ở bốn góc, người dùng có thể chọn bất kỳ anchor nào để thay đổi kích thước đối tượng.
48
• Connector: giữ liên kết giữa các nút và các đường. Khi người dùng kéo một
đường liên kết vào một nút nào đó, ta sẽ hiển thị các connector (hiện tại có 8 connector). Nếu người dùng di chuyển nút đã có đường được liên kết, thì connector sẽ giữ liên kết đó và di chuyển đường liên kết đó theo sự di chuyển của đối tượng.
Sơđồ lớp của các lớp quản lý (manager):
!∀#∀∃%&
!∀#∃%&∋ ()∀∗)∋ +,−∀#./ 0∀1% 021),−& 3&%2−&,4 5%%/6)&
Hình 4.4 Lược đồ lớp mô tả các thành phần đảm nhiệm vai trò quản lý
Các lớp quản lý này đều được cài đặt theo mẫu thiết kế singleton1.
• Anchors: quản lý việc hiển thị, ẩn, di chuyển của các anchor. Lớp này còn giúp cập nhật lại kích thước của đối tượng vẽ khi người dùng di chuyển bất kỳ anchor nào. Ví dụ: khi người dùng chọn đối tượng class trong sơ đồ lớp, hệ thống sẽ hiển thị bốn anchor ở bốn góc, khi người dùng di chuyển bất kỳ
anchor nào, lớp Anchors manager sẽ cập nhật lại chiều cao và chiều ngang của đối tượng class đó.
49
• Canvas: quản lý việc khởi tạo vùng vẽ, tính toán và đều chỉnh kích thước phù hợp khi người dùng sử dụng chức năng phóng to hay thu nhỏ.
• Stencil: quản lý các đối tượng vẽ hiện có trong lược đồ, thêm, xóa các đối tượng đó.
• Undo: chứa undo stack và redo stack, quản lý việc undo / redo trong hệ
thống. Việc cài đặt lớp này áp dụng mẫu thiết kế Command1. Khi người dùng thực hiện một thác táo như tạo mới, chỉnh sửa hay xóa các đối tượng vẽ, những hành động này sẽđược lưu lại trong undo stack.
• Updater: thông báo với server khi có sự thay đổi trên lược đồ, và cập nhật
động lược đồ khi server thông báo.
• Property: khi người dùng chọn một đối tượng trong lược đồ vẽ, lớp này sẽ
hiển thị thông tin của đối tượng đó và cho phép người dùng chỉnh sửa. • Toolbar: quản lý việc tạo các đối tượng vẽ.
4.2.2. Thiết kế giao diện
Chúng tôi sẽ phác thảo các phần trong trang giao diện. Đây là trang giao diện chính:
50
Hình 4.5 Thiết kế giao diện chính của hệ thống
Khi người dùng tạo mới một lược đồ nào đó, thì thanh công cụ vẽ (toolbar) sẽ hiển thị các đối tượng vẽ tương ứng của lược đồđó.
51
Hình 4.6 Thiết kế giao diện chức năng vẽ các lược đồ
Nếu người dùng chọn một đối tượng vẽ nào đó trên lược đồ, khung Properties hiển thị thông tin thuộc tính tương ứng của đối tượng đó. Người dùng có thể dễ dàng chỉnh sửa.
52
53
54
Hình 4.9 Thiết kế giao diện chức năng chat (2)
4.2.3. Cài đặt hệ thống
Sau đây chúng tôi sẽ trình bày cách mà chúng tôi đã cài đặt cho phần thiết kế trên.
Ở phần cài đặt này, chúng tôi sẽ trình bày cài đặt phía server, phía client tổng quát và cách cài đặt các tính năng quan trọng.
4.2.3.1. Cài đặt phía server
Ở server, chúng tôi chọn công nghệ NodeJS. Đây là một công nghệ mới, hỗ trợ viết
ứng dụng web bằng ngôn ngữ Javascript. Nghĩa là trong hệ thống, chúng tôi thống nhất
được ngôn ngữ lập trình ở client và server. NodeJS tuy là công nghệ mới nhưng đang phát triển mạnh mẽ và được cộng đồng ủng hộ. NodeJS thích hợp để viết những ứng dụng web mà phần xử lý tập trung nhiều ở trình duyệt. Để biết thêm thông tin về công nghệ NodeJS, xin xem thêm phục lục A.2.
55
Để sử dụng mô hình MVC, chúng tôi sử dụng thư viện đang rất được ưu chuộng là Expressjs1. Expressjs là framework viết ứng dụng web dựa trên công nghệ NodeJS. Expresjs giúp ta tạo dự án NodeJS dễ dàng. Expressjs cung cấp khá nhiều API cho việc xử lý request từ client, trả kết quả. Viết ứng dụng web theo mô hình MVC có vài điều