이 책의 소개



* 하나의 소스 코드로 안드로이드, 아이폰, 원도우폰의 앱을 만든다!

* 홈페이지 만들던 HTML과 자바스크립트로 스마트폰 앱을 만든다!



폰갭(PhoneGap)은 웹 기술로 앱을 만드는 하이브리드 웹앱 프레임웍입니다. 폰갭을 이용하면 HTML과 자바스크립트 지식만 필요하기 때문에 웹디자이너나 초보 프로그래머도 쉽게 앱을 만들 수 있으며, 스마트폰마다 따로 개발해야 하는 시간과 비용을 절감할 수 있습니다. 이미 많은 앱들이 폰갭으로 만들어져 배포되고 있으며, 시간과 비용의 절감이라는 매력으로 인해 폰갭을 이용한 앱 개발이 크게 확산되고 있습니다. 폰갭을 이용한 앱 개발 작업은 다음과 같이 진행됩니다.








폰갭은 모바일에 특화된 자바스크립트 라이브러리를 제공하며 HTML5의 기본 자바스크립트와 폰갭의 자바스크립트를 혼용해서 웹 페이지를 구성합니다. 웹 페이지를 구성할 때 디자인 문제를 해결하기 위해 드림위버와 jQuery Mobile을 사용할 수 있으며, 이렇게 구성된 웹 페이지를 플랫폼별로 SDK로 가져와 프로젝트를 생성합니다.



이 책에서는 단순히 매뉴얼 식으로 폰갭 API를 설명하는 것이 아니라 저자의 오랜 현장 경험을 담아 다음과 같은 내용을 추가로 설명하고 있습니다.



* 폰갭의 기본 구조에 대한 이해

* 폰갭 템플릿을 이용하지 않고 프로젝트를 수동으로 생성하는 방법

* 폰갭에서 지원하지 않는 기능을 플러그인으로 해결하는 방법

* 빠른 버전 업을 진행하는 폰갭의 버전 업에 대처하는 방법

* 드림위버를 이용해서 디자인하고 프로젝트를 생성하는 방법

* UI를 디자인을 위해서 jQuery Mobile를 이용하는 방법



이런 내용을 알아야 학습을 마치고 현업에서 상품성 있는 앱을 만들면서 부딪히게 되는 다양한 문제에 대처할 수 있는 능력이 생깁니다. 본서에 수록된 예제 앱들은 최대한 실물 스마트폰에서 실험하여 완결성을 보장하고 있으며, 폰갭 API와 자바스크립트의 객체와 메소드 ,이벤트, 속성들을 모두 실험해볼 수 있도록 앱을 구성해서 예제를 제공하고 있으며, 스마트폰의 특성에 따라 조금씩 달라지는 부분도 자세하게 설명하고 있어 폰갭에 대한 완벽 가이드 역할을 할 것입니다.

Part I 폰갭 시작하기

1장 HTML5와 웹앱과 폰갭

1.1 HTML5의 탄생 배경 살펴보기
1.2 HTML5의 요소 살펴보기
1.3 HTML5의 새로운 기능 살펴보기
구조적 표현을 위한 태그
미디어 콘텐츠를 표시하는 태그

그림을 그리는 태그
새로워진 폼 태그
새로운 input 타입
새로운 input 속성
1.4 HTML5의 API 살펴보기
애플리케이션 캐시
드래그앤 드롭과 파일 API
웹 스토리지와 웹 SQL 데이터베이스
지오로케이션
웹 워커
웹 소켓
1.5 웹앱과 폰갭
웹앱의 개념
폰갭의 기능

2장 폰갭 개발 환경 둘러보기

2.1 폰갭의 기능 알아보기
2.2 폰갭 다운로드하기
2.3 폰갭 둘러보기
2.4 안드로이드용 개발 환경 둘러보기
2.5 아이폰용 개발 환경 둘러보기
2.6 원도즈폰 개발 환경 설치하기
Windows Phone SDK 다운받기
Windows Phone SDK 설치 마법사 실행하기
Windows Phone 개발 도구 살펴보기
Windows Phone 개발 도구 제품 등록하기

3장 안드로이드용 폰갭 시작하기

3.1 샘플 프로젝트 가져오기
3.2 폰갭 라이브러리 등록하기
3.3 폰갭 샘플 프로젝트 구조 분석하기
3.4 프로젝트 속성 바꾸기
3.5 참조 자동 정리하기
3.6 안드로이드 가상기기 관리하기
3.7 디버그 모드로 실행하기
3.8 실물 단말기 화면 캡처하기
3.9 폰갭 샘플 프로젝트 실험하기

4장 아이폰용 폰갭 시작하기

4.1 폰갭 템플릿 설치하기
4.2 폰갭 프로젝트 만들기
4.3 폰갭 프로젝트에 웹폴더(www) 등록하기
4.4 사이트 접속 권한 설정하기
4.5 홈페이지를 앱으로 추가하기

5장 원도우폰용 폰갭 시작하기

5.1 폰갭 템플릿 추가하기
5.2 폰갭 템플릿 만들기
5.3 사용자 지정 도구 실행하기
5.4 가상기기에서 실험하기

6장 드림위버로 웹앱 만들기

6.1 드림위버로 웹앱 페이지 만들기
드림위버의 웹앱 페이지 템플릿 활용
드림위버의 jQuery Mobile 객체 지원
6.2 드림위버로 폰갭 프로젝트 자동 생성하기
드림위버 사이트 생성
모바일 앱 프레임웍 설정
모바일 앱 설정
모바일 앱 컴파일 및 가상기기 실험
6.3 네이티브 앱 개발 도구로 가져오기
안드로이드 프로젝트를 이클립스로 가져오기
안드로이드 폰갭 실험하기
아이폰 프로젝트를 Xcode로 가져오기
아이폰 폰갭 실험하기
6.4 이클립스의 웹 페이지 편집기
이클립스에 웹 페이지 편집기 플러그인 설치하기
이클립스 웹 페이지 편집기 설정
6.5 HTML5를 위한 드림위버 실무 활용 팁
HTML5를 위한 드림위버 환경설정
HTML5 문법 체크
소스 자동 정리
디자인 미리보기 화면 크기 조절
라이브 미리보기
미리보기에서 객체 찾기
CSS 편집기

Part II 폰갭 API 사용하기

7장 Notification : 대화상자와 알림

7.1 notification의 사용
notification.alert() 메소드
notification.confirmt() 메소드
notification.beept() 메소드
notification.vibratet() 메소드
7.2 notification 프로젝트
HTML5 소스 구성
시작 화면
phonegap.js의 버전 관리
CSS 디자인 적용 및 .js 파일 분리
네이티브 앱 프로젝트 자동 생성
7.3 안드로이드 프로젝트 생성 및 포팅
안드로이드 프로젝트 생성
폰갭 프로젝트 환경 설정
안드로이드 폰갭 가상기기에서 실험하기
안드로이드 폰갭 실물 단말기에서 실험하기
7.4 아이폰 프로젝트 생성 및 포팅
폰갭 템플릿으로 아이폰 프로젝트 생성
아이폰용 HTML5 소스 정리하기
HTML5 소스를 Xcode 프로젝트에 등록하기
가상기기에서 실험하기
실물 단말기에서 실험하기
7.5 윈도우폰 프로젝트 생성 및 포팅
폰갭 템플릿으로 윈도우폰 프로젝트 생성
윈도우폰용 폰갭 특성 살펴보기
HTML5 소스 등록 및 console.js 추가
웹파일 인식하기
가상기기에서 실험하기

8장 Device : 단말기 정보

8.1 Device의 사용
device.name 속성
device.phonegap 속성
device.platform 속성
device.uuid 속성
device.version 속성
8.2 Device 프로젝트
HTML5 웹앱 소스 작성
8.3 안드로이드 포팅
폰갭을 위한 이클립스 플러그인 설치
마법사로 폰갭 프로젝트 생성
HTML5 소스 등록
폰갭 템플릿이 제공하는 phonegap.js의 경고문
실물 단말기에서 실험하기
8.4 아이폰 포팅
8.5 윈도우폰 포팅

