Как делать мобильные приложения: Как сделать мобильное приложение самому

Как создать свое мобильное приложение: инструкция по созданию

Для создания приложений в Интернете можно найти тысячи конструкторов, которые не требуют от пользователя навыков разработки, верстки и т.п. Полученный результат можно полноценно использовать для работы с клиентами и даже опубликовать в App Store или другом магазине приложений. Но есть и свои подводные камни.

Наши продукты помогают вашему бизнесу оптимизировать расходы на маркетинг

Узнать подробнее

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

Способы создания мобильного приложения

Сравним два основных пути создания мобильных приложений:

• с привлечением разработчика;
• своими силами на специальных конструкторах.

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

Таблица 1. Сравнение различных способов создания приложений

У каждого приложения есть ftont-end (интерфейс, который видит пользователь) и back-end (эту часть видит и вносит в неё изменения разработчик). В случае с конструктором back-end находится на его сервере.

Что потребуется для создания мобильного приложения

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

Чтобы сделать приложение, нужно выполнить следующие шаги:

1. Определиться с целью и функционалом будущей программы, а также вариантом монетизации, если она планируется;
2. Выбрать конструктор, на котором вы сможете всё это реализовать;
3. Зарегистрироваться и (при необходимости) оплатить подписку;
4. Выбрать шаблон и наполнить его контентом;
5. Персонализировать его, добавив фото, логотип и т.п.

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

Оценка стоимости создания мобильного приложения

Создание мобильных приложений начинается с бюджета. Поэтому если

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

Идеи мобильных приложений приходят в голову всем – опытным дизайнерам, студентам или владельцам малого бизнеса, не написавшим и строчки кода. Но если у вас есть прекрасная идея, то как сделать мобильное приложение, если вы не понимаете разницы между Java и Javascript, или Photoshop и Illustrator?

Сервис прототипирования Proto.io в своем блоге рассказал как лучше всего начать работу над приложением. Мы публикуем русский перевод этой статьи.

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

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

• Пол Ферро, президент 5 Nerds Software Development, агентства дизайна и разработки с полным набором услуг, начиная от брендинга и дизайна и заканчивая разработкой приложения с нуля.
• Андрес Макс, основатель Ideaware, агентства, специализирующегося на продуктовой стратегии, UX/UI дизайне и фронте-энд оптимизации. До основания студии, Макс был ведущим UX дизайнером в Mashable.
• Даниэль Хинди — Chief Technology Officer в BuildFire, платформе для создания мобильных приложений, которую использует более 50,000 компаний. Даже если вы не знаете как создавать мобильные приложения, при помощи WYSIWYG редактора BuildFire вы все равно можете сделать профессиональное приложение.

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

1. Мозговой штурм

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

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

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

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

Идея для приложения: с чего все начинать?

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

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

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

Донесите свою идею до максимального количества людей, чтобы узнать их мнение о ней. Вот совет эксперта: когда вы представляете свою идею другим (друзьям или родственникам), расскажите им, что вы знаете кого-то с этой идеей и хотите инвестировать в нее. Затем объясните саму идею. Ваши слушатели будут гораздо более честными зная, что идея не ваша и что вы можете потерять ваши деньги, инвестируя в не столь и хорошее приложение. Спросите – будут ли они его использовать? Если будут, то почему? Если не будут, то почему?

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

Если вы все это проделали несколько раз, и ваша идея не встретила сильного отпора, то время начинать! Тут у вас возникает выбор. Вы можете сделать его сами или нанять кого-нибудь.

3. Даже если вы не можете сделать мобильное приложение, вы можете сделать отличный прототип

Андрес Макс повторяет еще раз высказывание про важность проверки идеи на работоспособность и идет дальше: «Я всегда поощрял предпринимателей к тому, чтобы они проводили рыночные исследования. Копните глубоко, чтобы оценить спрос на вашу идею, что работало в прошлом, а что нет, затем, по необходимости, внесите коррективы». Например, вы можете думать, что у вас восхитительная идея для приложения с фотографиями и только потом узнать, что оно уже сделано и продается. Это не значит, что надо прекращать работать над идеей – это просто информация для вас, которая поможет вам понять, что вы можете сделать лучше.

Один из лучших способов сравнить – это, конечно, сделать прототип. Макс говорит: «После того, как вы отточили идею, создайте и протестируйте прототип. Соберите на его основе всю ценную информацию». Прототипом может быть просто скетч вашего дизайна, но можно и создать полнофункциональный прототип в каком-либо инструменте, например, в Proto.io. Для этого не требуется навыков в программировании или дизайне.

4. Решите, будете ли вы нанимать студию или разработчика – или научитесь сами разрабатывать.

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

«Изучение того, как создавать приложения, может быть сложной задачей, особенно если у вас нет опыта. Но это возможно. Особенно если ваша идея касается уникальности функций — а не самих технологий. Возьмите, для примера, Flappy Bird. Само приложение чрезвычайно просто. Но идея была уникальной и увлекательной. Теперь посмотрите на Apple Passbook. Идея относительно проста, но технологии, которые позволяют хранить ваши данные в безопасности, обращаться к ним продавцам, завязываться на отпечаток пальца и т.п., относительно сложные.

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

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

Но как набрать эту самую скорость? Вы можете либо пройти ускоренный курс программирования (для этого есть множество ресурсов), либо использовать для создания вашего мобильного приложения инструменты, доступные даже новичкам. Один из таких инструментов – BuildFire, объясняет Даниэль Хинди:

«Что если у вас убийственная идея, но вы не знаете, как создавать мобильные приложения? Именно эту проблему мы хотели решить в нашей платформе BuildFire. У нас более 80,000 приложений, их создают как маленькие компании, так и большие корпорации. Все они сделаны вообще без или при минимальном знании программирования. Хотя это прекрасно подходит для простых приложений, но отсутствие навыков программирования обычно ограничивает вас тем набором функций, которые предлагает платформа. BuildFire решает эту проблему и скоро мы откроем API для разработчиков, который можно будет добавить в существующие BuildFire приложения.

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

Как создать приложение: все, что вам нужно знать

6. Убедитесь, что вы нанимаете правильных людей

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

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

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

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

Как сделать мобильное приложение? Пора действовать

Ферро заканчивает тем, что напоминает предпринимателям, что создать приложение это одно, а заставить пользователей скачать его – совсем другое:

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

А как у вас дела? Вы сделали приложение своей мечты? Расскажите нам о нем!

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

Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].

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

Создаем быстрый прототип мобильного приложения / Хабр

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

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

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

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

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

Самый популярный инструмент создания быстрых прототипов.

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

Можно рисовать на доске, стене, бумаге. Однако этот способ имеет и ряд недостатков:

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

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

Как ускорить и упростить «бумажное» прототипирование

Скетчпад (SketchPad, Скетчбук, sketchbook)

это блокнот разлинованый макетами телефонов разных платформ. Имеет точечную сетку на «экране».
Вы можете распечатать аналог скетчпада самостоятельно по шаблонам: habrahabr.ru/post/152075

UI – блокнот

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

Лекала.

Удобная, должно быть, вещь, но в России в продаже их найти не удалось.
www.uistencils.com/collections/frontpage/products/iphone-stencil-kit

Штампы

В российских магазинах тоже отсутствуют, но можно заказать у компании по изготовлению печатей, или сделать самому из куска резины, если руки достаточно прямые. К сожалению, чернила – вещь довольно маркая, поэтому лучше все-таки не пытаться экономить и купить или распечатать скетчпад.
www.cultofmac.com/224355/iphone-stamp-for-ui-sketching

На этом с обзором «бумажных» инструментов закончим, и перейдем к самому интересному:

Программные решения для создания быстрых прототипов

Keynotopia
keynotopia.com
Позволяет быстро создавать макеты с помощью базы шаблонов, добавлять ссылки на кнопки, комментировать и делиться с коллегами для тестирования результатов прототипирования. Приложение платное, стоимость зависит от ваших запросов.

POP
popapp.in

Инструмент для любителей рисовать руками. Рисуете, качаете приложение на iPhone, фоткаете, создаете раскадровку, тестируете и делитесь с коллегами. Все очень просто.

RATCHET
maker.github.io/ratchet
habrahabr.ru/post/157819

Создается прототип, максимально приближенный к реальному приложению. Может загружаться на компьютер или телефон, но без навыков HTML, CSS и JS не обойтись.

Proto.io
proto.io

SaaS решение для прототипирования. Сервис нам очень понравился, но в бесплатный пакет входит очень скудный набор функций, поэтому он фактически бесполезен. За действительно рабочий инструмент придется заплатить не менее 24$.

Codiqa
codiqa.com

