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 (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ỉ 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 (adsbygoogle = window.adsbygoogle || []).push({});
/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 : John Wiley & Sons, Inc, 2000.
[4]. Murphy, Mark L. Beggining Android. New York : Apress, 2009.
[5]. Pimpler, Eric. Mashup Mania with Google Maps. San Antonio : Geospatial Training Services, LLC, 2009.
[6]. Chaffe, Jonathan and Swedberg, Karl. Learning jQuery 1.3.
Birmingham - Mumbai : Packt Publishing, 2009.
[7]. Svennerberg, Gabriel. Beginning Google Maps Applications. New York : Apress, 2010.
[8]. Palermo, Jeffrey, Scheirman, Ben and Bogard, Jimmy. ASP.NET MVC
in Action. Greenwich : Manning, 2009. (adsbygoogle = window.adsbygoogle || []).push({});
[9]. Sanderson, Steven. Pro ASP.NET MVC Framework. New York : Apress, 2009.