THUẬT TOÁN DIJKSTRA và THƯ VIỆN LEAFLET

MỌI THÔNG TIN CHI TIẾT XIN
LIÊN HỆ
MAIL:
XEM DEMO
BÁO CÁO
CODE
TRƯỜNG ĐẠI HỌC CẦN THƠ
KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
----------

2


NIÊN LUẬN CƠ SỞ NGHÀNH
KỸ THUẬT PHẦN MÊM
TÌM ĐƯỜNG ĐI NGẮN NHẤT GIỮA CÁC NHÀ HỌC
SỬ DỤNG THUẬT TOÁN DIJKSTRA VÀ THƯ VIỆN LEAFLET

Cán bộ hướng dẫn:
Tiến sĩ: Nguyễn Công Danh
Ngọc TrungXXXXXXX

Sinh viên thực hiện:
XXXXXXXNguyễn Hồ
B1704864XXXXXXX

CẦN THƠ 25/11/2020

3

Mục Lục

ĐÁNH GIÁ KẾT QUẢ THỰC HIỆN NIÊN LUẬN 1
(Học kỳ I, Niên khóa 2020-2021)
GIÁO VIÊN HƯỚNG DẪN:
STT
HỌ VÀ TÊN
Nguyễn
Cơng Danh
1
SINH VIÊN THỰC HIỆN:
STT
HỌ VÀ TÊN
MSSV
1

Nguyễn Hồ Ngọc TrungXXXXXXX

MSCB

THƯỞNG
(Tối đa 1,0 điểm)

ĐIỂM

B1704864XXX
XXXX

I. HÌNH THỨC (Tối đa 0,5 điểm)

Bìa (tối đa 0,25 điểm)
 Các tiêu đề: Trường ĐHCT, Khoa CNTT
 Loại niên luận: 1, Tên đề tài
 Giáo viên hướng dẫn: chức danh, họ tên.
 Thông tin về các sinh viên thực hiện: họ tên, mã số, lớp
 Năm thực hiện
Bố cục (tối đa 0.25 điểm)
 Nhận xét của giáo viên hướng dẫn và giáo viên chấm
 Mục lục: cấu trúc chương, mục và tiểu mục
 Phụ lục (nếu có)
 Tài liệu tham khảo
II. NỘI DUNG (Tối đa 3,5 điểm)
Tổng quan (tối đa 0,5 điểm)
 Mơ tả bài tốn, mục tiêu cần đạt được (0,25 điểm)
 Hướng giải quyết và kế hoạch thực hiện (0,25 điểm)
Lý thuyết (tối đa 0,5 điểm)
 Các khái niệm sử dụng trong đề tài
 Kết quả vận dụng lý thuyết vào đề tài
Ứng dụng (tối đa 2,0 điểm)
 Phân tích u cầu bài tốn, xây dựng các cấu trúc dữ liệu cần thiết
(tối đa 0,5 điểm)
 Giải thuật (Lưu đồ-Ngôn ngữ giả) (1,0 điểm)
 Giới thiệu chương trình (0,5 điểm)
Kết luận (tối đa 0,5 điểm)
 Nhận xét kết quả đạt được
 Hạn chế
 Hướng phát triển
III. CHƯƠNG TRÌNH DEMO (Tối đa 5,0
điểm) Giao diện thân thiện với người dùng
(1.0 điểm) Hướng dẫn sử dụng (0,5 điểm)

Kết quả thực hiện đúng với kết quả của phần ứng dụng (3,5 điểm)

4


Ghi chú: Điểm trong khung “các sinh viên thực hiện” là điểm kết quả cuối cùng của từng sinh viên trong
quá trình thực hiện niên luận 1.

Nếu sinh viên demo chương trình và trả lời vấn đáp khơng đạt u cầu của giáo viên hướng dẫn
thì sinh viên sẽ nhận điểm F cho học phần này.

Cần Thơ, ngày tháng 12
năm 2020
GIÁO VIÊN CHẤM

NHẬN XÉT CỦA GIÁO VIÊN
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………

……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
5


……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………

6


