상세정보

모바일 웹앱의 구축과 하이브리드 앱을 구현하려는 개발자들을 위한 실무형 입문서. 앱스프래소와 폰갭으로 하이브리드앱 제작과 HTML5,CSS3,자바스크립트를 그리고 센차터치2 를 이용한 모바일 웹앱을 센차터치 2 입문에서 활용까지(예제CD포함) 한 권에 담았다. 현장에서 실무를 하시는 분과 입문하시는 분들에게 검증을 받으며 예제의 적합성과 유용성에 대하여 의견을 듣고 적극 반영하였고 정말 필요한 기능에 대해서는 다양한 예제를 더 포함시켜서 자세하게 소개하고자 하였다.

이 책은 모바일 웹앱의 구축과 하이브리드 앱을 구현하려는 개발자들을 위한 실무형 입문서 입니다.웹앱부터 하이브리드앱 배포까지 마스터 이 책에서는, 책의 범위가 너무 광범위 해질 것을 우려하여 HTML태그와 CSS 및Java-Script의 기본적인 문법에 대한 부분은 이 책을 익히시는데 필요한 사전 지식으로 분류하였습니다. 이러한 사전 지식들을 알고 계신다면, 고급 자바스크립트 표현방법에서부터 HTML5의 새로운 기능들을 거쳐 Sencha Touch를 통한 모바일 웹앱 구축에 필요한 부분들을 단계적으로 익히실 수 있으며, 마지막으로 PhoneGap과 Appspresso를 통한 하이브리드 앱 포팅 과정을 다루었습니다.

특히 하이브리드앱 포팅 과정에서는 안드로이드 뿐만 아니라 Mac OS환경에서 iOS를 대상으로 하는 과정 및 애플 개발자 사이트를 통한 단말에 어플을 넣는 방법까지 다루고 있기 때문에 별도의 네이티브앱 관련 책을 참조하지 않더라도 이 한권으로 마켓을 통한 애플리케이션 배포까지 익히실 수 있습니다. 현업에 종사하시는 실무자 분들이시거나 앞으로 필드로 진출하실 준비를 하고 계신분들 모두 Sencha Touch 2 Framework를 처음부터 고급까지 익히실 수 있는 단계로 구성하였기 때문에 누구나 부담 없이 즐기실 수 있습니다.

실무자들에 의한 검증 완료책의 집필 단계에서부터 책의 내용을 통한 실제 강의를 통하여 다루고 있는 예제 소스의 실무 적용 적합성에 대하여, 현업에서 모바일 웹앱을 개발하고 있는 개발자들로부터 피드백을 받아 책의 내용을 단계적으로 보완하여 지금의 완성 형태가 되었기 때문에, 실무자들이 원하는 순서로 Sencha Touch2 Framework를 점진적으로 익힐수 있도록 구성 되어 있습니다.

특히 이 책은 총 9개의 파트로 이루어져 있으며 각 파트는 다음과 같은 주제로 이루어져 있습니다.각 Part별 주제를 살펴보면 Part1 1. 모바일 웹, 네이티브 앱, 모바일 웹앱, 하이브리드 앱의 개요 및 장단점 비교 2. 모바일 웹앱을 구성하기 위한 최소한의 기본 지식 3. 자바스크립트 언어로 객체지향을 구현하기 위한 고급 표현 기법 4.HTML5에서 추가된 Java-Script의 새로운 기능 (HTML5 API) Part2 1.Sencha Touch 2를 시작하기 위한 기본 준비 2 .Sencha Touch 2 Framework 클래스 구조 Part3 1. Sencha Touch 2 사용자 인터페이스 구성 방법 2. Sencha Touch 2와 jQuery의 병행 사용을 통한 다이나믹한 UI 구성 방법 3. 사용자 테마 작성하기 Part4 1. Sencha Touch 2를 통한 XML기반의 Ajax 통신 2. Proxy페이지를 사용한 XML기반의 크로스 도메인 통신 3. Sencha Touch 2를 통한 JSON기반의 Ajax 통신 4. JsonP를 사용한 크로스 도메인 통신 5. 네이버, 다음 OpenAPI연동을 통한 크로스 도메인 통신 실습 Part5 1. 템플릿을 사용한 UI 구조 재활용 방법 2. 확장 탬플릿을 사용한 UI 구조의 문법적 사용 방법 Part6 1. 데이터 모델을 사용한 Sencha Touche 2 데이터 구조 2. 데이터 프록시를 사용한 통신 자동화
3. dataview를 통한 리스트 컨트롤 사용 기법 Part1. Sencha Touch MVC 모델 개요 2. Sencha Touch MVC 모델 구성하기 Part8 1. PhoneGap 기반의 Android, iOS 하이브리드 앱의 구성과 배포 Part9 1. Appspresso 기반의 Android, iOS 하이브리드 앱의 구성과 배포 등으로 각 부분 마다 풍부한 예제와 내용을 필요한 부분마다 간결히 정리하였습니다.

