코르도바(Cordova)/폰갭(Phonegap) 으로 하이브리드앱 만들기

1. Node JS 설치 (https://nodejs.org)

 

 

2. CMD 에서 코르도바 or 폰갭 설치

* 폰갭으로 설치해도 내부 플러그인 설치시 사용되는 명령어는 cordova 이며 호출 명령어만 다를뿐 동일하게 사용 가능

 

npm install -g phonegap

npm install -g cordova

 

3. phonegap create [경로] [패키지명] [프로젝트명] or cordova create [경로] [패키지명] [프로젝트명]

phonegap create c:\test\phonegap com.example.hybrid.phonegap PhonegapApp

cordova create c:\test\cordova com.example.hybrid.cordova CordovaApp

 

4.  위에서 생성한 프로젝트 경로로 이동

cd c:\test\폴더명

 

5. 안드로이드/아이폰 플랫폼 함께 추가하며 플랫폼 목록을 Cordova의 config.xml 파일에 저장

 

phonegap platform add android ios browser --save

cordova platform add android ios browser --save

 

6. 프로젝트 폴더 platforms 폴더 내에 android/ios 폴더를 안드로이드스튜디오와 XCode 에서 열어서 작업

 

 

 

* 그런데! 안드로이드 스튜디오에서 프로젝트를 열어보니 에러가 발생한다.

 

대략.... gradle 을 다운로드 하지 못했다는 에러 같다.

 

build.gradle 파일을 열어보면 dependencies 내에 classpath 'com.android.tools.build:gradle:3.3.0' 으로 설정되어 있는데

최신버전을 검색해서 classpath 'com.android.tools.build:gradle:4.0.0' 로 변경 후 Try Again 또는 Sync Now 해주면 해결

 

* build.gradle(Project: android)에서만 바꿔도 해결은 되지만 build.gradle(Module: app) 까지 두군데 모두 변경해주었다.

 

 

 

* cordova와 phonegap 프로젝트의 manifest를 비교해보니 차이점이 있는데, 문제가 하나더 발생한다.

 

폰갭으로 생성한 안드로이드 프로젝트 manifest 파일에는 좀더 많은 permission이 선언되어 있고,

FileProvider 설정이 되어 있는데, FileProvider에서 오류가 발생했다.

 

(좌) phonegap                                                                    (우) cordova

위 그림과 같이 android.support.v4.content.FileProvider 클래스를 찾지 못한다.

 

앱내에서 File을 다루기 위해서는 FileProvide 설정이 필요하기 때문에 

 

build.gradle (Module: app) 내 dependencies에 implementation 'androidx.appcompat:appcompat:1.1.0' 를 추가해주고

manifest 의 오류가 발생했던 부분을 android:name="androidx.core.content.FileProvider" 로 변경해준다.

 

gradle.properties 파일에 android.useAndroidX=true 항목 추가

 

추가로 앱 실행시 코르도바 플러그인에서 기존 FileProvider 클래스를 사용하고 있던 부분에서 에러가 발생할것이다.

해당 클래스에서 import android.support.v4.content.FileProvider; 이부분을 삭제해준다.

 

 

여기까지였으면 좋았겠지만 (왜?) 에러가 하나 더 있다...

폰갭에서 생성된 프로젝트는 시작 엑티비티를 찾지 못하고 있다.

도구모음에 app 부분에 x 표시가 떠 있다.

 

 

 

manifest를 보면 코르도바로 생성한 프로젝트와 MainActivity가 선언된 부분은 동일하지만 에러는 복불복인가보다.

 

기본 Activity를 찾지 못하는 문제에 대해 Clean Build, Sync Project, MainActivity 패키지명부터 적기 등등 해보았으나 동일하여 프로젝트를 다시 생성했다. (.....)

 

하여 폰갭과 코르도바로 생성한 프로젝트를 에뮬레이터로 실행!

 

(좌) 폰갭                                                                                          (우) 코르도바