Разработка сервиса для автоматизации процесса организации и проведения спортивных соревнований

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

Министерство транспорта Российской Федерации

Федеральное агентство железнодорожного транспорта

Федеральное государственное бюджетное образовательное учреждение

высшего образования

«Дальневосточный государственный университет путей сообщения»

Естественно-научный институт

Кафедра «Вычислительная техника и компьютерная графика»

Отчет по практике по получению профессиональных умений и опыта профессиональной деятельности

09.03.01.ПИ.11.15.933 - ПЗ

Студент 933 гр. Н. А. Сахарова

Преподаватель А. А. Холодилов

Хабаровск 2018



Содержание

• Введение
• 1. Компания «Уайт Софт»
• 2. Среды, сервисы и фреймворки для разработки
• 3. Кабинет судьи и программный комплекс в целом
• 3.1 Технические требования к комплексу
• 3.2 Требования к функционалу сервера
• 3.3 Требования к Сайту
• 3.4 Требования к Кабинету организатора
• 3.5 Требования к Кабинету судьи
• 3.6 Требования к программному комплексу
• 3.7 Технические характеристики соревнования
• 3.8 Разработка программного комплекса
• Заключение
• Список использованных источников
• Приложение А


Введение

Целью производственной практики является получение профессиональных умений и опыта профессиональной деятельности. В процессе выполнения задания по практике приобретено не только умение работать в программах и создавать различные приложения, но и умение работать по графику, строить планы на неделю вперёд, грамотно оценивать каждую стоящую перед тобой задачу. Работа проходила в команде студентов и в реальных офисах компании «Уайт Софт» [1]. За время практики приобретен опыт работы с сотрудниками компании. Также удалось познакомиться со внутренней жизнью компании.

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

- единый сервер сбора и обработки данных (Сервер);

- публичный сайт (Сайт);

- кабинет организатора (Кабинет организатора);

-ПО для АСП (Кабинет судьи);

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

Изначально производилось проектирование архитектуры программного комплекса. Затем выполнялось непосредственное написание кода. Далее разрабатывался дизайн.

Моей частью задания являлась разработка Кабинета судьи, мобильного приложения. Требовалось реализовать автоматизированный судейский пульт (АСП) на базе доступных сегодня мобильных телефонов с модулем чтения NFC меток (NFC метки раздаются участникам в момент регистрации). Спроектировано и разработано специализированное программное обеспечение (далее ПО), позволяющее считывать метки участников, регистрировать время считывания и передавать результаты на сервер по каналам сотовой связи для формирования рейтинг-таблиц. ПО для АСП также обеспечивает автономный режим работы, так как контрольные пункты замера времени (КПЗВ) могут располагаться в местах, где сотовая связь отсутствует. сайт сервер мобильный автоматизированный

Кабинет судьи должен обеспечивать:

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

- выбор активного соревнования;

- выбор дня соревнования;

- выбор КПЗВ;

- считывание NFC метки с карточки Участника;

- регистрацию события «прибытие Участника на КПЗВ»;

- регистрацию события «убытие Участника с КПЗВ»;

- просмотр списка зарегистрированных событий;

- синхронизацию данных с Сервером;

- возможность работать в автономном режиме с отложенной синхронизацией;

- работоспособность на современных смартфонах на платформах Android (не ниже 5) и/или iOS (не ниже 10);

В ходе работы было использовано множество программ. Для мобильной разработки и предварительного проектирования: Coggle Diagram для разработки диаграмм сервисов на ранних этапах проектирования, Ninja Mock для создания макетов веб и мобильного приложений. Confluence для описания вариантов использования, контрактов и функционала приложений, документирования, Jira для планирования работы на неделю, оценки времени выполнения задач и производительности выполняющих задание. И, наконец, JetBrains WebStorm для разработки мобильного приложения на React Native.

Для фронтовой разработки сайта это были те же Coggle Diagram, Ninja Mock, Confluence, Jira и Visual Code для написания сайта на React. Для бэкенда это были Coggle Diagram, Confluence, Jira, а также сервис Heroku для развертывания сервера и хранение облачной базы данных. Также JetBrains IntelIdea для написания серверной части приложения на языке программирования Java с использованием Spring. База данных реализована на PostgreSQL.

