Что такое мобильное приложение: Что такое мобильное приложение? — Разработка для iOS, Android, Windows – Как создать свое мобильное приложение: инструкция по созданию

Содержание

Мобильная версия сайта или мобильное приложение? «За» и «против» / BYYD corporate blog / Habr

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

Дать четкий ответ на такой спорный вопрос довольно нелегко, но сегодня мы постараемся привести некоторые аргументы, которые помогут Вам определиться с ключевыми шагами мобильного маркетинга.

Каждый бизнес должен быть адаптирован под мобильные устройства. Около 79% веб-сайтов, существующих на сегодняшний день, адаптированы под мобильные устройства, а смартфоны — самый распространенный девайс по всему миру.

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

Опции для мобайла

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

Мобильная версия сайта — первый шаг к прибыли от мобайла

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

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

Мобильный сайт и мобильное приложение. Плюсы и минусы

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

Отчасти это связано с появлением адаптивного дизайна который позволяет подстраивать сайт под экран того устройства, на котором он открывается. Фактически — два формата в одном. Что касается приложений, то они должны быть сохранены и написаны для множества мобильных платформ — Android, IOS, Windows Phone, Blackberry, что гораздо проблематичнее и требует больших затрат времени.

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

Хотите иметь бизнес под рукой, на сенсорном экране? Отдайте предпочтение приложению

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

А различные ограничители, существующие для сайтов, в частности — ограничения в использовании источников и лимитированное пространство, опять же, “прибавляют очки” использованию мобильных приложений. К тому же, многие статистические данные подтверждают информацию о том, что пользователи проводят гораздо больше времени именно в приложениях, а не на мобильных версиях сайтов. Например, еще в далеком 2013 году пользователи в среднем тратили по 30 часов в месяц в мобильных приложениях. Это вполне объяснимо, ведь смартфоны, на которые устанавливаются эти самые приложения, практически всегда находятся под рукой у потенциальных клиентов. Почему бы и не заглянуть в них “между делом”, по пути на работу или домой?

Многих пугает лишь одна мысль об обновлении сайта. Это грозит затратой таких ресурсов, как время, деньги и нервы. После того как Google решил понижать в результатах выдачи сайты, у которых нет мобильной версии, у владельцев бизнеса больше нет выбора, кроме как “подчиниться” трендам сегодняшнего дня.

Лендинги как нельзя лучше подходят для анонсирования грядущих событий Вашей компании, создания ограниченных по времени маркетинговых акций через мобайл, создания “продающих” страниц. А что самое ценное — для этого не нужно заново переписывать Ваш основной сайт и проделывать скучную и кропотливую работу IT-отдела. Вы просто создаете дополнительный ресурс, который, в свою очередь, помогает привлечь дополнительный трафик на основной сайт. На сегодняшний день, в обилии существующих инструментов, у Вас не возникнет трудностей при создании лендингов.

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

Но главное, о чем не нужно забывать: развитие мобайла — неизбежно. Это уже реалии сегодняшнего дня и не учитывать их — значит проиграть.

BYYD • Мобильная рекламная платформа

Как превратить веб-сайт в мобильное приложение с помощью 7 строк JSON

В материале, перевод которого мы публикуем сегодня, речь пойдёт о создании мобильных приложений на базе существующих веб-проектов. Автор этой статьи демонстрирует инструменты, которые позволяют с минимальными усилиями разрабатывать приложения, пользующиеся нативными возможностями платформ 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><h2>Hello World</h2></body></html>"
      }
    }
  }
} 

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

Решение

В Web Container 2.0 появился атрибут url. Он поддерживает, в частности, локальные файлы. Благодаря использованию конструкции file://... в контейнере можно вывести файл, который поставляется вместе с приложением.

{
  "$jason": {
    "head": {
      ...
    },
    "body": {
      "background": {
        "type": "html",
        "url": "file://index.html"
      }
    }
  }
}

Аналогично осуществляется и вывод веб-страниц из интернета (с помощью конструкции вида http[s]://…).

{
  "$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": ["username", "password"]
  }
}

$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": ["alice", "1234"]
          }
        }
      }
    },
    "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": [{
          "{{#if $jason.url.indexOf('signin') !== -1 }}": {
            "type": "$href",
            "options": {
              "url": "file://key.html"
            }
          }
        }, {
          "{{#else}}": {
            "type": "$default"
          }
        }]
      }
    },
    "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": [
    {
      "{{#if /\\/(newest|show|ask)$/.test($jason.url) }}": {
        "type": "$default"
      }
    },
    {
      "{{#else}}": {
        "type": "$href",
        "options": {
          "url": "https://jasonette.github.io/Jasonpedia/webcontainer/agent/hijack.json",
          "preload": {
            "background": "#ffffff"
          },
          "options": {
            "url": "{{$jason.url}}"
          }
        }
      }
    }
  ]
},

