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

최근에 받은 트랙백

글 보관함

calendar

          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            


요즘 Phonegap 을 이용한 프로젝트를 하나 시작하기 위해 Research 를 하고 있습니다.

샘플을 하나 구해서 이걸 이클립스에 설치 한 다음에 시뮬레이터로 동작하는건 완료 했는데요.


갑자기 이걸 apk 로 만들려고 하니까 생각이 하나도 안 나네요.


뭐든지 다 정리 해 놔야 될 것 같습니다.


첫번째 단계만 보니까 알겠던데... ;;


어쨌든 제일 처음으로 이클립스에서 File > Export 를 선택합니다.



그러면 아래와 같은 화면이 나오는데요. Android > Export Android Application 을 선택하신 후 Next 버튼을 누르세요.


다음엔 Export 할 프로젝트를 선택하시면 됩니다. 프로젝트 이름을 직접 Type 해 넣으셔도 되구요.



다음엔 자기가 사용하는 안드로이드 빌드용 key 를 선택하시면 됩니다. 없으신 분은 Create new keystore 를 선택하셔서 다음 단계 진행하시면 됩니다. 이 새로운 keystore를 만드는 방법은 구글링해서 찾으셔도 되구요. 아니면 그냥 이클립스에서 시키는 대로 따라 하시면 될 겁니다.

해당 key를 선택하신 후 비밀번호를 넣고 Next 버튼을 누르세요.


그러면 아래와 같이 Alias 를 넣는 칸이 나올 텐데요. keystore 생성할 때 만들었던 Alias 선택하고 비밀번호 넣고 다음 버튼 누르시면 됩니다.



그러면 마지막 단계로 apk 파일을 생성할 폴더만 선택하시면 됩니다. 선택하신 후 Finish 버튼을 누르세요.




그러면 위에서 지정한 경로에 apk 파일이 생겼을 겁니다.

이걸 안드로이드폰에 복사해서 인스톨 하셔도 되구요.

안드로이드 마켓에 올리셔도 됩니다.


간단하게 이클립스에서 안드로이드 용 apk 파일 만드는 방법 정리했습니다.


저작자 표시 비영리 동일 조건 변경 허락
신고


회사에서 앞으로 Hybrid 앱 쪽을 고민하는 것 같습니다.

지금까지 저희 팀에서는 모바일 웹 어플리케이션만 만들었는데요.


이번에 Hybrid 관련해서도 관심을 가지더라구요.


일단 제가 알아볼 기술은 아래 3가지 입니다.


1) 현재 디바이스가 네트워크와 연결 상태에 있는지 여부

2) 현재 연결된 네트워크 이름 알아낼 수 있는지 여부 (WiFi 이면 그 이름도)

3) 현재 특정 앱이 디바이스에 깔려 있는지 여부 알아내기 (혹은 실행하기)


이 세가지인데요.


제가 알아낸 것은 PhoneGap 에서 지원하는 Connection 이라는 API 입니다.

이 API 로 1번 문제는 해결할 수 있었습니다.


인도에 있는 팀에서 플러그인을 만들어서 2번 문제까지도 해결을 했는데요.

아마 PhoneGap 과 Java와 JS 등등을 사용해서 해결한 것 같더라구요.

나중에 소스 분석 좀 해 봐야겠어요.


3번은 아직 방법을 찾지 못했습니다.

안드로이드나 iOS Native language 를 사용해서 해결해야 될 것 같기도 하고 아니면....

웹 기술로도 모바일 기기의 이메일, 카메라, SMS 등을 실행시킬수 있는 걸로 봐서 간단하게 해결 할 수도 있을 것 같기도 한데...


좀 더 연구해 봐야겠습니다.


일단 이 글에서는 제가 알아본 PhoneGap 의 Connection 을 이용한 예제를 정리해 놓겠습니다.




결과화면은 이렇습니다. 처음 시작할 때나 'Click It 버튼을 클릭할 때 Alert 화면으로 현재 연결된 네트워크 Type 을 보여 줍니다.


우선 파일 구조부터 살펴 보죠.



우선 PhoneGap 프로젝트를 만듭니다.

자세한 내용은 이전글을 참조하시구요.


우선 빨간 줄을 그은 파일들은 그냥 복사만 해 넣으면 되는 겁니다.

폰갭 다운 받은 폴더에서 해당 파일을 복사해서 넣으세요.

이것도 이전글을 참조하세요. config.xml 은 지난번에는 복사해 넣지 않은건데 이번엔 복사해 넣으셔야 됩니다.


이 파일에서 PhoneGap 에서 지원하는 기능들을 사용할 경우 해당하는 플러그인을 불러올거거든요.


그 다음 파란줄로 그은 파일들이 여러분이 손을 보셔야 될 파일들 입니다.

