Наконец-то я достиг конца модуля Javascript! В моей жизни произошли некоторые значительные изменения, из-за которых этот модуль длился гораздо дольше, чем я ожидал.
Эти изменения включали в себя работу по 60-80 часов в неделю в течение нескольких месяцев, дежурства по выходным, а затем ночные дежурства. Работа и так была очень напряженной в течение последних нескольких лет, а в этом году она значительно усилилась. Это оставляло очень мало времени и энергии для работы над своим курсом, а также для того, чтобы уделять время своей семье, которого она заслуживает. Проработав в этой компании более 6 лет, я решила уволиться в конце июля 2022 года, так как больше не находила радости в том, что делала, и это мешало моим личным целям в жизни и карьере. Поэтому в будущем я хочу закончить учебу и заняться карьерой, которую я хочу, — разработкой программного обеспечения.
Для своего проекта Javascript Portfolio я создал веб-приложение под названием The Fish Store. Когда я учился в средней школе, у меня было несколько аквариумов с морской рыбой (оба по 90 галлонов), и я наслаждался этим хобби. Я помню, что в то время веб-сайты с информацией о рыбах и магазины были довольно примитивными по дизайну и функциональности. Вспоминая то время, я подумал, что это был бы отличный «проект по улучшению», чтобы создать доказательство концепции, которая принесла бы лучший пользовательский опыт этому сообществу/хобби.
Для этого проекта мы должны были создать API ruby on rails, который работал бы на сервере (back-end), а внешнее приложение HTML/Javascript брало бы из него информацию. В связи с таким дизайном я хотел, чтобы веб-приложение было как можно более динамичным, потому что по мере роста базы данных фонового API веб-приложение должно быть достаточно динамичным, чтобы справиться с растущей базой данных.
Я придумал дизайн в виде плитки/карточки для каждой рыбы, а также функцию фильтрации, чтобы можно было легко сортировать рыбу в определенной категории. На многих старых сайтах, которые я использовал для этого хобби, рыбы были разделены по категориям, поэтому, придерживаясь аналогичной структуры, которая, на мой взгляд, имеет смысл, я создал функцию фильтрации, которая будет отображать только плитки рыб, относящихся к данной категории.
Еще одно усовершенствование, которое я сделал по сравнению с существующими сайтами, заключается в том, что я использую видео для демонстрации рыб, а не только фотографии. Картинки иногда могут вводить в заблуждение, а видео, показывающее, как рыба двигается и выглядит, создает лучшее впечатление у пользователя. Я допускаю, что если у вас слишком много плиток/карт на одной странице и слишком много видео, это может замедлить работу сайта и потребовать от него использования большого количества ресурсов. Я представляю, что по мере развития этого сайта, если бы он использовался, разработчики ограничили бы количество плиток на одной странице и позволили бы пользователю загружать только определенное их количество за раз. Затем был бы элемент «следующая страница», который физически не направлял бы вас на новую страницу, но асинхронно загружал бы следующий набор плиток.
Я сохранил HTML-файл очень минимальным, только заголовок и «Призыв к заказу» были единственными HTML-элементами, генерируемыми HTML-файлом. Все остальное будет обрабатываться кодом Javascript.
Я определенно столкнулся с некоторыми трудностями при создании кода Javascript для динамической обработки плиток. Я совсем не расстроился из-за этих трудностей, потому что этот проект определенно помог укрепить мое понимание Javascript, так как потребовалось значительное количество отладки и перекодировки, чтобы все работало правильно.
В процессе разработки приложения мне пришлось сделать шаг назад. Первоначально я использовал один вызов Fetch для получения структуры JSON при первоначальной загрузке страницы, а затем скрывал/показывал элементы в зависимости от того, как пользователь перемещался по странице. Я понял, что это приводит к громоздкому использованию ресурсов, а также делает кодирование более беспорядочным. Например, все видео загружалось и запускалось, но затем скрывалось в фоновом режиме. Я решил, что лучше всего создавать и удалять элементы по мере того, как пользователь перемещается по приложению, что помогло мне сохранить чистоту кода.
Одна задача, в частности, вызвала у меня много вопросов. Эта задача заключалась в настройке страницы отзывов для каждой рыбы:
- Загружает новую форму отзыва в плитке
- Загружает существующие отзывы в плитке
- Позволяет выбрать вашу оценку из 5 звезд
- Асинхронно публикует и отображает только что отправленный отзыв
Разобраться с процессом создания 5-звездочного отзыва было приятно, так как это было новым и не рассматривалось на занятиях (см. мой пост на эту тему здесь. Потребовались некоторые исследования и размышления, чтобы заставить это работать правильно. Мне пришлось искать, как добавить звезду и как использовать CSS для заполнения звезды. Затем мне пришлось создать цикл для создания не одной, а пяти звезд и слушателя для каждой звезды. Это также потребовало размышлений с точки зрения функциональности, потому что если я нажму на четвертую звезду, то я хочу, чтобы звезды с первой по третью также автоматически заполнялись и сохраняли количество звезд в базе данных API. Кроме того, если пользователь случайно нажмет пять звезд, а хотел поставить четыре, и поймает эту ошибку перед отправкой отзыва, ему нужно будет найти способ, который позволит пользователю изменить количество звезд. Я был очень горд, когда добился правильного отображения и функционирования. Чтобы заставить звезды работать, мне пришлось сделать следующее:
В HTML-файл нужно добавить ссылку на Font Awesome.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Для создания звезд я использовал код Javascript.
for (let k = 1; k < 6; k++){
let starDiv = createDiv('fa fa-star', k)
element = starsDiv.appendChild(starDiv)
if (k <= review.stars){
starDiv.className = 'fa fa-star checked'
}
}
Настройте следующее в файле CSS.
.checked {
color: orange;
}
Самое сложное, с чем я столкнулся при разработке страницы Review, — это отправка нового отзыва и немедленное обновление страницы с добавленным отзывом, чтобы пользователь мог увидеть свой вклад без необходимости перезагружать веб-страницу. Сама начальная настройка была несложной, но поскольку каждая плитка работает асинхронно с другими, я столкнулся с ошибками:
- Открыть страницу обзора на одной рыбе, которую я буду называть рыбой №1.
- Открыть страницу обзора на второй рыбе, которую я назову рыбой №2.
- Отправить обзор по рыбе №1. Это создавало некоторые проблемы с целостностью данных, потому что переменные/аргументы переносились с открытия страницы обзора по рыбе №2 (последняя открытая страница) на отправку обзора по рыбе №1. Потребовались серьезные размышления и пошаговое устранение неполадок, чтобы отладить код и заставить его перезагружать правильные целевые переменные/аргументы Fish, когда пользователь имеет возможность манипулировать всеми плитками независимо друг от друга. Именно здесь значительно помогает функция console.log(), которую можно вставить, чтобы увидеть информацию о переменных/аргументах и проверить ход выполнения кода.
Я сфокусировал функциональность страницы на работе пользователя с Javascript и не стал включать в нее страницу администратора или функцию онлайн-заказа/карт. Мы делали это в прошлом на других этапах занятия, и я уверен, что в моем финальном проекте будет полноценная функциональность.
Я очень рад заключительному этапу курса и своему финальному проекту! Тем не менее, часть, посвященная Javascript, до сих пор была моей любимой из-за проблем, с которыми вы сталкиваетесь при отображении правильных данных, аспекта дизайна Javascript и возможности создать очень динамичное веб-приложение с его помощью.