Здесь можно посмотреть полный 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 для разработки кросс-платформенных мобильных приложений?

Зачем нужно мобильное приложение вашему сайту?

Мобильное приложение для сайта


Мобильное приложение – независимая программа, разработанная для мобильных устройств на базе iOS, Android, Windows Phone. Она обеспечивает простой доступ к необходимой информации и настройкам, стабильно работает даже на низкой скорости интернета. Многих интересует вопрос, зачем делать мобильное приложение и является ли его наличие гарантией успешности предприятия. В статье описаны особенности особенности создания, важные характеристики мобильных программ Google play.


Зачем требуется


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


  • Мобильное ПО при грамотном подходе позволяет увеличить продажи. Его устанавливают заинтересованные в товаре/услуге пользователи. В результате компания получает целевую аудиторию, с которой может работать напрямую и налаживает постоянный контакт.

  • Приложения в разы эффективнее по сравнению с другими рекламными инструментами (SEO, SMM и т.д.), однако пока что немногие компании заинтересованы в их разработке. Таким образом, подключение мобильного софта дает дополнительные привилегии и возможности для укрепления позиций на рынке.

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

  • Мобильный сервис улучшает узнаваемость бренда.


В ряде ситуаций такое решение может стать неэффективным. Не рекомендуют заказывать разработку для размещения доступной всем информации, поскольку пользователям удобнее находить нужные сведения в поисковых системах. Клиенты скачивают программные продукты, которые отличаются полезным функционалом. Также не всегда наличие приложения Google Play на конкурирующем сайте – повод для создания собственного. Сначала специалисты советуют проверить, что именно интересует потребителя, станет ли сервис популярным.


Чтобы быстро увеличить целевую аудиторию, стоит разработать очень удобное и актуальное для клиента приложение. Например, сюда относятся такие сервисы, как интеграция с CRM-системой, безопасная оплата с помощью банковской карточки, бонусы для зарегистрированных пользователей, онлайн консультации, распознание QR-кода, дополненная реальность AR (Augmented Reality) и т.п.


Важные характеристики 


Особенности качественных мобильных сервисов, что в целом способствует увеличению целевой аудитории:


  • Привлекательный дизайн, интуитивно понятный интерфейс, высокая скорость отклика, наличие интерактивных функций.

  • Простота оформления меню, что обеспечивает быструю загрузку сервиса, а также низкое энергопотребление.

  • Регулярное обновление, постоянное развитие.

  • Уникальная концепция, неординарный подход.

  • Высокая производительность при любых нагрузках.

  • Поддержка нескольких языков, настройка геолокации.


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


Как создать мобильное приложение


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


Перечень сервисов для создания мобильного софта


tile-app.com. На сайте представлены готовые платные программы для различных отраслей: магазинов одежды, кафе и ресторанов, отелей, др. Они предназначены для работы на мобильных устройствах Apple iOS, Android, Mobile Web и т.д. Преимущества софта: возможность внесения различных изменений, мультиязычность, безопасный хостинг.


Appsgeyser.com. Сервис конвертирует блоги, страницы в соцсетях, сайты, контент любых форматов в приложения, доступные на базе Android. Это – бесплатный функционал, позволяющий создать неограниченное количество программных продуктов.


iBuildApp. Сервисом может воспользоваться каждый – специальные навыки и знания программирования не требуются. Здесь создают приложения, функционирующие на базе ОС Android, Apple iOS. На сайте действуют три тарифа: «Корпоративный», «Безлимитный», «Бизнес». Различия между тарифами в ценах, количестве приложений, которые можно разработать, прочих факторов.


Другие известные сайты-конструкторы со своими особенностями: Freeandroidappmaker, My-apps, Appery.io, т.п. После создания сервиса удобным способом необходимо опубликовать соответствующую ссылку на сайте.

Вернуться назад

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

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

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

А появление разнообразных мобильных платформ, таких как: Android, Symbian, Bada и iOS лишь подстегнула развитие рынка, занимающегося разработкой мобильных приложений.

Что такое мобильное приложение, и какие функции оно должно выполнять?

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

Какие бывают приложения?

 

 

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

Мобильные промо-приложения

 


 

Промо-приложения, обычно, не являются особо функциональными, и их популярность основана на нестандартном подходе, используемом при разработке. Одним из таких приложений является виртуальная зажигалка Zippo или приложение Magic Coke Bottle, представляющее собой бутылку напитка «Coca-Cola», которая предсказывает пользователям будущее. Подобные приложения обычно используются во время рекламных компаний.

Приложения-события

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

Приложения-службы

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

Игры

