Ionic Framework

하이브리드앱을 만들기 위해서 사용되는 프레임워크 중하나로 검색어상 현대차에 밀린다.

 

Cordova 환경과 AngularJS 기반으로 웹 애플리케이션을 이용한 프레임워크이다. 

iOS와 Android 환경을 둘 다 동시에 빌드할 수 있다는 장점이 있지만 iOS의 경우는 Mac환경에서만 가능하다. 

결국 맥을 사야한다.

 

 

프로젝트 환경 설정

 

Node JS 설치,

jdk 설치,

iOS 빌드 및 시뮬레이션을 위한 Xcode 설치, 

Android 빌드 및 시뮬레이션을 위한 Android Studio 및 Android SDK 설치,

Gradle 설치 gradle을 Android와 같은 경로에 설치합니다. Mac의 경우 OS/USER/사용자이름/Library

JAVA, Android, Gradle 환경변수 설정

공식문서

환경변수

 

-SDK를 $USER_HOME, $HOME의 기본위치대신 Android\sdk\에 설치한 경우

 

ANDROID_SDK_ROOT 

 

- SDK 설치 디렉터리의 경로를 설정합니다. 설정된 값은 일반적으로 변경되지 않으며, 동일한 시스템의 여러 사용자가 공유할 수 있습니다. SDK 설치 디렉터리도 가리키는 ANDROID_HOME은 지원 중단됩니다.

계속 사용하는 경우 다음 규칙이 적용됩니다.

• ANDROID_HOME이 정의되어 있고 유효한 SDK 설치가 포함되어 있으면 그 값이 ANDROID_SDK_ROOT의 값 대신 사용됩니다.
• ANDROID_HOME이 정의되어 있지 않으면 ANDROID_SDK_ROOT의 값이 사용됩니다.
• ANDROID_HOME이 정의되어 있지만 존재하지 않거나 유효한 SDK 설치를 포함하지 않으면 ANDROID_SDK_ROOT의 값이 대신 사용됩니다.

 

Android Studio 구성 환경 변수

- 구성 파일 및 JDK의 위치를 맞춤설정하는 설정이 포함되어 있습니다. 시작할 때 안드로이드 스튜디오는 이러한 변수의 설정을 확인합니다.

STUDIO_VM_OPTIONS	studio.vmoptions 파일의 위치를 설정합니다. 이 파일에는 자바 핫스팟 가상 머신의 성능 특성에 영향을 주는 설정이 포함되어 있습니다. Android 스튜디오 내에서도 이 파일에 액세스할 수 있습니다. VM 옵션 맞춤설정을 참조하세요.
STUDIO_PROPERTIES	idea.properties 파일의 위치를 설정합니다. 이 파일에서는 사용자가 설치한 플러그인 경로, IDE가 지원하는 최대 파일 크기와 같은 Android 스튜디오 IDE 속성을 맞춤설정할 수 있습니다. IDE 속성 맞춤설정을 참조하세요.
STUDIO_JDK	Android 스튜디오를 실행할 JDK의 위치를 설정합니다. IDE를 실행하면 STUDIO_JDK, JDK_HOME, JAVA_HOME 환경 변수를 순서대로 점검합니다.
STUDIO_GRADLE_JDK	Android 스튜디오가 Gradle 데몬을 시작하기 위해 사용하는 JDK의 위치를 설정합니다. IDE를 실행하면 먼저 STUDIO_GRADLE_JDK를 확인합니다. STUDIO_GRADLE_JDK이 정의되어 있지 않으면 IDE는 프로젝트 구조 대화상자에 설정된 값을 사용합니다.

 

에뮬레이터 환경 변수

- 기본적으로 에뮬레이터는 구성파일을 $HOME\.android\에 저장하며, AVD 데이터를 $HOME\.android\avd\에 저장합니다. emulator -avd <avd_name> 명령어는 avd 디렉터리에서 $ANDROID_AVD_HOME, $ANDROID_SDK_HOME\.android\avd 및 $HOME\.android\avd\의 값을 순서대로 검색합니다.

 

ANDROID_EMULATOR_HOME	사용자별 에뮬레이터 구성 디렉터리의 경로를 설정합니다. 기본 위치는 $ANDROID_SDK_HOME/.android/입니다.
ANDROID_AVD_HOME	모든 AVD 관련 파일(대부분 매우 큰 디스크 이미지로 구성됨)이 포함된 디렉터리의 경로를 설정합니다. 기본 위치는 $ANDROID_EMULATOR_HOME/avd/입니다. 기본 위치의 디스크 공간이 부족하면 새 위치를 지정하는 것이 좋습니다.
Android 에뮬레이터는 시작 시 다음 환경 변수를 쿼리합니다.
ANDROID_LOG_TAGS	ANDROID_LOG_TAGS을 참조하세요.
HTTP_PROXY	글로벌 HTTP 프록시에 관한 HTTP/HTTPS 프록시(호스트 이름 및 포트) 설정을 포함합니다. 호스트와 포트 사이에 콜론(:) 구분 기호를 사용합니다. 예: set HTTP_PROXY=myserver:1981.
ANDROID_VERBOSE	ANDROID_VERBOSE을 참조하세요.
ANDROID_SDK_ROOT	ANDROID_SDK_ROOT을 참조하세요.
ANDROID_EMULATOR_USE_SYSTEM_LIBS	0(기본값) 또는 1의 값을 포함합니다. 값 1은 에뮬레이터와 함께 제공되는 파일 대신 시스템의 libstdc++.so 파일을 사용함을 의미합니다. 시스템 라이브러리 문제로 인해 Linux 시스템에서 에뮬레이터가 시작되지 않는 경우에만 이 환경 변수를 설정하세요. 예를 들어 일부 Linux Radeon GL 드라이버 라이브러리에는 최신 libstdc++.so 파일이 필요합니다.참고: 이 환경 변수를 1로 설정한다고 해서 에뮬레이터 실행이 보장되는 것은 아닙니다. 이 방법은 극소수 Linux 사용자에게 영향을 주는 시스템 라이브러리 문제에 관한 임시 해결책입니다.

Ionic 설치

 npm install -g cordova ionic

 

설치 후 각 버전 확인 

 

ionic Framework는 프로젝트를 생성하고 난 후 Platform을 추가하고 Build를 하는 과정으로 진행되며 Windows, Mac 둘 다 진행방법은 동일하다.

 

프로젝트 생성

ionic start {app_name} {template option [tabs, sidemenu, blank...]}

app_name으로 프로젝트가 생성되며, 템플릿 옵션을 주어 프로젝트를 생성할 수 있으며 빈프로젝트로 진행하기 위해선 blank옵션을 사용합니다.

 

Platform 생성 

ionic cordova platform add android
ionic cordova platform add ios

 * 프로젝트 폴더에서 플랫폼을 생성할 것

 

Platform 제거

 - 앱 버전 업데이트 시 platform 삭제 후 재 진행

ionic cordova platform remove android
ionic cordova platform remove ios

 

빌드

ionic cordova build android --prod --release
ionic cordova build ios --prod