[0:04]Так, я думаю, начать можно. Всем привет, ребят. А на этой неделе мы проведём несколько лекций, как сделать сайт, как сделать дашборд. Я, в принципе, в группе сегодня утром писал наш план. А вот, получается, сегодня мы начнём с настройки веб-кода. Я покажу, как бесплатно веб-код сделать. В прошлый раз у нас был антигравити, но в этот раз мы будем использовать Кими. А-а, К2.6. А-а, она, во-первых, безлимитная, во-вторых, по уровню, наверное, как Клод. Ну, можно сказать, опус 4.6, ну или Саннет. Вот. Потом настроим Open-код, сделаем оркестрацию агентов, чтобы там параллельно работа шла у вас. Далее, засунем скилы, э-э, всё установим, короче, вот, на первой лекции это будет прямо сейчас. Давайте, скрин зашарю. А, блин. Так. Я перезажду сейчас секунду.
[1:19]Так, хорошо. Так, давайте начнём. А-а, во-первых, в принципе, прошлый раз мы показывали, вообще, начинали с этого, то есть что такое Vue.js.
[1:45]Мы здесь будем использовать Vue.js Nuxt вместо React'а. Я знаю, многие, наверное, на React'е сидят, но, возможно, для новичков будет Vue полегче, кто действительно хочет именно сам вкатиться в программирование без нейросетей, потому что всё равно я считаю, что перед тем как начинать прямо тотальный веб-кодинг, вам всё равно хотя бы надо понять базу, что делает нейросеть, проверять код, делать ревью и так далее. А-а, в принципе, что такое Vue? Это JavaScript-фреймворк для фронтенда, то есть это, как бы, необычные приложения.
[2:24]Это, грубо говоря, получается, а-а, один JavaScript-код, который по всем страницам рендерится. Ну, я думаю, в принципе, я, э-э, я считаю, вам это сейчас не обязательно знать. Кто действительно хочет потом подучиться, всё равно я советую посмотреть пару видосов, в принципе, подучить, э-э, фреймворки. Можно React, можно Vue.js, можно что-то другое, но я бы выбирал между двумя этими. А-а, так. В принципе, дальше это мы прошли. Преимущества, да, то есть низкий порог входа, понятный синтаксис, потому что у React'а довольно сложный синтаксис для новичков. А много лишних функций. Я считаю, что всё равно новичкам будет Vue.js Nuxt полегче намного. И, в принципе, нейронки и с тем, и с тем справляются хорошо. А, обе опенсорсные, у обеих большое комьюнити, то есть, э-э, в принципе. То есть вот здесь можно увидеть пример, один и тот же код, то есть это просто счётчик, а-а, при нажатии которого добавляется одно число. То есть, как вы можете заметить, а-а, во Vue.js здесь нету директивы, use client. А-а, то есть это, как бы, реактивность, можете тоже почитать в интернете, кому интересно. Просто я не хочу сейчас на этом затачивать внимание, как бы, потому что всё равно это нам не пригодится, в принципе, сейчас. Так, здесь, да, тоже преимущества. А-а, Nuxt.js, получается, позволяет, э-э, приложениям добавлять Server Side Rendering, то есть, э-э, это не Single Page Application, то есть, он, как бы, рендерит полностью HTML вместо того, чтобы, как бы, JavaScript, э-э, писал, имел просто голый код.
[4:04]Ну, я также говорю, типа, ребят, кому интересно, давайте потом, я могу тоже скинуть материалы. В принципе, сейчас я не хочу на этом внимание за, э-э, заострять. Вот, вот это хороший слайд, потому что я тоже хотел показать, э-э, получается, примеры хороших лендингов, да. Вот справа можно увидеть такие, как бы, не очень хорошие примеры, то есть, э-э, здесь куча всяких цветов, здесь очень вырвиглазные цвета, здесь, э-э, шрифты, как бы, э-э, лейаут непонятный и так далее. То есть слева можете увидеть, что, в основном, у хороших лендингов, у них есть один стиль, а-а, то есть, например, лендинг Клода, да, то есть здесь чёрный плюс оранжевый, да. Вот здесь тоже хороший пример, получается, светлый плюс фиолетовый. Я тоже отправлю вам скилы, сейчас покажу, как скилы поставить, а-а, получается, чтобы писать более-менее, как бы, красивые, а-а, лендинги. Вот. В принципе, тоже, да, я думаю, сейчас, э-э, вот здесь я на прошлой, на прошлом батче, а-а, сгенерировал, получается, правый пример с помощью Lovatools. А-а, слева, получается, мы скачали темплейт, э-э, как бы, хороший вариант. Здесь, можете заметить, в чём разница от плохого лендинга к хорошему. В принципе, я думаю, может быть, микрофоны включить, если вы хотите задавать вопросы или, или в конце лучше. Наверное, в конце, да, лучше. А-а, да. Вот, то есть мы тоже поработаем именно над дизайном, чтобы у вас не было, получается, правого варианта, потому что, ну, я бы не сказал, что это прям продающий сейчас. Таких лендингов сотни, тысяч, как бы, на это уже никто не обращает внимания, ну и чтобы выделиться, вам нужно всё равно показать, как бы, красивую работу, а-а, задизайнить классно. Нейронки, в принципе, тоже с этим справляются, просто их надо направлять, надо чувствовать, как это делать. Вот. И в целом давайте приступим, я думаю, к практике. Приступим к практике, получается, а-а, у меня есть способ, как сделать, да, бесплатно веб-код. Я обещал. Давайте приступим. Получается, есть провайдер. Fireworks AI. А-а, здесь, э, дают 55 долларов или 60 долларов за регистрацию аккаунта. Давайте выйду. У меня здесь уже был аккаунт. А-а, здесь.
[6:44]Вот, а-а, нам дадут 60 долларов, и мы будем использовать эти кредиты, чтобы получить инференс нейронки, то есть, э-э, как бы, доступ к моделям. И, в принципе, 60 баксов, я думаю, хватит прямо надолго, потому что я сам тестил этот способ, где-то неделю сидел, у меня, ну, по сути, я 60 баксов даже не потратил, потому что там прайсинг, в принципе, адекватный. Вот, я буду использовать Temp Mail. Можете тоже Temp Mail использовать, в принципе, или на свой аккаунт зарегать.
[7:31]Так, и сейчас код получается.
[7:56]Так, э-э, пароль какой-нибудь, э-э, так, Alex123. Alex123. А, здесь можно вводить, вообще, абсолютно рандомные данные, то есть, они это не проверяют, поэтому просто вот так. Вот здесь рандомно надо два вопроса отвечаем, нам дают 5 долларов кредитов.
[8:09]Но дополнительно, когда мы полностью пройдём этот flow, нам дадут, получается, ещё 50. Я сейчас покажу, как привязать карту. Карту мы из воздуха, кстати, возьмём, то есть, вам не обязательно свою карту добавлять, потому что, а-а, всё равно вы будете создавать кучу аккаунтов, я думаю, если у вас там 50 баксов закончилось, вы создаёте ещё, э-э, ещё дополнительный аккаунт.
[8:31]Вот, так, вот здесь, а-а, добавляем, получается, сверху Add Payment Method. М-м, так, и сюда.
[8:45]Вот, нас перекидывает на Stripe, нажимаем карта. И, смотрите, здесь такой немножко некрасивый способ, но кого это волнует, во-первых, во-вторых, как бы, мы сейчас это сделаем. Я отправлю полностью весь гайд, вот он, типа, как это сделать. А-а, нам надо перейти на вот этот сайт, но, а, он без VPN, да. О'кей. Нам нужно будет сгенерировать карту. Сейчас загрузится.
[9:16]Давайте, знаете, VPN включу всё равно, потому что он с VPN'ом, по-моему.
[9:34]Так, а-а, здесь есть шестерёнка. А-а, вводим сюда БИН, вот отсюда можете скопировать. И Generate, то есть вот нам выдали данные карты, это фейковая карта, это не чья-то, ну, то есть просто по БИНу этот генератор, он может вам карту сгенерить. Копируем данные, а-а, 06.29, 06.29, Alex123. Так, э-э, я здесь ввожу данные.
[10:02]А-а, всё, и Save.
[10:12]Всё, мы привязали карту.
[10:17]Теперь обновлю страницу, наверное. Почему-то suspended пишет. Я не думаю, что они suspended. Да, вот здесь, получается, 50 баксов. Оно раз в месяц обновляется, то есть, если вы сейчас сделаете, у вас, по-моему, 1 мая нужно будет ещё раз это всё сделать. О'кей, потом создаём API-ключ, переходим в API-Keys, создаём ключ. Рандомное название, и пока копируем, просто можно так оставить.
[10:48]Теперь дальше, получается, нам нужно скачать две утилиты. Первое - это OmniRoute, а-а, это, как бы, прокси между провайдерами нейросетей, и вы это можете потом использовать, получается, уже в Open Code или в других там IDE'шках. Вот, и следующая, получается, сам Open Code, и я бы ещё советовал бы скачать Oh My Open Code. То есть, это, как бы, оркестрация будет под ваши агенты. Так, это чуть не то, вот он. Давайте ссылки, ссылки отправлю.
[11:30]Вот, скачиваете Open Code сначала, у меня он уже, в принципе, установлен. Если вы на Mac'е, можно через Brew, если вы на Windows, через Curl в PowerShell или даже в командной строке это сработает. Далее, а-а, как установить Oh My Open Agent. Здесь снизу есть команда установки.
[11:53]А-а, вы можете, в принципе, LLM'ке дать, или перейти по вот этой ссылке. И вот здесь, получается, есть команда вот эта.
[12:06]Вот, или, да, в принципе, по этой команде можно установить.
[12:28]Получается, там надо Ban ещё установить. Но, вообще, давайте вернёмся, знаете, к чему, я вот забыл, а-а, надо в первую очередь, перед тем, перед тем, как всё делать, я опять забыл, на прошлых лекциях я тоже у меня такая была фигня. А-а, нам надо Node.js скачать, у кого он не скачан. Да, обязательно, потому что без него вообще ничего работать не будет. Тоже давайте ссылку скину. Устанавливайте Node.js, вот здесь есть, а-а, вот эта ссылка. То есть для винды можно скачать, да, вот, или там для Mac'а.
[13:01]После, а-а, чего. О'кей.
[13:40]После, да, запись будет.
[13:58]Я фуллстеком занимаюсь, плюс, получается, я инжиниринг тоже. У меня, вообще, основной стек - это, получается, Vue, Nuxt плюс Python Fast API.
[14:14]Вот. Вот, SuperBase тоже можно юзать. А-а, я просто сам не фанат SuperBase. В общем, короче, у меня есть Ruls'ы для Vue.js. А-а, прямо они платные, я их там покупал, вообще, от создателей, а-а, фреймворка. Сейчас закину, блин, не просто не помню уже ссылку на него, он где-то на GitHub'е у меня лежит. А, да, вот. А, это у меня, да, все, э-э, этот.
[14:50]Ну, вообще, желательно общаться с нейронкой на английском, она, ну, просто, в основном, все нейросети, они обычно на английском, они, а-а, ну, как бы, он лучше понимать будет. А-а, я просто сам не фанат PostgreSQL.
[15:06]А-а, потом там, на самом деле, фич мало, если ты какой-то крутой продукт делаешь. Плюс у меня, в основном, проекты, которые там на рынке Казахстана выходят, типа, здесь там с приватностью тоже проблема, поэтому я, в основном, Nuxt'ом, ой, этим, SupaBase'ом не пользуюсь, вообще, в принципе. Я, вообще, основной стек - это, получается, Vue, Nuxt, плюс Python Fast API. Вот, СуперБаза тоже можно юзать, я просто сам не фанат SuperBase. А-а, ну, по идее, да, неплохо, прям, по сути, э-э, супер минималистично. Но, если сравнивать, как бы, с тем, что было в презентации, это, по сути, неплохо. Ещё анимации сюда добавить, а-а, или что? А, потом, э-э, я ещё, кстати, скинул, э-э, скинул скилл, скорее всего, это всё уже на следующей лекции, потому что у меня сейчас суперзагруз, я не успел подготовиться нормально. А-а, по типографии, получается, именно по самому, по самим текстам, то есть там для SEO как текста писать, да, классно. А-а, потому что всё равно вот этот текст, он прям супер нейронка сгенерин, как бы, тоже читать немножко сложно. Вот, но, в принципе, для MVP это прям идеально, то есть, э-э, вот. Как бы, постарайтесь тогда до следующей лекции прям задеплоить, скидывайте в группу все ваши лендинги. Давайте тестить, я буду фидбэк давать, ребята фидбэк давать, смотреть будут. А-а, вот, используйте эти скиллы, это просто супер, э, используйте Кими. Супербыстрая модель, 130, по-моему, токенов в секунду или даже больше. Для сравнения, Клод даже Сонет, по-моему, он там 50 выдаёт, знаю, Опус 42 выдаёт токенов в секунду. Опус 4.7, по-моему, вот.
[16:45]Вы, причём, можете даже там просто, э, три терминала открыть, вот здесь есть кнопка Split Terminal, вот так, три терминала открыли, здесь Open Code раз, здесь Open Code два, здесь Open Code три. Просто работаем вот так.
[16:59]Но, это, по сути, не сильно обязательно, потому что они между собой конфликтовать будут, поэтому на одном работать, вообще, идеально. Учитывая, какая скорость у Кими, вы там не успевать будете промты кидать, поэтому абсолютно нормально. Вот, по сути, всё, у нас ровно час ушёл на MVP, на создание аккаунта. Если у вас не получается с Fireworks AI, тоже пишите, будем разбираться, но, мне кажется, у вас должно работать, потому что просто я мультиаккаунт сделал. Если вы хотите там три-четыре аккаунта, просто там с телефона, с другого компьютера, там, я не знаю, что ещё, VPN, прокси, анти-детект браузер, типа, куча способов есть. Это всё работало. В принципе, я думаю, на этом можно закончить. Кстати, лендинг задеплоился. Да, давайте глянем быстренько. Вот, лендинг задеплоился.
[17:50]По сути, быстрый сайт, кайф. Моментально загружается. Демо потом сделаем тоже. Да. На следующей лекции, получается, план, я думаю, такой будет, тоже до конца настроим нейросети, инструменты все. Во-вторых, э-э, доделаем наше демо. Доделаем лендинг, чтобы фулл продакшн ready было. И начнём, получается, делать MVP для дашборда, начнём с дашборда.
[18:25]В принципе, всё, ребят. Если фидбэк, можете в чат написать, типа, как лекция прошла, будет приятно. А-а, если есть какой-то фидбэк к следующей лекции, можете там, чуть помедленнее говорить, у меня есть такая проблема, да. Вот. Ну, в принципе, в принципе, всё, работаем. Давайте.
