Ionic Framework를 이용하여 하이브리드 앱 개발

ionic framework 개발환경 구축

1. 자바 JDK 설치 ( 1.7 버전 )

SDK 설치후 PATH 설정까지 하세요.

(참조 : http://h5bak.tistory.com/90)

2. Apache Ant 설치

안드로이드 나  Cordova 빌드시 필요합니다. 설치하고 PATH 설정까지 하세요.

(참조 : http://wonhada.com/?p=506)

3. 안드로이드 SDK  설치

http://developer.android.com/sdk/index.html   에서 윈도우용  설치하시고 아래 처럼 두개 폴더를  패스 설정하세요.

%Android SDK%\platform-tools;
%Android SDK%\tools;

(%안의 내용은 패스 변수 이므로 새로 생성해준다.)

고급 시스템 설정 > 환경변수

사용자 변수는 신경쓰지 말고

시스템변수에서 새로만들기를 눌러 Android SDK 를 추가 해준다.

경로 : C:\Users\(사용자)\AppData\Local\Android\sdk1

변수 이름에는 말그대로 변수 이름을

변수 값은 sdk(나는 실수로 2번깔아서 sdk1이 하나더 생겼다.)가 있는 경로로 설정해주어 확인을 누른다.

2개의 경로를 Path에 등록해야 하기때문에

시스템변수에서 Path를 찾아 아래와 같이 등록해준다.

값의 등록 구분은( ; )[세미콜론]으로 구분하여 준다.

cmd 창에서 android 명령어를 치면 다음과 같은 창이 나옵니다. 타겟 19, 21,22,24 버전 설치 (원하는 버전 설치)

4. node.js 설치

참조 URL

http://kcmschool.tistory.com/entry/nodejs-%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90%EC%84%9C-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0-%EB%B0%8F-%EC%82%AD%EC%A0%9C

5. PhoneGap과 Cordova, ionic을 npm으로 설치

npm install -g cordova

npm install -g phonegap

npm install -g ionic

6. ionic명령어로 프로젝트 생성(ionic start {프로젝트명})

ionic start sf-hybrid-demo

7. 생성된 디렉토리의 ionic.project 파일을 열어서 다음과 같이 수정한다.

1. name: 프로젝트 이름을 입력한다.

2. email: ionic 계정에 등록된 email을 입력한다.

3. app_id: 프로젝트의 유일한 id로 이후에 iOS난 Android에 UUID로 사용되는 아이디를 입력한다.

4. package_name: 이후에 android에 사용될 package 이름을 입력한다.

"name": "sf-hybrid-demo",
"email": "kcmschool@ctit.co.kr",
"app_id": "net.saltfactory.tutorial.ioinc.sfhybridemo",
"package_name": "net.saltfactory.tutorial.ioinc"

8. config.xml을 열어 아래와 같이 수정

<?xml version='1.0' encoding='utf-8'?>

<widget id="net.saltfactory.tutorial.ioinc.sfhybridemo" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

    <name>SFHybridDemo</name>

    <description>

        Ionic Framework를 이용한 하이브리드 앱 데모

    </description>

    <author email="kcmschool@ctit.co.kr" href="http://kcmschool.tistory.com/">

      하이브레인넷 부설연구소 모바일 서비스 연구지원

    </author>

    <content src="index.html" />

    <access origin="*" />

    <preference name="fullscreen" value="true" />

    <preference name="webviewbounce" value="false" />

    <preference name="UIWebViewBounce" value="false" />

    <preference name="DisallowOverscroll" value="true" />


    <!-- Don't store local date in an iCloud backup. Turn this to "cloud" to enable storage

         to be sent to iCloud. Note: enabling this could result in Apple rejecting your app.

    -->

    <preference name="BackupWebStorage" value="none" />


    <feature name="StatusBar">

      <param name="ios-package" value="CDVStatusBar" onload="true" />

    </feature>

</widget>

9. iOS와 android 플랫폼을 추가

(plaforms라는 디렉토리 밑에 android와 ios 디렉토리가 생성)

ionic platform add ios

ionic platform add android

10. ionic 빌드하기

ionic build ios or android

11. 프로잭트 실행 방법

ionic emulate ios or android      // 에뮬레이션을 통한 앱 실행 

ionic run ios or android  -device      // 기기를  통한 앱 실행

ionic serve     // 내장서버가 동작하면서 브라우저에서 실행
                    // 내장서버가 동작하면서 스마트폰에서 폰갭 앱 받아서 실행

ionic serve --lab    //  --lab붙히면 모바일화면하고 같아진다. 이거 써라~

dash의 내용을 수정하기 위해서 www/templates/tab-dash.html의 파일을 열어서 다음과 같이 수정한다.

<ion-view title="목록">  // "Dashboard" -> "목록" 으로 변경 

  <ion-content class="padding">

     ....

     ....

  </ion-content>

</ion-view>

HTML 파일을 수정하면 ionic serve는 변경된 파일을 감지하고 reloading를 실행한다. 그래서 브라우저에서 refresh 필요 없이 브라우저로 이동하면 다음과 같이 변경된 내용이 적용된 것을 확인할 수 있다. 웹브라우저에서는 네이티브기능은 확인할수없다.