T¹p chÝ KTKT Má - §Þa chÊt, sè 43/7-2013, tr. 94-99<br />
<br />
ỨNG DỤNG AJAX XÂY DỰNG WEBSITE HIỂN THỊ THÔNG TIN ĐỘNG<br />
CỦA CÁC PHƯƠNG TIỆN DI CHUYỂN CÓ GẮN THIẾT BỊ GPS<br />
LÊN BẢN ĐỒ NỀN TỪ GOOGLE MAP<br />
ĐẶNG VĂN NAM, CẢNH CHÍ THANH, Trường Đại học Mỏ - Địa chất<br />
Tóm tắt: Hệ thống định vị toàn cầu và các ứng dụng của nó đã và đang trở nên quan trọng với tất<br />
các lĩnh vực của đời sống con người. Chính vì vậy việc nghiên cứu cũng như khai thác ứng dụng từ<br />
nó đang là một trong những lĩnh vực rất được quan tâm. Tháng 10/2009 Chính phủ ra nghị định<br />
91/2009/NĐ-CP về kinh doanh và điều kiện kinh doanh vận tải bằng xe ô tô, trong đó quy định tất cả<br />
các phương tiện phải lắp đặt thiết bị giám sát hành trình. Công ty TNHH Thiết bị và Công nghệ tự<br />
động Tân Á Châu là đơn vị tiên phong trong lĩnh vực sản xuất thiết bị định vị. Hiện tại công ty đã<br />
cho ra mắt sản phẩm Ibee, là thiết bị định vị được gắn lên ôtô để quản lý và theo dõi lộ trình di<br />
chuyển của các phương tiện. Tuy nhiên, để sử dụng được phần cứng thì yêu cầu đặt ra là cần phải<br />
có một hệ thống phần mềm đi cùng. Bài báo này sẽ giới thiệu một giải pháp phần mềm cụ thể mà<br />
nhóm tác giả đã xây dựng và triển khai thử nghiệm thành công trong quá trình hợp tác với công ty<br />
để khai thác hiệu quả thiết bị phần cứng nói trên.<br />
<br />
1. Mở đầu<br />
Hệ thống định vị toàn cầu (GPS) và các ứng<br />
dụng của nó đã không còn xa lạ với chúng ta.<br />
Ban đầu mục đích của GPS là phục vụ trong<br />
quân đội, nhưng từ những năm 1980, Chính phủ<br />
Hoa Kỳ đã cho phép tất cả mọi người không<br />
phân biệt quốc tịch có thể sử dụng và hoàn toàn<br />
không phải trả phí [2]. Từ đó đến nay các thiết<br />
bị định vị ứng dụng GPS phục vụ cuộc sống<br />
ngày càng phổ biến đáp ứng nhiều mục đích<br />
khác nhau như các thiết bị định vị cá nhân, thiết<br />
bị hỗ trợ giao thông, theo dõi trẻ, theo dõi vật<br />
nuôi, các thiết bị ứng dụng trong trắc địa, bản<br />
đồ, hàng hải, hàng không… Tại Việt Nam,<br />
những năm gần đây các thiết bị định vị GPS<br />
<br />
cũng đã tương đối phổ biến. Tuy nhiên, các<br />
thiết bị này chủ yếu được nhập từ nước ngoài<br />
như Trung Quốc, Nhật Bản…<br />
Trong những năm qua, Công ty TNHH<br />
Thiết bị và Công nghệ tự động Tân Á Châu là<br />
một trong những đơn vị tiên phong trong việc<br />
nghiên cứu các ứng dụng của hệ thống định vị<br />
GPS cho nhu cầu dân sinh. Một trong số những<br />
kết quả nổi bật mà công ty đã đạt được đó là<br />
vào cuối năm 2009, tại khu công nghệ cao Láng<br />
Hòa Lạc, Công ty đã nghiên cứu thành công và<br />
cho ra mắt thiết bị định vị vệ tinh GPS với tên<br />
gọi “Hộp đen thông minh cho các phương tiện<br />
di chuyển – Ibee (Intelligent Blackbox<br />
Everywhere Everytime)”.<br />
<br />
Hình 1. Mô hình hoạt động của phần cứng và vị trí của website trong hệ thống<br />
94<br />
<br />
Khi thiết bị được gắn vào ôtô, trong quá<br />
trình ôtô di chuyển nó sẽ thu tín hiệu GPS từ vệ<br />
tinh sau đó tổng hợp các thông tin của tín hiệu<br />
GPS thu được kết hợp với các thông số ghi<br />
nhận từ các cảm biến và tiến hành mã hoá các<br />
thông số này tạo thành một chuỗi dữ liệu tại<br />
từng thời điểm theo khoảng thời gian thiết lập<br />
(5s, 10s,…).<br />
- Dữ liệu của vệ tinh bao gồm các thông số:<br />
Kinh độ, vĩ độ, vận tốc di chuyển của ô tô, góc<br />
quay của phương tiện, thời điểm phát tín hiệu<br />
của vệ tinh (giờ - phút - giây), ngày phát tín<br />
hiệu (ngày - tháng - năm)<br />
- Dữ liệu của thiết bị bao gồm các thông số:<br />
Trạng thái quạt, trạng thái khoá xe, trạng thái<br />
thẻ nhớ, trạng thái khẩn cấp, cảm biết nhiệt độ,<br />
cổng hồng ngoại, điều kiển role…<br />
Dữ liệu tổng hợp từ các thiết bị sẽ được gửi<br />
về Máy chủ thông qua các trạm phát sóng BTS<br />
bằng phương thức kết nối GPRS. Máy chủ sẽ có<br />
nhiệm vụ thu nhận, giải mã dữ liệu và lưu trữ<br />
lại các thông tin này. Mô hình hoạt động của<br />
phần cứng và hệ thống website được minh họa<br />
trong hình 1.<br />
Bài toán đặt ra ở đây là trên cơ sở các số<br />
liệu mà thiết bị gửi về cần phải có một phần<br />
mềm chuyên dụng để xử lý các dữ liệu đó và<br />
chuyển đổi thành các đối tượng hiển thị lên trên<br />
bản đồ cho người dùng theo dõi tình trạng hiện<br />
tại của phương tiện và phục vụ cho việc quản lý<br />
các phương tiện này một cách hiệu quả. Để phát<br />
triển ứng dụng, một trong những kỹ thuật được<br />
sử dụng đó là Ajax. Kỹ thuật này sẽ thực hiện<br />
việc xử lý một thao tác quan trọng của hệ thống<br />
đó là tự động cập nhật trạng thái mới nhất của<br />
các phương tiện thông qua việc tải đối tượng xe<br />
và hiển thị lên bản đồ. Đồng thời kỹ thuật này<br />
<br />
cũng giải quyết một vấn đề thường gặp đối với<br />
các website thao tác với bản đồ đó là tốc độ tải<br />
trang. Việc chia nhỏ dữ liệu và chỉ hiển thị<br />
những phần thay đổi cần thiết giúp cho tăng tốc<br />
độ của website lên đáng kể. Các phần dưới đây<br />
sẽ trình bày về Ajax và việc triển khai Ajax vào<br />
hệ thống website để giải quyết các vấn đề nêu<br />
trên.<br />
2. Ứng dụng Ajax vào bài toán<br />
2.1. Khởi tạo đối tượng Ajax<br />
Ajax là từ viết tắt của Asynchronous<br />
JavaScript and XML (JavaScript và XML<br />
không đồng bộ), là bộ công cụ cho phép tăng<br />
tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu<br />
và chỉ hiển thị những gì cần thiết, thay vì tải lại<br />
toàn bộ trang web. Ajax là công nghệ kết hợp<br />
hai tính năng mạnh của JavaScript được các nhà<br />
phát triền đánh giá rất cao. Trên thực tế Ajax là<br />
tập hợp các công nghệ, trong đó mỗi công nghệ<br />
cung cấp một hệ thống cơ sở nền tảng cho thiết<br />
kế và phát triển ứng dụng web. Ajax bao gồm :<br />
- Thể hiện trang web theo tiêu chuẩn<br />
XHTML và CSS.<br />
- Nâng cao tính năng động và tương tác<br />
bằng DOM.<br />
- Trao đổi và xử lý dữ liệu bằng XML và<br />
XSLT.<br />
- Truy cập dữ liệu theo kiểu bất đồng bộ<br />
(Asynchronous) bằng XMLHttpResquest.<br />
- Sử dụng JavaScript để liên kết các thành<br />
phần trên lại với nhau.<br />
Trong các thành phần ở trên, điểm mấu chốt<br />
của Ajax nằm ở đối tượng XMLHttpRequest<br />
[1]. Để có thể sử dụng được XMLHttpRequest<br />
ta cần phải khai báo đối tượng này qua hàm<br />
GetXmlHttpObject dưới đây:<br />
<br />
function GetXmlHttpObject(){<br />
var Ajax=null;<br />
try{Ajax=new XMLHttpRequest();}<br />
catch (e)<br />
{<br />
Try {Ajax=new ActiveXObject("Msxml2.XMLHTTP");}<br />
catch (e){Ajax = new ActiveXObject("Microsoft.XMLHTTP");}<br />
}<br />
return Ajax;}[1]<br />
<br />
95<br />
<br />
Khi đối tượng XMLHttpRequest đã được<br />
khai báo thì chúng ta đã có thể sử dụng đối<br />
tượng này cho ứng dụng web của mình. Trong<br />
hình 2 minh họa mô hình ứng dụng web truyền<br />
thống và ứng dụng web khi sử dụng kỹ thuật<br />
Ajax.<br />
<br />
được sử dụng để tải dữ liệu mới của các thiết bị<br />
và hiển thị vị trí cùng các thông tin mới đó lên<br />
website mà không phải tải lại các thành phần<br />
không liên quan.<br />
Cơ chế hoạt động của Ajax trong website<br />
được minh họa như sơ đồ hình 3. Cứ mỗi một<br />
khoảng thời gian được thiết lập (timeset) hệ<br />
thống sẽ tự động kết nối tới máy chủ (server) và<br />
đọc các thông tin trong tập tin dữ liệu XML (chi<br />
tiết về tập tin dữ liệu này được trình bày ở phần<br />
dưới).<br />
<br />
Hình 2. Mô hình ứng dụng web truyền thống và<br />
có sử dụng Ajax<br />
2.2. Tích hợp Ajax vào website<br />
Một trong những vấn đề mà hệ thống<br />
website phải thực hiện đó là quá trình hiển thị<br />
các đối tượng xe lên bản đồ nền. Do là hiển thị<br />
thông tin động, tức là ngay khi thiết bị gửi<br />
thông tin về máy chủ thì hệ thống phải xử lý và<br />
hiển thị vị trí, thông tin hiện thời của phương<br />
tiện đó. Chính vì thế hệ thống sẽ liên tục tải dữ<br />
liệu mới của các đối tượng xe và hiển thị chúng<br />
trên bản đồ. Như vậy, chỉ có vị trí và thông tin<br />
của các đối tượng xe là thay đổi theo thời gian<br />
và liên tục còn các thành phần khác của website<br />
thì không cần thiết. Do vậy, nếu sử dụng kỹ<br />
thuật bình thường thì mỗi lần hiển thị thông tin<br />
mới lại phải tải lại toàn bộ trang web bao gồm<br />
cả đối tượng xe, bản đồ và các thành phần khác.<br />
Dẫn đến hệ thống phải xử lý rất nhiều và không<br />
khả thi. Một sự lựa chọn tối ưu trong trường<br />
hợp này đó là sử dụng Ajax. Kỹ thuật Ajax sẽ<br />
<br />
Hình 3. Cơ chế hoạt động của Ajax<br />
trong Website<br />
Nhờ sử dụng kỹ thuật Ajax nên hệ thống<br />
chỉ tác dụng lên các đối tượng xe còn các thành<br />
phần khác không thay đổi, có nghĩa là không<br />
cần phải nạp lại toàn bộ trang web khi hiển thị<br />
trạng thái mới của xe. Trong ứng dụng hàm<br />
loadXMLcar_googlemap() sẽ thực hiện việc<br />
này.<br />
<br />
function loadXMLcar_googlemap(filename){<br />
url=filename+'.xml';<br />
xmlhttp=null;<br />
xmlhttp=GetXmlHttpObject();<br />
if (xmlhttp!=null){<br />
xmlhttp.onreadystatechange=onResponse_googlemap;<br />
xmlhttp.open("GET",url,true);<br />
xmlhttp.send(null);}<br />
else{<br />
alert("Your browser does not support XMLHTTP.");}<br />
timeset=setTimeout("loadXMLcar_googlemap()",5000);<br />
}<br />
<br />
96<br />
<br />
Tệp dữ liệu XML được truyền vào thông<br />
qua biến filename. Trong đó cần quan tâm<br />
tới thời gian ấn định (timeset) để hệ thống<br />
tự động tải lại thông tin của đối tượng xe<br />
được thiết lập thông qua hàm setTimeout(),<br />
trong hàm xây dựng ở trên thời gian thiết<br />
lập là 5 giây. Mỗi một xe gắn thiết bị được<br />
xây dựng thành một đối tượng CarObject,<br />
như vậy cứ sau khoảng thời gian thiết lập hệ<br />
thống lại tự động gọi lại hàm<br />
loadXMLcar_googlemap() và lấy các thông<br />
tin mới nhất của các đối tượng này để cập<br />
nhật lại các thông số và hiển thị vị trí mới<br />
trên bản đồ.<br />
<br />
Như đã trình bày trong phần 1, sau khi dữ<br />
liệu được tổng hợp và gửi về máy chủ, Máy chủ<br />
sẽ phân tách và lưu trữ dữ liệu vào các bảng.<br />
Máy chủ sử dụng hệ quản trị cơ sở dữ liệu SQL<br />
Server 2008. Ngoài việc lưu trữ dữ liệu trong<br />
các bảng, hệ thống website còn sử dụng một tệp<br />
dữ liệu XML. Tệp dữ liệu này sẽ lưu trữ thông<br />
tin của các thiết bị ở thời điểm sau cùng. Tệp dữ<br />
liệu này được sử dụng trong việc hiển thị thông<br />
tin hiện thời của xe. Khi dữ liệu của thiết bị gửi<br />
về máy chủ, các dữ liệu này sẽ được lưu trữ<br />
trong các bảng tương ứng và đồng thời sẽ cập<br />
nhật các dữ liệu mới của các đối tượng xe vào<br />
trong tệp XML. Cấu trúc của tệp XML như sau:<br />
<br />
<br />
<br />
1 % Mã xác định người dùng<br />
NASIA00000 % Mã thiết bị định vị<br />
0 % Số xe<br />
1 % Mã xác định công ty<br />
0 % Thông số xác định trạng thái cửa<br />
0 % Thông số xác định xe có khách hay không<br />
100 % Thông số xác định xăng<br />
100 % Thông số xác định dầu<br />
105.79975 % Thông số xác định tọa độ X của xe<br />
20.9939333333333 % Thông số xác định tọa độ Y của xe<br />
50 % Thông số xác định tốc độ xe<br />
50 %Thông số xác định nhiệt độ xe<br />
112 % Thông số xác định hướng di chuyển của xe<br />
3 % Thông số xác định trạng thái xe<br />
12/22/2009 10:01:06 AM % Thông số thời gian<br />
<br />
………………….. .. ..<br />
<br />
<br />
3. Thiết kế và xây dựng website<br />
<br />
Hình 4. Giao diện chính của Website<br />
97<br />
<br />
Căn cứ vào các yêu cầu chung của việc<br />
thiết kế website kết hợp với khảo sát phân tích<br />
bài toán, hệ thống website được xây dựng có<br />
giao diện như hình 4. Tất cả các đối tượng xe sẽ<br />
được hiển thị lên trên bản đồ thông qua biểu<br />
tượng là hình các ô tô. Mỗi hình ô tô khác nhau<br />
thể hiện một trạng thái của xe như: xe đang<br />
dừng, đang chạy, xe mất liên lạc… Khi muốn<br />
biết thông tin chi tiết của đối tượng xe nào<br />
người dùng chỉ cần kích lên xe tương ứng, một<br />
bảng tổng hợp các thông số hiện thời của xe sẽ<br />
hiện lên.<br />
<br />
Website được xây dựng ngoài tính năng<br />
hiển thị được các đối tượng xe lên trên bản đồ<br />
nền, đồng thời vị trí và thông tin của xe liên tục<br />
được cập nhật. Hệ thống cũng cho phép xem lại<br />
lộ trình của xe đã di chuyển trong quá khứ, mô<br />
phỏng lại quá trình di chuyển một cách trực<br />
quan (minh họa hình 5). Ngoài ra còn cho phép<br />
thực hiện các chức năng như theo dõi xe, tìm<br />
kiếm định vị xe và các chức năng tổng hợp báo<br />
cáo thống kê.<br />
<br />
Hình 5. Chức năng xem lại lộ trình di chuyển của xe tại một số thời điểm bất kỳ<br />
98<br />
<br />