Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1 / 18
Ionic Framework Project Guide
ver 1.0.0
FashionGo Korea
2 / 18
Revision History
Version Description Author Date
1.0.0 초안 작성 이덕우 2016.01.21
3 / 18
Contents
Ionic Framework Project Guide................................................................................
4 / 18
Ionic 이란?
 정의
Cordova + AngularJS + Mobile UI Component 를 합친 모바일 Web App (Hybrid App)
Framework.
 장점
 쉬운 사용으로 Ap...
5 / 18
 지원 platform : amazon-fireos, android, blackberry10, browser, firefoxos, webos,
windows, windows8, wp8, ios, osx
...
6 / 18
B. installer 설치
C. 설치 확인
i. 명령 프롬프트(cmd) 실행
ii. node 입력
iii. ‘>’ 프롬프트 출력 확인
iv. ‘console.log(‘hello node.js’);’ 입력
...
7 / 18
Ionic 실행
Sample Project 생성
1. 명령 프롬프트(cmd) 실행
2. project를 생성할 경로로 이동
3. ‘ionic start [프로젝트명] [템플릿명]’ 입력
* ‘sidemenu...
8 / 18
4. 자동으로 웹 서버가 구동되어 설정된 port를 통해 브라우저에서 확인할 수 있다.
5. 이 상태에서 파일 수정 시 자동으로 ionic이 이를 체크하여 update를 해주기 때문에 사
용자가 따로 upd...
9 / 18
7. ionic serve 상태에서 ‘quit’를 입력하여 종료 시킬 수 있다.
Android emulator에서 App 실행
1. Android sdk 설치 및 emulator 생성
2. 명령 프롬프트(c...
10 / 18
6. ‘ionic emulate android’ 입력으로 Android emulator 실행
* 실행 중인 emulator가 있다면 해당 emulator에서 실행이 되고 실행 중인 emulator가
없다면...
11 / 18
C. android sdk의 ‘adb’ 실행 파일이 있는 경로로 이동
(예. C:Users[사용자ID]AppDataLocalAndroidSdkplatform-tools)
D. ‘adb devices’ 를 ...
12 / 18
6. ‘ionic build ios’ 입력으로 iOS platform 빌드
7. ‘ionic emulate ios’ 입력으로 iOS simulator 실행
* 실행 중인 simulator가 있다면 해당 s...
13 / 18
3. ‘ionic run ios’ 입력으로 iOS device(iPhone, iPad 등)에 app deploy 및 실행
* Mac PC 및 iOS Device가 없어 실제 테스트는 해보지 못함.
* PC...
14 / 18
B. 추가되어있는 platform 에 자동으로 plugin이 설치 되고 필요한 파일 및 권한 설정
등이 모두 적용된다.
5. ‘ionic plugin list’ 입력으로 추가된 plugin 확인
6. Ja...
15 / 18
* 사이트에서의 예제와 달리 ‘{enableHighAccuracy: true}’ option을 추가해주지 않으
면 android emulator, ios simulator에서 geolocation이 실행 ...
16 / 18
* 위와 같이 위치 정보를 확인할 수 없다면 설정화면에서 GPS가 켜져있는지 확인하
고 ‘Simulator > Debug > Location > ’ 메뉴에서 location 설정을 해주어야 한다.
Ioni...
17 / 18
로 복사하여 IDE에서 로딩하여 개발을 진행하면된다. 그러나 그때부터는 크로스 플랫폼을 지원할
수 없게 되고 해당 platform은 분기되어 개발이 진행되어야 한다.
Android 프로젝트
1. ionic...
18 / 18
iOS 프로젝트
1. ionic 프로젝트에서 ios platform 추가 및 build
2. iOS build 프로젝트 복사
 경로 : [Ionic App path]/platforms/ios
 ioni...
Upcoming SlideShare
Loading in …5
×

Ionic project guide

784 views

Published on

Ionic project guide by deokwoolee

Published in: Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/cmOZf ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Ionic project guide

  1. 1. 1 / 18 Ionic Framework Project Guide ver 1.0.0 FashionGo Korea
  2. 2. 2 / 18 Revision History Version Description Author Date 1.0.0 초안 작성 이덕우 2016.01.21
  3. 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. 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. 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. 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. 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. 8 / 18 4. 자동으로 웹 서버가 구동되어 설정된 port를 통해 브라우저에서 확인할 수 있다. 5. 이 상태에서 파일 수정 시 자동으로 ionic이 이를 체크하여 update를 해주기 때문에 사 용자가 따로 update 또는 refresh를 해줄 필요가 없다. 6. ‘http://localhost:[port]/ionic-lab’ 에 접속하면 iOS와 Android에서 출력되는 화면을 미리 보기 할 수 있다.
  9. 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. 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. 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. 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. 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. 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. 15 / 18 * 사이트에서의 예제와 달리 ‘{enableHighAccuracy: true}’ option을 추가해주지 않으 면 android emulator, ios simulator에서 geolocation이 실행 되지 않는 오류가 있었다. 이와 같이 예상치않은 오류가 발생하면 device 로그를 확인 하여 해결해야 한다. 7. Emulator 확인 A. Android emulator 확인 * 위와 같이 위치 정보를 확인할 수 없다면 설정화면에서 GPS가 켜져있는지 확인하 고 ddms를 실행하여 좌표를 App에 직접 전송해주어야 한다. B. iOS simulator 확인
  16. 16. 16 / 18 * 위와 같이 위치 정보를 확인할 수 없다면 설정화면에서 GPS가 켜져있는지 확인하 고 ‘Simulator > Debug > Location > ’ 메뉴에서 location 설정을 해주어야 한다. Ionic Platform 네이티브 개발 Ionic은 간단하게 platform만 추가하면 자동으로 해당 platform에 맞게 build를 해준다. 기본적 인 사용에서는 이것으로도 충분하지만 네이티브 개발을 추가하고자 할 경우 build 된 파일을 따
  17. 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 / 18 iOS 프로젝트 1. ionic 프로젝트에서 ios platform 추가 및 build 2. iOS build 프로젝트 복사  경로 : [Ionic App path]/platforms/ios  ionic에서 build를 하면 자동으로 생성되는 파일이기 때문에 따로 복사를 하지 않고 작업하면 파일이 임의로 수정될 수 있기에 다른 위치에 복사 후 진행해야한다. 3. xcode 실행 4. 복사한 iOS 프로젝트 import 5. iOS 네이티브 개발 진행

×