PhoneGap-환경 설정

이 장에서는 앱을 쉽게 만들 수 있도록 기본 환경을 설정하는 방법을 배웁니다. PhoneGap은 Cordova 명령 줄 인터페이스 및 Github 저장소 메커니즘을 사용하여 앱의 오프라인 생성을 지원하지만 최소한의 노력 절차에 집중할 것입니다.

웹 기술에 정통하고 웹 애플리케이션을 앱으로 제공 할 준비가되어 있다고 가정합니다. PhoneGap은 HTML, CSS 및 JavaScript 만 지원하기 때문에 이러한 기술 만 사용하여 애플리케이션을 생성해야합니다.

개발자의 관점에서 앱은 패키지에 다음 항목을 포함해야합니다.

구성 파일
앱 아이콘
정보 또는 콘텐츠 (웹 기술을 사용하여 구축)

구성

웹 앱에는 필요한 모든 설정을 구성하는 데 적합한 구성 파일이 하나만 필요합니다. 이름은 config.xml입니다. 이 파일에는 앱을 컴파일하는 데 필요한 모든 정보가 포함되어 있습니다.

예를 들어 config.xml을 보겠습니다.

<?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>

모든 구성 내용은 <widget> 태그로 래핑됩니다. 이들에 대한 간략한 설명은 다음과 같습니다.

<widget id = ”app_id”>

id는 다양한 앱 스토어에서 예약 한 앱 ID입니다. 역 도메인 이름 스타일 즉, com.tutorialspoint.onlineviewer 등입니다.

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

xyz 형식의 앱 버전 번호입니다. 여기서 (x, y, z)는 양의 정수, 즉 1.0.0이며 major.minor.patch 버전 시스템을 나타냅니다.

<name> App Name</name>

모바일 화면에서 앱 아이콘 아래에 표시 될 앱의 이름입니다. 이 이름을 사용하여 앱을 검색 할 수 있습니다.

<description> My First Web App </description>

앱의 내용과 그 내용에 대한 간략한 설명입니다.

<author> Author_Name </author>

이 필드에는 제작자 또는 프로그래머의 이름이 포함되며 일반적으로이 앱을 실행하는 조직의 이름으로 설정됩니다.

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

preferences 태그는 앱의 전체 화면, 배경색 및 방향과 같은 다양한 옵션을 설정하는 데 사용됩니다. 이러한 옵션은 이름과 값 쌍에 있습니다. 예 : name = "FullScreen"value = "true"등. 이러한 고급 설정이 필요하지 않기 때문에 권한을 없음으로 설정합니다.

<icon>

앱에 아이콘을 추가 할 수 있습니다. 다양한 방법으로 코딩 할 수 있지만 모든 것의 지름길을 배우고 있으므로 여기에 있습니다. 그만큼.src아이콘 이미지의 경로를 결정합니다. 그만큼gap:platform이 아이콘을 사용할 OS 플랫폼을 결정합니다. 그만큼gap:qualifierAndroid 기기에서 사용하는 밀도입니다. iOS 기기는width & height 매개 변수.