Tìm Hiểu Html5 Và Ứng Dụng Thông Minh Cho Di Động1.Docx

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ──────── * ─────── ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC NGÀNH CÔNG NGHỆ THÔNG TIN TÌM HIỂU HTML5 VÀ XÂY DỰN[.]

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

Sinh viên thực hiện : Trần Việt Sỹ

Lớp CNPM – K51 Giáo viên hướng dẫn: ThS-GVC

Lương Mạnh Bá

HÀ NỘI 5-2011

PHIẾU GIAO NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

1 Thông tin về sinh viên

Họ và tên sinh viên: Trần Việt Sỹ

Điện thoại liên lạc: 01698043903 Email: tranvietsy.it@gmail.com

Lớp: Công nghệ phần mềm Hệ đào tạo: Chính quy

Đồ án tốt nghiệp được thực hiện tại: Đại học Bách Khoa Hà Nội

Thời gian làm ĐATN: Từ ngày 21/02/2011 đến 26/05/2011

2 Mục đích nội dung của ĐATN

 Tìm hiểu HTML5

 Nghiên cứu hệ điều hành cho di động – Hệ điều hành Android

 Xây dựng ứng dụng chạy trên hệ điều hành Android sử dụng HTML5

3 Các nhiệm vụ cụ thể của ĐATN

 Tìm hiểu ngôn ngữ HTML5

 Tìm hiểu Hệ điều hành di động Android

 Nghiên cứu lập trình di động cho Android

 Xây dựng ứng dụng cho hệ điều hành Android

4 Lời cam đoan của sinh viên:

Tôi - Trần Việt Sỹ - cam kết ĐATN là công trình nghiên cứu của bản thân tôi dưới sự hướng dẫn của ThS.GVC Lương Mạnh Bá

Các kết quả nêu trong ĐATN là trung thực, không phải là sao chép toàn văn của bất kỳcông trình nào khác

Hà Nội, ngày 26 tháng 5 năm 2011

Tác giả ĐATN

Trần Việt Sỹ

5 Xác nhận của giáo viên hướng dẫn về mức độ hoàn thành của ĐATN và cho phép bảovệ:

Hà Nội, ngày 26 tháng 5 năm 2011

Giáo viên hướng dẫn

ThS.GVC Lương Mạnh Bá

TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆP

Nội dung chính của đồ án được chia thành các phần sau:

 Phần mở đầu: Tóm tắt nội dung, đề tài được giao trong khuôn khổ đồ án tốt nghiệp.Trình bày các thông tin về môi trường thực hiện đồ án và giới thiệu tóm tắt bố cụccủa đồ án

 Phần nội dung chính của đồ án được chia thành 3 chương:

 Chương I: Đặt vấn đề và định hướng giải pháp

Trình bày cụ thể về nhiệm vụ, mô tả bài toán, các vấn đề cần giải quyết

Định hướng giải pháp giải quyết các vấn đề đặt ra

 Chương II: Phân tích và thiết kế hệ thống

Chương này sẽ trình bày những phân tích cụ thể về hệ thống bao gồm:

- Chức năng chính của hệ thống

- Biểu đồ Usecase

- Giải thuật của hệ thống

- Thiết kế cơ sở dữ liệu

 Chương III: Triển khai và thử nghiệm

Chương này sẽ trình bày những hướng dẫn cho việc cài đặt và những kết quả trongviệc triển khai ứng dụng, những đánh giá về hệ thống

Mục lục

PHIẾU GIAO NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP 1

TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆP 2

DANH MỤC CÁC HÌNH VẼ 4

DANH MỤC CÁC BẢNG 5

DANH MỤC CÁC TỪ VIẾT TẮT VÀ THUẬT NGỮ 6

MỞ ĐẦU 7

1 Giới thiệu 7

2 Nhiệm vụ được giao trong đề tài 7

3 Bố cục đồ án tốt nghiệp 7

CHƯƠNG 1 ĐẶT VẤN ĐỀ VÀ ĐỊNH HƯỚNG GIẢI PHÁP 9

I Vấn đề cần giải quyết 9

1 Mô tả bài toán 9

2 Các chức năng chính 9

II Định hướng giải quyết 9

1 Hiển thị vị trí và đường đi lên bản đồ 9

2 Thông tin du lịch 10

3 Sử dụng HTML5 và Phonegap 10

III Cơ sở lý thuyết 11

1 HTML5 11

2 Android 17

Chương 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 26

I Chức năng chính của hệ thống 26

II Biểu đồ Usecase 26

III Giải thuật của hệ thống 34

IV Phân tích và thiết kế Cơ sở dữ liệu 39

CHƯƠNG 3 TRIỂN KHAI VÀ THỬ NGHIỆM 43

I Cấu trúc chung của hệ thống 43

II Môi trường thử nghiệm 43

III Kiểm thử 43

IV Các kết quả đạt được 44

V Đánh giá hệ thống 50

TÀI LIỆU THAM KHẢO 53

DANH MỤC CÁC HÌNH VẼ

Hình 1 Giới thiệu về Google Maps 10

Hình 2 Các bước phát triển với ứng dụng sử dụng Phonegap 11

Hình 3 Logo Android 18

Hình 4 Kiến trúc hệ điều hành Android 20

Hình 5 Vòng đời của Activity 21

Hình 6 Vòng đời của Service 24

Hình 7 Vòng đời của service khi có kết nối 25