정보제공 :

목차
Part  1. Moible Web App을 위한 기본 사양
 Section 1. 모바일 앱 진화론
  1. 모바일 웹 (Mobile Web) = 16
  2. 네이티브 앱 (Native App) = 17
  3. 모바일 웹앱 (Mobile Web App) = 18
  4. 하이브리드 앱 (Hybird App) = 19
 Section 2. 모바일 웹앱 Framework
  1. jQuery Mobile = 23
  2. Sencha Touch = 23
 Section 3. 개발환경 구성하기
  1. Window OS를 위한 개발환경 설치 = 24
   APMSetup 설치 = 24
   Google Chrome 브라우저의 설치 = 26
   Editplus의 설치 = 28
  2. Mac OS를 위한 개발환경 설치 = 30
   MAMP의 설치 = 30
   Google Chrome 브라우저의 설치 = 33
   Coda의 설치 = 33
  3. Site To Phone의 설치 = 37
   Site To Phone 가입 및 인증 = 37
   Google Chrome Plugin = 38
   iPhone = 39
   Android Phone = 40
 Section 4. 모바일 웹앱을 위한 HTML5준비
  1. DTD 선언문의 변경 = 42
  2.〈meta〉태그를 통한 캐릭터 셋 지정 = 42
  3. 모바일 웹앱을 위한 설정 = 43
   〈meta〉태그를 통한 Viewprot 설정하기 = 43
   홈 화면에 북마크 아이콘 지정하기 = 44
   아이폰 전용 추가 기능 = 45
  4. 첫 번째 모바일 웹페이지 = 48
 Section 5. 객체지향 자바스크립트
  1. Prototype을 통한 Javascript Class 구현 = 51
  2. Object를 통한 개별 프로퍼티 확장 = 55
  3. 패키지 정의하기 = 57
  4. JSON 표현법 = 60
  5. JSON 표현법을 활용한 JavaScript Class 구현 = 64
 Section 6. HTML5 API 살펴보기
  1. WebForm = 69
   새로운 공통 속성 = 69
   새로운 input 요소 = 69
  2. QuerySelector = 75
  3. Audio와 Video = 78
   Audio = 78
   Video = 78
  4. Multimedia API = 80
  5. WebStorage = 85
  6. WebDatabase = 91
  7. GeoLocation = 96
  8. Application Cache = 100
   Application Cache의 장점 = 100
   Application Cache 사용하기 = 101
Part 2. Sencha Toouch2시작하기
 Section 1. Sencha Touch2를 시작하기 위한 준비
  1. Sencha Touch2 Framework 다운로드 = 106
  2. Sencha Touch2 Framework 구성 = 107
   sencha-touch-all[-debug].js 파일 = 108
   sencha-touch[-debug].js 파일 = 108
   docs 폴더 = 109
   examples 폴더 = 110
   resources 폴더 = 110
  3. Sencha Touch2 기본 파일 구조 = 111
 Section 2. Sencha Touch2 클래스 구성
  1. Sencha Touch 클래스 작성 = 112
  2. 클래스 구성 옵션 = 114
  3. 클래스 상속 = 116
  4. 클래스 로더 = 118
  5. 클래스 비동기 로딩 = 122
