이 책은 HTML과 CSS, 그리고 자바스크립트를 이용해 실제 마켓에 출시할 수 있는 안드로이드 웹앱을 개발하는 방법을 알려줍니다. 2개의 실전 웹앱 개발 프로젝트를 통해 최신 HTML5와 CSS3, 그리고 웹앱 개발에 필요한 전반적인 기술을 익힐 수 있습니다.
또한 Sencha Touch와 jQuery Mobile 등 다양한 모바일 UI 프레임워크에 대해서 알려주며 이를 애플리케이션에 직접 적용해봄으로써, 각 프레임워크의 사용법과 장단점을 함께 알려줍니다. 마지막으로 하이브리드 앱 프레임워크인 폰갭(PhoneGap)을 사용하여 웹앱을 네이티브 앱으로 빌드하여 마켓에 출시하는 과정을 통해, 모바일 웹앱을 개발하여 직접 마켓에 출시하는 전체 과정을 배울 수 있습니다.
|
안드로이드 웹앱 개발에 필요한 모든 것을 담았다! HTML과 CSS, 그리고 자바스크립트를 이용해서 크로스 플랫폼을 지원하는 모바일 웹앱을 개발하는 일은 어렵지 않습니다. 이 책은 이미 웹에서 익숙한 기술들을 활용하여 네이티브 앱 못지않은 훌륭한 모바일 웹앱을 개발할 수 있도록 알려줍니다. 또한 안드로이드 플랫폼 기반의 웹앱을 개발하는 데 필요한 프레임워크인 jQTouch, jQuery Mobile, Sencha Touch, 그리고 폰갭(PhoneGap) 등에 대해 다양한 예제를 통해 자세히 설명하고 있습니다. 간단한 모바일 웹페이지 제작부터 to-do-list 애플리케이션 개발, 웹 서버 구축, HTML5 캔버스를 이용한 고급 애니메이션 기술 활용, 그리고 위치 기반 서비스와 모바일 지도를 이용한 게임 앱 개발까지 모두 <> 한 권으로 학습할 수 있습니다. 모바일 웹앱에 대한 기본적인 설명과 함께 실전 프로젝트를 만드는 방법 및 소스를 제공해주기 때문에 웹앱 개발을 시작하거나 실무에서 활용하고자 할 때 매우 유익합니다. 프로젝트 소스 코드 제공: https://github.com/sidelab/prowebapps-code 안드로이드 기반의 모바일 개발자 혹은 웹 개발자라면 이제는 하이브리드 프레임워크를 이용한 모바일 웹앱 개발에 도전하세요! ★ 핵심 포인트 ★ + 구글 앱 엔진과 같은 클라우드 서버 활용 방법에 대해 살펴봅니다. + 폰갭과 같은 하이브리드 앱 개발 프레임워크를 통한 Device API 활용 방법을 배웁니다. + 모바일 웹앱 개발을 위한 다양한 UI 프레임워크 소개 및 사용법을 알려줍니다. + 지도 서비스와 위치 기반 서비스(LBS)를 응용하는 방법을 알려줍니다. + 소셜 API와 연동하는 방법을 알려줍니다. + 폰갭을 이용한 빌드 및 앱 출시를 위한 패키징 방법에 대해서 배웁니다. |
목차
모바일 웹앱 개발을 시작하기에 앞서
이 책의 구성
지은이 및 옮긴이 소개
베타테스터의 글
프로젝트 소스 코드 보는 방법
Chapter 01 시작하기
안드로이드 플랫폼 기능의 이해
- 인터넷 연결
- 터치
- 위치 추적
- 하드웨어 센서
- 로컬 데이터베이스와 저장소
- 카메라 지원
- 메시징과 푸시 공지
- 웹킷 웹 브라우저
- 프로세스 관리
- 안드로이드 플랫폼이 제공하는 기능
개발 환경 준비
- 텍스트 편집기와 작업 디렉터리
- 웹 서버
- 에뮬레이터
Hello World
요약
Chapter 02 모바일 HTML 입력 폼 구축
모바일 웹을 위한 HTML
- Mobile-Ready 웹 페이지
- 폼 요소 추가
스타일 입히기
- CSS3를 적용한 폼 스타일
- 페이지 제목 개선
- 크기가 다른 화면을 위한 코딩
- 기기 방향에 따른 변화 처리
폼 유효성 추가하기
- 제한된 화면에서의 피드백
요약
Chapter 03 | HTML5 Storage API
Web Storage API
- JSON을 이용하여 웹 Storage에 객체 저장
- 로컬 스토리지 vs 세션 스토리지
Web SQL Database
- 클라이언트 측 데이터베이스에 to-do-list 목록 저장하기
- 데이터베이스 버전 관리와 업그레이드
요약
Chapter 04 | 멀티 페이지 앱 구현하기
단일 HTML 파일, 멀티 앱 페이지
- 뷰 관리자 생성
- 뷰 액션 구축
애플리케이션 메인 화면 구성하기
- ViewManager 기능 조작
- 메인 화면 스토리지 요구사항
- 메인 화면 마무리
모든 내용을 보여주는 화면 구축하기
뷰 스택 구현하기
요약
Chapter 05 | 클라우드 동기화
온라인 저장소 옵션 알아보기
- 온라인 동기화 저장소의 조건
- 3-Tier 구조 우회
- 사용자 인증
- 자바스크립트 동기화 라이브러리
- 사용 가능한 동기화 솔루션
구글 앱 엔진 시작하기
- 로컬에서 json엔진 배포
- 적합한 동기화 방식 선택
- json엔진에 오프라인 데이터 전송
온라인 동기화를 위한 사용자 인터페이스 업데이트하기
데스크톱 인터페이스 작업하기
- json엔진 인스턴스로 쿼리 전송
- 클라우드에서의 애플리케이션 배포
요약
Chapter 06 | 네이티브 앱과의 한판 승부
간단한 애니메이션 및 네이티브 느낌의 레이아웃 추가하기
- 간단한 로딩 스피너 추가
- 스크롤 기능 추가
- 액션 바 꾸미기
애플리케이션에게 위치 정보 알려 주기
- W3C Geolocation API 사양
오프라인에서 애플리케이션 실행하기
- 오프라인 캐시 매니페스트 파일
- 숨겨진 오프라인 캐싱 기능
- 연결 상태 감지
요약
Chapter 07 | 사용자 상호작용
HTML5 캔버스
상호작용 입력으로 캔버스에 그리기
- 상호작용: 마우스 이벤트
- 상호작용 : 터치 이벤트
캔버스 애니메이션 구현하기
- 애니메이션 루프 생성
- 애니메이션 프레임 그리는 방법
- 기기의 DPI 고려해 이미지 그리기
고급 애니메이션 기술 익히기
- 애니메이션의 사실적인 움직임 구현
- 캔버스 변형과 애니메이션
- 변형과 자동차 애니메이션
요약
Chapter 08 | 위치 기반 서비스와 모바일 지도
위치 기반 서비스
지오소셜 네트워킹
모바일 지도 제작
- 구글 맵스를 이용한 지도 표시
- Tile5: HTML5 지도 API를 이용한 대안
- 구글 지도에 표시점 추가
- 표시점 상세 정보 표시
모바일에 최적화된 지도 UI
- 지도 UI 샘플 이미지 작업
- 모바일 지도 UI 코드 작성
- 내비게이션 UI 구현
- 내비게이션 바에서 표시점 선택
요약
Chapter 09 | 폰갭을 이용한 네이티브 앱 변환
하이브리드 앱 개발 프레임워크
- 폰갭을 언제 사용할까?
- 폰갭 다운로드
폰갭 애플리케이션 예제
- 예제 애플리케이션 생성
- 예제 애플리케이션 검토
간단한 폰갭 지도 애플리케이션
- 폰갭 예제 프로젝트 수정
- 기존 코드를 폰갭 앱으로 전송
요약
Chapter 10 |소셜 API와의 연동
웹 API에 연결하기
- JSONP란?
- JSONP를 지원하지 않는 API 처리
- Geominer API 소개
Moundz 자원 위치 검색하기
- Geominer API를 이용한 근처 자원 검색
- 위치 정보를 이용하여 사용자 위치 추적
사용자 로그인
- 시작 화면 및 로그인 화면 구성
- 트위터 Anywhere와 로그인 과정
- 트위터 인증 대안 : Geominer API
요약
Chapter 11 | 모바일 UI 프레임워크 비교
모바일 UI 프레임워크
- 프레임워크의 공통점과 차이점
- 프레임워크 비교를 위한 준비 작업
Jo
- Jo 시작하기
- Moundz와 Jo의 만남
jQTouch
- jQTouch 시작하기
- JQTouch에 Moundz 적용
jQuery Mobile
- jQuery Mobile 시작하기
- Moundz와 jQuery Mobile
Sencha Touch
- Sencha Touch 시작하기
- Moundz와 Sencha Touch
요약
chapter 12 | 앱 출시를 위한 마무리 정리와 패키징
jQuery Mobile 이용해 계속 진행하기
- 로그인 화면 복귀
- 내비게이션 레이아웃 수정
자원 수집하기
- 자원의 상세 정보를 보여주는 화면 제작
- Geominer API를 이용한 자원 추적
Moundz 애플리케이션을 네이티브 앱으로 패키징하기
- 폰갭 프로젝트 실행
- 애플리케이션 승인 수정
폰갭, 인증 그리고 인텐트
- 기존 웹 인증 과정
- 안드로이드 인텐트 개요
- 폰갭의 플러그-인을 이용한 인텐트 사용
출시를 위한 애플리케이션 패키징하기
요약
Chapter 13 |모바일 컴퓨팅의 미래
모바일 컴퓨팅 시대
- 전 세계적인 현상
- 데스크톱의 죽음?
- 점진적 향상 적용
모바일 기술 예측
- 도구와 라이브러리 개선
- 기기 아키텍처의 변화
- 미래의 아키텍처를 위한 코딩
사물간의 통신
- 하드웨어 센서 네트워크
- 인간 센서
요약
부록 A 안드로이드 웹앱 디버깅
부록 B 웹 서버 몽구스 설치
부록 C 국내 하이브리드 앱 프레임워크 : 앱스프레소
더보기접기
이 책의 구성
지은이 및 옮긴이 소개
베타테스터의 글
프로젝트 소스 코드 보는 방법
Chapter 01 시작하기
안드로이드 플랫폼 기능의 이해
- 인터넷 연결
- 터치
- 위치 추적
- 하드웨어 센서
- 로컬 데이터베이스와 저장소
- 카메라 지원
- 메시징과 푸시 공지
- 웹킷 웹 브라우저
- 프로세스 관리
- 안드로이드 플랫폼이 제공하는 기능
개발 환경 준비
- 텍스트 편집기와 작업 디렉터리
- 웹 서버
- 에뮬레이터
Hello World
요약
Chapter 02 모바일 HTML 입력 폼 구축
모바일 웹을 위한 HTML
- Mobile-Ready 웹 페이지
- 폼 요소 추가
스타일 입히기
- CSS3를 적용한 폼 스타일
- 페이지 제목 개선
- 크기가 다른 화면을 위한 코딩
- 기기 방향에 따른 변화 처리
폼 유효성 추가하기
- 제한된 화면에서의 피드백
요약
Chapter 03 | HTML5 Storage API
Web Storage API
- JSON을 이용하여 웹 Storage에 객체 저장
- 로컬 스토리지 vs 세션 스토리지
Web SQL Database
- 클라이언트 측 데이터베이스에 to-do-list 목록 저장하기
- 데이터베이스 버전 관리와 업그레이드
요약
Chapter 04 | 멀티 페이지 앱 구현하기
단일 HTML 파일, 멀티 앱 페이지
- 뷰 관리자 생성
- 뷰 액션 구축
애플리케이션 메인 화면 구성하기
- ViewManager 기능 조작
- 메인 화면 스토리지 요구사항
- 메인 화면 마무리
모든 내용을 보여주는 화면 구축하기
뷰 스택 구현하기
요약
Chapter 05 | 클라우드 동기화
온라인 저장소 옵션 알아보기
- 온라인 동기화 저장소의 조건
- 3-Tier 구조 우회
- 사용자 인증
- 자바스크립트 동기화 라이브러리
- 사용 가능한 동기화 솔루션
구글 앱 엔진 시작하기
- 로컬에서 json엔진 배포
- 적합한 동기화 방식 선택
- json엔진에 오프라인 데이터 전송
온라인 동기화를 위한 사용자 인터페이스 업데이트하기
데스크톱 인터페이스 작업하기
- json엔진 인스턴스로 쿼리 전송
- 클라우드에서의 애플리케이션 배포
요약
Chapter 06 | 네이티브 앱과의 한판 승부
간단한 애니메이션 및 네이티브 느낌의 레이아웃 추가하기
- 간단한 로딩 스피너 추가
- 스크롤 기능 추가
- 액션 바 꾸미기
애플리케이션에게 위치 정보 알려 주기
- W3C Geolocation API 사양
오프라인에서 애플리케이션 실행하기
- 오프라인 캐시 매니페스트 파일
- 숨겨진 오프라인 캐싱 기능
- 연결 상태 감지
요약
Chapter 07 | 사용자 상호작용
HTML5 캔버스
상호작용 입력으로 캔버스에 그리기
- 상호작용: 마우스 이벤트
- 상호작용 : 터치 이벤트
캔버스 애니메이션 구현하기
- 애니메이션 루프 생성
- 애니메이션 프레임 그리는 방법
- 기기의 DPI 고려해 이미지 그리기
고급 애니메이션 기술 익히기
- 애니메이션의 사실적인 움직임 구현
- 캔버스 변형과 애니메이션
- 변형과 자동차 애니메이션
요약
Chapter 08 | 위치 기반 서비스와 모바일 지도
위치 기반 서비스
지오소셜 네트워킹
모바일 지도 제작
- 구글 맵스를 이용한 지도 표시
- Tile5: HTML5 지도 API를 이용한 대안
- 구글 지도에 표시점 추가
- 표시점 상세 정보 표시
모바일에 최적화된 지도 UI
- 지도 UI 샘플 이미지 작업
- 모바일 지도 UI 코드 작성
- 내비게이션 UI 구현
- 내비게이션 바에서 표시점 선택
요약
Chapter 09 | 폰갭을 이용한 네이티브 앱 변환
하이브리드 앱 개발 프레임워크
- 폰갭을 언제 사용할까?
- 폰갭 다운로드
폰갭 애플리케이션 예제
- 예제 애플리케이션 생성
- 예제 애플리케이션 검토
간단한 폰갭 지도 애플리케이션
- 폰갭 예제 프로젝트 수정
- 기존 코드를 폰갭 앱으로 전송
요약
Chapter 10 |소셜 API와의 연동
웹 API에 연결하기
- JSONP란?
- JSONP를 지원하지 않는 API 처리
- Geominer API 소개
Moundz 자원 위치 검색하기
- Geominer API를 이용한 근처 자원 검색
- 위치 정보를 이용하여 사용자 위치 추적
사용자 로그인
- 시작 화면 및 로그인 화면 구성
- 트위터 Anywhere와 로그인 과정
- 트위터 인증 대안 : Geominer API
요약
Chapter 11 | 모바일 UI 프레임워크 비교
모바일 UI 프레임워크
- 프레임워크의 공통점과 차이점
- 프레임워크 비교를 위한 준비 작업
Jo
- Jo 시작하기
- Moundz와 Jo의 만남
jQTouch
- jQTouch 시작하기
- JQTouch에 Moundz 적용
jQuery Mobile
- jQuery Mobile 시작하기
- Moundz와 jQuery Mobile
Sencha Touch
- Sencha Touch 시작하기
- Moundz와 Sencha Touch
요약
chapter 12 | 앱 출시를 위한 마무리 정리와 패키징
jQuery Mobile 이용해 계속 진행하기
- 로그인 화면 복귀
- 내비게이션 레이아웃 수정
자원 수집하기
- 자원의 상세 정보를 보여주는 화면 제작
- Geominer API를 이용한 자원 추적
Moundz 애플리케이션을 네이티브 앱으로 패키징하기
- 폰갭 프로젝트 실행
- 애플리케이션 승인 수정
폰갭, 인증 그리고 인텐트
- 기존 웹 인증 과정
- 안드로이드 인텐트 개요
- 폰갭의 플러그-인을 이용한 인텐트 사용
출시를 위한 애플리케이션 패키징하기
요약
Chapter 13 |모바일 컴퓨팅의 미래
모바일 컴퓨팅 시대
- 전 세계적인 현상
- 데스크톱의 죽음?
- 점진적 향상 적용
모바일 기술 예측
- 도구와 라이브러리 개선
- 기기 아키텍처의 변화
- 미래의 아키텍처를 위한 코딩
사물간의 통신
- 하드웨어 센서 네트워크
- 인간 센서
요약
부록 A 안드로이드 웹앱 디버깅
부록 B 웹 서버 몽구스 설치
부록 C 국내 하이브리드 앱 프레임워크 : 앱스프레소
저자&기여자
ㆍ지은이 데이먼 오흘맨(Damon Oehlman)
- 소개
윈도우 웹부터 모바일까지 다양한 플랫폼 개발 경험이 풍부한 소프트웨어 개발자이자 기술 관리자. 모바일 웹앱 개발에 대한 열정으로 모바일 개발 회사인 'Sidelab'을 공동 창업했습니다. 현재 기술 블로그인 www.distractable.net을 운영하고 있으며 HTML5 모바일 지도 자바스크립트 라이브러리인 'Tile5'도 개발했습니다.
ㆍ지은이 세바스찬 블랭(Sebastien Blanc)
- 소개
- 수석 JEE 소프트웨어 개발자로 네덜란드 IT회사인 'E-id'에서 근무하고 있습니다. 학회에서 정기적으로 연설을 하는 등 모바일 웹앱 개발 분야에서 전문적으로 정보를 제공하며 웹 기반의 모바일 애플리케이션이 성공하리라 확신하고 있습니다.
저작권 안내
모든 자료는 저작권법의 보호를 받는 저작물로, 허락 없이 편집하거나 다른 매체에 옮겨 실을 수 없습니다.
인공지능(AI) 기술 또는 시스템을 훈련하기 위해 자료의 전체 내용은 물론 일부도 사용하는 것을 금지합니다.
All materials are protected by copyright law and may not be edited or reproduced in other media without permission.
It is prohibited to use all or part of the materials, including for training artificial intelligence (AI) technologies or systems, without authorization.
인공지능(AI) 기술 또는 시스템을 훈련하기 위해 자료의 전체 내용은 물론 일부도 사용하는 것을 금지합니다.
All materials are protected by copyright law and may not be edited or reproduced in other media without permission.
It is prohibited to use all or part of the materials, including for training artificial intelligence (AI) technologies or systems, without authorization.
연관 프로그램
아래 프로그램은 길벗출판사가 제공하는 것이 아닙니다.
무료로 사용할 수 있는 정보를 안내해 드리니, 지원이 필요하면 해당 프로그렘 제작사로 문의해 주세요.
무료로 사용할 수 있는 정보를 안내해 드리니, 지원이 필요하면 해당 프로그렘 제작사로 문의해 주세요.
구매 도서 인증
Pro Android Web Apps
부가기호 확인하는 방법
- 종이책 :
-
도서 뒷표지 아래쪽에 있는 바코드의 오른쪽 위 숫자
- 전자책(eBook) :
- 전자책 앞 또는 뒷부분의 판권면 (발행인, 담당 편집자 등을 표시하는 곳) 중 ISBN 부분에 표기(예: 979-11-6050-407-1 05320로 된 곳의 뒤 다섯 자리 숫자 05320)
도서문의
Pro Android Web Apps
관련 FAQ에 찾는 내용이 없으면 아래에서 '문의하기'를 클릭해 주세요.
독자의견 남기기