Еще одно облачное решение. Та же модель монетизации, как и в proto.io. Кому-то этот сервис может показаться удобнее.

Mockingbird
gomockingbird.com

Ситуация противоположна Invision: имеется конструктор, но демонстрировать не очень удобно. Да и под мобильную разработку подходит плохо.

Lumzy
www.lumzy.com

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

iPhone Mockup Web App
iphonemockup.lkmc.ch

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

Axure RP
www.axure.com
habrahabr.ru/post/101938

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

AppGyver
www.appgyver.com

На выбор даются шаблоны Android, iPhone и iPad. Протестировать здесь вы сможете только логику приложения без дизайна, поскольку работа ведется с уже готовыми набросками приложений. В бесплатном статусе вы сможете протестировать сервис с 3 скриншотами. На мобильное устройство можно будет установить приложение, с помощью которого возможно оценить результат работы.

Fluid Ui
www.fluidui.com

Удивительно, но этот сервис обладает всеми необходимыми функциями. Может быть, он не так изящен, как другие, зато позволяет и самостоятельно собрать прототип в конструкторе, и залить уже готовые макеты, проставить связи между страницами приложения, отправить получившийся макет для просмотра друзьям и коллегам и протестировать его на телефоне. Сервис также поддерживает Windows Phone!

MockFlow
www.mockflow.com

Имеет десктопное приложение и онлайн сервис, что, несомненно, является преимуществом, но простой настолько, что даже скучно.

Mockingbot
www.mockingbot.com

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

Prototypr
prototypr.com

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

Balsamiq Mockups for Desktop
www.balsamiq.com

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

iMockups for iPad
www.endloop.ca/imockups

Рисовать прототипы прямо на iPad? Легко! Для него самого и iPhone, конечно. Качаем приложение и получаем удовольствие от простоты и неплохого результата.

Interface 2
interface2.lesscode.co.nz

Создание динамических прототипов для iPhone и iPad непосредственно на самих устройствах всего за 10 долларов каждое.

Демонстрация дизайна на устройстве без программирования

Justinmind Prototyper
www.justinmind.com

Инструмент, позволяющий создавать интерактивные прототипы сайтов и приложений для iPhone, Android и iPad. Поддерживает множество возможностей, включая работу с жестами ( в прототипах можно реализовать Drag&Drop и т.д.). К сожалению, бесплатная версия ограничена только перелинковкой между шаблонами и 10 МБ места в облаке. Но есть триал на 30 дней

За подсказку спасибо Glebcha

Mockko
www.mockko.com

Бесплатный on-line инструмент для создания прототипов. Поддерживается перелинковка между экранами, просмотр прототипов на iPhone. Собственно, создавать прототипы можно только для iPhone, сайт работает только в Chrome или Safari. Обещают в будущем поддержку также iPad.

За подсказку спасибо n0_quarter

Microsoft Expression Blend
msdn.microsoft.com/ru-ru/library/windows/apps/jj129478.aspx

Используя Blend + SketchFlow, вы можете создавать интерактивные прототипы приложений под любые платформы.

Подробнее:
Прототипирование в Expression Blend + SketchFlow. Часть 1. Немного истории
Прототипирование в Expression Blend + SketchFlow. Часть 2. Основы

За подсказку спасибо Ivnika

App Cooker
www.appcooker.com

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

За подсказку спасибо Glebcha

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

Mockabilly
www.mockabilly.com
Уже готовые макеты заливаете на iPhone (поддерживается только эта платформа) и тестируете непосредственно на самом устройстве.

Invision
www.invisionapp.com

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

LiveView
zambetti.com/projects/liveview

Приложение для удаленного просмотра на экране iPhone и iPad прототипа, разработанного и запущенного на Mac.

Вывод

Инструментов для создания прототипирования огромное количество, здесь описаны лишь некоторые из них. Для себя мы остановились на следующем наборе: скетчпад для первоначального прототипирования, и Proto.IO/Fluid UI для создания интерактивных прототипов.

А чем пользуетесь вы?

Большую часть статьи написал мой коллега Александр Кочеванов (aimh), за что ему огромное спасибо

App Builder, Free App Creator, No-Code App Maker

Вот шаги, необходимые для создания pwa-приложения с нуля:

1. Изложите идею вашего приложения на бумаге

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

2. Проведите тщательное исследование рынка

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

3. Создание прототипов приложений

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

4. Дизайн графики приложения

