Приложение из сайта android

Приложение из сайта android

Предупреждаю сразу — эта статья не про SPA и PWA приложения. И даже не про PhoneGap или TitaniumApp. Это обзор небольшого такого сервиса, который помогает в несколько кликов сделать нативное приложение под платформы.

Есть такой сайт appmaker.xyz, который предлагает из сайтов сделать мобильные приложения для iOS и Android. Для сайтов на WordPress и WooCommerce это делается за деньги. Сколько — не знаю, потому что там нужно подавать заявку на демо-версию, созваниваться с менеджерами и что-то обсуждать.

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

Содержание

Мобильное приложение

Первое, чем нас встречает сайт — это предлагает 3 варианта создания приложений: WooCommerce, WordPress и Web App. Про первые два я уже говорил, что платно и нужно общаться с менеджерами по записи, поэтому мы сразу переходим к третьему, к веб-приложению.

Хотя на карточке указано, что можно сделать для iOS и Android, но по факту у нас есть возможность сделать приложение только для гуглофонов. Регистрируемся и начинаем создавать.

Рабочее пространство ну прямо совсем простое и очевидное, поэтому я не буду описывать очевидные моменты. Единственный момент: пункт «Splash Icon» на самом деле является Splash Screen’ом, т.е. экраном, отображаемом при загрузке приложения.

Над примером решил не заморачиваться и сделать свой блог как приложение.

На следующей странице — вкладке «Style» — нам дано выбрать только показывать или не показывать панель инструментов он же тулбар. И если мы его показываем, то нам дано выбрать цвет фона и цвет текста.

Забегая вперед хочу сказать, что этот тулбар будет просто строчкой с названием приложения и никаких инструментов (меню или строка поиска, например) там нет. Возможно, в платной версии будет доступно больше.

Об этом я не знал и поначалу оставил как есть, только поменял цвет. И когда обнаружилось, что тулбар — это просто строка с заголовком, то я вернулся на сайт и скорректировал отображение (т.е. выключил), после чего перекомпилировал. Поэтому у приложения номер версии — 2.

На главной странице есть скриншот, где вкладка Style имеет большее количество настроек, да и самих вкладок чуть больше, чем в бесплатной версии.

Последняя вкладка для нас (в рамках данного обзора) будет малоинтересной по причине того, что два параметра — добавление рекламного блока и push-извещений — включаются за дополнительную оплату, по $5 за опцию. Кроме того, нужно ещё настраивать Firebase, что тоже уходит за рамки обзора. И я этого не делал, поэтому писать про это не буду.

Последний этап — компиляция программы. Процесс занимает где-то 3-5 минут, после чего мы можем скачать готовое приложение. Или загрузить прямо в Google Play, правда для этого понадобится аккаунт разработчика — он платный и стоит $25 (на момент написания статьи).

Итоговый вариант вы можете посмотреть самостоятельно, скачав устаночный файл web-islands.apk (2,8 мб). Я проверил на своём Xaomi — работает нормально.

Приложение для ПК

Мы разобрались с созданием приложения для мобильника, однако это не все возможности, которые предоставляет данный сервис. В подвале сайта, в меню, есть малоприметная и малопонятная ссылка Web2Desk, которая нас ведёт на подсервис по генерации приложений для десктопов.

Здесь всё ещё проще — указываем адрес сайта, название будущего приложения и указываем иконку для него (хотя можно использовать ту, что есть по-умолчанию).

По итогу работы нам будут доступны для скачивания 3 варианта программы — для Windows, Mac и Linux. По факту, они представляют собой оболочку, внутри которой открывается сайт.

Итог

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

Сделать полноценный клиент для онлайн-магазина или социальной сети этот сервис не позволит (во всяком случае в бесплатной версии).

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

Конечно, можно придумать варианты использования. Например, когда у вас есть какое-нибудь внутреннее офисное веб-приложение (CRM, ERM и прочее), заведенное на сервере типа srvintranet.company.com. И вместо того, чтобы открывать эту систему через браузер, можно просто дать ссылку на скачивание программы и логин/пароль.

Надеюсь, мой небольшой обзор был для вас полезен.

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

Для этого вовсе не нужно быть программистом или платить огромные деньги за заказ приложения у профессионалов. Вполне справится и конструктор мобильных приложений — специальный сайт, на котором вы сами можете собрать свое приложение из готовых элементов.

Что такое конструктор мобильных приложений?

Конструкторы мобильных приложений появились относительно недавно — с распространением смартфонов. Разработчики быстро смекнули, что программы для смартфонов очень нужны предпринимателям, чтобы продавать свои товары и услуги, но не все из них могут сделать приложение сами.

Так появились платформы-конструкторы, которые дают любому желающему возможность самостоятельно «склеить» мобильное приложение, как коллаж из фотографий. Их множество и, как правило, все они так или иначе являются платными.

Платформы для создания мобильных приложений различаются между собой набором функций, ценами, а также тем, как с их помощью можно сделать приложение. По последнему признаку они делятся на две основные категории:

  • Генераторы. Это платформы, которые создают мобильное приложение на основе вашей существующей веб-страницы. Вы даете генератору URL своего сайта, и он автоматически создает мобильное приложение с теми же разделами и контентом, что и у вас на сайте.
  • Конструкторы. Это платформы, которые позволяют вам собрать приложение самим из готовых элементов, а контент для него создадут ваши будущие пользователи. В вашем распоряжении будут готовые шаблоны и элементы интерфейса, а также кусочки функциональности, например, геопозиционирование, отправка уведомлений, работа с банковскими картами и многое другое.

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

  • Гибридные (PWA). Это, фактически, приложения под веб, адаптированные по экран мобильного устройства. Они открываются на смартфоне при помощи браузера.
  • Нативные. Это, собственно, приложения, которые устанавливаются в операционную систему мобильного устройства. Нативные приложения наиболее удобны для пользователя и выгодны для предпринимателя.

