tìm đường trên di động (phonegap)
TRANSCRIPT
![Page 1: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/1.jpg)
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
![Page 2: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/2.jpg)
ỨNG DỤNG BẢN ĐỒ
![Page 3: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/3.jpg)
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
![Page 4: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/4.jpg)
Giới thiệu công nghệ
4
![Page 5: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/5.jpg)
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
![Page 6: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/6.jpg)
Google map là gì ?
• 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
1. Giới thiệu Google Map API
![Page 7: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/7.jpg)
Google map là gì ?
• 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
1. Giới thiệu Google Map API
![Page 8: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/8.jpg)
Google map là gì ?
• 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
1. Giới thiệu Google Map API
![Page 9: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/9.jpg)
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
1. Giới thiệu Google Map API
![Page 10: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/10.jpg)
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
![Page 11: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/11.jpg)
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
2. Framework mã nguồn mở PhoneGap
![Page 12: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/12.jpg)
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
2. Framework mã nguồn mở PhoneGap
![Page 13: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/13.jpg)
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
2. Framework mã nguồn mở PhoneGap
![Page 14: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/14.jpg)
Mô hình PhoneGap
14
2. Framework mã nguồn mở PhoneGap
![Page 15: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/15.jpg)
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
2. Framework mã nguồn mở PhoneGap
![Page 16: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/16.jpg)
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 .
![Page 17: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/17.jpg)
Tạo Project sử dụng PhoneGap trong Eclipse• Mở eclipse->chọn New -> Android Application Project .
17
2. Thiết lập , cài đặt môi trường làm việc chophonegap trên nền android .
![Page 18: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/18.jpg)
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
2. Thiết lập , cài đặt môi trường làm việc chophonegap trên nền android .
![Page 19: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/19.jpg)
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
2. Thiết lập , cài đặt môi trường làm việc chophonegap trên nền android .
![Page 20: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/20.jpg)
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
2. Thiết lập , cài đặt môi trường làm việc chophonegap trên nền android .
![Page 21: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/21.jpg)
Tạo Project sử dụng PhoneGap trong Eclipse
21
2. Thiết lập , cài đặt môi trường làm việc chophonegap trên nền android .
![Page 22: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/22.jpg)
Tạo Project sử dụng PhoneGap trong Eclipse
• 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
2. Thiết lập , cài đặt môi trường làm việc chophonegap trên nền android .
![Page 23: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/23.jpg)
Tạo Project sử dụng PhoneGap trong Eclipse
23
2. Thiết lập , cài đặt môi trường làm việc chophonegap trên nền android .
![Page 24: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/24.jpg)
Tạo Project sử dụng PhoneGap trong Eclipse
24
2. Thiết lập , cài đặt môi trường làm việc chophonegap trên nền android .
![Page 25: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/25.jpg)
Tạo Project sử dụng PhoneGap trong Eclipse• Tạo project mẫu Hello World
25
2. Thiết lập , cài đặt môi trường làm việc chophonegap trên nền android .
![Page 26: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/26.jpg)
Xây dựng ứng dụng
26
![Page 27: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/27.jpg)
Ứ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
![Page 28: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/28.jpg)
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 đó
![Page 29: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/29.jpg)
29
3. Thiết kế CSDL cho ứng dụng
![Page 30: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/30.jpg)
30
3. Thiết kế CSDL cho ứng dụng
![Page 31: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/31.jpg)
31
3. Thiết kế CSDL cho ứng dụng
![Page 32: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/32.jpg)
32
3. Thiết kế CSDL cho ứng dụng
![Page 33: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/33.jpg)
33
3. Thiết kế CSDL cho ứng dụng
![Page 34: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/34.jpg)
34
4. Thiết kế giao diện cho ứng dụng
![Page 35: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/35.jpg)
35
4. Thiết kế giao diện cho ứng dụng
![Page 36: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/36.jpg)
36
4. Thiết kế giao diện choứng dụng
![Page 37: Tìm đường trên di động (PhoneGap)](https://reader031.vdocuments.mx/reader031/viewer/2022020110/55a687741a28ab451e8b45d5/html5/thumbnails/37.jpg)
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