2013년 12월 11일 수요일

Phonegap (Cordova) 3.2 프로젝트 만들고 플러그인 추가 하기

phonegap VS cordova VS adobe phonegap build ??????
: 원래의 이름은 phonegap 이고 apache제단으로 편입되면서 cordova라는 이름을 가지게 된것이고 폰갭을 이용하는데 있어서 많은 지식없이도 빌드를 쉽게할수 있도록 서비스를 제공해주는 곳이 adobe phonegap build 이다.
adobe phonegap build는 1개까지는 무료로 제공해주고 그 이후 부터는 유료다.

api 참고는 cordova 사이트에서 하는것을 추천 한다.
http://cordova.apache.org/docs/en/3.2.0/index.html



Cordova  설치
Cordova 설치서 부터 프로젝트 생성 플러그인 추가/삭제 까지 너무 친절하게 나와 있다.
영어를  거의 못하는 나조차도 명령어만 따라 쳐보고 감이 올 정도다.
아래를 참고 하면 더욱더 좋다.
http://cordova.apache.org/docs/en/3.2.0/guide_cli_index.md.html#The%20Command-Line%20Interface


 
Cordova를 설치하기 전에 필요한 준비물이 있다.
node.js 와 apache 제단은 ant가 필요하다.
http://www.nodejs.org/download/
node.js 를 다운받아 설치 해주고

http://ant.apache.org/bindownload.cgi
최신번전 압축파일을 받아 주고,
압축을 풀고 bin폴더를 환경변수에 잡아주도록 한다.

환경변수 잡는 방법은 따로 검색을 해보도록 한다.

이렇게 두가지를 다했다면 Cordova 설치 준비가 끝난 것이다.

Cordova는 2.x 버전 까지는 다운받아서 설치를 해야하지만 3.x버전 부터는 커맨트 창에서 명령어를 입력하는 방식으로 설치를 하게 된다.


#윈도우 사용자라면 sudo를 붙이지 않는다. 그리고 '$'는 입력하지 않는다.

Cordova 설치
$ sudo npm install -g cordova

프로젝트 생성
  $ cordova create hello com.example.hello HelloWorld
  $ cd hello


사용할 플랫폼 등록
    $ cordova platform add ios
    $ cordova platform add amazon-fireos
    $ cordova platform add android
    $ cordova platform add blackberry10
    $ cordova platform add firefoxos
$ cordova platform remove blackberry10
    $ cordova platform rm amazon-fireos
    $ cordova platform rm android

빌드
  $ cordova build
플러그인 등록/삭제
$ cordova plugin add org.apache.cordova.device
$ cordova plugin add org.apache.cordova.network-information
$ cordova plugin add org.apache.cordova.battery-status

$ cordova plugin add org.apache.cordova.device-motion
$ cordova plugin add org.apache.cordova.device-orientation
$ cordova plugin add org.apache.cordova.geolocation
$ cordova plugin add org.apache.cordova.camera
$ cordova plugin add org.apache.cordova.media-capture
$ cordova plugin add org.apache.cordova.media
$ cordova plugin add org.apache.cordova.file
$ cordova plugin add org.apache.cordova.file-transfer

$ cordova plugin add org.apache.cordova.dialogs
$ cordova plugin add org.apache.cordova.vibration

$ cordova plugin add org.apache.cordova.contacts
$ cordova plugin add org.apache.cordova.globalization
$ cordova plugin add org.apache.cordova.splashscreen
$ cordova plugin add org.apache.cordova.inappbrowser
$ cordova plugin add org.apache.cordova.console
$ cordova plugin rm org.apache.cordova.console
    $ cordova plugin remove org.apache.cordova.console 
추가로 필요한 플러그인들은 필요에 따라 만들어서 꼽을수도 있고 다른 사람이 만들어 놓은 플러그인도 꼽아서 쓸수 있다.그것은 아래서 다시 알아 보자.


이제 Cordova 프로젝트가 만들어 졌으니 Android 프로젝트 만들어볼 차례다

이클립스에서 좀전에 생성된 hello 폴더로 들어가서 Android Applicatoin Project를 import하면 된다.

이제 이미 개발된 html / js / css 를 asset/www 폴더로 이동시키고,
res/xml/config.html 파일 안에서 index.html로 된부분을 원하는 시작페이지 경로로 바꿔 주기만 하면 된다.




plugman
Cordova 3.2버전에서는 plugman  이라는 것이 제공되는데 이것은 프로젝트 진행중에도 플러그인은 꼽았다 제거할수 있는 매우 유용한 툴이다.

설치
$ npm install -g plugman

plugin  등록 / 삭제
$ plugman install --platform <ios|amazon-fireos|android|blackberry10|wp7|wp8> --project <directory> --plugin <id> [--www <directory>] [--plugins_dir <directory>]
$ plugman uninstall --platform <ios|amazon-fireos|android|blackberry10|wp7|wp8> --project <directory> --plugin <id> [--www <directory>] [--plugins_dir <directory>]
 <>는 와야할 것이고 [] 없어도 상관없는 것이다.
아래와 같이 작성하면된다.

$ plugman install --platform android --project c:\workspace\HellWorld --plugin org.apache.cordova.Device
$ plugman install --platform android --project c:\workspace\HellWorld --plugin https://github.com/phonegap-build/FacebookConnect.git --variable APP_ID=123345 --variable APP_NAME=Hello
 위에서 보면 알수 있듯이github 주소로도 등록이 가능한데 이때 한가지 조건이 필욯다.
CLI 툴이 설치 되어 있어야 한다.
http://git-scm.com/downloads
CLI툴 중하나인 git-GUI 를 설치하면 에러 없이 git주소로도 plugin 등록이 가능해 진다.


## 추가적인 plugin이 필요한 경우
adobe phonegap build > plugin을 적극 활용하도록 하자 많은 플러그인들을 만날수 있다.


댓글 없음:

댓글 쓰기