Для обмена информацией с наставниками (менторами) использовался GitHub - веб-сервис для хостинга IT-проектов и их совместной разработки. Веб-сервис основан на системе контроля версий Git [9]. Для итогового размещения кода проекта использовался Bitbacket - веб-сервис для хостинга IT-проектов и их совместной разработки, основанный на системе контроля версий Mercurial и Git.



1. Компания «Уайт Софт»

Компания ООО «Уайт Софт» с 2013 года работает в сфере информационных технологий, а именно осуществляет деятельность по проектированию, разработке, производству и внедрению программного обеспечения и информационных систем [15].

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

Клиенты компании государственные компании или бизнес со сложной внутренней структурой. «Уайт Софт» разрабатывает корпоративные системы с электронным документооборотом, сервисом оплаты, обработкой больших баз данных или автоматизацией бизнес-процессов.

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

Команда разработчиков работает быстро и слаженно. Благодаря тому, что все сотрудники находятся в одном офисе в одном городе они работают быстро и эффективно, разработчик и дизайнер могут поправить код или нарисовать экран приложения в короткие сроки [15].

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

Рабочий процесс состоит из нескольких этапов:

- Оценка проекта и предложения;

- бэклог и договор;

- планирование этапов;

- рекурсия;

- запуск;

- доработка и поддержка;

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

На данный момент компанией поддерживаются следующие языки и фреймворки и библиотеки: Java, C++, C#, Qt, PHP, Ruby, JavaScript, Objective-C, Swing, Spring (Core, Data, Cloud, Social), AngularJS, React, React-native. Базы данных: MySQL, MS SQL, PostgreSQL, Oracle. Технологии разработки: Agile, TMS, Jira. Управление кодом: GIT [9].

В компании лучшие сотрудники, эксперты в своём деле. Программисты берут награды в олимпиадах и конкурсах, проекты попадают в списки лучших, а самые оригинальные решения запатентованы. Команда разработчиков высоко держит планку [15].

Проекты разрабатываются эффективным agile-методом.

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

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

Над каждым проектом трудятся минимум 5 человек: продукт-менеджер, два дизайнера и два разработчика. Если кто-то заболел или не справляется с задачей, делают перестановку. Благодаря этому запускают проект в срок и в полном объеме, а работники не выгорают.

Компания всегда на связи. Раз в неделю-две демонстрирует промежуточные этапы, поэтому результат предсказуем. Вся отчётность, прототипы и эскизы хранятся в облаке и его всегда можно просмотреть. Если появляется проблема - компания о ней сообщит и предложит решение. Благодаря этому проекту ничего не помешает.

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

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

Компания предлагает услугу обсуждение проекта с нуля, что подходит для стартапов и тех, кто хочет запустить проект в сфере, в которой плохо ориентируется. «Уайт Софт» делает нативные, кросплатформенные и приложения на framework. Архитектурно и технически сложные, при этом удобные и интуитивно понятные. Проектирует различные приложения: от систем оплаты для энергетиков и школ, до системы онлайн записи в больницы и парикмахерские. Встраивает push-уведомления, работу с камерой и геолокацией, распознавание штрихкодов и инструментов оплаты.

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

«Уайт Софт» предлагает обсудить задачу для госкомпаний и бизнеса со сложной структурой: корпорациям, интернет-магазинам, иностранным компаниям, выходящим на российский рынок. Компания создаёт веб-сервисы, которые справляются с любой задачей: будь то учёт продуктов на складе магазина или обмен данными между филиалами компании. Внедряются полезные модули: автоматизация, надёжные высоконагруженные сервисы. Разрабатываются системы мониторинга и контроля качества, системы документооборота, системы обращения граждан, Bl-мониторинг.

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

Компания создаёт приложения, портальные решения и информационно-аналитические системы. Помогает улучшить клиентский опыт, автоматизировать и упросить бизнес-процессы. С 2013 года разработано 39 проектов. Среднее время разработки каждого проекта - 3 месяца.

