[sencha touch] sencha touch와 phonegap 연동시키기

sencha touch를 사용하다보면 네이티브 기능을 활용할때가 있다습니다.

센차터치에서도 네이티브 기능을 사용할 수 있지만 기능도 적고 phonegap은 수많은 플러그인이 있기 때문에 많은 기능을 쉽게

활용할 수 있습니다.

그리고 직접 네이티브 기능을 쓰는 플러그인도 만들 수 있습니다.

다음에는 직접 phonegap 플러그인 만드는 방법을 포스팅하겠습니다.

이 phonegap과 sencha touch를 연동하는 방법을 잘 모르시는분이 많아서 설명해 보겠습니다.

일단 폴더를 하나 만든후 폴더안에 2개의 폴더를 만듭니다.

저는 SenchaTouch라는 폴더를 만든 후 phonegap 폴더와 sencha폴더를 만들었습니다.

phonegap폴더에는 phonegap프로젝트를 생성할 것이고 sencha 폴더에는 sencha touch프로젝트를 생성할 것입니다.

같이 관리하기 쉽게 하기 위해서 한폴더 안에 생성했습니다.

우선 phonegap프로젝트먼저 생성해 보겠습니다.

http://phonegap.com/ 사이트로 가서 phonegap을 다운받습니다.

다운을 받은 후 압축을 풀고 

아래 그림과 같은 경로로 들어가보면 bin폴더가 있습니다.

이제 터미널창으로 이용해서 프로젝트를 생성해 보겠습니다.

터미널을 띄우고 위의 bin경로로 이동합니다.

쉽게 이동하는 방법은 cd를 입력후 bin폴더를 터미널창에 끌어다 놓거나

bin 폴더를 바로 터미널 실행아이콘으로 끌어다 놓는 방법이 있습니다.

이렇게 이동후 프로젝트를 생성하는 방법은 다음과 같이 입력합니다.

./create <프로젝트가 생성될 폴더> <페키지 이름> <프로젝트 이름>

다음과 같이 ios phonegap 프로젝트가 생성됩니다.

이제 phonegap의 www폴더안에 있는 cordova파일을 sencha 폴더로 이동하고 기존의 www폴더는 삭제합니다.

이제 sencha 프로젝트를 생성해 연동시켜보도록 하겠습니다.

http://www.sencha.com/products/touch/download/ 로 이동해 센차 gpl버전을 다운받습니다.

그리고 http://www.sencha.com/products/sencha-cmd/download 들어가 cmd를 다운받습니다.

cmd를 설치해야 mvc형식으로 프로젝트를 생성하고 빌드를 할 수 있습니다.

다운을 받아 압축을 풀고 설치를 합니다.

설치가 완료되면 터미널 창으로 띄운후 다음과 같이 입력해 sencha touch프로젝트를 생성합니다.

sencha -sdk <다운받은 sencha gpl폴더경로> generate app <프로젝트 이름> <프로젝트가 생성될 경로>

다음과 같이 프로젝트가 생성됩니다.

이제 생성된 파일중 app.json파일을 수정해야 합니다.

app.json파일을 열어 이전에 phonagap폴더에서 가져온 cordova.js파일을 추가해줍니다.

이제 마지막으로 phonegap 폴더안에 www폴더를 생성해야 합니다.

터미널 창에서 다음과 같이 입력합니다.

ln -s <sencha 프로젝트 경로> <phonagap 프로젝트 경로 /www>

다시 말하면 ln -s를 입력 후 처음에 한폴더에 생성한 두개의 프로젝트중 sencha 프로젝트를 터미널창에 끌어다놓고 다음으로 

phonegap프로젝트를 끌어다 놓은후 뒤에 /www를 붙어주고 입력합니다.

이렇게 입력하면 phonagap폴더안에 www폴더가 생성되고 이 폴더안에 sencha폴더 내용이 들어있습니다.

이제 xcode를 열고 실행해 보면

다음과 같이 잘 연동되는걸 확인할 수 있습니다.

안드로이드도 같은 방식으로 하면됩니다.

다운받은 phonegap폴더 lib->android->bin 폴더를 가지고 아이폰과 같은 방식으로 프로젝트를 생성후

./create <프로젝트가 생성될 폴더> <페키지 이름> <프로젝트 이름>

assets 폴더안에 www폴더를 생성하면 됩니다.

ln -s <sencha 프로젝트 경로> <phonagap 프로젝트 경로 /www>