Вайбкодинг: инструкция для начинающих

Так, я думаю, можно начинать. Если кто-то захочет подключиться, я думаю, он дальше подключится.

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

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

А так, ну, соответственно, что такое веб-кодинг? Я думаю, большинство, э, плюс-минус знает. Э-э, в целом, вайпкодинг - это про создание продуктов с помощью И. Э, это не обязательно могут быть продукты, это могут быть автоматизации. Я думаю, многие из вас слышали про еагентов. Эх тоже можно создавать без знания кода. И на одном из примеров я покажу, э, где это можно делать.

И как я уже сказала, сегодня мы поговорим больше про подходы, то есть невозможно знать заранее, как сделать ту или иную задачу. Но в целом, если ты знаешь подход и куда смотреть, то дальше уже можно разобраться. Благо сейчас нету недостатка информации и можно посёрчить.

А при этом, а, как я сказала, несмотря на то, что вайпкодинг не требует знания синтаксиса любого языка программирования, э тем не менее лучше понимать вообще, что происходит по нескольким причинам, потому что, например, если вы интегрируете какие-то системы, например, не знаю, интегрируете опишку Open AI, э, особенность Если это какой-то новый продукт, там, скорее всего, сами лмки ещё не очень хорошо знают документацию, поэтому её нужно будет, скорее всего, прочитать, ну, либо закинуть и потом проверить, что те системы, которые вы используете, корректно их интегрировали, потому что не всегда это происходит так, и иногда он что-нибудь неправильно прописывает, ничего не работает, и нужно понять, что вообще происходит. И второй момент, если делаете продукт с интерфейсом, то не всегда решения интерфейсные, они самые оптимальные. Поэтому классно, если вы понимаете, как это сделать оптимальнее, и уже закидываете в ЛМ либо уже готовые макеты, либо потом даёте навигацию, что можно сделать по-другому.

А где применять? Это такой самый животрепещущий, я думаю, вопрос. А так пишут: "Связь плохо ловит". Это, э, ловит плохо. У меня насколько меня хорошо слышно? >> Нормально слышно. >> Хорошо. Да, >> всёвсё отлично. О'кей. Да, я тогда запись скину. Я её выложу, скорее всего, и скину просто в канал про вайпкодинг.

А где его можно применять? А здесь, на самом деле, очень много э вариантов. А первое - это личные проекты. Но тут как бы всё понятно. То есть если у вас есть какая-то задача, которую можно автоматизировать, то вы её делаете для себя. И здесь вайпкодинг вообще отлично заходит, потому что вы начинаете делать с нуля, то есть у вас нет уже каких-то зрелых систем, которые нужно анализировать, как это, например, в корпорации. Нет каких-то сложностей с безопасностью. То есть вы просто это делаете. И со всем мини-приложением, условно трекер задач можно сделать очень быстро. Если это что-то более сложное, то тогда, да, тут придётся посидеть.

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

По поводу бизнес-решений. Здесь, если мы говорим про корпорацию, может быть, не так всё однозначно. А почему? Потому что у когда мы говорим про компанию, если вы хотите внедрять решение с привязкой к системам внутренним системам компании, то здесь надо очень хорошо их знать. Э-э, там может быть много подводных камней. То есть, если вы в это ввязываетесь, то вы должны быть уверены, что вы хорошо понимаете систему, всё разобрались и можете сделать какую-то встройку. А альтернативный для этого вариант, если вы делаете MVP проект без привязки к внутренним системам э компании, это может работать. Тогда это по сути как личный проект, вынесенный, ну, как бы вне контура компании.

А что ещё? А для компании, да? Соответственно, можно создавать ещё прототипы. Раньше мы создавали прототипы Фиг. Наверное, все более-менее знают, что там можно делать кликабельные прототипы. Фактически с вайп-кодингом можно сделать то же самое. Это будет, э, фронт, сделанный без привязки к базе данных к бэкэнду. А просто, например, чтобы протестировать заказчика. Например, у вас есть какой-нибудь внутренний заказчик, и вы хотите ему показать, ну, не просто там условно вот список функционала, который я хочу сделать, а уже наглядно, потому что есть бизнес-заказчики, которые, например, э не очень секут в том, как создаются эти продукты, и им проще посмотреть это наглядно. Вот.

Э в чём отличие между таким прототипом и Фигмой? Это в том, что сделать его всё-таки попроще. Ну, Фигми сейчас тоже есть, на самом деле, режим, который делает вапкодинг. А можно делать, э, можно делать, ээ, и тамкодинг решения, и можно делать условно в курсоре. А, насколько я знаю, viпкодинг Фигме доступен по подписке курсор. Ну, соответственно, ну, там есть бесплатная версия, но есть типа подписки. Это делайте быстрее, на мой взгляд, достаточно более интерактивное, чем это всё самостоятельно руками создавать. И в дальнейшем уже можно, например, не напрягать дизайнера. Он, например, дизайнеру занимается проработкой уже более детального дизайна. Дальше вы делаете пока прототипы, вовализируете с клиентом, ну или заказчиком, и возвращаетесь потом уже к дизайнеру с конкретными правками, которую вам уже дал заказчик, и дизайнер уже делает полноценный дизайн, который в будущем отправится в разработку.

