본문 바로가기

programmer/컴퓨터 정보

폰갭(phonegap) 설치 및 예제 실행하기

폰갭(phonegap) 설치 및 예제 실행하기




안녕하세요. 오늘은 폰갭(phonegap)에 대해 알아보고, 예제를 실행해보겠습니다. 폰갭은 하이브리드 앱을 만들 수 있는 오픈소스 플랫폼입니다. 하이브리드 앱은 웹 언어로 만든 웹 어플리케이션을 어떤 포장 과정을 거쳐 ios나 안드로이드 같은 플랫폼에 알맞게 나온 모바일 앱을 말합니다. 즉, 웹 어플리케이션을 폰갭을 통해 안드로이드에서 쓸 수 있는 모바일 앱을 만들거나 ios에서 쓸 수 있는 모바일 앱을 만들 수 있다는 것 입니다.

.



그러면 폰갭을 설치하고 예제를 실행해보겠습니다.


폰갭 예제는 http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/ 이 곳의 과정을 따라가셔도 되고 저는 node.js와 안드로이드 스튜디오(Android studio)를 이용해서 폰갭을 설치하고 예제를 실행해보겠습니다.



1.



먼저 Android SDK를 다운받으셔야 합니다. 혹시 다운을 받지 않은 상태라면 http://developer.android.com/sdk/installing/index.html 이곳으로 이동해 다운을 받고 압축을 해제합니다. 압축을 해제하면 platform-tools 폴더와 tools 폴더가 있습니다. 이 두 폴더의 경로를 Path에 추가합니다.
phonegap은 안드로이드 sdk의 툴들을 이용하기 때문에 설치하셔야 합니다.

2.


npm install -g phonegap



먼저 npm을 통해 phonegap을 다운받습니다. -g를 붙여 전역에서 폰갭을 사용할 수 있도록 합니다.


enter image description here


설치가 완료되면 phonegap -v를 입력하여 설치를 확인합니다. 위 사진처럼 버전이 나오면 설치에 성공한 것입니다.

3.



이제 프로젝트를 생성해보겠습니다. 먼저 프로젝트를 생성할 디렉토리로 이동하시고요. 다음과 같은 양식에 맞춰서 입력하시면 phonegap 프로젝트가 생성됩니다.

phonegap create [경로(생성할 디렉토리이름)] [패키지명] [프로젝트명]



enter image description here


위의 사진처럼 하시면 됩니다. 그리고 다음 사진처럼 생성된 디렉토리로 이동합니다.


enter image description here

4.



이제 명령을 다음과 같이 입력합니다. 이 과정은 안드로이드에서 실행할 수 있도록 빌드하는 명령입니다.

phonegap build android



일정 시간을 기다리면 완료됩니다.


다음으로 안드로이드 스튜디오를 열고 File -> Open을 눌러 우리가 프로젝트를 설치한 폴더로 이동합니다. 폴더 안에는 hooks, platforms, plugins, www 폴더가 있습니다. 원래 platforms 폴더는 비어있는 상태인데요. 방금 빌드 안드로이드 명령을 통해 platforms안에 안드로이드 폴더가 생겼을겁니다. android 폴더를 선택하고 OK를 누릅니다.


그리고 에뮬레이터를 실행합니다.


에뮬레이터를 실행하고 Shift+F10을 통해 앱을 설치하고 실행합니다. 또는 프로젝트 폴더에서 phonegap run android 명령어를 통해 에뮬레이터에 앱을 설치하고 실행할 수 있습니다.


enter image description here


이렇게 나온다면 index.html이 정상적으로 실행된 것입니다! 지금까지 폰갭을 설치하고 예제를 실행하는 것까지 완료했습니다. 고생하셨습니다!