Среди выполненных проектов система электронного документооборота. Выполнена автоматизация как процессов создания, обработки и движения документов (docflow), так и бизнес-процессов, не связанных с документами (workflow). Сделана работа нескольких канцелярий, особый контроль «Контрольного управления», контроль исполнения «На местах», отчёт об исполнительной дисциплине.

За последние два года команда разработала мобильные приложения для бизнеса, государства и людей. Сделано ДЭК - показания/оплата электроэнергии, Вивея - личный медицинский кабинет, Голос - подача обращений, Жи-ши - оплата госуслуг, Дашборд - постановщик задач для госучереждений [15].

Сервис «Сила» предназначен для коммуникации горожан с администрацией города. Автор инициативы предлагает администрации некую идею о том или ином улучшении. После предварительного отбора инициатива публикуется на портале голосования. Наиболее популярные проекты направляются на экспертную оценку, пройдя которую, получают шанс отправиться на реализацию.

Сервис «Голос - открытый регион» реализует быстрое обращение в органы власти. Мгновенную оценку работы участников. Сервис реализован как приложение для телефонов, Web-версия. С его помощью можно оценить дороги, ЖКХ, мэра, транспортную доступность.

Разработано несколько технологичных современных порталов и сайтов для 4х регионов.

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

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

Теперь более подробно о должностной инструкции [7].

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

Инженер-программист должен знать:

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

- основные принципы структурного программирования;

- виды программного обеспечения;

- технико-эксплуатационные характеристики, конструктивные особенности, назначение и режимы работы ЭВМ, правила технической эксплуатации;

- технологию автоматической обработки информации и кодирования информации;

- формализованные языки программирования;

- действующие стандарты, системы счислений, шифров и кодов;

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

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

- основы экономики, организации производства, труда и управления;

- основы трудового законодательства;

- правила внутреннего трудового распорядка;

- правила и нормы охраны труда.

Инженер-программист подчиняется непосредственно Генеральному директору.

Обязанности инженера-программиста:

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

- разрабатывает технологию решения задачи по всем этапам обработки информации;

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

- определяет информацию, подлежащую обработке средствами вычислительной техники, её объемы, структуру, макеты и схемы ввода, обработки, хранения и вывода, методы её контроля;

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

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

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

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

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

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

- осуществляет сопровождение внедрения программ и программных средств;

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

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

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

Инженер-программист имеет следующие права:

1. знакомиться с проектами решений руководства предприятия, касающихся его деятельности;

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

3. в пределах своей компетенции сообщать своему непосредственному руководителю о всех выявленных в процессе осуществления должностных обязанностей недостатках в деятельности предприятия (его структурных подразделениях) и вносить предложения по их устранению;

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

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

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

Инженер-программист несёт ответственность:

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

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

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

Направление, по которому осуществлялась работа во время производственной практики называлось мобильная разработка на React-native.



2. Среды, сервисы и фреймворки для разработки

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

- единый сервер сбора и обработки данных (Сервер);

- публичный сайт (Сайт);

- кабинет организатора (Кабинет организатора);

- ПО для АСП (Кабинет судьи);

Над проектом трудилась команда студентов, которая была разделена на три направления: веб-разработка, бэкенд (серверная часть приложения) и мобильное приложение. Мною создавалось мобильное приложение - Кабинет судьи.

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

Так, например, Coggle Diagram использовался для разработки диаграмм сервисов на ранних этапах проектирования, Ninja Mock для создания макетов веб и мобильного приложений. Confluence использовался всеми разработчиками программного комплекса для описания вариантов использования, контрактов и функционала приложений, документирования. Jira использовался также всеми разработчиками проекта для планирования работы на неделю, оценки времени выполнения задач и производительности выполняющих задание.

Для обмена информацией с наставниками (менторами) использовался GitHub - веб-сервис для хостинга IT-проектов и их совместной разработки. Веб-сервис основан на системе контроля версий Git [9]. Для итогового размещения кода проекта использовался Bitbacket - веб-сервис для хостинга IT-проектов и их совместной разработки, основанный на системе контроля версий Mercurial и Git.

