Разработка программного обеспечения — захватывающая отрасль. Используется везде, от беспилотных транспортных средств до исследования космоса, приложений для смартфонов, веб-сайтов и многого другого. Постоянно писать, решать проблемы и проектировать в бесчисленных областях интересно. В этой ситуации перед командой удаленных разработчиков и мной была поставлена задача проверить, настроить и внедрить базу данных судей и дел для юридического совета Human Rights First — Asylum.
Потребность в убежище ощущают многие люди со всего мира. Будь то война, жестокое обращение, неравенство, политические взгляды и многое другое. Во всем мире количество вынужденных переселенцев удвоилось с 40 миллионов в 2011 году до более 80 миллионов в 2020 году. Как вы понимаете, потребность в качественном юридическом совете для людей, ищущих убежища, имеет первостепенное значение. Однако в наш век технологий не так много ресурсов, чтобы легко найти этот юридический совет. Помимо информации из материалов своих дел, у адвокатов есть всего несколько мест, куда они могут обратиться, чтобы найти ограниченную и запутанную информацию о прошлых постановлениях судей.
Из-за нехватки ресурсов Human Rights First поручила мне и удаленной команде программистов и специалистов по данным создать веб-сайт для сбора и удобного отображения случаев. Унаследовав кодовую базу от другой группы, наше решение представляло собой сайт/программу, позволяющую выполнять одиночную и массовую загрузку данных о случаях, отображать собранные данные и визуализацию данных, а также управлять доступом пользователей к сайту.
В дальнейшем я буду подходить к этому проекту так, как если бы он был начат с нуля, а затем переходить к примерам из моей команды в качестве дополнительных разработчиков.
Начало работы над проектом
Когда мы впервые подошли к этой задаче, она казалась довольно сложной, особенно для нового разработчика вроде меня. Но, как и все программные решения, задачи можно разбить на более мелкие, более управляемые части. Но прежде чем мы действительно сможем начать, необходимо принять важные решения: какой тип системы управления данными мы будем использовать? Какие программные зависимости нам понадобятся? Какие библиотеки мы будем использовать? Какой язык программирования мы используем. Эти решения также кажутся ошеломляющими. Однако с помощью блок-схем или «диаграмм решений» эти решения и задачи кажутся намного проще выполнить. Вот первоначальная диаграмма решений, которую я разработал для нашего решения.
Теперь пришло время разбить задачи на более мелкие, более управляемые задачи. Хм 🤔, Один из способов сделать это — сначала создать пользовательские истории, давайте попробуем:
- UI/UX — как пользователь, я могу войти в панель инструментов, чтобы просматривать обращения и визуализировать их.
- Информация о UX/UI-кейсе. Как пользователь, я могу легко щелкнуть по делу, чтобы увидеть более подробную информацию о нем.
- UI/UX-Кейсы — как пользователь я могу легко просматривать детали кейса.
Теперь мы можем разбить его на более мелкие назначаемые задачи. Существуют инструменты, которые помогут вам в написании историй, создании задач и управлении их процессом. Наша команда использует доску Trello, я знаю еще одну доску kanban.
Вот несколько скриншотов историй и запланированных задач, разработанных нашей командой.
Еще одна задача, которая может быть указана для новой защиты, будет.
- Разработайте таблицу для просмотра, сортировки и фильтрации данных обращений.
Последняя полезная вещь перед кодированием — разработать черновые наброски макета, также известные как «вайрфреймы». Ниже приведены несколько каркасов, которые я разработал с помощью бесплатного онлайн-инструмента под названием Whimsical.
Просмотр и начало кодирования
Теперь мы перенесемся к существующему проекту. Как упоминалось выше, мы получили кодовую базу от предыдущей команды. Нашей основной целью для кода в его нынешнем состоянии было реализовать таблицы приложений, которые были бы удобными для пользователя, легко сортировались и фильтровались на уровне столбцов. К сожалению, у меня нет снимка экрана с таблицами приложения до того, как они были переданы моей команде, но мы рассмотрим процесс реализации таблиц с указанными выше функциями с использованием библиотеки компонентов дизайна ant.
Когда мы впервые получили код, таблицы выглядели нормально, но функция сортировки была полна программных ошибок, и вы не могли фильтровать данные в таблице. Сначала я обратился к библиотеке antD, чтобы определить компоненты таблицы, которые я хотел использовать.
На первый взгляд код показался достаточно прямолинейным. Однако я быстро понял, что код был написан в компонентах класса для управления состоянием. Поскольку существующее приложение было написано на функциональных компонентах, нам потребуется провести некоторый рефакторинг.
Одно из основных отличий компонентов класса от функциональных компонентов заключается в том, как они управляют состоянием. По определению функциональный компонент не может хранить состояние, поэтому для всех компонентов, которым требовалось, чтобы состояние было записано в компонентах класса, было общим. Однако теперь мы можем использовать обработчики состояния, такие как React useState, для управления состоянием в функциональных компонентах. Еще одна вещь, которую мы должны рассмотреть, — это то, как получить доступ к переменным состояния. В компоненте класса вы можете сделать это, используя ключевое слово [this]. Например, если вы хотите получить доступ к переменной, хранящейся в searchText, из приведенного выше кода, вы должны ввести [this.state.searchText]. В функциональном компоненте, использующем состояние через useState, вам сначала нужно будет выполнить простой оператор распространения в состоянии. Например: [const { searchText, searchedColumn } = состояние; ]. Теперь вы можете напрямую обращаться к переменным, как [searchText]. Вы можете увидеть реализацию этого в приведенном ниже коде.
Собираем все вместе
В целом, вот внешний вид приложения в изысканном стиле.
Некоторые основные функции, которые мы реализовали:
- Таблица дел и судей переведена в муравьиный дизайн с функциями сортировки, фильтрации и выбора.
- Реализовано сохранение на таблицах дел и судей.
- Развернута очередь загрузки/массовой загрузки
- Усовершенствованный и улучшенный UX/UI на всем сайте.
- Добавлены рабочие визуализации
- Реализован общий лендинг с визуализациями.
Самой большой проблемой, которую я предвижу в будущем развитии этого сайта, будет предоставление еще более подходящих визуализаций для заинтересованных сторон, а также очистка и удаление остальных компонентов пользовательского интерфейса материала.
Я высоко оценил возможность участвовать в таком впечатляющем и важном проекте. Я горжусь тем, что это будет новый инструмент для тех, кто ищет убежища в Соединенных Штатах. Было интересно продвигать себя как разработчика, используя новые навыки, внедряя новые библиотеки компонентов, рефакторинг состояния от класса к функциональным компонентам и работая как над интерфейсом, так и над интерфейсом при кодировании этого приложения.
