PhoneGap Desktop 사용하기

"PhoneGap Desktop 설치하기"에서 설치한 PhoneGap Desktop을 사용하여 간단한 App 을 만들고 실행해보겠습니다.

 

1. 새 프로젝트를 만들기 위해서는 상단의 메뉴에서 File -> Create new project 를 선택하거나 좌측 툴바에서 + 아이콘을 눌러 create new PhoneGap project... 를 선택합니다.

 

 

 

 

2. Create new PhoneGap project... 를 누르면 나오는 화면입니다. 프로젝트 템플릿을 선택합니다. 여기서는 Hello World 템플릿을 선택하고 Next 버튼을 누릅니다.

 

 

 

 

사용할 수 있는 템플릿은 다음과 같습니다.

 

- Hello World : Hello World를 출력하는 간단한 템플릿 입니다.

- Blank : 빈 템플릿입니다.

- Framework 7 : Framework 7을 사용하여 시작할 수 있는 템플릿입니다. Framework 7에 대해서는 하단의 참고를 확인하세요.

- Push Notification : 푸시 알림을 포함한 예제를 가지고 있는 템플릿입니다. 안드로이드는 GCM(Google Cloud Messaging) iOS는 APNS(Apple Push Notification Service) 입니다.

- React Hot Loader : React.js, Babel, Webpack과 Hot Reloading을 사용하는 템플릿 입니다.

- Start Track : Framework 7과 Spotify API를 사용하는 템플릿 입니다.

- Wikitude Augmented Reality : Wikitude plugin을 사용한 Augmented Reality 데모 앱 입니다.

 

 

3. 프로젝트 상세 정보를 입력합니다.

 

 

 

 

- Local path : 프로젝트가 생성될 폴더 입니다. D:\workspace\phonegap 를 입력했습니다. 자신이 사용할 폴더를 지정하면 됩니다.

- Name : 프로젝트 이름을 입력합니다. Hello World 로 입력했습니다. 실제 프로젝트 폴더는 D:\workspace\phonegap\Hello World 아래에 모든 파일이 생성됩니다.

- ID : com.tistory.pentode.helloworld를 입력했습니다. 입력하지 않으면 기본값으로 com.phonegap.helloworld가 입력됩니다. 이 값은 실제 앱을 배포할 때에 안드로이드에서는 package identifier 로 iOS에서는 bundle identifier로 사용되는데, 각각은 마켓에서 앱을 유일하게 구별하는 값으로 사용되므로 중요합니다.

 

정보를 입력 후 Create project 버튼을 누릅니다.

 

 

4. 프로젝트가 생성되고 바로 테스트용 웹 서버가 시작 됩니다.(프로젝트가 생성되는데 시간이 좀 걸립니다.)

 

 

 

5. PhoneGap Developer App 을 실행하여 웹서버에 접속해 봅니다. PhoneGap Developer App 을 설치하고 사용하는 방법은 "PhoneGap CLI 설치하기"를 참고 하세요.

 

 

 

D:\workspace\phonegap\Hello World\www\index.html 파일의 내용을 수정해 보겠습니다.

 

<div class="app">
    <h1>Hello World</h1>
    <div id="deviceready" class="blink">
        <p class="event listening">Connecting to Device</p>
        <p class="event received">Device is Ready</p>
    </div>
</div>

 

<h1> 태그내의 PhoneGap 을 Hello World로 변경하면 PhoneGap Developer App에서 바로 수정된 결과가 반영 되는 것을 확인할 수 있습니다.

 

 

6. 좌측 툴바의 톱니바퀴 모양 설정 메뉴에서 서버의 포트번호를 변경할 수 있습니다.

 

 

 

7. 좌측 툴바의 명령창 모양 아이콘에서 서버 로그를 볼 수 있습니다.

 

 

 

 

※ 참고

- Framework7 : iOS와 안드로이드 하이브리드앱을 만들기 위한 HTML Framework입니다. (https://framework7.io/)

- React : 페이스북에서 개발한 유저인터페이스 라이브러리로 대화형 UI를 쉽게 생성할 수 있게 해 줍니다. (https://facebook.github.io/react/)

- Babel : Babel은 ES2015(ES6)을 ES5로 변환해 주는 트랜스파일러 입니다. (https://babeljs.io/)

- Webpack : Webpack 는 자바스크립트에서 사용하는 모듈 번들러 입니다. <script> 태그 없이 자바스크립트 모듈을 포함 시킬 수 있는 기능을 제공합니다. (https://webpack.github.io/)

- Hot Reloading : 앱을 실행 상태로 유지하고 런타임에 수정 한 파일의 새 버전을 삽입하는 기능입니다.

- Spotify API : 음원 스트리밍 서비스인 spotify에서 제공하는 API입니다.

- Wikitude plugin : 모바일 장지를 위한 증강현실 응용프로그램입니다. (https://www.wikitude.com/)

- Augmented Reality : 증강현실(AR) 은 가상현실(VR)의 한 분야로 실제 환경에 가상 사물이나 정보를 합성하여 원래의 환경에 존재하는 사물처럼 보이도록 하는 컴퓨터 그래픽 기법입니다.