9장 Events : 이벤트

9.1 이벤트의 사용
라이프사이클 이벤트
deviceready 이벤트
pause 이벤트
resume 이벤트
네트워크 이벤트
online 이벤트
offline 이벤트
버튼 이벤트
backbutton 이벤트
menubutton 이벤트
searchbutton 이벤트
startcallbutton 이벤트
endcallbutton 이벤트
volumedownbutton 이벤트
volumeupbutton 이벤트
배터리 이벤트
batterycritical 이벤트
batterylow 이벤트
batterystatus 이벤트
9.2 Events 프로젝트
웹앱 소스 파일 구성
웹브라우저에서 웹앱 소스 검토
웹앱 소스 분석
9.3 안드로이드 포팅
안드로이드 폰갭 버전 업그레이드
Events 안드로이드 프로젝트 구성
실험하기
9.4 아이폰 포팅
아이폰 폰갭 버전 업그레이드
Events 아이폰 프로젝트 구성
실험하기
9.5 윈도우폰 포팅
윈도우폰 폰갭 버전 업그레이드
Events 윈도우폰 프로젝트 구성과 웹 소스의 자동 인식
웹 소스의 콘텐츠 설정
실험하기

10장 Media : 오디오와 비디오

10.1 미디어의 사용
Media 객체
media.getCurrentPosition() 메소드
media.getDuration() 메소드
media.play() 메소드
media.pause() 메소드
media.stop() 메소드
media.release() 메소드
media.seekTo() 메소드
media.startRecord
media.stopRecord() 메소드
MediaError 객체
10.2 Media 폰갭 프로젝트
웹앱 소스 파일 구성
웹브라우저에서 웹앱 소스 검토
웹앱 소스 분석
10.3 아이폰 포팅
Media 아이폰 프로젝트 구성
실험하기
10.4 안드로이드 포팅
폰갭 버전 선택으로 프로젝트 생성
폰갭 라이브러리 내장형으로 변경
www 웹앱 소스 탑재
DDMS ADB connection time out 설정
폰갭 비디오 플러그인 살펴보기
폰갭 비디오 플러그인 추가하기
폰갭 비디오 플러그인 분석하기
폰갭 비디오 플러그인 활용하기
안드로이드용 www 경로로 교정
안드로이드용 녹음/재생
가상기기에서 실험하기
실물 단말기에서 실험하기

11장 Camera : 카메라 제어

11.1 카메라의 사용
camera.getPicture() 메소드
카메라 응답 함수
cameraSuccess 함수
cameraError 함수
카메라 옵션
quality 옵션
destinationType 옵션
sourceType 옵션
카메라 특기사항
11.2 jQuery Mobile을 이용한 웹앱 디자인
jQuery Mobile 다운받고 둘러보기
드림위버에서 jQuery Mobile 페이지 생성
이클립스에서 jQuery Mobile 페이지 생성
11.3 Camera 폰갭 프로젝트
웹앱 소스 파일 구성
웹앱 소스 분석
11.4 안드로이드 포팅
안드로이드 프로젝트 살펴보기
실물 단말기에서 실험하기
11.5 아이폰 포팅
아이폰 프로젝트 살펴보기
실물 단말기에서 실험하기
11.6 윈도우폰 포팅
윈도우폰 프로젝트 손질하기
가상기기에서 실험하기

12장 File : 파일 제어

12.1 파일 시스템의 사용.파일 관리
File 객체
FileError 객체
LocalFileSystem 객체
LocalFileSystem.requestFileSystem() 메소드
LocalFileSystem.resolveLocalFileSystemURI() 메소드
FileSystem 객체
FileEntry 객체
FileEntry.getMetadata() 메소드
FileEntry.moveTo() 메소드
FileEntry.copyTo() 메소드
FileEntry.toURI() 메소드
FileEntry.remove() 메소드
FileEntry.getParent() 메소드
FileEntry.createWriter() 메소드
FileEntry.file() 메소드
FileReader 객체
FileReader.abort() 메소드
FileReader.readAsDataURL() 메소드
FileReader.readAsText() 메소드
FileWriter 객체
FileWriter.abort() 메소드
FileWriter.seek() 메소드
FileWriter.truncate() 메소드
FileWriter.write() 메소드
12.2 파일 시스템의 사용 ? 디렉토리 관리
DirectoryEntry 객체
DirectoryEntry.getMetadata() 메소드
DirectoryEntry.moveTo() 메소드
DirectoryEntry.copyTo() 메소드
DirectoryEntry.toURI() 메소드
DirectoryEntry.remove() 메소드
DirectoryEntry.getParent() 메소드
DirectoryEntry.createReader() 메소드
DirectoryEntry.getDirectory() 메소드
DirectoryEntry.getFile() 메소드
DirectoryEntry.removeRecursively() 메소드
DirectoryReader 객체
DirectoryReader.readEntries() 메소드
Flags 객체
Metadata 객체
12.3 파일 시스템의 사용.파일 업로드
FileTransfer 객체
FileTransfer.upload() 메소드
FileUploadOptions 객체
FileUploadResult 객체
FileTransferError 객체
12.4 jQuery Mobile 최신 버전으로 폰갭 프로젝트 만들기
이클립스 폰갭 프로젝트 생성
자바스크립트 표기법 디버깅
Android 2.2 이하 버전에서 디버깅
jQuery Mobile 샘플 실험하기
File 프로젝트 개발을 위한 소스 정리
12.5 File 폰갭 프로젝트
웹앱 소스 파일 구성
웹앱 소스 화면 분석
HTML DOM 소스 분석
자바스크립트 소스 분석
PHP 업로드 소스 분석
12.6 안드로이드 포팅
안드로이드 프로젝트 살펴보기
실물 단말기에서 실험하기
12.7 아이폰 포팅
아이폰 프로젝트 살펴보기
가상기기에서 실험하기
가상기기의 업로드 디버깅
whitelist에 업로드 서버 등록
다른 기능들 실험하기
12.8 폰갭의 FileTransfer.download() 메소드
먼저 다운로드 기능 미리보기
다운로드 추가 소스 분석

13장 Capture : 미디어 캡처

13.1 Capture의 사용
Capture 객체
capture.captureAudio() 메소드
CaptureAudioOptions 객체
capture.captureImage() 메소드
CaptureImageOptions 객체
capture.captureVideo() 메소드
CaptureVideoOptions 객체
CaptureError 객체
CaptureCB 함수
CaptureErrorCB 함수
ConfigurationData 객체
MediaFile 객체
MediaFile.getFormatData() 메소드
MediaFileData 객체
13.2 Capture 폰갭 프로젝트
웹앱 소스 파일 구성
웹앱 소스 화면 분석
HTML DOM 소스 분석
자바스크립트 소스 분석
13.3 안드로이드 포팅
안드로이드 프로젝트 살펴보기
실물 단말기에서 실험하기
File 프로젝트로 캡처 파일 살펴보기
13.4 아이폰 포팅
아이폰 프로젝트 살펴보기
실물 단말기에서 실험하기
캡처 파일들 찾아보기
13.5 윈도우폰 포팅
윈도우폰 프로젝트 생성
웹앱 소스 포팅
비주얼 스튜디오의 HTML Eror List 특성
console.js 추가 및 alert() 보정
가상기기에서 실험하기

14장 Sensor : 센서

