Hình 3.1: Kiến trúc phần mềm của chương trình demo a) Phía người dùng (Client):
Mục tiêu ban đầu của việc nghiên cứu là cố gắng để chương trình tương thích với đa số các trình duyệt thông dụng. Trong phần kết quả nghiên cứu sẽ đề cập chi tiết về các trình duyệt đã được kiểm tra để chương trình chạy tốt.
b) Tầng trình bày (Presentation):
Như đã giới thiệu ở chương trình phần chủ yếu của tầng trình bày sử dụng framework GWT. Tất cả những gì hiển thị trên giao diện chương trình đều sử dụng các widget của GWT và của gói thư viện SmartGWT. Các ứng dụng các gói này vào chương trình sẽ được trình bày chi tiết trong phần giải pháp đồ họa. Tầng này cũng đảm nhiệm các nhiệm vụ đồ họa, các chức năng tương tác kéo thả, thay đổi kích thước thậm chí các chức năng chuyển đổi cũng được xử lý ở tầng này. Tầng trình bày bao gồm các gói com.luong.client và com.luong.shared. Chúng ta sẽ thấy các gói này mã nguồn java nhưng khi biên dịch chúng sẽ được biên dịch thành mã nguồn javascript và chạy phía client.
c) Tầng xử lý các nghiệp vụ (Bussiness):
Trong chương trình demo đa số các chức năng được thực hiện ở phía client để tăng tốc độ xử lý. Chỉ có một vài chức năng cần giao tiếp với server như chức
năng login bằng tài khoản google, chương trình sử dụng servlet để xử lý chức năng này. Tầng này bao gồm các gói trong com.luong.server.
d) Tầng Persistence:
Tầng persistence cho phép chương trình tương tác với datastore. Như đã đề cập ở chương trên, datastore hỗ trợ JDO, JPA và các API cấp thấp. Ở đây chương trình sử dụng JDO (Java Data Object) nhằm giúp chương trình nâng cao tính khả chuyển của chương trình.
e) Tầng lưu trữ dữ liệu:
Ở tầng lưu trữ dữ liệu chương trình sử dụng datastore của Google App Engine. Chương cơ sở lý thuyết đã có trình bày tổng quan về datastore. Để đơn giản demo tiết kiệm kịp thời gian hoàn thành tiến độ chương trình chỉ sử dụng một kiểu thực thể duy nhất là useraccount để lưu trữ thông tin người dùng, và một thuộc tính diagram kiểu List<String> để lưu trữ các diagram mà người sử dụng đã save.