일단 MainActivity.java 파일들을 보죠.


package com.example.test;

import org.apache.cordova.*;
import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends DroidGap {

    @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;
    }
}

처음 Android Project 를 만들면 약간 다르게 돼 있을겁니다.

자세한 내용은 역시 이전글에 있습니다. 참고하세요.


주요한 코딩은 index.html 부분에 있습니다.


<!DOCTYPE html>
<html>
  <head>
    <title>navigator.connection.type Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is loaded and it is now safe to make calls Cordova methods
    //
    function onDeviceReady() {
        checkConnection();
    }

    function checkConnection() {
        var networkState = navigator.network.connection.type;

        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.NONE]     = 'No network connection';

        alert('Connection type: ' + states[networkState]);
    }

    </script>
  </head>
  <body>
  <p><br><p>
    <p>A dialog box will report the network state.</p><br>
    <center><input type="button" value="Click it" onClick="checkConnection()"></center>
  </body>
</html>


이 코드는 PhoneGap API Document에 나와 있는 내용입니다.

제가 덧붙인 부분은 아랫부분에 버튼을 만들고 그 버튼을 클릭하면 checkConnection() 함수를 호출하는 부분입니다.


우선 처음에 시작은 onDeviceReady() 함수에서 합니다.

이 함수는 앱이 시작하면 자동으로 호출되는 함수 같습니다.


이 함수 안에서 checkConnection() 함수를 호출하니까 앱이 시작할 떄 checkConnection()이 동작을 하게 됩니다.


checkConnection() 에는 Cordova API 에서 제공하는 Connection 기능을 구현해 놓았습니다.


navigator.connection.type 로 현재 연결된 Network type 을 받아서 

networkState 변수에 담습니다.

그리고 var states 배열에 각 Network 타입마다 적당한 문장을 대입시켜 넣구요.

alert('Connection type: ' + states[networkState]); 로 해당 배열을 출력시킵니다.


하고 나니 간단하네요.


Test.zip

필요하신 분들은 이 파일을 다운 받아서 실행해 보세요.


Test.apk

위 파일은 안드로이드 애플리케이션으로 빌드한 파일 입니다.


이 파일을 안드로이드 폰에 깔아서 실행시키시면 동작할 겁니다.



저작자 표시 비영리 동일 조건 변경 허락
신고


정말 오랜만에 폰갭 관련 글을 올립니다.

요즘 회사일로 Hybrid App 을 연구 중이거든요.

기존의 모바일 웹을 Hybrid App 으로 만들려고 합니다.


그래서 그 기능을 Corona SDK 와 Corona SDK 의 Web App 을 이용해서 Hybrid App으로 만들 수 있는지 여부에 대해 궁금해서요.

지난주에 몇가지 기능에 대해 문의를 했거든요.

목요일 아침에 했는데 아직 응답이 안 오네요.


그래서 오늘(일)은 따로 폰갭을 설치해서 필요한 기능들을 테스트 해 볼까 하는 기특한 마음이 생기더라구요.

(일요일이라고 뒹굴뒹굴 거리지 않고요.. ^^ 이런 날 며칠 없어요..)


지난번에 설치한 건 제 노트북에 설치해서.. 오늘은 회사 노트북에 설치 하기로 맘 먹었습니다.

설치하는 법을 검색하려고 네이버에 '폰갭 이클립스' 로 검색했더니......

제 글이 제일 상단에 뜨는 거예요.. 이런 영광이... ^^

그래서 제 블로그로 들어왔는데 검색해서 뜬 글보다는 그 전에 더 간단하게 PhoneGap 설치 과정을 정리한 글이 있더라구요.

PhoneGap 설치하고 예제 실행하기 

이 블로그에 글을 정리하는 이유가 이렇게 나중에 필요할 때 찾아보기 위해서거든요.
나름 뿌듯하게 생각하면서 따라하고 있는데요...

이럴수가 그동안 너무 많이 바뀌었어요.
그 글은 올해(2012) 4월에 올린글인데 12월인 지금은 너무나도 많이 바뀌어 있는거예요.

물론 너무너무 간단해 졌다는거...

간단해 진 부분은 안드로이드 SDK 설치 과정입니다.
이거 설치하면 자동적으로 이클립스까지 설치되서 복잡하게 Android Development Tool (ADT) 설치하고 환경 맞추고 뭐 그럴 필요 없이 그냥 버튼만 누르면 다 되더라구요.
(이거 오래전에 바뀌었겠죠? 전 계속 모바일 웹만 개발하느라 Android Native 쪽에는 손을 놓은지 오래 되서 몰랐어요. ^;)

이 변경된 방법도 여기 한번 정리해 놓으렵니다.

우선 PhoneGap 웹사이트로 갑니다. http://phonegap.com/developer


