Делаем из сайта приложение для Android на конструкторе

Делаем из сайта приложение для Android на конструкторе

Просто, бесплатно, но с рекламой

В Практикуме открылись курсы по мобильной разработке для iOS и Android, а мы рассказываем, что это такое и как всё там устроено. Вот что уже было:

Теперь сделаем следующий простой шаг — сделаем мобильное приложение для Android на основе веб-страницы. Вот что нам для этого нужно знать:

  • Есть нативные приложения, которые делаются для конкретной операционной системы, а есть приложения на основе WebView.
  • WebView — это когда мы внутри приложения выводим готовую веб-страницу, локальную из интернета.
  • Если мобильная версия страницы свёрстана хорошо, то для пользователя она будет выглядеть как полноценное приложение, хотя на самом деле это просто страница.
  • По этой причине часто мобильные версии интернет-магазинов выглядят точно так же, как их официальные приложения — внутри просто стоит WebView и показывает ту же самую страницу.

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

Используем конструктор веб-приложений

Все конструкторы веб-приложений работают плюс-минус одинаково: спрашивают адрес сайта, который надо превратить в приложение и уточняют разные опции. После этого они выдают ссылку на готовый .apk-файл — его можно загрузить себе на телефон или поделиться с кем угодно. Собирается всё за пару минут без программирования.

Мы будем пользоваться бесплатным конструктором AppGeyser — у него устаревший интерфейс, но он работает и делает всё, что нам нужно. У бесплатной версии есть два больших минуса: приложение иногда будет показывать какую-то свою рекламу и его нельзя будет опубликовать в Google Play. Если мы хотим просто попробовать — это не критично, а если будет нужно, то всегда можно купить полную версию.Заходим на главную страницу сервиса и нажимаем Login для регистрации — без этого сервис не отдаст нам готовый файл. Дальше всё стандартно: вводим свою почту, придумываем пароль и нажимаем кнопку Sign up:

Делаем из сайта приложение для Android на конструкторе
Делаем из сайта приложение для Android на конструкторе

Теперь можно создавать своё приложение — для этого нажимаем кнопку Create app в правом верхнем углу экрана:

Делаем из сайта приложение для Android на конструкторе

Нам сразу предлагают популярные категории приложений, из которых нам нужно выбрать Business Website — это как раз про перевод страницы в приложение:

Делаем из сайта приложение для Android на конструкторе

Выбор и загрузка сайта

На этом этапе нам нужно выбрать сайт, который превратится в приложение. При этом важно, чтобы сайт на мобильных тоже выглядел хорошо и мог делать что-то полезное. Под оба критерия подходит наш проект со списком задач на JavaScript, но его ещё нет в интернете — на момент написания статьи у нас не было учебного сайта и хостинга.

Если у вас уже есть сайт в интернете, который вы хотите превратить в приложение — этот раздел можно пролистать и сразу перейти к добавлению сайта.

Перенесём код из нашего проекта в интернет — создадим отдельную страницу и зальём её на хостинг. Если вы не знаете, как это сделать, — вот статья, как опубликовать свой сайт в интернете.

Мы опубликуем страницу на учебном хостинге и дадим ей такой адрес:

https://mihailmaximov.ru/projects/todo/index.html

Делаем из сайта приложение для Android на конструкторе
Проверяем, что страница выглядит хорошо, если смотреть её с телефона

Теперь этот адрес нам нужно вставить в конструктор и нажать Get Content:

Делаем из сайта приложение для Android на конструкторе

Настройка приложения

Конструктор нам предложить добавить разные опции — карту, видео с Ютуба и остальные примочки. Нам это не нужно, поэтому просто нажимаем Next. Ещё можно нажать на превью справа — тогда конструктор попробует подгрузить наш сайт и показать, как он будет выглядеть в приложении. Превью в половине случаев сработает не так, как нужно, но в приложении всё будет выглядеть хорошо.

Дальше конструктор спросит, как будет называться наше приложение. По умолчанию он добавляет туда то, что вписано в название страницы, — это и оставим:

Делаем из сайта приложение для Android на конструкторе

Наконец, конструктор предложит выбрать иконку: использовать стандартную или загрузить свою. На работу приложения это никак не влияет, поэтому оставляем стандартную:

Делаем из сайта приложение для Android на конструкторе

После этого нам остаётся нажать кнопку Create и дождаться страницы с вариантами загрузки:

Делаем из сайта приложение для Android на конструкторе

Загрузка приложения

Делаем из сайта приложение для Android на конструкторе

Вот какие варианты загрузки предлагает конструктор:

  • скачать файл apk;
  • скачать файл aab (то же самое, что apk, но внутри больше всякого разного для установки);
  • скачать по QR-коду;
  • скачать по ссылке в браузере.

Этим файлом уже можно делиться с кем угодно, и можно ставить его на своё устройство, но опубликовать в Google Play не получится — нужно оформлять платный аккаунт в конструкторе. Ещё в приложении иногда будет появляться реклама — это тоже издержки бесплатного сервиса.

Делаем из сайта приложение для Android на конструкторе
Готовое приложение, установленное на старый китайский телефон

Приходите в Практикум на курсы по мобильной разработке для iOS и Android. Выберите какую-то одну платформу, попробуйте себя в бесплатной части и, если зайдёт, становитесь разработчиком мобильных приложений.

Что дальше

Это был простой способ сделать мобильное приложение из сайта. Скоро сделаем сложное, но с полным контролем над каждым этапом и написанием кода — как настоящие мобильные разработчики.

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Виталий Вебер

Рекламный блок «Яндекс Практикума»
Этот рекламный блок сообщает, что после обучения в «Яндекс Практикуме» вы можете получить высокооплачиваемую работу разработчика, тестировщика, аналитика, менеджера и дата-сайентиста.
В конце кнопка
Рекламный блок «Яндекс Практикума» Рекламный блок «Яндекс Практикума» Рекламный блок «Яндекс Практикума» Рекламный блок «Яндекс Практикума»
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Ещё больше полезных CSS-команд
Ещё больше полезных CSS-команд

Короткие и мощные.

hard
Что делать, когда Python сам меняет значения списка
Что делать, когда Python сам меняет значения списка

Детективная история про указатели и память

medium
Модный веб: добавляем эффект параллакса на веб-страницу
Модный веб: добавляем эффект параллакса на веб-страницу

Как на модных лендингах

easy
Как установить базу данных на сервер и начать с ней работать
Как установить базу данных на сервер и начать с ней работать

Храним данные правильно

medium
Uncaught SyntaxError: Unexpected token
Uncaught SyntaxError: Unexpected token — что это означает?

Самая популярная ошибка у новичков.

medium
Uncaught TypeError: Cannot read property — что это означает
Uncaught TypeError: Cannot read property — что это означает

Нельзя прочитать то, чего нет.

medium
Что означает ошибка TypeError: something() takes 0 positional arguments but 1 was given
Что означает ошибка TypeError: something() takes 0 positional arguments but 1 was given

Это когда аргументы появляются там, где их быть не должно

easy
Как сделать цикл без цикла?
Как сделать цикл без цикла?

Разбираем очередной вопрос из собеседований

easy
Простейший математический фокус
Простейший математический фокус

Можно использовать для пикапа или на пьяных вечеринках

easy
Что означает ошибка SyntaxError: missing : after property id
Что означает ошибка SyntaxError: missing : after property id

Используйте двоеточие, если хотите обратиться к свойству объекта.

easy
medium