Создание приложения само по себе может быть бесплатным, зато потом у вас есть два пути. Во-первых, вы можете купить у сервиса его исходники и самостоятельно поддерживать их и распространять приложение. Кроме того, вы можете купить платную подписку, и тогда команда сайта сама опубликует приложение в App Store/Google Play и будет поддерживать его за вас.

Помимо платы за поддержку, вам также придется купить аккаунт в App Store или Google Play, который стоит $99 и $25 соответственно. Чтобы окупить ваши затраты, у многих платформ есть программы лояльности, которые позволяют вам не только сделать приложение, но и зарабатывать на нем — например, подключив рекламу.

Для того чтобы вы могли самостоятельно познакомиться с платформами-конструкторами приложений, расскажем о нескольких из них, доступных на русском языке.

iBuildApp

Крупный зарубежный сервис, доступный на русском языке. Он работает по принципу конструктора на базе шаблонов. На сайте предлагается большая библиотека уже готовых приложений для разных отраслей: образование, развлечения, коммерция, благотворительность и так далее, причем есть шаблоны на русском. Вам нужно всего лишь выбрать наиболее подходящий шаблон и отредактировать его по своему усмотрению.

iBuildApp

Сервис предлагает три тарифа поддержки: Бизнес (2400 р./год, 1 приложение, 500 установок готового приложения), Безлимитный (3700 р./год, 1 приложение, неограниченное число установок) и Корпоративный (27100 р./год, 10 приложений, неограниченное число установок).

Apps Globus

Российский проект, который, пусть и работает со скрипом, но все-таки достаточно активно используется. Он работает по принципу сборки приложения с нуля: вы можете взять пустой шаблон, нарисовать свой дизайн приложения, добавить контент, функции, модули, а затем опубликовать и продвигать приложение. Готовых блоков функциональности сайт, кстати, предлагает множество, от банальной формы для ввода данных до встроенного радио.

Apps Globus

Сайт работает в том числе и по модели «получи исходники и поддерживай сам». У него есть база знаний по разработке, поддержке и публикации приложений, а также форум. Доступно три тарифа: Start (550 р./мес., без исходных кодов, публикация только в Google Play), Studio (950 р./мес., исходные коды клиентской части и публикация в обоих магазинах), Nwicode (19900 единоразово, полные исходники, публикация в обоих магазинах и поддержка в течение года). Во всех трех случаях вы также получаете PWA-приложение.

Mo-Apps

Проект родом из Украины. Он обладает приятным интерфейсом и также работает по принципу конструктора. Вы выбираете тему приложения, редактируете дизайн, а затем добавляете в приложение функциональные модули простым включением переключателей. Доступен набор готовой функциональности для интернет-магазина, кафе, такси и медицинской клиники; к запуску также готовятся наборы функциональности для других сфер бизнеса, например, салона красоты или службы доставки.

Mo-Apps

Создание мобильного приложения бесплатно, но нужно платить за поддержку. Есть тарифы за 50 долларов в месяц и 480 долларов в год. Также доступны программы лояльности: подключение стоит 100 USD в месяц или 500 USD единоразово. Кроме того, доступен ряд дополнительных услуг, вроде платной поддержки приложения разработчиками сервиса.

В целом, самый большой недостаток конструкторов, с помощью которых можно сделать приложение, заключается в том, что их очень мало на русском языке. Самые качественные конструкторы — англоязычные. Если вы владеете языком, можете ознакомиться с некоторыми из них:

  • Buildfire — конструктор мобильных приложений с огромной библиотекой готовой функциональности, но достаточно дорогой поддержкой (от $50 в год);
  • Goodbarber — конструктор мобильных приложений с потрясающе красивыми шаблонами, позволяющий создавать дизайн, близкий к профессиональному;
  • AppyPie — платформа-генератор, способная сделать приложение на базе вашего сайта.

Как создать приложение для Android или iPhone? — таким вопросам все чаще задаются не только веб-разработчики, но и обычные владельцы небольших бизнес-сайтов, блоггеры.

В данном обзоре ТопОбзор предлагает рассмотреть веб-сервисы, которые представляют собой конструкторы для быстрого и удобного создания Android и iPhone приложений. При этом не требуя от пользователя навыков программирования или других специальных ИТ-знаний. Такие приложения незаменимы для разного вида бизнеса — ведь это отличный способ расширить целевую аудиторию и привлечь клиентов.

Таким образом, все рассмотренные в обзоре онлайн-сервисы для разработки приложений можно объединить под лозунгом: просто, быстро и без программирования!

AppsGeyser

AppsGeyser — бесплатный веб-сервис, который позволяет сконвертировать контент вашего сайта в Android приложение и распространить его через Google Play. Кроме того, созданные приложения можно как продавать, так и размещать в них рекламу.
Можно создать неограниченное количество Android приложений из трех типов контента: сайта, просто html-страницы и YouTube видео. Для создания Android приложения AppsGeyser использует простой и наглядный мастер шаблонов.

Сайты AppsGeyser: http://www.appsgeyser.com, http://www.appsgeyser.ru

TheAppBuilder

