폰갭 프로그래밍(실전 하이브리드 앱 개발을 위한)(위키북스 임베디드 모바일 시리즈 21)

★ 최신 버전의 폰갭을 활용한 실전 하이브리드 앱 개발!



폰갭은 HTML5, CSS, 자바스크립트와 같은 웹 기술을 이용해 최대 7가지 모바일 플랫폼에서 동작하는 앱을 만들 수 있는 하이브리드 앱 프레임워크이다.



이 책은 폰갭을 처음 대하는 초보자도 Objective-C나 자바에 대한 지식 없이 폰갭의 설치부터 애플리케이션의 개발, 앱스토어와 안드로이드 마켓 등록까지 손쉽게 따라 할 수 있도록 구성돼 있다. 또한 가장 최근 버전인 폰갭 1.5.0(Cordova)의 변경 사항을 반영하여 가장 최신 정보를 제공하고, 언제든 폰갭 API의 사용법을 찾아볼 수 있는 폰갭 API 레퍼런스 가이드로도 유용하게 사용할 수 있다.



또, 폰갭 기능의 확장을 위한 플러그인의 설정 방법과 트위터, 인스타그램 인증 절차의 구현 과정을 통해 플러그인의 실제 사용 방법을 살펴보고, 폰갭을 이용한 Photo Onit! 애플리케이션을 개발하는 과정과 소스 코드에 대해 설명한다. 더불어 개발된 애플리케이션을 앱스토어와 안드로이드 마켓에 실제 등록하는 방법까지 살펴볼 수 있도록 구성하였다.



<출판사 리뷰>



폰갭은 HTML5, CSS, 자바스크립트와 같은 웹 기술을 이용해 아이폰, 안드로이드뿐 아니라 윈폰, 블랙베리, 웹오에스, 심비안과 삼성 바다용 앱을 만들 수 있는 하이브리드 앱 프레임워크입니다. 폰갭은 모든 소스코드와 수많은 플러그인의 소스코드가 공개돼 있어 전 세계의 수많은 개발자들이 선호하고 있습니다.



이 책은 폰갭을 처음 접하는 초보자도 오브젝티브-C나 자바에 대한 지식 없이도 폰갭의 설치부터 애플리케이션 개발, 앱스토어와 안드로이드 마켓 등록까지 손쉽게 따라 할 수 있게 구성돼 있습니다. 최신 버전인 폰갭 1.5.0(Cordova)의 변경사항을 반영해 최신 정보를 제공하며, 언제든 폰갭 API의 사용법을 찾아볼 수 있는 폰갭 API 레퍼런스 가이드로도 유용하게 활용할 수 있습니다.



★ 이 책에서 다루는 내용



ㆍ 폰갭 사용을 위한 아이폰, 안드로이드 개발 환경 설정

ㆍ 폰갭 API 사용법

ㆍ 폰갭 플러그인 설정 방법 및 사용 예제

ㆍ 차일드브라우저 플러그인을 이용한 트위터, 인스타그램 인증 절차

ㆍ 페이스북 플러그인 설정 및 사용 예제

ㆍ 폰갭을 이용한 Photo Onit! 애플리케이션 개발 및 앱스토어, 안드로이드 마켓 등록 절차

01장 소개



모바일 웹앱? 하이브리드 앱?

하이브리드앱 개발을 위한 폰갭 소개

이 책의 구성



02 폰갭 내려받기 및 설치



폰갭 내려받기

iOS용 개발환경 설정

- 1단계. Xcode 설치

- 2단계. 폰갭 설치

- 3단계. 폰갭 기반 프로젝트 만들기

- 4단계. 시뮬레이터에서 실행하기

- 5단계. www 폴더 추가하기

- 6단계. 시뮬레이터에서 실행하기

- 7단계. 외부 서버 접속을 위한 화이트리스트 추가

- 8단계. iOS디바이스에서 실행하기

안드로이드용 개발 환경 설정

- 1단계. 안드로이드 개발 환경 내려받기 및 설정

- 2단계. 안드로이드용 폰갭 파일 확인

- 3단계. 새로운 프로젝트 만들기

- 4단계. 폴더 추가하기

- 5단계. 자바스크립트 파일 복사

- 6단계. jar 파일 복사하기

- 7단계. xml 폴더 복사

- 8단계. 프로젝트 메인 자바 파일 수정하기

- 9단계. jar 파일 추가하기

- 10단계. AndroidManifest.xml 수정하기

- 11단계. index.html 만들기

- 12단계. 시뮬레이터에서 실행하기

