Проектирование архитектуры инструментальных средств конструирования веб-приложений. Выбор цветовой схемы графического интерфейса. Проектирование и создание макета интерфейса редактора. Реализация редактора графического интерфейса веб-приложения.
Аннотация к работе
Веб-приложения имеют ряд положительных аспектов: - Для полноценной работы веб-приложения нужен только браузер и доступ в интернет. Человек строит необходимые диаграммы по определенным заранее заданным правилам, а на следующем шаге он запускает генерацию исходного кода приложения на основе созданных диаграмм [16, 22]. Для использования таких инструментов требуется человек, знающий правила построения диаграмм для конкретного продукта, который может «разработать» приложения. Данные продукты являются хорошей альтернативой разработке приложений «с нуля», тем не менее, они обладают рядом недостатков: - программные продукты запускаются на определенной операционной системе, - продукты используют языки моделирования, что является с одной стороны наглядным, но с другой стороны, для некоторых людей, не совсем ясным и понятным, - требуются определенные знания в проектировании и моделировании, а также в использовании языков моделирования и построении диаграмм. Для устранения недостатков вышеописанных программных продуктов было решено разработать веб-приложение, которое будет строить модель приложений на основе пользовательского интерфейса, т.е. пользователь на сайте инструмента создает визуальный вид приложения, дополняя его небольшим количеством метаданных, и на основе созданной пользователем модели веб-странички строится модель приложения.В данной главе будет описано что такое модельно-ориентированная разработка, ее достоинства и недостатки по сравнению с код-ориентированным подходом разработки.Сторонники (Martinez, Lopez, Gustavsson, Heijstek и Chaudron) данного подхода разработки утверждают, что подход имеет следующие преимущества над традиционным подходом к разработке программного обеспечения (код-ориентированный подход) [16, 11]: - Прирост производительности в долгосрочном и краткосрочном периоде. Наличие подробной модели обеспечивает автоматическое создание типовых частей приложения, разработка которых поддается автоматизации. Причиной вышесказанных утверждений является то, что на сегодняшний день подход модельно-ориентированной разработки предлагает высокий уровень абстракции, который «захватывает» основные характеристики современных приложений. Технология разработки пользовательского интерфейса, основанная на моделях, стремится обеспечить программистов средой, в которой они могут проектировать и реализовывать пользовательские интерфейсы намного проще, чем при использовании традиционных инструментов разработки пользовательского интерфейса. Исходя из вышесказанного, можно утверждать, что модельно-ориентированная разработка пользовательского интерфейса имеет определенные преимущества, такие как автоматизация создания интерфейса, описание процесса разработки более абстрактно, наглядное отображение пользовательского интерфейса, например, в диаграммах.В модельно-ориентированном подходе модель является главным артефактом разработки, из которого генерируется исполняемый код. В данном случае, модель - это абстрактное описание программного продукта, которое упрощенно описывает аспекты программного обеспечения. Модель создается не на языке программирования, а при помощи языка моделирования, например, Unified Modeling Language (UML). Модель, построенная при помощи языков моделирования, является независимой от используемой платформы (Platform Independent Model), в данном случае платформа - это набор технологий, который включает в себя функциональные возможности, предоставляемые через интерфейсы и модели использования. Данная модель привязана к требованиям и предметной области, и не зависит от деталей, таких как язык программирования, платформа на которой будет исполняться приложение, тип базы данных и др.“Пользовательский интерфейс (user interface) - все компоненты интерактивной системы (программное обеспечение или аппаратное обеспечение), которые предоставляют пользователю информацию и являются инструментами управления для выполнения определенных задач” [1]. Представляет собой совокупность методов и средств, с помощью которых пользователь взаимодействует с устройством. Средства взаимодействия включают в себя: - Средство вывода информации от устройства к пользователю - это воздействие на организм человека (на зрение, слух, тактильное взаимодействие и т.д.). Графический интерфейс - разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т.п.), представленные пользователю на дисплее, исполнены в виде графических изображений. Веб интерфейсы - это совокупность средств, при помощи которых пользователь взаимодействует с вебсайтом или любым другим приложением через браузер.“CASE (Computer-Aided Software Engineering) - набор инструментов и методов программной инженерии для проектирования программного обеспечения, который помогает обеспечить высокое качество программ, отсутствие ошибок и простоту в обслуживании программных продуктов” [15]. Изначально CASE-средства упрощали только трудоемкие процессы анализа и проектирования, но после появления стандарта ISO/IEC 14102 CASE-средства ст
План
Оглавление
Введение
1. Модельно-ориентированная разработка и CASE инструменты
1.1 Модельно-ориентированная разработка
1.2 Трансформация моделей
1.3 Пользовательский интерфейс
1.4 Понятие CASE-инструментов
1.5 Анализ CASE-инструментов
1.5.1 PRAGMADEV Studio
1.5.2 Flexberry
1.5.3 Rational Software Architect
2. Проектирование архитектуры инструментальных средств конструирования веб-приложений
2.1 Требования к программному обеспечению
2.1.1 Функциональные требования
2.1.2 Нефункциональные требования
2.2 Общая архитектура приложения
2.3 Схема базы данных
2.4 Структура классов приложения
2.5 Диаграмма сотрудничества
3. Создание редактора графического интерфейса
3.1 Выбор цветовой схемы для редактора
3.2 Проектирование и создание макета интерфейса редактора
3.2.1 Visual Studio
3.2.2 INTELLIJ Idea
3.2.3 Создание макета интерфейса редактора
3.3 Реализация редактора графического интерфейса
Заключение
Библиографический список
Приложение A Архитектура приложения
Приложение B Схема работы RABBITMQ
Приложение C Схема базы данных
Приложение D Диаграммы классов
Приложение E Диаграммы сотрудничества
Приложение F Техническое задание
Приложение G Цветовые схемы редактора
Приложение H Листинг функции для перестроения дерева
Введение
веб приложение интерфейс редактор
В наше время, когда информационные технологии развиваются с большой скоростью, появляется множество инструментов для работы на компьютере. Они стали для нас неотъемлемой частью в обыденной жизни. Компьютер выполняет самые разные задачи, а для выполнения задач требуется различное программное обеспечение. В последние годы программное обеспечение все больше и больше «переходит» в интернет, растет количество веб-приложений [7].
Веб-приложения имеют ряд положительных аспектов: - Для полноценной работы веб-приложения нужен только браузер и доступ в интернет.
- Для работы веб-приложений требуется аппаратная платформа, не обладающая большими вычислительными мощностями.
- Для конечного пользователя обновление веб-приложений происходит автоматически, не занимая времени и сил пользователя.
- Веб-приложения обеспечивают высокую мобильность [31].
Разработка веб-приложения, реализующего сложный функционал, является не простой задачей. Пользователи приложений даже не подозревают, что, когда они заходят на сайт и выполняют какие-либо действия, где-то на сервере происходит сложные вычислительные процессы, которые, возможно, их персональный компьютер не смог бы обработать [17].
Для создания веб-приложений привлекаются разработчики, которые «с нуля» пишут код, используют готовые библиотеки кода, фреймворки и другие необходимые инструменты. Однако есть альтернативные решения. Например, генерация приложений, основанная на построении визуальных моделей с использованием языков моделирования, таких как UML. Человек строит необходимые диаграммы по определенным заранее заданным правилам, а на следующем шаге он запускает генерацию исходного кода приложения на основе созданных диаграмм [16, 22]. Примерами, такого типа программного обеспечения являются Flexberry и инструменты компании PRAGMADEV, RISE Editor, Timing-Architects Tool Suite.
Такие программные продукты позволяют сократить время на разработку, при этом не требуются программисты, которые пишут именно код. Для использования таких инструментов требуется человек, знающий правила построения диаграмм для конкретного продукта, который может «разработать» приложения.
Данные продукты являются хорошей альтернативой разработке приложений «с нуля», тем не менее, они обладают рядом недостатков: - программные продукты запускаются на определенной операционной системе, - продукты используют языки моделирования, что является с одной стороны наглядным, но с другой стороны, для некоторых людей, не совсем ясным и понятным, - требуются определенные знания в проектировании и моделировании, а также в использовании языков моделирования и построении диаграмм.
Данные недостатки приводят к тому, что продукты не находят широкого применения, а используются в узких кругах.
Для устранения недостатков вышеописанных программных продуктов было решено разработать веб-приложение, которое будет строить модель приложений на основе пользовательского интерфейса, т.е. пользователь на сайте инструмента создает визуальный вид приложения, дополняя его небольшим количеством метаданных, и на основе созданной пользователем модели веб-странички строится модель приложения.
Объектом данного исследования является процесс разработки веб-приложений на основе графического интерфейса. Предметом исследования является инструментальное средство конструирования веб-приложений.
Целью работы является реализация редактора графического интерфейса инструментального средства конструирования веб-приложений.
Для достижения цели были поставлены следующие задачи: 1. Проанализировать системы, использующие языки моделирования для построения веб-приложений.
2. Составить техническое задание.
3. Описать архитектуру с помощью диаграммы развертывания и компонентов.
4. Выполнить проектирование базы данных.
5. Описать статическую структуру приложения с помощью диаграмм классов и сотрудничества.
6. Выбрать цветовую схему для редактора графического интерфейса инструментального средства конструирования веб-приложений.
7. Создать прототип, макет интерфейса и сверстать каркас редактора графического интерфейса.
8. Реализовать функции и провести альфа-тестирование редактора графического интерфейса. Под функциями понимается реализация возможности создания веб-страниц при помощи добавления элементов на рабочую область, изменение стилей элементов, сохранение, загрузка и удаление проектов на локальном компьютере.