Когда мы впервые обратились в Lambda Labs за последние два месяца обучения, было много споров. В прошлом команды создавали приложения, чтобы помочь начинающим компаниям создавать веб-приложения для продажи своего продукта. Это не понравилось многим студентам моей группы. Тем не менее, мы были рады видеть, что все изменится для нашего опыта Lambda Labs. Для этой возможности задача была изменена. Вместо того, чтобы помогать коммерческим компаниям, мы использовали бы наши навыки, чтобы помогать некоммерческим организациям.

Когда мы встретились с Human Rights First, идея была простой. Разработайте веб-приложение, которое позволит потребителям, таким как журналисты, юристы и активисты, отслеживать случаи насилия со стороны полиции в Соединенных Штатах. Сейчас больше, чем когда-либо, такая платформа необходима для обеспечения подотчетности наших правоохранительных органов. С протестом Black Lives Matter мы видим, что эта проблема выдвигается на передний план в средствах массовой информации, которые мы потребляем. Это заявление не предназначалось для того, чтобы пристыдить полицию или представить ее в негативном свете; только для того, чтобы все было прозрачно.

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

На первом этапе производства мы сосредоточились на создании интерактивной карты, на которой были бы отмечены области в Соединенных Штатах, где были случаи насилия со стороны полиции, на основе информации, полученной от наших специалистов по данным. В рамках этой карты нам нужно было бы создать API Google Maps, чтобы сделать карту пригодной для использования, карты на основе Ant-Design для отображения данных и ссылок на сообщения Twitter и Reddit и другие компоненты.

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

Пересечение средней дороги

В настоящее время мы достигли половины пути нашего проекта. До сих пор я помогал, в основном, в области создания и запуска визуализации карты, тестирования и развертывания. Этот опыт позволил мне применить на практике множество навыков, которые я приобрел в Лямбда-школе. Когда дело доходит до тестирования, самой полезной частью является повторное изучение того, как реализовать эти модули как для внешнего, так и для внутреннего интерфейса. Как ни странно, потребовалось несколько часов с обеих сторон, чтобы даже запустить пакеты. После этого было интересно вернуться к старым проектам, над которыми я работал, и изучить тесты, которые я делал в прошлом. Это позволило мне действительно получить хорошее представление о том, чего я хотел достичь с точки зрения тестирования в проекте Labs, когда дело доходит до создания уникальных тестов. Мы протестировали кнопки и ссылки на странице согласия и все еще находимся в процессе создания тестов для API Google Maps, который мы использовали, который отображает данные полиции в Соединенных Штатах. На заднем плане мы следим за тем, чтобы все наши фиктивные данные проходили.

Когда дело дошло до тестирования карты API Карт Google, которую мы включили в наш проект, мы столкнулись с уникальной проблемой. Как мы можем проверить, что один из выводов отображает данные при нажатии, когда все выводы построены под одним и тем же компонентом «Маркер» в React. Мы все еще изо всех сил пытаемся найти решение, позволяющее сделать каждый вывод уникальным, но, по крайней мере, благодаря нашему кодированию нам удалось поразить все выводы одновременно. Конечная цель состоит в том, чтобы просто попасть в одну из множества кеглей.

Мы также столкнулись с некоторыми проблемами при развертывании. Особенно, когда дело дошло до успешного бэкенда. Было и забавно, и досадно, когда я заметил, что серверная часть уже была развернута для нас в начале проекта. Эта информация была глубоко скрыта в технических требованиях Lambda Labs. Внешний интерфейс также вызвал проблемы с использованием Amazon Web Services. Нам удалось как можно лучше ориентироваться в сервисе, но мы пришли к остановке, которая потребовала от нас доступа администратора к GitHub. В конечном счете, нашему руководителю группы пришлось работать с другими администраторами Lambda, чтобы это произошло и помочь настроить и запустить наш интерфейс.

Подведение итогов

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

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

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