폰갭(PhoneGap) 안드로이드 스튜디오에 소스 연결해서 사용하는 방법

폰갭(PhoneGap) 안드로이드 스튜디오에 소스 연결해서 사용하는 방법

 

환경: Eclipse Mars, Android 4.2.2

 

폰갭에는 프로젝트 생성할 수 있는 PhoneGap Desktop App 프로그램이 있습니다. 이것은 NodeJS 로 구동되는 프로그램입니다. 이 툴을 이용해서 프로젝트를 만들고 안드로이드 개발 프로젝트를 생성할 수 있습니다. 안드로이드 스튜디오를 이용해서 제대로 추출이 되는지 테스트 해 보겠습니다.

 

먼저 폰갭 사이트에서 PhoneGap Desktop App 을 다운 받습니다. 실행하는 방법은 이전 포스팅에서 확인하세요. 참고로 PhoneGap Desktop App 는 Node JS 로 구동되는 프로그램입니다.

 

안드로이드 폰캡 PhoneGap 설치방법, 기본 앱 만들어서 실행하는 방법

 

▼ 프로그램을 실행하고 Create new PhoneGap project 메뉴를 눌러 프로젝트 생성 작업을 시작합니다.

 

▼ 가장 기본 프로젝트인 Hello World 를 체크하고 Next 버튼을 누릅니다. 

 

▼ 두 번째 화면에서 프로젝트를 생성할 위치와 이름을 정합니다. 그리고 아래로 내려가 Create project 버튼을 클릭합니다. 

 

▼ 샘플 프로젝트 생성이 완료되면 소스 위치를 알려 줍니다. 해당 폴더로 이동하기 위해 링크를 클릭합니다. 아래에 나와 있는 서버 주소는 폰갮 화면을 띄울 수 있는 URL 입니다. 

 

▼ 브라우저를 이용해서 URL 로 접속해 보세요. PhoneGap 이 만든 샘플 화면을 볼 수 있습니다. 

 

▼ 폰갮에서 만든 웹 페이지 소스는 www 폴더에 있습니다. 지금까지 만든 것은 웹 소스입니다. 다음은 안드로이드 앱에서 동작할 수 있도록 안드로이드용 프로젝트를 생성해야 합니다. 

 

◎ 안드로이드 앱 개발을 위한 프로젝트 생성하기

 

▼ 첫 번째로 Node JS 에서 사용할 PhoneGap 모듈을 다운받아야 합니다. 명령어는 다음과 같습니다.

> npm –g install phonegap 

 

▼ 다음은 샘플 소스가 있는 폴더로 들어가서 phonegap 을 이용해 안드로이드 프로젝트를 platform 폴더에 추가해 보겠습니다. 명령어는 다음과 같습니다.

> phonegap platform add android

 

▼ 결과는 다음과 같습니다. platforms 에 있는 browser 폴더 외에 android 가 추가되었습니다. 이것이 바로 안드로이드 앱 개발용 프로젝트 입니다. 

 

▼ 제대로 구동이 되는지 안드로이드 스튜디오로 확인해 보겠습니다. 프로그램을 실행하고 프로젝트를 추가하기 위해 New > Import Project 메뉴를 선택합니다. 

 

▼ Import 프로젝트 선택 팝업창에서 이전에 만들어 둔 platforms 폴더안에 android 를 선택합니다. 

 

▼ 성공적으로 추가가 되었다면 빌드를 진행해 보겠습니다. 프로그램 상단에 Run As 버튼을 클릭합니다. 

 

▼ 에뮬레이터에서 실행한 결과 웹 브라우저에서 보았던 것과 동일합니다. 이렇게 NodeJS 에서 수정한 내용을 phonegap 모듈로 안드로이드 프로젝트로 추출이 가능합니다.