Разработчик Windows Phone берет PhoneGap

В последнее время вокруг PhoneGap было много шума. Это программная структура, которая позволяет оборачивать приложения HTML5 в собственные приложения для различных мобильных платформ (включая iPhone, Android и Windows Phone). Идея разработки мобильного приложения для нескольких платформ с единой кодовой базой очень заманчива.

В этой статье я все еще использовал старое имя PhoneGap, но недавно фреймворк был открыт и переименован в Cordova ( http://incubator.apache.org/projects/callback.html ). Adobe продолжит предлагать коммерческую версию, используя брендинг PhoneGap ( http://phonegap.com/ ).

В последние дни я разработал простое приложение Todo, используя следующие технологии:

• PhoneGap, чтобы обернуть в нативное приложение.
• JQuery Mobile для пользовательского интерфейса.
• HTML5 локальное хранилище для хранения пользовательских данных.

Приложение состоит из 6 экранов и работает полностью локально; для работы не требуется доступ в интернет. Теоретически он должен работать на iPhone, Android и Windows Phone, но я смог протестировать только на реальном устройстве Windows Phone и на настольных версиях Firefox, Safari и Chrome. Поэтому, хотя он не был протестирован на нескольких устройствах, я не ожидаю много проблем при запуске его на IOS или Android.

PhoneGap & JQuery Mobile

Я выбрал JQuery Mobile для пользовательского интерфейса, потому что мне нравится использовать JQuery для разработки на JavaScript, и, таким образом, это казалось наиболее естественным выбором для моих экранов. JQuery Mobile был приятным и простым в использовании; Вскоре я смог разработать свои экраны, используя простой синтаксис HTML в сочетании с атрибутами HTML5 data- *.

Я тестировал приложение как в локальных браузерах (Firefox, Chrome и т. Д.), Так и в мобильном браузере Windows Phone. Но проблемы начались, когда я начал оборачивать свой HTML-код в PhoneGap. Внезапно ничего не сработало. После некоторых проб и ошибок я обнаружил, что вам необходимо добавить JavaScript-библиотеку PhoneGap на веб-страницы, даже если вам не нужно использовать какие-либо специальные функции PhoneGap.

Вторая проблема, которую я обнаружил, заключалась в том, что JQuery Mobile и PhoneGap в настоящее время плохо работают вместе на Windows Phone 7. Я использовал один HTML-файл на страницу, но единственное, что сработало, это либо отключение загрузки страниц на основе AJAX в JQuery Mobile или возврат к многостраничным файлам HTML. Я выбрал многостраничные файлы HTML.

Я надеюсь, что проблема загрузки страницы в Windows Phone будет исправлена ​​либо разработчиками PhoneGap, либо JQuery Mobile, так как это раздражает.

Отладка

Отладка HTML-приложения, обернутого в PhoneGap, невозможна. Единственный вариант — протестировать и отладить его с помощью инструментов разработчика для настольных браузеров. Если что-то пойдет не так на мобильном устройстве в PhoneGap, единственное, что вы можете сделать, — это использовать устаревшие инструкции журнала консоли, чтобы выяснить, что происходит.

Я решил эту проблему, создав два проекта: веб-приложение и проект PhoneGap WP7. Я разрабатываю и тестирую проект веб-приложения в локальном браузере, и когда я хочу запустить его на устройстве, я выполняю сценарий для добавления кода HTML и JavaScript в проект WP7. Ниже вы можете найти скрипт синхронизации, который я использовал:

@ECHO OFF

SET sourceDirectory=Html5TodoApp
SET destinationDirectory=Html5TodoApp.WindowsPhone\www

MKDIR %destinationDirectory%\images\

COPY "%sourceDirectory%\*.js" %destinationDirectory%\
COPY "%sourceDirectory%\*.html" %destinationDirectory%\
COPY "%sourceDirectory%\*.css" %destinationDirectory%\
COPY "%sourceDirectory%\images\*.gif" %destinationDirectory%\images\
COPY "%sourceDirectory%\images\*.png" %destinationDirectory%\images\

patch.exe "%destinationDirectory%\index.html" index.patch

Патч моего файла index.html необходим, потому что для PhoneGap мне нужно добавить ссылку на файл cordova.js (что невозможно в обычном браузере). «Index.patch» — это обычный файл патча, который избавляет меня от необходимости обновлять мой index.html вручную, когда я копирую исходный код в проект PhoneGap.

*** C:\Users\Pieter\Documents\Visual Studio 2010\Projects\Html5TodoApp\Html5TodoApp\index.html    Thu Mar 22 17:15:13 2012
--- C:\Users\Pieter\Documents\Visual Studio 2010\Projects\Html5TodoApp\Html5TodoApp.WindowsPhone\www\index.html    Thu Mar 22 17:20:51 2012
***************
*** 4,9 ****
--- 4,10 ----
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<title>Todo Demo Pieter</title>
<link rel="stylesheet" href="jquery.mobile-1.1.0-rc.1.css" />
+         <script src="cordova-1.5.0.js"></script>
<script src="jquery-1.7.1.js"></script>
<script src="jquery.mobile-1.1.0-rc.1.js"></script>
<script src="todo.logic.js"></script>

Вывод

Буду ли я рекомендовать разработку мобильных приложений с использованием PhoneGap? Это будет зависеть от приложения. Было немного сложнее разработать и протестировать все по сравнению с использованием C # и Silverlight, и производительность интерфейса также была менее «быстрой», чем у родного приложения на моем Nokia Lumia 800. Но большое преимущество заключается в том, что мое приложение может работать на нескольких платформах с почти одинаковым кодом, и это может быть важно для компаний, которые хотят развернуть свое бизнес-приложение на нескольких платформах.