TÓM TẮT
Là sinh viên năm 4 của trường Đại Học Cần Thơ, đã nhiều lần tôi được các bạn
tân sinh viên đặt những câu hỏi về tìm các nhà học trong khuôn viên trường mỗi
năm dịp trường tiếp nhận các bạn tân sinh viên khóa mới. Hầu hết các bạn khóa
mới điều chưa quen thuộc với các vị trí nhà học và lúng túng chạy khấp nơi hỏi
tìm mỗi khi đi học. Vì nhằm giúp các bạn có thể tìm đường 1 cách dễ dàng và
nhanh chống nên tôi đã cho ra đời Hệ Thống Tìm Đường Giữa Các Nhà Học
trong khuôn viên trường Đại Học Cần Thơ. Hệ Thống Tìm Đường Giữa Các Nhà
Học sử dụng thuật tốn Dijkstra và Leaflet(thư viện JavaScript mã nguồn mở)
cùng phương pháp mô hình hóa bản đồ đường đi trở thành đồ thị, các nhà học là
các đỉnh và đường đi là các cung của đồ thị 1 các trực quan cùng với việc cài đặt
hệ thống trên môi trường web sử dụng html, css, javascipt,… Làm cho hệ thống
dễ sử dụng và rất thân thiện với người dung. Kết quả cho thấy Hệ thống vượt trội
hơn các app tìm đường trên desktop ở khía cạnh dễ sử dụng hơn, thân thiện hơn,
bạn khơng cần phải cài đặt app vào máy tính mà chỉ cần truy cập trực tiếp vào
website của hệ thống sau đó tìm nhà học mà bạn cần tìm. Hệ thống sẽ chỉ đường
đi cho bạn cùng với chú thích đầy đủ và chức năng tính quảng đường, thời gian.

7


CHƯƠNG 1: TỔNG QUAN
I.

MƠ TẢ BÀI TỐN

Mỗi năm, trường Đại Học Cần Thơ lại chào đoán 1 số lượng lớn các bạn tân sinh
viên từ nhiều nơi đến. Hầu hết các bạn sinh viên cho biết rằng trải nghiệm đầu
tiên về khuôn viên nhà trường là rất rộng lớn và nhiều khoa, nhiều nhà học. Điều
đó làm cho các bạn rất mơ hồ về đường đi, các khoa, các nhà học… Bên cạnh đó,
trường Đại Học Cần Thơ thường xuyên đoán tiếp các bạn sinh viên quốc tế, việc
khác biệt ngôn ngữ và sinh hoạt ở môi trường mới làm cho các bạn rất khó khan,
kể cả trong việc tham quan hết khuôn viên nhà trường, các địa điểm,…
Những ngày đầu đi học, các bạn thường khơng biết vị trí của nhà học hay khoa
mà mình học nên phải chạy khấp nơi hỏi các anh chị khóa trên, một số bạn cịn
ngại ngùng khơng giám hỏi và tự tìm, vì những điều trên mà các bạn thường đến
lớp muộn. Các bạn sinh viên quốc tế thì khó khăn trong việc tham quan trường.
Do đó, việc xây dựng Hệ thống tìm đường giữa các nhà học là rất cần thiết, Hệ
thống giúp cho các bạn tìm đường ngắn ngất giữa các nhà học một cách nhanh
chống và dễ dàng
II.

MỤC TIÊU CẦN ĐẠT ĐƯỢC

Nắm bắt được vấn đề cần thiết trên cùng với mong muốn ứng dụng kiến thức học
được của mình vào thực tế để giúp ích. Vì vậy, mục tiêu của đề tài này là xây
dựng một Hệ thống tìm đường đi ngắn nhất giữa các nhà học có giao diện thân
thiện với người dùng, hướng dẫn người dung tìm đường đi dến nhà học mà mình
mong muốn một cách nhanh nhất. Hệ thống có sử dụng giải thuật Dijkstra(tìm
đường đi ngắn nhất) để giải quyết bài toán.
Bên cạnh chức năng tìm đường đi ngắn nhất thì hệ thống cịn một số chức năng
khác như tính quảng đường và thời gian di chuyển, xem trước hình ảnh điểm đến
để dễ dàng nhận ra và đặc biệt có hỗ trợ 2 ngôn ngữ là tiếng Việt và Tiếng Anh
III.

PHƯƠNG HƯỚNG GIẢI QUYẾT

