Sencha Touch 2 개발환경 (Get started)

Windows 7 환경에서 Sencha touch로 개발을 하기 위한 준비과정을 몇 단계 나누어서 정리해보자.

Step 1. Download
Sencha touch 2 SDK http://www.sencha.com/products/touch/download/
Sencha touch CMD http://www.sencha.com/products/sencha-cmd/download
위 링크를 통해서 두 가지 모두 다운로드 한다. (포스팅 시점에서 latest version SDK: 2.3.1 CMD: 4.0.1)

Step 2. Install
Sencha touch SDK의 압축을 푼다. 앞으로 SDK의 명령어를 실행시킬 디렉토리이기 때문에 처음에 잘 정하는것이 좋다. program files/sencha/senchaSDK 뭐 이런식으로..
Sencha touch CMD는 파일을 실행시키고 설치를 완료한다.

두가지 모두 정상적으로 설치가 되었다면 command console에서 다음과 같은 메세지를 볼 수 있다.

시작 - 실행 - cmd - 'sencha' 명령어 입력

Step 3. Creating App
Sencha CMD를 사용하지 않고도  web app을 만들 수 있지만 사용하는게 버전 업그레이드나 여러 측면에서 나은점이 있다.

windows의 command console을 열고

sencha generate app AppName AppPath

형태의 명령어를 입력한다.
step 1에서 설치한 sencha SDK 디렉토리에서 명령어를 실행해야 한다.
그러면 appPath로 지정한 곳에 웹앱이 생성된 것을 확인할 수 있다.

generate가 성공적으로 된 모습

Step 4. Test

생성된 app의 구동화면을 보려면 서버 환경이 필요하다.

개인적으로 환경이 갖춰져 있으면 서버에 올리고 브라우저를 띄워서 index.html 파일이 있는 url을 입력하면 된다.

그게 아니라면 로컬 서버 환경을 만들어줘서 테스트 하면 되는데 xampp라는 프로그램을 이용해서 테스트가 가능하다.(다르게 구성해도 상관없음)

xampp 아래 htdocs에 생성된 폴더째 집어넣고 브라우저에 localhost/폴더명 을 치면 테스트가 가능하다.

테스트가 정상적으로 된 화면

Error

위의 화면과 같은 에러메세지가 뜨는 경우가 발생할 수 있다.
이건 step 3 에서 sencha generate 명령을 입력하는 위치가 SDK 위치가 아닐 때 발생한다.
가끔 SDK와 CMD를 착각해서 cmd를 설치한 디렉토리로 이동해서 명령어를 입력할 수가 있다.
반드시 위치를 확인하고 앱을 만들자.

이로써 sencha 개발에 대한 준비가 끝났다.