Hình 8 Usecase của hệ thống 27

Hình 9 Use case Client 27

Hình 10 Use case Server 31

Hình 11 Miêu tả chức năng xác định vị trí của tôi 34

Hình 12 Miêu tả chức năng Thông tin du lịch 35

Hình 13 Miêu tả chức năng tiện ích 36

Hình 14 Định dạng Object trong JSON 37

Hình 15 Định dạng mảng trong JSON 37

Hình 16 Định dạng giá trị (value) trong JSON 38

Hình 17 Định dạng một chuỗi trong JSON 38

Hình 18 Định dạng một số trong JSON 39

Hình 19 Sơ đồ liên kết giữa các bảng của CSDL 40

Hình 20 Giao diện trang quản lý thông tin 45

Hình 21 Màn hình chính của ứng dụng (trên 2 phiên bản) 46

Hình 22 Trang thông tin du lịch (tiếng Việt) 47

Hình 23 Trang thông tin du lịch (tiếng Anh) 47

Hình 24 Thông tin chi tiết và vị trí của địa danh (tiếng Việt) 48

Hình 25.Chỉ dẫn chi tiết (phiên bản tiếng Việt) 49

Hình 26 Thông tin và chỉ dẫn ( phiên bản tiếng Anh) 49

Hình 27 Tiện ích tìm đường 50

DANH MỤC CÁC BẢNG

Bảng 1 Đặc tả use case vị trí của tôi 28

Bảng 2 Đặc tả use case thông tin địa danh 29

Bảng 3 Đặc tả use case vị trí địa danh 29

Bảng 4 Đặc tả use case chi tiết đường đi 30

Bảng 5 Đặc tả use case tiện ích 30

Bảng 6 Đặc tả use case quản lý tài khoản 32

Bảng 7 Đặc tả use case quản lý tỉnh, thành phố 32

Bảng 8 Đặc tả use case quản lý phân loại địa danh 33

Bảng 9 Đặc tả use case quản lý địa danh 34

Bảng 10 Bảng CSDL admin 40

Bảng 11 Bảng CSDL admin_rule 41

Bảng 12 Bảng CSDL province 41

Bảng 13 Bảng CSDL types 41

Bảng 14 Bảng CSDL place 42

Bảng 15 Kết quả kiểm thử giao diện 43

Bảng 16 Kết quả kiểm thử tích hợp 44

Bảng 17 Kiểm thử về cơ sở dữ liệu 44

Bảng 18 Kiểm thử hiệu năng của hệ thống 44

DANH MỤC CÁC TỪ VIẾT TẮT VÀ THUẬT NGỮ

ĐATN Đồ án tốt nghiệp

HTML HyperText Markup Language

GPS Global Positioning System – Hệ thống định vị toàn cầu API Application Programming Interface

PK Primary Key (Khóa chính)

FK Foreign Key (Khóa ngoài)

IP International Protocol - Giao thức toàn cầu

GSM/CDMA Global System for Mobile communications/

Code-Division Multiple Access

MỞ ĐẦU

1 Giới thiệu

Du lịch là ngành không khói, ít gây ô nhiễm môi trường, giúp khách du lịchvừa được nghỉ ngơi, giảm strees vừa biết thêm nhiều điều hay mới lạ mà kháchchưa biết Du lịch còn góp phần phát triển kinh tế của đất nước, tạo việc làm và tăngthu nhập cho người lao động (hướng dẫn viên, các dịch vụ liên quan ) Ngành dulịch và dịch vụ đã đóng góp tích cực vào nền kinh tế Việt Nam Số lượng khách dulịch đến Việt Nam liên tục tăng nhanh trong vòng 10 năm kể từ 2000 - 2010.Năm 2010, có khoảng 5.0 triệu lượt khách quốc tế, đem lại nguồn thu ngoại tệkhoảng 4.4 tỉ USD

Việt Nam có nhiều điểm du lịch đa dạng từ miền Bắc đến miền Nam, từmiền núi tới đồng bằng, bãi biển, đảo Từ các thắng cảnh thiên nhiên tới các di tíchvăn hóa lịch sử, Các điểm du lịch miền núi nổi tiếng như Sapa, Bà Nà, Đà Lạt.Các điểm du lịch ở đồng bằng như Hà Nội, Huế, Đà Nẵng, TP.Hồ Chí Minh, Cácđiểm du lịch ở các bãi biển như Hạ Long, Nha Trang, Phan Thiết, Vũng Tàu và cácđảo như Cát Bà, Cù lao Chàm, Côn Đảo, Phú Quốc,

Vài năm trở lại đây, sự bùng nổ của ngành công nghiệp smartphone đã kéotheo sự phát triển các ứng dụng đi kèm mạnh mẽ hơn bao giờ hết

Một ứng dụng có thể cung cấp và cập nhật nhanh chóng các thông tin dulịch, giới thiệu các địa điểm du lịch nổi tiếng của các vùng, các tỉnh trong cả nước

sẽ là công cụ hữu ích cho những người du lịch Hiện nay các smartphone sử dụng hệđiều hành Android và Iphone đang phát triển rất nhanh Cùng với đó, sự xuất hiệncủa HTML5 đã tạo ra một công cụ mạnh để phát triển các ứng dụng thông minhtrên điện thoại di động Với mong muốn xây dựng một ứng dụng thông tin du lịchtrên điện thoại di động cung cấp cho người dùng các thông tin như địa điểm trênbản đồ, thông tin về địa điểm du lịch, chỉ dẫn đường tới các địa danh, danh lam

