Как установить cordova на windows

Обновлено: 02.07.2024

В этом руководстве показано, как настроить среду разработки SDK для создания и развертывания приложений Cordova для Windows 8.1, Windows Phone 8.1 и универсальной платформы приложений Windows 10. В нем показано, как использовать инструменты оболочки для создания и создания приложений или кроссплатформенный интерфейс Cordova CLI. (См. Обзор для сравнения этих вариантов разработки.) В этом разделе также показано, как изменить приложения Cordova в Visual Studio. Независимо от того, какой подход вы используете, вам необходимо установить Visual Studio SDK, как описано ниже.

Разработчики, желающие использовать Windows Phone 8, должны использовать платформу wp8, подробности см. В Руководстве по платформе Windows Phone 8 (Внимание, платформа wp8 устарела).

Cordova WebViews, работающие в Windows, полагаются на Internet Explorer 11 (Windows 8.1 и Windows Phone 8.1) в качестве механизма рендеринга, поэтому на практике вы можете использовать мощный отладчик IE для тестирования любого веб-контента, который не вызывает API Cordova. Блог разработчиков Windows Phone предоставляет полезные инструкции о том, как поддерживать IE вместе с сопоставимыми браузерами WebKit.

Требования и поддержка

Для разработки приложений для платформы Windows вам понадобится:

32- или 64-разрядная версия Windows 8.1 ( выпуски Home , Pro или Enterprise ) с минимум 4 ГБ ОЗУ вместе с Visual Studio 2015 или Visual Studio 2013. Пробная версия Windows 8.1 Enterprise доступна в Microsoft Developer Network .

Для эмуляторов Windows Phone - Windows 8.1 (x64) Professional Edition или выше, а также процессор, который поддерживает Client Hyper-V и преобразование адресов второго уровня (SLAT) .

Для разработки приложений для Windows 10:

  • Windows 8.1 или Windows 10, 32- или 64-разрядная, а также Visual Studio 2015 или новее.

Совместимость приложений определяется операционной системой,на которую нацелено приложение.Приложения совместимы вперед,но не назад,поэтому приложение,нацеленное на Windows 10,не может работать на 8.1,но приложение,собранное для 8.1,может работать на 10.

Приложения Cordova,предназначенные для Windows,могут быть разработаны на Mac,как с помощью виртуальной машинной среды,так и с помощью Boot Camp для двойной загрузки раздела Windows 8.1.Проконсультируйтесь с этими ресурсами,чтобы настроить необходимую среду разработки Windows на Mac:

Установка Требований

Установите любой выпуск Visual Studio, соответствующий требованиям к версии, перечисленным выше.

Инструменты и SDK для целевых платформ Windows (UWP,8.1 и т.д.)также должны быть выбраны в программе установки.Их можно найти под заголовком "Windows и Web-разработка".

Конфигурация проекта

Целевая версия Windows

После установки вы должны быть готовы к разработке приложений для платформы Windows. Подробнее см. В разделе « Создание руководства по первому приложению» .

cordova build command produces two packages: Windows 8.1 and Windows Phone 8.1. To upgrade Windows package to version 10 the following configuration setting must be added to configuration file ( config.xml ). --> По умолчанию cordova build создает два пакета: Windows 8.1 и Windows Phone 8.1. Чтобы обновить пакет Windows до версии 10, в файл конфигурации необходимо добавить следующий параметр конфигурации ( config.xml ).

build command will start producing Windows 10 packages. --> Как только вы добавите этот параметр, команда build начнет создавать пакеты для Windows 10.

Соображения для целевой версии Windows

Windows 10 поддерживает новый режим «Удаленный» для приложений Cordova (и приложений HTML в целом). Этот режим дает приложениям больше свободы в отношении использования DOM-манипуляций и общих веб-шаблонов, таких как использование встроенного сценария, но делает это за счет сокращения набора возможностей, которые ваше приложение может использовать при отправке в общедоступный магазин Windows. Дополнительные сведения о Windows 10 и удаленном режиме см. В разделе « Понимание удаленного режима и локального режима ».

При использовании удаленного режима разработчикам рекомендуется применять политику безопасности контента (Content Security Policy-CSP)к своим приложениям для предотвращения атак с использованием инъекций сценариев.

Параметр --appx

--appx parameter: --> Вы можете решить, что хотите создать определенную версию приложения, ориентированную на конкретную ОС (например, вы, возможно, установили, что хотите ориентироваться на Windows 10, но хотите создать для Windows Phone 8.1). Для этого вы можете использовать параметр --appx :

Система сборки проигнорирует предпочтение,установленное в файле config.xml для целевой версии Windows,и строго построит пакет для Windows Phone 8.1.

--appx flag are 8.1-win , 8.1-phone , and uap (for Windows 10 Universal Apps). These options also apply to the cordova run command. --> Допустимые значения для флага --appx : 8.1-win , 8.1-phone и uap (для универсальных приложений Windows 10). Эти параметры также применяются к cordova run .

Развертывание опционов

Для установки пакета Windows:

Для установки пакета Windows Phone:

Эта команда выдаст вам список всех доступных целей:

Это позволяет запустить приложение на определенном устройстве или эмуляторе,в данном случае "Эмулятор 8.1 720p 4.7 дюйма".

