Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

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

 

환경: Eclipse Mars, Android 4.2.2

 

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

 

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

 

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

 

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

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

 

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

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

 


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

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

 

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

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

 

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

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

 

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

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

 

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

 

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

> npm –g install phonegap 

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

 

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

> phonegap platform add android

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

반응형
Posted by 녹두장군1
,