PhoneGap 3.0 사용 방법

Prologue

PhoneGap 2.9를 사용하다가 이제 새로운 것을 시작하기 위해 3.0을 설치하려고 알아보는데
와우~!! 바뀐 것 까지는 좋은데 어떻게 설치해야 하는지 첨에 좀 헤맸습니다.

폰갭이 확 바꼈습니다.

  1. 플랫폼 프로젝트 생성이 아주 쉽고 자유로워졌습니다.
  2. 새로운 API가 2개 추가되었습니다.  (InAppBrowser와 Globalization API 입니다)
  3. 앱을 좀더 빠르고 최적화 시킬 수 있도록 플러그인 구성이 변경되었습니다.
  4. 기타 등등 자랑질은 http://phonegap.com/blog/2013/07/19/adobe-phonegap-3.0-released/ 이곳에서 확인하세요!

Phonegap

 

우선 폰갭 3.0이 어떻게 바꼈는지 폰갭 공식홈페이지에서는 이 그림으로 표현했는데 아주 명료하게 설명한 그립니다.
그림과 같이 기존의 내부 플러그인을 포함하던 것이 모두 독립을 선언했습니다.
내부 API도 내가 필요한 것만 설치해서 최적화해 사용할 수 있습니다.
만약 카메라 플러그인이 필요하다면 카메라 플러그인만 설치해서 쓰면 끝입니다.

그럼, 3.0을 설치해볼까요?

 

Install Node.js

nodejs-tutorial1

Node.js를 http://nodejs.org/ 이곳에서 다운로드 받아 PC 또는 Mac에 설치합니다.
설치하신 후 Mac은 “Terminal”을 Window는 “Node.js command prompt” 을 관리자 권한으로 실행합니다.

 

Install module for PhoneGap

Node.js의 모듈로 cordova, phonegap, plugman을 설치합니다.
이는 해당 모듈을 이용해서 빌드하고 플랫폼을 추가하고 다양한 명령을 통해 보다 쉽게 개발 환경을 만들어줍니다.

Install Platform

내가 개발하고자 하는 플랫폼을 결정하고 위와 같이 설치하시면 해당 프로젝트의 생성이 완료됩니다.
참 간단하죠!

[box type=”info”] 플랫폼을 추가하면 각각의 플랫폼에 적용되는 프로젝트가 생성되는데요 플러그인은 아무것도 포함이 되지 않게 됩니다. 이때, 하단의 Install Plugin을 통해서 플러그인을 먼저 설치하고 add platform을 해주신다면 생성된 프로젝트에 플러그인이 자동으로 세팅되게 되니 플랫폼 생성전 플러그인을 먼저 추가해주시기 바랍니다.[/box]

다만, Mac은 문제없이 설치되었는데, Window에서 Android의 경우 아래와 같은 에러를 만날 수 있습니다.

the command ‘android’ failed. make sure you have the latest android sdk installed, and the ‘android’ command <inside the tools/ folder> added to your path. output:]

이와 같은 에러를 만나는 경우 Windows에서의 해결 방법은 다음과 같습니다.

  1. Apache Ant 사이트의 다운로드 섹션(http://ant.apache.org/bindownload.cgi)에서 Ant를 다운로드 받으세요.
  2. 다운로드 받은 파일을 C:\Ant 에 위치시켜 주세요.
  3. 내 컴퓨터의 속성을 열어 고급시스템 설정 항목을 클릭합니다.
  4. 사용자 변수 블럭내 path 항목을 %JAVA_HOME%\bin;%ANT_HOME%\bin;C:\Users\안종태\AppData\Local\Bandizip\7z;C:\Users\안종태\AppData\Roaming\npm;%android%; 다음과 같이 설정해주세요.
  5. 그런 다음 시스템 변수 블럭내 ANT_HOME과 android 항목을 추가하시고 ANT_HOME에는 D:\Android\sdk\platform-tools;D:\Android\sdk\tools; android에는 C:\Ant로 설정해주세요.
  6. 이제 플랫폼을 추가하시면 정상적으로 추가가 될 것 입니다.
  7. 만약 이렇게 하는 경우 tools.jar를 찾을 수 없는 등의 메시지가 나온다면 반드시 JAVA_HOME의 경로가 제대로 설정되어 있는지 확인하시기 바랍니다.

위의 복잡한 절차가 귀찮으시다면 아래 이미지 상단의 path 변수에 %ANT_HOME%\bin;%android%; 를 추가하시고 Command Prompt에서 아래와 같이 작성해주시면 시스템변수로 바로 설정됩니다.
단, 반드시 안드로이드의 경로는 SDK를 설치한 위치를 확인하시고 자신의 경로에 맞게 찾아서 설정해 주셔야 합니다.

시스템 환경설정

 

Install Inner Plugin

플러그인의 명칭은 http://plugins.cordova.io/ 이곳 아니면 을 통해서 확인하시고 설치하시면 됩니다.
Plugman을 이용해 설치를 하시고 싶으시면 http://docs.phonegap.com/en/edge/plugin_ref_plugman.md.html 이곳을 확인하세요.

[box type=”info”] 플랫폼을 먼저 추가하셨다면 위와 같이 플러그인 add시 자동으로 해당 플랫폼에 자동으로 플러그인을 추가해줍니다.[/box]

 

Install Custom Plugin

Custom Plugin은 설치방법은 다음과 같습니다.

이런 형식으로 플러그맨(Plugman)을 이용해서 설치하시면 됩니다.
단, 반드시 설치하시려고 하는 플러그인 폴더내에 Plugin.xml 설정파일이 있어야 설치가 가능합니다.

Plugin.xml 작성방법은 http://docs.phonegap.com/en/3.0.0/plugin_ref_spec.md.html 이곳을 참고해주세요!
아래 inAppBrowser 플러그인의 plugin.xml 파일이오니 참고하세요!

 

 

Modify Old Plugin (Old plugin signature deprecated)

원래 아래 명기한 Plugin Signatures는 Cordova 2.1부터 둘다 사용이 가능했습니다만,
3.0이 되면서 구방식의 Signature가 Deprecated 되었습니다.

변경 전 (Deprecated)

 

변경 후 (3.0이후는 반드시 아래와 같이 사용)

작동이 안되거나 하는 경우 대부분 이 부분을 체크해보시면 플러그인이 잘 동작 할 것 입니다.
저도 이렇게 해서 2.9버전의 앱을 3.1로 무사히 업데이트 했습니다.

 

 

Published by

안반장

Web과 App 개발을 하고 있으며 최근 워드프레스에 관심이 많아져 네이버 카페 워드프레스 홈페이지의 TF팀으로 활동 중 입니다.개인적으로는 안반장의 개발 노트라는 블로그를 운영하면서 개발의 즐거움과 고충들을 차곡차곡 담아가고 있습니다.