Что касается мобильной разработки, среда в которой выполнялось задание была JetBrains WebStorm для написания мобильного приложения на React Native [11].

Для фронтовой разработки основной средой был Visual Code для написания сайта на React.

Бекендом использовался сервис Heroku для развертывания сервера и хранение облачной базы данных. Также JetBrains Intel Idea для написания серверной части приложения на языке программирования Java с использованием Spring. База данных PostgreSQL.

Более детально рассмотрим JetBrains WebStorm.

WebStorm - среда для разработки на JavaScript, которая подходит для client-side-разработки, создания приложений на Node.js и мобильных приложений на React Native.

Главное достоинство WebStorm - это удобный и умный редактор для JavaSсript, HTML и CSS, который также поддерживает TypeScript, CoffeeScript, Dart, Less, Sass и Stylus и фреймворки, например, Angular, React и Vue.js.

WebStorm, как и другие IDE на платформе IntelliJ IDEA, делает разработку проще и удобней. WebStorm обеспечивая подсветку и автодополнение кода, проверяет его на ошибки, помогает быстро навигироваться по проекту и безопасно вносить изменения с помощью рефакторингов. В WebStorm есть инструменты для отладки кода и интеграция с системами управления версиями.

WebStorm по-настоящему понимает структуру вашего проекта и код, обнаруживает возможные проблемы еще до того, как вы открыли проект в браузере, и предлагает их решение. Встроенные в IDE инструменты для тестирования помогут в разработке и сделают ее удобней и продуктивней.

Основные возможности WebStorm следующие:

- отладка client-side-, Node.js- и React Native-приложений прямо в WebStorm;

- помощь при работе с приложениями на Angular, React, Vue.js, Electron и Meteor;

- интеграция с системами управления версиями Git, GitHub, Subversion, Perforce и Mercurial;

- интеграция с системами отслеживания ошибок (ESLint, JSHint, JSLint, TSLint и Stylelint);

Live Edit позволяет мгновенно видеть результаты ваших изменений в CSS, HTML и JavaScript файлах проекта в браузере без перезагрузки страницы. Live Edit доступен в режиме отладки JavaScript и работает в браузере Google Chrome с предустановленным плагином JetBrains IDE Support.

WebStorm поддерживает современные языки, компилируемые в JavaScript, такие как TypeScript, CoffeeScript и новую версию JavaScript - ECMAScript 2017, предлагая автодополнение кода, проверку ошибок, рефакторинг и отладку.

WebStorm позволяет эффективно разрабатывать приложения на Node.js и поддерживает полноценную отладку Node.js приложений. Новое приложение можно создать, используя шаблон Node.js Express, а необходимые модули легко установить через npm, не используя командную строку.

В новой версии WebStorm 2018.2: появились дополнительные возможности:

- с помощью нового рефакторинга можно создавать React-компонент из части существующего компонента;

- можно автоматически превратить React-компонент, объявленный как класс, в функцию и обратно;

- благодаря интеграции с ng add стало проще добавлять новые зависимости в Angular-приложения;

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

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

- для запуска и отладки приложений в IDE теперь можно использовать Node.js в WSL;

- можно перезапустить только упавшие тесты с Karma, Mocha и Jest.

Рисунок 1 основной вид приложения WebStorm 2018



Стоит также упомянуть про фреймворк, на котором велась разработка мобильного приложения - React Native [11]. React Native это фреймворк для разработки кроссплатформенных приложений для iOS и Android [20]. Он появился в начале 2015 года. Разработан на основе React [1]. Не использует WebView и HTML-технологии. Нативные компоненты имеют биндинги в JS и обернуты в React.

Приложение строится из компонентов платформы -- это нативные модули, завернутые в React-компоненты. Есть кроссплатформенные: View, Text, Image, Picker, Button и так далее. Есть специфичные для iOS: TabBarIOS, ActionSheetIOS и тому подобное. Есть специфичные для Android: BackAndroid, ToolbarAndroid и так далее. Для навигации используется Navigator, это главный компонент [6], [7], [8], [10].

