Cordova 설치부터 빌드까지

cordova는 하이브리드앱을 만들 수 있는 환경이다.

일반적으로 웹을 기반으로 구현하는 대부분의 것들은 거의 바로 앱 패키징을 할 수 있는 장점이 있다.

최근에는 ionic이라는 환경을 통해 개발을 많이 하지만

웹상에 있는 어플리케이션을 그대로 사용하기에는 cordova가 좋다.

국내에서 내용을 정리한것이 별로 없어 정리한다.

 

cordova는  browser, android, ios가 가능하지만

아래 옵션에서는 browser라는 예시를 추가로 넣을 뿐.

android위주의 명령어만 보면 된다.

 

최초 설치

$ npm install -g cordova

 

확인해야 할 것

-자바 SDK 환경변수

-안드로이드 환경변수

 

프로젝트 만들기

안드로이드의 경우 어차피 나중에 패키지 네임을 변경해야 하기때문에

프로젝트 만들때부터 이름,패키지까지 한번에 해주는게 편하다

$ cordova create helloWorld com.example.helloworld HelloWorld

(이름, 패키지 네임, 이름)

 

플랫폼 추가

$cordova platform add browser
$cordova platform add android

(옵션)아래 명령어로 추가된 플랫폼 리스트를 확인 할 수 있다.

$ cordova platform ls

(옵션)플랫폼별 빌드환경 요구사항 및 만족여부를 확인할 수 있다.

$ cordova requirements

 

웹어플리케이션 이식

웹을 만들었다면 build하여 결과물만 www폴더에 모아둔다.

그 폴더를 cordova 최상위단에 넣는다.

그리고 index.html에

<script src="cordova.js"></script>

이 부분을 추가해야한다.

이건 최초 cordova생성할때 있는 index.html파일에 보면 필요한 내용이다.

프로젝트 빌드

빌드는 추 후를 위해 최상위 폴더에 build.json을 추가하고 아래와 같이 작성.

{
  "android": {
      "debug": {
          "keystore": "debug.keystore",
          "storePassword": "패스워드",
          "alias": "hemit",
          "password": "패스워드",
          "keystoreType": "",
          "packageType": "apk" 
      },
      "release": {
          "keystore": "release.keystore",
          "storePassword": "패스워드",
          "alias": "hemit",
          "password": "패스워드",
          "keystoreType": "",
          "packageType": "apk" //플레이콘솔에 올릴때는 abb
      }
  }
}

키스토어를 제작하기 위한 명령은 다음과 같다

릴리즈를 위한 것들이며 debug.keystore는 큰 필요성이 없어보인다.

keytool -genkey -v -keystore release.keystore -alias 별칭 -keyalg RSA -keysize 2048 -validity 10000
keytool -genkey -v -keystore debug.keystore -alias 별칭 -keyalg RSA -keysize 2048 -validity 10000

빌드는 아래와 같다.

 

#추가

아래 구문을 한번 해주면 www폴더가 생성된다. 이후에 아래 build를 하면 맨 밑의 index.html의 문제가 발생하지 않는다

quasar build -m cordova -Td android

$ cordova build browser
$ cordova build android

릴리즈로 빌드 하고 싶으면 뒤에 --release옵션을 추가하면 된다.

 

 

디버깅

PC에 연결된 안드로이드 장치 리스트를 아래 명령어 확인할 수 있다.

$ adb devices  
$ cordova run android --device

크롬 브라우져에서 다음과 같이 입력하면 모바일의 내용들이 브라우져형식으로 올라온다.

이때 콘솔창을 통해 디버깅을 할 수 있다.

chorme://inspect
​

웹어플리케이션을 SPA로 만든경우

라우팅이 되어있어 index.html이 위와 같이 에러페이지로 나올 수 있다.

이건 웹 어플리케이션에서 라우팅을 스스로 해결할 수 있도록 해야 한다.

 

cordova에서는 로딩 후 페이지 변동을 시킬 수 있지만

에러페이지가 뜬 후 다시 도달하므로 전환화면이 보이기 때문이다.