Ionic project guide by deokwoolee

1. 1 / 18
Ionic Framework Project Guide
ver 1.0.0
FashionGo Korea

2. 2 / 18
Revision History
Version Description Author Date
1.0.0 초안 작성 이덕우 2016.01.21

3. 3 / 18
Contents
Ionic Framework Project Guide........................................................................................................................................1
Revision History .....................................................................................................................................................................2
Ionic 이란?...............................................................................................................................................................................4
관련 용어 정리.......................................................................................................................................................................4
Ionic 설치.................................................................................................................................................................................5
Ionic 실행.................................................................................................................................................................................7
Sample Project 생성 ...................................................................................................................................................7
브라우저에서 App 실행 ............................................................................................................................................7
Android emulator에서 App 실행 ..........................................................................................................................9
Android Device에서 App 실행 ............................................................................................................................ 10
iOS simulator에서 App 실행 ................................................................................................................................ 11
iOS Device에서 App 실행 ..................................................................................................................................... 12
Ionic Device API 사용....................................................................................................................................................... 13
Ionic Platform 네이티브 개발 ....................................................................................................................................... 16
Android 프로젝트...................................................................................................................................................... 17
iOS 프로젝트............................................................................................................................................................... 18

4. 4 / 18
Ionic 이란?
 정의
Cordova + AngularJS + Mobile UI Component 를 합친 모바일 Web App (Hybrid App)
Framework.
 장점
 쉬운 사용으로 App 개발의 진입 장벽이 낮아지고 빠른 개발 가능.
 plugin을 통해 네이티브 자원을 쉽게 사용할 수 있음.
 크로스 플랫폼을 지원하여 OSMU (One Source Multi Use) 할 수 있음.
 AngularJS 사용.
 다양한 모바일 UI 컴포넌트 제공.
 활발한 커뮤니티와 넓은 사용자층.
 단점
 버그 존재.
 많은 사용자로 인해 버그 해결 방법을 쉽게 찾을 수 있으며 빠른 업데이트로 버
그 수정.
 Transition과 Animation 속도가 상대적으로 느림.
 네이티브보다 빠를 수는 없음.
 Famo.us framework에 비해서 Transition 효과 및 Animation 속도가 상대적으로
느리지만 개발 성격이 다름.
관련 용어 정리
 Cordova
 Javascript를 이용하여 native device 에 접근할 수 있도록 하는 device API set을 제공
하여 HTML, CSS, JavaScript를 이용해 앱(Hybrid App)을 만들 수 있다.
 Adobe가 PhoneGap을 인수한 뒤에 PhoneGap을 Apache재단에 기부하였다. 그래서
Opensource가 되었고, PhoneGap 1.5 부터 Cordova로 이름이 변경되었다.

5. 5 / 18
 지원 platform : amazon-fireos, android, blackberry10, browser, firefoxos, webos,
windows, windows8, wp8, ios, osx
 AngularJS
 SPA(Single Page Application) 형태의 웹 어플리케이션을 빠르게 개발할 수 있도록 도
와주는 MVC 웹 프레임워크.
 특징 : MVC 패턴, 의존성 주입(Dependency Injection), 양뱡향 데이터 바인딩 등.
 하이브리드 앱
 하이브리드 앱은 HTML5, CSS, JavaScript와 같은 웹 기술로 웹 애플리케이션을 만들
고, 이를 WebView라는 내장 브라우저를 통해 네이티브 컨테이너로 감싼 네이티브
애플리케이션을 말한다.
 Javascript에서 카메라, 가속도계, 위치정보, 연락처 같은 네이티브 기능에 접근할 수
있다.
 장점
 Web 개발자가 간단한 학습을 통하여 App 개발자가 될 수 있다.
 크로스 플랫폼을 지원하여 개발에 필요한 비용과 시간을 줄여준다.
 단점
 네이티브 앱과 같은 성능을 발휘하지 못한다. 그렇지만 점점 발전하고 있다.
Ionic 설치
1. Node.js 설치
A. 다운로드
i. https://nodejs.org
ii. 현재 버전 5.4.1이 stable 최신 버전이나 버전 5는 ionic이 동작하지 않는다고 나
와있으나 사용해본 결과 특별한 문제는 없었다.

6. 6 / 18
B. installer 설치
C. 설치 확인
i. 명령 프롬프트(cmd) 실행
ii. node 입력
iii. ‘>’ 프롬프트 출력 확인
iv. ‘console.log(‘hello node.js’);’ 입력
v. ‘hello node.js’ 출력 확인
vi. ‘.exit’ 입력으로 node.js 실행 종료
2. Cordova, Ionic 설치
A. 명령 프롬프트(cmd) 실행
B. ‘npm install -g cordova ionic’ 입력

