7.06.2021

4 курс, ОП "Программная инженерия"

CRM система для благотворительного фонда "AIAIN". Web-приложение для сотрудников фонда

• Языки: Typescript, Elm
• Фреймворк: React
• Ant.design библиотека компонент
• Ant.charts библотека диаграмм
• Axios запросы HTTP
• i18n для интернализации
• OpenAPIGenerator для кодогенерации
• Firebase Messaging для пуш уведомлений
• WebSocket для получения сообщений в чатах

Аннотация

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

• Создание панели администрирования пользователей системы;
• Автоматизация бизнес процесса обработки заявок на пожертвование;
• Создание чатов поддержки для связи с пользователями мобильного приложения;
• Мониторинг и занесение в систему пожертвований;
• Просмотр аналитики и многое другое;

Данная работа является частью группового проекта по разработке CRM-системы для благотворительного фонда <>, которая включает в себя также мобильное приложение для доноров и нуждающихся, а также общий сервер. При разработке Web-клиента для сотрудников фонда применялись следующие технологии: язык разработки Typescript, Elm, фреймворк - React.

Работа содержит 57 страниц, 24 рисунков, 10 таблиц, 4 листинга, 27 источников.

Описание структуры проекта

Работа находится в репозитории по адресу XX.

В корневой директории проекта находятся следующие файлы:

• nginx-master.conf, nginx.conf - конфигурации для nginx для develop и master стендов;
• swagger.json - swagger спецификация API, представленная в json формате. Используется для кодогенерации кода запросов к API;
• Dockerfile, docker-compose.yml, .dockerignore - файлы для сборки Docker образа и разворачивания контейнеров с данным образом;
• package.json, yarn.lock, elm.json - файлы с зависимостями проекта;
• prettierrc.js, .prettierignore, .eslintrc.js, eslintignore - файлы для конфигурации настройки линтеров проекта;
• .env.example - в данном файле описывается пример объявления environment переменных проекта;

Рассмотрим папки проекта:

• /.gitlab - в данной папке содержатся markdown описания шаблонов для GitLab репозитория, использовались при разработке;

• /.vscode - папка содержит базовую конфигурацию для среды разработки VisualStudioCode;

• /public - в данной папке находятся основные ассеты проекта (изображения и иконки), а также переводы элементов интерфейса;

  • /locales - в данной папке находятся json файлы перевода интерфейса на русский и английский;

• /src - папка с исходным кодом проекта;

  • /@generated - папка, в которой содержится код, сгенерированный по спецификации API с помощью OpenAPIGenerator;
  • /@lib - в данной папке содержатся компоненты, которые переиспользуются во всей системе;
    • /components - папка с UI компонентами;
    • /hooks - ReactHooks, использующиеся в проекте;
    • /utils - файлы с общими функциями, использующимися в проекте;
  • /@providers - в данной папке содержатся RBAC правила, а также конфигурация роутера;
  • /@typings - для совместимости с javascript библиотеками в этой папке хранятся файлы .d.ts, в которых присутствует необходимая типизация;
  • /components - UI компоненты, которые переиспользуются на соответвующих страницах (прим. Login, Category, ...);
  • /Elm - папка с компонентами, написанными на Elm;
  • /Home - папка с альтернативным вариантом оформления лэндинговой страницы;
  • /icons - папка для кастомных иконок;
  • /Layout - в данной папке находятся компоненты макета всего экрана: левой навигационной панели, хэдера и футтера;
  • /pages - в данной папке находятся модули страниц приложения: app, application, categories, ...;

  Файлы index.ts, App.tsx содержат изначальную конфигурацию приложения;