PhoneGap - Thiết lập môi trường

Trong chương này, chúng ta sẽ học cách thiết lập môi trường cơ bản để tạo ứng dụng một cách dễ dàng. Mặc dù PhoneGap hỗ trợ tạo ứng dụng ngoại tuyến bằng giao diện dòng lệnh Cordova và cơ chế kho lưu trữ Github , chúng tôi sẽ tập trung vào quy trình nỗ lực tối thiểu.

Chúng tôi giả định rằng bạn đã thành thạo với các công nghệ web và đã chuẩn bị sẵn ứng dụng web của bạn để xuất xưởng dưới dạng ứng dụng. Vì PhoneGap chỉ hỗ trợ HTML, CSS và JavaScript, nên ứng dụng chỉ được tạo bằng các công nghệ này là bắt buộc.

Từ quan điểm của nhà phát triển, một ứng dụng phải có các mục sau đây trong gói của nó:

Tệp cấu hình
Biểu tượng cho ứng dụng
Thông tin hoặc nội dung (được xây dựng bằng công nghệ web)

Cấu hình

Ứng dụng web của chúng tôi sẽ chỉ cần một tệp cấu hình đủ để định cấu hình tất cả các cài đặt cần thiết của nó. Tên của nó là config.xml. Tệp này chứa tất cả thông tin cần thiết cần thiết để biên dịch ứng dụng.

Hãy để chúng tôi xem config.xml cho ví dụ của chúng tôi -

<?xml version = "1.0" encoding = "UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets" 
   xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.tutorialspoint.onlineviewer" version = "1.0">
   
   <name>Tutorials Point</name>
   
   <description>
      Tutorials Point Online Viewer
   </description>
   
   <author href = "http://tutorialspoint.com" email = "[email protected]">
      Tutorials Point
   </author>
   
   <preference name = "permissions" value = "none"/>
   
   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "ldpi" />
		
   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "mdpi" />
		
   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "hdpi" />
		
   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xhdpi" />
		
   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xxhdpi" />
   
   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57" />
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72" />
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114" />
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144" />
   
</widget>

Tất cả nội dung cấu hình được bao bọc trong thẻ <widget>. Mô tả ngắn gọn về chúng như sau:

<widget id = ”app_id”>

id là id ứng dụng dành riêng của bạn trên các cửa hàng ứng dụng khác nhau. Nó ở kiểu tên miền ngược, tức là com.tutorialspoint.onlineviewer, v.v.

<widget version = "x.y.z">

Đây là số phiên bản của ứng dụng ở định dạng xyz trong đó (x, y, z) là các số nguyên dương, tức là 1.0.0, nó đại diện cho hệ thống phiên bản major.minor.patch.

<name> App Name</name>

Đây là tên của ứng dụng, sẽ được hiển thị bên dưới biểu tượng ứng dụng trên màn hình di động. Ứng dụng của bạn có thể được tìm kiếm bằng tên này.

<description> My First Web App </description>

Đây là mô tả ngắn gọn về nội dung của ứng dụng và nó là gì.

<author> Author_Name </author>

Trường này chứa tên của người sáng tạo hoặc người lập trình, thường được đặt thành tên của tổ chức đang khởi chạy ứng dụng này.

<preferences name = "permissions" value = "none">

Thẻ tùy chọn được sử dụng để đặt các tùy chọn khác nhau như FullScreen, BackgroundColor và Orientation cho ứng dụng. Các tùy chọn này nằm trong cặp tên và giá trị. Ví dụ: name = "FullScreen" value = "true", v.v. Bởi vì chúng tôi không yêu cầu bất kỳ cài đặt nâng cao nào, chúng tôi chỉ đặt quyền cho không.

<icon>

Cho phép chúng tôi thêm các biểu tượng vào ứng dụng của mình. Nó có thể được mã hóa theo nhiều cách khác nhau, nhưng vì chúng ta đang tìm hiểu sơ lược về mọi thứ, vì vậy nó là đây. Các.srcxác định đường dẫn của hình ảnh biểu tượng. Cácgap:platformxác định biểu tượng này sẽ được sử dụng cho nền tảng hệ điều hành nào. Cácgap:qualifierlà mật độ được sử dụng bởi các thiết bị Android. Các thiết bị iOS sử dụngwidth & height thông số.

Biểu tượng

Có nhiều thiết bị có kích thước khác nhau có cùng hệ điều hành di động, do đó, để nhắm mục tiêu đến đối tượng của một nền tảng, bạn cũng cần cung cấp các biểu tượng của tất cả các loại điện thoại di động. Điều quan trọng là chúng tôi chuẩn bị các biểu tượng có hình dạng và kích thước chính xác theo yêu cầu của hệ điều hành di động cụ thể.

Ở đây chúng tôi đang sử dụng các thư mục res/icon/ios và res/icon/android/drawable-xxxx..

Để hoàn thành công việc này nhanh chóng, bạn có thể tạo một biểu trưng có kích thước 1024x1024 và đăng nhập vào makeappicon.com. Trang web này sẽ giúp bạn ngay lập tức tạo logo với mọi kích cỡ cho cả nền tảng Android và iOS.