HTML5 Builder глазами Delphi-разработчика.

До 2013 года остается всего ничего и после бурного празднования Нового Года нас ожидает, если и не сюрприз, то явно важное событие — выход Embarcadero MobileStudio. Продукта, в котором в будущем будут сосредоточены все возможности по разработке нативных приложений под различные мобильные платформы. На начало 2013 года, мы можем рассчитывать на то, что сможем разрабатывать приложения под iOS, следующим в списке стоит Android. Сам-то я не «яблочник», в наличии у меня имеется только HTC Desire S с Android 2.3.5 на борту и менять его в ближайшее время я не планирую, т.к. этот смарт в полной мере решает возложенные на него задачи, а гнаться за брендами — не вижу никакого смысла. Другое дело, что чем ближе выход Mobile Studio, тем больше желание разобраться в разработке под мобильные ОС (есть пара стареньких идей для разработки на этот счёт). И пока до моей мобильной платформы руки разработчиков FireMonkey не дошли, а собрать что-нибудь под свой старенький смартфончик хочется, решил я взглянуть на продукт  HTML5 Builder XE3 он же RadPHP, он же Delphi for PHP. Посмотреть, что может продукт, как работает и в чем его, «фишка»?

1. Несколько моментов по установке
2. Знакомство с IDE. «Hello, world!» снова с нами.
3. Deploy to mobile. Разворачиваем приложение на Android-устройстве.
4. Заключение

Сам HTML5 Builder был установлен у меня ещё с тех пор как на рынок вышла RAD Studio XE3, но запустить и тем более попробовать его продукт в работе меня сподвиг вебинар Всеволода Леонова и Андрея Совцова, который я обнаружил в записи на YouTube. Посмотрел, немного удивился, скачал Update 1 к HTML5 Builder, установил и начал вникать.

Итак, что у меня есть в наличие для работы:

1. Браузер Chrome 23.0.1271.97 m
2. Смартфон HTC Desire S (Android 2.3.5)
3. HTML5 Builder (update 1)
4. Клавиатура, мышь и все такое прочее.

Цель — разработать приложение под Android 2.3.5., используя возможности рассматриваемого продукта.

Несколько моментов по установке

Начну свое повествование с главного — установки необходимого программного обеспечения.  Так как для сборки приложения я не буду использовать сервис PhoneGap (HTML5 Builder может собирать приложения прямо в облаке), то для разработки под Android нам необходимо будет, как минимум, установить Android SDK с необходимыми API. Разработчики билдера облегчили нам эту задачу, поэтому, в случае чего, в архиве с установщиком HTML5 Builder имеется специальный файл — android-setup.exe.

И здесь надо отметить несколько моментов, которые стоит иметь в виду перед тем как начать разрабатывать свои Android-приложения:

Иначе, при сборке проекта Вы можете обнаружить, что HTML5 Builder не нашел какой-либо необходимый для работы bat-ник или exe-шник из SDK.

Иначе при сборке проекта будут доноситься крики об ошибках типа » [javac] cannot find symbol…», «не могу найти ….», т.к. в API 2.x отсутствуют многие классы, которые сейчас широко используются не только в HTML5 Builder, но и вообще при разработке под Android.

После того, как все необходимые компоненты и утилиты будут установлены, у нас будут в распоряжении:

• Apache 2.2.15
• JQuery 1.7.1
• JQueryMobile 1.1.1
• PhoneGap 1.8.1
• PHP 5.3.6
• Zend Framework 1.11.11
• Android SDK

Знакомство с IDE. «Hello, world!» снова с нами.

Запускаем HTML5 Builder и видим следующую картинку:

Страница приветствия в HTML5 Builder

После Delphi XE3 выглядит не привычно, но к такому внешнему виду приложения, выполненному в черных тонах, довольно быстро привыкаешь. Разработчики этого продукта пошли по пути «лучше меньше да лучше» поэтому в HTML5 Builder’е все элементы управления расположены очень компактно, используется минимум модальных окон, а место в окне по максимуму выделяется на рабочую область — редактор кода и дизайнер.

Переходим в меню на пункт  «New» и нам на выбор предлагается один из четырех видов проектов:

Выбор типа проекта

1. Client Mobile Application — мобильное приложение, основанное на клиентских web-технологиях (html, javaScript, CSS). Такое приложение может работать без доступа к каким-либо сетевым ресурсам и вообще не требует подключения к Интернет.
2. Client Web Application — практически тоже самое, что и предыдущие проект, также использует клиентские веб-технологии, но уже «заточен» под использование в десктопных браузерах
3. Server Mobile Application — для работы этого приложения уже требуется сервер. Согласно описанию, подобные проекты также можно разворачивать на мобильных устройствах.
4. Server Web Application — такой проект разворачивается на серверах. Это, в общем-то, обычный сайт, использующий те же jQuery, HTML5, CSS с PHP.

