ionicframework 설치
참고 공식 홈페이지
- http://ionicframework.com/getting-started/
1. node.js 설치 npm 필요
다운로드 설치 : http://nodejs.org/
2. npm 실행 확인
C:\Users>npm -v 1.4.28
※ 실행 안될 경우 시스템속성->환경변수->시스템변수->PATH 에 추가함
3. cordova 설치
C:\Users>npm install -g cordova C:\Users\admin\AppData\Roaming\npm\cordova -> C:\Users\admin\AppData\Roaming\npm\node_modules\cordova\bin\cordova cordova@4.2.0 C:\Users\admin\AppData\Roaming\npm\node_modules\cordova
4. ionic 설치
C:\Users>npm install -g ionic C:\Users\admin\AppData\Roaming\npm\ionic -> C:\Users\admin\AppData\Roaming\npm\node_modules\ionic\bin\ionic ionic@1.3.3 C:\Users\admin\AppData\Roaming\npm\node_modules\ionic
5. ionic 실행해보기
C:\Users>ionic _ _ (_) (_) _ ___ _ __ _ ___ | |/ _ \| '_ \| |/ __| | | (_) | | | | | (__ |_|\___/|_| |_|_|\___| CLI v1.3.3 Usage: ionic task args =======================
※ 실행 안될 경우 npm 환경 변수 PATH 설정
6. 샘플 템플릿 프로젝트 시작
C:\Users>ionic start myApp tabs Creating Ionic app in folder C:\Users\myApp based on tabs project Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip [=============================] 100% 0.0s Downloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip [=============================] 100% 0.0s Update config.xml Initializing cordova project Fetching plugin "org.apache.cordova.device" via plugin registry Fetching plugin "org.apache.cordova.console" via plugin registry Fetching plugin "com.ionic.keyboard" via plugin registry
7. 디렉토리 구조확인 www가 메인홈디렉토리, 해당안에 html / css /javascript 작업하면됨
C:\Users>cd myApp C:\Users\myApp>dir 2015-02-01 오후 03:37 <DIR> . 2015-02-01 오후 03:37 <DIR> .. 2015-02-01 오후 03:37 29 .bowerrc 2015-02-01 오후 03:37 138 .gitignore 2015-02-01 오후 03:37 120 bower.json 2015-02-01 오후 03:37 798 config.xml 2015-02-01 오후 03:37 1,353 gulpfile.js 2015-02-01 오후 03:37 <DIR> hooks 2015-02-01 오후 03:37 37 ionic.project 2015-02-01 오후 03:37 354 package.json 2015-02-01 오후 03:37 <DIR> plugins 2015-02-01 오후 03:37 <DIR> scss 2015-02-01 오후 03:37 <DIR> www
8. 안드로이드 플랫폼 추가하기 확인하기
C:\Users\myApp>ionic platform add android Running command: D:\nodejs\node.exe C:\Users\myApp\hooks\before_platform_add\ini t_directories.js C:\Users\myApp Creating android project... C:\Users\myApp>dir 2015-02-01 오후 03:42 <DIR> . 2015-02-01 오후 03:42 <DIR> .. 2015-02-01 오후 03:37 29 .bowerrc 2015-02-01 오후 03:37 138 .gitignore 2015-02-01 오후 03:37 120 bower.json 2015-02-01 오후 03:37 798 config.xml 2015-02-01 오후 03:37 1,353 gulpfile.js 2015-02-01 오후 03:42 <DIR> hooks 2015-02-01 오후 03:37 37 ionic.project 2015-02-01 오후 03:37 354 package.json 2015-02-01 오후 03:42 <DIR> platforms 2015-02-01 오후 03:42 <DIR> plugins 2015-02-01 오후 03:37 <DIR> scss 2015-02-01 오후 03:37 <DIR> www C:\Users\myApp>cd platforms C:\Users\myApp\platforms>dir 2015-02-01 오후 03:42 <DIR> . 2015-02-01 오후 03:42 <DIR> .. 2015-02-01 오후 03:42 <DIR> android
9. 안드로이드 빌드 하기
※ CordovaApp-debug.apk 확인
C:\Users\myApp>ionic build android BUILD SUCCESSFUL Total time: 43 seconds Built the following apk(s): C:\Users\myApp\platforms\android\ant-build\CordovaApp-debug.apk C:\Users\myApp>cd platforms\android\ant-build\ C:\Users\myApp\platforms\android\ant-build>dir 2015-02-01 오후 03:47 <DIR> . 2015-02-01 오후 03:47 <DIR> .. 2015-02-01 오후 03:47 1,266 AndroidManifest.cordova.xml 2015-02-01 오후 03:47 124 AndroidManifest.xml.d 2015-02-01 오후 03:47 189 build.prop 2015-02-01 오후 03:47 <DIR> classes 2015-02-01 오후 03:47 404,956 classes.dex 2015-02-01 오후 03:47 1,327 classes.dex.d 2015-02-01 오후 03:47 3,404,475 CordovaApp-debug-unaligned.apk 2015-02-01 오후 03:47 267 CordovaApp-debug-unaligned.apk.d 2015-02-01 오후 03:47 3,404,491 CordovaApp-debug.apk 2015-02-01 오후 03:47 3,246,481 CordovaApp.ap_ 2015-02-01 오후 03:47 6,287 CordovaApp.ap_.d 2015-02-01 오후 03:47 <DIR> dexedLibs 2015-02-01 오후 03:47 115 proguard.txt 2015-02-01 오후 03:47 195 R.txt 2015-02-01 오후 03:47 <DIR> res
10. 안드로이드 앱 실행해보기
1) 에뮬레이터로 실행하기
C:\Users\myApp>ionic emulate android
※ 안드로이드 SDK 설치되어 있어야하며 AVD(Android Virtual Device) Manager 로 설정 되어있어야함
- http://developer.android.com/sdk/installing/index.html?pkg=tools
2) USB 연결되어 있는 상태에서 스마트폰 개발자모드에서 바로 실행
C:\Users\myApp>ionic run android
※ 개발자모드 enable
설정 -> 스마트폰정보(태블릿정보) -> 빌드번호 여러번 클릭하면됨 메시지뜸(아래 링크참고)
- http://www.androidcentral.com/how-enable-developer-settings-android-42
※ Google USB Driver selected 설치 되어있어야 하며 추가로 장치관리자에서 연결된 Android 기계 Driver 업데이트 해줘야됨
- http://delphi.org/2014/01/custom-android-adb-usb/
3) Apk파일 안드로이드에 넣어서 apk Install 로 설치해도됨
11. 웹소스 수정이로 인한 매번 빌드해서 디버깅하는 시간 단축하기 위해서 가상서버 실행
※ 브라우져로 http://localhost:8100 에서 확인가능
C:\Users\myApp>ionic serve Running dev server: http://localhost:8100 Running live reload server: http://localhost:35729 Watching : [ 'www/**/*', '!www/lib/**/*' ] Ionic server commands, enter: restart or r to restart the client app from the root goto or g and a url to have the app navigate to the given url consolelogs or c to enable/disable console log output serverlogs or s to enable/disable server log output quit or q to shutdown the server and exit