1. Thu thập dự liệu đường đị, nhà học, hình ảnh… thực tế và chính xác.
2. Mơ hình hóa bản đồ thực tế thành cấu trúc dữ liệu kiểu đồ thị với các
3.
4.
5.
6.

đường đi là các cung và các nhà học là các đỉnh của đồ thị.
Cài đặt chương trình trên môi trường web, sử dụng
html,css,Javascript,.. Tạo giao diện thân thiện dễ sử dụng.
Ứng dụng giải thuật Dijkstra để tìm đường đi ngắn nhất.
Sử dụng Leaflet, một thư viện mã nguồn mở để nhúng bản đồ vào web
và thao tác trên nó, Leaflet phát triển trên ngơn ngữ Javascript.
Xây dựng web đa ngôn ngữ.
8


CHƯƠNG 2: LÝ THUYẾT
I.

CÁC KHÁI NIỆM

1. Các khái niệm cơ bản về lý thuyết đồ thị.

Định nghĩa đồ thị: Đồ thị G là một bộ đơi <V,E>, trong đó:
• V là tập các đỉnh.
• E là tập các cung, mỗi cung nối 2 đỉnh trong V.
Cho cung e nối 2 đỉnh x và y:
• Ký hiệu e = (x,y).
• x, y được gọi là đầu mút của e.

• x và y được gọi là kề nhau hoặc lân cận nhau.
• e được gọi là liên thuộc với x và y.
Định nghĩa Khun và Đa cung
• Khun: cung có hai đầu mút trùng nhau.
• Đa cung: các cung có cùng chung đầu mút.
Các loại đồ thị:
• Đơn đồ thị vơ hướng: là đồ thị chứa các cung khơng có hướng (x,y) ≡
(y,x), khơng chứa khun và khơng chứa đa cung.
• Đa đồ thị vơ hướng: là đồ thị cung khơng có hướng, khơng chứa
khun và chứa đa cung.
• Giả đồ thị: là đồ thị chứa các cung khơng có hướng nhưng có thể chứa
đa cung và nhiều khun.
• Đơn đồ thị có hướng: là một đồ thị chứa các cung có hướng (x,y) ≠
(y,x), khơng chứa đa cung và khun.
• Đa đồ thị có hướng ( khơng chứa khun): là một đồ thị chứa các
cung có hướng (x,y) ≠ (y,x) và có thể có nhiều cung (x,y) nhưng khơng
chứa khun.
• Đa đồ thị có hướng ( có chứa khuyên): là một đồ thị chứa các cung
có hướng (x,y) ≠ (y,x), có thể có nhiều cung (x, y) và chứa khuyên.
2. Các khái niệm được sử dụng trong chương trình.

Thuật tốn Dijkstra, mang tên của nhà khoa học máy tính người Hà Lan
Edsger Dijkstra vào năm 1956 và ấn bản năm 1959, là một thuật toán giải
quyết bài toán đường đi ngắn nhất nguồn đơn trong một đồ thị có hướng
khơng có cạnh mang trọng số không âm.
HTML(viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ Đánh
dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các
trang web trên World Wide Web.
9

Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading
Style Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết
bằng ngôn ngữ HTML và XHTML.
JavaScript, theo phiên bản hiện hành, là một ngơn ngữ lập trình thơng dịch
được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi
cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs).
Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với
cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng
thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó
gần với Self hơn Java. .js là phần mở rộng thường được dùng cho tập tin mã
nguồn JavaScript.
3. Chú thích các từ ngữ và ký hiệu được sử dụng trong tài liệu.

Từ ngữ và ký hiệu
s
x
ĐHCT
min_pi
pi[i]
p[i]
L[i][j]
mark[i]

Chú thích
Điểm bất đầu
Điểm kết thúc
Đại Học Cần Thơ
Giá trị nhỏ nhất tạm thời
chiều dài đường đi ngắn nhất từ s đến

i(tính ở thời điểm đang xét).
đỉnh liền trước của đỉnh i trên đường
đi ngắn nhất từ s đến i(tính đến thời
điểm đang xét).
chiều dài trọng số của cung (i, j).
cho biết đỉnh i đã được đánh dấu hay
chưa

Bảng 1: Các từ ngữ và ký hiệu được sử dụng trong tài liệu
II.

KẾT QUẢ VẬN DỤNG LÝ THUYẾT VÀO ĐỀ TÀI