TheAppBuilder — бесплатный онлайн-сервис для быстрого создания мобильных приложений. TheAppBuilder создает приложения с помощью конструктора и типовых шаблонов — для бизнеса, событий, образования, музыки, спорта и др. Созадние приложения бесплатно, а за 5 у.е. в мес. можно отключить показ посторонней рекламы в созданном приложении. TheAppBuilder позволяет создавать Android приложение, iOS и Windows Mobile.

Сайт TheAppBuilder: http://www.theappbuilder.com

Appsmakerstore

Appsmakerstore — это онлайн-сервис, который позволяет пользователям создавать и публиковать свои собственные мобильные приложения в несколько кликов в интернете. Платформа Appsmakerstore создает мобильные приложения, поддерживаемые HTML5, iTunes, Android Market, Blackberry Marketplace, Windows Marketplace и Facebook без каких-либо глубоких технологических навыков. Это всего 1 приложение для 6 разных платформ. Appsmakerstore предлагается в 23 языках, в том числе на русском и украинском.

Особенность Appsmakerstore в том, что он предлагает на выбор уже готовые шаблоны для определенных индустрий (например, юридические услуги, ночные клубы, рестораны и кафе, торговля, салоны красоты и пр.)

Данный сервис представлен такими планами:

  • «Сделай сам» — $9.78 в месяц.
  • «Мы делаем приложение для Вас» — $249
  • «Reseller»- специальная цена, которую нужно узнавать на сайте отдельно.

Всегда включено во все планы:

  • Неограниченное количество изменений контента и обновлений приложения.
  • Обновление контента приложения на iTunes и Google Play без необходимости повторной публикации.
  • Отправлять неограниченное количество push уведомлений пользователям.
  • Автоматически получать и пользоваться всеми обновлениями системы.
  • Безопасный хостинг на наших серверах.

Сайт Appsmakerstore: http://appsmakerstore.com

Biznessapps

Biznessapps — платный онлайн-конструктор мобильных приложений (iPad, Android, HTML5) для небольшого бизнеса. Среди возможностей — геолокация, получение и отправка сообщений, корзина для товаров, уведомления, интеграция с соцсетями, размещение информации о меню, наборе услуг, предстоящих событиях и др. Есть шаблоны для ресторанов, риелторов, гимнастических залов и др.

Данный сервис представлен такими планами:

  • «Мобильный сайт» — $29 в месяц.
  • «Мобильное приложение» — $59 в месяц
  • «White Label Partner» создание приложений для Ваших клиентов — специальная цена, которую нужно узнавать на сайте отдельно.

Сайт Biznessapps: http://www.biznessapps.com

AppGlobus

AppGlobus — платный, один из российских онлайн конструкторов мобильных приложений, позволяющий пользователям самостоятельно создать и опубликовать своё приложение в App Store и Google Play.

AppGlobus использует новый дизайн и возможности Ionic Framework, что значительно улучшает качество разработки, и даёт возможность создавать мобильные приложения на HTML5, iOS, Android даже без навыков программирования.

На данный момент AppGlobus предлагается на 8 языках, в том числе на русском.

AppGlobus.com предлагает следующие пакеты:

  • STARTAP — 900 руб./мес.
    • Приложения: HTML5/Android, админ панель, магазин, нет ограничений на Push, нет ограничений на установки, нет рекламы.
  • BASIC — 1500 руб./мес
    • Приложения и для Android и для iOS, админ панель, магазин, нет ограничений на Push, нет ограничений на установки, нет рекламы.
  • STUDIO — 2000 руб./мес
    • Приложения: Windows/Android/ iOS, админ панель, магазин, нет ограничений на Push, нет ограничений на установки, нет рекламы.
  • PRO — 45000 руб./единоразово
    • Приложения: Windows/Android/ iOS, разработка на заказ, сами разместим в App Store и Google Play, отдадим исходный код

Сайт AppGlobus: http://appglobus.com/

My-apps.com

My-apps.com — платный онлайн-сервис для создания своего мобильного приложение для бизнеса или личного пользования. Никаких специальных умений не требуется. Хорошо подходит для небольшого бизнеса, например, интернет-магазинов. Чтобы создать свое приложение, понадобится всего 5 минут – нужно всего лишь выбрать необходимые модули и дизайн. Есть английская и русская версии.

My-apps.com предлагает такие пакеты:

  • Старт — 599 руб./мес.
    • приложения только для Android, доступ к конструктору, бесплатные шаблоны и иконки приложений, обновления контента каждые 48 часов, обновления исходника приложения в сторах самостоятельно не чаще 1 раза в 2 месяца.
  • Лайт — 990 руб./мес
    • приложения и для Android и для iOS, доступ к конструктору, бесплатные шаблоны и иконки приложений, базовые скриншоты приложения, Push уведомления — 1 в месяц, обновления контента каждые 24 часа, обновления исходника приложения в сторах 1 раза в 2 месяца.
  • Стандарт — 2490 руб./мес
    • приложения и для Android и для iOS, доступ к конструктору, бесплатные шаблоны и иконки приложений, базовые скриншоты приложения, поддержка по Skype, Push уведомления — 10 в месяц, обновления контента каждые 12 часов, обновления исходника приложения в сторах 1 раза в месяц.
  • Бизнес — 9890 руб./мес
    • приложения и для Android и для iOS, доступ к конструктору, бесплатные шаблоны и иконки приложений, базовые скриншоты приложения, поддержка по Skype и е-мейл, персональный менеджер, Push уведомления — 50 в месяц, обновления контента -мгновенно, обновления исходника приложения в сторах — без ограничений.
  • VIP — 3999 руб./мес +150 000 руб. инсталляционный платеж

    • приложения и для Android и для iOS, доступ к конструктору, бесплатные шаблоны и иконки приложений, базовые скриншоты приложения, поддержка по Skype и е-мейл, персональный менеджер, Push уведомления — неограничено, обновления контента -мгновенно, обновления исходника приложения в сторах — без ограничений.