В чём ещё преимущество будет такого решения? Это в том, что если вы это сделали в условном курсоре, мм, у меня есть одно решение, но оно я не могу его показывать, потому что я его делала под компании. Это внутренний продукт компании. Но в целом, если у вас есть код, соответственно, код этого прототипа, то ваш курсор, он может собрать документацию на основе того, что у вас по коду есть. То есть та продуктовая документация, описание функционала, оно собирается просто, условно, если я здесь прошу его, ну, напишу сюда просто в чат: "Собери мне документацию". А нужно будет её посмотреть, чтобы она была адекватной, потому что если у нас нет данных, нет бэкэнда, то, ну, он как бы собирает, исходя из того, что нарисовано на фронте. Но это довольно-таки удобно, потому что там дальше надо просто поправить. На мой взгляд, это быстрее, интерактивнее, чем вот собирать самостоятельно в руками. Особенно, если это не супер какой-то сложный продукт, а какой-то плюс-минус типовой.

А так, а едем дальше. Вот здесь я хотела рассказать больше про инструменты и показать их заодно. Здесь, возможно, как бы все по-разному их используют. Я больше буду рассказывать про то, что использую самостоятельно. Основное, что я использую - это IDE. И здесь два подписано, то есть они есть разные с AI встроенными. Есть курсор, есть Wurf. Я использую курсор, но это как бы э up to you. В принципе, не обязательно использовать эти эти IDE курсор или Winсf, а можно использовать условно-код. А идко он запускается э внутри любого IDA. Есть бесплатный VS-код, э если вы знаете. Соответственно, его просто вообще можно скачать бесплатно. он всегда бесплатно раздаётся. Э, вы его скачиваете, э, и просто в терминале устанавливаете, э, клод. Соответственно, как только вы его устанавливаете в терминале, вы можете его всегда вызывать, э, вот здесь просто вызывая клод. М. И у вас получается вот этот вот чат, который есть в курсоре здесь, он доступен здесь. То есть вы здесь можете что-то писать. Он также, кстати, принимает скриншоты. Ну, вообще не обязательно скриншоты, просто изображения. То есть, если вам нужно сделать по изображению, то он, э, клод-код неплохо работает. Ещё из новостей, которые на прошлой неделе появились, это то, что клод-код теперь доступен вебе. Я его, честно говоря, не пробовала. Но там даже дают бесплатные кредиты, чтобы можно было его поюзать.

А что ещё? Ну, соответственно, в курсоре, если у вас есть курсор, вот здесь это чат курсора. Это получается клодкод. Я могу любой, ну, ещё терминал открывать для того, чтобы запускать своё приложение. Но в целом можно писать и здесь, и здесь. А есть ещё третий - это chat GPT кодекс. Ээ, как вы понимаете, это решение отсчёт GPT, ну вот Open AI. И, э, у него есть веб-версия. Вы можете, например, даже на ходу, а, вносить изменения в Git. Ну, соответственно, в Гите вы храните код, э, и его тоже можно устанавливать как настройку сюда. То есть вот, например, я могу вызвать кодекс, э, и здесь тоже что-то писать. они оба будут редактировать мой код. А вот сейчас у меня в папке ничего нету, но их можно, в принципе, в пустой папке тоже попросить что-либо создать. А и клод, и кодекс, и курсор. Не обязательно иметь сразу три или там миллиардах. Ээ в целом достаточно для пробы достаточно одного.

И что ещё интересного можно могу сказать, что супер какие-то мини-апы. Вот, например, для этой встречи я делала, э-э, я поняла, когда начала встречу, ну, где-то за пару часов, что у меня нет визитки, и я, например, просила Клод сделать мне, ээ, визитку, сайт визитку. И он, в принципе, всё мне доделал, э, буквально там за 5 минут. Я даже могла посмотреть, как это выглядит. Я просто её немножко переделала. и захостила. То есть это супер мини какие-то веб-приложения, лендинги. А можно прямо в вебе и именно в самом чате просить clotд. Ну, и чат GPD тоже.

А что ещё есть? Э есть платформы, э которые работают как надстройка, мм, но они такие очень userfriendly. И обычно в компании всем всякие продукты используют их, потому что они простые, э, но платные. И чаще всего я стараюсь не платить за всё. То есть у меня есть курсор, клодко код, ну, и чат GPT. Кодекс он входит в подписку чат GPT, ну, clд тоже. И, соответственно, но lavable условный я использую обычно для веб-приложений, как быстрый старт. Если я не хочу делать э собственный дизайн, э то я начинаю с Lavable, потому что Lavable делает дизайн ещё. И мы посмотрим, как это можно комбинировать друг с другом. На примере какое-нибудь воприложение возьмём. Вот, соответственно, все вот эти они делают вам веб-сайты. Здесь даже вла из последнего, а раньше он позволял сделать только вот условно лендинги. Сейчас я вам покажу какой-нибудь лендинг из истории. А то есть он достаточно быстро может это сгенерить. И это, кстати, сгенерёно бесплатно. То есть я ничего за это не заплатила. И у вас каждый день есть бесплатные кредиты, которые вы можете тратить. И из последнего они стали добавлять возможность интегрировать сюда и AI функции, но это уже за платную, короче, платно, поэтому можно это делать потом бесплатно в условном курсоре. Ну там чуть больше надо будет движений сделать, но зато это будет бесплатно, потому что, например, условно lavable мне не нравится тем, что он работает у подписке. То есть независимости от того, билдите вы что-то или нет, вы будете всё равно платить по 20, для меня это 20 евро. месяц, что выглядит не очень прикольно.

