intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE

Lập trình PhoneGap

Chia sẻ: Nguyen Van Ta | Ngày: | Loại File: PDF | Số trang:90

81
lượt xem
6
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

(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.

Chủ đề:
Lưu

Nội dung Text: Lập trình PhoneGap

  1. 1 Trung Tâm Đào Tạo Tin Học Khoa Phạm | Lưu Hành Nội Bộ
  2. 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ộ
  3. 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ộ
  4. 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ộ
  5. 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ộ
  6. 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ộ
  7. 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ộ
  8. 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ộ
  9. 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ộ
  10. 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ộ
  11. 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ộ
  12. 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ộ
  13. 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ộ
  14. 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ộ
  15. 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ộ
  16. 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ộ
  17. 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ộ
  18. 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ộ
  19. 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ộ
  20. 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ộ
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2