쿠...sal: [컴] Cordova 사용하기

android sdk 설치

여기서는 c:\a\apps\andorid\sdk 에 설치

ddd

cordova 설치

npm 이 설치되어 있어야 한다.

c:\proj> npm install --save cordova

cordova project 만들기

아래 command 에서 cordova대신에 "..\node_modules\.bin\cordova.cmd" 를 사용하면 된다.

c:\proj> cordova create mytestapp com.mysite.myapp MyTestApp

이러면 mytestapp 이라는 folder 가 생기고 그 안에 파일들이 생성된다.

platform 추가

가능한 platform 의 종류는 다음과 같다.[ref. 1]

ios
android
windows
wp8
blackberry10
firefoxos
amazon-fireos

'cordova platform ls' 를 하면 지원되는 platform 을 알 수 있다.

여기서는 anroid platform 을 추가한다.

c:\proj> cd mytestapp
c:\proj\mytestapp> ..\node_modules\.bin\cordova.cmd platform add android

template 다운로드

https://github.com/tastejs/todomvc/tree/master/examples/vanillajs

index.html 합치기

cordova 의 index.htm 은 살리고(특히 <head> <script>) , template 의 index.html 부분들을 merge 하자.

나머지 파일들 www folder 안에 copy

boardca\www

android.bat 가 있는 path 를 %PATH% 에 설정

SET PATH=%PATH%;c:\a\apps\Android\sdk\tools\

build

cordova build android

그러면 아래 경로에 apk 가 생성된다.
proj\boardca\platforms\android\build\outputs\apk\android-debug.apk

cordova run android

web site 를 app 에서 보이게 하려는 경우

여기 에서 이야기하는 방식으로는 동작하지 않았다.

아래 방법은 잘 동작했다. 대신에 아래 방법을 사용하려면 config.xml 에

cordova plugin add cordova-plugin-dialogs
cordova plugin add cordova-plugin-network-information

 <script>
  function onDeviceReady() {
    if (navigator.connection.type == Connection.NONE) {
      navigator.notification.alert('An internet connection is required to continue');
    } else {
      window.location="http://www.myapp.com";
    }
  }
  document.addEventListener("deviceready", onDeviceReady, false);
</script>

proj\boardca\config.xml 수정
navigation-whitelist 에 넣어줘야 한다. allow-navigation 을 이용하면 된다.

<?xml version="1.0" encoding="utf-8"?>
<cordova>
  <access origin="http://www.myapp.com*"/>
  <allow-navigation href="https://www.myapp.com/*" /> 
</cordova>

References

Convert your Web App to a Mobile App with Apache Cordova

쿠...sal

[컴] Cordova 사용하기