А, и есть отдельные такие же платформа для мобилок. Вот, например, это Aning. Я её как-то пробовала. А в целом он неплохо делает проекты неплохие собирает. Он собирает на Реакт нейтиве. и React Native. Ну, соответственно, кроссплатформенное будет приложение создано будет под iOS и под Android. Из того, что мне не очень понравилось React Native, что по нему его как будто бы хуже знает LLM. Поэтому когда есть какие-то проблемы с приложением, его хуже получается фиксить, чем условно, если это приложение на Свифте. Но преимущество большое таких приложений кроссплатформенных в том, что вы можете сделать одно приложение, оно будет сразу же его можно будет, ну, не сразу же, но его можно будет выложить и в Google Play, и в Apple Store, в то время как если вы делаете для отдельно под iOS, отдельно под Android, то там нужно будет две версии поддерживать, что не очень удобно. И в особенности, если это MVP, то это тоже как бы не самый лучший вариант.

М. Так. Да, про Firebase AI я не использовала его. Использую Firebase только для мобила в качестве базы данных. Да. RIT, да, тоже сюда же. А вот эту я не знаю. Ну, RLID, да, тоже это платформа такая для создания приложений.

А, ну и последнее. Есть агенты. Соответственно, они позволяют делать интеграции проще, особенно если вам нужно интегрировать несколько систем, а, и автоматизировать таким образом процессы. А есть Chat GPT. Chat GPT даже есть сейчас, э, веб-интерфейс, по сути похожий на интерфейс N8N, э, и чар JPT. в него доступ не такой не так просто найти. Надо идти через мм дашборд э для разработчиков. Вот в чате скинули для мобилок ещё одну. И вот про AI agents. Здесь вы можете найти. А сейчас, секунду. Да, вот они вот здесь вот описывается, как, соответственно, про, короче, они агенты описали. И изнова у них есть я агент э ээ дашборд, которым вы можете просто перетаскивать и что-то строить. А сейчас он подгрузит. Ну да, тут, в принципе, стандартно для агентов различную логику. Вы просто перетаскиваете, он днропом работает и задаёте, э, логику, соответственно, соединяете их друг с другом. Э более, мне кажется, популярно в этом плане N8N. И что прикольного, вы можете найти уже готовые схемы. То есть, условно, м, вот я создавала здесь, не я создавала, я находила готовую схему, а, по автоматизации, и вы можете её просто загрузить. То есть здесь под поддерживается подгрузка сразу же э с файла. То есть если вы найдёте JON готовый по автоматизации чего угодно, а их много в сети, э где их искать, это условно можно поискать напрямую в гитхабе. А либо на Редите есть специальный тред с N8N, и там есть много про автоматизации, и много людей на самом деле шерит свои файлы. Вы можете просто потом тоже взять этот файл и импортировать его. И вот, например, вот это вот чистый я импортировала файл, чтобы потом его подработать. Здесь, соответственно, есть какие-то описания, что он делает. Ну, и дальше надо смотреть уже конкретно а саму мм сам процесс, который здесь внедрён. А, ну, соответственно, они очень хороши, когда вам нужно интегрировать очень-очень много систем. между собой. Это делается довольно-таки просто, но, ну, как бы всю ту же логику можно и внедрить в своё собственное приложение. Просто это будет чуть дольше.

А, да, соответственно, я уже до этого говорила, что для вайбкодера в целом важно понимать, как общаться с Иикет Science, но из такого основного, что нужно знать - это как создавать промты. И в целом есть инструкция чат GPT по созданию промтов. Ну, иметь продуктовое мышление, это понятно, что когда вы делаете продукты, э, и когда вы с чего-то с чего-то стартуете, вам нужно понимать, как это уме, как это делать. Ну, и базовые технические знания. Здесь, я бы сказала, что просто нужно, ну, какое-то базовое понимание. Дальше надо будет учиться, ну, много, соответственно, смотреть, читать информации. Простые приложения, как я сказала, сделать довольно-таки можно быстро. Если это посложнее, то там придётся чуть подольше посидеть.

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

А да, был вопрос ещё в форме, если нет идей. И это, я бы сказала, больше продуктовая часть, как найти идею. Соответственно, с чего можно начать? Это можно начать либо со своих задач, которые вы делаете, которые вы хотели бы оптими оптимизировать. Например, те же новости. хотите получать ежедневно, вы хотите это автоматизировать, а вы можете попросить и для генерации, соответственно, просто какую-нибудь область ему задать и попросить ему, э, понакидать идей. Вы можете исходить из того, а, насколько технологии позволяют вам. Соответственно, например, вы видите, что вышла новая технология и, э, придумываете, как можно её применить в каком-либо продукте. Мм, и, ну, в рабочих задачах тут понятно, э, подумать про то, чтобы вы могли автоматизировать.

О'кей. А, идём дальше. Так, э, да, у нас, соответственно, есть встречи, которые я провожу личные с разбором проектов. Это скорее для тех, кто хотел бы больше погрузиться. Э поэтому у меня есть доп, как бы на допграма, э, соответственно, с видеоуроками. Там уже больше пошаговой инструкции, как настроить, как начать проект. Дальше мы, соответственно, встречаемся уже лично с вами, разбираем конкретно ваши проекты, что вы делаете, как можно это улучшить, как ускорить, как подойти, а как зарелизить и так далее. Вот, соответственно, это, э, для тех, кто хотел бы дальше погрузиться.

