Download PhoneGap Beta 1.0.9 – Nền tảng phát triển ứng dụng mobile

Phonegap là nền tảng nguồn mở dùng công nghệ web quen như HTML, CSS hay JavaScript để phát triển ứng dụng điện thoại, nhằm tạo ra ứng dụng theo chuẩn web APIs.

Khi thị trường công cụ đa nền tảng (CPT) sôi động, dễ hiểu khi phân mảnh di động ngày phổ biến. PhoneGap thuộc top 5 công cụ phát triển ứng dụng tốt nhất 2013 theo Developer Economics, chiếm 34% so với công cụ khác.

Điều gì giúp PhoneGap nổi bật?

Trong phát triển phần mềm, PhoneGap giúp xây dựng ứng dụng điện thoại cho thiết bị di động bằng cách dùng công nghệ web như JavaScript, HTML5 và CSS3 thay vì phụ thuộc vào nền tảng APIs như iOS, Windows Phone hay Android. Nó bao gói mã HTML, CSS và JavaScript dựa trên nền tảng thiết bị, mở rộng HTML và JavaScript để hoạt động trên di động. Kết quả là ứng dụng lai ( hybrid ) không hoàn toàn gốc (giao diện qua web thay vì UI nền tảng), nhưng cũng không hoàn toàn web (vì được gói thành ứng dụng có thể truy cập).

PhoneGap hỗ trợ nhiều hệ điều hành phổ biến

Ứng dụng mobile web chạy trong trình duyệt điện thoại, bị giới hạn truy cập tính năng thiết bị, trong khi ứng dụng bản địa ( Native) phát triển cho nền tảng cụ thể, phát hành qua kho ứng dụng và xây dựng trên công nghệ riêng. Ứng dụng lai kết hợp hai kiểu trên, nghĩa là phần cơ bản dùng công nghệ web, nhưng đặt trong Native Container nên có thể đưa lên kho tải về.

PhoneGap giúp xây dựng ứng dụng điện thoại với công nghệ web tiêu chuẩn, chỉ cần biết HTML, CSS và JavaScript, cho phép đóng gói mã nguồn, ứng dụng có thể truy cập Native APIs và xuất ứng dụng trên nhiều nền tảng khác nhau. Tính năng kết hợp mã snippet bản địa và mã snippet lai có từ phiên bản 1.9.

Cốt lõi ứng dụng PhoneGap dùng HTML5 và CSS3 để kết xuất và JavaScript cho tính toán logic. HTML biểu diễn giao diện, CSS tạo hiệu ứng và tăng trải nghiệm. JavaScript truy cập tính năng thiết bị và xử lý tính toán. HTML5 cho phép truy cập phần cứng như camera, GPS, nhưng trình duyệt hỗ trợ không đồng bộ trên thiết bị, đặc biệt trên Android cũ. Để khắc phục, PhoneGap nhúng mã HTML5 vào Native Webview trên thiết bị, sử dụng ngoại lai để can thiệp truy cập tài nguyên thiết bị.

Sơ đồ làm việc ứng dụng lai PhoneGap

PhoneGap cho phép mở rộng với plugin bản địa, cho phép phát triển thêm tính năng và giao tiếp trực tiếp giữa lớp bản địa và HTML5. PhoneGap bao gồm các plugin cơ bản truy cập camera, microphone, hệ thống file, cảm biến gia tốc …

Là một nền tảng mã nguồn mở viết ứng dụng sử dụng HTLM, CSS và JavaScript, PhoneGap phổ biến và được tin dùng nhờ tính năng mang lại. Các ứng dụng của trang tin lớn như Vnexpress và Dantri dùng ứng dụng lai như vậy. Dưới đây là ưu và nhược điểm của PhoneGap.

Ưu và nhược điểm của PhoneGap

Ưu điểm