thắng cảnh và các tiện ích cần thiết cho chuyến du lịch, em đã chọn đề tài : “Tìm hiểu HTML5 và ứng dụng thông minh cho di động” để làm đồ án tốt nghiệp của

mình

2 Nhiệm vụ được giao trong đề tài

 Tìm hiểu về HTML5

 Tìm hiểu hệ điều hành cho di động, cụ thể là hệ điều hành Android

 Xây dựng ứng dụng cho điện thoại di động chạy trên hệ điều hành

Android sử dụng HTML5

3 Bố cục đồ án tốt nghiệp

Đồ án tốt nghiệp bao gồm 4 phần chính Trong đó, phần 1 là phần mở đầu,giới thiệu tổng quan về đồ án và công nghệ sử dụng Phần 2 là đặt vấn đề và định

hướng giải pháp, nêu các phương hướng phát triển cho đồ án Phần 3 là các kết quảđạt được trong đồ án bao gồm kết quả phân tích thiết kế ứng dụng, kết quả thựchiện cài đặt và thử nghiệm ứng dụng, đánh giá ưu nhược điểm và khả năng sử dụngcủa dịch vụ Cuối cùng là phần 4, phần kết luận bao gồm kết luận đánh giá các côngviệc đã làm và chưa làm được và định hướng nhằm hoàn thiện kết quả đạt được củaĐATN.

CHƯƠNG 1 ĐẶT VẤN ĐỀ VÀ ĐỊNH HƯỚNG GIẢI PHÁP

I Vấn đề cần giải quyết

1 Mô tả bài toán

Ứng dụng Thông tin du lịch trên di động sử dụng công nghệ HTML5 vàJQuery Mobile chạy trên hệ điều hành di động Android cung cấp cho người sử dụngcác chức năng:

 Cung cấp vị trí hiện tại của người dùng thông qua GPS

 Cung cấp thông tin của các địa danh du lịch, các dịch vụ du lịch của cáctỉnh,thành phố theo từng loại khác nhau như Di tích lịch sử, văn hóa, bảotàng, địa điểm giao thông… Thông tin du lịch lấy từ server của hệ thống

 Cung cấp chức năng chỉ dẫn đường cho người dùng từ vị trí hiện tại đến mộtđịa điểm nào đó

 Cung cấp các tiện ích cho người du lịch như tìm đường đi giữa các địa điểmbằng các phương tiện khác nhau như đi bộ, lái xe Tìm kiếm các địa điểm màngười dùng cần tìm gần với vị trí người dùng nhất

2 Các chức năng chính

2.1 Xây dựng trang web cung cấp thông tin du lịch

Cung cấp vị trí, thông tin của các tỉnh, thành phố, các địa danh du lịch.Thông tin về các địa điểm du lịch được cung cấp tại địa chỉ

http://www.sytv.byethost31.com/html5/

Người quản trị có quyền: cập nhật, thêm mới, xóa bỏ các thông tin du lịch

2.2 Xây dựng ứng dụng trên di động

Các chức năng chính của ứng dụng( dành cho người sử dụng):

– Vị trí của tôi : Đây là vị trí hiện tại của người dùng được hiển thị trên

bản đồ Vị trí này được cung cấp bởi chức năng GPS của máy điệnthoại di động (nếu điện thoại di động có hỗ trợ) hoặc wifi, địa chỉ IP

– Thông tin du lịch: Thông tin về các địa điểm du lịch, danh lam thắng

cảnh, di tích lich sử của các vùng Hiển thị vị trí của địa danh du lịchlên bản đồ và hiển thị đường đi ngắn nhất từ vị trí hiện tại của ngườidùng đến địa điểm đó Hướng dẫn chi tiết đường đi đến các địa điểm

– Tiện ích: Các tiện ích giúp người dùng tìm kiếm vị trí các địa điểm

cần tìm

II Định hướng giải quyết

1 Hiển thị vị trí và đường đi lên bản đồ

Để hiển thị vị trí người dùng, vị trí của các địa điểm lên trên bản đồ ta sửdụng Google Map API v3, JQuery Mobile và HTML5

Google Maps là một dịch vụ bản đồ trực tuyến miễn phí được cung cấp bởicông ty Google thông qua các trang web như Google Maps, Google Ride Finder vàđược nhúng vào các trang web thứ 3 thông qua các hàm dịch vụ API Nó cung cấpcác dịch vụ khác nhau cho người xem như : Bản đồ đường phố, ảnh chụp vệ tinh,tìm kiếm lộ trình đường đi, tìm kiếm địa chỉ…

Hình 1 Giới thiệu về Google Maps

Google Maps đã được phát triển bởi hai anh em người Đan Mạch, Lars vàJens Rasmussen làm việc tại một công ty chuyên cung cấp các giải pháp về bản đồ.Công ty được mua lại bởi Google vào tháng Mười năm 2004, và hai anh em sau đótạo ra Google Maps

2 Thông tin du lịch

Các thông tin được cập nhật từ trang web www.sytv.byethost31.com/html5/

được đưa tới ứng dụng

3 Sử dụng HTML5 và Phonegap

