Cordova 시작하기

Cordova 시작하기

반응형

샘플 앱(cordovatemplate.apk) 사용법

- Android용 테스트앱은 그냥 설치하여 사용하면 되나 Media Plugin을 테스트하기 위해서는 Android 파일 전송 앱을 기준으로 아래 경로에 mp3 파일들을 넣어줘야 함

- Android/data/io.cordova.cordovatemplate/files/Music

- Android에서 플레이되지 않는 mp3 파일들도 있으므로 확인 후 테스트할 것.

샘플 앱 : https://gitlab.bp.cli-pod.com/mazdah/cordova-template/-/blob/master/cordovatemplate.apk

샘플 앱에 사용된 리소스 : https://github.com/mazdah/CordovaTemplate

코르도바 프로젝트 생성 후 위 github 경로에서 www 아래에 있는 css, js, index.html만 사용하면 된다.

Cordova 프레임워크

설치 및 기본 Plug-in에 대하여

1. Cordova 시작하기

Cordova 설치 : Cordova Framework를 설치

$ npm install -g cordova

Project 생성 : Cordova 기반의 base 프로젝트를 생성

$ cordova create MyApp

Platform 추가 : 각 플랫폼(Android, iOS 등)별 프로젝트를 추가

$ cd MyApp $ cordova platform add android

실행 : 프로젝트를 실행

$ cordova run android

Cordova Project 구조 1

Project config.xml cordova plugins node_modules @Netflix … package-lock.json package.json platforms $ cordova platform add 명령어로 추가된 플랫폼 디렉토리가 존재 android, iOS 등 본격적인 개발이 이루어지는 곳 Plugins $cordova plugin add 명령어로 추가된 플러그인들이 존재 www 웹 리소스들…

Cordova Project 구조 2

기본적으로 최초 생성한 Project에서 platform별 subproject를 생성한다.

platform별 subproject가 실질적으로 앱을 개발하는 영역이다.

platform별 subproject만 별도의 영역으로 옮겨 개발을 해도 된다.

하지만 plug-in 설치 등 cordova의 CLI를 통한 Project 관리를 위해서는 최초 생성한 Project 구조를 유지하는 것이 좋다.

Project 생성 및 빌드 troubleshooting (Android 대상)

Android의 경우 프로젝트 생성 후 바로 Android Studio로 열지 말고 아래 명령을 수행하여 Project를 build 후 진행하는 것이 좋다. 명령 수행 위치는 ../plaforms/android이다.

$ cordova build android

위 명령어 실행시 다음 오류가 발생하면 JDK 1.8 설치 후 JAVA_HOME을 JDK1.8 설치 경로로 잡아준다.

Requirements check failed for JDK 1.8.x! Detected version: 16.0.1

아래 오류가 발생할 경우 환경변수의 PATH에 Gradle 경로를 추가해준다.

Could not find an installed version of Gradle either in Android Studio…

Android Studio에서 build 시 아래 오류가 발생하면 build.gradle에 아래 코드를 추가해준다. Gradle 버전은 개발 환경과 맞춰준다.

Task ‘wrapper’ not found in project ‘:CordovaLib’

task wrapper(type: Wrapper) { gradleVersion = ‘6.5’ }

2. Cordova Plug-in

기존 plug-in 추가

$cordova plugin add [플러그인 이름 | 플러그인 주소]

이렇게 추가된 plug-in들은 다음 위치에 생성된다.

Javascript : platforms/[platform]/platform_www/plugins

iOS native : platforms/iOS/[project명]/Plugins

Android native : platforms/android/app/src/main/java/org/apache/cordova

Cordova Plug-in 사용

주의사항 : Cordova Plug-in은 반드시 deviceready 이벤트 발생 후 사용 가능하다.

document.addEventListener("deviceready", onDeviceReady, **false**); **function** onDeviceReady() { console.log(navigator.camera); }

iOS의 경우 필요에 따라 info.plist에 Privacy 설정이 필요하다.

자세한 사용법은 Cordova Plug-in 관련 사이트 및 예제 앱 참조

3. Custom Plugin 개발

–Javascript interface : javascript에서 네이티브로 개발된 플러그인 호출 방법

cordova.exec(function(winParam) {}, function(error) {}, “service”, “action”, [“firstArgument”, “secondArgument”, 42, false] );

– function (winParam) : success callback

– function (error) : error callback

“service” : 호출할 서비스명. 플러그인 기능이 구현된 클래스

“action” : 플러그인 기능명. iOS의 경우 함수명, Android의 경우 execute 함수 내에서 구분될 action명

[parameters] : 파라미터 배열

config.xml 설정 (Android) : –Custom Plug-in 사용을 위해서는 config.xml에 다음과 같이 설정한다.

” />

–“Echo” : 플러그인 이름. 임의로 작성

fullnameincluding_namespace : 클래스명을 포함한 전체 패키지 경로

Native code 구현 ( Android ) –org.apache.cordova.CordovaPlugin를 상속받은 클래스 생성 초기화

@Override public void initialize(CordovaInterface cordova, CordovaWebView webView) { super.initialize(cordova, webView); // your init code here* }

execute 함수 구현

@Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (”beep”.equals(action)) { this.beep(args.getLong(0)); callbackContext.success(); return true; } return false; // Returning false results in a “MethodNotFound” error.* }

callbackContext . success([param]) : javascript의 success callback 호출

callbackContext.error([param]) : javascript의 error callback 호출

config.xml 설정 (iOS) : –Custom Plug-in 사용을 위해서는 config.xml에 다음과 같이 설정한다.

” />

–“Echo” : 플러그인 이름. 임의로 작성

iosclassname : 클래스명

Native code 구현 ( iOS ) –CDVPlugin을 상속받은 클래스 생성

#import @interface Echo : CDVPlugin -(void)echo:(CDVInvokedUrlCommand*)command; @end

–함수 구현 : andriod는 action이 execute 함수의 파라미터이나 iOS는 action 하나가 함수 하나이다.

#import “Echo.h” @implementation Echo -(void)echo:(CDVInvokedUrlCommand*)command { CDVPluginResult* pluginResult = nil; NSString* echo = [command.arguments objectAtIndex:0]; if (echo != nil && [echo length] > 0) { pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo]; } else { pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR]; } [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; } @end

CDVCommandStatus_OK : javascript의 success callback 호출

CDVCommandStatus_ERROR : javascript의 error callback 호출

–iOS에서 Native 화면을 출력 후 javascript에서 alert를 띄우는 경우 Native 화면이 닫힌 후 Cordova의 웹뷰가 제어되지 않는다.

반응형

from http://mazdah.tistory.com/884 by ccl(A) rewrite - 2021-12-28 11:27:32