센차터치2 시작하기

한국센차유저그룹 번역팀

번역 : 정건우 [Gunwooj@me.com]

교정 : 윤가희 [a5312559@facebook.com]

원문 : http://docs.sencha.com/touch/2-0/#!/guide/getting_started

센차터치란?

센차터치를 이용하면 쉽고 빠르게 html 기반의 모바일 앱을 만들 수 있다. 센차터치로 만든 모바일 앱은 Android, iOS 그리고 블랙베리에서 작동하며 브라우저에서 네이티브 앱과 같은 경험을 제공한다.

필요한 준비물

먼저, 센차터치 2 SDK SDK Tools를 준비한다. 센차 웹 사이트에서 무료로 받을 수 있다. 추가로 필요한 내용:

  1. 로컬로 실행되는 웹 서버 컴퓨터
  2. 최신 기술을 지원하는 크롬 Safari 브라우저를 권장한다,

윈도우즈로 실행 중인 경우, 센차터치가 제대로 작동하기 위해선 IIS의 MIME 형식에서 application/x-json을 추가해야 한다는 점을 유의하기 바란다. 여기서 방법을 찾을 수 있다: http://stackoverflow.com/a/1121114/273985

설치

먼저, 프로젝트 디렉토리에 SDK의 zip 파일의 압축을 푼다. 이 폴더는 완전히 HTTP 서버에서 쉽게 접근하여 사용하도록 되어있다. 예를 들어, 센차터치 설명서를 보면서 웹 브라우저에 http://localhost/sencha-touch-2.0.0-gpl을 탐색하여 활용할 수 있다.

또한 SDK Tools 설치 프로그램을 실행 한다. SDK Tools는 새로운 응용프로그램을 템플릿을 생성할 경로에 센차 command line tool(자동으로 명령어 입력)을 추가 한다. SDK Tool의 설치를 확인 하려면 센차터치 디텍토리로 옮겨가 명령어 ‘sencha’를 입력한다. 예를 들면 다음과 같다:


$ cd ~/webroot/sencha-touch-2.0.0-gpl/

$ sencha

Sencha Command v2.0.0 for Sencha Touch 2

Copyright (c) 2012 Sencha Inc.

...

참고: 센차 command를 사용하려면 생성된 터치 앱이나 다운로드한 SDK 디텍토리의 내부에서 실행해야 한다.

첫 번째 앱 생성하기

이제 센차터치 및 SDK Tool이 설치되었으니 응용 프로그램을 생성 해보자. 계속 진행하려면 센차터치 SDK 폴더 내에서 다음과 같이 입력해야 한다:

GS 변수와 ../GS 디텍토리 안에서 센차터치 응용프로그램의 골격을 생성한다. 앱의 골격 안에는 터치 응용 프로그램을 만드는 데 필요한 기본 index.html, 터치 SDK의 사본, CSS, 이미지, 응용 프로그램 네이티브 패키징에 대한 구성 파일을 포함한 모든 파일이 들어 있다.

응용 프로그램을 웹 브라우저에서 열어 성공적으로 생성 되었는지 확인 할 수 있다. 웹 루트 폴더로 SDK를 추출했다고 가정하면, http://localhost/GS에 네이티브 및 기본 응용 프로그램을 볼 수 있다:

코드 열어보기

선호하는 IDE 또는 텍스트 편집기에서 GS 디렉토리를 열어본다. 디렉토리 구조는 다음과 같다:

다음은 각각의 파일과 디렉토리에 대한 설명이다:

  1. app - 앱에 대한 모델, 뷰, 컨트롤러 및 저장소를 포함하는 디렉토리.
  2. app.js - 앱의 메인 자바 스크립트 진입점.
  3. app.json - 앱 환경설정 파일 - 앱의 축소 버전을 만드는 빌더가 사용.
  4. index.html - 앱에 대한 HTML 파일.
  5. packager.json - iOS와 안드로이드의 앱 장터에서 사용할 앱의 기본 버전을 생성하는 Packager가 사용하는 구성 파일.
  6. resources - 앱을 대한 CSS와 이미지를 포함.
  7. sdk - 센차터치 SDK의 복사본. 이 폴더의 내용을 변경할 필요가 없다.

app.js를 편집기에서 열어보면 앱의 중요 진입점이 나온다.

launch 함수는 응용 프로그램의 진입 지점이다. 기본 응용 프로그램 안에서, 먼저 응용 프로그램의 로딩을 표시하는 indictor를 숨긴 다음, 뷰포트에 메인 뷰의 인스턴스를 생성하여 추가한다.

뷰포트는 응용 프로그램에 구성 요소를 추가 할 수 있는 Card layout 이다. 기본적인 앱이므로 뷰포트에 메인 뷰를 추가하여 화면에 표시한다. 메인 뷰 내부의 코드를 살펴보자.

app/view/Main.js를 열어 코드 에디터에서 라인 10을 편집하자:


title: 'Home Tab'

이번엔 라인 19를 변경하자:


title: 'Woohoo!'

라인 22-26도 변경 :


html: [
"I changed the default <b>HTML Contents</b> to something different!"
].join("")

이제 응용 프로그램의 변경 사항을 확인하기 위해 브라우저를 새로 고침 한다:

다음 단계

다음 단계는 첫 번째 응용 프로그램 가이드를 따라하는 것이다. 방금 수행한 가이드 같이 간단하지만 강력한 앱을 만들 것이다. 또는 가이드 상단에 있는 비디오로도 진행 할 수 있다.