하이브리드 앱 센차터치 2.0 - 시작하기

센차터치란?

 

html 기반의 모바일 앱을 쉽게 빠르게 만들 수 있게 해주는 자바스크립트 프레임웍이다. 센차터치로 만든 모바일 앱은 Android, iOS 그리고 블랙베리에서 작동하며 네이티브 앱과 같은 경험을 제공한다.

 

웹페이지를 이용해서 결제 앱을 만들려면 여러 페이지가 필요로 하는데 센차터치나, 제이쿼리 모바일은 이걸 한 페이지에서 구현가능하게 만들수 있게 해준다.  에이작스를 이용하는 비동기식 작동방식이다.

 

 

설치하기

1. 통합개발환경( IDE ) 및 사용툴

- 넷빈 www.netbeans.org

- 이클립스 www.eclipse.org/downloads

- 센차터치 http://www.sencha.com/

- 앱스프레소 http://appspresso.com 

 

2. 자바 및 넷빈 설치방법

   - jdk-7u17-windows-i586.exe 설치 및 java 환경설정
     설치가 잘 되어 있는지 확인하려면 실행>cmd 입력 후 java -version 입력 후 엔터!

   - 넷빈 설치 유의사항 : 톰캣선택 > junit 설치하지 않음 선택

   - 센차터치2.0 다운 http://www.sencha.com/

   - 센차터치 소스 폴더에서 2개의 폴더와 4개의 js 파일을 복사해서 넷빈 프로젝트 안쪽

     Web Pages 폴더에 lib 폴더를 만들고 안쪽에 붙여넣기 해준다.

     [resources][src][sencha-touch.js][sencha-touch-all.js][sencha-touch-all-debug.js][sencha-touch-debug.js]

 

 

자바스크립트 기초

1. 자바스크립트
 
   - 객체지향
   - 리터럴 객체 생성
   - 속성, 메서드를 동적정의 할 수 있다.

   - 전역변수 namespace로 사용
   - 전역객체
   - 조건문 안쪽의 함수는 조건문 보다 우선 실행된다.

   - 변수선언 시 상단에 먼저 선언
   - 함수, 정의시 변수 앞에 var 생략불가
   - class 없다

2. 객체 설계 하기

   속성 : (아는 것) : 멤버변수, 멤버필드, 객체내의 변수
   동작 : (하는 것) : 멤버 메서드, 함수(함수선언문, 함수표현식)
   함수 선언문은 변수에 절대 들어 갈 수 없다.
   함수 표현식은 지역변수나 전역변수에 들어 가 수 있으며,
   마지막에는 세미콜론을 입력

   Key / Value 
   var member = {}; => 객체 생성

   [code]
   var MYAPP =MYAPP || {}; //네임스페이스 사용법
   MYAPP.member = {
          sabun: "KOO1",
          name: "김길동",
          deptName: "개발부",
          email:"javabook@naver.com",
          gender:"남"
   };
   //-- 배열과 객체의 차이
   //-- 자바스크립트 자료형 : Number, boolean( true/ false ), String, 
   //-- null, undefined, 객체(배열, 객체, 정규식표현)
   //객체만 for in 문을 사용해서 출력( 배열은 for in 문을 사용 금지, 퍼포먼스 떨어짐)
   // 출력 해보기
   for(var key in MYAPP.member)
   {
            console.log(key+":"+MYAPP.member[key]+"\n");  
   }
 
   console.log("------------------");

 

   MYAPP.module = {};
   MYAPP.module.num = 10;
   MYAPP.module.name = "김길동";
   for(var key in MYAPP.module)
   {
             console.log(key+":"+MYAPP.module[key]+"\n");
   }
 

   [자기가 원하는 객체를 정의]
   [속성은 5가지를 정해놓고 객체로 생성 후 브라우저에서 확인]
   [파일명 : hello.js, hello.html]

   아이언맨
   속성 : 종류, 소속, 재질, 색상, 탑제무기
   동작 : 무기발사, 걷기, 날라다니기

   
   var MYARMY = MYARMY || {}; //네임스페이스 사용법
   MYARMY.ironman = {
             kind:"공격형",
             belong:"지구수비대",
             material:"특수티타늄",
             color:"빨강",
             weapon:"로켓",               
                   
             shoot: function()
             {
                       console.log( this.weapon+" 발사!");
             }
   };
   for( var key in MYARMY.ironman )
   {
             console.log(key+":"+MYARMY.ironman[key]+"\n");
   }
   MYARMY.ironman.shoot();