Всем привет. Сегодня мы снова решаем задачи по веб-разработке от ИИ. Такие задачи интересны тем, что в короткий промежуток времени можно придумать интересную задачу с любыми условиями, кодом и настроить её под себя.
Сегодня у нас будет задача, где мы якобы работаем над реальным проектом и пишем какую-то функцию для него. Нам придётся разбираться в чужом коде. Я попрошу ИИ сделать проект максимально реалистичным.
Мне нравятся задачки, где ты работает с уже готовым кодом, осталось разобраться в проекте и дописать какие-то функции. А когда тебе ИИ даёт задачу на 6 пунктов, где нужно писать с нуля, ты больше чувствуешь, что тебя загрузили работой, и это уже не так расслабляет...
Начнём!!
Генерируем задачу
Он выдал нам 10 задач на выбор.
Я выберу первую задачу, мне стало интересно, что это такое. Как вообще будут мониториться эти машины и логистический хаб? Там будет реальная карта?
Писец... Он мне выдал код на React и TypeScript 😨. React я когда-то учил и что-то писал на нём, а вот TypeScript не изучал.
Я бы мог разобраться с TypeScript и вспомнить React, но мне кажется, что я и так иногда со своими задачами иногда ухожу в какие-то дебри. Мне бы подобрать аудиторию для блога, которая будет понимать просто JavaScript и мои задачи, не говоря о React.
Я попрошу его сгенерировать код на чистом JS.
У нас получилось что-то такое
Внизу панель
Приступаем к решению задачи
Наша первая задача - исправить функцию, или дописать.
Меня смущает, что здесь описывается, как это в программировании переделать. Если человек составляет ТЗ, это странно, что он показывает, какую строчку и как переделать.
Небольшая история из жизни. Реальный случай. Когда я был помоложе, я занимался фрилансом, я делал сайты из дома, но чаще всего исправлял баги и что-то дорабатывал. И один раз я встретил объявление. Автор объявления в нём показывает сайт и описывает ошибки. Что самое удивительное, он показывает конкретные участки кода и пишет, как конкретно их исправить. А потом добавляет "это хороший способ подработки для студентов". Меня это очень сильно смутило, если этот человек знает, как исправить эти строчки, почему сам не исправил? И расписал эти строчки кода, что в них исправить, достаточно подробно
Ладно, ИИ выдал ещё вот такой ответ. Здесь нет конкретных примеров из кода.
Эта панель не работает. Для каждого города выдаётся отсутствие результата.
Давайте попробуем разобраться, какой участок кода отвечает за это
Кнопка, обновляющая панель с результатами имеет id "calcCityBtn" и класс "calc-btn".
А такой ID упоминается только в одной функции.
Вот в этом участке кода и происходит выведение сообщения, что данных нет.
Но что же записывается в "result"?
Так, интересно...
Мне кажется, для реального кода здесь слишком много комментариев... В реальных проектах я не видел такого количества.
А может быть и есть такие коды в действительности. Но я с таким не сталкивался, обычно комментариев в коде очень мало.
Так, у нас есть функция заглушка, которая автоматически выводит NULL.
Нам, получается, надо реализовать фильтр. А потом из отфильтрованных записей будет рассчитана средняя загрузка.
Вот так выглядят записи.
Нужно попробовать вывести массив с данными и посмотреть, с чем мы будем работать.
Нам нужно отфильтровать записи по городу и статусу загрузки. Это поля с именами "city" и "status", а загрузка у нас обозначается, как "load".
Создаём переменную "n" для хранения длины массива, переменную "sum" для хранения суммы загрузки, а потом где-нибудь в конце мы поделим "sum" на "n" и получим среднюю загрузку.
Создаём цикл, перебираем записи и создаём условия. Если у выбранной записи "city" совпадает с "cityName" (значение из фильтра), то начинается другая проверка.
Если нет фильтра по статусу, он пропускает дальше. А также, если фильтр по статусу равен значению "status" выбранной записи.
Тогда сумма всех загруженностей "load" прибавляется к "sum". А в конце сумма делится на количество и из функции выводится средняя загрузка.
Так, уже лучше.
Но мне кажется это странным, как среднее может быть 7.7%, если у нас вот такие значения
Маленькие встречаются, но и больших много. 90%, 70%, куда это девается, и что значит коэффициент 0.086 в выводе?
Мне это не нравится. Давайте для проверки при каждой итерации цикла будем выводить значения "load" в консоль
Тут обычным взглядом даже видно, что значений, которые больше 0.1 (10%) больше. Как среднее получилось 8%?
Вот блин, я понял. Я взял n от всего массива, а надо брать от тех записей, которые мы отфильтровали.
Вот так будет
Небольшое отступление: в своих статьях я хочу, чтобы вы видели, как я пишу код, как я исправляю ошибки, как я справляюсь со сложностями и даже, как ошибаюсь. Я хочу сделать свои статьи более живыми, добавить в них что-то живое, и что-то не идеальное, что-то естественное. Я бы мог записать идеальное правильное решение, но это было бы не так интересно. Где же сложности, где же процесс поиска ошибок, а где же частичка автора? Где же частичка меня?
Я не могу вложить частичку себя в идеальные решения, которые я создавал за кадром. Я не отрицаю, что у меня бывают моменты, когда за кадром я исправляю ошибки, но чаще всего я стараюсь показывать настоящий естественный процесс разработки.
Я надеюсь, вы меня поймёте. Если я ошибаюсь, это не указывает на мою слабость. Если вы это видите, значит я позволяю вам это видеть и сам показываю для создания атмосферы естественного кода...
Продолжаем...
Теперь ещё лучше. Каким образом можно было прийти к NaN?
К NaN можно прийти, если 0 поделить на 0, а такое возможно при отсутствии цикла, то есть наши переменные останутся нулями.
Я понял. Я поменял нашу n-ку и сделал новый механизм её получения, но по прежнему продолжил использовать её в цикле. А если n стала нулём, то цикла не будет. Правильнее будет исправить это так:
Вот не знаю. Можно ли это отнести к глупым ошибкам? Неловко как-то...
Но теперь это работает
И я заметил на странице один баг.
Я ничего не делал, и наш результат исчез.
Если открыть панель разработчика, то иногда можно увидеть, как меняется наше HTML дерево. Допустим, мы открыли какой-то элемент, начали что-то смотреть, а он раз и закрылся. И элементы выделились тёмным на какое-то количество секунд.
Получается, в нашем коде происходит обновление DOM дерева. А зачем? Почему оно происходит каждые несколько секунд?
Обновлять HTML можно при помощи "innerHTML" и "outerHTML".
В нашем коде он в трёх местах, два из них наша предыдущая функция
Что за "app.innerHTML = html"?
Я заметил, что вот эти вот куски кода, которые мы смотрели, находятся в одной большой функции "renderDashboard"
И эта функция внизу обновляется каждые 15 секунд, что по сути неправильно. Такое решение замедляет работу сайта и вызывает баги, какие мы видели.
Тут даже подписано, что это костыль.
Что будет, если мы уберём это автообновление?
Всё нормально работает... Странно... Интерфейс обновляется нормально, если понажимать на кнопочки. Зачем было такое решение, непонятно.
Возможно "предыдущий разработчик" пытался исправить проблему с обновлениями страницы, сделал этот способ, потом придумал способ по лучше, но эти строки кода не стёр. Возможно...
Так, а что дальше делать?
Кстати, а наша функция №2 падала, когда у нас были значения 0 / 0. То есть она может упасть на пустом массиве. Давайте это исправим.
Будем null выводить, если у нашего массива длина 0.
"Интерфейс остаётся отзывчивым и красивым". Ну, вообще-то, у нас интерфейс и так отзывчивый и красивый. Да и вообще он у нас самый лучший 😃.
А вот пункты 1 и 2 я не понял...
Давайте искать "calculateProblemIndex()".
Что это такое? Это разве задача? Зачем подсказки вставлять??
Ладно, задача есть задача. Давайте реализовывать... И давай посмотрим, что делает эта функция.
Она задаёт класс для числа, после колонки со значениями "в пути" и "простой".
Это здесь
Вот так будет выглядеть наше значение с классом "problem-high" (высокая проблема)
Число должно закрашиваться в красный, но этого не происходит.
Надо вот так было сделать
Вот.
Но у нас все значения 10, а должны быть 30, вроде, для красного цвета.
А, прибавления очков нету, вроде.
Я не знаю, что за "lastPing", у нас такого здесь нет. Давайте посмотрим, что же выводится в массиве "truck"
В этом массиве выводятся отдельные объекты, а вывели его мы всего один раз. Это даже не массив, а просто объект. Из этого можно сделать вывод, что сама функция выполняется несколько раз...
В "truck" передаётся отдельный объект, строка.
Я понял, lastPing это свойство объекта "truck". Это, похоже, дата последнего отклика машины, которая в пути. Вот как они проверяют, работает ли система или нет.
Нужно попробовать получить разницу из той даты и текущей.
Да, выводится нормально
Это же миллисекунды или секунды?
Вот сейчас это и узнаем
Если из 18:49 (сейчас) вычесть 18:45, будет около 4 минут.
4 минуты = 240 секунд = 240000 миллисекунд. Сходится.
В 1 минуте 60 * 1000 = 60000 миллисекунд.
Если последнее время отклика равно null, прибавляем к очкам 40. Я понял, почему так. Если отклика не было, получается, с машиной совсем всё плохо, и нужно прибавить много баллов для индекса проблемы.
Так, вот. Должно нормально работать...
Вот, хорошо...
Я только что понял, что при каждой перезагрузке страницы, данные заново генерируются. Это интересно.
Так, здесь мы всё сделали
Ну всё. Задачу мы решили.
Индекс проблем рассчитывается правильно, у нас появились машины с проблемным индексом, этот индекс закрашивается в красный, если слишком большой
Фильтр работает, можно посчитать среднюю загрузку.
Подведём итоги
Сегодняшняя задачка была простой, но интересные моменты были. Мне понравились моменты, когда я находил баги до того момента, как найду их в задании.
Сегодня у нас была вот такая простенькая лёгенькая задачка, это неплохо расслабляет.
Хоть задачка была лёгкой, эту статью я пишу уже 3 часа... Что достаточно странно... Я же ещё во вкладку с ВК заходил, вроде. Но всё равно 3 часа это слишком много...
Очень хорошая задачка, чтобы расслабиться 😀... Мне, как автору, который дополнительно пишет статью, может и приятно было, но вот насчёт зрителей не знаю.
Понравилось ли вам? Пишите в комментариях