Hệ thống được phát triển theo hướng sử dụng HTML5 nên ứng dụng sẽ làweb application, tuy nhiên với việc áp dụng Phonegap vào hệ thống sẽ tạo ra mộtứng dụng bản địa của Android

Phonegap

Phonegap là một framework mã nguồn mở dành cho việc phát triển các ứngdụng di động với HTML, CSS và JavaScript cho iPhone / iPad, Google Android,Palm, Symbian, BlackBerry, Windows Mobile …

Viết một ứng dụng PhoneGap với HTML và Javascript và triển khai nó đếnbất kỳ thiết bị di động mà không làm mất tính năng của một ứng dụng bản địa của

hệ điều hành di động đó

Hình 2 Các bước phát triển với ứng dụng sử dụng Phonegap

III Cơ sở lý thuyết

1 HTML5

1.1 Giới thiệu về HTML5

a Lịch sử ra đời

Năm 1991 phiên bản đầu tiên của HTML – HyperText Markup Languagexuất hiện tính đến nay đã được 20 năm Trong những ngày đầu của việc phát triểnweb, HTML đã trải qua một loạt những thay đổi từ simple text cho đến việc baogồm hình ảnh và thêm CSS để định dạng văn bản

Sau đó vào năm 1997, HTML4 được tung ra thị trường và mọi thứ dườngnhư đã dừng lại vì các máy tính có tốc độ xử lý hạn chế và tốc độ kết nối mạng thấp

do việc sử dụng dial-up modem Nhưng ngày nay máy tính đã được cải tiến để xử lýnhanh hơn, kết nối mạng ngày nay được đo bằng megabyte trên giây Do đó rõ ràng

là HTML4 không thể đáp ứng được cho những người sử dụng web hiện đại

Một nhóm được gọi là Web Standards Project bắt đầu phát triển HTML5 vàonăm 2007 Mục đích của dự án này là tham vọng là xây dựng một chuẩn HTML cóthể chạy tất cả các ứng dụng trong một trình duyệt web

HTML5 giới thiệu một loạt các công nghệ mới bao gồm:

1.2 Những tính năng mới trong HTML5

a HTML5 làm giảm tầm quan trọng của các plug-ins.

Trước đây, câu chuyện về Web gắn với plug-in hay add-on của một trìnhduyệt bởi nó khuyến khích sự sáng tạo cũng như sự trải nghiệm Âm thanh, ảnhđộng hay những thủ thuật khác xuất hiện trên Web thông qua plug-ins, phát triểnbởi Sun, Adobe, RealAudio, Microsoft và rất nhiều hãng khác Giao diện plug-ins

mở đối với tất cả và mọi người có thể trải nghiệm bằng cách thêm những tính năngmới

Cuộc chiến về Flash có thể là cuộc chiến nổi tiếng nhất, nhưng sức mạnhmới được từ HTML5 cũng đe dọa tới hệ mã lệnh JavaFX là lý tưởng, nhưng ai làngười muốn học một loại cú pháp mới trong khi JavaScrip và Canvas đang làm rấttốt Ai cần hệ thống Real khi các video sẽ được chuyển thành audio và video? Plug-ins dường như sẽ bị lãng quên

Plug-ins sẽ bị biến mất hoặc không được dùng? Có thể, nhưng nó còn phụthuộc vào việc làm của bạn Nếu bạn muốn vẽ hình ảnh, Canvas là thích hợp nhất.Nhưng nếu muốn vẽ một thế giới 3-D đặc biệt, giống như trong các trò chơi Flash

và Shockwave phức tạp, bạn sẽ phải dùng tới plug-in khi nó có thể kết nối trực tiếptới video cũng như chạy thế giới game 3-D

b HTML5 hỗ trợ đồ họa tương tác

Web cũ tải hình ảnh bằng cách tải file GIF hay JPG Web mới có thể xâydựng hình ảnh trên Canvas Một loạt Thư viện đồ họa đẹp được đưa ra, giúp cho đồhọa của Website trở nên tương tác hơn

Hiện nay, JavaScript có thể tính toán cũng như vẽ hình ảnh bằng dữ liệu.Mọi thứ trở nên sống động khi những lập trình viên có thời gian để đưa ra giải pháp.Adobe mới đây đã bắt đầu phát triển đồ họa tinh xảo cho HTML5 Sự xuất hiện củanhững công cụ này sẽ mở đầu cho những khả năng mới cũng như đồ họa sẽ đượctinh xảo hơn hiện nay

c HTML5 cho phép các ứng dụng kết nối tới khu vực lưu trữ file

Những người lập trình Web thường lưu trữ một lượng lớn thông tin trong cáccookies (300 cookies tương đương với 4096 byte) Bộ công cụ dùng plug-in Flash

để trưng dụng lựa chọn từ ổ đĩa là phiên bản đầu của bộ công cụ Dojo Tuy nhiên,giờ đây chỉ cần sử dụng HTML5 là được

Lập trình viên có thể lưu trữ bất cứ thứ gì họ muốn Điều này giúp việc càiđặt các ứng dụng dễ dàng hơn giống như các ứng dụng cũ Các ứng dụng chạy mãJavaScript từ ứng dụng lưu trữ HTML5 ngoại tuyến và hoạt động ngay cả khi kếtnối Web đang hoạt động

