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

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

 

환경: Android Studio

 

폰갭(PhoneGap)은 하이브리드 앱을 좀더 쉽게 구현할 수 있도록 도와 주는 모바일 개발 프레임워크입니다. HTML 과 CSS 를 이용해서 멀티 플랫폼 모바일 앱을 빠르고 쉽게 구현할 수 있도록 도와 줍니다. 특히 웹 화면에서 스마트폰의 디바이스를 쉽게 제어할 수 있도록 인터페이스를 제공합니다. 하이브리드 앱을 만들고 싶은 사람들에게는 필수 아이템입니다. 오늘은 개발 환경을 세팅하고 샘플을 실행하는 방법에 대해 알아 보겠습니다. 

 

▼ 먼저 폰갭 프레임워크를 다운받기 위해서 사이트에 접속해야 합니다. 아래 링크를 클릭해서 메인에 접속한 후 상단 Desktop App 탭을 클릭합니다. 그리고 Desktop App 에 OS 를 선택합니다.

http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/#win

 

▼ Windows 용 exe 파일을 다운받아 설치하고 실행합니다. 

 

▼ 실행하고 나면 프로그램이 뜹니다. 특이한 것은 실행한 PhoneGap 프로그램에서 프로젝트 생성, 관리가 가능하다는 것입니다. 여기서 생성한 프로젝트를 안드로이드 스튜디오에 Import 해서 개발하는 방법에 대해서는 다음에 자세히 알려 드리겠습니다. 먼저 샘플 프로젝트를 하나 만들어서 실행해 보겠습니다. PhoneGap 툴에서 왼쪽 사이드에 “+” 탭을 클릭합니다. 그리고 Create new PhoneGap project 메뉴를 클릭합니다. 

 

▼ 두 번째 화면에서 생성한 프로젝트에 포함시킬 템플릿을 결정합니다. 목록에서 하나를 선택하고 아래로 내려가 Next 버튼을 클릭합니다. 

 

▼ 세 번째 화면에서는 생성한 프로젝트를 관리할 폴더를 지정해야 합니다. 폴더 주소와 프로젝트 이름을 지정하고 Create Project 버튼을 클릭합니다. 

 

▼ 프로젝트 생성 과정에서 외부 네트워크에서 프로그램을 엑세스하기 위해 방화벽에서 차단하지 못하도록 허용을 해야 합니다. 이렇게 허용을 하면 자신이 가지고 있는 스마트폰에서 바로 실행해 볼 수 있습니다. 그러니까 실행한 PhoneGap 프로그램은 생성한 프로젝트의 결과를 띄워서 볼 수 있도록 서버 역할까지 하는 것입니다. 

 

▼ 프로젝트를 생성하는 순간 서버가 실행되고 외부에서 결과물을 볼 수 있도록 아이피가 공개됩니다. 그림처럼 화면 하단에 있는 IP 주소를 클릭해 보세요. 브라우저에서 바로 결과물을 확인할 수 있습니다. 

 

◎ 안드로이드 스마트폰과 연결하는 방법

 

▼ 다음은 로컬 브라우저가 아닌 스마트폰에서 확인해 보겠습니다. PC 에서 개발하고 있는 폰캡 프로젝트를 스마트폰에서 실행해 보려면 Connection 앱을 설치해야 합니다.  앱 스토어에서 PhoneGap Developer 을 설치합니다. 

 

▼ 스마트폰에서 PhoneGap Developer 을 실행하고 Server Address 입력란이 나오면 PhoneGap 프로젝트 생성 후 받은 서버 IP 를 넣어야 합니다. 포트도 동일하게 입력해야 합니다. 

 

▼ 스마트폰에서 실행한 결과는 다음과 같습니다. 이제 PC 에서 개발하고 있는 폰갭 소스는 스마트폰으로 확인이 가능하겠죠.