Э и сейчас мы подходим к самому интересному. Так, как я сказала, а может быть у нас несколько первых проектов. Это не обязательно те, которые сейчас тут написано. А, но основное во всех этих проектах, например, если мы начнём с с трекера задач, это определить всё, что мы хотим, э, именно с точки зрения функционала. И первый шаг для того, чтобы нам что-либо создать - это сделать описание. И в описании нам хорошо поможет какая-то из LM. Можно взять чат GPT, можно. А, и условно мы начнём новый чат и скажем ему так: "Аэ, ты опытный, я не буду сейчас детально всё расписывать, мм, но скорее просто подходом покажу". Соответственно, я например, у меня есть идея вот этого тасктрекера, и я хочу его сделать в виде веб-приложения. Сейчас мы посмотрим, есть ли у нас. Ну да, это по сути получится совмещение. А я хочу сделать э веб-приложение, мм, чтобы каждый день трекать свои задачи. Соответственно, я хочу, чтобы там я могла вносить эти задачи, удалять и помечать их сделанными.

Мм, сразу же ему задам, что это будет веб-приложение. Э для упрощения могу сделать, что это будет без авторизации. Ну, соответственно, это любой человек сможет если я это захочу где-то любой человек сможет дойти и ээ выполнять вот это. Э, но авторизацию в целом не очень сложно сделать, да, это создаться в один промт. Я просто покажу, какие разные могут быть варианты. А без авторизации.

Посмотрим, что он скажет. Э, я создаю обычно подробное описание, чтобы посмотреть, не упустила ли я что-то. Иногда он предлагает прикольные идеи, которые можно, а, но чаще всего это бывает избыточно, поэтому я потом сама почищаю ещё. Ну, соответственно, тут он делает описание, а пишет поля UIU элементы, низкий, средний. Вот он, например, добавил приоритеты, э, которых изначально не было. дата создания, срок выполнения, редактирование X, удаление, массовое удаление, то есть это более такой профункционал фильтрации он уже сразу же. Ну, допустим, мы не будем делать фильтрацию, э, или просто оставим как есть, допустим.

И у нас есть несколько вариантов. Первый вариант, который, да, действительно, сказали в один крик, можно попросить сам клод сделать. А-э, в целом я бы сказала, что, да, три варианта есть. Это, например, прошу сейчас клод сделать. Я могу это делать не обязательно в веб-приложении, но давайте попробуем в веб-интерфейсе. Либо я могу просто перенести вот этот же это же описание и сделать уже у себя локальное, чтобы, например, локально запускать. То есть вот сюда, например, добавлю или сюда, или сюда, неважно. Ну давайте попробуем, попробуем запустить здесь. Какой ещё может быть вариант? Второй вариант - это, например, тоже был такой вопрос. Вы делаете в Фигме дизайн и, соответственно, просто скачиваете его картинкой и загружаете сюда. И третий вариант - это вы идёте с описанием сюда, а, и загружаете описание сюда, и вам lavable генерит тоже дизайн. Сейчас мы потом тоже это сделаем, чтобы посмотреть, как это можно выгружать отсюда э готовые проекты.

Вопрос был про то, использую ли я в Нью-Йорке. Скажу так, честно, больше я использую лайпкодинг для своих проектов, просто потому что это проще по всем фронтам. Нью-Йоркер я использую это для того, чтобы вот как я показывала пример с прототипом. То есть мне надо было показать заказчику внутреннему, как будет выглядеть веб-приложение. Изначально первым этапом, ну, сейчас ещё продуктово срабатывает, первым этапом, что я делала, это собирала информацию о том, как выглядит текущий процесс на основе этого делала, э, вайп-кодила приложение, в чём было плюс, кстати, такого подхода. Первое, я отдала разработчикам код тоже, потому что он был в гите. Второе, э, ну, это тоже может быть в Фигме, но можно было заходить просто по ссылке. чтобы посмотреть приложение. Третье, у меня дизайнер занимался пока что мобильным приложением, и в параллели с этим я могла делать прототип дашборда и показывать заказчику. Соответственно, мы немножко распараллели эти процессы, поэтому мы идём довольно-таки быстрыми этапами. network и да, ну, соответственно, я, как уже сказала, это было плюсом в том, что я могла разработчикам уже дать тоже код. А, и четвёртый момент - это создание документации. То есть в один клик после того, как у меня уже был прототип даже борда, у меня курсор м вот здесь просто я попросила его по коду собери, пожалуйста, там продуктовую документацию, и он собрал все userстори, собрал функциональное описание, и мне оставалось только проверить, что тоже как бы большой плюс, я считаю.

И о'кей, пока тут Клод пытается что-то нагенерить, мы не будем какие-то будущие улучшения брать, сильно вычищать без экспорта пока оставим. И попробуем закинуть это же в lavable, ну, пусть даже с дополнительным функционалом, чтобы потом сравнить, что делает один и что делает другой. Соответственно, я закидываю на русском языке. Обычно, если я закидываю описание на русском языке, то он будет делать тоже на русском языке. А и вот у меня как раз бесплатные кредиты, я их как раз поюзаю. Сейчас главное, чтобы клоду плохо не стало. Так, он что-то нагенерил, но, по-моему, не очень хорошее. Ну да, он что-то хреново очень сделал это. Э, сейчас посмотрим, как здесь, и запустим ещё, э, вот в вебе он, особенно, если это большие какие-то приложения с кучей функционала, он в какой-то момент начинает лагать, поэтому это не самый оптимальный способ. Сейчас закинем сюда ещё и посмотрим, как здесь. Заодно давайте проверим в кодексе. М, и вот такой как бы подход, когда у меня есть функционал и закидываю просто из- это о'кей для простых приложений. Если приложение оно более сложное, то здесь лучше идти ступенчато. То есть изначально у есть функционал, дальше мы просим сделать архитектуру. Дальше просим сделать условно файл tasks.m, MD, где он прямо разобьёт по задачам, которые нужно сделать, пройти, э, пройти, соответственно, АИ по шагам, чтобы у вас была возможность пошаговостировать на каждом этапе мм свой продукт. А для маленьких каких-то штук это особо не нужно, потому что у вас, ну, в принципе, не такая большая система. Тут можно её протестить быстро и сделать, внести точечные изменения.

