Разработка web-сервиса "Дневник тренировок"

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

Введение

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

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

Такое приложение особенно необходимо профессиональному спортсмену. В профессиональном спорте необходимо иметь наиболее полную информацию о том, сколько белков, жиров и углеводов потребляет спортсмен. В течении дня держать эту информацию в голове очень неудобно и ее нужно куда-то записывать. Делать это при помощи приложения намного удобнее, потому что оно может автоматически посчитать сколько суммарно было потреблено калорий. Таким образом со спортсмена снимается большая часть забот, все за него делает электронный органайзер.

Кроме всего выше описанного, электронный органайзер так же имеет следующие достоинства:

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

- он будет всегда с вами, достаточно просто иметь доступ в сеть интернет;

- обмениваться информацией с друзьями гораздо проще;

- электронные средства учета предоставляют простой доступ к архивной информации (легче посмотреть с какого веса начиналось выполняться упражнение и каких высот спортсмен достиг на данный момент);

- данные отображаются более наглядно.

Все выше сказанное определило актуальность данной темы работы - «Разработка web-сервиса «Дневник тренировок»».

Целью данной дипломной работы является разработка клиент-серверного приложения, реализующего функции электронного органайзера. С помощью данного органайзера спортсмены смогут вести дневник тренировок с любого устройства с выходом в сеть интернет. Это избавит их выполнения рутинных операций и позволит наглядно отслеживать результаты тренировок.

Объектом исследования ВКР является разработка клиент-серверного приложения, реализующего функции электронного органайзера.

Предметом исследования являются способы реализации клиент-серверного приложения.

Для достижения данной цели необходимо выполнить следующие задачи:

- изучить способы создания клиент-серверных приложений;

- выбрать необходимые средства разработки;

- разработать web-интерфейс;

- спроектировать СУБД;

- разработать серверную часть приложения, которая будет заниматься обработкой данных.

1. Разработка требований

Требования к программному обеспечению -- совокупность утверждений относительно атрибутов, свойств или качеств программной системы, подлежащей реализации. Создаются в процессе разработки требований к программному обеспечению, в результате анализа требований.

Требования разделяются по своему характеру на: функциональные и не функциональные.

К разрабатываемому сервису были предъявлены следующие функциональные требования:

- сервис должен обеспечивать ведение электронного дневника тренировок;

- сервис должен предусматривать заполнение тренировок на несколько дней вперед;

- необходима возможность изменять записи в дневнике тренировок;

- должна присутствовать возможность комментировать упражнения в дневнике тренировок;

- пользователь должен иметь возможность создавать произвольное количество тренировочных программ, разбитых по дням, для того, чтобы в дальнейшем заполнять на их основе дневник тренировок;

- сервис должен предоставлять набор стандартных упражнений и позволять пользователю добавлять свои упражнения;

- сервис должен предусматривать, что упражнения могут иметь различные единицы измерения (силовое (вес/повторения), кардио (минуты или секунды), расстояние (км/м), повторения (разы));

- необходим инструмент для планирования приемов пищи, с указанием сколько было потреблено (жиров, белков, углеводов);

- необходимо иметь возможность планировать приемы пищи на несколько дней вперед;

- должна быть функция редактирования записей по планированию питания.

К сервису предъявлялись следующие нефункциональные требования:

- интерфейс должен быть оформлен в стиле минимализма;

- данные пользователь должны храниться на сервере безопасно;

- cookies (небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя) в браузере пользователя должны быть зашифрованы

- переход на новую базу данных должен проходить максимально быстро.

2. Выбор комплекса программных средств

2.1 Выбор языка программирования

Серверная часть разработанного приложения написана на языке программирования python. Python - это высокоуровневый язык программирования общего назначения, ориентированный на повышение производительности разработчика и читаемости кода.

Основные факторы, которые повлияли на выбор Python в качестве языка для разработки серверной части приложения таковы:

- качество программного обеспечения. Основное преимущество языка Python заключается в удобочитаемости, ясности и более высоком качестве, отличающими его от других инструментов в мире языков сценариев. Программный код на языке Python читается легче, а значит, многократное его использование и обслуживание выполняется гораздо проще, чем использование программного кода на других языках сценариев. Единообразие оформления программного кода на языке Python облегчает его понимание даже для тех, кто не участвовал в его создании. Кроме того, Python поддерживает самые современные механизмы многократного использования программного кода, каким является объектно-ориентированное программирование (ООП);

- высокая скорость разработки. По сравнению с компилирующими или строго типизированными языками, такими как С, C++ и Java, Python во много раз повышает производительность труда разработчика. Объем программного кода на языке Python обычно составляет треть или даже пятую часть эквивалентного программного кода на языке C++ или Java. Это означает меньший объем ввода с клавиатуры, меньшее количество времени на отладку и меньший объем трудозатрат на сопровождение. Кроме того, программы на языке Python запускаются сразу же, минуя длительные этапы компиляции и связывания, необходимые в некоторых других языках программирования, что еще больше увеличивает производительность труда программиста;

