MAC OSX에서의 PhoneGap 개발환경 구성에 대해 알아 보겠습니다. 요즘 특정 Hybrid Framework에서는 Windows 환경에서도 iOS Application을 Build하는 방법을 제공하지만, Open Source인 PhoneGap에서는 아직 제공하지 않으므로 MAC OSX 환경에서 개발환경을 구성하는 방법에 대해 알아 보겠습니다.
아래부터는 편의를 위해 경어는 생략하도록 하겠으니 양해 바랍니다.
1. XCode 설치
XCode는 Apple AppStore나 홈페이지에서 다운로드 할 수 있다. Apple AppStore에서 다운로드 할 경우 최신 버전만 다운로드 가능하므로 이전 버전의 XCode를 다운로드하고 싶을 경우 홈페이지에 접속하여 다운로드 받도록 한다. 홈페이지 아래의 경로로 접근하면 다운로드 가능하다.

https://developer.apple.com/downloads

XCode는 현재 OS 버전에 따라 설치할 수 있는 버전이 제한되며, 최신 버전의 iOS 지원을 위해서는 개발에 사용하는 MAC Book, iMac의 OS 버전도 최신으로 업데이트해야 한다.
2. Command Line Tools 설치
혹시나 Command Line Tools가 아직 설치되어 있지 않다면, 1번 과정과 동일한 방법으로 Command Line Tools를 설치한다.
3. Node.js 설치
PhoneGap 3.5 버전부터는 다운로드는 허용하지 않으며, CLI를 통한 설치만 허용한다. 해당 작업이 Node.js 기반으로 구성되었으므로 먼저 아래 URL로 접근하여 Node.js를 설치한다. -. http://nodejs.org

4. PhoneGap 설치
PhoneGap 3.5 부터는 CLI를 통한 다운로드만 허용하고 있으므로 npm install 명령으로 설치한다. Command Window를 실행한 후 아래 화면과 같이 명령어를 입력한다.

명령어를 입력하면 NodeJS 모듈이 PhoneGap을 다운로드하여 자동으로 설치한다. 설치가 종료되면 Command Window에서 cordova –v 라고 입력하여 설치한 PhoneGap version을 확인할 수 있다.
5. PhoneGap 프로젝트 생성
위 과정으로 PhoneGap 프로젝트 생성을 위한 준비가 끝났다. 실제 프로젝트를 생성하여 개발 툴인 XCode로 반입하는 방법은 아래와 같다.

1. 임시 workspace 생성

PhoneGap CLI로 생성한 프로젝트를 보관할 폴더를 하나 만든다. 각자 관리하기 편한 경로에 생성하면 된다. 일단 Sample로는 /Users/계정/Documents/phonegap/workspace/ 로 생성하였다.

2. PhoneGap 프로젝트 생성

 PhoneGap 프로젝트는 CLI로 생성할 수 있으므로 Command Window를 열고 /Users/계정/Documents/phonegap/workspace/로 이동한다. 이동한 후 cordova create 명령으로 PhoneGap 프로젝트를 생성할 수 있다. 생성하는 과정은 아래 그림을 참고한다.

실행한 결과를 보면 com.edu.bbs 라는 아이디를 가진 MobileBBS라는 프로젝트를 생성하였는데, 그 경로가 /Users/계정/Documents/phonegap/workspace/mobileBBS 에 생성되었다는 결과가 표시되었다.

3. Platform 추가

프로젝트를 생성했으면 프로젝트에서 사용할 Platform을 추가해야 한다. 당연히 이번에는 iOS를 추가해보자. 먼저 방금 생성한 프로젝트 폴더로 이동하여 cordova platform add 명령을 실행한다. 과정은 아래 그림을 참고한다.

4. XCode 반입

 이제 생성한 Project를 XCode로 반입해야 한다. MAC OSX에서 반입은 프로젝트 파일만 실행시키면 쉽게 XCode 프로젝트로 등록 가능하다. 방금 전 단계에서 iOS platform을 추가하였으므로 ./platform/ios/ 경로에 접근해보면 MobileBBS.xcodeproj 파일을 볼 수 있다. 해당 파일을 더블클릭하면 자동으로 XCode Project로 등록된다.




300x250
저작자표시 비영리 변경금지

'모바일 > 개발환경구성' 카테고리의 다른 글