Сейчас он делает всё ещё в процессе. Вот. Ну, соответственно, дизайн, если мы дизайн сдаём, он сам его, э, сам его придумывает. Поэтому здесь, как из генерации видео, нужно подробнее задавать, если вы хотите, чтобы он меньше заполнял пустых, а, моментов. Так, посмотрим, что у нас здесь. Вот был, кстати, сгенерил. Ну вот он создал простой тасктрекер. Чаще всего, когда он создаёт, это ээ не интегрирован ни с какими базовыми данными. То есть это, допустим, сделаем тест приоритет какую-нибудь дату выда. Ой, блин. Создать. И скорее всего он создаёт это на фронте, потому что обычно для того, чтобы интегрировать базу данных, это Superbase, нужно задать дополнительно сюда запрос, чтобы он интегрировал Superbase. М. И дальше, если вы хотите это скачать, а, то, э, надо синхронизировать этот проект с Гитхама. Соответственно, если я нажму сюда, то я могу создать, ну, у меня уже подключена организация, поэтому я могу откинуть GitHub. Лучше

Это делать, когда у вас уже есть все коннекшены, которые вы хотите. То есть, например, Superbase, чтобы потом дополнительную ручную не подключать, можно подключить из Laable и откинуть GitHub.

Э, дальше уже, соответственно, из гитхаба вы можете скачать этот проект, просто файлы открыть уже на локале. И, э, точно также вот здесь у вас будут файлики, вот здесь, если уж правильне, а, и вы сможете их редактировать мм уже внутри курсора, ну, либо какого-то друго, а, не тратя вообще деньги на это. Это хорошо, например, да, когда вам нужно дизайн создать. Здесь мы создали дизайн. Если нам нужно что-то поменять, то мы можем просить его поменять. Э и да, если нам нужно подключить базу данных, например, мы не хотим терять эти данные, то, а, тогда тоже нужно так и написать. Просто подключись к Superbase, и он это сделает. А если вы не хотите, например, глубоко разбираться о том, как типа создавать там и всё такое, то, в принципе, можно пользоваться laable, а здесь тоже можно подключить. Это всё делается просто запросом сюда. Сейчас посмотрим, что на генерит здесь. Ладно, оставим его пока.

Тогда пока прежде чем я перейду к следующему, есть ли какие-то вопросы по этой части?

>> Мм, есть вопрос. Ты говорил то, что вот эти приложения работают, правильно понимаю, то, что некоторые из них работают с виpном, некоторые нет. Вот у нас в России.

>> Мм. Мм, блин, я вот, честно говоря, не знаю, но это ответ, какие за виpном, какие нет. Это надо тестировать. Э, я знаю, что Ладно, да, это надо смотреть, потому что

>> Ну, чат GPT и Clot точно работает с VPN только. Вот. А остальные? Остальные не тестил, думаю, мало ли пересёчила. Нет, я знаю, что только что участие сайтов у меня не открывается, если я вдруг включаю российский VPN VPN наоборот.

>> Понятно, понятно. О'кей.

>> Мм, я думаю, как если они заблочены. М. А, ну я вспомнил, я же ездила, когда в Россию, то я VPN, когда включал, то у меня работало всё. Да, я тогда через VPN это работала. М.

Так, ещё вопросы есть ли? О'кей. Если нет, то я предлагаю посмотреть второй, пока ээ эклод что-то там генерит. Deeps пишет, что без VPN работает. Но на самом деле ещё работает этот, как он называется, сейчас вспомню. М, перплекция.

>> Мм, о'кей. Я я там, честно говоря, никогда ничего не билдила. Я только обычно его использую для поиска чего-то. Ну, информация. О'кей.