Сайт My-apps.com: http://my-apps.com

iBuildApp предоставляет платформу «сделай сам” для создания iPhone/Android приложений , которая так же не требует навыков программирования. Данный сервис предоставляет для каждой организации простой способ создания мобильных (iPhone, iPad, Android) приложений и публикационных материалов. Клиенты могут создать собственные каталоги, флайеры, брошюры, отчеты, резюме и пр. и предоставлять их с помощью SaaS-решения. Есть английская и русская версии.

iBuildApp предоставляется в таких пакетах:

  • Бизнес (2400 рублей в месяц) — 3000 установок, неограниченное количество просмотров мобильного сайта, отсутствие встроенной рекламы, публикация приложения на iTunes и Google Play.
  • Корпоративный (3700 рублей в месяц) — Неограниченное количество установок, неограниченное количество просмотров мобильного сайта, отсутствие встроенной рекламы, публикация приложения на iTunes и Google Play.

Сайт iBuildApp: http://ibuildapp.com

Viziapps

Viziapps — онлайн-сервис для разработки приложений (iPhone, iPad, Android). Позволяет создавать приложение на основе одного из множества шаблонов приложений. Элементы создаваемого пользовательского интерфейса приложения могут быть связаны с такими функциями, как отправка электронной почты, SMS-сообщения, отправка на сервисы Facebook и Twitter.

Пакеты:

  • Developer — $33 в месяц. (можно создать только 1 приложение)
  • Professional — $79 в месяц.
  • Premiun- $129 в месяц.
  • Enterprise — Цену нужно узнавать отдельно.

Все пакеты поддерживают такие платформы: IOS (iPhone/iPad) & Android (Phone/Tablet)

Сайт Viziapps: http://www.viziapps.com

AppsBuilder

AppsBuilder — онлайн-редактор, позволяющий создавать приложения для iOS, Android и Windows Phone. Пользоваться ей очень просто: собственную программу можно собрать из уже готовый частей. Несмотря на то что AppsBuilder старается быть более простым и понятным для неопытных пользователей, в него добавлены и некоторые возможности для программистов: к примеру, можно дополнять созданные приложения собственными Java-скриптами.

Есть три платных пакета, в которых есть везде 30 дней — бесплатная пробная версия:

  • Starter (49 евро в мес.) -1 приложение.
  • Regular (199 евро в мес.) -до 5 приложений.
  • Scalable (от 249 евро в мес.) — более 5 приложений.

Сайт AppsBuilder: http://www.apps-builder.com

Mobile Roadie

Mobile Roadie — один из старейшин в онлайн-сервисах для создания приложений для iPhone, Android, iPad и Mobile Web. Особенность Mobile Roadie в том, что он ориентирован, прежде всего, на шоу-бизнес. Он предлагает шаблоны для актёров и музыкантов, режиссёров и продюсеров, а также маркетинговых и PR-агентств, но в принципе набор инструментов позволяет создать приложение и для других типов бизнеса. Среди клиентов — Мадонна, Cirque du Soleil и зоопарк Сан-Диего. Есть шаблон для создания приложения под событие или конференцию, возможность продавать билеты, доступ к статистике. Вообще, функциональный набор очень широк, впрочем, и цена немаленькая:

  • Core — $149 в месяц.
  • Pro- $799 в месяц.
  • Enterprise — $24K

Сайт Mobile Roadie: http://mobileroadie.com

AppMakr

Appmakr — онлайн-сервис для создания приложений для iPhone, Android, Windows Phone.

В этом сервисе очень просто и быстро можно создать своё мобильное приложение. Цены более чем демократические. И что характерно, так что во всех пакетах нет рекламы.

  • App Basics- $2 в месяц.
  • App Pro — $12 в месяц.
  • Reseller — $499.

Сайт Appmakr: https://www.appmakr.com/

BuildFire

BuildFire — онлайн-сервис для создания собственных приложений для iPhone, Android, Windows Phone.

Особенность данного онлайн-сервиса в том, что создание приложений совершенно бесплатно, плата берется когда приложение публикуется в каталогах и составляет $49 ежемесячно.

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

Превращение веб-сайта в мобильное приложение

Обзор

На рисунке выше показан код, который позволяет превратить веб-сайт в мобильное приложение. В частности, за «превращение» отвечают семь строк JSON, выделенные оранжевым цветом. Оставшиеся фрагменты текста программы описывают возможности, относящиеся к мобильной платформе, на которой выполняется приложение.
Что, если я скажу вам, что для того, чтобы воспользоваться этим подходом, не нужно переделывать сайт, пользуясь неким фреймворком, приближающим внешний вид ресурса к виду мобильного приложения? Более того, что если весь процесс разработки заключается в подключении сайта к мобильному приложению, подобному показанному выше, с помощью обычного URL?
Кроме того, вот ещё один вопрос: «Можно ли, просто редактируя JSON, работать с нативными API, с компонентами пользовательского интерфейса, пользоваться системными переходами между страницами?».
Пока вы размышляете над ответами на эти вопросы, предлагаю взглянуть на то, как выглядит и работает минимальное приложение, созданное с использованием инструментов, о которых я хочу здесь рассказать.
Минимальное приложение
Обратите внимание на то, как я встроил в это приложение страницу с github.com, однако всё остальное — это нативные компоненты, вроде верхней навигационной панели и нижней панели управления. При этом переходы между страницами приложения используют системные возможности. Делается это автоматически и не требует вмешательства в код сайта.
Прежде чем я расскажу о том, как это сделано, у вас может возникнуть вполне резонный вопрос: «Всё это хорошо, но можно ли, пользуясь методом, о котором идёт речь, создать что-то действительно полезное, а не нечто вроде простого «просмотрщика» веб-страниц в контейнере нативного приложения?».
Отличный вопрос. Собственно говоря, ответу на него и посвящена данная статья. Если в двух словах, то суть рассматриваемой здесь методики заключается в создании двустороннего канала связи между контейнером для вывода веб-содержимого и приложением. Приложению это даст возможность вызывать JavaScript-функции, находящиеся в контейнере, а контейнеру позволит обращаться к нативным API, расположенным за его пределами.
Взглянем на пример, иллюстрирующий вышесказанное.
Приложение для создания QR-кодов
Вот основные составные части этого приложения:

  1. Нативный навигационный заголовок, поддерживающий встроенные возможности переходов.
  2. Элемент WebView, в который встроено веб-приложение, генерирующее QR-коды.
  3. Системный компонент для ввода текстов в нижней части окна.

