Ship 26 NYC - Workshop - Von Init bis Deploy in 30 Minuten
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Hallo zusammen. Willkommen. Mein Name ist Gordon Diggs. Ich bin Engineering Manager bei Stripe.
00:00:08Und ich bin Colin Wren. Ich bin ebenfalls Ingenieur bei Stripe.
00:00:11Schön. Bei diesem Hackathon werden wir von Grund auf eine bereitgestellte Anwendung bauen,
00:00:17unter Nutzung verschiedener Dienstanbieter, hoffentlich in nur 30 bis 40 Minuten. Aber zuerst möchten wir
00:00:24sicherstellen, dass jeder hier die Mindestanforderungen erfüllt. Sie benötigen also ein
00:00:29Laptop. Sie brauchen eine agentische Programmierumgebung, sei es Claude Code, Codex oder
00:00:35Cursor. Mit einem Smartphone oder Tablet funktioniert es nicht wirklich. Wenn Sie also kein
00:00:43Laptop haben, entspannen Sie sich einfach und schauen Sie zu. Das ist auch völlig in Ordnung. In den ersten 10 Minuten
00:00:51dieses Workshops sprechen wir über Stripe Projects, geben Ihnen App-Ideen und richten
00:00:56die CLI mit Ihnen ein. Und in den 30 Minuten danach bauen Sie mit Ihrem Agenten eine Anwendung
00:01:02von Grund auf bis zum Deployment und stellen Dienste mit Stripe Projects bereit. Am Ende können Sie Ihre
00:01:09bereitgestellte App auf unserer Bestenliste einreichen. Dann können alle für die Apps stimmen, die ihnen gefallen. Und
00:01:16vielleicht gibt es einen Gewinner. Wir werden sehen. Beginnen wir mit einem Überblick darüber, was Stripe Projects ist.
00:01:22Es ist ein neues Produkt von Stripe, das es Ihnen oder Ihrem Agenten ermöglicht, schnell und sicher
00:01:28Infrastruktur bereitzustellen. Stripe Projects ist ein Plugin für die Stripe CLI, mit dem Sie oder Ihr Agent
00:01:36Dienste wie Hosting, Datenbanken, Domainnamen und Ähnliches bereitstellen können. Die meisten Dienste haben sowohl
00:01:44kostenlose als auch kostenpflichtige Stufen. Sie müssen während dieses Hackathons also nicht unbedingt Geld ausgeben. Aber für alles,
00:01:51was kostenpflichtig ist, zentralisiert Projects Ihre Zahlung über Stripe auf einheitliche Weise, sodass Sie alle Ihre
00:01:59Cloud-Dienste mit einer einzigen Zahlungsmethode bezahlen. Sobald ein Anbieter verbunden ist, speichert Projects die relevanten
00:02:09Umgebungsvariablen sowohl auf Ihrem lokalen Rechner als auch in der Cloud. Sie stehen Ihnen zur Verfügung und Sie können
00:02:15sie auf andere Rechner herunterladen und all das. Für diesen Workshop reicht es also völlig aus, die kostenlosen
00:02:21Stufen zu nutzen. Das sind die aktuellen Anbieterkategorien. Colin, ich glaube, du stehst dem QR-Code etwas
00:02:28im Weg. Das sind also die Kategorien, die wir haben. Eine vollständige Liste der Anbieter erhalten Sie, indem Sie einfach
00:02:35Stripe projects catalog in der CLI ausführen oder die Anbieterseite über diesen QR-Code aufrufen.
00:02:40Super. Wunderbar. Einige von Ihnen haben vielleicht schon eine Idee, was für ein Projekt sie
00:02:47bauen möchten. Das ist toll. Falls nicht, wollten wir Ihnen einige Beispiele für Apps geben, die
00:02:52mit Projects gebaut wurden. Diese Apps sollen Ihnen eine Vorstellung davon vermitteln, was realistischerweise in etwa
00:02:5830 Minuten gebaut und bereitgestellt werden kann, damit Sie für die vorgegebene Zeit keinen zu ehrgeizigen Plan verfolgen.
00:03:04Hier sind also einige Beispiel-Apps von Leuten bei Stripe, als Projects anfangs getestet wurde.
00:03:10Alle diese Apps sind live geschaltet und viele davon nutzen Hosting, Entschuldigung, Datenbank- und Auth-Anbieter.
00:03:17Hier haben wir das GitHub Analytics Dashboard. Das ist ein benutzerdefiniertes Dashboard zum Abrufen von Daten aus der GitHub
00:03:22API. Es nutzt Web-Hosting, eine Datenbank und einen Auth-Anbieter. Wir haben hier Happiness Jar. Das ist eine wunderbare
00:03:27Möglichkeit, sich über den Tag hinweg Notizen zu machen, um das Glas mit Freude zu füllen. Es nutzt Auth, eine Datenbank
00:03:33und Hosting. Und dann My Garden. Das ist eine kleine Garten-App. Sie können Ihre Pflanzen katalogisieren und sich daran erinnern
00:03:40lassen, sie zu gießen. Sie nutzt Hosting und eine Datenbank. Und schließlich haben wir Tiny Tails. Das ist eine kleine App,
00:03:45die einen Agenten nutzt, um für Kleinkinder geeignete Bücher zu verschiedenen Themen zu empfehlen. Diese hier nutzt KI-LLM-APIs und
00:03:52Hosting. Also ja, denken Sie einfach an Projekte in etwa dieser Größenordnung, die Sie
00:03:57in der uns zur Verfügung stehenden Zeit bauen können. Und sobald Sie eine Idee für Ihr Projekt haben, werden wir
00:04:02den Rest des Workshops damit verbringen, es mithilfe von Agenten zu bauen. Es ist wichtig, mit einem guten Prompt zu beginnen,
00:04:08wenn man mit Agenten arbeitet. Speziell sollten Sie sagen, welche Art von Diensten Sie nutzen möchten. Sie sagen also:
00:04:13Ich möchte es bereitstellen. Ich möchte eine Datenbank nutzen, solche Sachen. Sie können spezifisch sein,
00:04:17welche Art von Dienst Sie nutzen möchten. Sie können sagen: Ich möchte Vercel für das Hosting nutzen, oder Sie können es
00:04:21Stripe, oder Entschuldigung, oder Sie können Ihren Agenten für Sie aus dem Stripe Projects Katalog auswählen lassen. Sie können
00:04:26also sagen: Ich möchte eine Datenbank. Stripe Projects wählt dann eine aus und initialisiert sie für Sie. Und ganz am Ende
00:04:32dieses Workshops haben wir, wie Gordon bereits erwähnt hat, eine Bestenliste auf projects.dev, auf der Sie Ihr
00:04:38Projekt einreichen und für die Projekte stimmen können, die Ihnen am besten gefallen. Und alleine schon dafür, dass Sie Ihr Projekt hier teilen,
00:04:45erhalten Sie ein paar Stripe-Guthaben. Jetzt führt Gordon Sie durch die ersten Schritte mit Stripe
00:04:50Projects. Klasse. Alles klar. Fangen wir also an. Um diesen Workshop zu absolvieren, benötigen Sie,
00:04:58wie gesagt, drei Dinge. Nun, vier Dinge, wenn man den Laptop mitzählt: eine agentische Umgebung, ein Stripe-Konto
00:05:05und die Stripe CLI. Wir haben einen Leitfaden für Teilnehmer. Es wäre super, diesen kurz zu scannen.
00:05:11Dieser liefert Ihnen alle Informationen, die auch auf den nächsten Folien zu sehen sind, aber Sie haben sie
00:05:15dann direkt zur Hand. Ich empfehle Ihnen also dringend, diesen QR-Code zu scannen. Ich gebe Ihnen eine Minute Zeit dafür.
00:05:21Es ist furchteinflößend, wenn man einen Vortrag hält und alle ihr Handy herausholen,
00:05:23aber ich habe Sie ja darum gebeten. Es ist also okay. Falls Sie noch kein Stripe-Konto haben,
00:05:30das ebenfalls kostenlos ist, können Sie dies scannen. Ich glaube, es führt direkt zu [dashboard.stripe.com/register](https://www.google.com/search?q=https%3A%2F%2Fdashboard.stripe.com%2Fregister).
00:05:38Das klappt dann schon. Ich gebe Ihnen kurz Zeit zum Scannen, falls Sie es brauchen.
00:05:47Super. Als Nächstes benötigen Sie die Stripe CLI mit dem Stripe Projects Plugin.
00:05:52Es gibt hier diesen hilfreichen NPX-Befehl, den Sie genau hier ausführen können. Stellen Sie nur sicher, dass Sie Stripe
00:05:58Best Practices und Stripe Projects auswählen, wenn nach den Skills gefragt wird, die Sie hinzufügen möchten. Und dies
00:06:05ist ein Prompt, den Sie in Ihrer agentischen Umgebung nutzen können, um die Stripe CLI zu installieren.
00:06:13Wenn Sie sie direkt auf dem Mac installieren möchten, können Sie einfach brew install nutzen. Auf Windows können Sie scoop verwenden.
00:06:23Das funktioniert ebenfalls. Ich habe scoop nie benutzt, da ich nicht wirklich auf Windows entwickle,
00:06:27aber Homebrew ist großartig. Darüber kann ich Ihnen also etwas erzählen. Klasse.
00:06:33Wenn Sie all diese Befehle ausgeführt haben, sollte das Stripe Projects Plugin installiert sein.
00:06:40Sie können testen, ob es korrekt installiert ist, indem Sie Stripe projects dash dash help ausführen,
00:06:44wie hier gezeigt. Hat jemand Probleme bei der Einrichtung? Bitte melden Sie sich, wenn Sie noch etwas
00:06:51Zeit brauchen, um die Stripe Projects CLI zu installieren. Okay, wir geben Ihnen noch ein, zwei Minuten,
00:06:57und dann machen wir weiter. Aber ja, führen Sie einfach Stripe projects dash dash help aus. Wenn Sie dort
00:07:02hilfreiche Ausgaben sehen, ist alles installiert und einsatzbereit.
00:07:08Und wenn Sie weiterhin Probleme haben, können wir in ein paar Minuten vorbeikommen und helfen. Machen Sie sich also
00:07:13keine allzu großen Sorgen.
00:07:14Hoffentlich hat es jetzt jeder installiert. Wenn nicht, kein Problem. Winken Sie uns einfach später zu. Wir helfen gerne.
00:07:26Sobald Sie es in dem Ordner installiert haben, in dem Sie Ihr Projekt erstellen möchten, führen Sie Stripe projects
00:07:35init aus. Sie können optional den Namen Ihres Projekts übergeben. Wenn nicht, wird einfach der Name
00:07:40des Ordners verwendet. Wenn Sie diesen init-Befehl ausführen, werden einige wichtige Dateien erstellt. Es wird
00:07:45ein .projects-Ordner mit den Dateien state.json und state.local.json erstellt. Diese Dateien sind die entscheidende Quelle für
00:07:53die Konten, Anbieter und Ressourcen-Informationen für Ihr spezielles Projekt.
00:07:59Sie werden auch sehen, dass wir eine Skill-Datei für die Stripe Projects CLI haben. Das ist ein Skill, der Ihrem Agenten erklärt,
00:08:08wie man die Stripe Projects CLI nutzt. Und sobald Sie anfangen, Ihrem Projekt Dienste hinzuzufügen,
00:08:14holen wir die Secret Keys für diese Dienste und fügen sie Ihrer .env-Datei hinzu. Wir laden auch Agenten-Skills
00:08:24für diese Dienste in den Ordner .agent/skills herunter, um Ihrem Agenten beizubringen, wie er diese Dienste am besten
00:08:31nutzt. Jetzt sollten Sie alles haben, was Sie für den Start brauchen. Zurück zu dir, Gordon. Danke.
00:08:37Wunderbar. Alles klar. Jetzt sind Sie an der Reihe. Sie können loslegen. Sie haben etwa 30 Minuten Zeit, um Ihr
00:08:45Projekt zu bauen. Wenn jemand Fragen zu Stripe Projects hat, beantworten wir diese gerne. Melden Sie sich einfach
00:08:50Hand. Wenn Sie Hilfe bei der Einrichtung Ihrer Umgebung benötigen, kommen wir vorbei und versuchen zu helfen.
00:08:57Aber ich lasse noch ein paar Folien stehen. Das sind einige der Befehle, die Sie in Stripe Projects nutzen können.
00:09:03Über init haben wir gesprochen. Über catalog haben wir gesprochen, wo Sie die Anbieter sehen können. Nutzen Sie add, um
00:09:10einen Anbieter oder Dienst hinzuzufügen. Open öffnet direkt das Dashboard des Anbieters. Synchronisieren von Umgebungs-
00:09:19variablen. Wenn Sie sehen möchten, wie viel Sie ausgeben, haben wir dafür einen Befehl. Und
00:09:24gegen Ende, wenn Sie bereit sind, Ihr Projekt zu teilen, gibt es Stripe project share,
00:09:29womit Sie einfach den ausgewählten Stack teilen, also die Liste der von Ihnen gewählten Anbieter.
00:09:34Und falls Sie Ihre Konto-ID benötigen, können Sie diese dort ebenfalls abrufen. Also ja, danke fürs Dabeisein.
00:09:40Danke für die Teilnahme. Wir haben etwa 30 Minuten. Also baut, stellt bereit, meldet euch, wenn ihr
00:09:46Fragen habt, und reicht eure Ergebnisse hier ein. Aber ich schalte noch einmal auf diese Folie zurück. Das ist der eigentliche
00:09:55Teilnehmer-Leitfaden, der alle Informationen aus den Folien enthält. Also ja. Ich bin neugierig, ob jemand
00:10:01seine App-Idee teilen möchte, an der er baut. Wenn du dir etwa 10 Sekunden Zeit nehmen kannst,
00:10:08um sie kurz vorzustellen.
00:10:12Ja. Die Idee, über die ich nachdenke, habe ich bereits auf eigene Faust versucht umzusetzen,
00:10:22aber ich möchte es nun hiermit versuchen. Es ist im Grunde eine App, um andere Trainingspartner zu finden, zum Beispiel für
00:10:31Kampfsportarten wie Jiu-Jitsu. Mir ist aufgefallen, dass es so etwas noch nicht gibt. Sagen wir also,
00:10:36dein Fitnessstudio hat geschlossen, es ist Wochenende oder du bist auf Reisen und möchtest trainieren,
00:10:40aber alle Sportschulen haben zu. Wenn jemand in deiner Nähe ist, der auch trainiert, gäbe es keine Möglichkeit,
00:10:43das zu erfahren – außer vielleicht mit dieser App. Sie würde es ermöglichen, sich mit jemandem zu matchen, der ebenfalls
00:10:48einen Trainingspartner sucht, und dann super cool zusammen zu trainieren. Schön. Das wäre meine Idee. Ich meine,
00:10:52ich versuche es einfach mal. Genial. Ja. Viel Erfolg. Das ist fantastisch. Perfekt. Ja. Das ist ein tolles
00:10:56Beispiel, denn du wirst Web-Hosting brauchen, du wirst eine Datenbank brauchen,
00:11:00du wirst Auth brauchen und einen Domainnamen. Ja, das ist wirklich klasse.
00:11:04Klasse. Wenn Sie weitere Fragen zu Stripe Projects oder Stripe im Allgemeinen haben,
00:11:08wir haben gleich da draußen einen Stand. Ich werde dort sein. Ich bin sicher, Colin auch.
00:11:12Kommen Sie also gerne vorbei und sprechen Sie mit uns über Stripe. Wir haben auch Werbegeschenke dabei. Vielen Dank
00:11:17euch allen fürs Kommen und ich hoffe, es hat euch gefallen, Stripe Projects zu nutzen. Super. Danke euch allen. Danke zusammen.