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

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

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

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

Михаил Базаров 01.02.2023
Вот тут скачайте, замените этот модуль в своем проекте, просто перезаписав в папке plugins
Удалите обе платформы и снова добавте, перезапишется и в них

https://github.com/mibazarow/Cordova-Start-Project
Евгений 02.02.2023
С вашей помощью дошел-таки до последнего этапа и все обломали модераторы Эппл.

Отклонили приложение по пункту Guideline 4.2.2 - Design - Minimum Functionality
Цитата
Мы заметили, что основная функциональность вашего приложения заключается в маркетинге ваших услуг, при этом интерактивные возможности или функциональность, ориентированные на пользователя, ограничены или отсутствуют. Приложения, которые в основном являются маркетинговыми материалами или рекламой, не подходят для App Store.

Мы рекомендуем вам пересмотреть концепцию вашего приложения и работать над созданием приложения, которое предлагает клиентам увлекательный и продолжительный опыт, а также отвечает высоким требованиям App Store к качеству и функциональности. Например, приложение для ресторана должно предлагать больше функциональности, чем стандартный мобильный веб-сайт, включающий номер телефона, адрес и часы работы. Вместо этого следует включить такие функции, как резервирование столиков, мобильный заказ и т.д., которые в настоящее время отсутствуют на мобильном сайте.

Как я почитал, "Guideline 4.2.2 - Design - Minimum Functionality"одна из самых распространенных причин отклонения, особенно для сайтов-приложений. У меня просто сайт компании с каталогом продукции и услуг на шаблоне для корпоративного сайта от известной компании на маркетплейсе :) Понятное дело там есть заявки через формы и тд.

Может у вас есть какой-то совет как пройти модерацию такому сайту? Добавить какой-то функционал или еще как-то?
Михаил Базаров 03.02.2023
Тут чую ни как).
Нужно придумывать какую-то полезную функциональность.
Первое что в голову приходить, какой-нибудь калькулятор чего нибудь.

Типа, калькулятор замера стоимости того, что продает компания, с сохранением где-то в кабинете
Евгений 03.02.2023
Эхх, ладно, буду пробовать уже потом тогда с этим сайтом. У нас есть еще интернет-магазин, буду пробовать его добавить в эпстор, он важнее. С интернет-магазинами все проще будет при модерации? Я так понял вы добавляете в основном магазины как раз, как они проходят модерацию?
Гость 08.02.2023
Кто-нибудь знает, можно ли на сайте, запущенном в кордове узнать что он работает сейчас в ней? Через javascritt-хапрос какой-нибудь?
Михаил Базаров 08.02.2023
Можно поставить плагин cordova-plugin-device
И воспользоваться
Код
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    alert('Сработает только в приложении, на готовность устройства');
}
Марина 06.04.2023
Здравствуйте, который день уже бьюсь над задачей, как получить разрешения на камеру? В консоли ошибка: cannot open camera "0" without camera permission. В манифесте и конфиге, вроде, все прописала, что в мануалах советуют, но, все бестолку! Подскажите, пожалуйста))
Михаил Базаров 06.04.2023
Попробуйте так:
Запрос на камеру
Код
navigator.permissions.query({name:'camera'})
  .then(permissionStatus => {
    if (permissionStatus.state === 'granted') {
      // Разрешение на использование камеры уже получено
      // Можно использовать камеру
    } else if (permissionStatus.state === 'prompt') {
      // Разрешение на использование камеры ещё не получено
      // Запросить разрешение
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(() => {
          // Разрешение на использование камеры получено
          // Можно использовать камеру
        })
        .catch(error => {
          // Разрешение на использование камеры не получено
          console.error('Ошибка при запросе разрешения на камеру:', error);
        });
    } else {
      // Разрешение на использование камеры отклонено или недоступно
      console.error('Разрешение на камеру отклонено или недоступно');
    }
  })
  .catch(error => {
    console.error('Ошибка при запросе разрешения на камеру:', error);
  });

В config.xml
Код
<uses-permission android:name="android.permission.CAMERA" />
<feature name="Camera">
  <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>
Алексей 25.09.2023
Здравствуйте. А для публикации в Play Market  не нужен сертификат цифровой подписи? Как это ведется в cordova?
Михаил Базаров 26.09.2023
При сборке в Android Studio его создаете, сохраняете куда-нибудь и подписываете aab перед выгрузкой в маркет.
Потом стараетесь не терять- восстанавливать очень тяжело.