Ionic project guide

Ionic Framework Project Guide

ver 1.0.0

FashionGo Korea

1 / 17

Revision HistoryVersion Description Author Date1.0.0 초안 작성 이덕우 2016.01.21

2 / 17

ContentsIonic Framework Project Guide...........................................................................................1Revision 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

3 / 17

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 로 이름이 변경되었다.

지원 platform : amazon-fireos, android, blackberry10, browser, firefoxos, webos, windows, windows8, wp8, ios, osx

AngularJS

SPA(Single Page Application) 형태의 웹 어플리케이션을 빠르게 개발할 수 있도록 도와주는 MVC 웹 프레임워크.

특징 : MVC 패턴, 의존성 주입(Dependency Injection), 양뱡향 데이터 바인딩 등.

하이브리드 앱

4 / 17

하이브리드 앱은 HTML5, CSS, JavaScript 와 같은 웹 기술로 웹 애플리케이션을 만들고, 이를 WebView 라는 내장 브라우저를 통해 네이티브 컨테이너로 감싼 네이티브 애플리케이션을 말한다.

Javascript 에서 카메라, 가속도계, 위치정보, 연락처 같은 네이티브 기능에 접근할 수 있다.

장점

Web 개발자가 간단한 학습을 통하여 App 개발자가 될 수 있다.

크로스 플랫폼을 지원하여 개발에 필요한 비용과 시간을 줄여준다.

단점

네이티브 앱과 같은 성능을 발휘하지 못한다. 그렇지만 점점 발전하고 있다.

Ionic 설치

1. Node.js 설치

A. 다운로드

i. https://nodejs.org

ii. 현재 버전 5.4.1 이 stable 최신 버전이나 버전 5 는 ionic 이 동작하지 않는다고 나와있으나 사용해본 결과 특별한 문제는 없었다.

B. installer 설치

C. 설치 확인

i. 명령 프롬프트(cmd) 실행

5 / 17

https://nodejs.org/

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’ 입력

Ionic 실행

Sample Project 생성

1. 명령 프롬프트(cmd) 실행

2. project 를 생성할 경로로 이동

3. ‘ionic start [프로젝트명] [템플릿명]’ 입력

* ‘sidemenu’ 템플릿이 적용된 project 가 생성되는 명령으로 ‘blank’, ‘tabs’, ‘sidemenu’ 등의 템플릿을 설정하여 project 를 생성할 수 있다.

4. 입력한 프로젝트명(‘myApp’)으로 ionic project 가 생성된 것을 확인할 수 있다.

6 / 17

브라우저에서 App 실행


2. ionic project 경로로 이동

A. 모든 실행 명령은 프로젝트의 root 경로에서 실행을 해야한다. (예. C:\myApp)

3. ‘ionic serve’ 입력

4. 자동으로 웹 서버가 구동되어 설정된 port 를 통해 브라우저에서 확인할 수 있다.

7 / 17

5. 이 상태에서 파일 수정 시 자동으로 ionic 이 이를 체크하여 update 를 해주기 때문에 사용자가 따로 update 또는 refresh 를 해줄 필요가 없다.

6. ‘http://localhost:[port]/ionic-lab’ 에 접속하면 iOS 와 Android 에서 출력되는 화면을 미리보기 할 수 있다.

7. ionic serve 상태에서 ‘quit’를 입력하여 종료 시킬 수 있다.

Android emulator 에서 App 실행

1. Android sdk 설치 및 emulator 생성



4. ‘ionic platform add android’ 입력으로 Android platform 추가

8 / 17

5. ‘ionic build android’ 입력으로 Android platform 빌드

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) 실행

C. android sdk 의 ‘adb’ 실행 파일이 있는 경로로 이동

9 / 17

(예. C:\Users\[사용자 ID]\AppData\Local\Android\Sdk\platform-tools)

D. ‘adb devices’ 를 입력하여 연결된 Android Device 확인



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’ 입력


5. ‘ionic platform add ios’ 입력으로 iOS platform 추가

