Превращаем статический сайт в мобильное приложение с помощью jQuery Mobile и PhoneGap

  • Tutorial

После приобретения телефона на базе Android, возникла задача сделать из сайта brainexer мобильное приложение. Выбор пал на jQuery Mobile и PhoneGap. До этого никаких познаний в обрасти мобильной разработки не было, поэтому пришлось осознать некий пласт новой информации, выжимкой из которого я бы и хотел поделиться. В итоге статья представляет из себя небольшой quick start — как из пачки html файлов получить приложение опубликованное в Google Play.

jQuery Mobile


Первым делом убираем все лишнее (меню, футер и т.д.) и основной контент помещаем в стандартный шаблон в data-role=«content».
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
	</head>
	<body>
		<div data-role="page">
			<div data-role="header">
				<h1>Заголовок</h1>
			</div>
			<div data-role="content">
			   <p>Содержание</p>
			</div>
		</div>
	</body>
</html>

Нужно не забыть перед сборкой файлы js и css поменять на локальные версии.
Меню же можно поместить на стартовую страницу index.html в виде аккордеона состоящего из collapsible-set и listview
<div data-role="collapsible-set" data-theme="b">
	<div data-role="collapsible">
		<h3>Раздел 1</h3>
		<ul data-role="listview">
			<li><a href="page1.html">Страница 1</a></li>
			<li><a href="page2.html">Страница 2</a></li>
		</ul>
	</div>
	<div data-role="collapsible">
		<h3>Раздел 2</h3>
		<ul data-role="listview">
			<li><a href="page3.html">Страница 3</a></li>
		</ul>
	</div>
</div> 




У jQuery Mobile есть несколько тем [a-e] и атрибутом data-theme мы указали какую хотим использовать. «b» — синяя.

Если на сайте используются модальные диалоги, то их можно реализовать следующим образом. На страницу помещается блок
<div id="dialog1" data-role="page">
	<div data-role="header">
		<h1>Заголовок диалога</h1>
	</div>
	<div data-role="content">
		<p>Тело диалога</p>
	</div>
</div>



И ссылка вида,
<a data-rel="dialog" href="#dialog1"> Диалог </a> 

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

Если на странице необходимо какое либо доп меню, то его можно поместить в header справа. Сам заголовок при этом сместить влево, иначе кнопки будут на него наезжать.
<div data-role="header">
	<h1 style="text-align:left;margin-left:15px;">Заголовок</h1>
	<div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
		<a data-rel="dialog" data-iconpos="notext" data-icon="gear" data-role="button" href="#dialog1"></a>
		<a data-rel="dialog" data-iconpos="notext" data-icon="bars" data-role="button" href="#dialog2"></a>
	</div>
</div>



Тут используется контрол кнопки data-role=«button» у которой используется иконка data-icon=«gear» без текста data-iconpos=«notext»

Собственно это вся основа что мне потребовалась для моего приложения. Со всеми остальными контролами можно ознакомиться на сайте
view.jquerymobile.com/1.3.2/dist/demos

PhoneGap


Следующий шаг — запаковать все что получилось в apk.
Сначала устанавливается nodejs.org, после ставиться сам phonegap
npm install -g phonegap

Создаем приложение HelloWorld
phonegap create MyApp

Все html файлы кладутся в папку www, index.html стартовая страница.
Для сборки приложения есть два варианта.
1)Скачать Android SDK и при запуске phonegap build будет использоваться локальная окружение. Главный плюс установки SDK — можно будет исползовать эмулятор Android, но у него есть и минус, он достаточно тормозной.
2)Использовать сервис build.phonegap.com — основная задача которого как раз состоит в том что бы разработчику не нужно было настраивать окружение для сборки под разные платформы. То есть, не устанавливая sdk Android, Windows Phone вы можете собрать apk, xap и т.д. Вопрос только останется на чем их тестировать. Минус у этого варианта появляется если у вас больше одного приложения. Так как бесплатно доступна сборка только одного приватного проекта.
Что бы собрать приложение с помощью build.phonegap.com запускаем
phonegap remote build android

Плагины.

Если вам требуется что то непосредственно от телефона, например доступ к камере или файловой системе, то об этом нужно сообщить с помощью специальной команды. Например у меня звук проигрывается с помощью html audio, но в андроиде с ним существуют проблемы, поэтому пришлось использовать Media плагин, так же для получения локали пользователя для выбора язык интерфейса нужен плагин Globalization.
Устанавливаем cordova
npm install -g cordova

И соответственно запускаем команды в папке приложения
cordova plugin add org.apache.cordova.media 
cordova plugin add org.apache.cordova.globalization

Список установленных плагинов можно получить командой
cordova plugin list
[ 'org.apache.cordova.globalization',
  'org.apache.cordova.media' ]

Добавляем в html ссылку на cordova.js
<script src="cordova.js"></script>


Теперь например можно получить локаль. Доступ к апи нужно производить после события deviceready.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
	navigator.globalization.getLocaleName(
		function (locale) {
			alert(locale.value);
		},
		function (error) {
			alert(error);
		});
}


Иконки и заставки

В папках «www\res\icon\android\» «www\res\screen\android\» расположены соответственно иконки и заставки. По умолчанию там лежать картинки с логотипами PhoneGap, поэтому неплохо бы заменить их на собственные. Так же общая дефолтная иконка лежить в www\ и называется icon.png

Файл конфигурации

Файл config.xml лежить в папке www, в нем нужно указать id приложения, версию приложения, название, описание и автора.
<widget id="com.phonegap.helloworld" version="1.0.0">
    <name>HelloWorld</name>
    <description>
        Hello World sample application that responds to the deviceready event.
    </description>
    <author email="support@phonegap.com" href="http://phonegap.com">
        PhoneGap Team
    </author>
</widget>

Релиз версия

Что бы собрать версию apk которую можно будет опубликовать в Google Play, нужно создать файл keystore с помощью утилиты keytool.exe из JDK и загрузить на build.phonegap.com. Запускаем rebuild и получаем TestApp-release.apk

Google Play


Последний шаг — регистрируемся на play.google.com/apps/publish/signup.

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

Кроссплатформенность


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

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 41

    +6
    Из своего опыта понял, что jquerymobile больше подходит под системы администрирования, т.к. на более менее тяжелых страницах всё начинает тормозить.
      0
      У меня аппарат с 4x1.50 GHz и ОЗУ 1Гб проблем с приложением нет. Но да, пользователи с более слабыми девайсами говорят о подтормаживаниях, хотя и не критичных.
        +1
        Это у вас пока приложение небольшое, на списках больше 100 элементов jQuery Mobile практически не применим, приходится использовать другие методы.
          +1
          >приходится использовать другие методы
          Какие?
            0
            Например, использовать собственные стили, они не такие громоздкие как в jQuery — вместо красивого <ul></ul> делать простую таблицу. Она рендерится на порядок быстрее, но, конечно, не так функциональна как список.
              0
              Да как бы проблем с ul/li нету, вопрос весь в обработке ивентов и использовании нативного скрола.
          +2
          Прошлый телефон был одноядерный на 1 Ггц, 512 МБ RAM — тормозили jquerymobile демки так, хоть вешайся. Молчу про реальные приложения.

          Сейчас телефон новее — 2x1.2 GHz 768 МБ RAM. Запустил jquery-mobile демки стандартные. Вешаться уже не хочется, но и работать с таким интерфейсом я бы стал только из под палки. Скорее поискал бы иное приложение.
        0
        Вроде бы в 4.4 WebView ускорили. Может кто пробовал запускать подобные балалайки? Стало юзабельным?
          0
          Это было бы очень интересно. Но не в плане «готово к использованию» — слабых телефонов, а так же телефонов на 4.3 и 2.3.X ещё слишком много. Скорее интересно в плане «в ближайшем будущем станет круто».
          +1
          объясните мне бестолковому, кому нужно мобильное приложение сделанное из статического сайта?
          Зачем вообще это?
            +2
            Оффлайн доступ.
              0
              Речь скорее не о том, что из статичного сайта. А в том, что существующие телефоны, производительность web-view и библиотек уже почти позволяет писать мобильные приложения на html+js.
                0
                Чтобы в метро не тупить
                +1
                Серёзьно!? Это даже не Hello World. Ведь на Хабре, уже много писали про PhoneGap, проводили различные тесты производительности, и давали очень тонкие советы.

                Я обычно не комментирую статьи для начинающих, но это уж совсем. Тем более у нас подобного и во много крат лучше достаточно. Но больше даже не к автору вопрос, а к людям плюсующим. Вы чего?)
                  –2
                  Приведите пример похожей статьи.
                    +2
                    Например так — habrahabr.ru/search/?q=phonegap

                    Разработка мобильных приложений на PhoneGap и jQuery Mobile (24 апреля 2011г.)
                    PhoneGap: как сделать приложение отзывчивым — очень подробно о производительности html приложения (webview) на мобильных телефонах.

                    И прочие, и прочие. Да, я только за новые и интересные статьи, там боле how to. Но писать на Хабре print «Hello world» (хотя вобщем и этого нет) как-то некомильфо. Хотя вам конечно, лучше знать.
                      –1
                      В первой статье много информации про создание самого приложения. У меня же главная цель это перенос существующего приложения. Поэтому тут впринципе нет никакого Hello world.
                      Производительность также не являлось темой данного поста.
                        0
                        С ужасом представляю людей, которые заточены делать только то, чему их научили. Я могу только догадываться, но мне кажется любой, любой способный составить phonegap приложение. Сможет перенести Ctrl+C > Ctrl+V контент, тем более таким топорным методом который предложен в статье. Нет, ну как бы если народу нравится, а судя по + статье — нравится, то конечно круто. Но, пока я спал аудитория Хабра сменилась с «бородачей» на домохозяек.
                          +1
                          Спасибо за лестную характеристику домохозяйки. Но я, например, специализируюсь в другой области, и такие статьи помогают мне:
                          1) узнать, что это возможно в принципе. Раньше я считал, что единственный путь сделать приложение для андроида и тем более для iOS — это нанять дорогущих сишарпщиков с дажвистами.
                          2) преодолеть психологический барьер. Возможно, это действительно так просто. Но когда есть статья, в которой утверждается, что создать приложение — это просто, и приводится конкретный набор конкретных шагов — это мотивирует попробовать самому.
                            +1
                            // Раньше я считал, что единственный путь сделать приложение для андроида и тем более для iOS —это нанять дорогущих сишарпщиков с дажвистами.

                            Сишников и джавистов, вы хотели сказать?
                              +1
                              С сишарпщиками ошибся конкретно (признаюсь, я не смогу отличить C# от Objective-C, думал что для iOS пишется именно на первом), а с джавистами опечатался
                    +1
                    Я впервые увидел эту статью. Специально не искал, т.к. не знал, что такое вобще возможно. Увидел и понял, что, возможно, смогу применить на одном из своих проектов. Положил в закладки. Мне никаких тонкостей не нужно, только минимальный howto. Автору — спасибо!
                    +5
                    Минус PhoneGap — абсолютно ненативно выглядящие приложения (да, я знаю про проект Fries, но в нём тоже есть свои проблемы, особенно на топовых Samsung'ах), jQueryMobile скорее усугубляет проблему внося iOS-like интерфейс, чуждый для андроида, и тормоза. Если уж так сильно охото писать кроссплатформенные JS приложения — Titanium лучший выбор, чем PhoneGap. В нём JS реализует только бизнес-логику, а UI рисуется нативными средствами платформы и при том, весьма шустро.
                      0
                      С PhoneGap решается задача — как с минимальными усилиями перенести то что есть. Для Titanium насколько я понимаю нужно будет заново делать UI.
                        +1
                        Есть PhoneJS от Devexpress например. Сам не пробовал, но выглядит многообещающе.
                        0
                        Уже много чего написали, но я выскажу, потому что крик души рвется из груди.

                        Хотите верьте, хотите нет, прочитав заголовок, в голову сразу пришел brainexer — на моем девайсе, единственное ненативное приложение + помню один из комментариев к review приложения в GooglePlay о том, что по ходу приложение написано на jQuery mobile.

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

                        НО, если вы решили портировать приложение на мобильную платформу, то сделайте так чтобы оно консистентно взаимодействовало с платформой — согласно гайдлайнам. Решили сделать на jQuery — не вопрос. Неужели Mobile Web Application для Android нельзя сделать в соответствии с принятыми парадигмами дизайна платформы.

                        Что касается производительности, то в этом плане я не сторонник ненативных приложений в контексте мобильных платформ и поэтому всевозможные j2objc, Xamarin-ы и PhoneGap-ы для меня идут лесом. На моей Xperia S задержка ввода по нажатию на кнопке на взгляд около половины секунды. В то время как секундомер работает без временных лагов. Если решили продолжать развивать проект на jQuery, то подумайте насчет оптимизации серьезно. Если вдруг захочется переписать код используя нативный фреймворк, готов помочь как советом, так и пописать код (если это все в рамках Open Source) — абсолютно бесплатно :)
                          +2
                          лаги при кликах в phonegap приложениях это типичная ошибка разработчика. Нужно всего-то заменить обработку события click на touchstart/touchend или воспользоваться одним из кучи готовых решений. По дефолту задержка на срабатывание события click равна 300 миллисекунд, так что да, все происходит очень медленно для глаза. Правда опять же лаги останутся если по клику делается что-то сильно тяжелое, или не очень оптимально идет работа с dom и т.д.)
                            0
                            dotneter Надо взять на заметку
                              0
                              Вместо click используется tap, насколько я знаю у нем нет задержки 300 мс
                                0
                                вот только в браузере нету события tap, оно эмулируется обратботкой touchstart/touchend (если оба события сработали на одном и том же элементе, и между ними либо не было touchmove). Причем есть куча реализаций. Самой популярной является библиотека fastclick.

                                по поводу юайки есть очень интересный проект — Steroids, но я все никак не могу найти времени потыкать.
                              0
                              >НО, если вы решили портировать приложение на мобильную платформу, то сделайте так чтобы оно консистентно взаимодействовало с платформой — согласно гайдлайнам
                              Можно основные минусы текущего варианта?
                                0
                                Основной минус — не понятно куда тыкать, потому что привыкли уже к абсолютно другому UI. Да и тормозит прям очень заметно.
                                  0
                                  Если Вы решили поддерживать смену ориентации экрана, то имеет смысл подумать: а может быть сделать для ландшафтной и портретной вресии разную компоновку. Потом мне совсем непонятно, зачем помимо кликабельных вариантов ответа отображать цифровую клавиатуру в некоторых заданиях
                                    0
                                    Ландшафтная нужна только для более комфортного просмотра графика.
                                    Кому то может быть удобнее использовать нампад, а его скрытие никаких плюсов не даст.
                                0
                                PhoneGap не работает как платформа для мобильных приложений.
                                Во всяком случае на моем HTC Desire HD. Дело не в ненативно выглядещих контролах, дело в User Experience — если я нажимаю на контрол, я хочу чтобы он нажался сейчас, а не через 3-4 секунды. Если я не вижу результата действия после действия, то я нажимаю еще раз, потому что думаю, что промахнулся — это ломает всё.
                                Радость от трёх строчек для написания приложения на знакомом стэке напрочь испарилась после десятка минут взаимодействия с прототипом интерфейса. В итоге написал на Java.
                                  0
                                  Если дизайн разрабатывался с осознанием того факта, что имплементиться это будет на html5, и если разработчик достаточно опытен, то вполне себе юзабельные приложения выходят. Если вам нужно сделать приложение только под одну платформу (скажем андроид) — то однозначно быстрее и лучше это выйдет если писать все нативно. Но вот под две платформы гибриды уже выгоднее, хоть далеко и не все можно на них сделать. Хотя опять же, было бы желание. Никто не запрещает вам особо сложные юайные штуки делать нативными и просто прокидывать апишку в js, а уже более простые вещи, коих обычно больше, сделать на html5. Опять же это будет чуточку дешевле чем держать двух нативных разработчиков для одного проекта.
                                    0
                                    если разработчик достаточно опытен, то вполне себе юзабельные приложения выходят

                                    Это не аргумент. Примерно такую же фразу можно сказать про практически что угодно. Реальность же такова, что на многих устройствах скорость работы JS/рендеринга html категорически не позволяет приложениям ощущаться нормально. Я размещал seekbar и он не работал так, как я ожидал, я размещал простую toggle кнопку и она нажималась не так, как я ожидал. Я достаточно опытен в плане html5 приложений как UI для десктопного софта(V8), но на мобильниках такое пока делать не получается.
                                    хоть далеко и не все можно на них сделать. Хотя опять же, было бы желание.

                                    Зачем это желание? Хорошо, моим приложением был аудиоплеер. Он позволяет искать и скачивать музыку(используются закрытые API). Такое приложение просто не сделать на PhoneGap, а если и сделать, то мы всё равно поддерживаем кучу нативных имплементаций.
                                    Я не дошел до DownloadService/AudioService/Lists на PhoneGap. Я просто создал демо приложение и пять раз его запустил, использовав популярные фреймворки для построения UI на мобильных платформах на js/html. И я был в шоке. Если на десктопе всё работает шикарно — v8+chromium, то на мобильниках(не всех, скорее всего, но у меня нет четырех ядер) получается очень раздражающе.
                                    Никто не запрещает вам особо сложные юайные штуки делать нативными и просто прокидывать апишку в js, а уже более простые вещи, коих обычно больше, сделать на html5.

                                    Так в том-то и дело! Если делать UI нативно, то зачем нам js+html? :) Я решительно не понимаю. Нативное UI предполагает нативные же DataSources, обработчики событий и всякое прочее.

                                    Я не хейтер html5 на мобильниках. Но для меня это не подходит, потому что я не ненавижу 2.3 юзеров, коим сам и являюсь.
                                    И если вы спросите меня что я буду использовать для кроссплатформенной разработки приложений, то скорее всего это будет Xamarin. Для игр нравится libgdx.
                                      0
                                      Это желание диктует заказчик, ибо это дешевле. Вот и все. Есть спрос, есть и предложение. Мы пытаемся объяснять заказчикам возможные проблемы, но их это не особо волнует.

                                      Так в том-то и дело! Если делать UI нативно, то зачем нам js+html? :) Я решительно не понимаю. Нативное UI предполагает нативные же DataSources, обработчики событий и всякое прочее.

                                      Вам никто не мешает пробрасывать обработчики событий и привязывать DataSource в js (собственно для этого есть steroids.js). Скажем так, просто есть кейсы когда заказчик хочет получить апликачку под две платформы по цене хотя бы в полтора раза дешевле чем разработка нативного приложения. И тут приходится подстраиваться под заказчика. Не могу сказать что на выходе получается что-то уж совсем не юзабельное. Основные то проблемы это анимации и перерисовка ui-ки. Со скоростью работы самого js-а проблем никаких нету, он достаточно быстр (разве что я не стал бы его использовать для сложных алгоритмов, реалтайм процессинга видео и т.д., но и java я бы тоже не стал для этого использовать).
                                        0
                                        Я понял что вы хотите сказать. Не везде согласен, но рынок сложная штука, да.
                                        Можете скинуть в личку или публично хотя бы одно такое приложение на две платформы в полтора раза дешевле? Любопытство и желание посмотреть как у кого-то получилось.
                                  0
                                  Совсем не понял зачем нужен тут PhoneGap? Можно сложить весь мобильный сайт в assets, а в webview загрузить индексный файл. Ну пути к скриптам и стилям относительные конечно должны быть.
                                    0
                                    ну как бы да, только вот с cardova-cli это все будет быстрее и тоже самое. Если брать 3-ю версию то оверхэд будет незначительным. Да и если человек очень слабо знаком с разработкой под андроид или ios для него это будет что-то вроде быстрого старта.
                                    Но смысла просто в копипасте сайта или даже обычного одностраничного приложения не особо много. Профит в дополнительной системе кеширования данных, оптимизированного под тач интерфейса и т.д.

                                  Only users with full accounts can post comments. Log in, please.