7. 7 / 18
Ionic 실행
Sample Project 생성
1. 명령 프롬프트(cmd) 실행
2. project를 생성할 경로로 이동
3. ‘ionic start [프로젝트명] [템플릿명]’ 입력
* ‘sidemenu’ 템플릿이 적용된 project가 생성되는 명령으로 ‘blank’, ‘tabs’, ‘sidemenu’ 등의
템플릿을 설정하여 project를 생성할 수 있다.
4. 입력한 프로젝트명(‘myApp’)으로 ionic project가 생성된 것을 확인할 수 있다.
브라우저에서 App 실행
1. 명령 프롬프트(cmd) 실행
2. ionic project 경로로 이동
A. 모든 실행 명령은 프로젝트의 root 경로에서 실행을 해야한다. (예. C:myApp)
3. ‘ionic serve’ 입력

8. 8 / 18
4. 자동으로 웹 서버가 구동되어 설정된 port를 통해 브라우저에서 확인할 수 있다.
5. 이 상태에서 파일 수정 시 자동으로 ionic이 이를 체크하여 update를 해주기 때문에 사
용자가 따로 update 또는 refresh를 해줄 필요가 없다.
6. ‘http://localhost:[port]/ionic-lab’ 에 접속하면 iOS와 Android에서 출력되는 화면을 미리
보기 할 수 있다.

9. 9 / 18
7. ionic serve 상태에서 ‘quit’를 입력하여 종료 시킬 수 있다.
Android emulator에서 App 실행
1. Android sdk 설치 및 emulator 생성
2. 명령 프롬프트(cmd) 실행
3. ionic project 경로로 이동
4. ‘ionic platform add android’ 입력으로 Android platform 추가
5. ‘ionic build android’ 입력으로 Android platform 빌드

10. 10 / 18
6. ‘ionic emulate android’ 입력으로 Android emulator 실행
* 실행 중인 emulator가 있다면 해당 emulator에서 실행이 되고 실행 중인 emulator가
없다면 등록된 android emulator 목록에서 첫번째 emulator를 자동으로 실행 시킨 후
app을 실행시킨다.
* 해당 명령어 실행 시 build 후 emulator에 upload 하므로 매번 실행 전에 build 명령
을 실행할 필요는 없다.
Android Device에서 App 실행
1. PC에 Android Device 연결
A. Android Device 확인
B. 명령 프롬프트(cmd) 실행

11. 11 / 18
C. android sdk의 ‘adb’ 실행 파일이 있는 경로로 이동
(예. C:Users[사용자ID]AppDataLocalAndroidSdkplatform-tools)
D. ‘adb devices’ 를 입력하여 연결된 Android Device 확인
2. 명령 프롬프트(cmd) 실행
3. ionic project 경로로 이동
4. ‘ionic run android’ 입력으로 Android Device에 app deploy 및 실행
* PC에 Android Device가 연결되어 있지 않다면 Android emulator에서 자동 실행된다.
iOS simulator에서 App 실행
* xcode 등 iOS simulator를 구동할 환경이 있어야하므로 OS X 에서만 실행 가능하다.
1. xcode가 설치되어 있지 않다면 xcode 설치
2. 터미널 실행
3. ‘ios-sim‘ 패키지를 설치 하지 않았다면 설치
A. Cordova 프로젝트를 iOS simulator에서 실행하기 위한 패키지
B. ’npm install -g ios-sim’ 입력
4. ionic project 경로로 이동
5. ‘ionic platform add ios’ 입력으로 iOS platform 추가

12. 12 / 18
6. ‘ionic build ios’ 입력으로 iOS platform 빌드
7. ‘ionic emulate ios’ 입력으로 iOS simulator 실행
* 실행 중인 simulator가 있다면 해당 simulator에서 실행이 되고 실행 중인 simulator가
없다면 등록된 ios simulator 목록에서 첫번째 simulator를 자동으로 실행 시킨 후 app을
실행시킨다.
* 해당 명령어 실행 시 build 후 emulator에 upload 하므로 매번 실행 전에 build 명령
을 실행할 필요는 없다.
iOS Device에서 App 실행
1. 터미널 실행
2. ionic project 경로로 이동