• Sử dụng nền tảng hay ngôn ngữ nào thì HTML, CSS và JavaScript quen thuộc với tất cả. PhoneGap cho phép phát triển nâng cao kỹ năng với kiến thức căn bản về HTML, CSS và JavaScript .
• PhoneGap cài đặt như ứng dụng gốc nên ứng dụng viết bằng Phonegap hoạt động như ứng dụng chính thống.
• PhoneGap dùng cấu trúc plugin , cho phép truy cập mở rộng APIs theo hàm modun. Có nhiều plugin để chọn, cho phép tập trung vào kỹ năng web.
• Viết một lần, chạy trên mọi thiết bị (“Write one, run any where”).
• PhoneGap là mã nguồn mở , miễn phí, không cần chi phí bản quyền.
• Hiển thị nội dung trên tất cả thiết bị di động.
• Tận dụng tối đa tính năng của thiết bị di động như GPS, camera, cảm biến gia tốc…

Nhược điểm

• Thứ gì miễn phí không thể đảm bảo thành công hoàn toàn. PhoneGap Build và Icenium cho thấy barebones PhoneGap không hoàn thiện. Khi mở rộng ứng dụng với plugin, có thể lỗi thời hoặc không hỗ trợ nền tảng mong muốn.
• Hiệu quả PhoneGap bị chỉ trích vì UI gốc tốt hơn giải pháp lai ( hybrid ). Cải thiện phần cứng và Webview giúp giảm khoảng cách này. Nhà phát triển cần chú trọng hiệu quả hoạt động và kiến thức về công cụ phân tích cũng như UI thân thiện là cần thiết.
• Cấu trúc plugin ổn nếu tìm được plugin phù hợp hoặc nhà phát triển tùy chỉnh theo yêu cầu. Nhưng khi chọn PhoneGap để tránh đi sâu kỹ năng nền tảng, điều này có chút mâu thuẫn.
• Dùng công nghệ web khiến ứng dụng PhoneGap chạy chậm hơn so với ứng dụng bản địa. Adobe Systems cảnh báo ứng dụng PhoneGap có thể bị Apple từ chối do quá chậm hoặc không đủ ” bản địa “.

PhoneGap tiết kiệm thời gian, giúp nhanh chóng tạo sản phẩm đa nền. Viết ứng dụng mà muốn bán được nhiều, khả năng chạy trên nhiều nền tảng hỗ trợ đắc lực . PhoneGap giúp bạn đạt mục tiêu đó.

Cài đặt PhoneGap trên Windows

Dưới đây là hướng dẫn cài đặt và sử dụng PhoneGap với 4 bước đơn giản.

Bước 1: Cài đặt PhoneGap Desktop

Click đúp file để chạy cài đặt, PhoneGap Desktop Setup Wizard sẽ hiện ra.

Cửa sổ Wizard hiện sau khi chọn chạy

Click chọn chấp nhận I accept the agreement.

Chọn I accept the agreement để tiếp tục cài đặt

Chọn Next rồi chọn vị trí lưu.

Chọn nơi lưu PhoneGap trên máy tính

Sau khi click Next, chọn nơi đặt Shortcut và Next.

Chọn vị trí lưu Shortcut cho PhoneGap

Bước cuối cùng nhấp Install để chương trình tự cài đặt và khi hoàn tất nhấp chọn Finish .

Nhấp Finish để hoàn tất cài đặt

Sau đó, hãy mở ứng dụng và chuyển sang bước kế tiếp, cài đặt PhoneGap Developer App lên thiết bị di động để xem trước ứng dụng đã xây dựng.

Giao diện PhoneGap sau khi mở trên máy tính

Bước 2: Cài đặt PhoneGap Developer App trên điện thoại

PhoneGap Developer App là ứng dụng di động cho phép bạn xem trước và kiểm tra ứng dụng mà không cần cài đặt nền tảng phụ trợ SDK. Đơn giản hóa quá trình tạo và kiểm tra ứng dụng PhoneGap. Trước tiên, chọn ứng dụng PhoneGap Developer từ iTunes, Google Play hoặc Windows Phone Store và cài đặt vào điện thoại. Khi đã cài đặt, mở ứng dụng và chuyển sang bước tạo ứng dụng với PhoneGap.

Giao diện PhoneGap trên điện thoại sau khi cài đặt

Bước 3: Tạo ứng dụng

Khi đã cài đặt PhoneGap Desktop trên máy tính và ứng dụng PhoneGap Developer trên điện thoại, bạn đã sẵn sàng tạo PhoneGap project với khả năng chạy trên nhiều thiết bị và hệ điều hành khác nhau chỉ trong vài phút.
PhoneGap Desktop có một Project mặc định mang tên Hello World project cho người mới bắt đầu. Đây là cách nhanh và đơn giản nhất để hiểu xây dựng ứng dụng PhoneGap trên điện thoại. Bắt đầu bằng việc chọn Create new PhoneGap project.

Chọn Create new project bằng cách click vào biểu tượng dấu cộng góc trên cùng bên trái

Màn hình sẽ hiện ra để bạn nhập thông tin. Chọn đường dẫn là ổ cứng để chứa ứng dụng, chọn tên và ID. Sau khi điền đầy đủ thông tin click chọn ô màu xanh Create project. Chú ý là ID là package identifier với Android, còn với iOS là bundle indentifier .

Thêm thông tin trước khi nhấp chọn Create project

Sau đó ứng dụng của bạn sẽ hiện ra như hình dưới đây, được đánh dấu là thanh màu xanh lá cây bên trái, một biểu tượng chạy màu xanh lá cây bên phải và phía dưới cùng là thanh màu xanh lá khác. Lưu ý địa chỉ server chỉ đến ứng dụng đang chạy. Có thể ghi chú lại hoặc đừng tắt nó đi.

Chương trình đang chạy trên PhoneGap

Bước 4: Chạy ứng dụng

PhoneGap cho phép xem trước ứng dụng trên thiết bị mà không cần cài nền tảng SDKs hoặc mã trình biên dịch ( compiling code ). Web server của PhoneGap Desktop lưu trữ ứng dụng và quay trở lại địa chỉ server để bạn nhập vào ứng dụng PhoneGap Developer đã cài trên điện thoại. Các thao tác đó tự động nhưng có thể làm thủ công bằng cách click biểu tượng xanh lá cây hình tròn bên phải ứng dụng.

Trước khi xem trên thiết bị, kiểm tra đảm bảo máy tính và di động cùng mạng.
Vào ứng dụng PhoneGap Developer trên điện thoại, nhập địa chỉ server và chọn Connect .

Nhập địa chỉ server vào PhoneGap Developer trên điện thoại và click chọn Connect

Quá trình kết nối hoàn tất nếu bạn nhận được thông báo Success . Nếu không, hãy kiểm tra lại và đảm bảo kết nối trên cùng một mạng. Một khi PhoneGap Developer đã kết nối, quá trình tải sẽ bắt đầu và ứng dụng hiện ra. Trong lúc xem ứng dụng, có thể dùng thao tác chạm 3 ngón để quay lại màn hình chính, chạm 4 ngón để refresh.

Tin thông báo thành công

Bây giờ thử sử dụng một số mã để tạo thay đổi. Mở file index.html trong tệp www trong ứng dụng của bạn. Ví dụ ~appSample/www/index.html

Sau đó chọn cách thay đổi, ví dụ thay đổi đoạn văn bản PHONEGAP thành <h1>Hello PhoneGap</h1> (Sử dụng CSS viết hoa mặc định). Khi hoàn tất lưu lại và chuyển bước tiếp theo.

Sửa mã để thay đổi dòng chữ xuất hiện trong PhoneGap

Kiểm tra ứng dụng PhoneGap Developer đang chạy trên điện thoại và bạn sẽ thấy ứng dụng tự động tải lại và hiển thị đoạn văn bản mới HELLO PHONEGAP thay vì PHONEGAP.

HELLO PHONEGAP thay cho PHONEGAP sau khi sửa mã CSS

Video sau sẽ cung cấp cái nhìn trực quan về các bước cài đặt và sử dụng PhoneGap.

Nguyễn Thúy