Статьи

Разработка мобильного приложения на qooxdoo и phonegap

0 65

В этом посте рассмотрим, как разработать и запустить html5 приложение на мобильных устройствах. Для начала разработаем простое html5-приложение с использованием javascript-фреймворка qooxdoo mobile. Упакуем htm5-приложение в phonegap, чтобы оно стало нативным — тогда программу можно будет распространять через play-market, appstore и т.д. — в зависимости от платформы. В завершении работы запустим механизм удаленной отладки с использованием weinre, чтобы убедиться в корректности работы нашего приложения на эмуляторе и на реальном устройстве.

Приступим к разработке проcтого приложения на QooxDoo Mobile.

Для начала, установим и настроим среду разработки. Так как запускать и тестировать будем на Android-е, по идем на сайт http://developer.android.com/sdk/index.html и скачиваем Development Bundle. Архив весит порядка 400 Мб и содержит как android sdk, так и eclipse (папки sdk и eclipse, соответственно). После скачивания распакуйте архив и запустите eclipse. При старте выберите рабочую папку (workspace).

Для редактирования javascript понадобится установить плагин. Для этого в eclipse идем в Help->Install new software. Тут выбираем или добавляем сайт http://download.eclipse.org/releases/juno (на момент написания статьи последний eclipse был как раз juno). Когда компоненты загрузятся, раскрываем Programming Languages и выбираем JavaScript Development Tools. Осталось нажать Next, принять все соглашения и завершить установку.

Далее, идем на сайт http://qooxdoo.org/downloads и скачиваем последнюю версию для Mobile. На момент написания статьи версия была 2.0.2.
Для сборки приложения QooxDoo использует Python. Если он у вас не установлен, то сейчас самое время это сделать. Устанавливайте версию 2.x python-а (2.5 и выше), версия 3.x не поддерживается (по крайней мере, на момент написания статьи). Скачать установочный файл можно на сайте python.org (или из пакетов, если вы работаете на Linux).

Важный шаг (особенно для пользователей windows) – скопируйте папку с qooxdoo в рабочую директорию eclipse. Это избавит вас от потенциальных проблем с путями при сборке отладочной версии приложения (см. ниже). Если вы не собираетесь использовать eclipse, то принцип все равно такой-же — лучше положить qooxdoo рядом с папкой вашего приложения.

В командной строке (cmd в windows или терминале в Linux), перейдем в рабочую директорию eclipse — . Тут введем следующую команду:

<путь_куда_распакован_qooxdoo>/tool/bin/create-application.py --type=mobile --name= MyCoolQooxDooApp --out=.

Эта команда создаст папку MyCoolQooxDooApp, где qooxdoo создаст файлы проекта. В это папке должен лежать python-файл generate.py. Запускаем его. . По умолчанию, qooxdoo создает двух страничное приложение с кнопкой на первой странице и кнопкой «Back» на второй странице. Первый запуск generate.py может занять время, так как на этом этапе создается кэш, который в дальнейшем будет использоваться для ускоренной сборки проекта. Очистить кэш всегда можно командой generate.py cleandist (Полный список команд можно посмотреть на сайте qooxdoo.org).

Запуск скрипта generate.py без параметров собирает отладочную версию программы Тут мы имеем возможность запустить debug в любом файле проекта или даже самого фреймфорка. Для релиза нужно запускать скрипт с параметром build. В этом случае qooxdoo создает один сжатый js-файл для всего приложения. После выполнения команды по умолчанию создается папка build-ios, где находится скомпилированное приложение для запуска на яблочных мобильниках. Для сборки под android, запустите generate.py с параметром build-android. Если перейти в папку build-ios(android) и запустить в Chrome файл index.html, то мы увидим наше простое двухстраничное приложение.

Нужно отметить, что сборки под различные платформы отличаются только внешним видом виджетов. То есть, например, сборка под android будет работать и на iOS-устройствах. Единственное условие успешного запуска – браузер должен быть на основе движка webkit. Поэтому, первоначальную отладку приложения можно проводить на десктопном webkit-браузере, например, Google Chrome. Этот браузер удобен еще и тем, что в нем есть очень развитые средства отладки js-скриптов, HTML-разметки (DOM), профилировщик загрузки и т.д.

Теперь у нас есть работающее html5-приложение. Чтобы просматривать и редактировать его исходники, создадим новый проект в eclipse. В мастере создания выбираем опцию Create Project from existing source:

Создание нового qooxdoo проекта в eclipse

Выбираем папку с созданным выше qx-приложением. Имя проекта (Project Name) задаем таким же: MyCoolQooxdooApp. В панели Script Explorer внутри нового проекта идем в подпапку source/class/mycoolqooxdooapp. В этой папке мы будем размещать исходники нашего проекта. Как видите, пока тут есть только файл Application.js. Можете открыть его и убедиться, что в нем действительно создаются две страницы с переходами по соответствующим кнопкам. Чтобы понять, как именно устроен тот или иной виджет, можно обращаться к справочнику по  QooxDoo API  —http://demo.qooxdoo.org/current/apiviewer/.

