Cordova 로 안드로이드 앱 작성시 AndroidManifest.xml 수정하기

Cordova로 안드로이드 앱을 작성하기 위해 platform에 android를 추가하면 platforms/android 폴더가 생성됩니다.

SCM으로 소스 관리를 할 때에는 외부에서 Download하는 platforms, plugins 폴더를 굳이 포함시키지 않아도 되는데…
(포함하게 되면 하위에 있는 의존성 엮인 엄청난 파일들이…)

따라서 해당 platforms 하위의 파일을 직접 수정하게 되면 소스 관리가 안되는 문제가…
이런 경우 config.xml을 통해 특정 파일을 수정할 수 있습니다.

<edit-config file="AndroidManifest.xml" target="/manifest/uses-sdk" mode="merge">
    <uses-sdk android:minSdkVersion="16" android:maxSdkVersion="23" />
</edit-config>

위와 같이 config.xml에 적으면 빌드 과정에서 AndroidManifest.xml 파일에서 XPath 경로로 /manifest/uses-sdk 노드를 찾아서 하위 노드에 가 merge됩니다.

참고사항: https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#edit-config

Cordova로 Android 앱 만들기

초간단으로 초간단한 안드로이드 앱을 만들어 봤습니다.
Windows 기준입니다.

준비

  • Android Studio 와 SDK 를 설치합니다.
    BS는 [구글 다운로드 사이트]에서 무설치 압축 파일로 받았습니다.
  • 환경변수 설정 (Win 키 누르고 환경변수 검색해서 계정 환경변수에…)
    • ANDROID_SDK_ROOT=X:\android-sdk
    • JAVA_HOME=X:\android-studio\jre
    • PATH=%PATH%;X:\android-sdk\platform-tools;X:\android-sdk\tools
  • Cordova 설치
    npm install -g cordova

프로젝트 만들기

아래 내용을 차례로 실행해서
프로젝트 만들고 -> 플랫폼에 안드로이드를 추가하고 -> 요구사항 정상인지 확인 -> 플러그인 추가(이건 필요한 것들만)

cordova create ytm4bs kr.pe.bspfp.ytm4bs YTM4BS
cd ytm4bs
cordova platform add android
cordova requirements
cordova plugin add cordova-plugin-inappbrowser

빌드를 위한 Key Store 만들기

정상적인 APK를 만들기 위해서 키스토어를 생성합니다.

keytool -genkey -v -keystore android.keystore -alias mykey1 -keyalg RSA -keysize 2048 -validity 36500

이제 프로젝트 폴더에 build.json 파일을 만들어 키스토어를 지정합니다.

{
    "android": {
        "debug": {
            "keystore": "../android.keystore",
            "storePassword": "android",
            "alias": "mykey1",
            "password" : "password",
            "keystoreType": ""
        },
        "release": {
            "keystore": "../android.keystore",
            "storePassword": "",
            "alias": "mykey1",
            "password" : "password",
            "keystoreType": ""
        }
    }
}

앱을 구현하기

BS는 초간단 앱을 만들고 있으므로 많이 수정하지 않았습니다.

www/img/logo.png 를 원하는 아이콘 이미지로 바꾸고
config.xml에 아이콘으로 지정합니다.

<icon src="www/img/logo.png" />

www/index.html 에 jqeury 를 포함시키고

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

www/js/index.js에 로직을 구현합니다.

class App {
    constructor() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    }

    onDeviceReady() {
    }
}

var app = new App();

www/css/index.css 도 편집합니다.

빌드해서 기기에 넣기

BS의 초간단앱은 이제 완성되었습니다.
안드로이드 기기를 USB로 연결하여, USB 디버깅을 켜고, 아래 명령을 실행합니다.

cordova run --debug --device android

기기에서 앱이 실행되는 것을 확인합니다.

참고: 연습 프로젝트 내용
YTM4BS는 명시적으로 종료할 때에만 종료되게 설정해서 사용하는 앱입니다.