PhoneGap CLI 설치하기

안드로이드폰이나 아이폰용 앱을 개발하기 위해서는 각각 다른 프레임웍과 언어가 필요합니다. 폰갭(PhoneGap)은 iOS의 Objectiv-C UIWebView와 안드로이드의 android.webkit.WebView 상에서 HTML, CSS, JavaScript 와 같은 표준 웹 기반 기술을 사용하여 앱을 개발 할 수 있도록 해주는 플랫폼 입니다.

 

기기의 대부분의 기능도 JavaScript로 폰갭 API를 호출하여 사용할 수 있습니다.  폰갭의 코어 엔진은 100% 오픈 소스로 Apache Cordova 프로젝트 를 사용합니다.(폰갭은 안드로이드, iOS 이외에도 많은 플랫폼을 지원합니다.)

현재 폰갭은 Adobe 사에서 개발하고 있고, PC 용 개발툴 베타버전을 제공 하고 있으나, 아직까지 많이 쓰이는 CLI(Command Line Interface) 를 설치하고 사용해 보겟습니다.

설치를 위해서는 Android SDK, Node.js 와 git 이 필요합니다. 안드로이드 sdk 는 안드로이드  스튜디오를 설치했으면 이미 설치되어 있습니다. Node.js 는 웹 브라우저안에서 실행되던 JavaScript를 자바나  C# 처럼 브라우저 밖에서 사용하도록 만든 JavaScript 엔진입니다.

 

폰갭은 Node.js 의 NPM(Node Package Manager) 으로 설치됩니다.  git 은 소프트웨어 형상관리 프로그램 으로, 폰갭이 내부적으로 사용합니다.

 

1. git을 설치합니다.

- https://git-scm.com/ 에서 자신의 시스템에 맞는 파일을 다운 받습니다. (Git-2.11.0-64-bit.exe)

 

 

- 설치를시작합니다. 라이센스에 동의하고 설치위치를 지정합니다. (C:\util\Git) 설치 위치는 자신이 원하는 곳을 지정하면 됩니다.

 

 

- 다음 항목들은 모두 기본값 그대로 설치합니다.
* Select Components - Windows Explorer integration, 파일 확장자 연결
* Select Start Menu Folder - Git
* Adjusting your PATH environment - Use Git from the Windows Command Prompt
* Configuring the line ending conversions - Checkout Windows-style, commit Unix-style line endings
* Configuring the terminal emulator to use with Git Bash - Use MinTTy
* Configuring extra options - Enable file system caching, Enable Git Credential Manager
* Configuring experimental options - 선택 없음.

 

- 설치가 완료 되었습니다.

 

 

2. Node.js 설치하기
- http://nodejs.org 에서 윈도우용을 다운 받습니다. (node-v6.9.3-x64.msi)

 

 

- 다운 받을 파일을 설치합니다.(C:\util\nodejs) 설치 위치는 자신이 원하는 곳을 지정하면 됩니다.

 

 

3. npmrc를 수정합니다(C:\util\nodejs\node_modules\npm\npmrc).

npm은 Node Package Manager의 약자로 Node.js 에서 사용하는 라이브러리 관리합니다. 폰갭이 여기에 설치 됩니다.

- C:\util\npm 폴더를 만든 다음에 npmrc 파일을 열어서 다음과 같이 변경합니다.

 

prefix=${APPDATA}\npm  ->  prefix=C:\util\npm

 

위치는 자신이 편리한 위치에 만들면 됩니다. 기본으로 설치해도 되는데 이렇게 변경하는 이유는 나의 취향일 뿐입니다. 기본 설치 위치는 사용자 HOME 디렉토리에 설치 됩니다. 윈도우의 HOME 디렉토리는 좀 복잡합니다. Administrator 일경우

 

C:\Users\Administrator\AppData\Roaming\npm

 

폴더 입니다. 그리고 AppData는 기본적으로 숨김속성 입니다.

 

4. PhoneGap 을 설치합니다. 명령창을 열고 다음 명령으로 설치합니다.

 

C:\>npm install -g phonegap@latest

 

 

- PATH 환경변수에 C:\util\npm 을 추가합니다.

 

- 다음 명령으로 설치가 되었는지 확인합니다.

 

C:\phonegap

 

 

5. Google Play 또는 App Store에서 PhoneGap Developer 앱을 설치합니다. 폰갭 CLI 에서 서버를 실행해서 PhoneGap Developer 앱에서 테스트 할 수 있습니다.

 

 

6. 샘플 앱을 생성 해서 실행해 봅니다.

- 먼저 폰갭 프로젝트를 생성할 workspace 를 만듭니다. C:\workspace\phonegap 폴더로 만들었습니다.

- 명령창에서 C:\workspace\phonegap 폴더로 이동합니다.

- 새 프로젝트를 생성합니다.

C:\workspace\phonegap>phonegap create HelloWorld com.tistory.pentode HelloWorld

 

명령어 파마리터의 의미는 다음과 같습니다.

 

* HelloWord 라는 프로젝트 폴더가 생성됩니다.
* 기본 패키지가 com.tistory.pentode가 됩니다.
* 앱이름은 HelloWorld 입니다.

 

 

- HelloWorld 폴더로 이동 후, 안드로이드 플랫폼을 추가합니다.

 

C:\workspace\phonegap\HelloWorld>phoengap platform add android

 

 

- 프로젝트를 빌드 합니다.

 

C:\workspace\phonegap>phonegap build android

 

 

-  서버를 실행합니다. 실행하면 서버의 IP와 포트가 보입니다. 서버를 종료하기 위해서는 Ctrl + c 키를 누릅니다.

C:\workspace\phonegap>phonegap serve

 

 

7. PhoneGap Developer 앱을 실행합니다. Server Address 부분을 터치해서 IP를 실행된 서버의 IP 로 수정합니다.

 

 

8. Connect 버튼을 눌러 실행을 합니다. Device Ready 가 나오면 성공한 것입니다. 앱이 실행되화면은 손가락 네 개로 터치하면 새로고침입니다. 손가락 세개로 터치하면 이전의 주소 입력화면으로 되돌아 갑니다.

 

 

폰갭을 이용한 안드로이드 앱을 개발하기 위한 설정을 마쳤습니다. 다음에 방금 설치한 것을 이용하여 안드로이드 스튜디오에서 폰갭 앱 개발을 하는 방법을 알아 보겠습니다.