Cách tạo ứng dụng Android cơ bản trong PhoneGap

Đối với hầu hết mọi người, ý tưởng tạo một ứng dụng Android có vẻ khó khăn như leo núi. Mọi người dành hàng tháng để học cách viết mã và sử dụng SDK Android để phát triển ứng dụng và người trung bình, đặc biệt là chủ doanh nghiệp trực tuyến, có thể không có loại thời gian này.

May mắn thay, có một phím tắt đơn giản để tạo ra những gì được gọi là một ứng dụng lai, trái ngược với việc tạo ra một ứng dụng bản địa. Một ứng dụng lai về cơ bản sử dụng AndroidView được tích hợp sẵn của Android để trình bày ứng dụng của bạn, với các trình cắm sẵn có cho phép ứng dụng lai của bạn truy cập vào máy ảnh, dịch vụ nhắn tin và các khía cạnh khác của hệ thống Android. Một ứng dụng lai có thể dễ dàng được xây dựng cho nhiều hệ điều hành, vì chúng chủ yếu sử dụng Java, HTML5 và CSS để chạy.

Hướng dẫn này sẽ hướng dẫn bạn cách tạo ứng dụng lai sử dụng nền tảng ứng dụng phổ biến PhoneGap. Những gì chúng ta sẽ làm là biến trang web của bạn thành tệp .apk (ứng dụng Android) có thể cài đặt có thể được cài đặt trên bất kỳ điện thoại Android nào. Khi ứng dụng được khởi chạy, nó sẽ đơn giản mở trang web của bạn trong trình duyệt WebView gốc của Android, nhưng nó sẽ xuất hiện dưới dạng ứng dụng toàn màn hình - không có thanh điều hướng URL hoặc bất kỳ đầu mối nào khác mà trang web của bạn chỉ đơn giản được trình bày trong trình duyệt.

Yêu cầu

Trang web của riêng bạn (với mục đích làm theo hướng dẫn này, bạn có thể bắt đầu một blog WordPress miễn phí)

Tài khoản GitHub

Tài khoản PhoneGap
Notepad ++ (hoặc phần mềm chỉnh sửa văn bản tương tự có thể nhận dạng mã)
Phần mềm chỉnh sửa ảnh để tạo biểu tượng ứng dụng (Photoshop, GIMP, v.v.)

Mẫu mã hóa

Đây là các mẫu mã mà bạn có thể sử dụng cho mục đích của hướng dẫn này - chúng là từ ứng dụng của riêng tôi được phát triển với PhoneGap, nhưng tôi đã loại bỏ chúng khỏi thông tin cá nhân của tôi. Thiết lập những điều này từ đầu với tất cả các thông số chính xác đã cho tôi nhiều ngày xử lý sự cố, vì vậy tôi đang cung cấp những điều này để thuận tiện cho bạn. Không có gì!

> Config.XML
> Index.HTML

Bắt đầu

Tạo một thư mục trên máy tính của bạn và gọi nó là www: không có dấu ngoặc kép. Đây sẽ là thư mục chính của dự án, nơi người xây dựng PhoneGap sẽ mong đợi tìm tất cả các tệp cho dự án của bạn. Bây giờ chúng ta sẽ tạo một biểu tượng cho ứng dụng của bạn.

Mở phần mềm chỉnh sửa ảnh của bạn và tạo một hình ảnh mới ở định dạng .PNG. Cài đặt hình ảnh của bạn sẽ trông giống như sau:

Và bây giờ bạn có thể vẽ biểu tượng của bạn, ví dụ tôi chỉ cần thực hiện một nút nhỏ:

Kích thước của hình ảnh phụ thuộc vào màn hình điện thoại cá nhân của bạn, nhưng nếu bạn dự định phát triển một ứng dụng cho nhiều thiết bị, tất nhiên bạn sẽ tạo ra nhiều kích cỡ của cùng một biểu tượng. Dưới đây là bảng các kích thước hình ảnh được sử dụng:

36 × 36 (120dpi / LDPI)
48 × 48 (160dpi / MDPI)
72 × 72 (240dpi / HDPI)
96 × 96 (320dpi / XHDPI)
144 × 144 (480dpi / XXHDPI)
192 × 192 (640dpi / XXXHDPI)

