'phonegap'에 해당되는 글 1건

  1. 2014.06.18 [PhoneGap] Cordova 3.0 설치 (Android, Tizen - Windows) 1

[ 기본 준비 ]

  • Android와 관련된 모든 준비(Andoird SDK, Java 설치 등)는 되어 있어야 한다.
  • Eclipse 중심으로 Android SDK 설치가 되어 있어야하고, Android Studio가 설치되있어도 된다.
  • Java는 1.6이상의 버전이 설치 되어 있어야 한다.
  • Java와 Android SDK에 대한 Path 설정이 되어 있어야한다.
    ex)
    JAVA_HOME : C:\Program Files\Java\jdk1.7.0_45
    Path : C:\Program Files\nodejs\;C:\Program Files\Java\apache-ant-1.9.4\bin;C:\Users\YMJ\android-sdks\tools;C:\Users\YMJ\android-sdks\platform-tools


[ Install Node.js ]



Node.js를 http://nodejs.org/ 에서 다운로드 받아 PC 또는 Mac에 설치합니다.

설치하신 후 Mac은 “Terminal을, Window는 “Node.js command prompt관리자 권한으로 실행합니다.


[ Install ANT ]

ANT는 반드시 설치해야 됩니다.

그렇지 않으면 platform 설정 시 error가 발생할 수 있습니다.


1. Apache Ant(http://ant.apache.org/bindownload.cgi)에서 파일을 다운받습니다.

'Current Release of Ant' 아래에 있는 .zip archive를 받으면 됩니다.

2014.06.18 현재 'apache-1.9.4-bin.zip'이 최신버전입니다.



2. 적당한 위치에 압축을 풉니다.

ex)  C:\Program Files\Java\apache-ant-1.9.4


3. 환경 변수에 ANT의 bin 경로를 등록합니다. (각 폴더는 ';'으로 구분합니다.)

[제어판] - [시스템] - [고급 시스템 설정] - [고급 탭] - [환경변수]



Path : C:\Program Files\Java\apache-ant-1.9.4\bin



4. 커맨드(cmd) 라인에서 ant 를 입력하여, 잘 설치되었는지 확인해봅니다.

(ant -version : ant  설치 버전 확인)




[ Install git ]

[Error: Error fetching plugin: Error: "git" command line tool is not installed: make sure it is accessible on your PATH.] 라는 메세지가 나오는 경우 git이 설치 되지 않아서 보여지는 메세지이다.


이전 버전과 다르게 코드에서 이용하고자 하는 js API를 Git에서 선택적으로 추가해서 사용하는 구조이다.


1. 다음 홈페이지 ->(https://help.github.com/articles/set-up-git)에 들어가서 다운받습니다.



2. 다운 받은 파일을 설치합니다.

2.1. 설치 도중 다음과 같은 화면이 나타나는데, 여기서 2번째 선택사항을 눌러주세요.



 선택항목

설명 

Use Git Bash only

윈도우의 환경변수를 설정하지 않고 "Git Bash"툴 만을 사용
보통은 동작에 문제가 없다. 

Run Git from the Windows Command Prompt 

윈도우의 환경변수에 Git 환경변수를 설정한다.

Dos cmd창으로도 동작할 수 있게 한다. 

Run Git and include Unix tools from the Windows Command Prompt 

Dos Cmd로부터 Git및 Perl 등의 부속 unix 툴을 이용할 수 있도록 설정한다.

일반적으로 사용할 때에는 선택하지 마세요. 


2.2. 암호화 통신 설정

Git은 암호화 통신에 ssh를 이용하지만, SSH 클라이언트로서 PuTTy툴을 이용할 수도 있습니다. PuTTy를 이용하는 경우는 아래 그림에서 "Use PLink"를 선택하고, "PuTTy"에 포함되는 "PLink.exe"의 패스를 지정합니다.



3. "Git Bash" 프롬프트에서 버전을 확인 할 수 있습니다.

$ git --version




[ Install module for PhoneGap ]



> npm install -g cordova

> npm install -g phonegap

> npm install -g plugman

Node.js의 모듈로 cordova, phonegap, plugman을 설치합니다.

이는 해당 모듈을 이용해서 빌드하고 플랫폼을 추가하고 다양한 명령을 통해 보다 쉽게 개발 환경을 만들어줍니다.


[ Project Create ]

(프로젝트가 위치 할 디렉토리로 이동 후) 커맨드 창에서 새로운 프로젝트를 생성합니다.

> cd 디렉토리위치

> cordova create HelloWorld com.example.hello "hello"


생성 후, 디렉토리에 가보면 프로젝트가 생성된 것을 확인할 수 있습니다.



"hello" 프로젝트에 들어가보면 "platforms" 폴더가 비어 있는 것을 보실 수 있습니다.

이제 이 곳에 원하는 플랫폼(android platform)을 add 해줍니다.

(본인이 개발하고자 하는 플랫폼을 위와 같이 설치하면 해당 프로젝트의 생성이 완료됩니다.)

> cd hello

> cordova platform add android


설치가 완료되면, "platforms" 디렉토리에 android를 위한 프로젝트가 하나 add 된 것을 확인 할 수 있습니다.



이 후 Eclipse에서 Import('Existing Android Code Into Workspace')해서 사용하면 됩니다.


[ Plugin 설치 ]

프로그램에서 사용하고자 하는 플러그인을 추가한다.

3.0 이전버전까지는 기본 js파일에 모든 api가 내장되어 있었지만, 3.0부터는 필요한 것만 직접 추가해서 사용하는 방식이다.

> cordova plugin add <git-url>


(plugin url)

Basic device information :

$ cordova plugin add org.apache.cordova.device

Network Connection and Battery Events :

$ cordova plugin add org.apache.cordova.network-information
$ cordova plugin add org
.apache.cordova.battery-status


Accelerometer, compass, and geolocation :

$ cordova plugin add org.apache.cordova.device-motion
$ cordova plugin add org
.apache.cordova.device-orientation
$ cordova plugin add org
.apache.cordova.geolocation

Camera, Media playback and Capture :

$ cordova plugin add org.apache.cordova.camera
$ cordova plugin add org
.apache.cordova.media-capture
$ cordova plugin add org
.apache.cordova.media


Access files on device or network(File API) :

$ cordova plugin add org.apache.cordova.file
$ cordova plugin add org
.apache.cordova.file-transfer

Notifications via dialog box or vibration

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

Contacts

$ cordova plugin add org.apache.cordova.contacts

Globalization

$ cordova plugin add org.apache.cordova.globalization

Splash Screen

$ cordova plugin add org.apache.cordova.splashscreen

Open new browser windows (In-app browser) :

$ cordova plugin add org.apache.cordova.inappbrowser

Debug console

$ cordova plugin add org.apache.cordova.console


'IT' 카테고리의 다른 글

[JS] 전문가교육 2일차 - 오후  (0) 2014.05.25
[JS] 전문가교육 2일차 - 오전  (0) 2014.05.25
[JS] 전문가교육 1일차 - 오후  (0) 2014.05.24
[JS] 전문가교육 1일차 - 오전  (0) 2014.05.24
Posted by 밍쫑
,