티스토리 뷰

SW개발/Mobile-Hybrid

Cordova(코르도바) Hosted WebApp에서 Plugin 연동하기

sy.lukas 2021. 12. 6. 15:22
반응형

https://bundw.tistory.com/64

 

Cordova(코르도바) Hybrid Hosted WebApp(하이브리드 웹앱) 베이스 만들기

이미 모바일 홈페이지가 있으며 앱으로 씌워서 스토어에 올리고자 할 경우, 웹앱의 기본이 되는 프로젝트를 Cordova로 만들어 보겠습니다. 대상은 Cordova가 지원하는 Android, iOS이며 설명은 Android 기

bundw.tistory.com

위 글에서 모바일 홈페이지를 웹앱으로 생성을 했지만 Cordova의 핵심 기능인 Plugin을 사용할 수 없습니다.

 

Cordova는 cordova.js의 스크립트 시작으로 기능을 활성화하는데, 모바일 홈페이지로 이동하게 되면 페이지가 변경되어 cordova.js를 로드하지 않기 때문입니다.

 

따라서 웹서버에 Cordova 스크립트 파일을 업로드하고 로드함으로써 Cordova 기능을 사용하는 방법을 알아보겠습니다.

 

Cordova 플랫폼은 Android 기준으로 작성되었습니다.

 

사전 준비사항

- 웹서버의 모바일 홈페이지에 js스크립트 파일을 업로드할 수 있어야 합니다.

- 웹서버의 접근되는 모바일 페이지의 소스 파일을 수정할 수 있어야 합니다.

 

 

Cordova 설정

테스트를 위해 cordova-plugin-device 플러그인을 설치합니다.

> cordova plugin add cordova-plugin-device

 

프로젝트의 www/js 폴더에 host.js 파일을 생성하고 아래 내용을 추가합니다.

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');

        console.log("Cordova device plugin : " + device.uuid); // plugin function
    },
    receivedEvent: function(id) {
    }
};

app.initialize();

기능이 추가된 후 정상적으로 작동이 된다면 "Cordova device plugin : <UUID>"가 출력 될 것입니다.

 

프로젝트를 빌드합니다.

> cordova build android

 

웹앱은 이렇게 준비가 끝났습니다.

 

 

웹서버 설정

웹서버에서 Cordova의 js 파일을 업로드할 곳에 폴더를 생성합니다. 이 글에서는 cordova_js로 합니다.

 

www/js/host.js 파일을 웹서버 cordova_js/에 업로드합니다.

platforms/android/platform_www/의 모든 파일 및 폴더를 cordova_js/에 업로드합니다.

 

모바일 페이지가 열리는 모든 페이지의 body 마지막부분에 아래의 스크립트를 추가합니다. (index.html 등)

<body>
    ...
    <script type="text/javascript" src="cordova_js/cordova.js"></script>
    <script type="text/javascript" src="cordova_js/host.js"></script>
</body>

 

웹서버의 준비가 끝났습니다.

 

실행 및 결과 확인

Cordova Android를 실행합니다.

> cordova run android

 

Android Studio의 logcat 등에서 로그를 확인합니다.

...
io.cordova.hellocordova I/chromium: [INFO:CONSOLE(18)] "Cordova device plugin : 1934eff70945df88"

"Cordova device plugin : <UUID>"가 출력되었다면 정상적으로 Plugin이 연동된 것 입니다.

반응형

'SW개발 > Mobile-Hybrid' 카테고리의 다른 글

Cordova(코르도바) Orientation(화면) 가로,세로 고정 및 회전 지정  (0) 2021.12.08
Cordova(코르도바) 실행 로딩화면 Splashscreen(스플래시 스크린) 적용  (0) 2021.12.08
Cordova(코르도바) Hybrid Hosted WebApp(하이브리드 웹앱) 베이스 만들기  (0) 2021.12.06
Cordova(코르도바) Android(안드로이드) ANDROID_SDK_ROOT , JAVA_HOME, Gradle 빌드 오류  (0) 2021.12.06
Cordova(코르도바) VSCode 등에서 UnauthorizedAccess 오류  (0) 2021.12.06
반응형