Sencha Touch 2.0 SDK Tools

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

- Window PC 환경.

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

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

http://developer.android.com/sdk/index.html

1. Sencha-touch framework 다운로드

2. Sencha-touch SDK Tools 다운로드

3. Android SDK Tools 다운로드

3가지 프로그램 다운로드 파일 리스트.

첫 번째 설치. – sencha-touch framework 설치. C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\SenchaProject 같이 폴더 생성. sencha-touch-2.0.0-gpl 압축 파일을 다음과 같은 폴더에 풀어 준다. C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\SenchaProject\ 그리고 압축 폴더의 폴더명을 다음과 같이 변경 하여 준다. C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\SenchaProject\sencha-touch-2

Tomcat을 사용하는 이유는 Local Web Server 를 사용 하여 웹 서버에서 테스트를 하기 위한 방법 이며, 다른 웹서버(IIS, APM 등)를 사용 하거나 Dcoment Root 폴더를 변경 하여도 무방하다.

두 번째 설치. – sencha-touch SDK Tools 설치. 다운로드 받은 폴더에서 SenchaSDKTools-2.0.0-Beta-windows 을 실행 하자. 윈도우 7인 경우 Program Files와 Program Files (x86) 2가지 있는데, 설치 시 폴더를 Program Files 으로 하는 것이 에러가 없다. 설치 시, 복잡한 내용은 없으니 설치 폴더만 주의 하면 된다. 다음은 설치 이후 탐색기 폴더 내용이다.

세 번째 설치. – Android SDK Tools 설치. 이미 Android SDK Tool 설치되어 있는 경우 설치를 건더 띄어도 된다. 다운로드 받은 폴더에서 installer_r17-windows 을 실행 하자. 설치 폴더를 C:\Android\android-sdk 으로 C:\ 루트 쪽으로 설치를 한다. 설치 시, 복잡한 내용은 없으니 설치 폴더만 주의 하면 된다. 설치 완료 되면 android.bat 파일을 실행 하겠냐고 물어 보면 실행을 한다. 다음 3가지는 선택을 한다. 동의 를 하고 설치를 하면 된다.

다음은 2가지 설치 된 내용이 잘 되었는지 확인을 해 보자. 도스 창에서 C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\SenchaProject 으로 이동을 한다. 참고로 도스 창을 키우고 싶다면, 도스 실행창에서 상단바를 마우스 오른쪽 버튼 클릭 한다. 속성으로 들어 가면 다음과 같은 화면이 나온다.

도스 창 크기 변환

C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\SenchaProject 으로 이동 하여 보면, 압축 파일을 풀어 놓은 sencha-touch-2 폴더가 있을 것이다. Sencha 라는 명령어를 사용 하려면 sencha-touch-2 폴더에서 첫 명령어를 주어야 한다. 프롬프트에서 sench 라는 명령어를 실행 하여 다음과 같은 화면이 보이면 성공적으로 설치 및 SDK Tools 사용 준비가 완료 되었다. 처음 명령어가 에러인 경우 다시 시도하면 정상적으로 작동을 할 것이다. 이것은 java 문제일 듯 싶다.

자 이제부터 본격적으로 Sencha Touch 2.0 SDK Tools 사용을 해 보도록 합시다. c:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\SenchaProject\sencha-touch-2> sencha generate app Device ../Device 위와 같이 명령어를 실행 하면 다음과 같은 내용이 출력 되면서 완료가 된다.

위의 출력 내용을 보면 기존에 framework에서 사용 하였던 파일들을 새로운 프로젝트에 그대로 복사 해서 생성 하였다. 탐색기에서 Device 폴더의 용량을 보면 84M정도 된다. c:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\SenchaProject\Device> 실제 작업할 폴더로 이동을 한다. 이제부터 소스 작업을 할 것인데, html, css, javascript 등 에디트 할 수 있는 어떤 에디트 툴을 사용해도 무방하다.

이 곳에서는 Editplus 툴을 사용할 것 입니다. 또한 웹 브라우저는 크롬을 사용할 것 입니다. 타 브라우저에서는 많은 부분의 에러가 있으니 필히 크롬을 다운받아 설치해 놓으신 진행을 하십시오. 다음은 지금까지 sencha-touch SDK Tools에 기본적으로 생성한 Device 프로젝트의 실행 화면이다.