Я решил разрабатывать Client Mobile Application. После выбора соответствующего пункта, HTML5 Builder стал загружать необходимые компоненты и библиотеки:

Загрузка необходимых компонентов

Здесь отмечу, что процесс загрузки необходимых компонентов является довольно длительным по сравнению с Delphi, поэтому, в случае чего, придется набраться терпения и немного подождать.

После загрузки билдер примет вот такой вид:

Mobile Application

Размер формы нашего будущего приложения не меняется и соответствует выбранной в списке модели устройства. Подложка (картинка с телефоном) позволяет более чётко представить себе как будет выглядеть наше приложение на реальном устройстве. Само же окно программы выглядит вполне себе привычно — структура проекта (Structure) находится сверху слева, Object Inspector — снизу слева, панель компонентов — справа. Тут даже особенно и привыкать не нужно.

Итак, у меня смартфон имеет следующие характеристики экрана:

• Диагональ 3.7 дюйма
• Размер изображения 480×800
• Число пикселов на дюйм (PPI) 252
• Автоматический поворот экрана есть

Создадим новую запись в списке доступных устройств. Выбираем в списке пункт «Add New device…»:

Создание нового типа устройства

В открывшемся окне задаем необходимые параметры устройства:

Параметры экрана HTC Desire S

Жмем «Ок» и выбираем в списке только что созданное устройство. Так как подложки у меня нет, то окно HTML Builder станет таким:

HTML5 Builder готов к разработке под HTC Desire S

Теперь можно приступать к работе над приложением. Для первого раза я решил повторить пример из «Get Started». Итак в Tool Pallete выбираем вкладку Mobile, и бросаем на форму три компонента:

• MButton
• MEdit
• MLabel

Я расположил эти компоненты следующим образом:

Расположение компонентов на форме

Сразу же выбираем кнопку и выставляем в Object Inspector:
ButtonType = btNormal
Далее выполняем действие, которое мы сотни и тысячи раз выполняли при работе в Delphi — двойной клик мышкой по кнопке. Откроется редактор кода с уже созданным скелетом обработчика клика по кнопке:

Редактор кода

В обработчике кода пишем всего одну строку:

$('#MLabel1').html("Hello, " + $('#MEdit1').val() + "!");

Если Вы не просто скопировали код в редактор, писали его сами, то могли заметить, что у HTML5 Builder также имеются подсказки по методам:

Подсказки по методам

Теперь мы можем проверить наше приложение в действии. Для этого в верхнем меню жмем кнопку «Run Without Debugging«. Запуститься браузер и на новой вкладке появится наша страничка с полем ввода, кнопочкой и меткой:

Кнопка жмется, в метке текст выводится, в общем все как и задумывалось.  Теперь посмотрим как это же самое приложение будет выглядеть на моем HTC Desire S.

Deploy to mobile. Разворачиваем приложение на Android-устройстве.

В верхнем меню выбираем пункт «Home», и в боковой менюшке «Deploy to mobile»:

Deploy to mobile

И тут начинается самое интересное — разворачивание приложения на реальном мобильном устройстве. Забегая немного вперед скажу, что развернуть приложение можно двумя способами — через сервис PhoneGap и с использованием локальных утилит (которые мы собственно и устанавливали). Рассмотрим разворачивание приложения вторым способом — с использованием SDK Android Tools. Поэтому на время сворачиваем окно HTML5 Builder в трей и делаем необходимые настройки.

Первое, что надо сделать — это запустить SDK Manager, который вы можете обнаружить в «Пуск»:

SDK Manager

Здесь нам необходимо установить USB Driver. Спускаемся в самый низ списка, ставим галку напротив соответствующего пункта меню и устанавливаем драйвер:

Установка USB драйвера

У меня этот драйвер уже установлен, поэтому в столбце Status стоит «Installed».

Теперь настраиваем сам Android-девайс. Заходим в меню «Настройки» —> «Приложения»

Приложения

и ставим первую галку напротив «Неизвестные источники«, чтобы мы могли устанавливать приложения не из Android Market (Google Play).

Неизвестные источники

В этом же окне настроек спускаемся чуть ниже и заходим в пункт «Разработка«. Здесь можно выставить все три галки: «Отладка USB» (эту ставить обязательно), «Не выключать экран» и «Разрешить фиктивные местоположения«.

Разработка приложений

Все. Теперь подключаем устройство к компьютеру и Android сообщит нам, что отладка по USB включена:

Возвращаемся в HTML5 Builder. В списке поддерживаемых мобильных ОС выбираем Android и жмем Next:

Выбор мобильной ОС

На втором шаге нас попросят выбрать индексную страницу проекта (Index Page), а также ввести название приложения (Application Name) и компании-разработчика (Company Name):

Настройка приложения

