Sencha Touch 2.0 SDK Tools

회사 : ㈜애드웹커뮤니케이션 부서 : 개발팀 직책 : 개발팀장 작성자 : 안병도 작성일 : 2012.03.28

- Mac Lion PC 환경.

Sencha Touch SDK Tools 설치 요약 내용

1. Sencha Touch SDK Tools 개발에 필요한 리스트. - Sencha Touch Framework. - Sencha Touch SDK Tools. - Android SDK Tools.(옵션) - Xcode .(옵션) - LocaHost 테스트를 위한 Web Server 설치.(Apache Tomcat, APM, IIS 등)

2. 프로그램 설치. - Sencha Touch FrameWork 다운로드 및 작업 폴더 셋팅. - Sencha Touch SDK Tools 설치. - sench 명령어 테스트.

3. 프로젝트를 Sencha SDK Tools 를 이용하여 모바일 웹 제작 및 스마트폰 접속 테스트. - 프로젝트를 제작 로컬에서 테스트. - 서버로 업로드 후 모바일 폰에서 테스트.

4. 프로젝트를 build 하여 하이브리드 앱을 제작 및 설치와 사용 테스트. - iOS App 제작 및 에뮬레이터 테스트. - Android App 제작 및 에뮬레이터 테스트.

5. 마켓 등록. - 이 부분은 기존의 애플과 안드로이드용 마켓 등록을 참조 하시기를 바랍니다.

1. Sencha Touch Framework 및 Sencha Touch SDK Tools 설치.

http://www.sencha.com/products/touch/download/2.0.0/

http://www.sencha.com/products/sdk-tools/download

그림은 다운로드 폴더의 내용이다. 1. 압축을 풀고 폴더의 명칭을 “sencha-touch-2” 으로 변경.

2. Sencha Touch SDK Tools 파일을 설치 한다.

2. Web Server 활성화.

Mac Pc에서 “환경 설정”으로 들어간 후, 3번째 라인의 “인터넷 및 무선” 의 “공유(Share)”를 클릭 한다.

왼쪽 리스트에서 웹 공유를 체크한다.

그림과 같이 오른쪽에 기본 폴더 와 사용자 폴더가 활성화 된다. 해당 사이트 주소를 클릭 하면, 로컬의 사이트 주소로 웹페이지가 잘 보일 것이다.

3. Sencha Touch Framework 및 Sencha Touch SDK Tools 설치.

4. Sencha Touch Framework 및 Sencha Touch SDK Tools과 Web Server를 사용 하기 위한 정리.

그림은 Sencha Touch Framework과 Sencha Touch SDK Tools 및 개인 사이트를 사용 하기 위해 폴더 복사 및 이동을 한 상태이다.

터미널 상태에서 위의 그림의 폴더 주소를 찾아 간다. 그 다음, 다음과 같은 명령어를 실행 시, 왼쪽 그림과 같이 메시지가 출력이 되면 Sencha Tocuh SDK Tools 를 사용 하기 위한 준비는 완료 된 것이다. 이런 메시지가 나오지 않는 경우는 지금까지의 과정을 다 uninstall 또는 삭제 하고, 처음부터 다시 하기를 바란다.

5. Sencha Touch SDK Tools를 이용한 프로젝트 생성 및 로컬 테스트.

그림과 같이 터미널 상태에서 sench-touch-2를 복사한 폴더로 이동하여 다음과 같은 명령어를 실행 한다. $sencha generate app GS ../GS 그림 처럼 GS 폴더를 생성 하고 개발에 필요한 모든 Framework 소스들을 복사한다.

왼쪽 그림은 기본으로 생성된 GS 프로젝트를 Localhost 로 실행한 웹 페이지이다. 보시는 거와 같이 기본적인 프로젝트는 Sencha Touch SDK Tools를 사용 하면 자동으로 생성해 준다.

6. Sencha Touch SDK Tools를 이용한 프로젝트 Production 생성 및 로컬 테스트.

그림과 같이 터미널 상태에서 프로젝트 폴더로 이동 후, 다음과 같은 명령어를 실행 한다. $sencha app build production 모든 테스트가 끝난 상태의 소스를 최적화 해서 실제 서비스 사용에 만족한 제작물을 production 한다.

왼쪽 이미지는 sencha 명령어로 controller를 자동으로 생성 하는 과정을 보여 주는 내용이다.

Production 한 결과물은 최적화 되어 있기 때문에 개발 단계에서 있던 소스와는 전혀 다르다. 압축 및 manifest 가 가능한 상태의 소스가 만들어진다.