Nắm vững được các khái niệm cơ bản về html, css, javascript, lý thuyết đồ thị
cũng như quy trình của giải thuật Dijkstra. Từ đó cài đặt giải thuật vào chường
trình cụ thể có giao diện đồ họa đáp ứng đúng mục tiêu đã đề ra.

10


CHƯƠNG 3: ỨNG DỤNG KẾT QUẢ
I.

PHÂN TÍCH YÊU CẦU BÀI TỐN, XÂY DỰNG CẤU TRÚC DỮ LIỆU
CẦN THIẾT
1. Phân tích u cầu bài tốn.

Dựa vào mục TỔNG QUAN phía trên ta xác định đây là bài toán thuộc dạng
đồ thị có áp dụng giải thuật hoặc thuật tốn tìm đường đi ngắn nhất.
Có rất nhiều giải thuật, thuật tốn có thể tìm đường đi ngắn nhất cụ thể như:

Thuật tốn Dijkstra, Thuật tốn Bellman-Ford, Giải thuật tìm kiếm A*, Thuật
tốn Floyd-Warshall, Thuật toán Johnson, Lý thuyết nhiểu. Ở đây ta chọn
thuật tốn Dijkstra vì những lý do sau:
• Thuật tốn này có thể tính tốn tất cả các đường đi ngắn nhất từ một
đỉnh xuất phát cho trước đến mọi đỉnh khác mà khơng làm tăng thời
gian chạy.
• Tất cả các trọng số phải không âm phù hợp với đề tài này ( tìm đường
đi ngắn nhất giữa các nhà học trong khn viên trường ĐHCT vì
đường đi giữa các nhà học không thể âm).
Input: Hai nhà học trong số các nhà học đã có (Lưu ý: ta mặc định các nhà
học và các đường đi đã được cài đặt trước trong đồ thị).
Output: đường đi ngắn nhất giữa hai nhà học đó.
2. Cấu trúc dữ liệu cần thiết.

Sử dụng cấu trúc mảng 2 chiều để biểu diễn cho cấu trúc kiểu đồ thị với:
-Số phần tử của mảng 2 chiều lớn hơn 1 so với số đỉnh của các nhà học vì
giải thuật được cài đặt khơng chạy từ vị trí (0, 0) mà chạy từ vị trí (1, 1) và
khơng có đỉnh nào là đỉnh 0.
-Các trọng số(độ dài các đường đi) là phần tử của mảng 2 chiều theo vị trí
trương ứng.

II.

MƠ HÌNH HĨA BẢN ĐỒ THEO KIỂU ĐỒ THỊ

11


Hình 1: Bản đồ khn viên trường ĐHCT được mơ hình hóa theo kiểu đồ thị
III.

GIẢI THUẬT VÀ LƯU ĐỒ
1. Mã giả.

Khởi tạo:
pi[i] = ∞ với mọi i != s;
pi[s] = 0;
mark[i] = 0 với mọi i;
Lặp (n – 1) lần:
Chọn đỉnh chưa đánh dấu (mark[i] == 0) có chiều dài đường đi từ s đến nó (pi[i])
nhỏ nhất => i.
Đánh dấu đã xét i bằng cách đặt mark[i] = 1.
Xem xét cập nhật pi[j] và p[j] các đỉnh kề của i chưa xét (mark[j] == 0).
Một đỉnh sẻ được cập nhật nếu đường đi mới(thông qua i) tốt hơn đường đi củ.
If(pi[i]+L[i][j]pi[j] = pi[i] + L[i][j];
pi[j] = i;
}
Các biến hổ trợ:
pi[i]: chiều dài đường đi ngắn nhất từ s đến i(tính ở thời điểm đang xét).
p[i]: đỉnh liền trước của đỉnh i trên đường đi ngắn nhất từ s đến i(tính đến thời
điểm đang xét).
L[i][j]: chiều dài trọng số của cung (i, j).
mark[i]: cho biết đỉnh i đã được đánh dấu hay chưa.
2. Lưu đồ.

Bất đầu
12

Nhập s và x

x == s

Đúng
Thông báo trùng nhau

Sai
Kết thúc

Khởi tạo i,j,it;
pi[]; mark[];
p[]; bien = 30;
pi[s]=0; p[s]=-1;

pi[i]=99999;
mark[i]=0;

