★ 이 책에서 다루는 내용 ★
■ 애플리케이션 개발을 위한 아이오닉 기능
■ 파이어베이스와 아이오닉을 이용한 채팅 앱 제작
■ 써드 파티 REST API를 사용한 주식 추적 앱 제작 및 아이오닉 네비게이션과 페이지를 활용한 레이아웃 구성
■ 아이오닉과 코르도바 플러그인을 사용한 미디어 플레이어 앱
■ 파이어베이스를 이용한 상용 애플리케이션 제작
■ 실시간 아이오닉 애플리케이션 제작을 위한 모범 사례 연구
★ 이 책의 대상 독자 ★
아이오닉 2를 사용한 경험이 있지만 동적인 기능으로 실시간 앱을 제작하는 아이...
★ 이 책에서 다루는 내용 ★
■ 애플리케이션 개발을 위한 아이오닉 기능
■ 파이어베이스와 아이오닉을 이용한 채팅 앱 제작
■ 써드 파티 REST API를 사용한 주식 추적 앱 제작 및 아이오닉 네비게이션과 페이지를 활용한 레이아웃 구성
■ 아이오닉과 코르도바 플러그인을 사용한 미디어 플레이어 앱
■ 파이어베이스를 이용한 상용 애플리케이션 제작
■ 실시간 아이오닉 애플리케이션 제작을 위한 모범 사례 연구
★ 이 책의 대상 독자 ★
아이오닉 2를 사용한 경험이 있지만 동적인 기능으로 실시간 앱을 제작하는 아이오닉의 강력함에 대해 아직 완전히 체감하지 못한 중급 수준의 아이오닉 개발자를 위한 책이다.
★ 이 책의 구성 ★
1장, ‘파이어베이스를 이용한 채팅 애플리케이션’에서는 파이어베이스를 사용해 실시간 채팅 애플리케이션을 개발하는 방법을 소개한다. 또한 아이오닉 2에서 탭 사용법, 파이어베이스 설정법, 채팅 앱을 개발하기 위해 AngularFire2로 파이어베이스를 사용하는 법을 배운다.
2장, ‘Marketcloud를 이용한 쇼핑몰 애플리케이션’에서는 전자상거래를 위한 새로운 BaaS 플랫폼인 Marketcloud를 소개한다. 독자는 Marketcloud SDK와 대시보드를 사용한 쇼핑몰 앱을 제작하고 결제 게이트웨이 통합으로 결제를 처리하며 아이오닉 2 메뉴와 탐색을 사용하고 아이오닉 로딩을 사용한 로더의 사용법을 배운다.
3장, ‘학회 애플리케이션’에서는 학회 앱 제작 방법을 선보인다. Lanyrd 호환 JSON 데이터를 사용하고 아이오닉 네이티브로 네이티브 장치 기능과 LocalStorage를 활용하며 아이오닉 메뉴와 탭을 같이 사용하는 오프라인 학회 앱을 개발한다. 또한 RxJS를 사용해 검색 필터를 개발한다.
4장, ‘StockMarket 애플리케이션’에서는 사용자가 선택한 주식의 정보를 보여주는 증권 시장앱을 개발하는 방법을 소개한다. 앵귤러 2 컴포넌트 API를 사용해 재사용 가능한 UI 컴포넌트를 개발하고 RxJS를 활용해 Yahoo API에서 지속적으로 증권 데이터를 받아오며 커스텀 앵귤러JS 파이프를 제작하고 증권의 과거 데이터를 보여주는 반응형 차트를 생성한다.
5장, ‘워드프레스 클라이언트 애플리케이션’에서는 워드프레스 블로그나 사이트를 위한 모바일 클라이언트를 개발하는 방법을 소개한다. 또한 워드프레스 REST API, 아이오닉 Toast, 아이오닉 2에서의 무한 스크롤, 푸시 알람, 아이오닉 네이티브, 구글 애널리틱스 활용하는 법을 소개한다. 최종 결과물은 블로그 게시물, 댓글, 카테고리, 워드프레스 페이지를 가진 워드프레스 클라이언트 애플리케이션이 될 것이다.
6장, ‘미디어 플레이어 애플리케이션’에서는 미디어 플레이어를 개발하는 방법을 소개하는데 이 책 속에 등장하는 특별한 앱 중 하나다. 재생 위치를 변경할 수 있는 탐색 바, 재생 및 일시 정지 버튼, 재생 목록 옵션과 다음 및 이전 버튼이 있는 완전한 플레이어를 제작한다. 또한 장치에서 미디어를 가져오는 파일 탐색기도 제작한다.
7장, ‘파이어베이스를 이용한 소셜 애플리케이션’에서는 파이어베이스를 사용한 소셜 앱을 개발하는 방법을 소개한다. 파이어베이스 데이터베이스를 사용해 정보를 저장하며 파이어베이스 저장소를 사용해 이미지와 같은 이진 정보를 저장한다. 이 앱은 사용자가 다른 사용자를 팔로잉하고 그들의 게시물을 보는 트위터 같은 앱이며 앱을 위한 데이터베이스 구조도 다룬다.
★ 옮긴이의 말 ★
2000년대 초반만 하더라도 IT는 데스크톱 운영체제인 마이크로소프트 윈도우와 웹이라는 큰 플랫폼으로 구분됐으며 그 개발자 역시 뚜렷하게 구분돼 각자의 역할을 존중하며 공생해왔다. 역자도 윈도우 앱 개발자 출신으로 당시에는 윈도우의 세상이 영원할 것으로 믿었기 때문에 윈도우 앱 개발 기술만 알면 평생 먹고 살 줄 알았다.
그 흐름에 처음으로 불안함이 감돈 것은 앱이라고 부르기는 뭔가 궁색했던 웹페이지가 HTML5 기술의 등장으로 동적인 UX를 가진 웹앱으로 변화하기 시작한 2000년대 중반부터였다. 그동안 HTTP의 비연결적 특성 때문에 데스크톱 앱에 비해 UX의 역동성이 부족했던 웹이 동적으로 동작하면서 데스크톱 앱의 영역을 침범하기 시작한 것이다. 이 웹앱은 또 하나의 큰 장점이 있었는데, 웹브라우저의 호환성만 보장되면 윈도우 이외의 플랫폼인 리눅스나 맥에서도 똑같이 동작할 수 있다는 점이었다. 하지만 그 때까지도 사실상 독점적인 윈도우의 철옹성에는 흔들림이 없었기 때문에 그 장점은 크게 주목 받지 못했다.
이 철옹성에 큰 위기가 찾아온 건 iOS와 안드로이드를 필두로 한 모바일 플랫폼의 등장이었다. 윈도우의 독점이 지속될 줄만 알았던 상황에서 새로운 컴퓨팅 장치가 몰고 온 플랫폼의 다변화는 비즈니스적으로 새로운 플랫폼을 지원해야 할 수 밖에 없는 고민의 시대로 흘러갔다. 이 때부터 웹앱의 크로스플랫폼 동작 가능성은 집중적으로 주목 받기 시작했다. 즉 웹뷰라는 각 플랫폼이 제공하는 웹브라우저 컴포넌트에서 렌더링되도록 웹 기술을 기반으로 한 JQueryMobile, SenchTouch 등으로 UI를 구현하고 PhoneGap, Appcelerator, Appspresso 등으로 네이티브 기능을 연동하는 하이브리드 앱 개발 방식이 등장한 것이다.
하이브리드 앱은 한번의 코딩만으로 복수의 플랫폼을 지원한다는 점에서 개발 비용과 시간을 월등히 줄일 수 있는 이상적인 개발 방법이었지만 초기에는 느린 성능, 여전히 웹 같은 이질감 있는 UI, 플랫폼마다 신규 네이티브 기능 지원이 늦거나 불안한 부분 때문에 실제로는 간단한 기능을 가진 앱에만 적용되거나, 하이브리드 앱으로 개발했다가도 다시 네이티브 앱으로 회귀하는 등 시장에서 기대만큼 인기를 끌지 못하는 상태가 지속됐다.
하지만 시간이 지나면서 하이브리드 앱은 모바일 장치의 성능이 비약적으로 향상되고 자바스크립트 엔진의 발전과 더불어 네이티브 앱과 같은 UI 구현을 지원하는 UI 프레임워크가 등장하면서 새 시대를 맞았다. 특히 UI 프레임워크 중에서도 가장 개발자 커뮤니티가 활성화돼 있고 사용자 요구를 발 빠르게 수용하는 아이오닉 프레임워크는 단시간에 주목 받았고 인기를 얻게 됐다. 아이오닉은 앵귤러 JS를 기반으로 개발돼 MVC 모델을 적용할 수 있고 다양한 UI 컴포넌트와 기능을 제공함으로써 크로스플랫폼을 지원하면서도 네이티브 앱 같은 UI를 구현할 수 있는 UI 프레임워크다. 게다가 아이오닉은 GitHub에 수많은 별을 얻고 백만 개가 넘는 앱이 아이오닉으로 개발되는 등 큰 인기를 얻었다. 그럼에도 불구하고 아이오닉 개발팀은 혁신을 멈추지 않고 바로 다음 버전인 아이오닉 2를 계획하고 개발을 진행했다. 새로 나온 아이오닉 2는 앵귤러 2, 타입스크립트, SASS 같은 최신 기술을 도입했으며, 이전 버전에 비해 구조와 빌드 도구를 개선했다. 또한 ES6 문법을 지원하며 새로운 테마 시스템, 향상된 모달 및 메뉴, 토스트, 새로운 네비게이션 시스템을 탑재하는 등 UI 컴포넌트가 혁신적으로 개선됐다. 가장 주목할 만한 것은 스크롤링 속도가 60FPS에 달하는 등 성능 또한 비약적으로 향상됐다는 점이다.
이 책은 혁신적으로 개선된 아이오닉 2의 주요 기능을 활용한 7개의 앱을 소개해 독자가 빠르게 아이오닉 2를 배울 수 있게 한다. 또한 구글의 클라우드 기반 실시간 데이터베이스인 파이어베이스를 적극 활용해 서버단 개발 없이 데이터베이스와 앱이 직접 연동되는 빠른 앱 개발 방법을 소개한다. 아이오닉 2와 파이어베이스를 활용하면 iOS 개발자,

