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

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

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

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

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

Михаил Базаров 10.01.2023
Цитата
Гость написал:
Тут точно не во времени сессии дело, именно приложение не сохраняет сессию. Может подскажете куда здесь можно копать?

"Сайт" открываете плагином inappbrowser или просто, стартовая страница сайта и есть приложение? Если редирект на нужную страницу плагином, то сессии должны сохраняться- проверил сейчас на iphone.
Евгений 01.02.2023
Михаил, может подскажете как вы побороли открытие внешних ссылок сайта на ios?

Перепробовал разные способы. Указывал им target="_system", делал скрипты типа этого:
Код
$(document).on('click', 'a', function (e) {
   var elem = $(this);
   var url = elem.attr('href');
   if (url.indexOf('https://') !== -1) {
      e.preventDefault();
      alert (1);
      window.open(url, '_system');
      return false;
   }
});
Ничего не получается, на iOS внешние сайты все-равно открываются внутри приложения. :(
Евгений 01.02.2023
Ура, получилось, может кому понадобится:
Код
var iab = cordova.InAppBrowser;
iab.open(url, '_system');
Вот через такое открытие в предыдущем скрипте все работает!
Евгений 01.02.2023
И все-таки без вашей помощи не обойтись..  :)  
Когда отправляю приложение в AppStore, получаю ошибку на почту:
Код
TMS-90809: Deprecated API Usage - App updates that use UIWebView will no longer be accepted as of December 2020.
Instead, use WKWebView for improved security and reliability.
И тут проблема..
Как я понял, в последних версиях кордовы (платформы ios в ней) выпилен UIWebView и не нужно ставить плагин cordova-plugin-wkwebview-engine.
Сейчас версия платформы iOS 6.2.0 и даже если ставить cordova-plugin-wkwebview-engine, оно пишет что плагин работает только с версией ниже 6.0.0:
Код
Plugin doesn't support this project's cordova-ios version. 
cordova-ios: 6.2.0, failed version requirement: >=4.0.0 <6.0.0
Skipping 'cordova-plugin-wkwebview-engine' for ios

Пробовал пройтись поиском по проекту. Все упоминания UIWebView идут в плагине cordova-plugin-remote-injection. А новых версий плагина нет и я так понял именно он не адаптирован и из-за него ошибки?

Что делать? Как вы побеждаете это? :(
Михаил Базаров 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('Сработает только в приложении, на готовность устройства');
}

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

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

Удалить товары из корзины, если есть определенные товары. Просмотров: 1915 Задача: если в корзину добавлены товары с определенным свойством, нужно удалить из корзины... Следующая/предыдущая новость/статья при просмотре подробной в Битрикс Просмотров: 18287 Дизайн создается только для наглядного и удобного предоставления содержимого сайта, пользо... Снять ограничение на количество символов в комментарии к заказу магаз... Просмотров: 12607 Как многим известно, в интернет-магазине на Битрикс имеется ограничение на количество симв... Установить остатки товара на складе из доступных остатков. Просмотров: 6229 Задача, заполнить остатки товаров, в 1С-Битрикс, из параметра "Доступное количество". Сортировка элементов по индексу сортировки значений типа список Просмотров: 11592 Внутри любого компонента есть заранее заложенные поля для сортировки элементов. МОжно сорт... Автоматическая загрузка каталогов из csv файлов в Битрикс Просмотров: 11797 Если требуется настроить автоматический импорт каталогов из csv файлов, от поставщиков. В... Если товар в корзине, поменять кнопку на "В корзине" в новом шаблоне ... Просмотров: 1769 Ранее я уже делал заметку на эту тему. Тогда, мы меняли значение input-а при добавлении то... Самодельная форма добавления элемента на API Битрикс Просмотров: 45279 Компонент iblock.element.add.form написан таким образом, что вы не сможете (не попотев изр... Ссылки для добавления и удаления товара из сравнения в Битрикс Просмотров: 8715 Просто оставляю это здесь, вставка ссылок на добавление и удаление товара из сравнения, ес... Открытие мобильного приложения Apache Cordova по ссылке Просмотров: 1187 Достаточно часто нужно реализовывать открытие мобильного приложения по ссылке. Например: п... AJAX корзина с отправкой количества из раздела каталога Просмотров: 20154 Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При... Заполнение габаритов товара, после обмена с 1С, из свойств элемента и... Просмотров: 11821 Если Ваш интернет-магазин интегрирован с 1С, скорее всего столкнулись с такой проблемой: 1... Fancybox в стандартном шаблоне детальной карточки товара, вместо вспл... Просмотров: 105 Задача: заменить работу с изображениями в стандартном или кастомном шаблоне детальной карт... Добавление и удаление из сравнения на AJAX: Битрикс Просмотров: 18759 Рецепт лежал у меня в закромах, почти о нем и забыл, но тут подвернулся под руку- решил оп... Быстрая отписка от всех рассылок модуля "E-mail маркетинг", в кабинет... Просмотров: 277 Задача: дать пользователям возможность отписаться от всех рассылок "E-mail маркетинга", не... Правильное подключение стилей и скриптов в Битрикс Просмотров: 85235 Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в систе... Свойство: привязка к Яндекс:Картам - вывести из нескольких элементов ... Просмотров: 18668 Предположим, что у вас есть инфоблок со свойством "Привязка к яндекс картам". В этом инфоб... Массово: применить наценку ко всем товарам каталога с пересчетом от б... Просмотров: 6372 Рассмотрим как, в магазине работающем на 1С-битрикс, массово применить наценку на все това... Сравнение двух типов цен для иммитации системы скидок, в Битрикс Просмотров: 6820 Встала задачка, иммититровать систему скидок в интернет магазине на Битрикс. Из 1С-УТ, на ... Определить местоположение пользователя и показать магазины поблизости... Просмотров: 1831 Задача: в мобильном приложении, которое открывает сайт на 1С-Битрикс внутри себя, нужно оп...