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

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

Автор статьи

МАКСИМ КОЛМОГОРОВ

Соучредитель, технический директор vverh.digital

Введение

Всем привет! Сегодня мы покажем как расширить функционал кроссплатформенного мобильного приложение на базе Cordova нативными iOS функциями. Сделаем мы это с помощью самописного плагина на Swift.

Cordova — это фреймворк, который позволяет создавать настоящие мобильные приложения с помощью браузерных технологий.

Создавая свои Swift плагины для Cordova, мы добавляем в “не очень функциональные” JavaScript-приложения самый настоящий нативный (системный) функционал. Например, можно с помощью данного способа добавить Face/Touch ID в свое iOS приложение.

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

Все просто: раз мы работаем под 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, чтобы узнать адрес папки плагина (внутри файловой системы) и создадим package.json специальной командой:

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

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

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

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

Cодержимое plugin.xml

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

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

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

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

Содержимое javascript файла

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

Здесь мы экспортируем функцию 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 приложений. Если в статье есть опечатка или что-то не понятно, напишите в комментариях, автор постарается помочь.


Разработка мобильных приложений


Разработаем мобильное приложение под цели и задачи бизнеса, предоставим полноценный рабочий прототип за 4 дня!

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c
политикой конфиденциальности

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *