PowerPoint 프레젠테이션

Similar documents
(Microsoft PowerPoint - AndroG3\306\367\306\303\(ICB\).pptx)

4S 1차년도 평가 발표자료

슬라이드 1

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx

4. Compass 명령어를알아보자. compass <command> [<option>, <option>, <option>.. <option>] command : 명령어. clean - Remove generated files and the sass cache. com

Windows 8에서 BioStar 1 설치하기

슬라이드 1

Microsoft Word - src.doc

을풀면된다. 2. JDK 설치 JDK 는 Sun Developer Network 의 Java( 혹은 에서 Download > JavaSE 에서 JDK 6 Update xx 를선택하면설치파일을

1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과

B.3 JDBC 설치 JDBC Java DataBase Connectivity 는자바에서 DBMS의종류에상관없이일관된방법으로 SQL을수행할수있도록해주는자바 API Application Program Interface 다. 이책에서는톰캣과 SQL Server 간의연결을위

슬라이드 1

DE1-SoC Board

컴퓨터과학과 교육목표 컴퓨터과학과의 컴퓨터과학 프로그램은 해당분야 에서 학문적 기술을 창의적으로 연구하고 산업적 기술을 주도적으로 개발하는 우수한 인력을 양성 함과 동시에 직업적 도덕적 책임의식을 갖는 IT인 육성을 교육목표로 한다. 1. 전공 기본 지식을 체계적으로

슬라이드 1

SBR-100S User Manual

NTD36HD Manual

PowerPoint 프레젠테이션

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Windows Server 2012

Microsoft Word - windows server 2003 수동설치_non pro support_.doc

ISP and CodeVisionAVR C Compiler.hwp

Chapter 1

Microsoft PowerPoint - 안드로이드 개발 환경 구축(170411)

Studuino소프트웨어 설치

JDK이클립스

Analytics > Log & Crash Search > Unity ios SDK [Deprecated] Log & Crash Unity ios SDK. TOAST SDK. Log & Crash Unity SDK Log & Crash Search. Log & Cras

Microsoft PowerPoint - [Practice #1] APM InstalI.ppt

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드]

JAVA 플랫폼 개발 환경 구축 및 활용

Install stm32cubemx and st-link utility

스마트월드캠퍼스 교육교제

슬라이드 1

1. Windows 설치 (Client 설치 ) 원하는위치에다운받은발송클라이언트압축파일을해제합니다. Step 2. /conf/config.xml 파일수정 conf 폴더에서 config.xml 파일을텍스트에디터를이용하여 Open 합니다. config.xml 파일에서, 아

<4D F736F F D205B4354BDC9C3FEB8AEC6F7C6AE5D3131C8A35FC5ACB6F3BFECB5E520C4C4C7BBC6C320B1E2BCFA20B5BFC7E2>

iii. Design Tab 을 Click 하여 WindowBuilder 가자동으로생성한 GUI 프로그래밍환경을확인한다.

제 출 문 환경부장관 귀하 본 보고서를 습마트기기 활용 환경지킴이 및 교육 통합 서비스 개 발 과제의 최종보고서로 제출합니다. 주관연구기관 : 주관연구기관장 : 2015년 10월 주식회사 덕키즈 김 형 준 (주관)연구책임자 : 문종욱 (주관)참여연구원 : 김형준, 문병

Interstage5 SOAP서비스 설정 가이드

Office 365 사용자 가이드

TTA Journal No.157_서체변경.indd

C. KHU-EE xmega Board 에서는 Button 을 2 개만사용하기때문에 GPIO_PUSH_BUTTON_2 과 GPIO_PUSH_BUTTON_3 define 을 Comment 처리 한다. D. AT45DBX 도사용하지않기때문에 Comment 처리한다. E.

PowerPoint Presentation

BEA_WebLogic.hwp

슬라이드 1

1. 안드로이드개발환경설정 안드로이드개발을위해선툴체인을비롯한다양한소프트웨어패키지가필요합니다 툴체인 (Cross-Compiler) 설치 안드로이드 2.2 프로요부터는소스에기본툴체인이 prebuilt 라는이름으로포함되어있지만, 리눅스 나부트로더 (U-boot)

Microsoft PowerPoint - chap01-C언어개요.pptx

Spring Boot

리눅스설치가이드 3. 3Rabbitz Book 을리눅스에서설치하기위한절차는다음과같습니다. 설치에대한예시는우분투서버 기준으로진행됩니다. 1. Java Development Kit (JDK) 또는 Java Runtime Environment (JRE) 를설치합니다. 2.

서현수

SQL Developer Connect to TimesTen 유니원아이앤씨 DB 기술지원팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 작성자

Contributors: Myung Su Seok and SeokJae Yoo Last Update: 09/25/ Introduction 2015년 8월현재전자기학분야에서가장많이쓰이고있는 simulation software는다음과같은알고리즘을사용하고있다.

슬라이드 제목 없음

슬라이드 1

Mango-IMX6Q mfgtool을 이용한 이미지 Write하기

MaxstAR SDK 2.0 for Unity3D Manual Ver

임베디드시스템설계강의자료 4 (2014 년도 1 학기 ) 김영진 아주대학교전자공학과

..,. Job Flow,. PC,.., (Drag & Drop),.,. PC,, Windows PC Mac,.,.,. NAS(Network Attached Storage),,,., Amazon Web Services*.,, (redundancy), SSL.,. * A

PowerPoint 프레젠테이션

슬라이드 1

Endpoint Protector - Active Directory Deployment Guide

<4D F736F F D D31312D30312D53572D30312DBBE7BFEBC0DABCB3B8EDBCAD5FBFDCBACEB9E8C6F7BFEB2E646F63>

Microsoft PowerPoint - Chapter_03-1_DevEnv.pptx

System Recovery 사용자 매뉴얼

Mobile Service > IAP > Android SDK [ ] IAP SDK TOAST SDK. IAP SDK. Android Studio IDE Android SDK Version (API Level 10). Name Reference V

디지털 공학

소프트웨어공학 Tutorial #2: StarUML Eun Man Choi

Microsoft Word - 임베디드월드_WindowsEmbeddedCompact7_rev

슬라이드 1

Xcovery 사용설명서

슬라이드 1

슬라이드 1

02_3 지리산권 스마트폰 기반 3D 지도서비스_과업지시서.hwp

슬라이드 1

tiawPlot ac 사용방법

슬라이드 1

목차 윈도우드라이버 1. 매뉴얼안내 운영체제 (OS) 환경 윈도우드라이버준비 윈도우드라이버설치 Windows XP/Server 2003 에서설치 Serial 또는 Parallel 포트의경우.

에접속하여상단메뉴에서 [DOWNLOADS] 를클릭한다. 다운로드페이지에서 Java 카테고리에있는 [Java SE] 를클릭하고페이지가바뀌면 [Java Platform (JDK)] 를클릭한다. JDK 버전은다운로드하는시점에따라다를수

윈도 모바일 6.1을 OS로 사용하는 스마트폰(옴니아2 등)에서의 Tcl/Tk의 사용

슬라이드 1

_USB JTAG Ver1.0 User's Manual.hwp

블로그_별책부록

<B4EBC7D1BAF1B8B8C7D0C8B8C3DFB0E8C7D0BCFABFACBCF62D C1F8C2A520C3D6C1BE292E687770>

PowerPoint 프레젠테이션

목 차 1. 드라이버 설치 설치환경 드라이버 설치 시 주의사항 USB 드라이버 파일 Windows XP에서 설치 Windows Vista / Windows 7에서 설치 Windows

슬라이드 1

OM2M 기반의 OHP-M2M 오픈소스설치가이드 2015 년 8 월 경북대학교통신프로토콜연구실 최예찬, 강형우 요약 사물인터넷 (Internet of Things: IoT) 이이슈가되면서다양한사

DocsPin_Korean.pages

WebPACK 및 ModelSim 사용법.hwp

6. 설치가시작되는동안 USB 드라이버가자동으로로드됩니다. USB 드라이버가성공적으로로드되면 Setup is starting( 설치가시작되는중 )... 화면이표시됩니다. 7. 화면지침에따라 Windows 7 설치를완료합니다. 방법 2: 수정된 Windows 7 ISO

<31332DB9E9C6AEB7A2C7D8C5B72D3131C0E528BACEB7CF292E687770>

슬라이드 1

Analyst Briefing

목차 백업 계정 서비스 이용 안내...3 * 권장 백업 정책...3 * 넷하드(100G 백업) 계정 서버로 백업하는 2가지 방법...3 * 백업서버 이용시 주의사항...3 WINDOWS 서버 사용자를 위한 백업서비스 이용 방법 네트워크 드라이브에 접속하여

Microsoft PowerPoint - 3장-MS SQL Server.ppt [호환 모드]

Facebook API

PowerPoint Template

Transcription:

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 라고프롬프트상에서출력된다.