Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Создание мобильного приложения на cordova, для любого сайта.

Просмотров: 14152

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

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

Я могу запустить мобильное приложение на базе Вашего сайта или разработать его с нуля.
Заказать разрабоку мобильного приложения

Делаем приложение на 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 и приводим примерно к такому виду (подсказки в комментариях)

 <!-- Версия приложения -->
<?xml version='1.0' encoding='utf-8'?>
<widget id="ru.am.app" version="1.4.2" xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>AppName</name>
    <description>
        My app
    </description>
    <author email="mihail@bazarow.ru" href="https://camouf.ru">
        Mihail Bazarow
    </author>

    <!-- Иконка приложения 1024 на 1024, остальные создадутся из нее -->
    <icon src="src/icomin.png" />

    <!-- Загрузочный экран среднего размера -->
    <splash src="src/iDefault@2x~universal~anyany.png" />

    <!-- Стартовый экран (главная) приложения-->
    <content src="https://site.ru/mobileapp/index.php" />

    <allow-navigation href="https://site.ru/*" />
    <access origin="*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-plugin-device" spec="~2.0.3" />
    <plugin name="cordova-plugin-inappbrowser" spec="~3.1.0" />
    <plugin name="cordova-plugin-statusbar" spec="~2.4.3" />
    <plugin name="cordova-plugin-remote-injection" spec="~0.5.2" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
</widget>

У меня можно заказать разработку мобильного приложения на технологии Apache Cordova, стоимость и сроки по ссылке:
Мобильное приложение

Теперь добавляем платформы, в нашем случае 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-шках
  • Публикуете не как новое, а именно как обновление имеющегося.

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

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

Но вот эти наработочки, могут понадобиться:

  • Pull to refresh - для воспроизведения обновления страницы при протягивании пальцем по экрану сверху вниз
  • Slideout - для имитации боковой панели, выезжающей\заезжающей при протягивании пальцем по экрану слева на право

Видео, создание приложения на Apache Cordova

Это первая серия, все серии выложены в разделе Создание приложения на Apache Cordova

Михаил Базаров 20.06.2020
Если (скорее всего) в процессе импорта проекта в Android Studio получаете ошибку не совместимости с Gradle-7
Перейдите: в Файл -> Структура проекта
И выберите
Anrdoid Gradle Plugin Version = 3.1.4
Gradle Version = 6.0

Можете поиграться с версиями повыше, но с этими точно работает.


Полный текст возможной ошибки
Код
* Get more help at https://help.gradle.org

CONFIGURE FAILED in 34s

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.1.1/userguide/command_line_interface.html#sec:command_line_warnings
Код
Unable to find method 'org.gradle.api.file.ProjectLayout.directoryProperty(Lorg/gradle/api/provider/Provider;)Lorg/gradle/api/file/DirectoryProperty;'.
Possible causes for this unexpected error include:
Gradle's dependency cache may be corrupt (this sometimes occurs after a network connection timeout.)
Re-download dependencies and sync project (requires network)

The state of a Gradle build process (daemon) may be corrupt. Stopping all Gradle daemons may solve this problem.
Stop Gradle build processes (requires restart)

Your project may be using a third-party plugin which is not compatible with the other plugins in the project or the version of Gradle requested by the project.

In the case of corrupt Gradle processes, you can also try closing the IDE and then killing all Java processes.
Julixs 18.08.2020
Спасибо интересный материал, действительно ценник выставленный битриксами немного зашкаливает но как они объясняют это копейки по сравнению со стоимостью нативного приложения.
У меня возник только один вопрос, могу ли использовать для сборки приложения cordova или phone gap если для создания контента я использовал модуль МП битриксов, а так же их методы и классы BitrixMobile, не повлияет ли это на сборку?
Михаил Базаров 19.08.2020
Цитата
Julixs написал:
Спасибо интересный материал, действительно ценник выставленный битриксами немного зашкаливает но как они объясняют это копейки по сравнению со стоимостью нативного приложения.
У меня возник только один вопрос, могу ли использовать для сборки приложения cordova или phone gap если для создания контента я использовал модуль МП битриксов, а так же их методы и классы BitrixMobile, не повлияет ли это на сборку?
BitrixMobile скорее всего не заработает в таком приложении, но я как-то не пробовал и проверить сейчас негде.
Просто, попробуйте подключить его в Header.php и что-нибудь воспроизвести
Михаил Базаров 09.09.2020
Если, при сборке проекта на новой версии платформы ios (6.*.*) получаете ошибку сборки вида:
Код
** BUILD FAILED **

The following build commands failed:
        Check dependencies
(1 failure)
Error code 65 for command: xcodebuild with args: 
------ СОКРАЩЕНО -------
ERROR running one or more of the platforms: Error: /ПУТЬ_К_ПРОЕКТУ/platforms/ios/cordova/run: Command failed with exit code 2
xcodebuild: Command failed with exit code 65
Выполните терминале:
chmod +x /ПУТЬ_К_ПРОЕКТУ/platforms/ios/MeetingPoint/Scripts/copy-www-build-step.sh
Михаил Базаров 02.04.2021
Если используете плагины геолокации и камеры, для ios обязательно использовать описание- для чего используете эти данные.
Иначе приложение не пройдет проверку и будет отклонено.

В config.xml добавляем
Код
    <!-- Geolocation descript -->
    <edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
        <string>Необходимо для улучшения поиска товаров в Вашем регионе</string>
    </edit-config>
    <edit-config target="NSLocationAlwaysAndWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
        <string>Необходимо для улучшения поиска товаров в Вашем регионе</string>
    </edit-config>
    <edit-config target="NSLocationAlwaysUsageDescription" file="*-Info.plist" mode="merge">
         <string>Необходимо для улучшения поиска товаров в Вашем регионе</string>
    </edit-config>

    <!-- Camera descript -->
    <edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
        <string>Необходимо для поиска товаров по штрихкоду</string>
    </edit-config>
Александр 28.10.2022
Добрый день, Михаил.
Очень полезны Ваши статьи и видео по bitrix и cordova. Огромное спасибо за проделанный труд.
У меня вопрос, который не могу ни как решить. Может у Вас есть решение.
По умолчанию все ссылки на скачивание файлов (например PDF) не работают. Т.е. файлы не скачиваются.
Пробовал разные способы, но ни как не могу добиться казалось бы элементарного функционала.
Приходилось ли решать подобную задачу?
Михаил Базаров 28.10.2022
Цитата
Александр написал:
У меня вопрос, который не могу ни как решить. Может у Вас есть решение.
По умолчанию все ссылки на скачивание файлов (например PDF) не работают. Т.е. файлы не скачиваются.

Эсли правильно понял диллему, вам нужно использовать плагин
cordova-plugin-file
Вот тут документация
https://cordova.apache.org/docs/en/11.x/reference/cordova-plugin-file/index.html
Гость 01.11.2022
Да, плагин такой есть. Его я пытался использовать, но безрезультатно.
Объясню более подробно, что я пытаюсь сделать.

Если пользователь заходит на сайт где есть ссылка на скачивание файла, то при клике на эту ссылку начинается скачивание в папку download.
Например тут - https://bazarow.ru/pricenew/    есть ссылка "скачать опросник DOC"

С cordova так не получается. Даже при попытке открыть через cordova-plugin-inappbrowser ни чего не происходит.

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Создать pdf файл из элемента инфоблока, дать скачать пользователю, по... Просмотров: 3901 Задача: при каждом посещении статьи, на сайте, нужно создавать pdf файл с ее содержимым и ... Композитный сайт на 1С-Битрикс Просмотров: 3028 Для новых клиентов: Все новые проекты будут включать в себя применение технологии "Компози... Получение доступа к железу устройства из Битрикс мобильное приложение Просмотров: 5573 Документация к мобильному приложению 1С-Битрикс очень куцая. В основном описывает функцион... Создание блога с комментариями, оценками и просмотрами на сайте с 1С-... Просмотров: 22990 Если на вашем сайте требуется создание раздела с блогом или новостями, статьями. Записям в... Фиксированная корзина с обновлением, без перезагрузки страницы. Просмотров: 17482 Иногда нужно сделать так, чтобы корзина в интернет магазине, созданном на Битрикс, была по... Установить остатки товара на складе из доступных остатков. Просмотров: 4845 Задача, заполнить остатки товаров, в 1С-Битрикс, из параметра "Доступное количество". Следующая/предыдущая новость/статья при просмотре подробной в Битрикс Просмотров: 17522 Дизайн создается только для наглядного и удобного предоставления содержимого сайта, пользо... Кастомизация компонента восстановления пароля bitrix:system.auth.forg... Просмотров: 24736 Достаточно часто спрашивают как кастомизировать компонент восстановления пароля пользовате... Рассылка новинок каталога в автоматическом режиме Просмотров: 1146 Что бы реализовать рассылку новинок каталога на email-ы пользователей, можно воспользовать... Настройка выгрузки товаров в Яндекс Маркет с сайта Битрикс Просмотров: 36654 Настройка выгрузки в Яндекс маркет в формате yml, выполняется достаточно просто, кроме одн... Вывести разделы инфоблока по первым буквам не меняя структуру каталог... Просмотров: 1792 Например: у нас есть инфоблок с большим количеством разделов. И мы хотим, на сайте разбить... XML в формате Commerce ML-2, города России и Мира, для выгрузки в инф... Просмотров: 6285 Подвернулась задачка, создать инфоблок для Битрикс, в котором будут просто города России и... AJAX корзина с отправкой количества из раздела каталога Просмотров: 19096 Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При... Оптимизация jpeg и png картинок на cron, с помощью jpegoptim и optipn... Просмотров: 888 Задача: на сайт каждый день проходит выгрузка из 1С с обновлением картинок. Нужно оптимиз... Пошагово получить информацию о заказах и сохранить как Excel (xls) Просмотров: 506 Задача: Нужно получить информацию о заказах с возможностью указания даты создания "от"" и ... Добавление в избранное или отложенные, на AJAX из карточки товара Просмотров: 27300 В этой заметке рассакажу как добавлять товары в "Отложенные", для иммитации функционала "И... Объединить отдельные поля ФИО в одно свойство при оформлении заказа. Просмотров: 857 Пользователь, при оформлении заказа, заполняет три отдельных поля с фамилией, именем и отч... Отфильтровать товары бренда и вывести по разделам каталога Просмотров: 629 Задача: на странице бренда, который выводится компонентом новостей, нужно показать все тов... Ajax форма обратной связи, реализация в битрикс Просмотров: 7550 Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в... Вывести все разделы в которых находится элемент инфоблока Просмотров: 12971 Если нужно вывести все разделы, со всей доступной информацией о них, внутри элемента инфоб...