http://Web주소/Device/index.html

지금까지 작업한 내용을 기준으로 설치 및 sench-touch SDK Tools를 사용하여 생성된 프로젝트 내용을 보면, 지금껏 sench-touch MVC 패턴에 맞게 수작업으로 생성한 소스와 비슷한 폴더 구조를 가지고 있다. 다만, 다른 점은 index.html 파일에 다음과 같이 추가 되었으며 기존의 css, js 파일들은 모두 사라졌다. <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script> 이 부분이 추가 되었으며, 나머지 부분의 소스들은 development.js 자바스크립트 파일에서 app.json 파일의 내용을 가지고 분석 하여, 그 동안 코딩 했던 부분을 자동으로 실행 준다는 것이다. 결론, SDK Tools 를 사용하면 모든 기본 폴더 및 기본 코딩을 알아서 해 준다는 것이다. 이후 개발에 필요한 코딩은 개발자의 몫이다.

sench-touch SDK Tools를 사용하여 Device 프로젝트의 생성된 구조를 탐색기에서 그림과 같이 볼 수 있다.

MVC 패턴에서 controller를 직접 코딩을 해도 무방 하지만, sench-touch SDK Tools를 이용해도 된다. 사용법은 무척이나 간단하다. 도스 프롬프트 상에서 “Sencha generate controller Main” 와 같이 명령어를 입력 하고 실행 하면 된다. 실행 하고 나면, 다음과 같이 controller 폴더에 Main.js 자바스크립트 controller를 생성하면서, 동시에 app.js 파일에 Main.js controller를 추가 한다.

모든 코딩 작업과 테스트가 완료 되었고, 실제 사용 환경으로 build를 하겠다면, 프롬프트 상에서 “sench app build production” 이라고 명령어를 입력 하면 된다. 다음은 production을 하고 나면 출력 되는 결과 메시지이다. 실제 베포용으로 최적화된 내용만 build 한다.

기존에 작업 하던 내용들은 모든 파일을 가지고 개발 되었다. Sencha-touch SDK Tools의 sencha 명령어의 옵션으로 Production 을 사용하여 build를 하게 되면, 기존 프로젝트 폴더 하위에 Build/production 이라는 폴더가 생성 되면서 그 곳에 build된 파일들만 저장 된다. 기존의 테스트 주소는 http://web 주소/폴더/Device/ 였다면 Production build 된 주소는 http://web 주소/폴더/Device/build/production/ 으로 변경 된다. 브라우저에서 요소 검사를 하게 되면 manifest cache가 적용된 것을 다음 그림과 같이 볼 수 있다.

자, 이제는 웹 서버에 올려 놓고 실제 스마트폰에서 테스트를 해 보도록 하자. 그 동안 작업한 내용물을 그 대로 서버에 임의 폴더를 만들고, 해당 폴더에 소스를 업로드만 하면 끝이다. 원본 소스 작업물의 폴더 위치는 product으로 build 하고 난 폴더에 있다. C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\SenchaProject\Device\build\production Production 소스 파일을 ftp 프로그램을 이용 하여 서버에 올리면 된다. 그리고 아이폰, 아이패드, 안드로이드, 갤럭시 패드의 모바일 웹을 이용하여 해당 사이트를 접속 하면 된다. 참고로, production build를 하게 되면 기존에 작업된 내용 중 resources 폴더와 sdk 폴더만 남아 있고 나머지 전체 내용은 app.js 파일 안에 압축 되어 들어 간다.

자, 이번에는 앱으로 퍼블리싱 하는 것을 시도해 봅시다. 프로젝트 Device 폴더에 packager.json 파일을 열어서 App으로 빌드 하는 명령어는 해당 프로젝트 폴더의 프롬프트에서 “sencha app build native”를 사용 한다. packager.json 파일의 platform을 iOs, Android를 변경해 가면서 2번 실행 하면 각각의 App을 제작할 수 있다. 또한, iOS는 필히 인증서가 필요 하며 인증서 파일은 아이폰 개발자 등록이 되어 있으면 문제 없다.

이름 의미 비고

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

