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

cordovatemplate.apk · master · mazdah / Cordova Template

 

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

GitHub - mazdah/CordovaTemplate: Cordova 프레임워크 학습을 위한 템플릿 프로젝트

코르도바 프로젝트 생성 후 위 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 관련 사이트
• Want to Contribute?
• Cordova Plugins

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에 다음과 같이 설정한다.

 

<feature name=“Echo”> 
	<param name=“android-package” value=“<full_name_including_namespace>” /> 
	<param name=“onload” value=“true” /> 
</feature>

 

•  –“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에 다음과 같이 설정한다.

<feature name=“Echo”> 
	<param name=”ios-package” value=“<ios_class_name>” /> 
	<param name=“onload” value=“true” /> 
</feature>

 

•  –“Echo” : 플러그인 이름. 임의로 작성
•  iosclassname : 클래스명

 

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

#import <Cordova/CDVPlugin.h>

@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의 웹뷰가 제어되지 않는다.