Разработка мобильных приложений. Как создать свое первое мобильное приложение. Как войти в мобильное приложение Сбербанк Онлайн

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

Мобильный сайт — хорошо, а мобильное приложение -лучше. Потому что:

1. Им удобнее пользоваться (достаточно только кнопку нажать):

2. Оно может принести вам новых посетителей (например, через Android Market):

Где и как создать мобильное приложение неопытному человеку?

Если вы не владеете программистскими навыками (или не знаете, как их применить для превращения мобильного сайта в мобильное приложение), вам поможет бесплатный сервис Appsgeyser.ru (он же — Appsgeyser.com — англоязычный вариант), который превращает любой мобильный сайт в мобильное приложение одним кликом:

При первом заходе на сайт Appsgeyser.ru кликните на кнопку «Создать», вам предложат указать либо Веб-сайт, либо HTML код, либо Документ (кстати, не покупайтесь на возможность создать мобильное приложения из HTML-кода или Документа — здесь нужно загружать не код html-страницы или текст doc-файла, а код виджета. Создать виджет сможет далеко не каждый, поэтому о них я пока речь не веду).

Кликайте «Веб-сайт» и попадете на следующую страничку:

На этом шаге достаточно указать урл вашего мобильного сайта, его название, описание, иконку (чтобы загрузить свою иконку, кликните на имеющуюся и в новом окне загрузите свою картинку со своего компьютера), указать категорию вашего приложения («Приложения» или «Игры») и кликнуть на кнопку «Создать».

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

После этого вам предложат зарегистрироваться на сайте Appsgeyser.ru и вы получите возможность скачать ваше приложение и получить его QR-код (для загрузки в смартфон).

Если вы дружите с английским языком, то можете проделать ту же самую процедуру на англоязычном сайте Appsgeyser.com. Он побогаче информацией, у него нет проблем с превью (в отличие от русскоязычного варианта). Регистрация на Appsgeyser.ru и Appsgeyser.com абсолютно независима (и там, и там можете зарегистрироваться под одним и тем же e-mail).

Где взять иконку для мобильного приложения?

Можно заказать фрилансеру, а можно купить готовое изображение в каком-нибудь фотобанке. Например, я пользуюсь Pressfoto.ru (картинок много, всё на русском языке, в том числе и подходящие варианты оплаты):

Причем, если вы предполагаете распространять свое мобильное приложение через Android Market, покупайте изображение размером не менее 512х512 пикселей (потому что именно такого размера иконки требует Android Market). Такая картинка на Pressfoto.ru (размер Small) стоит обычно 90 рублей:

Как установить приложение с Appsgeyser.ru на свой смартфон

Чтобы посмотреть, как работает ваше приложение, созданное на Appsgeyser.ru, вам нужно будет загрузить его на свой смартфон посредством QR-кода (который вы найдете в своем аккаунте по ссылочке «Скачать»):

Если на вашем смартфоне нет ридера QR-кодов, вы можете скачать его с того же Android Market. Я, например, пользуюсь Codee QR Code Reader — market.android.com/details?id=com.codee.products.reader.Android:

Считываете QR-ридером QR-код своего приложения. Ваше приложение в виде файла попадет в «Загрузки» вашего смартфона. Зайдете в «Загрузки», кликните на скачанный файл, вам предложат его установить. Подтверждаете установку.

Затем ищете знакомую кнопку в своем смартфоне, кликаете и смотрите, как работает ваше приложение.

Пора выходить на международный рынок

Итак, если ваше приложение отлично работает на вашем же смартфоне, пора познакомить с ним весь мир. Для этого нужно зарегистрироваться и выставить свое приложение на Android Market.

Как зарегистрироваться на Android Market — об этом вы прочитаете в следующей статье.

Работающий стартап, это тот, который построенный на принципах стратегии MVP (Minimum Viable Product). Такой подход позволяет вам проверить ваш продукт перед запуском его в широкие массы.

В закладки

Это приложение было создано с использованием Ionic framework и предлагает следующие возможности:

Поиск / исследование конкретных объектов в музее;
Видео дополненной реальности;
Обмен через социальные сети;