여기서 Getting Started Guides 를 클릭합니다.

거기서 Getting Started with Android를 클릭합니다.


뭘 많이 설치하라구 나오죠? 다 무시하고 Android SDK 를 클릭합니다.


Download the SDK 를 클릭해서 다운 받습니다.

다운받은 압축파일을 풀면 끝입니다.


이렇게 두개의 폴더가 있을 텐데요. 그냥 이클립스로 들어가셔서 실행시키기만 하시면 됩니다.


첫 실행에서는 작업할 때 파일이 저장될 workspace 의 경로를 임의의 장소로 정해 주시구요.

그리고 이런 화면이 나올 겁니다.
첫번째 프로젝트를 만들기 위해 이 Welcome 화면에서 시키는 대로 하겠습니다.
(이 Welcome 화면은 나중에 Help-Welcome 을 선택하시면 언제든지 보실 수 있습니다.)

  1. 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.)
  2. 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" /> 코드를 찾으세요.

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


<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 프로그래밍을 하시면 됩니다.

저는 제 블로그의 http://coronasdk.tistory.com/521 에 있는 소스코드를 사용했는데요.
여러분들도 거기서 다운 받으셔도 되고 아니면 여러분 나름대로 html 파일을 만드시면 됩니다.
전 tistory521_01.html 파일을 사용했습니다.


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


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


PhoneGap 을 사용해서 jQuery Mobile 페이지를 표시할 때 까지의 과정이었습니다.


여전히 복잡한가요?

그래도 이게 많이 단순화 한 거예요.
따라해 보시고 좋은 application 많이 만드세요.



저작자 표시 비영리 동일 조건 변경 허락
신고


phonegap-android-terminal-quickstart


이 글은 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안에 있을 겁니다.


 

또한 폰갭도 필요하겠죠.

  • Download the latest copy of PhoneGap and extract its contents. 이글은 Android에 대한 튜토리얼이기 때문에 Android 디렉토리에 있는 내용이 중요합니다.
  • ant가 인스톨 돼 있어야 합니다. 필요하면 system path에 ant installation의 bin 폴더를 추가하셔야 합니다. 환경변수 ANT_HOME을 ant가 인스톨 된 폴더로 지정해 주세요.

 

 

Building The Sample Project

 

터미널에서 새로 다운로드 받은 폰갭을 찾아보세요. 그리고 android/sample 폴더로 가세요.

 

커맨드라인에서 android list targets를 타입해서 target 리스트를 보세요.

 

그리고 android update project -p . -t # 를 타입하세요. 그러면 필요한 파일들이 추가되거나 업데이터 될 겁니다. 위 명령어 중에서 # 는 ID로 바꿔주세요.




이제 에뮬레이터를 실행시키거나 device를 plug in  해 주세요. device를 plug in 하시는 편이 더 낫습니다. 그러면 아래 2 screen에 대한 과정은 넘어 가셔도 됩니다.

 

에뮬레이터는 Android AVD manager 와 함께 실행되고 커맨드라인에서 android라고 치면 됩니다.




원하는 virtual device를 선택하세요.



에뮬레이터가 다 로딩 될 때까지 기다리시고.

 그리고 build 하고 run  하시려면 터미널에 ant debug install을 타입하시면 됩니다.

  이제 여러분은 로드된 샘플 앱을 에뮬레이터를 통해 보실 수 있습니다.



Notes

 

가끔 and debug install이 실패할 수도 있습니다. 이럴 때는 터미널에 adb kill-server 를 하시고 adb start-server를 하세요. 그리고나서 adb-devices를 치시면 연결된 devices를 보실 수 있습니다.


샘플 프로젝트를 보실 수 있으시면 index.html을 마음대로 수정하시고 다시 실행 해 보세요.

 

안드로이드에서 디버그하기에 좋은 툴은 logcat 입니다. 이 logcat 을 사용하려면 터미널에서 adb logcat 을 치세요.


저작자 표시 비영리 동일 조건 변경 허락
신고

이클립스에 폰갭 설치하기

2012.06.22 23:58 | Posted by 솔웅


phonegap-android-eclipse-quickstart


Requirements

 

이 글은 이미 안드로이드 SDK를 인스톨 했고 제대로 작동 되는 상황에서 직접 해 보실 수가 있습니다. 아직 안됐으면 먼저 Android SDK를 설치 하시고 진행하세요. 여기에서 다운로드 받으시면 됩니다. 그리고 최소한 한개 이상의 Android virtual device(AVD)를 생성해 놓으셔야 합니다. 안드로에드 에뮬레이터에서 여러분이 만든 프로젝트를 돌릴려면 AVD가 필요합니다.

 

You also need to: 또한 폰갭도 필요하겠죠.

 

이클립스에 이미 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도 사용가능합니다. 어느것을 선택하시던 폰갭이 알아서 처리할 겁니다.

 

여러분이 다운로드 받으신 폰갭에서 우리는 아래 두개의 파일이 필요합니다.

  1. Android/phonegap-1.0.0.jar
  2. Android/phonegap-1.0.0.js

 

이클립스에서 생성하신 프로젝트의 root 디렉토리에 아래 두개의 디렉토리를 생성하세요.

  1. /libs
  2. /assets /www

 

위 두 파일을 복사해 넣으세요.

  1. Android/phonegap-1.0.0.jar to /libs 
  2. 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을 생성하세요. 그리고 아래 코드를 복사해 넣으세요.


<!DOCTYPE HTML>
<html>

  <head>
    <title>PhoneGap</title>

  <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>      

  <script type="text/javascript" charset="utf-8">

     function onLoad(){

          document.addEventListener("deviceready", onDeviceReady, true);

     }

     function onDeviceReady(){

          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 자바 파일을 약간 수정해 주세요.

  1. 클래스의 extend를 Activity에서 DroidGap으로 바꿔주세요.
  2. Replace the setContentView() line 을 super.loadUrl("file:///android_asset/www/index.html"); 로 바꿔주세요.
  3. 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 태그 사이에 아래 내용을 복사해서 넣어 주세요.


<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" />

 




AndroidManifest.xml에서 activity 태그에 아래 attribute 가 있어야 합니다.

 

    android:configChanges="orientation|keyboardHidden"

 

이건 뭘 말하냐 하면요. 안드로이드는 이런 이벤트들이 일어날 때 index.html을 reload 하지 않을거란 겁니다. phonegap이 이 이벤트들에 대해서 핸들링 할 겁니다.

 

마지막으로 다운로드 받으신 폰갭의 xml 폴더를 카피하셔서 여러분 프로젝트의 res 폴더에 넣으세요.

 

이제 여러분은 여러분의 프로젝트를 Android Application으로 실행하실 수 있습니다. 프로젝트에서 오른쪽 마우스를 클릭하신다음에 Run As -> Android Application을 선택하세요. 이클립스가 AVD를 선택하라고 물어볼 겁니다. AVD를 생성하지 않으셨으면 새로 생성하시고 이전에 생성하셨으면 그걸 선택해서 계속 진행합니다.

 

AVD가 적용되서 에뮬레이터가 뜨는데는 시간이 걸릴겁니다. 그리고 에뮬레이터가 뜬 후에도 조금 기다리시면 여러분이 만든 프로젝트가 화면에 실행 되는 걸 보실 수 있습니다.




 

 

Have fun!


저작자 표시 비영리 동일 조건 변경 허락
신고

Phonegap Keyword Index

2012.05.26 23:36 | Posted by 솔웅


지금 제가 참여하는 프로젝트는 Kurogo Middle ware 를 주로 사용하고 있습니다.

그래서 Kurogo에 대해 열심히 배우고 있죠.

그리고 Kurogo는 오픈소스에다가 PHP 로 만들어진 거라서 계속 PHP 소스를 들여다 보면서 수정을 하고 있구요.

모바일 웹 이기 때문에 자바스크립트아 HTML5, CSS 도 사용하고 있습니다.


지금 개발 환경도 여러가지 새로 배울것들이 많은데 PM이 다음 프로젝트는 PhoneGap을 사용할 거라고 미리 좀 공부해 두라고 하네요.


그래서 늘 하듯이 새로 Phonegap 디렉토리를 만들고 앞으로 Phonegap 공식 사이트에서 제공하는 튜토리얼을 번역하는 일을 할 예정입니다.


예전에 시간이 있을 때는 그 튜토리얼을 근거로 이런 저런 예제도 만들고 하면서 글을 썼었는데 요즘은 계속 일하면서 글을 올리는 거라서 튜토리얼을 번역하기 바쁩니다.


그래도 그냥 눈으로 읽는 것보다는 이렇게 번역하고 정리하고 블로그에 포스팅 하는게 훨씬 더 많이 이해도 되고 다음에 또 찾아볼 때 많이 도움이 되더라구요.


오늘은 시작하는 의미에서 Phonegap 홈페이지에 있는 튜토리얼 중 Phonegap Keyword Index를 복사해 놓겠습니다.


A

B

C

D

E

F

G

L

M

N

O

P

R

S

V


다음엔 각 OS별 설치 요령들을 번역할 생각입니다.

저작자 표시 비영리 동일 조건 변경 허락
신고

PhoneGap 설치하고 예제 실행하기

2012.04.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 개발 둘 다 해야 겠습니다.


재밌네요...



저작자 표시 비영리 동일 조건 변경 허락
신고
이전 1 다음