Ship 26 NYC - Taller - De init a deploy en 30 minutos

VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Hola a todos. Bienvenidos. Me llamo Gordon Diggs y soy gerente de ingeniería en Stripe.
00:00:08Y yo soy Colin Wren, también ingeniero en Stripe.
00:00:11Genial. En esta hackatón vamos a empezar desde cero y a construir una aplicación desplegada
00:00:17usando varios proveedores de servicios, con suerte en solo 30 o 40 minutos. Pero primero queremos
00:00:24asegurarnos de que todos los presentes tengan los requisitos mínimos para trabajar en esto. Necesitan una
00:00:29portátil. Necesitan algún tipo de entorno de programación con agentes, ya sea Claude Code, Codex o
00:00:35Cursor. Realmente no funciona con un teléfono o una tableta. Así que, si no tienen una
00:00:43portátil, solo relájense y observen. Eso también está bien. Bueno, en los primeros 10 minutos de
00:00:51este taller, hablaremos sobre Stripe Projects, les daremos ideas de apps y los ayudaremos a
00:00:56configurar la CLI. Y en los 30 minutos siguientes, usarán su agente para crear una aplicación
00:01:02desde cero hasta el despliegue y a aprovisionar servicios con Stripe Projects. Al final, podrán enviar su
00:01:09app desplegada a nuestra tabla de clasificación. Así todos podrán votar por las apps que les gusten. Y
00:01:16tal vez haya un ganador, ya veremos. Empecemos con una visión general de qué es Stripe Projects,
00:01:22que es un nuevo producto de Stripe que les permite a ustedes o a su agente aprovisionar
00:01:28infraestructura de forma rápida y segura. Stripe Projects es un complemento para la CLI de Stripe que les permite
00:01:36aprovisionar servicios como hosting, bases de datos, nombres de dominio y ese tipo de cosas. La mayoría de los servicios tienen
00:01:44planes gratuitos y de pago. Así que no necesariamente tendrán que gastar dinero durante la hackatón. Pero para cualquier
00:01:51servicio de pago, Projects centraliza sus pagos a través de Stripe de manera unificada para que paguen por todos
00:01:59sus servicios en la nube con un solo método de pago. Una vez conectado un proveedor, Projects guarda sus
00:02:09variables de entorno relevantes tanto en su equipo local como en la nube, dejándolas disponibles para que las descarguen
00:02:15en otras máquinas y todo eso. De nuevo, para este taller, está perfectamente bien usar solo los planes
00:02:21gratuitos. Estas son las categorías de proveedores actuales. Colin, creo que tapas un poco el código QR.
00:02:28Esas son las categorías que tenemos. Para ver la lista completa de proveedores, solo ejecuten
00:02:35“Stripe projects catalog” en la CLI o miren la página de proveedores en este código QR.
00:02:40Genial. Excelente. Es posible que algunos ya tengan una idea del tipo de proyecto que quieren
00:02:47construir. ¡Buenísimo! Pero en caso de que no, queríamos darles algunos ejemplos de aplicaciones que se han
00:02:52creado con Projects. Estas apps deberían darles una idea realista de lo que se puede construir y
00:02:58desplegar en unos 30 minutos, para que no empiecen con un plan demasiado ambicioso para el tiempo asignado.
00:03:04Aquí hay algunas aplicaciones de ejemplo creadas por gente de Stripe al probar Projects al principio.
00:03:10Todas estas apps están desplegadas en vivo y muchas usan hosting, o perdón, proveedores de bases de datos y autenticación.
00:03:17Aquí tenemos el panel de analíticas de GitHub. Es un panel personalizado para extraer datos de la API de GitHub.
00:03:22Usa alojamiento web, una base de datos y un proveedor de autenticación. Aquí tenemos “Happiness Jar”. Es una forma
00:03:27encantadora de dejarte notas durante el día para llenar tu frasco de alegría. Usa autenticación, una base de datos
00:03:33y hosting. Y luego “My Garden”, que es una pequeña app de jardinería. Puedes catalogar tus plantas y te recuerda
00:03:40cuándo regarlas; usa hosting y una base de datos. Por último, tenemos “Tiny Tails”. Es una pequeña app
00:03:45que usa un agente para recomendar libros adecuados para niños pequeños sobre diferentes temas. Esta usa APIs de LLM de IA y
00:03:52hosting. Así que piensen en proyectos que tengan aproximadamente este tamaño para que puedan
00:03:57construirlos en el tiempo que tenemos. Una vez que tengan una idea para su proyecto, pasaremos
00:04:02el resto del taller construyéndolo con agentes. Es importante empezar con un buen prompt al
00:04:08trabajar con agentes. En concreto, conviene decir qué tipo de servicios quieren usar. Por ejemplo:
00:04:13“Quiero desplegarlo, quiero usar una base de datos”, cosas así. Pueden ser específicos sobre
00:04:17el tipo de servicio que quieren usar, como “Quiero usar Vercel para el hosting”, o pueden dejar que
00:04:21su agente elija por ustedes del catálogo de Stripe Projects. Por ejemplo, pueden
00:04:26decir “Quiero una base de datos” y Stripe Projects elegirá e inicializará una para ustedes. Y al final
00:04:32de este taller, como mencionó Gordon, tenemos una tabla de clasificación en projects.dev donde enviarán su
00:04:38proyecto y votarán por los que más les gusten. Y solo por compartir su proyecto aquí,
00:04:45recibirán créditos de Stripe. Ahora Gordon los guiará para dar sus primeros pasos con Stripe
00:04:50Projects. Genial. Muy bien, empecemos. Como dije, para completar este taller necesitan
00:04:58tres cosas. Bueno, cuatro si contamos la portátil: un entorno de agentes, una cuenta de Stripe
00:05:05y la CLI de Stripe. Tenemos una guía para participantes; sería genial que la escaneen.
00:05:11Les dará toda la información de las siguientes diapositivas, pero la tendrán
00:05:15a la mano. Así que les recomiendo escanear este código QR. Les daré un minuto para hacerlo.
00:05:21Aterra un poco cuando das una charla y todos sacan el teléfono,
00:05:23pero yo les pedí que lo hicieran, así que está bien. Si aún no tienen una cuenta de Stripe,
00:05:30que también es gratis, pueden escanear esto. Creo que los lleva a [dashboard.stripe.com/register](https://www.google.com/search?q=https%3A%2F%2Fdashboard.stripe.com%2Fregister).
00:05:38Y estará bien. Les daré un minuto para escanearlo si lo necesitan.
00:05:47Genial. Lo siguiente que necesitarán es la CLI de Stripe con el complemento Stripe Projects.
00:05:52Hay un comando de NPX muy útil que pueden ejecutar aquí mismo. Asegúrense de marcar Stripe
00:05:58best practices y Stripe projects cuando les pregunte qué habilidades quieren añadir. Y este
00:06:05es un prompt que pueden usar en su entorno de agentes para instalar la CLI de Stripe.
00:06:13O si quieren instalarla directamente en Mac, basta con “brew install”. En Windows pueden usar Scoop.
00:06:23Eso también funciona. Nunca he usado Scoop porque realmente no desarrollo en Windows,
00:06:27pero Homebrew es genial, así que de eso sí puedo hablarles. Excelente.
00:06:33Cuando hayan ejecutado esos comandos, ya deberían tener instalado el complemento Stripe Projects.
00:06:40Puedes probar que se haya instalado correctamente ejecutando stripe projects --help,
00:06:44como se muestra aquí. ¿Alguien tiene problemas con la configuración? O levanten la mano si necesitan un poco
00:06:51más de tiempo para instalar la CLI de Stripe Projects. Vale, daremos un minuto o dos
00:06:57y luego continuamos. Pero sí, ejecuten “stripe projects --help”. Si ven
00:07:02información útil allí, significa que ya está instalado y listo.
00:07:08Y si siguen teniendo problemas, nos acercaremos a ayudarles en un par de minutos. Así que no se preocupen
00:07:13demasiado por eso.
00:07:14Bien. Espero que todos lo tengan instalado. Si no, no pasa nada, solo avísennos luego y los ayudaremos.
00:07:26Una vez instalado, en el directorio donde quieran crear su proyecto, ejecuten “stripe projects
00:07:35init”. Opcionalmente, pueden pasarle el nombre del proyecto. Si no, usará el nombre
00:07:40del directorio. Al ejecutar el comando “init”, creará algunos archivos clave. Creará
00:07:45una carpeta .projects con state.json y state.local.json. Estos archivos son la fuente de verdad sobre
00:07:53qué cuentas están usando, sus proveedores y la información de recursos de su proyecto.
00:07:59También verán que tenemos un archivo de habilidad de la CLI de Stripe Projects. Esta es una habilidad que le dirá a su agente
00:08:08cómo usar la CLI de Stripe Projects. Y cuando empiecen a añadir servicios a su proyecto,
00:08:14obtendremos las claves secretas de esos servicios y las añadiremos a su archivo .env. También descargaremos habilidades
00:08:24de agente para esos servicios en el directorio .agent/skills para enseñarle a su agente a utilizar mejor
00:08:31esos servicios. Ahora deberían tener todo para empezar a construir. Te devuelvo la palabra, Gordon. Genial.
00:08:37¡Buenísimo! Muy bien, ahora es su turno. Pueden ir a construir. Tienen unos 30 minutos para crear su
00:08:45proyecto. Si alguien tiene preguntas sobre Stripe Projects, con gusto responderemos. Solo levanten
00:08:50la mano. Si quieren ayuda para configurar su entorno, podemos acercarnos a ayudarlos.
00:08:57Dejaré algunas cosas en pantalla. Estos son algunos comandos que pueden usar en Stripe Projects.
00:09:03Ya hablamos de “init” y “catalog”, donde pueden ver proveedores. Usen “add” para añadir
00:09:10un proveedor o servicio. “Open” abrirá el panel del proveedor. Para sincronizar variables
00:09:19de entorno o ver cuánto están gastando, tenemos un comando para eso. Y hacia
00:09:24Y hacia el final, cuando se preparen para compartir su proyecto, está Stripe project share,
00:09:29que solo compartirá el stack que hayan seleccionado; es decir, la lista de proveedores que hayan elegido.
00:09:34Si necesitan el ID de su cuenta, también lo consiguen ahí. Así que gracias por estar aquí
00:09:40y por participar. Tienen unos 30 minutos. Construyan, desplieguen, levanten la mano si tienen
00:09:46preguntas y envíen sus proyectos aquí. Volveré a mostrar esta diapositiva, que es la guía
00:09:55de participación con toda la información de la presentación. Me da curiosidad saber si alguien
00:10:01quiere compartir la idea de la app que está construyendo, si pueden tomarse unos 10 segundos
00:10:08sin programar para contarnos.
00:10:12Sí, la que estoy pensando construir es una que ya intenté hacer por mi cuenta,
00:10:22pero quiero intentar hacerla con esto. Básicamente es una app para encontrar compañeros de entrenamiento de
00:10:31artes marciales, como Jiu-Jitsu, por ejemplo. Noté que es algo que no existe. Así que,
00:10:36supongamos que tu gimnasio está cerrado, es fin de semana o estás viajando y quieres entrenar,
00:10:40pero todo está cerrado. Si hay alguien cerca que entrene, no habría forma de
00:10:43saberlo, excepto tal vez con esta app que te permitiría emparejarte con otra persona que también
00:10:48busque compañero y entrenar juntos. Genial. Esa sería mi idea, le estoy dando una oportunidad.
00:10:52¡Buena suerte! Es increíble. Perfecto. Sí, es un gran
00:10:56ejemplo porque vas a necesitar hosting web, vas a necesitar una base de datos,
00:11:00autenticación y un nombre de dominio. Está genial.
00:11:04Buenísimo. Si tienen más preguntas sobre Stripe Projects o Stripe en general,
00:11:08tenemos un stand allá afuera. Estaré por allá y seguro que Colin también.
00:11:12No duden en pasar a hablar sobre Stripe, tenemos regalos de la marca y demás. Pero gracias
00:11:17a todos por venir y espero que disfruten usando Stripe Projects. Genial. Gracias a todos. Gracias.

Key Takeaway

El complemento Stripe Projects para la CLI permite a los desarrolladores y agentes de IA aprovisionar infraestructura, sincronizar variables de entorno y desplegar aplicaciones completas mediante proveedores del catálogo en cuestión de 30 minutos.

Highlights

  • Stripe Projects es un complemento para la CLI de Stripe que permite aprovisionar infraestructura como hosting, bases de datos y nombres de dominio en menos de 30 minutos.

  • El sistema centraliza la facturación de servicios en la nube de distintos proveedores en una sola cuenta de pago de Stripe.

  • Al vincular un proveedor, Projects guarda las variables de entorno de forma local en la carpeta .projects y las sincroniza en la nube.

  • El comando `npx` de instalación descarga habilidades para agentes de IA en la ruta `.agent/skills`, enseñándoles a interactuar directamente con los servicios del catálogo.

  • Las aplicaciones creadas durante la sesión pueden compartirse en `projects.dev` para recibir créditos de Stripe y figurar en la tabla de clasificación.

Timeline

Requisitos del entorno y arquitectura de Stripe Projects

  • El desarrollo de aplicaciones mediante este taller requiere una computadora portátil y un entorno de programación basado en agentes como Claude Code, Codex o Cursor.
  • Stripe Projects funciona como una extensión de la CLI que gestiona servicios de infraestructura unificando pagos y credenciales.

El taller establece un flujo de trabajo acelerado para construir y desplegar aplicaciones en 30 a 40 minutos. Stripe Projects actúa como capa intermedia entre el desarrollador, el agente de IA y los proveedores de nube. Centraliza el pago de planes de pago bajo un único método de pago en Stripe y ofrece opciones con capas gratuitas. Además, automatiza la persistencia de datos guardando variables de entorno en la máquina local y sincronizándolas en la nube para compartirlas entre distintas máquinas.

Alcance técnico y casos de uso de referencia

  • Las aplicaciones viables en un intervalo de 30 minutos combinan alojamiento web, bases de datos relacionales, autenticación de usuarios e integración de APIs de LLM.
  • Definir el proveedor específico o permitir que Stripe Projects seleccione uno del catálogo optimiza la generación de código mediante agentes.

Existen proyectos de prueba creados previamente que demuestran la capacidad del sistema en lapsos cortos. Entre los ejemplos destacan un panel de analíticas para la API de GitHub, la aplicación de notas 'Happiness Jar', un gestor de jardinería 'My Garden' y el recomendador de libros infantiles 'Tiny Tails' basado en IA. Cada proyecto combina módulos básicos de infraestructura. Indicar con precisión los servicios requeridos en el prompt inicial facilita que el agente configure e instale los paquetes adecuados directamente desde el catálogo accesible vía la CLI.

Instalación de la CLI y configuración inicial del proyecto

  • La CLI de Stripe se instala en sistemas macOS mediante Homebrew y en Windows a través de Scoop.
  • El comando `stripe projects init` genera el directorio `.projects` con los archivos `state.json` y `state.local.json` como fuente única de verdad del estado de la infraestructura.

El proceso de configuración requiere asociar una cuenta gratuita de Stripe a la CLI mediante un comando NPX que instala las mejores prácticas y habilidades de interacción. Al ejecutar la inicialización en la raíz del proyecto, la CLI crea el directorio de estado `.projects`. Cuando el desarrollador o el agente añade un servicio, el sistema descarga automáticamente las claves secretas al archivo `.env` y almacena las habilidades técnicas de esos proveedores en la carpeta `.agent/skills` para que el agente aprenda a operarlos.

Comandos de gestión, desarrollo activo y publicación

  • El comando `stripe project share` exporta la lista de proveedores del stack para publicar la aplicación en la plataforma `projects.dev`.
  • Aplicaciones complejas que conectan deportistas de artes marciales requieren la combinación simultánea de cuatro servicios: hosting, base de datos, autenticación y dominio.

Durante la fase práctica de desarrollo se emplean comandos como `catalog` para consultar proveedores, `add` para vinculación de servicios, `open` para abrir paneles de control y comandos específicos para monitoreo de costos y sincronización de entorno. Un participante presentó la idea de construir una plataforma para encontrar compañeros de entrenamiento de artes marciales como Jiu-Jitsu cuando los gimnasios están cerrados. Este tipo de arquitectura demuestra la necesidad de aprovisionar autenticación, almacenamiento, alojamiento y dominios personalizados en una sola sesión de trabajo.

Community Posts

View all posts