А вы видели эти ролики, где 7-летние дети программируют и создают сайты и приложения с нуля? Умение писать код дает безграничные возможности для реализации ваших идей. И большие дядьки говорят, что программирование это главный навык 21 века.
Разработать собственный сайт, написать бота в телеграм или полноценное мобильное приложение. И я уже молчу про геймдев, который каждый из вас пытается пробраться. В этом ролике расскажу о самом крутом и эффективном способе начать программировать при помощи ИИ. Поделюсь лайфхаками о том, как упростить изучение темы, как избежать ошибок, как промтить нейросеть, чтобы она писала код для или вместо вас.
В первую очередь, видео для новичков, которые не знают, что такое Visual Studio, курсор, ни разу не пользовались терминалом. Если у вас есть уже базовое представление о программировании, но вы... просто не использовали нейронки для этих задач, то тоже будет интересно.
Люди-роботы, привет! Это Протсовет, меня зовут дядя Дэ. Чтобы поддержать наш проект, подпишитесь на канал, оставьте лайк и коммент, это поможет в выпуску новых роликов.
Погнали! Если ваше представление о программировании такое же, как у слушательницы хореографических курсов о сельском хозяйстве, которые думают, что творог добывается из вареников, то вы по адресу. Наверняка вы знаете, что нейросети недурно пишут код, ведь те нейросети, про которые мы говорим, это LLM, Large Language Models, языковые модели, а Python, JavaScript и ежесними это как-никак языки. Безусловно, вы можете отправиться в чат GPT и попросить сделать игру-змейку и получить вот такое количество строчек кода.
Если сходить в код, попросить сделать змейку, то результат уже более ощутимый, так как здесь есть функция Artifacts, и мы хотя бы можем этот код зарендерить, увидеть, ну то есть посмотреть, что вообще получается. Но что делать с этим чудом дальше? Как превратить этот код в программу или сайт, доступный другим пользователям? Это зависит от проекта, но чаще всего вам нужно разместить этот код в файле или нескольких и загрузить на сервер. Начнем же с простого создания файлов на вашем компьютере.
Нам понадобится такая программа под названием Cursor. Она позволяет в удобном интерфейсе взаимодействовать с файлами и папками на компьютере, в который мы и будем записывать, добавлять наш код. код, то это он и есть, но с и функциями.
Самый простой и понятный способ начать работать в курсор создать папку, после чего открыть ее не курсором, а через курсор. Ну вы поняли. Мы установили приложение, открыли программу и теперь нажмем кнопку open folder, но вместо того, чтобы открывать уже какой-то имеющийся файл, имеющуюся директорию, мы создадим новую, чтобы туда не попало лишних файлов и работать и жить было легче.
Нажимаем создать новый фолдер, Напишите название вашего проекта и нажмем создать. После этого кнопочка открыть. Давайте глянем на интерфейс.
В левой части экрана находится директория. Здесь будут показываться все те файлы или дополнительные папки, которые мы создадим в процессе реализации проекта. В нижней части экрана при помощи Command-G либо Ctrl-G на Windows, ну либо проверьте, вот при помощи этой кнопки можно открыть терминал.
Про эту штуку поговорим попозже. В левой части при помощи Command-L можно открыть чат. с нейросетью, который будет писать наш код. И ниже в выпадающем списке выбрать нейронку, с которой хотим работать. Также сразу рекомендую открыть композор.
Он у меня появился автоматически в этой части экрана. Но если у вас этого не произошло, нажмите Command-E или Control-E и Command-Shift-E, чтобы открыть его вот в таком отдельном окне. Ну или, соответственно, Control-Shift-E. Зачем нам все это надо, расскажу чуть позже.
И в центральной части экрана, собственно, будут появляться строчки кода, которые мы напишем. Поздравляю, после такой базовой настройки можно начать работать Кстати, интерфейс программы Cursor чуть более подробно Скорее всего, мы будем разбирать в нашем клубе в отдельном мастер-классе Где поговорим про те функции, которые я здесь не успею, скорее всего, осветить Ну и в целом, потыкаем разные кнопочки, поотвечаем на вопросы друг друга Для того, чтобы начать реализовывать ваш проект, нужно иметь определенную идею вашего проекта И надеюсь, вы с созданием этой идеи справитесь Даже если она не особо детальная, абстрактная, с этим уже можно работать И мы будем использовать такой промт. Я хочу создать описание вашей идеи, которая имеет такие характеристики.
Какой текстак, то есть набор инструментов я должен использовать. Посоветую простое решение с такими характеристиками. Вот пример моего промта. Я хочу создать веб-страницу, на которой пользователь может оставлять свои контактные детали, имя, аккаунт Telegram и email.
Какой текстак я должен использовать. Посоветую простое решение с Cloud-based бэкэндом. и быстрыми и легкими возможностями деплоинга и размещения этого сайта.
В принципе, нижнюю строчку можно не добавлять, особенно если вы не представляете, какие простые, сложные, вообще какие решения вам нужны. Выберем модель, я ставлю код 3.5.snet, он хорош в код. нажимаем enter пока модель пишет покажу второй промп который мы будем использовать создай ваша идея ее характеристики и текст так который мы сейчас с вами узнали и запишем сюда выпиши структуру проекта и создание обходимые файлы и напиши код давайте посмотрим на ответ нейронки и попытаемся дополнить наш шаблон front-end html css javascript ну без этого никуда не обойтись и в целом это можно даже не упоминать но react.js опциональный для более интерактивного юай юзер интерфейс Я запишу в наш промт.
После этого смотрим на backend. Serverless functions. Давайте serverless functions и скопируем. Моя идея предполагает, что нам нужно хранить где-то информацию о пользователях, которые будут оставлять свои контактные данные.
И здесь нам Клод предлагает Firebase Realtime Database, либо какой-то MongoDB. Ну, давайте скопируем Firebase. И для размещения Netlify или Versal.
Versal я худо-бедно уже использовал, хоть как-то его понимаю, поэтому его сюда и добавлю. И дальше можно сделать следующее. Отправить нейронки этот. Промпт и посмотреть на результат. Получить в этом конкретном чате все, что нам нужно знать, все, что нам нужно сделать.
И в целом я рекомендую вам это сделать, посмотреть на ответ модели. Потому что мы получим с вами здесь описание тех шагов, которые нам нужно пройти, в том числе в терминале. А также весь код, который нейронка нам предлагает добавить в наш проект, в отдельные файлы, которые мы, судя по всему, должны создать самостоятельно.
Но зачем это делать, если есть Composer? Перейдем в окошко Composer и добавим тот промпт, который мы... только что отправили в предыдущий чат и посмотрим на результат. Дело в том, что Composer имеет возможность не просто отвечать нам, но и создавать самостоятельно файлы в директории. То есть в целом он понимает, как здесь все устроено в этой программе.
Это тоже нейронка, это тоже в данном случае Cloud 3.5.snet, который выписал всю структуру проекта в таком достаточно понятном, удобном формате, описал определенные шаги, которые нам нужно пройти в терминале, так же, как и это сделал нейронка в чате, и даже создал необходимые файлы и добавил в них код, который теперь нам нужно принять или отвергнуть. У вас есть несколько опций, как добавить этот код. Либо вы можете открыть каждый конкретный файл и нажать Accept, либо нажать Accept All вот здесь вот в нижней части экрана, что я и сделаю. Супер!
Только что нейросеть придумала структуру проекта, создала все необходимые файлы и написала весь код. И тут следует сделать короткую остановку и проговорить про терминал. Если до этого все было предельно понятно.
Мы посмотрели на интерфейс, мы начали общаться с нейронкой, создали файлы определенного формата, добавили в них код, точнее нейросеть это сделала. То вот зачем эта штука внизу и как с ней работать не совсем очевидно. Терминал это текстовый интерфейс для взаимодействия с компьютером.
Представьте, что вы даете текстовые команды в вашей машине и не нужно отвлекаться на визуальный интерфейс. В отличие от привычных кнопок и окон, здесь все делается при помощи текста. Для новичков терминал может показаться сложным, но на самом деле достаточно мощный инструмент. Вы можете создавать файлы, управлять программами, настраивать окружение вашего кода.
И именно через него мы и будем запускать наш код, а также устанавливать дополнительные пакеты и функции. Что будет происходить дальше? Я попробую до определенного этапа реализовать тот проект, который мы здесь с вами начали. Пройдусь по тем шагам, которые мне предложила нейронка. Покажу, что нам нужно для работы в терминале и дам попутно какие-то комментарии.
Не факт, что мы дойдем до самого конца, потому что так ролик можно затянуть на час и более. Но до какого-то ощутимого результата хотелось бы. Давайте посмотрим на ответ. Клод нам выписал структуру проекта, но судя по всему, не вся структура у нас здесь реализована в директории, поэтому придется немножко его за это попозже поругать.
Он нам выписал определенные команды, которые нам необходимо запустить. Первая команда npx create react app и contact form project. Давайте посмотрим, что из этого получится. Нажимаю y proceed.
Команды сработали, терминал нам выписал определенное количество информации, которую можно читать, которую можно не читать. Если у вас эти команды не сработали, то вероятно вам нужно установить... Node.js. Можно это сделать при помощи обычной кнопочки на вот этом веб-сайте.
И если после установки Node.js у вас снова возникают какие-то проблемы, то можно смело обратиться к нейронке и спросить, почему эта конкретная команда не работает. Но мы пока поедем дальше и введем следующую команду cd contact form project. Нам это просто позволяет переместиться через терминал в соответствующую директорию.
А именно вот сюда. Следующая команда npm install firebase access, что бы это ни значило. После завершения установки всех dependencies, ввода всех этих необходимых команд, мы получили набор файлов в нашей левой части экрана, с которыми нужно дальше что-то делать.
Если то, что находится у нас слева, вам мало о чем-то говорит, то можно так и сказать об этом нейронке. В принципе, можно продолжить общение в Composer. Composer имеет весь этот контекст и сам создал файл, и в целом понимает, что мы сейчас его спросим. Но еще одна интересная функция, которая у вас есть.
при общении с, например, не композером, а просто с чатом, с нейронкой в чате, это добавить контекст. Контекстом может являться абсолютно все. От определенного файла до какой-нибудь внешней базы данных, до всей вашей базы кода. Я выбрал Codebase.
И вопрос, как я могу посмотреть на наш сайт? Нейронка прочитала все эти файлы и теперь дает нам те шаги, которые нам помогут увидеть, что же вообще мы с вами накодили. Отлично, откройте ваш терминал, перейдите в root directory, то есть в корневую директорию, мы в ней уже сейчас находимся, вот у нас contact form project, и введите команду npm start, что мы и сделаем. Открывается чудесная анимация, которая, в общем-то, нам совершенно не нужна.
Это говорит о том, что нейронка не выполнила ту задачу. не написала необходимый нам код, и это нужно как-то дебажить. Я сделаю скриншот, вернусь в чат и опишу нейронке проблему.
Я вижу такую страницу, но не веб-страницу, которую я хотел создать. Давай это чудо починим. Клод предложил такое улучшение.
Нажмем Apply, изменения появятся в соответствующем файле, и при помощи команды Command-Enter мы можем их принять. И снова то же самое. Я по-прежнему получаю страницу React.js, вместо той формы, которую мы хотим создать. У меня есть предположение, в чем может быть проблема. но хочется попытаться додебажить это при помощи нейронки, просто задавая ей вопросы.
Поэтому я попробую следующее. Command-Shift-E и открою композер вновь. Я решил добавить ему скриншот той структуры проекта, который у нас сейчас есть, и добавить вновь нашу идею, смысл нашего проекта. Далее прошу нейронку все это дело задебажить.
Кажется, что есть контакт. Я скинул в композер скриншот всей этой структуры, которая у нас есть, и, как я предполагал, он нам наворотил просто слишком много ненужных файлов и расп... разместил их не совсем правильно, что сейчас попытаемся исправить. Если появляется ошибка в терминале, то можно при помощи Command-Shift-L забросить это сразу в чат.
Пакет JSON, нажмем Apply, Accept, пробуем npm install снова. Новая ошибка. Давайте спросим еще раз про ту структуру, которую мы здесь с вами наворотили, чтобы убедиться, что в общем мы сделали все верно. Уже лучше, мы открыли не стартовую страницу React.js и с этим можно работать. Окей, попробую последовательно выполнять задачи.
Те команды, которые от меня просит терминал, точнее, от меня просит нейронка, снова закидываю в терминал. Добавим тот код, который нас просит сделать нейронка. Source index.css, index.css, app.js.
Пробуем запуститься снова. И снова какие-то ошибки. Халера.
Ха! Успех. Ну, смотрите, это было непросто.
И, конечно, это выглядит отвратительно, но, по крайней мере, мы с вами что-то накодили в таком достаточно хаотичном режиме. не очень сконцентрированным с моей стороны, но нам удалось что-то получить. Это, конечно, совсем неприлично, поэтому я попросил немножечко допилить стайл нашей формы. И сейчас просто приму те правки, которые мне предлагает здесь сделать клоуд.
Contact Form.js. Снова Accept. И последний файл Source App.js.
Тоже Accept. Давайте посмотрим, что получится. В общем, пока что ничего не изменилось, правда? Потому что все изменения нам необходимо сохранить.
Снова откроем, обновим и вновь ничего не изменилось. App CSS Ctrl S сохранить. А здесь еще какой-то код мы не применили, тоже его сохраним. Index.js сохранить. Да и вообще все сохранить.
Вот это другой разговор. Имя, телеграм, имейл, Synthwave, контакт. Как вам, друзья? Это действительно получилось чуть дольше, чем я ожидал, но зато я показал вам абсолютно реальный, правдоподобный процесс.
Как сделать что-то, абсолютно не понимая то, что вы делаете. Потому что с React.js и вот с такой конкретной структурой, с какими-то там contact forms, такими файлами я не работал до ныне никогда. Тем не менее, просто задавая вопросы нейронке, следуя ее указаниям, мы смогли, по крайней мере, локально сделать фронт-энд. Тут еще предстоит достаточно много работы, сделать бэк-энд, потом разместить это в интернете.
И все это можно сделать, продолжая задавать вопросы в вашем чате, прямо здесь в курсоре. Один вывод напрашивается, и не могу его не озвучить. Судя по всему, из-за того, что мы начали с вами работать через курсор, и из-за того, что мы просили сделать его структуру проекта, он нам все, он спутал нам все карты. То есть он сделал нам неправильную структуру проекта, и поэтому нам пришлось немножко мучиться. Если бы мы это делали своими ручками, и просто делали файл за файлом, самостоятельно создавали, называли, и вносили вот сюда, в эту директорию, то мы бы, скорее всего, так не запутались.
Поэтому следует быть осторожным с этой функцией Composer. и, вероятно, ее использовать для рефакторинга ваших файлов. То есть смотреть на текущую структуру и маленечко ее менять при необходимости.
Но создавать сложный проект с большим количеством файлов может быть немного опасно. Как бы то ни было, я показал лишь малое количество функций курсора. Я не рассказал про то, что курсор сам может добавлять, додумывать определенные участки кода, если пишете вы его ручками.
Я не рассказал про то, что можно менять участки кода при выделении, добавлять их в чат и так далее. Тут есть достаточно много еще прикольных нюансов. На отдельном эфире в нашем сообществе мы это будем обсуждать.
Ссылка на сообщество в описании. И возможно даже этот эфир пройдет где-нибудь в Телеграм, в открытую. Поэтому и на Телеграм тоже подпишитесь, чтобы не терять информацию.
Ссылки там. На этом у меня все. Если нужно больше роликов про программирование, конкретно про курсор, возможно про создание игры или веб-сайта, или рассказать, как конкретно работать с этим на том или ином языке, или деплоить сайты, или разрабатывать бэкэнд, то расскажите об этом в комментариях.
Подготовлю отдельный ролик. С вами был Дядя Д, увидимся в будущих выпусках, пока!