https://happygrammer.tistory.com/47


1. hybrid app

hybrid app의 장점은 iOS와 Android 앱을 동시에 개발을 하는 것에 있다.

2. ionic framework

ionic 공식 홈페이지에서는 다음과 같이 소개되어 있다.

The beautiful, open source front-end framework for developing hybrid mobile apps with HTML5

장점

  • 모바일앱을 위한 최적화 UI제공
  • MVC 개발 환경제공
  • native 자원을 사용할 수 있는 plugin 제공
  • cross platform 빌드 제공
  • 활발한 개발자 포럼

설치

먼저 node.js를 설치한다.

https://nodejs.org/ko/

최신버전인 v5.9.0 을 다운로드 받고 설치를 진행한다. 앞으로 진행할 프로젝트에 대한 폴더를 지정한다.

d:\workspace_ionic

그리고, shift + 오른쪽 마우스를 누르고, 여기서 명령창 열기(W)를 선택한다.

다음 명령어로 cordova와 phonegap을 설치한다.

npm install -g cordova phonegap

마지막으로, ionic을 설치한다.

npm install -g ionic

-g 라고 하는 global option을 통해 ionic 명령어를 실행할 수 있다. 이제 ionic을 실행해보자

ionic



ionic 명령어

ionic 명령어를 학습해 보도록한다.

다음 명령어는 tutorial이라는 새로운 프로젝트를 생성하는 명령어이다.

ionic start tutorial

ionic start는 git에서 sample 소스가 다운로드 되어 풀리면서, 앱 개발을 위한 기본 프로젝트 환경을 구성해준다.

특히 ionic은 bower를 이용하여 웹 라이브러리를 다운 받을 수 있도록 지원하고 있다.

ionic은 cross platfor build 지원을 위해 cordova를 사용한다.

프로젝트 정보설정

ionic.project 파일을 열어 프로젝트 정보 설정을 해준다. 초기는 다음과 같이 되어 있다.

{
  "name": "tutorial",
  "app_id": ""
}

다음과 같이 설정할 수 있다.

{
  "name": "tutorial",
  "email": "nlfactory@naver.com"
  "app_id": "com.tistory.happygrammer.ionic",
  "package_name":"com.tistory.happygrammer.ionic"
}

앱정보명시

앱 정보를 명시하기 위해서 config.xml 파일을 오픈하여 정보를 수정한다.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.tutorial114654" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>tutorial</name>
  <description>
      An Ionic Framework and Cordova project.
    </description>
  <author email="you@example.com" href="http://example.com.com/">
      Happygrammer
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
</widget>

프로젝트 생성후 iOS와 Android 앱을 개발하려고 한다.

cordova는 프로젝트 생성이후 target 플랫폼을 추가하는 명령어를 이용해 플랫폼을 추가한다.

ionic도 cordova를 기본으로 만들어졌으므로 cordova와 동일한 target 플랫폼을 추가하는 명령어를 그대로 사용하고 있다.

ios와 android 플랫폼을 추가한다. 이때 프로젝트 파일로 이동한후 진행한다.

cd d:\workspace_ionic\tutorial

ionic platform add ios

ionic platform add android

결과적으로 프로젝트 밑에 platforms라는 디렉터리에 android, ios 디렉터리가 생성된 것을 확인할 수 있다.


ionic과 cordova간의 관계

ionic은 cordova를 이용해서 만들어진 프레임워크이다. 따라서 cordova 명령어를 동시에 사용할 수 있다.

예를들어 현재 프로젝트의 platform을 사용하는 명령어는 다음과 같다.

cordova platform list

iOS Build

다음 명령어로 실행할 수 있다.

ionic build ios

에러 없이 성공하면 BUILD SUCCEEDED가 출력된다.

windows에서는 built 할 수 없어서 "xcodebuild was not found" 라는 메시지가 나타난다.

android Build

windows를 이용하는 개발자는 다음과 같이 명령어를 입력하여 build를 테스트한다.

ionic build android

이때 'ANDROID_HOME' 설정이 되어 있어야한다.

그렇지 않으면 다음과 같은 메시지를 만나게 된다.

Ionic android build Error - Failed to find 'ANDROID_HOME' environment variable

sdk를 다운로드 받고 설치를 진행한다.

http://developer.android.com/sdk/index.html#Other

환경변수를 설정해준다. 예는 다음과 같다.

환경변수 이름 : ANDROID_HOME
경로 : C:\Program Files (x86)\Android\android-sdk\

그리고 cmd에서 다시 실행한다.

ionic build android

결과적으로 다음 메시지가 나타나면 성공적으로 BUILD 된 것이다.

BUILD SUCCESSFUL

빌드를 마치면 에뮬레이터로 실행할 수 있다.

ionic emulate android

실행해보자.

만약 "No emulator images (avds) found." 라는 메시지가 나타난다면, 아래 디렉터리에 접근하여

C:\Program Files (x86)\Android\android-sdk\tools

아래 명령어를 실행시킨다

android avd

그리고 나서, 'create'를 선택후 AVD를 하나 만든다. 그리고 다시 시도한다.

빌드를 실행후

ionic build android

그리고 에뮬레이터를 실행한다.

ionic emulate android

그리고 만약 testing을 실 기계에서 하려면 다음과 같이 실행한다.

ionic run android

그러면 스마트폰에 'Welcome to Ionic' 이라는 메시지가 나타난다.

만약 웹브라우저에서 테스트하길 원한다면 아래 명령어를 실행한다.

ionic serve

만약 "Utils.fail is not a function" 오류가 나타난다면, 다시 ionic.project를 열어보자. 문제점이 보이는가?

{
  "name": "tutorial",
  "email": "nlfactory@naver.com"
  "app_id": "com.tistory.happygrammer.ionic",
  "package_name":"com.tistory.happygrammer.ionic"
}

',' 컴마가 빠져있음을 확인할 수 있다. 컴마를 넣어보자.

{
  "name": "tutorial",
  "email": "nlfactory@naver.com",
  "app_id": "com.tistory.happygrammer.ionic",
  "package_name":"com.tistory.happygrammer.ionic"
}

그리고 다시 실행해보면

Multiple addresses available
please select which address to use by entering its number from the list below:
192.168.0.12 (이더넷)
192.168.140.1
192.168.186.1
Address Selection : 1

1을 선택해보면 브라우저가 열리면서 아래 주소로 접속해 있음을 확인할 수 있다.

http://192.168.0.12:8100/#/tab/dash

편리하게도 서버는 파일내용 변화를 감지하면 아래 메시지를 나타낸다.

HTML Change : D:\...\tab-dash.html

그후, 브라우저를 자동으로 갱신해주어서 개발과 디버깅에 용의하도록 해 준다.


이 게시물을...