Большинство приложений на мобильном рынке являются именно играми. Игры разрабатываются для всех известных, на данный момент, платформ, их количество сегодня настолько велико, что подсчитать их практически нереально.

Интернет-магазины

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

Бизнес-приложения

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

Так же можно выделить такие виды мобильных приложений как: контентные приложения, приложения-социальные сети, системные приложения и так далее.

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

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

Звоните!  8 (843) 251 30 77

Автор Тухватуллин Булат 

 

Предыдущая статья — Следующая статья

 

Читайте также: Офлайн и онлайн лидогенерация  Стоимость доменных зон  Частота поисковых запросов  Конверсия лендинга  

Мобильное приложение — Википедия. Что такое Мобильное приложение

Мобильное приложение (англ. «Mobile app») — программное обеспечение, предназначенное для работы на смартфонах, планшетах и других мобильных устройствах. Многие мобильные приложения предустановлены на самом устройстве или могут быть загружены на него из онлайновых магазинов приложений, таких как App Store, BlackBerry App World, Google Play, 1mobile market, Windows Phone Store, Яндекс.store и других, бесплатно или за плату.[источник не указан 1167 дней]

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

Рынок мобильных приложений сегодня очень развит[как?] и неуклонно растет.[прояснить]

Этот термин стал очень популярным с 2007 года, и в 2010 году был внесен в список «Слова года» Американского диалектического общества[1].

Рынок мобильных приложений в мире

Согласно отчету аналитической компании App Annie, ожидается, что мировой рынок мобильных приложений в 2017 г. вырастет на 28,6% и достигнет $166 млрд., из них $65 млрд. – затраты пользователей на покупки приложений и подписки, а еще $101 млрд – расходы рекламодателей и разработчиков приложений на продвижение.

Директор по аналитике рынков App Annie Самир Синха говорит, что в 2016 г. пользователи потратят на приложения $52 млрд, рекламодатели – $77 млрд. Таким образом, реклама в приложениях является основным драйвером роста всего рынка мобильных приложений, при этом значительную часть доходов приходится на социальные сети, видеосервисы и игры. Рост доходов произошел благодаря социальным сетям (в первую очередь Facebook), бесплатным платформам потокового видео (YouTube и др.), и встроенной рекламе в мобильные игры. Самый популярный формат — видеореклама. Реклама крупных брендов составит 12,5% всех размещений[2].

Рынок мобильных приложений в России

По данным eMarketer, рынок мобильной рекламы в рунете составит по итогам 2016 г. $430 млн. Устройства Android занимают более 85% российского рынка смартфонов, правда доля в выручке магазинов приложений может быть меньше: известно, что пользователи устройств iOs охотнее платят за сервисы, чем владельцы Android[3].

Использование в медицине

В 2011 году Всемирная организация здравоохранения прогнозировала взрыв мобильных медицинских технологий mHealth и их потенциал быстро изменить облик систем здравоохранения по всему миру. К 2016 году в мире насчитывалось 260 тысяч медицинских мобильных приложений. В 2016 году при Европейской комиссии создали рабочую группу по разработке правил экспертизы медицинских мобильных приложений и устройств[4]. С помощью приложений смартфоном можно измерить основные параметры функции легких (для получения исходных данных нужно выдохнуть в микрофон), измерить частоту сердечных сокращений, сделать анализ крови или других жидкостей организма с помощью микрофлюидных приложений. Его можно использовать как офтальмоскоп, а с помощью насадки — превратить в отоскоп[5].

Ссылки

Значение словосочетания МОБИЛЬНОЕ ПРИЛОЖЕНИЕ. Что такое МОБИЛЬНОЕ ПРИЛОЖЕНИЕ?

  • Мобильное приложение (англ. «Mobile app»): — программное обеспечение, предназначенное для работы на смартфонах, планшетах и других мобильных устройствах. Многие мобильные приложения предустановлены на самом устройстве или могут быть загружены на него из онлайновых магазинов приложений, таких как App Store, BlackBerry App World, Google Play,1mobile market, windows phone store,Яндекс.store — и других, бесплатно или за плату.

    Рынок мобильных приложений сегодня очень развит[как?] и неуклонно растет.

    Этот термин стал очень популярным, и в 2010 году был внесен в список «Слова года» Американского диалектического общества.

Источник: Википедия

Делаем Карту слов лучше вместе




Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать
Карту слов. Я отлично
умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!

Спасибо! Я стал чуточку лучше понимать мир эмоций.


Вопрос: кодировка — это что-то нейтральное, положительное или отрицательное?

Положительное

Отрицательное

погода, новости, транспорт, телевидение, места рядом, пробки, афиша и голосовой помощник Алиса

Яндекс

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

для смартфонов на базе Android™ 4.2 и выше, также доступно на iPhone ;

Оставьте комментарий

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