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.
- 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.
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
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
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
/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ỉ có một góc rẽ giữa 2 điểm và điểm đó cũng chắc chắn thuộc một con đƣờng gần nhất. Đoạn mã minh họa:
dirForSnap.loadFromWaypoints(
[point.toUrlValue(6), point.toUrlValue(6)], { getPolyline: true }
);
Trong đó, dirForSnap là một đối tƣợng thuộc lớp GDirection, đã đƣợc khai báo bắt sự kiện “load”:
GEvent.addListener(dirForSnap, "load", snapToRouteLoad);
Sau đó, trong hàm snapToRouteLoad bắt sự kiện load của dirForSnap ta có câu lệnh sau để lấy điểm trên con đƣờng gần nhất:
var pointForSnap = dirForSnap.getPolyline().getVertex(0); Trong phần đặt các điểm trạng thái, để giúp ngƣời biên tập hạn chế đặt tọa độ của trạng thái ra ngoài con đƣờng hiện tại, mỗi điểm đặt ra đều đƣợc nằm trên đƣờng vẽ mô phỏng đƣờng. Để có đƣợc điều này, cần sử dụng thêm một thƣ viện Javascript là Gmap Utility Library8 . Việc dính biểu tƣợng vào một đƣờng cụ thể đƣợc thực hiện nhƣ sau:
snapToRoute = new SnapToRoute(
map, markerStreet, currentPolyline ); 8 http://code.google.com/p/gmaps-utility-library/
47 Trong đó, markerStreet là đối biểu tƣợng, currentPolyline là đƣờng vẽ của
đƣờng phố đang đƣợc chọn.
4.1.2 Cài đặt Client
Client đƣợc lập trình trên Eclipse với plugin Android Development Tools (ADT)
Cấu trúc các file quan trọng phần Client(Android):
Bảng 4.2 Các file cài đặt trên Client
File Chức năng
/org.k51.traffic.activities/TrafficMapActivity.java Có chức năng tạo màn hình
bản đồ. Lớp
TrafficMapActivity đƣợc thừa kế từ lớp MapActivity. /org.k51.traffic.activities /ControlPanel.java Giữ chức năng quản lý màn
hình chính của chƣơng trình /org.k51.traffic.activities/ListViewActivity.java Giữ chức năng điều kiển
màn hình xem theo danh sách
/org.k51.traffic.activities/ReportTrafficActivity.java Giữ chức năng điều khiển màn hình gửi thông báo /org.k51.traffic.common/TrafficMarkerOverlay.java Dùng để vẽ các biểu tƣợng
của bản đồ.
Khi cài đặt Android Client, việc quan trọng nhất là thực hiện đƣợc liên lạc với web server và phân tích đƣợc dữ liệu dạng JSON do server trả về. Việc kết nối tới server phải sử dụng một Thread riêng để không làm treo ứng dụng đang chạy. Thread này sẽ dùng một Handler để thực thi một đối tƣợng Runnable trong đó gọi hàm cập nhật bản đồ hoặc danh sách.
Sở dĩ kiểu dữ liệu JSON đƣợc lựa chọn để truyền thông tin từ server đến client là vì JSON là kiểu dữ liệu đƣợc các thƣ viện trong Android hỗ trợ. Nó cũng là định dạng có thể sinh ra từ dịch vụ Google Maps.
4.2 Thử nghiệm
Chƣơng trình server đã đƣợc cài đặt lên máy chủ sử dụng hệ điều hành Windows 7 Ultimate, .NET Framework 3.5. Chƣơng trình client đƣợc cài lên điện thoại giả lập trong Android SDK 2.1. Hệ thống đã thực hiện đƣợc những gì đề ra trong thiết kế.
48
Chương 5. ĐÁNH GIÁ TỔNG KẾT
Chƣơng trình đã thực hiện đƣợc ý tƣởng đề ra, đó là mô phỏng một hệ thống thông báo thông tin giao thông qua mạng và các thiết bị di động. Việc xây dựng hệ thống dựa vào dịch vụ bản đồ Google Maps là một giải pháp tiết kiệm, nhanh chóng. Tuy nhiên, Google Maps chƣa hỗ trợ các APIs lập trình mức sâu hơn. Những con đƣờng chạy qua nhiều ngã tƣ, những con đƣờng đƣợc phân luồng 1 chiều vẫn chƣa đƣợc mô phỏng một cách tối ƣu. Chƣơng trình cần cải tiến hơn nữa để thực hiện đƣợc điều này. Một thực tế nữa, các thiết bị Android chƣa phổ biến ở Việt Nam. Nếu nhƣ có thể xây dựng đƣợc phần mềm chạy trên nền di động khác nữa thì khả năng ứng dụng sẽ cao hơn.
Trong quá trình nghiên cứu khóa luận tốt nghiệp, em đã học đƣợc nhiều kiến thức quý báu nhƣ kỹ thuật lập trình MVC trên ASP.NET, làm quen với lập trình di động trên Android, hiểu đƣợc mô hình cung cấp dịch vụ web thông qua tìm hiểu Google Maps APIs. Ngoài ra, khóa luận tốt nghiệp cũng giúp em củng cố hơn các kiến thức đƣợc học ở trƣờng nhƣ phân tích thiết kế sử dụng các mô hình UML.
Hiện tại, dữ liệu đánh dấu tọa độ đƣờng đƣợc nhập thông qua các API của Google Maps, vì thế một số con đƣờng có tọa độ không đƣợc chính xác. Có một hƣớng phát triển có thể khắc phục đƣợc vấn đề này đó là sử dụng định dạng GPX (GPS Exchange Format)9 để đánh dấu tọa độ của những con đƣờng. Ngoài ra, để thu hút nhiều ngƣời sử dụng, trong tƣơng lai cũng có thể phát triển hỗ trợ hỗ trợ nhiều thêm nhiều tiện ích nhƣ hỗ trợ đăng ký ngƣời dùng và hỗ trợ ghi lại hành trình của của ngƣời dùng, hoặc hỗ trợ lập nhóm ngƣời dùng, để ngƣời dùng có thể chia sẻ vị trí hiện tại của mình cũng nhƣ biết đƣợc địa chỉ của ngƣời dùng khác trong nhóm.
9
http://www.topografix.com/gpx.asp
49
Tài liệu tham khảo
[1]. Meier, Reto. Professional Android™ Application Development. Indiana : Wiley Publishing, Inc., 2008.
[2]. Ableson, W. Frank, Collins, Charlie and Sen, Robi. Unlocking Android. New York : Manning, 2009.
[3]. Martin Fowler, Kendall Scott. UML Distilled, Second Edition. Hoboken :