PhoneGap Desktop과 함께 사용되는 PhoneGap Developer 앱을 사용하여 플랫폼 SDK를 설치하거나 장치를 등록하거나 코드를 컴파일하지 않고도 장치에서 앱을 바로 미리 볼 수 있습니다.

PhoneGap Desktop은 프로젝트를 호스팅하기 위해 작은 웹 서버를 시작하고 서버 주소를 반환합니다. 그러면 서버 주소를 가져와 모바일 장치나 데스크톱 브라우저에서 실행중인 PhoneGap Developer 앱에 입력할 수 있습니다. 프로젝트는 프로젝트 생성시 자동으로 제공되지만 옆에있는 녹색 재생(>) 버튼을 클릭하여 비활성 상태인 모든 프로젝트를 수동으로 시작할 수도 있습니다.

데스크탑 브라우저에서 미리보기

데스크톱 브라우저를 활용하여 먼저 앱을 미리보고 테스트하여 초기 개발 프로세스의 속도를 높일 수 있습니다. 예를 들어 Angular 또는 React와 같은 프레임워크를 사용하는 경우 브라우저로 프레임워크를 디버깅하는 데 사용할 수 있는 도구가 있습니다.이 도구는 장치로 이동하기 전에 매우 유용 할 수 있습니다. 최근 PhoneGap은 이미 익숙한 환경에서 deviceready 이벤트 및 Apache Cordova 핵심 플러그인을 사용하여 보다 쉽게 ​​테스트 할 수 있도록 브라우저 플랫폼을 자동으로 지원하기 시작했습니다.

자세한 내용은 PhoneGap 브라우저 지원 참조 가이드를 참조하십시오.

디바이스에서 미리보기

계속하기 전에 동일한 네트워크에서 장치와 컴퓨터를 실행하고 있는지 확인하십시오.

1. 이전 단계에서는 프로젝트를 만들었고 녹색 재생 버튼이 강조 표시되고 PhoneGap Desktop의 맨 아래에서 실행중인 서버 주소를 나타내는 녹색 막대가 표시되는지 확인했습니다.

참조용으로 스크린 샷이 아래에 다시 나와 있습니다. 다음 단계로 이동하기 전에 프로젝트의 특정 서버 주소를 찾으십시오.

2. PhoneGap Developer 앱이 실행중인 모바일 장치로 이동하여 주 화면에 서버 주소를 입력하고 ‘Connect’을 누릅니다.

참고: PhoneGap Developer 앱의 터미널 화면에 표시된 서버 주소를 직접 탭하여 변경하십시오. 기본적으로 채워지는 값은 예시일 뿐입니다.

아래와 같이 성공 메시지가 표시되어야 합니다. 어떤 종류의 오류가 발생하는 경우 장치와 컴퓨터 모두에서 동일한 네트워크에 다시 연결되어 있는지 다시 한 번 확인하십시오. 또한 이슈 트래커PhoneGap Google 그룹스 목록에서 추가 도움을 받을 수 있습니다.

PhoneGap Developer 앱이 연결되면 아래와 같이 앱이 로드되고 표시됩니다.

팁: 앱 미리보기 중에 제스처를 사용할 수 있습니다. 세 손가락으로 두드리면 기본 화면으로 돌아가고, 네 손가락으로 누르면 새로고침이 됩니다.

예제 비디오

업데이트하기

3. 이제 코드를 업데이트하여 변경 사항을 테스트하는 것이 얼마나 쉬운지 확인해 보겠습니다. 좋아하는 텍스트 편집기를 사용하여 프로젝트의 www 폴더 내에 있는 index.html 파일을 엽니다. 예를 들면 ~/appSample/www/index.html

4. 앱에 표시되는 PHONEGAP 텍스트를 <h1>PhoneGap</h1>에서 <h1>Hello PhoneGap</h1>으로 변경하십시오. 이 텍스트에는 기본 프로젝트에서 CSS 대문자 변환이 적용되어 있습니다. 작업이 끝나면 저장하고 다음 단계로 넘어갑니다.

5. 이제 PhoneGap Developer 앱이 실행중인 모바일 장치를 확인하면 앱이 다시 로드되고 새로운 텍스트가 자동으로 표시됩니다.

6. 이 워크플로우에 익숙해 지도록 프로젝트를 계속 업데이트 하십시오.

이 시점에서 이 안내서를 참조하여 PhoneGap과 함께 기본 Hello PhoneGap 앱 및 모바일 앱 개발 팁에 대한 중요한 세부 정보를 설명하는 것이 좋겠습니다.

다음(Next) >>
5단계: 더 나아가기