VIỆN ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ ĐIỆN TỬ - THÔNG TIN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Đề tài: “Lập trình Android ứng dụng WebView Android” Giảng viên hướng dẫn: QUÁCH THỊ HẠNH Sinh viên thực Lớp Khóa Hệ : LÊ ANH QUÂN : K16A : 2013 – 2017 : ĐẠI HỌC CHÍNH QUY Hà Nội, tháng /2017 VIỆN ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ ĐIỆN TỬ - THÔNG TIN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Đề tài: “Lập trình Android ứng dụng WebView Android” Giảng viên hướng dẫn: QUÁCH THỊ HẠNH Sinh viên thực : LÊ ANH QUÂN Lớp Khóa Hệ : K16A : 2013 – 2017 : ĐẠI HỌC CHÍNH QUY Hà Nội, tháng 5/2017 VIỆN ĐẠI HỌC MỞ HÀ NỘI CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CN ĐIỆN TỬ - THÔNG TIN Độc lập - Tự – Hạnh phúc ĐỀ TÀI ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Họ tên sinh viên: Lê Anh Quân Lớp: K16A Khóa: 16 (2013 – 2017) Ngành đào tạo: Công nghệ Kỹ thuật điện tử, Truyền thông Hệ đào tạo: ĐHCQ 1/ Tên đề tài ĐATN: Lập trình Android ứng dụng WebView Android 2/ Nội dung chính: 1/ Chương 1: Tổng quan Android 2/ Chương 2: WebView Android 3/ Chương 3: Demo ứng dụng 4/ Chương 4: Chức WebView 3/ Cơ sở liệu ban đầu: 4/ Ngày giao: 20/02/2017 5/ Ngày nộp: /05/2017 TRƯỞNG KHOA (Ký, ghi rõ họ tên) GIÁO VIÊN HƯỚNG DẪN (Ký, ghi rõ họ tên) MỞ ĐẦU Mạng điện thoại di động xuất Việt Nam từ năm 1990 theo thời gian số lượng thuê bao nhà cung cấp dịch vụ di động Việt Nam ngày tăng Do nhu cầu trao đổi thông tin ngày tăng nhu cầu sử dụng sản phẩm công nghệ cao có nhiều tính , cấu hình cao, chất lượng tốt, kiểu dáng mẫu mã đẹp, phong phú nên nhà cung cấp phải luôn cải thiện, nâng cao sản phẩm Do đó, việc xây dựng ứng dụng cho điện thoại di động ngành công nghiệp đầy tiềm hứa hẹn nhiều vượt bậc phát triển ngành khoa học kĩ thuật Cùng với phát triển thị trường điện thoại di động phát triển mạnh mẽ xu hướng lập trình phần mềm ứng dụng cho thiết bị di động Hiện phần mềm, ứng dụng cho điện thoại di động đa dạng, phong phú, hệ điều hành di động phát triển mạnh mẽ thay đổi ngày Các hệ điều hành J2ME, Android, IOS, Window Phone… có phát triển thị trường truyền thông di động Trong vài năm trở lại đây, hệ điều hành Android đời, kế thừa ưu việt hệ điều hành đời trước kết hợp nhiều công nghệ tiên tiến nay, phát triển Google Android nhanh chóng đổi thủ cạnh tranh mạnh mẽ với hệ điều hành trước hệ điều hành di động tương lai nhiều người ưa chuộng Ngày nay, với phát triển nhanh chóng xã hội, nhu cầu lướt web, cập nhật thông tin lúc nơi cần thiết, em chọn đề tài “Lập trình Android ứng dụng trình duyệt Webview” với mục đích nghiên cứu, tìm hiểu hệ điều hành Android xây dựng ứng dụng trình duyệt Webview để đáp ứng nhu cầu lướt web, cập nhật thông tin cách nhanh chóng tiện lợi LỜI CẢM ƠN Sau thời gian tìm hiểu đề tài “Lập trình Android ứng dụng trình duyệt Webview Android”, em hoàn thành tiến độ dự kiến Để đạt kết này, em nỗ lực thực đồng thời nhận nhiều giúp đỡ thầy cơ, bạn bè gia đình Em xin chân thành cảm ơn giáo viên hướng dẫn: cô Quách Thị Hạnh - Khoa công nghệ Điện tử - Thông tin – Viện đại học mở Hà Nội nhiệt tình hướng dẫn, giúp đỡ em thực đề tài Trong q trình thực đề tài khơng thể tránh khỏi sai sót định, mong nhận phê bình góp ý giáo để đề tài hồn thiện Em xin chân thành cảm ơn! NHẬN XÉT MỤC LỤC MỞ ĐẦU LỜI CÁM ƠN NHẬN XÉT DANH MỤC HÌNH VẼ KÝ HIỆU CÁC CỤM TỪ VIẾT TẮT CHƯƠNG 1: TỔNG QUAN VỀ ANDROID 1 Android gì? Lịch sử phát triển Android 1.1 Android gì? 1.2 Lịch sử phát triển Android Kiến trúc Android 2.1 Applications 2.2 Application framework 2.3 Library 2.4 Android Runtime 2.5 Linux Kernel Các thành phần Android Project 3.1 AndroidManifest.xml 3.2 File R.java Chu kỳ ứng dụng Android 4.1 Chu kỳ sống thành phần 4.2 Activity Stack 4.3 Trạng thái chu kỳ sống 4.4 Chu kỳ sống ứng dụng 4.5 Các kiện chu kỳ sống ứng dụng 4.6 Thời gian sống ứng dụng 10 4.7 Thời gian hiển thị Activity 10 4.8 Các phương thức chu kỳ sống 10 Các thành phần giao diện android 11 5.1 View 12 5.2 ViewGroup 12 5.2.1 LinearLayout 12 5.2.2 FrameLayout 12 5.2.3 AbsoluteLayout 12 5.2.4 RelativeLayout 12 5.2.5 TableLayout 13 5.3 Button 13 5.4 ImageView 14 5.5 TextView 14 Các thành phần chương trình Android 14 6.1 Activity Intent 14 6.1.1 Activity 14 6.1.2 Intent 15 6.2 Service 16 6.3 Telephony 19 6.4 SQLite 19 6.5 Webservice SOAP 20 6.6 Thao tác với web service Android 20 CHƯƠNG 2: WEBVIEW TRONG ANDROID 22 WebView gì? 22 Các đặc điểm WebView 22 Tại phải sử dụng WebView 22 Ví dụ WebView 22 Một số phương thức WebView 24 Thực tiễn cho WebView 29 Gỡ lỗi cho WebView 30 Hỗ trợ hình khác Webview 32 CHƯƠNG 3: DEMO ỨNG DỤNG 35 Thiết kế ứng dụng 35 Chạy ứng dụng, kết số chức WebView 38 Đánh giá ứng dụng 39 CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW 40 Button Back (Nút lùi) 40 1.1 Giới thiệu Button Back: 40 1.2 Xây dựng chức Button Back: 40 Button Next (Nút tiến) 45 2.1 Giới thiệu Button Next 45 2.2 Xây dựng chức Button Next: 45 Button Reload (Nút tải lại) 48 3.1 Giới thiệu Button Reload 48 3.2 Xây dựng chức Button Reload 48 Sử dụng JavaScript WebView 49 Kết luận 50 DANH MỤC HÌNH VẼ Hình 1 Cấu trúc stack hệ thống Android .2 Hình Chu kỳ sống thành phần ứng dụng Android Hình Activity Stack Hình Chu kỳ sống Activity Hình Các phương thức chu kỳ Activity 10 Hình Cấu trúc giao diện ứng dụng Android 11 Hình Truyền liệu hai Activity 16 Hình Các thuộc tính Intent .16 Hình Chu kỳ sống Service .18 Hình 10 SQLite Manager 20 Hình Giao diện Webview .22 Hình 2 Code giao diện 23 Hình Code ứng dụng 23 Hình Kết 24 Hình Class riêng .26 Hình Project TrinhDuyetWebView 35 Hình Nội dung AndroidManifest 35 Hình 3 Giao diện ứng dụng Webview .36 Hình Code giao diện 37 Hình Code ứng dụng 37 Hình Ứng dụng WebView 38 Hình Kết 39 Hình Giao diện Button Back 40 Hình Code giao diện Button Back 40 Hình Code chức Button Back 41 Hình 4 Trang đăng nhập 41 Hình Trang sau .42 Hình Thông báo “Trang trước” 43 Hình Thơng báo “Khơng có liệu trang trước để trở về” 44 Hình Giao diện Button Next 45 Hình Code giao diện Button Next 45 Hình 10 Code chức Button Next 46 Hình 11 Trang đăng nhập 46 Hình 12 Thơng báo “Trang sau” .47 Hình 13 Thơng báo “Khơng có liệu trang sau để tới” 48 Hình 14 Giao diện Button Reload .49 Hình 15 Code giao diện Button Reload .49 Hình 16 Code chức Button Reload 49 Hình 17 Code JavaScript Webview 49 ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 3: DEMO ỨNG DỤNG Hình Code giao diện Tiếp theo, xây dựng code trình duyệt, xây dựng code phần MainActivity.java Hình Code ứng dụng GVHD: QUÁCH THỊ HẠNH 37 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 3: DEMO ỨNG DỤNG Chạy ứng dụng, kết số chức WebView Chạy ứng dụng: Hình Ứng dụng WebView GVHD: QUÁCH THỊ HẠNH 38 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 3: DEMO ỨNG DỤNG Kết quả: Hình Kết Đánh giá ứng dụng Mục tiêu đạt được: - Thiết kế trình duyệt WebView - Trình duyệt truy cập vào Internet Những vấn đề chưa giải quyết: - Chưa có số chức như: nút tiến, nút lùi, nút load lại… - Chưa thể xem videos trực tiếp trình duyệt GVHD: QUÁCH THỊ HẠNH 39 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Trong chương này, em xin giới thiệu số chức ứng dụng WebView Button Back (Nút lùi) 1.1 Giới thiệu Button Back: Ban đầu bạn khởi động trình duyệt, nút Back bị mờ chức nút Back quay lại trang mà bạn vừa xem trước Như vậy, rõ ràng trang mà bạn vừa khởi động (có thể trang trắng, trang mặc định) trang mà bạn truy xuất tới, trước khơng có trang khác, nút Back tạm thời chưa có tác dụng Sau đó, bạn theo siêu liên kết để tới trang web khác, lúc nút Back bắt đầu có tác dụng sáng lên, bạn có th ể nhấn vào nút để quay lại trang vừa xem Ký hiệu: 1.2 Xây dựng chức Button Back: Xây dựng giao diện: Giao diện Button Back sau: Hình Giao diện Button Back Xây dựng code giao diện: Hình Code giao diện Button Back GVHD: QUÁCH THỊ HẠNH 40 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Xây dựng code chức năng: Hình Code chức Button Back Trường hợp Webview quay lại trang trước (canGoBack) Webview thực hành động đến trang trước (go Back) Lúc Webview có thơng báo: “Trang trước” Hình 4 Trang đăng nhập GVHD: QUÁCH THỊ HẠNH 41 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Hình Trang sau Khi sử dụng Button Back, Webview quay lại trang trước GVHD: QUÁCH THỊ HẠNH 42 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Hình Thơng báo “Trang trước” Webview thông báo “Trang trước” lên Trường hợp Webview khơng có liệu trang trước, bấm vào Button Back lên thơng báo: “Khơng có liệu trang trước để trở về” GVHD: QUÁCH THỊ HẠNH 43 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Hình Thơng báo “Khơng có liệu trang trước để trở về” GVHD: QUÁCH THỊ HẠNH 44 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Button Next (Nút tiến) 2.1 Giới thiệu Button Next Chức trạng thái biểu Button Next giống hệt Button Back, khác chức Button Next sau quay trở lại trang trước nút back, bạn muốn đường mà đi, bạn nhấn Button Next để tiếp tục Ký hiệu: 2.2 Xây dựng chức Button Next: Xây dựng giao diện: Giao diện Button Next sau: Hình Giao diện Button Next Xây dựng code giao diện: Hình Code giao diện Button Next Xây dựng code chức năng: GVHD: QUÁCH THỊ HẠNH 45 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Hình 10 Code chức Button Next Trường hợp Webview đến trang sau (canGoForward) Webview thực hành động đến trang sau (go Forward) Lúc Webview có thơng báo: “Trang sau” Hình 11 Trang đăng nhập Khi sử dụng Button Next, WebView đến trang sau GVHD: QUÁCH THỊ HẠNH 46 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Hình 12 Thơng báo “Trang sau” Trường hợp WebView khơng có liệu trang sau, bấm ButtonNext lên thông báo “Khơng có liệu trang sau để tới” GVHD: QUÁCH THỊ HẠNH 47 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Hình 13 Thơng báo “Khơng có liệu trang sau để tới” Button Reload (Nút tải lại) 3.1 Giới thiệu Button Reload Nút Reload có chức tải lại nội dung trang web mà bạn xem Cụm từ “làm tươi, làm mới” có nghĩa đơi trang web bạn xem có nội dung cũ nội dung chưa trọn vẹn trình duyệt chưa tải hết Muốn cho trình duyệt tải lại trang này, nhấn vào nút Reload Ký hiệu: 3.2 Xây dựng chức Button Reload Xây dựng giao diện Button Refesh: GVHD: QUÁCH THỊ HẠNH 48 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Hình 14 Giao diện Button Reload Code giao diện Button Reload: Hình 15 Code giao diện Button Reload Xây dựng code chức Button Reload: Hình 16 Code chức Button Reload Sử dụng JavaScript WebView Nếu trang web ta dự định tải WebView sử dụng JavaScript, ta phải kích hoạt JavaScript cho WebView Khi bật JavaScript, ta tạo giao diện mã ứng dụng mã JavaScript bạn Hình 17 Code JavaScript Webview JavaScript vơ hiệu hóa WebView theo mặc định Ta kích hoạt thơng qua WebSettings đính kèm WebView Ta lấy WebSettings với lệnh getSettings (), sau bật JavaScript với lệnh setJavaScriptEnabled () GVHD: QUÁCH THỊ HẠNH 49 SVTH: LÊ ANH QUÂN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CHƯƠNG 4: CHỨC NĂNG TRONG WEBVIEW Kết luận Sau thực xong ứng dụng trình duyệt WebView Android em nắm bắt qui trình làm dự án phần mềm hệ điều hành Android đồng thời tìm hiểu thêm nhiều kiến thức Android để phục vụ cho trình học tập cơng việc sau GVHD: QCH THỊ HẠNH 50 SVTH: LÊ ANH QUÂN DANH MỤC TÀI LIỆU THAM KHẢO Copyright © 2009 by Mark L Murphy Beginning Android Appress đ Copyright â 2009 by Sayed Y Hashimi and Satya Komatineni Pro Android Appress ® Copyright © 2009 by W FRANK ABLESON, CHARLIE COLLINS, ROBI SEN Unlocking Android ... đề tài ĐATN: Lập trình Android ứng dụng WebView Android 2/ Nội dung chính: 1/ Chương 1: Tổng quan Android 2/ Chương 2: WebView Android 3/ Chương 3: Demo ứng dụng 4/ Chương 4: Chức WebView 3/ Cơ... thiết, em chọn đề tài Lập trình Android ứng dụng trình duyệt Webview với mục đích nghiên cứu, tìm hiểu hệ điều hành Android xây dựng ứng dụng trình duyệt Webview để đáp ứng nhu cầu lướt web,... VỀ ANDROID Hình Chu kỳ sống Activity 4.4 Chu kỳ sống ứng dụng Trong ứng dụng Android có chứa nhiều thành phần thành phần có chu trình sống riêng Và ứng dụng gọi kết thúc tất thành phần ứng dụng