Недавним примером гибридного приложения, которое мы создали в Ezetech для Tickfinity - TicketNetwork POS для мобильных устройств (видео).

Плюсы:

Высокая скорость разработки;
Написаны с помощью HTML, CSS, Javascript, что обеспечивают кросс-совместимое iOS, Android и веб-программное обеспечение (требуется только один веб-разработчик);
Доступны фреймворки, которые эмулируют пользовательские элементы UI (например, кнопки, меню и так далее);
UX близок к нативному опыту с использованием элементов UI, которые имитируют поведение обычного приложения;
Доступ к API-интерфейсу смартфона (камера, push-уведомления, геолокация и другие).

Минусы :

UX не так хорош, как в родных приложениях (задержки на клики 300 мс, фантомные клики при прокрутке);
Чем сложнее приложение, тем медленнее оно работает из-за использования различных оболочек и библиотек;
Не работает в офлайн режиме;
Анимации трудно реализовать в UI.

Этот вариант подходит для MVP простых веб или мобильных приложений. Если у вас уже есть веб-приложение, построенное с помощью Javascript, вы можете использовать существующий код. Проще говоря Apache Cordova хорош для быстрого создания недорогих мобильных приложений со стандартными функциями.

React Native

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

Некоторые примеры приложений, использующих React Native:

Плюсы:

Высокая скорость разработки для веб-приложений на основе React;
Веб-приложение, созданное с помощью React.js, может быть легко преобразовано в мобильное приложение React Native, а некоторые исходные коды можно повторно использовать;
Собственный пользовательский опыт;
Приложение выглядит и воспринимается как родное мобильное приложение для конкретной платформы;
Низкие затраты на разработку;
Эксперты в React Native обычно могут создавать приложения для Android и iOS.

Минусы:

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

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

Разработка нативного приложения (Native app development)

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

Обычно вам нужно как минимум 2 разработчика - разработчик iOS, который работает над iPhone-приложением с использованием Objective-C или Swift, и разработчика Android, который будет использовать Java или Kotlin. Поэтому стоимость разработки будет выше, чем в любом из вышеперечисленных подходов.

Плюсы :

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

Минусы :

Более высокие затраты по сравнению с разработкой гибридных приложений;
Различные стеки технологий для разных платформ (требуется больше разработчиков).
Обратите внимание, что лучше всего создавать нативное приложение c нуля, только если у вас есть на это ресурсы. Технологии для создания таких приложений уже давно существуют, что дает множество модульных решений, а также сообществ с открытым исходным кодом, доступных разработчикам для эффективного решения проблем.

Заключение

Есть два основных варианта, которые хорошо подойдут для перехода из веб-приложения в мобильное - разработка гибридного приложения и запуск с нуля (разработка нативного приложения).Если функциональность вашего продукта не слишком сложна, и вы просто хотите предложить мобильным пользователям лучший опыт, вы должны использовать React Native (если сайт на реакте) или Apache Cordova для разработки вашего гибридного приложения. Это оптимальный вариант, если у вас ограничен бюджет и вам нужна поддержка на Android и iOS.

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

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

Написать

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

Перечень услуг профильных разработчиков

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

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

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

В перечень услуг по разработке приложений входят следующие этапы:

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

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

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

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

Сколько стоит работа разработчика программ?

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

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

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

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

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

оригинальный и качественный дизайн
функциональность
простоту в управлении и применении
своевременное тестирование и устранение неполадок в работе программы

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

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

Выгоды от заказа услуг на Юду

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

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

Во время регистрации специалистов на сайте Юду данные о них тщательно проверяются, поэтому вы можете доверить им работу любой сложности.

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

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

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

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

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

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

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

Задача

Ранее, в первой версии , для того, чтобы использовать веб-контейнер в виде компонента для просмотра данных, сначала нужно было записать "html" в атрибут $jason.body.background.type , а затем, в атрибут $jason.body.background.text , ввести HTML-код.

{ "$jason": { "head": { ... }, "body": { "background": { "type": "html", "text": "

Hello World

" } } } }
Вполне естественно то, что разработчикам удобнее будет инициализировать контейнер, используя обычную ссылку на веб-страницу, вместо того, чтобы вводить весь 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. Двустороннее взаимодействие приложения и веб-контейнера

Задача

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

Воздействие Jasonette на веб-контейнер. А именно, невозможно было вызывать JavaScript-функции, расположенные в контейнере, из Jasonette-приложения.
Воздействие контейнера на 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 в качестве параметра.

Параметры веб-контейнера заданы в $jason.body.background , в данном случае здесь осуществляется загрузка локального файла file://index.html .

В ходе обращения к контейнеру будет осуществлён поиск функции login , которой, при вызове, благодаря params , будет передано два аргумента - "alice" и "1234" . Выглядеть это будет так:

Login("alice", "1234")
Тут я рассказал лишь о том, как родительское приложение может вызывать JS-функции из веб-контейнера, однако возможен и обратный процесс , когда контейнер обращается к приложению для вызова нативных API. Подробности об этом можно узнать в документации по агентам.

Пример

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

Приложение для создания QR-кодов

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

Задача

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

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

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

Решение

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

Внедрение JS-кода в страницу, загруженную в веб-контейнер

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

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

В режиме «только чтение» веб-контейнер рассматривается как элемент только для чтения, при этом все события, такие, как касание или прокрутка, игнорируются. Все веб-контейнеры находятся в состоянии только для чтения до тех пор, пока их не переключат в режим обычного браузера, так, как описано ниже.
В режиме «обычный браузер» веб-контейнер может взаимодействовать со страницей так, как будто мы работаем с обычным браузером. Включить этот режим можно, записав в атрибут 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 , и, в зависимости от результатов проверки, выполняем различные действия.

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

Примеры

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

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

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

Всё это даёт нам возможность, например, создать собственный браузер, написав буквально полтора десятка строк 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, стало создание уровня абстракции, состоящего из следующих основных частей:

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

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

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

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

Теперь мне хотелось бы сделать одно важное, на мой взгляд, замечание: «Большая сила - это большая ответственность». Возможности, которые обрёл проект Jasonette, огромны, поэтому, полагаю, разработчикам, пользующимся этим фреймворком, нужно помнить о балансе возможностей мобильных платформ и HTML, позволяющем создавать приложения, с которыми будет удобно и приятно работать.

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

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

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

Уважаемые читатели! Планируете ли вы использовать Jasonette для разработки кросс-платформенных мобильных приложений?

Теги: Добавить метки

Согласно аналитике Google, более 73% юзеров , которые совершали покупки в магазине, первым делом искали информацию о товарах с помощью мобильных устройств . Современный человек уже не представляет жизнь без гаджетов, поскольку смартфоны стали мощным каналом популяризации и продвижения услуг. Именно поэтому представленность бизнеса в интернете значительно влияет на степень лояльности клиентов. А разработка приложений для Android, iOS и Windows способствует повышению интереса к любому бизнес проекту.

Факты о мобильном мире

Общая выручка в магазинах приложений за 2017 год — 90$ млрд.

Доходы разработчиков для iOS в этом году выросли до 45%.

Доходы от игр в магазинах App Store и Google Play составили 74% и 91% соответственно.

Объем рынка покупок гаджетов в 2017 году достиг 215$ млрд.

Сколько времени требуется для разработки приложения?

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

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

Аналитика конкурентов и постановка целей конкретного проекта — около 6 дней.

Составление ТЗ и прототипирование занимает от одной недели.

Этап дизайнерского оформления занимает до трех недель.

Написание кода зависит от сложности и занимает до двух месяцев.

Тестирование приложений проходит примерно за неделю.

Для создания приложения необходимо определить:

Преимущества разрабатывания мобильных приложений на заказ

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

Руководителям отделов и целых агентств для ведения учета и администрирования.

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

Этапы разработки мобильных приложений

Находитесь в поисках эффективных инструментов продвижения вашего бизнеса? Закажите разработку мобильных приложений в компании KOLORO и наши программисты обязательно создадут незаменимого веб-помощника для ваших клиентов.