Пока там генерится, тогда давайте перейдём к следующему. Это агрегатор новостей. Здесь может быть простая ситуация, может быть сложная. Самая простая ситуация - это когда у э те у того источника, который вы используете, естьсленты. Тогда это легко. Вот, например, здесь вот в ведомости есть разные рассленты, которые вы можете использовать. Если их нет, то тогда это парсер, по сути сайты, и это может быть как просто, так и сложно. По некоторым причинам, но в основном по двум причинам. Первое - это есть сайт, который о'кей к тому, чтобы парсить их даже с условно с яишкой. А есть сайты, которые защищены от парсинга. И здесь, наверное, будет уже больше чучуть посидеть, подумать, как это сделать. Как можно это всё автоматизировать? Мы можно достаточно легко автоматизировать через N8N. Э, здесь, например, мы заходим, создаём новый workflow. И, э, нам опять нужно описание. Здесь мы можем пойти либо вручную, то есть перетаскивать блоки, добавлять какие-то шаги. Здесь их довольно-таки много. А, либо можем пойти ещё двумя путями с помощью ЕИ. Здесь есть тройный, тоже довольно-таки неплохой, а, который можно использовать для того, чтобы автоматизировать этот процесс. Но опять же, ему нужно описание, поэтому, чтобы не тратить, тут тоже есть кредиты, э-э, то лучше пойти там, где у нас условно безлимитный, э, доступ, мм, и попросить э сделать, мм, нам флоу. И, например, я хочу собирать новости вот с РС с потоками. Это вообще будет самый простой вариант. Не знаю, возьмём это и это. Либо можно будет делать комбинацию. Э, я пишу. Мне нужно, соответственно, описание того процесса, который я хочу автоматизировать. Что хочу получить получить от этого? хочу получать ежедневно аэ сводки последних новостей. Например, я хочу, чтобы эти новости касались только мм ритейла, э, э следующих источников. Можно его просить э искать по интернету. Ну, когда мы похожую задачу решали, э-э, как раз, э-э, на программе. И, э, первое как бы, ну, как бы основное, что нужно проверить в таком кейсе, что будет влиять напрямую на работу вашего продукта, это насколько хорошо AI ищет эти новости. Ну, соответственно, просто забили там условный перплексити, потому что перплексити тоже можно опишку подкрутить. И он часть новостей пропускал, э, те, которые просто вот когда в Гугле там пишет, то он сразу же выдаёт по такому же вопросу запросу. Поэтому, если вы знаете источники, из которых лучше всего брать, то можно их просто сразу же перечислить. Например, здесь у меня вот эти два источника. [музыка] Я попрошу его подготовить. Подготовь, ээ, для Ой, это что такое? [музыка] А, ну, соответственно, получать ежедневно сводки новостей, допустим, на электронную почту Gmail. Если я хочу какой-то определённый формат то, соответственно, я тоже это задаю. [музыка] текста. Ну, соответственно, он сейчас сгенерит. Можно, конечно, и здесь, но тогда будет просто кредиты тратиться на итерации, когда вы там рефайните.

Так, а между прочим, у нас, кстати, чат GPT доделал. Мм, соответственно, вот файлы, которые он создал. Ах, да, он предлагает мне его открыть. Э, и, видимо, по всей видимости, он не делал это с, э, нормальной палитрой. Нет, палитры он сделал всё-таки. Ну, в общем, можно посмотреть будет, э, как он это сделал. Мм, сейчас, секунду. Ну да, соответственно, он ежедневно, смотрим здесь, ежедневно он запускает, э, читает РСС, объединяет ленты, ээ, фильтрует, да, вот здесь вот вопрос надо будет, например, ставить, за какой период он должен это делать? Фильтровать за 24 часа. А, да, соответственно, ставить только так. И он здесь сделал вот эту фильтрацию, я так понимаю, не автоматическую, например, через AI, а просто по логике. Здесь, например, можно было бы поправить, если я хочу, чтобы AI [музыка] форматировал, то тогда я могу просто ему закинуть, чтобы пункт вот шаг пятый делался через Open AI. Так. Да. Ну, соответственно, дальше мне нужно будет поправить основное, да, это в криншол мне нужно будет сделать, настроить. О'кей. То есть у нас есть два варианта. У нас есть описание задачи, которое мы можем закинуть туда. Либо, э, я могу альтернативно закидывать сразу же Jon. Если, например, вот сейчас попробуем описание, посмотрим, как он сделает. Ну или другой вариант, который я говорила - это найти в сети просто под вашу задачу, если она типовая, уже готова Jon и просто его закинуть. И вот исходя из того, что я вижу, что сделал GPT, а, например, тот же Lavable делает более, э, детально, э, ну, сразу же уже более готовый продукт, чем GPT. И Lavable делает это на Typeриpt, а здесь отдельный HTML, JavaScript, KSS. Э, короче говоря, немножко по-другому он делает. И здесь тогда надо чуть больше всё-таки давать водных ему и лучше исходить из того, что вы делаете архитектуру дополнительным шагом. Вот поэтому, если делать веб-приложение, то там самый простой этап - это пойти через Lavable. И, кстати, в Lavable как раз вопрос о том, что если у вас есть уже, э, готовые скриншоты, можно через IDE или и если через Laable, то здесь тоже можно а было добавить э условный скриншот, например. Мм, да, вы можете добавить скриншот и сказать, что типа сделай, а, так, как сделано на скриншоте, например. Ну, соответственно, у вас есть скрин и плюс до описание, и он сделает так, как надо. Либо, если у вас нет, то он делает, как хочет. Ну вот, соответственно, это очень простая автоматизация. Э, мм, всё, он как бы всё всё сделал. N8N и здесь он добавил RSS по ведомостям. Смрджал эти, а, RSS. И дальше он вот по функции он фильтрует. А, но фильтрует он, да, просто исходя из какой-то логики, которую мы задали. А, и вот он будет фильтровать по вот этим словам. Можно сделать более умную фильтрацию через Open AI. Тогда надо было вот как раз на пятом шаге это явно показать. Ну и тут будет ещё дополнительная интеграция. Это будет значит, что вам нужно будет AP ключ получить. Эла промт прослойки. Он сам докручивает промты, вроде. А ну да, поэтому проще через него работать. Но да, там надо будет платить каждый месяц. -э, и проще проще основное настроить там бесплатно и дальше уже просто докручивать, э, все, ну, какие-то функции уже внутри самостоятельно. А вот, ну, соответственно, здесь что останется сделать - это Gmail поставить credential. Вот здесь вот нужно будет записать, условно давайте сразу же мм email сюда он будет отправлять subject. О'кей. Блин, опять тут ужасный интерфейс. Я всё время не могу обратно вернуться из него. И попробуем сейчас запустить, посмотреть. Ну вот опять же, даже если мы запустим, получим результат. И, например, он, ну, рядко он получается с первого раза сделать его. Вот, например, сейчас мы сделаем, подключимся. А, да, добавим ему. Ну, о'кей, пусть будет пока всё. Э, и дальше, если что-то не работает, то надо будет докручивать. Сейчас connected. А можно вот тут, кстати, проверять каждый этап отдельно. Э, так, насколько я поняла, мы всё сделали, да? А, всё сделали. Соответственно, я указала, куда отправлять. Я сделала коннекшн к Gmail и попробую запустить workflow. Будем смотреть, что он работает. Нашёл уже что-то. 400 айтемов нашёл. Ну вот, видите, он не смог объединить и пишет ошибку. Почему сно проблема с функцией? О'кей. Если бы мы, кстати, вот здесь бы запустили, он сейчас бы автоматически вообще бы сделал бы м дебаг, да? Вот сейчас он сделает дебаг и обычно после этого запускается. Ну это совсем-совсем простое простая автоматизация. Я вам как раз покажу. Сейчас вот я показывала соседнюю автоматизацию. Это для планирования постов в ТикТоке, в Инстаграме. То есть там гораздо больше, э, гораздо больше интеграции, потому что там нужно фетчить данные, ну, соответственно, подгружать разные данные из разных опишек, их обрабатывать и, в общем-то, гораздо больше логики.

