Việc tạo lập môi trường hỗ trợ lập trinh ứng dụng trong Phonegap hết sức đơn giản và dễ dàng. Nhà phát triển có thể tạo lập dự án liên quan đến Phonegap trên bất cứ nền tảng hệ điều hành nào mà họ sử dụng như Windows, Mac OS, Linux,… hay hơn thế, việc phát triển Phonegap để tạo ra ứng dụng dành riêng cho 1 nền tảng di động nào đó, đều được hướng dẫn một cách rõ ràng từ chính nhóm tác giả tạo ra Phonegap, đề tìm hiểu chi tiết thêm có thể truy cập vào trang sau:
http://docs.phonegap.com/en/2.1.0/guide_getting-started_index.md.html
Tuy nhiên cũng vì khuôn khổ của khóa luận nên tôi chỉ trình bày cách tạo lập môi trường lập trình phát triển với Phonegap cho Android, và trong môi trường hệ điều hành máy tính phổ biến nhất là Windows.
2.2.6.2. Cách thiết lập cài đặt Phonegap cho Android Project bằng Eclipse
2.2.6.2.1. Yêu cầu cài đặt
Eclipse: Tải về và cài đặt Eclipse IDE tại đường dẫn: http://www.eclipse.org/downloads/
Android SDK và Android ADT Plugin cho eclipse: Tải bản Android SDK và Android ADT Plugin mới nhất, và cài đặt, thiết lập cho phù hợp với môi trường làm việc tại đường dẫn sau:
http://developer.android.com/sdk/index.html
Phonegap Framework: Tải bản phonegap mới nhất tại đường dẫn sau: http://phonegap.com/install/
2.2.6.2.2. Tạo project mới sử dụng Phonegap trong Eclipse IDE
Hình 4: Cách tạo 1 Android Project trong Eclipse IDE
• Nhập vào tên Project, SDK version cho project vào các thông tin liên quan, có thể dùng mẫu bên dưới:
Lưu ý: phần version cho SDK, có thể chọn tùy ý nhưng phải xác định Android SDK version nào mà muốn viết app, để tránh chỉnh sửa về sau. Chuẩn nhất là 2.2 và 2.3. Với những dòng máy màn hình lớn (tablet) có thể dùng 4.0+
Hình 5: Cách thiết lập các thông số để tạo 1 Android Project
• Trong file Phonegap đã download về, tiền hành giải nén và tìm đến thư mục lib, chọn thư mục Android.
Trong bài hướng dẫn sử dụn Phonegap Cordova 1.5.0, nên sẽ sử dụng 2 files: cordova- 1.5.0.js và cordova-1.5.0.jar. (hiện tại version mới nhất của Phonegap là bản 2.9.1 thì chỉ cần sử dụng 2 files tương ứng).
• Tìm vào thư mục Project vừa tạo, sẽ thấy các thư mục gồm: assets, bin, gen, res, src,… sau đó tạo thêm 2 folder là libs và assets/www.
• Sao chép nhưng file đã download vào các thư mục như sau: (thay thế cordova- 1.x.x thành version tương ứng, như cordova-1.5.0)
Sao chép cordova-1.x.x.jar vào /libs
Tiếp theo add cordova-1.x.x.jar đến class path bằng cách click chuột phải Build Path > Add to Build Path.
Sao chép cả thư mục xml vào /res
• Quay trở lại cửa sổ làm việc của Eclipse, chọn Pakage Explorer (cửa sổ làm việc bên trái) và bấm F5 (refresh) để cập nhật file mới.
Lưu ý: nếu thao tác thêm file hay xóa file bên ngoài cửa sổ làm việc của Eclipse thì khi quay trở lại phải bấm F5, nếu không nó sẽ không cập nhật.
• Trong cửa sổ Package Explorer, chọn
Src/com.phonegap.demo/DemoActivity.java (hoặc tên project đã tạo, để liên kết đến file java chính):
Hình 6: Cách truy cập tới file java chính.
Chỉnh sửa lại nội dung của file java này như sau:
Sửa extend của class từ Activity thành DroidGap và thay thế setContentView() thành super.loadUrl(file:///android_asset/www/indext.html);
Thêm thư viện bằng cách: import org.apache.cordova.*; Xóa bỏ import android.app.Activity;
Hình 7: Cách chỉnh sửa bên trong file java chính
Bấm chuột phải vào AndroidManifest.xml và chọn Open With > Text Editor và thêm vào:
Và cuối cùng ta có file AndroidManifest.xml:
Hình 8: Cấu trúc bên trong file AndroidManifest.xml
2.2.6.2.3. Tạo project mẫu HelloWorld.
- Trong thư mục /assets/www, tạo file index.html. Sau đó sao chép nội dung sau đây vào source, chắn chắn rằng đã nhúng cordova-1.x.x vào project vào file html. Nếu không chương trình sẽ không chạy. Thay thế 1.x.x thành version đang sử dụng.
Hình 9: Cách nhúng file .js vào file index.html
2.2.6.2.4. Chạy chương trình trên nền Android Emulator
- Nên refresh (F5) trước khi run để Eclipse update được những thông tin mới. - Bấm chuột phải vào tên project và chọn Run As > Android Application
Hình 10: Hình chạy chương trình trên nền Android Emulator.
Để chương trình có thể chạy tăng tốc trên máy ảo, chúng ta có thể cài đặt máy ảo Genymotion – eclipse plugin. Và chương trình phần mềm ứng dụng của ta có thể chạy trên nhiều loại máy ảo khác nhau, và tốc độ chạy được cải thiện rõ rệt. Tìm hiểu thêm về cách cài đặt Genymotion cho eclipse tại page: https://cloud.genymotion.com/page/doc/ Như vậy tôi đã giới thiệu tổng quan về Phonegap, và các công nghệ liên quan đến nó. Sau đây sẽ là phần xây dựng ứng dụng phần mềm sử dụng Phonegap.
Chương 3