Вайбкодинг с нуля до профессии: полный курс для начинающих

Полный практический курс по профессии вайбкодера — от самых основ программирования до уверенной работы с AI-инструментами, создания портфолио и поиска первой работы. Курс объясняет все термины простым языком, содержит реальные кейсы, практические задания и глоссарий в каждой главе. Подходит для тех, кто начинает с абсолютного нуля и хочет быстро войти в профессию.

Что такое вайбкодинг и почему это профессия будущего

Что такое вайбкодинг и почему это профессия будущего

Представьте: вы садитесь за компьютер, описываете словами приложение, которое хотите создать, — и через несколько минут перед вами работающий прототип. Без заучивания синтаксиса, без многочасового поиска ошибок в строках кода, без диплома программиста. Именно так выглядит вайбкодинг — и именно поэтому в 2025 году он стал словом года по версии Collins Dictionary.

Откуда взялся термин и что он означает

Вайбкодинг (от английского vibe coding) — это подход к созданию программного обеспечения, при котором человек описывает желаемый результат на обычном языке, а искусственный интеллект генерирует работающий код. Вместо того чтобы писать каждую строку вручную, вы управляете направлением, проверяете результат и корректируете его через диалог с ИИ.

Термин придумал Андрей Карпатий (Andrej Karpathy) — один из основателей OpenAI и бывший директор по искусственному интеллекту в Tesla. В феврале 2025 года он написал в своём посте:

«There's a new kind of coding I call "vibe coding", where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.»

reymer.ai

Карпатий описал процесс так: вы просто «вайбите» с кодом — принимаете то, что предлагает ИИ, корректируете направление голосом или текстом, не вникая в детали реализации. Слово «вайб» здесь означает именно это: правильное ощущение, интуитивное понимание того, куда движется продукт, без необходимости контролировать каждую техническую деталь.

Важно понять с самого начала: вайбкодинг — это не магия и не обман. Это новый способ взаимодействия с инструментами разработки, где ваша главная ценность — умение ясно мыслить, формулировать задачи и оценивать результат.

Чем вайбкодинг отличается от обычного программирования

Чтобы понять разницу, представьте строительство дома. Традиционный программист — это каменщик, который сам кладёт каждый кирпич, знает состав раствора и умеет читать строительные чертежи. Вайбкодер — это архитектор и прораб одновременно: он описывает, каким должен быть дом, контролирует качество работы и принимает ключевые решения, но физически кирпичи кладёт бригада (в нашем случае — ИИ).

Аспект Традиционное программирование Вайбкодинг
Главный навык Знание синтаксиса языка Умение формулировать задачи
Скорость старта Месяцы обучения Дни или недели
Скорость создания MVP Недели или месяцы Часы или дни
Контроль над кодом Полный, построчный Архитектурный, на уровне логики
Порог входа Высокий Значительно ниже
Роль разработчика Исполнитель + проектировщик Проектировщик + куратор

MVP (Minimum Viable Product, минимально жизнеспособный продукт) — это самая простая версия продукта, которая уже решает основную задачу пользователя. Например, если вы делаете приложение для записи к врачу, MVP — это форма записи и уведомление. Всё остальное (личный кабинет, история посещений, рейтинги врачей) — это уже следующие версии.

Это не означает, что вайбкодер вообще не понимает, как работает код. Наоборот — понимание основ программирования делает вайбкодера в разы эффективнее. Именно поэтому этот курс начинается с основ и постепенно ведёт вас к профессиональному уровню.

Почему вайбкодинг взлетел именно сейчас

Ещё пять лет назад идея «объяснить компьютеру задачу словами» звучала как научная фантастика. Сегодня это реальность по нескольким причинам.

Во-первых, языковые модели (Large Language Models, LLM) — это тип искусственного интеллекта, обученный на огромных массивах текста, включая миллиарды строк кода. Они научились не просто копировать код, но понимать намерения и генерировать решения под конкретную задачу.

Во-вторых, появились специализированные инструменты, которые встраивают ИИ прямо в рабочий процесс разработчика: Cursor, GitHub Copilot, Bolt.new, Lovable и другие. Они позволяют не просто получить ответ в чате, а работать с кодом в реальном времени.

В-третьих, сформировалась культура быстрого прототипирования. Стартапы и компании поняли: лучше за день создать работающий черновик и проверить идею на реальных пользователях, чем три месяца писать «идеальный» код, который никому не нужен.

По данным reymer.ai, к 2026 году вайбкодинг стал полноценным мейнстримом: миллионы людей без технического образования создают приложения, лендинги и прототипы с помощью ИИ.

Кто такой вайбкодер и что он умеет

Вайбкодер — это специалист на пересечении нескольких ролей. Он немного продакт-менеджер (понимает, что нужно пользователю), немного дизайнер (чувствует, как должен выглядеть продукт), немного разработчик (понимает, как работает код) и немного промпт-инженер (умеет правильно ставить задачи ИИ).

Промпт-инженерия (prompt engineering) — это искусство составлять запросы к ИИ так, чтобы получать максимально точные и полезные результаты. Промпт — это сам запрос, инструкция для ИИ. Плохой промпт: «сделай сайт». Хороший промпт: «создай лендинг для онлайн-школы йоги, тёмная тема, три секции — преимущества, расписание, форма записи, адаптивная вёрстка для мобильных».

Вот что умеет профессиональный вайбкодер:

  • Быстро превращать идею в работающий прототип — за часы, а не недели
  • Грамотно ставить задачи ИИ-инструментам и итерировать результат
  • Понимать код на уровне, достаточном для оценки качества и поиска проблем
  • Работать с API (программными интерфейсами — способами, которыми разные программы общаются друг с другом)
  • Деплоить продукты — то есть публиковать их в интернете так, чтобы ими могли пользоваться реальные люди
  • Понимать потребности бизнеса и переводить их в технические задачи

Для кого эта профессия

Вайбкодинг открывает двери в разработку для людей, которые раньше считали программирование недоступным. Вот кто уже использует этот подход:

Предприниматели создают MVP своих стартапов за часы вместо того, чтобы тратить месяцы и сотни тысяч рублей на найм разработчиков. Один человек с ноутбуком может проверить бизнес-гипотезу за выходные.

Дизайнеры превращают свои макеты в интерактивные прототипы без помощи разработчика. Вместо статичных картинок — живые демо, которые можно показать клиенту.

Маркетологи создают лендинги, калькуляторы и интерактивные инструменты без зависимости от перегруженной команды разработки.

Продакт-менеджеры (специалисты, которые управляют развитием продукта) делают работающие прототипы для обсуждения с командой вместо статичных презентаций.

Разработчики используют вайбкодинг для ускорения рутинных задач — написания тестов, документации, шаблонного кода.

Реальный кейс: от идеи до продукта за один вечер

Дмитрий — менеджер по продажам в небольшой компании. Он заметил, что его коллеги каждый день тратят по 30 минут на составление отчётов в Excel: копируют данные из CRM, считают конверсию, форматируют таблицы. Дмитрий не умел программировать, но знал о вайбкодинге.

Он открыл Bolt.new — инструмент, который работает прямо в браузере — и написал: «Создай веб-приложение, которое принимает CSV-файл с данными о сделках (колонки: дата, менеджер, сумма, статус), считает конверсию по каждому менеджеру и показывает красивую таблицу с итогами». Через 20 минут итераций у него был работающий инструмент. Коллеги начали пользоваться им на следующий день.

CRM (Customer Relationship Management) — система управления отношениями с клиентами, программа для учёта сделок, контактов и продаж.

CSV (Comma-Separated Values) — простой формат файла, где данные разделены запятыми. Его понимают Excel, Google Sheets и большинство программ для работы с данными.

Этот кейс показывает главное: вайбкодинг — это не про то, чтобы заменить программистов. Это про то, чтобы дать возможность людям с хорошими идеями воплощать их самостоятельно.

Ограничения, о которых нужно знать с самого начала

Честный разговор о вайбкодинге невозможен без разговора об ограничениях. ИИ генерирует «работающий», но не всегда «чистый» код. Для прототипа и MVP это приемлемо. Для крупной системы, которой пользуются тысячи людей, потребуется участие опытного разработчика.

Вайбкодинг плохо подходит для систем с высокими требованиями к безопасности: платёжные системы, медицинские данные, финансовые транзакции. Здесь ИИ-генерированный код нужно тщательно проверять.

Наконец, как отмечают практики на diffnotes.tech, вайбкодинг-проекты могут столкнуться с «ловушкой трёх часов» — моментом, когда каждый следующий фикс рождает два новых бага. Именно поэтому важно с самого начала учиться правильным практикам: работать с Git (системой контроля версий), писать чёткие промпты и тестировать каждое изменение.

Всему этому вы научитесь в этом курсе — шаг за шагом, от основ до профессионального уровня.

Глоссарий главы

Вайбкодинг (vibe coding) — подход к разработке программного обеспечения, при котором человек описывает задачу на естественном языке, а ИИ генерирует код.

ИИ (искусственный интеллект) — компьютерные системы, способные выполнять задачи, которые обычно требуют человеческого интеллекта: понимать текст, генерировать код, распознавать образы.

LLM (Large Language Model, большая языковая модель) — тип ИИ, обученный на огромных массивах текста и кода, способный понимать и генерировать текст на человеческом уровне.

Промпт (prompt) — запрос или инструкция, которую вы даёте ИИ. От качества промпта напрямую зависит качество результата.

Промпт-инженерия (prompt engineering) — навык составления эффективных запросов к ИИ для получения точных и полезных результатов.

MVP (Minimum Viable Product) — минимально жизнеспособный продукт; самая простая версия продукта, которая уже решает основную задачу пользователя.

API (Application Programming Interface) — программный интерфейс; способ, которым разные программы общаются и обмениваются данными друг с другом.

Деплой (deploy) — процесс публикации готового приложения в интернете так, чтобы им могли пользоваться реальные люди.

CRM (Customer Relationship Management) — система управления отношениями с клиентами; программа для учёта сделок, контактов и продаж.

CSV (Comma-Separated Values) — простой текстовый формат файла, где данные разделены запятыми; понимается большинством программ для работы с таблицами.

Прототип — ранняя, упрощённая версия продукта, созданная для проверки идеи или демонстрации концепции.

Итерация — один цикл улучшения продукта: сделали → проверили → улучшили → повторили.

Git — система контроля версий; инструмент, который сохраняет историю всех изменений в коде и позволяет откатиться к любой предыдущей версии.

Основы программирования для абсолютного новичка

Основы программирования для абсолютного новичка

Почему одни люди смотрят на код и видят хаос из символов, а другие — чёткую логику, которая решает задачи? Дело не в таланте и не в математическом складе ума. Дело в том, что программирование — это просто особый способ давать инструкции. И как только вы это поймёте, всё встанет на свои места.

Что такое программирование на самом деле

Представьте, что вы объясняете дорогу незнакомцу. Вы говорите: «Иди прямо до светофора, потом поверни направо, пройди два квартала, войди в синее здание». Это и есть программирование — только вместо незнакомца у вас компьютер, а вместо слов — специальный язык.

Программирование — это процесс написания инструкций для компьютера, которые он выполняет строго по порядку. Компьютер делает ровно то, что ему сказано — не больше и не меньше. Он не догадывается о намерениях, не делает выводов из контекста и не прощает неточностей. Именно поэтому программирование требует точности формулировок — и именно поэтому промпт-инженерия так важна в вайбкодинге: вы учитесь формулировать задачи точно, только теперь для ИИ, а не напрямую для компьютера.

Программа — это набор таких инструкций, записанных в определённом порядке. Когда вы запускаете приложение на телефоне, компьютер читает программу и выполняет инструкции одну за другой.

Как компьютер понимает команды

Компьютер на самом деле понимает только один язык — двоичный код: последовательности нулей и единиц. Но писать программы в нулях и единицах невозможно для человека — это как пытаться разговаривать азбукой Морзе в реальном времени.

Поэтому люди придумали языки программирования — специальные языки-посредники. Вы пишете на языке программирования (например, Python или JavaScript), а специальная программа — интерпретатор или компилятор — переводит ваш код в команды, которые понимает компьютер.

Аналогия: вы говорите по-русски, переводчик переводит на японский, японец понимает. Вы пишете на Python, интерпретатор переводит в машинный код, процессор выполняет.

Интерпретатор — программа, которая читает ваш код строка за строкой и сразу выполняет каждую инструкцию. Python работает именно так.

Компилятор — программа, которая сначала переводит весь ваш код в машинный язык целиком, а потом запускает результат. Это как сначала перевести всю книгу, а потом читать перевод.

Три кита программирования

Любая программа, независимо от сложности, строится на трёх базовых концепциях. Понять их — значит понять 80% того, как работает любой код.

Последовательность

Компьютер выполняет инструкции строго по порядку, сверху вниз. Если вы написали «сначала открой файл, потом прочитай его содержимое» — именно в таком порядке всё и произойдёт. Поменяйте местами — получите ошибку, потому что нельзя читать файл, который ещё не открыт.

Это кажется очевидным, но именно нарушение порядка — одна из самых частых причин ошибок в коде.

Условия

Программы умеют принимать решения. «Если пользователь ввёл правильный пароль — показать главную страницу, иначе — показать сообщение об ошибке». Это называется условная логика или ветвление — программа выбирает один из нескольких путей в зависимости от ситуации.

Аналогия из жизни: вы стоите на перекрёстке. Если горит зелёный — идёте прямо. Если красный — ждёте. Программа делает то же самое, только вместо светофора — данные.

Повторение

Компьютеры отлично справляются с однообразной работой. Вместо того чтобы писать одну и ту же инструкцию сто раз, вы говорите: «Повтори это действие для каждого элемента в списке». Это называется цикл — один из самых мощных инструментов программирования.

Представьте: вам нужно отправить поздравление каждому из 500 клиентов. Вместо 500 одинаковых действий — один цикл, который пробегает по списку и отправляет сообщение каждому.

Что такое синтаксис и почему он важен

Синтаксис — это правила написания кода на конкретном языке программирования. Как грамматика в русском языке: можно понять смысл фразы «я пошёл магазин», но это грамматически неверно. В программировании ошибка синтаксиса — и программа вообще не запустится.

Каждый язык программирования имеет свой синтаксис. Python известен тем, что его синтаксис максимально близок к английскому языку и читается почти как обычный текст. JavaScript немного сложнее, но тоже достаточно понятен.

Вот как выглядит одна и та же идея («напечатай приветствие») на разных языках:

# Python
print("Привет, мир!")
// JavaScript
console.log("Привет, мир!");

Обратите внимание: print и console.log — это функции (готовые инструменты, которые выполняют определённое действие). Текст в кавычках — это то, что нужно напечатать. Символ # в Python и // в JavaScript — это комментарии: текст для людей, который компьютер игнорирует.

Ошибки — это нормально и даже полезно

Одно из самых важных открытий для новичка: ошибки в коде — это не признак некомпетентности. Это нормальная часть процесса разработки. Даже опытные программисты с десятилетиями стажа делают ошибки каждый день.

Баг (bug) — ошибка в программе, из-за которой она работает не так, как задумано. Слово появилось в 1947 году, когда инженер Грейс Хоппер нашла в компьютере настоящего мотылька (bug по-английски), который вызывал сбой.

Дебаггинг (debugging) — процесс поиска и исправления ошибок. Это детективная работа: вы ищете, где именно программа пошла не туда.

Ошибки бывают трёх видов:

  1. Синтаксические — нарушение правил языка. Программа вообще не запустится и сразу скажет, где ошибка.
  2. Логические — программа запускается, но делает не то, что нужно. Самые коварные, потому что компьютер не знает, что вы имели в виду.
  3. Ошибки выполнения (runtime errors) — программа запускается нормально, но падает в определённый момент. Например, пытается открыть файл, которого не существует.

Среда разработки: где пишут код

Технически код можно писать в любом текстовом редакторе — даже в «Блокноте». Но профессионалы используют специальные программы — IDE (Integrated Development Environment, интегрированная среда разработки) или редакторы кода.

Они подсвечивают синтаксис разными цветами (это называется syntax highlighting), подсказывают варианты завершения слов, сразу показывают ошибки и интегрируются с ИИ-инструментами.

Самые популярные варианты:

  • VS Code (Visual Studio Code) — бесплатный редактор от Microsoft, самый популярный в мире. Именно на его основе построен Cursor — главный инструмент вайбкодера.
  • Cursor — VS Code с глубоко встроенным ИИ, специально созданный для вайбкодинга.
  • Replit — онлайн-среда, которая работает прямо в браузере. Идеально для начала, не нужно ничего устанавливать.

Как думает программист (и как должен думать вайбкодер)

Программирование — это прежде всего способ мышления. Его называют вычислительным мышлением (computational thinking). Оно включает четыре элемента:

Декомпозиция — разбивка большой задачи на маленькие части. «Создать интернет-магазин» — слишком большая задача. «Создать форму добавления товара» — уже конкретно и выполнимо.

Распознавание паттернов (patterns) — поиск повторяющихся структур. Если вы заметили, что делаете одно и то же действие несколько раз — это сигнал написать функцию или цикл.

Абстракция — умение выделить главное и отбросить лишнее. Когда вы едете на машине, вам не нужно думать о работе двигателя — достаточно знать педали и руль. В программировании абстракция позволяет использовать готовые инструменты, не зная их внутреннего устройства.

Алгоритмическое мышление — умение описать решение задачи в виде чётких шагов. Алгоритм — это последовательность шагов для решения задачи. Рецепт борща — это алгоритм. Инструкция по сборке мебели — тоже алгоритм.

Именно эти навыки делают вайбкодера эффективным. Когда вы умеете декомпозировать задачу и мыслить алгоритмически — вы пишете точные промпты, получаете хорошие результаты от ИИ и быстро замечаете, когда что-то пошло не так.