1장. 파이어베이스를 이용한 채팅 애플리케이션
__파이어베이스
____AngularFire2
____리스트와 오브젝트
____템플릿
____파이어베이스 시작
____파이어베이스 애플리케이션 만들기
____비밀번호 인증 활성화
____파이어베이스 설정 정보 가져오기
__소프트웨어 설치
____Node와 npm 설치
____깃 설치
____플랫폼 SDK 설치
____아이오닉 CLI와 코르도바 설치
__애플리케이션 정의
____기능
____애플리케이션 흐름
____유저 인터페이스 모형
____파이어베이스의 데이터 구조
__애플리케이션 스캐폴딩과 설정
____코르도바 플러그인 설치
____파이어베이스와 AngularFire2 설치
____Typings 설치
____파이어베이스용 타입스크립트 데피니션 설치
__애플리케이션 코딩
____app.ts 파일 정의하기
____애플리케이션 프로바이더
________AuthProvider 정의
________UserProvider 정의
________ChatsProvider 정의
________UtilProvider 정의
____애플리케이션 페이지
________LoginPage 정의
________템플릿
________커스텀 이메일 검사기 정의
________TabsPage 정의
________템플릿
________UsersPage 정의
________템플릿
________ChatsPage 정의
________템플릿
________ChatViewPage 정의
________템플릿
________스타일시트
________AccountPage 정의
________템플릿
__스타일 추가
__애플리케이션 실행
____애플리케이션 화면
__정리
2장. Marketcloud를 이용한 쇼핑몰 애플리케이션
__소개
__Marketcloud
____Marketcloud 애플리케이션 생성
____Marketcloud 대시보드 사용
________카테고리 만들기
________상품 만들기
________애플리케이션을 위한 통화 설정
____Marketcloud JS SDK
________API 레퍼런스
__결제 통합
__애플리케이션 정의
____기능
____애플리케이션의 흐름
__애플리케이션 스캐폴딩과 설정
____모듈 설치
________Marketcloud JS SDK 설치
________Braintree 코르도바 플러그인 설치
__애플리케이션 코딩
____index.html 파일
____app.ts 정의
________템플릿
____애플리케이션의 프로바이더
________StorageProvider 작성
________UtilProvider 작성
________MarketProvider 작성
________CartProvider 작성
________UserProvider 작성
____애플리케이션 페이지
________StorePage 작성
________템플릿
________CategoryPage 작성
________템플릿
________ProductPage 작성
________템플릿
________ImageModal 작성
________템플릿
________스타일시트
________CartPage 작성
________템플릿
________AuthPage 작성
________템플릿
________OrderPage 작성
________템플릿
__스타일 추가
__애플리케이션 실행
____플랫폼을 추가하고 실제 기기에서 애플리케이션 구동
____애플리케이션 화면
__정리
3장. 학회 애플리케이션
__소개
__JSON 데이터
____JSON 이해
__애플리케이션 정의
____기능
____애플리케이션 흐름
__애플리케이션 스캐폴딩과 설정
____모듈 설치
__애플리케이션 코딩
____탭 스타터의 구조
____app.ts 작성
________ConfProvder 작성
____애플리케이션 페이지
________TabsPage 페이지 작성
________SpeakersPage 페이지 작성
________SchedulePage 페이지 작성
________SessionDetail 페이지 작성
________SpeakerDetail 페이지 작성
________AboutPage 페이지 작성
________FavoritePage 페이지 정의
__애플리케이션 실행
____애플리케이션 화면
__정리
4장. StockMarket 애플리케이션
__소개
__Yahoo Finance API
____주식 정보 엔드포인트
____심볼명 엔드포인트
____과거 정보 엔드포인트
____자세한 주식 정보
__앱 기능 정의
____애플리케이션 흐름
__애플리케이션 스캐폴딩과 설정
____모듈 설치
________Chartist 라이브러리 설치
__코딩 부분
____index.html 파일
____app.ts 정의
____애플리케이션 프로바이더
________StorageProvider 정의
________StockInfo 프로바이더 정의
____애플리케이션 컴포넌트
________StockCmp 컴포넌트
________StockChart
________StockDetailCmp
____애플리케이션 페이지
________StockList 페이지 정의하기
________QuoteSearch 모달 정의
________Detail 페이지 정의하기
__core 스타일 추가
__애플리케이션 실행
____애플리케이션 화면
__정리
5장. 워드프레스 클라이언트 애플리케이션
__백엔드
____푸시 알람
____구글 애널리틱스
____워드프레스 JSON API
__워드프레스 설정
____플러그인 설치
________푸시 알람 설정
__애플리케이션 흐름
__애플리케이션 스캐폴딩과 설정
____코르도바 플러그인 설치
____CORS 문제
__애플리애케이션 코딩
____애플리케이션 설정
____app.ts 정의
____애플리케이션 프로바이더
________UtilProvider 정의
________WpProvider 정의
________PushProvider 정의
____HtmlPipe
____Post 컴포넌트
________입력
________출력
____애플리케이션 페이지
________TabsPage 정의
________PostsPage 정의
________템플릿
________PostPage 정의
________CategoryListPage 정의
________WpPageList
________WpPage 정의
________FavoritePage 정의
________SettingsPage 정의
__애플리케이션 스타일링
__애플리케이션 실행
____애플리케이션 화면
__정리
6장. 미디어 플레이어 앱
__주요 핵심
____재생
____파일 시스템
____로컬 저장소
__애플리케이션 흐름
__애플리케이션 스캐폴딩과 설정
____모듈 설치
____애플리케이션 실행 및 디버깅
__애플리케이션 코딩
____최상위 앱 컴포넌트
____애플리케이션 프로바이더
________UtilProvider 정의
________FileProvider 정의
________PlayerProvider 정의
____Imclock 파이프
____ImControls 컴포넌트
________입력
________출력
____애플리케이션 페이지
________BrowsePage 정의
________템플릿
________PlaylistPage 정의
________PlayerPage 정의
__애플리케이션 실행
____애플리케이션 화면
__정리
7장. 파이어베이스를 이용한 소셜 애플리케이션
__애플리케이션 정의
____게시물 동작 원리
____기능
____애플리케이션 흐름
____파이어베이스 데이터 구조
__애플리케이션 스캐폴딩과 설정
____코르도바 플러그인 설치
____Typings 설치
____파이어베이스와