i<=bien

Đúng

it<= bien;
j<=bien;
mark[j] ==0 &&
pi[j]< min_pi;

Đúng

Sai

pi[j]= pi[i] + as2D[i][j];
p[j] = i;

Sai
mark[i] = 1;

j <= bien;
L[i][j] != 0 &&
mark[j] == 0;
pi[i] + L[i][j]
Đúng

pi[j]= pi[i] + L[i][j];
p[j] = i;

Sai
Return pi[];
IV.

GIỚI

Kết thúc
THIỆU HỆ THỐNG

13


1. Kiến trúc phần mềm.

Hình 2: Sơ Đồ UseCase

Hình 3: Activity Diagram
Kiến Trúc WebSite
14


Hình 4: Mơ hình Client và Server
Phía Client:
Màn hình chia hành 2 phần:
-Phần cho người dùng thao tác gồm các combobox, các khung hình ảnh…, sử dụng
html và css để tạo ra các phần tử này.
-Phần còn lại là giao diện bản đồ: Sử dụng thư viện Leaflet để tạo ra bảng đồ.
Cách nhúng: nhúng link thư viện vào thẻ head của trang.

Tạo 1 thẻ div, nơi để hiển thị bản đồ, thẻ div có id là map.
Khởi tạo bản đồ: tạo biến map sau đó gán cho nó bằng hàm L.map truyền tham số là
id của thẻ div mà ta muốn nó hiển thị, sau đó setView cho nó ở tọa độ mong muốn.
L.titleLayer() hàm này nhận vào tham số là kiểu bạn đồ bạn sẽ hiển thị, có các loại
bản đồ như sau: đường đi, mặc định, đường thủy,vật thể….

Các marker vị trí:
Tạo 1 biến marker_X sau đó gán vị trí nơi bạn muốn hiển thị
Vd: 1 macrker

Cách vẽ đường đi trên bản đồ: các bản đồ có kiểu dữ liệu geojson, mỗi lần ta sét nếu
có đường đi giữa 2 nhà học thì ta cho đường đi giữa 2 nhà học đó hiển thị

15

Client sẽ nhận các giá trị do người dùng nhập(các nhà học, biến ngôn ngữ..) và gửi
về server để sử lý, sau đó thì hiển thị lại cho người dùng.
Phía Server:
Sử dụng hàm đổi ngôn ngữ để chuyễn đổi qua lại giữa các ngôn ngữ: hàm này được
cài đặt bằng ngôn ngữ php, sử dụng 2 file ngôn ngữ là lang_en(English) and
lang_vi(Việt Nam) để lưu các từ ngữ của 2 ngôn ngữ. Khi người dùng chọn ngôn
ngữ sẽ tạo ra 1 trong 2 biến lang, biến lang sẽ import 1 trong 2 file ngôn ngữ để đổi
ngôn ngữ, biến ngôn ngữ mặc định là lang_en(English).
Sử dụng mảng 2 chiều lưu các đỉnh và các trọng số.
Server nhận 2 biến gồm biến s(đỉnh bất đầu) và x(đỉnh đến) từ phía client. Sau đó
gọi hàm Dijkstra để tìm đường đi. Thuật tốn Dijkstra trả về 2 mảng pi[] và p[].
Mảng pi[] là tập hợp các trọng số của đường đi ngắn nhất và p[] là tập hợp các đỉnh
của đường đi ngắn nhất. Sau khi qua các hàm sử lý thì trả về client. Client sẽ in ra
màng hình đường đi ngắn nhất cùng với độ dài quảng đường và thời gian di chuyển

16


2. Chức năng và Giao diện hệ thống.

•

Giao diện chính.

Hình 5: Giao diện chính của hệ thống.

•

Chức năng và giao diện chức năng thay đổi ngôn ngữ.

Khi người dùng chọn ngơn ngữ thì biến lang sẽ nhận 1 trong 2 giá trị là lang_en
hoặc lang_vi, Nếu là lang_en thì server sẽ hay đổi ngôn ngữ bằng cách reload lại
trang và include file lang_en vào website và rander lại ngôn ngữ theo từ ngữ trong
file lang_en. Ngược laị thì sẽ rander từ ngữ trong file lang_vi. Biến lang mặc định là
lang_en.

17