Рисунок 2 компоненты React Native

Фреймворк отлично работает в совокупности с Redux. Redux - это предсказуемый контейнер состояния для javascript приложений [1], [18]. Он учит думать о приложении, как о начальном состоянии, которое изменяется последовательностью действий. React отвечает только за View слой в приложении, а Redux хранение данных и работу с ними.

Redux пытается сделать изменения состояния предсказуемыми, путем введения некоторых ограничений на то, как и когда могут произойти обновления [12].

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

В Redux существует несколько основных понятий [18].

Хранилище (Store) - это объект, который соединяет локальные хранилища каждого экрана (редьюсеры) вместе [17], [18]. Хранилище берет на себя следующие задачи:

- содержит состояние приложения;

- предоставляет доступ к состоянию с помощью getState();

- предоставляет возможность обновления состояния с помощью dispatch(action);

- регистрирует слушателей (listeners) c помощью subscribe(listener).

Действия - это структуры, которые передают данные из приложения в хранилище. Они являются единственными источниками информации для хранилища. Чтобы отправить их в хранилище необходимо использовать метод store.dispatch(). Действия должны иметь поле type, которое указывает на тип исполняемого действия. Типы должны, как правило, определяться, как строковые константы. Чтобы создавать действия используются функции генераторы действий (Action Creators).

Редьюсеры. Действия (Actions) описывают тот факт, что что-то совершилось, но не определяют, как в ответ изменяется состояние (state) приложения. Это задача для редюсеров (reducers). Очень важно, чтобы редюсеры оставались чистыми функциями. Вот список того, чего никогда нельзя делать в редюсере:

- непосредственно изменять то, что пришло в аргументах функции;

- выполнять какие-либо сайд-эффекты: обращаться к API или осуществлять переход по роутам;

- вызывать не чистые функции, например Date.now() или Math.random().

Еще несколько советов, как правильно работать с редьюсерами.

- состояние приложения не изменяется, создаётся его копия;

- в default ветке возвращается предыдущая версия состояния;

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

Все, что делает combineReducers() - это генерирует функцию, которая вызывает дочерние редюсеры, передавая им в качестве одного из аргументов срез глобального состояния, который выбирается в соответствии с именем его ключа в глобальном состоянии, и затем снова собирает результаты всех вызовов в один объект.

Жизненный цикл данных в любом Redux-приложении включает в себя 4 шага. Сначала вызываетеся store.dispatch(action). Затем хранилище Redux вызывает функцию-редюсер, который была ему передана. Хранилище передаст два аргумента при вызове редюсера: текущее дерево состояния (current state tree) и действие (action). После этого главный редюсер может комбинировать результат работы нескольких редюсеров в единственное дерево состояния приложения. В итоге хранилище Redux сохраняет полное дерево состояния, которое возвращает главный редюсер. Это новое дерево является следующим состоянием приложения. Теперь UI может быть обновлен для отражения нового состояния приложения.

Это всё было про Redux, который упрощает работу с React Native, теперь более подробно о том, как запустит проект на React Native.

Чтобы создать свой первый проект на React Native, необходимо помимо WebStorm, в котором будет происходить непосредственное написание кода, поставить несколько дополнительных программ [20].

Во-первых, это Node.js. Node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API (написанный на C++), подключать другие внешние библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода. Node.js применяется преимущественно на сервере, выполняя роль веб-сервера, но есть возможность разрабатывать на Node.js и десктопные оконные приложения (при помощи NW.js, AppJS или Electron для Linux, Windows и macOS) и даже программировать микроконтроллеры (например, tessel и espruino). В основе Node.js лежит событийно-ориентированное и асинхронное (или реактивное) программирование с неблокирующим вводом/выводом.

Во-вторых, необходим Python2.

В-третьих, требуется установить JDK 8 для работы всего приложения.

В-четвертых, нужно поставить React Native Cli для того, чтобы можно было запускать приложение.

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

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

