폰갭으로 어플 만들자. 폰갭 설치방법부터 실행까지

폰갭 설치

폰갭은 phonegap.com  사이트에서 툴을 모두 제공합니다. 다운로드하셔서 설치하면 하면 쉽게 만들어갈 수 있습니다.

폰갭의 툴이 점점 발전해서 이제는 쉽게 개발하고 만들어 갈 수 있도록 제공하고 있습니다. 

얼마 전까지 폰에 apk를 설치해야 테스트 가능했던 환경까지 실시간으로 수정하고 테스트할 수 있도록 제공하고 있습니다. 물론 아이폰과 안드로이드 모두 가능합니다.

http://phonegap.com/

폰갭 사이트에서 폰갭 프로그램을 다운로드하으세요.

Desktop app을 설치하시면 됩니다. 

폰갭사이트

윈도우용과 맥용으로 구분되어 있습니다. 해당하는 프로그램을 설치하시면 됩니다.

리눅스용은 없습니다. 가장 아쉬운 점이기도 합니다. 전 리눅스 환경에서 개발하는데 아쉽더군요. 맥이든 윈도우든 sublime text나 editplus 하나만 있으면 편집 가능하기 때문에 전 윈도우에 설치했습니다. 맥에 설치하셔도 됩니다.

다운로드하기

다운로드하여서 설치하시면 됩니다. 

데스크톱 앱은 거의 서버 역할을 한다고 보시면 될 것 같습니다. 

이제 개발하자 

뭐 폰갭 개발이 별건가 하는 개발자들 많을 겁니다. 맞습니다. 별거 아닙니다. 생산성 높은 툴이고 열심히만 하면 어플 괜찮은 것들을 만들 수 있습니다.

그래서 더욱 기본기가 있어야 된다는 말을 한 것은 그 바탕은 자바스크립트와 html 그리고 jquery를 열심히 해야 되겠죠.

자바로 개발하거나 오브젝트 c로 개발하시는 분들이 보시면 하수들의 이야기일 것 같지만 자바로 개발해도 웹뷰에서는 자바스크립트와 기본기는 똑같이 충실해야 합니다. 외부 api를 활용할 때 json와 xml에 대해 잘 이해하고 웹뷰를 활용해서 개발하게 되면 열심히 해야 되는 겁니다.

폰갭 데스크톱 앱 실행

이제 폰갭 데스크톱 실행하면 어플 개발 준비가 됩니다.

실행하면 이렇게 어플을 생성할 수 있도록 준비되어 있습니다. 컴파일은 빠져있으니 다음에 컴파일하는 것 까지 설명하겠습니다. 지금은 생성하는 방법까지 이야기하겠습니다.

+ 버튼을 누르면 생성하기 됩니다. 그럼 어플의 파일들을 폴드에 준비해 줍니다.

생성하기는 폴드를 선택하시고 name에는 어플명 그리고 ID는 패키 지명을 입력하시면 됩니다. 패키지명은 어플의 고유 패키지명이 되므로 모든 어플들이 자기의 패키지명을 가지게 됩니다. 중요합니다.

이렇게 입력하셨으면 create project를 클릭하시면 준비가 끝납니다.

실행해보자

실행은 실행 버튼만 클릭하시면 됩니다.

이렇게 실행하게 되면 크롬에서 확인도 가능합니다. 하단에 보시면 서버 주소가 있습니다. localhost:3000 이라고 주소창에 넣어 보시면 실행한 화면이 보일 겁니다.

그리고 기억해야 되는 것은 하단에 녹색으로 안내 되어 있는 주소를 보셔야 합니다.

그럼에서 확인한 화면입니다. localhost에서 확인이 가능합니다. 다만 하드웨어나 외부 데이터 연동은 오류가 납니다.

생성된 폴드 확인 

이렇게 생성된 어플의 파일들은 desktop app에서 폴드를 생성해서 파일을 만들어 놓은 상태가 됩니다.

소스를 보시면 패키지 속의 내용과 www속의 내용입니다. 우리가 개발에 손을 봐야 되는 것은 www속의 파일을 개발하면 됩니다.

여기까지만 해도 어플이 생성되는 겁니다. 일종의 hello world가 만들어진 겁니다.

너무 간단하죠. 하지만 컴파일하지 않고 바로 실행 가능하고 디버그를 desktop app에서 할 수 있다는 게 정말 편리합니다. 각종 오류 등을 확인할 수 있으며 실시간으로 확인 가능합니다.

매번 컴파일해서 테스트하면 시간적으로나 개발 과정이 불편해집니다. 실제 이전에는 그렇게 개발했습니다. 하지만 폰에서 바로 테스트 가능하고 아이폰과 안드로이드 폰에서 바로바로 테스트 가능하다는 점이 가장 이점입니다.

스마트폰에서 테스트 하자

이제 desktop app과 스마트폰을 연결해 봅시다. 실제 어플을 실행하는 것과 같습니다.

애플용 폰갭 다운로드하기

https://itunes.apple.com/app/id843536693

안드로이드 폰갭 어플 다운로드하기

https://play.google.com/store/apps/details?id=com.adobe.phonegap.app

윈도우 모바일용 폰갭 어플 다운로드하기

https://www.microsoft.com/ko-kr/store/p/phonegap-developer/9wzdncrdfsj0

스마트폰에 설치하고 실행하면 desktop app과 연결할 준비를 하게 됩니다.

모바일 어플 실행

폰갭 어플을 실행하시면 다음 그림과 같이 순서대로 실행됩니다.

이렇게 실행됩니다. 

서버 주소 입력

현재까지 주소를 맞추고 실행하면 됩니다.

맞는 방법은 다음과 같습니다.

서버 주소를 맞춰 입력

DESKTOP APP 의 서버 주소를 모바일 폰갭에 입력해주시면 됩니다.

그리고 CONNECT를 실행하면 간단하게 어플이 실행됩니다. 컴파일하기 전까지는 이렇게 테스트를 하시면 됩니다.

수정하시면 안드로이드는 기종에 따라서 새로고침을 해야 하지만 아이폰은 자동으로 새로고침 되어 실행합니다.

안드로이드 일부 기종에서는 아이폰과 같이 자동으로 새로고침 되어 소스 수정하면 바로바로 적용되는 것을 확인하였습니다.

이제 준비가 다 된 상황입니다. 이제부터 쉬운 것부터 하나씩 만들어 봅시다.

그리고 폰갭이라고 해서 너무 하찮게 보시지 마시길 바랍니다. 어플이든 뭐든 언어나 툴은 하나만 제대로 잘하면 그게 가장 좋은 겁니다. 좋은 툴을 매번 익히는 것보다는 하나를 끝까지 이용하는 게 더 좋은 결과를 가져오곤 합니다.

이왕 하시는 것 끝까지 같이 만들어 봤으면 합니다.