Sencha Touch 2.0 SDK Tools - Window PC 환경. 회사 : 애드웹커뮤니케이션부서 : 개발팀직책 : 개발팀장작성자 : 안병도작성일 : 2012.03.28
http://www.sencha.com/products/touch/download/2.0.0/ 1. Sencha-touch framework 다운로드 http://www.sencha.com/products/sdk-tools/download 2. Sencha-touch SDK Tools 다운로드 http://developer.android.com/sdk/index.html 3. Android SDK Tools 다운로드
3 가지프로그램다운로드파일리스트. 첫번째설치. sencha-touch framework 설치. Tomcat 을사용하는이유는 Local Web Server 를사용하여웹서버에서테스트를하기위한방법이며, 다른웹서버 (IIS, APM 등 ) 를사용하거나 Dcoment Root 폴더를변경하여도무방하다. 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
두번째설치. 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 를사용하여 Device 프로젝트의생성된구조를탐색기에서그림과같이볼수있다. 지금까지작업한내용을기준으로설치및 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 를사용하면모든기본폴더및기본코딩을알아서해준다는것이다. 이후개발에필요한코딩은개발자의몫이다.
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 파일을열어서 이름의미비고 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 App 으로빌드하는명령어는해당프로젝트폴더의프롬프트에서 sencha app build native 를사용한다. packager.json 파일의 platform 을 ios, Android 를변경해가면서 2 번실행하면각각의 App 을제작할수있다. 또한, ios 는필히인증서가필요하며인증서파일은아이폰개발자등록이되어있으면문제없다.
ios 용 Native 옵션으로 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] 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 시물레이터를실행할수없어발생. App 제작에는문제없음
자, 이제는 App을완성하였다. 우측의그림은완성된 App을보여주는탐색기정보이다. 다음은 App을실행해봅시다. 우선 PC에 iphone, ipad를연결하여 itues를실행하자. 마우스를 Devise.app 폴더를드래그하여, itues 의응용프로그램에복사해놓자. 실제 iphone, ipad 적용은다음페이지참조.
itunes 의 Device App 을그림과같이마우스로끌어놓고, 하단의적용버튼을클릭한다. Device App 이실제단말기로설치가된다. 1 2 3
다음은 Android App 을 Native 옵션으로처리한출력메시지다. 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 을완성하였다. 실제폰으로복사해서테스트를해도된다. 여기에서는에뮬레이터에서실행하는것으로마무리를한다. Eclipse 에서최근아이스크림버전으로에뮬레이터를생성하였고, 실행과정은그림순서와같다. 1 2 3 4 5
참고로, 테마변경은다음과같이사용한다. 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 라고프롬프트상에서출력된다.