Ionic을 이용하여 하이브리드 앱을 개발해보자 (메신저 앱) - Intro
하이브리드 앱
하이브리드 앱은 HTML5, CSS, JavaScript를 사용해 만들어지며 다양한 모바일 플랫폼에서 네이티브 앱으로 실행된다. 표준 웹 개발을 사용하지만, 최종 앱은 기기에서 네이티브 앱으로 실행된다. 네이티브 앱과 웹 기반 앱의 장점만 결합하기위한 방법이다.
장점
웹 표준을 사용하여 제작
기존 웹 개발자들이 어렵지 않게 하이브리드 앱 개발 가능
신속한 수정, 업데이트 및 배포 가능
각 플랫폼에서 네이티브 앱으로 실행됨
단점
인터페이스가 표준 네이티브 앱과 다를 수 있음
그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어질 수 있음
일반적으로 장치의 모든 센서 및 하드웨어에 접근할 수 있지만 새 기능을 지원할 때까지 다소 시간 지연 발생가능
네이티브 앱 '셸'의 각기 다른 코드 베이스를 유지해야 할 수 있음
개발자는 웹 앱을 네이티브 앱으로 변환시키기 위한 부가적인 소프트웨어를 사용해야 함
- Node.js
- AngularJs
- PhoneGap (Cordova)
1 | npm install -g cordova ionic | cs |
1 | ionic start Messenger tabs | cs |
1 | ionic serve | cs |
자동으로 8100 포트로 실행이 되네요. 탭 template로 프로젝트를 만들었기 때문에 기본적으로 하단에 탭이 위치한 앱이 실행됩니다. 포트를 변경하고 싶을때는 ionic serve -p {port} 로 실행하면 됩니다. 별도의 에뮬레이터나 기기 없이도 테스트가 가능하기 때문에 화면 수정할때나 스크립트 디버깅할때 상당히 편리합니다.
그리고 파일이 수정이 일어날때 마다 자동으로 refresh를 해주기 때문에 바로바로 변경사항을 체크하면서 테스트를 할 수 있습니다.
다음으로 실제 플랫폼에서 앱을 실행시키기 위해선 플랫폼을 추가해야 합니다.
현재 플랫폼 리스트를 볼까요?
1 | ionic platform list | cs |
위 커맨드를 실행하며 Installed platforms, Available platforms 리스트가 나타납니다. 아직 플랫폼을 설치하지 않았기 때문에 Installed platforms은 없고 지원 가능한 플랫폼 리스트가 나옵니다. 현재 개발 환경이 Mac 아니라서 ios 플랫폼은 나타나지 않네요. 그럼 안드로이드 플랫폼을 다음과 같이 추가 해보겠습니다.
1 | ionic build android | cs |
Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
안드로이드 sdk 경로를 path로 잡아줘야 가능하다는군요. 그럼 sdk를 설치하고 해당 경로를 환경변수 ANDROID_HOME 으로 설정합니다. 그리고 JAVA_HOME 으로 jdk 경로가 설정되어 있어야 합니다.
이렇게 안드로이드 빌드후 다음과 같은 커맨드로 에뮬레이터 혹은 실제 디바이스에서 앱을 실행 해볼 수 있습니다.
1 | ionic emulate android | cs |
1 | ionic run android --device | cs |
이렇게 Ionic을 이용해서 하이브리드 앱을 개발할 준비와 기본적인 명령어는 숙지가 되었습니다.
다음 블로그 부터는 간단한 매신저앱을 함께 만들어 가는 과정을 포스팅 하겠습니다.
'앱 개발' 카테고리의 다른 글
Cordova 플러그인 만들기 (0) | 2018.07.13 |
---|---|
Blisk, 웹앱 개발 브라우저 (0) | 2016.11.29 |
내가 만든 iOS앱을 앱스토어에 배포해보자 - xCode로 소스 업로드하기 (0) | 2015.10.08 |
내가 만든 iOS앱을 앱스토어에 배포해보자 - 앱 심사를 위한 준비 (0) | 2015.09.07 |
내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발할 앱 연결과 권한 (1) | 2015.08.06 |