Phương pháp này không ảnh hưởng tới hoạt động phát triển nhóm “đámmây” bởi những dữ liệu có thể hoạt động như những lưu trữ thông minh Lập trìnhgame có thể lưu trữ theo vùng những phần mô tả và ảnh minh họa, giúp tiết kiệmthời gian tải thông tin nhiều lần

Ngược lại, những dữ liệu này sẽ được lưu trữ trong các tệp tin hệ thống Thếnên việc lấy lại dữ liệu không phải là dễ dàng Người dùng muốn chuyển dữ liệu từmáy này sang máy khác sẽ gặp phải khó khăn

d HTML5 giúp hợp nhất các địa chỉ

Đối với máy chủ Web, địa chỉ máy tính đơn thuần chỉ là những con số ẩndanh Chuẩn HTML5 cho phép các trình duyệt định vị trí của người dùng Tuynhiên, nó sẽ không hoạt động với các máy bàn (hoạt động với GPS hoặc Wifi),nhưng nó lại hoạt động tốt với smartphone cầm tay

e HTML5 làm video của Web đẹp hơn

Chuẩn HTML5 giúp các nhà lập trình tiếp hợp video dễ dàng hơn với thôngtin trên trang, cung cấp các ứng dụng tới lập trình viên jQuery và PHP ngoài Flash,Silverlight hay JavaFX.

Mọi người đều muốn cung cấp mã nguồn mở để mở những hình ảnh động và

âm thanh tương ứng dẫn đến việc không thống nhất Chuẩn HTML5 sẽ là mã nguồn

mở trung gian, có nghĩa là chúng ta thay đổi cách gọi từ plug-in thành codec Tuynhiên, dù ta có chuẩn video nhưng trình duyệt lại rất khó để dịch dữ liệu

Mặc dù vẫn còn sự cân nhắc cũng như thiếu sự nhất trí hoàn toàn, thẻ videomới này sẽ cho thấy sức mạnh của video, giúp cho HTML bớt đi kí tự văn bản vàvideo sẽ được dùng nhiều hơn

f HTML5 tạo ra widget chat

Widget sử dụng trong iframes cho phép các trang web ghi nhớ lại thông tin

từ các trang khác trong vòng nhiều năm Tuy nhiên chúng lại bị các rào cản an ninhgiới hạn khi chỉ lưu trữ mỗi wiget trong một sandbox riêng

HTML5 cung cấp cơ chế chuẩn giúp các widget có thể trò chuyện với nhau.Mặc dù chúng vẫn không thể vượt qua được sandbox của widget khác nhưng cácwidget có thể gửi tin nhắn qua lại, kết nối công việc, thậm chí là chuyển đổi thôngtin về người đang sử dụng máy tính

Các nhà quảng cáo có cơ hội để đăng quảng cáo với các ô hình chữ nhật khácnhau xuất hiện trên các trang web Trong khi đó, các nhà phát triển vẫn khẳng định

sẽ tìm được những ứng dụng thức tế khác

Tuy nhiên, sử dụng cơ chế này để gửi tin nhắn thì chỉ mới là bước đầu Vẫncần tạo ra tiêu chuẩn cho những thông tin được chuyển đi do các widget là một cơhội để trò chuyện giữa mọi người nên chúng cần phải có những ngôn từ chuẩn

g HTML5 có thể tăng khả năng bảo mật

Mỗi trình duyệt có một plug-in riêng do các nhóm lập trình khác nhau lập ravới những tiêu chuẩn khác nhau, được đưa ra vào thời điểm khác nhau và kiểu mẫubảo mật cũng khác nhau Thông thường, một số phiên bản plug-in có tính bảo mậthơn so với loại khác Và khi số lượng plug-in gia tăng, chúng làm tăng độ phức tạptrong kiểm tra các lỗi an ninh

Thay thế nhiều loại plug-in với các đặc điểm được tích hợp với HTML 5 sẽ

bỏ đi được những khuyết điểm có trong các plug-in trước đó Những khuyết điểm

có thể bị lợi dụng để thiết lập mã độc Nếu như nhóm an ninh kiểm tra Firefox,Chorme hoặc IE cho phép cài đặt các plug-in này, sự nguy hiểm sẽ giảm bớt đi

h HTML5 đơn giản hóa việc phát triển web

HTML5 cung cấp một ngôn ngữ lập trình JavaScript, một kiểu dữ liêu (XMLhoặc DOM) và một phần nguyên tắc thiết lập (CSS) để kết nối văn bản, audio,

video và đồ họa Thách thức trong việc tạo ra cái gì đó tốt đẹp vẫn là mênh môngnhưng điều đó sẽ đơn giản hơn khi làm việc trong một tiêu chuẩn thống nhất Hiệnnay chỉ Adobe sử dụng HTML5 để tích hợp các công cụ dành cho Flash.

1.3 HTML5 Geolocation

a Giới thiệu

Geolocation là một thành phần mới được giới thiệu trong phiên bản HTML5

Hỗ trợ việc xác định vị trí của người dùng khi sử dụng website (với điều kiệnwebsite đang hoạt động online) Việc thu thập thông tin vị trí người dùng thông quacác nguồn cung cấp như Global Positioning System (GPS) và một số nguồn khácnhư IP Address, RFID, Wifi và Bluetooth MAC Address, và GSM/CDMA haythông qua các giá trị được người dùng cung cấp Nhưng với HTML5 Geolocationvẫn không đảm bảo về độ chính xác của vị trí được tìm thấy khi sử dụng chúng

