개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
요즘 Phonegap 을 이용한 프로젝트를 하나 시작하기 위해 Research 를 하고 있습니다.
샘플을 하나 구해서 이걸 이클립스에 설치 한 다음에 시뮬레이터로 동작하는건 완료 했는데요.
갑자기 이걸 apk 로 만들려고 하니까 생각이 하나도 안 나네요.
뭐든지 다 정리 해 놔야 될 것 같습니다.
첫번째 단계만 보니까 알겠던데... ;;
어쨌든 제일 처음으로 이클립스에서 File > Export 를 선택합니다.
그러면 아래와 같은 화면이 나오는데요. Android > Export Android Application 을 선택하신 후 Next 버튼을 누르세요.
다음엔 Export 할 프로젝트를 선택하시면 됩니다. 프로젝트 이름을 직접 Type 해 넣으셔도 되구요.
다음엔 자기가 사용하는 안드로이드 빌드용 key 를 선택하시면 됩니다. 없으신 분은 Create new keystore 를 선택하셔서 다음 단계 진행하시면 됩니다. 이 새로운 keystore를 만드는 방법은 구글링해서 찾으셔도 되구요. 아니면 그냥 이클립스에서 시키는 대로 따라 하시면 될 겁니다.
해당 key를 선택하신 후 비밀번호를 넣고 Next 버튼을 누르세요.
그러면 아래와 같이 Alias 를 넣는 칸이 나올 텐데요. keystore 생성할 때 만들었던 Alias 선택하고 비밀번호 넣고 다음 버튼 누르시면 됩니다.
그러면 마지막 단계로 apk 파일을 생성할 폴더만 선택하시면 됩니다. 선택하신 후 Finish 버튼을 누르세요.
@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); }
@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main, menu); return true; } }
이 블로그에 글을 정리하는 이유가 이렇게 나중에 필요할 때 찾아보기 위해서거든요. 나름 뿌듯하게 생각하면서 따라하고 있는데요...
이럴수가 그동안 너무 많이 바뀌었어요. 그 글은 올해(2012) 4월에 올린글인데 12월인 지금은 너무나도 많이 바뀌어 있는거예요.
물론 너무너무 간단해 졌다는거...
간단해 진 부분은 안드로이드 SDK 설치 과정입니다. 이거 설치하면 자동적으로 이클립스까지 설치되서 복잡하게 Android Development Tool (ADT) 설치하고 환경 맞추고 뭐 그럴 필요 없이 그냥 버튼만 누르면 다 되더라구요. (이거 오래전에 바뀌었겠죠? 전 계속 모바일 웹만 개발하느라 Android Native 쪽에는 손을 놓은지 오래 되서 몰랐어요. ^;)
이렇게 두개의 폴더가 있을 텐데요. 그냥 이클립스로 들어가셔서 실행시키기만 하시면 됩니다.
첫 실행에서는 작업할 때 파일이 저장될 workspace 의 경로를 임의의 장소로 정해 주시구요.
그리고 이런 화면이 나올 겁니다. 첫번째 프로젝트를 만들기 위해 이 Welcome 화면에서 시키는 대로 하겠습니다. (이 Welcome 화면은 나중에 Help-Welcome 을 선택하시면 언제든지 보실 수 있습니다.)
Click File > New > Android Application Project.
(If you don't see this option, click File > New >
Other, then open the Android folder and select
Android Application Project.)
Follow the wizard to set up your new Android app project.
이 글대로 따라 하세요. 그냥 시키는 대로만 하면 됩니다. 그러면 첫번째 안드로이드 프로젝트가 만들어 질 텐데요. 여기다 그냥 안드로이드 앱 프로그래밍을 하셔도 되구요. 오늘 목적은 PhoneGap을 사용할 거니까 여기서 PhoneGap 을 사용하는 방법을 알아 보겠습니다.
아까 저 맨 첫번째 그림에서 Download & Archives 를 클릭해서 폰갭을 다운 받습니다. 그리고 압축을 풉니다.
그 압축을 푼 다음 lib-android 폴더로 들어가시면 위와 같이 뜰 겁니다. 여기서 저 cordova-2.2.0.jar 와 cordova-2.2.0.js 파일만 복사해서 아까 이클립스에 만든 프로젝트의 적당한 위치에 복사해 넣으시면 됩니다.
바로 저 assets 에 www 란 폴더를 만들고 cordova-2.2.0.js 를 복사해 넣구요.
그 다음에는 원래 있던 libs 라는 폴더에 cordova-2.2.0.jar를 복사해 넣습니다.
그럼 이제 java 파일을 약간 손보실 차례입니다.
저 빨간 줄 그은 부분만 보이시는 대로 수정하시면 됩니다.
이 부분은 이전에 제가 올린 글에서 복사해 넣을 께요.
다음에는 AndroidManifest.xml 파일을 수정합니다.
AndroidManifest.xml 안에서 <uses-sdk android:minSdkVersion="8" /> 코드를 찾으세요.
이 글은 PhoneGap 0.9.2 와 0.9.3 시절의 튜토리얼 입니다. 지금은 폰갭 버전이 1.8.1이네요. 이점 감안하시고 보세요.
Requirements
이 글은 이미 안드로이드 SDK를 인스톨 했고 제대로 작동 되는 상황에서 직접 해 보실 수가 있습니다. 아직 안됐으면 먼저 Android SDK를 설치 하시고 진행하세요. 여기에서 다운로드 받으시면 됩니다. 그리고 최소한 한개 이상의 Android virtual device(AVD)를 생성해 놓으셔야 합니다. 안드로에드 에뮬레이터에서 여러분이 만든 프로젝트를 돌릴려면 AVD가 필요합니다. 그리고 여러분 system path에 Android tools와 android platform-tools 폴더 가 있어야 합니다. 이 두개의 폴더들은 여러분의 Android installation directory안에 있을 겁니다.
이 글은 이미 안드로이드 SDK를 인스톨 했고 제대로 작동 되는 상황에서 직접 해 보실 수가 있습니다. 아직 안됐으면 먼저 Android SDK를 설치 하시고 진행하세요. 여기에서 다운로드 받으시면 됩니다. 그리고 최소한 한개 이상의 Android virtual device(AVD)를 생성해 놓으셔야 합니다. 안드로에드 에뮬레이터에서 여러분이 만든 프로젝트를 돌릴려면 AVD가 필요합니다.
이클립스에 이미 Android SDK 가 세팅 돼 있어야 겠죠. Window > Preferences > Android 를 여시고 아래와 같이 됐는지 확인해 보세요.
이제 여러분은 샘플 프로젝트를 빌드하시거나 새로운 프로젝트를 만드실 수 있습니다.
Building The Sample Project
File > New > Android Project
Create new project from existing source 를 선택하세요.
Browse를 클릭하시고 다운로드 하신 폰갭에서 제공된 샘플 앱이 있는 곳을 찾아가세요.
오래된 안드로이드 버전을 사용하셔도 됩니다. 최신 버전의 SDK도 사용가능합니다. 어느것을 선택하시던 폰갭이 알아서 처리할 겁니다. 다만 이글을 쓰는 시점에 다운받은 폰갭 0.9.4 는 안드로이드 3.0과 문제가 있을 수 있으니 2.2나 2.3을 먼저 사용해 보세요.
(이 부분에서 이클립스가 phonegap.jar를 찾지 못하면 에러를 보실 수도 있습니다. 이런 경우 /libs 폴더에서 오른쪽 마우스를 누르시고 Build Paths/ > Configure Build Paths로 가 주세요. 그리고 나서 Libraries tab에서 phonegap.jar를 Project에 add 하세요. 이클립스가 제대로 표시하지 못한다면 여기서 refresh(F5)를 하시면 제대로 표시 할 겁니다.)
이제 여러분은 여러분의 프로젝트를 안드로이드 어플리케이션으로 돌릴 수 있습니다. 프로젝트에서 오른쪽 마우스를 누르시고 Run As 로 가셔서 Android Application 을 클릭하세요. 이클립스가 AVD를 선택하라고 할 수도 있습니다. 만약에 없으면 이때 create 하셔도 됩니다. 미리 생성해 놓으셨다면 선택하시고 진행하시면 됩니다.
Creating A New Project
File > New > Android Project
And give it some sensible defaults.
오래된 안드로이드 버전을 사용하셔도 됩니다. 최신 버전의 SDK도 사용가능합니다. 어느것을 선택하시던 폰갭이 알아서 처리할 겁니다.
여러분이 다운로드 받으신 폰갭에서 우리는 아래 두개의 파일이 필요합니다.
Android/phonegap-1.0.0.jar
Android/phonegap-1.0.0.js
이클립스에서 생성하신 프로젝트의 root 디렉토리에 아래 두개의 디렉토리를 생성하세요.
/libs
/assets /www
위 두 파일을 복사해 넣으세요.
Android/phonegap-1.0.0.jar to /libs
Android/phonegap-1.0.0.js to /assets/www
이클립스에서 Package Explorer에서 해당 프로젝트를 선택하신 후 refresh(F5)를 해 주세요. 복사해 넣은 두개의 파일이 보이실 거예요.
Now, create index.html in your www folder and add some code like so:
이제 www 폴더에 index.html을 생성하세요. 그리고 아래 코드를 복사해 넣으세요.
navigator.notification.alert("PhoneGap is working");
}
</script>
</head>
<body onload="onLoad();"> <h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
</body>
</html>
이클립스의 src 폴더에 있는 main 자바 파일을 약간 수정해 주세요.
클래스의 extend를 Activity에서 DroidGap으로 바꿔주세요.
Replace the setContentView() line 을 super.loadUrl("file:///android_asset/www/index.html"); 로 바꿔주세요.
Add import com.phonegap.*;
(이 부분에서 이클립스가
phonegap-1.0.0.jar를 찾지 못하면 에러를 보실 수도 있습니다. 이런 경우 /libs 폴더에서 오른쪽
마우스를 누르시고 Build Paths/ > Configure Build Paths로 가 주세요. 그리고 나서
Libraries tab에서 phonegap-1.0.0.jar를 Project에 add 하세요. 이클립스가 제대로 표시하지 못한다면 여기서
refresh(F5)를 하시면 제대로 표시 할 겁니다.)
마지막으로 폰갭이 제대로 동작할 수 있도록 AndroidManifest.xml 파일에 몇개의 퍼미션을 추가하겠습니다.
여러분이 사용하시는 에디터로 매니페스트 파일을 열어 주세요. 그리고 versionName과 application 태그 사이에 아래 내용을 복사해서 넣어 주세요.
이건 뭘 말하냐 하면요. 안드로이드는 이런 이벤트들이 일어날 때 index.html을 reload 하지 않을거란 겁니다. phonegap이 이 이벤트들에 대해서 핸들링 할 겁니다.
마지막으로 다운로드 받으신 폰갭의 xml 폴더를 카피하셔서 여러분 프로젝트의 res 폴더에 넣으세요.
이제 여러분은 여러분의 프로젝트를 Android Application으로 실행하실 수 있습니다. 프로젝트에서 오른쪽 마우스를 클릭하신다음에 Run As -> Android Application을 선택하세요. 이클립스가 AVD를 선택하라고 물어볼 겁니다. AVD를 생성하지 않으셨으면 새로 생성하시고 이전에 생성하셨으면 그걸 선택해서 계속 진행합니다.
AVD가 적용되서 에뮬레이터가 뜨는데는 시간이 걸릴겁니다. 그리고 에뮬레이터가 뜬 후에도 조금 기다리시면 여러분이 만든 프로젝트가 화면에 실행 되는 걸 보실 수 있습니다.
Test.zip
Test.apk