6. ‘ionic build ios’ 입력으로 iOS platform 빌드

7. ‘ionic emulate ios’ 입력으로 iOS simulator 실행

10 / 17

* 실행 중인 simulator 가 있다면 해당 simulator 에서 실행이 되고 실행 중인 simulator 가 없다면 등록된 ios simulator 목록에서 첫번째 simulator 를 자동으로 실행 시킨 후 app 을 실행시킨다.

* 해당 명령어 실행 시 build 후 emulator 에 upload 하므로 매번 실행 전에 build 명령을 실행할 필요는 없다.

iOS Device 에서 App 실행

1. 터미널 실행


3. ‘ionic run ios’ 입력으로 iOS device(iPhone, iPad 등)에 app deploy 및 실행

* Mac PC 및 iOS Device 가 없어 실제 테스트는 해보지 못함.

* PC 에 iOS Device 가 연결되어 있지 않다면 iOS simulator 에서 자동 실행된다.

11 / 17

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 하여 상세 페이지에서 적용 방법 및 사용 예제를 확인한다.



4. ‘cordova plugin add [plugin 패키지명]’ 를 입력하여 plugin 추가

A. ‘cordova plugin add cordova-plugin-geolocation’ 입력

B. 추가되어있는 platform 에 자동으로 plugin 이 설치 되고 필요한 파일 및 권한 설정등이 모두 적용된다.

5. ‘ionic plugin list’ 입력으로 추가된 plugin 확인

12 / 17

https://cordova.apache.org/plugins/

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});

* 사이트에서의 예제와 달리 ‘{enableHighAccuracy: true}’ option 을 추가해주지 않으면 android emulator, ios simulator 에서 geolocation 이 실행 되지 않는 오류가 있었다. 이와 같이 예상치않은 오류가 발생하면 device 로그를 확인 하여 해결해야 한다.

7. Emulator 확인

A. Android emulator 확인

13 / 17

* 위와 같이 위치 정보를 확인할 수 없다면 설정화면에서 GPS 가 켜져있는지 확인하고 ddms 를 실행하여 좌표를 App 에 직접 전송해주어야 한다.

B. iOS simulator 확인

14 / 17

* 위와 같이 위치 정보를 확인할 수 없다면 설정화면에서 GPS 가 켜져있는지 확인하고 ‘Simulator > Debug > Location > ’ 메뉴에서 location 설정을 해주어야 한다.

Ionic Platform 네이티브 개발

Ionic 은 간단하게 platform 만 추가하면 자동으로 해당 platform 에 맞게 build 를 해준다. 기본적인 사용에서는 이것으로도 충분하지만 네이티브 개발을 추가하고자 할 경우 build 된 파일을 따로 복사하여 IDE 에서 로딩하여 개발을 진행하면된다. 그러나 그때부터는 크로스 플랫폼을 지원할 수 없게 되고 해당 platform 은 분기되어 개발이 진행되어야 한다.

15 / 17

Android 프로젝트

1. ionic 프로젝트에서 android platform 추가 및 build

2. Android build 프로젝트 복사

경로 : [Ionic App path]/platforms/android

ionic 에서 build 를 하면 자동으로 생성되는 파일이기 때문에 따로 복사를 하지 않고 작업하면 파일이 임의로 수정될 수 있기에 다른 위치에 복사 후 진행해야한다.

3. Android Studio 실행

4. 복사한 Android 프로젝트 import

5. Android 네이티브 개발 진행

iOS 프로젝트

1. ionic 프로젝트에서 ios platform 추가 및 build

2. iOS build 프로젝트 복사

경로 : [Ionic App path]/platforms/ios

ionic 에서 build 를 하면 자동으로 생성되는 파일이기 때문에 따로 복사를 하지 않고 작업하면 파일이 임의로 수정될 수 있기에 다른 위치에 복사 후 진행해야한다.

3. xcode 실행

16 / 17

4. 복사한 iOS 프로젝트 import

5. iOS 네이티브 개발 진행

17 / 17

Technology

Ionic project guide