Первые шаги: запустите свою первую программу

Самый быстрый способ начать — использовать онлайн-среду. Откройте replit.com, создайте новый Python-проект и напишите:

name = "Алексей"
print("Привет, " + name + "!")
print("Добро пожаловать в мир вайбкодинга.")

Нажмите «Run» — и увидите результат. Поздравляю: вы только что написали и запустили свою первую программу.

Что здесь происходит: name — это переменная (контейнер для хранения данных, в данном случае — имени). print — функция, которая выводит текст на экран. Знак + соединяет строки текста. Подробнее о переменных — в следующей главе.

Не бойтесь экспериментировать: измените имя, добавьте ещё одну строку print, посмотрите что получится. Лучший способ учиться программированию — это ломать и чинить.

Глоссарий главы

Программирование — процесс написания инструкций для компьютера на специальном языке.

Программа — набор инструкций, которые компьютер выполняет последовательно.

Язык программирования — специальный язык для написания инструкций компьютеру; посредник между человеком и машиной.

Интерпретатор — программа, которая читает и выполняет код строка за строкой в реальном времени.

Компилятор — программа, которая переводит весь код в машинный язык целиком перед запуском.

Синтаксис — правила написания кода на конкретном языке программирования; аналог грамматики в обычном языке.

Баг (bug) — ошибка в программе, из-за которой она работает неправильно.

Дебаггинг (debugging) — процесс поиска и исправления ошибок в коде.

IDE (Integrated Development Environment) — интегрированная среда разработки; специальная программа для написания кода с удобными инструментами.

Алгоритм — чёткая последовательность шагов для решения задачи.

Декомпозиция — разбивка большой задачи на маленькие, управляемые части.

Паттерн (pattern) — повторяющаяся структура или шаблон в коде или данных.

Абстракция — умение использовать инструмент, не зная его внутреннего устройства.

Комментарий — текст в коде для людей, который компьютер игнорирует при выполнении программы.

Функция — готовый инструмент (блок кода), который выполняет определённое действие по вызову.

Переменные, типы данных и первые программы

Переменные, типы данных и первые программы

Когда вы заполняете анкету — вписываете имя, возраст, адрес — вы интуитивно понимаете, что это разные виды информации. Имя — это текст, возраст — число, дата рождения — дата. Компьютер думает точно так же. И первое, что нужно освоить в программировании — это научиться хранить информацию и работать с ней. Именно для этого существуют переменные и типы данных.

Переменные: контейнеры для данных

Переменная — это именованный контейнер в памяти компьютера, в котором хранится какое-то значение. Представьте коробку с наклейкой: на наклейке написано имя переменной, внутри коробки — её значение.

age = 25
name = "Мария"
is_student = True

Здесь age, name и is_student — это имена переменных. Знак = — это оператор присваивания: он кладёт значение справа в контейнер слева. Обратите внимание: это не математическое равенство. age = 25 не означает «age равно 25». Это означает «положи число 25 в контейнер с именем age».

Почему это важно? Потому что значение в контейнере можно менять:

age = 25
print(age)   # Выведет: 25
age = 26
print(age)   # Выведет: 26

Переменная «переменная» именно потому, что её значение может меняться в процессе работы программы.

Правила именования переменных

Имя переменной должно быть понятным — это не просто рекомендация, это профессиональная культура. Переменная x — плохо. Переменная user_age — хорошо. Через месяц вы (или ваш коллега) откроете код и сразу поймёте, что в ней хранится.

Технические правила для Python:

  • Имя может содержать буквы, цифры и знак подчёркивания _
  • Имя не может начинаться с цифры
  • Имя не может совпадать с ключевыми словами языка (if, for, while и другие)
  • Python различает заглавные и строчные буквы: Name и name — разные переменные

Стиль именования в Python — snake_case: слова разделяются подчёркиванием, все буквы строчные: user_name, total_price, is_active.

В JavaScript чаще используют camelCase: первое слово строчное, каждое следующее начинается с заглавной: userName, totalPrice, isActive.

Типы данных: какие бывают виды информации

Каждое значение в программе имеет тип данных — категорию, которая определяет, что это за информация и что с ней можно делать. Нельзя умножить имя на два. Нельзя написать «Привет» заглавными буквами, если это число. Тип данных определяет допустимые операции.

Числа

В Python есть два основных числовых типа:

Целые числа (integers, int) — числа без дробной части: 5, -3, 1000, 0.

Числа с плавающей точкой (floating point, float) — числа с дробной частью: 3.14, -0.5, 100.0. Обратите внимание: в программировании дробная часть отделяется точкой, а не запятой.

users_count = 1500        # int
price = 299.99            # float
temperature = -7.5        # float

С числами можно делать математические операции:

