trung tâm Đào tạo tin h c khoa phạm lưu hành nộ
TRANSCRIPT
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
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)
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
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
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ả.
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
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
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)
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.
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
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.
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.
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