Tìm đường trên di động (PhoneGap)

Hệ Thống ThôngTin Địa Lý

Giảng viên hướng dẫn : Thầy Trần Vũ Hiếu - Bộ môn MMT & HTTT

Nhóm 10 : Lương Bá Hợp MSSV 1105068

: Bùi Thị Xuyên MSSV 1114928

Lớp : Hệ Thống Thông Tin K52

Phát triển ứng dụng tìmđường cho SmartPhone

1

ỨNG DỤNG BẢN ĐỒ

Mục Lục

Lời Nói đầu

1. Giới thiệu chung

2. Google Map API

3. Các công nghệ sử dụng- Html , css , javascript- FrameWork PhoneGap- Android

4. Thiết lập , cài đặt môi trường lập trình cho PhoneGap

5. Mô tả bài toán tìm đường

6. Phân tích và thiết kế chương trình ứng dụng- Phân tích về chức năng- Phân tích về luồng dữ liệu

7. Chương trình Demo

Tài Liệu Tham Khảo

3

Giới thiệu công nghệ

4

Google map là gì ?

• Google Map 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, hỗ trợ nhiều

dịch vụ khác của Google nổi bật là dẫn đường.

5

1. Giới thiệu Google Map API


• Nó cho phép thấy bản đồ đường đi, đường đi

cho xe đạp, cho người đi bộ và xe hơi, và

những địa điểm kinh doanh trong khu vực cũng như khắp nơi trên thế giới..

6



• Các ứng dụng xây dựng trên maps được

nhúng vào trang web cá nhân thông qua các

thẻ javascripts do vậy việc sử dụng API google rất dễ dàng

7



• Google Map API đã được nâng cấp lên phiên

bản thứ 3. Phiên bản này hỗ trợ không chỉ

cho các máy để bàn truyền thống mà cho cả

các thiết bị di động. Nhanh hơn và nhiều hơn

các ứng dụng.

8


Một số ứng dụng của Google Map API

• Đánh dấu các địa điểm trên bản đồ cùng các thông tin cho địa điểm: các khu vui chơi giải trí, nhà hàng khách sạn, các quán ăn ngon, các shop quần áo, nữ trang…

• Chỉ dẫn đường đến các địa điểm cần tìm,chỉ dẫn đường giao thông công cộng

• Khoanh vùng khu vực: các trung tâm kinh tế, khu đô thị, khu ô nhiễm…

• Tình trạng giao thông các khu vực…Đưa ra các giải pháp có thể…

9


Phonegap là gì ?

• PhoneGap là một nền tảng mã nguồn mở dùng để

phát triển ứng dụng mobile cho cả iOS, Android,

Windows Phone, BlackBerry, webOS, Bada, Symbian

cùng lúc, viết một lần chạy trên nhiều nền tảng

smartphone khác nhau.

10

2. Framework mã nguồn mở PhoneGap

Phonegap là gì ?

• Nó là một Framework ứng dụng HTML5 được sử

dụng để phát triển các ứng dụng di động thông qua

công nghệ web.

• Điều này có nghĩa là các nhà phát triển có thể phát

triển ứng dụng Smartphone và Tablet dựa vào kiến

thức về HTML, CSS, JavaScript

11


Phonegap là gì ?

• Các ứng dụng được phát triển bởi PhoneGap là ứng

dụng thuộc dạng Hybrid. Những ứng dụng này không

thuần HTML/CSS cũng như không hoàn toàn là ứng

dụng

• PhoneGap cung cấp 1 cầu nối từ JavaScript đến

platform thiết bị. Điều này cho phép JavaScript API có

thể điều khiển và truy cập thiết bị.12


Phonegap là gì ?

• PhoneGap chủ yếu cung cấp JavaScript API để truy

cập thiết bị sử dụng các ứng dụng như camera, GPS,

thông tin thiết bị và nhiều cái khác

13


Mô hình PhoneGap

14