Обратите внимание на визуальную привлекательность вашего приложения, включая правильное разрешение и размеры, графические эффекты, которые могут потребоваться, ресурсы изображений, а также анимацию или моушн-дизайн, где это необходимо. Вы можете использовать службу шаблонов графического дизайна, например Appy Pie’s Design Studio, или нанять графического дизайнера, в зависимости от вашего бюджета. Важно, чтобы ваше приложение выглядело профессионально, поэтому не экономьте на этом шаге.

5. Создайте свое приложение — способом Appy Pie!

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

6. Протестируйте свое приложение

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

7. Запустить в магазины приложений

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

8. Продвигайте свое приложение

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

9. Получите отзывы пользователей

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

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

Программа перетаскивания Appy Pie выполняет всего три шага и не требует абсолютно никакого программирования.

.

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

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

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

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

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

Все вы хотите зарабатывать деньги.

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

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

Это неправда.

Вот аналогия.

Если вы начнете новый бизнес, он автоматически принесет деньги?

Абсолютно нет.

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

90% времени, которое проводит на мобильных устройствах, находится в приложениях.

Создайте прибыльное мобильное приложение за меньшее время и с меньшими затратами, чем традиционные решения с помощью BuildFire
НАЧАТЬ РАБОТУ С BUILDFIRE

Потребители явно любят использовать приложения, поэтому возможность есть.

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

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

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

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

Вот что вам нужно знать.

Покупка чего-либо в приложении по сравнению с мобильным сайтом

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

Надеюсь (ради вас) этот сайт оптимизирован для мобильных устройств.

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

Теперь давайте обсудим впечатления клиентов и их отношение к покупательским привычкам.

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

Приложения выигрывают. Вот почему .

Удобство было ответом номер один респондентов.

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

Ваши клиенты хотят все быстро.

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

Но это не проблема, когда люди перемещаются по вашему приложению.

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

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

Оплата покупок в приложении взимается непосредственно с кредитной карты клиента, связанной с его аккаунтом в Google Play или App Store.

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

Один щелчок — и готово. Это так просто для клиента, и вы сразу начинаете получать деньги.

Как это соотносится с мобильным сайтом?

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

Что еще может замедлить клиента?

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

Клиент должен войти в свою учетную запись PayPal или ввести данные своей кредитной карты.

В целом, это более длительный процесс и большая головная боль для пользователя.

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

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

Все, что я пытаюсь сделать, это подчеркнуть, что покупок в приложении лучше .

Платформа, на которой вы запускаете свое приложение, тоже имеет значение.

Обратите внимание на разницу между iOS и Android-покупками .

Средняя покупка на одного пользователя на платформах iOS более чем вдвое больше, чем на Android.

Это не означает, что вы должны выбирать одно вместо другого.

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

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

Из 432 миллионов телефонов 77 миллионов имели программное обеспечение iOS, а 352 миллиона работали на платформе Android.

Две платформы в сумме занимают 99% доли рынка, но только Android составляет 81,7%.

С учетом сказанного, 16% разработчиков Android зарабатывают более 5000 долларов в месяц с помощью своих мобильных приложений, а 25% разработчиков iOS зарабатывают более 5000 долларов за счет доходов от приложений.

Так что имейте в виду эти цифры, если вы планируете выпускать только одну операционную систему.

Что делать, если вы продаете физические товары?

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

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

40% мобильных пользователей покупали что-то в Интернете со своих смартфонов.

Это число продолжает расти с каждым годом.

Есть и поколенческие тенденции. Например, миллениалы доминируют в этой категории.

63% Millenials использовали смартфоны и планшеты для совершения покупок.

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

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

Я имею в виду компанию Touch of Modern .

70% от общего объема продаж компании приходится на мобильные устройства .

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

Так как они это делают?

Примерно 150 000–200 000 пользователей загружают это приложение каждый месяц.

57% их покупателей являются постоянными покупателями.

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

Именно их процесс оформления заказа делает Touch of Modern таким успешным.

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

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

Вот как выглядит .

Это простой экран навигации.

Клиенты могут легко искать и прокручивать товары, которые им интересны.

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

Теперь пользователь увидит подробное описание товара в дополнение к фотографии большего размера.

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

Оказавшись в корзине, покупатель может оформить заказ одним простым щелчком мыши.

Вот и все.

Их приложение позволяет пользователям завершить процесс покупки и покупки всего за три шага.

Здесь меньше проблем по сравнению с сайтом мобильной электронной торговли.

Plus, Touch of Modern может лучше общаться со своими клиентами из мобильного приложения.

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

В конечном итоге эта стратегия работает.

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

Создайте прибыльное мобильное приложение за меньшее время и с меньшими затратами, чем традиционные решения с помощью BuildFire
НАЧАТЬ РАБОТУ С BUILDFIRE

Бесплатные приложения и платные приложения

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

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

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

90% приложений в Apple App Store бесплатны.

Но это не значит, что вам нужно идти этим путем.

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

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

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

Имейте в виду; ваше приложение также будет иметь конкуренцию.

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

Если вы предлагаете приложение бесплатно, вы можете найти других каналов дохода .

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

Если они не заплатят, обязательств нет.

Они потенциально могут загрузить ваше приложение, проверить его один раз и никогда больше не использовать.

Хотя они могут показаться обескураживающими, не стоит смотреть на это так.

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

Конечно, вы предпочли бы активных пользователей, но, в конце концов, это не повредит вашей компании.

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

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

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

Так что здесь определенно можно заработать, если вы сможете продать рекламное место в своем приложении.

Имейте в виду, что эти цифры являются средними и не высечены на камне.

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

Еще один способ заработать деньги с помощью бесплатного приложения — это обновления и подписки.

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

Затем вы можете предлагать премиум-контент или функции на основе ежемесячной подписки.

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

Я уверен, что вы слышали о Tinder .

Идея очень проста.

Пользователи создают профиль и добавляют свои фотографии.

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

Если им нравится профиль другого пользователя, они смахивают вправо. Если нет, они смахивают влево.

Когда два человека проводят друг к другу вправо, они соединяются и могут начать разговор.

Каждый, кто скачивает это приложение, получает доступ к этим функциям бесплатно.

Но есть определенные ограничения.

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

Вот где вступает в игру премиум-подписка.

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

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

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

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

Заключение

Не все приложения приносят прибыль.

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

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

Мобильные пользователи предпочитают приложения мобильным сайтам.

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

Конечно, при создании, разработке и запуске приложения у вас возникнут авансовые расходы.

Но вы можете сэкономить время и деньги , создав приложение на платформе BuildFire.

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

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

Почему?

Весь процесс проще для клиента.

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

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

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

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

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

Планируете ли вы выпустить мобильное приложение на iOS, Android или на обоих устройствах?

.

CMS мобильного приложения для Android и iOS | Система управления мобильным контентом

Создать приложение с помощью системы управления контентом мобильного приложения проще простого. Выполните следующие шаги и создайте приложение с помощью Appy Pie CMS —

• Перейдите на appypie.com/app-builder и нажмите «Создать бесплатное приложение»
• Введите название своей компании и нажмите Далее
• Выберите наиболее подходящую категорию подходит для вашего бизнеса
• Выберите цветовую схему по вашему выбору
• Выберите тестовое устройство
• Вам будет предложено создать учетную запись, чтобы продолжить.Нажмите «Сохранить и продолжить».
• После входа в систему вы будете перенаправлены в раздел настройки программного обеспечения для создания. Настройте внешний вид вашего приложения отсюда.
• После этого нажмите «Сохранить и продолжить».
• На этом экране вы увидите, что ваше приложение создается. Сделайте глубокий вдох, ваше демонстрационное приложение будет готово в течение 2 минут.
• После успешного создания приложения пора его протестировать.
• Отсканируйте QR-код, чтобы загрузить и установить приложение на свое мобильное устройство.Вы даже можете отправить ссылку для установки приложения на свое мобильное устройство по электронной почте, SMS или скопировать и поделиться ею так, как вы хотите.
• После того, как вы загрузили демонстрационное приложение, вы будете перенаправлены в раздел «Мои приложения»
• Здесь вы будете Чтобы просмотреть несколько вариантов приложения, нажмите «Изменить», чтобы внести изменения в демонстрационное приложение.
• Вы увидите цены на золото. В этом плане у вас есть два варианта — «Попробовать» и «Купить сейчас». Вы можете выбрать тот, который вам нравится. Опция «Попробовать» поставляется с двухдневной пробной версией, так что вы полностью удовлетворены приложением, прежде чем совершить покупку.

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

• Добавьте желаемые функции в программу-создатель
• Когда вы закончите, нажмите «Сохранить и продолжить», чтобы завершить создание приложения.

.