프로퍼티 쓰기:

window.localStorage.setItem(key, value);



프로퍼티 읽기:


var value = window.localStorage.getItem(key);




* 테스트한 버전 : 2.9.0

,

안드로이드용으로 작업한 내용으로 IOS용 빌드를 하는 방법에 대해서 간단히 알아보겠습니다.



1. <PhoneGap 설치 폴더>/lib/ios/bin 밑에서 다음의 내용을 실행하면 마찬가지로 Xcode 프로젝트가 생성되어 Xcode에서 불러들일 수 있습니다. (MacOS에서 실행)


./create <프로젝트가 생성될 폴더> <패키지명> <프로젝트명>



2. 생성된 프로젝트 폴더 밑에 보면 www 폴더가 있는데, 이 안에 있는 cordova.js 파일을 임의의 위치에 복사한 후, www 폴더를 삭제합니다.


3. 안드로이드용으로 작업했었던, senchapj\build\package 혹은 senchapj\build\testing 밑에 있는 폴더를, 마찬가지로 위 2번의 www 위치에 복사한 후 폴더명을 www로 바꾸면 되는데, 주의할 점은 cordova.js 파일이 안드로이드용과 IOS용이 따로 있기 때문에 각각 적합한 것을 넣어줘야 한다는 점입니다. 따라서 2번에서 복사해두었던 cordova.js 파일을 www 안에 덮어써주어야 합니다.


4. Xcode 상에서 빌드 및 실행을 하여 하이브리드 앱의 작동을 확인합니다.


,

Sencha Touch 프레임웍을 사용한 화면이 나타나는 것은 확인했으니, 다음은 Phone Gap의 native API도 정상 동작하는지 확인해보겠습니다.



1. senchapj/app/view 밑에 있는 Main.js 파일을 열고, html: [ ... ] 블럭의 맨 앞에 다음과 같이 추가해줍니다.


html: [

"<a href=\"javascript:navigator.notification.alert('Hello!')\">Click me</a>",

...

]


2. 빌드 후, Click 텍스트를 누를 때, 팝업이 나타나는 것을 확인합니다.



,

1. 커맨드 프롬프트창에서 PhoneGap 커맨드라인 툴을 이용하여 아래와 같이 입력하여, PhoneGap 프로젝트를 생성합니다. (이클립스에서 열 수 있는 안드로이드 프로젝트가 생성됨)


create C:\work\phonegappj com.sample aproject


사용법 : create <프로젝트가 생성될 폴더> <패키지명> <프로젝트명>




2. 반드시 Sencha Touch 설치 폴더 밑에서(sencha-touch.js... 등의 파일이 있는 위치), sencha cmd 툴을 이용하여 Sencha Touch 프로젝트를 생성합니다.

sencha generate app aproject C:\work\senchapj


사용법 : sencha generate app <프로젝트명> <프로젝트가 생성될 폴더>



-> Error occurred during initialization of VM... 에러가 나는 경우의 해결 방법



3. phonegappj\assets\www 밑에 있는 cordova.js 파일을 senchapj 폴더에 복사합니다.


4. phonegappj\assets\www 폴더를 삭제합니다.

5. senchapj\app.json 파일을 텍스트 편집기로 열고, 다음과 같이 cordova.js를 "js" 항목 밑에 추가합니다.


  "js": [


        {
            "path": "cordova.js"
        },


        ... 

    ],




6, 7번은 릴리즈 빌드와 테스트 빌드 중 한가지를 선택하여 진행합니다. 테스트 빌드의 경우, 좀 더 많은 정보를 갖고 있는 코드를 생성하여, 문제 발생시의 추적에 적합한 결과물을 만들어 줍니다.


[릴리즈 빌드의 경우]


6. senchapj 폴더 밑에서 다음의 명령을 실행합니다.

sencha app build package

7. senchapj\build\package 밑에 프로젝트명으로 된 폴더를 phonegappj/assets 밑에 복사하고, 복사된 폴더명을 www로 바꿉니다.



[테스트 빌드의 경우]


6. senchapj 폴더 밑에서 다음의 명령을 실행합니다.

sencha app build testing

7. senchapj\build\testing 밑에 프로젝트명으로 된 폴더를 phonegappj/assets 밑에 복사하고, 복사된 폴더명을 www로 바꿉니다.




-> sencha app build 명령에 대해 좀 더 자세히




8. phonegappj 폴더 밑에 있는 안드로이드 프로젝트를 Eclipse로 import하여 빌드 및 실행하여, 아래와 같이 Sencha Touch 화면이 나타나는 것을 확인합니다.




9. 이후에 Sencha Touch에 대한 수정을 할 경우, senchapj 폴더에서 수정하고 다시 6, 7, 8 과정을 거쳐서 테스트합니다.



,


안드로이드를 기준으로 Sencha Touch(Sencha Touch 2)와 PhoneGap(2.x)을 함께 사용하는 방법에 대해 정리해보겠습니다.

Sencha Touch와 PhoneGap을 함께 사용할 경우, 아래와 같이 역할 분담이 된다고 볼 수 있습니다.


 - Sencha Touch : UI Framework

 - PhoneGap : 프로젝트 뼈대 생성, Native API 제공



환경 설정


1. 기본 프로그램들 (이미 설치되어있는 것으로 가정)

 - JDK
 - Android SDK (여기서 테스트한 버전은 R22.3)
 - Eclipse

2. 다음의 프로그램들을 받은 후, 설치 프로그램을 실행하거나 압축을 풀어서 설치합니다.

 - PhoneGap : 2.9.0
 - Apache Ant : 1.9.2 (PhoneGap 사용을 위해 필요)
 - Sencha Touch : 2.3.1
 - Sencha CMD : 4.0.1.45 (Sencha Touch 사용을 위해 필요)

 - Ruby : 2.0.0-p353 (Sencha Touch 사용을 위해 필요)



3. <PhoneGap 설치 폴더>\lib\android\bin을 PATH 환경 변수에 추가합니다.

4. <Apache Ant 설치 폴더>\bin을 PATH 환경 변수에 추가합니다.

5. <Sencha CMD 설치 폴더>를 PATH 환경 변수에 추가합니다.

6. <Android SDK 설치 폴더>\tools를 PATH 환경 변수에 추가합니다.

7. <Ruby 설치 폴더>\bin을 PATH 환경 변수에 추가합니다.


8. 환경 변수 JAVA_HOME가 JDK의 bin 폴더 경로가 되도록 설정합니다.


9. Command prompt 상에서 android.bat를 한번 실행해주고, Android SDK Manager가 뜨는 것을 확인합니다.





업데이트 : 2013.12


,