Google Maps Javascript API

2.5.4.1. Giới thiệu

Google Maps là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google Inc.

Google Maps API là một phương thức cho phép các cá nhân hoặc tổ chức muốn sử dụng dịch vụ Google Maps có thể nhúng vào website của họ.

Phiên bản mới nhất Google Maps Javascript v3 đã được nâng cấp hỗ trợ tải bản đồ trên thiết bị di động một cách nhanh chóng, nó tập trung vào các thiết bị smart phone sử dụng Android và iOS có kích thước hoàn toàn nhỏ hơn thiết bị desktop thông thường. Tuy nhiên chúng ta hoàn toàn có thể lập trình sử dụng Google Maps trên thiết bị di động.

3.3.4.2. Cài đặt

Viết Maps JavaScript API và đặt trong thẻ <script>, hàm initialize() được khởi chạy sau khi API đã được load xong [10]:

<div id="map-canvas" style="width: 100%; height: 100%"></div> <script>

function initialize() {

var mapOptions = { zoom: 8,

center: new google.maps.LatLng(-34.397, 150.644) };

var map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);

}

function loadScript() {

var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; </script>

CHƯƠNG 3: NỘI DUNG VÀ KẾT QUẢ NGHIÊN CỨU 3.1. ĐẶC TẢ ỨNG DỤNG

3.1.1. Giới thiệu

Cuộc sống ngày càng khiến mọi người bận rộn và căng thẳng hơn, kéo theo đó là sự xuất hiện của rất nhiều các dịch vụ giải trí, thư giãn. Du lịch tất nhiên cũng là một trong số những dịch vụ ấy - nhất là khi nhu cầu đi du lịch của mọi người luôn tăng không ngừng. Bên cạnh các gói du lịch được chào bán với giá hấp dẫn và hứa hẹn về chất lượng phục vụ thì một bộ phận không nhỏ khác lại chọn du lịch tự túc, nghĩa là họ tự sắp xếp một lịch trình riêng cho mình.

“Làm thế nào để tính toán chi phí tối ưu nhất để có thể đi được nhiều nơi hơn trong một khoảng thời gian ít hơn?”. Đó là câu hỏi mà thực tế một người khi muốn đi du lịch đến một nơi nào đó sẽ tự hỏi. Tự tạo một lịch trình riêng cho mình không phải là một công việc khó nhưng sẽ mất khá nhiều thời gian do phải tìm hiểu thông tin về các nơi muốn tham quan và đặc thù của địa phương đó, lập lịch và tính toán chi phí, thời gian sao cho hợp lý.

Việc xây dựng một ứng dụng web trên điện thoại thông minh có kết nối internet có thể giúp mọi người tự tra cứu, sắp xếp một chuyến đi riêng cho mình sao cho hiệu quả thật sự hữu ích.

3.1.2. Mô tả bài toán

Sau khi một người xác định được nơi muốn đến, thời gian ở lại bao lâu, phương tiện di chuyển và dự trù các chi phí thì họ có thể:

 Xem thông tin toàn bộ các địa điểm tham quan nổi bật ở nơi đó

 Tra cứu thông tin các dịch vụ ăn uống, khách sạn, trụ ATM,...

 Tạo và sắp xếp lịch trình

 Tìm kiếm địa điểm và tìm đường đi

3.2. PHÂN TÍCH - THIẾT KẾ HỆ THỐNG

Cơ sở dữ liệu quan hệ chỉ dùng để lưu trữ thông tin các địa điểm hỗ trợ cho cơ sở dữ liệu đồ thị nên các bảng và mô hình khá đơn giản.

3.2.1. Mô hình phân rã chức năng BFD

Hệ thống thông tin hỗ trợ du lịch

Tra cứu Tìm đường đi Tạo lịch trình

Địa điểm Dịch vụ hỗ trợ Gợi ý lịch trình Lịch trình chi tiết

Hình 3.2. Sơ đồ phân rã chức năng BFD

3.2.2. Mô hình Use Case

Người dùng

<<extend>>

Tìm đường đi

Địa điểm đi

Dịch vụ hỗ trợ Gợi ý lịch trình Tạo lịch trình <<extend>> Xem lịch trình chi tiết Tra cứu thông tin

Mô tả Use Case chi tiết:

Bảng 3.1. Mô tả Use Case chi tiết

USE CASE TRA CỨU THÔNG TIN ĐỊA ĐIỂM / DỊCH VỤ HỖ TRỢ

Tác nhân Người sử dụng

Tóm tắt Người sử dụng có nhu cầu tra cứu thông tin địa điểm muốn đi hoặc thông tin các dịch vụ hỗ trợ như quán ăn, quán cafe, khách sạn, trụ ATM,...

Dòng sự kiện chính Người sử dụng nhập chọn địa điểm được hiện thị sẵn và chia theo từng nhóm trên bản đồ

Hệ thống hiển thị thông tin về địa điểm đó

Dòng sự kiện phụ Người sử dụng có thể tùy chọn hiển thị nhóm địa điểm mà mình muốn tra cứu

Yêu cầu cơ bản Giao diện thân thiện

USE CASE TÌM ĐƯỜNG ĐI

Tác nhân Người sử dụng

Tóm tắt Người sử dụng có nhu cầu tìm kiếm đường đi bằng cách nhập tên địa điểm

Dòng sự kiện chính Người sử dụng nhập địa chỉ bắt đầu và địa chỉ kết thúc Hệ thống thực hiện theo yêu cầu và hiển thị chỉ dẫn Dòng sự kiện phụ Nếu địa điểm không được tìm thấy thì hệ thống sẽ báo Yêu cầu cơ bản Giao diện thân thiện

USE CASE TẠO LỊCH TRÌNH

Tác nhân Người sử dụng

Tóm tắt Người sử dụng có nhu cầu tạo và sắp xếp lịch trình

Dòng sự kiện chính Người sử dụng chọn các địa điểm muốn đi, chọn phương tiện, chọn thời gian

Hệ thống gợi ý ra lịch trình dựa trên các tùy chọn của người sử dụng

Dòng sự kiện phụ Hệ thống gợi ý các địa điểm nổi bật khác có vị trí gần với các địa điểm người sử dụng đã chọn

Hệ thống hiển thị lịch trình chi tiết cho người sử dụng: thời gian ở từng địa điểm, khoảng cách và chi phí đi lại

3.2.3. Mô hình luồng dữ liệu DFD

Mô hình luồng dữ liệu mức 0:

Hình 3.4. Mô hình luồng dữ liệu mức 0

Mô hình luồng dữ liệu mức 1:

Hình 3.5. Mô hình luồng dữ liệu mức 1

Người sử dụng Tra cứu thông tin Tạo lịch trình đường đi Tìm Thời gian Tìm đường đi Tra cứu Địa điểm Tạo lịch trình Phương tiện Người sử dụng

3.2.4. Lưu trữ trên cơ sở dữ liệu quan hệ MySQL

Hình 3.6. Lưu trữ trên cơ sở dữ liệu MySQL

3.2.5. Lưu trữ trên cơ sở dữ liệu đồ thị Neo4j

Dưới đây là đồ thị được dùng làm cơ sở dữ liệu cho ứng dụng

Hình 3.7. Lưu trữ trên cơ sở dữ liệu Neo4j

STT Thuộc tính Kiểu dữ liệu Ý nghĩa BẢNG MARKERS

1 id INT(11) Mã địa điểm 2 name VARCHAR(60) Tên địa điểm 3 address VARCHAR(80) Địa chỉ địa điểm 4 phone VARCHAR(20) Số điện thoại 5 lat FLOAT(10,6) Vĩ độ địa điểm 6 lng FLOAT(10,6) Tung độ địa điểm 7 type INT(5) Loại địa điểm 8 des VARCHAR(400) Mô tả về địa điểm

BẢNG MARKER_TYPE

1 type INT(5) Mã loại địa điểm 2 name VARCHAR(60) Tên loại

 Mỗi nút chứa các thuộc tính:

Bảng 3.2. Bảng mô tả các thuộc tính của các nút

STT Thuộc tính Ý nghĩa

1 id Mã địa điểm

2 name Tên địa điểm

3 minTime Thời gian ở tối thiểu 4 maxTime Thời gian ở tối đa

5 type Loại địa điểm

Biểu diễn trong Neo4j:

Hình 3.8. Thuộc tính của các nút trong CSDL Neo4j

 Mối quan hệ giữa mỗi hai nút chứa các thuộc tính:

Bảng 3.3. Bảng mô tả các thuộc tính của các mối quan hệ

STT Thuộc tính Ý nghĩa Ghi chú

1 distance Khoảng cách giữa hai địa điểm Như nhau với tất cả phương tiện 2 time_taxi Thời gian đi bằng taxi

3 time_bike Thời gian đi bằng xe máy Lấy trung bình 44km/h 4 time_bicycle Thời gian đi bằng xe đạp

5 time_walk Thời gian đi bộ

6 time_boat Thời gian đi bằng tàu Đối với các địa điểm trên sông 7 cost_taxi Chi phí đi bằng taxi Theo bảng giá taxi Mai Linh 8 cost_bike Chi phí đi bằng xe máy Lấy giá xăng: 20.000đ/lít 9 cost_bicycle Chi phí đi bằng xe đạp Giá thuê tính theo ngày 10 cost_walk Chi phí đi bộ Mặc định bằng 0

11 cost_boat Chi phí đi bằng tàu Đối với các địa điểm trên sông

Biểu diễn trong Neo4j:

Hình 3.9. Thuộc tính của các quan hệ trong CSDL Neo4j

<id>:109 name: Chợ nổi Cái Răng id: 5 type: place

maxTime: 60 minTime: 30 marker

<id>: 345 distance: 7 time_taxi: 17 cost_taxi: 84000

time_bike: 21 cost_bike: 2800 time_bicycle: 53 cost_bicycle: 0

time_walk: 82 cost_walk: 0 time_boat: 18 cost_boat: 50

3.3. KẾT QUẢ NGHIÊN CỨU 3.3.1. Trang chính của hệ thống

Hình 3.10. Giao diện chính của ứng dụng

Hệ thống có thể chạy trên máy tính và điện thoại thông qua địa chỉ IP với giao diện tối giản.

Giao diện chính của hệ thống là một trang bản đồ được phủ kín màn hình, tạo cảm giác thoải mái khi sử dụng.

Khi truy cập vào website, vị trí hiện tại của người dùng sẽ được hiển thị tự động. Phần phía trên website là thanh tìm kiếm và nút tạo lịch trình.

Phần phía dưới website là nhóm các địa điểm và dịch vụ hỗ trợ.

Tạo lịch trình

Vị trí hiện tại Tìm đường đi

Nhóm các địa điểm

3.3.2. Trang tra cứu thông tin địa điểm và dịch vụ hỗ trợ

Hình 3.11. Tra cứu thông tin địa điểm và dịch vụ hỗ trợ

Khi người dùng bấm chọn vào từng địa điểm (được biểu diễn bởi các biểu tượng theo nhóm) sẽ hiển thị thông tin về địa điểm đó như địa chỉ và số điện thoại.

Người dùng có thể tùy chọn hiển thị nhóm hoặc ẩn tất cả, danh sách các nhóm từ trái qua phải như sau:

Nhà hàng, những nơi bán thức ăn (bữa chính)

Các quán nước, cà phê, trà sữa,...

Các quán bán thức ăn vặt

Các địa điểm tham quan

Khách sạn, nhà nghỉ, nhà khách

Ngân hàng, trụ ATM

3.3.3. Trang tìm kiếm đường đi

Hình 3.12. Trang tìm kiếm đường đi

Để tìm kiếm đường đi từ nơi này đến một nơi nào khác, người dùng nhấn chọn nút tìm đường đi

Người dùng có thể tìm đường đi bằng cách nhập địa chỉ vào ô tìm kiếm hoặc bấm chọn vào bảng gợi ý phía dưới.

Kết quả tìm kiếm được hiển thị như trong hình sau:

Hình 3.13. Trang tìm kiếm đường đi (hiển thị kết quả)

Kết quả theo đường vẽ chỉ đường, người dùng có thể chạm lên phóng to bản đồ để tìm đường đi.

Hình trên là kết quả tìm đường giữa hai địa điểm: Đại học Cần Thơ

3.3.4. Trang tạo lịch trình

3.3.4.1. Trang thêm địa điểm

Hình 3.14. Trang tạo lịch trình (thêm địa điểm)

Người dùng nhấn chọn nút tạo lịch trình ở trang chính của hệ thống để bắt đầu, chức năng các nút trong trang tạo lịch trình từ trái qua phải như sau:

Trở về trang chính

Thêm địa điểm

Chọn phương tiện

Chọn thời gian

Xem kết quả

Trang hiển thị danh sách các địa điểm đã chọn:

Hình 3.15. Trang tạo lịch trình (hiển thị danh sách các địa điểm đã chọn)

Người dùng nhấn để chọn hoặc bỏ chọn địa điểm (có thể chọn cùng lúc một hoặc nhiều địa điểm).

Sau khi đã chọn xong, người dùng nhấn vào sẽ chuyển sang trang xem và chỉnh sửa các địa điểm đã chọn.

Trang chỉnh sửa các địa điểm đã chọn:

Hình 3.16. Trang tạo lịch trình (chỉnh sửa các địa điểm đã chọn)

Nếu muốn chỉnh sửa lại lịch trình, người dùng nhấn chọn để sắp xếp thứ tự hoặc xóa khỏi lịch trình.

Sau khi chỉnh sửa xong, hệ thống sẽ kiểm tra nếu số lượng địa điểm ít hơn hai sẽ hiện thông báo.

Nếu số lượng địa điểm đã hợp lệ, hệ thống sẽ chuyển sang trang chọn phương tiện và thời gian đi.

3.3.4.2. Trang chọn phương tiện và thời gian đi

Hình 3.17. Trang tạo lịch trình (chọn phương tiện và thời gian đi)

Người dùng chọn phương tiện đi lại chính giữa các địa điểm, nếu chọn “Tùy ý” hệ thống sẽ gợi ý ra lịch trình với phương tiện tối ưu nhất giữa các địa điểm.

Người dùng chọn thời gian đi với đơn vị tính là ngày (có thể chọn nhanh thời gian đi là 3 ngày, 5 ngày hoặc 7 ngày bắt đầu từ ngày hiện tại)

Phương án tối ưu lịch trình:

 Tiết kiệm chi phí: chọn đi bộ giữa các địa điểm gần nhau hoặc xe đạp, xe máy

 Tiết kiệm thời gian: chọn phương tiện đi là taxi

3.3.4.3. Trang gợi ý lịch trình

Hình 3.18. Trang tạo lịch trình (xác nhận lịch trình đã gợi ý)

Hệ thống sẽ gợi ý ra thêm các địa điểm khác nằm trên đường đi, nếu người dùng không muốn đi hoặc đã đi rồi thì có thể chọn để xóa.

Nút gợi ý hai lựa chọn cho người dùng:

 Sau khi đi địa điểm cuối sẽ quay về nơi bắt đầu

 Sau khi đi địa điểm cuối sẽ đi đến địa điểm khác

Cuối cùng, người dùng chọn để xem lộ trình trên bản đồ.

CHỈNH SỬA TÙY CHỌN

Tổng độ dài đường đi

Tổng thời gian di chuyển

Tổng chi phí di chuyển

2.94km 10phút $ 51600đ

Các địa điểm đi được đánh số theo thứ tự và hiển thị trên bản đồ:

Hình 3.19. Trang tạo lịch trình (xem lịch trình trên bản đồ và lịch trình chi tiết)

Lịch trình chi tiết được thể hiện như sau:

 Bến Ninh Kiều <50-150>phút Thời gian ở

tối thiểu

Thời gian ở tối đa

Hệ thống hiển thị các thông báo khác nếu có lỗi xảy ra:

Hình 3.20. Trang tạo lịch trình (hiển thị các thông báo lỗi)

Hệ thống sẽ hiển thị các thông báo lỗi trong các trường hợp sau đây:

 Người dùng chưa chọn phương tiện đi hoặc thời gian đi

 Thời gian cho chuyến đi không đủ so với thời gian đã chọn, người dùng có thể tăng thêm số ngày đi hoặc xóa bớt địa điểm.

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN KẾT LUẬN

Đề tài này đã đáp ứng được nhu cầu thực tế của người dùng, mọi người hoàn toàn

có thể tự mình tạo một lịch trình cho chuyến đi của mình. Ứng dụng có giao diện thân thiện, tính tương tác với người dùng cao và tận dụng tốt những chức năng mà

Google Maps API mang lại.

Cơ sở dữ liệu đồ thị Neo4j mang lại một “cảm giác mới” cho ứng dụng so với khi chỉ dùng CSDL quan hệ, sức mạnh của Neo4j qua các truy vấn, khả năng biểu diễn và

lưu trữ dữ liệu quả thật tuyệt vời. Trong tương lai, Neo4j sẽ trở nên phổ biến và chắc chắn sẽ được mọi người đón nhận.

Các chức năng chính đã được thể hiện trong ứng dụng:

 Tìm kiếm địa điểm trên Google Maps

 Tìm đường đi giữa hai địa điểm trên Google Maps

 Tra cứu thông tin các địa điểm và dịch vụ hỗ trợ

 Tạo và sắp xếp lịch trình tối ưu theo chi phí hoặc thời gian

 Xem lịch trình chi tiết và thể hiện được lộ trình trên bản đồ

Tuy ứng dụng đã đáp ứng được nhu cầu thực tế của người dùng nhưng vẫn chưa vận hành trên thực tế nên không thể tránh khỏi những thiếu sót.

HƯỚNG PHÁT TRIỂN

Phát triển thành một mạng du lịch: bổ sung các chức năng bình luận và đăng ảnh Phân quyền cho hệ thống: người dùng và người quản trị đăng nhập theo tài khoản Hệ thống hiện tại chỉ giới hạn chức năng cho người sử dụng, hướng phát triển của đề tài sẽ mở rộng dành cho người quản trị: thêm mới một địa điểm, cập nhật thông tin cho địa điểm (thêm hình ảnh về địa điểm đó) và xóa địa điểm.

Bên cạnh đó sẽ cải thiện giao diện tạo và sắp xếp lịch trình, cho phép người dùng có thể vừa xem thông tin về một địa điểm, vừa có thể thêm địa điểm đó vào lịch trình.

Tạo lịch sử các lịch trình mà người dùng đã đi, gợi ý các lịch trình này cho các người sử dụng khác

PHỤ LỤC

PHỤ LỤC 1: NHẬP DỮ LIỆU TỪ EXCEL VÀO NEO4J

Để tiết kiệm thời gian cũng như dễ dàng kiểm soát code, chúng ta có thể nhập dữ liệu từ file *.csv hoặc từ Excel vào Neo4j bằng cách sau:

 Cột A, B, C, D, E sẽ chứa dữ liệu các nút của đồ thị, ví dụ lấy “id”, “name”,

“minTime”, “maxTime” và “type” làm các thuộc tính.

A B C D E

id name minTime maxTime type

1 Bến Ninh Kiều 50 150 place

2 Chùa Phật học 20 30 place

3 Trung tâm thương mại Cái Khế 30 120 place

4 Thiền Viện Trúc Lâm Phương Nam 40 110 place

5 Chợ nổi Cái Răng 30 60 place

6 Nhà cổ Bình Thủy 20 120 place

Ở cột F, chúng ta sẽ đặt công thức để kết quả là một câu truy vấn Cypher:

="merge(_"&A2&":marker{id:'"&A2&"',name:'"&B2&"',minTime:'"&C2&"', maxTime:'"&D2&"',type:'"&E2&"'})"

F