안드로이드 스튜디오에서 PhoneGap 프로젝트 불러오기

이번에는 "PhoneGap CLI 설치하기" 에서 만들었던 HelloWorld 프로젝트를 안드로이드 스튜디오에서 Import 하여 보겠습니다. 앞에서 폰갭의 명령행 인터페이스(CLI) 를 설치해서 프로젝트를 생성했었습니다.

 

PhoneGap 프로젝트를 Android Studio나 Eclipse 같은 IDE 툴에서 열어서 사용하는 이유는 디버깅 기능을 사용하고, 실제 휴대폰에서 테스트를 하거나, 출시를 위한 사인 작업등을 쉽게 할 수 있기 때문입니다. 또한 PhoneGap 만으로 처리할 수 없을때 플러그인을 개발하여 사용하기 위해서도 사용됩니다.

 

PhoneGap 프로젝트를  Android Studio 로 열었을때 www 폴더를 제외한 다른 부분은 수정을 하지 않는것이 좋습니다. 수정을하게되면 platforms 폴더 아래의 소스가 수정이 되는데, 여기는 PhoneGap CLI 에서 cordova prepare 명령을 사용하면 코드를 덮어써 버리게 됩니다.

 

프로그램을 개발할때 보통  소스를 SVN 과 같은 형상 관리 도구를 사용해서 관리하게 됩니다. 이렇게 SVN 을 사용하게 되면 PhoneGap 프로젝트 전체인 HelloWorld 폴더 부터 관리하고 싶은데, IDE 에서는 platforms 아래 있는 정보만 사용하므로 IDE에 통합되어 있는 SVN 기능을 사용하여 처리할 수 없습니다.

 

PhoneGap 프로젝트 폴더 전체를 SVN 으로 관리하려면 별도로 tortoise svn 같은 윈도우 탐색기와 통합된 도구를 사용하여 처리하는게 편리합니다.

 

 

1. 안드로이드 스튜디오에서 PhoneGap 안드로이드 프로젝트 Import 하기

- File -> New -> Import Project... 를 선택합니다.

- HelloWorld 프로젝트 폴더 아래의 platforms\android 폴더를 선택합니다.

  이 예제에서는 C:\workspace\phonegap\HelloWord\platforms\android 폴더 입니다.

2. 프로젝트 폴더 구조

프로젝트를 Import 하면 CordovaLib 와 android 두 개의 프로젝트가 만들어 집니다. Cordova 프로젝트는  PhoneGap 의 엔진이 됩니다. 이 부분은 수정할일이 없습니다. android 프로젝트가 필요한 기능을 구현하기 위해서 작업을 해야할 부분입니다. 폴더 구성 및 파일에 대해 간략히 알아보겠습니다.

- manifests\AndroidManifest.xml 은 만들고 있는 안드로이드 앱을 정의하는 파일 입니다. 앱의 이름, 버전, 앱이 실행될때 보여질 화면, 앱이 사용하는 기능들(Network, Camera, Record 등) 에 대한 사용 권한 요청 등 이 들어 갑니다.

- java 폴더 안에는 두 개의 자바 패키지가 보입니다.

com.tistory.pentode 패키지는 처음 프로젝트를 생성할 때 지정된 패키지 입니다.  주로 이 패키지로 작업을 하게 됩니다.

org.apache.cordova 패키지는 cordova 플러그인들이 설치되어 있는 패키지 입니다. PhoneGap 은 html 과 JavaScript 를 사용하여 프로그램을 작성하게 됩니다. 이러한 표준 기술을 사용함으로써, 동일한 코드가 Android 및 iOS와 같은 서로 다른 기기에서도 동작 할 수 있게 됩니다. 하지만 OS 가 다르므로 그 사이를 연결해 주는게 필요합니다. 이것이 Cordova 엔진과 Plug-in 들 입니다.

html과 JavaScript 로 된 코드는 서로 다른 폴랫폼에서 재사용 되지만, 엔진과 플러그인들은 각 플랫폼에 맞는것이 설치가 되어 집니다. 그래서 PhoneGap으로 만들어진 앱을 하이브리드 앱이라고 합니다. (실제 html과 JavaScript 가 모든 플랫폼에서 100% 동일하지는 않습니다. 동일한 기능을 하는 플러그인이라도 플랫폼마다 사용법이 차이가 날 수 있고 각 플랫폼에 특화된 서비스들이 있어서 달라지는 부분이 발생합니다.)

- assets\www 폴더가 HTML, JavaScript 파일들이 있는 곳 입니다. 웹으로 비유하자면 웹루트가 되는곳 입니다. 실제로 작업도 홈페이지 만들듯이 프로그램을 작성합니다. index.html 파일이 최초로 로딩되는 페이지 입니다.

- res 폴더는 하이브리드 앱의 웹 부분이 아닌 Java 쪽 자원이 들어가는 부분입니다. 이미지 앱아이콘, 앱에서 사용될 메세지가 있는 xml 파일 들이 있습니다.

- res\xml 폴더 아래에 config.xml 파일 있는데, 이 파일은 폰갭의 플러그인 설정파일 입니다. 현재 설치된 플러그인의 목록을 볼 수 있고, 각 플러그인에 필요한 설정을 할 수 있습니다. 

이것으로 폰갭 프로젝트를 안드로이드 스튜디오에서 불러 사용하는 방법과 프로젝트 파일구조에 대해 간략하게 알아봤습니다.