PhoneGap Build 또는 PhoneGap CLI (다음 옵션)를 사용하는 대신 PhoneGap Desktop 앱을 사용하여 모바일 앱을 만들 수 있습니다. CLI (명령 줄 인터페이스) 대신 시각적 인터페이스를 사용하려는 사용자를 위한 것입니다. 이 옵션을 사용하면 얻을 수 있는 또 다른 장점은 기본 config.xml 파일과 자산을 자체 데이터로 업데이트 할 수 있는 자산을 자동으로 생성한다는 것입니다.

1 단계 : 웹 사이트 만들기 

표준 HTML5, CSS3 및 모든 JavaScript 프레임 워크 (Bootstrap, jQuery Mobile 및 AngularJS)를 사용하여 반응형 웹 사이트 만들기 또는 기존 사용

2 단계 : PhoneGap Desktop 설치 

먼저 아래 두 가지 OS 설치 옵션 중 하나를 선택하십시오.

Windows 설치 

1. 최신 버전의 PhoneGap Desktop Installer를 다운로드하십시오.

 참고 : 설치 프로그램을 실행할 수 없는 경우 최신 릴리스의 zip 파일을 다운로드하고 다운로드한 zip 파일의 README 및 INSTALL 파일 지침을 따르십시오.

2. 설치 프로그램 아이콘을 두 번 클릭하고 프롬프트와 버튼을 따라 PhoneGap Desktop 앱을 설치하십시오.

Mac 설치

1. 최신 버전의 Mac OS X 설치 프로그램을 다운로드하십시오.

2. 설치 프로그램 아이콘을 두 번 클릭하여 설치 프로그램을 실행하고 라이센스 계약에 동의하십시오.

3. 응용 프로그램을 Mac의 응용 프로그램 폴더로 끌어다 놓아 PhoneGap Desktop 응용 프로그램을 설치하십시오.

3 단계 : PhoneGap Developer 앱 설치 (선택 사항) 

PhoneGap Developer App을 사용하면 추가 SDK 설정 없이 여러 플랫폼에서 만든 PhoneGap 모바일 앱을 미리보고 테스트 할 수 있습니다. 플러그인을 설치하거나 로컬로 컴파일 할 필요 없이 PhoneGap 코어 API에 액세스 할 수 있습니다.

참고 : Apple 지침으로 인해 PhoneGap Developer App이 iOS App Store에서 제거되었습니다. 신규 사용자는 다운로드 할 수 없습니다. 

1. 모바일 장치에서 Android 용 PhoneGap Developer App을 다운로드하십시오.

2. 앱이 생성되면 나중에 사용됩니다.

4 단계 : 스텁 앱(Stub App) 만들기 

PhoneGap Desktop 앱이 설치되었으므로 스텁 앱을 만들어 보겠습니다.

1. 모바일 앱을 만들 폴더를 만듭니다 (예 : Desktop / MyApps).

2. PhoneGap Desktop 앱을 열고 더하기 부호 (+)를 클릭 한 다음 메뉴에서 새 PhoneGap 프로젝트 생성…을 선택하십시오.

3. 2 단계 중 1 단계에서 템플릿을 선택하라는 메시지가 표시됩니다. 이 데모에서는 Hello World 단일 선택 단추를 선택하여 해당 템플리트를 선택한 후 다음 단추를 클릭하십시오.

4. 템플릿의 2 단계 중 2 단계에서 :

•   선택… 버튼을 클릭하고 앱 자산을 저장할 폴더를 선택한 다음 폴더 선택 버튼을 클릭하십시오.
•   이름 : 입력란에 앱 이름을 입력합니다 (예 : HELLO WORLD APP).
•   ID 텍스트 필드에 앱에 선택적 ID를 지정하십시오 (예 : com.phonegap.helloworld)

참고 : 고유 한 앱 이름을 만드는 데 사용되는 앱 이름에 역 도메인 명명 규칙을 사용하는 것이 일반적입니다. ID 필드는 Android의 패키지 식별자 및 iOS의 번들 식별자로 알려져 있습니다.

• 프로젝트 생성 버튼을 클릭하십시오.

5. 점검 사항 : 다음 화면이 표시됩니다.

참고 : PhoneGap Desktop은 자동으로 작은 웹 서버를 시작하여 프로젝트를 호스팅하고 서버 IP 주소와 서버 포트 번호를 반환합니다. 그런 다음 모바일 장치 또는 데스크탑 브라우저에서 실행되는 PhoneGap Developer 앱에 입력 할 수 있습니다. 녹색 재생 (>) 단추를 클릭하여 비활성 프로젝트를 수동으로 시작할 수도 있습니다. 

데스크톱 브라우저를 사용하면 앱을 장치로 이동하기 전에 디버깅을 수행 할 도구가 있는 Angular 또는 React와 같은 프레임 워크를 사용하는 경우 초기 개발 프로세스 속도를 높일 수 있다는 이점이 있습니다. 최근 PhoneGap은 deviceready 이벤트를 테스트 할 수 있도록 브라우저 플랫폼을 자동으로 대상으로 지원하기 시작했습니다. 간단한 웹 사이트를 모바일 앱으로 변환하는 방법 및 이미 있는 환경에서 Apache Cordova 핵심 플러그인을 더 쉽고 익숙하게 사용할 수 있습니다. 

주의 : PhoneGap 앱이 작동하려면 전화기와 모바일 장치가 동일한 네트워크에 연결되어 있어야 합니다. 

6. (선택 사항) 이전에 다운로드 한 모바일 장치에서 PhoneGap Developer 앱을 열고 PhoneGap Desktop 앱 하단에 있는 IP 주소와 포트 번호 (예 : http : //192.168.253 : 3000)를 서버 주소에 입력하십시오. 텍스트 필드를 클릭한 다음 연결 버튼을 클릭하여 앱을 미리 봅니다.

참고 :이 응용 프로그램은 항상 작동하지 않습니다. 

7. 로컬 경로 링크를 클릭하여 파일 탐색기에서 파일을 열어서 만든 폴더와 파일을 검사하십시오.

참고 : PhoneGap Desktop 앱을 사용하면 다음과 같은 기본 파일 및 폴더가 자동으로 생성된다는 이점이 있습니다.

 1. 플랫폼 파일이 이미 작성된 플랫폼 폴더

 2. 여러 개의 기본 플러그인이 있는 플러그인 폴더

 3. Config.xml file

8. 확인 사항 : www 폴더를 클릭하여 내용을 확인하십시오. spec 폴더를 제외하고 이러한 폴더 중 하나를 클릭하면 PhoneGap Desktop 앱이 표준 웹 컨텐츠를 생성 한 대부분을 볼 수 있습니다.

9. 확인 사항 : index.html 파일을 클릭하십시오. 기본 브라우저에 기본 앱 (예 : HELLO WORLD)이 열립니다.

5 단계 : 웹 사이트 추가 

기본 컨텐츠가 작동하므로 www 폴더에 있는 고유한 웹 컨텐츠로 바꾸십시오.

1. 기존 웹 사이트 생성 또는 사용 (표준 HTML5, CSS3 및 선택적으로 모든 JavaScript 프레임 워크 (Bootstrap, jQuery Mobile 및 AngularJS) 사용)

2. 웹 컨텐츠를 www 폴더로 이동하십시오.

6 단계 : 앱으로 변환 

이전장 운영중인 사이트를 네이티브 앱으로 만들기(PhoneGap Build)에서 2-6 단계를 참조하십시오.