Если стоит задача разработки мобильного приложения для сайта, можете воспользоваться данной заметкой. Постарался сделать ее более менее подробной, но при этом не сильно нудной.
Однако, не буду рассматривать момент с регистрацией учетных записей разработчика в 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
| Код |
|---|
var iab = cordova.InAppBrowser; iab.open(url, '_system'); |
Когда отправляю приложение в 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. А новых версий плагина нет и я так понял именно он не адаптирован и из-за него ошибки?
Что делать? Как вы побеждаете это? :(
Удалите обе платформы и снова добавте, перезапишется и в них
https://github.com/mibazarow/Cordova-Start-Project
Отклонили приложение по пункту Guideline 4.2.2 - Design - Minimum Functionality
| Цитата |
|---|
| Мы заметили, что основная функциональность вашего приложения заключается в маркетинге ваших услуг, при этом интерактивные возможности или функциональность, ориентированные на пользователя, ограничены или отсутствуют. Приложения, которые в основном являются маркетинговыми материалами или рекламой, не подходят для App Store. Мы рекомендуем вам пересмотреть концепцию вашего приложения и работать над созданием приложения, которое предлагает клиентам увлекательный и продолжительный опыт, а также отвечает высоким требованиям App Store к качеству и функциональности. Например, приложение для ресторана должно предлагать больше функциональности, чем стандартный мобильный веб-сайт, включающий номер телефона, адрес и часы работы. Вместо этого следует включить такие функции, как резервирование столиков, мобильный заказ и т.д., которые в настоящее время отсутствуют на мобильном сайте. |
Как я почитал, "Guideline 4.2.2 - Design - Minimum Functionality"одна из самых распространенных причин отклонения, особенно для сайтов-приложений. У меня просто сайт компании с каталогом продукции и услуг на шаблоне для корпоративного сайта от известной компании на маркетплейсе :) Понятное дело там есть заявки через формы и тд.
Может у вас есть какой-то совет как пройти модерацию такому сайту? Добавить какой-то функционал или еще как-то?
Нужно придумывать какую-то полезную функциональность.
Первое что в голову приходить, какой-нибудь калькулятор чего нибудь.
Типа, калькулятор замера стоимости того, что продает компания, с сохранением где-то в кабинете
И воспользоваться
| Код |
|---|
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert('Сработает только в приложении, на готовность устройства');
} |
Запрос на камеру
| Код |
|---|
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> |