После того как приложение написано и оттестировано в десктопном браузере, его нужно проверить на мобильном устройстве. Для этого мы должны упаковать html5-приложение в Phonegap.

Для тех, кто не знает, Phonegap – это просто «обертка» для приложения, написанного на javascript. Phonegap программно создает процесс веб-браузера — webkit для android и safari (который тоже на базе движка webkit) для iOs – и запускает html5-приложение в этом браузере, дополнительно предоставляя функции доступа к аппаратным ресурсам устройства.

Идем на сайт http://phonegap.com/download и скачиваем phonegap. Мы не будем собирать новый cordova.jar, а воспользуемся готовым проектом в подпапке архива lib/android/example, а именно – просто импортируем его в eclipse. В Package Explorer-е клик правой кнопкой мыши, пункт Import, выбираем Android->Existing Android Code. Нажимаем на кнопку Browse и указываем путь до папки с проектом example. При импорте поставьте флаг Copy project into Workspace. Возможно, придется поменять некоторые настройки проекта (установить уровень android api, например).

Чтобы запустить наше приложение под phonegap, скопируем содержимое папки build-ios(android) проекта MyCoolQooxdooApp в папку assets/www проекта example. Перед этим желательно очистить содержимое папки assets/www, оставив файл cordova-<номер_версии>.js. Этот файл потом нужно будет дополнительно включить в файле index.html. Зайдем в менеджер виртуальных устройств (Window->Virtual Device Manager), чтобы создать новое виртуальное устройство, совместимое с версией api нашего phonegap-проект.

Запускаем приложение – правой кнопкой по проекту, Run as->Android Application. Откроется окно эмулятор, в котором через некоторое время запуститься наше приложение. На этом работу по разработке можно считать оконченной. Перейдем к отладке.

Надеюсь, вы уже попробовали возможности, которые предоставляет инструментарий разработчика в Google Chrome (доступен по F12). Однако, эти инструменты доступны только при отладке на дектопной машине. Что делать, если хочется иметь похоже возможности отладки и при тестировании на эмуляторе или даже на реальном устройстве?

Во-первых, можно выводить отладочные сообщения с помощью js ф-ии alert. Этот способ имеет очевидные недостатки, хотя и бывает полезен, если нудно быстро что-то проверить.

Во-вторых, при запуске иp Eclipse эмулятора Android все сообщения ф-ии console.log выводятся в LogCat. В многих случаях этого бывает достаточно.

Но есть и третья возможность – использование удаленных отладчиков. Одним из лучших отладчиков по возможностям и простоте использования является weinre. Основной принцип его работы таков: в приложение (как правило, в index.html) добавляется специальная ссылка на веб-сервер отладки. Если этот веб-сервер запущен на машине разработчика, то из эмулятора Android сервер будет доступен по примерно такому адресу: http://10.0.2.2:<port>/target/target-script-min.js#anonymous. В android-эмуляторе адрес 10.0.2.2 зарезервирован и указывает на хост-машину, на которой эмулятор запущен. Удаленная консоль будет доступна в любом десктопном браузере (Google Chrome-e) по адресу http://localhost:8080/client/#anonymous. Консоль weinre предоставляет богатые возможности по просмотру отладочных сообщений, просмотру и редактированию dom-дерева, профилированию загрузки файлов и ресурсов. Интерфейс максимально приближен в инструментарию Safari или Chrome.

Вкратце рассмотрим как установить у запустить weinre на машине разработчика. Процесс установки/настройки на Windows и на Linux практически идентичен.
Идем на сайт http://nodejs.org/download/ и скачиваем windows installer. Вместе в node.js автоматически установится и npm (менеджер пакетов для node.js).
В командной строке набираем команду npm install weinre. Это создаст в текущей папке подпапку node_modules c weinre.

Все что осталось – просто запустить weinre в пом. команды:

node.exe node_modules\weinre\weinre --boundHost -all-

По умолчанию, weinre доступен по адресу http://localhost:8080. Порт можно поменять при запуске (см. документацию по weinre).

На этом все. Добавляем вышеуказанный url в index.html , запускаем приложение на эмуляторе и открываем удаленную консоль. Перейдите на вкладку Elements, убедитесь, что DOM создан. Перейдите в консоль, наберите alert(“Hello remote debugger.”) и нажмите Enter – в эмуляторе должно появиться это сообщение.

Надеюсь, у вас все получилось. Прошу поделиться опытом, замечаниями в комментариях.

About the author / 

admin