b Ví dụ

HTML5 được giới thiệu kèm với các API hỗ trợ lấy thông tin vị trí ngườidùng Đối tượng geolocation của HTML5 được bao gồm trong Browser ObjectNavigator

Ví dụ 1: Lấy thông tin vị trí hiện tại

Việc vẽ đồ họa trên Canvas đều thông qua Javascript.

Để tạo một Canvas trên trang web ta dùng thẻ <canvas></canvas>

1.5 HTML5 Data Storage

HTML5 cung cấp 2 đối tượng mới để lưu trữ dữ liệu trên client:

 localStorange – lưu trữ dữ liệu không giới hạn thời gian

 sessionStorange – lưu trữ dữ liệu cho một session

Data được lưu trữ ở những nơi khác nhau cho các trang web khác nhau vàmỗi trang web chỉ có thể truy cập dữ liệu được lưu trữ bởi chính trang này

HTML5 dùng javascript để lưu trữ và truy cập dữ liệu

a localStorange

Sử dụng đối tượng này khi cần lưu trữ dữ liệu quan trọng trong thời gian dài

Để lưu giữ liệu ta dùng phương thức setItem(“key”,”value”), truy cập dữliệu ứng với key đã lưu trữ ta dùng phương thức getItem(“key”) Để đơn giản ta cóthể sử dụng localStorange.keyname = “value”, truy cập dữ liệu đơn giản ta gọilocalStorange.keyname

Đối tượng này có thể được gọi từ đối tượng window:window.localStorange.keyname

b sessionStorange

Sử dụng đối tượng này khi cần lưu trữ dữ liệu tạm thời trong thời gian ngắn,

vì đối tượng này sẽ mất đi sau khi đóng window hoặc tab

Việc lưu và truy xuất data tương tự như localStorange

1.6 Offline Web applications

a Giới thiệu

HTML5 cho phép người dùng tiếp tục tương tác với các ứng dụng web trongkhi họ không còn kết nối ra ngoài internet Và các ứng dụng (có thể là webpage–document, hay các media khác như hình ảnh) sẽ được lưu trữ lại trên máy của ngườitruy cập dưới dạng là một danh sách các URLs được lưu lại trong một manifest file.Dựa vào manifest file mà trình duyệt sẽ biết được những file nào được lưu trữ lạitrên trình duyệt, do đó khi người dùng bị mất kết nối và truy cập lại website, thìtrình duyệt sẽ kiểm tra yêu cầu của URL, trình duyệt sẽ tìm trong bộ nhớ đệm vàkiểm tra nếu tồn tại URL đó đã được lưu lại chưa, nếu đã tồn tại thì trình duyệt sẽnạp lại chính nội dung từ yêu cầu của URL mà trình duyệt đã lưu trữ lại trước đó

b Cache Manifest

Một ứng dụng web offline thường đi kèm với một file cache manifest Filecache này (manifest file) sẽ bao gồm một danh sách của tất cả các tài nguyên màứng dụng web cần truy xuất khi chuyển sang sử dụng offline

FALLBACK:

Định nghĩa danh sách những tài nguyên sẽ được thay thế khi được yêu cầu với chế

độ offline Đây có thể là những tài nguyên không thể lưu trữ được hoặc là lưu trữkhông thành công

Android là hệ điều hành trên điện thoại di động phát triển bởi Google và dựatrên nền tảng Linux Trước đây, Android được phát triển bởi công ty liên hợpAndroid (sau đó được Google mua lại vào năm 2005) Theo NPD, thiết bị di động

sử dụng hệ điều hành Android bán được tại Mỹ trong quý II năm 2010 xếp vị trí đầutiên với 33%, thứ 2 là BlackBerry OS với 28% và iOS ở vị trí thứ 3 với 22%Android có một cộng đồng những nhà phát triển rất lớn viết các ứng dụng cho hệđiều hành của mình Hiện tại có khoảng 70 000 ứng dụng cho hệ điều hành Android

và khoảng 100 000 ứng dụng đã được đệ trình, điều này khiến Android trở thành hệđiều hành di động có môi trường phát triển lớn thứ 2 Các nhà phát triển viết ứngdụng cho Android dựa trên ngôn ngữ Java Sự ra mắt của Android vào ngày 5 tháng

11 năm 2007 gắn với sự thành lập của liên minh thiết bị cầm tay mã nguồn mở, baogồm 78 công ty phần cứng, phần mềm và viễn thông nhằm mục đích tạo nên mộtchuẩn mở cho điện thoại di động trong tương lai Google công bố hầu hết các mãnguồn của Android theo bản cấp phép Apache Hệ điều hành Android bao gồm 12triệu dòng mã, 3 triệu dòng XML, 2.8 triệu dòng mã C, 2.1 triệu mã Java và 1.75triệu dòng mã C++

2.2 Tính năng mở của hệ điều hành Android

Android được xây dựng để cho phép các nhà phát triển để tạo ra các ứngdụng di động hấp dẫn tận dụng tất cả một chiếc điện thoại đã cung cấp Nó đượcxây dựng để được thực sự mở Ví dụ, một ứng dụng có thể kêu gọi bất kỳ chức nănglõi của điện thoại như thực hiện cuộc gọi, gửi tin nhắn văn bản, hoặc bằng cách sửdụng máy ảnh, cho phép các nhà phát triển để tạo ra phong phú hơn và nhiều hơn