Part 3. Sencha Touch2 User Interface
 Section 1. Panel과 Layout
  1. 패널(Ext.Panel) = 128
   패널의 기본 사용 방법 = 128
   패널의 분할 = 133
   패널 안에 HTML 포함시키기 = 135
   도킹 옵션 = 139
  2. 레이아웃 = 142
   기본 레이아웃 = 143
   hbox 레이아웃과 vbox 레이아웃 = 145
   flex 구성 옵션 = 150
   flex 구성옵션의 활용 = 152
   fit 레이아웃 = 153
  3. xtype = 157
 Section 2. Button과 Icon
  1. 버튼 컴포넌트의 종류 = 160
  2. 버튼 이벤트 처리 = 163
  3. defaults 구성옵션 = 166
  4. 아이콘 = 168
  5. 커스텀 아이콘 = 172
  6. 뱃지 텍스트 = 174
  7. 세그먼트 버튼 = 176
 Section 3. ToolBar와 TitleBar
  1. 툴바 = 180
  2. 타이틀 바 = 183
  3. 타이틀 바 활용하기 = 184
 Section 4. MessageBox, Overlay, ActionSheet
  1. 메시지 박스 = 187
   Alert 메시지 박스 = 187
   Confirm 메시지 박스 = 189
   Prompt 메시지 박스 = 190
  2. 커스텀 메시지 박스 = 193
  3. 오버래이 = 196
  4. 시트 = 200
  5. 액션 시트 = 202
 Section 5. Form
  1. 폼 컴포넌트 = 205
  2. FieldSet의 사용 = 207
  3. 폼 컴포넌트의 종류 = 210
  4. DatePicker의 현지화 = 214
  5. 폼 데이터 바인딩= 216
 Section 6. 멀티미디어
  1. Audio = 219
  2. Video = 221
 Section 7. 위치정보
  1. Map = 224
 Section 8. 화면전환
  1. Card Layout = 227
  2. 화면 전환 애니메이션 = 230
  3. Tab 패널 = 233
  4. 캐러셀 = 239
 Section 9. 요소의 획득과 jQuery
  1. 요소의 획득 = 242
  2. jQuery와의 병행 사용 = 245
 Section 10. Sencha Touch2테마 구성하기
  1. Sass 소개 = 254
   변수의 사용 = 255
   계층적 구조 = 255
   연산과 내장함수의 사용／import = 255
   복수 변수의 지정 = 255
   Compass의 사용 = 255
  2. Sass 환경 구축 = 256
   Ruby Download = 256
   Ruby 설치하기 = 259
  3. Sencha Touch2 테마 작성하기 = 261
Part 4. Sencha Touch2 데이터 통신
 Section 1. Ajax 통신 시작하기
  1. Ajax 통신 시작하기 = 268
  2. 서버측 스크립트와의 연동 = 273
 Section 2. Ajax통신으로 XML데이터 처리하기
  1. 간단한 XML 파일 읽어오기 = 278
  2. 복잡한 XML 파일 읽어오기 = 284
  3. 서버측 스크립트와의 연동 = 289
 Section 3. XML을 사용한 Cross Domain통신
  1. 크로스 도메인 통신 개요 = 294
  2. 네이버 OpenAPI 연동키 발급 받기 = 295
 Section 4. Ajax 통신으로 Json데이터 처리하기
  1. 간단한 JSON 데이터 요청하기 = 304
  2. 여러 개의 데이터를 갖는 JSON 데이터 요청하기 = 307
  3. 구조화된 JSON 데이터 요청하기 = 310
  4. 서버측 스크립트와의 연동 = 313
 Section 5. JSONP를 통한 Cross Domain 통신
  1. JSONP 소개 = 318
  2. Daum OpenAPI 연동을 통한 이미지 검색 = 325