Вы также можете использовать cordova run --help, чтобы увидеть дополнительные параметры сборки и запуска.

Использование Visual Studio для развертывания приложения

build commands generate a Visual Studio Solution (.sln) file. Open the file in the File Explorer to modify the project within Visual Studio: --> Создав приложение Cordova, вы можете открыть его в Visual Studio. Различные команды build генерируют файл Visual Studio Solution ( .sln ). Откройте файл в проводнике, чтобы изменить проект в Visual Studio:

CordovaApp component displays within the solution, and its www directory contains the web-based source code, including the index.html home page: --> Компонент CordovaApp отображается внутри решения, а его каталог www содержит исходный веб-код, включая домашнюю страницу index.html :

Проекты для разных версий Windows отображаются отдельно в проводнике решений.Вы можете выбрать целевую версию,щелкнув правой кнопкой мыши на 'решение' (самая верхняя запись в проводнике решений),а затем перейдя в 'Свойства'.Здесь вы можете обновить поле 'Single start up'.Элементы управления,расположенные под главным меню Visual Studio,позволяют протестировать или развернуть приложение:

С локального компьютера выбран, нажмите на зеленую стрелку , чтобы установить приложение на одном компьютере под управлением Visual Studio. Как только вы это сделаете, приложение появится в списках приложений Windows:

Каждый раз,когда вы пересобираете приложение,версия,доступная в интерфейсе,обновляется.

Как только они появятся в списках приложений, удерживая клавишу CTRL при выборе приложения, вы сможете закрепить их на главном экране:

Обратите внимание,что если вы открываете приложение в среде виртуальной машины,вам может потребоваться щелкнуть по углам или по бокам окон для переключения приложений или доступа к дополнительным функциям:

В качестве альтернативы выберите вариант развертывания Simulator, чтобы просмотреть приложение, как будто оно работает на планшетном устройстве:

В отличие от установки на настольный компьютер,эта опция позволяет вам имитировать ориентацию планшета,его местоположение и варьировать сетевые параметры.

ПРИМЕЧАНИЕ . Ознакомьтесь с обзором, чтобы узнать, как использовать инструменты командной строки Cordova или SDK в вашем рабочем процессе. CLI Cordova опирается на кроссплатформенный исходный код, который обычно перезаписывает файлы, специфичные для платформы, используемые SDK. Если вы хотите использовать SDK для изменения проекта, используйте инструменты оболочки нижнего уровня в качестве альтернативы CLI.

Debugging

Visual Studio предоставляет мощные инструменты для отладки вашего приложения. Вы можете обратиться к этой статье, чтобы начать с ней.

Примечание. События возобновления и приостановки не запускаются нормально при отладке приложений с помощью Visual Studio. Это потому, что Windows не приостанавливает ваше приложение, когда оно отлаживается. Единственный способ изменить состояние приложения - использовать параметры «Жизненный цикл» в Visual Studio. События должны работать должным образом, когда приложение запускается на устройстве / эмуляторе без подключенного отладчика.

Подписание приложения

Вы можете узнать больше о подписании и упаковке приложений Магазина Windows на MSDN .

Для правильной упаковки и подписывания приложений Windows требуется всего несколько вещей:

  • Сертификат подписания
  • Идентификационные данные,совпадающие с предоставленным сертификатом подписи

В проекте Windows идентификационные данные хранятся в файле с именем package.appxmanifest.Этот файл заполняется автоматически каждый раз при сборке приложения Cordova.Личность содержит 3 важных поля.

Имя и версия могут быть установлены из config.xml . Publisher может быть предоставлен как параметр сборки или может быть установлен в файле build.json .

Имя и версия также могут быть заданы как специфичные для платформы настройки в config.xml следующим образом:

PublisherDisplayName и DisplayName также могут быть переопределены:

Сертификат подписи может быть предоставлен из CLI или через файл build.json.CLI-флаги,связанные с сертификатом:

Parameter Flag Description
Файл сертификата --packageCertificateKeyFile Путь к сертификату подписания пакета,который будет ассоциироваться с приложением
Печать большого пальца --packageThumbprint Используется для проверки подлинности файла ключа сертификата пакета.При создании файла ключа сертификата это значение будет предоставлено конечному пользователю

В качестве альтернативы,эти значения можно задать с помощью конфигурационного файла сборки (build.json),используя CLI (--buildConfig).Пример конфигурационного файла сборки:

В файле build.json также поддерживается смешивание и сопоставление аргументов и параметров командной строки.Значения из аргументов командной строки будут иметь приоритет.

Создание ключа сертификата

Подписание требуется для распространения и установки приложений Магазина Windows. Этот процесс обычно обрабатывается Visual Studio при развертывании пакета для выпуска. Для этого без Visual Studio нам нужно создавать собственные сертификаты. В этой статье есть инструкции о том, как это сделать.

  • пользователь:Указывает "текущий пользователь" персональный магазин
  • p:Пароль для файла pfx
  • importPfx:Название файла pfx

После установки,следующим шагом будет добавление packageThumbprint и packageCertificateKeyFile в build.json.Чтобы найти packageThumbprint,найдите общее имя,которое вы ассоциировали с сертификатом:

Как только эти окончательные значения будут предоставлены.Cordova должна успешно упаковать и подписать приложение.

флаги MSBuild

--gradleArg on Android, --buildFlag on iOS) you can pass custom flags to MSBuild. To do this you have two options: --> Как и на других платформах ( --gradleArg на Android , --buildFlag на iOS ), вы можете передавать пользовательские флаги в MSBuild. Для этого у вас есть два варианта:

--buildFlag options to cordova build windows or cordova run windows commands: --> добавьте один или несколько параметров --buildFlag в команды cordova build windows или cordova run windows :

buildFlag option to build.json file: --> добавить buildFlag вариант build.json файла:

cordova-windows appends build flags from build.json and CLI arguments in specific order. In particular, flags from build.json are being appended before build flags from CLI, which basically means that CLI flags override ones from build.json in case of any conflicts. --> Обратите внимание, что cordova-windows добавляет флаги сборки из аргументов build.json и CLI в определенном порядке. В частности, флаги из build.json добавляются перед флагами сборки из CLI, что в основном означает, что флаги CLI перекрывают флаги из build.json в случае любых конфликтов.

Список доступных параметров командной строки MSBuild см. В официальном справочнике по командной строке MSBuild .

Рабочий процесс,ориентированный на платформу

Если вы хотите использовать оболочку Cordova,ориентированную на Windows,в сочетании с SDK,у вас есть два основных варианта:

platforms/windows/ directory after you add the windows platform as described below. --> Доступ к ним локально из кода проекта, сгенерированного CLI. Они доступны в каталоге platforms/windows/ после добавления платформы windows как описано ниже.

cordova-windows in this case, within an empty directory. The relevant batch utilities are available in package/bin directory. (Consult the README file if necessary for more detailed directions.) --> Загрузите их из отдельного дистрибутива здесь . Дистрибутив Cordova содержит отдельные архивы для каждой платформы. Обязательно разверните соответствующий архив, в этом случае cordova-windows , внутри пустой директории. Соответствующие пакетные утилиты доступны в каталоге package/bin . (При необходимости обратитесь к файлу README для получения более подробных указаний.)

Эти инструменты оболочки позволяют вам создавать,создавать и запускать приложения Windows.Каждая команда cordova соответствует одному из этих инструментов оболочки.

cordova create HelloWorld is: --> Например, подход shell-tool нижнего уровня, соответствующий cordova create HelloWorld :

cordova build --debug : --> Аналогично для cordova build --debug :

Upgrading

cordova-windows version. --> Обратитесь к этой статье за ​​инструкциями по обновлению версии cordova-windows .

Вспомогательные тосты

cordova-plugin-local-notifications plugin, or any other plugin that is attempting to use toast notifications, add the following preference to your config.xml to enable it to publish toast notifications, unless the plugin makes that change on it's own: --> В Windows требуется декларация о возможности манифеста приложения для поддержки всплывающих уведомлений. При использовании cordova-plugin-local-notifications или любого другого плагина, который пытается использовать всплывающие уведомления, добавьте следующее предпочтение в ваш config.xml, чтобы позволить ему публиковать всплывающие уведомления, если плагин не вносит это изменение самостоятельно. :

Эта опция устанавливает соответствующий флаг в вашем манифесте приложения.Плагины должны выполнять работу,необходимую для настройки внешнего вида отображаемых уведомлений.

Понимание удаленного режима в сравнении с локальным режимом

MSApp.execUnsafeLocalFunction ). --> В Windows 10 появилась новая функция «Удаленный режим» для приложений HTML. До этого приложения Windows 8.1 работали над тем, что теперь называется «Локальным режимом» в Windows 10, в котором приложения HTML имеют полный доступ к собственной поверхности и возможностям Windows API. Локальный режим запрещает встроенный скрипт, чтобы предотвратить атаки с использованием скрипта, которые могут привести к утечке личной информации из-за вредоносного кода. Это также требует от разработчиков, которые выполняют манипуляции с DOM, в явном контексте ( MSApp.execUnsafeLocalFunction ).

Удаленный режим устраняет эти требования,что позволяет использовать немодифицированные библиотеки,такие как jQuery или AngularJS,непосредственно в вашем коде,без каких-либо изменений.Для этого устраняется возможность объявлять определенные возможности при сертификации приложения в Магазине Windows.Удаление этих возможностей обычно не запрещает доступ к определенным функциям,но может потребовать использования другой комбинации API или тактики.

Влияние удаленного режима на возможности

Следующие возможности недоступны при установке приложения удаленного режима в Магазине Windows:

  • enterpriseAuthentication ) --> Аутентификация enterpriseAuthentication ( enterpriseAuthentication )
  • sharedUserCertificates ) --> Общие пользовательские сертификаты ( sharedUserCertificates )
  • documentsLibrary ) --> Библиотека documentsLibrary ( documentsLibrary )
  • musicLibrary ) --> Музыкальная библиотека ( musicLibrary )
  • picturesLibrary ) --> Библиотека picturesLibrary ( picturesLibrary )
  • videosLibrary ) --> Библиотека видео ( videosLibrary )
  • removableStorage ) --> Съемное хранилище ( removableStorage )
  • internetClientServer ) - note that internetClient is still permitted --> Интернет клиент / сервер ( internetClientServer ) - обратите внимание, что internetClient по-прежнему разрешен
  • privateNetworkClientServer ) --> Частный сетевой клиент / сервер ( privateNetworkClientServer )

