Во время моего последнего проекта в Lambda School у меня была возможность совместно работать над повторяющимся веб-приложением под названием Story Squad. Он позволяет учащимся 3–7 классов выразить свое повествование и творческие способности посредством письма и рисования на основе еженедельных глав книги.
Наша команда состояла из четырех веб-разработчиков. Нам было поручено расширить дополнительные функции в существующем проекте.
Технологии для проекта включали:
- React.js для интерфейса
- Node.js для серверной части
- PostgreSQL для базы данных
Большую часть первой недели я потратил на то, чтобы понять общий пользовательский поток и кодовую базу. После этого мы начали больше знакомиться с продуктом и с процессом, который нам нужен для работы в команде.
О Story Squad
Story Squad заставляет рассказчиков действовать, объединяя их для участия в интерактивных и захватывающих творческих задачах.
Начиная с недели (суббота - понедельник) пользователь читает небольшой рассказ. Иногда это будет глава из продолжающейся приключенческой саги.
Среда, пора нарисовать картинку и написать рассказ, относящийся к еженедельной главе. К концу дня пользователь загружает картинку для отправки; этот процесс должен занять меньше часа.
В четверг пора объединяться и соревноваться! Участники проходят процесс «сплочения». У команды Squad всего 2 иллюстрации и 2 рассказа. Каждая часть будет проверена другим.
Это приводит к «стадии распределения очков», на которой каждому члену отряда дается ровно 100 очков, основанных на их оценке того, насколько вероятно, что конкретная фигура может выиграть у других оппонентов.
В каждую вещь необходимо вложить минимум 10 баллов, а максимум, который вы можете дать своему любимому предмету, - 70 баллов.
Наконец, в пятницу пора выявить команду-победительницу, проголосовав за другой матч.
На очевидные проблемы не всегда есть очевидные ответы.
- На этапе распределения точек возникло нежелательное поведение с полями входных номеров, в которых вы могли выделить более 100 точек на каждый вход, установив для остальных точек отрицательные значения.
- База кода предоставляет входные числа, импортированные из Ant Design, позволяя значениям свойств устанавливать минимальные и максимальные значения.
- Эти настройки управляют только отдельными входами, поэтому задача заключалась в том, чтобы найти способ, чтобы все четыре входа отслеживали общее количество оставшихся баллов. Регулировка максимального и минимального значения, которое может быть потрачено на все входы, стала второй проблемой на этом этапе.
Решение проблемы с помощью встроенных математических функций JavaScript
Компонент React для системы распределения баллов состоит из отдельного состояния для каждого ввода значения ввода и общего количества оставшихся баллов. Начальное состояние для доступных точек - 100. Затем, в зависимости от текущего состояния каждого ввода, значение обновляется в соответствии с взаимодействием пользователя с полями ввода.
Исходная функция, которая использовалась в «onChange», заключалась в установке базовой математической операции, которая, по сути, вычитала общее значение всех входных данных из 100.
В этот момент возникало множество идей, когда приходило время уместить последний кусок головоломки. Отсутствует логика для адаптации глобального максимального и минимального значения для всех четырех входов. Потребовалось более глубокое погружение в рефакторинг текущей логики в сжатый пакет функций, который позже будет назван «sharePointHandler». Вспомогательная функция состоит из следующего:
1. maxValue - возвращает максимальное значение, доступное для каждого ввода.
2. pointSetter - учитывает минимальное и максимальное значение для каждого ввода и определяет, сколько баллов можно потратить на текущее поле ввода.
3. setTotalPoints - отслеживает общее количество доступных очков
Мы достаточно повозились, чтобы разработать вышеупомянутое решение, применив встроенные в JavaScript математические операции Math.max () и Math.min ().
Math.max () помогла гарантировать, что setTotalPoints не перейдет в отрицательное значение. Не менее важно и логика, заключенная в «maxValue», которая устанавливает максимальное значение 10 для остальных трех полей ввода, если текущее значение равно 70.
После этой реализации нужно было обновить onChange каждого поля ввода, чтобы зарегистрировать логику, которую предоставляет sharePointHandler.
Дорожная карта
Это было отличное погружение в процесс совместной работы в команде и объединения ваших идей в одну группу.
Химия в группе была выдающейся; Совместная работа позволила нам направить наши усилия на улучшение приложения.
Вклад моей команды был сосредоточен на дальнейшем улучшении взаимодействия с пользователем и процесса разработки.
- Создание системы в бэкэнде генерирует пользователей и представления, чтобы ускорить тестирование и улучшить интерфейс.
- Замена фиктивных данных на аватар пользователя
- Добавление модальных окон инструкций
- Применение возможности для бэкэнда, которая позволяет пользователям голосовать за разные матчи
- Стилизация интерфейса
Есть еще много чего ожидать от будущего этого приложения, в том числе:
- Завершение геймификации, позволяя установить победителей, которые будут отображаться на веб-интерфейсе
- Добавление дополнительных медиа-запросов для разных размеров экрана в CSS для адаптивного дизайна
- Улучшение соглашения об именах в веб-приложении
- Обновление некоторых потоков данных в реляционных таблицах серверной части
- Интеграция платежной системы Stipes
В заключении
Путешествие в тысячу миль начинается с одного шага
Как команда, мы сталкивались с проблемами, которые преодолевали шаг за шагом. Были моменты, когда мы чувствовали себя подавленными и немного парализованными. Мы поняли, что единственный выход - это пройти.
Большое спасибо Эмилио Рамиресу за то, что он возглавил бэкэнд и предоставил пользователям улучшения, которые сэкономили нам значительное количество времени; он настоящий инженер. А также Дальтонмиллеру и Нейту Коули за стойкость и решимость идти вперед. Наконец, Тревор Мартин, руководитель группы проекта, большое спасибо за проявленное лидерство и руководство.
Коммуникация - один из главных навыков, над которым я постоянно стремлюсь совершенствоваться. Участие в этом проекте помогло улучшить такие навыки, будь то передача абстрактных концепций коллегам или истинное понимание видения вашей заинтересованной стороны и постановка вопросов для усиления процесса принятия решений.
Это был путь, но это точно не конец. Быть частью команды, коллективно стремящейся направить усилия на достижение общей цели, дает чувство удовлетворения. Это заставляет меня совершенствоваться и принимать ухабистые поездки, потому что преодоление трудностей - это шаг вперед к светлому будущему.