a = 10
b = 3
print(a + b)   # 13 — сложение
print(a - b)   # 7  — вычитание
print(a * b)   # 30 — умножение
print(a / b)   # 3.333... — деление (всегда даёт float)
print(a // b)  # 3  — целочисленное деление (без остатка)
print(a % b)   # 1  — остаток от деления
print(a ** b)  # 1000 — возведение в степень

Строки

Строка (string, str) — это текст. Любой текст: имя, адрес, сообщение, URL. Строки всегда заключаются в кавычки — одинарные или двойные:

greeting = "Привет, мир!"
city = 'Москва'
empty = ""   # Пустая строка — тоже строка

Со строками можно делать интересные вещи:

first_name = "Иван"
last_name = "Петров"

# Конкатенация — соединение строк
full_name = first_name + " " + last_name
print(full_name)   # Иван Петров

# f-строки — удобный способ вставить переменную в текст
message = f"Добро пожаловать, {first_name}!"
print(message)   # Добро пожаловать, Иван!

# Длина строки
print(len(full_name))   # 10

# Перевод в верхний регистр
print(full_name.upper())   # ИВАН ПЕТРОВ

f-строки (форматированные строки) — это очень удобный инструмент. Буква f перед кавычками говорит Python: «внутри этой строки могут быть переменные в фигурных скобках». Используйте их постоянно — это делает код чище и понятнее.

Булевы значения

Булев тип (boolean, bool) — это тип данных, который может принимать только два значения: True (истина) или False (ложь). Назван в честь математика Джорджа Буля.

is_logged_in = True
has_subscription = False
is_adult = True

Булевы значения — основа условной логики. Когда программа проверяет «пользователь авторизован?» — ответ всегда булев: да или нет.

Булевы значения получаются в результате сравнений:

age = 20
print(age >= 18)    # True — 20 больше или равно 18
print(age == 30)    # False — 20 не равно 30
print(age != 18)    # True — 20 не равно 18

Обратите внимание: == (двойное равно) — это сравнение (проверка равенства). = (одинарное) — это присваивание (запись значения). Путаница между ними — классическая ошибка новичков.

Тип None

None — специальное значение в Python, которое означает «ничего», «отсутствие значения». Это не ноль и не пустая строка — это именно отсутствие данных.

result = None   # Переменная объявлена, но значения пока нет

Аналогия: пустая коробка (None) — это не то же самое, что коробка с нулём внутри (0) или коробка с пустым листом бумаги ("").

Как узнать тип переменной

Python позволяет в любой момент проверить, какого типа данные хранятся в переменной:

age = 25
name = "Мария"
price = 99.99
is_active = True

print(type(age))       # <class 'int'>
print(type(name))      # <class 'str'>
print(type(price))     # <class 'float'>
print(type(is_active)) # <class 'bool'>

Это особенно полезно при отладке: если программа ведёт себя странно, часто причина в том, что переменная содержит данные не того типа.

Преобразование типов

Иногда нужно превратить один тип данных в другой. Например, пользователь вводит возраст в текстовом поле — программа получает строку "25", а не число 25. Чтобы делать математику, нужно преобразовать:

age_text = "25"        # Это строка
age_number = int(age_text)   # Преобразуем в целое число
print(age_number + 1)  # 26 — теперь работает

price_text = "99.99"
price_number = float(price_text)  # Преобразуем в дробное число

number = 42
number_text = str(number)   # Число в строку: "42"

Если преобразование невозможно — Python выдаст ошибку:

int("привет")   # ValueError: невозможно преобразовать "привет" в число

Это важно помнить при работе с данными от пользователя — всегда проверяйте, что получаете то, что ожидаете.

Константы: переменные, которые не меняются

Константа — это значение, которое задаётся один раз и не должно меняться в течение работы программы. В Python нет специального синтаксиса для констант, но по соглашению их пишут ЗАГЛАВНЫМИ_БУКВАМИ:

MAX_USERS = 1000
PI = 3.14159
API_URL = "https://api.example.com"

Это сигнал другим программистам (и вам самим через месяц): «это значение не трогай».

Первая настоящая программа: калькулятор скидки

Соберём всё вместе и напишем небольшую программу, которая считает цену товара со скидкой:

# Данные о товаре
product_name = "Курс по вайбкодингу"
original_price = 5000.0
discount_percent = 20

# Вычисляем скидку
discount_amount = original_price * discount_percent / 100
final_price = original_price - discount_amount

# Выводим результат
print(f"Товар: {product_name}")
print(f"Цена без скидки: {original_price} руб.")
print(f"Скидка {discount_percent}%: -{discount_amount} руб.")
print(f"Итоговая цена: {final_price} руб.")

Результат:

Товар: Курс по вайбкодингу
Цена без скидки: 5000.0 руб.
Скидка 20%: -1000.0 руб.
Итоговая цена: 4000.0 руб.

Попробуйте изменить значения переменных и запустить снова. Программа автоматически пересчитает всё остальное — вот в чём сила переменных.

Типичные ошибки новичков с переменными

Использование переменной до присваивания. Если вы попытаетесь использовать переменную, которой ещё не присвоили значение, Python выдаст ошибку NameError.

Опечатки в именах. user_name и username — разные переменные. Python не предупредит вас об этом — он просто создаст новую переменную с опечаткой.

Путаница = и ==. Присваивание и сравнение — разные операции. if age = 18 — ошибка. if age == 18 — правильно.

Смешивание типов без преобразования. "Возраст: " + 25 — ошибка в Python. Нужно: "Возраст: " + str(25) или f"Возраст: {25}".

Глоссарий главы

Переменная — именованный контейнер в памяти компьютера для хранения данных.

Оператор присваивания (=) — знак, который записывает значение в переменную.

Тип данных — категория значения, определяющая, что это за информация и какие операции с ней допустимы.

int (integer) — целое число; тип данных для чисел без дробной части.

float (floating point) — число с плавающей точкой; тип данных для чисел с дробной частью.

str (string) — строка; тип данных для текста.

bool (boolean) — булев тип; может принимать только значения True (истина) или False (ложь).

None — специальное значение в Python, означающее «отсутствие значения».

f-строка — форматированная строка в Python; позволяет вставлять значения переменных прямо в текст через фигурные скобки.

Конкатенация — соединение строк в одну с помощью оператора +.

Константа — значение, которое задаётся один раз и не меняется; в Python пишется ЗАГЛАВНЫМИ_БУКВАМИ.

snake_case — стиль именования, где слова разделяются подчёркиванием: user_name.

camelCase — стиль именования, где каждое новое слово начинается с заглавной буквы: userName.

Оператор сравнения (==) — проверяет равенство двух значений; не путать с присваиванием (=).

Преобразование типов — превращение значения одного типа в другой: int("25") превращает строку в число.

Управление потоком: условия, циклы и функции

Управление потоком: условия, циклы и функции

Представьте, что вы написали программу, которая всегда делает одно и то же — берёт число и умножает его на два. Это полезно ровно один раз. Настоящая сила программирования начинается тогда, когда программа умеет принимать решения, повторять действия и переиспользовать логику. Именно об этом — управление потоком выполнения кода.

Условия: программа умеет думать

Вы уже знаете, что переменные хранят данные. Но что с ними делать? Чаще всего — проверять: соответствуют ли они какому-то условию, и действовать по-разному в зависимости от ответа.

Условный оператор if — это основа принятия решений в коде. Он работает по простой схеме: «если условие истинно — выполни этот блок кода».

age = 20

if age >= 18:
    print("Добро пожаловать!")
    print("Вы совершеннолетний.")

Обратите внимание на отступ (четыре пробела или один Tab перед строками внутри if). В Python отступы — это не украшение, а часть синтаксиса. Они говорят интерпретатору: «эти строки принадлежат блоку if». Если убрать отступ — программа сломается или будет работать неправильно.

Но что, если условие не выполняется? Для этого есть else — «иначе»:

age = 15

if age >= 18:
    print("Добро пожаловать!")
else:
    print("Вам ещё нет 18 лет.")

А если вариантов несколько? Используем elif (сокращение от else if — «иначе если»):

score = 75

if score >= 90:
    print("Отлично!")
elif score >= 70:
    print("Хорошо")
elif score >= 50:
    print("Удовлетворительно")
else:
    print("Нужно подтянуться")

Python проверяет условия сверху вниз и останавливается на первом истинном. Если score = 75, то первое условие (>= 90) ложно, второе (>= 70) — истинно, и программа выводит «Хорошо», не проверяя остальные.

Логические операторы: составные условия

Иногда нужно проверить несколько условий одновременно. Для этого используют логические операторы:

  • and — «и»: оба условия должны быть истинны
  • or — «или»: хотя бы одно условие должно быть истинно
  • not — «не»: инвертирует условие
age = 25
has_ticket = True

if age >= 18 and has_ticket:
    print("Проходите на мероприятие")

temperature = 35
is_raining = False

if temperature > 30 or is_raining:
    print("Возьмите зонт или воду")

Циклы: сила повторения

Один из главных принципов программирования — DRY (Don't Repeat Yourself, «не повторяй себя»). Если вы пишете одно и то же несколько раз — это сигнал использовать цикл.

Цикл for: когда знаем количество повторений

Цикл for перебирает элементы какой-то последовательности — списка, строки, диапазона чисел:

# Перебираем список
fruits = ["яблоко", "банан", "апельсин"]
for fruit in fruits:
    print(f"Фрукт: {fruit}")

# Перебираем диапазон чисел
for i in range(5):
    print(f"Шаг {i}")   # Выведет 0, 1, 2, 3, 4

Функция range(5) генерирует последовательность чисел от 0 до 4 (не включая 5). range(1, 6) — от 1 до 5. range(0, 10, 2) — от 0 до 9 с шагом 2: 0, 2, 4, 6, 8.

Переменная i (или fruit в примере выше) — это переменная цикла: она принимает значение каждого элемента по очереди. Её имя можно выбрать любое, но i — традиционное обозначение для счётчика.

Цикл while: когда не знаем количество повторений

Цикл while выполняется, пока условие истинно. Используйте его, когда заранее неизвестно, сколько раз нужно повторить действие:

attempts = 0
password = ""

while password != "secret123":
    password = input("Введите пароль: ")
    attempts += 1
    if attempts >= 3:
        print("Слишком много попыток!")
        break   # Принудительно выходим из цикла

Здесь появляются два важных ключевых слова:

  • break — немедленно прерывает цикл
  • continue — пропускает текущую итерацию и переходит к следующей
for number in range(10):
    if number % 2 == 0:
        continue   # Пропускаем чётные числа
    print(number)  # Выведет только нечётные: 1, 3, 5, 7, 9

Вложенные циклы

Циклы можно вкладывать друг в друга. Классический пример — таблица умножения:

for i in range(1, 4):
    for j in range(1, 4):
        print(f"{i} × {j} = {i * j}")

Внешний цикл делает 3 итерации, на каждой из которых внутренний цикл тоже делает 3 итерации. Итого — 9 строк вывода. Будьте осторожны с вложенными циклами: если каждый из них делает 1000 итераций, вместе они дадут миллион операций.

Функции: переиспользуемые блоки логики

Представьте, что вам нужно посчитать скидку в пяти разных местах программы. Копировать одну и ту же формулу пять раз — плохая идея: если формула изменится, придётся менять её в пяти местах. Решение — функция.

Функция — это именованный блок кода, который можно вызвать по имени из любого места программы. Вы уже использовали встроенные функции: print(), len(), int(). Теперь научимся создавать свои.

def calculate_discount(price, discount_percent):
    discount_amount = price * discount_percent / 100
    final_price = price - discount_amount
    return final_price

Разберём синтаксис:

  • def — ключевое слово, объявляющее функцию
  • calculate_discount — имя функции
  • price, discount_percentпараметры (входные данные, которые функция принимает)
  • return — возвращает результат из функции

Теперь используем её:

price1 = calculate_discount(5000, 20)   # 4000.0
price2 = calculate_discount(1200, 10)   # 1080.0
price3 = calculate_discount(800, 50)    # 400.0

print(f"Цена 1: {price1} руб.")
print(f"Цена 2: {price2} руб.")
print(f"Цена 3: {price3} руб.")

Одна функция — три вызова. Если завтра изменится логика расчёта скидки, достаточно поменять код в одном месте.

Параметры по умолчанию

Функции могут иметь параметры по умолчанию — значения, которые используются, если аргумент не передан:

def greet(name, greeting="Привет"):
    print(f"{greeting}, {name}!")

greet("Мария")              # Привет, Мария!
greet("Иван", "Добрый день")  # Добрый день, Иван!

Параметры с дефолтными значениями всегда идут после обязательных параметров.

Функции без return

Не каждая функция должна что-то возвращать. Иногда функция просто выполняет действие:

def print_separator(char="-", length=30):
    print(char * length)

print_separator()         # ------------------------------
print_separator("=", 20)  # ====================

Область видимости переменных

Переменные, созданные внутри функции, существуют только внутри неё — это называется локальная область видимости (local scope). Снаружи они недоступны:

def my_function():
    local_var = "Я внутри функции"
    print(local_var)   # Работает

my_function()
print(local_var)   # NameError: переменная не существует снаружи

Переменные, созданные вне функций, называются глобальными (global). Функция может их читать, но не должна изменять без явного указания global — это считается плохой практикой.

Всё вместе: реальный пример

Напишем небольшую программу — простой калькулятор оценок студента:

def get_grade(score):
    """Возвращает оценку по числовому баллу."""
    if score >= 90:
        return "A (Отлично)"
    elif score >= 75:
        return "B (Хорошо)"
    elif score >= 60:
        return "C (Удовлетворительно)"
    else:
        return "F (Неудовлетворительно)"

def calculate_average(scores):
    """Считает среднее значение списка оценок."""
    total = 0
    for score in scores:
        total += score
    return total / len(scores)

# Данные студента
student_scores = [85, 92, 78, 65, 88]

average = calculate_average(student_scores)
grade = get_grade(average)

print(f"Оценки: {student_scores}")
print(f"Средний балл: {average:.1f}")
print(f"Итоговая оценка: {grade}")

Текст """Возвращает оценку по числовому баллу.""" — это докстринг (docstring), строка документации функции. Хорошая практика — всегда объяснять, что делает функция.

Типичные ловушки

Бесконечный цикл — цикл while, условие которого никогда не становится ложным. Программа зависает. Всегда убеждайтесь, что внутри цикла что-то меняется, что в итоге сделает условие ложным.

Изменение списка во время итерации — если вы перебираете список циклом for и одновременно удаляете из него элементы, поведение будет непредсказуемым. Итерируйтесь по копии: for item in my_list.copy().

Забытый return — функция без return возвращает специальное значение None. Если вы ожидаете число, а получаете None, проверьте, не забыли ли вы return.

Глоссарий главы

Управление потоком — механизмы, определяющие порядок выполнения инструкций в программе.

Условный оператор (if/elif/else) — конструкция, позволяющая выполнять разные блоки кода в зависимости от условия.

Отступ — пробелы в начале строки кода; в Python определяет принадлежность строки к блоку.

Логические операторы (and, or, not) — операторы для составления сложных условий.

Цикл — конструкция для многократного выполнения блока кода.

Цикл for — цикл, перебирающий элементы последовательности.

Цикл while — цикл, выполняющийся пока условие истинно.

range() — встроенная функция, генерирующая последовательность чисел.

Переменная цикла — переменная, принимающая значение каждого элемента при итерации.

break — ключевое слово для немедленного выхода из цикла.

continue — ключевое слово для пропуска текущей итерации и перехода к следующей.

Итерация — один проход цикла.

Функция — именованный блок кода, который можно вызвать по имени.

def — ключевое слово для объявления функции в Python.

Параметры — входные данные, которые функция принимает при вызове.

return — ключевое слово для возврата значения из функции.

Параметры по умолчанию — значения параметров, используемые если аргумент не передан.

Локальная область видимости (local scope) — переменные, существующие только внутри функции.

Глобальные переменные — переменные, доступные во всей программе.

DRY (Don't Repeat Yourself) — принцип программирования: не дублируй код, используй функции.

Докстринг (docstring) — строка документации внутри функции, объясняющая её назначение.

Структуры данных и как с ними работать

Структуры данных и как с ними работать

Допустим, вы пишете приложение для интернет-магазина. У вас есть 500 товаров, каждый с названием, ценой и количеством на складе. Хранить каждый атрибут в отдельной переменной (product1_name, product1_price, product1_stock... и так 500 раз) — это катастрофа. Именно для таких ситуаций существуют структуры данных: способы организовать информацию так, чтобы с ней было удобно работать.

Список: упорядоченная коллекция

Список (list) — самая используемая структура данных в Python. Это упорядоченная коллекция элементов, которую можно изменять. Элементы хранятся в определённом порядке и доступны по индексу — порядковому номеру, начиная с нуля.

fruits = ["яблоко", "банан", "апельсин", "манго"]
#  индексы:    0         1         2         3

Почему с нуля? Это историческое соглашение из языка C, которое перешло в большинство современных языков. Просто запомните: первый элемент — индекс 0.

print(fruits[0])    # яблоко
print(fruits[2])    # апельсин
print(fruits[-1])   # манго (отрицательный индекс — с конца)
print(fruits[-2])   # апельсин

Основные операции со списками

# Добавление элементов
fruits.append("виноград")       # Добавить в конец
fruits.insert(1, "груша")       # Вставить на позицию 1

# Удаление элементов
fruits.remove("банан")          # Удалить по значению
deleted = fruits.pop()          # Удалить и вернуть последний элемент
deleted = fruits.pop(0)         # Удалить и вернуть элемент по индексу

# Информация о списке
print(len(fruits))              # Количество элементов
print("яблоко" in fruits)       # True — проверка наличия
print(fruits.index("манго"))    # Индекс элемента

# Сортировка
fruits.sort()                   # Сортировка по алфавиту (изменяет список)
sorted_fruits = sorted(fruits)  # Возвращает новый отсортированный список

Срезы: получить часть списка

Срез (slice) — мощный инструмент для получения подсписка:

numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

print(numbers[2:5])    # [2, 3, 4] — с индекса 2 до 5 (не включая)
print(numbers[:3])     # [0, 1, 2] — с начала до индекса 3
print(numbers[7:])     # [7, 8, 9] — с индекса 7 до конца
print(numbers[::2])    # [0, 2, 4, 6, 8] — каждый второй
print(numbers[::-1])   # [9, 8, 7, 6, 5, 4, 3, 2, 1, 0] — в обратном порядке

Генераторы списков

Генератор списка (list comprehension) — элегантный способ создать список на основе другого:

# Обычный способ
squares = []
for i in range(1, 6):
    squares.append(i ** 2)

# Генератор списка — то же самое в одну строку
squares = [i ** 2 for i in range(1, 6)]
# Результат: [1, 4, 9, 16, 25]

# С условием — только чётные квадраты
even_squares = [i ** 2 for i in range(1, 11) if i % 2 == 0]
# Результат: [4, 16, 36, 64, 100]

Генераторы списков — один из признаков «питонического» кода. Вайбкодеры часто просят ИИ переписать циклы в генераторы для краткости.

Словарь: данные с ключами

Словарь (dictionary, dict) — коллекция пар «ключ: значение». Это как настоящий словарь: вы ищете слово (ключ) и получаете его определение (значение). Ключи уникальны — не может быть двух одинаковых.

product = {
    "name": "Курс по вайбкодингу",
    "price": 4990,
    "in_stock": True,
    "tags": ["образование", "программирование", "ИИ"]
}

Доступ к значениям — по ключу:

print(product["name"])     # Курс по вайбкодингу
print(product["price"])    # 4990

# Безопасный доступ — не вызовет ошибку если ключа нет
print(product.get("discount", 0))   # 0 — значение по умолчанию

Основные операции со словарями

# Добавление и изменение
product["discount"] = 20          # Добавить новый ключ
product["price"] = 3990           # Изменить существующий

# Удаление
del product["discount"]           # Удалить ключ
removed = product.pop("tags")     # Удалить и вернуть значение

# Перебор словаря
for key in product:
    print(key)                    # Только ключи

for key, value in product.items():
    print(f"{key}: {value}")      # Пары ключ-значение

# Проверка наличия ключа
if "price" in product:
    print("Цена указана")

# Все ключи и значения
print(product.keys())
print(product.values())

Словари — основа работы с данными в вайбкодинге. Когда вы получаете ответ от API (внешнего сервиса), он почти всегда приходит в формате JSON, который Python автоматически превращает в словарь.

Кортеж: неизменяемый список

Кортеж (tuple) — это список, который нельзя изменить после создания. Синтаксис — круглые скобки вместо квадратных:

coordinates = (55.7558, 37.6173)   # Координаты Москвы
rgb_red = (255, 0, 0)              # Цвет в формате RGB

Зачем нужна неизменяемость? Во-первых, это защита от случайных изменений — если данные не должны меняться, кортеж это гарантирует. Во-вторых, кортежи работают быстрее списков. В-третьих, кортежи можно использовать как ключи словаря (списки — нельзя).

# Распаковка кортежа — удобный способ присвоить значения
lat, lon = coordinates
print(f"Широта: {lat}, Долгота: {lon}")

# Функция может вернуть несколько значений через кортеж
def get_min_max(numbers):
    return min(numbers), max(numbers)

minimum, maximum = get_min_max([3, 1, 4, 1, 5, 9, 2, 6])
print(f"Мин: {minimum}, Макс: {maximum}")

Множество: уникальные элементы

Множество (set) — коллекция уникальных элементов без определённого порядка. Главное свойство: дубликаты автоматически удаляются.

tags = {"python", "программирование", "ИИ", "python"}
print(tags)   # {'python', 'программирование', 'ИИ'} — дубликат удалён

# Практическое применение: убрать дубликаты из списка
emails = ["a@mail.ru", "b@mail.ru", "a@mail.ru", "c@mail.ru"]
unique_emails = list(set(emails))

Множества поддерживают математические операции:

python_devs = {"Алиса", "Боб", "Карина"}
js_devs = {"Боб", "Дима", "Карина"}

# Пересечение — кто знает оба языка
both = python_devs & js_devs       # {'Боб', 'Карина'}

# Объединение — все разработчики
all_devs = python_devs | js_devs   # {'Алиса', 'Боб', 'Карина', 'Дима'}

# Разность — только Python-разработчики
only_python = python_devs - js_devs  # {'Алиса'}

Вложенные структуры: данные реального мира

Реальные данные редко бывают плоскими. Чаще всего структуры вкладываются друг в друга:

# Список словарей — типичный ответ от API
users = [
    {
        "id": 1,
        "name": "Алиса",
        "skills": ["Python", "SQL"],
        "address": {
            "city": "Москва",
            "country": "Россия"
        }
    },
    {
        "id": 2,
        "name": "Боб",
        "skills": ["JavaScript", "React"],
        "address": {
            "city": "Санкт-Петербург",
            "country": "Россия"
        }
    }
]

# Доступ к вложенным данным
print(users[0]["name"])              # Алиса
print(users[0]["skills"][0])         # Python
print(users[1]["address"]["city"])   # Санкт-Петербург

# Перебор всех пользователей
for user in users:
    skills_str = ", ".join(user["skills"])
    print(f"{user['name']}: {skills_str}")

Когда что использовать

Структура Когда использовать
Список Упорядоченная коллекция, которую нужно изменять
Словарь Данные с именованными полями, поиск по ключу
Кортеж Неизменяемые данные, координаты, возврат нескольких значений
Множество Уникальные элементы, проверка вхождения, операции над множествами

Практический кейс: обработка данных о продажах

Вот реальная задача, которую вайбкодер решает регулярно: обработать список транзакций и посчитать статистику.

transactions = [
    {"product": "Курс Python", "amount": 4990, "manager": "Алиса"},
    {"product": "Курс JS", "amount": 3990, "manager": "Боб"},
    {"product": "Курс Python", "amount": 4990, "manager": "Алиса"},
    {"product": "Курс DevOps", "amount": 6990, "manager": "Боб"},
    {"product": "Курс JS", "amount": 3990, "manager": "Алиса"},
]

# Считаем выручку по менеджерам
revenue_by_manager = {}
for t in transactions:
    manager = t["manager"]
    if manager not in revenue_by_manager:
        revenue_by_manager[manager] = 0
    revenue_by_manager[manager] += t["amount"]

print("Выручка по менеджерам:")
for manager, revenue in revenue_by_manager.items():
    print(f"  {manager}: {revenue} руб.")

# Уникальные продукты
unique_products = {t["product"] for t in transactions}
print(f"\nПродуктов в ассортименте: {len(unique_products)}")

# Общая выручка
total = sum(t["amount"] for t in transactions)
print(f"Общая выручка: {total} руб.")

Этот паттерн — загрузить данные, обработать циклом, агрегировать в словарь — встречается в реальных проектах постоянно.

Глоссарий главы

Структура данных — способ организации и хранения данных для эффективной работы с ними.

Список (list) — упорядоченная изменяемая коллекция элементов в Python.

Индекс — порядковый номер элемента в списке; нумерация начинается с 0.

Срез (slice) — получение подсписка по диапазону индексов.

Генератор списка (list comprehension) — краткий синтаксис создания списка на основе другого.

Словарь (dict) — коллекция пар «ключ: значение»; ключи уникальны.

JSON (JavaScript Object Notation) — текстовый формат данных, похожий на словарь Python; стандарт обмена данными в веб.

Кортеж (tuple) — неизменяемая упорядоченная коллекция элементов.

Распаковка — присвоение элементов кортежа или списка нескольким переменным сразу.

Множество (set) — коллекция уникальных элементов без определённого порядка.

Вложенные структуры — структуры данных, содержащие другие структуры данных.

Метод — функция, принадлежащая объекту; вызывается через точку: list.append().

Введение в Python и JavaScript для вайбкодера

Введение в Python и JavaScript для вайбкодера

Почему именно два языка? Потому что вайбкодер живёт на стыке бэкенда и фронтенда, автоматизации и интерфейсов. Python — язык, на котором думают данные, скрипты и серверная логика. JavaScript — язык, на котором живёт весь веб. Вместе они покрывают 90% задач, с которыми вы столкнётесь в реальных проектах.

Python: язык, который читается как английский

Python создал Гвидо ван Россум в 1991 году с одной главной идеей: код должен быть читаемым. Сегодня Python — первый язык в большинстве рейтингов, язык науки о данных, машинного обучения, автоматизации и веб-бэкенда.

Для вайбкодера Python особенно ценен по трём причинам. Во-первых, ИИ-инструменты генерируют Python-код исключительно хорошо — обучающих данных было больше всего. Во-вторых, экосистема библиотек Python охватывает буквально всё: от работы с таблицами до создания телеграм-ботов. В-третьих, синтаксис настолько близок к человеческому языку, что вы можете читать чужой код почти без подготовки.

Установка и первый запуск

Скачайте Python с python.org — выбирайте версию 3.10 и выше. После установки откройте терминал и проверьте:

python --version   # Python 3.11.4

Для быстрых экспериментов используйте REPL (Read-Eval-Print Loop) — интерактивный режим, где каждая строка выполняется сразу:

python   # Запустить REPL
>>> 2 + 2
4
>>> print("Привет!")
Привет!

Модули и импорты

Python поставляется с огромной стандартной библиотекой — набором готовых модулей для типичных задач. Модуль — это файл с Python-кодом, который можно подключить к своей программе:

import math
print(math.sqrt(16))    # 4.0
print(math.pi)          # 3.141592653589793

import random
print(random.randint(1, 100))   # Случайное число от 1 до 100

import datetime
today = datetime.date.today()
print(today)   # 2025-04-14

Можно импортировать только нужное:

from math import sqrt, pi
print(sqrt(25))   # 5.0 — без префикса math.

Менеджер пакетов pip

Стандартная библиотека — это хорошо, но реальная сила Python — в тысячах сторонних пакетов. pip (Pip Installs Packages) — инструмент для их установки:

pip install requests      # Библиотека для HTTP-запросов
pip install pandas        # Работа с таблицами данных
pip install python-dotenv # Работа с переменными окружения

Виртуальные окружения

Виртуальное окружение (virtual environment, venv) — изолированная копия Python для конкретного проекта. Зачем? Разные проекты могут требовать разные версии одной библиотеки. Без изоляции они будут конфликтовать.

python -m venv venv          # Создать окружение в папке venv
source venv/bin/activate     # Активировать (Mac/Linux)
venv\Scripts\activate        # Активировать (Windows)
pip install requests         # Установить только в это окружение
deactivate                   # Выйти из окружения

Это стандартная практика: каждый проект — своё виртуальное окружение.

Работа с файлами

Одна из самых частых задач — читать и писать файлы:

# Запись в файл
with open("output.txt", "w", encoding="utf-8") as f:
    f.write("Привет, файл!\n")
    f.write("Вторая строка\n")

# Чтение файла
with open("output.txt", "r", encoding="utf-8") as f:
    content = f.read()
    print(content)

# Чтение построчно
with open("output.txt", "r", encoding="utf-8") as f:
    for line in f:
        print(line.strip())   # strip() убирает пробелы и \n

Конструкция with open(...) as f — это контекстный менеджер: он автоматически закрывает файл после выхода из блока, даже если произошла ошибка.

JavaScript: язык, на котором живёт веб

JavaScript создал Брендан Айк в 1995 году за десять дней — и этот факт объясняет многие его странности. Но несмотря на это, JS стал самым распространённым языком в мире: он работает в каждом браузере, на серверах (через Node.js), в мобильных приложениях и даже в микроконтроллерах.

Для вайбкодера JavaScript — это язык фронтенда (то, что видит пользователь в браузере) и быстрых серверных скриптов.

Запуск JavaScript

JavaScript можно запускать прямо в браузере. Откройте любую страницу, нажмите F12, перейдите на вкладку Console — и вы в REPL для JavaScript:

console.log("Привет из браузера!");
2 + 2   // 4

Для запуска JS-файлов вне браузера нужен Node.js — среда выполнения JavaScript на сервере. Скачайте с nodejs.org:

node --version    # v20.11.0
node script.js    # Запустить файл
node              # Запустить REPL

Ключевые отличия от Python

JavaScript имеет схожую логику с Python, но другой синтаксис. Вот самые важные отличия:

// Объявление переменных — три способа
let name = "Алиса";      // Изменяемая переменная (используйте по умолчанию)
const PI = 3.14;         // Константа (нельзя переприсвоить)
var old = "устарело";    // Старый способ — избегайте

// Строки — три вида кавычек
let single = 'одинарные';
let double = "двойные";
let template = `Привет, ${name}!`;   // Шаблонные строки — аналог f-строк

// Функции — несколько синтаксисов
function greet(name) {
    return `Привет, ${name}!`;
}

// Стрелочная функция — современный способ
const greetArrow = (name) => `Привет, ${name}!`;

// Условия и циклы — похожи на Python, но с фигурными скобками
if (age >= 18) {
    console.log("Совершеннолетний");
} else {
    console.log("Несовершеннолетний");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

Массивы и объекты

В JavaScript нет отдельных типов «список» и «словарь» — вместо них массивы и объекты:

// Массив — аналог списка Python
const fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits[0]);        // яблоко
fruits.push("манго");          // Добавить в конец
fruits.pop();                  // Удалить последний
console.log(fruits.length);    // Длина массива

// Объект — аналог словаря Python
const user = {
    name: "Алиса",
    age: 25,
    isActive: true,
    skills: ["Python", "JS"]
};

console.log(user.name);         // Алиса — через точку
console.log(user["age"]);       // 25 — через скобки
user.email = "alice@mail.ru";   // Добавить поле

Асинхронность: главная особенность JavaScript

Здесь JavaScript кардинально отличается от Python. Браузер не может «замереть» в ожидании ответа от сервера — пользователь должен продолжать взаимодействовать со страницей. Поэтому JavaScript построен на асинхронном программировании.

Промис (Promise) — объект, представляющий результат операции, которая ещё не завершилась:

// Получить данные с сервера — асинхронная операция
fetch("https://api.example.com/users")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Ошибка:", error));

Современный способ — async/await, который делает асинхронный код похожим на синхронный:

async function getUsers() {
    try {
        const response = await fetch("https://api.example.com/users");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}

getUsers();

Ключевое слово await говорит: «подожди, пока операция завершится, и только потом иди дальше». Но при этом остальной код продолжает работать — браузер не замирает.

npm: менеджер пакетов JavaScript

npm (Node Package Manager) — аналог pip для JavaScript. Это крупнейший реестр пакетов в мире — более двух миллионов библиотек:

npm init -y              # Создать файл package.json (описание проекта)
npm install axios        # Установить библиотеку для HTTP-запросов
npm install -D eslint    # Установить как dev-зависимость (только для разработки)
npm run start            # Запустить скрипт из package.json

Файл package.json — это «паспорт» JavaScript-проекта: в нём записаны название, версия, зависимости и скрипты запуска.

Python vs JavaScript: что выбрать для задачи

Вайбкодер не выбирает «один язык навсегда» — он выбирает правильный инструмент для задачи:

Задача Python JavaScript
Скрипты автоматизации ✅ Отлично ✅ Хорошо
Веб-бэкенд ✅ (Django, FastAPI) ✅ (Node.js, Express)
Веб-фронтенд ✅ Единственный вариант
Работа с данными ✅ Отлично (pandas) ⚠️ Ограниченно
Машинное обучение ✅ Стандарт
Мобильные приложения ⚠️ Ограниченно ✅ (React Native)
Телеграм-боты ✅ Отлично ✅ Хорошо

Как вайбкодер работает с двумя языками

На практике вайбкодер часто работает так: Python — для серверной логики, обработки данных, скриптов; JavaScript — для всего, что видит пользователь в браузере.

Когда вы просите ИИ создать веб-приложение, он обычно генерирует JavaScript (или TypeScript — типизированный JavaScript) для фронтенда и Python или Node.js для бэкенда. Понимание обоих языков позволяет вам читать и корректировать весь стек.

Важный совет: не пытайтесь выучить оба языка одновременно до совершенства. Начните с Python — он проще и даёт более быстрый старт. JavaScript освоите по мере работы с веб-проектами.

Глоссарий главы

REPL (Read-Eval-Print Loop) — интерактивный режим выполнения кода строка за строкой.

Стандартная библиотека — набор модулей, поставляемых вместе с языком программирования.

Модуль — файл с кодом, который можно импортировать в другие программы.

pip — менеджер пакетов Python; инструмент для установки сторонних библиотек.

Виртуальное окружение (venv) — изолированная копия Python для конкретного проекта.

Node.js — среда выполнения JavaScript вне браузера, на сервере.

npm (Node Package Manager) — менеджер пакетов JavaScript.

package.json — файл-описание JavaScript-проекта: зависимости, скрипты, метаданные.

let — ключевое слово для объявления изменяемой переменной в JavaScript.

const — ключевое слово для объявления константы в JavaScript.

Шаблонные строки (template literals) — строки в обратных кавычках в JS, поддерживающие вставку переменных через ${}.

Стрелочная функция (arrow function) — краткий синтаксис функции в JavaScript: (x) => x * 2.

Массив (array) — упорядоченная коллекция в JavaScript; аналог списка Python.

Объект (object) — коллекция пар ключ-значение в JavaScript; аналог словаря Python.

Асинхронность — способность программы выполнять операции без блокировки основного потока.

Промис (Promise) — объект JavaScript, представляющий результат асинхронной операции.

async/await — синтаксис для удобной работы с асинхронным кодом.

TypeScript — надстройка над JavaScript с системой типов; генерируется ИИ-инструментами по умолчанию.

Бэкенд — серверная часть приложения, невидимая пользователю.

Фронтенд — клиентская часть приложения, то, что видит пользователь в браузере.

Основы веб-разработки и как устроен интернет

Основы веб-разработки и как устроен интернет

Каждый раз, когда вы открываете сайт, за кулисами разворачивается целый спектакль: ваш браузер отправляет запрос, сервер где-то в мире его обрабатывает, возвращает данные, браузер их рисует — и всё это за доли секунды. Вайбкодер, который понимает этот процесс, может создавать веб-приложения осознанно, а не наугад. Давайте разберём, как это работает.

Как браузер получает страницу

Когда вы вводите google.com в адресную строку, происходит следующее:

  1. Браузер спрашивает у DNS-сервера (Domain Name System) — это «телефонная книга» интернета — какой IP-адрес скрывается за именем google.com. IP-адрес — это числовой адрес сервера, например 142.250.185.46.

  2. Браузер устанавливает соединение с сервером по протоколу TCP/IP — набору правил передачи данных.

  3. Браузер отправляет HTTP-запрос (HyperText Transfer Protocol) — сообщение серверу: «дай мне главную страницу».

  4. Сервер обрабатывает запрос и отправляет HTTP-ответ: код состояния (200 — успех, 404 — не найдено, 500 — ошибка сервера) и содержимое страницы.

  5. Браузер получает HTML, CSS и JavaScript, разбирает их и рисует страницу.

Весь этот процесс называется клиент-серверной архитектурой: браузер — клиент (тот, кто запрашивает), сервер — тот, кто отвечает.

Три кита веб-страницы: HTML, CSS, JavaScript

Любая веб-страница состоит из трёх слоёв, каждый из которых отвечает за своё:

HTML (HyperText Markup Language) — структура и содержание. Это скелет страницы: заголовки, абзацы, кнопки, изображения, ссылки. HTML описывает что есть на странице.

CSS (Cascading Style Sheets) — внешний вид. Это одежда скелета: цвета, шрифты, отступы, анимации. CSS описывает как выглядит страница.

JavaScript — поведение. Это мышцы: реакция на клики, загрузка данных без перезагрузки страницы, анимации. JS описывает что происходит на странице.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
    <style>
        /* CSS прямо в HTML */
        h1 { color: #2563eb; font-family: sans-serif; }
        button { background: #2563eb; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Привет, вайбкодинг!</h1>
    <p>Это моя первая веб-страница.</p>
    <button onclick="greet()">Нажми меня</button>

    <script>
        // JavaScript прямо в HTML
        function greet() {
            alert("Привет! Ты нажал кнопку.");
        }
    </script>
</body>
</html>

Сохраните этот файл как index.html и откройте в браузере — вы увидите работающую страницу.

HTML: теги и атрибуты

HTML строится из тегов — специальных меток в угловых скобках. Большинство тегов парные: открывающий <p> и закрывающий </p>. Содержимое между ними — контент тега.

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<p>Абзац текста</p>
<a href="https://google.com">Ссылка</a>
<img src="photo.jpg" alt="Описание фото">
<ul>
    <li>Элемент списка</li>
    <li>Ещё один элемент</li>
</ul>
<div class="container">Блок-контейнер</div>
<span class="highlight">Строчный элемент</span>

Атрибуты — дополнительные параметры тега: href у ссылки задаёт адрес, src у изображения — путь к файлу, class — имя CSS-класса для стилизации.

CSS: стилизация через селекторы

CSS работает через селекторы — правила, которые указывают, к каким элементам применить стиль:

/* По тегу */
h1 {
    color: #1a1a2e;
    font-size: 32px;
    margin-bottom: 16px;
}

/* По классу (точка перед именем) */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* По ID (решётка перед именем) */
#main-title {
    text-align: center;
}

/* Псевдокласс — состояние элемента */
button:hover {
    background-color: #1d4ed8;
    transform: scale(1.05);
}

Сегодня большинство вайбкодеров не пишут CSS вручную — они используют Tailwind CSS, утилитарный CSS-фреймворк, где стили задаются прямо в HTML через классы:

<!-- Без Tailwind -->
<button class="btn-primary">Кнопка</button>

<!-- С Tailwind — стили прямо в классах -->
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
    Кнопка
</button>

Tailwind генерируется ИИ-инструментами по умолчанию — это стандарт современного вайбкодинга.

HTTP-запросы: язык общения клиента и сервера

Понимание HTTP-запросов критически важно для вайбкодера — именно через них ваше приложение общается с внешним миром.

HTTP-метод определяет тип операции:

Метод Назначение Аналогия
GET Получить данные Прочитать
POST Создать новые данные Написать
PUT Полностью обновить данные Переписать
PATCH Частично обновить данные Исправить
DELETE Удалить данные Удалить

Коды состояния HTTP — числовые ответы сервера:

  • 200 OK — всё хорошо
  • 201 Created — ресурс создан
  • 400 Bad Request — ошибка в запросе клиента
  • 401 Unauthorized — нужна авторизация
  • 403 Forbidden — доступ запрещён
  • 404 Not Found — ресурс не найден
  • 500 Internal Server Error — ошибка на сервере

Когда ИИ генерирует код и что-то идёт не так, первое, что нужно проверить — код ответа. 404 означает «неправильный URL», 401 — «забыли передать токен авторизации», 500 — «проблема на сервере».

Фронтенд и бэкенд: разделение труда

Современные веб-приложения делятся на две части:

Фронтенд (frontend) — всё, что работает в браузере пользователя. HTML, CSS, JavaScript. Пользователь видит и взаимодействует с фронтендом напрямую.

Бэкенд (backend) — серверная часть. Обрабатывает бизнес-логику, работает с базой данных, отвечает на запросы фронтенда. Пользователь его не видит.

База данных (database) — место, где хранятся данные приложения: пользователи, товары, заказы. Самые популярные: PostgreSQL, MySQL (реляционные — данные в таблицах), MongoDB (документная — данные в JSON-подобных документах).

Взаимодействие происходит через API — интерфейс, который бэкенд предоставляет фронтенду. Фронтенд отправляет HTTP-запросы к API, бэкенд возвращает данные в формате JSON.

Популярные фреймворки

Фреймворк (framework) — готовый каркас для разработки, который берёт на себя рутинные задачи и задаёт структуру проекта.

Для фронтенда:

  • React — библиотека от Meta для создания интерфейсов; самая популярная
  • Next.js — фреймворк на основе React с серверным рендерингом; стандарт для вайбкодинга
  • Vue.js — более простая альтернатива React

Для бэкенда:

  • FastAPI (Python) — быстрый, современный, отлично документируется автоматически
  • Django (Python) — «батарейки включены», всё из коробки
  • Express (Node.js) — минималистичный, гибкий

Когда вы просите ИИ создать веб-приложение, он скорее всего выберет Next.js + Tailwind для фронтенда и FastAPI или Express для бэкенда — это самые популярные комбинации в 2025 году.

Инструменты разработчика в браузере

Нажмите F12 в любом браузере — откроются DevTools (Developer Tools, инструменты разработчика). Это ваш главный инструмент отладки веб-приложений:

  • Elements — HTML-структура страницы, можно редактировать прямо в браузере
  • Console — вывод JavaScript, ошибки, место для экспериментов
  • Network — все HTTP-запросы: что отправлено, что получено, сколько времени заняло
  • Application — cookies, localStorage, sessionStorage

Вкладка Network — особенно важна для вайбкодера. Когда что-то не работает, откройте её, воспроизведите проблему и посмотрите, какой запрос упал и с каким кодом ответа.

Деплой: как опубликовать сайт

Деплой (deploy) — процесс публикации приложения так, чтобы оно было доступно в интернете. Для вайбкодера это обычно несколько команд или кликов.

Самые популярные платформы для деплоя:

Vercel — идеален для Next.js и статических сайтов. Подключаете GitHub-репозиторий, и каждый git push автоматически деплоит новую версию. Бесплатный тариф покрывает большинство учебных проектов.

Netlify — аналог Vercel, тоже отлично работает со статическими сайтами и фронтендом.

Railway — для бэкенда на Python или Node.js с базой данных. Проще, чем AWS или Google Cloud.

Render — ещё один вариант для бэкенда, есть бесплатный тариф.

Типичный рабочий процесс вайбкодера: написал код → запушил в GitHub → Vercel автоматически задеплоил → поделился ссылкой с клиентом. Весь цикл — несколько минут.

Глоссарий главы

DNS (Domain Name System) — «телефонная книга» интернета; переводит доменные имена в IP-адреса.

IP-адрес — числовой адрес устройства в сети.

HTTP (HyperText Transfer Protocol) — протокол передачи данных в вебе; набор правил общения клиента и сервера.

HTTP-запрос — сообщение от клиента серверу с просьбой выполнить операцию.

HTTP-ответ — ответ сервера на запрос клиента, содержащий код состояния и данные.

Клиент-серверная архитектура — модель, где клиент (браузер) запрашивает данные у сервера.

HTML (HyperText Markup Language) — язык разметки для создания структуры веб-страниц.

CSS (Cascading Style Sheets) — язык стилей для оформления веб-страниц.

Тег — элемент HTML-разметки в угловых скобках.

Атрибут — дополнительный параметр HTML-тега.

Tailwind CSS — утилитарный CSS-фреймворк; стили задаются классами прямо в HTML.

Фронтенд — клиентская часть приложения, работающая в браузере.

Бэкенд — серверная часть приложения, невидимая пользователю.

База данных — система хранения структурированных данных.

Фреймворк — готовый каркас для разработки приложений.

React — JavaScript-библиотека для создания пользовательских интерфейсов.

Next.js — фреймворк на основе React с серверным рендерингом.

FastAPI — современный Python-фреймворк для создания API.

DevTools — инструменты разработчика, встроенные в браузер.

Деплой (deploy) — публикация приложения в интернете.

Vercel — платформа для деплоя фронтенд-приложений.

Работа с API и внешними сервисами

Работа с API и внешними сервисами

Большинство интересных приложений не работают в изоляции. Они получают погоду от одного сервиса, платежи обрабатывают через другой, отправляют уведомления через третий. Всё это возможно благодаря API — и умение с ними работать превращает вайбкодера из создателя игрушечных прототипов в разработчика реальных продуктов.

Что такое API и зачем оно нужно

API (Application Programming Interface, программный интерфейс приложения) — это набор правил, по которым одна программа может общаться с другой. Представьте ресторан: вы не заходите на кухню и не готовите сами — вы делаете заказ официанту (API), который передаёт его на кухню (сервер) и приносит результат.

Когда приложение погоды на вашем телефоне показывает температуру — оно не хранит метеоданные само. Оно отправляет запрос к API погодного сервиса (например, OpenWeatherMap), получает данные в формате JSON и отображает их.

Большинство современных API — это REST API (Representational State Transfer). REST — это архитектурный стиль, набор принципов построения API. Три ключевых принципа REST:

  1. Ресурсы — всё, с чем работает API, является ресурсом с уникальным URL. /users — список пользователей, /users/42 — пользователь с ID 42.
  2. HTTP-методы — GET для получения, POST для создания, PUT/PATCH для обновления, DELETE для удаления.
  3. Stateless — каждый запрос самодостаточен; сервер не помнит предыдущих запросов.

Формат JSON: язык API

Почти все современные API общаются через JSON (JavaScript Object Notation) — текстовый формат данных, который выглядит как словарь Python:

{
    "id": 42,
    "name": "Алиса Иванова",
    "email": "alice@example.com",
    "is_active": true,
    "scores": [85, 92, 78],
    "address": {
        "city": "Москва",
        "country": "Россия"
    }
}

Python автоматически конвертирует JSON в словари и обратно через модуль json:

import json

# Строка JSON → словарь Python
json_string = '{"name": "Алиса", "age": 25}'
data = json.loads(json_string)
print(data["name"])   # Алиса

# Словарь Python → строка JSON
user = {"name": "Боб", "age": 30}
json_output = json.dumps(user, ensure_ascii=False, indent=2)
print(json_output)

Делаем первый запрос к реальному API

Библиотека requests — стандарт для HTTP-запросов в Python. Установите её: pip install requests.

Начнём с публичного API без авторизации — JSONPlaceholder, тестовый сервис с фиктивными данными:

import requests

# GET-запрос: получить список пользователей
response = requests.get("https://jsonplaceholder.typicode.com/users")

# Проверяем статус ответа
print(response.status_code)   # 200 — успех

# Получаем данные как список словарей
users = response.json()
print(f"Получено пользователей: {len(users)}")

for user in users[:3]:   # Первые три
    print(f"  {user['name']} — {user['email']}")

Теперь POST-запрос — создать новый ресурс:

new_post = {
    "title": "Мой первый пост",
    "body": "Содержимое поста",
    "userId": 1
}

response = requests.post(
    "https://jsonplaceholder.typicode.com/posts",
    json=new_post   # Автоматически сериализует в JSON и ставит правильный заголовок
)

print(response.status_code)   # 201 — создано
created = response.json()
print(f"Создан пост с ID: {created['id']}")

Авторизация: как API узнаёт, кто вы

Большинство реальных API требуют авторизации — подтверждения того, что вы имеете право делать запросы. Самый распространённый способ — API-ключ (API key): уникальная строка, которую вы получаете при регистрации в сервисе и передаёте с каждым запросом.

import requests
import os

# Никогда не хардкодьте ключи прямо в коде!
# Храните их в переменных окружения
API_KEY = os.environ.get("OPENWEATHER_API_KEY")

city = "Moscow"
url = f"https://api.openweathermap.org/data/2.5/weather"

params = {
    "q": city,
    "appid": API_KEY,
    "units": "metric",
    "lang": "ru"
}

response = requests.get(url, params=params)

if response.status_code == 200:
    data = response.json()
    temp = data["main"]["temp"]
    description = data["weather"][0]["description"]
    print(f"Погода в {city}: {temp}°C, {description}")
elif response.status_code == 401:
    print("Ошибка: неверный API-ключ")
elif response.status_code == 404:
    print("Ошибка: город не найден")

Второй популярный способ — Bearer-токен (Bearer token): токен передаётся в заголовке запроса:

headers = {
    "Authorization": f"Bearer {your_token}",
    "Content-Type": "application/json"
}

response = requests.get("https://api.example.com/data", headers=headers)

Переменные окружения: безопасное хранение секретов

Правило номер один при работе с API: никогда не храните ключи в коде. Если вы запушите файл с ключом на GitHub — боты найдут его за минуты и начнут использовать за ваш счёт.

Переменные окружения (environment variables) — переменные операционной системы, доступные программе, но не хранящиеся в коде. Стандартный подход — файл .env:

# Файл .env (добавьте его в .gitignore!)
OPENWEATHER_API_KEY=abc123xyz
DATABASE_URL=postgresql://user:password@localhost/mydb
TELEGRAM_BOT_TOKEN=1234567890:AABBccDDee
# Загрузка переменных окружения
from dotenv import load_dotenv
import os

load_dotenv()   # Читает файл .env

api_key = os.environ.get("OPENWEATHER_API_KEY")
db_url = os.environ.get("DATABASE_URL")

Установите библиотеку: pip install python-dotenv. И обязательно добавьте .env в файл .gitignore — список файлов, которые Git не должен отслеживать.

Обработка ошибок: код, который не падает

Сетевые запросы могут упасть по множеству причин: нет интернета, сервер недоступен, истёк таймаут, неверный ключ. Профессиональный код обрабатывает все эти случаи:

import requests
from requests.exceptions import ConnectionError, Timeout, RequestException

def get_weather(city: str, api_key: str) -> dict | None:
    """Получает погоду для города. Возвращает None при ошибке."""
    url = "https://api.openweathermap.org/data/2.5/weather"

    try:
        response = requests.get(
            url,
            params={"q": city, "appid": api_key, "units": "metric"},
            timeout=10   # Максимальное время ожидания — 10 секунд
        )
        response.raise_for_status()   # Вызовет исключение при 4xx/5xx
        return response.json()

    except ConnectionError:
        print("Ошибка: нет подключения к интернету")
    except Timeout:
        print("Ошибка: сервер не ответил вовремя")
    except requests.HTTPError as e:
        print(f"HTTP ошибка: {e.response.status_code}")
    except RequestException as e:
        print(f"Неизвестная ошибка: {e}")

    return None

Метод raise_for_status() — удобный способ автоматически вызвать исключение для любого кода ошибки (4xx или 5xx), не проверяя статус вручную.

Реальный кейс: телеграм-бот за 30 минут

Вот как выглядит работа с API в реальном проекте. Создадим простого телеграм-бота, который отвечает на команду /weather Москва данными о погоде.

Сначала установите библиотеки:

pip install python-telegram-bot requests python-dotenv
import os
import requests
from dotenv import load_dotenv
from telegram import Update
from telegram.ext import Application, CommandHandler, ContextTypes

load_dotenv()

TELEGRAM_TOKEN = os.environ.get("TELEGRAM_BOT_TOKEN")
WEATHER_KEY = os.environ.get("OPENWEATHER_API_KEY")

async def weather_command(update: Update, context: ContextTypes.DEFAULT_TYPE):
    """Обработчик команды /weather."""
    if not context.args:
        await update.message.reply_text("Укажите город: /weather Москва")
        return

    city = " ".join(context.args)

    response = requests.get(
        "https://api.openweathermap.org/data/2.5/weather",
        params={"q": city, "appid": WEATHER_KEY, "units": "metric", "lang": "ru"}
    )

    if response.status_code == 200:
        data = response.json()
        temp = data["main"]["temp"]
        feels_like = data["main"]["feels_like"]
        description = data["weather"][0]["description"]

        message = (
            f"🌤 Погода в {city}:\n"
            f"Температура: {temp}°C (ощущается как {feels_like}°C)\n"
            f"Описание: {description.capitalize()}"
        )
    else:
        message = f"Не удалось найти погоду для '{city}'"

    await update.message.reply_text(message)

def main():
    app = Application.builder().token(TELEGRAM_TOKEN).build()
    app.add_handler(CommandHandler("weather", weather_command))
    app.run_polling()

if __name__ == "__main__":
    main()

Этот бот — полноценный рабочий продукт. Он использует два API: Telegram Bot API и OpenWeatherMap API. Именно такие проекты вайбкодеры создают за один вечер.

Популярные публичные API для практики

Начните с бесплатных API, которые не требуют сложной регистрации:

  • JSONPlaceholder (jsonplaceholder.typicode.com) — тестовые данные, без ключа
  • OpenWeatherMap (openweathermap.org/api) — погода, бесплатный тариф 1000 запросов/день
  • CoinGecko (coingecko.com/api) — курсы криптовалют, без ключа
  • The Dog API (thedogapi.com) — фото собак, без ключа
  • GitHub API (api.github.com) — данные репозиториев, без ключа для публичных данных

Глоссарий главы

API (Application Programming Interface) — набор правил для взаимодействия программ друг с другом.

REST API — архитектурный стиль построения API на основе HTTP-методов и ресурсов.

JSON (JavaScript Object Notation) — текстовый формат данных для обмена между программами.

Endpoint (эндпоинт) — конкретный URL-адрес API для определённой операции.

API-ключ (API key) — уникальная строка для идентификации клиента при запросах к API.

Bearer-токен — токен авторизации, передаваемый в заголовке HTTP-запроса.

Переменные окружения (environment variables) — переменные операционной системы для хранения конфиденциальных данных.

.env-файл — файл с переменными окружения для локальной разработки; не должен попадать в Git.

.gitignore — файл со списком файлов и папок, которые Git не отслеживает.

requests — популярная Python-библиотека для HTTP-запросов.

raise_for_status() — метод библиотеки requests, вызывающий исключение при HTTP-ошибке.

Таймаут (timeout) — максимальное время ожидания ответа от сервера.

Заголовки (headers) — метаданные HTTP-запроса или ответа.

Параметры запроса (query params) — данные, передаваемые в URL после знака ?.

Stateless — принцип REST: каждый запрос самодостаточен, сервер не хранит состояние сессии.

Git и контроль версий — ваш ежедневный инструмент

Git и контроль версий — ваш ежедневный инструмент

Представьте: вы три часа работали над проектом, добавили новую функцию — и всё сломалось. Вы не помните, что именно изменили. Кнопка «Отменить» в редакторе уже не поможет. Именно для таких ситуаций существует Git — и именно поэтому ни один профессиональный разработчик не работает без него. Для вайбкодера Git — это не просто инструмент, это страховочный трос.

Что такое Git и зачем он нужен

Git — система контроля версий (version control system, VCS): программа, которая отслеживает все изменения в файлах проекта и позволяет вернуться к любой предыдущей версии.

Аналогия: представьте, что вы пишете книгу и каждый день сохраняете новую копию — «книга_v1.docx», «книга_v2.docx», «книга_финал.docx», «книга_финал_ТОЧНО_ФИНАЛ.docx». Git делает то же самое, но автоматически, умно и без захламления папки.

Git создал Линус Торвальдс (тот самый, что создал Linux) в 2005 году за две недели — потому что ему срочно понадобился инструмент для разработки ядра Linux. Сегодня Git используют практически все разработчики мира.

GitHub — это не Git. GitHub — это веб-платформа для хранения Git-репозиториев в облаке и совместной работы. Git — инструмент на вашем компьютере, GitHub — место, куда вы загружаете результат. Аналогия: Git — это Microsoft Word, GitHub — это Google Drive.

Ключевые концепции

Репозиторий (repository, repo) — папка проекта, за которой следит Git. Внутри неё Git создаёт скрытую папку .git, где хранит всю историю изменений.

Коммит (commit) — «снимок» состояния проекта в определённый момент. Каждый коммит имеет уникальный идентификатор, автора, дату и сообщение, описывающее изменения.

Ветка (branch) — независимая линия разработки. Представьте дерево: основной ствол — это ветка main, а от неё отходят ветки для новых функций. Вы можете работать в ветке, не затрагивая основной код.

Индекс (staging area) — промежуточная зона между рабочей папкой и коммитом. Вы выбираете, какие изменения включить в следующий коммит.

Установка и первоначальная настройка

Скачайте Git с git-scm.com. После установки настройте имя и email — они будут указаны в каждом коммите:

git config --global user.name "Ваше Имя"
git config --global user.email "your@email.com"
git config --global init.defaultBranch main   # Ветка по умолчанию

Базовый рабочий процесс

Вот команды, которые вы будете использовать каждый день:

# Инициализировать репозиторий в текущей папке
git init

# Проверить статус — что изменилось
git status

# Добавить файл в индекс (подготовить к коммиту)
git add filename.py

# Добавить все изменённые файлы
git add .

# Создать коммит с сообщением
git commit -m "Добавил функцию расчёта скидки"

# Посмотреть историю коммитов
git log --oneline

Типичный цикл работы: изменили файлы → git add .git commit -m "описание" → повторить.

Правила хороших сообщений коммитов

Сообщение коммита — это письмо себе из будущего. Через месяц вы откроете историю и должны понять, что происходило:

# Плохо
git commit -m "fix"
git commit -m "изменения"
git commit -m "asdfgh"

# Хорошо
git commit -m "Исправил ошибку валидации email в форме регистрации"
git commit -m "Добавил кэширование запросов к API погоды"
git commit -m "Рефакторинг: вынес логику расчёта в отдельную функцию"

Популярный стандарт — Conventional Commits: начинать сообщение с типа изменения:

  • feat: — новая функциональность
  • fix: — исправление ошибки
  • docs: — изменения в документации
  • refactor: — рефакторинг без изменения функциональности

Работа с GitHub

# Клонировать существующий репозиторий с GitHub
git clone https://github.com/username/repo-name.git

# Связать локальный репозиторий с удалённым
git remote add origin https://github.com/username/repo-name.git

# Отправить изменения на GitHub
git push origin main

# Получить изменения с GitHub
git pull origin main

origin — стандартное имя для удалённого репозитория. Это просто псевдоним для длинного URL.

Ветки: работайте безопасно

Ветки — это суперсила Git. Правило профессионала: никогда не работайте напрямую в ветке main. Всегда создавайте отдельную ветку для каждой задачи:

# Создать новую ветку и переключиться на неё
git checkout -b feature/weather-widget

# Посмотреть все ветки
git branch

# Переключиться на существующую ветку
git checkout main

# Слить ветку в main (после завершения работы)
git checkout main
git merge feature/weather-widget

# Удалить ветку после слияния
git branch -d feature/weather-widget

Зачем это нужно? Пока вы работаете над новой функцией в отдельной ветке, ветка main остаётся стабильной. Если что-то пошло не так — просто удалите ветку и начните заново.

.gitignore: что не нужно отслеживать

Не все файлы должны попадать в репозиторий. Файл .gitignore в корне проекта содержит список исключений:

# Виртуальное окружение Python
venv/
.env

# Кэш Python
__pycache__/
*.pyc

# Зависимости Node.js
node_modules/

# Системные файлы
.DS_Store
Thumbs.db

# Файлы IDE
.vscode/
.idea/

Создайте .gitignore в самом начале проекта — до первого коммита. Если вы случайно закоммитили .env с секретами — немедленно смените все ключи, они скомпрометированы.

Откат изменений: когда всё пошло не так

Это то, ради чего Git и существует:

# Отменить изменения в файле (до git add)
git checkout -- filename.py

# Убрать файл из индекса (после git add, до commit)
git reset HEAD filename.py

# Вернуться к предыдущему коммиту (безопасно — создаёт новый коммит)
git revert HEAD

# Жёсткий откат к конкретному коммиту (ОСТОРОЖНО — удаляет историю)
git reset --hard abc1234

# Посмотреть что изменилось
git diff
git diff --staged   # Изменения в индексе

Команда git reset --hard — мощная и опасная. Она удаляет все незакоммиченные изменения без возможности восстановления. Используйте только когда уверены.

Типичный рабочий процесс вайбкодера

Вот как выглядит реальная работа с Git при вайбкодинге:

# 1. Начало работы над задачей
git checkout -b feature/add-payment

# 2. Работаете, просите ИИ генерировать код, тестируете

# 3. Коммит после каждого рабочего состояния
git add .
git commit -m "feat: добавил форму оплаты"

# 4. ИИ сломал что-то — откатываемся
git checkout -- broken_file.py

# 5. Задача готова — пушим
git push origin feature/add-payment

# 6. На GitHub создаём Pull Request для ревью

Правило трёх попыток: если ИИ не может починить баг за три итерации — откатывайтесь на последний рабочий коммит и пробуйте другой подход.

diffnotes.tech

Pull Request: код-ревью и совместная работа

Pull Request (PR) — запрос на слияние вашей ветки в основную. Это стандартный механизм совместной работы на GitHub:

  1. Вы создаёте ветку, делаете изменения, пушите на GitHub
  2. На GitHub нажимаете «New Pull Request»
  3. Описываете, что сделали и зачем
  4. Коллеги (или вы сами) проверяют код
  5. После одобрения ветка сливается в main

Даже если вы работаете в одиночку, PR — хорошая практика: он заставляет вас описать изменения и ещё раз их просмотреть.

Глоссарий главы

Git — система контроля версий; отслеживает изменения в файлах проекта.

GitHub — веб-платформа для хранения Git-репозиториев и совместной работы.

Репозиторий (repository, repo) — папка проекта под управлением Git.

Коммит (commit) — «снимок» состояния проекта в определённый момент с сообщением.

Ветка (branch) — независимая линия разработки.

main — основная ветка репозитория (раньше называлась master).

Индекс (staging area) — промежуточная зона для подготовки коммита.

git init — инициализировать репозиторий в текущей папке.

git add — добавить файлы в индекс.

git commit — создать коммит.

git push — отправить коммиты на удалённый репозиторий.

git pull — получить изменения с удалённого репозитория.

git clone — скопировать репозиторий с GitHub на компьютер.

origin — стандартное имя для удалённого репозитория.

.gitignore — файл со списком файлов, которые Git не отслеживает.

git merge — слить одну ветку в другую.

git revert — отменить коммит, создав новый коммит-отмену.

git reset --hard — жёсткий откат к коммиту; удаляет незакоммиченные изменения.

Pull Request (PR) — запрос на слияние ветки; механизм код-ревью на GitHub.

Conventional Commits — стандарт именования коммитов с префиксами feat:, fix: и т.д.

Промпт-инженерия: как правильно общаться с ИИ

Промпт-инженерия: как правильно общаться с ИИ

Два человека открывают один и тот же ИИ-инструмент. Первый пишет «сделай сайт» и получает что-то невнятное. Второй пишет детальный запрос с контекстом, ограничениями и примерами — и получает готовый рабочий прототип. Разница между ними — не в доступе к инструментам и не в технических знаниях. Разница в умении формулировать задачи. Это и есть промпт-инженерия.

Почему промпт — это не просто вопрос

Языковая модель — это не поисковик и не калькулятор. Это система, которая предсказывает наиболее вероятное продолжение текста на основе огромного количества обучающих данных. Когда вы пишете промпт, вы буквально задаёте контекст, из которого модель «вырастает» в ответ.

Плохой промпт даёт модели мало контекста — она заполняет пробелы своими предположениями, которые могут не совпадать с вашими ожиданиями. Хороший промпт сужает пространство возможных ответов до того, что вам действительно нужно.

Вот наглядный пример. Задача одна и та же — создать форму регистрации:

Плохой промпт:

Сделай форму регистрации

Хороший промпт:

Создай форму регистрации пользователя на React с Tailwind CSS.
Поля: имя (обязательное), email (обязательное, с валидацией формата),
пароль (минимум 8 символов, с показом/скрытием), подтверждение пароля.
Кнопка "Зарегистрироваться" — неактивна пока форма не заполнена корректно.
При успешной отправке показать toast-уведомление "Регистрация успешна!".
Обработать ошибку сети — показать сообщение об ошибке под формой.
Стиль: минималистичный, тёмная тема, скруглённые углы.

Второй промпт займёт на 30 секунд больше, но сэкономит 30 минут итераций.

Анатомия эффективного промпта

Хороший промпт для кодинга состоит из нескольких компонентов. Не обязательно использовать все сразу — выбирайте нужные для конкретной задачи.

Роль — кем должен выступать ИИ. Это не магия, но работает: когда вы говорите «ты — опытный Python-разработчик», модель активирует паттерны, характерные для экспертного кода.

Контекст — что уже есть, какой стек, какова цель. Без контекста модель угадывает.

Задача — что конкретно нужно сделать. Одна задача — один промпт.

Ограничения — что нельзя делать, какие требования к качеству.

Формат вывода — как должен выглядеть результат.

[Роль] Ты — опытный Python-разработчик, специализирующийся на FastAPI.

[Контекст] Я строю REST API для приложения управления задачами.
Стек: Python 3.11, FastAPI, SQLAlchemy, PostgreSQL, Pydantic v2.
Уже реализованы: модели User и Project.

[Задача] Создай эндпоинт POST /tasks для создания новой задачи.

[Ограничения]
- Задача должна принадлежать существующему проекту
- Только авторизованный пользователь может создавать задачи
- Валидация: title обязателен (1-200 символов), due_date не может быть в прошлом

[Формат] Верни: Pydantic-схему TaskCreate, функцию-обработчик с комментариями,
пример запроса и ответа в формате JSON.

Шаблон CRISP: структура для сложных задач

Один из самых эффективных шаблонов для технических промптов — CRISP, описанный в практических руководствах по вайбкодингу (raudonis.ru):

  • Context — контекст: стек, цель, аудитория
  • Role — роль ИИ: архитектор, ревьюер, тест-дизайнер
  • Inputs — входные данные: файлы, примеры, референсы
  • Steps — шаги: что сделать по порядку
  • Parameters — параметры: ограничения, метрики качества
Context: Next.js 14, Tailwind CSS, мобильный трафик 70%,
цель — лендинг для сбора заявок на консультацию.

Role: Ты — фронтенд-архитектор и верстальщик.

Inputs: Цветовая схема — синий #2563EB и белый.
Секции: Hero, Преимущества (3 карточки), Форма заявки.

Steps:
1. Создай структуру компонентов
2. Сверстай Hero с заголовком, подзаголовком и CTA-кнопкой
3. Добавь секцию преимуществ с иконками
4. Создай форму с полями имя, телефон, кнопка отправки

Parameters: Lighthouse Performance ≥ 90, адаптивность для мобильных,
анимации при скролле через Framer Motion.

Техника «сначала план, потом код»

Одно из самых ценных правил вайбкодинга: запретите ИИ писать код до утверждения плана. Это кажется контринтуитивным — зачем тормозить? Но на практике это экономит часы.

Перед написанием кода опиши план:
- Какие файлы будут созданы/изменены
- Какова архитектура решения
- Какие зависимости потребуются
- Есть ли альтернативные подходы?

Не пиши код — только план. Я хочу сначала его проверить.

Когда вы видите план, вы можете заметить проблему до того, как ИИ написал 200 строк кода в неправильном направлении. Как отмечают практики вайбкодинга, в 90% случаев ИИ предложит избыточно сложное решение — и план позволяет это увидеть и попросить упростить.

Итеративные промпты: диалог, а не монолог

Вайбкодинг — это диалог. Первый промпт редко даёт идеальный результат, и это нормально. Важно уметь итерировать:

# Первый промпт — общая задача
Создай компонент карточки товара для интернет-магазина.

# Уточнение после просмотра результата
Хорошо. Теперь добавь кнопку "В корзину" — она должна менять
состояние на "Добавлено ✓" после клика и возвращаться через 2 секунды.

# Исправление конкретной проблемы
При клике на кнопку появляется ошибка в консоли:
"Cannot read property 'id' of undefined"
Вот полный стек трейса: [вставить]
Исправь, не меняя остальную логику компонента.

# Оптимизация
Компонент перерендеривается при каждом изменении корзины.
Оптимизируй с помощью React.memo и useMemo где нужно.

Каждый промпт в цепочке — конкретный, с чётким запросом. Не «сделай лучше», а «добавь конкретно это» или «исправь конкретно это».

Промпты для отладки

Отладка с ИИ — отдельное искусство. Главное правило: давайте максимум контекста.

# Плохо
Почему не работает?

# Хорошо
При нажатии кнопки "Сохранить" на странице настроек вижу ошибку:

TypeError: Cannot read properties of undefined (reading 'email')
    at ProfileForm.handleSubmit (ProfileForm.jsx:45)
    at HTMLButtonElement.onclick

Ожидаемое поведение: клик сохраняет данные профиля и показывает
уведомление "Сохранено".

Текущее поведение: страница крашится с ошибкой выше.

Вот код компонента: [вставить код]

Что не так и как исправить?

Полный стек трейс (трассировка стека вызовов — список функций, которые привели к ошибке) — обязателен. Без него ИИ будет угадывать.

Промпты для код-ревью и улучшения

ИИ отлично справляется с ролью строгого ревьюера:

Проведи код-ревью этой функции. Обрати внимание на:
1. Потенциальные баги и edge cases
2. Безопасность (SQL-инъекции, XSS, утечка данных)
3. Производительность
4. Читаемость и соответствие best practices Python

Для каждой проблемы: опиши проблему, объясни почему это плохо,
предложи исправление с примером кода.

[вставить код]
Этот код работает, но выглядит громоздко. Перепиши его более
питонически, используя list comprehension, встроенные функции
и идиомы Python. Объясни каждое изменение.

Управление контекстом в длинных сессиях

Языковые модели имеют ограниченное контекстное окно (context window) — максимальный объём текста, который они «помнят» в рамках одного диалога. В длинных сессиях ранние части разговора «вытесняются».

Практические советы:

Используйте @-упоминания файлов в Cursor и аналогичных инструментах — вместо того чтобы копировать код в чат, укажите файл напрямую: @src/components/Form.tsx.

Начинайте новую сессию для новой задачи — не тащите контекст предыдущей задачи в новую.

Создайте файл CONTEXT.md в корне проекта с описанием стека, архитектуры и ключевых решений. В начале каждой сессии: «Прочитай @CONTEXT.md и учитывай при ответах».

Суммируйте длинные сессии: «Подведи итог: что мы сделали, какие решения приняли, что осталось сделать». Используйте это как начало следующей сессии.

Типичные ошибки в промптах

Слишком широкий запрос. «Создай интернет-магазин» — это проект на несколько месяцев. Разбейте на конкретные задачи: «Создай компонент карточки товара», «Создай страницу корзины», «Создай форму оформления заказа».

Отсутствие стека. «Сделай форму» — ИИ выберет стек сам, и он может не совпасть с вашим проектом. Всегда указывайте технологии.

Игнорирование ошибок. Если ИИ сгенерировал код с ошибкой и вы просто пишете «не работает» — это плохой промпт. Скопируйте точный текст ошибки.

Принятие всего без проверки. ИИ уверенно пишет код, который может содержать баги, устаревшие API или несуществующие библиотеки. Всегда запускайте и тестируйте.

Глоссарий главы

Промпт (prompt) — запрос или инструкция для ИИ.

Промпт-инженерия (prompt engineering) — искусство составления эффективных запросов к ИИ.

Контекстное окно (context window) — максимальный объём текста, который языковая модель обрабатывает за один раз.

CRISP — шаблон промпта: Context, Role, Inputs, Steps, Parameters.

Итеративный промпт — цепочка уточняющих запросов для постепенного улучшения результата.

Стек трейс (stack trace) — трассировка стека вызовов; список функций, приведших к ошибке.

Код-ревью (code review) — проверка кода на качество, баги и соответствие стандартам.

Edge case — граничный случай; нестандартная ситуация, которую программа должна обрабатывать корректно.

@-упоминание — способ передать файл в контекст ИИ-инструмента напрямую, без копирования кода.

Best practices — лучшие практики; проверенные подходы к написанию качественного кода.

Инструменты вайбкодинга: Cursor, Claude, Copilot и другие

Инструменты вайбкодинга: Cursor, Claude, Copilot и другие

Инструменты вайбкодинга в 2025–2026 году — это уже не эксперимент, а полноценная экосистема. Каждый месяц появляются новые продукты, старые обновляются, и разобраться в этом многообразии непросто. Давайте пройдёмся по ключевым инструментам: что они умеют, чем отличаются и когда какой выбрать.

Cursor: главный инструмент профессионального вайбкодера

Cursor — это редактор кода на основе VS Code с глубоко встроенным ИИ. Если вы уже знакомы с VS Code, переход займёт несколько минут: интерфейс идентичен, все расширения совместимы.

Скачать: cursor.com. Бесплатный тариф с ограничениями, Pro — 20 долл./месяц.

Ключевые возможности Cursor

Composer (Agent mode) — главная фича. Вы описываете задачу, и Cursor сам создаёт и редактирует несколько файлов одновременно, запускает команды в терминале, исправляет ошибки. Это не просто автодополнение — это полноценный агент.

Chat — боковая панель для диалога с ИИ. Можно задавать вопросы о коде, просить объяснения, запрашивать рефакторинг. Поддерживает @-упоминания файлов, папок, документации.

Inline edit — нажмите Ctrl+K на любом участке кода и напишите, что изменить. ИИ покажет diff (разницу между старым и новым кодом), вы принимаете или отклоняете.

Tab completion — умное автодополнение, которое предсказывает не просто следующее слово, а целые блоки кода на основе контекста проекта.

Rules — файл .cursor/rules/ с инструкциями для ИИ, которые применяются ко всему проекту. Здесь вы задаёте стек, кодстайл, архитектурные принципы:

# .cursor/rules/project.md

## Стек
- Python 3.11, FastAPI, SQLAlchemy 2.0, Pydantic v2
- PostgreSQL для базы данных
- Alembic для миграций

## Правила кода
- Используй async/await везде где возможно
- Все функции должны иметь type hints
- Обрабатывай ошибки через HTTPException с понятными сообщениями
- Не добавляй новые зависимости без явного запроса

## Структура проекта
- Роутеры в /routers, модели в /models, схемы в /schemas

Правильно настроенный Rules-файл — это разница между «ИИ угадывает» и «ИИ точно знает контекст».

GitHub Copilot: ИИ прямо в вашем редакторе

GitHub Copilot — плагин для VS Code, JetBrains IDE и других редакторов. В отличие от Cursor, это не отдельный редактор, а расширение к существующему.

Подключить: github.com/features/copilot. Бесплатный тариф с лимитами, Pro — 10 долл./месяц.

Copilot силён в автодополнении: он видит, что вы пишете, и предлагает продолжение — от одной строки до целой функции. Нажмите Tab, чтобы принять предложение.

Copilot Chat — диалоговый режим, аналог Cursor Chat. Можно спросить «объясни этот код», «напиши тест для этой функции», «найди баг».

Copilot Edits — более новая функция, позволяющая редактировать несколько файлов по описанию задачи — аналог Cursor Composer, но менее мощный.

Когда выбрать Copilot вместо Cursor: если вы уже работаете в JetBrains IDE (PyCharm, IntelliJ) или хотите ИИ-помощника без смены редактора.

Bolt.new и Lovable: создание приложений в браузере

Эти инструменты — для тех, кто хочет получить работающее приложение максимально быстро, без установки чего-либо.

Bolt.new (bolt.new) — веб-IDE в браузере. Вы описываете приложение, Bolt генерирует полный React/Next.js проект, показывает превью в реальном времени и деплоит в один клик. Идеален для быстрых прототипов и лендингов.

Lovable (lovable.dev) — аналог Bolt с акцентом на полноценные веб-приложения. Интегрируется с Supabase для бэкенда и базы данных. Хорошо подходит для стартап-MVP.

v0 by Vercel (v0.dev) — специализируется на генерации React UI-компонентов. Описываете интерфейс — получаете готовый код с shadcn/ui. Отличное качество дизайна.

Как отмечает reymer.ai: для полных новичков лучше всего подойдут bolt.new или Lovable — они работают прямо в браузере, не требуют установки и позволяют деплоить приложение в один клик.

Replit: облачная IDE с ИИ-агентом

Replit (replit.com) — облачная среда разработки, которую вы уже использовали в начале курса. Replit Agent — ИИ, который создаёт приложения с нуля прямо в облаке, включая бэкенд и базу данных.

Главное преимущество: всё работает в браузере, не нужно настраивать окружение. Готовое приложение можно сразу запустить на сервере Replit.

Минус: браузерный редактор медленнее нативного, и для серьёзной работы профессионалы предпочитают Cursor.

Языковые модели: что стоит за инструментами

Все перечисленные инструменты — это оболочки над языковыми моделями. Понимание того, какая модель используется, помогает выбрать правильный инструмент для задачи.

Claude (Anthropic) — отлично работает с большими контекстами, хорошо понимает архитектурные задачи, генерирует чистый и хорошо структурированный код. Cursor по умолчанию использует Claude Sonnet.

GPT-4.1 / GPT-o3 (OpenAI) — сильны в программировании, особенно GPT-4.1 для кодинга и GPT-o3 для сложных задач с рассуждением.

Gemini (Google) — хорошо работает с большими кодовыми базами благодаря огромному контекстному окну.

В Cursor вы можете выбирать модель для каждого запроса. Практический совет: используйте Claude Sonnet для большинства задач, переключайтесь на более мощные модели для сложных архитектурных решений.

Сравнение инструментов: что выбрать

Инструмент Для кого Сильная сторона Цена
Cursor Разработчики Мощный агент, работа с проектом $20/мес
GitHub Copilot Разработчики в JetBrains/VS Code Автодополнение, интеграция $10/мес
Bolt.new Новички, предприниматели Быстрый старт, деплой в клик Freemium
Lovable Стартапы Полный стек с Supabase $20/мес
v0 by Vercel Дизайнеры, фронтендеры Качественный UI Freemium
Replit Новички, студенты Всё в браузере $25/мес

Практический рабочий процесс с Cursor

Вот как выглядит типичный день вайбкодера с Cursor:

Утро: новая задача

1. git checkout -b feature/user-notifications
2. Открыть Cursor Composer (Ctrl+Shift+I)
3. Написать промпт с контекстом задачи
4. Просмотреть план, уточнить
5. Принять генерацию кода

В процессе работы:

- Ctrl+K для быстрых правок в конкретном месте
- Ctrl+L для вопросов в чате
- @filename для передачи файла в контекст
- Tab для принятия автодополнений

Отладка:

1. Запустить код, получить ошибку
2. Скопировать стек трейс
3. Вставить в Cursor Chat: "Вот ошибка: [трейс]. Вот код: @file.py. Что не так?"
4. Применить исправление
5. git commit -m "fix: исправил ошибку X"

Расширения и дополнительные инструменты

Supermaven — альтернатива Copilot с очень быстрым автодополнением. Бесплатный тариф щедрее.

Cline — плагин с открытым исходным кодом для VS Code, позволяет подключить любую модель через API. Хорош для экспериментов.

Repomix — инструмент, который «упаковывает» весь репозиторий в один файл для передачи в контекст ИИ. Полезно для анализа больших проектов.

Continue — ещё один open-source плагин для VS Code с поддержкой локальных моделей.

Глоссарий главы

Cursor — редактор кода на основе VS Code с глубоко встроенным ИИ; основной инструмент профессионального вайбкодера.

Composer / Agent mode — режим Cursor, в котором ИИ самостоятельно создаёт и редактирует несколько файлов.

GitHub Copilot — ИИ-плагин для редакторов кода от GitHub.

Diff — разница между старой и новой версией кода; показывает что добавлено и что удалено.

Bolt.new — веб-IDE в браузере для быстрого создания React/Next.js приложений.

Lovable — ИИ-конструктор веб-приложений с интеграцией Supabase.

v0 by Vercel — ИИ-генератор React UI-компонентов.

Replit — облачная IDE с ИИ-агентом; работает в браузере.

shadcn/ui — библиотека готовых React-компонентов; используется v0 и многими вайбкодерами.

Supabase — открытая альтернатива Firebase; предоставляет базу данных, авторизацию и API.

Rules-файл — файл с инструкциями для ИИ, применяемыми ко всему проекту в Cursor.

Inline edit — редактирование кода прямо в файле через ИИ (Ctrl+K в Cursor).

Tab completion — принятие предложения автодополнения нажатием Tab.

Repomix — инструмент для упаковки репозитория в один файл для передачи в контекст ИИ.

Техники быстрого прототипирования и итеративной разработки

Техники быстрого прототипирования и итеративной разработки

Есть два способа создавать продукты. Первый: три месяца планировать, проектировать и писать «идеальный» код — а потом обнаружить, что пользователям нужно совсем другое. Второй: за день сделать грубый рабочий прототип, показать реальным людям, получить обратную связь и улучшать. Вайбкодинг создан для второго подхода — и именно он побеждает.

Почему скорость важнее совершенства на старте

Стартап-культура давно усвоила урок, который сформулировал Рид Хоффман, сооснователь LinkedIn:

«If you are not embarrassed by the first version of your product, you've launched too late.»

Если вам не стыдно за первую версию продукта — вы запустились слишком поздно. Это не призыв к халтуре. Это признание того, что ни один план не выживает при контакте с реальными пользователями. Быстрый прототип — это способ проверить гипотезу с минимальными затратами.

Прототип — это не финальный продукт. Это инструмент для проверки идеи. Он может быть некрасивым, медленным, с захардкоженными данными — главное, что он демонстрирует ключевую ценность.

MVP: минимально жизнеспособный продукт

MVP (Minimum Viable Product) — самая простая версия продукта, которая уже решает основную проблему пользователя. Не «минимальный» в смысле «плохой» — минимальный в смысле «без лишнего».

Классический пример: Dropbox не начинал с написания сложного клиента синхронизации файлов. Основатель Дрю Хьюстон сначала снял трёхминутное видео, объясняющее концепцию, и разместил его на форуме. За ночь на ранний доступ записались 75 000 человек. Только после этого они начали строить продукт.

Для вайбкодера MVP — это то, что можно создать за один-два дня с помощью ИИ-инструментов. Вот как думать об MVP:

Задайте один вопрос: «Какую одну проблему решает мой продукт?» Всё остальное — за пределами MVP.

Уберите всё необязательное: авторизация, личный кабинет, история, уведомления, настройки — это всё версия 2.0. MVP — это только ядро.

Проверьте гипотезу: покажите MVP реальным людям как можно раньше. Не друзьям, которые скажут «классно» — потенциальным пользователям, которые скажут правду.

Техника вертикального среза

Вертикальный срез (vertical slice) — подход, при котором вы реализуете одну функцию полностью, от интерфейса до базы данных, прежде чем переходить к следующей.

Противоположность — горизонтальный подход: сначала вся база данных, потом весь бэкенд, потом весь фронтенд. Проблема горизонтального подхода: вы не можете показать работающий продукт до самого конца.

# Горизонтальный подход (плохо для MVP)
Неделя 1: Все модели базы данных
Неделя 2: Все API-эндпоинты
Неделя 3: Весь фронтенд
Неделя 4: Интеграция и тесты
→ Работающий продукт только через месяц

# Вертикальный срез (хорошо для MVP)
День 1: Регистрация пользователя — от формы до базы данных
День 2: Создание задачи — от кнопки до сохранения
День 3: Список задач — от запроса до отображения
→ Работающий прототип через три дня

При вайбкодинге вертикальный срез — стандарт. Каждый промпт к ИИ должен описывать одну полную функцию, а не часть нескольких.

Итеративная разработка: цикл «сделал — проверил — улучшил»

Итеративная разработка — подход, при котором продукт улучшается короткими циклами. Каждый цикл (итерация) включает: планирование → реализацию → тестирование → обратную связь → следующую итерацию.

Для вайбкодера типичная итерация занимает от 30 минут до нескольких часов:

Итерация 1 (30 мин): Базовая форма с полями
Итерация 2 (20 мин): Валидация полей
Итерация 3 (40 мин): Отправка данных на сервер
Итерация 4 (15 мин): Уведомление об успехе/ошибке
Итерация 5 (25 мин): Адаптивность для мобильных

Ключевое правило: каждая итерация должна заканчиваться рабочим состоянием. Не «почти работает» — а «работает, пусть и с ограничениями». После каждой итерации — git commit.

Техника «Сначала заставь работать, потом сделай красиво»

Это один из главных принципов вайбкодинга. Порядок приоритетов:

  1. Make it work — заставь работать. Захардкоженные данные, некрасивый интерфейс, без обработки ошибок — неважно. Главное — базовая функциональность работает.

  2. Make it right — сделай правильно. Убери хардкод, добавь обработку ошибок, улучши архитектуру.

  3. Make it fast — сделай быстро. Оптимизация производительности — только когда есть реальная проблема.

Большинство прототипов никогда не доходят до третьего шага — и это нормально. Если прототип не прошёл проверку пользователями, оптимизировать нечего.

Как это выглядит в промптах:

# Итерация 1: заставь работать
Создай страницу со списком задач. Данные можно захардкодить
прямо в компоненте — массив из 3-5 задач. Стиль минимальный.

# Итерация 2: подключи реальные данные
Теперь замени захардкоженные данные на запрос к API:
GET /api/tasks. Добавь состояние загрузки и обработку ошибок.

# Итерация 3: сделай красиво
Улучши дизайн: карточки с тенью, статус задачи цветом,
анимация появления списка.

Быстрое прототипирование с ИИ: реальный кейс

Анна — продакт-менеджер в компании, которая продаёт онлайн-курсы. Она заметила, что студенты часто спрашивают «сколько времени займёт этот курс, если я буду учиться по 1 часу в день?». Менеджеры отвечали вручную.

Анна решила создать калькулятор. Вот как это выглядело:

Промпт 1 (10 минут):

Создай простую HTML-страницу с калькулятором времени обучения.
Поля: общее количество уроков, средняя длина урока в минутах,
сколько часов в день готов учиться.
Результат: сколько дней займёт курс.
Без фреймворков, чистый HTML/CSS/JS в одном файле.

Получила работающий калькулятор. Показала коллегам — понравилось, но попросили добавить разбивку по неделям.

Промпт 2 (5 минут):

Добавь к результату разбивку: сколько недель и месяцев займёт курс.
Также добавь рекомендацию: если больше 90 дней — предложи
увеличить ежедневное время обучения.

Промпт 3 (15 минут):

Улучши дизайн: добавь логотип компании (placeholder),
фирменный синий цвет #1E40AF, скруглённые углы,
тень у карточки с результатом. Сделай адаптивным для мобильных.

Итого: 30 минут — и готовый инструмент, который разместили на сайте. Через неделю им воспользовались 200 студентов.

Рефакторинг по ощущению

Рефакторинг (refactoring) — улучшение структуры кода без изменения его поведения. Код делает то же самое, но становится чище, понятнее, проще в поддержке.

«По ощущению» — это не значит хаотично. Это значит: когда вы читаете код и чувствуете, что что-то не так — это сигнал к рефакторингу. Вот типичные сигналы:

  • Функция слишком длинная (больше 30-40 строк)
  • Один и тот же код встречается в нескольких местах
  • Переменная называется data, temp, x — непонятно, что в ней
  • Вложенность слишком глубокая (if внутри if внутри if)
  • Функция делает слишком много разных вещей

Промпт для рефакторинга с ИИ:

Вот функция, которая работает, но кажется громоздкой:
[вставить код]

Проведи рефакторинг:
1. Разбей на более мелкие функции с понятными именами
2. Убери дублирование
3. Улучши именование переменных
4. Добавь type hints

Поведение должно остаться идентичным. Объясни каждое изменение.

Управление техническим долгом

Технический долг (technical debt) — это накопленные «срезания углов»: захардкоженные данные, отсутствие обработки ошибок, дублированный код. Как финансовый долг — чем дольше не платишь, тем больше процентов.

Для прототипа технический долг — это нормально и даже правильно. Проблема начинается, когда прототип превращается в продакшн без «уборки».

Практический подход: ведите файл TODO.md с пометками о техническом долге:

# Технический долг

## Критично (исправить до релиза)
- [ ] Убрать хардкод API-ключа из weather.py (строка 12)
- [ ] Добавить обработку ошибок в функцию get_user()

## Важно (исправить в следующей итерации)
- [ ] Вынести логику расчёта в отдельный модуль
- [ ] Добавить логирование в API-обработчики

## Когда-нибудь
- [ ] Оптимизировать запросы к базе данных
- [ ] Добавить кэширование

Глоссарий главы

Прототип — ранняя версия продукта для проверки идеи; может быть некрасивым и неполным.

MVP (Minimum Viable Product) — минимально жизнеспособный продукт; самая простая версия, решающая основную проблему.

Итеративная разработка — подход с короткими циклами улучшения продукта.

Вертикальный срез (vertical slice) — реализация одной функции полностью, от интерфейса до базы данных.

Make it work / Make it right / Make it fast — три приоритета разработки по порядку.

Рефакторинг (refactoring) — улучшение структуры кода без изменения его поведения.

Технический долг (technical debt) — накопленные упрощения и «срезания углов» в коде.

Хардкод (hardcode) — данные, зашитые прямо в код вместо получения из конфигурации или базы данных.

Обратная связь (feedback) — реакция пользователей на продукт; основа итеративного улучшения.

Гипотеза — предположение о том, что нужно пользователям; проверяется через прототип.

Тестирование, отладка и рефакторинг по ощущению

Тестирование, отладка и рефакторинг по ощущению

Вайбкодинг создаёт код быстро — иногда слишком быстро. ИИ уверенно генерирует функции, которые выглядят правильно, но падают на реальных данных. По данным Stack Overflow, 66% разработчиков сталкиваются с ИИ-кодом, который «almost right» — почти правильный, но не совсем. Именно поэтому тестирование и отладка — не скучная обязанность, а ключевой навык вайбкодера.

Почему тестирование особенно важно при вайбкодинге

Когда вы пишете код вручную, вы понимаете каждую строку — и интуитивно чувствуете, где могут быть проблемы. Когда ИИ генерирует 200 строк за 30 секунд, у вас нет этого понимания. Код может:

  • Работать на тестовых данных, но падать на реальных
  • Обрабатывать «счастливый путь», но игнорировать ошибки
  • Содержать уязвимости безопасности, которые не видны при беглом просмотре
  • Использовать устаревшие API или несуществующие методы

Тест — это способ формализовать ваши ожидания и автоматически проверять, что код им соответствует.

Виды тестирования

Юнит-тесты (unit tests) — тестирование отдельных функций в изоляции. Самые быстрые и простые в написании.

Интеграционные тесты (integration tests) — тестирование взаимодействия нескольких компонентов. Например, функция + база данных.

End-to-end тесты (e2e tests) — тестирование всего приложения от интерфейса до базы данных, как это делает реальный пользователь.

Ручное тестирование — вы сами проходите по сценариям использования. Медленно, но незаменимо для проверки UX.

Для вайбкодера самое важное — юнит-тесты и ручное тестирование. E2e-тесты добавляйте по мере роста проекта.

Pytest: тестирование Python-кода

pytest — самый популярный фреймворк для тестирования в Python. Установите: pip install pytest.

# Файл: discount.py
def calculate_discount(price: float, percent: float) -> float:
    """Рассчитывает цену со скидкой."""
    if percent < 0 or percent > 100:
        raise ValueError(f"Скидка должна быть от 0 до 100, получено: {percent}")
    return price * (1 - percent / 100)
# Файл: test_discount.py
import pytest
from discount import calculate_discount

def test_basic_discount():
    """Базовый расчёт скидки."""
    assert calculate_discount(1000, 20) == 800.0

def test_zero_discount():
    """Нулевая скидка не меняет цену."""
    assert calculate_discount(500, 0) == 500.0

def test_full_discount():
    """100% скидка даёт нулевую цену."""
    assert calculate_discount(1000, 100) == 0.0

def test_negative_discount_raises_error():
    """Отрицательная скидка вызывает ошибку."""
    with pytest.raises(ValueError):
        calculate_discount(1000, -10)

def test_discount_over_100_raises_error():
    """Скидка больше 100% вызывает ошибку."""
    with pytest.raises(ValueError):
        calculate_discount(1000, 150)

Запустите тесты: pytest test_discount.py -v. Флаг -v (verbose) показывает детальный вывод.

Обратите внимание: тесты покрывают не только «счастливый путь» (скидка 20%), но и граничные случаи (0%, 100%) и ошибочные входные данные. Именно граничные случаи чаще всего ломают ИИ-генерированный код.

Просим ИИ написать тесты

Один из лучших способов использовать ИИ — попросить его написать тесты для вашего кода:

Напиши pytest-тесты для этой функции:
[вставить код]

Включи:
1. Тест на нормальное поведение (3-5 случаев с разными входными данными)
2. Тест на граничные случаи (пустой список, нулевые значения, максимальные значения)
3. Тест на некорректные входные данные (неправильный тип, None, отрицательные числа)
4. Тест на ожидаемые исключения

Для каждого теста добавь docstring с описанием что проверяется.

Это мощная техника: ИИ знает типичные граничные случаи для разных типов функций и часто находит проблемы, которые вы не заметили.

Отладка: детективная работа

Отладка (debugging) — процесс поиска и исправления ошибок. Это навык, который приходит с опытом, но есть системный подход.

Читайте сообщения об ошибках

Первое правило: читайте сообщение об ошибке полностью. Новички часто видят красный текст и паникуют, не читая. Но Python и JavaScript дают очень информативные сообщения:

Traceback (most recent call last):
  File "app.py", line 42, in process_order
    total = calculate_total(items)
  File "app.py", line 15, in calculate_total
    return sum(item["price"] for item in items)
  File "app.py", line 15, in <genexpr>
KeyError: 'price'

Читаем снизу вверх: KeyError: 'price' — в словаре нет ключа price. Строка 15 в функции calculate_total. Вызвана из строки 42 в process_order. Теперь понятно, где искать.

Метод print-отладки

Самый простой способ понять, что происходит — добавить print() в ключевых местах:

def process_users(users):
    print(f"DEBUG: получено пользователей: {len(users)}")
    result = []
    for user in users:
        print(f"DEBUG: обрабатываю пользователя: {user}")
        if user.get("is_active"):
            result.append(user)
    print(f"DEBUG: активных пользователей: {len(result)}")
    return result

Это не элегантно, но работает. Не забудьте убрать print-отладку перед коммитом.

Использование debugger

Debugger (отладчик) — инструмент, позволяющий остановить программу в любой точке и изучить состояние переменных. В VS Code/Cursor встроен визуальный отладчик.

В Python можно поставить точку останова (breakpoint) прямо в коде:

def calculate_total(items):
    breakpoint()   # Программа остановится здесь
    return sum(item["price"] for item in items)

При запуске программа остановится на breakpoint(), и вы сможете в интерактивном режиме проверять переменные, выполнять код пошагово.

Отладка с помощью ИИ

ИИ — отличный партнёр для отладки, но только если вы даёте ему достаточно контекста:

Получаю ошибку при запуске приложения:

[полный стек трейс]

Вот код функции, где происходит ошибка:
[код]

Вот пример данных, на которых падает:
[данные]

Ожидаемое поведение: [описание]
Фактическое поведение: [описание]

Что не так и как исправить?

Важно: не просто «почему ошибка», а полный контекст. ИИ не видит ваш экран — он работает только с тем, что вы ему дали.

Рефакторинг: когда и как

Рефакторинг — это не переписывание с нуля. Это серия небольших улучшений, каждое из которых не меняет поведение программы.

Когда рефакторить:

  • Перед добавлением новой функциональности в запутанный код
  • Когда код стал трудно читаемым
  • Когда одна функция делает слишком много
  • Когда вы видите дублирование

Когда НЕ рефакторить:

  • Прямо перед дедлайном
  • Когда нет тестов (рефакторинг без тестов — это риск)
  • Когда «работает — не трогай» (если код не нужно менять)

Техники рефакторинга

Извлечение функции — выделить блок кода в отдельную функцию:

# До рефакторинга
def process_order(order):
    # Валидация
    if not order.get("items"):
        raise ValueError("Заказ пустой")
    if order.get("total", 0) <= 0:
        raise ValueError("Сумма заказа должна быть положительной")

    # Расчёт скидки
    discount = 0
    if order["total"] > 5000:
        discount = order["total"] * 0.1
    elif order["total"] > 2000:
        discount = order["total"] * 0.05

    # Сохранение
    order["discount"] = discount
    order["final_total"] = order["total"] - discount
    return order

# После рефакторинга
def validate_order(order):
    if not order.get("items"):
        raise ValueError("Заказ пустой")
    if order.get("total", 0) <= 0:
        raise ValueError("Сумма заказа должна быть положительной")

def calculate_order_discount(total: float) -> float:
    if total > 5000:
        return total * 0.1
    elif total > 2000:
        return total * 0.05
    return 0

def process_order(order):
    validate_order(order)
    discount = calculate_order_discount(order["total"])
    order["discount"] = discount
    order["final_total"] = order["total"] - discount
    return order

После рефакторинга каждая функция делает одно дело, её легко тестировать и понимать.

Логирование: видеть что происходит в продакшне

Логирование (logging) — запись событий программы в файл или консоль. В отличие от print, логи можно настраивать по уровню важности и сохранять для анализа.

import logging

# Настройка логирования
logging.basicConfig(
    level=logging.INFO,
    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
    handlers=[
        logging.FileHandler('app.log'),
        logging.StreamHandler()   # Также выводить в консоль
    ]
)

logger = logging.getLogger(__name__)

def process_payment(amount: float, user_id: int):
    logger.info(f"Начало обработки платежа: {amount} руб., пользователь {user_id}")

    try:
        # Логика платежа
        result = payment_gateway.charge(amount, user_id)
        logger.info(f"Платёж успешен: {result['transaction_id']}")
        return result
    except Exception as e:
        logger.error(f"Ошибка платежа для пользователя {user_id}: {e}")
        raise

Уровни логирования: DEBUG (детальная отладка), INFO (нормальные события), WARNING (что-то подозрительное), ERROR (ошибка, но программа продолжает работу), CRITICAL (критическая ошибка).

Глоссарий главы

Тестирование — процесс проверки того, что код работает как ожидается.

Юнит-тест (unit test) — тест отдельной функции или компонента в изоляции.

Интеграционный тест — тест взаимодействия нескольких компонентов.

End-to-end тест (e2e) — тест всего приложения от интерфейса до базы данных.

pytest — популярный фреймворк для тестирования Python-кода.

assert — утверждение в тесте: проверяет, что условие истинно.

Граничный случай (edge case) — нестандартная ситуация на границе допустимых значений.

Отладка (debugging) — поиск и исправление ошибок в программе.

Стек трейс (stack trace) — список вызовов функций, приведших к ошибке.

Debugger (отладчик) — инструмент для пошагового выполнения кода и изучения переменных.

Точка останова (breakpoint) — место в коде, где отладчик останавливает выполнение.

Рефакторинг (refactoring) — улучшение структуры кода без изменения поведения.

Извлечение функции — рефакторинг: выделение блока кода в отдельную функцию.

Логирование (logging) — запись событий программы для мониторинга и отладки.

Уровни логирования — DEBUG, INFO, WARNING, ERROR, CRITICAL — степени важности событий.

Продуктовое мышление, жизненный цикл проекта и работа в команде

Продуктовое мышление, жизненный цикл проекта и работа в команде

Технические навыки — это только половина профессии вайбкодера. Вторая половина — понимание того, зачем вы вообще создаёте то, что создаёте. Разработчик, который умеет только писать код, решает задачи. Разработчик с продуктовым мышлением решает правильные задачи — те, которые реально нужны пользователям и бизнесу.

Что такое продуктовое мышление

Продуктовое мышление — это способность смотреть на разработку глазами пользователя и бизнеса, а не только глазами технаря. Это умение задавать вопрос «зачем?» прежде чем «как?».

Классический пример: заказчик приходит и говорит «нам нужна кнопка, которая экспортирует данные в Excel». Технарь без продуктового мышления сразу начинает делать кнопку. Разработчик с продуктовым мышлением сначала спрашивает: «Зачем вам нужен экспорт в Excel? Что вы делаете с этими данными дальше?» И выясняет, что на самом деле нужен автоматический еженедельный отчёт на email — что проще и полезнее.

Для вайбкодера продуктовое мышление особенно важно, потому что скорость создания прототипов высокая. Легко потратить день на «крутую фичу», которая никому не нужна.

Жизненный цикл проекта

Любой проект, от телеграм-бота до стартапа, проходит через похожие этапы. Понимание этих этапов помогает не потеряться и принимать правильные решения на каждом из них.

Этап 1: Обнаружение проблемы

Всё начинается с проблемы, а не с решения. «Хочу сделать приложение» — это не проблема. «Фрилансеры тратят по 2 часа в неделю на составление счетов вручную» — это проблема.

Хорошие вопросы для этого этапа:

  • Кто конкретно испытывает эту проблему?
  • Насколько она болезненна? Люди платят деньги, чтобы её решить?
  • Как они решают её сейчас?
  • Что будет, если проблему не решить?

Этап 2: Определение решения и MVP

Когда проблема понята, определяем минимальное решение. Инструмент — User Story (пользовательская история): короткое описание функциональности с точки зрения пользователя.

Формат: «Как [кто], я хочу [что], чтобы [зачем]».

Как фрилансер, я хочу создать счёт за 2 минуты,
чтобы не тратить время на ручное заполнение шаблонов.

Как фрилансер, я хочу отправить счёт клиенту по email прямо из приложения,
чтобы не переключаться между программами.

User Stories помогают фокусироваться на ценности для пользователя, а не на технических деталях.

Этап 3: Прототипирование и проверка

Создаём MVP (как обсуждали в предыдущей главе) и проверяем на реальных пользователях. Ключевой вопрос: «Решает ли это их проблему?»

A/B тестирование — метод, при котором разным группам пользователей показывают разные версии продукта и сравнивают результаты. Например, кнопка «Создать счёт» vs «Новый счёт» — какая конвертирует лучше?

Этап 4: Итеративное развитие

Продукт никогда не бывает «готов». После запуска начинается цикл: собираем обратную связь → приоритизируем улучшения → реализуем → снова собираем обратную связь.

Бэклог (backlog) — список всех задач и идей для продукта, упорядоченный по приоритету. Это живой документ: задачи добавляются, переоцениваются, удаляются.

Этап 5: Масштабирование или пивот

Если продукт работает — масштабируем. Если нет — пивот (pivot): кардинальное изменение направления на основе полученных данных. Instagram начинался как приложение для чекинов Burbn — и сделал пивот к фотографиям.

Метрики: как измерять успех

Продуктовое мышление невозможно без метрик. «Кажется, пользователям нравится» — это не метрика. «Retention на 7-й день — 40%» — это метрика.

DAU/MAU (Daily/Monthly Active Users) — дневная/месячная аудитория. Показывает, насколько регулярно пользуются продуктом.

Retention (удержание) — процент пользователей, вернувшихся через определённое время. Retention 30% на 7-й день означает: из 100 новых пользователей через неделю вернулись 30.

Конверсия (conversion rate) — процент пользователей, совершивших целевое действие (регистрация, покупка, подписка).

Churn (отток) — процент пользователей, переставших пользоваться продуктом за период.

NPS (Net Promoter Score) — индекс лояльности: «Насколько вероятно, что вы порекомендуете нас?» от 0 до 10.

Работа в команде: роли и коммуникация

Вайбкодер редко работает в полном одиночестве. Даже фрилансер взаимодействует с заказчиком. Понимание ролей в команде помогает эффективно коммуницировать.

Продакт-менеджер (Product Manager, PM) — отвечает за «что строить и зачем». Приоритизирует бэклог, общается с пользователями, формулирует требования.

Дизайнер (UX/UI Designer) — отвечает за «как это выглядит и как работает». Создаёт макеты, прототипы, проводит пользовательские исследования.

Разработчик (Developer) — отвечает за «как это реализовать». Вайбкодер — это разработчик с расширенными возможностями.

QA-инженер (Quality Assurance) — отвечает за качество. Тестирует продукт, находит баги.

DevOps-инженер — отвечает за инфраструктуру, деплой, мониторинг.

Agile и Scrum: как организована работа

Большинство современных команд работают по Agile — набору принципов гибкой разработки. Главная идея: вместо долгого планирования и одного большого релиза — короткие итерации и постоянная адаптация.

Scrum — конкретная методология на основе Agile. Работа организована в спринты (sprints) — итерации длиной 1-2 недели. В начале спринта команда выбирает задачи из бэклога, в конце — демонстрирует результат.

Ключевые события Scrum:

  • Daily standup — ежедневная встреча 15 минут: что сделал вчера, что делаю сегодня, есть ли блокеры
  • Sprint planning — планирование спринта: что берём в работу
  • Sprint review — демо результатов спринта
  • Retrospective — что шло хорошо, что улучшить

Для вайбкодера-фрилансера или соло-разработчика упрощённая версия: недельные спринты, ежедневный список задач, еженедельный ретроспективный анализ.

Как читать и формулировать технические задачи

Умение понимать задачи бизнеса и переводить их в технические требования — ключевой навык.

Плохая задача:

Нужно улучшить форму регистрации.

Хорошая задача (в формате User Story + критерии приёмки):

User Story: Как новый пользователь, я хочу зарегистрироваться
за 30 секунд, чтобы быстро начать пользоваться сервисом.

Критерии приёмки:
- Форма содержит поля: email, пароль, подтверждение пароля
- Валидация email в реальном времени (без отправки формы)
- Пароль: минимум 8 символов, показ/скрытие
- При успехе: редирект на /dashboard
- При ошибке сервера: понятное сообщение, форма не сбрасывается
- Время загрузки страницы < 2 секунд
- Работает на мобильных (iOS Safari, Android Chrome)

Критерии приёмки (acceptance criteria) — конкретные условия, при которых задача считается выполненной. Без них невозможно объективно оценить, готова ли задача.

Документация: код, который объясняет себя

Хорошая документация — это уважение к будущему себе и коллегам. Для вайбкодера особенно важно документировать решения, принятые с помощью ИИ, — иначе через месяц непонятно, почему код устроен именно так.

README.md — главный файл документации проекта. Минимальный состав:

  • Что делает проект (одно предложение)
  • Как запустить локально
  • Переменные окружения (без значений!)
  • Основные команды

ADR (Architecture Decision Records) — записи архитектурных решений. Короткий документ: «Мы выбрали PostgreSQL вместо MongoDB, потому что данные структурированы и нам нужны JOIN-запросы».

Глоссарий главы

Продуктовое мышление — способность смотреть на разработку глазами пользователя и бизнеса.

User Story — описание функциональности с точки зрения пользователя: «Как [кто], я хочу [что], чтобы [зачем]».

Бэклог (backlog) — приоритизированный список задач и идей для продукта.

Пивот (pivot) — кардинальное изменение направления продукта на основе данных.

A/B тестирование — сравнение двух версий продукта на разных группах пользователей.

DAU/MAU — дневная/месячная активная аудитория.

Retention — удержание пользователей; процент вернувшихся через определённое время.

Конверсия (conversion rate) — процент пользователей, совершивших целевое действие.

Churn — отток пользователей; процент переставших пользоваться продуктом.

NPS (Net Promoter Score) — индекс лояльности пользователей.

Agile — набор принципов гибкой разработки с короткими итерациями.

Scrum — методология на основе Agile с спринтами и регулярными встречами.

Спринт (sprint) — итерация разработки длиной 1-2 недели.

Daily standup — ежедневная короткая встреча команды.

Критерии приёмки (acceptance criteria) — условия, при которых задача считается выполненной.

ADR (Architecture Decision Records) — документация архитектурных решений.

PM (Product Manager) — продакт-менеджер; отвечает за «что строить и зачем».

QA (Quality Assurance) — обеспечение качества; тестирование продукта.

Как собрать портфолио и найти первую работу в вайбкодинге

Как собрать портфолио и найти первую работу в вайбкодинге

Вы прошли весь курс. Вы умеете писать код, работать с API, использовать Git, создавать промпты, деплоить приложения. Теперь перед вами последний и самый практичный вопрос: как превратить эти навыки в работу и доход? Ответ начинается с портфолио — и заканчивается правильной стратегией поиска.

Почему портфолио важнее резюме

В традиционных профессиях резюме — главный документ. В разработке — нет. Работодатель и клиент хотят видеть, что вы умеете делать, а не читать о том, что вы «ответственный и быстро обучаемый».

Портфолио — это доказательства. Работающее приложение говорит больше, чем любые слова в резюме. Особенно это верно для вайбкодинга: ваша ценность — в скорости создания работающих решений, и это нужно показать, а не рассказать.

Хорошая новость: вайбкодер может собрать сильное портфолио быстрее, чем традиционный разработчик. Там, где раньше нужны были недели, теперь достаточно нескольких дней.

Что должно быть в портфолио вайбкодера

Идеальное портфолио для начинающего вайбкодера — это 3-5 проектов, каждый из которых демонстрирует разные навыки. Не нужно 20 проектов — нужно 3-5 хороших.

Критерии хорошего проекта для портфолио:

  • Решает реальную проблему (пусть небольшую)
  • Задеплоен и доступен по ссылке
  • Код открыт на GitHub с понятным README
  • Есть что рассказать: какую проблему решает, как вы его создавали, что узнали

Что НЕ нужно в портфолио:

  • Учебные задания («напишите функцию сортировки»)
  • Клоны популярных сервисов без своей идеи
  • Незадеплоенные проекты («вот код, но запустить нельзя»)
  • Проекты без README

Пять идей проектов для портфолио

Вот конкретные идеи, которые можно реализовать за 1-3 дня с помощью ИИ-инструментов:

1. Инструмент автоматизации для конкретной ниши Найдите рутинную задачу в любой профессии и автоматизируйте её. Пример: генератор коммерческих предложений для фрилансеров, калькулятор стоимости ремонта, конвертер форматов данных. Такие проекты показывают продуктовое мышление.

2. Телеграм-бот с реальной пользой Бот, который делает что-то конкретное: отслеживает курс валют и уведомляет при достижении порога, напоминает о задачах, агрегирует новости по теме. Показывает работу с API и асинхронным кодом.

3. Дашборд с визуализацией данных Возьмите открытые данные (статистика, погода, финансы) и создайте красивый дашборд. Показывает работу с API, обработку данных и фронтенд.

4. Веб-приложение с базой данных Простое CRUD-приложение: менеджер задач, трекер привычек, каталог книг. Показывает полный стек: фронтенд + бэкенд + база данных.

5. ИИ-инструмент для конкретной задачи Приложение, которое использует языковую модель для решения конкретной задачи: генератор описаний товаров, анализатор резюме, переводчик с сохранением стиля. Показывает работу с API языковых моделей и промпт-инженерию.

Как оформить проект для портфолио

Каждый проект должен иметь три составляющих:

Живое демо — задеплоенное приложение, доступное по ссылке. Vercel, Netlify, Railway — всё это бесплатно для небольших проектов. Если работодатель не может потрогать — проект не существует.

GitHub-репозиторий с хорошим README:

# Название проекта

Одно предложение: что делает и для кого.

## Демо
[Ссылка на живое приложение](https://your-app.vercel.app)

## Проблема
Что за проблему решает этот проект? (2-3 предложения)

## Решение
Как именно решает? Ключевые функции.

## Стек
- Python 3.11, FastAPI
- React, Tailwind CSS
- PostgreSQL, SQLAlchemy
- Деплой: Railway (бэкенд), Vercel (фронтенд)

## Запуск локально
```bash
git clone ...
pip install -r requirements.txt
cp .env.example .env
python main.py

Что я узнал

Что было сложно? Что сделал бы иначе?


**Описание в портфолио** — короткий кейс: проблема → решение → результат → стек → ссылки.

## Где разместить портфолио

**GitHub Profile README** — специальный репозиторий с именем вашего аккаунта, который отображается на главной странице профиля. Добавьте туда краткое описание себя, навыки и ссылки на лучшие проекты.

**Личный сайт-портфолио** — создайте его с помощью тех же инструментов, которые изучали. Это само по себе проект для портфолио. Разместите на Vercel.

**LinkedIn** — обязательно для поиска работы. Добавьте проекты в раздел «Проекты», укажите навыки, напишите о себе.

**Хабр / Dev.to** — напишите статью о том, как создавали один из проектов. «Как я создал телеграм-бота за один вечер с помощью вайбкодинга» — такие статьи читают и работодатели, и потенциальные клиенты.

## Где искать первую работу

**Фриланс — самый быстрый старт.** Не ждите «настоящей работы» — начните с небольших заказов. Это даёт реальный опыт, деньги и строки в резюме.

Платформы для фриланса:
- **Upwork** — крупнейшая международная платформа
- **Freelancer.ru** — русскоязычный рынок
- **Kwork** — фиксированные пакеты услуг
- **Telegram-каналы** — «Работа для разработчиков», «Python Jobs», «JS Jobs»

Стратегия для старта на фрилансе: берите небольшие задачи за небольшие деньги. Цель первых 5-10 заказов — не заработок, а отзывы и опыт.

**Стартапы и малый бизнес** — лучшее место для первой работы вайбкодера. Крупные компании требуют опыт и проходят через многоэтапные отборы. Стартапы ценят скорость и гибкость — именно то, что даёт вайбкодинг.

Где искать:
- **HeadHunter (hh.ru)** — фильтр «без опыта» или «1-3 года»
- **Habr Career** — IT-специализированная платформа
- **LinkedIn** — особенно для международных компаний
- **Telegram-каналы** — «Вакансии для джунов», «IT Jobs»

**Нетворкинг** — недооценённый инструмент. 70% вакансий закрываются через знакомства, а не через объявления. Участвуйте в хакатонах, митапах, онлайн-сообществах. Пишите о своих проектах в соцсетях.

## Как позиционировать себя

Вайбкодинг — новая профессия, и не все работодатели знают этот термин. Вот как говорить о своих навыках:

**Для стартапов и малого бизнеса:**
«Я создаю рабочие прототипы и MVP за дни, используя современные ИИ-инструменты. Могу быстро проверить идею и запустить первую версию продукта.»

**Для фриланса:**
«Специализируюсь на быстрой разработке: лендинги, боты, автоматизация, небольшие веб-приложения. Использую ИИ-инструменты для ускорения разработки.»

**Для традиционных компаний:**
Акцент на конкретных технологиях: Python, JavaScript, React, FastAPI, работа с API, Git. Вайбкодинг — это ваш метод работы, а не отдельная специализация.

## Реальный кейс: от нуля до первого заказа за месяц

Михаил — менеджер по логистике, 28 лет. Прошёл курс по вайбкодингу, создал три проекта за месяц: телеграм-бота для отслеживания посылок, калькулятор стоимости доставки и небольшой дашборд для анализа маршрутов.

Он написал статью на Хабре: «Как я автоматизировал свою работу с помощью вайбкодинга, не будучи программистом». Статья набрала 3000 просмотров. Через неделю ему написали два человека из логистических компаний с предложением сделать похожие инструменты для них.

Первый заказ — 15 000 рублей за телеграм-бота. Через три месяца он перешёл на фриланс полностью, специализируясь на автоматизации для логистики.

Ключевые факторы успеха: **ниша** (логистика — его экспертиза), **публичность** (статья на Хабре), **конкретные проекты** (не «умею кодить», а «вот три работающих инструмента»).

## Бесплатные ресурсы для продолжения обучения

После завершения курса вот что поможет продолжить рост:

**Документация и справочники:**
- [docs.python.org/3](https://docs.python.org/3) — официальная документация Python
- [developer.mozilla.org](https://developer.mozilla.org) — MDN Web Docs, лучший справочник по веб-технологиям
- [fastapi.tiangolo.com](https://fastapi.tiangolo.com) — документация FastAPI

**Практика:**
- [leetcode.com](https://leetcode.com) — задачи по алгоритмам (для подготовки к собеседованиям)
- [replit.com](https://replit.com) — онлайн-среда для экспериментов
- [github.com/public-apis/public-apis](https://github.com/public-apis/public-apis) — список бесплатных публичных API для проектов

**Сообщества:**
- [t.me/python_jobs](https://t.me/python_jobs) — вакансии Python
- [habr.com](https://habr.com) — статьи и обсуждения IT-тематики
- [reddit.com/r/vibecoding](https://reddit.com/r/vibecoding) — сообщество вайбкодеров

**YouTube-каналы:**
- Traversy Media — веб-разработка на английском
- Хекслет — русскоязычные уроки программирования
- Fireship — короткие видео о современных технологиях

**Курсы:**
- [stepik.org](https://stepik.org) — бесплатные курсы по Python и веб-разработке на русском
- [cs50.harvard.edu](https://cs50.harvard.edu) — легендарный курс Harvard по основам CS (бесплатно)

## Глоссарий главы

**Портфолио** — коллекция работ, демонстрирующая навыки и опыт.

**CRUD** (*Create, Read, Update, Delete*) — базовые операции с данными; основа большинства веб-приложений.

**README** — главный файл документации проекта на GitHub.

**Живое демо** — задеплоенное приложение, доступное по ссылке.

**Фриланс** — самозанятость; выполнение заказов для разных клиентов без постоянного трудоустройства.

**Нетворкинг** — построение профессиональных связей и знакомств.

**Хакатон** (*hackathon*) — соревнование по разработке, обычно длиной 24-48 часов.

**Митап** (*meetup*) — неформальная встреча профессионального сообщества.

**Оффер** (*offer*) — предложение о работе от работодателя.

**Junior** (джун) — начинающий специалист с небольшим опытом.

**LinkedIn** — профессиональная социальная сеть для поиска работы и нетворкинга.

**Upwork** — крупнейшая международная фриланс-платформа.

**Habr Career** — IT-специализированная платформа поиска работы.