'하이브리드앱'에 해당되는 글 1건

  1. 2015.02.01 하이브리드앱 ionicframework 설치에서 샘플실행
MobileApp/통합2015. 2. 1. 16:16

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.greenbot.com/article/2457986/how-to-enable-developer-options-on-your-android-phone-or-tablet.html

  - 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


Posted by 시니^^