- переносимость программ. Большая часть программ на языке Python выполняется без изменений на всех основных платформах. Перенос программного кода из операционной системы Linux в Windows обычно заключается в простом копировании файлов программ с одной машины на другую. Более того, Python предоставляет массу возможностей по созданию переносимых графических интерфейсов, программ доступа к базам данных, веб-приложений и многих других типов программ. Даже интерфейсы операционных систем, включая способ запуска программ и обработку каталогов, в языке Python реализованы переносимым способом;

- стандартная библиотека. В составе Python поставляется большое число собранных и переносимых функциональных возможностей, известных как стандартная библиотека. Эта библиотека предоставляет массу возможностей, востребованных в прикладных программах, начиная от поиска текста по шаблону и заканчивая сетевыми функциями. Кроме того, Python допускает расширение как за счет ваших собственных библиотек, так и за счет библиотек, созданных сторонними разработчиками. Из числа сторонних разработок можно назвать инструменты создания веб-сайтов, программирование математических вычислений, доступ к последовательному порту, разработку игровых программ и многое другое. Например, расширение NumPy позиционируется как свободный и более мощный эквивалент системы программирования математических вычислений Mathlab;

- интеграция компонентов. Сценарии Python легко могут взаимодействовать с другими частями приложения благодаря различным механизмам интеграции. Эта интеграция позволяет использовать Python для настройки и расширения функциональных возможностей программных продуктов. На сегодняшний день программный код на языке Python имеет возможность вызывать функции из библиотек на языке C/C++, сам вызываться из программ, написанных на языке C/C++, интегрироваться с программными компонентами на языке Java, взаимодействовать с такими платформами, как СОМ и .NET, и производить обмен данными через последовательный порт или по сети с помощью таких протоколов, как SOAP, XML-RPC и CORBA. Python - не обособленный инструмент;

- удовольствие. Благодаря непринужденности языка Python и наличию встроенных инструментальных средств процесс программирования может приносить удовольствие. На первый взгляд это трудно назвать преимуществом, тем не менее, удовольствие, получаемое от работы, напрямую влияет на производительность труда. Из всех перечисленных факторов наиболее существенными для большинства пользователей являются первые два (качество и производительность).

2.2 Выбор web фреймворка

В качестве основы для разрабатываемого web приложения был выбран flask. Flask - это микрофреймворк для создания web приложений на python. Микрофреймворком он называется в следствии того, что его разработчик не навязывает конечному пользователю конкретное средство для решения той или иной проблемы. Способ решения выбирается в процессе разработки самостоятельно. Также приставка микро означает, что размер кодовой базы достаточно маленький, а это значит, что код легче протестировать и его надежность будет выше.

Одним из проектных решений во Flask является то, что простые задачи должны быть простыми; они не должны занимать много кода, и это не должно ограничивать. Поэтому фреймворк предусматривает несколько вариантов дизайна. Например, Flask использует локальные треды внутри объектов, так что вы не должны передавать объекты в пределах одного запроса от функции к функции, оставаясь в безопасном треде. Хотя это очень простой подход и позволяет сэкономить много времени, это также может вызвать некоторые проблемы для очень больших приложений, поскольку изменения в этих локальных тредах-объектов может произойти где угодно в том же треде. Для того, чтобы решить эти проблемы, от пользователя не скрываются объекты локальных тредов, вместо этого предоставляется большое количество инструментов для работы с ними, чтобы работа с ними была максимально удобной.

Во Flask много вещей предварительно сконфигурированы, на основе общей базовой конфигурации. Например, шаблоны и статические файлы сохранены в подкаталогах в пределах исходного дерева. Это можно изменить, но в большинстве случаев достаточно стандартной конфигурации.

Основная причина почему Flask называется «микрофреймворком» -- это идея сохранить ядро простым, но расширяемым. В нем нет абстрактного уровня базы данных, нет валидации форм или всего такого, что уже есть в других библиотеках, которые можно найти в сети. Однако Flask поддерживает расширения, которые могут добавить необходимую функциональность и имплеминтирует их так, как будто они уже были встроены изначально. В настоящее время уже есть расширения: формы валидации, поддержка закачки файлов, различные технологии аутентификации и многие другие.

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

Для простоты разработки была выбрана база данных SQLite. Данная БД не требует запуска отдельного сервера СУБД, что является большим ее достоинством, так как экономит вычислительные ресурсы ПК, на котором производится разработка, избавляет от трудоемкого процесса настройки рабочего окружения для запуска приложения (это очень актуально при разработке приложения командой разработчиков, когда нескольким программистам необходимо развернуть на своих компьютерах приложение).

2.4 Среда разработки

Для написания кода было решено выбрать среду разработки Pycharm. Pycharm - интегрированная среда разработки программного обеспечения на языке программирования Python, которая также поддерживает языки для ведения web разработки. В частности, в ней можно заниматься версткой HTML, создавать таблицы стилей CSS и программировать на JavaScript. Данная среда разработки была создана компанией JetBrains. Первая версия Pycharm появилась в июле 2010 года и быстро приобрела популярность, как первая качественная Python IDE с широким набором интегрированных инструментов.

Благодаря большому количеству встроенных инструментов программист мог быстро и качественно выполнять свои обязанности. Среди многочисленных возможностей среды можно выделить следующие:

- статический анализ кода, подсветка синтаксиса и ошибок;

- навигация по проекту и исходному коду: отображение файловой структуры проекта, быстрый переход между файлами, классами, методами и использованиями методов;

- рефакторинг: переименование, извлечение метода, введение переменной, введение константы, подъём и спуск метода и т. д.;

- инструменты для веб-разработки;

- встроенный отладчик для Python;

- встроенные инструменты для юнит-тестирования;

- разработка с использованием Google App Engine;

- поддержка систем контроля версий: общий пользовательский интерфейс для Mercurial, Git, Subversion, Perforce и CVS с поддержкой списков изменений и слияния.

Дизайн среды ориентирован на продуктивность работы программистов, позволяя им сконцентрироваться на разработке функциональности, в то время как Pycharm берёт на себя выполнение рутинных операций.

На рис. 2.1 изображено главное окно Pycahrm.

Рис. 2.1 - Скриншот рабочего окна Pycharm

2.5 Система управления версиями

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

Такая система является неотъемлемой частью разработки программного обеспечения и используется для хранения исходных кодов разрабатываемого приложения.

В данном дипломном проекте в качестве системы контроля версий выбран Git. Git был разработан Линусом Тосвальдом в процессе разработки ядра операционной системы Linux. При разработке к git применялись следующие требования:

- скорость;

- простота дизайна;

- поддержка нелинейной разработки (тысячи параллельных веток);

- полная распределённость;

- возможность эффективной работы с такими большими проектами, как ядро Linux (как по скорости, так и по размеру данных).

С момента рождения в 2005 году Git развивался и эволюционировал, становясь проще и удобнее в использовании, сохраняя при этом свои первоначальные качества. Он невероятно быстр, очень эффективен для больших проектов, а также обладает превосходной системой ветвления для нелинейной разработки.

В следствии выше описанных характеристик, на сегодняшний момент он пользуется большой популярностью среди разработчиков, используется многими компаниями. Для git создано большое количество сервисов, где можно хранить исходные тексты программ. Многие из этих сервисов позволяют использовать их бесплатно. В связи с этим для хранения исходных текстов разрабатываемого сервиса был выбран git.

2.6 Веб-сервер

Неотъемлемой частью любого сайта является web сервер. Web-сервер - это сервер принимающий запросы по протоколу HTTP (запросы обычно принимаются от браузеров) и выдающим им ответы. Чаще всего сервер в ответ на запрос клиента выдает HTLM страницы, статические файлы (css, изображения и т д). Кроме этого web-сервер может выдавать медиа поток и многое другое.

В качестве web-сервера был выбран nginx. Nginx - это HTTP-сервер и обратный прокси-сервер, почтовый прокси-сервер, а также TCP/UDP прокси-сервер общего назначения. Уже длительное время он обслуживает серверы многих высоконагруженных российских сайтов, таких как Яндекс, Mail.Ru, ВКонтакте и Рамблер. Согласно статистике Netcraft, nginx обслуживал или проксировал 29% самых нагруженных сайтов в мае 2017 года. Вот некоторые примеры успешного внедрения nginx (тексты на английском языке): Netflix, Wordpress.com, FastMail.FM.

Функциональные возможности:

- обслуживание статических запросов, индексных файлов, автоматическое создание списка файлов, кэш дескрипторов открытых файлов;

- акселерированное обратное проксирование с кэшированием, распределение нагрузки и отказоустойчивость;

- акселерированная поддержка FastCGI, uwsgi, SCGI и memcached серверов с кэшированием, распределение нагрузки и отказоустойчивость;

- модульность, фильтры, в том числе сжатие (gzip), byte-ranges (докачка), chunked ответы, XSLT-фильтр, SSI-фильтр, преобразование изображений; несколько подзапросов на одной странице, обрабатываемые в SSI-фильтре через прокси или FastCGI/uwsgi/SCGI, выполняются параллельно;

