Ionic 3 개발 환경 구성

개발하기에 앞서

One code base. running everywhere

ionic이 추구하는 목표가 이 한줄에 담겨있다. ionic은 네이티브 앱 또는 프로그래시브 웹앱을 구축하기 위한 앱 컴포넌트를 제공하는 오픈소스 프로젝트이다. 또한 단순히 브라우저에서 동작하는 웹 기반 프로젝트를 앱으로 포팅하는 것뿐만 아니라 모바일 디바이스를 제어하기 위한 네이티브 플러그인이 있어 블루투스, 지문인식, 카메라 등의 기능을 조작할 수도 있다. 하나의 웹 기반 코드베이스로 여러 모바일 플렛폼에서 동작이 가능하도록 하는 것이다.

ionic을 통해 간단한 다이어리 앱 v1.0을 구현하고 구글 플레이스토어와 애플 앱스토어에 등록하는 것이 이번 개발의 목표다. 앱을 구현하면서 ionic 개발의 한 사이클을 경험해보고 나아가 버전업을 통해 좀 더 그럴듯한 앱으로 발전시켜 보고자 한다.

환경 구성

ionic

ionic 버전 3이 릴리즈되었지만 타 프레임워크와 버전호환성을 맞추기 위해 ionic 버전 2로 설치하기로 한다. ionic은 아파치의 모바일 개발 프레임워크인 cordova를 이용한다. 웹 기반 프로젝트를 네이티브 앱으로 포팅할 수 있게 하고 디바이스에 종속적인 기능을 제어할 수 있는 플러그인을 제공해준다. ionic v.2.2.1과 cordova를 설치한다.

npm install -g ionic@2.2.1 cordova

ionic이 설치가 되었으면 ionic을 통해 프로젝트 코드 템플릿을 가져온다. ionic은 ionic wizard를 통해 프로젝트 구성을 설정한다.

ionic start --v2 [project name]

프로젝트 구성을 마치면 미리 작성된 템플릿 코드의 transfile, rint, build 등의 과정을 거쳐 최종적으로 localhost에서 각 모바일 플랫폼 별로 확인해볼 수 있다. (lab option)

ionic serve --lab

Android

cordova를 통해 android 빌드 및 포팅을 위해서는 기본적으로 android 개발 환경 구성을 맞춰줘야 한다. JDK와 Android Studio 및 Android SDK가 필요하다. android는 6.0 (marshmallow) api로 구성하였다. 설치를 마치면 java와 android의 환경변수 설정을 한다.

export ANDROID_HOME=/Users/[User]/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools
export JAVA_HOME=$(/usr/libexec/java_home)

추가적으로 Android Studio에서 SDK와 AVD(Android Virtual Device) 설정을 해야 에뮬레이터를 띄워 확인해볼 수 있다.

IOS

IOS 기반 앱을 구축하기 위해 역시 추가적인 구성이 필요하다. 기본적으로 ios 기반 앱 개발은 OSX 운영체제에서만 가능하다. ios 프로그램을 빌드하기 위한 Xcode(v 6.0 이상)과 OSX(v 10.9이상), IOS 8 포함 SDK가 필요하다. cordova를 통해 빌드하고 시뮬레이터로 확인하려면 다음 라이브러리가 추가로 필요하다.

npm install -g ios-sim
npm install -g ios-deploy
npm install -g --unsafe-perm ios-deploy //ios-deploy 설치 에러 시
ios-sim showdevicetypes // 시뮬레이트 할 수 있는 디바이스 목록확인

Build & Emulate

“ionic start”를 통해 가져온 템플릿 프로젝트를 에뮬레이터에서 확인하는 것으로 앱을 구현하기에 앞서 기본적인 개발 환경은 구성되었다고 생각한다. 먼저 ionic 프로젝트에 android와 ios 플랫폼을 추가한다. 추가하게 되면 platforms 경로에 각각 android와 ios 디렉토리 및 필요한 리소스들이 생성된다.

ionic platform add android
ionic platform add ios

다음으로 android로 빌드를 하고 에뮬레이터에서 앱을 실행하여 확인해본다. 이 때 target 옵션을 통해 AVD에서 리스트업한 것을 에뮬레이터의 디바이스 타겟으로 설정할 수 있다.

ionic build android
ionic emulate android --target="[avd name]"

다음으로는 ios로 빌드하고 에뮬레이터에서 확인해본다. 마찬가지로 target 옵션을 줄 수 있다.

ionic build ios
ionic emulate ios --target="[ios device name]

본격 삽질

이 과정까지 오는데 버전 호환성 문제, 경로 설정 문제, 각 설치 도구들의 에러들이 무수히 많이 존재했다. 😢😢😢 다음은 에러 발생 시 대처했던 방법 목록이다.

• android emulator 수행 시 spawn EACCES 에러 발생 시 다음 경로의 gradle관련 파일에 권한을 부여한다.(chmod 755)

/Applications/Android Studio.app/Contents/gradle/gradle-4.1/bin/gradle
/[project path]/platforms/android/wrapper.gradle

• android emulator 수행 시 accept license 수행하라는 에러 발생 시 Android Studio의 sdk 관리자에서 sdk 항목을 설치 혹은 재설치한다.
• android emulator 수행 시 AVD가 존재하지 않는다는 에러 발생 시 Android studio에서 AVD 설정을 해야한다. 이때 AVD 관리자 메뉴가 disable 상태라면 새프로젝트 생성하고 콘솔 창에 발생하는 에러 확인하면 AVD 관리자를 설정할 수 있었다.
• ADV api가 27 버전(너무 높음)일 경우 버전 호환성 때문에 다음과 같은 에러가 발생할 수 있다.

Error: Cannot read property 'semver' of null

• Android Studio에서 에뮬레이터를 실행 중에 ionic을 통해 에뮬레이터를 실행하면 다음과 같은 에러가 발생한다. “adb kill-server” 수행

Error: Failed to execute shell command “getprop,dev.bootcomplete”” on device: Error: adb: Command failed with exit code 1 Error output:
 error: device unauthorized.
 This adb server’s $ADB_VENDOR_KEYS is not set
 Try ‘adb kill-server’ if that seems wrong.
 Otherwise check for a confirmation dialog on your device.

• ios emulator 수행 시 빌드는 성공하지만 다음과 같이 에러가 발생하는 경우는 ios-sim 모듈이 예전 버전이기 때문이다.

No available runtimes could be found for "iPhone 6".

• 따라서 “appfolder/platforms”에 있는 “ios” 디렉토리를 제거한 후 아래 명령을 통해 플랫폼 추가 및 라이브러리를 다시 설치한다. stackoverflow

rm -rf appfolder/platforms/ios
ionic platform add ios
cd appfolder/platforms/ios/cordova && npm install ios-sim@latest