13. 13 / 18
3. ‘ionic run ios’ 입력으로 iOS device(iPhone, iPad 등)에 app deploy 및 실행
* Mac PC 및 iOS Device가 없어 실제 테스트는 해보지 못함.
* PC에 iOS Device가 연결되어 있지 않다면 iOS simulator에서 자동 실행된다.
Ionic Device API 사용
기본적으로 Device API를 사용할 수는 없고 필요한 plugin을 추가하여 해당 Device API를 사용
할 수 있다.
geolocation API 사용을 예로 들어 설명을 하도록 한다.
1. 추가하고자 하는 plugin을 검색한다.
A. https://cordova.apache.org/plugins/
B. 공식 Cordova plugin 사이트로 현재 920 개의 plugin을 제공하고 있으며 지원
platform 및 설명이 잘 정리 되어있다.
C. 해당 항목을 click하여 상세 페이지에서 적용 방법 및 사용 예제를 확인한다.
2. 명령 프롬프트(cmd) 실행
3. ionic project 경로로 이동
4. ‘cordova plugin add [plugin 패키지명]’ 를 입력하여 plugin 추가
A. ‘cordova plugin add cordova-plugin-geolocation’ 입력

14. 14 / 18
B. 추가되어있는 platform 에 자동으로 plugin이 설치 되고 필요한 파일 및 권한 설정
등이 모두 적용된다.
5. ‘ionic plugin list’ 입력으로 추가된 plugin 확인
6. Javascript에서 Device API 사용
A. 현재 위치를 가지고 오는 geolocation API를 호출하는 예제
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + 'n' +
'Longitude: ' + position.coords.longitude + 'n' +
'Altitude: ' + position.coords.altitude + 'n' +
'Accuracy: ' + position.coords.accuracy + 'n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + 'n' +
'Heading: ' + position.coords.heading + 'n' +
'Speed: ' + position.coords.speed + 'n' +
'Timestamp: ' + position.timestamp + 'n');
};
function onError(error) {
alert('code: ' + error.code + 'n' +
'message: ' + error.message + 'n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:
true});

15. 15 / 18
* 사이트에서의 예제와 달리 ‘{enableHighAccuracy: true}’ option을 추가해주지 않으
면 android emulator, ios simulator에서 geolocation이 실행 되지 않는 오류가 있었다.
이와 같이 예상치않은 오류가 발생하면 device 로그를 확인 하여 해결해야 한다.
7. Emulator 확인
A. Android emulator 확인
* 위와 같이 위치 정보를 확인할 수 없다면 설정화면에서 GPS가 켜져있는지 확인하
고 ddms를 실행하여 좌표를 App에 직접 전송해주어야 한다.
B. iOS simulator 확인

16. 16 / 18
* 위와 같이 위치 정보를 확인할 수 없다면 설정화면에서 GPS가 켜져있는지 확인하
고 ‘Simulator > Debug > Location > ’ 메뉴에서 location 설정을 해주어야 한다.
Ionic Platform 네이티브 개발
Ionic은 간단하게 platform만 추가하면 자동으로 해당 platform에 맞게 build를 해준다. 기본적
인 사용에서는 이것으로도 충분하지만 네이티브 개발을 추가하고자 할 경우 build 된 파일을 따

17. 17 / 18
로 복사하여 IDE에서 로딩하여 개발을 진행하면된다. 그러나 그때부터는 크로스 플랫폼을 지원할
수 없게 되고 해당 platform은 분기되어 개발이 진행되어야 한다.
Android 프로젝트
1. ionic 프로젝트에서 android platform 추가 및 build
2. Android build 프로젝트 복사
 경로 : [Ionic App path]/platforms/android
 ionic에서 build를 하면 자동으로 생성되는 파일이기 때문에 따로 복사를 하지 않고
작업하면 파일이 임의로 수정될 수 있기에 다른 위치에 복사 후 진행해야한다.
3. Android Studio 실행
4. 복사한 Android 프로젝트 import
5. Android 네이티브 개발 진행

18. 18 / 18
iOS 프로젝트
1. ionic 프로젝트에서 ios platform 추가 및 build
2. iOS build 프로젝트 복사
 경로 : [Ionic App path]/platforms/ios
 ionic에서 build를 하면 자동으로 생성되는 파일이기 때문에 따로 복사를 하지 않고
작업하면 파일이 임의로 수정될 수 있기에 다른 위치에 복사 후 진행해야한다.
3. xcode 실행
4. 복사한 iOS 프로젝트 import
5. iOS 네이티브 개발 진행