모바일 웹앱 하이브리드앱 개발을 위한 코드도바, 폰갭 설치

모바일 웹앱 하이브리드 앱 개발을 위한 코드도바, 폰갭 설치

 

웹을 모바일에서 구동하게 하기 위한 웹앱 개발과 웹과 네이티브 앱의 기능을 혼합한 하이브리드 앱을 개발하기 위해서는 Java, Android, Node.js 순서로 개발 환경이 미리 준비되어 있어야 한다.

개발환경이 모두 준비되었다면 마지막으로 설치할 프로그램은 최종 배포판 APK 를 만들기 위한 코드도 바(Cordova)이다.

 

 

폰갭도 설치는 하게 되는데, 단순하게 웹앱을 만들 경우는 폰갭을 설치하지 않아도 문제가 없다. 그리고 하이브리드 앱을 개발할 때에도 Phonegap serve를 이용해서 테스트할 경우 몇몇 jQuery는 실행이 되지 않아 아 개발에 오류가 있는지 체크하느라 고생을 하는 경우가 있는데, Device를 제어하는 앱을 만들지 않는다면 굳이 폰갭을 설치할 필요는 없는 것 같다.

웹앱은 크롬에서 개발하면서 크롬 개발자 모드로 확인하면서 테스트해도 가능하다. 물론 몇 가지 불편한 것과 구현되지 않는 것은 있지만 이것은 APK를 만들어서 폰에서 직접 테스트하는 게 제일 정확한 것 같다.

 

코드도바 (Cordova) 설치

1. Node.js 명령 프롬프트를 실행한다.

2. npm을 이용해서 cordova를 install 한다. 이후 명령 프롬프트에서

  > npm install -g cordova
      -g 옵션은 global 줄임으로 프롬프트에 위치와 상관없이 어느 폴더에서나 실행

  > cordova -v 

     설치가 완료되면 설치 버전을 확인해 본다. 설치 중 오류가 난다면 미리 준비해야 하는 개발환경이 설치되지 않거나 경로가 맞지 않는 것이므로 다시 한번 확인해 보도록 한다.

2019/04/02 - [think] - 웹앱 개발을 위한 하이브리드앱 환경 만들기

2019/04/03 - [think] - Windows 10 자바(Java), 안드로이드(Android) 설치하기 : JDK 설치 와 환경설정

2019/04/07 - [think] - 웹앱 개발을 위한 안드로이드 스튜디오 SDK 설치 하기

2019/04/09 - [think] - 웹앱 개발을 위한 Node.js 설치 후 실행

 

폰갭 (Phonegap) 설치

1. Node.js 명령 프롬프트를 실행한다.

2. npm을 이용해서 phonegap을 install 한다.

  > npm install -g phonegap
      -g 옵션은 global 줄임으로 프롬프트에 위치와 상관없이 어느 폴더에서나 실행

  > phonegap -v

 

코드도바, 폰갭의 업데이트가 필요할 경우에는

> npm update -g cordova

> npm update -g phonegap

 

코드도바 설치가 완료되면 이제는 실제 프로젝트를 만들어 보도록 한다.