Каждое из ограничений библиотеки можно обойти, запросив взаимодействие пользователя с файловой системой через средство выбора файлов . Это предотвращает произвольный доступ вредоносного кода к файловой системе.

Возможности Enterprise Authentication и Shared User Certificates специально предназначены для сценариев Enterprise.Эти возможности поддерживаются для частных/предприятельских App Stores,поэтому если вы создаете приложения,которые будут устанавливаться на внутренний механизм установки,вы все равно можете их поддерживать.Однако они не поддерживаются для приложений удаленного режима в публичном магазине Windows Store.Когда вы создаете приложение,нацеленное на Windows 10,если одна из этих возможностей будет обнаружена в манифесте приложения,будет отображено предупреждение.

Прокрутка в локальном режиме

overflow property. --> Хотя прокрутка WebView включена по умолчанию в «Удаленном режиме» и на других платформах, в «Локальном режиме» это не так. Если в «Локальном режиме» требуется прокрутка, ее можно включить с помощью свойства overflow CSS .

Не так давно мне пришлось открыть для себя новую страницу IT - разработку мобильных приложений под Android с использованием платформы Cordova. Полученный опыт я хотел бы изложить в формате, который идеально упростил бы мне вхождение в эту платформу, попадись он мне на тот момент. Имеющиеся в интернете материалы, в том числе на сайте самой Cordova, эту задачу решили неидеально. Сложно сказать, надо ли списывать это на трудности персонального восприятия или на качество материалов. Поэтому на академическую полноту материал не претендует, но может быть полезен, если у кого-то возникнут аналогичные проблемы. В любом случае, замечания по существу приветствуются.

Что такое Cordova и зачем она нужна

Если коротко - это опенсорсный фреймворк, позволяющий писать кросс-платформенное приложение на JavaScript, а все слои ниже как раз призваны обеспечить сборку этого кода в приложение для целевой платформы, будь то Android, iOS, Windows, браузерное приложение или даже экзотическая платформа типа Tizen. В данном конкретном случае будут рассмотрены только сценарии для Android и браузера.

Более подробно о том, "что это и зачем это нужно" - гораздо лучше рассказано на сайте проекта, и конкретно здесь.

А мы пока только добавим картинку из упомянутого источника:


Установка Cordova на Windows

После установки Node.js в командной строке Windows будет доступен вызов пакетного менеджера npm. Теперь надо только взять и установить Cordova с его помощью:

npm install -g cordova

Все, Cordova установлена.

Однако, есть нюанс. Наличие установленной Cordova не означает наличия систем сборки под конечные платформы. И под каждую из платформ, кроме браузера, потребуется установка этих систем. Например, для Android потребуется установка Android SDK и Gradle. Установка этих систем описана в отдельных документах, здесь это рассматриваться не будет.

Создание пустого приложения

Этот шаг тоже не требует каких-то особых знаний.

В командной строке надо перейти в директорию, в которой планируется расположить проект, и выполнить команду:

cordova create test_prj

Будет создан каталог test_prj, в котором будут файлы проекта. Теперь надо перейти в него:

И добавить поддерживаемые платформы:

cordova platform add browser

cordova platform add android

В поддиректории platforms добавятся папки browser и android, содержащие наборы файлов уже под целевые платформы.

Теперь можно собрать тестовый проект, это делается так:

После сборки приложение можно запустить под конкретную платформу:

cordova run browser

Эта команда откроет дефолтный браузер и создаст в нем вкладку с приложением. А если выполнить команду:

cordova run android

То фреймворк установит и запустит приложение на эмуляторе Android-устройства или на живом устройстве, подключенном по USB.

Вот так выглядит дефолтное приложение, создаваемое по умолчанию:


Доработка дефолтного приложения

Отлично, у нас есть приложение, которое жрет память и батарейку, и больше ничего не делает. Прекрасный симулятор существования многих людей на планете, но программа обычно должна реагировать на внешние события. Раз так, то пойдем разбираться с тем, что у нас имеется. Главное, что у нас есть - это поддиректория www в папке с проектом, файл index.html и файл js/index.js внутри нее.

В index.html описан, по большому счету, макет окна, и анализировать его не имеет смысла.

Файл js/index.js тоже простой и очень короткий, если убрать комментарии:

Из него мы можем сделать два основных вывода:

Судя по всему, есть какая-то консоль, куда мы можем делать отладочный вывод. Это упростит отладку в будущем.

Оказывается, дефолтное приложение не просто запускается, а реагирует на внешнее воздействие "DeviceReady". Значит, и мы сможем легко добавить реакцию на другое внешнее воздействие.

Добавляем реакцию на внешнее воздействие

Начнем с простого. У нас уже есть элемент - надпись "Device is ready". Как на любой элемент на HTML-странице, на нее можно добавить обработчик события onClick. После запуска приложения исполняется функция onDeviceReady(). В ней, стало быть, и напишем:

Самой функции у нас нет, но и написать ее недолго:


Теперь рассмотрим, как добавить в интерфейс приложения новые элементы и реакцию на них. Добавим кнопку. Для этого в index.html добавим описание кнопки:

Теперь для нее надо добавить обработчик события 'click'. Для этого в ту же функцию onDeviceReady() дописываем:

И создаем обработчик:

О console.log поговорим в следующем разделе, а пока смотрим, как выглядит теперь окно приложения:



Находим консоль

Это не единственный способ, но простой: в браузере Google Chrome вводим в адресную строку:

После этого у нас появится окошко, в котором можно найти свое отлаживаемое устройство/сессию:



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

Плагины

Что такое плагины в Cordova и зачем они нужны?

В идеологии Cordova плагин - это платформенно-зависимый кусок кода, "обернутый" в JavaScript. Они необходимы, так как многие вещи в "чистом" JavaScript не решить - начиная с банальной работы с файлами.

Подключая плагин, фактически, мы получаем просто несколько доступных нам вызовов. Например, это могут быть функции типа openFile(), writeFile(), readFile(). В плагине есть JavaScript-участок, объявляющий эти функции, и под каждую из поддерживаемых платформ есть отдельная реализация этих функций.

Почему не использовать сторонние плагины?

Кто сказал "не использовать"? Наоборот, использовать сторонние плагины, безусловно, надо. Увы, не на всякую задачу получится найти готовый плагин, не требующий доработок. Рано или поздно придется либо дорабатывать чужой плагин, либо писать свой.

Создание плагина

Для создания плагина удобнее всего использовать утилиту plugman, которую можно установить с помощью того же пакетного менеджера:

npm install -g plugman

Теперь в директории, где хочется создать плагин, надо вызвать эту утилиту со следующими ключами:

plugman create --plugin_id "test.mytest" --name cordova-test-mytest --plugin_version 0.1.0

В текущей директории будет создана папка cordova-test-mytest (то есть, имя папки совпадает с параметром name). В ней будут следующие важные вещи:

Файл www/cordova-test-mytest.js - содержит объявление функций, доступных основному приложению после добавления плагина. По умолчанию будет доступен один метод под именем coolMethod().

Файл plugin.xml, содержащий имя плагина:

Указание на упомянутый выше файл JS:

Поле clobbers определяет префикс, который надо будет использовать в коде основного приложения для обращения к функции плагина. В данном случае для вызова coolMethod() в коде основного приложения надо будет писать так:

Параметры вызова в данном случае не указаны, но это не потому что они не нужны, а потому что мы сейчас не об этом.

В плагине теперь не хватает двух вещей: во-первых, нет поддерживаемых платформ, а во-вторых - конечной реализации его функций. Поскольку статья у нас про приложения для Android - добавим соответствующую платформу. Для этого в корневой директории плагина надо вызвать такую команду:

plugman platform add --platform_name android

Произойдет несколько вещей:

Помимо устранения переносов строк, в файле XML появится элемент platform:

Здесь указаны всякие штуки, важные для Андроида, но на данном этапе нам важно то, что указан исходный файл cordova-test-mytest.java в элементе source-file.

В директории src появится поддиректория android, в которой будет тот самый файл cordova-test-mytest.java.

Как всё это работает, рассказано ниже, в разделе "Вызов функции плагина".

Добавление плагина к приложению

В принципе, мы уже почти все сделали. Для того, чтобы плагин можно было добавить к приложению, нужно только, чтобы он содержал файл package.json с основной информацией о плагине. Его можно написать и руками, но кому охота вникать в его структуру? Поэтому в директории с плагином вызываем:

Дальше программа по каждому из полей package.json спросит, есть ли желание его скорректировать, или оставить дефолтное значение. Мы оставляем дефолтное значение и после того, как package.json создан, переходим в директорию основного проекта и вызываем из командной строки:

cordova plugin add ../cordova-test-mytest

Все, плагин добавлен.

Вызов функции плагина

В конечном приложении мы вызываем функцию следующим образом:

При вызове coolMethod() плагин в конечном счете вызывает метод execute() класса cordova-test-mytest. Тот получает на вход параметр action, который формирует cordova - он совпадает с именем вызванного метода. Можно объявить метод в cordova-test-mytest.js, но не предусмотреть под него действий в if() в методе execute() - тогда его вызов не приведет ни к каким полезным действиям.

Массив параметров вызова метода передается в виде JSON - это аргумент args, который преобразуется в строку путем вызова args.getString(0).

Само "полезное действие" реализовано в отдельном методе coolMethod(), куда передается строка с параметрами вызова и контекст обратного вызова. На самом деле, здесь уже можно передавать любой набор параметров. И даже callbackContext можно было бы не передавать, а вызывать callback-функции, вернувшись в execute() после выполнения coolMethod(). Но это привело бы к загромождению кода, поэтому сделано так, как сделано.

Выше употреблен, но не пояснен термин "контекст обратного вызова" в. Если сильно упрощать, то это набор данных, необходимый для того, чтобы после работы плагина вызвать указанную нами функцию из кода основного приложения. Причем можно указать отдельно функции для удачного и неудачного выполнения функции. Именно для этого в JavaScript-коде основного приложения мы специально объявили successMtd() и errorMtd().