- 13단계. 안드로이드 단말기에서 실행하기



03장 폰갭에서 지원하는 API



폰갭 API 요약

폰갭 API 예제 - 모바일 앱 만들기

- 모바일 앱 UI를 위한 jQuery Mobile

- jQuery Mobile 내려받기와 적용

- jQuery Mobile을 이용한 페이지 구성

- 폰갭 API 예제 모바일 애플리케이션 폴더 구성

- 폰갭 API 예제 모바일 앱의 HTML과 자바스크립트 파일

- 폰갭 API 모바일 애플리케이션의 index.html

단말기 정보(Device)

- 단말기 정보 API 및 관련 객체

- 단말기 정보 API 사용 예

카메라

- 카메라 API 및 관련 객체

- 카메라 API 사용 예

위치 정보(Geolocation)

- 위치 정보 API 및 관련 객체

- 위치 정보 API 사용 예

가속도 센서(Accelerometer)

- 가속도 센서 API 및 관련 객체

- 가속도 센서 API 사용 예

캡처(Capture)

- 캡처 API 및 관련 객체

- 캡처 API 사용 예

방향 정보(Compass)

- 방향 정보 API 및 관련 객체

- Compass API 사용 예

네트워크 연결(Connection)

- 네트워크 연결 API 및 관련 객체

- 네트워크 연결 API 사용 예

연락처(Contacts)

- 연락처 API 및 관련 객체

- 연락처 API 사용 예

- 파일(File)

- 파일 시스템 객체, 파일 시스템 접근의 시작

- 디렉터리 객체

- 디렉터리 내용 읽기

- 파일 객체

- 개별 파일 정보 객체

- 개별 파일 내용 읽기 및 쓰기

- 파일 전송하기

- 파일 API 사용 예

미디어(Media)

- 미디어 API 및 관련 객체

- 미디어 API 사용 예

알림(Notification)

- 알림 API 및 관련 객체

- 알림 API 사용 예

저장소(Storage)

- 저장소 API 및 관련 객체

- 저장소 API 사용 예



04장 이벤트



폰갭이 지원하는 이벤트

이벤트 처리 예제



05장 폰갭 플러그인



폰갭 플러그인 소개

iOS용 플러그인 설치 절차

안드로이드용 플러그인 설치 방법

차일드브라우저 플러그인 설치 및 사용 예

- iOS용 차일드브라우저 플러그인 설치

- 안드로이드용 차일드브라우저 플러그인 설치

- 차일드브라우저 플러그인 메서드



06장 폰갭을 이용한 SNS 인증 및 매쉬업 개발



트위터 매쉬업 애플리케이션 개발

- 트위터의 oAuth 인증 절차

- jsOAuth와 차일드브라우저를 이용한 트위터 인증 구현

- jsOAuth 자바스크립트 라이브러리

차일드브라우저를 이용한 인스타그램 oAuth 인증 방법-



07장 폰갭을 이용한 하이브리드 앱 실전 개발



페이스북 커넥트 플러그인을 이용한 페이스북 인증

- 안드로이드용 페이스북 커넥터 플러그인 적용하기

- 아이폰용 페이스북 커넥터 플러그인 적용하기

Photo Onit!의 기능 및 구현

Photo Onit! 동작 흐름

Photo Onit! 프로젝트 폴더 구성 및 소스 파일

Photo Onit! 소스코드

Photo Onti! 서버 스크립트 소스코드



08장 애플 앱스토어 등록 및 판매 절차



애플 앱스토어 등록 준비

- Xcode에서 시작 이미지(Launch Images) 변경

- 애플리케이션 아이콘 변경

- 애플리케이션 이름 변경

애플 앱스토어 등록 절차



09장 안드로이드 마켓 등록 및 판매 절차



안드로이드 마켓 등록을 위한 준비

- 애플리케이션 이름 변경

- 패키지 이름 변경

- 화면 세로 모드만 지원하기

- 애플리케이션 론처 아이콘 바꾸기

안드로이드 마켓 등록 절차

- One more thing...

정우진 저자 정우진은 한양대학교에서 전자통신공학을 전공했고 삼성전자에서 CDMA 모바일 소프트웨어를 개발하며 사회생활을 시작했다. 피처폰, 스마트폰의 개발을 경험하였고 앞으로는 HTML5와 하이브리드 앱 프레임워크가 새로운 기술적 진보를 이루어낼 것이라 생각하고 있다. 현재는 트루모바일의 대표이사로 새로운 하이브리드 앱 프레임워크 개발을 진행하고 있다.