14.1 가속 센서 (Accelerometer)의 사용
Acceleration 객체
accelerometerOptions 객체
accelerometerSuccess 함수
accelerometerError 함수
accelerometer.getCurrentAcceleration() 메소드
accelerometer.watchAcceleration() 메소드
accelerometer.clearWatch() 메소드
14.2 방위 센서 (Compass)의 사용
compassHeading 객체
compassOptions 객체
compassSuccess 함수
compassError 함수
compass.getCurrentHeading() 메소드
compass.watchHeading() 메소드
compass.clearWatch() 메소드
compass.watchHeadingFilter() 메소드
compass.clearWatchFilter() 메소드
14.3 Sensor 폰갭 프로젝트
웹앱 소스 파일 구성
웹앱 소스 화면 분석
HTML DOM 소스 분석
자바스크립트 소스 분석
14.4 안드로이드 포팅
안드로이드 프로젝트 살펴보기
실물 단말기에서 실험하기
14.5 아이폰 포팅
아이폰 프로젝트 살펴보기
실물 단말기에서 실험하기
14.6 윈도우폰 포팅
윈도우폰 프로젝트 살펴보기
가상기기에서 실험하기

15장 Contacts : 연락처

15.1 Contacts의 사용
Contact 객체
clone() 메소드
remove(contactSuccess, contactError) 메소드
save(contactSuccess, contactError) 메소드
ContactName 객체
ContactField 객체
ContactAddress 객체
ContactOrganization 객체
ContactFindOptions 또는 contactFindOptions 객체
ContactError 객체
ContactFields 객체
contactSuccess 콜백 함수
contactError 콜백 함수
contacts.create() 메소드
contacts.find() 메소드
15.2 Contacts 폰갭 프로젝트
웹앱 소스 파일 구성
웹앱 소스 화면 분석
HTML DOM 소스 분석
자바스크립트 소스 분석
15.3 안드로이드 포팅
안드로이드 프로젝트 살펴보기
실물 단말기에서 실험하기
15.4 아이폰 포팅
아이폰 프로젝트 살펴보기
실물 단말기에서 실험하기

16장 Connection : 네트웍 통신

16.1 Connection의 사용
16.2 Connection 폰갭 프로젝트
웹앱 소스 파일 구성
웹앱 소스 화면 분석
HTML DOM 소스 분석
자바스크립트 소스 분석
16.3 안드로이드 포팅
안드로이드 프로젝트 살펴보기
실물 단말기에서 실험하기
16.4 아이폰 포팅
아이폰 프로젝트 살펴보기
가상기기에서 실험하기
16.5 윈도우폰 포팅
윈도우폰 생성 및 웹 소스 포팅
가상기기 1차 실험
윈도우폰용 최적화
가상기기 2차 실험

17장 Geolocation : GPS 위치정보

17.1 Geolocation의 사용
Position 객체
PositionError 객체
Coordinates 객체
geolocationSuccess() 콜백 함수
geolocationError() 콜백 함수
geolocationOptions 객체
geolocation.getCurrentPosition() 메소드
geolocation.watchPosition() 메소드
geolocation.clearWatch() 메소드
17.2 Geolocation 폰갭 프로젝트
웹앱 소스 파일 구성
웹앱 소스 화면 분석
HTML DOM 소스 분석
자바스크립트 소스 분석
17.3 안드로이드 포팅
안드로이드 프로젝트 살펴보기
실물 단말기에서 실험하기
17.4 아이폰 포팅
아이폰 프로젝트 살펴보기
가상기기에서 실험하기
17.5 윈도우폰 포팅
윈도우폰 프로젝트 살펴보기
가상기기에서 실험

18장 Storage : 로컬 데이터베이스

18.1 Storage의 사용
Database 객체
Database.transaction() 메소드
Database.changeVersion() 메소드
SQLTransaction 객체
SQLTransaction.executeSql() 메소드
SQLResultSet 객체
SQLResultSetList 객체
item() 메소드
SQLError 객체
localStorage 객체
localStorage.key() 메소드
localStorage.getItem() 메소드
localStorage.setItem() 메소드
localStorage.removeItem() 메소드
localStorage.clear() 메소드
openDatabase() 메소드
18.2 Storage 폰갭 프로젝트
웹앱 소스 파일 구성
웹앱 소스 화면 분석
HTML DOM 소스 분석
자바스크립트 소스 분석
18.3 안드로이드 포팅
안드로이드 프로젝트 살펴보기
실물 단말기에서 실험하기
18.4 아이폰 포팅
아이폰 프로젝트 살펴보기
가상기기에서 실험하기