nữa những kinh nghiệm cố kết cho người dùng Android được xây dựng trên mởLinux Kernel Hơn nữa, nó sử dụng một máy ảo tuỳ chỉnh được thiết kế để tối ưuhóa bộ nhớ và tài nguyên phần cứng trong một môi trường di động Android là mãnguồn mở, nó có thể được mở rộng tùy ý Nền tảng này sẽ tiếp tục tiến triển nhưcộng đồng nhà phát triển công việc cùng nhau để xây dựng các ứng dụng di độngsáng tạo.

a Tất cả các ứng dụng có thể được tạo ra cho Android

Android không phân biệt giữa các ứng dụng lõi của điện thoại và các ứngdụng của bên thứ ba Tất cả có thể được xây dựng để có thể truy cập bằng khả năngcủa một người cung cấp cho người sử dụng điện thoại với một dải rộng các ứngdụng và dịch vụ Với các thiết bị xây dựng trên Hệ điều hành Android, người dùng

có thể hoàn toàn thích ứng với điện thoại đến lợi ích của họ Họ có thể trao đổi trênmàn hình của điện thoại, những phong cách của người sử dụng, hoặc bất kỳ ứngdụng nào

b Phá bỏ các rào cản ứng dụng của Android

Android phá bỏ rào cản để xây dựng các ứng dụng mới và sáng tạo Ví dụ,một nhà phát triển có thể kết hợp thông tin từ các trang web với dữ liệu trên điệnthoại di động của một cá nhân – ví dụ như địa chỉ liên hệ của người dùng, lịch, hoặc

vị trí địa lý – để cung cấp một trải nghiệm người dùng có liên quan hơn VớiAndroid, một nhà phát triển có thể xây dựng một ứng dụng cho phép người dùngxem vị trí của bạn bè của họ và được cảnh báo khi họ đang có trong vùng phụ cậncho họ một cơ hội để kết nối

c Với Android tốc độ nhanh và phát triển ứng dụng dễ dàng

Android cung cấp truy cập đến một loạt các thư viện công cụ hữu ích và cóthể được sử dụng để xây dựng các ứng dụng phong phú Ví dụ, Android cho phépcác nhà phát triển để có được vị trí của điện thoại, và cho phép các thiết bị để giaotiếp với nhau tạo điều kiện cho đồng đẳng các ứng dụng xã hội Ngoài ra, Androidbao gồm một tập hợp đầy đủ công cụ đã được xây dựng từ mặt đất lên cùng với việccung cấp nền tảng phát triển, với năng suất cao và cái nhìn sâu vào các ứng dụngcủa họ

2.3 Phát triển Android ROM

Rất nhiều nhà phát triển hệ điều hành Android đã vào cuộc và các ROMcho Android độc đáo được ra đời với nhiều tích năng nổi trội được tích hợp và đầysáng tạo

Danh sách các nhà phát triển ROM nổi bật:

2.4 Kiến trúc hệ điều hành Android

Hệ điều hành android có 4 tầng từ dưới lên trên là tầng hạt nhân Linux(Phiên bản 2.6), tầng Tầng Libraries & Android runtime, Tầng ApplicationFramework và trên cùng là tầng Application

Hình 4 Kiến trúc hệ điều hành Android

2.5 Lập trình trên hệ điều hành Android

a Activity trong Android

Activity là một trong 4 thành phần chính của một ứng dụng Android

Activity được dùng để hiện thị một màn hình

Khi làm việc với activity cần bắt đầu với một số kiến thức cơ bản sau:

 Vòng đời của activity

 Khởi động một activity, liên lạc giữa 2 activity

b Vòng đời của Activity

Hình 5 Vòng đời của Activity

c Khởi động một activity:

Dùng Intent:

Khai báo tường minh: cung cấp chính xác thông tin của activity cần gọi (nếu

cùng ứng dụng chỉ cần cung cấp tên class, nếu ứng dụng khác nhau thì cung cấp tênpackage, tên class)

Khai báo không tường minh: cung cấp thao tác cần làm gì, với loại dữ liệu

nào, thao tác thuộc nhóm nào… hệ thống sẽ tìm activity tương ứng để khởi động

Ví dụ:

Tường minh: đoạn code bên dưới sẽ tạo khởi động Activity tên làTargetActivity