В результате выполнения кода в его приведенном виде мы должны получить alert с текстом "just string example", или с другим другим текстом, который мы передадим в coolMethod. Если же не задавать первый параметр coolMethod(), то тоже получим alert, но из функции errorMtd() - в нем будет текст "Error! Expected one non-empty string argument".

Отладка плагина

Есть два интересных подводных камня, которые у меня отъели энное количество времени. Один из них обойти удалось, а второй - нет.

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

cordova plugin remove plugin.name

А потом добавлять его заново:

cordova plugin add ../plugin_path

Попытка объединить этот набор действий в BAT-файл (а живу я под Windows основное время) привела к интересному эффекту - выполняется первая строка, и BAT прекращает исполнение. Не самое стандартное поведение, но глубоко копать я не стал. Все равно современно и прогрессивно собирать через более продвинутую систему сборки.

Заключение

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

Как идеология - cordova вполне интересна, тут спорить не с чем. Хотя персонально мне, конечно, удобнее и интереснее писать в чем-то ближе к железу. В идеале так и вообще нативный код под ARM.

Совершенно невыносимым (лично для меня, повторюсь) оказалась отладка JS. При сборке ошибки в JS никак не отображаются, и к этому очень сложно привыкнуть приверженцу методологии "собралось - в релиз". Конечно, достаточно приучить себя к использованию отладочной консоли, но это занимаем определенное время.

Интересные нюансы всплывают, когда заворачиваешь в кордову нативный код для Android - об этом, если все сложится, будет отдельный материал.

В этой статье вы узнаете, как реализовать приложение Cordova с нуля в среде Windows и как развернуть приложение на устройстве Android.

1. Установите необходимые инструменты

Вам нужно будет установить 3 инструмента, чтобы создать первое приложение Cordova в Windows:

    : нам нужен комплект разработки Java, установленный на нашем компьютере. : хотя мы не будем использовать Android Studio, рекомендуется загрузить полный пакет, включающий Android Studio и SDK, этот SDK включает в себя инструменты сборки, AVD Manager и SDK Manager. Размер установочного файла составляет около 1,6 ГБ. Загрузите предварительно созданный установщик для вашей платформы Node.js с архитектурой вашей системы (x64 или x86). Установщик может быть MSI или EXE-файл.

Поскольку установка каждого из этих инструментов не требует какой-либо специальной настройки, а только для следования мастеру установки в системе, позаботьтесь об установке и перейдите к шагу 2, когда все будет установлено. Если вы хотите проверить, все ли правильно установлено, вы можете проверить каталоги установки:

Установка JDK

Найдите папку установки (которая обычно есть) и убедитесь, что папка jdk [версия] существует:

Путь установки Java

Кроме JAVA_HOME переменная окружения должна существовать. Если он не был создан автоматически, вам нужно его создать. Как только у вас есть путь установки JDK (с /bin в конце):

  1. Щелкните правой кнопкой мыши Мой компьютер значок на рабочем столе и выберите свойства.
  2. Нажмите на продвинутый вкладку, затем нажмите Переменные среды кнопка.
  3. Под Системные переменные, нажмите Новый.
  4. Введите имя переменной как JAVA_HOME.
  5. Введите значение переменной в качестве пути установки для Java Development Kit (в этом примере будет C:\Program Files\Java\jdk1.8.0_111\bin ).
  6. Нажмите Хорошо.
  7. Нажмите Применять изменения.

Android SDK

Откройте папку AppData, набрав %appdata% в строке поиска Windows или нажав WIN + R:

Папка запуска приложений Windows

Затем перейдите в локальную папку, а затем папка android должна существовать, а внутри должна находиться папка sdk, папка sdk должна иметь следующее содержимое (или аналогично):

Содержимое папки Android SDK

Node.js

Чтобы проверить, правильно ли установлен node.js, должен быть прямой доступ с именем Командная строка Node.js исполняемый файл в меню «Пуск»:

Node.js Меню Пуск Windows

Этот исполняемый файл такой же cmd.exe из окон, однако он запускает следующую команду для запуска: C:\Windows\System32\cmd.exe /k "C:\Program Files\nodejs\nodevars.bat" , Поэтому, если исполняемый файл по какой-то необычной причине, вы можете выполнить предыдущую команду для запуска в окне cmd. Консоль Node должна выглядеть так:

Окно терминала командной строки Node.js

В этой консоли вы будете запускать каждый узел и команду cordova позже.

2. Установите Cordova в Node.js

Продолжите установку Cordova, выполнив следующую команду в командной строке Node.js:

Поскольку Cordova будет установлен в глобальном масштабе, вы можете выполнить команду из любой точки консоли. После завершения установки проверьте версию Cordova, выполнив:

Это должно генерировать следующий вывод в консоли (обратите внимание, что версия Cordova может отличаться):

Cordova Version Консольный вывод

3. Создайте свой первый проект

Теперь, когда CLI Cordova доступен для его использования, мы можем начать с создания нашего проекта. Перейдите с помощью консоли к папке, в которой вы хотите сохранить все свои проекты cordova, с помощью команды CD, в этом случае папка будет расположена в Desktop и будет иметь имя dev-desktop :

Приступить к созданию проекта с использованием cordova create Команда, эта команда имеет следующую структуру:

В этом примере наше тестовое приложение будет песочницей, и мы создадим его, выполнив следующую команду (измените имя пакета в соответствии с вашим именем):

Создание проекта не должно занять много времени, команда создаст папку с именем sandbox и содержание нашего проекта Cordova будет внутри. Теперь перейдите в папку с песочницей, используя:

С помощью этой инструкции вы находитесь с консолью в C:\Users\sdkca\Desktop\dev-desktop\sandbox каждая команда cordova для вашего проекта должна выполняться только тогда, когда вы находитесь в папке вашего проекта с консолью.

4. Добавить платформу в свой проект

Ваш проект Cordova был успешно создан, однако без какой-либо платформы он не будет работать. Вы можете использовать команду cordova platform, чтобы добавить первую платформу в ваше приложение, в этом случае и, как сказано в этой статье, мы собираемся создать наше первое приложение для использования в Android, поэтому мы собираемся добавить платформу Android, используя следующая команда:

Вывод в консоли будет похож на:

Платформа Android Cordova Добавить пример

После установки платформы структура вашего проекта должна быть похожа на:

Кордова проектная структура

Важный: как вы можете видеть на изображении, с последней версией Cordova целевая версия Android равна 24. Это означает, что вам нужно проверить, установлена ​​ли эта версия API в SDK Manager android.

Откройте SDK Manager (обычно находится в папке Android SDK, т.е. C:\Users\\AppData\Local\Android\sdk\SDK Manager.exe ) и проверьте, какие версии установлены:

Android SDK Manager для Windows

Если целевая версия не установлена, перейдите к ее установке и дождитесь завершения установки.

5. Сборка и тестирование

Развернуть приложение Cordova можно двумя способами:

Эмулятор

Чтобы эмулировать ваше приложение cordova в эмуляторе Android, сначала необходимо настроить его в качестве эмулятора. Откройте диспетчер AVD (Android Virtual Device) (обычно находится в папке Android SDK, т.е. C:\Users\\AppData\Local\Android\sdk\AVD Manager.exe ) и создайте новый, если у вас его еще нет.

Прежде чем продолжить создание эмулятора, мы рекомендуем вам (лучше сказать, вам нужно) для установки Intel HAXM. Это может быть автоматически установлено менеджером Android SDK ( C:\Users\\AppData\Local\Android\sdk\SDK Manager.exe ):

Android AVD Manager haxm intel

Пример Android AVD

Если у вас есть видеокарта, отметьте опцию Use Host GPU. Наконец, нажмите «Сохранить», чтобы создать эмулятор, после его создания запустите его. Наш эмулятор с Android 7 выглядит так:

Эмулятор Android 7

Позвольте активировать окно эмулятора и, в качестве последнего шага, создайте приложение и установите эмулятор в качестве цели, используя следующую команду:

Если вы выполните команду, а эмулятор не будет открыт, то он автоматически запустит эмулятор по умолчанию, доступный в AVD Manager (поэтому, чтобы увеличить время разработки, позвольте эмулятору открыться :-)). Начнется сборка приложения, и ваше приложение должно запуститься в эмуляторе:

Android Build Emulator Cordova

Довольно легко, правда?

устройство

Чтобы развернуть приложение на своем устройстве, вам понадобится (за счет избыточности):

  • Мобильное устройство с Android (очевидно, по крайней мере с минимальной версией Android, требуемой для приложения cordova, обычно Android 4.1.2 API 16).
  • USB-совместимый кабель для вашего устройства.

Подключите устройство к компьютеру с помощью USB-кабеля и выполните следующую команду, чтобы создать приложение и выполнить его на устройстве:

Начнется процесс сборки, и приложение будет развернуто на вашем устройстве. Поздравляем, вы только что создали и развернули свое первое приложение Cordova, наконец, мы рекомендуем вам читать документацию кордова для дополнительной информации.

Дополнительно

Есть пара советов, которые могут сделать ваш опыт разработки еще лучше:

Отладка вашего index.html с помощью Chrome

Как всем известно, нет возможности отладить страницу Cordova непосредственно в устройстве. Хотя отладка приложения для Android с помощью Android studio (нативного приложения для Android) довольно проста, отладка приложения Cordova может стать большим кошмаром, если у вас нет нужных инструментов. Вы можете использовать Google Chrome для отладки приложения Cordova так же, как вы отлаживаете веб-сайт в браузере.

Отладка нативного кода в Cordova

Если стоит задача разработки мобильного приложения для сайта, можете воспользоваться данной заметкой. Постарался сделать ее более менее подробной, но при этом не сильно нудной.

Однако, не буду рассматривать момент с регистрацией учетных записей разработчика в AppStore и GooglePlay. Думаю, сможете разобраться самостоятельно. Расскажу только, а сборке самого приложения.

Минусы продукта 1С-Битрикс: Мобильное приложение