Part 5. Sencha Touch2Template
 Section 1. 템플릿을 사용한 화면 레이아웃 구성
  1. 템플릿의 기본 사용 방법 = 334
  2. 템플릿에 JSON 데이터를 적용하기 336
  3. append() 메서드를 사용한 템플릿 적용 = 339
  4. setData() 메서드를 사용한 데이터 바인딩 = 341
  5. 템플릿에 Ajax 통신을 적용하기 = 344
 Section 2. 확장 템플릿을 사용한 화면 구성
  1. 반복문 = 348
  2. 데이터 접근 = 351
  3. 조건 분기 if문 = 353
  4. if ∼ elseif∼ else 문 = 357
  5. switch 분기 = 359
  6. 내장 변수를 통한 기본적인 연산 = 362
  7. Inline코드의 실행 = 365
  8. Ajax를 통한 통신 데이터 처리 = 367
Part 6. Sencha Touch2 Data처리
 Section 1. 데이터 모델 (Ext.data.Model)
  1. 데이터 모델 (Ext.data.Model) 시작하기 = 374
   데이터 모델의 생성 = 375
   데이터 모델의 값 변경하기 = 379
  2. 데이터 모델의 데이터 바인딩 = 381
   템플릿에 바인딩 하기 = 381
   폼에 바인딩 하기 = 385
 Section 2. 데이터 스토어 (Ext.data.Store)
  1. 데이터 스토어 시작하기 = 388
 Section 3. 데이터 뷰를 사용한 리스트 구현
  1. 리스트 뷰 컴포넌트 = 394
  2. 리스트 뷰 기본 이벤트 = 398
  3. Disclosure 이벤트 = 403
  4. 리스트 뷰 데모 = 406
 Section 4. 데이터 프록시 (Ext.data.Proxy)
  1. XML 통신을 위한 데이터 프록시 = 414
   데이터 프록시 생성하기 = 414
   XML파일과의 통신 = 415
   XML데이터 읽기와 템플릿 바인딩 = 419
   데이터 프록시와 데이터 스토어의 사용 = 423
   데이터 프록시의 수동 로드 = 427
   데이터 프록시를 데이터 스토어에 포함시키기 = 430
  2. JSON 통신을 위한 데이터 프록시 = 433
   데이터 프록시 생성하기 = 433
   JSON 데이터 읽어오기 = 436
   JSON 데이터 프록시와 데이터 스토어 = 440
   데이터 프록시의 수동 로드 = 443
   데이터 프록시를 데이터 스토어에 포함시키기 = 446
  3. JSONP 통신을 위한 데이터 프록시 = 448
   데이터 프록시 생성하기 = 448
   JSON 데이터 읽어오기 = 451
   JSONP 데이터 프록시와 데이터 스토어 = 455
   데이터 프록시의 수동 로드 = 457
   데이터 프록시를 데이터 스토어에 포함시키기 = 460
 Section 5. 데이터 스토어 핸들링
  1. 데이터 스토어 정렬 = 462
   데이터 자동 정렬 = 462
   데이터 수동 정렬 = 470
  2. 데이터 추가 = 474
  3. 데이터 필터링 = 480
   데이터 자동 필터링 = 480
   데이터 수동 필터링 = 484
  4. 데이터 그룹핑 = 489
   알파벳 그룹핑 = 489
   한글 초성 정렬 = 494
 Section 6. 페이징 처리와 중첩 리스트
  1. 데이터 스토어 페이징 처리 = 498
   데이터 스토어 페이징 처리 파라미터 = 498
   더 보기 기능 구현하기 = 512
  2. 중첩 리스트 = 517