왼쪽 이미지는 필요 없는 부분을 제거 한 이후, Scss 파일을 컴파스로 컴파일 하는 과정을 보여 준다.

왼쪽 이미지는 production 이후 생성된 index.html 파일의 내용이며, 자바스크립트의 내용이 모두 압축되어 있는 것을 볼 수 있다. 또한, 하단 이미지의 폴더 구조에서도 볼 수 있듯이 기존 테스트 개발상에서 보았던 app 폴더가 없어 졌다.

7. Sencha Touch SDK Tools를 이용한 App 생성 준비 사항.

App을 제작 하기 이전에 Sencha SDK Tool는 packager.json 파일의 선언된 내용에 맞게 iOS 및 Android App을 제작 한다. 그러므로 먼저 packager.json 파일의 구조를 알아야 한다. 너무 어려운 것은 없으니 파일을 열어서 천천히 살펴 보기를 바란다. 이곳에서는 App 제작 및 테스트를 위한 내용만 다루겠다.

이름 의미 비고

applicationName App의 명칭 My App

applicationId 패키지명 com.mycompany.myAppID

platform App을 설치 할 단말기 OS - iOSSimulator - iOS - Android - AndroidEmulator

certificatePath App 베포를 위한 인증서 실제 개발자 등록을 해야 함.

sdkPath Android SDK Tool Path.(폴더 위치) /Users/adweb/android-sdks

androidAPILevel Android API Level 15

Android API Level : http://developer.android.com/guide/appendix/api-levels.html

왼쪽 이미지는 iOS App을 제작 하기 위한 명령어를 실행한 화면이다. “Sencha app build native”라고 명령을 실행한다.

7. Sencha Touch SDK Tools를 이용한 iOS App 생성 및 에뮬레이터 테스트.

이름 의미 비고

applicationName App의 명칭 Get Start

applicationId 패키지명 com.mycompany.myAppID

platform App을 설치 할 단말기 OS iOSSimulator

certificatePath App 베포를 위한 인증서 /폴더/인증서 파일명.P12

sdkPath Android SDK Tool Path.(폴더 위치)

androidAPILevel Android API Level

iOS 테스트를 위해 인증서 파일을 미리 준비해서 프로젝트 root 폴더에 복사를 해 놓는다.

7. Sencha Touch SDK Tools를 이용한 App 생성 및 에뮬레이터 테스트.

왼쪽 이미지는 iOS App을 제작 하기 위한 명령을 실행한 이후, 새롭게 생성된 build 폴더의 native, package 폴더 화면이다. 화면에서 보이듯이 Get Start.app iOS App이 생성된 것을 볼 수 있으며, 하단의 그림은 iOSSimulator에서 실행된 Get Start App 모습이다.

7. iOS App 실제폰 테스트.

1. iPhone을 PC와 연결한다. 2. 생성된 Get Start.app 파일을 itunes

응용프로그램 폴더에 복사 한다. 3. 하단 이미지처럼 앱을 단말기에 드래그

하여 복사 한다. 4. Itunes 하단의 “적용” 버튼을 클릭하여

iTunes와 단말기 동기화를 한다. 5. 실제 단말기의 앱을 실행 한다.

①

②

③

왼쪽 이미지는 Android App을 제작 하기 위한 명령어를 실행한 화면이다. “Sencha app build native”라고 명령을 실행한다.

8. Sencha Touch SDK Tools를 이용한 Android App 생성 및 에뮬레이터 테스트.

이름 의미 비고

applicationName App의 명칭 Get Start

applicationId 패키지명 com.mycompany.myAppID

platform App을 설치 할 단말기 OS AndroidEmulator

certificatePath App 베포를 위한 인증서

sdkPath Android SDK Tool Path.(폴더 위치) /Users/adweb/android-sdks

androidAPILevel Android API Level 8

Android 테스트를 위해 미리 Emulator를 실행 한다.

왼쪽 이미지는 Android App을 제작 하기 위한 명령을 실행한 이후, 새롭게 생성된 build 폴더의 native, package 폴더 화면이다. 화면에서 보이듯이 Get Start.apk Android App이 생성된 것을 볼 수 있으며, 하단의 그림은 Emulator에서 실행된 Get Start App 모습이다.

8. Sencha Touch SDK Tools를 이용한 Android App 생성 및 에뮬레이터 테스트.

Android App은 단말기에 usb를 통해서 직접 복사를 하여 App을 설치해도 상관이 없다. 생성된 Get Start.apk 파일을 직접 복사 해서 설치 하여 실제 폰에서도 테스트 해 보기를 바란다.