Теперь все приготовления завершены, можно создать приложение. Из командной строки выполнить команду: react-native init AwesomeProject.

После этого можно запускать приложение. При первом запуске необходимо перейти в директорию проекта и выполнить следующую команду: react-native run-android.

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

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

Рисунок 3 запуск пакетного мэнеджера

Если устройство подключено по wi-fi, то необходимо прописать ip адрес сети, к которой подключен компьютер и телефон, и порт, на котором подключен пакетный менеджер. Если устройство подключено по проводу, то необходимо перейти в директорию: C:\Users\Name\AppData\Local\Android\Sdk\platform-tools и выполнить команду: adb.exe reverse tcp:8081 tcp:8081, чтобы устройство было доступно.

При первом запуске появится окно:



Рисунок 4 первый запуск приложения на Reaact Native в эмуляторе

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



3. Кабинет судьи и программный комплекс в целом

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

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

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

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

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

На рисунке ниже представлена примерная модель данных соревнования.

Рисунок 5 Примерная модель данных Соревнования

Процесс проведения соревнования включает регистрацию судьей, прохождения участником контрольных пунктов замера времени (далее КПЗВ), при помощи автоматизированных судейских пультов (далее АСП). На каждой КПЗВ находится судья, который регистрирует время прибытия и время убытия участника.

Проходящим практику необходимо было реализовать АСП на базе доступных сегодня мобильных телефонов с модулем чтения NFC меток (NFC метки раздаются участникам в момент регистрации). Также необходимо было спроектировать и разработать специализированное программное обеспечение (далее ПО), позволяющее считывать метки участников, регистрировать время считывания и передавать результаты на сервер по каналам сотовой связи для формирования рейтинг-таблиц. ПО для АСП по техническому требованию должно было обеспечивать автономный режим работы, так-как КПЗВ, могут располагаться в местах, где сотовая связь отсутствует.

Рисунок 6 Примерная схема взаимодействия модулей

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

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

3.1 Технические требования к комплексу

Программный комплекс должен состоять из четырех модулей:

- единый сервер сбора и обработки данных (далее Сервер);

- публичный сайт (далее Сайт);

- кабинет организатора (далее Кабинет организатора);

- ПО для АСП (далее Кабинет судьи);

3.2 Требования к функционалу сервера

- ведение основных справочников;

- ведение реестра Заявок на участие;

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

- ведение реестра Соревнований;

- ведение реестра Фотографий (с группировкой по альбомам);

- ведение реестра Дней соревнований;

- ведение реестра Трасс;

- ведение реестра КПЗВ;

- ведение реестра Событий регистрации участников;

- ведение реестра Судей;

- ведение реестра Пользователей;

- ведение реестра доступных NFC меток;

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

- предоставление АПИ для Сайта;

- предоставление АПИ для Кабинета организатора;

- предоставление АПИ для Кабинета судьи;

- уведомления на электронную почту участникам;

3.3 Требования к Сайту

- публикацию основной информации о использовании комплекса;

- публикацию информации предстоящем Соревновании;

- публикацию электронной формы Заявки на участие;

- публикацию информации о проводимом Соревновании;

- список участников;

- информация о прохождении участниками КПЗВ;

- сводные таблицы результатов;

- фотографии;

- историю ранее проводимых Соревнований;

3.4 Требования к Кабинету организатора

- доступ в кабинет только для авторизованных пользователей с ролью «организатор» или «администратор»;

- cru (создание, просмотр, обновить)- Заявок на участие, с возможностью «одобрить» или «отклонить» Заявку спортсмена;

- crud (создание, просмотр, обновление, удаление) Соревнований;

- crud Участников;

- crud Фотографий (с группировкой по альбомам);

- crud Дней соревнований;

- crud Трасс;

- crud КПЗВ;

- crud Событий регистрации участников;

- crud Судей;

- crud Пользователей;

- crud доступных NFC меток;

3.5 Требования к Кабинету судьи

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

- выбор активного соревнования;

- выбор дня соревнования;

- выбор КПЗВ;

- считывание NFC метки с карточки Участника;

- регистрация события «прибытие Участника на КПЗВ»;