★ 지은이의 말 ★

이 책은 아이오닉 2를 사용해 재미있고 몰입되는 앱을 제작할 있도록 도움을 준다. 이 책을 통해 독자는 다양한 아이오닉 컴포넌트를 배우고 외부 서비스를 통합하며 기능을 구현하고 특히 전문적인 앱을 제작하는 방법을 배울 것이다. 또한 아이오닉 2 앱 개발의 기초를 이해하고 점진적으로 기능과 애플리케이션의 복잡도를 높여가며 애플리케이션이 어떻게 개발되는지 관찰함으로써 일관성 있고 쉬운 방법으로 아이오닉 앱 개발을 배울 수 있다.

★ 옮긴이의 말 ★

2000년대 초반만 하더라도 IT는 데스크톱 운영체제인 마이크로소프트 윈도우와 웹이라는 큰 플랫폼으로 구분됐으며 그 개발자 역시 뚜렷하게 구분돼 각자의 역할을 존중하며 공생해왔다. 역자도 윈도우 앱 개발자 출신으로 당시에는 윈도우의 세상이 영원할 것으로 믿었기 때문에 윈도우 앱 개발 기술만 알면 평생 먹고 살 줄 알았다.
그 흐름에 처음으로 불안함이 감돈 것은 앱이라고 부르기는 뭔가 궁색했던 웹페이지가 HTML5 기술의 등장으로 동적인 UX를 가진 웹앱으로 변화하기 시작한 2000년대 중반부터였다. 그동안 HTTP의 비연결적 특성 때문에 데스크톱 앱에 비해 UX의 역동성이 부족했던 웹이 동적으로 동작하면서 데스크톱 앱의 영역을 침범하기 시작한 것이다. 이 웹앱은 또 하나의 큰 장점이 있었는데, 웹브라우저의 호환성만 보장되면 윈도우 이외의 플랫폼인 리눅스나 맥에서도 똑같이 동작할 수 있다는 점이었다. 하지만 그 때까지도 사실상 독점적인 윈도우의 철옹성에는 흔들림이 없었기 때문에 그 장점은 크게 주목 받지 못했다.
이 철옹성에 큰 위기가 찾아온 건 iOS와 안드로이드를 필두로 한 모바일 플랫폼의 등장이었다. 윈도우의 독점이 지속될 줄만 알았던 상황에서 새로운 컴퓨팅 장치가 몰고 온 플랫폼의 다변화는 비즈니스적으로 새로운 플랫폼을 지원해야 할 수 밖에 없는 고민의 시대로 흘러갔다. 이 때부터 웹앱의 크로스플랫폼 동작 가능성은 집중적으로 주목 받기 시작했다. 즉 웹뷰라는 각 플랫폼이 제공하는 웹브라우저 컴포넌트에서 렌더링되도록 웹 기술을 기반으로 한 JQueryMobile, SenchTouch 등으로 UI를 구현하고 PhoneGap, Appcelerator, Appspresso 등으로 네이티브 기능을 연동하는 하이브리드 앱 개발 방식이 등장한 것이다.
하이브리드 앱은 한번의 코딩만으로 복수의 플랫폼을 지원한다는 점에서 개발 비용과 시간을 월등히 줄일 수 있는 이상적인 개발 방법이었지만 초기에는 느린 성능, 여전히 웹 같은 이질감 있는 UI, 플랫폼마다 신규 네이티브 기능 지원이 늦거나 불안한 부분 때문에 실제로는 간단한 기능을 가진 앱에만 적용되거나, 하이브리드 앱으로 개발했다가도 다시 네이티브 앱으로 회귀하는 등 시장에서 기대만큼 인기를 끌지 못하는 상태가 지속됐다.
하지만 시간이 지나면서 하이브리드 앱은 모바일 장치의 성능이 비약적으로 향상되고 자바스크립트 엔진의 발전과 더불어 네이티브 앱과 같은 UI 구현을 지원하는 UI 프레임워크가 등장하면서 새 시대를 맞았다. 특히 UI 프레임워크 중에서도 가장 개발자 커뮤니티가 활성화돼 있고 사용자 요구를 발 빠르게 수용하는 아이오닉 프레임워크는 단시간에 주목 받았고 인기를 얻게 됐다. 아이오닉은 앵귤러 JS를 기반으로 개발돼 MVC 모델을 적용할 수 있고 다양한 UI 컴포넌트와 기능을 제공함으로써 크로스플랫폼을 지원하면서도 네이티브 앱 같은 UI를 구현할 수 있는 UI 프레임워크다. 게다가 아이오닉은 GitHub에 수많은 별을 얻고 백만 개가 넘는 앱이 아이오닉으로 개발되는 등 큰 인기를 얻었다. 그럼에도 불구하고 아이오닉 개발팀은 혁신을 멈추지 않고 바로 다음 버전인 아이오닉 2를 계획하고 개발을 진행했다. 새로 나온 아이오닉 2는 앵귤러 2, 타입스크립트, SASS 같은 최신 기술을 도입했으며, 이전 버전에 비해 구조와 빌드 도구를 개선했다. 또한 ES6 문법을 지원하며 새로운 테마 시스템, 향상된 모달 및 메뉴, 토스트, 새로운 네비게이션 시스템을 탑재하는 등 UI 컴포넌트가 혁신적으로 개선됐다. 가장 주목할 만한 것은 스크롤링 속도가 60FPS에 달하는 등 성능 또한 비약적으로 향상됐다는 점이다.
이 책은 혁신적으로 개선된 아이오닉 2의 주요 기능을 활용한 7개의 앱을 소개해 독자가 빠르게 아이오닉 2를 배울 수 있게 한다. 또한 구글의 클라우드 기반 실시간 데이터베이스인 파이어베이스를 적극 활용해 서버단 개발 없이 데이터베이스와 앱이 직접 연동되는 빠른 앱 개발 방법을 소개한다. 아이오닉 2와 파이어베이스를 활용하면 iOS 개발자, 안드로이드 개발자, 서버 개발자 3명이 필요했던 기존 네이티브 개발 방식을 벗어나 혼자 모든 것을 해낼 수 있다. 놀랍지 않은가? 역자는 최근 스타트업에서 기획한 서비스를 개발하기 위해 네이티브 앱 개발 방식, 자마린, 유니티등의 크로스플랫폼 개발 기술과 아이오닉과 같은 하이브리드 앱 개발 기술을 두루 고려했지만 결국 프론트엔드로 아이오닉을, 백엔드로 파이어베이스를 선택했다. 네이티브 앱 개발 방법보다 노력이 1/3 수준으로 적게 들 뿐만 아니라 개발자 수급 차원에서도 아이오닉 자체가 웹 기술이므로 웹 개발자를 구하면 됐기때문에 자마린, 유니티보다 훨씬 유리하다는 것이 그 이유였다. 실제로 개발하면서 생각했던 것보다 더 만족스럽고 훌륭했기 때문에 아이오닉을 독자들에게 자신 있게 추천할 수 있으며 장점을 널리 알리고자 이 책도 번역하게 됐다. 이 책을 통해 앞으로 여러분의 모바일 앱을 개발할 때 아이오닉의 사용을 꼭 고려하길 기대한다.