У компании 1С-Битрикс, есть собственное решение, для разработки приложений, так и называется: "1С-Битрикс: Мобильное приложение". Его мы использовать не будем ввиду ряда, достаточно критичных минусов:

  • Дороговато: - стоимость лицензии: 47 900 руб. Плюс ежегодные продления за 50% стоимости.
  • Не удобные обновления - если потребуется внести изменения в приложение: иконку, загрузочные экраны, название и.т.д. метаданные. Нужно оформлять заявку на компиляцию, через ТП Битрикс, ждать обработки заявки, потратить время на прохождение авторизаций в маркетах
  • Нет контролируемой гибкости - внутри приложения используются только те плагины Cordova, которые заложил сам Битрикс. Возможности расширить их ассортимент нет (как и избавиться от не нужных)
  • Тяжелый вес - после компиляции и публикации, мобильное приложение весит в пределах 15-35 мегабайт (наше будет в пределах мегабайта)

Делаем приложение на Cordova

Если говорить по простому: Cordova позволяет упаковать любой сайт в мобильное приложение, с дальнейшей публикацией в магазинах приложений AppStore и GooglePlay. Так же Cordova позволяет создавать и настольные приложения для Windows и macOS (включая платформу Electron)

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

В этой заметке рассматриваю разработку, приложения, именно для сайта (магазина, инфоресурса и.т.д.) и только для Android и iOs. Важный момент, это ни как не связано с 1C-Битрикс, "заверуть" в приложение можно абсолютно любой сайт- не важно, на чем работающий.

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

Как сделать приложение на Cordova

Итак. Перво на перво качаем и устанавливаем NodeJS, от него нам нужен менеджер пакетов npm

После установки, выполняем команду в терминале npm install -g cordova - собственно, установит cordova на компьютер.

Устанавливаем Android Studo и Xcode (не доступен для Windows - для iOs можно сделать, приложение, только на macOS)

Создаем папку, в которой будем хранить проекты. Для примера буду использовать /Documents/CordovaProjects и переходим в нее в терминале cd /Documents/CordovaProjects.

Здесь же выполняем команду cordova create AppName ru.appname.app MihailBazarow эта команда создаст проект в директории AppName и названием ru.appname.app

Далее переходим в директорию /Documents/CordovaProjects/AppName, открываем файл config.xml и приводим примерно к такому виду (подсказки в комментариях)

Теперь добавляем платформы, в нашем случае android и iOs
cordova platform add android
cordova platform add ios

Достаточно важный момент: в cordova, поддерживаются плагины, которые позволяют получить доступ к железу и прочим API устройства (камера, GPS, телефонная книга итд). Но, каждый плагин нужно устанавливать отдельно, их достаточно много. Можно установить все, но лучше отсортировать и использовать те которые вам реально нужны, в конкретном проекте.

Плагины устанавливаются командой cordova plugin add НАЗВАНИЕ_ПЛАГИНА

Перечисляю наиболее востребованные, для гипотетического магазина:

  • cordova-plugin-wkwebview-engine - важный плагин, переключает движек рендеринга страниц, на более свежий
  • cordova-plugin-remote-injection - важный плагин, без него не заработают остальные плагины (если открываете контент через веб доступ)
  • yandex-appmetrica-plugin-cordova - appmetrica для Яндекса
  • cordova-plugin-geolocation - геопозиция с GPS датчика
  • cordova-plugin-splashscreen - управление загрузочными экранами
  • cordova-plugin-statusbar - управление статус-баром
  • cordova plugin add cordova-plugin-contacts - обеспечивает доступ к базе данных контактов устройства.
  • cordova plugin add cordova-plugin-device-motion - доступ к акселерометру устройства.
  • cordova plugin add cordova-plugin-firebase - работа с push через firebase
  • cordova plugin add cordova-plugin-android-imei - получение IMEI (Только Андроид)

Осталось собрать приложение, выполняем команду cordova build - на ошибки внимания не обращаем, они нас не интересуют и всю дальнейшую работу делаем в IDE

В Android Studio добавляем проект из папки /Documents/CordovaProjects/AppName/platforms/android здесь можете его скомпилировать в apk или bundle(предпочтительнее) и опубликовать в GooglePlay

В Xcode открываем /Documents/CordovaProjects/AppName/platforms/ios. И тут все сложнее:

  • Проверяем вкладку frameworks: если видим расширения типа AppKit, HomeKit, HealthKit - удаляем их.
  • Проверяем вкладку с иконками: для Apple их нужно много, разных размеров- если какой-то не хватает (будет висеть подсказка)- добавляем
  • Добавляем учетку разработчика и ассоциируем с этим приложением
  • Выполняем архивацию приложения
  • Из архива, отправляем приложение на проверку. Если есть ошибки, выдаст их список в этом же окне- исправляем
  • Если ошибок нет, отправляем на публикацию из этого же окна

Пример приложения созданного по данному способу: в моем портфолио, там же ссылки на магазины (обратите внимание на вес приложения)

Дополнительно

Поле публикации, приложение можно обновлять выпуская новую версию:

  • В config.xml обязательно меняете номер версии. Вносите прочие изменения, если нужны
  • Добавляете или удаляете плагины
  • Производите прочие доработки и изменения
  • Выполняете команду cordova build
  • Компилируете приложение в IDE-шках
  • Публикуете не как новое, а именно как обновление имеющегося.

И еще одна штучка

Я не рассматривал разработку самого контента приложения. Тут, надеюсь все понятно: Просто делаете сайт, который будет открываться внутри приложения.

Читайте также: