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

Просмотров: 1951 | Комментариев: 1

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

Однако, не буду рассматривать момент с регистрацией учетных записей разработчика в 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 и приводим примерно к такому виду (подсказки в комментариях)

	<!-- Версия приложения -->
<?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>

Теперь добавляем платформы, в нашем случае 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

Необходимо войти что бы оставить комментарий:
Михаил Базаров
Если (скорее всего) в процессе импорта проекта в 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.

Авторизация

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