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.