Описание всех этих элементов можно выполнить, просто приведя к соответствующему виду атрибуты JSON-разметки, подобной показанной выше.
И, наконец, обратите внимание на то, что тут показано и взаимодействие компонентов приложения. А именно, QR-код меняется после ввода новых данных. Делается это благодаря возможности вызова JavaScript-функции, расположенной внутри веб-приложения, которая отвечает за создание QR-кодов на основе переданных ей данных.
Надо отметить, что ни один из фреймворков для разработки мобильных приложений не пытался фундаментально решить проблему «прозрачной интеграции веб-контейнеров в нативные приложения», так как все они либо полностью ориентированы на системные возможности мобильных платформ, либо целиком полагаются на HTML5.
Когда говорят о будущем мобильных приложений, обычно всё крутится вокруг вопроса о том, какой из подходов победит: основанный на HTML5 или на нативных API. Что характерно, в подобных рассуждениях не поднимается тема сосуществования этих двух подходов, и, более того, не рассматривается эффект синергии, который, благодаря совместному использованию различных технологий, позволит достигать результатов, которые нелегко достигнуть, полагаясь лишь на что-то одно.
В этом материале я собираюсь рассказать о следующих вещах:

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

Зачем использовать веб-технологии в мобильных приложениях?

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

▍1. Использование технологий, созданных для веб

Для реализации некоторых частей приложений может иметь смысл использование веб-технологий. Например, WebSocket — это технология, изначально ориентированная на веб. Для её использования можно применить встроенный в мобильную платформу веб-движок (WKWebView для iOS и WebView для Android) вместо установки сторонней библиотеки, которая попросту «эмулирует» WebSocket.
При таком подходе не нужно использовать дополнительные библиотеки, достаточно, применяя стандартные технологии, делать то, что нужно. Это ведёт нас к следующей ситуации.

▍2. Уменьшение размеров пакета приложения

Использование веб-технологий в мобильных приложениях помогает делать то, что без этих технологий потребовало бы огромных сторонних библиотек.
Например, для того, чтобы встроить в мобильное приложение генератор QR-кодов, понадобится сторонняя библиотека, которая увеличит размер пакета приложения. Однако если применить для этого стандартное средство для просмотра веб-страниц и JS-библиотеку, подключённую к странице с помощью простой конструкции <script>, можно получить всё необходимое без установки сторонних библиотек.

▍3. Решение проблемы отсутствия надёжных мобильных библиотек

Для некоторых новейших технологий пока не созданы их надёжные и стабильные мобильные реализации. Однако, большинство этих технологий доступны в веб-среде. В результате самый эффективный способ их интеграции в мобильные приложения заключается в использовании соответствующей JavaScript-библиотеки.

▍4. Разработка проектов, использующих и возможности мобильных платформ, и веб-приложений

Многие начинающие разработчики, которые хотят превратить свои веб-сайты в мобильные приложения, оказываются в непростой ситуации, по ходу дела выясняя, что некоторые функции их веб-проектов слишком сложны для того, чтобы воссоздать их с нуля для каждой из целевых мобильных платформ.
Например, одна из страниц некоего сайта может оказаться слишком сложной для того, чтобы быстро конвертировать её в формат мобильного приложения, в то время как всё остальное наполнение сайта без проблем портируется в мобильное приложение.
В подобном случае было бы очень кстати, если бы большую часть приложения можно было бы создавать средствами мобильной платформы, но какую-то особенно сложную страницу можно было бы прозрачно интегрировать в приложение в её исходном виде.

Как это работает?

▍A. Jasonette

Jasonette — это опенсорсный проект, направленный на создание кросс-платформенных нативных приложений, основанных на JSON-разметке.
Фреймворк Jasonette похож на веб-браузер, но, вместо того, чтобы превращать HTML-код в веб-страницы, он преобразует JSON-разметку в нативные приложения для iOS и Android. Сходство с браузером заключается и в том, что любое приложение, основанное на Jasonette, имеет одинаковый базовый код, который занимается интерпретацией различных наборов JSON-данных в процессе формирования итогового приложения. Разработчику не нужно работать с кодом библиотеки. Процесс создания приложения заключается в подготовке его JSON-описания, которое позволяет Jasonette, в реальном времени, преобразовывать веб-страницы в нативные приложения.
Подробности о Jasonette можно почитать . В целом, можно сказать, что проект Jasonette направлен на разработку нативных приложений, а здесь мы поговорим о том, как интегрировать HTML-страницы в эти нативные приложения.

▍B. Jasonette Web Container

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

  1. Веб-контейнер должен представлять собой естественную часть интерфейса мобильного приложения. Контейнер должен выглядеть так же, как любой другой компонент пользовательского интерфейса приложения. В противном случае получится нечто неуклюжее, выглядящее как то, чем оно является на самом деле — веб-сайтом, который показывают в мобильном приложении.
  2. Родительское приложение должно иметь возможность контролировать дочерний веб-контейнер. При таком подходе приложение, частью которого является элемент управления для просмотра содержимого веб-страницы, будет иметь удобные средства для воздействия на него.
  3. Дочерний веб-контейнер должен иметь возможность вызывать системные события в родительском приложении. У веб-контейнера, встроенного в приложение, должны быть средства для обращения к нативным API.

На самом деле, реализация всего этого требует немалых усилий, поэтому я начал с первого пункта этого списка — с простого встраивания веб-контейнера в страницы нативных приложений. Так я выпустил первую версию JSON Web Container.
Эта штука оказалась полезной, но ей не хватало возможностей по взаимодействию родительского приложения с веб-контейнером. А именно, родительское приложение не могло контролировать веб-контейнер, а контейнер не мог обращаться к родительскому приложению. Как результат, контейнер оказывался полностью изолированным от своего окружения в виде приложения.

▍C. Jasonette Web Container 2.0: взаимодействие приложения и контейнера

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

Реализация: интерактивный Web Container

▍1. Загрузка по URL

Задача

Ранее, в первой версии, для того, чтобы использовать веб-контейнер в виде компонента для просмотра данных, сначала нужно было записать «html» в атрибут $jason.body.background.type, а затем, в атрибут $jason.body.background.text, ввести HTML-код.
{ «$jason»: { «head»: { … }, «body»: { «background»: { «type»: «html», «text»: «<html><body><h1>Hello World</h1></body></html>» } } } }
Вполне естественно то, что разработчикам удобнее будет инициализировать контейнер, используя обычную ссылку на веб-страницу, вместо того, чтобы вводить весь HTML-код страницы в одну строчку.

Решение

