Мобильная веб-разработка: HTML5 приложение для Android
Вступление
К счастью, есть более чем один способ написать приложение для мобильного телефона. Можно сделать сайт, упаковать его специальным образом, и вуаля, вот вам и приложение! Именно такой подход предлагает нам проект phonegap.com именно об этом методе и пойдет речь в этой статье.
Уверен что ни стоит обсуждать экономическую целесообразность данного подхода. Она на лицо. Да, знаний нужно больше чем у среднестатистического веб разработчика, но все же, это сайт! Это понятно! Это тот же HTML, это тот же броузер, тот же Javascript. Найти разработчика ни так сложно, как скажем “нативного”. А уж если умножить на кроссплатформенность данного решения, так и вообще может показаться что это панацея. Конечно, мы то с вами знаем, что ни какой “пилюли” не существует, но в ряде случае, это действительно best practic
Итак, мое рабочее задание звучало так: Разработать клиентское приложение, под ОС Android. Приложение — игра. Квест. Суть игры заключается в следующем: группа людей, желающих интересно отдохнуть, делятся на команды. Каждой команде дается по смартфону. В смартфоне приложение. Открываем приложение. Приложение соединяется с сервером и оттуда приходят вопросы. Для каждой команды они свои. Вопросы могут выглядеть как обычные вопросы с вариантами ответов, ну скажем Сколько лет городу Санкт-Петербург?, так и вопросы локации. Найдите парадный вход в инженерный замок. Команда двигается, находит вход, нажимает Мы на месте и координаты уходят на сервер. От сервера ответ, верно или нет. Есть также вопросы фотографии. Например Сфотографируйте себя на фоне инженерного замка. В сумме, все ответы оцениваются и в итоге одна из команд выигрывает, набирая больше очков. Вкратце все.
Шаг 1 — протитипы
В общем задание нам понятно. Предположим что техническое задание уже составлено. Что еще? Нужны прототипы. Вот они:
Шаг 2 — макеты
Следующий шаг. Нужно их от рисовать. Беремся за работу, получается следующее.
Шаг 3 — выбираем фреймворк
Возьмем Sencha Touch. Фреймворк сделан на подобие ExtJS. Большое количество классов. Компонуем их, настраиваем — получаем приложение. Доступ к HTML элементам есть, но на уровне фреймворка управлять элементами крайне не разумно. Грубо говоря, поменять стандартное визуальное отображение элементов крайне затруднительно. Зато данные от сервера получать в формате JSON одно удовольствие.
И наоборот. Jquerymobile это доступ к элементам, по сути расширенный Jquery. Добавляются теги к элементам. После загрузки фреймворк по этим тегам дополняет элементы стилями и другими элементами. Вот только подружить фрейморк с JSON данными от сервера у меня не получилось. Jquerymobile ждет от сервера html код. Безусловно можно получать JSON и его на стороне клиента преобразовывать в html код, что собственно и делает Sencha. Но это ни есть хорошая практика. Это идет в разрез с идеологией фреймворка. Возникает огромное количество проблем, решить которые крайне сложно.
Стоп. А зачем нам фреймворк? Что первый, что второй, по сути, это, так сказать, готовая элементная база, готовые решения, цель которых помочь вам сделать приложение (сайт) визуально похожим на нативное приложение. А нужно нам это? Нет. А как же PhoneGap? А что он, ему все равно, что вы используете. Ни где ни каких ограничений нет. Ну тогда давайте просто сверстаем приложение, как обычный сайт и дело с концом!
Шаг 4 — верстаем
Сам процесс верстки ни чем ни отличается от стандартного. Есть безусловно нюансы, вот о них и поговорим. Первым таким нюансом являются метатеги.
Без этой строчки в заголовке html кода, ваше приложение будет отображаться как обычный сайт. Броузер будет его зумировать, что реалистичности приложению совсем не добавляет.
И самый последний нюанс это position:fixed. И это действительно проблема, ибо универсальных решений тут нет. Все упирается в сами мобильные броузеры, они просто не поддерживают, или поддерживают но не полностью, такой функционал. Ни получается закрепить панели управления одним решением для всех случаев. К примеру, jquerymobile, до версии 1.1, в случае если броузер не поддерживает position: fixed, эмулировал скроллирование и динамически менял позицию закреплённых элементов, что в общем-то не придавала реалистичности и порой выглядело “ни айс”.
Вот по этой ссылке есть описание мобильных броузеров, которые поддерживают position: fixed
bradfrostweb.com/blog/mobile/fixed-position
а также есть ссылки на Javascript библиотеки, которые эмулируют работу position: fixed и процесса скроллирования. К сожалению работу ни одного из них удовлетворительной назвать нельзя.
В моем конкретном случае, мобильная платформа была указана как Android 2.3, а она поддерживает position: fixed, но при этом пользовательский zoom работать не будет, что по сути в приложении ни к чему. Указываем в заголовке viewport
И прописываем стили
Шаг 5 — эмуляторы
Очевидно, что верстать и смотреть в броузере, в окне монитора, затруднительно. Разрешение андроид приложение, скажем 320×480, а какие размеры экрана у вашего монитора? На помощь приходят эмуляторы. Самый простой эмулятор уже есть в вашем броузере! Если вы загрузите сверстанные страницы в Google Chrome и нажмете Ctrl+Shift+I, броузер покажет вам инструменты разработчика. В правом нижнем углу вы можете найти иконку с шестеренкой, нажимайте на нее. Далее выбираем вкладку Override и вот он, ваш эмулятор. Выбираем User Agent и ставим галочку Device Metric. На первом этапе этого будет достаточно.
А еще есть эмулятор от самого PhoneGap! emulate.phonegap.com
Называется Ripple. Ставится в виде дополнений к Google Chrome. Ура! Наши возможности резко увеличились. В случае, если в своем приложении вы используете библиотеку cordova для расширения функционала приложения, скажем для работы с камерой телефона или компасом, то Ripple даст вам возможность симулировать данные процессы.
Ну и раз пошла речь про эмуляторы, нельзя ни сказать и про эмулятор, который ставиться вместе с Eclipse, если следовать инструкции от Phonegap
docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
Этот эмулятор уже ведет себя совсем как настоящее устройство. Все ошибки, какие были найдены на этом эмуляторе, все аналогичным образом были найдены и на устройстве. Ну и конечно нужно сказать, что пользоваться этим эмулятором оперативно сложно. Долго грузится, трудно текст набирать и т.д. Подходит он для самой последней стадии. Когда ваше приложение уже работает прекрасно на всех других ранее перечисленных эмуляторах.
Шаг 6 — программируем
Хоть статья и для программистов, размешать весь код тут просто глупо. Опишу в общем. Программирование веб приложение, по сути, ни отличается от программирование небольшого сайта. Тут те же методы и подходы, но выполнены на Javascript. Тот же MVC, те же паттерны: синглетон, компановщик и т.д.
Вот фронт контроллер
* В javascript нет магических методов. Если скажем в PHP мы можем использовать __call, и вызывать App.SomeSome(‘ ’), то тут нужно будем писать App.Run(‘SomeSome’, ‘ ’)
Вот пример контроллера:
Вот небольшой пример модели
Вот пример представления
По сути, тут тоже самое, что и в случае, если бы сайт писался на PHP. За исключением фундаментального принципа, Javascript — асинхронный язык и без callback тут ни как (если не использовать специальные библиотеки конечно же)
Отдельно хочется остановится на нюансах, а именно работа с фотокамерой смартфона. Из коробки javascript не умеет этого делать. На помощь приходит библиотека Cordova, которую предлагает подключить PhoneGap. А вот ссылка, на описание работы с камерой телефона
При работе с расширенными функциями Javascript и в частности с камерой, я ждал от них больше всего проблем. И не напрасно. Первое, с чем пришлось столкнутся, это с тем, что после фото съемки, камера просто показывала черный экран и не возвращалась обратно в приложение. Как оказалось, это связано с тем, что по умолчанию фотография делалась максимального качества и файл получался большой. Процесс его переноса в приложение, в следствие не большой мощности самого телефона, занимает существенное время. Пришлось внести изменения в демонстрационный код
Но и это оказалось еще не все. Метод getPicture возращает base64 закодированную картинку, а вот данные между сервером и клиентом передаются в виде запросов JSONP.
Очевидно что передать такое количество данных через GET запрос невозможно. Серверная часть, кстати, не помню говорил я или нет, на PHP. Да, не самое лучшее решение, про WebSocket можно забыть. Проксирование тоже не сделать. Вероятно, решение данной проблемы была одна из самых сложных. А решение нашлось следующее. Время идет и стандартные классы расширяются, добавляются новые методы. Так вот класс XMLHttpRequest обзавелся новыми событиями. Кроме стандартного onreadystatechange появилось также событие onload. Если обработчик ответа от сервера “повешать” на него, и в заголовке Content-Type указать application/x-form-urlencoded, то броузер будет делать кроссдоменный запрос методом POST, что, собственно нам и нужно. Вот пример
И еще, очень важный момент. Кроссдоменный запрос, не важно как он реализован, является синхронным, даже не смотря на то, что выше приведенный код выглядит как асинхронный.
Столкнулся я также и с проблемой Same Origin Policy. Решение этой проблемы лежит на серверной стороне. В конфигурационных файлах прописывается разрешение на кросс доменный запрос и дело с концом.
Хочется также отметить, что в случае, если вам не нужны расширенные функции работы с телефоном: акселерометр, компас, камера, медиа и т.д. подключать библиотеку cordova не обязательно (а это примерно 300 килобайт). Геолокация, кстати, доступна и без нее.
Шаг 7 — отлаживаем
После загрузки эмулятора, в панели LogCat Eclipse будет огромное количество сообщений. Первым вопрос который возникает — какие наши? Для того, чтобы видеть только свои ошибки, и в частности, видеть сообщения которые приложение выводит в консоль console.log, нужно настроить фильтр. В панели LogCat, слева, есть отдельный блок, Saved Filters. Открыв ее, вы конечно увидите пустой список, ибо фильтров у нас пока нет. Нажимаем на плюсик и видим окно
Вводим в Log Tag web console, как на картинке и теперь Log консоль будет показывать сообщения от вашего веб приложения.
Как и ожидалось, эмулятор в броузере, далеко не то что эмулятор в Eclipse. Действительно, появились ошибки, которых ранее не было.
Начинаем изучать ошибку. Очевидно что ошибка вызывается в момент получения данных с сервером. Ошибка говорит что приходит статус 0. Начинаем искать решение в Google, и вот что находим
simonmacdonald.blogspot.ru/2011/12/on-third-day-of-phonegapping-getting.html
stackoverflow.com/questions/11230685/phonegap-android-status-0-returned-from-webservice
Делаем вывод: вероятно нужно добавить статус 0, как верный статус, для продолжения обработки ответа сервера. Ищем, где же это сообщения JSCallback и находим его в файле cordova.js на строке 3740 (cordova-2.1.0.js)
Пробуем заменить if (xmlhttp.status === 200) на if (xmlhttp.status === 200 || xmlhttp.status === 0) и вуаля — ни какого эффекта!
Дальше не буду рассказывать как я потратил целый день, кружа вокруг этой ошибки. Скажу только, что был готов отчаяться, ибо ни что не могло мне помочь. Приложение все равно падало, пока я просто не решил закомментировать часть кода. И о чудо! Ошибка исчезла! Возвращая, по частям, свой код, я нашел его часть, которая приводила к ошибке.
Почему смена Хеша, приводила к такой ошибке, для меня осталось загадкой. Если у кого какие будут мысли на этот счет — велком.
Шаг 8 — запускаем
Чтобы запустить приложение уже не посредственно на телефоне, достаточно войти в решим настройки, выбрать раздел Разработка и там взвести галочку напротив пункта Отладка USB. Далее, нажимая RUN в eclipse, среда определит что у вас подключен телефон к USB, а я надеюсь вы уже это сделали, и начнет запускать приложение уже на аппарате.
Лучшие WEB-приложения на Android для разработчика
Сегодня мы проведем обзор лучших приложений для веб-мастеров. Подобные программы пользуются большой популярностью в среде девелоперов, ведь нередко возникает потребность быстро поправить код или отслеживать какую-то статистику, в том числе, когда вы находитесь далеко от рабочего места и даже без любимого ноутбука. Все приложения, представленные в обзоре, помогают в решении этих вопросов. Обзор предназначен только для пользователей ОС Android.
Ссылки мы решили не выкладывать, так как они нередко меняются, особенно, когда выходит очередное обновление. Если вас заинтересуют описанные приложения, можно обратится к сервисам Google. Итак, встречайте: лучшие помощники для веб мастера.
SKITCH
Программа умеет быстро и качественно делать снимок (screen) экрана. Одинаково хорошо работает как на планшетах, так и смартфонах. Приложение имеет вполне достойный набор функций, позволяющий удобно и комфортно работать с картинками.
Основные возможности приложение для редактирования графических файлов:
Есть возможность настройки цвета выделения и управление инструментами – размер кисти и насыщенность и т.д. Можно добавить текст к рисунку – комментарий, подпись, пояснение.
Приложение заточено только под платформу Андроид, позволяет отправить отредактированное изображение на любую электронную почту или через MMS, может напрямую работать с сервисами Picasa и Google+.
ANDFTP
Клиент AndFTP дает разработчику удобный набор инструментов для полноценной работы с файлами в WEB среде со смартфона или планшета. При помощи клиента легко можно скачать или залить файлы, а также любые данные на сайт. Плюсом является возможность так называемой «докачки», если соединение с ресурсом было прервано. Вы получаете очень широкий набор инструментов для работы с сайтами в одном флаконе.
Программа может без труда работать с большинством протоколов предназначенных для передачи данных в мировой паутине:
РЕДАКТОР ВЕБМАСТЕРА LITE
Один из самых удобных мобильных редакторов исходного программного кода для нескольких ЯП. Приложение поддерживает все распространенные кодировки текста, в том числе, основные модификации кодировки Win. Имеет два режима отображения – светлый (дневной) и темный (ночной).
С исходным кодом HTML, PHP, а также с описанием стилей CSS и кодом JS работать очень удобно. Имеется подсветка ошибочного синтаксиса, возможность вставлять готовые операторы и элементы разметки (по подсказке), работает с файлами всех веб-форматов. Есть возможность поиска по номеру строки. Также у редактора есть поддержка самых популярных тегов. Есть поддержка поиска и замены текста. Отлично подходит для тех аварийных случаев, когда срочно нужно поправить код «на коленке».
Редактор платный, но имеется и бесплатная без всяких ограничений по времени версия. В ней имеются ограничения в подсказках кода и конструкций, нет предварительного просмотра полученного результата. В принципе, если работать в мобильном режиме не слишком часто, то это – не слишком большая проблема. Приложение может работать как удобный помощник для работы с кодом, а также просто как обычный редактор текста.
ЯНДЕКС.МЕТРИКА
Yandex.Metrika – удобное и полностью бесплатное приложение для проверки статистики, разработанное специалистами поисковика Яндекс.
Андроид-версия (как и аналогичная под IOS) предназначена для проверки и учета частоты посещения сайтов, помогает анализировать поведение посетителей сайтов, а также проверяет эффективность CMM продвижения. Работа Метрики основана на стандартных принципах интернет счетчиков. Код устанавливается на сайт и в процессе работы отслеживает любое посещение ресурса, храня данные о нем.
В настоящее время статистика Яндекс признана второй по величине системой аналитики для сайтов в Европе. Сервис отлично интегрирован с Yandex Директ и Маркетом, это позволяет вести анализ на ресурсе одновременно по нескольким параметрам.
Приложение очень полезно веб-мастерам, которые занимаются самостоятельным продвижением, поможет отслеживать показатели сайта, даже находясь в отпуске. При этом вам не потребуется брать с собой в поездку ничего, кроме смартфона или планшета.
Я.МЕТРИКА
Я.Метрика – это аналог приложения для работы со статистикой Яндекс, созданный независимым разработчиком. Он полюбился многим пользователям благодаря тому, что с одной стороны, продукт получился легче и быстрее, чем официальный вариант. С другой – программа очень красочная, статистика подается в виде наглядных диаграмм и графиков, очень удобно для анализа.
Может работать с обычным набором сведений – просмотры, цели, информация о посетителях и т.д. Причем, в отличие от Яндекса.Метрики, здесь вы можете подключить только один или несколько выборочных сайтов из аккаунта. Т.е. это не просто мобильный доступ к статистике, но – независимое удобное приложение.
Какой вариант вам покажется удобнее – вопрос исключительно личного вкуса. Оба вида Метрики работают без нареканий. Основные отличия — это особенности отображения, а также выбор между скоростью и наибольшей полнотой сведений, в том числе, из Маркета. Тут выбор делает каждый для себя.
GANALYTICS
Google Analytics (GA) – это мощная и подробная веб-аналитика для сео-специалистов, но уже от компании Гугл. Мобильный вариант статистики также полностью бесплатен. Для использования этого инструмента достаточно подключить сайт к Гугл Аналитике и установить на мобильное устройство программу-клиент.
При использовании бесплатной версии можно обработать данные, полученные с более 10 млн страниц за месяц. Программа напрямую интегрирована с сервисом Google AdWords и Analytics. И в ней есть доступ практически ко всем настройкам и вариантам статистики, практически, как из веб-версий. Для получения детальной информации можно запросить отчет. В приложении доступно около 30 настраиваемых шаблонов отчетов.
Вы можете добавить в одно приложение до 50 профилей Гугл-пользователей, после чего переключаться между ними по мере нужды.
Если вы скачаете GA и одну из версий метрики от Яндекс, отслеживать поисковые параметры веб-проектов вы сможете, где и когда угодно. Как известно, статистика от двух мощнейших поисковиков позволяет получить все, что может понадобиться для анализа, оптимизации и раскрутки любого проекта.
ЯНДЕКС.ДИРЕКТ
Приложение «Яндекс.Директ» — это система контекстной рекламы для страниц Яндекса, адаптированная под работу с мобильных устройств. Позволяет управлять SMM компаниями, а также изменять ставки на конкретные фразы или объявления, получать свежую и актуальную информацию о показах, запустить или остановить рекламную кампанию и т.д.
Чтобы своевременно получать информацию об использованных средствах и другие важные уведомления, просто разрешите приложению пуш-уведомления. И вы всегда будете в курсе того, что происходит с вашей рекламой.
Что еще может приложение:
Еще одна полезная «плюшка» в приложении – возможность пополнить счет или оплатить услуги на различных ресурсах через Яндекс Деньги.
X-PLORE FILE MANAGER
X-plore – менеджер файлов для мобильных устройств. Считается одним из лучших. С недавнего времени доступен да телефонов и планшетов на платформе Android. Помимо стандартных функций любого файлового менеджера включает в себя возможность просмотра TXT файлов и мультимедиа. С помощью приложения можно легко получить к популярным облачным хранилищам. Легко работает с архивами, так же имеет встроенный HEX редактор.
Интерфейс менеджера позволяет:
WORDPRESS
Приложение WordPress для мобильных устройств позволяет пользователю легко управлять веб-публикациями. Практически с любого мобильного гаджета вы можете выложить, отредактировать или создать публикацию для вашего сайта. Дополнительно установленный плагин даст доступ к статистическим данным:
Приложение под Андроид поддерживает практически все сайты, созданные в различных версиях WordPress, от 3.6 и выше. Дает возможность создавать и использовать проекты различной сложности.
Все описанные приложения рассчитаны на платформу Android и будут интересны различным группам веб мастеров. Напомним, что эти приложения есть на сервисе Гугл Плей (Google Play), где вы сможете без проблем скачать на свои устройства. Само собой, что этот перечень – далеко не полный. Он охватывает основные нужды веб-мастеров разных профилей, позволяет оперативно решать рабочие вопросы даже «стоя в пробке со смартфона». А если вы пользуетесь чем-то еще не менее полезным, напишите об этом в комментариях. Давайте делиться запасами полезных инструментов!
Как сделать приложение из веб-сайта
Разработчики популярных веб-ресурсов стараются сделать все возможное, чтобы клиентам было комфортно потреблять предоставляемый контент. В частности, нередко можно встретить, что из сайта они создают отдельное приложение. С помощью приложения можно информировать посетителей о новинках, если подключить всплывающие уведомления, либо использовать его как метод дополнительного продвижения. В общем, преимуществ у такого подхода много.
Что для этого нужно, сложно ли сделать такое приложение и какие знания для этого потребуются? Поговорим об этом в сегодняшней статье.
Зачем создавать из сайта приложение
Мы давно привыкли говорить «веб-приложение», подразумевая под этим простое приложение. Чаще всего приложения похожи по функциональности на обычные мобильные версии сайта, но все-таки есть некоторые отличия. В полномасштабном приложении мы получаем доступ к различным функциям, которые на сайте попросту отсутствуют. Например, это может быть функция встроенных уведомлений, хотя сейчас и такое можно спокойно организовать через браузер.
Приложения из сайтов популярны среди новостных ресурсов и других веб-сайтов, насыщенных контентом. Если вы столкнулись с тем, что вам нужно конвертировать сайт, но до сих пор не уверены, нужно ли вам это, то давайте разбираться в преимуществах такого подхода.
Что для этого нужно?
Разработка собственного приложения из веб-сайта – довольно сложная задача, которая требует особых знаний в области программирования. Для самостоятельного изучения вы можете найти много гайдов по данному вопросу, но не факт, что они легко дадутся. В этом деле довольно много нюансов, которые будут посильны только специалисту.
Если самостоятельно сделать его не получается, то надо ли непременно искать программиста? Да, но только тогда, когда нужен высококачественный продукт со своими фишками. В противном случае можно обратиться к онлайн-сервисам, которые выполняют конвертацию сайта в приложение всего за несколько минут. Кроме того, если ваш сайт работает на CMS WordPress, то его можно легко преобразовать в приложение. Сделать это можно с помощью специальных сервисов и плагинов, распространяющихся как в бесплатном, так и платном доступе.
Лучшие сервисы для создания приложения из сайта
Обратите внимание на то, что ни один бесплатный сервис не сможет обеспечить высокую функциональность вашему приложению. Обычно они предназначены для того, чтобы сделать что-то простое, приближенное к демоверсии. Если нужно получить функциональный продукт для широкой аудитории, то лучше обратиться к специалисту либо к платным сервисам.
Подробнее о них мы и поговорим далее – рассмотрим как профессиональные решения, так и более простые.
Tadapp Native
Tadapp Native – это лучшее решение для тех, у кого нет времени ждать. Сервис заверяет, что может создать приложение для Android и iOS всего за 5 минут и бесплатно опубликовать его в Google Play. Единственное, с чем могут возникнуть проблемы, так это с адаптацией сайта. Если ее нет, то конвертация, вероятнее всего, пройдет некорректно.
Особенности:
Стоимость: от 890 рублей
Ссылка на официальную страницу: Tadapp Native
Appmaker
Appmaker – сервис с 14-дневным пробным периодом, во время которого пользователю предоставляется возможность создать из сайта полноценное приложение на платформе iOS или Android. Appmaker предлагает 3 варианта создания приложений: на WordPress, c WooCommerce и в виде Web App (веб-версия). На официальном сайте можно найти истории успешных компаний, которые использовали данный сервис.
Особенности:
Официальная страница: Appmaker
Appverter
Особенности:
Официальная страница: Appverter
AppPresser: плагин для WordPress
Особенности:
Официальная страница: AppPresser
MobiLoud: плагин для WordPress
MobiLoud – это еще одно решение для веб-ресурса, созданного на WordPress. Он очень похож на предыдущий сервис, но здесь есть некоторые отличия. MobiLoud предоставляет несколько «предустановок» приложений, которые можно использовать в зависимости от того, какие функции необходимо реализовать. Второе отличие – стоимость, и она заметно выше.
Особенности:
Официальная страница: Mobiloud
Создаем приложение из сайта
Лучшие сервисы мы рассмотрели, теперь давайте воспользуемся одним из них и попробуем создать приложение на основе веб-сайта. Для примера возьмем сервис Appmaker с бесплатным пробным периодом.
Чтобы сделать приложение, выполним следующее:
Как только создание приложения будет завершено, будет предоставлена ссылка на скачивание файла. На этом все!