Lập trình PhoneGap

Lượt xem: 6,318Lượt tải: 10Số trang: 90

Mô tả tài liệu

(NB) Tài liệu "Lập trình phoneGap" cung cấp cho người đọc các kiến thức: PhoneGap cơ bản (Giới thiệu lập trình PhoneGap (Phải xem đầu tiên), cài đặt PhoneGap Desktop, chỉnh tỉ lệ Zoom khi chạy trên thiết bị thật, tạo menu slide 2 cạnh màn hình,...), ứng dụng thực tế. Mời các bạn cùng tham khảo.

Tóm tắt nội dung

1 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ 2 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 3 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 https://www.youtube.com/watch?v=DhfgxLmbiDA 4 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) http://phonegap.com/blog/2015/03/02/phonegap-app-desktop-0-1-2/ 5 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. 6 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. 7 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. 8 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 http://code.jquery.com/jquery-1.11.3.min.js http://code.jquery.com/jquery-1.11.3.min.js 9 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. 10 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. 11 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. 12 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à %. 13 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ả. 14 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. 15 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 16 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. 17 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 18 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. 19 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ẻ <head> 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ẻ <body> trang index.html 20 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 3: Code thẻ <head> 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ẻ <body> trang getThamso.html 21 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Kết quả: 22 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ B. ỨNG DỤNG ĐĂNG KÝ KHÓA HỌC CÓ TRUYỀN THAM SỐ TRÊN URL Bài này hướng dẫn cách làm ứng dụng đăng ký khóa học, sử dụng hàm javascript truyền nhiều tham số trên URL. 23 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 1: Code thẻ <head> trang index.html Giải thích: Dòng 18 – 28: code lấy giá trị nhập trên textbox và gán tham số lên URL khi click nút Gửi. Bƣớc 2: Code thẻ <body> trang index.html 24 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 3: Tạo trang thongtin.html và code thẻ <head> Giải thích: - Dòng 26 – 35: Hàm javascript lấy tham số trên URL. - Dòng 20 – 24: Hứng giá trị của tham số và gán giá trị tương ứng. Bƣớc 4: Code trong thẻ <body> trang thongtin.html 25 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 6: Tạo banner chuyển ảnh với jQuery Slider Responsive Để làm bài này, cần chuẩn bị một vài tấm hình để trình chiếu. Download file javascript slider tại: http://khoapham.vn/KhoaPhamTraining/phonegap/slider.zip Bƣớc 1: Thêm hình vào project và giải nén file slider.zip http://khoapham.vn/KhoaPhamTraining/phonegap/slider.zip 26 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 thẻ <head> trang index.html Bƣớc 3: Code thẻ <body> trang index.html 27 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 7: Play file nhạc .Mp3 từ URL Internet A. DEMO Bài này hướng dẫn cách play nhạc mp3 từ internet. Link mp3 demo: http://wepro.vn/khoapham.vn/ChuaBaoGio.mp3 Bƣớc 1: Viết code trong thẻ <head> trang index.html Bƣớc 2: Code nút Play nhạc trong thẻ <body> Hoàn thành, chạy file index.html để xem kết quả. http://wepro.vn/khoapham.vn/ChuaBaoGio.mp3 28 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 8: Play file video .Mp4 từ URL Internet Bài này hướng dẫn cách play video mp4 với HTML5. Link video demo: http://khoapham.vn/video/android/3-LapTrinhJava.mp4 Bƣớc 1: Code thẻ <head> trang index.html http://khoapham.vn/video/android/3-LapTrinhJava.mp4 29 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 2: Code thẻ <body> Chạy file index.html để xem kết quả. 30 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 9: Đăng kí và nhúng quảng cáo Admob vào ứng dụng 31 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ I. Tạo tài khoản admob Bƣớc 1: Vào https://www.google.com/admob/ đăng nhập bằng tài khoản google -> chọn Yes https://www.google.com/admob/ 32 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 2: Điền thông tin -> click Continue. 33 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 3: Chọn múi giờ và đơn vị tiền tệ. Bƣớc 4: Check vào ô điều khoản, qui định -> click Create Admob Account Bƣớc 5: Click Get Start 34 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 6: Sau khi click Get Start sẽ chuyển về trang chủ, click Hãy bắt đầu. 35 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 7: Chọn ứng dụng để quảng cáo - Click Thêm ứng dụng của bạn theo cách thủ công - Điền tên ứng dụng. - Chọn nền tảng. - Click Thêm ứng dụng. 36 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 8: Tùy chỉnh banner quảng cáo(nên giữ mặc định) - Chọn Biểu ngữ. - Điền tên đơn vị quảng cáo. - Click Lƣu. 37 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 9: Click Hoàn tất để tạo quảng cáo. Lƣu ý: ID đơn vị quảng cáo sẽ được dùng trong project. 38 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ II. Viết code project Bƣớc 1: Thêm đoạn code sau vào file config.xml 39 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 2: Sau thẻ </body> trang index.html, mở cặp thẻ <script></script> để viết code sau: 40 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 10: Kích hoạt camera và Photos của máy người dùng Ứng dụng này dùng đề kích hoạt camera trên thiết bị di động, chụp và xem hình ảnh trên máy. 41 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ 42 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 2: Code thẻ <body> 43 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Kết quả: Màn hình camera Màn hình sau khi chụp 44 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bài 11: Nhúng video Youtube vào ứng dụng A. DEMO Bƣớc 1: Code trong thẻ <head> 45 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 2: Code thẻ <body> Bƣớc 1: Code trong thẻ <head> Bƣớc 2: Code thẻ <body> 46 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ 47 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ HƢỚNG DẪN LÀM ỨNG DỤNG NGHE NHẠC TRÊN PHONEGAP - Ứng dụng này có 3 màn hình. Danh sách ca sĩ, danh sách bài hát và phát nhạc. - Dữ liệu của ứng dụng sử dụng web service của Parse.com - Nguồn bài hát lấy từ trang mp3.zing.vn 48 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Phần 1: Cài đặt Phonegap 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) http://phonegap.com/blog/2015/03/02/phonegap-app-desktop-0-1-2/ 49 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. 50 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. 51 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 6: Click Install. 52 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 7: Click Finish để hoàn tất cài đặt. Phần 2: Tải các file js và css 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 53 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Vào http://jquery.com/download/ ở mục Download chọn link Download the compressed, production jQuery 1.11.3 Bƣớc 3: Giải nén file jquey mobile vừa tải. http://code.jquery.com/jquery-1.11.3.min.js http://code.jquery.com/jquery-1.11.3.min.js 54 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Chú ý 2 file jquery.mobile-1.4.5 có đuôi css và js. 2 file này sẽ được dùng trong project. 55 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Phần 3: Tạo project Bƣớc 1: Chạy Phonegap Ở lần đầu chạy Phonegap yêu cầu update phiên bản, có thể chọn Cancel/Update. Do phiên bản vừa tải là mới nhất nên chọn Cancel. 56 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 2: Tạo project mới. - Click biểu tượng dấu + ở phía để tiến hành tạo project mới. - Chọn Create new PhoneGap project... Bƣớc 3: Điền thông tin project. - Local path: click Choose để chọn vị trí lưu project. - Name: Gõ tên của project. - ID: ví dụ là com.khoapham.demo0909. Chỗ com giữ nguyên Chữ màu đỏ: thay bằng tên cá nhân. Chữ màu xanh: tên của app, mỗi app đặt tên khác nhau để khi submit lên store không bị trùng. - Click Create project để hoàn thành. 57 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ 58 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Phần 4: Tạo dữ liệu trên pasre.com Bƣớc 1: Đăng ký tài khoản trên pare.com - Truy cập https://www.parse.com/, chọn Sign up fo free để tiến hành đăng ký tài khoản. - Đăng ký như hình, riêng phần Nghe nhac online là tên ứng dụng trên Parse.com Bƣớc 2: Quản lý database - Sau khi đăng ký thành công, Parse sẽ tự login tài khoản, để vào danh sách database click - Chọn vào database vừa mới tạo Nghe nhac online click Core ở phía dưới. 59 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 3: Tạo class - Click Add class để tạo class mới. - Gõ BaiHat, click Create Class. - Tương tự tạo class CaSi. 60 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 4: Thêm dữ liệu cho class CaSi - Chọn class CaSi rồi click + Col để thêm thuộc tính. - Class CaSi có 3 thuộc tính: IdCS, TenCS và Hinh( riêng Hinh có kiểu dữ liệu là File) 61 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ - Click + Row để thêm dòng dữ liệu. - Click vào ô dữ liệu tương ứng để nhập. Bƣớc 5: Thêm dữ liệu cho class BaiHat - Tương tự class CaSi, class BaiHat có các thuộc tính sau: IdCS, TenBH, LinkBH, Hinh, LoiBH. - Thuộc tính LinkBH, sẽ lấy link file mp3 từ trang mp3.zing.vn Cách lấy link: http://khoapham.vn/KhoaPhamTraining/mp3/zing.php?baihat=http://mp3.zing.vn/bai-hat/Say- You-Do-Tien-Tien/ZW70EIUE.html - Vào mp3.zing.vn tìm bài hát cần lấy link. - Copy link đó thay vào phần màu đỏ của link trên. Ví dụ ở đây là bài hát Say-You-Do - Dán vào trình duyệt để truy cập link sẽ có kết quả như sau: 62 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ http://m.mp3.zing.vn/xml/song- load/MjAxNSUyRjA0JTJGMjUlMkYxJTJGNiUyRjE2N2ZjNWQ2MjcxNjZlNzU1ZTc0NWU5Z jU5NDFmNDBlLm1wMyU3QzEz - Copy link này vào thuộc tính LinkBH Bƣớc 6: Lấy key của database - Click vào quickstart guide http://m.mp3.zing.vn/xml/song-load/MjAxNSUyRjA0JTJGMjUlMkYxJTJGNiUyRjE2N2ZjNWQ2MjcxNjZlNzU1ZTc0NWU5ZjU5NDFmNDBlLm1wMyU3QzEz http://m.mp3.zing.vn/xml/song-load/MjAxNSUyRjA0JTJGMjUlMkYxJTJGNiUyRjE2N2ZjNWQ2MjcxNjZlNzU1ZTc0NWU5ZjU5NDFmNDBlLm1wMyU3QzEz http://m.mp3.zing.vn/xml/song-load/MjAxNSUyRjA0JTJGMjUlMkYxJTJGNiUyRjE2N2ZjNWQ2MjcxNjZlNzU1ZTc0NWU5ZjU5NDFmNDBlLm1wMyU3QzEz https://www.parse.com/apps/quickstart?app_id=nghe-nhac-online 63 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ - Chọn mục Data - Chọn mục Web - Chọn Existing project 64 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ - Copy link www.parsecdn.com/js/parse-1.6.0.min.js dán vào trình duyệt web. - Save lại được file parse-1.6.0.min.js - Copy dòng Parse.initialize("uKnqDHq6mrdxmcW4nMz70sX8bfKKWvjRf6LIECch", "h0xF4hqoy2MdirDCUw1CZMeMXCjYASRX9nmnF0am"); đây là KEY của database. Lƣu ý: 2 key màu đỏ và màu vàng sẽ khác nhau với mỗi app khác nhau. http://www.parsecdn.com/js/parse-1.6.0.min.js 65 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Phần 5: Viết code ứng dụng Trước khi viết code cần thêm các file js và css vào trong project. Bƣớc 1: Thêm file vào jquery.mobile-1.4.5.css vào thƣ mục css. Bƣớc 2: Thêm 3 file jquery, jquery mobile và parse vào thƣ mục js của project. Bƣớc 3: 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 – 15. 66 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bước 4: Xóa code không dùng trong <body></body> Bƣớc 5: Viết code trong the body trang index.html - Giải thích: Dòng 40 – 44 là listview để hiển thị danh sách ca sĩ. 67 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 6: Viết code jquery lấy dữ liệu từ parse.com - Trong thẻ <head></head>, mở cặp thẻ <script></script>. Giải thích: - Dòng 20: key của parse. - Dòng 21: chặn ajax (sử dụng khi lấy biến truyền qua url). - Dòng 22 – 37: lấy dữ liệu từ Parse. - var Singer = Parse.Object.extend("CaSi"); CaSi là tên class cần lấy dữ liệu. - Code hiển thị ra listview: $("#dsCS").append("<li text-align='left'><a class='ui-btn ui-btn-icon-right ui-icon-carat-r' href='danhsach.html?id="+maCS+"'><img src='"+ hinhCS +"' width='60px' height='60px'/> "+ tenCS + "</a></li>"); - danhsach.html là trang hiển thị danh sách bài hát của ca sĩ được chọn. - ?id="+maCS+" trong đó id là biến cần truyền đi, maCS là giá trị được gán. Bƣớc 7: Tạo trang danhsach.html - Tạo trang danhsach.html trong thư mục www để hiển thị danh sách bài hát. - Để nhanh hơn khi code, copy hết nội dung trang index.html vào danhsach.html 68 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 8: Code nội dung thẻ body trang danhsach.html Giải thích: - Dòng 54 tạo button Back quay về trang index.html - Sửa id=”dsBH” ở dòng 55 Bƣớc 9: Viết hàm lấy giá trị của id của IdCS truyền từ trang index.html 69 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 10: Viết code lấy danh sách bài hát Giải thích: - Dòng 17: gọi hàm lấy giá trị của IdCS, ids là biến gán giá trị. - Dòng 20: BaiHat là tên class cần lấy dữ liệu. - Dòng 22: query.equalTo("IdCS", ids); truy vấn IdCS bằng giá trị vừa lấy được từ trang index.html - Code lấy các giá trị của bài hát tương tự trang index.html - Dòng 30: href='play.html?id="+idBH+"' gán id bằng giá trị idBH được chọn. - Dòng 37 – 39: hàm bắt sự hiện click khi nhấn button Back. Bƣớc 11: Tạo trang play.html để phát nhạc. - Tạo trang play.html trong thư mục www để hiển thị bài hát đã chọn. - Copy hết nội dung trang danhsach.html vào play.html 70 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 12: Viết code thẻ body trang play.html Giải thích: - Dòng 71: chèn thẻ img để hiển thị hình ca sĩ. - Dòng 72: hiển thị tên bài hát. - Dòng 73: chèn nút Play để phát nhạc. - Dòng 74: chèn thẻ audio để nhận giá trị link mp3, thuộc tính src=”” bỏ trống để nhận giá trị lấy về. - Dòng 76 – 78: chèn thẻ textarea để hiển thị lời bài hát. 71 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 13: Viết code lấy giá trị của bài hát. Giải thích: Dòng 18 và 22 lấy giá trị id bài hát được chọn ở trang danhsach.html rồi gán vào câu truy vấn. Bƣớc 14: Code nút play nhạc. Giải thích: - Dòng 42 – 44: sự kiện click nút play để phát nhạc. - Dòng 48 – 50: Viết css nút play. 72 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Sau khi hoàn thành sẽ có kết quả sau: 73 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ HƢỚNG DẪN LÀM ỨNG DỤNG SHOP ONLINE TRÊN PHONEGAP - Ứng dụng này có 4 màn hình: danh sách hãng điện thoại, danh sách điện thoại, chi tiết điện thoại và thông tin đặt hàng. - Dữ liệu của ứng dụng sử dụng web service của Parse.com - Thông tin đặt hàng sẽ được lưu lên web service. - Hình ảnh có thể download tại đây: https://www.dropbox.com/s/gx2eo7kf1t5fwnr/DienThoai.zip?dl=0 74 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Phần 1: Tạo dữ liệu trên pasre.com Bƣớc 1: Tạo thêm ứng dụng mới trên Parse. Bƣớc 2: Tạo class chứa thông tin hãng điện thoại. - Click Add class để tạo class mới. - Gõ Company, click Create Class. - Class Company có 2 thuộc tính IdCom( mã hãng điện thoại), NameCom(tên hãng điện thoại). - Click + Row để thêm dữ liệu cho class Company. 75 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 3: Tạo class chứa thông tin của điện thoại. - Click Add class để tạo class mới. - Gõ Phone, click Create Class. - Class Phone có 5 thuộc tính: IdCom(mã hãng điện thoại), Name(tên), Price(giá), Detail(thông tin chi tiết). - Click + Row để thêm dữ liệu. 76 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 4: Tạo class chứa thông tin đặt hàng của khách hàng. - Click Add class để tạo class mới. - Gõ Company, click Create Class. - Class này có 5 thuộc tính: NameCustomer(Tên khách hàng), PhoneNumber(Số điện thoại), Address(Địa chỉ), Email, IdPhone(ID của điện thoại đặt hàng). - Để trống dữ liệu class này. Thông tin đặt hàng sẽ được lưu ở class này. 77 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 5: Lấy key của database - Click vào Quickstart. - Chọn mục Data 78 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ - Chọn mục Web - Chọn Existing project 79 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ - Copy link www.parsecdn.com/js/parse-1.6.0.min.js dán vào trình duyệt web. - Save lại được file parse-1.6.0.min.js - Copy dòng Parse.initialize("sj1pYBqYP1Y5hvXajub2x1XmpqcXsl0O0guaDDGp", " kZXQs9Nib3m8d7XggVptO9ieLyWrz24GCQGiGgeN"); đây là KEY của database. Lƣu ý: 2 key màu đỏ và màu vàng sẽ khác nhau với mỗi app khác nhau. http://www.parsecdn.com/js/parse-1.6.0.min.js 80 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Phần 2: Viết code ứng dụng Bƣớc 1: 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 – 15. Bƣớc 2: Xóa code không dùng trong <body></body> Bƣớc 3: Viết code trong the body trang index.html - Giải thích: Dòng 42 – 44 là listview để hiển thị danh sách hãng điện thoại. 81 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 4: Viết code jquery lấy dữ liệu từ parse.com - Trong thẻ <head></head>, mở cặp thẻ <script></script>. Giải thích: - Dòng 17: key của parse. - Dòng 18: chặn ajax (sử dụng khi lấy biến truyền qua url). - Dòng 19 – 33: lấy dữ liệu từ Parse. - var mobile = Parse.Object.extend("Company"); Company là tên class cần lấy dữ liệu. - Code hiển thị ra listview: $("#dsCom").append("<li text-align='left'><a class='ui-btn ui-btn-icon-right ui-icon-carat- r' href='dienthoai.html?id="+ma+"'> " + ten + "</a></li>"); - dienthoai.html là trang hiển thị danh sách điện thoại của hãng được chọn. - ?id="+ma+" trong đó id là biến cần truyền đi, ma là giá trị được gán. 82 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 5: Tạo trang dienthoai.html - Tạo trang dienthoai.html trong thư mục www để hiển thị danh sách bài hát. - Để nhanh hơn khi code, copy hết nội dung trang index.html vào dienthoai.html Bƣớc 6: Code nội dung thẻ body trang dienthoai.html Giải thích: - Dòng 59 tạo button Back quay về trang index.html - Sửa id=”dsDT” ở dòng 60. Bƣớc 7: Viết hàm lấy giá trị của id của IdCom truyền từ trang index.html 83 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 8: Viết code lấy danh sách điện thoại Giải thích: - Dòng 17: gọi hàm lấy giá trị của IdCom, madt là biến gán giá trị. - Dòng 20: Phone là tên class cần lấy dữ liệu. - Dòng 22: query.equalTo("IdCom", madt); truy vấn IdCom bằng giá trị vừa lấy được từ trang index.html - Code lấy các giá trị của bài hát tương tự trang index.html - Dòng 31: href='chitiet.html?id="+idDT+"' gán id bằng giá trị idDT được chọn. 84 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 9: Viết code cho nút Back Bƣớc 10: Tạo trang chitiet.html để hiển thị thông tin chi tiết của điện thoại. Bƣớc 11: Code trong thẻ body Giải thích: - Dòng 66 – 75: Code hiển thị thông tin của điện thoại. 85 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 12: Viết hàm lấy giá trị của id của IdDT truyền từ trang dienthoai.html Bƣớc 13: Code lấy thông tin chi tiết của điện thoại. Giải thích: 86 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ - Dòng 30: $("#order").attr("href","dathang.html?id=" + idDT); truyền biến idDT qua url. Bƣớc 14: Code nut Back Bƣớc 15: Tạo trang dathang.html để nhập thông tin khách hàng Bƣớc 16: Code thẻ body dathang.html 87 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 17: Viết hàm lấy giá trị của id của IdDT truyền từ trang chitet.html 88 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Bƣớc 18: Code lƣu thông tin khách hàng lên web service parse.com Giải thích: - Dòng 18: lấy giá trị ID của điện thoại đã chọn. - Dòng 21 – 24: lấy thông tin khách hàng. - Dòng 25 – 40: save thông tin khách hàng và mã điện thoại lên web service. 89 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ Sau khi hoàn thành sẽ có kết quả sau: 90 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ CHÚC MỪNG CÁC BẠN ĐÃ HOÀN TẤT PHẦN CƠ BẢN LẬP TRÌNH PHONEGAP NẾU BẠN QUAN TÂM VÀ MUỐN TÌM HIỂU THÊM, VUI LÒNG XEM CHI TIẾT TẠI WEBSITE HTTP://KHOAPHAM.VN TRÂN TRỌNG CẢM ƠN http://khoapham.vn/