- регистрация события «убытие Участника с КПЗВ»;

- просмотр списка зарегистрированных событий;

- синхронизация данных с Сервером;

- возможность работать в автономном режиме с отложенной синхронизацией;

- работоспособность на современных смартфонах на платформах Android (не ниже 5) и/или iOS (не ниже 10);

3.6 Требования к программному комплексу

- гибко настраиваемым;

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



3.7 Технические характеристики соревнования

- количество участников - не менее 200

- количество судей - не менее 10

3.8 Разработка программного комплекса

Разработка программного комплекса началась с модели в Coggle Diagram. Изначально были выделены сущности, с которыми нужно было работать.

С ними можно ознакомиться в Приложении А. Затем выделены сервисы, из которых должно состоять приложение. [3], [5], [6].

Рисунок 7 выделенные сервисы проекта

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



Рисунок 8 вход, загрузка, основной экран

Рисунок 9 выбор пункта, информация об участнике, просмотр событий

На следующих макетах представлены табы об участниках, синхронизация и меню [4], [16].



Рисунок 10 макет мобильного приложения

После этого мобильным разработчиком и веб-разработчиками были написаны API контракты, то есть описаны данные, которые необходимо получить или передать, их структуру, тип. Получение данных текущего соревнования описывается в таблице 1.

Таблица 1 Получение данных текущего соревнования

Параметры	Тип	Описание
CompetitionID	Int	Номер соревнования
Date	Date	Дата соревнования
TimeBegin	Time	Время начала соревнования
TimeEnd	Time	Время окончания соревнования
CompetitionName	String	Название соревнования
DaysList	List	Список всех дней одного соревнования, состоит их объектов типа Day
ParticipantsList	List	Список участников одного соревнования, состоит их объектов типа Participant
PartisipantsNumber	Int	Число участников

В таблице 2 описывается структура данных по дню.



Таблица 2 Структура данных по дню

Параметры	Тип	Описание
CompetitionID	Int	Номер соревнования
Date	Date	Дата соревнования
TimeBegin	Time	Время начала соревнования
TimeEnd	Time	Время окончания соревнования
NumericalNumber	Int	Порядковый номер дня соревнования
DayID	Int	Номер дня
Points	Point	Пункты соревновательного дня

В таблице 3 указывается как выглядит структура данных типа Point.

Таблица 3 Пункты соревновательного дня

	Тип	Описание
CompetitionID	Int	Номер соревнования
DayID	Int	Номер дня
Name	String	Название пункта
NumericalNumber	Int	Порядковый номер дня соревнования

В таблице 4 представлен внешний вид объекта, отображающего информацию по участнику.

Таблица 4 Описание информации по участнику

Параметры	Тип	Описание
NFC	String	NFC метка участника
TShirtNumber	Int	Номер на футболке участника
Firstname	String	Имя участника
Surname	String	Фамилия участника
Level	String	Уровень участника
Vehicle	String	Тип транспорта участника

Далее представлен API контракт для авторизации судьи. В таблице 5 указаны параметры, которые необходимо передать в теле запроса при авторизации судьи.



Таблица 5 Параметры Post запроса на проверку авторизации

Параметры	Тип	Описание
Login	String	Логин судьи
Password	String	Пароль

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

Таблица 6 Тело ответа на запрос авторизации

Параметры	Тип	Описание
accessToken	String	Токен авторизации
refreshToken	String	Токен обновления
fullName	String	Полное имя судьи
judgeID	Int	Номер судьи

Следующее API необходимо для отправки события на сервер обработки результатов и описано в таблице 7.

Таблица 7 Данные при отправке события на сервер

Параметры	Тип	Описание
EventID	Int	Номер события
TypeEvent	String	Тип события
Day	Date	День события
Time	Time	Время события
PointNumber	Int	Номер пункта
TShirtNumber	Int	Номер на футболке участника

Чтобы понять, каким образом приложение должно взаимодействовать с пользователем, какие функции и в каком порядке выполнять продуманы варианты использования или use cases. Например, для первого экрана авторизации варианты использования выглядят так.