PhoneGap 개발환경구성 (Windows)  (3) 2015.01.05
언젠가부터 Enterprise Mobile Application을 개발하는데 Hybrid 개발 방법이 많이 쓰이고 있습니다. 물론 Native나 Mobile Web과는 일정 부분의 득과 실이 있겠지만, 기업 입장에서 전체적인 개발 비용을 다운시킬 수 있고 하나의 소스로 유지보수 할 수 있는 점은 무시할 수 없는 매력으로 작용했을 듯 합니다.
이런 Hybrid 개발은 사용자가 직접 Android, iOS 등에서 WebView를 생성하여 개발하기도 하지만 공통적인 부분들을 이미 개발해 놓은 Hybrid Framework를 사용해서 많이들 개발합니다. 각 기업들에서 내놓은 솔루션들도 많지만 가장 많이 사용하는 건 아무래도 Open Source인 PhoneGap이 아닐까 합니다. 하여 이미 많이들 사용하고 계시지만 PhoneGap 개발을 위한 개발환경 구성에 대해 알아보도록 하겠습니다.
아래부터는 편의를 위해 경어는 생략하도록 하겠으니 양해 바랍니다.
1. ADT(Android Developer Tools) 설치
프로젝트에서 IDE로 사용할 ADT를 다운로드 받아 압축을 해제한다. 개발자들에게 압축하여 배포할 형태를 고려하여 폴더를 생성한다. ADT는 아래 경로에서 다운로드 받아 압축만 해제하면 된다.

http://developer.android.com/sdk/index.html

프로젝트에서는 Packaging 뿐만 아니라 WEB Resources도 같은 IDE에서 개발할 것이므로 HTML, JavaScript, CSS 개발에 필요한 Eclipse Plug-in을 설치한다. Eclipse에서 [Help] – [Install New Software] 메뉴를 선택하면 아래와 같은 창이 표시된다. 해당 창의 Work with 란에 아래 주소를 입력하면 아래 그림과 같은 미설치 Plug-in 목록이 조회된다.

 Eclipse에서 [Help] – [Install New Software] 메뉴를 선택하면 아래와 같은 창이 표시된다. 해당 창의 Work with 란에 아래 주소를 입력하면 아래 그림과 같은 Plug-in 목록이 조회된다. 입력할 주소 : http://download.eclipse.org/releases/kepler

조회된 Plug-in 목록 중 [Web, XML, Java EE and OSGi Enterprise Development] 좌측의 화살표를 클릭하면 해당 Category 하위의 Plug-in목록이 조회된다. 그 중 한 가지에 체크를 하여 설치한다.

 -. Eclipse Java Web Developer Tools
2. Node.js 설치
PhoneGap 3.5 버전부터는 다운로드는 허용하지 않으며, CLI를 통한 설치만 허용한다. 해당 작업이 Node.js 기반으로 구성되었으므로 먼저 아래 URL로 접근하여 Node.js를 설치한다. -. http://nodejs.org/ 페이지의 중간에 있는 큼직한 INSTALL 버튼을 클릭하면 *.msi 파일을 다운로드 하며, 해당 파일을 클릭하면 Node.js가 설치된다.

3. Git 설치
PhoneGap 3.x 대 버전부터는 Project를 생성할 때 사용하고자 하는 js API를 Git에서 선택적으로 추가해서 사용하는 구조이므로 Git도 설치 및 PATH에 잡혀 있어야 한다. Git는 아래 URL에서 다운로드하여 설치한다. -. http://msysgit.github.io/

4. PhoneGap 설치
PhoneGap 3.5 부터는 CLI를 통한 다운로드만 허용하고 있으므로 npm install 명령으로 설치한다. Command Window를 실행한 후 아래 화면과 같이 명령어를 입력한다.

명령어를 입력하는 NodeJS 모듈이 PhoneGap을 다운로드하여 자동으로 설치한다. 설치가 종료되면 Command Window에서 cordova –v 라고 입력하여 설치한 PhoneGap version을 확인할 수 있다.
5. Ant 설치
PhoneGap 3.x 에서는 Project 생성 시 CLI를 지원하며, Android Project 추가 시 내부적으로 Ant를 사용하여 Build 한다. 따라서 Android Project를 추가하기 위해서는 Ant 역시 설치되어 있어야 한다. Ant는 아래 URL에서 다운로드 할 수 있으며, 원하는 경로에 압축을 해제하면 된다. -. http://ant.apache.org/

