하나의 소스 코드로 안드로이드, 아이폰, 원도우폰의 앱을 만든다! 『HTML5와 폰갭으로 웹앱 나도 만든다』는 폰갭의 기본 구조에 대한 설명을 바탕으로, 폰갭 템플릿을 이용하지 않고 프로젝트를 수동으로 생성하는 방법, 폰갭에서 지원하지 않는 기능을 플러그인으로 해결하는 방법, 빠른 버전 업을 진행하는 폰갭의 버전 업에 대처하는 방법 등을 다룬 책이다. 본문에 수록된 예제 앱들은 최대한 실물 스마트폰에서 실험하여 완결성을 보장하였으며, 폰갭 API와 자바스크립트의 객체와 메소드 ,이벤트, 속성들을 모두 실험해볼 수 있도록 앱을 활용한 예제를 제공한다. 웹디자이너나 초보 프로그래머들이 앱을 만드는 데 유용한 길잡이가 되어줄 것이다

저자 : 이두진 저자 이두진씨는 아울이라는 소프트웨어 개발 회사를 운영하고 있으며 앞선 IT 기술의 동향과 발전 추이를 스터디하는 목적으로 아울 연구소를 설립해서 소장으로 일을 하고 있습니다. 아울은 스마트폰의 탄생과 함께 바로 다양한 상업적 앱 개발을 진행해 왔으며, 앱북과 앱콘텐츠의 개발과 배포 사업을 진행하고 있습니다. 저서로는 “안드로이드 앱 개발 완벽 가이드”, “아이폰 앱 개발 완벽 가이드”. “안드로이드 기초와 실전 프로젝트” 등이 있습니다.

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 아이폰 포팅 아이폰 프로젝트 살펴보기 가상기기에서 실험하기

·하나의 소스 코드로 안드로이드, 아이폰, 원도우폰의 앱을 만든다! ·홈페이지 만들던 HTML과 자바스크립트로 스마트폰 앱을 만든다! 폰갭(PhoneGap)은 웹 기술로 앱을 만드는 하이브리드 웹앱 프레임웍입니다. 폰갭을 이용하면 HTML과 자바스크립트 지식만 필요하기 때문에 웹디자이너나 초보 프로그래머도 쉽게 앱을 만들 수 있으며, 스마트폰마다 따로 개발해야 하는 시간과 비용을 절감할 수 있습니다. 이미 많은 앱들이 폰갭으로 만들어져 배포되고 있으며, 시간과 비용의 절감이라는 매력으로 인해 폰갭을 이용한 앱 개발이 크게 확산되고 있습니다. 폰갭을 이용한 앱 개발 작업은 다음과 같이 진행됩니다. 폰갭은 모바일에 특화된 자바스크립트 라이브러리를 제공하며 HTML5의 기본 자바스크립트와 폰갭의 자바스크립트를 혼용해서 웹 페이지를 구성합니다. 웹 페이지를 구성할 때 디자인 문제를 해결하기 위해 드림위버와 jQuery Mobile을 사용할 수 있으며, 이렇게 구성된 웹 페이지를 플랫폼별로 SDK로 가져와 프로젝트를 생성합니다. 이 책에서는 단순히 매뉴얼 식으로 폰갭 API를 설명하는 것이 아니라 저자의 오랜 현장 경험을 담아 다음과 같은 내용을 추가로 설명하고 있습니다. ·폰갭의 기본 구조에 대한 이해 ·폰갭 템플릿을 이용하지 않고 프로젝트를 수동으로 생성하는 방법 ·폰갭에서 지원하지 않는 기능을 플러그인으로 해결하는 방법 ·빠른 버전 업을 진행하는 폰갭의 버전 업에 대처하는 방법 ·드림위버를 이용해서 디자인하고 프로젝트를 생성하는 방법 ·UI를 디자인을 위해서 jQuery Mobile를 이용하는 방법 이런 내용을 알아야 학습을 마치고 현업에서 상품성 있는 앱을 만들면서 부딪히게 되는 다양한 문제에 대처할 수 있는 능력이 생깁니다. 본서에 수록된 예제 앱들은 최대한 실물 스마트폰에서 실험하여 완결성을 보장하고 있으며, 폰갭 API와 자바스크립트의 객체와 메소드 ,이벤트, 속성들을 모두 실험해볼 수 있도록 앱을 구성해서 예제를 제공하고 있으며, 스마트폰의 특성에 따라 조금씩 달라지는 부분도 자세하게 설명하고 있어 폰갭에 대한 완벽 가이드 역할을 할 것입니다.