- поддержка SSL и расширения TLS SNI;

- поддержка HTTP/2 с приоритизацией на основе весов и зависимостей;

- виртуальные серверы, определяемые по IP-адресу и имени;

- поддержка keep-alive и pipelined соединений;

- настройка форматов логов, буферизованная запись в лог, быстрая ротация логов, запись в syslog;

- специальные страницы для ошибок 3xx-5xx;

- rewrite-модуль: изменение URI с помощью регулярных выражений;

- выполнение разных функций в зависимости от адреса клиента;

- ограничение доступа в зависимости от адреса клиента, по паролю (HTTP Basic аутентификация) и по результату подзапроса;

- проверка HTTP referer;

- методы PUT, DELETE, MKCOL, COPY и MOVE;

- FLV и MP4 стриминг;

- ограничение скорости отдачи ответов;

- ограничение числа одновременных соединений и запросов с одного адреса;

- геолокация по IP-адресу;

- A/B-тестирование;

- встроенный Perl.

Как видно из описания, данный сервер давно зарекомендовал себя как надежное и простое решение. Его можно не боясь использовать при разработке web-сервиса.

2.7 Документация

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

Для ведения был выбран модуль pydoc, который входит в стандартную библиотеку python. Он позволяет генерировать документацию из строк документации находящихся в исходном коде. Таким образом, затратив минимум усилий на оформления комментариев, можно получить хорошую документацию к программе.

Модуль pydoc собирает строки документации из всех модулей, входящих в проект и генерирует HTML файлы, которые можно просмотреть любым веб-обозревателем. Также есть возможность просматривать документацию в интерактивном режиме, находясь в консоли или запустив pydoc в режиме сервера. Доступ к серверу можно получить через обычный браузер. Данные возможности помогают лучше разобраться в структуре программы, используемых классах, функциях. Пример использования pydoc представлен на рис. 2.2.



Рис. 2.2 - Пример документации, полученной при помощи pydoc

Комментарии документации применяют для документирования классов, интерфейсов, полей (переменных), конструкторов и методов.

Для графического представления приложения лучше всего использовать язык UML. UML -- язык графического описания для объектного моделирования в области разработки программного обеспечения. UML является языком широкого профиля, это -- открытый стандарт, использующий графические обозначения для создания абстрактной модели системы, называемой UML-моделью. UML был создан для определения, визуализации, проектирования и документирования, в основном, программных систем.

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

UML позволяет также разработчикам программного обеспечения достигнуть соглашения в графических обозначениях для представления общих понятий и сконцентрироваться на проектировании и архитектуре.

Преимущества UML:

- UML объектно-ориентирован;

- UML позволяет описать систему практически со всех возможных точек зрения и разные аспекты поведения системы;

- диаграммы UML сравнительно просты для чтения после достаточно быстрого ознакомления с его синтаксисом;

- UML расширяет и позволяет вводить собственные текстовые и графические стереотипы, что способствует его применению не только в сфере программной инженерии.

UML получил широкое распространение и динамично развивается.

Для рисования UML и ER диаграмм использовался редактор диаграмм Dia. Dia - свободный кроссплатформенный редактор диаграмм, являющийся частью GNOME Office, но также есть возможность установить его независимо. Он может быть использован для создания различных видов диаграмм: блок-схем алгоритмов программ, древовидных схем, статических структур UML, баз данных, диаграмм сущность-связь, радиоэлектронных элементов, потоковых диаграмм, сетевых диаграмм и других.

Бесплатность и кроссплатформенность позволяют его использовать как для личных целей, так и при работе над проектом в компании. Кроме этого данный редактор потребляет маленькое количество ресурсов и сможет быть запущен на уже устаревшем компьютере. На рис. 2.3 представлен скриншот главного окна Dia.

Рис. 2.3 - Скриншот главного окна Dia

3. Проектирование базы данных

3.1 Физическая модель БД

Физическая модель БД определяет способ размещения данных в среде хранения и способы доступа к этим данным, которые поддерживаются на физическом уровне.

В таблице 1 описано соответствие сущностей логической модели и таблиц физической.

Подробное описание каждой таблицы приведено в таблицах 3.2 - 3.30.

Таблица 3.1. Соответствие сущностей логической и физической модели БД

Сущность	Таблица
Пользователь	User
Друзья пользователя	Friends
Временные зоны	Timezone
Служебные письма	EmailNotifi
Роль пользователя	Role
Роли пользователя	UserRole
Города	Cities
Регионы	Regions
Страны	Countries
Аватар пользователя	UserPhoto
Вид спорта	Sport
Название вида спорта	NameSport
Спортивный разряд	SportDicharge
Спортивные соревнования	SportingEvents
Тренировочная программа	TrainingPorgram

Таблица 3.2. User