Ant 는 설치 후 %ANT_HOME%을 등록하고 \bin 경로를 Path에 등록해 두어야 PhoneGap이 필요한 경로에서 Build 할 수 있다. 압축을 해제한 경로를 Path에 등록하자.

1. 시스템 변수 등록

[내 컴퓨터] – [속성]의 [고급 시스템 설정] 메뉴에서 [고급] 탭으로 이동한 후 [환경 변수] 버튼을 클릭하면 아래와 같은 창이 표시된다.

시스템 변수에 [새로 만들기] 버튼을 클릭하여 변수 이름에 ANT_HOME, 변수 값에 ANT 압축을 해제한 경로를 설정하도록 하자. 예를 들어 C:\Ant에 압축을 해제하였다고 하면 위와 같이 ANT_HOME 이라는 변수에 C:\Ant라는 값이 저장된다.

2. Path 추가

시스템 변수를 추가했으면 사용자 변수 중 Path 부분을 Edit 하여 해당 경로를 Path에 포함시켜야 한다. 사용자 변수 중 Path를 선택하고 [편집] 버튼을 누른 후 변수 값 가장 마지막 부분에 %ANT_HOME%\bin; 을 추가한다.
6. PhoneGap 프로젝트 생성
위 과정으로 PhoneGap 프로젝트 생성을 위한 준비가 끝났다. 실제 프로젝트를 생성하여 개발 툴인 ADT로 반입하는 방법은 아래와 같다.

1. 임시 workspace 생성

PhoneGap CLI로 생성한 프로젝트를 보관할 폴더를 하나 만든다. 각자 편한 이름으로 생성하면 된다. 일단 Sample로는 d:\phonegap_workspace 로 하나 생성했다.

2. PhoneGap 프로젝트 생성

PhoneGap 프로젝트는 CLI로 생성할 수 있으므로 Command Window를 열고 d:\phonegap_workspace로 이동한다. 이동한 후 cordova create 명령으로 PhoneGap 프로젝트를 생성할 수 있다. 생성하는 과정은 아래 그림을 참고한다.

실행한 결과를 보면 com.edu.bbs 라는 아이디를 가진 MobileBBS라는 프로젝트를 생성하였는데, 그 경로가 d:\phonegap_workspace\mobileBBS 에 생성되었다는 결과가 표시되었다.

3. Platform 추가

프로젝트를 생성했으면 프로젝트에서 사용할 Platform을 추가해야 한다. 일단은 Android 이번 범위에서는 Android 만 진행할 예정이므로 Android 만 추가해보자. 먼저 방금 생성한 프로젝트 폴더로 이동하여 cordova platform add 명령을 실행한다. 과정은 아래 그림을 참고한다.

4. ADT 반입

 생성한 Project를 ADT로 반입해야 한다. Application 개발 시 ADT를 사용할 것이므로 CLI에서 생성한 Project를 ADT로 반입하여야 개발환경 설정이 완료된다. Package Explorer 의 바로가기 메뉴에서 [New] – [Other..]를 선택한다.

[Android] – [Android Project from Existing Code]를 선택하고 [Next] 버튼을 클릭한다.

Root Directory에 방금 전 생성한 PhoneGap Project 경로를 선택하고 아래 쪽에 있는 [Copy projects into workspace] 옵션에 체크한 후 [Finish] 버튼을 클릭한다. 여기까지 하면 PhoneGap Project 를 ADT 환경으로 반입할 수 있다. 현재 Bug 비슷하게 발생하는 문제가 있어서 Project 반입 시 오류가 발생하면 지우고 재 반입하면 정상적으로 반입할 수 있다. 반입한 후 Package Explorer 는 아래 그림과 같다.

Native 개발은 [프로젝트 명-CordovaLib] 프로젝트에서 진행하며, 화면 등의 주 개발 영역인 Web 개발은 위 프로젝트에서 진행한다. Web Resources는 /assets/www/ 폴더 경로에 위치한다.


300x250
저작자표시 비영리 변경금지

'모바일 > 개발환경구성' 카테고리의 다른 글

PhoneGap 개발환경구성 (iOS)  (0) 2015.01.10

+ Recent posts

티스토리툴바