Введение 6
1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ПРОЕКТИРОВАНИЯ И РАЗРАБОТКИ SPA 8
1.1. Основные понятия и определения SPA 8
1.2. Основные принципы создания современных веб-приложений 14
1.3. Инструментарий проектирования и разработки веб-приложений ... 29
1.3.1. Среды разработки веб-приложений 29
2. РАССМОТРЕНИЕ ИНСТРУМЕНТАРИЯ ДЛЯ РАЗРАБОТКИ SPA 35
2.1. Язык программирования Javascript 35
2.2. Фреймворки используемые для разработки веб-приложений 35
2.3. Javascript фреймворк Vue.js 41
2.3.1. Работа с Vue.js 41
2.3.2. Работа с директивами 42
2.3.3. Роутинг 44
2.3.4. Паттерн управления состоянием 45
2.4. Библиотека Vuetify для работы в Google Material Design 47
2.5. База данных Firebase 49
2.6. Npm пакетный менеджер Node.js 50
2.7. Webpack 51
3. РАЗРАБОТКА ТАСК МЕНЕДЖЕРА 53
3.1. Краткая характеристика приложения 53
3.2. Верстка приложения 53
3.3. Взаимодействие в приложении 63
3.4. Работа с базой данных 63
3.5. Структура приложения 67
3.6. Интерфейс приложения 68
3.7. Обоснование эффективности проекта 78
3.7.1. Алгоритм распределения задач в веб-студии 78
3.7.2. Экономическое обоснование проекта 80
Заключение 82
Список использованных источников 84
ПРИЛОЖЕНИЯ 88
ПРИЛОЖЕНИЕ А 88
ПРИЛОЖЕНИЕ Б 95
ПРИЛОЖЕНИЕ В
Веб остаётся самой многогранной средой передачи информации. Мы продолжаем добавлять динамику на наши страницы и перед их внедрением должны убедиться, что сохраним важные принципы веба, доставшиеся нам в наследство.
Страницы, связанные между собой гиперссылками, — хорошие строительные блоки для любого приложения. Поступательная загрузка кода, стилей и разметки по мере действий пользователя гарантирует отличную производительность без отказа от интерактивности.
Новые уникальные возможности предоставляет JavaScript. Если эти технологии будут повсеместно использоваться, то обеспечат наилучший опыт работы для пользователей самой свободной платформы из существующих в среде Интернет.
В современном мире, мало кто обходится в быту только одним девайсом. В развитых странах у среднестатистического человека есть телефон, персональных компьютер и планшет. Это накладывает некоторые ограничения на разработчиков, ведь, чтобы программным продуктом пользовались необходимо оптимизировать его минимум под 5 устройств, это если брать только размеры экрана. Так же стоит учесть, что на вершине потребностей пользователя стоит удобство и скорость работы приложения. Это проблему решает Vue с помощью своей развитой экосистемы и модульного подхода к разработке веб приложений.
Актуальность данной работы обусловлена тем, что, проходя практику в веб-студии, нами было замечено, что команда разработчиков и дизайнеров каждый день нерационально тратит время для распределения и обсуждения задач. При этом в планерке должны участвовать все члены команды. Что является нерациональной тратой времени. Применение усовершенствованной или разработанной системы управления персоналом в веб студии позволило бы автоматизировать операции по распределению и организации работы.
Подумав о том как можно решить эту проблему, мы пришли к выводу, что разобраться с распределением задач поможет быстрый и удобный таск менеджер. Это программа для распределения задач в команде. Основной идеей моего проекта являлось то, что есть одно ответственное лицо, то есть проект менеджер, который регистрирует команду в приложении и занимается ведением проектов и распределением задач.
Цель: создание приложения, которое бы упрощало процесс распределения, обсуждения и выполнения задач для сотрудника веб-студии.
Объект: деятельность сотрудников веб-студии «Веб-курсив».
Предмет: концепции и технологии проектирования и разработки программных продуктов для создания веб приложения.
Для достижения поставленной цели, необходимо выполнить следующие задачи:
1. Обзор теоретических основ проектирования и разработки одностраничных веб приложений.
2. Анализ, реинжиниринг и моделирование бизнес-процессов деятельности веб студии.
3. Разработка веб приложения средствами языка JavaScript.
4. Экономическое обоснование.
Работа имеет следующую структуру и включает в себя введение, основную часть, состоящую из трех глав, шестнадцати параграфов и семи подпараграфов, заключение, список использованных источников и приложения.
В первой главе мы разобрали теоретические основы проектирования и разработки одностраничных веб приложений. Изучили основные понятия и определения SPA и принципы создания современных веб-приложений, а так же рассмотрели инструментарий для разработки веб-приложений, сравнили редакторы кода между собой и определили лучший из них.
Во второй главе мы рассмотрели инструментарий для разработки SPA. Провели сравнительный анализ самых популярных JavaScript фреймворков используемых для разработки SPA. Увидели на графиках как выросла популярность Vue в сравнении с Angular и React за 2013-2017 года. Затем, определивших в преимуществах Vue мы описали работу в нем, работу с директивами, синтаксисом, роутингом и паттернами управления состоянием приложения. Изучили библиотеку Vuetify для разработки Vue приложений в стиле Google Material Design. Рассмотрели возможности работы с базой данных Firebase. Рассказали о необходимости Webpack и пакетного менеджера npm от Node.js.
В третьей главе бала полностью описана разработка веб приложения. Была кратко изложена характеристика веб приложения. Описана верстка приложения с использованием Vuetify, взаимодействие частей приложения по средствам роутинга с использованием модуля Vuex от Vue, работа приложения с базой данных. Была изложена структура приложения и описана каждая его составляющая. Затем мы подробно описали интерфейс приложения. В конце привели экономическое обоснование и доказали необходимость внедрения таск менеджера в веб студию.
Была поставлена задача, которую должно решать приложение и создан алгоритм работы данного приложения.
В итоге было написано приложение, которое удовлетворяет все поставленные задачи:
1. Удобный пользовательский интерфейс по стандартам Google Material Design
2. Создание базы данных, которая содержит все существующие аккаунты и их проекты, команды и задачи.
3. Создание быстрого, адаптированного веб приложения соответствующего современным требованиям.
Помощь студентам и аспирантам в выполнении работ от наших партнеров
