쿠...sal: [컴] cordova 로 web app 만들기

cordova 로 web app 만들기

android sdk 설치

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

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 로 web app 만들기