Так, отлично. [музыка] Он сделал. Сейчас смотрим. И где письмо? Вот, например, вот здесь вот он отлично сделал, прошёл этот этап, но дальше не переходит, например, к следующему. Э, и при этом он его не видит. Вот это как бы очередной момент, который нужно вот дебашить. Почему, например, он не видит его? Это, кстати, вопрос, да, который часто встречается, как вообще делать дебак. И основное, что вам нужно сделать, когда вы что-то там дебашите, что вы на можете смотреть, это на логи чаще всего. А логи, если это веб-приложение, то вы можете смотреть, э, в в, ну, например, здесь, да, в инструментах разработчика. Есть консоль, есть сеть, соответственно, вы смотрите, а что происходит, если, особенно вы кидаете какие-то запросы, смотрите, какие есть ошибки. А если вы интегрируетесь с дополнительными системами, условно, э, Open AI есть интеграция, то вы можете смотреть тоже логи там. То есть, например, вы заходите в дашборд и смотрите, что было в логах, то есть почему comptions, responses, почему это не сработало. А также, например, если проблемы на стороне Бека, то вы можете тоже добавлять логи и тоже отлавливать на каждой из каждом из участки. Вот особенно такие штуки важны момент интеграции между собой. Если если у вас много интеграции, то чаще всего там возникают какие-то проблемы. И вот надо прямо смотреть, что не так. А для Поэтому а ещё важно как раз тестировать, э, когда вы делаете какой-то сложный продукт, не всё сразу же там закидывать в LLM и ждать, что она вам сделает. Э лучше для того, чтобы это было более-менее контролируемо, добавлять одну функцию и тестировать. добавляете новую функцию и тестируйте. Но здесь обязательно как бы для более сложных систем создавать правила э в условном там курсоре в настройках, как это, как он должен работать. То есть, э, если а вы не хотите, чтобы он вломал то, что вы делали раньше, а такое часто бывает, то нужно ему задавать правила, ну, в явную, что что как он должен работать. И вот здесь, кстати, я ещё увидела дополнительно MCP. MCP тоже есть у у CLД кода. И один из вариантов, соответственно, если вам интересна вообще эта тема, то, э, ну, попробуйте зайти в клод и спросить у него про MCP, как вообще запускать его в клод-коде. Один из вариантов, который для чего можно использовать MCP, например, в условно своих проектах, можно и в рабочих тоже, это создание аналогичного сайта. То есть он может зайти, агент может зайти на любой сайт, который, ну, на любой, который вы ему даёте, и он может создать ровно такой же сайт. Ну, естественно, без особенностей, который известна только самому разработчику. Но с точки зрения фронта он может повторить такой же сайт. В принципе, вы можете это сделать со скринами, но это один из каких-то таких вариантов. А-а, ну всё, минус аккаунт. Почему я не показывала ключи? О'кей. А так наше время уже подходит к концу. А вопросы? Есть ли какие-то вопросы? Э и или нужно что-то подробнее рассказать? Э основное как бы прямо вот детальный продукт тут не не получится сделать за час. А, но из основных шагов, которые вы можете сделать дальше- это пойти точно так же. хотя бы начать с маленького какого-то мини-продукта, а, и потихонечку, а, с него начать дальше двигаться дальше, а, дебажить и уже переходить к более сложным каким-то вещам. Можно начать с простых из серии Lavable, дальше перенести в и дальше уже тренироваться там. И, ну, соответственно, если есть какие-то вопросы, то я готова на них ответить. А, спасибо.

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

Ну, я никогда не плачул. Я если делаю, то вот всё, что я делала, сейчас покажу, а всю мою историю. Я делала первые страницы, то есть вот проект ээ когда я не хотела дизайн делать сама, >> он не сделал, а первую, ну, как, короче, лендинг фактически сделал, >> как он сейчас выглядит. немножко по-другому. Ну, как бы это уже рабочая рабочий вариант, то есть тут его можно прокликать ээ и всё такое. А я его, ну, соответственно, я использую lavable как начальный этап, просто для того, чтобы сделать внешний вид UI. >> И дальше я загружаю это в Git и работаю уже в ADE. Поэтому всё, что я трачу, ну, это подписки на клод, на курсор, начат GPT. Но два из трёх я использую не только для кодинга, а для того, чтобы ещё просто какие-то задачи другие поделать.

