Операционная система Android получила широчайшее распространение – по состоянию на конец 2015-го года, на ней работает более 80% мобильных устройства, а графики показывают неуклонный рост. Не угасает интерес и к мобильным приложениям, судя по количеству новинок в Playmarket’е. Как создать приложение для Android самостоятельно? Нужно ли быть для этого настоящим программистом? Об этом мы поговорим в нашей статье.

Профессиональный подход к программированию на Android

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

• Книги по программированию;
• Среда для разработки (включает в себя множество программ и плагинов);
• Дополнительные мануалы по программированию под Android OS;
• Знания в построении алгоритмов.

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

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

Конструкторы приложений для Android

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

• Новостные приложения;
• Каталоги кулинарных рецептов;
• Мобильные блоги;
• Интернет-магазины;
• Приложения для заказа услуг;
• Фото- и видеогалереи;
• Текстовые приложения и многое другое.

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

Конструктор App2b

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

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

Справедливости ради стоит отметить, что этот конструктор умеет создавать приложения не только для Android, но и для смартфонов iPhone (с последующей публикацией в AppStore).

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

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

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

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

Сроки

Первое, из чего складывается стоимость и время разработки - это сложность приложения. Второе - количество платформ (iPhone iOS, iPad iOS, Android phone, Android tablet, Windows Phone), на которых оно будет работать. Да, планшеты и смартфоны нередко считаются отдельно, но не всегда, ниже объясню почему.

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

Приложения средней сложности

Средние по сложности - это те, которые охватывают несколько процессов. К ним относится большинство интернет-магазинов и систем бронирования. Экранов там около 10, есть личный кабинет, поддерживается авторизация через соцсети, есть интеграция с сервером или сайтом, часто и с платежными системами. Может быть встроен функциональность обратной связи, выставления оценок, выстраивания рейтингов. Для нескольких платформ они делаются за 3-6 месяцев (300-800 часов).

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

Сложные приложения

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

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

Стоимость

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

Аренда помещения

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

Одновременно такой штат может вести 8 проектов (тоже по аналогии с материалом по ссылке выше), то есть за каждый месяц работы с вами они потратят как минимум 15 тысяч на аренду офиса под ваш заказ. Таким образом, для простых приложений, которые делаются за месяц-два, расходы составят 15-30 тысяч, для средних (3-6 месяцев) - 45-75, для сложных - от 90.

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

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

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

Проектирование и дизайн

Этим может заниматься и команда от трех специалистов (UX-дизайнер, UI-дизайнер и графический дизайнер), и один мастер на все руки. В первом варианте качество выше (цена тоже), но обычно студии используют второй. В нем на дизайн в среднем уходит 80 часов при затратах на разработку в 500 часов и 160 - при разработке в 900. Со средней московской зарплатой соответствующего дизайнера в 80 000 рублей в месяц (по данным hh.ru) и средним количеством рабочих часов в месяц 165 (по производственному календарю) получаем округленно 15 000 для простого приложения (около 270 часов на создание), 40 000 для среднего (около 670), 80 000 для сложного (около 1 150).

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

Разработка

Делится на backend и frontend, но мобильные программисты, специализирующиеся на определенной ОС, занимаются и тем, и другим. Исходя из среднего оклада сотрудника в 100 000 в месяц (по данным Superjob), получаем стоимость разработки простого приложения примерно в 120 000, среднего - 290 тысяч, сложного – 515 тысяч (количество часов на создание берем то же, что выше).

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

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

Второй вариант – упростить только программирование серверной части, воспользовавшись платформами backend-разработки. Это эффективно, потому что доля backend-работ (включая core) в программировании приложений составляет около 80% – на front уходит только пятая часть времени. Вы получаете готовый SDK, который включает в себя моделирование данных, PUSH, email- и SMS-уведомления, облачное хранилище, серверный код на JavaScript, аналитические инструменты и управление пользователями. Он помогает сократить количество задействованных сотрудников (даже в сложных приложениях можно обойтись без архитектора и разработчика баз данных, системного администратора и одним-двумя системными разработчиками вместо двух-трех) и снижает долю серверного программирования в разработке до 30%.

Это особенно положительно влияет на сроки создания всего продукта (то, что без BaaS-платформы можно написать за 18 месяцев, с ней делается в 2-3 раза быстрее), потому что больше всего времени на серверную функциональность тратится в начале, и пока не создана база, frontend писать невозможно. Плюс автоматически решается вопрос с облачными сервисами для хостинга данных и инструментами анализа серверной нагрузки на приложение. За использование платится комиссия, как у любого облачного сервиса.

Тестирование и публикация

Этим обычно занимается менеджер проекта или специальные тестировщики ПО, но зарплаты у них примерно одинаковые - около 80 тысяч в среднем (снова данные Superjob и HeadHunter). По практике, на тестирование и выкладывание в сторы уходит от 2 дней до 2 недель непрерывной работы, то есть от 16 до 80 часов. Для простого приложения это будет стоить 8 000 рублей, для сложного в районе 40, для среднего – около 25.

Прибавим сюда управление проектом, которое, скорее всего, будет осуществлять тот же менеджер. По опыту, он потратит на это около 3 дней непрерывной работы (включая первую встречу с клиентом, сбор требований и т.п.) в простом варианте, 7 - в среднем и от 14 - в сложном. В деньгах такие траты - это 12 000, 27 000 и 54 000 рублей соответственно.

Кстати, выкладывание приложения в магазин далеко не последняя по сложности задача. Гайдлайны App Store и Google Play содержат довольно много причин, по которым ваш продукт могут отклонить, например, возрастной рейтинг . Кроме того, каждая итерация проверки занимает довольно много времени – около недели (но есть способы ускорить процесс), что добавляет проблем тем, у кого к чему-то приурочены дедлайны по выкладке. Почитать инструкции, хитрости и опыт других других людей, который поможет в этом непростом деле, можно на Хабре.

Если говорить об итоговых цифрах времени и денег, на которые надо рассчитывать, по словам самих исполнителей, то здесь данные студий очень разнятся. Например, 2Nova Interactive озвучивает рамки от 600 тысяч рублей до нескольких миллионов. Минимальный срок разработки у них - 1,5 месяца (без учёта времени согласований и публикации в сторах).

У MST в портфолио есть и проекты, которые были сделаны менее чем за 2 недели, и такие, работы по которым ведутся уже несколько лет (продолжается доработка дополнительной функциональности). В AGIMA нам рассказали, что простое приложение делают за 2-3 месяца и относят к таким все, что дешевле 1 млн рублей (среднее они создают за 3-6 месяцев и стоит оно 2-4 млн, сложные – от 6 месяцев, и стоят они уже от 4 миллионов). Кстати, стоимость может быть как фиксированной, так и пересматриваться в процессе разработки, если у вас горят сроки и нет времени определяться с объемом функционала в начале проекта. Правда, во втором варианте, вы, скорее всего, переплатите за срочность.

Прогнозы

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

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

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

Дмитрий Дементий

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

Стоит ли делать свое мобильное приложение

Стоит. Если не верите на слово, вот несколько фактов:

• По данным Flurry Analytics и comScore, владельцы смартфонов и планшетов пользуются браузером только 14 % от общего времени работы с девайсом. А 86 % времени они тратят на разные приложения.
• Установленное приложение - ваш прямой канал связи с потребителем. Только подумайте: вам не нужно тратить деньги на рекламу или ждать, когда человек найдет вас с помощью «Яндекса». Остается поддерживать нужную пользователю функциональность и предоставлять ему релевантный контент.
• Число покупок, сделанных с помощью планшетов и смартфонов, растет как в интернете в целом, так и в рунете. По информации маркетингового агентства Criteo , уже в 2016 году более половины онлайн-транзакций в рунете будут совершаться с помощью мобильных девайсов.

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

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

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

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

Вы помните, когда бизнесу можно самостоятельно сделать сайт? Правильно, когда денег на сотрудничество с профессионалами еще нет, а время и желание разобраться с WordPress или «Джумлой» есть. Такая же ситуация с приложениями. Созданные самостоятельно программы для iOS и Android можно условно сравнить с сайтами на «движках» с открытым кодом.

Чтобы начать работать, регистрироваться не придется. Нажмите кнопку Create Now на главной странице или выберите меню Create App в правом верхнем углу на любой странице сервиса.

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

• Manual . Этот шаблон позволяет сделать программу-гайд.
• Blog . Приложение поможет аудитории вашего блога читать новые заметки с экрана смартфона или планшета.
• Website . Шаблон конвертирует в приложение сайт.
• Pages . С помощью этого шаблона можно сконвертировать в приложение с простой функциональностью любой контент.
• News . Шаблон позволяет создать приложение агрегатор отраслевых или региональных новостей.
• Page . Шаблон конвертирует в приложение офлайн-контент, например, электронную книгу.
• VK Page и Facebook Page . Создайте приложение, позволяющее следить за обновлениями открытых групп во «Вконтакте» и в Facebook.
• YouTube . Используйте шаблон для продвижения своего канала на YouTube.

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

Воспользуйтесь шаблоном Blog. В соответствующем поле укажите URL блога или RSS-канала. Выберите цвет заголовка заметок.

Укажите название приложения.

Добавьте описание.

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

Для создания загрузочного файла нажмите кнопку Create App. После этого необходимо зарегистрироваться в системе. Подтвердите регистрацию и перейдите в личный кабинет. Здесь вы можете установить приложение на свое мобильное устройство, опубликовать его в Google Play и Amazon App Store. Также система предлагает опцию монетизации. Если вы воспользуетесь этой функцией, в приложении будет отображаться реклама.

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

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

Хотите больше приложений? Тогда создайте приложение-гайд с помощью шаблона Manual.

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

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

8 конструкторов аналогичных AppsGeyser

Если универсальный конструктор AppsGeyser вам не подошел, обратите внимание на аналогичные сервисы:

• AppsMakerStore . С помощью сервиса можно создавать приложения разных типов: от программ для Ecommerce до решений для контент-проектов. Конструктор делает приложения для iOS и Android. Интерфейс сервиса русифицирован. Для новичков есть информативное руководство по использованию конструктора. Сервис платный.
• Mobincube . Инструмент для создания и монетизации iOS и Android-приложений. Базовая функциональность сервиса доступна бесплатно. Конструктор позволяет сделать приложения разных типов.
• Good Barber . С помощью этого сервиса можно разрабатывать Android- и iOS-приложения. Конструктор платный, стоимость использования составляет 16 USD в месяц.

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

Конструкторы приложений: каменный топор или тонкий современный инструмент?

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

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

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

Свяжитесь с нами Обсудим? Закажите бесплатную консультацию

Если вам интересно как создать приложение для Android – это не так сложно как может показаться. Однако без минимальных знаний в программировании и разработке кода все же не обойтись.

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

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

Установка Java Development Kit

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

В следующем этапе необходимо обязательно добавить в интегрированную среду разработки плагин Android SDK. На примере среды Eclipse добавить плагин можно следующим образом:

1. Во вкладке «Помощь» необходимо нажать «Добавить новое программное обеспечение».

1. Нажать кнопку «Добавить» и ввести название плагина и адрес.

1. Кликнуть «ОК» и поставить отметку напротив «Developer Tools’».
2. Нажать «Далее» и начать установку плагина.

После установки пользователь введет в своей интегрированной среде новые иконки.

Настройка эмуляторов для тестирования

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

Так выглядит Android SDK

Чтобы добавить новое устройство необходимо кликнуть на кнопку «Новый» и создать виртуальное устройство, введя основные данные и его характеристики.

• Name;

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

• Target;

Здесь нужно выбрать версию Android, на которой будет производиться тестирование.

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

• SD card;

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

• Skin;

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

• Hardware;

Добавляет оснащения, которые будут использоваться во время тестирования.

Создание первого проекта

Создание первого проекта на базе, интегрированной среди разработки Eclipse, начинается с кнопок Файл - Новый - Проект.

Установка и настройка среды разработки Eclipse Android SDK

Как создать приложение для Android: Инструкция по настройке программ

Изучить новый язык и среду разработки - это минимум, что от тебя потребуется, если ты захочешь написать свое первое мобильное приложение. Чтобы с пониманием набросать элементарный todo list для Android или iOS, не передирая пример из книжки, уйдет не меньше пары недель. Но можно не осваивать Objective-C или Java и при этом быстро разрабатывать приложения для смартфонов, если использовать такие технологии, как PhoneGap.

Если ты внимательно изучал нововведения, которые ожидают нас в Windows 8, то, возможно, заметил, что под ней можно будет разрабатывать приложения на HTML5. Идея, на самом деле, не новая - технологии, реализующие тот же подход для мобильных платформ, развиваются семимильными шагами. Одним из таких фреймворков, позволяющим разрабатывать приложения для смартфонов с помощью связки привычных для нас HTML, JavaScript и CSS!, как раз и является PhoneGap. Написанное с его помощью приложение подойдет для всех популярных платформ: iOS, Android, Windows Phone, Blackberry, WebOS, Symbian и Bada. Тебе не нужно будет изучать особенности программирования под каждую платформу (например, Objective-C в случае с iOS), разбираться с различными API и средами разработки. Все, что потребуется для создания кросс-платформенного мобильного приложения, - это знание HTML5 и специального PhoneGap API. При этом на выходе получится не тупая HTML-страница, «обрамленная» в интерфейс приложения, нет! API фреймворка позволяет задействовать практически все возможности телефона, которые используются при разработке с помощью нативных инструментов: доступ к акселерометру, компасу, камере (запись видео и фотосъемка), списку контактов, файловой системе, системе нотификаций (стандартных уведомлений на телефоне), хранилищам и т. д. Наконец, такое приложение может безболезненно обращаться к любому кросс-доменному адресу. Ты можешь воссоздать нативные элементы управления с помощью фреймворков вроде jQuery Mobile или Sencha, и конечная программа будет выглядеть на мобильном телефоне так, как будто она написана на нативном языке (ну или почти так). Лучше всего проиллюстрировать вышесказанное на деле, то есть написать приложение, поэтому предлагаю сразу приступить к практике. Засекай время - на все про все уйдет едва ли больше получаса.

Что мы будем создавать

В качестве целевой платформы возьмем iOS - да-да, деньги лежат в AppStore, и монетизировать свои разработки пока лучше всего там:). Но сразу внесу ясность: все то же самое, без изменений, можно провернуть, скажем, для Android. Долго думал, какой пример рассмотреть, так как писать очередную тулзу для учета списка дел совершенно не хотелось. Поэтому я решил создать приложение под названием «Геонапоминалка», навигационную прогу, назначение которой можно описать одной фразой: «Сообщи мне, когда я снова тут окажусь». В AppStore есть немало утилит, которые позволяют «запомнить» место, где пользователь припарковал машину. Это почти то же самое, только чуть попроще. Ты сможешь указать на карте города точку, задать для нее определенный радиус и запрограммировать сообщение. Когда ты в следующий попадешь в пределы окружности с указанным радиусом, приложение выдаст тебе уведомление, а точка будет удалена. Будем действовать по такому плану: сначала создадим простое веб-приложение, проверим его в браузере, а затем перенесем с помощью PhoneGap на платформу iOS. Очень важно написать в прототипе и протестировать в браузере на компьютере основную часть кода, поскольку отлаживать приложение в телефоне гораздо сложнее. В качестве каркаса мы возьмем JS-фреймворк jQuery c jQuery Mobile (jquerymobile.com), а в качестве движка карт - Google Maps v3. Приложение будет состоять из двух страниц: карты и списка точек.

• На карте устанавливается маркер твоего текущего положения. По клику на карте создается точка, к которой привязывается сообщение (вроде «машина рядом»). Точку можно удалить, кликнув на ней. Для перемещения маркера человека по карте используется геонавигационный API.
• На странице со списком точек должна иметься дополнительная кнопка «Удалить все точки», а рядом с каждой точкой - кнопка «Удалить эту точку». Если кликнуть по элементу в списке, соответствующая точка отобразится на карте. Настройки пользователя и список точек будем сохранять в localStorage.

UI-фреймворки

jQuery Mobile - это, конечно, не единственный фреймворк для создания мобильного интерфейса. На сайте PhoneGap приведен огромный список библиотек и фреймворков, которые ты можешь использовать (phonegap.com/tools): Sencha Touch, Impact, Dojo Mobile, Zepto.js и др.

Каркас приложения

Сразу объясняю, зачем мы будем использовать jQuery Mobile. Эта JS-библиотека предоставляет нам уже готовые элементы интерфейса мобильного приложения (максимально приближенные к нативным) для самых разных платформ. Нам ведь надо, чтобы на выходе было именно мобильное приложение, а не страничка из браузера! Так что качаем последнюю версию JQuery Mobile (jquerymobile.com/download) и переносим в рабочую папку первые файлы приложения, которые нам понадобятся:

• images/ (перенеси сюда все изображения из одноименной папки архива jq-mobile);
• index.css;
• index.html;
• index.js;
• jquery.js;
• jquery.mobile.min.css;
• jquery.mobile.min.js.

Нужно сделать ресурсы в основном локальными, чтобы пользователь в будущем не тратил мобильный интернет. Теперь создаем каркас страниц в файле index.html. Приведенный ниже код описывает верхнюю часть страницы с картой, надписью «Геонапоминалка» и кнопкой «Точки».

Страница с картой

Атрибут страницы data-dom-cache="true" необходим для того, чтобы она не выгружалась из памяти. Для кнопки «Точки» используется data-transition="pop", чтобы страница «Список точек» открывалась с эффектом «Всплытие». Подробнее о том, как устроены страницы jQuery Mobile, можно почитать в хорошем мануале (bit.ly/vtXX3M). По аналогии создаем страницу со списком точек:

Страница со списком точек

Для кнопки «Карта» тоже пропишем data-transition=»pop», но добавим атрибут data-direction=»reverse», чтобы страница «Карта» открывалась с эффектом «Затухание». Те же атрибуты пропишем в шаблоне точки. Все, наш каркас готов.

Создание приложения

Теперь надо отобразить карту, для чего мы возьмем стандартный API Google Maps, который используется миллионами разных сайтов:

Var latLng = new gm.LatLng(this.options.lat, this.options.lng); this.map = new gm.Map(element, { zoom: this.options.zoom, // Выбираем начальный зум center: latLng, // Устанавливаем начальный центр mapTypeId: gm.MapTypeId.ROADMAP, // Обычная карта disableDoubleClickZoom: true, // Отключаем автозум по тапу/двойному клику disableDefaultUI: true // Отключаем все элементы интерфейса });

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

This.person = new gm.Marker({ map: this.map, icon: new gm.MarkerImage(PERSON_SPRITE_URL, new gm.Size(48, 48)) });

В качестве PERSON_SPRITE_URL используется адрес спрайта человечка из Google-панорам. Его статический адрес - maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png . Пользователь будет добавлять точки, кликая на карте, поэтому, чтобы их отрисовывать, мы будем слушать событие click:

Gm.event.addListener(this.map, "click", function (event) { self.requestMessage(function (err, message) { // Метод, возвращающий текст, введенный пользователем if (err) return; // Метод добавляет точку в список активных и // отрисовывает ее на карте self.addPoint(event.latLng, self.options.radius, message); self.updatePointsList(); // Перерисовываем список точек }); }, false);

Я привожу бОльшую часть кода - остальное ищи на диске. Дальше нам нужно научить приложение перемещать иконку пользователя по карте. В прототипе мы задействуем Geolocation API (тот, который используется в том числе в десктопных браузерах):

If (navigator.geolocation) { // Проверяем, поддерживает ли браузер геолокацию function gpsSuccess(pos) { var lat, lng; if (pos.coords) { lat = pos.coords.latitude; lng = pos.coords.longitude; } else { lat = pos.latitude; lng = pos.longitude; } self.movePerson(new gm.LatLng(lat, lng)); // Перемещаем иконку пользователя } // Каждые три секунды запрашиваем текущее // положение пользователя window.setInterval(function () { // Запрашиваем текущее положение navigator.geolocation.getCurrentPosition(gpsSuccess, $.noop, { enableHighAccuracy: true, maximumAge: 300000 }); }, 3000); }

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

Запуск веб-приложения

Как я уже говорил, отладку в основном необходимо выполнять на компьютере. Самый подходящий браузер для тестирования веб-приложений на компьютере - это Safari или Chrome. После отладки в этих браузерах ты можешь быть уверен в том, что твое приложение не «поедет» в браузере мобильного телефона. Оба этих браузера совместимы с большинством мобильных веб-браузеров, поскольку точно так же, как и они, построены на основе движка WebKit. После устранения всех багов можно переходить к запуску мобильного веб-приложения непосредственно на телефоне. Для этого настрой свой веб-сервер (пусть даже Denwer или XAMPP), чтобы он отдавал созданную страницу, и открой ее уже в браузере мобильного телефона. Приложение должно выглядеть примерно так, как показано на рисунке. Тут важно понимать, что будущее мобильное приложение, собранное для мобильной платформы с помощью PhoneGap, будет выглядеть почти один в один, за исключением того, что на экране не будет отображаться навигационная панель браузера. Если все хорошо, можно приступать к созданию из странички полноценного iOS-приложения. Заметь, что PhoneGap и IDE для мобильной разработки мы до этого момента даже не трогали.

Подготовка

Для того чтобы собрать приложение под iOS, тебе нужен компьютер с операционной системой Mac OS 10.6+ (или виртуальная машина на Mac OS 10.6), а также среда разработки Xcode с установленным iOS SDK. Если у тебя не установлен SDK, придется скачать с сайта Apple образ диска, включающий в себя Xcode и iOS SDK (developer.apple.com/devcenter/ios/index.action). Имей в виду, что образ весит около 4 Гб. Кроме этого, тебе понадобится зарегистрироваться на сайте Apple в качестве разработчика (если ты не собираешься публиковать свое приложение в AppStore, то это требование можно обойти). С помощью этого набора можно разрабатывать приложения на нативном для iOS языке Objective-C. Но мы решили пойти обходным путем и воспользоваться PhoneGap, поэтому нам еще нужно установить пакет PhoneGap iOS. Просто скачай архив с офсайта (https://github.com/callback/phonegap/zipball/1.2.0), распакуй его и в папке iOS запусти программу установки. Когда установка завершится, в меню проектов Xcode должна появиться иконка PhoneGap. После запуска придется заполнить несколько форм, но уже очень скоро ты увидишь рабочую область IDE с твоим первым приложением. Чтобы проверить, все ли работает, нажми кнопку Run - должен запуститься эмулятор iPhone/iPad с шаблонным приложением PhoneGap. Собранная программа выдаст ошибку с сообщением о том, что index.html не найден, - это нормально. Открой папку, в которой ты сохранил первичные файлы проекта, и найди в ней подпапку www. Перетащи ее в редактор, кликни на иконке приложения в списке слева и в появившемся окне выбери «Create folder references for any added folders». Если запустить программу еще раз, то все должно заработать. Теперь можно скопировать все файлы нашего прототипа в папку www. Пора подпилить наш прототип для работы на смартфоне в обработке PhoneGap.

Перенос прототипа

В первую очередь нужно подключить phonegap-1.2.0.js в твой индексный файл. PhoneGap позволяет ограничивать список доступных для посещения хостов. Предлагаю сразу настроить такой «белый список». В меню проекта открой Supporting Files/PhoneGap.plist, найди пункт ExternalHosts и добавь в него следующие хосты, к которым будет обращаться наше приложение (это сервера Google Maps): *.gstatic.com, *.googleapis.com, maps.google.com. Если их не указать, программа выдаст предупреждение в консоли и карта не отобразится. Для инициализации веб-версии нашего приложения мы использовали событие DOMReady или хелпер jQuery: $(document).ready(). PhoneGap генерирует событие deviceready, которое говорит о том, что мобильное устройство готово. Предлагаю этим воспользоваться:

Document.addEventListener("deviceready", function () { new Notificator($("#map-canvas")); // Если у пользователя нет интернета, // сообщаем ему об этом if (navigator.network.connection.type === Connection.NONE) { navigator.notification.alert("Нет интернет-соединения", $.noop, TITLE); } }, false);
Запретим скроллинг: document.addEventListener("touchmove", function (event) { event.preventDefault(); }, false);

Затем заменим все вызовы alert и confirm на нативные, которые предоставляет нам PhoneGap:

Navigator.notification.confirm("Удалить точку?", function (button_id) { if (button_id === 1) { // Нажата кнопка OK self.removePoint(point); } }, TITLE);

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

Navigator.geolocation.watchPosition(function (position) { self.movePerson(new gm.LatLng(position.coords.latitude, position.coords.longitude)); }, function (error) { navigator.notification.alert("code: " + error.code + "\nmessage: " + error.message, $.noop, TITLE); }, { frequency: 3000 });

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

Запуск на устройстве

Подсоедини iPhone, iPod или iPad к компьютеру, на котором запущен Xcode. Программа определит новое устройство и попросит разрешения использовать его для разработки. Нет смысла ей отказывать:). Повторю еще раз: чтобы запустить написанное приложение на iOS, необходимо быть авторизированным разработчиком iOS (другими словами, быть подписанным на iOS Developer Program). Этим придется заморочиться только в случае разработки приложений для продукции Apple, с другими платформами (Android, Windows Phone) все намного проще. У тех, кто обучается в вузе, есть шанс получить доступ к программе бесплатно благодаря каким-нибудь льготам. Все остальные должны платить $99 в год для участия в программе. Apple выдает сертификат, которым ты сможешь подписывать свой код. Подписанное приложение разрешается запускать на iOS и распространять в App Store. Если ты не студент, а $99 для невинных экспериментов тебе пока жалко, то есть и другой способ - обмануть систему. Ты можешь создать самоподписанный сертификат для верификации кода и запустить мобильную программу на джейлбрейкнутом iOS-устройстве (не буду на этом останавливаться, потому что все максимально подробно расписано в этой статье: bit.ly/tD6xAf). Так или иначе, ты вскоре увидишь работающее приложение на экране своего мобильного телефона. Останавливай секундомер. Сколько времени у тебя на это ушло?

Другие платформы

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

Appcelerator Titanium (www.appcelerator.com).

Titanium умеет собирать приложения в первую очередь под Android и iPhone, но в нем также заявлена поддержка BlackBerry. Кроме самого фреймворка, проект предоставляет набор нативных виджетов и IDE. Ты можешь разрабатывать приложения на Titanium бесплатно, однако за поддержку и дополнительные модули придется заплатить (от $49 в месяц). Цена некоторых сторонних модулей доходит до $120 за год. Разработчики Appcelerator Titanium утверждают, что на основе их фреймфорка написано более 25 тысяч приложений. Исходный код проекта распространяется под лицензией Apache 2.

Corona SDK (www.anscamobile.com/corona).

Эта технология поддерживает основные платформы - iOS и Android. Фреймворк нацелен в основном на разработку игр. Еще бы, ведь разработчики заявляют о высококачественной оптимизации на OpenGL. Бесплатной версии у платформы нет, а цена довольно-таки кусачая: $199 в год за лицензию для одной платформы и $349 в год для iOS и Android. Corona предлагает свою IDE и эмуляторы устройств. Приложения под Corona пишут на языке, похожем на JavaScript.

Заключение

Мы создали простое мобильное веб-приложение и в несколько простых шагов портировали его на платформу iOS с помощью PhoneGap. Мы не написали ни строчки кода на Objective-C, но получили программу приличного качества, потратив минимум времени на перенос и изучение API PhoneGap. Если ты предпочитаешь другую платформу, например Android или Windows Mobile 7, то ты так же легко, без каких-либо изменений под эти платформы, сможешь собрать наше приложение (для каждой из них есть хороший вводный мануал и видеоурок: phonegap.com/start). Чтобы убедиться в состоятельности платформы, можно посмотреть на уже готовые приложения на PhoneGap, которые разработчики технологии собрали в специальной галерее (phonegap.com/apps). По факту PhoneGap - это идеальная платформа для создания как минимум прототипа будущего приложения. Ее главными преимуществами являются быстрота и минимум затратат, чем активно пользуются стартапы, которые во всех отношениях ограничены в ресурсах. Если приложение попрет, а внутренности на HTML+JS тебя по какой-то причине перестанут устраивать, всегда можно будет портировать приложение на нативный язык. Не могу не сказать, что PhoneGap изначально разрабатывался компанией Nitobi как открытый проект (репозиторий располагается на GitHub: github.com/phonegap). Исходники и дальше будут оставаться открытым, хотя в октябре прошлого года компанию Nitobi купил Adobe. Нужно ли говорить, какие перспективы появляются у проекта при поддержке в лице такого гиганта?

Программы и игры