Всем привет, сегодня мы снова будем решать задачи от Яндекс Алисы...
В прошлый раз мне понравилось решать задачи, с помощью ИИ можно сгенерировать довольно интересную задачу и настроить её под свои предпочтения.
Сегодня мы будем снова решать задачи на исправление багов в проекте. Алиса сгенерирует нам код, якобы это какой-то интересный проект, а мы, как будто исправляем в нём баги.
В предыдущих двух статьях я делал что-то подобное.
Давайте начинать.
Генерируем задачу
Достаточно важно написать хороший промпт. Наша Алиса может неправильно всё понять. Обычно, когда она генерирует задачи, она может сделать слишком глупые ошибки или написать подсказки к решению, что очень плохо. Я пока только тренируюсь в создании запроса для ИИ, но у меня вроде по-тихонечку получается.
Не подумайте, что у меня фантазии не хватает, и я прошу идеи для задачи у Алисы. В этом то и суть статьи, что задачи от Алисы. Получается, идеи для задачи тоже должны быть от Алисы. Но я решил сделать это всё в виде списка из 10 вариантов, потому что задача может мне не понравиться, я хочу выбрать что-то подходящее из идей, которые предложит Алиса 😀.
Из этого списка я выбираю задачу №4, галерея с лайками. Я думаю, это будет интересно.
Я эту статью переписываю уже четвёртый раз, Алиса частенько выдаёт всякие ошибки. Нужно понимать, что генерировать код и задачу для ИИ задача непростая, Алисе это сложно. Но с ИИ нужно разговаривать и уточнять. Судя по моему опыту, ИИ может справиться с задачей достаточно хорошо, но он просто может не знать как, и ему нужно дать подробную инструкцию.
Создайте? Это странно... Допустим, это первоначальное задание, которое якобы давалось нашему разработчику, который как будто бы это делал. Наша задача здесь исправить баги.
Так, пока вроде бы всё без ошибок...
Я вижу какое-то сердечко 😁. Прикольно...
Давайте проверять наш код на работоспособность (неработоспособность). Я перегенерировал задачи за всё время раз 8 примерно, Алиса может ошибаться, особенно в деле написания задачи на программирование с кодами HTML, CSS, JS, нужно учесть много факторов.
Странно... Я не уверен, что так должно быть. Почему фотографии не отображаются??
В списке багов такого нет. Наши фотографии находятся по этой ссылке
"Geoblocked". Нет, этот баг не относится к задачи. Это даже не баг, здесь просто страница заблокирована. Ладно, давайте в интернете самостоятельно найдём картинки, Алиса даёт ссылки на заблокированные ресурсы.
Картинки вроде бы должны быть определённого размера, а именно 300 на 200. Не знаю, предыдущие были такими. Будет ли это ломать код или нет, пока не знаю.
Так, картинки заменили, это выглядит классно 😃
Я проверил код, а он работает... Алиса совершает одну и ту же ошибку, генерирует задачу, но выдаёт именно рабочий код, она часто выдаёт именно рабочий код. А по условию должны быть баги.
Представляешь, Алиса, пункты должны действительно не работать 😃🤨...
Нет, этот код по прежнему работает без ошибок.
...
...
Писец, уже четвёртый раз генерирую код.
Так, вот теперь вроде бы всё работает (не работает). Как нам и нужно 😁
Даже лучше. Теперь лайки не работают. Круто 😁
Вот код
Начинаем решать задачу
Решаем задачу
Прежде чем решить эти задачи, нам нужно сделать так, чтобы у нас работали лайки.
Нажатие на кнопку лайка обрабатывается здесь.
Вот наш HTML код. Здесь код галереи, есть всё, кроме самих карточек.
Карточки генерируются в JavaScript
Таак... Наши лайки же имеют класс "like-btn", а не то, что у нас написано
Исправляем
Смотрим. Когда мы открываем страницу, у нас счётчик лайков 0
Но когда мы нажимаем на кнопку лайка, количество лайков под фотографией не меняется, но меняется в счётчике наверху.
Так ещё и неправильно меняется. 18 + 8 + 5 = 25, а не 29.
Давайте для начала исправим баг с обновлением лайков под постом. Не знаю, к какому багу это отнести, это скорее больше баг 3, количество лайков в карточке не соответствует imagesData. Алиса ошибается, к сожалению, когда пишет коды...
Вот функция, отвечающая за кнопку с лайками. Здесь зачем-то создаётся константа, а потом эта константа передаётся в функцию toggleLike.
В "toggleLike()" мы имеем такой код.
Если посмотреть в коде страницы, счётчик лайков поста имеет класс "likes-count"
А если его попытаться найти в коде, у нас будет только одно совпадение, когда наши карточки создаются. Вот и всё
В нашем коде просто не ведётся работа с этим элементом.
В нашей функции нет какой-то переменной, где хранится карточка с фотографией.
Есть какой-то "index", но он используется только для кнопки лайка
А почему бы не добавить атрибут "data-index" и для "likes-count"? Мы бы могли вручную через кнопку найти родительский элемент, а уже оттуда элемент с количеством лайков, но так, наверное, будет проще и надёжнее.
Подключаемся к элементу и задаём количество лайков. Его мы получаем из массива "imagesData", где хранится информация о картинках.
Но тогда надо переписать селектор для нашей кнопки. И вообще, таким образом подключаться к кнопке, ненадёжный способ. Пока в коде элемент с атрибутом "data-index" один, код будет работать. А если "data-index" использовать ещё где-то, будут баги. Лучше так не делать, и указать селектор более точно.
Теперь лайки обновляются, хорошо
Начнём исправлять баг 1, общий счётчик лайков
Это делается в той же функции
Это очень странная ошибка, зачем-то к счётчику лайков прибавляется количество изображений.
Так-то счётчик показывает правильно, но для этого нужно нажать на кнопку
Если же просто зайти на страницу, при перезапуске в нашем счётчике 0.
Так, когда мы запускаем страницу, вызывается функция "renderGallery()".
Нашему счётчику специально задаётся значение 0.
Я не могу, какая же тупая ошибка... Ну не получается у Алисы генерировать подобные задачи на исправление багов. Вот задачи на составление JS кода у неё получались хорошо...
Количество лайков можно просто отсюда взять, здесь функцией уже всё посчитано
Получилось...
Теперь будем исправлять иконку лайка.
Когда кнопка лайка "лайкнута", ей задаётся класс "liked".
Я смотрю в CSS, этому классу заданы вот такие свойства. Это так не работает, это картинка png, она таким образом не окрасится в нужный цвет. Ладно, а вот эта ошибка от Алисы интересная, хоть и тоже глупая 😁
Я предлагаю менять не цвет, а задавать фильтры. Почему бы сердце не сделать чёрно-белым, если оно не лайкнуто?
Ещё сделаю его чуть по ярче. И получается вот так... Неплохо...
Проверим новые карточки
Нет, они лайкаются. То есть Алиса этот баг не добавила
А прикол в том, что каждое новое добавление карточки, наш код полностью обновляет элементы с изображениями. Получается, он заново вешает им обработчик кликов.
А Алиса подумала, что новая карточка с фотографией просто добавляется к существующим, без добавления обработчика событий.
Получается, этого бага нет. Да и если подумать, для ИИ такие задачки делать не просто. Получается, ИИ нужно не глядя написать код и учесть все моменты. ИИ не запускает у себя этот код, он не видит его результаты.
Я сказал ИИ придумать задачу, написать HTML, CSS, JS код, связать их, а потом ещё и придумать специально баги для них. ИИ не человек, который может у себя этот код запустить, для ИИ, считай по памяти наугад, делать такие коды тяжело.
Давайте посмотрим баг №5.
Напрямую? Что это значит? Давайте ка попробуем...
Так, попробуем поменять через консоль количество лайков первой карточке.
Попробуем добавить новую карточку, чтобы страница обновилась
Да нет, нормально всё
Я спросил у Алисы, она отвечает это
"HasBeedLiked"
Так если Алиса так боится за этот момент, давайте добавим это свойство элементам нашего массива
Так, и хотелось бы исправить последний баг, но этот баг не из списка.
Дело в том, что Алиса делала так, чтобы картинки загружались с определённого иностранного сервиса, откуда бесконечно можно получать случайные картинки необходимого размера. А у нас этот сайт больше не работает, поэтому картинки не загружаются.
Давайте в Яндексе найдём картинку заглушку для этого случая.
Вроде бы тут надо вставлять картинки 300 на 200. А интересно, а если найти картинку больше?
Работает. Хорошо.
Только после обновления страницы, после добавления новой картинки, наши лайки сбились.
Прикол. Алиса написала нам про несуществующие баги, и забыла про настоящие 😁.
Заодно и наш "hasBeenLiked" пригодился 😁
Вот, хорошо
Подведём итоги
Мы завершили нашу задачу и исправили все баги в нашей картинной галерее
Конечно же, через Алису такие задачи генерировать не просто, она очень часто ошибается, и её приходится поправлять. Но всё равно я сегодня достаточно интересно провёл время. Не знаю, как это выглядит со стороны, но я и ошибки исправлял и блог писал.
Задачка сама по себе не сложная, но мне было интересно 😁. Решается легко и просто, при этом есть что-то приятное в её решении. Да и результат выглядит интересно (Спасибо Алисе за CSS).
Ну а если вам понравилось, подписывайтесь на канал и ставьте лайки 😁. Всем пока