Tôi không muốn dành quá nhiều thời gian để nói về kích thước màn hình và DPI, chỉ cần biết rằng DPI tương quan khá nhiều với độ phân giải màn hình. Điện thoại sử dụng độ phân giải màn hình 1080 × 1920 sẽ sử dụng 480dpi, nhưng điều này không nhất thiết tương quan chính xác với kích thước màn hình. Điện thoại có thể có màn hình 5.2 hoặc màn hình 6 và có độ phân giải 1080 × 1920. Nhưng hướng dẫn này không phải là về màn hình điện thoại thông minh, vì vậy hãy tiếp tục.

Sau khi bạn vẽ biểu tượng của mình, hãy lưu biểu tượng đó dưới dạng icon.png và di chuyển nó trong thư mục www:. Điều này sẽ trở thành biểu tượng mặc định cho ứng dụng của bạn. Nếu bạn muốn tạo biểu tượng ở các kích thước khác nhau phù hợp với độ phân giải màn hình của người dùng, bạn sẽ lưu biểu tượng ở các kích thước và tên khác nhau, ví dụ Icon144.png, Icon192.png, Icon96.png, v.v. Sau đó, bạn sẽ chỉnh sửa tệp Config.xml để trỏ đến từng biểu tượng riêng lẻ. Tiếp tục nào.

Vì vậy, bây giờ bạn có một biểu tượng cho ứng dụng của bạn, bạn cần một hình ảnh giật gân. Về cơ bản, đây là màn hình tải, giống như hình nền hiển thị trước khi ứng dụng của bạn được tải. Kích thước hình ảnh giật gân hoạt động trên cùng nguyên tắc như biểu tượng, nhưng lớn hơn một chút. Đây là bảng:

• LDPI:
  • Chân dung: 200x320px
  • Cảnh quan: 320x200px
• MDPI:
  • Chân dung: 320x480px
  • Cảnh quan: 480x320px
• HDPI:
  • Chân dung: 480x800px
  • Cảnh quan: 800x480px
• XHDPI:
  • Chân dung: 720px1280px
  • Cảnh quan: 1280x720px
• XXHDPI:
  • Chân dung: 960px1600px
  • Cảnh quan: 1600x960px
• XXXHDPI:
  • Chân dung: 1280px1920px
  • Cảnh quan: 1920x1280px

Vì vậy, tạo hình ảnh giật gân của bạn ở độ phân giải cho thiết bị của bạn, lưu nó dưới dạng Splash.png và sau đó di chuyển nó vào trong thư mục của dự án của bạn. Tuyệt vời, bây giờ bạn có biểu tượng và hình ảnh giật gân của ứng dụng, hãy chuyển sang thiết lập các tệp cấu hình và chỉ mục của bạn.

Đã giải thích chỉ mục.HTML và Config.XML

Tệp config.xml là những gì đặt môi trường xây dựng (Android, iPhone, Windows Phone), biểu tượng và vị trí giật gân và các trình cắm thêm Apache Cordova mà bạn muốn sử dụng trong ứng dụng của mình.

Mở mẫu tôi đã cung cấp trong Notepad ++ và bạn sẽ thấy các dòng này ở gần đầu:

Cập nhật các trường đó bằng thông tin của bạn, nhưng chỉ để lại các trường tùy chọn. Phần còn lại của tệp cấu hình là tự giải thích nếu bạn chỉ xem xét các giá trị. Tên tùy chọn = toàn màn hình, ví dụ: yêu cầu ứng dụng tự khởi chạy dưới dạng ứng dụng toàn màn hình. Chỉ để lại mọi thứ, ngoại trừ giá trị cuối cùng này ở cuối tệp:

Thay đổi nó thành URL trang web thực tế của bạn. Điều này sẽ cho phép người dùng ứng dụng điều hướng hoàn toàn trang web của bạn và chỉ trang web của bạn - họ không thể rời khỏi trang web của bạn trong khi sử dụng ứng dụng của bạn. Tất nhiên các ứng dụng sẽ không có một thanh điều hướng URL, điều này thậm chí không thực sự là một mối quan tâm, nhưng cũng đảm bảo rằng người dùng có thể truy cập tất cả các trang trên trang web của bạn. * Sau URL trang web là một ký tự đại diện, trong thuật ngữ mã hóa nghĩa là nó sẽ chấp nhận bất kỳ thứ gì được nhập vào vị trí của dấu *.