Имя столбца	Тип
id	Integer
id_timezone	Integer
id_user_photo	Integer
name	Unicode
surname	Unicode
email	Unicode
password	Unicode
registration_date	DateTime
id_cities	Integer
active	Boolean
date_birthd	DateTime
sex	Enum('male', 'women')
growth	Float
weight	Float
education	Unicode
description	UnicodeText

Таблица 3.3. Friends

Имя столбца	Тип
id	Integer
id_user	Integer
id_friend	Integer

Таблица 3.4. Timezone

Имя столбца	Тип
id	Integer
Offset	Unicode
Zone	Unicode

Таблица 3.5. EmailNotifi

Имя столбца	Тип
id	Integer
id_user	Integer
unique_url	Unicode

Таблица 3.6. Role

Имя столбца	Тип
id	Integer
name	Unicode
description	UnicodeText

Таблица 3.7. UsersRoles

Имя столбца	Тип
id_user	Integer
id_role	Integer

Таблица 3.8. Cities

Имя столбца	Тип
id	Integer
country_id	Integer
region_id	Integer
important	Boolean
title_ru	Unicode
area_ru	Unicode
region_ru	Unicode

Таблица 3.9. Regions

Имя столбца	Тип
id	Integer
country_id	Integer
title_ru	Unicode

Таблица 3.10. Countries

Имя столбца	Тип
id	Integer
title_ru	Unicode

Таблица 3.11. UserPhoto

Имя столбца	Тип
id	Integer
id_photo_album	Integer
upload_date	DateTime
path	Unicode
description	UnicodeText

Таблица 3.12. Sport

Имя столбца	Тип
id	Integer
id_kind_sport	Integer
id_user	Integer
Started	Date

Таблица 3.13. NameSport

Имя столбца	Тип
id	Integer
name	Unicode

Таблица 3.14. SportingEvents

Имя столбца	Тип
id	Integer
id_sport	Integer
name	Unicode
date	Date
id_cities	Integer

Таблица 3.15. SportDischarge

Имя столбца	Тип
id	Integer
id_cities	Integer
id_sport	Integer
name	Unicode
organization	Unicode
date	Date

Таблица 3.16. TrainingProgram

Имя столбца	Тип
id	Integer
id_user	Integer
name	Unicode
description	UnicodeText

Таблица 3.17. ProgramDay

Имя столбца	Тип
id	Integer
id_training_programs	Integer
id_exercise	Integer

Таблица 3.18. ExercisesImage

Имя столбца	Тип
id	Integer
id_exercise	Integer
path	Unicode

Таблица 3.19. Exercises

Имя столбца	Тип
id	Integer
id_muscle_group	Integer
id_measurement_unit	Integer
id_user	Integer
name	Unicode
description	UnicodeText

Таблица 3.20. MuscleGroup

Имя столбца	Тип
id	Integer
name	Unicode
description	UnicodeText

Таблица 3.21. MeasurementUnit

Имя столбца	Тип
id	Integer
name	Unicode

Таблица 3.22. TrainingJournal

Имя столбца	Тип
id	Integer
id_user	Integer
date	Date
comment	UnicodeText

Таблица 3.23. ExerciseWorkout

Имя столбца	Тип
id	Integer
id_training_journal	Integer
id_exercise	Integer
comment	UnicodeText
see	Boolean

Таблица 3.24. Approach

Имя столбца	Тип
id	Integer
id_exercise_workout	Integer
expected_result	Float
expected_repeat	Float
real_result	Float
real_result	Float

Таблица 3.25. DialogMassage

Имя столбца	Тип
id	Integer
id_member	Integer
text	UnicodeText
date	Date

Таблица 3.26. DialogMambers

Имя столбца	Тип
id	Integer
id_user	Integer
Id_dialog	Integer

Таблица 3.27. Dialog

Имя столбца	Тип
id	Integer
id_dialog_members	Integer
name	Unicode
date_create	DateTime

Таблица 3.28. NutritionJournal

Имя столбца	Тип
id	Integer
id_user	Integer
date	Date
comment	UnicodeText

Таблица 3.29. NutritionJournalRecord

Имя столбца	Тип
id	Integer
id_nutrition_journal	Integer
id_product	Integer
amount	Integer

Таблица 3.30. Product

Имя столбца	Тип
id	Integer
id_user	Integer
name	Unicode
fats	Float
proteins	Float

3.2 Объектно-реляционное отображение

ORM (Object-Relational Mapping) - это технология программирования позволяющая связывать реляционные базы данных с концепциями объектно-ориентированного программирования. Она была создана для решения проблемы использования реляционных баз данных и объектно-ориентированных языков программирования, которая заключается в семантическом разрыве. То есть при разработке постоянно необходимо преобразовывать данные из объектно-ориентированного представления в реляционное и это не только снижает производительность, но и создает трудности для программистов, так как обе формы данных накладывают ограничения друг на друга.

