конвертировать сайт в мобильное приложение просто
Конвертируем сайт в приложение за 3 мин.
Перевести сайт в мобильное приложение можно двумя способами. Первый способ, это установка среды разработки «Android Studio», к ней же понадобится установить дополнительные пакеты и Java SDK. Всё это занимает не один ГБ, требует достаточно мощный компьютер и самую малость знаний программирования.
Второй способ воспользоваться онлайн сервисом и сделать конвертацию сайта в приложение за 3 минуты без каких-либо программ и программирования. Этот способ я сегодня и покажу Вам. Кстати, сайт делает сразу 2 версии: под IOS и Android.
Онлайн конвертация
Первый раз, я встретил сайт «GoNative» несколько лет назад. Тогда все аналоги были платные и этот меня приятно удивил. Я сделал себе приложение с любимым онлайн кинотеатром для Андроид ТВ Бокса. Недавно, мне понадобилось опять за пару минут сделать приложение из сайта и найти этот сайт оказалось проблемой, а все аналоги по-прежнему платные. Всё же я его нашел, теперь хочу поделится с вами и показать, как произвести конвертацию.
Чтоб получить приложение, делаем следующее:
По большему счету, если Вам приложение необходимо только для личного использования, достаточно заполнить первые 3 поля: 1 — адрес сайта; 2 – название приложения; 3 – почта, на которую придет приложение.
Собственно, больше рассказать нечего. Ваше приложение готово к установке на любое устройство. Если есть какие-то вопросы – всегда отвечу в комментариях!
Как превратить веб-сайт в мобильное приложение с помощью 7 строк JSON
В материале, перевод которого мы публикуем сегодня, речь пойдёт о создании мобильных приложений на базе существующих веб-проектов. Автор этой статьи демонстрирует инструменты, которые позволяют с минимальными усилиями разрабатывать приложения, пользующиеся нативными возможностями платформ iOS и Android и включающие в себя материалы работающих сайтов или локальные ресурсы. Его рассказ начинается с тех самых семи строк JSON-кода, которые позволяют превращать сайты в мобильные приложения.
Превращение веб-сайта в мобильное приложение
Обзор
На рисунке выше показан код, который позволяет превратить веб-сайт в мобильное приложение. В частности, за «превращение» отвечают семь строк JSON, выделенные оранжевым цветом. Оставшиеся фрагменты текста программы описывают возможности, относящиеся к мобильной платформе, на которой выполняется приложение.
Что, если я скажу вам, что для того, чтобы воспользоваться этим подходом, не нужно переделывать сайт, пользуясь неким фреймворком, приближающим внешний вид ресурса к виду мобильного приложения? Более того, что если весь процесс разработки заключается в подключении сайта к мобильному приложению, подобному показанному выше, с помощью обычного URL?
Кроме того, вот ещё один вопрос: «Можно ли, просто редактируя JSON, работать с нативными API, с компонентами пользовательского интерфейса, пользоваться системными переходами между страницами?».
Пока вы размышляете над ответами на эти вопросы, предлагаю взглянуть на то, как выглядит и работает минимальное приложение, созданное с использованием инструментов, о которых я хочу здесь рассказать.
Обратите внимание на то, как я встроил в это приложение страницу с github.com, однако всё остальное — это нативные компоненты, вроде верхней навигационной панели и нижней панели управления. При этом переходы между страницами приложения используют системные возможности. Делается это автоматически и не требует вмешательства в код сайта.
Прежде чем я расскажу о том, как это сделано, у вас может возникнуть вполне резонный вопрос: «Всё это хорошо, но можно ли, пользуясь методом, о котором идёт речь, создать что-то действительно полезное, а не нечто вроде простого «просмотрщика» веб-страниц в контейнере нативного приложения?».
Отличный вопрос. Собственно говоря, ответу на него и посвящена данная статья. Если в двух словах, то суть рассматриваемой здесь методики заключается в создании двустороннего канала связи между контейнером для вывода веб-содержимого и приложением. Приложению это даст возможность вызывать JavaScript-функции, находящиеся в контейнере, а контейнеру позволит обращаться к нативным API, расположенным за его пределами.
Взглянем на пример, иллюстрирующий вышесказанное.
Приложение для создания QR-кодов
Вот основные составные части этого приложения:
И, наконец, обратите внимание на то, что тут показано и взаимодействие компонентов приложения. А именно, QR-код меняется после ввода новых данных. Делается это благодаря возможности вызова JavaScript-функции, расположенной внутри веб-приложения, которая отвечает за создание QR-кодов на основе переданных ей данных.
Надо отметить, что ни один из фреймворков для разработки мобильных приложений не пытался фундаментально решить проблему «прозрачной интеграции веб-контейнеров в нативные приложения», так как все они либо полностью ориентированы на системные возможности мобильных платформ, либо целиком полагаются на HTML5.
Когда говорят о будущем мобильных приложений, обычно всё крутится вокруг вопроса о том, какой из подходов победит: основанный на HTML5 или на нативных API. Что характерно, в подобных рассуждениях не поднимается тема сосуществования этих двух подходов, и, более того, не рассматривается эффект синергии, который, благодаря совместному использованию различных технологий, позволит достигать результатов, которые нелегко достигнуть, полагаясь лишь на что-то одно.
В этом материале я собираюсь рассказать о следующих вещах:
Зачем использовать веб-технологии в мобильных приложениях?
Прежде чем продолжать, давайте сначала поговорим о том, нормально ли это — использовать возможности HTML и JS в мобильных приложениях, и о том, когда может пригодиться подобный подход. Вот несколько ситуаций, когда смешивание веб-технологий с нативными возможностями мобильных платформ может оказаться кстати.
▍1. Использование технологий, созданных для веб
Для реализации некоторых частей приложений может иметь смысл использование веб-технологий. Например, WebSocket — это технология, изначально ориентированная на веб. Для её использования можно применить встроенный в мобильную платформу веб-движок ( WKWebView для iOS и WebView для Android) вместо установки сторонней библиотеки, которая попросту «эмулирует» WebSocket.
При таком подходе не нужно использовать дополнительные библиотеки, достаточно, применяя стандартные технологии, делать то, что нужно. Это ведёт нас к следующей ситуации.
▍2. Уменьшение размеров пакета приложения
Использование веб-технологий в мобильных приложениях помогает делать то, что без этих технологий потребовало бы огромных сторонних библиотек.
Например, для того, чтобы встроить в мобильное приложение генератор QR-кодов, понадобится сторонняя библиотека, которая увеличит размер пакета приложения. Однако если применить для этого стандартное средство для просмотра веб-страниц и JS-библиотеку, подключённую к странице с помощью простой конструкции
Как сделать из сайта приложение и выложить его в 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 и призываю вас становиться ранними последователями этой технологии. Благо инструкция для этого у вас теперь есть.
Как конвертировать сайт в приложение онлайн и бесплатно
Мы понимаем что не все могут себе позволить разработку мобильного приложения на начальных этапах, даже если это такое дешевое решение как конвертировать сайт в мобильное приложение. Кроме того, вам может быть интересно и проще конвертировать сайт в приложение онлайн, на каком-то сайте, чем заказывать разработку, например у нас (если что, заказать можно тут =) ). Здесь мы расскажем как конвертировать сайт в приложение бесплатно.
Речь пойдет об сервисе GoNative, который был запущен в 2014 году. Не так давно компания так же запустила другие сервисы для мобильных и веб-разработчиков.
Порядок действий
Первым делом переходим на главную страницу сервиса. На поле для ввода напишите адрес вашего сайта и нажмите кнопку Build.
GoNative – онлайн конвертация сайта в приложение
Далее мы переходим на вторую страницу, где все не намного сложнее. Есть три поля:
После нажатия на Start Building my App вам откроется целый список выпадающих меню, где будут различные настройки приложения по категориям.
Обратите внимание что настройка включает в себя сразу обе платформы, Android и iOS. Поэтому при конвертации сайта в приложение вы должны учитывать разность этих платформ, но собственно говоря там есть подсказки.
Онлайн конвертация сайта в приложение
В деталях все рассматривать не будем, так как там все описано что нужно. Кратко по разделам:
Для того что бы бесплатно конвертировать сайт в приложение нам не нужно все заполнять. Достаточно оформить пару разделов.
Настройка иконки и стартового экрана
Переходим в раздел General Styling и загружаем нашу иконку, желательно 1024 на 1024 пикселя.
Далее идем ниже и нажимаем кнопку Generate для генерации экранов запуска.
Настройка имени пакета
Далее если мы не планируем публиковать приложение, можем пропустить данный пункт. Но для публикации все же понадобится изменить имя пакета на уникальное. Переходим в раздел Build Settings. Пишем вашу строку по примеру (обычно зеркальный адрес сайта).
Теперь нажимаем внизу кнопку Build my app и вас перекинет на страницу с информацией о приложении. Тут будет отображаться прогресс конвертации сайта в приложение онлайн.
Теперь вам на почту придут ссылки. Открываем первую и попадаем на страницу с превью ваших приложений. Здесь же есть ссылки на скачивание готовых файлов или исходников.
Вы можете скачать файл нажав Download Android APK, после этого использовать по своему усмотрению, публиковать на Google Play либо распространяя у себя на сайте.
Заключение
Вы смогли конвертировать сайт в приложение онлайн и бесплатно, а так же самостоятельно. Для некоторых задач такое решение подойдет вполне. Но если вы хотите хорошие результаты и более качественное приложение из сайта, обращайтесь к нам, мы писали статью о том, почему Appverter лучше.
Важно!
Приложение под iOS. Вы сможете конвертировать сайт в приложение iOS, использую вышеописанный сервис, но опубликовать такое приложение вы никогда не сможете!
Сервис предоставляет публикацию их приложения, но за приличную стоимость в 650$ ну и само собой обязательно вам нужно будет оплатить саму лицензию за 790$. Это минимальный набор, в итоге составит 1440$. Так же у них есть сервис «под ключ» за 4790$.
Мы с радостью сообщаем вам, что мы делаем все то же самое и под ключ за намного меньшую стоимость! И все это с гарантией публикации, без всяких лицензий, рекламы и прочего.
Конвертировать сайт в мобильное приложение просто
Для решения всех этих проблем существуют разные сервисы, которые возьмут на себя все эти заботы при конвертации сайта в мобильное приложение. Один из таких мы сегодня рассмотрим.
На мой скромный взгляд, лучшим среди сервисов для создания отлаженных webview является https://siteconverter.businessapp.trade/
Созданные при его помощи приложения, выходят далеко за рамки привычных webview, а цена значительно ниже.
Вот основные функции, которые поддерживают получающиеся приложения:
Самое главное к данному приложению есть панель управления! Для чего нужна панель управления webview приложением? Если не брать в расчёт ролики на ютубе, то окажется, что вебвью это не так уж и просто.
Например, BottomNavigation, которое свяжет нижнее меню со страницами сайта, можно отредактировать. Но, если у вас нет такой панели управления, то вам придётся перекомпилировать приложение, а затем выложить обновление на google play. Конечно, это потребует от вас времени и лишних телодвижений.
Что бы избавить вас от таких трудностей и разработана данная админ-панель. Вы заходите в настройки, прописываете нужные пункты меню, иконки и ссылки. Всё. В приложении автоматически появляется новое меню.
Далее, стили вашего сайта могут измениться. Если сегодня с вашим сайтом отлично сочетался синий StatusBar, то, после изменений на сайте, может потребоваться изменить стиль в приложении. И тут опять на помощь придёт панель управления. Заходите в раздел стилей, выставляете цвет, который подходит вашему сайту, и он тут же появляется в приложении.
WebView контейнер — ЭТО НЕ БРАУЗЕР. Это надо понимать. Если на вашем сайте в браузере Safari под MacOS один вид видеоплеера, то в вебвью он может быть другим. Так же, стоит отметить особенности Web Push. В приложении не работают вебпуши. Нато они и веб, чтобы работать в браузере. Точно так же, как они не работают в NW.JS или Electron, или в Cordova. Это не значит, что пушей не будет. Это означает что рассылку надо вести через панель в Firebase console или OneSignal.
Если у вас сайт, который рассылает “индивидуальные уведомления”, в зависимости от событий на нём, то понятное дело что они не сработают. Для того чтобы такие пуши работали, нужно связать БД пользователей с приложением и написать backend сайта, который будет рассылать их через FCM для Android. Но, это особый случай. Если у вас подобный сайт со сложной системой, то скорее всего вам потребуется дополнительная доработка, которая не входит в рамки данной статьи.