Intent intent = new Intent(getApplicationContext(),

Với cách khởi động activity không tường minh, bạn cần biết một chút vềIntent-filter: Intent-filter sẽ giúp một activity (chung hơn là một thành phần ứngdụng) đăng ký với hệ thống mình có thể làm được thao tác gì, trong nhóm nào, vớiloại dữ liệu nào Như vậy khi intent và intent-filter khớp nhau, activity sẽ được hệthống khởi động

Liên lạc giữa 2 activity:

Khi khởi động một activity, ta có thể gửi kèm dữ liệu trong intent như ví dụsau:

intent.putExtra("value1", new String("Hello"));

intent.putExtra(“value2", new Long(100));

Bên phía activity được khởi động, có thể lấy dữ liệu được gửi như sau:

d Thiết kế giao diện trên Android

Trong Android, dùng Activity để hiển thị màn hình

Mỗi activity sẽ chứa các View theo dạng cấu trúc cây, nghĩa là một Layoutgốc chứa các view/layout con bên trong hoặc chỉ có một view duy nhất (lưu ýLayout cũng là một view)

Có thể thiết kế giao diện trong code java hoặc trong file xml trong thư mụclayout

- Layout_width, layout_height: chiều rộng của view (fill_parent là to bằng

kích thước của layout chứa view này, wrap_content là vừa đủ nội dung cầnhiển thị của view)

- Orientation: với LinearLayout, việc sắp xếp các view là nằm kề nhau theo

hàng ngang hoặc hàng dọc, ta khai báo orientation để chọn sắp theo kiểu nào(horizontal/vertical)

- Gravity: thuộc tính này qui định các view nằm bên trong layout sẽ đặt theo vị

trí nào so với layout (trung tâm, trái, phải, trên, dưới…)

- Weight: để các view phân chia tỉ lệ diện tích hiển thị trên màn hình (tỉ lệ tính

theo weight của từng view trên tổng số weight, các view không khai báoweight thì sẽ xem qua width và height)

e BroadcastReceiver

BroadcastReceiver (có thể gọi là Receiver) là một trong bốn loại thành phầntrong ứng dụng Android Chức năng dùng để nhận các sự kiện mà các ứng dụnghoặc hệ thống phát đi

Vòng đời của BroadcastReceiver

Thực ra vòng đời của BroadcastReceiver chỉ có duy nhất một phương thứconReceive()

Khi có sự kiện mà BroadcastReceiver đã đăng ký nhận được phát đi, thì phươngthức onReceive() của BroadcastReceiver đó sẽ được gọi

Sau khi thực thi xong phương thức này, vòng đời của Receiver kết thúc

Ngay khi onReceive() kết thúc, hệ thống coi như receiver đã không còn hoạt động

và có thể xóa bỏ xử lý chứa receiver này bất cứ lúc nào

àTránh xử lý các code quá lâu trong onReceive()

à Không có xử lý bất đồng bộ, chờ callback… trong Receiver (cụ thể nhưhiển thị Dialog, kết nối service…)

Một số broadcast thông dụng:

- Báo hệ thống khởi động xong

- Báo pin có sự thay đổi

- Báo có package mới cài vào hoặc xóa đi

Intent được truyền vào sẽ có đầy đủ thông tin như sự kiện nào mà receivernày đăng ký đã xảy ra dẫn đến onReceive() được gọi Có gửi kèm thông tin gì hoặc

dữ liệu gì hay không

f Service

Là một trong 4 loại thành phần của một ứng dụng

Service chạy nền và không tương tác trực tiếp với người dùng

Hình 6 Vòng đời của Service

Khi có một tình huống nào đó gọi startService() để khởi tạo service mongmuốn Nếu service đó chưa được tạo thì sẽ gọi onCreate() rồi gọi tiếp onStart() vàkhi đó service chạy nền bên dưới

Nếu sau đó lại có một tình huống muốn start service này mà service đã đangchạy, chỉ có phương thức onStart() của service được gọi

Dù service có được gọi start bao nhiêu lần thì cũng chỉ có một trường hợpcủa service và chỉ cần gọi stopService() một lần để kết thúc service.

Hình 7 Vòng đời của service khi có kết nối

Thông thường, vòng đời của service khi có client kết nối từ đầu như sau:Cũng bắt đầu bằng onCreate() rồi đến onBind() và service chạy background.Khikhông còn client kết nối tới thì service gọi onUnbind() rồi onDestroy()

Chương 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

I Chức năng chính của hệ thống

Mục đích của ứng dụng của đồ án là xây dựng một hệ thống có thể cung cấp các thông tin du lịch cho người sử dụng trên điện thoại di động và xây dựng một website quản lý cơ sở dữ liệu thông tin du lịch của hệ thống

1 Các chức năng chính của hệ thống

Các chức năng chính của hệ thống của hệ thống bao gồm:

a Thông tin du lịch (Client)

– Vị trí của tôi : Đây là vị trí hiện tại của người dùng được hiển thị trên bản

đồ Vị trí này được cung cấp bởi chức năng GPS của máy điện thoại diđộng (nếu điện thoại di động có hỗ trợ) hoặc wifi, địa chỉ IP

– Thông tin du lịch: Thông tin về các địa điểm du lịch, danh lam thắng

cảnh, di tích lich sử của các vùng Hiển thị vị trí của địa danh du lịch lênbản đồ và hiển thị đường đi ngắn nhất từ vị trí hiện tại của người dùngđến địa điểm đó Hướng dẫn chi tiết đường đi đến các địa điểm

– Tiện ích: Các tiện ích giúp người dùng tìm kiếm vị trí các địa điểm cần

tìm

b Quản lý thông tin du lịch (Website)

– Website có chức năng quản lý cơ sở dữ liệu về thông tin du lịch của hệthống Các chức năng bao gồm thêm, cập nhật, xóa bỏ về các địa điểm dulịch, các tỉnh thành phố có địa điểm du lịch Xây dựng các phương thứctương tác dữ liệu với Client

2 Đối tượng sử dụng

Đối tượng sử dụng hệ thống bao gồm:

Người quản lý: là người quản lý việc thay đổi, cập nhật các thông tin của hệ thống Người dùng: là người sử dụng ứng dụng trên điện thoại di động

II Biểu đồ Usecase

Sau khi khảo sát và phân tích hệ thống, ta có biểu đồ usecase cho các chứcnăng chính của hệ thống như sau: