Мобильные приложения с PhoneGap

Автор: Eugeniy Marilev
Дата публикации: 2014-05-06 10:47:19

Phonegap — это бесплатная кроссплатформенная библиотека для мобильных платформ, позволяющая отображать веб-страницы использующие HTML5, CSS3, JavaScript. Она позволяет запускать одно и то же приложение на различных мобильных устройствах. До недавнего времени у PhoneGap были открытые исходники, но как это часто бывает — разработку купили, и в скором времени передали фонду Apache

. К счастью, библиотека уже имеет большое количество плагинов написанных сторонними разработчиками, что существенно упрощает разработку кроссплатформенных приложений для мобильных устройств. Скачать плагины phonegap можно здесь Частым заблуждением начинающих есть ошибочное представление, что PhoneGap преобразует код HTML, CSS и Javascript страницы в native-код приложения для конкретной платформы (Android, iOS, Windows Mobile и т.д.). На самом деле, отображение HTML+CSS осуществляется благодаря загрузке содержимого страницы в специальный webView. Данный webView также имеет продвинутый JavaScript движок (как правило используется WebKit), который справляется со своей задачей не хуже обычного браузера. Библиотека состоит из двух взаимосвязанных частей:

  • Native wrapper — обертка функциональных возможностей конкретной платформы в виде совокупности классов. Интерфейс библиотечных классов един для всех платформ. На данный момент обертка Phonegap позволяет работать со следующими ресурсами и устройствами: компас, акселерометр, видео-камера. файловая система, сетевое подключение, геолокация, уведомления, хранилище (БД). Подробнее см. документацию.
  • Javascript wrapper — обертка для работы с native wrapper через Javascript. Да, именно так. Фактически, при вызове функций javascript обертки, клиентский скрипт обращается к Native оберткой посредством функции:
PhoneGap.exec = function(success, fail, service, action, args) { … }

Дабы обеспечить полную кроссплатформенность в javascript код создаваемого продукта, нам понадобятся еще следующие библиотеки: jQuery,jQuery Mobile,jTemplates и, если есть необходимость, jQuery UI (хотя я бы не советовал, так как сильно уж много ресурсов процессора будет расходоваться, что очень критично для маломощных устройств). jQuery Mobile сейчас начинает развиваться в направлении тесной интеграции с PhoneGap, что не может не радовать (http://jquerymobile.com/demos/1.0/docs/pages/phonegap.html). Итак, теперь все готово и можно начать разработку первого приложения на PhoneGap с использованием JQuery Mobile. Но забегая далеко вперед, чтобы не допускать глупых ошибок, мы будем делать приложение сразу оптимизированное для мобильных устройств:

<!DOCTYPE html> 
<html> 
        <head> 
        <title>PhoneGap Mobile application</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
        <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="jquery.mobile-1.0.min.js"></script>
        <script type="text/javascript">
	$('#main_page').live('pageshow', function(event) {
		var options = {
			url: '/records/list', //удаленный ресурс, отдающий данные списка в формате json
			success: function(data) {
				var view = $('#listview_test');
				var template = view.find('.template'); //получение шаблона элементов
				var items =  view.find('.items'); //получение контейнера елементов
				items.setTemplateElement(template); //установка шаблона элементов
				items.processTemplate(data); //отображение полученных данных в виде списка элементов по шаблону
				view.listview('refresh'); //обновление jQueryMobile списка элементов
				$.mobile.hidePageLoadingMsg();
			},
			error: function(jqXHR) {
				$.mobile.hidePageLoadingMsg();
				console.log(jqXHR.responseText);
			},
			dataType: 'json'
		};
		$.mobile.showPageLoadingMsg();
		$.ajax(options);
    	});
       </script>
</head> 
<body> 

<div id="main_page"  data-role="page">
        <div data-role="header">
                <h1>My Page</h1>
        </div><!-- /header -->
        <div data-role="content"> 
                <p>Dynamic list sample</p> 
	   <ul data-role="listview" id="listview_test">
		<textarea class="template" style="display:none;">
		{#foreach $T as record}
		<li class="ui-li-has-thumb" data-theme="c">

                        		<a href="/object/view/id/{$T.record.id}" class="ui-link-inherit option-link">
                            		<img src="{$T.record.logo}" class="ui-li-thumb" />
                            		<h3 class="ui-li-heading">{$T.record.name}</h3>
                        		</a>
            	             </li>
            	             {#/for}
		</textarea>
		<div class="items"></div>
	   </ul>             
        </div><!-- /content -->
</div><!-- /page -->
</body>
</html>

Хотя, jQuery Mobile в своей документации приводит примеры динамически подгружаемых страниц, в которых весь контент страницы загружается с сервера, есть ряд аргументов, которые доказывают неоспоримое преимущество ранее описанного способа загрузки страниц:

  1. Страница подгруженная целиком имеет по сравнению с шаблонной большой размер. А так как шаблонная страница в случае с PhoneGap хранится на клиенте, то очевидно становиться какой из способов экономнее по трафику.
  2. Удаленный сервер не занимается выводом html, а только лишь загружает данные и форматирует их в json, благодаря чему обеспечивается более быстрая загрузка контента страницы по сравнению с вариантом готовой html-разметки. Кроме скорости загрузки, естественно экономится такой ресурс сервера, как оперативная память.

Более того, хочется упомянуть еще один фактор, который играет немаловажную роль в выборе мною способа в шаблонизацией страниц. Предвидеть его было невозможно, поэтому упомяну, чтобы вы не натыкались на те же грабли. Во многих источниках приводят примеры работы связки PhoneGap, jQuery Mobile, где весь HTML, CSS, JavaScript запрашиваются с сервера, а native-приложение содержит следующие строки кода:  

package com.myapp;

import android.os.Bundle;

public class MyApplication extends AdpoiDroidGap {	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("http://myapp.com");
    }
}

Да, бесспорно, так очень удобно писать приложение, достаточно его просто стилизовать, чтобы оно отлично отображалось в браузере мобильного и тогда сделать native из него мобильное приложение — минута дела. Но, есть такие мобильные платформы, как Windows Phone 7, где:

  1. Реализация PhoneGap не поддерживает опции $.support.cors и $.mobile.allowCrossDomainPages, то есть страницы с удаленного хоста не загружаются. Похожее поведение функции $.ajax наблюдается и в линейке браузеров IE, включая IE9, что по всей видимости корень проблемы.
  2. При загрузке страницы приложения с удаленного хоста не работает phonegap в принципе, даже notification.alert.

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

super.loadUrl("http://myapp.com");

Нужно заменить на:

super.loadUrl("file:///android_asset/www/index.html");

И все клиентские скрипты и верстку включать в пакет с приложением. Что касается загрузки данных с удаленного сервера (Кроссдоменный AJAX запрос), то это реализуется легко с применением флага dataType: 'jsonp' для вызовов jQuery.ajax. Надеюсь, мой опыт в данных технологиях вам поможет. Хорошей разработки с PhoneGap!

Комментарии к статье
Комментарии:
Василий
19\02\2012
Крутая статья))
Azamat
31\05\2012
Да, действительно неплохо все разжевано, спасибо. Однако возможно вы поможете пояснить такой момент: я не совсем понял что именно платно, а что бесплатно в PhoneGap. Сам фреймворк, как я понимаю, бесплатен. И его можно использовать для самостоятельной компиляции в интересующую платформу. Но надо самому соотвествующие IDE ставить. А платен компилирующий сервер PhoneGap Build (который использовать не обязательно). Так получается? И не понятно, что там с перепродажами не станет ли Apache денег требовать в будущем. А то потом начатые проекты придется переписывать ) А также вы не в курсе, проходят ли такие приложения в AppStore ? Вроде говорят сейчас помягче стало, к самому js+html претензий нет.
djvibegga_admin
31\05\2012
PhoneGap пока абсолютно бесплатен. Я не думаю, что Apache сделает из него что-то настолько крутое, чтобы брать за это деньги, а если сделает - сделают fork на PhoneGap). Приложения на AppStore с использованием PhoneGap выложить у вас получить, главное иметь лицензию на разработку ПО, и компиливать в лиценционном MacOSX.
Только зарегистрированые пользователи могут оставлять комментарии