Transcript
00:00:00Das ist eine Event-Landingpage, die ich in wenigen Minuten selbst gebaut habe.
00:00:05Sie enthält sogar eine KI-gestützte virtuelle Anprobe.
00:00:09Mein Chef hat mir das Projekt gegeben, und V0 half mir, meine Ideen in echte Software zu verwandeln.
00:00:14In diesem Video zeige ich Ihnen, was V0 ist und wie Sie Projekte Schritt für Schritt aufbauen.
00:00:19Was ist also V0?
00:00:21KI macht es einfach, Code zu generieren.
00:00:23V0 bündelt diese Leistung in einem Format, mit dem jeder ganz einfach echte Apps
00:00:28und Websites erstellen oder mit Entwicklern zusammenarbeiten kann.
00:00:30V0 ist darauf ausgelegt, Sie so schnell wie möglich von Null zum fertigen Produkt zu bringen.
00:00:36Und so funktioniert V0.
00:00:37Sie beschreiben die App, den Agenten oder die Website, die Sie wollen, und V0 generiert den Code in
00:00:42einer Live-Vorschau.
00:00:43Sie können Änderungen vornehmen, indem Sie mit V0 sprechen und ihm sagen, was es ändern soll,
00:00:48und es wird diese für Sie ausführen.
00:00:49V0 generiert echte Software mit Vercel und Next.js, aber V0 ist nicht nur ein Website-Builder.
00:00:56Es kann echte Apps erstellen, sie mit KI und Datenbanken verbinden und Code generieren, den Entwickler
00:01:00nutzen und bereitstellen können.
00:01:02Das ist möglich, weil V0 von Vercel entwickelt wurde, den Machern des Next.js-Codierungs-Frameworks,
00:01:08das von Marken wie Under Armour, Stripe und Notion genutzt wird.
00:01:11Wenn V0 also Ihre Next.js-App erstellt und bereitstellt, nutzen Sie dieselbe Code- und Sicherheits-
00:01:15infrastruktur wie die führenden Unternehmen der Welt.
00:01:19Zeigen wir ein paar Projekte, damit Sie V0 in Aktion sehen und sehen, wie einfach der Einstieg ist.
00:01:24Ich bin also im Marketing-Team und habe diese Woche zwei große Projekte vor mir.
00:01:27Erstens muss ich eine Eventseite für ein neues Produkt bauen, das wir auf den Markt bringen.
00:01:31Und zweitens muss ich eine Landingpage auf unserer Website aktualisieren.
00:01:34Fangen wir zuerst mit der Eventseite an.
00:01:36Das Event ist eine Produkt-Release-Party für den Launch einer neuen Uhr namens "Son of
00:01:40Ali".
00:01:41Ich möchte die Landingpage stilvoll und aufregend gestalten, um Hype aufzubauen und eine interaktive
00:01:45virtuelle Anprobe für Besucher zu schaffen, damit sie sich registrieren.
00:01:48Genau das werde ich V0 jetzt auftragen.
00:01:53Ich habe meinen Prompt fertig formuliert.
00:01:54Jetzt sende ich meine Anweisungen ab, und V0 beginnt mit der Erstellung.
00:01:59Während V0 baut, möchte ich Ihnen zeigen, was es so mächtig macht.
00:02:02Wenn Sie auf Einstellungen und dann auf Integrationen klicken, sehen Sie alle Integrationen,
00:02:07die Ihnen in V0 zur Verfügung stehen.
00:02:09Zuerst sehen Sie, dass V0 bereits über eine integrierte KI verfügt.
00:02:12Es nutzt das AI SDK, um KI-Funktionen aufzubauen, und das AI Gateway, um Ihrer App automatisch
00:02:17Zugriff auf Hunderte von KI-Modellen zu geben.
00:02:20Sie können auch Datenbanken aufbauen oder anbinden, um das Backend Ihrer App zu betreiben, und sogar
00:02:25Zahlungen über Stripe akzeptieren.
00:02:27Mit diesen Integrationen können Sie echte, vollwertige KI-gestützte Apps erstellen.
00:02:32Ok, schauen wir mal nach unserer Eventseite.
00:02:34V0 hat diese erste Version fertiggestellt, also testen wir sie mal.
00:02:38Ich werde jetzt ein Bild von mir hochladen, und es sollte uns die vier
00:02:44Varianten liefern, die wir für die virtuelle Uhrenanprobe angefordert haben.
00:02:49Großartig, V0 hat meine Anweisungen tatsächlich umgesetzt und den Code aktualisiert.
00:02:55Wenn wir in den Editor schauen, sehen wir, dass V0 aktiv den Next.js-Code anpasst.
00:03:00Der Editor macht es auch für Entwickler einfach, den Code zu überprüfen und zu bearbeiten.
00:03:04Alles klar, V0 ist fertig mit den Änderungen, und sie sehen super aus.
00:03:09Bevor ich das veröffentliche, möchte ich es für Feedback mit meinem Team teilen.
00:03:12Ich kann auf Teilen klicken, den Link kopieren und den Chat sowie die Vorschau an mein Team senden.
00:03:18Was sie in dieser Vorschau sehen, wird exakt dem entsprechen, was die Nutzer sehen, wenn ich die Seite live schalte.
00:03:22Ich muss mir also keine Sorgen machen, dass sich beim eigentlichen Deployment etwas verändert.
00:03:26Sobald mein Team die Seite geprüft hat, kann ich ihr eine eigene URL geben und sie veröffentlichen.
00:03:31Darüber hinaus wurde auf Vercel tatsächlich ein Projekt für diese V0-Kreation
00:03:36erstellt.
00:03:37Wenn ich also auf "Auf Vercel prüfen" klicke, kann ich mir das Projekt direkt ansehen.
00:03:42In diesem Projekt sehe ich alle Analysen, Fehler und einen vollständigen Verlauf der Deployments.
00:03:48Alles klar, ich habe diese App in der Produktionsumgebung veröffentlicht.
00:03:51Jetzt kann ich die Live-Seite aufrufen, und genau das werden die Nutzer sehen, wenn ich
00:03:56den Link teile und sie öffentlich darauf zugreifen.
00:03:59Das Coole an V0 ist, dass ich auch eine eigene Domain hinzufügen kann.
00:04:03Ich kann die Domain unter ".vercel.app" anpassen, eine neue Domain kaufen oder eine Domain hinzufügen, die ich bereits
00:04:09besitze.
00:04:10Da dies eine Seite für ein einmaliges Event ist, werde ich die Basis-Domain anpassen und
00:04:14sie dann erneut veröffentlichen.
00:04:15Super.
00:04:16Die Domain ist nun aktualisiert, und ich kann dieselbe Seite unter der neuen Domain aufrufen,
00:04:21die ich bearbeitet und hinzugefügt habe.
00:04:23Und das ist alles.
00:04:24V0 hat meine App auf der Vercel-Infrastruktur bereitgestellt, und sie ist für jeden öffentlich zugänglich.
00:04:30Kommen wir nun zu meinem nächsten Projekt: der Aktualisierung einer Landingpage, die bereits
00:04:34auf unserer Marketing-Website veröffentlicht wurde.
00:04:36Unser Entwicklungsteam verwaltet die Seite und nutzt GitHub zur Versionskontrolle. Ich muss
00:04:41die Aktualisierung also in deren bestehenden Workflow integrieren.
00:04:44Die gute Nachricht ist, dass V0 genau das unglaublich einfach macht.
00:04:48Ich öffne ein neues V0-Fenster und klicke auf "Aus GitHub importieren".
00:04:52Ich habe die URL für dieses GitHub-Repo bereits parat, auf das ich zugreifen möchte.
00:04:56Ich füge sie also oben in die Leiste ein und klicke auf Importieren.
00:05:01Und im Handumdrehen importiert V0 das Repository.
00:05:05Jetzt, da V0 das Repo importiert hat, kann ich die gewünschte Änderung vornehmen.
00:05:08Ich möchte oben auf dieser Marketingseite einen Banner hinzufügen, der die Leute
00:05:12auf die soeben erstellte Event-Landingpage leitet, damit sie sich für das Launch-Event
00:05:17der "Son of Ali" anmelden können.
00:05:18Ich werde V0 also genau darum bitten.
00:05:21Während V0 die Änderung vornimmt, klicke ich auf "Git".
00:05:27Sie sehen, dass V0 automatisch einen Branch für mich erstellt hat, was es für
00:05:31meine Entwickler einfach macht, die Änderungen zu prüfen und zu testen, bevor sie in die
00:05:35Hauptseite integriert werden.
00:05:36V0 hat die Änderung vorgenommen, also ist es an der Zeit, einen Pull-Request zu erstellen,
00:05:42den mein Team prüfen kann.
00:05:44Ich klicke also auf "PR öffnen" und dann auf "Pull-Request öffnen".
00:05:49Wenn ich jetzt auf "PR anzeigen" klicke, sehe ich, dass mein Pull-Request auf GitHub geöffnet wurde.
00:05:54Und da unsere Website auf Vercel läuft, wurde automatisch ein Preview-Build erstellt.
00:05:59So können nicht nur meine Entwickler den Code prüfen, sondern das gesamte Team kann sehen, wie das Update
00:06:03aussieht, und Feedback über Kommentare abgeben.
00:06:06Und das war's schon.
00:06:07Ich habe ganz alleine eine Änderung an unserer Marketing-Website vorgenommen, ohne ein Ticket für die Entwicklung zu erstellen,
00:06:11und sie können die Änderung im Rahmen ihres bestehenden Prozesses überprüfen.
00:06:15Wir haben V0 für Teams entwickelt, die mit Entwicklern zusammenarbeiten – egal ob Marketing, Produkt, Gründer
00:06:19oder die Ingenieure selbst.
00:06:22Mit V0 kann jeder seine Ideen in echte Software verwandeln und an bestehenden Apps und
00:06:27Websites mitarbeiten.
00:06:28Besuchen Sie v0.app und veröffentlichen Sie noch heute Ihr erstes Projekt.