Swift를 사용해서 Cordova Custom Plugin 만들기 (1)

 

Cordova 프로젝트에서 iOS 플랫폼의 메서드를 호출하고, 문자열을 수신하여 출력하기 위해서 간단한 Cordova Custom Plugin을 만들어보겠습니다.

 

플러그인 컴포넌트를 만들어내기 위해서, plugman을 설치해야 합니다. plugman은 플러그인 생성과 구성 및 관리를 도와주는 command line tool입니다.

$ npm install -g plugman

 

---

Create plugin using plugman

$ plugman create --name CordovaSamplePluginSwift --plugin_id com.yeolmok.samplepluginswift --plugin_version 0.0.1

create 메서드는 플러그인의 뼈대를 만들어주는 메서드입니다.

 

new plugin component

plugin.xml에 관한 자세한 내용은 Cordova plugin.xml document에 있습니다.

 

---

Add Platform

$ plugman platform add --platform_name ios

위의 명령어는 plugin.xml이 있는 폴더에서 실행해야 합니다. plugin.xml 파일에 플랫폼에 관한 내용이 추가되고, src/ios에 Objective-C 소스 파일이 생성됩니다.

 

 

---

Create package.json

$ plugman createpackagejson .

// permission denied 에러가 발생한다면?
$ sudo plugman createpackagejson .

package.json 파일은 플러그인의 이름, 버전, 설명, 작성자 및 다른 플러그인이나 라이브러리에 대한 종속성과 같은 정보를 정의합니다. 플러그인 프로젝트의 루트 디렉터리에서 위의 명령어를 실행하면 정보를 지정해서 기본적인 파일을 생성할 수 있습니다.

 

 

---

Write swift code

이제, 플랫폼을 추가하며 생성됐던, src/ios/XXX.m 파일을 삭제하고, 플러그인을 통해 Cordova 애플리케이션이랑 데이터를 주고받을 스위프트 코드를 작성하면 됩니다. 아래와 같이 간단하게 작성했습니다.

 

@objc(CordovaSamplePluginSwift)
class CordovaSamplePluginSwift: CDVPlugin { // Objective-C 호환
    @objc(greet:) // Objective-C 호환, swift 메서드를 Objective-C에서 호출할 수 있도록 설정함.
    func greet(command: CDVInvokedUrlCommand) {
        print("Received successfully.")
        // CDVInvokedUrlCommand 클래스의 프로퍼티 출력
        print("callbackId: \(command.callbackId as String)")
        print("className: \(command.className as String)")
        print("methodName: \(command.methodName as String)")
        print("arguments: \(String(describing: command.arguments))")
        
        let result = CDVPluginResult(status: CDVCommandStatus_OK, messageAs: "Hi, I'm a Yeolmok on iOS platform")
        self.commandDelegate.send(result, callbackId: command.callbackId)
    }
}

 

CDVInvokedUrlCommand 정의

#import <Foundation/Foundation.h>

@interface CDVInvokedUrlCommand : NSObject {
    NSString* _callbackId;
    NSString* _className;
    NSString* _methodName;
    NSArray* _arguments;
}

@property (nonatomic, readonly) NSArray* arguments;
@property (nonatomic, readonly) NSString* callbackId;
@property (nonatomic, readonly) NSString* className;
@property (nonatomic, readonly) NSString* methodName;

@end

 

편의상 디버그 결과 먼저 첨부하겠습니다. 위의 greet(command:)메서드에서 'arguments'의 인자로서 넘겨준 값이 없기 때문에, 빈 배열이 출력됩니다.

 

Debug area

 

 

마지막으로, plugin.xml 파일에서 파일 수정 내용을 작성해주면 됩니다.

<!-- plugin.xml 파일의 기존 코드 -->
<source-file src="src/ios/XXX.m" />

<!-- Objective-C 파일을 삭제하고 Swift 파일을 생성했기 때문에 수정  -->
<source-file src="src/ios/XXX.swift" />

 

 

---

Add Custom plugin

지금부터 Cordova 프로젝트 루트 디렉터리입니다.

$ cordova plugin add <custom plugin이 위치한 디렉토리 경로>

// ex) macOS 바탕화면(Desk)에 "CordovaSamplePluginSwift"라는 폴더를 만들고 plugin을 생성했다면?
$ cordova plugin add /Users/<user name>/Desktop/CordovaSamplePluginSwift/CordovaSamplePluginSwift

이때까지 만든 플러그인을 사용해보기 위해서는 기존의 Cordova 프로젝트에 추가해줘야 합니다. npm을 사용해서 배포했다면, Cordova의 default plugin을 설치할 때처럼, 로컬 경로가 아닌 이름을 통해서 추가할 수 있습니다.

 

잘 추가되었는지 확인

 

이제, iOS 플랫폼과 상호작용하기위해 index.js(또는 임의의 javascript) 파일에 코드를 작성할 차례입니다.

cordova.exec()는 자바스크립트 인터페이스입니다.

cordova.exec(function(winParam) {}, // A success callback function
             function(error) {}, // An error callback function
             "service", // The service name to call on the native side
             "action", // The action(method) name to call on the native side
             [/* arguments */]); // An array of arguments to pass into the native environment.

 

index.js

const customButton = document.getElementById("custom");

customButton.addEventListener("click", function() {
  // Javascript interface
  cordova.exec(
    function(winParam) {
      // 성공 시, Dialogs(default plugin) API를 사용해서 알려줌.
      navigator.notification.alert(winParam, null, "Received message", "OK");
    }, 
    function(error) {
      navigator.notification.alert("Error occured!: " + error);
    }, 
    "CordovaSamplePluginSwift", 
    "greet"
  );
});

 

 

Build

$ cordova build ios

 

 

만약 빌드에 다음과 같이 실패한다면?

 

아래 사진과 같이 Tagets -> Build Settings -> Swift Compiler - Language에서 적절한 버전을 선택해주시면 됩니다.

 

.xcworkspace를 열어보면, Staging 그룹의 config.xml 파일에 다음과 같은 내용이 추가되어 있을겁니다.

<!-- CordovaSamplePluginSwift라는 이름의 플러그인을 정의 -->
<feature name="CordovaSamplePluginSwift">
    <!-- name: ios 플랫폼 -->
    <!-- value: CordovaSamplePluginSwift라는 Objective-C 클래스를 사용 -->
    <!-- Swift 클래스가 Objective-C에서 사용될 수 있도록 어노테이션을 사용해서 호환성 충족시켰음. -->
    <param name="ios-package" value="CordovaSamplePluginSwift" />
</feature>

 

---

Simulator Recording

 

 

 

---

참고 및 문서

apache/cordova-plugman github

(https://github.com/apache/cordova-plugman/)

 

Plugin Development Guide

(https://cordova.apache.org/docs/en/11.x/guide/hybrid/plugins/index.html)

 

iOS Plugin Development Guide

(https://cordova.apache.org/docs/en/11.x/guide/platforms/ios/plugin.html)

 

---

코드

Cordova project github

(https://github.com/ehddnr3473/Cordova-Default-Plugin-App)

 

Custom sample plugin github

(https://github.com/ehddnr3473/Cordova-Sample-Plugin-Swift)