Всем привет. Сегодня у нас будет необычный подбор задач. При помощи нейросети я получу сгенерированную задачу, которая будет спроектирована конкретно под меня. У нас будет некоторая "система рекомендаций".
Сначала я дам нейросети своё подробное описание, опишу свои личностные качества, свои навыки в веб-разработке, свои предпочтения, а нейросеть сделает для меня рекомендации и подберёт под меня несколько задач.
Это как рекомендации контента в социальных сетях, только рекомендация задач от ИИ 😀. Не знаю, насколько сильно это похоже. Социальные сети получают информацию о пользователе по понравившимся ему постам, а наша нейросеть будет получать конкретное описание человека.
Давайте ка проверим, как это будет работать на практике
Настраиваем ИИ. Генерируем задачу
Подготовим нейросеть к тому, что у нас сегодня будет
Хорошо, он готов. Давайте начинать.
Я вот думаю, а что ему о себе написать. Написать можно бесконечно много чего, но нужно самое важное. Об этом можно у него же и спросить. Личность очень трудно описывать, это довольно сложная задача. Мне нужен план для описания моей личности.
Сегодня у нас психологический выпуск 😃
Так, он составил план и разбил на несколько частей. Давайте заполним первую часть
Вот. Пока вроде хорошо 😃
Знаете, я боялся, что мне придётся рассказать о себе много личной информации, и возможно лишней. А Гигачат задаёт вполне хорошие вопросы, которые имеют к коду прямое отношение.
Без этого плана я бы написал от балды, что-то по типу "Я человек 20-25 лет, программист, веб-разработчик. Люблю математику, учиться и т.д.". Кстати, изначально я так и писал, но потом пришёл к выводу, что нужен чёткий план. Процесс описания собственной личности достаточно сложен.
Продолжаем, смотрим 2 часть
Ну, я планирую писать только на JS, без React.
Вот, вот, 3 часть, самая важная
Ну что ж, отправляем нашу характеристику, а наш умный ИИ составит для нас рекомендации. Как ютуб 😁. Система рекомендаций 😀...
А, ой, ютуб же закрывают. Тогда ВК видео. 😄
Смотрим ответ от нейросети:
Ого, я архитектор-практик!? 😃. Не знал, не знал... Но всё же, похоже на правду...
С характеристикой соглашусь.
А вот и список рекомендаций для меня
Это классно. Но мне бы хотелось что-то лёгкое. Я не хочу проектировать все эти системы с нуля, это уже не задачка по JavaScript будет, а целое ТЗ (Техническое задание) для компании.
Ну, можно попросить ИИ, чтобы я проектировал не целый проект, а только его часть.
Я хочу выбрать задачу № 16 "Система комментирования". Очень интересно 😃
Так, допустим.
Он написал мне что-то такое, и вот подобное продолжается ниже. Он просто мне описывает, что должно быть в моём файле с кодом. А никакого конкретного кода нет. Нужно его поправить и попросить скинуть код.
Гигачат дал нам такой код. Обычная страница, где вызывается скрипт, который должен подгружать систему комментариев из другого скрипта.
JS скрипт
А, тут ещё файл с данными, не заметил его 😅.тельно наши предыдущих задач. Пришлось потратить несколько скриншотов.. О
А количество скриншотов ограничено, в одну статью на Дзене можно вставить только 100 штук.
Файл со стилями CSS я показывать не буду, там тоже много, и не факт, что стили мне понравятся, и мы не будем их перегенерировать.
А ну ка, посмотрим страницу...
Интересно. "Не удалось загрузить комментарии". Нам придётся это исправить 😄.
А, тут ещё файл с данными, не заметил его 😅 . Я по привычке пропустил его, обычно в наших задачах 3 файла: HTML, CSS, JS.
Вот, всё загружается!!
Ничего себе, Гигачат неплохо постарался.
Эх, а вот тут верно отвечает Екатерина. Нужно знать, как чинить программу изнутри, не нужно полагаться на одни только фреймворки 😃.
Так, а что это я делаю?? Читаю фейковые комментарии от нейросети?? 😀
Давайте ка начинать задачу
Начинаем решать задачу
Так, Гигачат набросал мне аж 10 задачек. Давайте решать их по мере возможностей
Так, хорошо.
Задача 1 - Улучшение валидации формы
Кстати, а эту задачу из 10 пунктов можно растянуть на несколько выпусков 😃.
Попробуем что-нибудь написать
Хорошо, работает.
Но после перезагрузки не сохраняется это сообщение. Оно не отправляется в базу. Ничего страшного в этом нет, это будет в задаче 10.
Посмотрим, что у нас с валидацией в первой задаче
Комментарии пропускаются в вот таком виде
А нам надо это исправить.
В HTML файле мы не можем исправлять форму отправки сообщений, так как она загружается через JS файл. Давайте попробуем найти, где генерируется эта форма в JS файле.
Наша форма имеет класс "comment-form"
Нам нужно, чтобы над этими полями выводились сообщения об ошибках, а для этого нам нужно создать отдельный элемент, куда будет выводиться текст.
Здесь генерируется код для формы. Сюда мы можем вставить элементы, где будут выводиться сообщения об ошибках.
И стили для сообщений
Теперь нам надо выяснить, где происходит отправка данных
Данные сохраняет эта кнопка. Самая обычная кнопка без каких-либо классов. Возможно, для формы используется событие "submit".
Это здесь
Смотрим задачу
Если у нас не заполнено поле с автором, то функция останавливается через return. То же самое можно сделать, если в поле с автором будут найдены числа или спецсимволы.
Это проверить можно через регулярные выражения. Тема очень интересная, поизучайте.
В регулярных выражениях здесь, мы проверяем наличие чисел от 0 до 9, а также всех символов рядом с ними в имени автора. Если мы такое находим, то пишем текст в поле для ошибок.
А также, в начале каждой проверки данных мы должны эти самые поля обнулять, чтобы сообщения об ошибок исчезали.
Вот, хорошо. Сообщение об ошибках выводится. Если же убрать точки, то сообщение пропадёт.
Теперь нужно сделать так, чтобы поле с текстом имело длину от 10 до 500.
Но нужно учитывать, что символ "\n" для переноса строки, тоже символ. Точнее это два символа. И надо сделать так, чтобы в проверке они не учитывались.
Только они выводятся по очереди. Это потому что "return" останавливает наш код при неудачной проверке.
Надо вместо "return" в каждой проверке сделать одну булевую переменную, которая только в конце будет вызывать "return". Это нужно, чтобы сразу несколько сообщений об ошибках отображались.
Вот, хорошо. Проверки работают
А при устранении ошибок текст спокойно отправляется
Задача 2 - Кнопка отмены в ответе на комментарии
Посмотрим, посмотрим...
Не понял, а оно всегда так было? Два "ответить"? По-моему всегда. Что-то такое я видел в начале 🤔🤨.
Так, а вот здесь код устроен странно. Сначала в ссылке написано "Ответить", потом добавляется псевдоэлемент, куда добавляется треугольник и ещё одна надпись "Ответить". Это что-то новенькое 🤣
Убираем это "чудо техники"
А я в начале на всё это быстренько посмотрел и подумал, что-то здесь не то. С отступами что-то не так? 🤣. Но я не обратил внимание, что там вообще две надписи 😂.
Так, нужно добавить отступы между кнопкой и комментарием.
Наверное, лучше будет, если этот треугольник будет перед текстом.
Воот!! Замечательно!!!
Кстати, когда нажимаешь на кнопку "ответить", у формы ответа очень красивая вертикальная черта слева. Серая пунктиром 😃. Мне нравится.
Кнопки отмены нет, что нам и требуется сделать по условию задачи.
Но как бы нам отменить вызов этой формы? Для начала нам надо узнать, как она появляется.
Есть ссылка с классом "reply-link", у неё есть дата атрибут id 2.
Форма формируется здесь.
Мы получаем id комментария, получаем HTML код формы через функцию "createForm()", а потом эту форму добавляем.
Я только что понял, что ошибся. Это была не просто форма для оправки комментариев вверху. Это была функция для создания всех форм отправки комментариев, в том числе, когда мы отвечаем.
Элемент с сообщением об ошибке имеет id, а теперь, получается, их несколько. Но ссылаются все формы именно на самый первый.
Получается вот такой баг. Косячим мы во второй форме, а сообщения приходят в первую.
Поступим так. Теперь к id "error-name", "error-comment", будет ещё добавляться и id комментария. Если форма не находится в комментарии, тогда будет обычный id.
Через дата атрибут "data-error-id", задаваемый "input" и "textarea", мы будем определять id элементов, куда мы будем выводить сообщения об ошибках.
Ну и пишем вот такое. Надеюсь, вы разберётесь. Из дата атрибутов data-errorid мы берём id сообщений об ошибке. Потом подставляем эти ID в селекторы и устанавливаем текст. Всё.
Ну вот!! Замечательно 😁!!!
Но нам по-прежнему надо добавить кнопку отмены.
Когда мы добавляем форму для ответа на комментарий, большую роль играет переменная parrentId. Она отвечает за ID комментарий, а также задаётся элементам формы.
Нам нужно создать кнопку, которая будет иметь определённый дата-атрибут с ID и будет удалять форму по нужному ID.
Оказывается, кнопка "Отправить" находится внутри функции для создания формы.
Мы будем добавлять кнопку "Отмена", только, если у нас будет "parentId". Для главной формы "parentId" нет.
Вот. Только осторожнее надо быть с этой кнопкой, она тоже может отправлять форму через "submit", нужно отключить эту функцию.
Отключаем отправку формы.
Эта форма находится в классе "replies" и имеет свой "data-parent-id".
Получаем ID и удаляем нужный класс "replies", у которого нужный ID.
Наша форма добавляется и удаляется, но после удаления не появляется вновь.
Он не вызывает форму, если есть элемент с классом "comment-form". А может надо было удалять не "replies", а "comment-form"?
Вот теперь работает
Подведём итоги
Сегодня мы решили две задачи от Гигачат, а именно:
1. Сделали валидацию формы и вывод ошибок
2. Сделали кнопку отмены для ответов на комментарии
Мне очень понравились задачи от Гигачат. И сайт выглядит довольно мило
Правда пришлось немного подправить вёрстку 😊.
Мы можем бесконечно долго продолжать решать задачи от Гигачат, которые он составил нам по системе рекомендаций. У нас ещё много вариантов задач. А также в текущей задачи ещё 8 нерешённых подзадач. В следующем выпуске мы можем взяться за пункты 3-4.
Ну а на этом всё, подписывайтесь на канал и ставьте лайки 😀 👍