Bảng 3.3 Ca sử dụng Gửi thông báo
Tên ca sử dụng Gửi thông báo
Tác nhân Ngƣời dùng
Sự kiện kích hoạt Ngƣời dùng chọn nút Gửi thông báo trong phần Client
Luồng sự kiện chính:
1. Khởi tạo màn hình Gửi thông báo
2. Khởi tạo luồng mới, truy xuất dữ liệu về danh sách thành phố và quận huyện từ hệ thống, để tạo bộ lọc địa chỉ
3. Ngƣời dùng sử dụng bộ lọc để nhập vào các thông tin về địa chỉ và mô tả 4. Tạo luồng mới gửi thông tin lên hệ thống.
5. Hiển thị thông báo thành công, quay về màn hình chính. Luồng sự kiện phụ:
4.1. Không tìm thấy hệ thống. Hiện thị thông báo lỗi, quay về màn hình trƣớc 4.1. Không thực hiện thành công. Hiện thông báo để ngƣời dùng kiểm tra kết quả
và gửi lại
3.1.2.3.4 Thêm mới dữ liệu đường
Bảng 3.4 Ca sử dụng Thêm mới dữ liệu đường
Tên ca sử dụng Thêm dữ liệu đƣờng mới
Tác nhân Ngƣời biên tập
Sự kiện kích hoạt Ngƣời biên tập chọn vào liên kết thêm dữ liệu đƣờng phố mới
Luồng sự kiện chính:
1. Hiển thị trang thêm mới đƣờng 2. Hiện thị bản đồ
3. Ngƣời biên tập nhập dữ liệu, chỉ định điểm đầu và điểm cuối trên bản đồ 4. Ngƣời biên tập nhấn nút hoàn tất
5. Hệ thống nhận thông tin
6. Hệ thống cập nhật cơ sở dữ liệu
22
3.1.2.3.5 Chỉnh sử dữ liệu đường
Bảng 3.5 Ca sử dụng Chỉnh sửa dữ liệu đường
Tên ca sử dụng 3.1.2.3.6 Chỉnh sử dữ liệu đƣờng
Tác nhân Ngƣời biên tập
Sự kiện kích hoạt Ngƣời biên tập chọn vào liên kết chỉnh sửa một đƣờng phố
Luồng sự kiện chính:
1. Hiện trang chỉnh sửa thông tin
2. Vẽ đƣờng đi giữa điểm đầu và điểm cuối trên bản đồ 3. Ngƣời biên tập thay đổi thông tin
4. Gửi yêu cầu thay đổi lên hệ thống 5. Hệ thống cập nhật cơ sở dữ liệu (adsbygoogle = window.adsbygoogle || []).push({});
6. Trình duyệt quay về trang danh sách đƣờng
3.1.2.3.7 Xem trạng thái theo tên đường
Bảng 3.6 Ca sử dụng Xem trạng thái tên đường
Tên ca sử dụng Xem trạng thái theo tên đƣờng
Tác nhân Ngƣời biên tập
Sự kiện kích hoạt Ngƣời biên tập chọn một đƣờng trong danh sách
Luồng sự kiện chính:
1. Truy vấn đến hệ thống lấy thông tin của đƣờng hiện tại
2. Khi có dữ liệu trả về, hiển thị lên bản đồ tọa độ và các biểu tƣợng trạng thái của con đƣờng hiện tại
3.1.2.3.8 Tạo trạng thái mới
Bảng 3.7 Ca sử dụng Tạo trạng thái mới
Tên ca sử dụng Tạo trạng thái mới
Tác nhân Ngƣời biên tập
Sự kiện kích hoạt Ngƣời biên tập bấm chuột phải lên bản đồ và chọn một mục trong menu đƣợc hiển thị.
Điều kiện cần Ngƣời dùng chọn Xem trạng thái theo tên
đƣờng Luồng sự kiện chính:
1. Gửi thông tin tạo trạng thái mới lên hệ thống cho con đƣờng đang đƣợc chọn. 2. Hệ thống căn cứ vào thời gian hiện tại, tạo mới trạng thái, cập nhật cơ sở dữ liệu
23 3. Hệ thống gửi thông tin lại cho trình duyệt
4. Trình duyệt thêm trạng thái mới vào các trạng thái đang có và hiển thị lên bản đồ
3.1.2.3.9 Cập nhật trạng thái
Bảng 3.8 Ca sử dụng Cập nhật trạng thái
Tên ca sử dụng Cập nhật trạng thái
Tác nhân Ngƣời biên tập
Sự kiện kích hoạt Ngƣời biên tập chọn vào một biểu tƣợng trạng thái trên bản đồ
Điều kiện cần Ngƣời dùng chọn Xem trạng thái theo tên
đƣờng Luồng sự kiện chính:
1. Hiển thị của sổ chỉnh sửa thông tin trạng thái
2. Ngƣời dùng điền các thông tin mới nhƣ thời gian dự kiến kết thúc, mô tả chi tiết về trạng thái
3. Gửi thông tin tạo trạng thái mới lên hệ thống cho con đƣờng đang đƣợc chọn. 4. Hệ thống căn cứ vào thời gian hiện tại, tạo mới trạng thái, cập nhật cơ sở dữ liệu
5. Hệ thống gửi thông tin lại cho trình duyệt (adsbygoogle = window.adsbygoogle || []).push({});
6. Trình duyệt cập nhật trạng thái và hiển thị lên bản đồ
3.1.2.3.10 Kết thúc trạng thái
Bảng 3.9 Ca sử dụng Kết thúc trạng thái
Tên ca sử dụng Tạo thông báo trạng thái mới
Tác nhân Ngƣời biên tập
Sự kiện kích hoạt Ngƣời biên tập chọn vào nút kết thúc trạng thái trong màn hình thông tin trạng thái
Điều kiện cần Ngƣời dùng chọn Xem trạng thái theo tên
đƣờng Luồng sự kiện chính:
7. Gửi yêu cầu kết thúc trạng thái cho hệ thống. 8. Hệ thống cập nhật cơ sở dữ liệu
9. Hệ thống gửi thông tin lại cho trình duyệt
24
3.1.3 Biểu đồ tuần tự
3.1.3.1 Xem theo bản đồ
25
3.1.3.2 Xem theo danh sách
Hình 3.3 Biểu đồ tuần tự xem theo danh sách
26
Hình 3.4 Biểu đồ tuần tự thông báo trạng thái
3.1.3.4 Xem thông tin trạng thái đường
3.5 Biểu đồ tuần tự xem trạng thái theo tên đường
3.1.3.5 Tạo trạng thái mới
27
3.1.3.6 Cập nhật trạng thái
28
3.1.3.7 Kết thúc trạng thái
29
3.1.4 Biểu đồ lớp
Hình 3.9 Biểu đồ lớp
- Ngƣời dùng có thể thêm các định nghĩa mới về trạng thái của đƣờng. Mỗi định nghĩa mới sẽ thuộc lớp StatusType.
- Một con đƣờng có thể thuộc địa bàn Quận/Huyện khác nhau, nhƣng để đơn giản trong lập trình, mỗi con đƣờng trong chƣơng trình chỉ thuộc một quận huyện duy nhất. (adsbygoogle = window.adsbygoogle || []).push({});
- Lớp Status đại diện cho các trạng thái đƣợc tạo ra do ngƣời biên tập.
- Lớp ReportedStatus đại diện cho trạng thái đƣợc gửi lên từ ngƣời dùng
Android.
30
3.1.5 Biểu đồ hoạt động
3.1.5.1 Xem theo bản đồ
Hình 3.10 Biểu đồ hoạt đông Xem theo bản đồ
Mô tả biểu đồ:
o Hoạt động này đƣợc thực hiện khi ngƣời dùng chọn vào nút Xem theo bản đồ từ màn hình điện thoại.
o Chƣơng trình đồng thời thực hiện 2 luồng, một luồng khởi tạo bản đồ trên màn hình, một luồng truy vấn dữ liệu từ hệ thống để lấy thông tin các trạng thái.
o Kết quả trả về từ hệ thống là dữ liệu có định dạng JSON. Chƣơng trình xử lý dữ liệu này và tạo danh sách các biểu tƣợng, hiển thị lên màn hình.
31
3.1.5.2 Xem theo danh sách
Hình 3.11 Biểu đồ hoạt động Xem theo danh sách
Mô tả biểu đồ:
o Hoạt động này đƣợc thực hiện khi ngƣời dùng chọn nút Xem theo danh sách từ màn hình chính của chƣơng trình
o Dữ liệu trả về từ Truy vấn dữ liệu các trạng thái cũng có định dạng JSON.
o Trong dữ liệu trả về có cả danh sách các thành phố và đƣờng để tạo bộ lọc
o Chƣơng trình có thể thực hiện cập nhật sau thời gian nhất định hoặc khi ngƣời dùng chọn cập nhật bằng tay từ menu.
32
3.1.5.3 Thông báo tình trạng giao thông
Hình 3.12 Biểu đồ hoạt động Thông báo tình trạng giao thông
Mô tả biểu đồ:
o Hoạt động đƣợc kích hoạt khi ngƣời dùng chọn Thông báo tình trạng giao thông trên màn hình của chƣơng trình trên điện thoại
33 o Màn hình thông báo bao gồm danh sách các con đƣờng, quận huyện nhận đƣợc từ hệ thống và hộp thoại để ngƣời dùng có thể chèn thêm mô tả.
o Dữ liệu trả về sau khi gửi thông báo là một chuỗi xác nhận thành công nếu nhƣ thông báo thành công.
3.1.5.4 Xem thông tin trạng thái theo đường
Hình 3.13 Biểu đồ hoạt động Xem thông tin trạng thái theo đường
Mô tả biểu đồ:
o Hoạt động này đƣợc thực hiện thông qua trình duyệt web, khi ngƣời biên tập chọn vào một con đƣờng trong danh sách các con đƣờng trên màn hình. (adsbygoogle = window.adsbygoogle || []).push({});
o Trang web không đƣợc tải lại mà chỉ có dữ liệu đƣợc nhận về bằng Ajax và hiện ra trên màn hình và trên bản đồ.
34
3.1.5.5 Thêm trạng thái mới
Hình 3.14 Biểu đồ hoạt động Thêm trạng thái mới
Mô tả biểu đồ:
o Hoạt động đƣợc thực hiện khi ngƣời biên tập bấm chuột phải trong phần bản đồ và thực chọn một trạng thái trong menu popup.
o Mỗi con đƣờng khi đƣợc chọn sẽ có một đƣờng vẽ màu xanh mô phỏng trục đƣờng đó. Tọa độ của điểm trạng thái sẽ nằm trên đƣờng mô phỏng đó.
o Thông tin trả về sẽ bao gồm các dữ liệu trạng thái giao thông hiện tại o Các trƣờng thời gian đƣợc gán mặc định từ hệ thống. Ngƣời biên tập sử
35
3.1.5.6 Cập nhật trạng thái
Hình 3.15 Biểu đồ hoạt đông Cập nhật trạng thái
Mô tả biểu đồ:
o Hoạt động đƣợc thực hiện khi ngƣời dùng bấm chuột trái lên một biểu tƣợng trạng thái trên màn hình và chọn nút Sửa/Thêm mô tả.
o Khi thực hiện gửi thông tin và xóa trạng thái khỏi bản đồ, trang web sẽ không đƣợc tải lại
36
3.1.5.7 Kết thúc trạng thái
Hình 3.16 Biểu đồ hoạt động Kết thúc trạng thái
Mô tả biểu đồ
o Hoạt động đƣợc thực hiện khi ngƣời dùng bấm chuột trái lên một biểu tƣợng trạng thái trên màn hình và chọn nút Kết thúc.
3.1.6 Biểu đồ thành phần
37
3.1.7 Biểu đồ triển khai
Hình 3.18 Biểu đồ triển khai
Hệ thống bao đƣợc triển khai thành 4 thành phần chính.
- Phần dành cho ngƣời biên tập đƣợc chạy trên Web Browsers (trình duyệt web). - Phần chạy dành cho ngƣời sử dụng chạy trên các thiết bị Android.
- Phần Server đƣợc cài đặt trên máy chủ IIS Server.
- Cơ sở dữ liệu đƣợc cài đặt trên hệ quản trị CSDL MS SQL Server. - Các phần sử dụng giao diện bản đồ của dịch vụ Google Maps. - Các thành phần giao tiếp với nhau thông qua giao thức HTTP.
38
3.1.8 Thiết kế giao diện
3.1.8.1 Màn hình chính chương trình trên Android (adsbygoogle = window.adsbygoogle || []).push({});
Hình 3.19 Màn hình chính chương trình trên Android
Chú thích:
o Khi ngƣời dùng chọn “Xem bản đồ” thì chƣơng trình chuyển qua màn hình 3.19
o Khi ngƣời dùng chọn “Xem danh sách” thì chƣơng trình chuyển qua màn hình nhƣ 3.20
o Khi ngƣời dùng chọn “Gửi thông báo GT” thì chƣơng trình sẽ chuyển qua màn hình 3.21
o Khi ngƣời dùng chọn “Hƣớng dẫn” chƣơng trình sẽ chuyển qua màn hình hƣớng dẫn nhƣ hình 3.22
39
3.1.8.2 Giao diện xem bản đồ
Hình 3.20 Xem thông tin trạng thái của điểm trên bản đồ
Chú thích:
o A: Các biểu tƣợng của trạng thái giao thông, khi chọn vào các điểm này, chúng ta sẽ có cửa đổ ra nhƣ hình B.
o B: Cửa sổ Popup hiện thông tin chi tiết của một trạng thái.
o C: Điều khiển phóng to, thu nhỏ. Khi phóng to/ thu nhỏ hết cỡ, phím điều khiển tƣơng ứng sẽ bị vô hiệu. Nếu ngƣời dùng tiếp tục bấm thì sẽ tạo ra âm thanh để thông báo.
o Để di chuyển bản đồ, ngƣời dùng sử dụng các nút định hƣớng trên điện thoại.
o Ngƣời dùng có thể chạm nhẹ vào một điểm nào đó để phóng to màn hình.
40
3.1.8.3 Giao diện xem theo danh sách
Hình 3.21 Giao diện xem theo danh sách
Chú thích:
o A: Hộp chọn lọc kết quả theo Thành phố, Quận huyện o B: Kết quả theo Thành phố, Quận huyện đƣợc chọn. o C: Menu cập nhật bằng tay.
o D: Mở hƣớng dẫn sử dụng
o C và D sẽ hiện lên khi ngƣời dùng bấm chọn phím Menu trên máy điện thoại.
41
3.1.8.4 Gửi thông báo
Hình 3.22 Giao diện màn hình gửi thông báo
Chú thích:
- A: Hộp thoại chọn thành phố. Khi một thành phố đƣợc lựa chọn, các dữ liệu quận huyện, và đƣờng phố còn lại là những đơn vị thuộc thành phố đƣợc chọn. - B: Hộp thoại chọn Quận huyện. Khi quận huyện đƣợc chọn, danh sách của hộp
thoại chọn Đƣờng phố sẽ còn là những đƣờng phố thuộc Quận, huyện đƣợc chọn.
- C: Tùy chọn tên đƣờng phố. Có thể chọn ngay tên đƣờng để gửi thông tin mà không cần chọn tên thành phố. Nhƣng khi chƣa chọn tên đƣờng mà đã chọn (adsbygoogle = window.adsbygoogle || []).push({});
Gửi thì sẽ nhận đƣợc hộp thoại thông báo.
- D: Nhập mô tả về tình trạng giao thông trên con đƣờng đƣợc chọn. - E: Tùy chọn có gửi kèm điện thoại hay không.
- F: Khi bấm nút Gửi, thông tin sẽ đƣợc gửi đi.
- Ngoài các thông tin để thông báo trạng thái đƣờng phố, chƣơng trình sẽ gửi thông tin về địa chỉ GPS và địa chỉ truy vấn đƣợc từ Google Maps ứng với địa chỉ GPS đó của ngƣời thông báo.
42 3.1.8.5 Màn hình hướng dẫn Hình 3.23 Màn hình hướng dẫn Chú thích: Màn hình hƣớng dẫn có thể đƣợc mở bằng cách chọn vào nút bấn “Hƣớng dẫn” ở màn hình chính, cũng có thể đƣợc mở ra bằng cách chọn Menu “Hƣớng dẫn” trong các màn hình “Xem Bản đồ” hoặc là “Xem danh sách”.
43
3.1.8.6 Màn hình điều khiển trạng thái
Hình 3.24 Giao diện điều khiển trạng thái giao thông
Chú thích:
o A: Danh sách đƣờng phố
o B: Số lƣợng ngƣời dùng thông báo o C: Các trạng thái đã đặt
o D: Điều khiển bản đồ
Khi ngƣời dùng chọn vào một tên đƣờng trong A, trình duyệt sẽ lấy thông tin tƣơng ứng và cập nhật ở B và trên bản đồ.
Khi ngƣời dùng chọn C, màn hình sẽ chuyển qua nhƣ hình chỉnh sửa trạng thái nhƣ hình 3.25.
44
Hình 3.25 Màn hình Thêm trạng thái mới
Chú thích:
- A: Biểu tƣợng tọa độ. Chỉ chạy trên đƣờng minh họa con đƣờng - B: Menu chuột phải, menu có là các trạng thái có thể thêm mới - C: Một trạng thái đã đƣợc thêm
3.1.8.7 Màn hình chỉnh sửa thông tin
45
Chương 4. CÀI ĐẶT VÀ THỬ NGHIỆM
4.1 Cài đặt
4.1.1 Cài đặt server
Server của hệ thống sử dụng hệ quản trị CSDL MS SQL Express đƣợc lập trình trên ngôn ngữ ASP.NET MVC 1.0 và công cụ Visual Studio. Ngoài ra phần Server cũng sử dụng Jquery Javascript Framework7
phiên bản 1.4.2. Cấu trúc các file quan trọng phần server:
Bảng 4.1 Các file cài đặt phần server
File Chức năng
/Controllers/CitiesController.cs Lớp điều khiển các thao tác liên quan đến Model City(Thành phố)
/Controllers/DistrictsController.cs Lớp điều khiển các thao tác liên quan đến Model District(Quận/Huyện)
/Controllers/HomeController.cs Lớp điều khiển chính của hệ thống, thao tác Quản lý trạng thái (adsbygoogle = window.adsbygoogle || []).push({});
/Controllers/ReportedStatusController.cs Lớp điều khiển các thao tác thông báo từ Android Client
/Controllers/StatusController.cs Lớp điều khiển các thao tác liên quan đến Status Model
/Controllers/StreetController Lớp điều khiển của Model Street /Models/TrafficDataContext.cs Lớp thao tác trực tiếp với các Model. /Models/TrafficDB.dbml Lớp chứa mô hình quan hệ giữa các
Model trong
/Views/Shared/Site.Master File Master page, định hình giao diện chung cho cả Web site.
/Scripts/custommap.js File Javascript chức các mã thao tác với bản đồ
Phần quan trọng nhất của chƣơng trình ở server là việc tích hợp chặt chẽ với dịch Google Maps. Đa số các chức năng đều sử dụng bản đồ. Để tạo ra giao diện bản đồ, cần thực hiện các bƣớc nhƣ sau:
map = new google.maps.Map2(
document.getElementById("map") );
7
46 Chƣơng trình hỗ trợ các thao tác bấm chuột phải trong bản đồ. Hàm bắt sự kiện chuột phải lên màn hình đƣợc thực hiện nhƣ sau:
GEvent.addDomListener(map, 'singlerightclick', showRightClickMenu(pixel, tile)
);
Sau khi khởi tạo bản đồ. Tùy ứng dụng có thể tùy biến bản đồ cho phù hợp. Trong phần thêm đƣờng mới, khi thêm tọa độ của con đƣờng, ngƣời biên tập bấm chuột phải lên một vùng nào đó trên bản đồ, sau đó tọa độ điểm bấm chuột phải đƣợc lƣu lại và gán cho tọa độ của đƣờng. Một con đƣờng muốn vẽ ra đƣợc trên bản đồ thì cần 2 điểm đầu và cuối. Tọa độ điểm gán luôn đảm bảo đƣợc gắn với một con đƣờng nào đó. Để thực hiện đƣợc điều này, cần thực hiện một truy vấn tìm đƣờng với điểm bắt đầu và kết thúc là chính nó. Nhƣ vậy, trong dữ liệu trả về từ Google Maps chỉ