본문 바로가기

개발 이야기/iPhone, iPad & OS X

[하이브리드앱/PhoneGap on iPhone] 01. 개발 환경 구축하기



스마트폰 앱을 HTML+Javascript 기반의 웹으로 만들 것이냐? Java 나 Objective-C를 기반으로 한 앱으로 만들 것이냐?
"웹"(Web Application)으로 개발하자니 단말의 다양한 리소스를 활용하는데 한계가 있고,
"앱"(Native Application)으로 개발하자니 다양한 스마트폰OS에 대응하는 것이 쉽지만은 않다.

두 방법 사이의 간격(Gap)을 매꿔주기 위해 등장한 방법이 바로 하이브리드앱(Hybrid App)이며,
이러한 하이브리드앱을 위한 오픈 소스 플랫폼이 바로 PhoneGap 이다.

http://www.phonegap.com/

PhoneGap에 대한 개념 참고 : 웹플랫폼에 대한 단상 : BONDI & PhoneGap
 
먼저 iPhone 을 위한 개발 환경을 꾸며본다.

0. iPhone 기본 개발 환경 꾸미기
  이부분은 당근 구성되어 있어야 하는 부분....
  혹시 PC 기반으로 iPhone 개발 환경을 꾸미고자 한다면.... 참고

1. Git 설치하기
  Git는 SVC, SVN 같은 프로젝트 관리 툴이다.
  아래에서 Pre-compiled Installer 를 다운받아 패키지 설치하면 git 설치는 끝이 난다.
 
   http://help.github.com/mac-git-installation/


 
2. iPhone 용 phone-gap 다운받기
   터미널에서 설치를 원하는 디렉토리로 이동 후 다음 쉘을 실행하면 git를 통해 해당 모듈이 설치된다.

   git clone git://github.com/phonegap/phonegap-iphone.git


3. PhoneGap Xcode Template 설치하기

   터미널에서
  1) phonegap-iphone 으로 이동
  2) 'git submodule init' 실행
  3) 'git submodule update' 실행
  4) 'make' 실행. 해당 작업이 끝나면 PhoneGapLibInstaller.pkg 파일이 생성된다.
  5) Xcode를 완전히 종료 시킨 후 패키지를 설치한다.

4. Xcode 에서 PhoneGap 프로젝트 생성하기
  XCode를 실행한 후 새 Xcode 프로젝트를 생성하려면 다음과 같이 User Templates에 PhoneGap이 추가된 것을
  확인할 수 있다.
 


5. 프로그램 삽입
  PhoneGap-based Application을 선택하여 프로젝트를 생성하면 다음과 같은 개발 환경이 나타난다.
  여기서 www 폴더의 HTML 파일을 편집하여 앱을 제작하면 된다.
  나머지 디렉토리나 파일들은 일반 앱 개발과 동일하게 이해하면 된다.
 


6. 빌드 및 실행
  만일 시뮬레이터에서 실행을 원하는 경우 IDE 좌측 상단의 "Base SDK | Debug" 부분을  Simulator로 수정해 주어야 한다.
  그렇지 않은 경우 컴파일 오류가 발생한다.
  Build and Run을 누르면 다음과 같이 하이브리드앱이 실행되는 것을 확인할 수 있다.