Кроме решения обозначенной выше проблемы использование ORM помогает программистам и в других аспектах разработки. На пример:

- избавляет от привязки к конкретной базе данных. Переход на другую базу данных заключается в исправлении нескольких параметров конфигурационного файла;

- повышает безопасность приложения. ORM автоматически экранирует добавляемые в БД данные и таким образом становится труднее произвести SQL инъекцию;

- повышает производительность программиста избавляя его от написания однообразного и часто повторяемого кода.

4. Разработка

В результате проектирования приложения, в соответствии с постановкой задачи, был разработан web-сервис, имеющий структуру, изображенную на рис. 4.1.

Рис. 4.1 - Структура проекта

Как видно из рисунка 4.1, сервис состоит из 2 частей: клиентская и серверная.

4.1 Клиентская часть

Клиентская часть отвечает за взаимодействие с пользователем. На ней реализовано минимум логики, все вычисления в основном располагаются на сервере. Главными задачами front-end являются:

- отрисовка интерфейса;

- управление маршрутизацией (переходы между страницами сайта);

- отправка запросов на сервер и отображение результатов.

Front-end приложение выполнено в виде SPA (single page application или одностраничное приложение). Одностраничные приложения - это приложение размещающиеся в одном HTML документе. Все остальные компоненты, которые необходимы в ходе работы подгружаются автоматически при помощи JavaScript.

За счет этого можно разработать высоко отзывчивый пользовательский интерфейс, который по комфорту использования будет близок к desktop приложениям. Это очень важно, потому что пользователь должен ощущать себя максимально комфортно.

Разработка одностраничного приложения.

Разработка клиентской части приложения производилась при помощи фреймворка Angular 2.

Angular 2 представляет фреймворк от компании Google для создания клиентских приложений. Angular является наследником фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиальной новый фреймворк.

Angular 2 предоставляет такую функциональность, как двустороннее связывание, позволяющее динамически изменять данные в одном месте интерфейса при изменении данных модели в другом, шаблоны, маршрутизация и так далее.

Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript. Это позволяет повысить надежность приложения, так как TypeScript это статически типизированный язык и большинство ошибок удается обнаружить на стадии компиляции проекта.

Кроме TypeScript есть возможность использовать такие языки как Dart или JavaScript. Однако TypeScript все-таки является основным языком для Angular 2.

Для облегчения разработки был взят css фреемворк bootstrap 3. С его помощью, не затрачивая больших усилий возможно разработать приложение на основе встроенных в фреемворк компонентов. Важно заметить, что благодаря bootstrap легко создать сайт с адаптивной версткой. То есть верстка будет автоматически подстраиваться под разные размеры экранов. Поддерживаются не только настольные ПК, но и мобильные устройства.

Разработка и описание интерфейса пользователя.

Интерфейс пользователя (UI - user interface) - разновидность интерфейсов, в котором одна сторона представлена человеком, другая - устройством. Представляет собой совокупность средств и методов, при помощи которых пользователь взаимодействует с различными устройствами и аппаратурой.

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

При входе в систему пользователь должен авторизоваться или зарегистрироваться. На рис. 4.2 показана форма авторизации и регистрации пользователя.

Рис. 4.2 - Форма авторизации/регистрации пользователя

После успешной авторизации пользователь попадает в главное меню системы, изображенное на рис. 4.3. Переход к конкретному документу происходит по клику по соответствующему пункту меню.

На главное странице располагается общая информация о пользователе: аватар, информация о месте проживания, образовании, друзья и т д.

Рис. 4.3 - Главная страница

Журнал тренировок

Журнал тренировок это один из основных разделов меню. Перейдя в этот раздел рис. 4.4, пользователь может посмотреть данные о предыдущих тренировках, создать программу для бедующей тренировки или подправить существующую.

Рис. 4.4 - Основное окно раздела «Журнал тренировок»

Создать новую запись можно кликнув по кнопке «Записать», которая располагается рядом с номер дня.

После нажатия данной кнопки, будет предложено добавить упражнения.

Далее необходимо нажать на кнопку «Добавьте упражнения». После нажатия на нее откроется меню, в котором можно выбрать упражнения из стандартного списка упражнений, которые стандартно предоставляет сервис или из списка упражнений, добавленных самостоятельно.

Каталог упражнений.

В каталоге упражнений пользователь может редактировать и добавлять новые упражнения. Это необходимо для профессионалов, которые занимаются по уникальным программам и используют упражнения не известные широкому кругу лиц.

Рис. 4.5 - Скриншот раздела «Каталог упражнений»

