Cordova는 HTML, JavaScript등의 웹기술로 안드로이드나 아이폰앱을 만들 때 가장 많이 사용하는 프레임워크 중 하나이다. 이것으로 ClojureScript 안드로이드앱을 만들어 보자. 이 글에서는 맥 환경을 기준으로 설명한다.

1. ClojureScript 프로젝트 세팅

$ lein new cljs-webapp hello-cordova
$ cd hello-cordova
$ lein cljsbuild once dev

/resources/public/index.html 을 웹브라우저로 열면 화면에 Hello! 가 보인다.

글씨가 좀더 크게 보이도록 /src-cljs/hello_cordova/core.cljs 를 다음처럼 수정.

(ns hello-cordova.core)

(.write js/document "<h1>Hello!</h1>")

다시 빌드.

$ lein cljsbuild once dev

웹브라우저에서 다시 보면 Hello! 가 커졌다.

이 기본적인 웹앱을 안드로이드앱으로 옮길 것이다.

2. 안드로이드 SDK 설치

https://developer.android.com/sdk/index.html#Other 에서 android-sdk_r24.1.2-macosx.zip를 다운받아 압축을 푼다. 이글에서 IDE를 포함하지 않은 SDK Tools Only를 선택한 이유는 간단한 설치를 위해서이다.

각자 안드로이드 SDK를 압축 푼 위치에 따라 밑의 내용을 수정하여 ~/.bash_profile에 추가한다.

export PATH=${PATH}:~/project/android-sdk-macosx/platform-tools:~/project/android-sdk-macosx/tools

이 변경사항을 현재 터미널 창에 바로 반영한다.

$ source ~/.bash_profile

현재 터미널에서 안드로이드 SDK 사용가능한지 확인.

$ android -h

3. Cordova 설치

https://nodejs.org/ 에서 인스톨 파일 다운받아 설치. 그러면 Node.js와 npm이 설치된다.

Cordova 설치.

$ sudo npm install cordova -g

Cordova 설치되었는지 확인.

$ cordova -v

4. ClojureScript 프로젝트 내부에 Cordova 프로젝트 생성

$ cd hello-cordova
$ cordova create assets com.hello-cordova HelloCordova

안드로이드 플랫폼용 파일 추가하려고 하면 다음처럼 에러가 난다.

$ cd assets
$ cordova platform add android
...
Error: Please install Android target "android-19".
...

이를 해결하기 위해서는 해당 안드로이드 SDK (지금은 android-19)를 설치해야 한다.

$ android

Android SDK Manager에서 Tools/Android SDK Build-tools(Rev. 22.0.1) 과 Android 4.4.2(API 19)를 선택 후 Install… 버튼을 누른다. 이후 Android SDK License를 선택 후, Accept License 을 체크한 후 Install 버튼을 누른다.

다시 안드로이드 플랫폼용 파일 추가

$ cordova platform add android

5. 디바이스에서 Cordova 예제 확인

앞에서 추가한 Cordova 예제를 디바이스에서 확인하기 위해서는 디바이스의 옵션을 변경해야 한다. 각자의 디바이스에서 환경설정 -> 개발자 옵션 -> USB 디버깅 활성화 한다. 그리고 환경설정 -> 보안 -> 알수 없는 소스를 활성화 한다.

이제 다음을 실행하자.

$ cordova run android

이렇게 하면 앱을 빌드하여 디바이스에 넣은 후 심지어 앱을 자동으로 실행한다.

결과:

6. 안드로이드앱으로 변환

1번에서 만든 웹앱을 안드로이드앱으로 옮기자. 이를 위해서는 /resources의 내용을 /assets에 합쳐야 한다. 방법은 다음과 같다.

/assets/www/index.html 을 다음처럼 수정한다.

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>Hello World</title>
    </head>
    <body>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>

        <script src="js/goog/base.js"></script>
        <script src="js/cljs.js"></script>
        <script type="text/javascript">goog.require("hello_cordova.core");</script>
    </body>
</html>

project.clj 에서 resources/public을 모두 assets/www 으로 바꾼다.

클로저스크립트 다시 빌드.

$ lein cljsbuild once dev

/assets/www/index.html 을 웹브라우저로 열면 이전처럼 Hello! 가 보인다.

디바이스에서 확인.

$ cd assets
$ cordova run android

결과:

끝!

7. 이후 진행

지금까지 기본적인 안드로이드앱을 만들었다. 더 진행하려면 다음을 추천한다.

참고