dmitri2205 / parkon

ParkOn

ссылка на тестовую версию

Проект выпускной практики на курсах Frontend разработки на портале Geekbrains от Mail.ru Group.

Проект представляет собой Progressive Web App-приложение написаннное на React.js
На репозитории выложена production сборка в целях защиты интелектуальной собственности разработчиков и продуктоунера команды ParkOn.Мы планируем поддерживать и развивать проект после его выхода на рынок,а так же развивать и улучшать функционал по мере увеличения колличества пользователей.
Development-сборка доступна только по индивидуальному запросу.

Для проверки функционала приложения необходимо запустить тестовый сервер командой npm run dev,предварительно запустив OpenServer+MongoDB и сборку разработчика frontend части.

Все права интелектуальной собственности на код сервера принадлежат Абзалу Танкибаеву.
Backend-разработчик:Абзал Танкибаев
Сборка тестового сервера
Резюме backend-разработчика

Репозиторий backend-разработчика

Контакты

Продуктоунер:Илья Литвинов

На данный момент приложение находится в тестовом режиме.На момент презентации продукта нами был арендован виртуальный VDS сервер на хостинге firstvds.ru c OVZ-виртуализацией и Ubuntu 18.4 arm64.
На 17.07.2020 аренда сервера закончена.

Основные возможности приложения:

• Возможность регистрации по СМС(Временно недоступно в тестовом режиме)
• Возможность регистрации по почте (Требуется тестовый сервер+development-сборка)
• Вход по почте или номеру телефона (Требуется тестовый сервер+development-сборка)
• Отображение точек парковок на Яндекс.Картах
• Возможность построения маршрута от текущей позиции пользователя
• Возможность перехода на экран трансляции конкретной зоны парковки(На данный момент имеется только одна камера).
• Отображение колличества свободных мест(Тестовый ручной режим.Камера и сервер нейронной сети работают в связке. На 17.07.2020 камера и сервер ИНС отключены)
• Возможность отправки письма на email поддержки(Требуется тестовый сервер+development-сборка)
• Возможность сохранения домашнего адреса для последующего использования на карте(Тестовый режим)

(!) Проект выполнен по MVP

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

Структура приложения:






Навигация между основными и дополнительными модулями осуществляется посредством изменения состояния компонента App.jsx и его ближайших дочерних компонентов(Changeauto\Changereg\MainScreen\MapModule\Stream\Training\Welcome*.jsx).




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



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

<div className="myDiv" style={{this.props.visible ? {display:'block'}:{display:'none'} }}>
Некоторые из главных экранов(далее "Компоненты")имеют дочерние компоненты,такие как:

Changereg => EmailRegistration\PhoneRegistration
Changeauto => EmailValidation\PhoneValidation
MapModule => About\Feedback\Personal\Personalroom



Дочерние компоненты написаны на основе классов, и имеют независимую логику и разметку HTML/CSS.

Определение местоположения ползователя происходит посредством Yandex Maps JS API. Так же исползован модуль react-yandex-maps

С помощью такой структуры приложения нам удалось отказаться от использования модуля react-router в продакшн сборке,а так же улучшить стабильность и быстродействие приложения.Стили и адаптив подключены к главному компоненту App.jsx.Так же по необходимости используются инлайн-стили для конкретных элементов.
Использование React-Redux не предусмотренно и не имеет смысла.Все необходимые данные хранятся в LocalStorage браузера/PWA и являются строками.

пример запросов REST API написаный нашим backend-разработчиком


Зависимости:

Dependencies

• @babel/polyfill:7.8.7
• axios:0.19.2
• jsmpeg-player:3.0.3
• react:16.13.1
• react-dom:16.13.1
• react-yandex-maps:4.3.0



DevDependencies

• @babel/core:7.9.0
• @babel/plugin-proposal-class-properties:7.8.3
• @babel/preset-env":7.9.5
• @babel/preset-react:7.9.4
• babel:6.23.0
• babel-loader:8.1.0
• css-loader:3.5.2
• file-loader: 6.0.0
• prop-types: 15.7.2
• style-loader:1.1.3
• webpack:4.42.1
• webpack-cli:3.3.11
• webpack-dev-server:3.11.0

###23.09.2020

Добавлен экран краудфайндинга и мелкие доработки