Для добавления нового упражнения необходимо ввести его название в поле «Новое упражнение» и нажать кнопку добавить. После этого откроется дополнительное меню.



Рис. 4.6 - Добавление нового упражнения

Для того, чтобы изменить данные об упражнении достаточно щелкнуть по нужному упражнению и откроется форма.

Каталог программ

Раздел «Каталог программ» позволяет объединить несколько упражнений в тренировочную программу. Это позволяет быстрее создавать план тренировки на заданный день, так как можно просто выбрать определённую программу и упражнения на день автоматически заполнятся из выбранной программы.

Рис. 4.7 - Главное меню раздела «Каталог программ»

Для создания новой программы тренировок необходимо нажать на кнопку «Добавить новую программу» и в открывшемся окне создать наборы упражнений, сгруппированные по дням.

После создания одного или нескольких тренировочных дней программа становится доступна в «Журнале тренировок» и сформировать план тренировки на день, можно будет при помощи кнопки «Из шаблона».

Данная функциональность позволяет экономить много времени на рутинной операции заполнения журнала тренировок.

Раздел «Журнал питания» помогает планировать количество потребляемых калорий. С его помощью можно расписывать свои приемы пищи и высчитывать суммарное количество потребленных калорий за день. Кроме потребленных калорий рассчитывается сколько белков, углеводов и жиров потреблено.

Выбор дня происходить с помощью календаря.

После выбора дня откроется форма, в которой можно распланировать свой рацион на день.

4.2 Серверная часть

Разработка серверной части производилась при помощи микрофреймворка flask.

Очень интересно, что flask называют микрофреймворком. Такое название идет от того, что flask не пытается предоставить инструменты для решения всех проблем web разработки. Он предоставляет только набор самых необходимых инструментов, которые хорошо продуманы и спроектированы. Все остальное возможно подключить с помощью системы расширений, где у пользователя есть возможность выбрать самый лучший и самый подходящий для его целей инструмент из существующих.

Одним из основных понятий при разработке на flask является представление. Представление - это функция, метод или класс, который связывается с URL приложения и вызывается в тот момент, когда пользователь переходит по заданному URL. Представление занимается обработкой данных полученных от пользователя и генерацией ответа пользователю. В качестве ответа обычно выступает текст в виде HTML разметки или данные в формате JSON.

Для расширения функциональности в данном диплом проекте использовались следующие библиотеки:

- flask-classy (fork);

- sqlalchemy;

- wtforms;

- flask-wtf;

- flask-admin;

- bcrypt;

- flask-login;

- flask-mail;

- dependency-injector;

- trafaret.

Взаимодействие с базой данных

Центральное место практически в любом приложении занимает база данных и большая часть выполняемой работы связана с обработкой данных в ней.

Для общения с СУБД разработан язык SQL (Structured Query Language). Каждая из СУБД расширяет и дополняет SQL специфическими для нее конструкциями. В связи с этим может возникнуть проблема при переходе от одной СУБД к другой, так как нужно будет переписывать все запросы с использованием синтаксиса конкретной СУБД.

Для решения этой проблемы была разработана технология ORM (Object-Relational Mapping), решающая обозначенную выше проблему. Решение заключается в использовании дополнительного слоя абстракций для работы с СУБД, позволяющего писать универсальный код, который будет в дальнейшем транслировать в SQL запрос для конкретной СУБД. Таким образом используя ORM можно написать 1 раз запрос и использовать его для работы с любой СУБД.

Другая важная особенность заключается в том, что, используя ORM, программист может смотреть на базу данных как на объектно-ориентированную систему. Благодаря этому при написании кода не нужно перестраивать мышление для написания SQL запроса. Это позволяет повысить читаемость конечного кода и увеличить скорость разработки.

При разработке данного сервиса использовалась библиотека SQLAlchemy. Она является одним из самых мощных инструментов, при помощи которого можно написать запрос к СУБД любой сложности, так же важно заметить, что SQLAlchemy генерирует оптимальный по производительности SQL запрос.

Начиная работать с SQLAlchemy необходимо в первую очередь описать таблицы базы данных. Ниже представлено описание таблицы Exercises:

class Exercises(Base):

id = Column(Integer, primary_key=True)

id_muscle_group = Column(Integer, ForeignKey('muscle_group.id'))

id_user = Column(Integer, ForeignKey('user.id'))

id_measurement_unit = Column(Integer, ForeignKey('measurement_unit.id'))

name = Column(Unicode(length=200))

description = Column(UnicodeText, default='')

muscle_group = relationship('MuscleGroup')

measurement_unit = relationship('MeasurementUnit')

images = relationship('ExercisesImage')

def __str__(self):

return '<Exercises: {}>'.format(self.name)

def __repr__(self):

return '<Exercises: {}>'.format(self.name)

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