>> Угу, понятно. А с точки зрения дебагинга я вот не до конца понял, ты сказал то, что можно погрузиться там в каждую из моментов, посмотреть там по, э, условно логам, а дальше, то есть ну, то есть на этом этапе нужно всё-таки понимание кода. Или ты точно так же берёшь условно часть, которая с багом, и загружаешь, типа найди баг, отрефлексируй и почини его. Или каким образом это фиксится?

>> Мм если у нас есть логи, то здесь достаточно просто, потому что они, ээ, ну, в целом неплохо умеет их интерпретировать, читать. Соответственно, дальше я просто копирую, могу скопировать информацию о баге, что не работает. Э и, ну, соответственно, дальше и условный курсор или клод их может поправить. Дальше я снова тестирую. Мм, поэтому для них вот такая техническая информация, она для них важна, потому что они лучше её считывают, чем условно у меня просто там где-то что-то не работает. А когда нужно знать код? А, ну если, например, иногда бывают плохо элементы редактируются на юае, тогда тут можно пойти просто ручками поправить э куски какие-то либо сделать по-другому. То есть ты, например, особенно если это UI, э видишь, что что-то не так отображается. Ну, просишь либо курсор, либо сам находишь в каком файле. Обычно, кстати, файлы очень неплохо называет. Э, ну и Lavable тоже, то есть понятно, какой-то кусок. Э, закидываешь м отдельно, например, Webchчаge GPT, что вот мне нужно поправить именно так. И просишь его показать, как и, ну, показать и объяснить, как поправить именно этот кусок.

>> И он тебе покажет именно поправку на этот кусок. А где-то ещё прямо суперкритично. Ну, наверное, вот из такого, что вот нужно было понимать, ээ, это недавно вот вышла ссора, и вот этот проект он, э, сильно интегрирован, короче, вот с этими с видеогенераторами. И из-за того, что у GPT не было ещё, ну, вообще, у всех этих LMLМ не было доступа к новой документации, он даже когда ему закидываешь просто документацию, он иногда жёстко тупил и делал не то, особенно с изображениями. И здесь, ну, надо было его немножко снавигировать и, например, сказать, как ему сделать обработку, что изображение вот здесь вот референсное, а, он просит, а, сейчас что-нибудь напишу. Короче, можно сделать ээ референсное, закинуть референсное изображение, с которого он будет начинать генерацию. И здесь нужно было вручную ему рассказать, как сделать так, чтобы он не пропускал изображение, которое не равно э размерности видео, которое будет генериться, потому что почему-то он жёстко отупил. Но это опять же, это не про код, это скорее просто про, ну, про понимание, что что можно сделать.

>> Угу. Слушай, последний вопрос. А все эти системы, ну, когда они выдают конечный продукт, их можно просто взять и условно загрузить на любой домен, который ты приобрёл, условно. Да.

>> Да. Ну, соответственно, дальше ты его просто у тебя у тебя код, да, он ты его отправляешь в гиIT, и лучше отправлять его в гиIT обратно, потому что так можно настроить се. Короче, не надо будет просто каждый раз вручную выгружать и если там что-то меняешь одну строчку кода, чтобы этот файлик не грузить вручную каждый раз, потому что это реально очень геморно. Ээ и многие хостинги, как российские, так иностранные, они поддерживают сеd. Там просто, соответственно, закидываешь ээ гиit свой, ну там это просто подключается по кнопке, и он делает автоплой. Вот здесь, да, кстати, тоже бывают, наверное, проблемы, но тоже как бы решаются. Чаще всего там есть логипло, ну, короче, вот этого деплоя, и тоже их можно пофиксить.

>> Угу.

>> Вот. Ну, соответственно, да, как только вот в начале, даже когда система очень кажется простой, когда начинаешь в ней разбираться, вот когда пошагово идёшь, уже не так всё просто, ну, какое-то время занимает, но всё равно это >> неделя-две, наверное. Ну, такое. А если не очень сложный проект?

>> Ясно. Спасибо большое.

>> Пожалуйста. Есть ли ещё вопросы? Кстати, вот эта, э, сама презентация, она в гамме сделана. То есть гамма - это тоже создаёт, ну, мне кажется, уже писал, да, что он пробует, ну, использовала. Тоже очень классная штука. впервые вообще презентовала именно Гаме.

>> Я ей, кстати, вообще часто пользуюсь. Мне нравится то, что она прямо сайт может делать из презентации и >> выглядит >> так более продающе. Я >> Да, да. Ну вот как раз, например, если нужно условный пичк сделать, то тут тоже очень классно можно это делать. А найти ссылки все, ну и сформировать структуру презентации. в перпсити и закинуть сюда. И он сам, соответственно, по слайдам распределит, ну, и сам сделает вот эти все картинки он сам нагенерил, исходя из темы презентации. Вот. О'кей, тогда я поширю запись, э, презентацию. А, и спасибо всем, что подключились. Спасибо за вопросы. Надеюсь, было полезно.

>> Да, спасибо тебе.

>> Хорошего вечера тогда.

>> Спасибо большое.

>> Большое пока.

>> Покапока.Пока.