Разработка визуального конструктора мобильных приложений

Разработка визуального
конструктора мобильных приложений
Белокуров Д.Н., 4 курс, кафедра системного программирования СПбГУ, eliriand@math.spbu.ru,
Бумаков Н.В., 4 курс, кафедра системного программирования СПбГУ, nikita.bumakov@gmail.com,
Захаров В.А., 2 курс, математико-механический факультет СПБГУ, vladimir.zakharov93@gmail.com,
Чижова Н.А., 5 курс, кафедра системного программирования СПбГУ, nadya.chizhova@gmail.com.
В статье рассматривается задача реализации визуального онлайн конструктора клиент-серверных
мобильных приложений для платформ Android и Windows Phone. Представлен способ задания клиентской и
серверной логики приложения при помощи визуального дизайнера. Приводится описание реализации
прототипа, включающего в себя все стадии работы конструктора: задание логики клиентской части
приложения, взаимодействие с сервером и с сервером приложений и генерация конечного файла.
Введение
В связи с распространенностью мобильных телефонов все более очевидной становится
необходимость наличия средств для быстрой разработки мобильных приложений. На данный
момент большинство подобных конструкторов, предложенных на рынке, поддерживают только
создание приложений, не требующих клиентской или серверной логики. Примером такого
приложения является приложение-визитка — приложение, отображающее общую информацию об
организации, контакты и местоположение предприятия на карте. В статье описана реализация
конструктора мобильных приложений, с помощью которого возможно задавать более сложную, в
том числе серверную, логику работы приложения.
1. Обзор существующих решений
На данный момент на рынке существует ряд онлайн-сервисов, позволяющих создавать
мобильные приложения с помощью визуального редактора: AppInventor, iBuildApp, Apps.ru и
другие. Такие средства предлагают пользователю инструмент для задания внешнего вида
приложения и простейшей логики в виде указания переходов между экранами приложения.
Недостатком таких сервисов является то, что они не поддерживают возможность задания
нетривиальной логики приложения, например: агрегацию данных, работу с внешними источниками
данных, авторизацию и т.д. Таким образом, функционал большинства существующих сервисов
ограничивается созданием информационных приложений, которые не способны на
взаимодействие с сервером или внешними источниками данных.
Кроме того, многие из представленных на рынке сервисов позволяют создавать
приложения только для одной определённой мобильной платформы, например, проект iBuildApp
позволяет создавать приложения исключительно для платформы iOS.
2. Реализация
По результатам исследования и анализа существующих конструторов для создания
мобильных приложений был предложен собственный подход.
Общая архитектура разработанной системы состоит из нескольких компонент. Клиент
обеспечивает моделирование интерфейса приложения, задание необходимой логики, а также
возможность проверить корректность работы создаваемого мобильного приложения с помощью
эмулятора мобильного телефона. Серверная часть выполняет агрегацию необходимых данных и
генерацию итогового файла, который затем передается на клиент и сохраняется на компьютере
пользователя. За саму генерацию приложений отвечает набор специально написанных
генераторов приложений под различные платформы.
Создание приложения происходит путем перетаскивания на рабочую область элементов
палитры, таких как кнопка, изображение, текстовое поле и другие. Аналогичным образом
происходит задание логики приложения. Созданное приложение можно протестировать с
помощью эмулятора и затем сгенерировать соответствующий файл. Сформированный файл
автоматически сохраняется на компьютере пользователя.
Рис. 1. Основные модули конструктора
Для возможности свободного доступа пользователей к разработанному конструктору,
прототип дизайнера и эмулятора выложен в облако Microsoft: Windows Azure.
2.1. Клиент
Клиентская часть сервиса состоит из двух компонент: дизайнера приложений и эмулятора.
Дизайнер отвечает за создание интерфейса приложения и описание его бизнес-логики. Эмулятор
позволяет запустить создаваемое приложение прямо в окне интернет-браузера.
Дизайнер приложений включает в себя такие компоненты, как палитра элементов,
редактор свойств, основная рабочая область, менеджер экранов и редактор клиентской логики
приложения. Для задания клиентской логики на данный момент используется событийнотриггерная система, позволяющая задавать поведение приложения при реализации событий
определённых типов, например “пришёл ответ на запрос об авторизации”, “сработал таймер”,
“нажата кнопка” и т.д. На данный момент клиентская логика описывается путём компоновки
элементарных блоков-действий. Действия могут быть как общими для всех типов приложений,
например условное ветвление или переход на другой экран, так и специфичными для конкретных
типов создаваемых приложений, например отправка запроса об авторизации на сервер. В
дальнейшем планируется использование графических языков для задания и клиентской, и
серверной логики.
Для запуска онлайн-эмулятора или генерации мобильного приложения, подлежащего
установке на смартфон, разрабатываемое приложение экспортируется в XML специального вида,
который передаётся эмулятору или на сервер в зависимости от того, запускается эмулятор или же
генерируется готовое приложение.
Эмулятор служит для запуска разрабатываемого приложения прямо в окне браузера. Это
позволяет существенно облегчить отладку приложения благодаря тому, что не трубется каждый
раз генерировать приложение и устанавливать его на смартфон.
Так как реализация сложного приложения на языке JavaScript - довольно нетривиальный
процесс, то в качестве основного средства для разработки был выбран язык TypeScript 1. TypeScript
представляет собой надстройку над JavaScript и транслируется в него. Выбранное средство
выгодно отличается наличием типизации, удобной в использовании объектной моделью. Кроме
того, для TypeScript имеется возможность отладки приложений, что существенно облегчает
процесс разработки.
В качестве средства, которое используется для построения интерфейса разрабатываемого
приложения как в дизайнере, так и в эмуляторе используется библиотека JQuery Mobile2. Данная
библиотека содержит набор готовых мобильных виджетов, что позволило избежать
необходимости реализовывать многие элементы интерфейса вручную.
2.2. Сервер разработки и сервер приложений
Сервер разработки обеспечивает связь между клиентской частью и генератором. Также на
этом сервере предполагается работа репозитория для хранения диаграмм пользователя,
благодаря которому каждый клиент в личном кабинете сможет редактировать ранее созданные
диаграммы.
В качестве основной платформы для реализации сервера был выбрана Microsoft .NET: язык
программирования F# и технология web-разработки WebSharper для взаимодействия с клиентской
частью. Функциональный язык F# обеспечивает высокую производительность, и снижает объем
написанного кода, в сравнении, например, с С#.
1
2
Домашняя страница языка Typescript, URL: http://www.typescriptlang.org/
Домашняя страница jQuery Mobile, URL: http://jquerymobile.com/
Для возможности задания серверной логики приложения реализован сервер приложений,
который имеет возможность в режиме онлайн передавать пользователю данные, запрошенные из
сторонних источников. Также сервер приложений может быть использован для агрегации данных
из различных внешних систем, выполнения сложных вычислений и других задач. Для разработки
данного сервера приложений также использовались технологии Microsoft® .NET и язык
программирования C#. Технология работы сервера приложений была апробирована при создании
ряда приложений, отображающих на карте ряд точек, координаты которых передаются на клиент
по его запросу.
2.3. Генератор
Генератор по предоставленным ему данным создает файл приложения под необходимую
мобильную платформу. Сформированный файл в дальнейшем сервер передает клиенту.
Полученный файл пользователь может загрузить в телефон и установить приложение.
В данный момент реализована генерация в две популярные мобильные платформы:
Android и Windows Phone 7/8. Планируется возможность генерации и в другие мобильные
платформы.
Принцип работы генератора следующий. Сначала сервер передает ему созданный
клиентом XML файл специального формата единого для всех мобильных платформ. Для
генерации приложения под любую платформу достаточно лишь одного этого файла. В полученном
файле для всех элементов пользовательского интерфейса генерируются соответствующие узлы в
файлах XML для Android и XAML для Windows Phone. Необходимые ресурсы скачиваются из сети
интернет. Для узлов, отображающих логику, генерируется необходимые строки в файлы исходного
кода. При необходимости также добавляются нужные для работы приложения подключения
библиотек. После прохождения всех узлов происходит автоматическая сборка приложения. Для
сборки в Android необходимы утилита Apache Ant и android SDK. Для Windows Phone необходимы
Windows Phone SDK и msbuild. На выходе для Android создается файл с расширением apk, а для
Windows Phone — xap-файл. На этом работа генератора заканчивается.
Для сохранения единого стиля проекта генераторную часть было решено также писать на
языке F#. Сопоставление шаблонов в этом языке позволяет удобно работать со стандартными
парсерами библиотеки классов платформы .NET и дает возможность быстро добавить разбор
новых узлов. Кроме этого, скачивание нужных ресурсов из сети интернет и запись данных в файл
описывается всего в несколько строчек.
Заключение
В результате данной работы были изучены существующие подходы к визуальному
созданию мобильных приложений. В результате проведенного анализа было разработано
собственное решение, описанное в даной работе. Также был реализован прототип онлайн
конструктора приложений для мобильных телефонов, требующих возможности задания
клиентской логики.
В дальнейшем планируется реализация возможности агрегации данных в приложении из
различных источников, поддержка задания более сложной клиентской и серверной логики и
использование специализированных графических языков.
Литература
1. Мартынов Д.Н., Федотов А.Г. Windows Azure: Облачная платформа Microsoft, 2010.
URL: http://download.microsoft.com/documents/rus/msdn/Windows_Azure_web.pdf
2. Мартин Фаулер, Архитектура корпоративных программных приложений, Вильямс, 2007.
544С