홈페이지 만들던 HTML, CSS, 자바스크립트만으로 앱을 만듭니다. 폰갭을 이용하면 자바스크립트 언어만 알아도 되는 장점이외에 하나의 소스 코드로 안드로이드, 아이폰, 윈도우폰 등의 앱을 만들 수 있어  매우 경제적입니다. 

본서는 국내 최초로 폰갭을 완벽하게 가이드하고 있으며, 디자이너나 초보 프로그래머가 볼 수 있도록 상세하게 해설하고 있습니다. 기존의 자바스크립트와 폰갭의 API인 폰갭 자바스크립트에 대해 객체, 메소드, 속성, 이벤트 등을 일목요연하게 정리하고 실제 앱을 만들어 각 기능을 실험할 수 있게 했습니다.

폰갭(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 Error 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 아이폰 포팅

아이폰 프로젝트 살펴보기

가상기기에서 실험하기