c:\SenchaProejct\Device>sencha app build native [INFO] Deploying your application to c:\SenchaProejct\Device\build\package [INFO] Copied sdk/sencha-touch.js [INFO] Copied app.js [INFO] Copied resources/css/app.css [INFO] Copied resources/images [INFO] Copied resources/icons [INFO] Copied resources/loading [INFO] Resolving your application dependencies... [INFO] Found 228 dependencies. Concatenating all into app.js... [INFO] Processed sdk/sencha-touch.js [INFO] Minifying sdk/sencha-touch.js [INFO] Processed app.js [INFO] Minifying app.js [INFO] Minifying resources/css/app.css [INFO] Minified sdk/sencha-touch.js [INFO] Minified app.js [INFO] Minified resources/css/app.css [INFO] Generated app.json [INFO] Embedded microloader into index.html [INFO] Packaging your application as a native app... [INFO] The application was successfully packaged The application was successfully signed To run iOS simulator you need to use Mac OS X c:\SenchaProejct\Device>

iOS 용 Native 옵션으로 App 제작을 한 출력 메시지다.

윈도우에서 iOS 시물레이터를 실행 할 수 없어 발생. App 제작에는 문제 없음

자, 이제는 App을 완성 하였다. 우측의 그림은 완성된 App을 보여 주는 탐색기 정보이다. 다음은 App을 실행해 봅시다. 우선 PC에 iPhone, iPad를 연결 하여 iTues를 실행 하자.

마우스를 Devise.app 폴더를 드래그 하여, iTues의 응용프로그램에 복사해 놓자. 실제 iPhone, iPad 적용은 다음 페이지 참조.

iTunes의 Device App을 그림과 같이 마우스로 끌어 놓고, 하단의 적용 버튼을 클릭 한다. Device App이 실제 단말기로 설치가 된다.

①

②

③

c:\SenchaProejct\Device>sencha app build native [INFO] Deploying your application to c:\SenchaProejct\Device\build\package [INFO] Copied sdk/sencha-touch.js . . . [INFO] Packaging your application as a native app... [INFO] Created directory C:\SenchaProejct\Device\build\native\src\com\mycompany\Device Added file c:\SenchaProejct\Device\build\native\src\com\mycompany\Device\STActivity.java Created directory C:\SenchaProejct\Device\build\native\res Created directory C:\SenchaProejct\Device\build\native\bin Created directory C:\SenchaProejct\Device\build\native\libs Created directory C:\SenchaProejct\Device\build\native\res\values Added file c:\SenchaProejct\Device\build\native\res\values\strings.xml Created directory C:\SenchaProejct\Device\build\native\res\layout Added file c:\SenchaProejct\Device\build\native\res\layout\main.xml Created directory C:\SenchaProejct\Device\build\native\res\drawable-hdpi Created directory C:\SenchaProejct\Device\build\native\res\drawable-mdpi Created directory C:\SenchaProejct\Device\build\native\res\drawable-ldpi Added file c:\SenchaProejct\Device\build\native\AndroidManifest.xml Added file c:\SenchaProejct\Device\build\native\build.xml Added file c:\SenchaProejct\Device\build\native\proguard.cfg Buildfile: c:\SenchaProejct\Device\build\native\build.xml -set-mode-check: . . . -compile: [javac] Compiling 2 source files to c:\SenchaProejct\Device\build\native\bin\classes. . . . BUILD SUCCESSFUL Total time: 6 seconds ""E:/eclipse32/android-sdk-windows\tools\android" create project --target android-15 --name Device --activity STActivity --path c:\SenchaProejct\Devic e\build\native\ --package com.mycompany.Device"

다음은 Android App을 Native 옵션으로 처리한 출력 메시지다.

자, 이제는 Android App을 완성 하였다. 실제 폰으로 복사 해서 테스트를 해도 된다. 여기에서는 에뮬레이터에서 실행 하는 것으로 마무리를 한다. Eclipse에서 최근 아이스크림 버전으로 에뮬레이터를 생성 하였고, 실행 과정은 그림 순서와 같다.

① ②

④ ③ ⑤

참고로, 테마 변경은 다음과 같이 사용한다. C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\SenchaProject\Device\resources\sass

.scss 파일이 있는 곳으로 이동 하여 다음과 같이 compass 명령어를 사용 하면 된다. Compass compile sench-touch.scss 명령을 실행 하면, Overwrite ../css/sencha-touch.css 라고 프롬프트 상에서 출력 된다.