Отзывы пользователей и улучшение приложения My React
Наш учебный курс по веб-разработке завершился, и многие проекты были сданы; однако это не означает, что работа над этими проектами завершена. Чем интересна разработка, так это процесс обучения длиною в жизнь и постоянное обновление и совершенствование своей работы. Итак, сегодня я решил обновить один из моих проектов React.js под названием Numberlicious.
Описание приложения
Приложение Numberlicious принимает числовой ввод пользователя и возвращает интересный факт о заданном целом числе в одной из трех категорий: год, месяц/день, число. Это приложение простое с точки зрения идеи; однако реализация требовала определенного творчества в логике программирования. Все факты генерируются из Numbers API.
Используемые инструменты
HTML, CSS, JavaScript, React.js, REST API, Git.
Целевая аудитория
Это приложение предназначено для людей, интересующихся числами, их значением, а также историей, связанной с датами. Всем, кто хочет узнать, произошло ли великое научное открытие в день их рождения, или узнать значение своего любимого числа, будет полезен Numberlicious.
Сбор отзывов пользователей
Идея улучшения моего приложения заключалась, во-первых, в том, чтобы найти 5–10 человек, которые были бы заинтересованы в участии, и протестировать пользовательский интерфейс и функциональность приложения. Во-вторых, собирать отзывы, анализировать замечания и предложения. Наконец, выберите наиболее жизнеспособные предложения и внедрите их в проект.
К счастью, мои друзья и члены семьи очень откликнулись, и я смог включить в тестовую группу 8 человек. Я попросил всех поиграть с приложением, просмотреть интерактивные элементы, а затем написать краткий отзыв с общим впечатлением и опытом, ошибками и проблемами, если таковые имеются, и предложить одну или две функции, которые могли бы улучшить пользовательский опыт с их точки зрения. .
Оценка ответа
С точки зрения общего пользовательского опыта отзывы были положительными; однако почти во всех ответах фигурируют три основных замечания.
1. 6 из 8 человек заметили ошибку в разделе месяца/дня приложения. Структура вызова API работает таким образом, что для получения правильного результата ввод должен быть передан только в определенном формате (MM/DD). Ошибка возникала, когда пользователи пытались передать ввод только в виде числа или в формате DD/MM. Вызов API по-прежнему будет возвращать информацию, и приложение будет отображать ее на странице; однако результат был неверным и относился к совершенно другому разделу базы данных API.
2. 5 человек из 8 предположили, что было бы неплохо иметь возможность посмотреть историю поиска пользователя и/или сохранить результат и иметь возможность вернуться к сохраненному списку позже.
3. Отсутствует возможность навигации по приложению с помощью клавиатуры (используя Tab).
Пришло время обновить приложение
Прежде чем добавлять новые функции, мне пришлось исправлять ошибки, начиная с самой простой — навигации с помощью клавиатуры. Первоначальная проблема заключалась в том, что пользователь не мог перемещаться по меню опций категории, нажимая Tab, приложение просто не фокусировалось на элементах меню. Решение, которое я придумал, состояло в том, чтобы просто изменить семантические элементы HTML. Первоначально я пытался использовать следующий код:
Тем не менее, я не учел, что метки радиовхода недоступны для клавиатуры, поскольку я переместил фактические поля радио за пределы экрана и использовал метки только для взаимодействия. Самым простым решением было переключить ‹input type="radio"/› на ‹button› и проблема исчезла.
Второй ошибкой, которую нужно исправить, была ошибка поля ввода месяца/дня. Это было непросто. По сути, мне пришлось придумать способ вернуть сообщение об ошибке в случае, если ввод был сделан не в правильном формате. Один из способов, которым я мог бы это сделать, — это использование регулярных выражений. Шаги для решения этой проблемы были следующими:
1. Создайте регулярное выражение, с которым сравнивается ввод, и создайте для него состояние:
dayMonthPattern: /(0[1–9]|1[0–2])\/(0[1–9]|[12]\d|3[01])/
2. Добавьте условие, которое бы проверяло формат:
Теперь каждый раз, когда поле ввода для категории месяца/дня имеет формат, отличный от ММ/ДД, появляется сообщение об ошибке, предлагающее ввести его правильно.
Еще предстоит работа
Устранив эти ошибки, я очень доволен работой приложения на данном этапе; тем не менее, еще одно обновление, которое я планирую сделать в ближайшем будущем, — добавить возможность сохранять историю поиска пользователя и просматривать ее позже. Для этой цели лучшим инструментом для его использования, по моему мнению, будет Firebase. Кроме того, мне придется построить отдельное меню для навигации по сохраненным результатам.
Заключение
Как видите, в веб-разработке всегда есть что добавить, удалить, исправить или улучшить в ваших проектах, и в этом вся прелесть. Как только ваш уровень навыков повысится, вы сможете найти новые более продвинутые решения для повышения производительности или функциональности приложения. Постоянное обучение и совершенствование — это то, что меня привлекает в программировании и помогает мне развиваться как профессионалу и как личности.
Всем, кто заинтересован в проверке текущей версии приложения Numberlicious, пожалуйста, нажмите здесь. Я был бы признателен за любые ваши комментарии и предложения.
Ваше здоровье!
