반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

PhoneGap 설치하고 예제 실행하기

2012. 4. 26. 02:59 | Posted by 솔웅


오늘은 PhoneGap 을 한번 설치 해 보기로 했습니다.

저는 Hybrid App 을 Corona SDK, Sencha Touch, JQuery Mobile 을 위주로 한번 연구해 볼 생각이거든요.


거기다가 Kurogo 가 도움이 된다면 같이 한번 사용해 보고 싶고...

웹 서버쪽은 PHP 와 데이터베이스를 사용할 거고.


이런 구조로 Hybrid App 을 개발 툴 조합을 연구해 보고 있습니다.


그런데 디바이스의 Native 기능 등을 사용하기 위해 Corona SDK를 사용하느냐. PhoneGap을 사용하느냐 를 결정하려면 장단점을 알고 있어야 할 것 같아서요.


Corona SDK에 대해서는 잘 알지만 일반적으로 Hybrid App에 많이 사용되는 PhoneGap에 대해서는 전혀 몰라서 오늘 한번 설치해보고 감을 잡고자 합니다.


우선 eclipse 와 Android SDK, ADT Plugin, JAVA 등은 다 설치 되서 Native Android 앱 개발 환경은 다 완료 된 것으로 하고 PhoneGap 설치를 진행해 보겠습니다.


1. http://phonegap.com/start 로 접속을 합니다.


2. 아래 화면에서 해당 platform을 선택합니다. (저는 Android를 선택했습니다.)



3. 비디오 튜토리얼이 있네요. 이것부터 한번 볼까요?




보니까 PhoneGap 에 대해 많이 이해가 되네요.

이클립스 개발환경에서 폰갭을 설치하고 샘플 앱을 만드는 방법까지 자세히 설명을 했습니다.


4. 다음 단계는 Eclipse, Android SDK, ADT Plugin을 설치하는 단계입니다.



저는 ADT Plugin 까지 모두 설치 된 상태이기 때문에 PhoneGap 다운로드부터 하겠습니다.




이 글을 올리는 시점에는 PhoneGap 1.6.1 이 최신 버전이네요.


5. 다운받은 압축 파일을 푸니까 아래와 같은 구조네요.



lib 폴더에 android, bada, blackberry, ios, symbian, windows 같은 각 모바일 플랫폼 별 jar 파일과 js 파일이 들어있고 예제 파일도 들어있습니다.


6. 그 다음은 Android Native Language로 App을 만들 때 처럼 이클립스에서 New Android Projet를 만듭니다.


- 이클립스에서 File-New-Android Project를 선택합니다. 그리고 Project Name을 정합니다.



- 일단 버전은 2.2 를 선택하겠습니다.


- Package Name 이 빠졌으면 이 부분 넣고 Finish 버튼을 누릅니다.




7. 그 다음에는 project 폴더에 2개의 폴더를 더 추가해 넣습니다. (libs, assets/www)


8. 다음에 아까 받았던 PhoneGap 의 jar 파일을 libs에 js 파일을 www 에 복사해 넣습니다.

그리고 xml 폴더를 res 폴더 밑에 복사해 넛습니다.




9. 다음은 java 파일을 조금 수정하는데요.




위에 빨간 줄 친 부분을 바꾸시면 됩니다. (위에것 에서 아래 것으로요)


10. 다음에는 AndroidManifest.xml 파일을 수정합니다.

AndroidManifest.xml 안에서 <uses-sdk android:minSdkVersion="8" /> 코드를 찾으세요.

그리고 그 위에 아래 코드를 붙여 넣으세요.


<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />


그리고 <activity ..... > 태그에 아래 코드를 추가하세요.

android:configChanges="orientation|keyboardHidden"


그러면 대개 아래와 같은 형식이 될 겁니다.



10. 그 다음은 PhoneGap 프로그래밍을 하시면 됩니다.

www 폴더 밑에 index.html 파일을 생성하신후 아래와 같이 해 보세요.


<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.x.x.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>


11. 이제 실행하시면 됩니다. Ctrl + F11 을 누르시던지 프로젝트에서 오른쪽 마우스 버튼을 클릭한 후 Run As - Android Application을 실행 해 보세요.


아래 화면이 완성된 화면입니다.




처음엔 좀 복잡하네요..


하여간 이렇게 설치하고 예제를 하나 실행했더니 폰갭이 대강 이해가 갑니다.


자체적으로 jar 파일하고 js 파일을 제공해서 모바일 앱을 만들도록 하는 거네요.

각 플랫폼 마다 따로따로 개발해야 되는 번거로움이 좀 있구요.

(코로나 SDK 는 그냥 빌드만 따로 하면 되는데 말이죠.)

대신 기존 Android Native Programming 구도를 그대로 사용하는 거라서 Native 기능을 모두 사용할 수는 있겠네요.


폰갭 + JQuery, Sencha Touch를 하면 정말 많이 편리할 것 같습니다.


폰갭 공부도 좀 더 해서 폰갭 조합 하고 코로나 SDK 조합 Hybrid App 개발 둘 다 해야 겠습니다.


재밌네요...



반응형

Comment

이전 1 ··· 3 4 5 6 7 다음