Lợi ích sử dụng PhoneGap

• Tận dụng lợi thế của HTML5 và CSS3

• Sử dụng JavaScript để code

• Truy cập vào các tính năng native của thiết bị

• Triển khai ứng dụng trên nhiều nền tảng.

• Phát triển nhanh

• Chi phí hiệu quả.

15


Yêu cầu cài đặt

• Bộ công cụ Android SDK tạihttp://developer.android.com/sdk/index.html

• Phonegap phiên bản 2.9.0 tạihttp://phonegap.com/install/

16

2. Thiết lập , cài đặt môi trường làm việc chophonegap trên nền android .

http://developer.android.com/sdk/index.html

http://phonegap.com/install/

Tạo Project sử dụng PhoneGap trong Eclipse• Mở eclipse->chọn New -> Android Application Project .

17


Tạo Project sử dụng PhoneGap trong Eclipse• Nhập vào Project, SDK version cho Project và các thông tin liên

quan

18


Tạo Project sử dụng PhoneGap trong Eclipse• Nhập vào project, SDK version cho project và các thông tin liên

quan

19


Tạo Project sử dụng PhoneGap trong Eclipse

• Trong thư mục assets tạo thêm thư mục www (/assets/www)

• Copy cordova.js vào thư mục www(/assets/www/cordova.js)

• Copy cordova-2.9.0.jar vào thư mục /libs (/libs/ cordova2.9.0.jar)

• Copy thư mục xml vào thư mục /res (/res/xml)

20



21



• Trong cửa sổ Package Explorer, chọnsrc/com.example.smartmap/MainActivity.java

• Chỉnh sửa lại như sau : Sửa extend của class từ Activity thành DroidGap

• Thay thế setContentView() thànhsuper.loadUrl(“file:///android_asset/www/index.html”);

22



23



24


Tạo Project sử dụng PhoneGap trong Eclipse• Tạo project mẫu Hello World

25


Xây dựng ứng dụng

26

Ứng dụng từ điển được đặt tên là Smart Map có chức năng chính tìm đường .

Hỗ trợ thao tác chạm , cảm ứng thuận tiện sửdụng trên cả smartphone và tablet

Ứng dụng phát triển dựa trên PhoneGap 2.9.0 ngoài ra còn sử dụng PHP để viết services choứng dụng

Giao diện xây dựng trên jQuery Mobile .

27

1. Giới thiệu về ứng dụng

28

2. Đặc tả chức năng của ứng dụng

Tên chức năng Mô tả

Định vị Khi ứng dụng được khởi động, thiết bị sẽ định vị vị tríhiện tại của bạn

Tìm kiếm địa danh bất kì Khi bạn nhập một địa danh nào đó thì địa danh đó sẽhiện ra trên bản đồ.

Tìm đường Bạn nhập vị trí muốn đến thì bản đồ sẽ hiện rađường đi tới điểm bạn muốn, cùng thời gian đểđến đó

29

3. Thiết kế CSDL cho ứng dụng

30


31


32


33


34

4. Thiết kế giao diện cho ứng dụng

35

4. Thiết kế giao diện cho ứng dụng

36

4. Thiết kế giao diện choứng dụng

1. https://developers.google.com/maps/

2. http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html

3. http://salopek.eu/content/22/display-locations-from-a-database-on-a-map-using-google-maps-javascript-api-and-php

4. http://chungta.vn/tin-tuc/cong-nghe/2013/07/ung-dung-di-dong-da-nen-thuan-loi-va-kho-khan/

37

Tài Liệu Tham Khảo

https://developers.google.com/maps/

http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html

http://salopek.eu/content/22/display-locations-from-a-database-on-a-map-using-google-maps-javascript-api-and-php

http://chungta.vn/tin-tuc/cong-nghe/2013/07/ung-dung-di-dong-da-nen-thuan-loi-va-kho-khan/

Tìm đường trên di động (PhoneGap)

Internet