После описания всех таблиц можно приступать к написанию запросов к базе данных:

user = g.db_session.query(User).filter(User.email == email).first()

Данный запрос выполняется поиск в таблице user и отыскивает пользователя с заданным email.

По приведенным примерам видно, что обращение к базе данных при помощи ORM делает код максимально лаконичным и простым.

Регистрация и авторизация

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

Для регистрации пользователю необходимо ввести следующие данные:

- имя;

- фамилия;

- пол;

- дата рождения;

- город проживания;

- email;

- пароль.

Когда пользователь вводит все данные и нажимает на кнопку «зарегистрироваться» сервер проверяет все данные на валидность и если данные введены с ошибкой (на пример пароль недостаточно длинный или пользователь с указанным email уже зарегистрирован), то регистрация прерывается и пользователю предлагается исправить введенные данные. После того как пользователь исправит все недочеты и введет валидные данные наступает последний этап регистрации, подтверждение электронной почты. Для этого на указанную электронную почту отправляется письмо со специально сформированным URL перейдя по которому пользователь подтверждает свой адрес и его аккаунт становиться активным (без подтверждения почты пользователь не может авторизоваться в приложении).

Таким образом сервисом проверяется, что пользователь ввел правильный адрес электронной почты.

Для сервиса крайне важно безопасно хранить данные пользователя. Чтобы даже в случае утечки базы данных злоумышленники не могли получить контроль над чужими учетными записями, пароль не записывается в базу данных как есть. Сначала к нему добавляется «соль» (заранее заданная строка символов, которая затрудняет подбор пароля по радужным таблицам), а потом подсоленный пароль хэшируется и в базу записывается только хэш. Таким образом даже если базу данных воруют, злоумышленники не получают пароль и не могут войти в систему под чужой учетной записью.

Для реализации авторизации использовалось расширение Flask-Login. Данное расширение позволяет легко управлять пользовательскими сессиями во Flask. Оно обрабатывает общие задачи, такие как: вход в систему, выход из системы, запоминание сессий пользователей на длительный период. Важно заметить, что данное расширение автоматически выполняет шифрование cookies хранящихся у пользователя в браузере. Таким образом манипуляция приложением за счет изменения cookies становится невозможной.

Для работы с Flask-Login нужно сначала создать и сконфигурировать LoginManager:

gympad_login_manager = LoginManager(app)

gympad_login_manager.login_view = '/account/login/'

После этого нужно написать обработчик, который будет получать данные о пользователе по его ID.

@ gympad_login_manager.user_loader

def load_user(user_id):

"""

Callback для login_manager.user_loader.

Загружает по id информацию о пользователе из БД.

:param user_id:

:return model.user.User: объект с текущим пользователем

"""

User = DIService.User()

return g.db_session.query(User).get(user_id)

Теперь остается только защитить все страницы, доступ к которым должен иметь только авторизованный пользователь. Для этого нужно над всеми необходимыми представлениями разместить декоратор login_required. После этого, при попытке неавторизованного пользователя попасть на страницу доступ к которой может получить только авторизованный пользователь, его будет перекидывать на страницу с просьбой авторизоваться.



Рис. 4.8 - Блок-схема «процесс авторизации»

Административный интерфейс

В каждом web приложении необходим административный интерфейс, с помощью которого можно настраивать различные части приложения. В данной дипломной работе был разработан административный интерфейс для отображения и редактирования содержимого базы данных, так как практически в любом проекте база данных это сердце приложения. Там хранится вся отображаемая в приложении информация (данные о тренировках пользователей, их упражнения, их дневники и многое другое), кроме этого в БД располагается и служебная информация, на пример данные об аккаунтах пользователей.

Реализация административного интерфейса происходила при помощи расширения flask-admin. Данная библиотека позволяет создавать интерфейс управления базой данных на основании моделей.

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

Кроме управления базой данных, есть возможность добавить другую необходимую информацию, на пример данные yandex direct и т. д. Это возможно за счет специальных интерфейсов, позволяющих размещать произвольную информацию на страницах административного интерфейса.

Для административного интерфейса очень важна защита, потому что из него злоумышленных может большой ущерб сервису, на пример удалив данные о всех пользователях. Для этого была добавлена авторизация и все пользователи разбиты по ролям: администраторы и простые пользователи.

Авторизация основана на базе общей авторизации на сервисе, но она расширяется проверкой административных привилегий у пользователя.

class ProtectedModelView(sqla.ModelView):

def is_accessible(self):

"""

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

с правами амдина

"""

return current_user.is_authenticated and current_user.is_admin

class MyAdminIndexView(AdminIndexView):

@expose('/')

def index(self):

if not current_user.is_authenticated or not current_user.is_admin:

# Если пользовател...