Ship 26 NYC - Воркшоп - От init до деплоя за 30 минут
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Всем привет. Добро пожаловать. Меня зовут Гордон Диггс. Я технический менеджер в Stripe.
00:00:08А я Колин Рен. Я тоже инженер в Stripe.
00:00:11Отлично. Итак, на этом хакатоне мы с нуля создадим и развернём приложение,
00:00:17используя различных провайдеров услуг, надеюсь, всего за 30-40 минут. Но сперва мы хотим
00:00:24убедиться, что у всех присутствующих есть базовые минимальные требования. Вам понадобится
00:00:29ноутбук. Потребуется среда разработки с ИИ-агентом, будь то Claude Code, Codex или
00:00:35Cursor. С телефона или планшета поработать не получится. Так что если у вас нет
00:00:43ноутбука, просто расслабьтесь и смотрите. Это тоже отлично. Первые 10 минут
00:00:51этого воркшопа мы поговорим о Stripe Projects, поделимся идеями приложений и поможем
00:00:56настроить CLI. А затем в течение 30 минут вы будете использовать своего агента для создания приложения
00:01:02от старта до деплоя и настройки сервисов с помощью Stripe Projects. В конце вы сможете отправить
00:01:09развёрнутое приложение в нашу таблицу лидеров. И все смогут проголосовать за понравившиеся проекты.
00:01:16И, возможно, у нас будет победитель. Посмотрим. Давайте начнём с обзора того, что такое Stripe Projects.
00:01:22Это новый продукт от Stripe, который позволяет вам или вашему агенту быстро и безопасно
00:01:28подготавливать инфраструктуру. Stripe Projects — это плагин для Stripe CLI, позволяющий вам или агенту
00:01:36подключать такие сервисы, как хостинг, базы данных, доменные имена и тому подобное. У большинства сервисов есть
00:01:44как бесплатные, так и платные тарифы. Так что вам не обязательно тратить деньги на этом хакатоне. Но для всего,
00:01:51что является платным, Projects централизует платежи через Stripe единым способом, чтобы вы оплачивали все
00:01:59облачные сервисы одним способом оплаты. Как только провайдер подключён, Projects сохраняет нужные
00:02:09переменные окружения как на локальную машину, так и в облако. Они будут доступны, и вы сможете скачивать
00:02:15их на другие устройства и всё в таком духе. Опять же, для этого воркшопа вполне достаточно бесплатных
00:02:21тарифов. Вот текущие категории провайдеров. Колин, кажись, ты немного загораживаешь QR-код.
00:02:28Вот такие у нас есть категории. Чтобы увидеть полный список провайдеров, вы можете просто выполнить
00:02:35команду `Stripe projects catalog` в CLI или перейти на страницу провайдеров по QR-коду.
00:02:40Круто. Отлично. Возможно, у кого-то из вас уже есть идея проекта, который вы хотите
00:02:47построить. Это супер. Но если нет, мы хотели бы показать вам примеры приложений,
00:02:52созданных с помощью Projects. Они дадут представление о том, что реально сделать и
00:02:58развернуть примерно за 30 минут, чтобы вы не брались за слишком амбициозные планы в отведенное время.
00:03:04Вот примеры приложений, написанных сотрудниками Stripe при первоначальном тестировании Projects.
00:03:10Все эти приложения развёрнуты и работают, и многие используют... простите, базы данных и провайдеров авторизации.
00:03:17Перед нами аналитическая панель GitHub. Это кастомный дашборд для получения данных из GitHub
00:03:22API. Он использует веб-хостинг, базу данных и провайдер авторизации. А вот Happiness Jar («Баночка счастья»).
00:03:27Замечательный способ оставлять себе записки в течение дня, чтобы наполнять банку радостью. Здесь есть авторизация,
00:03:33база данных и хостинг. А вот My Garden. Это небольшое приложение для садоводства. Можно вести каталог растений
00:03:40и ставить напоминания о поливе. Использует хостинг и базу данных. И последнее — Tiny Tails.
00:03:45Небольшое приложение с агентом, рекомендующим книги для малышей на разные темы. Тут используются AI LLM API и
00:03:52хостинг. В общем, замышляйте проекты примерно такого масштаба, которые можно
00:03:57создать за имеющееся время. А как только у вас появится идея,
00:04:02мы проведём остаток воркшопа, разрабатывая её с помощью агентов. Важно начать с хорошего промпта при
00:04:08работе с агентами. В частности, нужно указать, какие сервисы вы хотите использовать. Вы говорите:
00:04:13«Я хочу развернуть проект, хочу использовать базу данных» и всё в таком духе. Можно уточнить
00:04:17конкретный сервис. Например: «Я хочу использовать Vercel для хостинга» — или же позволить
00:04:21Stripe... то есть позволить вашему агенту самому выбрать сервис из каталога Stripe Projects. Вы можете просто
00:04:26сказать: «Мне нужна база данных». Stripe Projects выберет и инициализирует её за вас. В самом конце
00:04:32этого воркшопа, как упомянул Гордон, у нас есть таблица лидеров на projects.dev, куда вы отправите свой
00:04:38проект и проголосуете за понравившиеся работы. И просто за то, что вы поделитесь проектом,
00:04:45вы получите кредиты Stripe. Теперь Гордон расскажет, как начать работу со Stripe
00:04:50Projects. Круто. Ну что, давайте начинать. Как я уже сказал, для прохождения этого воркшопа вам понадобятся
00:04:58три вещи. Ну, четыре, если считать ноутбук: среда с ИИ-агентом, аккаунт Stripe
00:05:05и Stripe CLI. У нас есть руководство участника. Было бы здорово его отсканировать.
00:05:11В нём есть вся информация с нескольких следующих слайдов, но она всегда будет у вас
00:05:15под рукой. Настоятельно рекомендую отсканировать этот QR-код. Дам вам минутку на это.
00:05:21Всегда немного жутко, когда выступаешь, и все достают телефоны,
00:05:23но я сам вас попросил, так что всё в порядке. Итак, если у вас ещё нет аккаунта Stripe,
00:05:30это бесплатно, можете отсканировать этот код. Кажется, он ведёт на [dashboard.stripe.com/register](https://www.google.com/search?q=https%3A%2F%2Fdashboard.stripe.com%2Fregister).
00:05:38Всё будет отлично. Дам ещё минутку отсканировать, если нужно.
00:05:47Супер. Следующее, что вам понадобится — Stripe CLI с плагином Stripe Projects.
00:05:52Для этого есть удобная команда NPX, вот прямо здесь. Обязательно выберите Stripe
00:05:58best practices и Stripe projects, когда система спросит, какие навыки вы хотите добавить. А вот
00:06:05промпт, который можно использовать в вашей среде с агентом просто для установки Stripe CLI.
00:06:13Или если хотите установить напрямую на Mac, можете использовать `brew install`. На Windows можно через `scoop`.
00:06:23Это тоже работает. Я никогда не пользовался Scoop, потому что не разрабатываю на Windows,
00:06:27но Homebrew прекрасен, за него ручаюсь. Отлично.
00:06:33Итак, когда вы выполните все эти команды, у вас должен быть установлен плагин Stripe Projects.
00:06:40Проверить корректность установки можно выполнением команды `stripe projects --help`,
00:06:44как показано здесь. У кого-то есть проблемы с настройкой? Поднимите руку, если нужно
00:06:51чуть больше времени на установку Stripe Projects CLI. Хорошо, дадим ещё минуту-две,
00:06:57и продолжим. Но да, просто запустите `stripe projects --help`. Если увидите
00:07:02полезный вывод справки, значит, всё установлено и готово к работе.
00:07:08Если у вас всё ещё возникают трудности, мы подойдём и поможем через пару минут. Так что
00:07:13не переживайте.
00:07:14Надеюсь, все справились. Если нет — без паники, просто позовите нас позже, мы с радостью поможем.
00:07:26Итак, после установки перейдите в папку, где хотите создать проект, и выполните `stripe projects
00:07:35init`. Опционально можно передать имя проекта. Если этого не сделать, будет использовано название
00:07:40папки. При запуске команды `init` создастся несколько ключевых файлов.
00:07:45Появится папка `.projects` с файлами `state.json` и `state.local.json`. Эти файлы являются источником истины для
00:07:53используемых аккаунтов, провайдеров и ресурсов вашего конкретного проекта.
00:07:59Также вы увидите файл навыка Stripe Project CLI. Это навык, который подскажет вашему агенту,
00:08:08как работать со Stripe Project CLI. И как только вы начнёте добавлять сервисы в свой проект,
00:08:14мы получим секретные ключи для этих сервисов и добавим их в ваш файл `.env`. Мы также загрузим навыки
00:08:24агента для этих сервисов в директорию `.agent/skills`, чтобы обучить агента максимально эффективно
00:08:31их использовать. Теперь у вас есть всё необходимое для старта. Возвращаю слово Гордону. Круто.
00:08:37Отлично. Теперь ваша очередь. Можете начинать разработку. У вас есть около 30 минут на создание
00:08:45проекта. Если у кого-то есть вопросы по Stripe Projects, мы с радостью ответим. Просто поднимите
00:08:50руку. Если вам нужна помощь с настройкой окружения, мы подойдём и поможем.
00:08:57Я оставлю кое-что на экране. Вот некоторые из команд, которые можно использовать в Stripe Projects.
00:09:03Про `init` мы говорили. Про `catalog` тоже — там можно посмотреть провайдеров. Используйте `add` для добавления
00:09:10провайдера или сервиса. `Open` откроет панель управления провайдера. Синхронизация переменных
00:09:19окружения... Если хотите посмотреть расходы, у нас есть команда и для этого. А
00:09:24ближе к концу, когда будете готовы поделиться проектом, пригодится `stripe project share`,
00:09:29которая отправит информацию о выбранном стеке. То есть список выбранных провайдеров.
00:09:34И если вам нужен ID аккаунта, его тоже можно узнать там. Так что да, спасибо, что пришли.
00:09:40Спасибо за участие. У нас есть около 30 минут. Стройте, деплойте, поднимайте руки, если есть
00:09:46вопросы, и отправляйте результаты сюда. Переключу ещё раз на этот слайд. Это как раз
00:09:55руководство участника, где есть вся информация из презентации. В общем, да. Интересно, хочет ли кто-нибудь
00:10:01поделиться идеей приложения, которое собирается сделать? Если вы можете отвлечься от работы на 10 секунд,
00:10:08чтобы рассказать.
00:10:12Да. Проект, о котором я думал — это то, что я уже пробовал сделать самостоятельно,
00:10:22но хочу попробовать сделать с помощью этого инструмента. По сути, это приложение для поиска спарринг-партнёров
00:10:31по боевым искусствам, например, джиу-джитсу. Я заметил, что ничего подобного нет. И вот,
00:10:36допустим, ваш зал закрыт, или наступили выходные, или вы в поездке и хотите потренироваться,
00:10:40но все залы закрыты. Если неподалёку есть кто-то, кто тоже тренируется, узнать об этом
00:10:43было бы невозможно — развe что через такое приложение, которое найдёт вам пару с тем, кто тоже
00:10:48ищет партнёра для тренировок, и вы сможете потренироваться вместе. Отлично. Вот такая идея. В общем,
00:10:52я попробую. Круто. Удачи! Это потрясающе. Идеально. Да, это отличный
00:10:56пример, потому что тебе понадобятся веб-хостинг, база данных,
00:11:00авторизация, доменное имя. Да, замечательный проект.
00:11:04Супер. Если у вас возникнут ещё вопросы о Stripe Projects или о Stripe в целом,
00:11:08наш стенд прямо снаружи. Я буду там. Уверен, Колин тоже подтянется.
00:11:12Так что не стесняйтесь подходить, поболтаем о Stripe, у нас есть мерч и всякие штуки. Но спасибо
00:11:17всем, что пришли, и надеюсь, вам понравится Stripe Projects. Класс. Всем спасибо! Всем спасибо.