Здесь мы можем оставить все как есть. Жмем «Next» и переходим к настройке графики приложения. Здесь нам предлагают загрузить три иконки разного размера для нашего приложения. Я решил загрузить одну:

Графика приложения

Жмем «Next» и переходим к следующему диалогу- выбор режима компиляции и директории для приложения. До релиза нам ещё далеко, поэтому оставляем «Debug», а в качестве диреткории назначения указываем любую директорию на компьютере куда HTML5 Builder будет записывать необходимые для приложения файлы.

Режим приложения и директория назначения

Снова жмем «Next» и HTML5 Builder скопирует необходимые файлы проекта в заданную на предыдущем шаге директорию, а также создаст недостающие файлы. О всех действиях программы мы можем узнать из лога:

Экспорт необходимых файлов

Снова жмем «Next» и HTML5 Builder задаст вопрос «Как будем собирать: с использованием библиотек SDK или через PhoneGap?»:

Выбор метода сборки приложения

Так как SDK у нас уже есть в наличии, то им мы и воспользуемся. Оставляем на этом кране все как есть (выбран пункт «SDK Library») , жмем «Next» и получаем следующий вопрос:
«Как будем запускать приложение: с эмулятора или с реального устройства?».
Эмулятор нас не интересует, поэтому выбираем второй пункт (Real Device) и жмем «Next»

Выбор способа запуска приложения

И здесь HTML5 Builder запустит необходимый нам компилятор под Android и начнет сборку проекта:

Процесс сборки

Как можно видеть на скрине весь процесс сборки выводится в лог, поэтому, в случае чего можно будет довольно легко узнать почему приложение не собралось. Как только процесс закончится на Вашем Android-устройстве запуститься приложение HelloWorld  . И вот здесь меня ждала печалька — почему-то приложение на телефоне выглядело не так как в дизайнере:

Приложение в дизайнере и на реальном устройстве

С чем связано такое различие — пока не могу сказать. Может это связано с какими-то особенностями моего девайса, может с тем, что все-таки у меня Android 2.3.5., а собиралось приложение под Android 4.2. Был бы планшетник под рукой с нужной версией Андроида или смарт посвежее — проверил бы точно, но таковых устройств в моей коллекции не имеется, поэтому спишем эту ситуацию на форс-мажор непредвиденные обстоятельства. Как бы там ни было, но приложение запустилось и заработало — ввел в Edit строку, нажал кнопочку — получил результат.

Заключение

Что можно в целом сказать о работе с HTML5 Builder, какие сделать выводы после первого знакомства с продуктом?

1. HTML5 Builder имеет дружелюбный интерфейс. Иногда запускаешь какой-нибудь инструмент и долго и упорно «втыкаешь» в то куда надо нажать, какое окошко открыть, какую кнопку ткнуть. А здесь все элементы управления расположены компактно и вполне понятно куда надо нажать, что выбрать и т.д. На освоение с интерфейсом уходит очень мало времени.
2. С HTML5 Builder’ом можно довольно быстро разрабатывать приложения даже с минимальными познаниями в CSS3 или JavaScript — львиную долю рутинной работы типа записей в css-файл берет на себя инструмент.
3. HTML5 Builder поддерживает сборку под различные мобильные ОС, что несомненно является очень большим плюсом. Да, то, что собираются веб-приложения накладывает некоторые ограничения как на сам процесс разработки под конкретную мобильную ОС, так и на работу готового приложения. Но в целом разрабатываемые приложения вполне себе имеют право на существование и пренебрегать ими, думаю, особенно не стоит.

Немного похвалил инструмент, а теперь также немного и покритикую (в хорошем смысле). Итак, что мне, как Delphi-разработчику, не хватало при работе с HTML5 Builder и, что хотелось бы увидеть в следующей серии версии:

1. Отладчик JavaScript. Сейчас его в билдере, на сколько я понял, нет. Есть инструменты разработчика (как в Chrome), но, все-таки хотелось бы видеть отладчик по типу Delphi. 
2. После Delphi немного удивляет медленная скорость работы HTML5 Builder. Сами разработчики этого факта не отрицают и, даже объясняют в FAQ почему так происходит, поэтому, будем надеяться, что в следующей версии продукт будет, что называется, «летать» (и не «падать»).
3. В части работы с БД нет SQLite. DBExpress обзавелся таким драйвером совсем недавно, поэтому будем ждать SQLite в DBRepeater у HTML5 Builder, все-таки для того же Android SQLite занимает далеко не последнее место.

В общем и целом HTML5 Builder мне понравился. Не могу сказать, что я в прямо восторге, но в случае, если вдруг потребуется быстро сварганить небольшое приложение под Андроид, то, с очень большой долей вероятности, я запущу именно этот инструмент.

И в заключение, предлагаю Вам ознакомиться с тем самым вебинаром, который и подтолкнул меня к знакомству с инструментом HTML5 Builder: