Урок 3: Вайб-кодинг - Часть 1
В прошлой части, в пункте 2.1, я описываю то, как правильно составлять запрос в LLM для получения нужного результата, где мы знакомим модель с тем, что у нас есть, ставим задачу, описываем параметры, даем примеры и т.д. По факту данная структурированность и есть своего рода промт-инжинеринг.
В этой части курса, я хочу больше перейти к практике и показать, как это делается на примерах вайб-кодинга. Показывать буду на примере своего проекта, который полностью собран с помощью языковых моделей.
Рекомендую изучать и текстовую версию. Несмотря на то, что она практически не отличается от видео, это позволит вам легко копировать готовые промты и важные моменты для своих личных заметок.
Важный момент: Сразу хочу сказать, что все продемонстрированные технические действия не всегда гарантируют максимальную безопасность и высокую производительность. Если вы собираете свой большой проект с помощью LLM и не знаете кода, будьте готовы к постоянным трудностям.
В самом низу данной части я предоставлю рекомендации с дополнительными параметрами, которые стоит добавлять в ваш основной промт при генерации кода.
3.1 Верстка - HTML
Видео-версия этого урока:
Примечание: видео записывалось в live-режиме.
Начнем мы с создания визуальной части страницы.
Основная наша задача будет создать шаблон страницы в HTML, которая будет содержать:
- Шапку с меню, он же Header
- Заголовок
- Вводный текст
- Меню с содержимым страницы с якорными ссылками к нужному блоку
- 2 блока с видео
- Подвал, он же Footer
- Оптимизирована под мобильные устройства!
Разворачивать сам шаблон будем локально. Для этого будем использовать:
- Notepad ++
- DeepSeek
- Google Chrome (можно использовать любой браузер)
- Материал (контент)
Для примера возьмем 2 видео и немного вводного текста с последующих пунктов этой части курса.
Текст из вводного текста данной части:
> Урок 3: Вайбкодинг В прошлой части, в пункте 2.1, я описываю то, как правильно составлять запрос в LLM для получения нужного результата, где мы, знакомим модель с тем, что у нас есть, ставим задачу, описываем параметры, даем примеры и тд. По факту данная структурированность и есть своего рода промт-инжинеринг. В этой части курса, я хочу больше перейти к практике и показать как это делается на примерах вайбкодинга. Показывать буду на примере своего проекта, который полностью собран с помощью языковых моделей. Сразу хочу сказать, что все проделанные технические действия не всегда дают максимальную безопасность и высокую производительность. В случае если вы собираете свой большой проект с помощью LLM и не знаете кода, будьте готовы к постоянным трудностям. В самом низу данной части, я предоставлю рекомендации с дополнительными параметрами, которые стоит добавлять в ваш основной промт при генерации кода. 1. Создание страницы и вывод данных из БД 2. Создание таблицы в базе данных + редактирование существующей страницы
2 видео с последующих пунктов этой части курса:
> 1. Видео 1 - Создание страницы и вывод данных из БД (PHP/HTML) 2. Видео 2 - Редактирование существующей страницы + Создание таблицы в БД.
Пишем запрос в DeepSeek:
Знакомлю модель с тем, что нам вообще нужно сделать.
Мне надо сделать страницу сайта в HTML.
Описываю о чем вообще будет сама страница.
Сама страница сайта будет содержать курс по LLM.
Даю информацию с содержимым данной страницы.
Информация на странице должна быть вот такая: Заголовок - "ЗАГОЛОВОК" Вводный текст - "ВВОДНЫЙ_ТЕКСТ" Пункты меню которые должны быть кликабельные и перематывать при нажатии на пункт с данным видео - "ПУНКТЫ"
Указываю пути к видео в нашей папке.
Так же вот 2 ссылки на видео: "ССЫЛКА_НА_ВИДЕО_1" "ССЫЛКА_НА_ВИДЕО_2"
Указываю какие должны быть пункты меню в шапке (header) нашей страницы.
Шапка меню должна содержать вот такие вот пункты: На кофе Курс Промты Цены Контакты
Указываю какие должны быть пункты меню в подвале (footer) нашей страницы.
Подвал нашей страницы должен содержать вот такие вот пункты: На кофе Контакты
Описываю дизайн страницы. (максимально простыми словами и первое, что приходит в голову.)
Сделай старницу сайта в темных, мягких тонах, сама страница с блоками должна быть интерактивная и увлекательная, чтобы пользователю было приятно на нее смотреть.
Описываю технические моменты с разделением каждого блока в отдельную секцию с прописанными inline стилями. (Я это делаю для быстрого ориентирования в коде и удобства редактирования блоков по отдельности, а так же, чтобы избежать конфликтов в стилях между блоками, при последующих изменениях страницы, таких, как добавление новых блоков, изменения структуры, удаления и прочего. Таким образом создание страницы будет выглядеть как конструктор, где я просто добавляю, меняю местами, редактирую содержимое и тд.)
Важно! Каждый блок на странице должен быть отдельной или , а стили к каждому блоку должны быть inline внутри этого блока - это нужно для удоства редактирования, чтобы не было конфликта в стилях, а так же, чтобы я мог менять их местами.
Важно!
Я не указываю в примере, но всегда указывайте:
> Вся страница и все блоки, должны быть оптимизированы под мобильные устройства. Используй Bootstrap или Tailwind CSS.
Полный запрос:
> Мне надо сделать страницу сайта в HTML. Сама страница сайта будет содержать курс по LLM. Информация на странице должна быть вот такая: 1. Заголовок - "# Урок 3: Вайбкодинг " 2. Вводный текст - "ВВОДНЫЙ_ТЕКСТ" 3. Пункты меню которые должны быть кликабельные и перематывать при нажатии на пункт с данным видео - "2. Создание страницы и вывод данных из БД 3. Создание таблицы в базе данных + редактирование существующей страницы" Так же вот 2 ссылки на видео: "ССЫЛКА_НА_ВИДЕО_1" "ССЫЛКА_НА_ВИДЕО_2" Шапка меню должна содержать вот такие вот пункты: - На кофе - Курс - Промты - Цены - Контакты Подвал нашей страницы должен содержать вот такие вот пункты: - На кофе - Контакты Сделай страницу сайта в темных, мягких тонах, сама страница с блоками должна быть интерактивная и увлекательная, чтобы пользователю было приятно на нее смотреть. Важно! Каждый блок на странице должен быть отдельнойили , а стили к каждому блоку должны быть inline внутри этого блока - это нужно для удобства редактирования, чтобы не было конфликта в стилях, а так же, чтобы я мог менять их местами.Отправляю запрос, копирую код, сохраняю в наш файл.
Обновляю страницу в браузере и смотрю на результат.
Результат 1:
Результат 2:
Результат 3:
Результат 4:
(если вдруг вы не знаете как открыть файл в браузере, то вот инструкция для Notepad++)
1Вид
2Открыть текущий файл и выбираю браузер
Главное, чтобы файл был сохранен в нужном формате. В данном случае это HTML.
Получилось довольно хорошо. Цвета довольно приятные, расположение блоков соответствует нужному порядку. Видео отображаются и воспроизводятся, а пункты в шапке и подвале соответствуют.
Единственное, что я хочу сейчас изменить - это расположение вводного текста и блока меню с содержимым страницы.
Сейчас это довольно не удобно, а так же при заходе на страницу, меню с содержимым контентом должно бросаться в глаза, чтобы пользователю было просто и быстро с ориентироваться и перейти к нужному блоку. Поэтому вернемся в LLM и отредактируем.
Поэтому вернемся в LLM и отредактируем.
Открываю код нашего файла
Так как мы в запросе указали разделение каждого блока на отдельные секции, а стили должны быть inline внутри своего блока, то код будет выглядеть как отдельные кубики.
Каждый блок будет начинаться с комментария и <section> или <div> с прописанными внутри стилями, которые относятся только к внутреннему блоку.
Для удобства, если вы не работали с кодом, то рекомендую делать отступы между блоками, чтобы было проще ориентироваться.
Наша задача найти нужные нам блоки, скопировать и отправить в LLM с запросом на редактирование.
И тут важно редактировать не полную страницу, так как если редактировать сейчас полную страницу, то мы можем столкнуться с проблемой сокращения других частей кода и контента, а если будем указывать модели "ничего не обрезай и не сокращай", то будем тратить много времени, а так же модель может начать вносить изменения в структуру и стили.
В худшем случае, если объем кода достигнет 500-1000 строк, то DeepSeek попросту может не справляться с такими запросами. Именно поэтому мы изначально разделяли все на блоки.
(Работа с редактированием полного кода будет в следующих разделах с примерами в БД, для этого лучше использовать Gemini)
Находим нужные блоки.
(на этом скриншоте я немного отредактировал убрав отступы и переносы строк в стилях, чтобы показать нужные блоки)
Выделяю и копирую 2 наших блока, которые я хочу отредактировать.
Возвращаюсь в LLM, пишу запрос
1Описываю, что сейчас мне не нравится и что нужно сделать.
Хорошо, единственное, сейчас мне надо сделать так, чтобы вот эти 2 блока с заголовком, вводным текстом и блок с меню, находились на одной горизонтальной линии, чтобы слева был заголовок и вводный текст, а справа меню: "КОД_НАШИХ_БЛОКОВ"
2Указываю модели, что надо получить и отредактировать только 2 этих блока.
(Чтобы предотвратить получение всего кода, который вероятнее всего будет не полным, а сокращенным в других блоках или контенте.)
Дай мне код только этих 2 обновленных блоков. Ничего не обрезай и не сокращай.
Получаю результат, копирую код и заменяю старые блоки на новые.
(я так же чуть отредактировал отступы, чтобы показать изменения)
Сам код мы получили так же двумя блоками, но модель их дополнительно засунула в один блок выделенный в
, чтобы сделать горизонтальное положение - это нам не мешает.
Сохраняю файл, обновляю страницу в браузере и смотрю на результат.
Выглядит все довольно хорошо, мне нравится. Результат получили соответствующий запросу.
Но если вы смотрели внимательно, то изначально, мы допустили одну единственную ошибку и при первом запросе не указали 7 пункт "Оптимизировать под мобильные устройства."
(Можете перемотать на самый верх и посмотреть 7 пункт всей наше задачи)Смортю как сейчас выглядит наша страница на мобильном устройстве.
Что и следовало ожидать… Могу сказать, что например Модель Gemini за частую сама оптимизирует все под мобильные устройства, но все равно, всегда стоит указывать данный пункт.
Но пока мы не ушли слишком далеко, а сейчас полный объем нашей страницы со всеми блоками = 373 строчек кода с отступами, что под сильно для DeepSeek.
Возвращаюсь в DeepSeek и описываю проблема с тем, что нужно сделать.
> Хорошо, единственное, я забыл тебе вначале указать, что вся страница и все блоки, а так же меню должны быть оптимизированы под мобильные устройства. Дай мне полный код все страницы, сделай все блоки и меню оптимизированными, но главное не меняй стили, цвета, расположения блоков и тд. Дай полный код все страницы, ничего не обрезай и не сокращай: "ПОЛНЫЙ_КОД_ВСЕЙ_НАШЕЙ_СТРАНИЦЫ_НА_ДАННЫЙ_МОМЕНТ"
В примере я 2 раза пишу "Дай полный код все страницы" - это не обязательно, но можно указывать важные моменты для моделей несколько раз.
Получаю ответ от модели, так же копирую весь код, заменяю и обновляю страницу в браузере и смотрю на результат.
Видно, что сейчас страница оптимизирована под мобильные устрйства. Меню в шапке страницы теперь все блоки вмещаются, а вводный текс, блок с меню содержимого страницы идут последовательно друг за другом.
Понравился мне дизайн данной страницы, поэтому основные части сайта с курсом увидите уже в этом темном и мягком стиле.
Ну и соответственно дальше можно продолжать редактировать внутренние блоки, добавлять, удалять, добиваясь нужного вам результата.
И приведу еще пример с добавлением новых блоков
1Захожу на свой сайт с курсом и делаю скриншот блока.
2Пишу запрос в DeepSeek и добавляю скриншот.
Хорошо, теперь давай сделаем новый блок для этой страницы на примере вот этого скриншота, сами пункты в этом блоке, должны быть ссылкой на внутреннюю страницу, но сделай в стиле нашего сайта. Дай мне только код этого нового блокаГлавное указать, что сейчас нам надо "Только код этого нового блока", иначе модель начнет исходя из нашего прошлого запроса выдавать всю страницу.
3Получаю результат, копирую код, вставляю и смотрю.
В целом не плохо, не совсем похоже на скриншот, но с такими же блоками.
Ну и приведу последний пример, отредактировав этот блок.
Возвращаюсь в LLM и пишу запрос:
Хорошо, только давай сделаем так, чтобы пункты в этом блоке были не списком, а в горизонтальные блоки. Дай обновленный код этого блока.Не забываем указывать "Дай обновленный код этого блока."
Так же копирую код, обновляю наш новый блок и наблюдаю.
Проверяю как он выглядит на мобильном устройстве.
Сейчас карточки с уроками в блоки расположены горизонтально, а так же весь блок оптимизирован под мобильные устройства. В целом у нас получилось создать шаблон веб-страницы, которую можно улучшать, изменять, дополнять и развивать под нужные нам цели.
Основные моменты с этой части верстки:
- Работаем с кодом, как с конструктором.
Делить всё на блоки (<section>, <div>). Так легче редактировать и менять всё местами при наброске шаблона страницы и неумении работать с кодом.- Редактируем точечно по блокам, отправляя только нужный кусок кода с запросом на требуемые изменения.
- Все стили прописываем inline к каждому блоку. Если изначально не знаем кода - это упростит нам задачу редактирования и избежания конфликтов между блоками.
- Главные команды:
«Дай код только этого блока»«Оптимизируй под мобильные устройства»«Ничего не обрезай и не сокращай»«Каждый блок на странице должен быть отдельной <section> или <div>»«Все стили должны быть inline внутри своего блока - для удобства редактирования и редоствращения конфликтов в стилях между блоками»3.2 Создание страницы и вывод данных из БД (PHP/HTML)
Эту часть курса можно посмотреть в формате видео.
Смотреть видеоПримечание: видео записывалось в live-режиме, без пауз и монтажа.
Сейчас на моем проекте есть загрузка аудио файлов зарегистрированными пользователями. И чтобы следить за различной статистикой наблюдая за развитием проекта, я хочу создать страницу, где можно следить за количеством загружаемых аудио, вычислять сколько в среднем загружается в день с момента первой загрузки, общее количество загрузок и тд.
Начинаем мы с запроса в LLM
1Всегда для начала нужно ознакомить модель с тем, что у нас имеется.
У меня есть сайт на php.2Указываем название нужной таблицы в БД.
Так же есть база данных с таблицей "НАЗВАНИЕ_ТАБЛИЦЫ"Копирую название таблицы. В моем случае это "beats"
3Указываем название всех имеющихся переменных в названии каждого столбца данной таблицы.
Таблица содержит вот такие вот столбцы "ВСЕ_НАЗВАНИЯ_СТОЛБЦОВ_В_ДАННОЙ_ТАБЛИЦЕ"Копируем, все названия столбцов в данной таблице. Можно столбиком, через запятую, в строчку, кому как удобно.
4Описываем полностью всю задачу расписывая все до деталей. Тут можно все структурировать разбив на пункты, а можно просто описать все в 1 абзац. Зависит от объема самой задачи, в моем случае пунктов не много, поэтому опишу все в 1 абзац.
Мне надо создать страницу сайта на которой я хочу вывести статистику по общему количеству beat, а так же посчитать среднее количество загружаемых beat в сутки начиная от первой записи. Так же покажи сколько beat максиму загружено было за 1 день. Так же давай сделаем таблицу с 20 записями по последним добавленным beat. Пуска таблица будет внизу иметь кнопку "Показать еще" при нажатии на которую мы будет показывать еще 20 записей.
5Далее все зависит от требуемых параметров вашей страницы (Подключение файлов, Дизайн, Проверка авторизации и тд.). Тут если у вас есть пример уже существующей страницы, то можно использовать его как шаблон для того, чтобы модель примерно понимала,что нужно.
В моем случае такая страница есть с требуемыми техническими моментами и примерным дизайном, поэтому предоставляю ее как пример.
Для примера используй вот эту вот страницу моего сайта. Возьми основные моменты с авторизацией пользователя, а так же стили и подключение основных нужных файлов такие как Header, Footer. Пример страницы - "КОД_СТРАНИЦЫ_ПРИМЕРА"
В случае если у вас нету примера, нету дизайна, нету технических моментов и тд.
То вам следует в этом 5 пункте:
- описать требуемый дизайн (цвета, блоки, расположение и тд.)
- технические моменты с авторизацией
- то как должна выглядеть шапка и подвал данной страницы
- Дополнительные параметры
Если вы не придумали как эта страница должна выглядеть, какие требуются технические моменты и прочее. То рекомендую дать возможность модели для фантазий, а уже потом редактировать на полученном результате. А так же, можно попросить модель продумать важные моменты. (не всегда она делает хорошо)
6Указываем для модели, что нам надо получить полный код, ничего не обрезать и не сокращать, во избежание получения не полной страницы или обрезанного материала.
Дай мне полный код. Ничего не обрезай и не сокращай.Такие дополнения вы можете посмотреть на сайте с курсом в разделе промтов.
7Копируем полученный результат, обновляем файл и смотрим на результат.
Все работает, выглядит довольно хорошо для страницы со статистикой, а главное результат получился с 1 запроса.
Если не устраивает, то мы можем продолжить редактирование данной страницы в этом же чате. Просто описываем модели, что нам надо изменить (цвета, блоки, отображение информации, добавить еще вывод каких-то параметров или подсчетов и тд.). Ограничений в этом плане нету.
Главное понимать, что если вы дальше продолжаете редактировать эту страницу в этом же чате, то не забывайте добавлять в конце запроса:
> "Дай мне полный, обновленный код. Ничего не обрезай и не сокращай."Иначе можете столкнуться с проблемой, где модель будет сокращать моменты, что остаются без изменений. А так же учитывайте, что через несколько запросов, модель может потерять суть задачи или заменить названия переменных. В таких случаях я рекомендую начать промт с самого начала, но тут можно давать написанный код данной страницы, а далее описывать, что хотите изменить. Как это делать, я покажу далее в пункте 3.3.
Важное дополнение: Подключение к Базе Данных
Модели нужно сообщить, как именно ваш PHP-скрипт подключается к базе данных. Без этой информации сгенерированный код не будет работать. Есть два способа это сделать:
Способ №1:
Укажите модели, что у вас уже есть отдельный файл для подключения (например,
db_connect.phpилиconfig.php), и она должна использовать его.Подключение к базе данных у меня происходит через файл db_connect.php. Учти это при генерации кода.Способ №2:
На примере вашего существующего файла - это я показывал на примере выше, где мы объесняем модели, что из примера надо взять все основные подключаемые файлы.
Для примера используй вот эту вот страницу моего сайта. Возьми основные моменты с авторизацией пользователя, а так же стили и подключение основных нужных файлов такие как Header, Footer. Пример страницы - "КОД_СТРАНИЦЫ_ПРИМЕРА"Способ №3 (Только для локальных тестов!):
Вы можете передать данные для подключения прямо в промте. Никогда не делайте так с реальными паролями! Это крайне небезопасно.
Используй для подключения к БД вот эти данные: host - 'localhost', user - 'root', password - '', db_name - 'my_database'.Всегда используйте первый способ, ссылаясь на файл. Это более удобный и стандарт подход.
3.3 Редактирование существующей страницы + Создание таблицы в БД.
Эту часть курса также можно посмотреть в формате видео.
Смотреть видеоПримечание: видео записывалось в live-режиме, без пауз и монтажа.
Для примера приведу то, как я работаю с базой данных MySQL с редактированием и расширением существующей страницы.
Сейчас у меня есть страница админа, которая позволяет делать рассылку писем зарегистрированным пользователям.
На данный момент, на странице доступно несколько возможностей, выбрать пользователя(ей), заполнить Title, сообщение и выбрать количество пользователей, кому отправить письмо.
Сейчас мне не хватает функционала, где я смогу сразу же выбирать шаблон письма из БД и делать по нему рассылку. Так же нужно будет добавить форму для создания таких шаблонов с сохранением в БД.
Для этого я буду использовать модель Gemini 2.5, код данной страницы и базу данных mySQL. Само выполнения задачи, я хочу осуществить в 1 промт с полным функционалом, и так:
Пишем запрос в LLM
Сам промт надо разбить на части:
1Пояснение, что у нас имеется, какую функцию выполняет.
У меня есть страница сайта для отправки писем на почту зарегистрированным пользователям. Сам файл у меня в PHP.2Код нашей страницы.
"КОД_СТРАНИЦЫ"3Описываем, что нам нужно сделать расписав все до деталей! (Тут можно структурировать на пункты если задача большая. В данном случае я распишу все просто 1 абзацем. А так же мы можем указать модели, чтобы она продумала требуемые столбы в БД самостоятельно)
Я хочу добавить форму для добавления шаблонов сообщений в базу данных. Сама база данных у меня mySQL. Так же у существующей формы сообщений должна быть возможность выбора шаблона. Дай мне запрос в базу данных mySQL под хранение этих шаблонов. Продумай какие там должны быть столбы в этой таблице для наших шаблонов. Все запросы для добавления в БД и тд. Должны быть в одном файле. Дай мне полный, обновленный код. Ничего не обрезай и не сокращай. Внеси только нужные изменения, остальное оставь без изменений.
Отправляем запрос в LLM
Получаем ответ от модели. Для начала она нам описывает, что вообще планируется сделать.
Так как мы указывали, что нам надо создать таблицу в mySQL и чтобы она самостоятельно продумывала требуемые столбцы, в ее ответе мы получаем первым шагом именно создание этой таблицы в виде запроса mySQL.
> CREATE TABLE email_templates ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL, subject VARCHAR(255) NOT NULL, message TEXT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );Копирую данный запрос и вставляю в БД.
После созданной таблицы возвращаюсь к ответу Gemini и копирую предоставленный код.
Заменяю старый код на новый, сохраняю и иду проверять нашу страницу.
Добавилось новое поле с выбором шаблона. Так же ниже появилась форма для добавления шаблонов с кнопкой "Сохранить Шаблон"
Пробую добавить шаблон и нажимаю сохранить.
Получаю сообщение с успешным сохранением шаблона.
В новом поле с выбором вижу отображение добавленного шаблона.
Пробую добавить еще один шаблон и проверяю таблицу в БД.
Успех!
Все работает, получилось сделать в один запрос как и планировалось. Данный процесс можно подогнать под работу в любой базе данных, с любым кодом и функционалом.
Главное правильно расписать промт по выше указанной структуре и нужными параметрами, где мы сначала знакомим модель с тем, что у нас есть, а затем детально расписываем всю задачу. И тут не настолько важно детально указывать какие нам нужны названия столбцов и тд. Достаточно расписанных пунктов, что должно происходить, заполняться, где и как. А модель уже самостоятельно продумает требуемые переменные.
Промты:
1. Верстка для разделения внутренних блоков на отдельные секции и написание inline стилей.
> Каждый блок на странице должен быть отдельнойили , а стили к каждому блоку должны быть inline внутри этого блока - это нужно для удобства редактирования, чтобы не было конфликта в стилях, а так же, чтобы я мог менять их местами.2. Редактируем точечно, а не всё сразу.
> Дай мне код только этого обновленного блока.3. Знакомим модель с проектом (для бэкенда и БД).
> У меня есть сайт на php. Так же есть база данных с таблицей "НАЗВАНИЕ_ТАБЛИЦЫ". Таблица содержит вот такие вот столбцы: "СПИСОК_СТОЛБЦОВ"4. Используем существующий код как пример.
> Для примера используй вот эту вот страницу моего сайта. Возьми основные моменты с…, а так же стили и подключение… : [ВЕСЬ КОД СТРАНИЦЫ-ПРИМЕРА]5. Просим модель спроектировать решение в БД.
> Дай мне запрос в базу данных mySQL под хранение этих данных с новых блоков. Продумай какие там должны быть столбы в этой таблице…6. Главные команды-ограничители.
- Дай мне полный, обновленный код. - Ничего не обрезай и не сокращай. - Внеси только нужные изменения, остальное оставь без изменений.ДОПОЛНИТЕЛЬНО:
Генерация код, который взаимодействует с Базой Данных. (В этой части курса, я не использую данные дополнения и рекомендую использовать исходя из ваших требований.)
[Security]
Всегда валидируй и очищай (sanitize) пользовательский ввод. Используй безопасные методы взаимодействия с базой данных для предотвращения инъекций. Правильно экранируй весь вывод перед отображением пользователю.
[Performance]
Оптимизируй взаимодействие с данными для снижения нагрузки. Минимизируй количество запросов к базе данных (используй JOINs вместо N+1). Эффективно обрабатывай данные. Рассмотри кэширование для часто используемых результатов.
Так же хотел упомянуть свои слова из 2 части, что в этой части я разберу еще несколько моментов с LLM, а уже затем перейдем к практике, но из-за постоянных изменений в использовании ИИ, все меняется с такой скоростью, что некоторые моменты становятся не актуальны. Таким образом мной было принято решение, изложить все недочеты и изменения в последующих частях курса.
Так же перейдем к дополнительным моментам оптимизации сайта, которые повышают видимость в поисковых системах (SEO).
Тестовое задание:
Создайте страницу на подобии сервиса Taplink.
Сделайте:
- Меню - (Header)
- Форму заявки как в 1 части курса
- Ссылки на ваши соц. сети
- Блок о себе
- По фантазируйте
- Подвал - (Footer)
Сделайте интерактив и передайте свои представления идеальной веб-страницы предоставляющей вас и ваши услуги.
Для примера можно посмотреть на мою страницу сайта, что я создал на подобии по этой ссылки.
Используйте любые удобные для вас инструменты или инструменты, которые я используя в примерах этого курса.