Transcription
Привет, ребята, добро пожаловать на это видео, где я покажу вам, как превратить проект из Google AI Studio из идеи в полноценное приложение. Это руководство без всякой ерунды. И я не просто покажу вам что-то вроде: «О, смотрите, вы можете сделать бесплатное приложение, используя Google AI Studio». Я покажу вам, как добавить базу данных, как добавить аутентификацию, как сделать его безопасным, бессерверным и фактически запустить проект на Digital Ocean. Это полное руководство по созданию полноценных приложений, а не просто какого-то паршивого маленького веб-приложения, созданного в AI Studio. Давайте приступим.
Сейчас у меня запущено несколько разных проектов. Это мой проект Nano Banana. Это локальный хост, но если я зайду на Digital Ocean, я покажу вам, что у меня есть тот же самый проект, запущенный в интернете, по живому URL-адресу. Так что у меня довольно большой опыт в этом. Это будет мой четвертый проект, который я успешно запустил на Digital Ocean из Google AI Studio. Так что это выходит за рамки обычного: «О боже, посмотрите, что вы можете сделать в Google AI Studio». Это настоящее руководство по созданию реального проекта.
Вся эта информация доступна в моем школьном сообществе. Если вы хотите присоединиться к школьному сообществу, это большая помощь для меня. Это означает, что я могу больше сосредоточиться на таких вещах. Так что, если вы хотите присоединиться к школьному сообществу, это будет одна из ссылок в описании. Но, по сути, вот что мы будем делать в этом видео. Мы будем следовать этому точному пошаговому руководству.
Итак, первое, что нам действительно нужно, это проект Google AI Studio. Итак, я просто зайду в AI Studio и перейду в раздел «Создать». И давайте просто возьмем один из тех, что у нас уже есть. У нас есть этот проект здесь, который, по сути, если я просто зайду сюда и загружу изображение. Он просто удалит фон этого изображения. Так что, если мы возьмем это изображение в качестве примера, удалим фон, отцентрируем объект и сделаем чистый снимок продукта. Сгенерировать. Хорошо.
Итак, по какой-то причине этот не сработал. Так что я очень быстро и легко создам новый проект. Это прекрасная вещь во всем этом процессе. Это так чертовски быстро, что я могу просто сделать еще один. Прежде чем мы продолжим, ребята, если вы хотите, чтобы один из этих проектов был создан для вас, или если у вас есть идея, которую вы хотите воплотить из идеи в MVP, приходите и поговорите с нами сегодня. В описании этого видео будет ссылка. По сути, мы ищем еще несколько проектов на конец 2025 и начало 2026 года, чтобы помочь воплотить ваши мечты.
Хорошо, как вы можете видеть, это такой быстрый процесс, что я фактически только что создал еще один за это невероятно короткое время. Хорошо, мы загрузим изображение снова и сгенерируем фон здесь. Он должен удалить фон и добавить это изображение поверх сплошного светло-серого фона. Отлично. Так что, да, давайте просто остановимся на этом приложении. Это просто пример приложения. Очевидно, создайте все, что хотите. Я просто показываю вам, как превратить это в полноценное приложение, верно? Так что мы можем нажать «Загрузить» здесь.
Хорошо. Итак, отсюда у нас есть новая папка под названием Google AI Studio. Итак, мы просто пройдемся по этому процессу прямо здесь. MPX create at latest. Назовем это my app. Перейдем к Nex.js. Перейдем к cler. Хорошо. И тогда оттуда мы должны иметь возможность cd my app, а затем npm rundev. Что это делает, так это настраивает проект convex. Причина, по которой мы используем convex, заключается в том, что он довольно безопасен. Так что мы назовем это example video. Он безопаснее, потому что он бессерверный, и мы фактически вкладываем наши руки в um в convex. Мы вкладываем наши вещи в руки Convex. По сути, мы говорим, что я думаю, что Convex, вероятно, будет лучше меня в создании этого проекта. Так что, um, как безопасный проект, верно?
Так что отсюда мы снова нажимаем Ctrl + C, а затем ls. Хорошо. А затем мы перейдем к cla dangerously skip permissions. Итак, первое, что мы хотим сделать, это um, пожалуйста, посмотрите на orth для um clerk. Есть некоторые закомментированные строки, которые вам нужно заменить. А затем нам нужно перейти на clerk.com или clark clerk, я не совсем уверен. Dashboard. Um, перейдите к настройке приложения. Um, перейдите к API ключам. Скопируйте это.
Итак, нам нужно несколько из этих частей. Верно. Um, а также добавить мои переменные. Верно. Я просто поставлю это видео на паузу, но я вставлю это. Ну, мы сначала возьмем это. Um, мы возьмем это. Я почти уверен, что нам нужны оба. А затем я просто нажму «Копировать» здесь. А затем я вставлю это, но я не покажу вам это, очевидно. Хорошо.
Хорошо, я сделал это, а затем очистил контекст. Я скажу, пожалуйста, запустите мой проект, как NexJS, так и convex. Хорошо, и вот что у вас останется. Это, по сути, вся настройка. Так что мы можем нажать «Зарегистрироваться» здесь, продолжить с Google. Это должно просто um, по сути, войти в систему, теперь, когда у нас все настроено. Вот так. А затем мы можем добавить случайное число. А затем, если мы зайдем сюда и перейдем к данным um, это, по сути, должно открыться автоматически, кстати. Um, но если нет, то вы можете перейти на convex.dev, перейти к входу, а затем, по сути, вам нужно найти проект, который вы только что создали. Верно. Так что это example video, созданный 6 минут назад. Так что я могу нажать здесь, перейти к данным, и вы увидите, что это числа, которые я добавляю в этот проект. Верно.
Итак, давайте используем код Claude для создания остальной части этого проекта. Я напишу довольно простой запрос. Хорошо. Итак, давайте сначала, давайте просто возьмем код смены продукта, верно? Затем мы можем взять школьный запрос сообщества, просто потому, что это будет проще. Так что я просто возьму это. Хорошо. И я скажу: используйте суб-агентов um, чтобы сделать это быстро и без сжигания контекста. Пожалуйста, создайте мне потрясающую домашнюю страницу и сделайте панель управления за входом. Но если кто-то вошел в систему, он все равно должен видеть домашнюю страницу с панелью управления, доступной из заголовка. А затем мы просто скажем um, сделайте мне um, всю целевую страницу с действительно хорошим дизайном. Um, и мы нажмем Enter. Вот так.
Итак, что это должно сделать сейчас, так это прочитать код смены продукта. Он должен создать домашнюю страницу и панель управления. Um, и да, он должен просто создать весь проект, верно? Так что мы вернемся в 2:27. Не спрашивайте, почему я бодрствую в 2:27. Um, мы вернемся примерно через 20 минут.
Хорошо, ребята. Итак, вот что получилось. Теперь я не говорю: «О боже, посмотрите на этот дизайн. Это безумие». Хорошо, вы, очевидно, можете улучшить дизайн. Дизайн — это не то, что я здесь показываю. Давайте просто перейдем к панели управления здесь. Хорошо, так что с заголовком здесь что-то немного не так. Честно говоря, это не такая уж большая проблема. Назовем это hello create. Если мы просто будем следовать этому, то здесь должны появиться проекты. Вот так. Теперь, как я уже сказал, здесь есть несколько проблем. Очевидно, это не идеально. Просто уменьшите масштаб. Мы, очевидно, можем просто кодировать это в будущем.
Хорошо, у нас есть изображение. Давайте сгенерируем фон здесь. Помните, это мой локальный хост. Um, так что, да, мы практически закончили весь этот процесс. Так что мы уже можем начать думать о том, как запустить этот проект, потому что он фактически смог сделать весь проект. Прекрасно. Давайте скачаем это изображение. И мы можем видеть, что проект выполнен идеально. Верно. Удивительно.
Теперь, как я уже сказал, мне не очень нравится эта домашняя страница. Есть много вещей, которые мы могли бы сделать по-другому. Я также просто скажу нет. У меня есть совершенно бесплатный способ сделать SEO для такого проекта, который находится на моем GitHub, на который я также оставлю ссылку в описании, но, по сути, это просто пользовательский код Claude. Как я уже сказал, вы определенно можете улучшить дизайн здесь. По какой-то причине есть двойной заголовок, но вы можете начать видеть, как у нас фактически есть наш проект hello здесь, и у нас есть база данных. У нас есть все, верно? Так что, если я перейду к изображениям, мы должны увидеть, что здесь должно быть изображение. Давайте просто подождем и посмотрим. Хорошо, вот оно. Так что мы фактически можем видеть изображение прямо здесь.
Теперь есть пара проблем. Похоже, um, um, изображение не полностью сохранилось, верно? Но это все вещи, которые вы могли бы очень легко исправить с помощью кода. Я просто покажу вам суть того, как фактически запустить этот проект. Верно. Итак, первое, что вам нужно сделать, это перейти на Digital Ocean. Вы можете использовать что угодно. Вы можете использовать Hostinger, Digital Ocean. На самом деле неважно, что вы используете. Um, я бы рекомендовал Digital Ocean на данном этапе. И тогда отсюда, что вам, по сути, нужно сделать, это просто нажать на API. Я удалю этот API-ключ после этого видео, ребята. Пожалуйста, не оставляйте комментарий типа: «О боже, вы раскрыли свой API-ключ». Хорошо? Я удалю его в конце.
Итак, вам нужно сделать «нет срока действия», «полный доступ», «удалить меня», а затем «сгенерировать токен» и затем скопировать этот токен. И все, что вам нужно сделать, это сказать коду Claude: пожалуйста, установите CLI Digital Ocean и используйте этот API-ключ для запуска этого проекта на Digital Ocean. Вы также можете использовать мой GitHub. Пожалуйста, создайте новый репозиторий, если сочтете это необходимым. У вас есть все мои API-ключи и все остальное. Приступайте. Вот так. А затем мы отправляем этот API-ключ. И тогда 243. Итак, так что пока около 15-20 минут в проекте. Мне очень не нравится дизайн этого проекта, кстати. Я бы улучшил это, но я просто показываю вам суть того, как сделать один из этих проектов.
Итак, я позволю этому работать, и мы скоро вернемся. Хорошо, это заняло немного больше времени, ребята. Um, иногда возникают проблемы со сборкой и так далее, и так далее, но в конце концов это получится. И это конечный результат. Как вы можете видеть, это живой URL. Все, что мне нужно было бы сделать, это установить мой домен. Я не собираюсь делать это в этом видео, потому что я не собираюсь тратить, знаете ли, 20 фунтов на домен без причины. Но буквально просто установите свой домен здесь, или вы можете просто попросить um Claude Code установить ваш домен, верно? Так что вы можете редактировать, добавлять домен и так далее, и так далее. Так что вы можете видеть здесь, что это живой URL, на который кто угодно мог бы нажать. Давайте продолжим с Google. И, как я уже сказал, это полностью в прямом эфире, полностью готово. Верно.
Так что перейдите к своей панели управления здесь, и да, мы можем видеть, что это рабочий проект. Верно. Итак, это, по сути, то, как я беру, давайте просто возьмем это, загрузим. Конечно. Вот как вы можете превратить идею в полноценный проект. Теперь, очевидно, здесь чего-то не хватает, а именно платежей. Я бы даже не рекомендовал заниматься платежами, когда вы только начинаете, если вы не можете получить 10 клиентов бесплатно для своего бизнеса, верно? Нет смысла um продолжать, верно?
Так что, что я бы рекомендовал многим людям, это не сохранилось, кстати, потому что есть проблема с um, размером. Вам придется это исправить и так далее, и так далее. Всегда есть несколько вещей, которые нужно исправить. Моя мысль в том, что если вы не можете получить 100 клиентов бесплатно, зачем вообще беспокоиться о Stripe, верно? Так что, что вам следует сделать, на мой взгляд, это начать с попытки привлечь клиентов в ваше приложение, а затем перейти к беспокойству о платежах и подобных вещах.
Я оставлю видео здесь, ребята. Вот как я создаю один из этих проектов. Теперь есть одна вещь, которая отсутствует, о которой, если люди захотят, я расскажу в следующем видео, это SEO. Но если вы просто зайдете в мои репозитории на income stream surfer, и вы зайдете, у меня много всего, ребята. У меня так много проектов. Я думаю, это этот. Um, я перепроверю. Um, да, это этот здесь. Если вы перейдете к этой ветке, верно, вы увидите генератор страниц SEO с кодом Claude. Если вы просто получите этот код в свой код Claude здесь, а затем скажете: пожалуйста, um, сделайте мое SEO. Что это сделает, если я просто покажу вам Quotely в качестве примера. Так что это один из проектов, который мы создали для клиента. Если я просто зайду в Quotely в качестве примера, вы увидите, посмотрите на все эти красивые страницы, которые он создал. Это то, что агент, который я только что показал вам, сделает для любого бизнеса.
Так что, да, я оставлю видео здесь, ребята. Большое спасибо за просмотр. Если вы досмотрели до конца видео, вы абсолютный легенда. Проверьте школьное сообщество и проверьте ссылку на календарь, если вы хотите поговорить со мной. Спасибо за просмотр и мир.