티스토리 뷰

코르도바 iOS 플러그인 만들기

Swift Version 5.3
Xcode Version 12.2

회사에서 iOS Framework를 만들어서 코르도바 프로젝트에 적용할 일이 있었는데,
이런 일까지 하게 될 줄은 몰랐을 뿐더러 또 시키면 뚝딱뚝딱 해낼 자신이 없어서 정리하기로 했습니다.

해당 글에는
1. 코르도바 플러그인 만드는 방법
2. 플러그인 기본 언어 Swift로 변경하는 방법
3. 플러그인에 Framework 추가하는 방법
이 포함되어 있습니다.

 

0. Node.js 설치

node 설치 후 아래 내용들을 진행해 주세요.

1. 코르도바 플러그인 만들기

0) Cordova 설치

1
$ sudo npm install -g cordova
cs

1) Plugman 설치

1
$ npm install -g plugman
cs

위 명령어를 통해 plugman을 설치합니다.
플러그맨을 통해 간단하게 코르도바 플러그인을 만들 수 있습니다.

2) Plugin 만들기

1
2
3
$ plugman create --name SamplePlugin --plugin_id com.example.samplePlugin --plugin_version 0.0.1
$ cd SamplePlugin
$ plugman platform add --platform_name ios
cs

 

플러그맨을 이용하여 코르도바 플러그인을 만들고, iOS를 추가합니다.
src 폴더 밑에 ios가 새로 생긴 것을 확인할 수 있습니다.

 

2. Swift로 플러그인 개발하기

1) Swift로 언어 변경하기

./src/ios/에 있는 SamplePlugin.m 파일을 지우고 SamplePlugin.swift 파일을 새로 생성합니다.


./에 있는 plugin.xml 파일에 있는 source-file 태그의 값을 SamplePlugin.swift로 변경합니다.

2) .swift 파일 작성하기

1
2
3
4
5
6
7
8
9
@objc class SamplePlugin : CDVPlugin {
    @objc(test:)
    func test(command: CDVInvokedUrlCommand) {
        // 플러그인 내용 작성하기
        let pluginResult = CDVPluginResult(status: CDVCommandStatus_OK)
        print("SamplePlugin - test")
        self.commandDelegate!.send(pluginResult, callbackId: command.callbackId)
    }
}
cs

새로 만든 SamplePlugin.swift 파일을 위와 같이 작성합니다.

 

    +) 플러그인에서 parameter를 보냈을 경우

1
2
let dataString = command.argument(at: 0as! String
print(dataString)
cs

 

    +) response에 값을 보내고 싶을 경우

1
var pluginResult = CDVPluginResult(status: CDVCommandStatus_OK, messageAsString: 'Hello')
cs

messageAsString 외에도 Int, Array, Bool 등 다양한 리턴 값을 줄 수 있습니다.

 

3) .js 파일 작성하기

1
2
3
exports.test = function(arg0, success, error) {
  exec(success, error, 'SamplePlugin''test', [arg0]);
};
cs

./www/SamplePlugin.js 파일에 위와 같은 함수를 작성합니다.

4) package.json 생성

1
$ plugman createpackagejson .
cs

이렇게 package.json까지 생성이 완료되었다면 아래 4. 플러그인 설치하기 를 통해 플러그인을 설치 후 테스트 해보실 수 있습니다.
만약 framework를 추가하고 싶다면 3. Framework 추가하기 를 따라서 진행해주세요.

 

3. Framework 추가하기

사실 Framework를 추가하는 방법은 굉장히 간단합니다.

./src/ios/에 framework 파일을 추가한 후,

./에 있는 plugin.xml에

1
<framework src="src/ios/CordovaTestFramework.framework" custom="true"/>
cs

를 추가하면 src/ios/SamplePlugin.swift에서 해당 프레임워크를 불러올 수 있습니다.

 

4. 플러그인 설치하기

해당 플러그인을 설치할 코르도바 프로젝트 안에서 아래 명령어를 입력하여 코르도바 플러그인을 추가합니다.

1
$ cordova plugin add --link ./{프로젝트 위치}/SamplePlugin --verbose
cs

 

아래 코드를 입력해 test 함수를 실행시켜볼 수 있습니다.

1
cordova.plugins.SamplePlugin.test(data, success, error)
cs

 

+ 깃헙에서 다운로드 받기

예제에 사용한 플러그인을 깃헙에 올려두었습니다.

플러그인 예제를 테스트 하실 분들은 깃헙에서 코드를 받으신 후, 4. 플러그인 설치하기 를 진행해 주세요.

해당 플러그인에서 테스트할 수 있는 함수는 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
cordova.plugins.SamplePlugin.test(success, error)
// 정상적으로 진행되는 함수로, Xcode 창에서 "SamplePlugin - test" 로그를 볼 수 있습니다.
 
cordova.plugins.SamplePlugin.frameworkTest(success, error)
// import한 프레임워크 내부의 함수가 불러집니다.
// Xcode 창에서 "This Log is from Framework!", "SamplePlugin - frameworkTest" 두 가지의 로그를 볼 수 있습니다.
 
cordova.plugins.SamplePlugin.parameterTest('Parameter', success, error)
// 'Parameter'로 보내진 값을 읽어들이는 함수입니다.
// Xcode 창에서 "Parameter", "SamplePlugin - parameterTest" 두 가지의 로그를 볼 수 있습니다.
// Parameter 대신 다른 값을 넣을 경우 해당 값이 첫 번째 로그로 보입니다.
 
cordova.plugins.SamplePlugin.successTest(success, error)
// success 함수에 메세지를 담아 보내는 함수입니다.
// Xcode 창에서 "SamplePlugin - successTest" 로그를 볼 수 있습니다.
// success function의 argument로 "Successfully Run" 값이 전달되며, 아래 함수로 확인할 수 있습니다.
// ex) cordova.plugins.SamplePlugin.successTest(function(success) { console.log (success) }, function(fail) { console.log(fail) })
 
cordova.plugins.SamplePlugin.errorTest(success, error)
// fail 함수에 메세지를 담아 보내는 함수입니다.
// Xcode 창에서 "SamplePlugin - failTest" 로그를 볼 수 있습니다.
// error function의 argument로 "Error Occurred" 값이 전달되며, 아래 함수로 확인할 수 있습니다.
// ex) cordova.plugins.SamplePlugin.successTest(function(success) { console.log (success) }, function(fail) { console.log(fail) })
cs

 

 

참고
https://cyberx.tistory.com/197
https://www.dynamsoft.com/codepool/cordova-plugin-custom-ios-framework.html
https://medium.com/@JordanBenge/how-to-write-an-ionic-cordova-plugin-in-swift-8d443430b27d

댓글