В Web Container 2.0 появился атрибут url. Он поддерживает, в частности, локальные файлы. Благодаря использованию конструкции file://… в контейнере можно вывести файл, который поставляется вместе с приложением.
{ «$jason»: { «head»: { … }, «body»: { «background»: { «type»: «html», «url»: «file://index.html» } } } }
Аналогично осуществляется и вывод веб-страниц из интернета (с помощью конструкции вида http://…).
{ «$jason»: { «head»: { … }, «body»: { «background»: { «type»: «html», «url»: «https://news.ycombinator.com» } } } }

▍2. Двустороннее взаимодействие приложения и веб-контейнера

Ранее веб-контейнеры использовались только для вывода некоего содержимого, они не могли взаимодействовать с основным приложением. Это означало, что следующие сценарии их использования были невозможны:

  1. Воздействие Jasonette на веб-контейнер. А именно, невозможно было вызывать JavaScript-функции, расположенные в контейнере, из Jasonette-приложения.
  2. Воздействие контейнера на Jasonette. Невозможно было вызывать нативные API из кода, расположенного в контейнере.

Веб-контейнер можно было использовать только для вывода страниц. Это похоже на то, как в обычные веб-страницы встраивают элементы iframe, когда страница не может получить доступ к тому, что находится внутри этих элементов.

Цель проекта Jasonette заключается в создании стандартного языка разметки, позволяющего описывать кросс-платформенные мобильные приложения. В данном случае нам нужен язык разметки, который может точно описать варианты взаимодействия между родительским приложением и дочерним веб-контейнером.
Для того чтобы этого достичь, я воспользовался технологией JSON-RPC, которая позволила наладить взаимодействие приложения и веб-контейнера. Так как всё в Jasonette выражается в виде JSON-объектов, совершенно естественным было использовать стандартный формат JSON-RPC в качестве коммуникационного протокола.
До использования JSON-RPC Jasonette и веб-контейнер взаимодействовать не могли. После внедрения JSON-RPC стала возможна двусторонняя коммуникация основного приложения и контейнера
Для того чтобы получить возможность вызывать JS-функции, находящиеся в веб-контейнере, мы объявляем действие $agent.request.
{ «type»: «$agent.request», «options»: { «id»: «$webcontainer», «method»: «login», «params»: } }
$agent.request — это нативное API, которое инициирует JSON-RPC-запрос к веб-контейнеру. Для того чтобы воспользоваться этим механизмом, нужно передать ему объект options в качестве параметра.
Объект options — это и есть JSON-RPC-запрос, который будет отправлен веб-контейнеру.
Рассмотрим его атрибуты.

  • id: веб-контейнер построен поверх низкоуровневой архитектуры агентов (agent). Обычно с одним элементом view может быть ассоциировано несколько агентов, у каждого из них может быть уникальный идентификатор (ID). Однако веб-контейнер представляет собой особый тип агента, у которого может быть лишь идентификатор $webcontainer, именно поэтому мы используем в запросе данный идентификатор.
  • method: имя JavaScript-функции, которую нужно вызвать.
  • params: массив параметров, которые нужно передать вызываемой JS-функции.

Вот как выглядит полный код описываемой разметки:
{ «$jason»: { «head»: { «actions»: { «$load»: { «type»: «$agent.request», «options»: { «id»: «$webcontainer», «method»: «login», «params»: } } } }, «body»: { «header»: { «title»: «Web Container 2.0» }, «background»: { «type»: «html», «url»: «file://index.html» } } } }
Рассмотрим смысл приведённого здесь кода.
При загрузке элемента ($jason.head.actions.$load) нужно выполнить JSON-RPC-запрос, описанный в options, к агенту веб-контейнера ($agent.request).
Параметры веб-контейнера заданы в $jason.body.background, в данном случае здесь осуществляется загрузка локального файла file://index.html.
В ходе обращения к контейнеру будет осуществлён поиск функции login, которой, при вызове, благодаря params, будет передано два аргумента — «alice» и «1234». Выглядеть это будет так:
login(«alice», «1234»)
Тут я рассказал лишь о том, как родительское приложение может вызывать JS-функции из веб-контейнера, однако возможен и обратный процесс, когда контейнер обращается к приложению для вызова нативных API. Подробности об этом можно узнать в документации по агентам.

Пример

Обсудим пример приложения для создания QR-кодов, которое вы уже видели выше.
Приложение для создания QR-кодов

  1. Компонент для ввода текста в нижней части окна на 100% нативен.
  2. QR-код генерируется веб-приложением, размещённым в веб-контейнере.
  3. Когда пользователь вводит некий текст в поле и нажимает кнопку Generate, осуществляется вызов действия $agent.request агента веб-контейнера, что приводит к вызову JS-функции qr.

Код этого приложения можно посмотреть

▍3. Внедрение скриптов

Иногда нужно динамически внедрять JavaScript-код в веб-контейнеры уже после того, как в них загружен исходный HTML-код.
Представьте, что вы хотите создать собственный веб-браузер. Для этого вам может понадобиться внедрять свои JS-скрипты в каждый веб-контейнер для того, чтобы иметь возможность влиять на его поведение. Собственно говоря, примерно так работают расширения для веб-браузеров.
Даже если вы не занимаетесь разработкой веб-браузера, вам может понадобиться использовать внедрение скриптов в том случае, если вам нужно обеспечить необходимое поведение страниц, которыми вы не можете управлять напрямую. Единственный способ взаимодействия мобильного приложения и веб-контейнера заключается в использовании API $agent. Но если вы не можете изменить HTML-содержимое, единственный способ добавления интерфейса $agent в веб-контейнер заключается в динамическом внедрении скриптов.

Как уже было сказано, веб-контейнер $jason.body.background — это всего лишь агент. Это означает, что при работе с ним можно использовать тот же метод $agent.inject, что и при работе с обычными агентами.
Внедрение JS-кода в страницу, загруженную в веб-контейнер

▍4. Обработка переходов по URL

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

  1. В режиме «только чтение» веб-контейнер рассматривается как элемент только для чтения, при этом все события, такие, как касание или прокрутка, игнорируются. Все веб-контейнеры находятся в состоянии только для чтения до тех пор, пока их не переключат в режим обычного браузера, так, как описано ниже.
  2. В режиме «обычный браузер» веб-контейнер может взаимодействовать со страницей так, как будто мы работаем с обычным браузером. Включить этот режим можно, записав в атрибут action значение «type»: «$default».

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

Благодаря возможностям нового веб-контейнера можно задать в $jason.body.background атрибут action, который содержит описание механизма обработки щелчков по ссылкам.
Действие для обработки взаимодействий со ссылками
Рассмотрим пример.
{ «$jason»: { «head»: { «actions»: { «displayBanner»: { «type»: «$util.banner», «options»: { «title»: «Clicked», «description»: «Link {{$jason.url}} clicked!» } } } }, «body»: { «background»: { «type»: «html», «url»: «file://index.html», «action»: { «trigger»: «displayBanner» } } } } }
Тут мы прикрепили к веб-контейнеру действие «trigger»: «displayBanner». Это означает, что когда пользователь щёлкает по любой ссылке, выводимой на странице, отображаемой в веб-контейнере, будет вызвано действие displayBanner. При этом сам веб-контейнер не будет обрабатывать щелчок по ссылке.
Кроме того, если проанализировать событие displayBanner, можно заметить переменную $jason. В данном случае ссылка, по которой был сделан щелчок, будет передана действию через эту переменную. Например, если щёлкнуть по ссылке, в которой содержится адрес «https://google.com», в $jason попадёт следующее:
{ «url»: «https://google.com» }
Это означает, что анализируя значение $jason.url можно вызывать различные действия.
Рассмотрим ещё один пример, представляющий собой реализацию веб-браузера.
{ «$jason»: { «head»: { «actions»: { «handleLink»: } }, «body»: { «background»: { «type»: «html», «url»: «file://index.html», «action»: { «trigger»: «handleLink» } } } } }
Тут мы проверяем, содержит ли URL строку signin, и, в зависимости от результатов проверки, выполняем различные действия.

  1. Если URL содержит signin, открывается нативное окно для входа в систему.
  2. Если URL этой строки не содержит, выполняется действие, задаваемое параметром «type»: «$default», в результате наша программа ведёт себя как обычный браузер.

Примеры

▍Разработка веб-браузера

Теперь мы можем воспользоваться возможностями нового элемента Web Container для разработки приложений. А именно, речь идёт о следующем:

  1. Возможность стандартной обработки щелчков по ссылкам, что соответствует поведению обычного браузера.
  2. Возможность обрабатывать щелчки по ссылкам, основываясь на их содержимом.

Всё это даёт нам возможность, например, создать собственный браузер, написав буквально полтора десятка строк JSON-кода. Так как теперь мы можем перехватывать щелчки по ссылкам, мы можем анализировать $jason.url и выполнять действия, соответствующие различным URL.
Рассмотрим пример.
Стандартное поведение браузера
Здесь веб-контейнер ведёт себя как обычный браузер («type»: «$default»).
Поведение, основанное на анализе параметра $jason.url
Здесь при щелчке по ссылке применяется нативный переход между страницами.

Этого можно достичь, обрабатывая различные действия, основываясь на значении $jason.url.
Первым шагом создания подобного приложения служит присоединение к веб-контейнеру действия visit.
{ … «body»: { «background»: { «type»: «html», «url»: «https://news.ycombinator.com», «action»: { «trigger»: «visit» } } } }
Второй шаг заключается в выполнении в действии visit соответствующей операции, основанной на анализе $jason.url.
Ниже показано, как мы проверяем, содержатся ли в $jason.url строки newest, show, ask, и так далее (они представляют собой ссылки в верхнем меню). Если нечто подобное удаётся найти — мы позволяем веб-контейнеру вести себя как обычный браузер, задавая значение «type»: «$default».
Если соответствия вышеописанному шаблону найти не удалось, мы производим нативный переход $href к новому окну, передавая URL, по которому щёлкнул пользователь, в виде параметра.
… «actions»: { «visit»: },
можно посмотреть полный JSON-код этого примера, который, кстати, занимает всего 48 строк.

▍Быстрая разработка «гибридного» приложения

Под «гибридными» приложениями обычно подразумевают обычные веб-приложения, «завёрнутые» в нативные мобильные приложения.
Однако тут мы имеем в виду кое-что другое. В нашем случае речь идёт о настоящих гибридных приложениях, когда у одного и того же приложения может одновременно быть несколько нативных представлений и несколько веб-представлений. Кроме того, одно представление такого приложения может иметь несколько нативных компонентов пользовательского интерфейса и веб-контейнер, причём, всё это выводится в одном нативном макете.
Переход между элементом управления, выводящим веб-содержимое и стандартными элементами управления должен быть настолько незаметным, чтобы сложно было бы обнаружить границу между ними.
Гибридное приложение
В этом примере я создал приложение, которое выводит сайт jasonbase.com в веб-контейнере, выступающем в роли основного элемента для визуализации данных.
Jasonbase — это бесплатный хостинг, который я создал специально для размещения JSON-разметки приложений, основанных на Jasonette.
На самом деле, это — обычный сайт, но я встроил его в Jasonette-приложение, в результате, при щелчках по ссылкам, вместо обычной процедуры открытия веб-страницы, вызывается нативный переход $href в нативном же элементе JASON.
Мне не пришлось дорабатывать код Jasonbase.com для того, чтобы создать это приложение. Я просто встроил веб-сайт в Jasonette-приложение в виде веб-контейнера и перехватил щелчки по ссылкам для обработки их нативными средствами, что, в частности, позволило воспользоваться переходами, и, при необходимости, позволит пользоваться и другими возможностями платформы, на котором работает приложение.
Код этого примера можно найти .

Итоги

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

  • Встраивание веб-контейнера в нативный макет.
  • Создание JavaScript-моста, позволяющего приложению вызывать функции из контейнера.
  • Создание системы обработки событий, благодаря которой контейнер может обращаться к основному приложению, вызывая нативные API.

Решением этих проблем, в случае с Jasonette, стало создание уровня абстракции, состоящего из следующих основных частей:

  1. Декларативный язык разметки, который служит для описания того, как именно веб-контейнер должен быть встроен в нативное приложение.
  2. Коммуникационный протокол (JSON-RPC), который, крайне просто, позволяет организовать взаимодействие между родительским приложением и веб-контейнером.

Не берусь говорить о том, что это — решение всех проблем, но я с удовольствием отмечаю, что то, о чём я тут рассказал, очень пригодилось мне.
Я пытался создать приложение, использующее новейшую технологию, у которой не было стабильной и надёжной мобильной реализации (и неясно было, появится ли нечто подобное в обозримом будущем из-за особенностей того, о чём я говорю). Однако, к моему счастью, имелась JS-реализация этой технологии, что позволило мне без проблем интегрировать её в приложение.
В целом, говоря о новых возможностях Jasonette, могу сказать, что то, что получилось, мне очень нравится. Вот, кстати, документация по проекту, отражающая нововведения.
Теперь мне хотелось бы сделать одно важное, на мой взгляд, замечание: «Большая сила — это большая ответственность». Возможности, которые обрёл проект Jasonette, огромны, поэтому, полагаю, разработчикам, пользующимся этим фреймворком, нужно помнить о балансе возможностей мобильных платформ и HTML, позволяющем создавать приложения, с которыми будет удобно и приятно работать.
Кто-то может взять Jasonette и создать приложение, основанное исключительно на веб-контейнерах. Такое «приложение» правильнее будет называть «веб-сайтом». Подобный подход ставит под вопрос необходимость создания выделенного приложения.
Я хочу обратить ваше внимание на то, что я не призываю к тому, чтобы всегда создавать приложения, в которых обязательно используются и возможности мобильных платформ, и HTML-страницы. Я лишь пытаюсь сказать, что подобный подход может оказаться полезным во множестве ситуаций. Однако тут важно не перестараться, не перейти границы разумного использования технологий.
В итоге хочу сказать, что существует множество ситуаций, в которых возможности обмена данными между базовым приложением Jasonette и веб-контейнером позволяют креативно и красиво решать самые разные задачи. Надо отметить, что здесь мы обсудили лишь основы. Самое интересное — впереди.
Уважаемые читатели! Планируете ли вы использовать Jasonette для разработки кросс-платформенных мобильных приложений?


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *