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

Просмотров: 426 | Комментариев: 0

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

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

Скоро

Необходимо войти что бы оставить комментарий:
Решения на битрикс

Магазин, на базе готового решения от 35 900 рублей / от 3 до 5 дней

В стоимость входит: Подбор решения из более 200-от готовых сайтов, под Вашу задачу. Полный запуск сайта на сервере или хостинге, со всеми настройками. Лицензия Битрикс "Малый бизнес". Базовая СЕО оптимизация. Инструкции по работе с сайтом. Небольшие доработки под задачу.
Интернет-магазин от 210 000 рублей / от 5-ти недель Сайт компании от 90 000 рублей / от 4-х недель Инфоресурс от 90 000 рублей / от 5-ти недель Адаптивный сайт от 40 000 рублей / от 2-х недель Персональный сайт от 60 000 рублей / от 3-х недель Мобильное приложение от 200 000 рублей / от 4-х недель
Узнать точную стоимость разработки: Для этого, достаточно, как можно подробнее, заполнить вот этот опросник: Скачать опросник и выслать на электронную почту mihail@bazarow.ru.
Смогу задать уточняющие вопросы и оценить проект по срокам и стоимости.
Решения на битрикс

Магазин, на базе готового решения от 35 900 рублей / от 3 до 5 дней

В стоимость входит: Подбор решения из более 200-от готовых сайтов, под Вашу задачу. Полный запуск сайта на сервере или хостинге, со всеми настройками. Инструкции по работе с готовым решением. Базовая СЕО оптимизация. Запуск готового сайта за 3-4 дня. Небольшие доработки под задачу.

Авторизация

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