как превратить веб сайт в мобильное приложение
Конвертируем сайт в приложение за 3 мин.
Перевести сайт в мобильное приложение можно двумя способами. Первый способ, это установка среды разработки «Android Studio», к ней же понадобится установить дополнительные пакеты и Java SDK. Всё это занимает не один ГБ, требует достаточно мощный компьютер и самую малость знаний программирования.
Второй способ воспользоваться онлайн сервисом и сделать конвертацию сайта в приложение за 3 минуты без каких-либо программ и программирования. Этот способ я сегодня и покажу Вам. Кстати, сайт делает сразу 2 версии: под IOS и Android.
Онлайн конвертация
Первый раз, я встретил сайт «GoNative» несколько лет назад. Тогда все аналоги были платные и этот меня приятно удивил. Я сделал себе приложение с любимым онлайн кинотеатром для Андроид ТВ Бокса. Недавно, мне понадобилось опять за пару минут сделать приложение из сайта и найти этот сайт оказалось проблемой, а все аналоги по-прежнему платные. Всё же я его нашел, теперь хочу поделится с вами и показать, как произвести конвертацию.
Чтоб получить приложение, делаем следующее:
По большему счету, если Вам приложение необходимо только для личного использования, достаточно заполнить первые 3 поля: 1 — адрес сайта; 2 – название приложения; 3 – почта, на которую придет приложение.
Собственно, больше рассказать нечего. Ваше приложение готово к установке на любое устройство. Если есть какие-то вопросы – всегда отвечу в комментариях!
Превращаем статический сайт в мобильное приложение с помощью jQuery Mobile и PhoneGap
jQuery Mobile
Первым делом убираем все лишнее (меню, футер и т.д.) и основной контент помещаем в стандартный шаблон в data-role=«content».
Нужно не забыть перед сборкой файлы js и css поменять на локальные версии.
Меню же можно поместить на стартовую страницу index.html в виде аккордеона состоящего из collapsible-set и listview
У jQuery Mobile есть несколько тем [a-e] и атрибутом data-theme мы указали какую хотим использовать. «b» — синяя.
Если на сайте используются модальные диалоги, то их можно реализовать следующим образом. На страницу помещается блок
по нажатию на которую будет открываться диалог.
Если на странице необходимо какое либо доп меню, то его можно поместить в header справа. Сам заголовок при этом сместить влево, иначе кнопки будут на него наезжать.
Тут используется контрол кнопки data-role=«button» у которой используется иконка data-icon=«gear» без текста data-iconpos=«notext»
Собственно это вся основа что мне потребовалась для моего приложения. Со всеми остальными контролами можно ознакомиться на сайте
view.jquerymobile.com/1.3.2/dist/demos
PhoneGap
Следующий шаг — запаковать все что получилось в apk.
Сначала устанавливается nodejs.org, после ставиться сам phonegap
Создаем приложение HelloWorld
Все html файлы кладутся в папку www, index.html стартовая страница.
Для сборки приложения есть два варианта.
1)Скачать Android SDK и при запуске phonegap build будет использоваться локальная окружение. Главный плюс установки SDK — можно будет исползовать эмулятор Android, но у него есть и минус, он достаточно тормозной.
2)Использовать сервис build.phonegap.com — основная задача которого как раз состоит в том что бы разработчику не нужно было настраивать окружение для сборки под разные платформы. То есть, не устанавливая sdk Android, Windows Phone вы можете собрать apk, xap и т.д. Вопрос только останется на чем их тестировать. Минус у этого варианта появляется если у вас больше одного приложения. Так как бесплатно доступна сборка только одного приватного проекта.
Что бы собрать приложение с помощью build.phonegap.com запускаем
Плагины.
Если вам требуется что то непосредственно от телефона, например доступ к камере или файловой системе, то об этом нужно сообщить с помощью специальной команды. Например у меня звук проигрывается с помощью html audio, но в андроиде с ним существуют проблемы, поэтому пришлось использовать Media плагин, так же для получения локали пользователя для выбора язык интерфейса нужен плагин Globalization.
Устанавливаем cordova
И соответственно запускаем команды в папке приложения
Список установленных плагинов можно получить командой
Добавляем в html ссылку на cordova.js
Теперь например можно получить локаль. Доступ к апи нужно производить после события deviceready.
Иконки и заставки
В папках «www\res\icon\android\» «www\res\screen\android\» расположены соответственно иконки и заставки. По умолчанию там лежать картинки с логотипами PhoneGap, поэтому неплохо бы заменить их на собственные. Так же общая дефолтная иконка лежить в www\ и называется icon.png
Файл конфигурации
Файл config.xml лежить в папке www, в нем нужно указать id приложения, версию приложения, название, описание и автора.
Релиз версия
Что бы собрать версию apk которую можно будет опубликовать в Google Play, нужно создать файл keystore с помощью утилиты keytool.exe из JDK и загрузить на build.phonegap.com. Запускаем rebuild и получаем TestApp-release.apk
Google Play
Создаём приложение, вносим описание, загружаем логотип и скришоты. Заливаем apk и жмем опубликовать. Все, приложение готово.
Как сделать приложение из веб-сайта
Разработчики популярных веб-ресурсов стараются сделать все возможное, чтобы клиентам было комфортно потреблять предоставляемый контент. В частности, нередко можно встретить, что из сайта они создают отдельное приложение. С помощью приложения можно информировать посетителей о новинках, если подключить всплывающие уведомления, либо использовать его как метод дополнительного продвижения. В общем, преимуществ у такого подхода много.
Что для этого нужно, сложно ли сделать такое приложение и какие знания для этого потребуются? Поговорим об этом в сегодняшней статье.
Зачем создавать из сайта приложение
Мы давно привыкли говорить «веб-приложение», подразумевая под этим простое приложение. Чаще всего приложения похожи по функциональности на обычные мобильные версии сайта, но все-таки есть некоторые отличия. В полномасштабном приложении мы получаем доступ к различным функциям, которые на сайте попросту отсутствуют. Например, это может быть функция встроенных уведомлений, хотя сейчас и такое можно спокойно организовать через браузер.
Приложения из сайтов популярны среди новостных ресурсов и других веб-сайтов, насыщенных контентом. Если вы столкнулись с тем, что вам нужно конвертировать сайт, но до сих пор не уверены, нужно ли вам это, то давайте разбираться в преимуществах такого подхода.
Что для этого нужно?
Разработка собственного приложения из веб-сайта – довольно сложная задача, которая требует особых знаний в области программирования. Для самостоятельного изучения вы можете найти много гайдов по данному вопросу, но не факт, что они легко дадутся. В этом деле довольно много нюансов, которые будут посильны только специалисту.
Если самостоятельно сделать его не получается, то надо ли непременно искать программиста? Да, но только тогда, когда нужен высококачественный продукт со своими фишками. В противном случае можно обратиться к онлайн-сервисам, которые выполняют конвертацию сайта в приложение всего за несколько минут. Кроме того, если ваш сайт работает на CMS WordPress, то его можно легко преобразовать в приложение. Сделать это можно с помощью специальных сервисов и плагинов, распространяющихся как в бесплатном, так и платном доступе.
Лучшие сервисы для создания приложения из сайта
Обратите внимание на то, что ни один бесплатный сервис не сможет обеспечить высокую функциональность вашему приложению. Обычно они предназначены для того, чтобы сделать что-то простое, приближенное к демоверсии. Если нужно получить функциональный продукт для широкой аудитории, то лучше обратиться к специалисту либо к платным сервисам.
Подробнее о них мы и поговорим далее – рассмотрим как профессиональные решения, так и более простые.
Tadapp Native
Tadapp Native – это лучшее решение для тех, у кого нет времени ждать. Сервис заверяет, что может создать приложение для Android и iOS всего за 5 минут и бесплатно опубликовать его в Google Play. Единственное, с чем могут возникнуть проблемы, так это с адаптацией сайта. Если ее нет, то конвертация, вероятнее всего, пройдет некорректно.
Особенности:
Стоимость: от 890 рублей
Ссылка на официальную страницу: Tadapp Native
Appmaker
Appmaker – сервис с 14-дневным пробным периодом, во время которого пользователю предоставляется возможность создать из сайта полноценное приложение на платформе iOS или Android. Appmaker предлагает 3 варианта создания приложений: на WordPress, c WooCommerce и в виде Web App (веб-версия). На официальном сайте можно найти истории успешных компаний, которые использовали данный сервис.
Особенности:
Официальная страница: Appmaker
Appverter
Особенности:
Официальная страница: Appverter
AppPresser: плагин для WordPress
Особенности:
Официальная страница: AppPresser
MobiLoud: плагин для WordPress
MobiLoud – это еще одно решение для веб-ресурса, созданного на WordPress. Он очень похож на предыдущий сервис, но здесь есть некоторые отличия. MobiLoud предоставляет несколько «предустановок» приложений, которые можно использовать в зависимости от того, какие функции необходимо реализовать. Второе отличие – стоимость, и она заметно выше.
Особенности:
Официальная страница: Mobiloud
Создаем приложение из сайта
Лучшие сервисы мы рассмотрели, теперь давайте воспользуемся одним из них и попробуем создать приложение на основе веб-сайта. Для примера возьмем сервис Appmaker с бесплатным пробным периодом.
Чтобы сделать приложение, выполним следующее:
Как только создание приложения будет завершено, будет предоставлена ссылка на скачивание файла. На этом все!
Как превратить сайт в приложение или что такое Progressive Web Application (PWA)
Если вы часто или циклично взаимодействуете через сайт со своими клиентами, партнерами или коллегами, то наверняка задумывались о создании мобильного приложения.
Но зачастую разработка приложения — это дорого и долго. К тому же продвигать и поддерживать его также затратно. Поэтому многие откладывают создание приложения до лучших времен.
А что, если превратить в приложение уже имеющийся сайт? Это возможно с помощью технологии Progressive Web Application или PWA.
Благодаря PWA пользователи могут установить сайт себе на смартфон: работать он будет как мобильное приложение, а на экране телефона появится иконка для быстрого доступа. Также PWA-сайт можно установить как приложение на десктоп.
Progressive Web Application – это гибрид сайта и приложения. Создать его можно как с нуля, так и на основе существующего сайта.
О преимуществах и недостатках этой технологии для бизнеса рассказывает маркетолог студии «Иквадарт» Татьяна Гаврилова.
Работает без интернета. Даже в офлайне пользователи могут читать контент и отправлять формы. Данные из формы сохранятся и поступят на сервер, когда у пользователя появится интернет-соединение.
PWA может отправлять push-уведомления. Таким образом можно привлекать внимание к своему бренду, возвращать пользователей на сайт, стимулировать повторные продажи.
Шаг 1: Пользователь открывает сайт в браузере и соглашается сохранить его на главный экран.
Шаг 2: На рабочем столе устройства появляется иконка для быстрого доступа. Теперь сайт доступен пользователю всего в один клик.
Шаг 3: Сайт открывается без интерфейса браузера и выглядит как мобильное приложение.
Многие известные сайты уже имеют функциональность PWA. Например, twitter.com, web.telegram.org, aviasales.com, unsplash.com. Пример PWA-сайта для малого бизнеса: myclean.by. Откройте любой из этих сайтов в мобильном браузере Chrome, чтобы протестировать, как работает PWA.
Заметили, что для установки PWA-сайта не понадобилось заходить в App Store или Google Play? В отличие от мобильного приложения, PWA не нужно регистрировать в магазинах приложений.
PWA не нужно регистрировать в App Store и Google Play
Для бизнеса это означает экономию. Во-первых, не нужно платить App Store и Google Play за размещение; во-вторых продвигать и поддерживать PWA дешевле, чем мобильное приложение.
Пользователю же не нужно идти в магазин приложений, чтобы оттуда скачать PWA.
При этом PWA можно добавить в Google Play с помощью функции TWA (Trusted Web Activities), а значит сайт получает дополнительную площадку для распространения.
PWA можно добавить в
Google Play
Конечно, для некоторых бизнесов PWA не может стать полноценной заменой мобильному приложению. Возможностей у нативного мобильного приложения больше.
Но если вам достаточно перечисленных выше преимуществ, PWA-сайт может стать для бизнеса хорошей и значительно более дешевой альтернативой приложению.
Кроме стоимости разработки, у PWA есть еще несколько плюсов в сравнении с нативным мобильным приложением:
PWA весит значительно меньше мобильного приложения
В первую очередь, PWA подойдет компаниям, чьими услугами клиенты пользуются часто или с определенной периодичностью, например, раз в месяц. Так, PWA принесет пользу сервису доставки еды, салону красоты, клининговой компании, интернет-магазину. Также PWA подойдет онлайн-медиа.
PWA подойдет
интернет-магазину, сервису доставки еды, онлайн-медиа
Многие бренды уже воспользовались возможностями PWA и вот каких результатов они достигли:
BMW: в 3 раза увеличилась скорость загрузки сайта.
Lancôme: на 17% увеличилась конверсия сайта, и на 84% снизилось время загрузки сайта на смартфонах.
Больше примеров того, как бренды используют PWA, вы сможете найти здесь:
Конечно, у PWA есть и недостатки. Например, есть ряд ограничений на iOS:
К другим недостаткам можно отнести то, что у PWA есть ограничения в работе с железом. Например PWA еще не научилось работать со сканером отпечатков пальцев, датчиками приближения, ограниченно работает с Bluetooth.
Сравнить PWA с мобильным приложением и сайтом вы можете с помощью таблиц ниже.
Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 2/2: Trusted Web Activity
В первой части мы превратили наш сайт в Progressive Web App. Там же было сказано, что совсем недавно, 6 февраля 2019 года, Google предоставили простую возможность выкладывать PWA в Google Play при помощи Trusted Web Activity. Всё, что нужно сделать, это написать небольшую обёртку под Android, которую можно будет выложить в Google Play. Когда пользователь скачает такое приложение-обёртку, оно просто будет открывать наше PWA внутри Chrome. Конечно же, интерфейс Chrome будет спрятан и всё будет выглядеть красиво.
Если вы, как и я, никогда не писали приложений под Android, то дальнейшее вам тоже должно показаться чередой магических манипуляций. Но к чему только не прибегнешь, чтобы выложить своё приложение. Поехали!
Android Studio
Для начала скачиваем впервые в жизни Android Studio. Создаём новый проект и при этом выбираем «Add No Activity».
Далее конфигурируем свой проект:
Для Package name рекомендуется формировать название следующим образом: стартовая страница skorochtec.ru/app превращается в ru.skorochtec.app.
Конфигурация приложения и зависимости
Созданный проект имеет следующую структуру:
Нам нужно будет изменить AndroidManifest.xml, styles.xml (папка res/values) и оба файла build.gradle.
Также рекомендую в папках res/drawable и res/mipmap задать иконку приложения, иначе у вашего приложения будет стандартная иконка Android.
Некогда объяснять, просто скопируйте это себе 🙂
А вот тут нужно дать некоторые пояснения:
Скопируйте это, поменяв package в теге (в самом верху).
Создание подписанного приложения
Создаём новое хранилище ключей и сам ключ в нём:
И наконец собираем и подписываем приложение:
Ура! Наш APK готов к выпуску!
Google Play Console
Google как бы намекает, что мы криворукие и скорее всего потеряем свой ключ подписи, а значит не сможем потом обновлять приложение. А потому нам предлагают, чтобы мы подписывали наш APK, а вот конечное приложение уже подписывалось самим Google-ом. Рекомендую принять это условие.
Digital Asset Link
Не заметили ничего подозрительного в предыдущих действиях? Для создания приложения мы по сути использовали только адрес нашего сайта… Тогда что нам мешает прямо сейчас выпустить приложение, например, Twitter?
А мешает Digital Asset Link, который мы должны разместить на своём сайте, чтобы доказать, что у приложения и сайта один владелец (на основании ключа подписи приложения).
Готово
Вот и всё! Выпускаем наше приложение, ждём несколько часов, пока Google его одобрит и, в конце концов, наслаждаемся его присутствием в Google Play Market!
Кстати, красивые картиночки экранов можно сделать в https://apptoolkit.io/.
Заключение
Что ж, мы прошли полный путь от сайта до приложения, он был не очень лёгким, но и не очень сложным. Технологии PWA и TWA ещё очень молодые и имеют ряд недостатков. Например, выпущенное таким образом приложение не откроется у пользователя, если Google Chrome версии 72+ не является браузером по умолчанию на его смартфоне. Так что готовьтесь пожертвовать частью пользователей ради скорости выпуска.
В App Store выложить приложение таким образом пока нельзя. Ну и в целом Apple отстаёт в плане поддержки этих технологий (надеемся, что не намеренно). Но область Progressive Web App быстро развивается и улучшается, поэтому можно надеяться, что в скором времени все мобильные браузеры станут её поддерживать, а существующие недочёты будут исправлены.
Как бы то ни было, я верю, что будущее за Progressive Web App и призываю вас становиться ранними последователями этой технологии. Благо инструкция для этого у вас теперь есть.