Hình 6: Giao diện chức năng thay đổi ngơn ngữ
•

Chức năng và giao diện chức năng tìm đường.

Mỗi người dùng chọn địa điểm thì sẽ gọi hàm displayimg1, displayimg2 các
hàm này vận hành theo cách thức AJAX(thay đổi thành phần trang web mà
khơng reload lại trang) và thay đổi hình ảnh xem trước theo biến nhận từ các
thẻ select.
Sau khi đã chọn xong các địa điểm, khi người dùng click button tìm đường thì
client sẽ gửi 2 biến x(đỉnh đến) và s(đỉnh bất đầu) về server, cụ thể là hàm
Dijkstra.
Cùng lúc đó client cũng in các marker theo các biến s và x.

Hình 7: Giao diện chức năng tìm đường.
•

Chức năng và giao diện hiển thị đường đi trên bản đồ.

Sau khi nhận các biến từ client và qua các hàm xử lý thì Server gửi về Client các

thơng tin đã xử lý(pi[] và p[]). Client sẽ hiển thị các đường đi theo thơng tin mà phía
Server gửi về(in các đường đi có kiểu dữ liệu geojson).

18


Hình 8: Giao diện hiển thị đường đi trên bản đồ.
•

Chức năng và giao diện chức năng xem quảng đường và thời gian.

Khi Server trả dữ liệu về Client, bên cạch việc in đường đi thì Client cũng in độ dài
đoạn đường và thời gian di chuyển.

Hình 9: Giao diện chức năng xem quảng đường bà thời gian.
•

Chức năng và giao diện chức năng xem trước hình ảnh địa điểm.
Khi người dùng thay đổi các lựa chọn trong thẻ select thì các hình ảnh cũng sẽ
được thay đổi theo các biến đã định sẵn.

19


Hình 10: Giao diện chức năng xem trước hình ảnh địa điểm.

20


3. Hướng dẫn sử dụng.

Chức năng quan trọng đầu tiên của 1 chường trình là ngơn ngữ. Chường trình hỗ
trợ càng nhiều ngơn ngữ thì số lượng người dùng sẽ nhiều hơn.
Chức năng thay đổi ngôn ngữ được cài đặt phía trên bên góc trái của màng hình.

Hình 11: Giao diện chức năng chọn ngôn ngữ
Hệ thống hỗ trợ 2 ngôn ngữ là tiếng Việt và tiếng Anh. Chọn trong combobox là
English thì giao diện sẽ thay đổi thành tiếng anh và ngược lại nếu chọn là
Vietnamese thì giao diện sẽ thay đổi thành tiếng Việt, ngôn ngữ mặc định của hệ
thống là tiếng Anh.

Hình 12: Giao diện chức năng chọn điểm bất đầu bằng tiếng Anh

21


Hình 13: Giao diện chức năng chọn điểm bất đầu bằng tiếng Việt

Sau khi đã chọn được ngôn ngữ phù hợp, tiếp theo ta sẽ đến chức năng chính của
hệ thống đó là tìm đường đi giữa các nhà học.
Đầu tiên bạn cần chọn vị trí của mình: Chọn vị trí của bạn tại combobox đầu tiên
phía dưới tiêu đề Chọn địa điểm của bạn(Choose your location).

Hình 14: Giao diện chức năng tìm đường
Sau đó chọn địa điểm mà bạn cần đến: Chọn địa điểm cần đến tại combobox thứ
2 phía dưới tiêu đề Chọn điểm đến của bạn(Choose your destination)

22

Hình 15: Giao diện chức năng tìm đường
Bạn có thể xem trước hình ảnh địa điểm mà bạn đã chọn ở dưới gốc trái:

Hình 16: Giao diện chức xem trước ảnh địa điểm
Để tìm đường bạn chỉ cần nhấn vào nút Tìm đường (Find The Way)

23


Hình 17: Button tìm đường

Hệ thống sẽ hiển thị đường đi lên trên bản đồ kèm theo chú thích địa điểm hiển thị.

Hình 18: Giao diện hiển thị đường đi trên bản đồ

24


Ngồi ra bạn có thể xem được độ dài quảng đường và thời gian di chuyển ở dưới
nút tìm đương.

Hình 19: Giao diện chức năng xem độ dài quảng đường và thời gian di chuyển

25