Приложения, созданные специально для мобильных устройств, с нами уже более 10 лет. За это время рынок мобильной разработки сильно изменился. Способы, которыми разработчики подходят к созданию приложений, не ограничены, фактически они создали свои собственные способы сокращения времени разработки. Так родилась кроссплатформенная разработка.
Кросс-платформенные, такие как Cordova, Ionic, React Native, Flutter и т. д., привлекают большое внимание, особенно для веб-разработчиков, которые знакомы с HTML, CSS, JavaScript и т. д. Эти платформы также предлагают лучшие возможности для создания нативного опыта для разработчиков.
Сегодня мы узнаем, как создать плагин Apache Cordova с нуля, используя основные возможности HMS.
Необходимое условие
- На нашем компьютере должна быть установлена последняя версия Node.
- На нашем компьютере должна быть установлена последняя версия Visual Studio Code.
- После того, как мы установили Node, мы можем запустить следующую команду с помощью командной строки (cmd) из любой точки нашей среды, чтобы установить Plugman глобально, чтобы он был доступен из любого каталога:
$ npm install -g plugman
-gздесь указывает, что установка Plugman поддерживается во всем мире.
Почему Plugman?
Plugman – это полезный инструмент командной строки для установки, удаления и управления плагинами Cordova. Он поддерживает несколько платформ, таких как Android, iOS и т. д.
Подключим
Сначала мы создаем отдельную папку в нашей системе, где мы хотим создать плагин. После того, как мы найдем отдельное пространство, мы копируем местоположение и открываем командную строку, чтобы перейти в определенное место с помощью команды cd:
$ cd your/specific/location
Создание плагина
Мы создаем плагин, используя команду ниже.
$ plugman create --name HMSPushPlugin --plugin_id com.huawei.hmspushplugin --plugin_version 1.0.0
В приведенной выше команде мы предоставляем
- Название плагина
- Идентификатор плагина
- Версия плагина.
После создания плагина мы используем команду cd, чтобы перейти к местоположению плагина.
$ cd HMSPushPlugin
Добавление платформы
Мы добавим платформу Android, используя приведенную ниже команду.
$ plugman platform add --platform_name android
Создайте package.json
Мы создадим файл package.json, используя приведенную ниже команду.
$ plugman createpackagejson
Ответьте на представленные вопросы, и вы получите package.json, который выглядит так:
Структура папок
После прохождения всей вышеописанной команды структура создания плагина будет выглядеть так:
Plugin.xml — один из самых важных файлов здесь. Это то, что Cordova анализирует, чтобы выяснить, какие платформы поддерживает ваш плагин, какие у него есть настройки, которые может настроить пользователь, исходные файлы, которые мы включим в нашу окончательную сборку приложения, и многое другое.
Теперь, если вы заглянете в папку src, вы можете увидеть собственные коды Android или iOS или обоих.
Наконец, www — это место, где находится код JavaScript для нашего плагина. Это то, что вызывается первым, а затем запускает Cordova для вызова нашего собственного кода.
Ролевая игра Visual Studio Code
Теперь мы открываем код VS, открываем папку с плагином и начинаем изменять файл plugin.xml, где все происходит, и с него мы должны начать в первую очередь.
Измените plugin.xml, как показано ниже:
Если мы хотим изменить идентификатор или имя, нам нужно дать нашему плагину уникальное имя и идентификатор. Что касается соглашений об именах, идентификатор обычно имеет вид это-плагин, например, huawei-cordova-pushkit-plugin.
js-module определяет код JS, который будет выполняться, а ‹clobbers определяет, под какой переменной будет экспортироваться подключаемый модуль. Таким образом, в данном случае наш файл сценария — www/HMSPushPlugin.js, и когда наше приложение запустится, мы сможем получить доступ к подключаемому модулю по адресу cordova.plugins.HMSPushPlugin. >.
Мы указываем платформы, которые будем поддерживать, а также ссылки на соответствующий нативный код для каждой из них. Здесь мы добавили Android в качестве платформы. Внутри ‹config-file› мы указываем имя нашего пакета Android, а также символ, который Cordova будет использовать для идентификации нашего плагина, в данном случае это HMSPushPlugin. Наконец, у нас есть ссылка на наш основной код Java внутри ‹исходного файла›, где находится наш собственный код.
Добавление комплекта HMS Push Kit
Как мы уже упоминали, два ‹исходных файла› в файле plugin.xml. Итак, нам нужно добавить два java-файла в каталог Android.
HMSPushPlugin.java
Сначала нам нужно расширить CordovaPlugin, который требуется для всех настраиваемых плагинов, и переписать метод выполнения.
Параметр выполнения содержит:
- Структурное действие. Класс может предоставлять несколько функций, а действие определяет вызываемую функцию.
- Аргументы CordovaArgs. Веб-сторона передает данные JSON на собственную сторону Android. Массив данных в формате JSON инкапсулирован как CordovaArgs.
- CallbackContext callbackContext.Собственная сторона Android возвращает результат обработки на веб-сторону, используя метод успеха или ошибки.
MessageService.java
Класс MessageService расширяет класс HmsMessageService, переопределяя метод onNewToken в классе HmsMessageService. Класс MessageService используется для:
- Вернуть токен, заявленный для использования устройства Huawei с версией EMUI ниже 10.0.
- Получите обновленный токен с сервера HUAWEI Push Kit.
- Вернуть токен, который был успешно подан при повторной попытке.
Чтобы узнать больше о возможностях HSM Push Kit, прочтите мою предыдущую статью.
API JavaScript
По сути, мы создаем этот плагин для использования другими разработчиками. Итак, в JavaScript API мы напишем те методы, которые хотим предоставить разработчику. В этом случае наш код JavaScript находится в www/HMSPushPlugin.js. Вот как это выглядит:
var exec = require('cordova/exec');
exports.getToken = function (arg0, success, error) {
exec(success, error, 'HMSPushPlugin', 'getToken', [arg0]);
};
exports.getMessageCallback = function (arg0, success, error) {
exec(success, error, "HMSPushPlugin", "getMessageCallback", [arg0]);
};
В этом случае у нас есть getToken и getMessageCallback как функции, которые может вызвать разработчик. Код, который здесь важен, — это функция exec, которую мы импортировали из cordova/exec. При вызове этот подключаемый модуль указывает уровню подключаемого модуля Cordova найти подключаемый модуль, идентифицированный PLUGIN_NAME, и отправить действие, переданное функции переключения.
Вот и все
Наконец мы создали наш плагин.
Что делать дальше?
В следующей серии этой статьи мы интегрируем этот плагин в Ionic Project и посмотрим, как он работает. Мы немного узнаем об Ionic и о том, как мы будем использовать наш плагин для создания push-токена, а также для получения уведомлений с помощью консоли разработчика HMS. Быть в курсе….
