PhoneGap là một framework mã nguồn mở, tận dụng các công nghệ web quen thuộc như HTML, CSS và JavaScript để xây dựng và triển khai ứng dụng trên các thiết bị di động. Nền tảng này cho phép tạo ra các ứng dụng tuân thủ theo chuẩn web APIs.
Trong bối cảnh thị trường công cụ đa nền tảng (CPT) ngày càng phát triển, sự gia tăng của các phân mảnh di động (các phiên bản hệ điều hành khác nhau) là điều dễ hiểu. Theo nghiên cứu của Developer Economics năm 2013, PhoneGap được xếp hạng trong top 5 công cụ phát triển ứng dụng điện thoại tốt nhất, chiếm thị phần lớn nhất với 34% so với các giải pháp khác.
Trong lĩnh vực phát triển phần mềm, PhoneGap đóng vai trò là bộ khung, hỗ trợ xây dựng các ứng dụng điện thoại cho thiết bị di động bằng cách sử dụng các công nghệ web như JavaScript, HTML5 và CSS3. Điều này khác biệt so với việc phải phụ thuộc vào các nền tảng APIs cụ thể của iOS, Windows Phone hay Android.
PhoneGap cho phép đóng gói các mã HTML, CSS và JavaScript vào nền tảng của thiết bị. Đồng thời, nó mở rộng khả năng của HTML và JavaScript để tương tác hiệu quả hơn trên thiết bị di động. Kết quả cuối cùng là một ứng dụng lai (hybrid) – không phải ứng dụng gốc hoàn toàn (vì giao diện được kết xuất qua web thay vì UI của nền tảng), nhưng cũng không đơn thuần là ứng dụng web (vì đã được đóng gói và có khả năng truy cập các tính năng của thiết bị).
Ứng dụng mobile web thường bị hạn chế trong việc truy cập các tính năng của thiết bị khi chạy trong trình duyệt. Trong khi đó, ứng dụng bản địa (Native) chỉ phát triển cho từng nền tảng riêng biệt, thông qua các kho ứng dụng và sử dụng công nghệ, môi trường phát triển riêng. Ứng dụng lai kết hợp ưu điểm của cả hai: phần cơ bản được xây dựng bằng công nghệ web, nhưng được đặt trong Native Container, cho phép tải lên kho ứng dụng.
PhoneGap giúp xây dựng ứng dụng điện thoại chỉ với các công nghệ web tiêu chuẩn. Nhà phát triển chỉ cần thành thạo HTML, CSS và JavaScript, có thể đóng gói mã nguồn và truy cập các hàm APIs bản địa (Native APIs) để xuất ứng dụng trên nhiều nền tảng. Từ phiên bản 1.9, PhoneGap cho phép kết hợp mã snippet bản địa và mã snippet lai. (Mã snippet là một đoạn code được gắn vào từ khóa để chèn nội dung)
Cốt lõi của ứng dụng PhoneGap là việc sử dụng HTML5 và CSS3 để kết xuất giao diện, và JavaScript để xử lý các tác vụ logic. HTML định nghĩa cấu trúc giao diện, CSS tạo hiệu ứng và nâng cao trải nghiệm người dùng, còn JavaScript truy cập các tính năng của thiết bị và thực hiện các phép tính.
Mặc dù HTML5 cung cấp quyền truy cập vào phần cứng như camera, GPS, nhưng sự hỗ trợ của trình duyệt cho HTML5 trên các thiết bị di động, đặc biệt là các phiên bản Android cũ, chưa đồng nhất. Để giải quyết vấn đề này, PhoneGap nhúng mã HTML5 vào Native Webview trên thiết bị, sử dụng các chức năng ngoại lai để can thiệp vào việc truy cập tài nguyên.
PhoneGap cũng hỗ trợ mở rộng thông qua các plugin bản địa, cho phép nhà phát triển thêm tính năng bằng JavaScript, tạo kết nối trực tiếp giữa các lớp bản địa và HTML5. PhoneGap cung cấp các plugin cơ bản để truy cập camera, microphone, hệ thống file, cảm biến gia tốc… của thiết bị.
Là một nền tảng mã nguồn mở viết ứng dụng điện thoại sử dụng HTLM, CSS và JavaScript, PhoneGap là lựa chọn phổ biến và đáng tin cậy. Nhiều ứng dụng mobile của các trang tin tức lớn tại Việt Nam như Vnexpress hay Dantri đã sử dụng các ứng dụng lai tương tự. Dưới đây là những ưu và nhược điểm của công cụ chuyển đổi ứng dụng PhoneGap.
Với hầu hết các lập trình viên trên toàn cầu, HTML, CSS và JavaScript là những khái niệm không còn xa lạ. PhoneGap tạo điều kiện cho các nhà phát triển tận dụng và nâng cao các kỹ năng hiện có, chỉ cần nắm vững những kiến thức cơ bản về HTML, CSS và JavaScript.
Các ứng dụng được xây dựng bằng PhoneGap được cài đặt và hoạt động tương tự như một ứng dụng gốc, mang lại trải nghiệm người dùng mượt mà và hiệu quả.
PhoneGap sử dụng cấu trúc plugin, cho phép mở rộng khả năng truy cập vào các API của thiết bị một cách linh hoạt và theo mô-đun. Việc này giúp nhà phát triển tập trung vào các kỹ năng web mà họ đã thành thạo, với nhiều plugin đa dạng để lựa chọn.
PhoneGap hỗ trợ nguyên tắc "write once, run anywhere" – viết một lần, chạy trên nhiều thiết bị.
Là một nền tảng mã nguồn mở, PhoneGap hoàn toàn miễn phí, không phát sinh chi phí bản quyền.
PhoneGap có khả năng hiển thị nội dung một cách nhất quán trên nhiều thiết bị di động khác nhau.
Công cụ này tận dụng tối đa các tính năng của thiết bị di động như GPS, camera, cảm biến gia tốc, và nhiều hơn nữa.
Mặc dù miễn phí, PhoneGap không đảm bảo thành công tuyệt đối. Sự xuất hiện của PhoneGap Build và Icenium cho thấy phiên bản barebones (khung cơ bản) của PhoneGap vẫn còn những hạn chế nhất định. Việc mở rộng ứng dụng bằng plugin có thể gặp phải tình trạng plugin đã lỗi thời hoặc không tương thích với nền tảng đang phát triển.
Hiệu suất của PhoneGap thường bị so sánh với các ứng dụng gốc, vốn có ưu thế hơn về tốc độ và độ mượt. Tuy nhiên, những cải tiến về phần cứng và Webview đang dần thu hẹp khoảng cách này. Các nhà phát triển web cần đặc biệt chú trọng đến hiệu suất, đồng thời trang bị kiến thức về các công cụ phân tích và nền tảng UI thân thiện với thiết bị di động.
Cấu trúc plugin rất hữu ích nếu bạn tìm được plugin phù hợp hoặc có thể tùy chỉnh plugin theo yêu cầu. Tuy nhiên, việc lựa chọn PhoneGap thường xuất phát từ mong muốn tránh đi sâu vào các kỹ năng lập trình nền tảng gốc, điều này có thể tạo ra một sự mâu thuẫn nhất định.
Các ứng dụng PhoneGap, do dựa trên công nghệ web, có thể chạy chậm hơn so với các ứng dụng bản địa có cùng chức năng. Adobe Systems cũng cảnh báo rằng Apple có thể từ chối các ứng dụng được xây dựng bằng PhoneGap nếu chúng quá chậm hoặc không đáp ứng tiêu chuẩn về "user experience" (trải nghiệm người dùng).
PhoneGap giúp tối ưu hóa thời gian phát triển, cho phép bạn nhanh chóng tạo ra các sản phẩm đa nền tảng. Mục tiêu của mọi nhà phát triển ứng dụng là đạt được số lượng người dùng lớn nhất có thể, và khả năng chạy trên nhiều nền tảng là một lợi thế cạnh tranh quan trọng. PhoneGap chính là công cụ hỗ trợ bạn đạt được mục tiêu đó.
Bài viết này sẽ cung cấp hướng dẫn chi tiết về việc cài đặt và sử dụng phần mềm PhoneGap để xây dựng ứng dụng di động, chỉ với 4 bước đơn giản.
Chạy file cài đặt đã tải về bằng cách nhấp đúp chuột. Một cửa sổ có tên PhoneGap Desktop Setup Wizard sẽ xuất hiện.
Chọn chấp nhận các điều khoản bằng cách click vào I accept the agreement.
Nhấn Next, sau đó chọn thư mục lưu trữ ứng dụng.
Sau khi click Next, chọn vị trí tạo Shortcut và nhấn Next.
Cuối cùng, nhấp Install để bắt đầu quá trình cài đặt tự động. Khi hoàn tất, chọn Finish.
Tiếp theo, mở ứng dụng và chuyển sang bước tiếp theo: cài đặt PhoneGap Developer App lên thiết bị di động để xem trước ứng dụng bạn đã tạo.
PhoneGap Developer App là ứng dụng di động cho phép bạn xem trước và kiểm tra ứng dụng đã xây dựng mà không cần cài đặt các SDK hỗ trợ. Điều này giúp các nhà phát triển có thể tạo và kiểm tra ứng dụng PhoneGap một cách nhanh chóng, với số lượng bước cài đặt tối thiểu. Hãy 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 của bạn. Sau khi cài đặt xong, nhấp vào biểu tượng ứng dụng trên màn hình điện thoại để mở và chuyển sang bước tiếp theo để tạo ứng dụng với PhoneGap.
Sau 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 có thể bắt đầu tạo dự án PhoneGap 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 cung cấp một Project mặc định có tên Hello World project dành cho người mới bắt đầu. Đây là cách nhanh nhất để làm quen với việc xây dựng ứng dụng PhoneGap trên điện thoại. Hãy bắt đầu bằng cách click chọn Create new PhoneGap project.
Một màn hình sẽ hiện ra để bạn nhập thông tin. Chọn đường dẫn trên ổ cứng để lưu trữ ứng dụng, nhập tên và ID. Sau khi điền đầy đủ thông tin, click chọn ô màu xanh có tên Create project. Lưu ý rằng vùng ID được gọi là package identifier trên hệ điều hành Android, và bundle indentifier trên iOS.
Ứng dụng của bạn sẽ hiển thị như hình bên dưới, được đánh dấu bằng thanh màu xanh lá cây bên trái, biểu tượng chạy màu xanh lá cây bên phải và thanh màu xanh lá khác ở phía dưới. Hãy nhớ rằng địa chỉ server cho biết ứng dụng của bạn đang chạy và hoạt động. Chỉ có thể có một ứng dụng hoạt động tại một thời điểm. Vì địa chỉ server này sẽ được sử dụng trong bước tiếp theo, bạn nên ghi chú lại hoặc nhớ đừng tắt nó đi.
PhoneGap cho phép xem trước ứng dụng trên thiết bị mà không cần cài đặt các SDK, đăng ký hoặc biên dịch mã (compiling code). Web server của PhoneGap Desktop sẽ lưu trữ ứng dụng của bạn và cung cấp địa chỉ server để bạn nhập vào ứng dụng PhoneGap Developer đã cài đặt trên điện thoại. Các thao tác này thường diễn ra tự động, nhưng bạn cũng có thể thực hiện thủ công bằng cách click vào biểu tượng màu xanh lá cây hình tròn bên phải ứng dụng. Trước khi xem trên thiết bị, hãy đảm bảo rằng máy tính và thiết bị di động của bạn đang kết nối trên cùng một mạng. Mở ứng dụng PhoneGap Developer trên điện thoại, nhập địa chỉ server vào màn hình chính và 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 máy tính và điện thoại của bạn kết nối trên cùng một mạng. Khi PhoneGap Developer đã kết nối, quá trình tải sẽ bắt đầu và ứng dụng của bạn sẽ được hiển thị. Trong quá trình xem ứng dụng, bạn có thể sử dụng thao tác chạm 3 ngón lên điện thoại để quay lại màn hình chính, chạm 4 ngón để làm mới.
Bây giờ, hãy thử sử dụng một vài đoạn mã để tạo ra những thay đổi nhỏ. Mở file index.html trong thư mục www nằm trong ứng dụng của bạn. Ví dụ: ~appSample/www/index.html. Sau đó, chọn cách bạn muốn thay đổi, ví dụ như thay đổi đoạn văn bản PHONEGAP xuất hiện trong ứng dụng từ <h1>PhoneGap</h1> thành <h1>Hello PhoneGap</h1> (Đoạn văn bản này sử dụng CSS ký tự viết hoa mặc định). Khi hoàn tất, lưu lại và chuyển sang bước tiếp theo.
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 được tải lại và tự động hiển thị với đoạn văn bản mới mang tên HELLO PHONEGAP thay vì PHONEGAP như ban đầu.
Video hướng dẫn các quy trình dưới đây sẽ cung cấp cho bạn cái nhìn trực quan về các bước cài đặt và sử dụng phần mềm tạo ứng dụng trên điện thoại PhoneGap.
1 nhận xét
Windows
Phần mềm lập trình
Mã nguồn
