Как написать свой Cordova плагин для iOS приложения на Swift

Что нужно для работы

Все просто: раз мы работаем под iOS, у Вас должен быть MacOS (можно и хакинтош) и среда разработки Xcode (для сборки и эмуляции iOS приложения). Если последнее предложение Вас деморализовало, то добро пожаловать в iOS разработку. Собрать iOS приложение (да и вообще провести эмуляцию) можно только имея MacOS и Xcode. На момент написания этой статьи еще никто не придумал способ как это обойти.

P.S: Написать плагин Вы сможете и без этих инструментов и технологий… но зачем? Его же все равно нужно проверить, а для этого собрать приложение, а для этого нужен Xcode и MacOS.

Создаем свой Cordova плагин

Все, хватит прелюдий, поехали! В данном “уроке” мы реализуем плагин Echo из документации Cordova.

Рекомендуем читать документацию на английском, русская версия – это просто перевод через Google Translate с английского на русский.

Создавать плагин мы будем с помощью специальной утилиты от Cordova – Plugman. Поэтому, сначала установим его с помощью менеджера пакетов npm, который идет вместе с Node.js.

Для установки Plugman используем эту команду в терминале:

npm install -g plugman

Если у Вас не настроены права (а они скорее всего не настроены), то добавьте sudo перед командой.

Теперь открываем терминал по адресу какой-нибудь папки и создаем плагин специальной командой:

plugman create --name EchoTest --plugin_id maxim-kolmogorov-echo-test --plugin_version 0.0.1

Перейдем в папку с помощью команды:

cd EchoTest


Вызовем в терминале команду pwd (на Windows вроде просто cd без параметров), чтобы узнать адрес папки плагина (внутри файловой системы) и создадим package.json специальной командой:

plugman createpackagejson “путь до папки (результат pwd)”

И опять, если что используйте команду sudo. Скорее всего MacOS и Linux не позволят создать данный файл без прав супер-администратора. И путь указывайте без кавычек!

Без package.json мы не добавим сам плагин в уже существующий Cordova проект, у нас вылезет ошибка. Поэтому данный пункт обязательный. Можете просто через npm init создать этот файл, наверно, разницы не будет.

Теперь, у вас внутри папки EchoTest должно быть подобное содержимое как на скриншоте ниже. Также, мы не зря запечатлели содержимое plugin.xml, потому что мы его сейчас поменяем.

Пожалуйста, замените содержимое plugin.xml на это:

Особо внимательные заметили, мы лишь поменяли содержимое тега clobbers. Clobbers – это что-то вроде первого элемента в цепочке вызовов, с помощью команды echotest.functionName – мы будем творить магию, вызывать наш плагин.

Реализуем JavaScript интерфейс для плагина Cordova

Сейчас мы чуть-чуть попишем на JavaScript, нам обязательно нужно написать код, который будет запускать наш нативный плагин. Для этого, в папке www у нас появился, при создании плагина, файл EchoTest.js с таким содержимым:

Давайте перепишем его вот так:

Здесь мы экспортируем функцию echo, которая запускает нативный код через функцию exec(): Objective-C/Swift класс EchoTest и функцию echo внутри.

Добавляем нативный функционал на Swift

Для начала снова нужно модернизировать plugin.xml. Нам нужно добавить атрибут platform как дочерний элемент plugin с некоторыми параметрами. Вот готовый код:

Замените содержимое plugin.xml на это.

Теперь идем в папку src и создаем там еще одну папку ios с файлом EchoTest.swift. Содержимое EchoTest.swift:

И мы наконец-то видим то, зачем здесь собрались. Давайте быстро пробежимся по файлу.

Тут мы создаем класс EchoTest c единственной функцией echo. Сам класс EchoTest наследуется от CDVPlugin. Подробней уже читайте здесь.

Также Вы можете спросить: «А зачем здесь есть примесь Objective-C – @objc(EchoTest)?» Как написано в документации Cordova, после запуска плагина Cordova ищет Objective-C плагин, поэтому нам нужно сделать наш Swift код доступный для Objective-C. Сложно? Ну есть такое.

Далее никаких “секретов” нет, обычный Swift. На 4 строке мы готовим результат работы плагина. Мы всегда должны возвращать объект класса CDVPluginResult по окончанию работы нативного кода. С помощью CDVPluginResult Cordova может отследить статус работы плагина: успешное выполнение или произошла ошибка.

На 10 строке мы проверяем, не пустое ли мы отправили сообщение из JavaScript интерфейса. Если нет – то создаем стандартный объект UIAlertController для вывода уведомлений. Ну и отображаем его через ViewController, который унаследовали от CDVPlugin.

На 24 строке мы создаем асинхронность в главном потоке, которая сработает через пару секунд (мы отключим уведомление).

На 31 строке мы обновляем статус работы плагина. Если все хорошо, мы вернем CDVCommandStatus_OK.

На 37 строчке с помощью self.commandDelegate!.send() мы даем сигнал Cordova об окончании работы. По умолчанию у нас записан статус работы плагина как ошибочный – CDVCommandStatus_ERROR (на 4 строке). Если код с 10 строки будет выполнен без ошибок, то результат станет CDVCommandStatus_OK (на 31 строке перезапись).

Создаем мост между Swift и Objective-C

Плагин Cordova, над которым мы работали, реализован на Swift, но исходный код Cordova для iOS написан на Objective-C. Грубо говоря, нам нужно как-то разрешить коду подключаемого модуля на Swift получить доступ к нужным ему объектам Cordova, которые написаны на Objective-C.

Для этого используется файл “мост”. Мост – это Objective-C файл (Bridging-Header.h) внутри проекта, в котором импортируются модули Cordova. Правда, в данной статье мы мост создавать не будем, потому что автору лень (это еще одна статья в статье), да и есть уже готовый плагин (у самой Cordova), который все сделает за нас. Вот ссылка на него. Чуть позже мы покажем как его установить.

P.S: Для любителей все делать руками оставим ссылку на документацию. С помощью этого (английской версии обязательно) Вы сможете создать мост без всяких плагинов самостоятельно.

Проверяем плагин

Ну что, давайте проверим наш плагин. Для этого создадим чистый Cordova проект для тестирования:

cordova create testapp com.swiftecho.testapp TestApp

После перейдем в папку с проектом с помощью команды:

cd testapp

Внутри папки с проектом добавим плагин, который автоматически будет создавать файл-мост между Swift и Objective-C:

cordova plugin add cordova-plugin-add-swift-support --save

Теперь добавляем iOS платформу в наш проект:

cordova platform add ios

И наш плагин (без кавычек путь):

cordova plugin add “путь до плагина в Вашей файловой системе”

Например, у меня это выглядит так: cordova plugin add /Users/maximkolmogorov/Desktop/Swift/Cordova_Plugins/EchoTest

Теперь идем в папку www/js. Ищем файл index.js. Вставляем следующее содержимое вместо прошлого:

На самом деле мы просто добавили вызов нашей функции echo (9 строчка) через цепочку вызовов echotest (про это мы в начале статьи говорили).

Как видите, в случае успеха мы вставляем текст “YO BRO!” через innerHTML в документ (если он выходит в виде уведомления). В случае ошибки мы выводим ошибку через innerHTML.

Давайте проверим наш код, для этого соберите проект:

cordova build ios

И проведите эмуляцию:

cordova emulate ios

Поздравляем, Ваш первый Swift плагин для Cordova готов!

Каких-то проблем со сборкой и эмуляцией быть не должно, особенно если Вы уже имели опыт в создании iOS приложений. Если в статье есть опечатка или что-то не понятно, напишите в комментариях, автор постарается помочь.