Обзор веб-инструментов для создания приложений без использования Android SDK.

После того как компания Adobe заявила о прекращении выпуска Flash Player для Android, пользователи начали искать альтернативу. Мы приведем пару интересных вариантов.

Flash Player умер. Да здравствует HTML5! В напряженной борьбе компания Adobe решила уступить сегмент рынка просмотра видео и web-приложений пользователями мобильных устройств на платформе Андроид. Этого стоило ожидать - приложение нередко «лажало». Официальным поводом для отказа разработчиков от поддержки Flash Player стала его нестабильная работа на версии Android 4.1 (Jelly Bean). Программа исчезла из маркета Google Play, а сама компания Adobe призвала юзеров удалить последнюю версию Flash. Те модели (то есть, на платформе Андроид до версии 4.0 включительно), на которых уже был установлен Флеш плеер до последнего обновления, будут и дальше выполнять свои функции, а также получать патчи для обновления безопасности.

Но что же делать тем, кто недавно приобрел смартфон или планшет на Андроид?

Вариант 1. Браузеры с поддержкой HTML 5

Большинство популярных браузеров для Андроид поддерживают технологию HTML5, на которую перешли большинство сайтов, использующих до этого Flash. Например, тот же YouTube. А это значит, что можно не заморачиваться и просто установить один из продвинутых web-обозревателей. Если вы часто просматриваете видео в Интернете и играете в игры онлайн, тогда лучше выбрать Firefox или Dolphin, в Chrome придется дополнительно устанавливать флеш плеер. Это не сложно, но нужно потратить немного времени.

Кстати, по тестам производительности HTML5 лучше всех показал себя именно Dolphin, прежде всего, из-за движка JetPack. Практически на том же уровне и Chrome. Несколько хуже отображает контент HTML5 Opera Mobile. В частности, у неё возникают некоторые затруднения с бенчмарком Mandelbrot.

Firefox для Андроид, в принципе, также воспроизводит HTML5-контент и JavaScript-сценарии, запуская такие вкладки в отдельном процессе, но при этом «подтормаживает». Тем не менее, флеш плеер в нем вполне работоспособен сразу после установки браузера. Дополнительно ставить ничего не придется, просто нажимайте “Play” и смотрите любимые видеоролики.

Вариант 2. Приложения

Некоторые web-страницы по-прежнему требуют Флеш. Например, ваша любимая игра или видеоролики в блоге. Что же в таком случае делать?

Программисты из Adobe придумали вот что - разработали среду Adobe AIR . Загрузив приложение с таким названием, вы сможете свободно работать с контентом на технологии Флеш. Adobe AIR поддерживает Java Script, AJAX, Adobe Flash и Adobe Flex. Также она позволяет переносить и развертывать web-приложения на коммуникаторе.

Если же вас интересует только видео на сайте ВКонтакте или на YouTube, но вы хотите обойтись без браузера с поддержкой HTML5, тогда можно скачать приложение «ВКонтакте Музыка и Видео » или «YouTube » для Андроид. Таким образом, вы сможете просматривать искомые клипы или фильмы без запуска браузера.

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

Будучи верстальщиком, удавалось написать «псевдо» приложения для мобильных устройств на базе iOS и Android в виде обычных html-страничек, с ограниченным функционалом, без доступа к «плюшкам» в виде GPS, акселерометра, маркета и т.д. Ситуация радикально изменилась, с появлением AppMobi и CocoonJS , которые дают возможность писать приложения и игры прямо на HTML5+Javascript , с теми знаниями и опытом, которые у вас уже есть.

Вступление

Этот цикл статей о создании приложений для iOS и Android на HTML5+Javascript я хочу начать с самой базы - облачных платформ-инструментов для разработки мобильных приложений. На данный момент существует несколько платформ, однако я бы хотел выделить из них две наиболее крупные и совершенные: это appMobi и CocoonJS . Да, я оставляю в стороне PhoneGap , ибо написать на нем игру с поддержкой аппаратного ускорения не выйдет. А нам этом важно, ибо производительность нативного canvas сильно страдает без акселерации.

appMobi

В этой статье я хочу подробно остановиться на appMobi и попробовать с вами запустить простое «Hello World! » приложение, которое затем можно будет опробовать на любом iOS и Android устройстве.

Что же представляет из себя appMobi ? Эта платформа объединяет в себе множество инструментов и сервисов, позволяющих реализовать все потребности разработчиков приложений. Начиная от среды разработки и тестирования, до дистрибуции и монетизации. Конечно, за некоторые «плюшки» придется заплатить (например, если вы хотите получать доход с ваших приложений). Однако, если ваша задача не «срубить бабла», а написать что-то интересное и удобное для пользователя, либо же просто для себя и при этом распространять бесплатно - никакой платы с вас не возьмут.

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

Начать просто, заходим на сайт, жмем «Try it free » в верхнем правом углу и заполняем простую форму, где указываем название нашего приложения и выбираем исходную точку: можно воспользоваться конфигуратором, закачать уже готовый код, начать с примера, либо «с нуля». Лучшим вариантом будет начать с примера. Выбираем «Start with a sample app », «Use “hello world” app » и жмем «Next ».

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

appMobi XDK

Для разработки нам необходимо скачать и установить appMobi XDK («Cross-platform Development Kit»). Работает эта штука прямо в браузере, на данный момент она доступна только для Google Chrome . Где достать браузер рассказывать не буду, а вот XDK качаем отсюда . Установка займет несколько секунд. После установки запускаем приложение. Разрешаем все, что просят разрешить, ставим галки, отвечаем «Да», «Run» и так далее. После того, как XDK будет запущен, откроется вкладка непосредственно со средой разработки, но прежде авторизуемся (аккаунт у нас уже есть), и вуа-ля!

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

Не будем углубляться в изучение интерфейса (в котором разобраться не составляет трудностей), а перейдем непосредственно к нашим приложениям. В верхнем меню в выпадающем списке можно найти множество примеров приложений. jqMobi , кстати, является аналогом jQuery (последний не получится запустить на этой платформе, даешь vanilla javascript !).

Наше тестовое «Hello World» приложение находится в том же списке, и называется «username.HelloWorld: 3.4.0 ». Версия указывает на версию среды разработки, а не вашего приложения. Щелкаем и открываем.

Hello World

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

Встроенный редактор

Любой редактор непосредственно на локали

Здесь стоит остановиться немного подробнее. Изначально все наши проекты находятся в облаке, но у нас всегда есть возможность загрузить исходники себе на компьютер, поработать с ними, и, затем, залить обратно в облако (для запуска на других устройствах). Хочу обратить внимание, что при работе с проектом локально не требуется каждый раз заливать новый код перед запуском в эмуляторе. Эмулятор работает у нас на локальной машине и исходники берутся оттуда же. Открыть локальную папку с исходниками просто: жмем в верхнем меню «Open project folder ». Что делать дальше объяснять излишне: открываем наш редактор и творим!

Сохранение, обновление, синхронизация

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

Немного забегу вперед: если вы захотите тестировать приложение непосредственно на устройстве, то после сохранения кода необходимо так же синхронизировать исходники с облаком, после чего приложение можно будет запустить в тестовом режиме на устройстве. Делается это просто: в верхнем меню есть кнопка «Test Anywhere », нажав на которую мы отсылаем код в облако (надо иметь в виду, что все файлы проекта, включая картинки, звуки, видео и т.п. закачиваются каждый раз заново).

Тестирование на устройстве

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

Последовательность действий такова:

1. Устанавливаем app lab на устройство;
2. В среде разработки (эмуляторе) жмем «Test Anywhere » и дожидаемся загрузки в облако;
3. Открываем app lab ;
4. Жмем в верхнем правом углу кнопку «My Apps », авторизуемся. (Эта же страница доступна через браузер);
5. В списке выбираем наш проект (в данном случае username.HelloWorld ), в раскрывшемся списке жмем «Test Anywhere »;
6. Launch .

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

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

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

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

Document.addEventListener("appMobi.device.ready",onDeviceReady,false)

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

AppMobi.device.setRotateOrientation("portrait"); AppMobi.device.setAutoRotate(false);

Или, например, спрятать статус-бар:

AppMobi.device.hideSplashScreen();

Отключить скроллинг (стандартный метод для touch-устройств):

PreventDefaultScroll = function(event) { event.preventDefault(); window.scroll(0,0); return false; }; window.document.addEventListener("touchmove", preventDefaultScroll, false);

Как мы видим, ничего сверхъестественного нас не поджидает и написание приложения ничем не отличается от обычныго кодинга на HTML/Javascript , с той лишь разницей, что дополнительно у нас есть доступ к функционалу устройства через API.

В завершение

В данной статье я не хотел углубляться в тонкости написания кода, использования DirectCanvas (аналог нативного HTML5 canvas , но с поддержкой аппаратного ускорения, что позволяет поднять FPS до 60 и выше!), multiSound (поддержка мультиканалов), поддержки Retina-дисплеев . Но так или иначе без них будет не обойтись, если речь идет об играх. В других случаях, если вы собираетесь писать какой-то пользовательских интерфейс для работы с удаленной базой, какими-то расчетами, выводом информации - можно обойтись и тем, что у нас есть в примере. Дальнейшее изучение документации поможет написать, в общем-то, все что угодно и затем выложить это в свободный доступ!

В следующей статье я покажу на живом примере запуск анимации на HTML5 canvas , а затем попробуем перенести это все в прослойку DirectCanvas , где можно достичь очень высокого FPS!

Удачи вам и до новых встреч. :)

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

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

Это приложение понравится как детям, так и взрослым. Нарисуйте любого персонажа из мультфильма или кино, нажмите кнопку «Make me a creature» и вы увидите рисунок преобразованный в красивую иллюстрацию.

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

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

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

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

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

Специальное приложение от популярного сервиса Flickr для быстрого просмотра и поиска фотографий или иллюстраций.

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

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

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