Изначально описываются действующие лица: судья, приложение. Затем пишется цель, с которой они взаимодействуют: войти в приложение. После этого указывается предусловие: вход не совершён. Далее описываются успешный и неуспешный сценарии.

Успешный сценарий:

- приложение запускается

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

- судья вводит логин и пароль;

- судья нажимает на кнопку «Войти»;

- приложение сверяет логин и пароль с теми, что на сервере;

- приложение создаёт запись в истории авторизаций;

- проиложение сохраняет логин и пароль в памяти телефона

- приложение переходит на экран инициализации (загрузки информации по текущему соревнованию);

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

Сценарий первый - нет доступа к сети. Приложение выдаёт сообщение «нет доступа к сети интернет». Результат: Судья не может войти в приложение. Приложение возвращается на шаг 2 успешного сценария.

Сценарий второй - логин или пароль неверный. Приложение выдаёт сообщение «Неверный логин или пароль». Результат: Судья не может войти в приложение. Приложение возвращается на шаг 2 успешного сценария.

Сценарий третий - истёк срок действия access token. Приложение оправляет refresh token и access token`у присваивается новый access token. Если логин и пароль введены, то проверяется, зарегистрирован ли судья на сервере. Иначе возврат на стартовый экран.

Остальные варианты использования не приводятся в целях экономии места.

Бекендом были реализованы API, с которыми взаимодействуют мобильное и веб приложения. Например, для получения информации по текущему соревнованию необходимо отправить Get-запрос на адрес: сервер_обработки_данных/competitions/current.

Далее началась разработка. Но чтобы правильно спланировать выполнение задач необходим успешный инструмент. Для данного проекта это был сервис Jira. Работа с ним осуществлялась следующим образом. На каждую неделю выполнения задания открывался спринт, на котором каждый писал себе задачи, бекенд начинал свои задачи с отметки BE, фронтенд с FE и мобильный разработчик отмечал свои задачи с ME. Каждый брал ответственность за определённую задачу на себя и оценивал время выполнения задания в зависимости от сложности. Оценка задачи производилась не по времени, а по поинтам. Один поинт равнялся примерно одному часу. То есть 5 поинтов были эквивалентны половине рабочего дня, а 10 всему рабочему дню. Оценка самого сложного задания ставилась в 20 пунктов, тут уж надо было подумать над решением основательно. Самое элементарное задание оценивалось в 1-2 пункта.

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

По процессу выполнения задачи делятся на три категории: «нужно сделать», «в процессе», «сделано». В конце недели при закрытии спринта все задачи должны быть решены, иначе это означает, что кто-то неправильно оценил свои задачи и не справляется.

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

Первый экран, с которого начинается приложение, это экран авторизации подумали бы вы. Но нет. Первый экран это сплеш скрин. Этот экран получил своё название благодаря тому, что он быстро мерцает и заметить его появление почти невозможно. Тем не менее он выполняет важные функции: проверяет, авторизован ли пользователь, загружены ли данные по соревнованию. Тем самым он решает, на какой экран перейти: авторизации, инициализации данных по соревнованию или перейти к главному экрану сканирования меток участника.

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

Рисунок 11 экран авторизации

После экрана авторизации пользователь (судья) переходит на экран инициализации - загрузки информации по текущему соревнованию с сервера соревнования. Пользователь видит индикатор загрузки и ждёт завершения скачивания данных.



Рисунок 12 экран инициализации

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

Рисунок 13 экран сканирования



Но просто так отсканировать метку участника не получится, необходимо сначала выбрать пункт, на котором находится судья.

Рисунок 14 экран выбора пункта

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



Рисунок 15 экран выбора типа события

На экране об участниках можно увидеть их количество и конкретную информацию о каждом из них.

Рисунок 16 экран просмотра участников



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

Рисунок 17 экран просмотра событий

На экране меню доступно предварительное сканирование меток. При нажатии на кнопку осуществляется переход на экран предварительное сканирование меток.



Рисунок 18 экран меню

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

Рисунок 19 экран предварительного сканирования



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

...