Tất nhiên, nếu bạn muốn giới hạn người dùng chỉ một số trang nhất định trên trang web của mình, bạn sẽ thêm các giá trị riêng biệt như sau:

Hãy chuyển sang tệp Index.html, đây là bánh mì và bơ làm cho ứng dụng thực sự hoạt động. Mở nó trong Notepad ++ và chuyển ngôn ngữ tài liệu sang HTML. Về cơ bản, index.html chỉ cho trình duyệt Android biết cách hiển thị trang web của bạn - trong mẫu tôi đã cung cấp, có thẻ để xóa thanh điều hướng URL khỏi trình duyệt, cho phép nút quay lại của điện thoại thoát ứng dụng và khởi chạy ứng dụng sau khi màn hình splash được hiển thị. Dòng bạn sẽ muốn thay đổi là ở đây:

var url = 'http://yourwebsite.com'

Xây dựng ứng dụng trong PhoneGap Build

Vì vậy, đăng nhập vào tài khoản GitHub của bạn, và điều hướng đến trang chính của kho lưu trữ của bạn. Dưới tên kho lưu trữ, nhấp vào Tải tệp lên và kéo thư mục dự án của bạn vào màn hình cây tệp. Bây giờ hãy nhập thông báo cam kết ở dưới cùng, như lần thử ứng dụng đầu tiên của tôi . Cuối cùng, nhấp vào Cam kết thay đổi.

Bây giờ hãy truy cập trang PhoneGap Build và đăng nhập. Bây giờ hãy nhấp vào nút Ứng dụng mới trên trang xây dựng. Điều này sẽ yêu cầu bạn nhập đường dẫn đến kho lưu trữ GitHub của bạn, do đó, làm như vậy, và sau đó nhấp vào Kéo từ .git reposity.

Bây giờ trở lại trang xây dựng chính, nhấp vào Cập nhật mã và Kéo mới nhất.

Cuối cùng, nhấp vào Xây dựng. Nó sẽ biên dịch ứng dụng của bạn thành tệp .apk và sau đó hiển thị cho bạn tùy chọn tải xuống tệp .apk. Bây giờ bạn có thể tải tập tin .apk này về máy tính của bạn và chuyển nó vào điện thoại của bạn, sau đó cài đặt nó từ đó. Ngoài ra, bạn có thể sử dụng điện thoại của mình để quét mã QR trên màn hình máy tính để tự động cài đặt tệp .apk vào thiết bị Android của mình.

Đó là nó! Bây giờ, để giải thích cho bạn một vài điều quan trọng:

• Đây là một hướng dẫn cực kỳ đơn giản đã hướng dẫn bạn cách xây dựng các ứng dụng lai cơ bản nhất. Mọi người thường không đi vòng quanh các trang web của họ trong trình duyệt gốc và chuyển nó thành một ứng dụng Android trên cửa hàng Google Play. Nhưng bây giờ bạn đã biết cách thực hiện, bạn có thể bắt đầu đọc tài liệu PhoneGap về cách tùy chỉnh ứng dụng của bạn và thêm nhiều hương vị cho ứng dụng để bạn có thể hy vọng tạo ra một ứng dụng thực sự hữu ích.
• Thứ hai, Google Play cấm phương thức xây dựng ứng dụng này để tạo các ứng dụng liên kết với mục đích duy nhất là doanh thu. Vì vậy, bạn không thể tạo một ứng dụng gọi là Kiếm tiền ngay hôm nay! mở ra một trang web hoàn toàn đầy đủ các quảng cáo và ngân hàng trên doanh thu quảng cáo. Bạn sẽ bị cấm từ cửa hàng Google Play.

Mẹo CHUYÊN NGHIỆP: Nếu vấn đề xảy ra với máy tính của bạn hoặc máy tính xách tay / máy tính xách tay, bạn nên thử sử dụng phần mềm Reimage Plus có thể quét các kho lưu trữ và thay thế các tệp bị hỏng và bị thiếu. Điều này làm việc trong hầu hết các trường hợp, nơi vấn đề được bắt nguồn do một tham nhũng hệ thống. Bạn có thể tải xuống Reimage Plus bằng cách nhấp vào đây