Вайбкодинг РЕАЛЬНОГО проекта (Claude Code, Codex) — Transcript
Full transcript
- 0:00Вай-кодинг реального проекта на кодексе
- 0:03или клодкоде. Смотри, проблема в том,
- 0:06что на Ютубе куча роликов, которые
- 0:08показывают тебе безумные скилы для
- 0:10клауд-кода, безумные лендинги для
- 0:13клауд-кода, безумные обновления,
- 0:16опять-таки, для клауд-кода и вот это вот
- 0:19всё. Пальцем я тыкать не буду. Если ты
- 0:21интересуешься темой неростей, то 100%
- 0:23видел кучу таких видосов на Ютубе. Что
- 0:26греха таить? Я сам снимал такие ролики,
- 0:27потому что они приносят много
- 0:29просмотров, но не несут никакой
- 0:31абсолютно пользы для зрителя. Это просто
- 0:34жвачка на фоне. И на Ютубе почти нету
- 0:36нормальных роликов с вайп-кодингом
- 0:39реальных проектов. То есть всё какая-то
- 0:41бесполезная дрочь, если честно. И этот
- 0:43ролик создан с целью решить эту проблему
- 0:46хотя бы частично. Смотри, что мы сегодня
- 0:48будем делать. Я хочу для себя написать и
- 0:52res продюсеры. Почему? Потому что раньше
- 0:54я платил 150.000 000 руб. за 30 роликов,
- 0:58то есть 150.000 руб. за 1 месяц работы
- 1:01слс продюсером. Вот пример чека, пример
- 1:04оплаты. За месяц работы абсолютно
- 1:06никакого результата мною не было
- 1:08получено. И заплатил я за это 150.000
- 1:10руб. Так как я понимаю и видел, как
- 1:12работают эти продюсеры за 150.000 руб.,
- 1:15я понимаю, что ничего сложного в этом
- 1:17нету. И сегодня мы с тобой вместе, я
- 1:19сделаю, ты можешь повторить, если
- 1:21хочешь, сделаем такого желс продюсера,
- 1:24который будет работать не хуже, может
- 1:26даже лучше, чем люди за 150.000 руб. в
- 1:28месяц. Смотри, в процессе мы разберёмся
- 1:31со всей необходимой айтишной базой. Я
- 1:34расскажу тебе, что такое Git и GitHub,
- 1:36что такое frontend, Backend, IP, база
- 1:39данных, сервер, докеer, деплой,
- 1:43тестирование, MCP, скилы, домен и так
- 1:46далее. Я объясню вообще всё, с чем буду
- 1:48сталкиваться по ходу работы. Этот ролик
- 1:50предназначен для людей как с полного
- 1:52нуля, так и с какими-то знаниями.
- 1:54Поэтому, если тебе хотя бы одно из этих
- 1:56слов не знакомо, уже, значит, будет
- 1:58полезно. И не пугайся, я объясню вообще
- 2:01всё, с чем буду работать. Если мы вдруг
- 2:04не знакомы, то меня зовут Евгений
- 2:05Пантело. В 19 лет я работал на двух
- 2:08работах программистом и зарабатывал
- 2:10430.000 руб. в месяц. У меня есть ролик
- 2:12на канале, в котором я рассказываю, как
- 2:14я к этому пришёл. Работал я на двух
- 2:17работах. Одна была в Сбертехе, вторая
- 2:19аутсорс на Ростелеком. После этого я
- 2:22начал обучать программированию, обучал
- 2:25горазработчиков этокэнд с полного нуля и
- 2:28за полтора года трудоустроил больше 30ти
- 2:30человек айтишниками на зарплату
- 2:32250-300.000 руб. в месяц. Также я
- 2:35вайп-кодил до того, как вообще появилось
- 2:37такое слово и понятие вайп-кодинг. Всю
- 2:40свою работу на этих двух проектах в
- 2:42Сбертехе и в Ростелекоме я выполнял с
- 2:45нейросетями через чат GPT тогда 4 о
- 2:48вроде как в браузере. Поэтому я понимаю,
- 2:50о чём говорю. Теперь мы с тобой знакомы.
- 2:53Давай начинать. Сегодня я буду выполнять
- 2:55этот проект при помощи кодекса. Если
- 2:57тебе по кайфу или у тебя нет на него
- 2:58подписки, ты можешь работать в клоде.
- 3:01Но, на мой взгляд, просто кодекс гораздо
- 3:02лучше для вайп-кодинга.
- 3:05Смотри, если у тебя нету подписки ни на
- 3:07что, ни на кодекс, ни на клод, но я
- 3:09советую всё-таки сейчас кодекс, потому
- 3:10что клод банят, верификация по паспорту
- 3:13скоро, все дела. Давай начнём с кодекса
- 3:16и посмотрим, разберёмся, как его
- 3:18оплатить. Во-первых, нам нужен аккаунт в
- 3:20чате GPT. Я надеюсь, что он у тебя есть,
- 3:23но если нету, то регистрируемся и
- 3:25верифицируем номер через сервис Hero
- 3:27SMS. Вот как он выглядит. Здесь просто
- 3:30регистрируемся, выбираем слева вот Open
- 3:32AI и здесь выбираем любой номер. Не надо
- 3:35выбирать самый дешёвый. Вот Америку
- 3:37можно. Можно вообще поставить самые
- 3:39дорогие какие-нибудь вот за 75 центов,
- 3:42что это? 50 руб. Нормальный номер,
- 3:45нормально верифицировать себе аккаунт.
- 3:47Один раз это делается и всё. В чате GPT
- 3:51не банят аккаунты, в отличие от Клода,
- 3:53поэтому после верификации у нас встаёт
- 3:55вопрос, как же нам оплатить подписку.
- 3:58Смотри, есть два таких вот самых
- 4:00простых, самых понятных способа. Первое
- 4:03- это сделать свою виртуальную карту. Я
- 4:05рекомендую сервис Onay. Кстати, все
- 4:08сервисы и Hero SMS, и TOP, и вот это вот
- 4:11всё, все ссылки на вообще всё будут в
- 4:13моём Telegram-канале. Так что можешь
- 4:14туда сейчас зайти, взять все материалы и
- 4:17по ходу дела уже как бы пользоваться
- 4:19этими ссылками. Ещё раз, первый вариант:
- 4:22выпустить свою виртуальную карту. Я
- 4:23рекомендую всем своим ученикам сервис
- 4:25One topay. Минусы - это за открытие
- 4:28карты тебе нужно заплатить 1.000 руб. и
- 4:30600 руб. в месяц за обслуживание. И
- 4:32также минус - это то, что там наценка
- 4:34идёт на доллары. Но это самый надёжный и
- 4:37удобный способ самому оплачивать
- 4:39подписки, если у тебя есть деньги. Или,
- 4:41если не охота открывать свою карту,
- 4:43можно воспользоваться услугами людей,
- 4:45которые оплатят на твой аккаунт или
- 4:46купить уже готовый аккаунт. Это
- 4:48какой-нибудь платит, GGCL или Funpay. В
- 4:52этом плане это самый простой и выгодный
- 4:54способ. Я надеюсь, у тебя не будет
- 4:55никаких проблем с тем, чтобы
- 4:57зарегистрировать себе аккаунт в чате
- 4:59GPT. Я советую делать это через Google,
- 5:01через Gmail. Просто входишь через свой
- 5:03Google аккаунт. Если попросят
- 5:05верифицировать номер, делаешь это через
- 5:07Hero SMS. Потом оплачиваешь подписку,
- 5:09если у тебя её ещё нету, через One to
- 5:11Pay или через Plat Market какой-нибудь.
- 5:13И теперь, я думаю, мы можем приступать
- 5:15уже к делу. Перед тем, как начинать как
- 5:17кодить, так и вайпкодить, нам нужно
- 5:19сначала подумать, что мы вообще хотим
- 5:21получить. Я не хочу здесь показывать
- 5:23какой-то идеально вылезанный курс со
- 5:25всем уже готовым. Я хочу показать свой
- 5:27процесс размышления. Смотри, нам нужно
- 5:29подумать над архитектурой в кавычках
- 5:32проекта. Почему в кавычках? Потому что
- 5:33это максимально верхнеуровнево. Сейчас
- 5:36уже нейросети, они настолько умные, что
- 5:38прямо детально продумывать, как что
- 5:41будет работать. С технической точки
- 5:43зрения это уже не обязательно. Поэтому
- 5:45смотри, я делаю и с продюсера. Давай
- 5:48подумаем, что он должен делать и как
- 5:50вообще работают этиs продюсеры.
- 5:52Насколько я знаю из своего опыта, в
- 5:54первую очередь нам нужно найти
- 5:56залетевшие рилсы, референсы. Потом этот
- 6:00продюсер берёт, как бы находит
- 6:02конкурента, какого-нибудь человека, у
- 6:04которого залетели рилсы в моей тематике,
- 6:07просто берёт их и переписывает один в
- 6:09один под меня. То есть после того, как я
- 6:10нашёл залетевшие рилсы, переписать,
- 6:14скопировать сценарий.
- 6:17отдать мне [смех] и всё. То есть найти
- 6:20res, переписать, скопировать сценарий.
- 6:22Потом я их снимаю, потом они монтируются
- 6:24и выкладываются. Но главная вообще
- 6:26задача как бы продюсера - это найти и
- 6:28дать мне готовые сценарии. Я хочу, чтобы
- 6:31мой проект снимал с меня какую-то боль.
- 6:33Как и любой проект, который должен
- 6:35продаваться и приносить деньги, нужно
- 6:37решать какую-то боль проблем людей.
- 6:39Какая проблема у меня, как у
- 6:41контент-креатора? Это то, что мне надо
- 6:43снимать эти рилсы, это искать эти
- 6:45сценарии, придумывать их, прописывать
- 6:49хук, не хук, ну и просто в падлу этим
- 6:51заниматься постоянно. Поэтому я сейчас,
- 6:53например, не веду Instagram, но будет
- 6:55интересно написать этот проект, при
- 6:57помощи него, например, несколько месяцев
- 6:59поснимать рилсы и посмотреть, сколько я
- 7:01на этом заработаю. Скорее всего, очень
- 7:03много денег. Но сейчас я пока это
- 7:06накидываю, понимаю то, что базовый MVP.
- 7:08Что такое MVP? Смотри, нам нужно
- 7:10начинать как в кодинге, так и в
- 7:12вайбкодинге с минимально работающего
- 7:15продукта. MVP - это minimal value
- 7:20product. Короче, короче, минимально
- 7:23рабочая версия.
- 7:25То есть нам нужна просто минимальная
- 7:27рабочая версия, которой уже можно будет
- 7:29пользоваться, которая будет нести хоть
- 7:31какую-то пользу, чтобы я мог проверить и
- 7:34подтвердить то, что да, это то, что
- 7:36надо. И если я делаю MVP себе Reals
- 7:40продюсера, то как это будет выглядеть? У
- 7:42меня есть какая-то страничка. И если я
- 7:44делаю вообще минимально рабочую версию
- 7:46своего Ei Reels продюсера, то как это
- 7:48должно выглядеть вообще? Главные две
- 7:51функции: найти рилсы и переписать
- 7:53сценарии. Я хочу, чтобы у меня был
- 7:55какой-то сайт, на который я захожу, и
- 7:58здесь у меня просто список вот так вот
- 8:00рилсов. Первый, второй, третий,
- 8:02четвёртый, пятый по оценке. Вот этот вот
- 8:04там самый лучший. Этот во вторую, в
- 8:06третью, четвёртую, пятую очередь надо
- 8:07мне скопировать и снять. Я жму на
- 8:10какой-то конкретный, например, на этот.
- 8:13У меня открывается вторая страница, и
- 8:14там внутри весь сценарий. То есть, как
- 8:16пишутся сценарии, какой-то хук, крючок,
- 8:19какой-то сам основной сценарий и в конце
- 8:22призыв к действию, например, какой-то
- 8:24магнит. Ну, там какая-нибудь пдфка. Вот,
- 8:26знаешь, ты, если смотрел рилсы, там
- 8:28напиши в комментарии слово VIP, и я
- 8:30пришлю тебе какой-то гайд. И потом
- 8:32автоответчик. Но автоответчик уже
- 8:33настраивается отдельно. То есть мне
- 8:35нужна страница с залетевшими релсами и
- 8:38мне нужна страница с самим релсом,
- 8:41который я буду копировать. Плюс мне
- 8:43нужна какая-нибудь кнопочка такого вот
- 8:46карандашика. Не знаю, как его
- 8:47нарисовать. Короче, мне нужна кнопка для
- 8:49редактирования. Вот. Напишем
- 8:52которая будет открывать ещё одну
- 8:54страницу. Ну или не ещё одну страницу,
- 8:57просто чтобы я мог менять и
- 8:58редактировать этот текст под себя. И
- 9:01обязательно, это уже минимальная рабочая
- 9:03версия. И так как я буду брать идеи у
- 9:05американцев и при помощи нейро сети
- 9:08переводить их на русский, мне нужна вот,
- 9:09да, возможность редактировать текст,
- 9:11потому что там, скорее всего, где-то
- 9:12что-то будет криво. Плюс, наверное,
- 9:14где-то будет нужна кнопка для того,
- 9:16чтобы посмотреть оригинал.
- 9:19Ну и в целом на этом всё. Мне нужно
- 9:21сделать базовую версию, в которой у меня
- 9:23будет просто сайт, куда я смогу, ну,
- 9:25понятно, загрузить аккаунты людей. То
- 9:28есть итоговая архитектура базово
- 9:30работающей версии моего приложения,
- 9:32которой я уже смогу пользоваться, должна
- 9:34выглядеть так. Я беру себе пачку
- 9:36аккаунтов американских вайп-кодеров,
- 9:38которые снимают релсы, загружаю их в
- 9:41свой проект. Через срипт я достаю их
- 9:43последние релсы для начала просто все
- 9:45рилсы достаю. И при помощи нейросети
- 9:48перевожу их на русский язык. И потом я
- 9:50могу снимать такие же рилсы. Это первая
- 9:53базовая работающая версия. То есть
- 9:55первый шаг - это такой MVP. Второй шаг -
- 9:57это чтобы при помощи нейроти, по сути, у
- 9:59нас было ранжирование этих роликов. То
- 10:02есть какие топовые, какие не очень
- 10:04набрали, для того чтобы я, очевидно,
- 10:06снимал и копировал только самые лучшие
- 10:08залетевшие ролики и получал себе больше
- 10:11всего просмотров и больше всего денег.
- 10:13Соответственно, сейчас мы будем начинать
- 10:14с этой вот первой версии. Просто сайт на
- 10:17сервере. Сейчас буду всё объяснять,
- 10:19получается, с фронтэндом, бэкэндом,
- 10:21деплом, гиitub. Сейчас я всё объясню.
- 10:24базова работающая версия, то есть скрипт
- 10:26этот уже готовый. Сейчас покажу, как
- 10:28доставать рилсы и как сделать это всё.
- 10:31Давай начинать в целом. Потом вторая
- 10:33часть - это будет ранжирование при
- 10:35помощи опять же нейрости. И смотри,
- 10:37перед тем, как приступать к вайпкодингу,
- 10:40я хочу сначала накинуть визуал. То есть
- 10:42я подготавливаюсь, чтобы не переделывать
- 10:44потом по много раз. Сейчас я накидал вот
- 10:47такую вот базовую архитектуру, как я
- 10:48хочу, чтобы это примерно выглядело. И
- 10:50теперь давай я сделаю скриншот. Перейдём
- 10:53в чат GPT, вставим его, попросим его
- 10:56создать изображение. И давай надиктую
- 10:58ему теперь, чтобы он мне через создание
- 11:00изображения сделал дизайн моего
- 11:03стартапал с продюсера проекта. И давай
- 11:05сейчас просто попрошу чат GPT сделать
- 11:07визуал, как будет выглядеть мой сайт,
- 11:09стартап, проект, продукт и так далее.
- 11:12Смотри, вот я тебя прикрепляю. Я
- 11:14набросал архитектурно своего Eис
- 11:17продюсера. То есть это должен быть сайт.
- 11:19Я хочу, чтобы ты мне сделал пять разных
- 11:21вариантов дизайнов полноценных на одной
- 11:23картинке, то есть все страницы. Смотри,
- 11:26первое - это мне нужна страничка слева,
- 11:28вот сбоку. Мне нравится минималистичный
- 11:29стиль такого ноушена. Я хочу слева
- 11:32сбоку, чтобы у меня была вкладка
- 11:34конкуренты. Я туда нажимаю, открываю и
- 11:38могу просто вставить вот в текстовое
- 11:40поле такое сверху,
- 11:42а Instagram аккаунт какого-то
- 11:44американца, который снимает видосы про
- 11:46вайпкодинг. Вот я вставил и началось
- 11:49через аtify фетчинг всех его релсов. Ну,
- 11:52например, давай пока что, чтобы лимиты
- 11:54жёстко не тратились. Последние 20
- 11:55рилсов. Последние 20 рилсов пусть будут
- 11:58его выкачиваться.
- 12:00И слева также кнопка главная. Главное -
- 12:03это все рилсы, которые он сейчас
- 12:05выкачал, которые у нас есть в базе. Пока
- 12:07что просто вот списком рилсов. После
- 12:10того, как я добавил конкурента и
- 12:12выкачали с его 20 лсов, каждый должен по
- 12:16нажатию кнопки на главной странице, типа
- 12:19кнопка, пускай будет там ремикс, по
- 12:22нажатию этой кнопки при помощи нейросети
- 12:26должна создаваться отдельная страница,
- 12:28короче, с копией этого рилса, где hook,
- 12:32где scриpt, где call to action. Вот три
- 12:34таких вот базовых блока. То есть мне
- 12:36нужно, чтобы ты мне сделал по сути-то
- 12:39три страницы, главную со всеми рилсами и
- 12:42кнопкой ремикс конкурентов, куда я буду
- 12:45загружать. И третью, просто открыть вот
- 12:47этот внутри нашего сайта обязательно с
- 12:50кнопкой редактирования прямо внутри. То
- 12:52есть, чтобы я мог отредактировать эту
- 12:53всю саму страницу. Вот. Сделай,
- 12:56пожалуйста, мне пять картинок, пять
- 12:57разных вариантов дизайнов, как это может
- 13:00выглядеть. И я выберу лучший. Сейчас я
- 13:02буду объяснять всё, что я надиктовал, но
- 13:04я просто поток своих мыслей в чат GPT
- 13:07выгрузил для создания дизайна и
- 13:09визуализации как бы моей идеи. У меня
- 13:12есть какое-то желание, и в первую
- 13:13очередь я не бегу писать код, я не бегу
- 13:15писать Vibe-код. Я визуализирую, что я
- 13:18хочу получить, чтобы у меня было
- 13:20представление того, что должно в итоге
- 13:22на выходе получиться. Потому что если я
- 13:24сейчас сразу пойду писать код, то я не
- 13:26знаю, что и как должно быть здесь. Я это
- 13:29визуализирую и использую потом для чата
- 13:31GPT, для кодекса как за референс. Давай
- 13:33сейчас я быстренько проверю текст. Всё,
- 13:35поправил тут текст, отправил. Сейчас у
- 13:37меня будет на выбор пять готовых
- 13:38вариантов дизайнов, из которых я уже
- 13:40смогу что-то превращать в жизнь. О'кей,
- 13:43прошло 2 минуты. Давай смотреть, что у
- 13:44нас получилось. Первый вариант, второй,
- 13:47третий, четвёртый, пятый. Я особо
- 13:50разницы не вижу. Надо смотреть, где
- 13:52удобнее всё будет редактировать каждое
- 13:54поле. О'кей. Мне нравится этот вариант.
- 13:56Давай скачаем его себе на комп и уже
- 13:59будем переходить в кодекс и настраивать
- 14:01наш проект. Смотри, у нас есть уже,
- 14:03получается, архитектура, у нас есть
- 14:05примерное понимание того, чего мы хотим,
- 14:08у нас есть даже дизайн, который мы
- 14:09вставим сюда. И сейчас попрошу GPT
- 14:11переименовать и взять себе эту папку как
- 14:14за Reference. И уже будем настраивать
- 14:16проект, а я буду объяснять, как и что
- 14:18делать.
- 14:20Смотри, можешь, пожалуйста, перенести
- 14:21эту картинку из папки загрузки, она у
- 14:24меня в папке загрузки, в папку нашего
- 14:26проекта, прямо в корень. И назови её
- 14:28дизайнре reference. То есть это референс
- 14:30нашего дизайна. Давай сейчас начнём
- 14:34подготавливать почву, так сказать, для
- 14:36нашего проекта. Разверни для начала,
- 14:38создай репозиторий на Гитхабе, сделай
- 14:41его у меня локально. и на GitHubбе
- 14:43приватный репозиторий, в котором пока
- 14:45что ничего, кроме этого референса не
- 14:47будет, но уже сейчас начнём подготовку.
- 14:51Тут на такую простую задачу просто
- 14:53развернуть репозиторий, я поставлю
- 14:55медиум, чтобы было быстрее, и отправляю.
- 14:58Давай я тебе сейчас объясню, что вообще
- 15:00такое GitHub, что за репозиторий,
- 15:02приватный, публичный, почему так. И с
- 15:05этим вот всем разберёмся. Смотри, если у
- 15:07тебя MacBook или MacOS, Mac Mini, что
- 15:09угодно, то Git у тебя уже установлен.
- 15:12Если у тебя Linux, то вроде бы он тоже
- 15:13уже установлен. Если же у тебя винда, то
- 15:16смотри, тебе нужно вот так вот зайти
- 15:19Install Git for Windows или просто
- 15:21скачать Git на Windows. Открываешь
- 15:23первый сайт, скачиваешь гиit для
- 15:25Виндоуса и там просто жмёшь далее,
- 15:28далее, далее, как обычно в целом. Что
- 15:30это такое? Скачали Git. Что нам дальше
- 15:33надо? Нам нужен GitHub. Смотри, сайт у
- 15:35нас просто github.com. Нам нужно на него
- 15:38сюда зайти и зарегистрироваться любым
- 15:40удобным способом. Смотри, нужно создать
- 15:42ключ. Мы здесь жмём новый SSH-ключ, даём
- 15:45ему любое название и вставляем сюда
- 15:48SSH-ключ. Как это сделать? Как его
- 15:50сгенерировать? Максимально просто. Я
- 15:52хочу научить тебя именно вайп-кодить,
- 15:53поэтому просим кодекс. Слушай, подскажи,
- 15:56пожалуйста, можешь за меня сгенерировать
- 15:58SS ключ, который я вставлю в GitHub для
- 16:00того, чтобы у тебя был доступ ко всем
- 16:02репозиториям. Ты там мог делать комиты,
- 16:04пуши, создавать репозитории приватные и
- 16:07так далее.
- 16:09Всё, мы можем делать вообще всё. через
- 16:11кодекс. То есть в терминал вообще харам.
- 16:13Терминал открывать нельзя. Я считаю это
- 16:15прямо мовитоном сейчас, когда у тебя
- 16:18есть подписка на кодекс. Поэтому я прошу
- 16:20его подскажи, можешь за меня
- 16:22сгенерировать этот ключ. Сейчас он сам
- 16:24откроет терминал. Он вот, как видишь,
- 16:26сам в терминале всё сделал. Сейчас
- 16:29сгенерирует мне готовый ключ, который я
- 16:32просто вставлю сюда. Вот. Вставь в
- 16:34GitHub.
- 16:36Мы берём, копируем этот ключ и вставляем
- 16:38сюда. Жмём добавить SS ключ. Сам кодекс
- 16:41пишет то, что он сможет так работать с
- 16:43гетом, но не сможет создавать приватные
- 16:45репозитории. И пишет: "Нужен гха АУск,
- 16:49сделай Гаутх, короче, авторизацию сам".
- 16:53И он сам её сделает. Откроется у нас
- 16:55браузер, сейчас увидишь, в котором я
- 16:57просто нажму подтвердить, вставлю ему
- 16:59ключ и всё. Но у меня это уже есть. Если
- 17:02у тебя этого не будет, просто проси
- 17:04кодекс сделать всё за тебя, и он сделает
- 17:06всё за тебя. Всё, по сути, у нас всё
- 17:08готово. Ну, а теперь давай объясню, что
- 17:10это такое, зачем мы это всё делаем,
- 17:12зачем мы это всё настраиваем, что такое
- 17:14вообще этот ваш Git и GitHub. Смотри,
- 17:17Git и GitHub, вот это вот, то, что мы
- 17:19здесь создали, это, по сути, удалённая
- 17:22папка в каком-то облаке. Что такое в
- 17:25облаке? Где-то на чьём-то чужом сервере,
- 17:28по сути, на чьём-то чужом компе, на
- 17:30чьём-то чужом жёстком диске, ну, на
- 17:32чьём? На майкрософтовском, потому что
- 17:35Microsoft владеет гиitub. просто лежит
- 17:37наш проект удалённо. То есть сейчас я
- 17:40могу взять, снести всё, что связано с
- 17:42этим проектом у себя на компе, и потом
- 17:45оно всё равно останется в гите, и я
- 17:47смогу его скачать. То есть в чём прикол?
- 17:50Это удалённая папка с нашим проектом.
- 17:53Вот ты её здесь видишь? Плюс saveфаile,
- 17:56как в игре. То есть мы сейчас
- 17:57стартанули. Вот смотри, с полного нуля у
- 18:00нас это первый комит называется. Если в
- 18:02играх это у нас сохранение, здесь это
- 18:04коit. Вот добавить дизаign reference.
- 18:06Сейчас по мере того, как мы будем
- 18:08вайпкодить, у нас будут добавляться
- 18:10новые сей-файлы. Вот как в каком-нибудь
- 18:12Ведьмаке, я не знаю, ты прошёл квест,
- 18:15сохранился, и у тебя эти сохранения, они
- 18:18вот так вот как бы наслаиваются. Вот
- 18:20первое самое старое сохранение. Вот
- 18:22новое, новое, новое. После каждого там
- 18:24квеста, ну или когда заканчиваешь
- 18:26играть, ты по-новому сохраняешься, и вот
- 18:28они сверху, сверху настакиваются. И в
- 18:31самом конце нашего проекта, в конце
- 18:33игры, вот это вот последний save файл,
- 18:36ну, условно, последний, а это вот самый
- 18:38начальный. И вот этот вот добавить
- 18:40дизаign reference, вот этот вот коit,
- 18:43так называемый save файл, это будет
- 18:45самый-самый первый. То есть мы при
- 18:47желании сможем откатиться вообще в самое
- 18:50начало. То есть логично, для чего нам
- 18:53нужен тогда git и GitHub? Для чего нам
- 18:54нужно сохраняться, как в игре,
- 18:56буквально, чтобы в любой момент
- 18:58откатиться назад? То есть мы сейчас
- 19:01будем что-то вайп-кодить. Мне что-то не
- 19:03понравилось, что-то сломалось. Раньше
- 19:05работало хуже. Я просто скажу кодексу:
- 19:07"Братан, давай вернёмся на предыдущее
- 19:10сохранение". И всё, весь проект, всё
- 19:12состояние, весь код, все наши правки,
- 19:15все изменения, что мы сделали, они
- 19:17откатываются. И если мы где-то с чем-то
- 19:19накосячили, то мы сможем вернуться и
- 19:21сохраниться. То есть, как ты понимаешь,
- 19:24особенно в работе с нейронками, да и не
- 19:26только, это бывает полезно. Что такое
- 19:28вообще сервер? Смотри, сервер - это, по
- 19:30сути, своей просто удалённый компьютер
- 19:33такой вот, только без клавиатуры, без
- 19:36мышки, просто удалённый компьютер,
- 19:37который работает 24x7,
- 19:40на котором мы выкладываем свой проект и
- 19:43он доступен нам из интернета. Сейчас всё
- 19:46объясню, как это делать. Давай
- 19:47разберёмся для начала с сервером. Я
- 19:49советую, точнее, я бы не сказал, что
- 19:51советую, я пользуюсь таймвебом. Есть
- 19:54другие провайдеры, есть какой-нибудь
- 19:55биет и так далее, но я просто пользуюсь
- 19:57таймвебом. Мне он привычнее и удобнее
- 20:00всего. Здесь мы на таймвебе создаём свой
- 20:02проект и переходим в создание сервера.
- 20:05Ну вот слева облачный сервер. Здесь
- 20:07ставим обязательно Убунту регион любой.
- 20:10Допустим, можем поставить Москву. И
- 20:12здесь нужна фиксированная конфигурация.
- 20:15Вот самый дешёвый сейчас стоит 800 руб.
- 20:17в месяц. Они резко сильно повысили цены.
- 20:20У них постоянно какие-то проблемы,
- 20:21поэтому я ими пользоваться не советую.
- 20:23Можешь зайти на Beggets или TELЛ вообще
- 20:25куда угодно. Любой нам сервер нужен.
- 20:28Вот это вот базовая 800 руб. в месяц 2
- 20:31ГБ оперативы нам будет достаточно.
- 20:34Обязательно здесь, чтобы у нас был
- 20:35включён IP4, чтобы мы могли подключаться
- 20:39к нашему серверу. И бэкапы для экономии
- 20:42можем отключить. Ничего в этом страшного
- 20:44нету. У меня сервер уже есть, поэтому я
- 20:46буду пользоваться своим. Смотри, после
- 20:48создания сервера у тебя будет вот такая
- 20:50вот панелька. Справа у нас есть IP4 и
- 20:54подключение по SSH и также rootтпароль.
- 20:57Мы берём, копируем первое и второе.
- 21:00Понятно, пароль я на видео копировать не
- 21:01буду, потому что у меня настроено
- 21:03подключение по SSH, я могу к нему
- 21:05заходить без пароля. Как тебе сделать то
- 21:08же самое? Здесь вот доступ SSH-ключ и
- 21:11добавляешь себе свой SSH-ключ. В этом
- 21:14проблем никаких нету. Вставляю в кодекс
- 21:16ссылку на сервер. Так как эта работа уже
- 21:18посерьёзнее, поставлю здесь GPT 5,5
- 21:21вместо медиума и попрошу его начать
- 21:24разворачивать базово наш проект. Смотри,
- 21:26можешь, пожалуйста, у меня на компе и на
- 21:29сервере, ну, понятно, чтобы всё было и
- 21:31работало в гитерачивать
- 21:34базовый проект. Пока что просто одну
- 21:36страницу, которая будет открываться
- 21:39через креди там. Всё сам сделай,
- 21:40пожалуйста, за меня. Просто чтобы одна
- 21:43страница, на которой будет написано
- 21:46Realsfer Finder пока без дизайна, без
- 21:48всего, просто чтобы страница открывалась
- 21:50с моего компа. То есть всё было на
- 21:52сервере. Код весь и на компе, и на гите,
- 21:55и на сервере весь синхронизирован. То
- 21:57есть пиши код у меня на компе, пуш его в
- 22:00GitHub и чтобы на сервере был автопло
- 22:03сделан. И вот в таком вот флоу давай
- 22:06будем работать. Запиши себе это в
- 22:08правило нашей работы. То, что мы пишем
- 22:09код на компе, мы его тут проверяем, мы
- 22:12деплоим, пушим всё в GitHub. И потом с
- 22:15сервера у нас происходит
- 22:16автосинхронизация кода. И уже там мы всё
- 22:20тестируем, и ты сам можешь там всё
- 22:22тестировать тоже. Сделай для начала
- 22:24просто базовую настройку, чтобы на
- 22:26сервере всё работало, весь этот проект в
- 22:28отдельном Docker контейнере, и я мог
- 22:31подключиться и увидеть эту нашу первую
- 22:33страницу. Сейчас объясню этот промт. Про
- 22:35то, что такое сервер, что такое GitHub,
- 22:37мы уже знаем. То есть, по сути, я здесь
- 22:39прошу кодекс просто сделать базовую
- 22:42страницу, базовый сайт, который будет
- 22:44открываться из интернета и будет
- 22:46доступен из интернета. Что такое докеer?
- 22:48Давай сейчас объясню. Это такое вот
- 22:50приложение, которое можешь скачать себе
- 22:52на комп, можешь попросить кодекс,
- 22:54скачать его себе на комп, и он с этим
- 22:57отлично справится. Это вот приложение,
- 23:00которое позволяет, смотри, сервер - это
- 23:02у нас, можно сказать, отдельный такой
- 23:04комп, а Docker - это внутри ещё одна
- 23:08изолированная виртуальная машина. То
- 23:10есть вот, знаешь, если там лет 12,
- 23:12наверное, назад, я не помню на самом
- 23:14деле сколько, а ты скачивал какую-нибудь
- 23:16пиратскую игру, да, наверное, и сейчас
- 23:17такое же есть, ты скачивал что-то
- 23:19пиратское из интернета, и там
- 23:20обязательно был какой-нибудь вирус,
- 23:22какой-нибудь майнер, какой-нибудь блокер
- 23:24твоего компьютера. И базовое такое
- 23:27правило, не знаю, гигиены и безопасности
- 23:29заключалось в том, чтобы скачивать себе
- 23:31всё и тестировать всё такое вот, весь
- 23:34такой вот софт пиратский в песочнице, то
- 23:36есть в виртуальной машине на своём
- 23:38компе. И по сути Docker - это и есть
- 23:40такая вот песочница только для
- 23:43айтишников, для людей, которые делают
- 23:45свои какие-то продукты. У нас есть наш
- 23:47сервер. Но чтобы не разворачивать весь
- 23:49проект и занимать все ресурсы сервера,
- 23:51мы делаем внутри отдельную изолированную
- 23:54такую вот песочницу при помощи докера, в
- 23:56которой внутри уже работает наш проект.
- 23:59И наш сервер будет общаться с этой вот
- 24:02виртуальной машиной, передавать в неё
- 24:04какие-то данные и получать данные от
- 24:06этой виртуальной машины. А мы уже со
- 24:08своего компа будем посылать запросы на
- 24:09сервер. Кодекс ушёл всё настраивать. В
- 24:12отличие от клода, он гораздо гораздо
- 24:14гораздо лучше работает с серверами, с
- 24:17деплоем, и он гораздо более
- 24:20самостоятельный. То есть я бы не мог
- 24:22сейчас с Клодом просто открыть Telegram,
- 24:25открыть YouTube и заниматься своими
- 24:26делами. Мне нужно было бы сидеть и
- 24:29контролировать его и ждать, потому что
- 24:31он бы спросил какой-нибудь абсолютно
- 24:33тупой вопрос, какую-нибудь абсолютно
- 24:35тупую хрень. и ждал бы от меня на него
- 24:38ответ. Я бы альтабнулся, ушёл бы по
- 24:40своим делам, вернулся бы через 15 минут,
- 24:42увидев то, что он даже не начал
- 24:45работать. Кодекс таких тупых вопросов
- 24:47спасибо не задаёт. Смотри, что такое
- 24:50деплой. Я ему тут говорю: "Делай
- 24:52автоматический деплой". По сути, если
- 24:54перевести слово плой с английского на
- 24:57русский, то деплой - это просто
- 25:00разворачивание проекта. То есть это
- 25:02английское слово, которое означает
- 25:04разворачивание всего проекта на сервере.
- 25:06То есть, когда я говорю: "Сделай
- 25:08автоматический деплой", я прошу его
- 25:10сейчас настроить код так и настроить всю
- 25:13вообще систему так, чтобы он писал его
- 25:16локально код на моём компе, запушивал
- 25:19его в GitHub, делал какое-то сохранение
- 25:22новое. И после этого, после того, как
- 25:24автоматически появилось новое
- 25:26сохранение, он переносил это всё на
- 25:28сервер. Также я его тут просил вот через
- 25:30ди написано, но это на самом деле такая
- 25:33штука. Можешь тоже попросить. Пока у нас
- 25:35нету домена.
- 25:36Это такой вот автоматический, можно
- 25:38сказать, заменитель домена временный,
- 25:41который позволяет без домена, ещё раз
- 25:44делать так, чтобы наши страницы из
- 25:45интернета спокойно открывались на любом
- 25:48там браузере с телефона и так далее.
- 25:50Всё, прошло 16 минут, сделал базово
- 25:52подключ и выдал мне готовую ссылку на
- 25:55сайт. Давай откроем, посмотрим. Reels
- 25:58finder. Всё верно, потому что я пока что
- 26:00ничего его больше не просил добавить. А
- 26:03почему я не просил его сразу написать
- 26:04весь проект за один запрос? Да потому
- 26:07что там у нас есть много мест, где можно
- 26:09ошибиться. Поэтому ровно так же, как и в
- 26:11обычной разработке, мы делаем всё
- 26:14поэтапно. Сейчас мы сделали всего одну
- 26:16страницу, потом мы добавим вторую, мы
- 26:18добавим функционал, подтягивание рилсов
- 26:21и так далее, но мы будем делать всё
- 26:23поэтапно. Вторым запросом. Теперь давай
- 26:25поставим extra high reasoning и попросим
- 26:29его перенести весь дизайн, то есть
- 26:30сделать всю визуальную часть, весь так
- 26:33называемый фронendд. Простыми словами,
- 26:35что такое front-end? Это та страница,
- 26:37которую мы видим, то есть фронт, лицевая
- 26:40сторона. Backend, который мы будем
- 26:42делать через пару запросов - это то, что
- 26:44происходит сзади, то есть так называемое
- 26:46закулисье. Я не знаю, как это ещё можно
- 26:48назвать. Фронт - это то, что мы видим.
- 26:51БК - это то, что происходит, когда мы
- 26:52нажали на какую-то, например, кнопку.
- 26:54Давай теперь перенесём весь дизайн по
- 26:56референсу. Всё. Вот такой вот простой
- 26:59запрос. Теперь он уйдёт опять думать
- 27:00минут на 15-20, может быть 30. У тебя
- 27:03сейчас будет магия монтажа, а я пойду
- 27:05заниматься своими делами. Вот мы можем
- 27:08видеть, как у нас кодекс открыл,
- 27:09получается, наш референс по дизайну и
- 27:11пытается его перенести и сверять,
- 27:13соответственно, с самим референсом. Вот
- 27:15что у него сейчас уже получается. Он сам
- 27:18делает скриншоты и сам смотрит на свой
- 27:22результат. И это замечательно. О'кей,
- 27:25прошло 13 минут. У меня прошло несколько
- 27:27часов, потому что был созвон. Давай
- 27:29посмотрим, что он нам сделал. О'кей,
- 27:33вкладка главная вкладка конкуренты, но
- 27:35дизайн выглядит немного криво. И именно
- 27:38сейчас я хочу показать тебе один очень
- 27:41мощный лайфхак, который пока что не
- 27:43вышло GPT 5.6. помогает фиксить отлично
- 27:47вот такие вот ошибки. Смотри, у нас есть
- 27:49здесь GitHub. И работать это будет
- 27:52только с подпиской ча.
- 27:54Вообще сейчас тенденция такова, что если
- 27:58у тебя нету хотя бы 100 долларов в месяц
- 28:00на подписку на клод или на кодекс, то
- 28:03нормально ты не поэбкодишь. И модель Pro
- 28:06открывается только на подписке за 100
- 28:09долларов. Но смотри, что мы делаем.
- 28:11Смотри, я хочу использовать этот
- 28:13репозиторий через коннектор чата GPT в
- 28:16браузере. Можешь, пожалуйста, сделать
- 28:18индексирование этого репозитория. Я
- 28:20отправляю такой вот запрос. То есть,
- 28:22смотри, у нас есть на Гитхабе, кстати,
- 28:24вот комиты, как видишь, делаются. У нас
- 28:26на GitHubбе есть этот репозиторий. Вот
- 28:28он. Sferinder. И я хочу вот здесь весь
- 28:32код, который я даже не вижу и не
- 28:33смотрел, я хочу, чтобы я мог через chatт
- 28:36GPT Pro extended в браузере задавать
- 28:40вопросы и писать код через него. То есть
- 28:43нам надо проиндексировать репозиторий.
- 28:45Что это значит? Чтобы мы могли через
- 28:47браузер пользоваться этим коннектором.
- 28:50То есть, чтобы мы могли с Pro extended,
- 28:53который гораздо умнее и лучше понимает и
- 28:55тщательнее делает весь код в браузере.
- 28:58напрямую. Кстати, это не будет тратить
- 29:00лимиты кодекса. Сейчас мы подождём,
- 29:02чтобы он проиндексировал, и я пойду уже
- 29:05в браузере закину скриншот. То, что,
- 29:08братан, вот референс, вот как
- 29:10получилось. Вышло что-то херово. Оно не
- 29:13на весь экран. За один запрос шок. За 15
- 29:16минут мне сделали не идеальный лендинг.
- 29:19Даже не лендинг, а сайт. И давай это
- 29:21исправим. В общем, тут поставим medium.
- 29:24Тут же опять-таки GitHub. И просто для
- 29:27начала проверить то, что Смотри, есть ли
- 29:29у тебя репозиторий Realsfer Finder.
- 29:32[фыркает] Смотри.
- 29:39То есть я не знаю, есть ли у него
- 29:40доступ, поэтому прошу в обычном медиум
- 29:43чате GPT. Вот он отправляет запрос к
- 29:46GitHubбу. Вот. Да, доступ есть. Ветка
- 29:48main repository private. Отлично. Давай
- 29:50теперь пойдём сюда в [откашливается]
- 29:53chatpt pro extended, сделаем скриншот
- 29:56нашего сайта вот так вот. И попросим его
- 30:00пофиксить
- 30:01всё то, что он выглядит плохо, не как на
- 30:04референсе. Зайдём сюда, возьмём наш
- 30:07дизаign reference. Возьмём наш дизайнре
- 30:09reference, вставим также сюда. И смотри,
- 30:12вот первая картинка - это тот внешний
- 30:15вид, тот фронтEN, который сейчас сделал
- 30:18чат GPT. Вторая картинка - это референс,
- 30:21который я ему дал. Как видишь, референс
- 30:24не совпадает. То есть сейчас сайт не
- 30:27сделан как по референсу, границы как-то
- 30:30непонятные, всё как-то стрёмно выглядит.
- 30:33При этом убери то, что это там какой-то
- 30:34аккаунт снизу слева, какой-то MVP. Вот
- 30:37эту вот всю хрень можешь убрать,
- 30:39пожалуйста, и пофикси весь фронт, весь
- 30:41дизайн, пожалуйста, пофикси, чтобы было
- 30:45как на референсе. И отправляем. Пока что
- 30:47мы занимаемся чисто визуальной частью.
- 30:50Здесь ему в браузере, чтобы он нормально
- 30:52мог работать, я ему сейчас ещё пару
- 30:54подсказок дам. Можешь, пожалуйста,
- 30:57делать микроизменения и каждое изменение
- 31:00комитить и в конце запушить. Вот
- 31:03приоритет - это чтобы ты сразу запушил
- 31:05всё в меain. Если у тебя не будет
- 31:07доступа, то сразу отдельно сделай хотя
- 31:09бы пулрест или просто комиты. Вот так
- 31:13вот. Потому что он иногда тупит и не
- 31:14хочет сразу пушить в мей. Но я отправляю
- 31:17такой запрос на рефакторинг. И сейчас
- 31:20chatт GPT Pro будет думать отдельно
- 31:22минут 15, может быть 20, может быть 30.
- 31:25И надеюсь то, что получится за один вот
- 31:27такой вот запрос дотянуть визуал до
- 31:30того, что я имею на картинке. И потом
- 31:32уже будем прикручивать, чтобы наш проект
- 31:35работал, наш продюсер работал, я мог в
- 31:38него загрузить аккаунты и пользоваться
- 31:41им, потому что иначе зачем ещё делать
- 31:43какой-то проект, если ты имне
- 31:45пользуешься? В общем, ждём. О'кей,
- 31:47прошло 10 минут. Чат GPT 5,5 Pro пишет
- 31:51то, что всё готово. Он запушил прямо в
- 31:53мей. Погнали проверять.
- 31:55Обновляем. Здесь у меня почему-то ничего
- 31:58не обновилось. Давай спросим, почему
- 32:00так. Смотри, GPT Pro говорит то, что он
- 32:02обновил и запушил всё прямо в main, но
- 32:06почему-то наш сайт не обновился. можешь,
- 32:08пожалуйста, подсказать, почему так,
- 32:12посмотреть, есть ли там новые
- 32:14обновления, как бы, и развернуть это всё
- 32:16на сервере, если ещё нету. Ничего
- 32:19страшного, сейчас попросим GPT 5.5 хай.
- 32:22Я меняю модельки, потому что эта задача
- 32:23не сложная, поэтому хай. Вообще я тебе
- 32:26советую всегда ставить экстраra хай.
- 32:28Опять же подписка минимум за 100, лучше
- 32:31200 долларов. Ну, минимум за 100 хватит
- 32:33вообще для 99% задач.
- 32:36и хай или только экстра хай, потому что
- 32:39некуда спешить. Лучше пускай он думает
- 32:41хоть в два, хоть в пять, хоть в 10 раз
- 32:43дольше, но выдаст мне правильный ответ с
- 32:46первого раза, а не как клод сам себе
- 32:48что-то придумает, короче, и потом всё
- 32:51подумает то, что всё, короче, иди сам
- 32:53проверяй, а я проверяю, ничего не
- 32:55готово. Сейчас мне в комментариях,
- 32:57наверное, напишут то, что да, это я
- 32:58клодом не умею пользоваться, да, это я
- 33:00не прав. Ну, короче, бог с вами, ребят.
- 33:03Кому по кайфу, пользуйтесь Клодом. Я
- 33:05никого не принуждаю. Мне просто больше
- 33:08нравится кодекс. Меньше чем за 2 минуты.
- 33:10Причина найдена. GPT Pro запушил, но
- 33:13какая-то там ошибка. Вот, короче, всё
- 33:15починил. О'кей. Да, в целом гораздо
- 33:18лучше выглядит, чем то, что было. Ещё
- 33:20раз, это супер жёсткий лайфхак для
- 33:22анализа всего кода, для поиска таких вот
- 33:24багов. GPT 55 Pro работает реально
- 33:27хорошо. В целом наш фронт готов. У нас
- 33:31есть главное, у нас есть конкуренты.
- 33:32Кнопкаремикс,
- 33:34редактировать. А кнопка редактировать не
- 33:37жмётся. О'кей, давай сейчас это
- 33:39пофиксим.
- 33:40Аэ, смотри, я жму кнопку редактировать,
- 33:43а она не редактируется. То есть после
- 33:46нажатия на ремикс редактирование не
- 33:48работает. Я жму редактировать и
- 33:51текстовое поле не открывается. Я не могу
- 33:53поменять там текст. Можешь, пожалуйста,
- 33:54починить, чтобы я редактировал. Да, оно
- 33:57реально и в базе, и везде, и на сайте
- 33:59обновлялось автоматически. Такой вот
- 34:01простой запрос сейчас нам всё починит. Я
- 34:05сейчас понял то, что с этим вот запросом
- 34:07на то, чтобы у нас редактировалась
- 34:08страница, я затронул одну новую огромную
- 34:11тему, а именно то, как всё изнутри
- 34:14работает и архитектура нашего,
- 34:16соответственно, проекта. Что такое
- 34:18фронт, что такое backend, что такое база
- 34:21данных и как это всё вообще должно
- 34:23работать. Пока что оно не настроено.
- 34:25Давай я сейчас объясню вообще всю
- 34:27архитектуру, которую я продумал, и мы её
- 34:30будем вместе реализовать. Смотри, как
- 34:32это вообще выглядит. Что такое
- 34:34front-end? Что такое backend? Ещё раз,
- 34:36что такое IP, что такое база данных, мы
- 34:39сейчас сразу разберём. Закинем промт в
- 34:42кодекс для того, чтобы он начал это всё
- 34:44настраивать. У нас всё будет красиво
- 34:46настроено, и мы сможем дальше уже
- 34:48работать. Смотри, глобально - это просто
- 34:51наш вот этот вот сайт. То есть всё, что
- 34:53мы видим, весь визуал - это frontend.
- 34:56Backend - это то, что происходит, когда
- 34:58мы жмём, например, вот кнопку
- 35:00редактировать. То есть кодекс за 6 минут
- 35:02тут поправил. Я пишу, например, вот
- 35:04привет. Пишу готово. И то, что оно
- 35:07перезаписалось, это что-то сохранилось и
- 35:11что-то вот здесь внутри ушло куда-то там
- 35:13в базу данных. Там оно сохранилось и
- 35:15вернулось. Теперь оно здесь отображает
- 35:18привет. Даже если я обновлю и опять
- 35:20открою этот самый Reals, пока что, да,
- 35:22не идеально, но как факт, у нас
- 35:24сохраняется весь текст где-то на
- 35:26сервере. И то, что мы тут переписываем,
- 35:29оно также сохраняется. Вот сохранено всё
- 35:32динамически. Я обновляю страницу, опять
- 35:34открываю микс, всё, оно сохранилось. То
- 35:36есть оно у нас логично где-то хранится.
- 35:40И где же оно хранится? Конечно же, в
- 35:42базе данных. Сейчас я покажу, как это
- 35:45всё выглядит. То есть, смотри, у нас
- 35:47есть фронтend, как я уже сказал.
- 35:49Frontend - это всё визуальное, весь
- 35:52визуал, что мы видим на сайте. Все
- 35:54кнопки, все страницы, всё, ну, всё, что
- 35:57мы видим, буквально, это фронтенд, то
- 35:59есть лицевая часть, лицевая сторона.
- 36:01Всё, что происходит за кулисами, так
- 36:03сказать, это уже называется backend, то
- 36:06есть то, что происходит сзади. На
- 36:08бэкэнде у нас есть сервер, не тот, на
- 36:11который мы всё деплоили. Это просто
- 36:12отдельно называется сервер, то есть то,
- 36:14что обрабатывает все наши запросы.
- 36:16Смотри, как это вообще выглядит.
- 36:19Frontend, когда мы жмём любую кнопку,
- 36:21посылает на наш сервер запрос. Сервер
- 36:24там что-то делает, как-то обрабатывает.
- 36:27У нас там написан код на Питоне. У нас
- 36:29здесь будет написан написан код, который
- 36:32условно выглядит там типа, что-то там.
- 36:35Короче, если что-то произошло, если у
- 36:38нас такой-то запрос, реагируй вот так
- 36:41вот. Если другой запрос, реагирую вот
- 36:43так вот. То есть всё строго как бы
- 36:45предопределено, какой запрос, какой
- 36:47ответ должен быть. То есть там это всё
- 36:49прописано, происходит какая-то логика.
- 36:52И, например, мы нажали на кнопку
- 36:54загрузить 20 стрилсов. У нас вот в это
- 36:57из этого поля берётся информация,
- 36:59который мы вставили. Посылается на
- 37:01сервер. Сервер идёт дальше, что-то
- 37:04делает. А что он делает? Он идёт в
- 37:06сторонний сервер APIF, который
- 37:07называется. Сейчас я покажу его.
- 37:10Он достаёт оттуда все рилсы, сохраняет
- 37:13себе и присылает обратно во фронend
- 37:16ответ со всеми этими рилсами, которые
- 37:19потом у нас отображаются на экране
- 37:20главное.
- 37:22И то есть наш сервер, он будет отвечать
- 37:24за все вот эти вот операции, то есть
- 37:26сохранение данных, обновление, обработка
- 37:28запросов, какая-то бизнес-логика. Ну что
- 37:31такое бизнес-логика, простыми словами,
- 37:33это всё, что вот вот это вот мы здесь
- 37:35делаем. То есть вход в пользователя,
- 37:37вход в аккаунт, авторизация, посылание
- 37:39запросов. Это всё называется
- 37:41бизнес-логика.
- 37:43И все эти данные у нас кладутся в базу
- 37:46данных. То есть, что такое база данных?
- 37:48Логично из названия. Это то, где у нас в
- 37:52формате таких вот столбиков и табличек,
- 37:55колонок хранится вот, например, там
- 37:57условно ID, тут 1 2 3 4 5 и так далее.
- 38:03Тут, например, ист какой-нибудь.
- 38:06и там условно. Это у нас всё хранится
- 38:09вот в таком вот виде. И все данные у нас
- 38:12сохраняются. И нам потом с ними удобно
- 38:14работать. Что-то дописать. Нового
- 38:15конкурента вставили, он появился. Тут
- 38:17его inst ID. Тут у нас будет ссылка на
- 38:20отдельную табличку с рилсами. Там
- 38:22условно вот у нас рилсы. Как это
- 38:24выглядят? сы. Вот опять же ID рилса у
- 38:27нас всегда есть везде ID. Там хук
- 38:30какой-нибудь обычно. Что у нас здесь
- 38:32хранится вообще в базе данных? Как это
- 38:35выглядит? Hook, script, call to action,
- 38:37то есть разные поля. Hook, script.
- 38:42Дальше там у нас call to action. Ну, я
- 38:44немного криво, как бы я передаю суть. И
- 38:47когда мы здесь уже меняем какой-то,
- 38:49например, вот тут что-то мы переписываем
- 38:52и жмём готово, то мы обращаемся в базу
- 38:55данных, в reals по ID, например, один с
- 38:57таким-то хуком, с таким-то скриптом, с
- 38:59таким-то call экшеном. И когда мы
- 39:02переписываем этот call to action, мы как
- 39:04бы через вот нажимая на эту вот кнопку,
- 39:07на вот это вот скрипт, например,
- 39:09редактировать или хук редактировать, мы
- 39:12как бы напрямую типа идём вот так вот в
- 39:15эту вот табличку,
- 39:18что-то здесь меняем, отдаём обратно, и
- 39:21оно как бы опять на сайте у нас
- 39:22обновляется.
- 39:24Раньше я подробно очень объяснял, что
- 39:26такое пи, как это всё работает, но
- 39:30сейчас как бы буквально с каждым месяцем
- 39:32в этом всё меньше и меньше смысла,
- 39:34потому что вышел уже Fable 5, скоро
- 39:37выйдет GPT 5,6. И, кстати, даже когда
- 39:39выйдет хоть Fable 6, хоть Fable 10, хоть
- 39:42GPT 10, этот видос не потеряет свои
- 39:44актуальности, потому что я здесь
- 39:46объясняю какие-то базовые принципы. Но
- 39:49вот эта вот база, которую необходимо
- 39:51понимать, она становится всё дальше и
- 39:53дальше. Если раньше нужно было понимать,
- 39:55как что везде хранится, как это всё
- 39:57самому связать, то сейчас достаточно вот
- 40:00того уровня, на котором я здесь
- 40:01объясняю, что есть база данных, оно
- 40:03как-то там хранится, frontend как-то
- 40:05посылает запрос на backend, backend
- 40:08передаёт в базу данных. То есть у нас
- 40:10вот три главных героя, можно сказать,
- 40:12frontend, backend, база данных. Этот
- 40:14передаёт на backend. Backend работает с
- 40:16базой данных. База данных что-то
- 40:18возвращает в backend. Backend- это
- 40:21возвращает вон. Вот такое вот у нас
- 40:23взаимодействие. Смотри, как будет
- 40:26выглядеть весь вообще процесс насквозь.
- 40:28Пользователь добавляет конкурента. Fify
- 40:31достаёт рилсы. Сейчас я объясню, что это
- 40:33за сервис. Backend нормализует данные.
- 40:36Это сложно. Нейронка написала. Короче,
- 40:38мы достаём рилсы, записываем их в базу
- 40:40данных, отображаем. Пользователь может
- 40:43открыть, сохранить, обновить. То есть
- 40:46внутри у нас опять же frontend, backend,
- 40:48база данных, всё это самое главное. Я
- 40:51здесь специально для простоты сделал
- 40:53несколько изображений с джиптишкой,
- 40:55чтобы на них всё описать. Смотри, если
- 40:58чуть подробнее, то у нас как работает
- 41:00связь фронтенда и бэкэнда? У нас есть в
- 41:03виде моста такой вот рестопи эта штука
- 41:05называется. Раньше я объяснял про это
- 41:07подробно в курсе про клод, но сейчас на
- 41:09самом деле это уже не надо, потому что
- 41:11нейронка всё это сама делает. нижесоуны,
- 41:13ни get postч запроса тебе не надо.
- 41:16Достаточно попросить: "Я хочу, чтобы это
- 41:17ложилось в базу данных, я хочу, чтобы
- 41:20это удалялось, я хочу, чтобы это
- 41:21обновлялось" и так далее. Здесь просто
- 41:23красивее то, что как оно всё со стороны.
- 41:26Пользователь вводит аккаунт, вот эта
- 41:28страничка, смотрит базу данных,
- 41:30редактирует хуки, и все взаимодействия
- 41:33пользователя идут через этот мост
- 41:35напрямую в базу данных, оттуда опять же,
- 41:37точнее, напрямую в backend, оттуда в
- 41:39базу данных, оттуда обратно и обратно к
- 41:42пользователю. И когда мы теперь понимаем
- 41:44вот нашу всю систему, которую мы хотим
- 41:47построить, я её сейчас тебе объяснил, мы
- 41:49можем пойти обратно в кодекс, вставить
- 41:52ему вот такие вот ключевые слова,
- 41:53которые я заранее вставил. Fast, SQL
- 41:56model, и погрос, и попросить его
- 41:59развернуть на вот этих вот технологиях.
- 42:02Можно, кстати, даже просто вставить, как
- 42:05оно всё должно быть, но я думаю, он и
- 42:07так это прекрасно понимает, и без меня.
- 42:10Смотри, можешь, пожалуйста, при помощи
- 42:11вот этих вот технологий, что я тебе
- 42:13сейчас вставил, описал в начале,
- 42:15реализовать, как на картинке полностью
- 42:17фронтend систему и взаимодействие. То
- 42:20есть ты сейчас там сделал свой backend
- 42:22IP, не надо Jon базу данных, вот это вот
- 42:25всё, что ты сейчас реализовал, удали и
- 42:27сделай сразу по-нормальному. Не нужно
- 42:29делать какое-то enterprise сложное
- 42:31решение. Просто вот фата SQL модель
- 42:34постглик, всё, что я тебе описал в
- 42:36начале, и сделай сразу нормальный ээнд,
- 42:39который будет реализовывать и работать,
- 42:41как у нас на картинке, то есть с
- 42:43фронтенда посылаться запросы, храниться
- 42:45в базе данных и так далее. И чтобы у нас
- 42:48проект уже по сути был готовый. Пока что
- 42:50давай сделаем просто базовый.
- 42:53Следующим запросом я тебе дам APIF токе.
- 42:55То естьдей всё, чтобы было готово для
- 42:58интеграции с APIфаем.
- 43:01Такой вот простой, незамысломатый
- 43:03запрос. Здесь подправим то, что это APF.
- 43:07Всё готово. Я тебе дам AP token от
- 43:10Apify. И всё. Посылаем этот запрос на
- 43:13опять же хай. Уходим отдыхать минут на
- 43:1615 и возвращаемся со всем уже готовым.
- 43:20Прошло чуть меньше 30 минут для того,
- 43:23чтобы развернуть весь полноценный эээнд,
- 43:25удалить старый код, который он до этого
- 43:27написал, протестировать всё и
- 43:30подготовить интеграцию с Упифаем. Сейчас
- 43:33давай протестируем, но я бы просто хотел
- 43:35сказать, что прошло меньше 30 минут, и у
- 43:38меня есть готовый бэкэнд, подключённый к
- 43:41фронтэнду. Раньше я работал
- 43:43программистом в довольно крупной
- 43:44компании, и такой объём работы, скорее
- 43:47всего, занял бы у меня больше месяца. То
- 43:49есть минимум 180.000 руб., а то и
- 43:52больше. И это учитывая, что я не знаю
- 43:55Python, тон, я не знаю React, то есть я
- 43:57не умею писать фронт, я не умею писать
- 44:00на Питоне. Я работал Goразработчиком, и
- 44:04такой объём кода и функционала занял бы
- 44:06у меня, скорее всего, несколько месяцев,
- 44:08ещё учитывая то, что нужно было бы учить
- 44:10Python. Ну, давай проверим. Привет. Как
- 44:13дела? Готово. Сохранено. Обновить.
- 44:16Ремикс. Тут всё есть. Давай здесь тоже
- 44:20сохранять. Готово. О'кей. Обновить. Ну,
- 44:23о'кей. Весь бэкэнд работает. Теперь,
- 44:25чтобы наш проект имел смысл, реально
- 44:27работал, нам нужно будет добавить,
- 44:30удалить, во-первых, все вот эти вот
- 44:31фейковые рилсы, удалить всю эту
- 44:33заглушку, это тестовые данные, чтобы мы
- 44:36смотрели вообще, как оно всё работает, и
- 44:38вставить реального человека. Здесь
- 44:41кнопка не жмётся. О'кей, это за один
- 44:43запрос фиксится. Но для того, чтобы у
- 44:45нас, как мы здесь рисовали, вставленные
- 44:49рилсы реально вытягивались, сохранялись
- 44:52в базу данных и добавлялись обратно, нам
- 44:54нужен такой сервис, который называется
- 44:57APIF.
- 44:58Здесь мы заходим в настройки, заходим в
- 45:02IP и интеграции и берём свой IP токен,
- 45:06просто копируем его и опять же вставляем
- 45:08в кодекс аккаунт. Если что, здесь
- 45:10регистрироваться можно через Google, я
- 45:13советую. Бесплатно у нас выдаёт до 5
- 45:16долларов на использование тестовая. Не
- 45:18надо вводить ни карту, ничего. То есть
- 45:20можно в целом сделать несколько
- 45:22аккаунтов и просто их обузить по мере
- 45:25своей необходимости. Смотри, вот токен,
- 45:28вставь его и сделай, чтобы всё работало.
- 45:30Сейчас я дам тебе Instagram аккаунт
- 45:32конкурента, который нужно загрузить в
- 45:34базу, и уже как бы сделать словно мы
- 45:38протестировали всё сразу на фронтде на
- 45:40сервере. То есть словно с этого аккаунта
- 45:42вытянуть рилсы и положить их в базу
- 45:44данных через APF. Смотри только,
- 45:47вытягивая реально последние 20 рилсов
- 45:49его со статистикой и с текстом из этих
- 45:53рилсов. И при этом дело это максимально
- 45:56оптимизировано, чтобы мы не потратили
- 45:59все лимиты буквально за один запрос.
- 46:03Такой запрос ему вставляем. Сейчас я
- 46:04вставлю Instagram конкурента. Всё,
- 46:07вставляем Instagram и отправляем запрос.
- 46:09Ждём ещё какое-то время. Давай
- 46:11посмотрим, как это всё здесь внутри
- 46:13выглядит. Command plugin hook script.
- 46:17О'кей. Он не достаёт сейчас информацию
- 46:20из рилса.
- 46:21Он достаёт только то, что было описано в
- 46:24описании. И также минус то, что я не
- 46:27могу открыть оригинал. Давай это сейчас
- 46:29будем доделывать, чтобы я мог открыть
- 46:31оригинал и
- 46:34доставался нормально текст, потому что
- 46:36он сейчас спарсил рилсы, но вообще не
- 46:39достал текст. А мне нужно для того,
- 46:41чтобы сделать ремикс, логично достать из
- 46:44него текст. И после того, как мы это всё
- 46:46пофиксим, мы будем подключать сюда
- 46:48нейронкуча GPT. и я расскажу тебе, как
- 46:51пользоваться как бы нейронкой в своём
- 46:53проекте, не платя за IP, напрямую с
- 46:56твоей подпиской, потому что есть
- 46:58информация, что в подписке, вот,
- 47:00например, как у меня на кодекс за 200
- 47:02долларов дают эквивалентное количество
- 47:05токенов, как если бы я платил за AP.000
- 47:09долларов в месяц. Никто тебе, понятно,
- 47:12про это не расскажет. Чат GPT тебе про
- 47:14это не расскажет, что так можно делать.
- 47:16Сейчас расскажу я, когда мы всё
- 47:18пофиксим.
- 47:20Давай сделаем скриншот и напишем кодексу
- 47:23то, что что-то сейчас не так. Смотри,
- 47:25сейчас, во-первых, ошибка и проблема в
- 47:27том, что у нас нету нигде кнопки открыть
- 47:29оригинальный. Я хочу, чтобы справа
- 47:31источника я мог нажать и открывался
- 47:33оригинальный с. Это раз. А два, у нас
- 47:36сейчас не достаётся транскрипт из рилса.
- 47:39Мы не достаём его текст. Посмотри, есть
- 47:42ли в Опифае такая штука, чтобы сразу
- 47:44доставать текст рилса. длительность,
- 47:46текст,
- 47:48просмотры, комментарии и вот эту вот всю
- 47:50информацию. Просмотры и лайки мы уже
- 47:52достаём, я вижу, ладно, просто это
- 47:55визуально можно сильнее выделить, но
- 47:57текста рилса у нас сейчас нету.
- 47:59Очевидно, для того, чтобы сделать
- 48:00ремикс, нам нужно достать полный
- 48:03оригинальный текст, что конкретно автор
- 48:05говорит в своём ролике. Пускай идёт
- 48:08фиксит. Мы сейчас находимся уже на таком
- 48:11этапе, что нейросеть не нужно технически
- 48:14ограничивать в том плане, что напиши вот
- 48:16такую вот функцию, в которой будет вот
- 48:18такой вот код. Она сейчас уже понимает,
- 48:21на самом деле лучше, чем человек. И про
- 48:23там безопасность, небезопасность, тупой
- 48:26код шаблонный, это всё байки. Это уже в
- 48:28прошлом веке. Кстати, раньше у меня на
- 48:30реальной работе, когда я работал медлом,
- 48:32фиг бы кто допустил именно работать с
- 48:34сервером, именно настраивать докер,
- 48:36развёртывая, базу данных на сервере. Для
- 48:39этого есть отдельные люди с отдельной
- 48:42зарплатой, которых зовут DevOps. Но
- 48:44сейчас мой Divps - это кодекс, как ты
- 48:46видишь. Поэтому давай опять подождём
- 48:48минуток 15 и будем смотреть результат.
- 48:51Прошло ещё полчаса и всё готово. Давай
- 48:53снова откроем Reelsfinder. Всё обновим.
- 48:56Нажмём Remix. И здесь мы видим
- 48:58правильный текст, который мы достали из
- 49:00рилса. Пока что он не разложен правильно
- 49:02на hook, script и call to action, но мы
- 49:05уже можем посмотреть здесь в нашем
- 49:07приложении, что было сказано в ReС. Most
- 49:10people are using CL code completely
- 49:12wrong. Вот это вот, очевидно, хук, то
- 49:14есть первый цепляющий заголовок. И потом
- 49:17call to action где-то здесь. Если хочешь
- 49:19попробовать коменть
- 49:22вот оригинальный,
- 49:25как мы видим,
- 49:27как мы видим, здесь текст, он полностью
- 49:29верный. Поставим Нику лайк. Ник у нас
- 49:31красавчик. Сейчас будем вдохновляться
- 49:33его рилсами. Что нам теперь с этим нужно
- 49:36сделать? Очевидно то, что я буду рилсы
- 49:38снимать на русском языке, и мне нужно
- 49:41вот этот вотс его перевести, так
- 49:44сказать, адаптировать. Как мы это будем
- 49:46делать? Если сейчас пойти и спросить в
- 49:48чат GPT: "А как мне теперь при помощи
- 49:51нейрости, короче, нормально переводить
- 49:53их на русский язык?" Он будет предлагать
- 49:55тебе IP. Но опять же, как я уже говорил
- 49:58чуть раньше, потому что для меня прошло
- 49:59полчаса, для тебя 2 минуты, а
- 50:02использовать это обычно очень дорого.
- 50:05Кстати, про цену. Смотри, здесь это всё
- 50:07у нас вышло в 2 доллара за 20 лсов, то
- 50:12есть 160 руб. примерно даже хоть 200
- 50:14руб. за 20 стрилсов. почти что готовых.
- 50:17Я напоминаю то, что продюсеру я платил
- 50:21примерно 5.000 руб. за один готовый
- 50:23рилс. То есть 150.000 руб. за 30 рилсов.
- 50:28То есть 2.000 долларов, а не 2 доллара.
- 50:30Буквально в 1.000 раз дороже. И давай
- 50:33теперь я покажу тебе, что мы будем
- 50:34делать. Смотри, у нас есть вот этот вот
- 50:36текст. И у нас есть такая штука, как
- 50:39кодекс. Ну, кодекс у нас в приложении.
- 50:41Смотри, мы, по сути, открываем терминал
- 50:43и пишем здесь кодекс. Это у нас силы i.
- 50:46Мы можем написать модель. Нам нужно
- 50:49поставить. Сейчас он у нас запустится.
- 50:51Мы здесь выбираем модул. Допустим,
- 50:53пускай будет медиум, чтобы он быстро
- 50:54обрабатывал. Мы берём вот этот вот
- 50:57текст, кидаем его сюда и просим:
- 50:59"Переведи пж на русский язык, дословно
- 51:03сохранив смысл". И вот так вот мы его
- 51:06закидываем. Это называется кодек, то
- 51:08есть command line interface. За 5 секунд
- 51:12буквально он мне выдал полностью готовый
- 51:14рилс на русском языке. Большинство людей
- 51:16используют клодкод. Совершенно
- 51:18неправильно. Вот наш хук. Если хочешь
- 51:20попробовать сам, напиши слово плагин в
- 51:22комментариях, я отправлю тебе его
- 51:23напрямую. Вот наш call to action. Пока
- 51:26что перевод немного кривой в том плане,
- 51:27что по-русски я не буду говорить. Если
- 51:29хочешь попробовать сам, просто напиши
- 51:31плагин в комментариях ниже, типа это вот
- 51:33он на английском и говорит плагин down
- 51:36below. Просто напиши слово плагин. У нас
- 51:38это по-русски говорится, но сейчас не об
- 51:41этом. Это уже какие-то мелочи и детали.
- 51:43Смотри, за 5 секунд кодекс мне сделал
- 51:46полноценный перевод, и я тебе сейчас
- 51:48показываю, что мы делаем это в
- 51:49терминале. Вспоминаем базу, то, что я
- 51:52рассказывал, что наш сервер - это, по
- 51:54сути, такой же комп, на котором мы можем
- 51:57запустить терминал с кодексом и закинуть
- 51:59в него этот вопрос и получить из него
- 52:01ответ. И давай сейчас просто попросим
- 52:03кодекс, чтобы он на каждый наш с таким
- 52:07же запросом переводил каждый на русский
- 52:09язык, сохраняя смысл, и здесь сюда же
- 52:12добавлял уже перевод. Смотри, можешь,
- 52:15пожалуйста, теперь сделать так, чтобы
- 52:18каждый л, который у нас достался,
- 52:20транскрипт, текст каждого рилса, чтобы
- 52:23переводился на сервере локально через
- 52:26кодекси по моей подписке, используя GPT
- 52:295,5 medмедиумрежим, чтобы он
- 52:32переводился, используя кодекс, то есть,
- 52:35чтобы этот текст и текст рилса и промт
- 52:38переведи дословно на русский язык под
- 52:40reals, чтобы передавался в кодекс L и на
- 52:43сервере Мы видели уже ответ от
- 52:45кодексалая, то есть переведённый.
- 52:48Сделай полностью вот эту вот систему,
- 52:50чтобы каждый с у нас был оригинал и
- 52:52рядом перевод от кодекса. И также, чтобы
- 52:55в промпте там было, чтобы он раскладывал
- 52:57на hook, основной scriptрит и call to
- 53:00action. То есть тут логично то, что
- 53:02большинство использует clд неправильно-
- 53:04это hook. Напиши плагин в комментариях.
- 53:07Это call to action. У нас уже все
- 53:08транскрипты есть. Сделай так, чтобы
- 53:11сейчас каждый прогнался через кодекс.
- 53:14Можно даже в целом их за раз все
- 53:15прогнать. И на сервере у нас было
- 53:18отображено уже все переводы на русский
- 53:21язык. И настрой систему так, чтобы после
- 53:23доставания транскрипта из APIF каждый
- 53:26транскрипt шёл в кодексей. Или если мы
- 53:29давай делаем батчами, чтобы 10 рилсов за
- 53:31раз отправлялись в кодекси, за раз
- 53:34переводились. Сделай такую систему.
- 53:36Переведи все текущие рилсы, чтобы на
- 53:38сайте я видел уже переведённые,
- 53:40распределённые на хуки. script call to
- 53:43action
- 53:44которые мы сейчас достали. То есть
- 53:46по-новому APIF дёргать не надо. Вот так
- 53:49вот мы это всё описываем, отправляем и
- 53:52ждём, получается, ещё где-то 30 минут.
- 53:55Ещё 30 минут спустя кодекс всё доделал и
- 53:58задеплоил. Давай посмотрим, что у него
- 54:00получилось. Я здесь уже заранее всё
- 54:02открыл. Как мы видим, есть небольшие
- 54:05баги с вот этим вот отображением
- 54:07страницы. Сейчас пофиксим. Hook
- 54:11script call to action. Он правильно их
- 54:13всё разложил через кодекс. Most people
- 54:16are using cloud code completely wrong. И
- 54:18перевод. Большинство людей используют
- 54:20clot код совершенно неправильно. Они
- 54:23устанавливают случайные плагины. О'кей.
- 54:25Да, кайф. Этот правильно переведён.
- 54:28Давай откроем ещё какой-нибудь
- 54:29рандомный.
- 54:31Забудь проген. Ага. Попробуйте сами.
- 54:34Напишите аватар. Я отправлю тебя штуку в
- 54:37личку. Длительность 29 секунд.
- 54:41О'кей. Я бы теперь проверил с
- 54:43добавлением прямо из панели нового
- 54:46конкурента. И чтобы этот весь весь
- 54:49процесс был проведён полностью
- 54:51автоматически с нуля без моего участия,
- 54:55без моего вмешивания в кодекс. То есть
- 54:57сейчас берём нового конкурента,
- 54:59вставляем ссылку на его аккаунт и
- 55:01смотрим, чтобы у нас появились рилсы.
- 55:05Сейчас возьму конкурента.
- 55:08Также надо будет удалить вот эти вот все
- 55:10тестовые данные и сделать, чтобы тут
- 55:12подтягивалась нормальная картинка,
- 55:14превюшка, но это уже более мелочи.
- 55:16Сейчас мы занимаемся тем, что приносит
- 55:19наибольший результат, тем, что для нас
- 55:21самое главное. Возьмём второго
- 55:23крупнейшего блогера про нейросети,
- 55:25который постоянно выкладывает рилсы, и
- 55:27зайдём, добавим его в конкуренты. Тут,
- 55:30очевидно, надо будет это пофиксить,
- 55:32загрузить 20 релсов. Сейчас посмотрим,
- 55:35всё ли у нас работает.
- 55:37Во-первых, что мне уже не нравится с
- 55:39точки зрения пользования этим продуктом,
- 55:42то есть user experience, это то, что я
- 55:44не вижу, что вообще происходит. Здесь у
- 55:46меня добавился, да, но я не вижу, на
- 55:49каком сейчас процессе, прогрессия, этапе
- 55:52загрузка нового моего конкурента. То
- 55:54есть выкачиваются ли сейчас рилсы,
- 55:57делается ли перевод через кодекс, что
- 56:00происходит. Я обновляю страницу, ничего
- 56:02не появилось, как бы здесь он есть.
- 56:04загружено ресов ноль. А когда будет
- 56:07один, когда будет два, когда будет 10?
- 56:09Поэтому давай пойдём в кодекс и попросим
- 56:12подчистить весь мусор и добавить больше
- 56:15дебага. Смотри, мне сейчас не нравится,
- 56:17во-первых, когда я обновляю страницу,
- 56:19тут уже стоит загруженная,
- 56:22заготовленная ссылка на добавление
- 56:23конкурента, и то есть я её должен руками
- 56:25удалять. Очевидно, что она должна быть
- 56:27где-то в фоне. А, во-вторых, то, что я
- 56:30не понимаю, что вообще происходит, когда
- 56:32я жму кнопку загрузить 20 стрельцов. Мне
- 56:35нужен понятный анимированный трекинг,
- 56:38что происходит, когда я нажал кнопку
- 56:40загрузить. Прямо постоянно пошаговое
- 56:42обновление, типа добавился в базу
- 56:44данных, поставил задачу в очередь, ждём
- 56:48апиifа, ждём транскрипцию, потому что я
- 56:50из админки сейчас не понимаю вообще, что
- 56:53происходит. Там следующий шаг. Перевожу
- 56:55илсы через кодекс, обновляю. То есть
- 56:57сейчас я хочу в качестве дебага видеть
- 57:01вообще всё, что происходит. А также
- 57:04удали все лишние какие-то рилсы, которые
- 57:07тут есть, мусорные тестовые, которые ты
- 57:10сам добавлял. Все аккаунты, кнопка,
- 57:13например, снизу "Загружайте аккаунты
- 57:15конкурентов", она не закрывается. То
- 57:17есть это тоже надо пофиксить.
- 57:20И когда я открываю страницу, происходит
- 57:22какой-то баг, то, что оно сначала
- 57:25показывает старый лс, там три ошибки,
- 57:27например, а потом перекрывает сверху. И
- 57:29каждый раз, когда я обновляю, оно
- 57:33вот эти вот три ошибки, которые убивают
- 57:35охваты, оно всё остаётся, как я набрал
- 57:37100к за 30 дней. Вот эти все мусорные
- 57:39релсы надо поудалять и чтобы более
- 57:41плавный у нас был сайт в том плане, что
- 57:44сейчас какие-то дёрганные анимации, то
- 57:46есть я открываю любую страничку, и оно
- 57:49дёргается, а не плавно загружается. Вот
- 57:51эти вот три момента главных пофиксе,
- 57:53пожалуйста. Отправляем запрос. Я уже
- 57:55вижу то, что здесь у нас подтянулись
- 57:57какие-то релсы Нейта Хёрка. Но
- 58:00опять-таки сейчас посмотрим. Давай ждём
- 58:02перевод кодекса. А, о'кей, полный текст
- 58:04получен. Ждёт перевод. Это всё видно,
- 58:07оказывается. Всё не так плохо, как я
- 58:09думал, но подождём, чтобы всё вот это
- 58:12вот удалилось, чтобы все лишние рилсы
- 58:14удалились и сайт стал плавнее.
- 58:18Готово. За 15 минут просмотра рилсов.
- 58:21Короче, обновляем, смотрим. Конкуренты.
- 58:23Здесь нету этой ссылки. Мусор удалён.
- 58:26Кнопка закрывается.
- 58:28Открываем. Здесь пропал этот баг. Окей.
- 58:31А чат GPT против Clopus. Это новый с
- 58:33отйтах Хёрка. У нас сразу уже есть
- 58:36перевод.
- 58:38Now this is the most interesting battle.
- 58:41Так, прямо сейчас это самое интересное.
- 58:43Ну, как бы в перевод кодекса я тут верю.
- 58:46И по сути я бы сказал то, что база у нас
- 58:48уже готова. То есть если мы зайдём, то
- 58:51что мы хотели здесь делать, это то, что
- 58:54я загружаю аккаунты американских
- 58:56рилсологов, вейпкодеров, я их получаю
- 58:59списком, через нейронку перевожу на
- 59:02русский, могу редактировать. И потом я
- 59:04их собирался куда-то ещё экспортировать,
- 59:06например, в Ntion, чтобы ввести там
- 59:08учёт. Но весь учёт, на самом деле, можно
- 59:11сделать здесь, подключить свой же
- 59:13аккаунт, также его через APF собирать и
- 59:16смотреть, насколько сильно мои ролики
- 59:18залетают. Вот здесь эти кнопки не
- 59:20работают почему-то. То есть дальше можно
- 59:22делать чисто визуал. Например, то, что
- 59:25здесь не отображается превьюшка из
- 59:26Инстаграма.
- 59:28Ну а база у нас уже готова реально. Я
- 59:30прямо сейчас даже не знаю, что можно ещё
- 59:33добавить. Вот я сейчас думаю насчёт
- 59:35импорта вообще нужно ли мне это куда-то
- 59:37выкачивать в Ntion или нет, потому что
- 59:39словно это уже усложнение и вот это вот
- 59:41всё оринжениринг, вот это вот я сделаю в
- 59:45ноушене, буду отслеживать, как они
- 59:47набрали, какой у меня там хук и так
- 59:48далее. Я бы словно просто сделал бы
- 59:51здесь какой-нибудь такой простенький
- 59:52визуальный типа крестик. Ну, галочку
- 59:55крестик, то, что вот этот снял, этот
- 59:56нет, этот там какие-нибудь песочные
- 59:58часы, типа этот в ожидании, вот этот
- 1:00:00снял, этот снял, этот снял, этот не буду
- 1:00:02снимать, этот не буду. То есть, чтобы
- 1:00:04можно было отдельную страницу, наверное,
- 1:00:06я бы сделал, на которой есть рилсы,
- 1:00:09будут рилсы, которые мне надо снять. То
- 1:00:11есть это главное со всеми рилсами. Я бы
- 1:00:14сюда добавил ещё одну страницу, типа на
- 1:00:16съёмку, вот что-нибудь такое там
- 1:00:18очередь. И там уже было видно снят, не
- 1:00:21снят, снят там в ожидании. Вот
- 1:00:23что-нибудь такое. Давай сейчас придумаю.
- 1:00:26В целом тут можно будет ещё добавить вот
- 1:00:27во вкладку аналитики мой профиль, там
- 1:00:29сколько у меня просмотров за месяц, рост
- 1:00:32канала, сколько людей забрало вот эти
- 1:00:34вот всякие пдфки, сколько людей перешло
- 1:00:37в Telegram и всю аналитику, которой нету
- 1:00:39в Инстаграме, через APIF также
- 1:00:41реализовать. Но я думаю, то, что это уже
- 1:00:44тема следующего ролика. Если этот видос
- 1:00:46зайдёт, наберёт много лайков,
- 1:00:47комментариев, просмотров. То есть сейчас
- 1:00:50я бы сказал, что мы почти сделали проект
- 1:00:51от нуля до единицы, то, что им уже можно
- 1:00:54будет пользоваться, им уже можно
- 1:00:55пользоваться. Нужно добавить просто сюда
- 1:00:58эту страницу для съёмки, отслеживания
- 1:01:01видосов, а вот добавлять более какую-то
- 1:01:04глубокую аналитику и делать из этого
- 1:01:06полноценный контент-завод, всякие
- 1:01:08промпты там, короче, для написания
- 1:01:11нормальных сценариев. Я думаю, это уже
- 1:01:13тема, скорее всего, следующей части,
- 1:01:15если это хорошо зайдёт. О'кей, давай я
- 1:01:17ему сейчас тут нарисую вторую вкладку.
- 1:01:20Типа вот здесь вот, например, вот эта
- 1:01:22вот съёмка и здесь там вот снятая, не
- 1:01:26снято. Оп, какие-нибудь песочные часы,
- 1:01:29типа ожидания. Вот так вот. и закинем
- 1:01:32опять-таки в кодекс и попросим: "Смотри,
- 1:01:34супер, давай теперь сделаем так, чтобы
- 1:01:36можно было быстро из страницы рилса, а
- 1:01:40также из главной страницы взять себе его
- 1:01:42как бы на съёмку. Добавим слева сбоку
- 1:01:44вот вторую страницу типа contentтп,
- 1:01:47пускай её назовём, и там будут все эти
- 1:01:49рилсы также. Только мы ещё добавим
- 1:01:51кнопку типа как эмодзи. Там галочка -
- 1:01:54это снято, песочные часы - это ожидает
- 1:01:57съёмки.
- 1:01:59Ну и крестик - это ещё не снято, даже не
- 1:02:01взято в работу. То есть песочные часы -
- 1:02:03это я, например, отредактировал сценарий
- 1:02:06и видос готов. Крестик - это ещё ничего
- 1:02:08не готово. Галочка - это видос снят и
- 1:02:10выложен. То есть отдельную страницу в
- 1:02:12главной под главной слева, которую мы
- 1:02:15назовём contentп. И также сейчас есть
- 1:02:18баг. Когда я жму редактировать, я не
- 1:02:20могу редактировать русскую версию, а мне
- 1:02:22надо редактировать именно русскую. То
- 1:02:25есть у меня даже нету смысла
- 1:02:26редактировать английскую версию. Мы
- 1:02:28можем её просто оставить сбоку, а
- 1:02:30редактировать именно русскую. И то есть
- 1:02:32при перекидывании с страницы в контент
- 1:02:36план мне нужно, чтобы у меня был чисто
- 1:02:39русский текст, который я редактирую и
- 1:02:41как бы утверждаю вот с этими вот эмод
- 1:02:43для выбора. А с главной страницы я там
- 1:02:45где-нибудь, где у меня сбоку источник
- 1:02:47открыть оригинальный Reels, снизу такую
- 1:02:50кнопочку типа добавить в контент-план, и
- 1:02:52этот конкретный Reals переносится в
- 1:02:54контент-план. Вот давай такую вот штуку
- 1:02:56сделаем.
- 1:02:57Всё. Опять же, я просто описываю то, что
- 1:03:00я хочу сделать. Посылаю запрос и пойду
- 1:03:03сейчас, ну, погуляю, потому что я каждые
- 1:03:06полчаса как бы просто жду его
- 1:03:08завершения. Сейчас пойду погуляю,
- 1:03:10вернусь, у меня будет уже темно. Будем
- 1:03:12его добивать. Так, прошло 13 минут.
- 1:03:15Кодекс закончил работу. Я уже сходил,
- 1:03:18поел, погулял, поэтому погнали
- 1:03:19посмотрим, что у нас тут есть. Кнопочка
- 1:03:23добавить план. Ага, отредактировать. А,
- 1:03:26это уже в контент-плане.
- 1:03:28Хук SPT. О, раскрывается даже. Оп, готов
- 1:03:32к съёмке. Снят и выложен.
- 1:03:35Чат GPT против Clлото Опуса. Открыть
- 1:03:37карточку. Давай посмотрим оригинал хук.
- 1:03:40Чат GPT против Clса. Да, тоже самое.
- 1:03:43Ремикс нажмём. Он меня пока не
- 1:03:45перекидывает. Ну, о'кей. А, ну там GPT
- 1:03:49против опуса, кто лучше. Всё, теперь
- 1:03:52готов прямо сейчас. Это, честно говоря,
- 1:03:55самая интересная битва. Ии О'кей, снят и
- 1:03:58выложен. Давай ещё пару лсов добавим в
- 1:04:00контент-план.
- 1:04:02Ага, вот тут тоже обновляется, он сразу
- 1:04:05открывается. Ну, это всё дело такого
- 1:04:07вкусовщины и пара минут и одного
- 1:04:10запроса. И начался не с чата GPT, ему
- 1:04:13больше 100 лет. Nate комментирует
- 1:04:17documentary. Ага, о'кей, хорошо. Вот у
- 1:04:19меня теперь есть контент-план с каждым
- 1:04:21рилсом, который надо снять. Ну, я бы
- 1:04:23делал это более типа сжато, чтобы было
- 1:04:26минималистично. Не снят. Снят, готов к
- 1:04:29съёмке. Но в целом-то можно подводить
- 1:04:32итоги, я думаю, потому что мы прошли
- 1:04:34путь, ещё раз от нуля до единицы. Если
- 1:04:37бы я хотел начать продавать этот проект,
- 1:04:40если бы я хотел допилить и потом начать
- 1:04:42его продавать, открыл бы самозанятость и
- 1:04:44прикрутил бы сюда для подписок юкасу,
- 1:04:48потому что, как я знаю, они легче всего
- 1:04:50работают с самозанятыми для рекурентных
- 1:04:52платежей, то есть для подписок. Также,
- 1:04:54если бы я хотел продавать это, то
- 1:04:56понятно, после того, как я бы его
- 1:04:57допилил, я бы руками проводил онбординг
- 1:05:01первым там 10-50 пользователям, смотрел
- 1:05:04бы, какие у них проблемы есть. И понятно
- 1:05:07то, что сам бы попользовался. Я думаю,
- 1:05:09то, что сейчас я буду этот проект сидеть
- 1:05:11допиливать сам для себя. Если будет
- 1:05:13интересно, напиши в комментариях, я
- 1:05:15сниму вторую часть с тем, как я его
- 1:05:17допиливаю, и на прямых трансляциях,
- 1:05:20которые я провожу по выходным. В целом у
- 1:05:23меня нету пока что идей, что тут ещё
- 1:05:24можно прямо конкретно нового добавлять,
- 1:05:27кроме полировки вот этого всего
- 1:05:29изображений, плавности анимации. Если у
- 1:05:31тебя, опять же, есть идеи, можно
- 1:05:33написать в комментарии. Я все вообще
- 1:05:35читаю комментарии на Ютубе, поэтому
- 1:05:37давай теперь подведём итоги и посмотрим,
- 1:05:39что мы с тобой сделали. По сути, я для
- 1:05:41себя вот этим вот пока что ещё
- 1:05:43недоделанным до конца, но уже рабочим
- 1:05:45проектом заменяю с продюсеров, которым
- 1:05:49раньше я платил 150.000 руб. за месяц за
- 1:05:5230 роликов, вообще за 20 роликов и 10
- 1:05:56ремиксов моих же роликов. Здесь у нас
- 1:05:58получается, что за вот 4 доллара, за 400
- 1:06:03руб. Я получил себе 40 уникальных
- 1:06:05сценариев, буквально в десятки, сотни
- 1:06:08раз дешевле, чем я бы платил живым
- 1:06:11людям, которые, по сути, делали
- 1:06:12абсолютно то же самое. С точки зрения
- 1:06:15архитектуры и идеи, которую мы накидали
- 1:06:17в начале, это я беру зарубежные аккаунты
- 1:06:20вот здесь во вкладке конкуренты,
- 1:06:23загружаю их и по кнопке выгружаю себе
- 1:06:26все их рилсы списком. После того, как я
- 1:06:29нажимаю кнопку ремикса, мне открывает
- 1:06:31страницу с русской версией, которую я
- 1:06:33редактирую, и добавляю себе в контент
- 1:06:36план. Вот этот вот экспорт я сделал в
- 1:06:38виде контент-плана. То есть я открываю
- 1:06:40Reels, я делаю экспорт в контент-план и
- 1:06:43потом открываю его здесь. Понятно то,
- 1:06:46что ещё пару пунктов мне надо добить, но
- 1:06:48это уже будет просмотр одного и того же
- 1:06:50просто моего общения с кодексом. Для
- 1:06:53этого есть мои стримы. То есть дальше,
- 1:06:55что можно добавить дальше? Это рейтинг
- 1:06:58при помощи нейронки. Какой залетел
- 1:07:00лучше, какой залетел хуже. Из двадцати
- 1:07:03рилсов. Вот взять тут 2.000 лайков, тут
- 1:07:05две, тут 500, тут 5.000 лайков. Вот у
- 1:07:08Нейта Хёрка здесь 5.000 лайков, здесь
- 1:07:10500. Этот 70.000 просмотров - это шесть.
- 1:07:14То есть этот залетел лучше. И можно
- 1:07:17будет в следующей части, я потом уже сам
- 1:07:19добавлю, чтобы просто также при помощи
- 1:07:21кодекса у нас передавалась вся
- 1:07:23информация о всех рилсах. И он просто
- 1:07:27выводил, даже можно без кодекса, даже
- 1:07:28можно без нейронки, просто сделать
- 1:07:30фильтр по рилсам с наибольшим
- 1:07:33количеством просмотров. Это делается
- 1:07:34буквально, опять же, за один запрос,
- 1:07:36чтобы в первую очередь я снимал и
- 1:07:38ремиксил самые популярные зарубежные
- 1:07:41релсы, потому что если он залетел за
- 1:07:43рубежом, то есть шанс, что он залетит и
- 1:07:46у меня. Мы разобрались с тобой, что
- 1:07:49такое Git и GitHub. Смотри, если здесь
- 1:07:51мы открываем, то вот все эти комиты. То
- 1:07:53есть опять же, это как сохранение в
- 1:07:55игре. И я могу в любой момент вообще
- 1:07:57взять и прямо сейчас откатиться на вот
- 1:08:00этот вот комит трёхдневней давности,
- 1:08:02который называется BC 5669C,
- 1:08:05и просто попросить кодекс откати на этот
- 1:08:08комит, и у меня больше не будет моего
- 1:08:10проекта.
- 1:08:12Также мы с тобой разобрали то, что мы
- 1:08:15делаем это всё на сервере. У нас это всё
- 1:08:17крутится в таймвебе, в своём докере и
- 1:08:20работает 24х7 буквально. И давай теперь
- 1:08:23я ещё раз объясню, как работает вся наша
- 1:08:25система с какой-то технически базовой
- 1:08:28точки зрения. У нас есть наш вот этот
- 1:08:31вот сайт, и это полноценный фронтend. То
- 1:08:34есть вся лицевая часть, всё, что мы
- 1:08:35здесь видим - это front-end. Когда мы
- 1:08:38открываем и делаем что угодно с
- 1:08:40какими-то данными, например, редактирую
- 1:08:43перевод, то это уже операция, которая
- 1:08:46отправляется на backend и выполняется на
- 1:08:49бэкэнде. Как это выглядит? У нас есть
- 1:08:52вот frontend. Мы нажали любую кнопку.
- 1:08:55Данные отправились на backend. С этого
- 1:08:57бэкэнда они передались в базу данных,
- 1:09:00которая выглядит в формате такой вот
- 1:09:02колонок, табличек, строчек. И внутри
- 1:09:05разные там у нас базы данных срилсами, с
- 1:09:07конкурентами, и они между собой могут
- 1:09:10быть связаны. С точки зрения
- 1:09:12вайп-кодинга, на мой взгляд, получилась
- 1:09:14у нас довольно незамысловатная система.
- 1:09:16То есть есть фн-ндend, есть, есть база
- 1:09:18данных. Ну, может, это просто у меня уже
- 1:09:20глаз замылился, и мне это всё кажется
- 1:09:22незамысловатым. Я надеюсь, то, что смог
- 1:09:24объяснить тебе всё понятным языком.
- 1:09:27Надеюсь, для тебя эта система тоже
- 1:09:28теперь кажется незамысловатой. И для
- 1:09:30того, чтобы она такой оставалась, я бы
- 1:09:32под конец добавил. Вообще это в идеале
- 1:09:34делать в самом начале. Можешь,
- 1:09:36пожалуйста, создать файл Agents MD, в
- 1:09:38котором пропишешь себе правило, что вся
- 1:09:41система должна быть максимально лёгкой
- 1:09:44без enterprise говна, то есть просто
- 1:09:46максимально простая. минималистичная
- 1:09:49система без лишнего кода, без всего
- 1:09:51лишнего. То есть у неё будет
- 1:09:53единственный юзер, и это я. И не надо на
- 1:09:56ровном месте городить лишние какие-то
- 1:09:58решения, которые не нужны для одного
- 1:10:00юзера. Вот такой вот промт бы я в конце
- 1:10:02вставил, чтобы он продолжал держать всю
- 1:10:05нашу систему лёгкой и легко
- 1:10:08поддерживаемой. После просмотра этого
- 1:10:11видео прошу тебя, самая главная вещь,
- 1:10:13которую ты только можешь сделать - это
- 1:10:15сесть и написать свой какой-то проект.
- 1:10:18разобраться на практике, что такое
- 1:10:20фронт, что такое бэкэнд, повторить всё
- 1:10:22за мной, придумать абсолютно любой свой
- 1:10:25проект, который ты хочешь реализовать, и
- 1:10:27сесть начать его реализовывать. Сейчас
- 1:10:30тебе может казаться то, что ой, у меня
- 1:10:31нету идей, я не знаю, что писать, но,
- 1:10:33поверь, они приходят вместе с тем, чтобы
- 1:10:36начать что-то делать. Ты уже, считай,
- 1:10:39взял кисточку, взял холст и уже в
- 1:10:41процессе начинаешь что-то рисовать, и к
- 1:10:44тебе приходит вдохновение. Не наоборот.
- 1:10:47Не надо сидеть и ждать, пока тебе
- 1:10:49какое-то вдохновение на голову свалится,
- 1:10:50и ты решишь что-то начать делать.
- 1:10:53Серьёзно, на какой-то мотивации, пока ты
- 1:10:55только посмотрел этот ролик, просто
- 1:10:57садись и начинай писать свой проект.
- 1:11:00Если ты сделаешь всё, что я тут
- 1:11:02рассказал, если ты изучишь и поймёшь,
- 1:11:04что такое фронт-энд, бэкэнд, вот на
- 1:11:06таком вот уровне, который я сейчас
- 1:11:08описал, ты сможешь брать и выполнять
- 1:11:11реальные проекты. ты сможешь уже обзять
- 1:11:13и начать заниматься вайп-кодингом за
- 1:11:15деньги. А для того, чтобы научиться
- 1:11:17искать клиентов, в моём Telegram-канале
- 1:11:20есть видос, где я рассказываю, как могу
- 1:11:22помочь тебе начать зарабатывать на
- 1:11:24вайпкодинге. Всё, я жду тебя
About this transcript
This page contains the full transcript of Вайбкодинг РЕАЛЬНОГО проекта (Claude Code, Codex) by Евгений Пантела, generated from the public captions YouTube serves with the video. The transcript has 11,001 words across 1,788 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.
What you can do with it
Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.
Free YouTube transcript tool
YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.