Tài liệu Lab phonegap

1 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ LAB LẬP TRÌNH PHONEGAP Phần 1 – PhoneGap cơ bản Bài 0: Giới thiệu Lập trình PhoneGap (Phải xem đầu tiên) 03 Bài 1: Cài đặt PhoneGap Desktop 04 Bài 2: Nhúng jMobile vào ứng dụng 08 Bài 3: Chỉnh tỉ lệ Zoom khi chạy trên thiết bị thật 11 Bài 4: Tạo menu slide 2 cạnh màn hình 15 Bài 5: Lấy tham số truyền giữa các màn hình ứng dụng 18 Demo: Ứng dụng đăng kí khóa học online 22 Bài 6: Tạo banner chuyển ảnh với jQuery Slider Responsive 25 Bài 7: Play file nhạc .Mp3 từ URL Internet 27 Bài 8: Play file video .Mp4 từ URL Internet 28 Bài 9: Đăng kí và nhúng quảng cáo Admob vào ứng dụng 30 Bài 10: Kích hoạt camera và Photos của máy người dùng 40 Bài 11: Nhúng video Youtube vào ứng dụng 44 Phần 2 - Ứng dụng thực tế Ứng dụng 1: Thiết kế ứng dụng nghe nhạc Online 47 Ứng dụng 2: Thiết kế shop bán điện thoại Online 73 2 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ PHẦN 1 – LẬP TRÌNH PHONEGAP CƠ BẢN BẠN VUI LÒNG XEM QUA BÀI HƢỚNG DẪN SAU Link dự phòng: https://www.youtube.com/watch?v=DhfgxLmbiDA 3 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 1: Cài đặt PhoneGap Desktop Bƣớc 1: Tải Phonegap desktop Vào link: http://phonegap.com/blog/2015/03/02/phonegap-app-desktop-0-1-2/ để tải file cài đặt(chọn hệ điều hành bạn sử dụng Mac/Windows) 4 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 2: Cài đặt Phonegap. - Chạy file PhoneGapSetup.exe, click Next. Bƣớc 3: Click I accept the agreement -> click Next. 5 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 4: Để đường dẫn mặc định rồi click Next. Bƣớc 5: Click Next. 6 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 6: Click Install. Bƣớc 7: Click Finish để hoàn tất cài đặt. 7 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 2: Nhúng jMobile vào ứng dụng Bƣớc 1: Tải jquery mobile. Chọn Lastest stable để tải bản mới nhất của jquery mobile. Bƣớc 2: Tải jquery Vào http://jquery.com/download/ ở mục Download chọn link Download the compressed, production jQuery 1.11.3 8 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 3: Giải nén file jquey mobile vừa tải. Lƣu ý: 2 file jquery.mobile-1.4.5 có đuôi css và js. 2 file này sẽ được dùng trong project. Bƣớc 4: Thêm file vào jquery.mobile-1.4.5.css vào thƣ mục css. 9 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 5: Thêm 3 file jquery, jquery mobile và parse vào thƣ mục js của project. Bƣớc 6: Mở file index.html bằng phần mềm Dreamweaver(có thể mở bằng phần mềm khác) trong thư mục www của project. - Chèn file css và 3 file js như dòng 12 – 14. 10 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 3: Chỉnh tỉ lệ Zoom khi chạy trên thiết bị thật Bài này hướng dẫn cách chỉnh tỉ lệ zoom trên thiết bị di động tương tự trên máy tính(trình duyệt web) Bƣớc 1: Tạo project, click +, chọn Create new Phonegap project… Bƣớc 2: Điền thông tin project -> click Create project. 11 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 3: Mở file index.html trong thư mục www của project bằng DreamWeaver(có thể dùng phần mềm khác), thêm đoạn code trong khung màu đỏ. Bƣớc 4: Thêm 1 thẻ hình trong phần body, với thuộc tính width và height là %. 12 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 5: Chạy file index trên trình duyệt web để xem kết quả. 13 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 6: Kết quả khi chạy trên máy thật. 14 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 4: Tạo menu slide 2 cạnh màn hình Bài này hướng dẫn cách tạo menu slide ở 2 bên màn hình. Bƣớc 1: Thêm 2 file js vào project, nhúng vào file index.html 15 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 2: Viết code cho menu trái và phải. Kết quả: Màn hình có 2 nút chọn menu. 16 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Menu trái Menu phải 17 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 5: Lấy tham số truyền giữa các màn hình ứng dụng A. Truyền và lấy tham số đơn giản. Bài này hướng dẫn cách truyền và lấy tham số trên URL. 18 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 1: Code trong thẻ trang index.html Giải thích: - Dòng 20: Chặn ajax khi truyền tham số trên URL - Dòng 23: “getThamso.html?nd=" + s getThamso.html là trang thứ 2 cần nhận tham số s là giá trị của text cần truyền. nd= là biến để gán giá trị của s trên URL Bƣớc 2: Code thẻ trang index.html 19 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 3: Code thẻ trang getThamso.html để nhận giá trị cần truyền trên URL Giải thích: Dòng 20,21: lấy giá trị trên URL và gán cho label có id là ndung. Bƣớc 4: Code thẻ trang getThamso.html 20 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