Part 7. Sencha Touch2 MVC 모델
 Section 1. Sencha Touch2 MVC 모델 개요
  1. MVC모델 소개 = 524
  2. MVC 패턴 개발 준비 = 525
   Sencha Touch2 SDK Beta3 다운로드 = 525
   Sencha Touch2 SDK Beta3 설치하기 for Windows = 526
   Sencha Touch 2 SDK Beta3 설치하기 for Mac = 530
  3. Sencha Touch2 MVC 프로젝트 생성하기 = 532
  4. Sencha Touch2 MVC 프로젝트 빌드하기 = 534
  5. 배치 파일을 통한 원클릭 생성／빌드 만들기 = 535
   프로젝트 생성 배치파일 = 535
   프로젝트 빌드 배치파일 = 537
  6. Sencha Touch 프로젝트 구조 살펴보기 = 539
   index.html = 540
   ／sdk／microloader／development.js = 542
   ／app.json = 543
   ／app.js = 546
   ／app／view／Main.js = 548
  7. MVC 동작 방식 확인하기 = 550
   오프라인 웹 페이지의 구현 = 550
   변경사항의 갱신 = 550
   데이터 프록시 유의사항 = 553
 Section 2. MVC모델 구조 
  1. View = 554
   View 개요 = 554
   View의 생성 = 555
   View의 활용 = 557
  2. Controller = 559
   Controller 개요 = 559
   컨트롤러의 생성 = 559
   컨트롤러의 View 참조 = 561
   View 내의 컴포넌트에 대한 이벤트 처리 = 565
  3. Model = 569
   Model 개요 = 569
   Model 생성 = 570
   데이터 스토어 추가 = 572
   데이터 스토어 사용하기 = 577
Part 8. Sencha Touch2 with PhoneGap
 Section 1. PhoneGap 소개
 Section 2. Andorid HybirdApp
  1. Android 개발환경 구성하기 = 586
   JDK의 설치 = 586
   이클립스 다운로드 = 586
   안드로이드 SDK의 다운로드 = 587
   안드로이드 ADT 플러그인의 설치 = 590
   안드로이드 API 다운로드 = 593
  2. Android PhoneGap 프로젝트 시작하기 = 596
   PhoneGap 라이브러리 다운로드 = 596
   안드로이드 프로젝트 시작하기 = 596
   PhoneGap 라이브러리 포함시키기 = 598
   인트로 화면 추가하기 = 601
   PhoneGap화면 화면 추가하기 = 603
   에뮬레이터 생성하기 = 607
   에뮬레이터를 통한 어플리케이션 구동 = 609
   핸드폰을 통한 어플리케이션 구동 = 610
  3. 배포하기 = 613
   프로젝트 패키징 하기 = 613
   Google Play를 통한 배포 = 615
 Section 3. iOS HybridApp
  1. iOS 개발환경 구성하기 = 620
   XCode의 설치 = = 620
   iOS용 PhoneGap의 설치 = = 621
  2. iOS PhoneGap 프로젝트 시작 = 622
   프로젝트 생성하기 = 622
   XCode 프로젝트 살펴보기 = 624
   웹앱을 포함시키기 = 625
   외부 사이트에 대한 접속 처리 = 627
   프로젝트 빌드 및 실행 = 628
  3. 단말을 통한 실행 = 630
   Apple Developer Program 가입 = 630
   인증서 생성 = 639
   인증서 등록 = 641
   단말기 등록 = 644
   App ID 생성 및 단말 실행 = 646
Part 9. Sencha Touch2with Appspresso
 Section 1. Appspresso 소개
 Section 2. Appspresso 개발환경 구축
  1. Appspresso 다운로드 및 설치 = 655
   JDK의 설치 = 655
   Appspresso 다운로드 및 설치 = 656
  2. 운영체제별 SDK 준비 = 657
   Android SDK의 다운로드 및 설치 = 657
   Android 버전 별 API의 설치 = 658
   iOS의 Xcode 설치 경로 확인 = 660
  3. Appspresso 환경설정 = 662
   기본 환경 설정 = 662
   Android 관련 환경 설정 = 663
   iOS 관련 환경 설정 = 663
 Section 3. Appspresso 프로젝트 진행
  1. Appspresso 프로젝트 생성 = 665
  2. Appspresso 프로젝트 진행하기 = 667
  3. 안드로이드 버전의 빌드 및 실행 = 669
   에뮬레이터 실행 = 669
   단말 실행 = 672
   안드로이드 버전 배포하기 = 673
  4. iOS 버전의 빌드 및 실행 = 676
   에뮬레이터 실행 = 676
   단말 실행 = 678