00:00:00>> Hallo, ich bin Pauline von Vercel und im heutigen Video
00:00:03werde ich euch zeigen, wie man
00:00:05die Git-Integration von v0 nutzt, um
00:00:08eure Ideen vom Prototyp in die Produktion zu bringen.
00:00:11In diesem Video
00:00:12werden wir also einen Blog erstellen,
00:00:14ihn mit GitHub verbinden,
00:00:15mit Branches sicher mit neuen Features experimentieren
00:00:18und ihn dann live im Web bereitstellen.
00:00:21Am Ende solltet ihr den kompletten Workflow verstehen.
00:00:25Fangen wir also direkt an.
00:00:27Okay, wir sind in v0.
00:00:30Ich beginne damit, einen einfachen Blog zu erstellen.
00:00:33Ich beschreibe einfach im Chat, was ich möchte.
00:00:35Was wir hier tun werden, ist das Erstellen
00:00:37einer modernen Blog-Seite mit
00:00:42Header, einem Featured Post und einem Grid für aktuelle Beiträge.
00:00:53Pro-Tipp: Ihr könnt hier auch das Modell wechseln.
00:00:57Wir haben verschiedene Modelle zur Auswahl.
00:00:59Wir haben Mini, Pro, Max
00:01:01und auch Opus.
00:01:03Ihr könnt das also während des Chattens ändern.
00:01:07Schön, gefällt mir.
00:01:09v0 hat dieses saubere Blog-Layout für mich generiert.
00:01:13Nehmen wir ein paar Anpassungen vor, um es zu personalisieren.
00:01:17Lass uns den...
00:01:21oh, wenn ich richtig schreiben kann,
00:01:23den Header-Hintergrund mit einem Verlauf von Blau nach Lila versehen.
00:01:32Perfekt. Jetzt habe ich einen Blog, mit dem ich zufrieden bin.
00:01:36Aber im Moment existiert dieser nur in v0.
00:01:40Ich muss meine Arbeit an einem dauerhafteren Ort speichern.
00:01:43Schließlich möchte ich das Ganze live schalten,
00:01:45und hier kommt die Git-Integration ins Spiel.
00:01:48Wir gehen also hier rüber zur Seitenleiste,
00:01:52wo man das GitHub-Logo und die Git-Verbindung sieht.
00:01:56Da dies mein erstes Mal ist, dass ich dieses Projekt verbinde,
00:01:59bittet v0 mich, mein GitHub-Konto zu verknüpfen und das Repository zu benennen.
00:02:04Wir werden es also jetzt verbinden.
00:02:06Der Scope ist mein Konto.
00:02:08Ich bin in all diesen Konten,
00:02:10aber für den Moment nehme ich mein persönliches Pauline-Konto.
00:02:13Mit dem Repository-Namen bin ich einverstanden,
00:02:15also lassen wir es so und gehen
00:02:16weiter zur Erstellung des Repositorys.
00:02:18Einfach so erstellt v0
00:02:21das Repository und pusht meinen gesamten Code zu GitHub.
00:02:24Großartig. Schauen wir mal, was eigentlich auf GitHub passiert.
00:02:29Wir können einen Blick darauf werfen.
00:02:31Seht euch den ganzen Code an, den v0 generiert hat.
00:02:34Er ist ordentlich strukturiert mit allen Konfigurationsdateien, die ich brauche.
00:02:38Meine Komponenten sind da,
00:02:40das App-Verzeichnis, und
00:02:41alles ist organisiert und bereit zur Bearbeitung.
00:02:43Ihr denkt vielleicht: "Was habe ich durch die Verbindung zu GitHub eigentlich gewonnen?"
00:02:48Erstens ist mein Code sicher gesichert.
00:02:51Falls etwas schiefgehen sollte,
00:02:53habe ich meine gesamte Historie.
00:02:55Zweitens kann ich jetzt freier
00:02:57experimentieren, ohne Angst vor Breaking Changes zu haben.
00:03:00Wir werden das gleich mit Branches in Aktion sehen.
00:03:02Und drittens habe ich einen Weg zur Produktion.
00:03:04Ich kann diesen Blog live bereitstellen.
00:03:06Okay, sehen wir uns das beim Hinzufügen eines neuen Features an.
00:03:09Sagen wir, ich wollte einen Bereich "Über den Autor" hinzufügen,
00:03:14bin mir aber noch nicht zu 100 Prozent sicher, wie er aussehen soll.
00:03:17Ich möchte diese Version nicht gefährden.
00:03:19Hier kommen also Branches ins Spiel.
00:03:21Ein Branch ist wie eine parallele Version
00:03:24eures Projekts, in der ihr sicher experimentieren könnt.
00:03:27Okay. Also werden wir diesen Branch duplizieren.
00:03:31Nennen wir diesen Branch "author-bio".
00:03:36Beachtet hier oben:
00:03:38Ich befinde mich jetzt auf dem Branch "author-bio".
00:03:41Mein Main-Branch ist immer noch genau so, wie ich ihn unberührt gelassen habe.
00:03:45Jetzt können wir hier also frei experimentieren.
00:03:48Wir wollen also diese Autoren-Bio hinzufügen.
00:03:50Wir bitten v0 also einfach, einen Bereich für die Autoren-Bio hinzuzufügen.
00:03:56Okay, fantastisch.
00:03:59Die neue Autoren-Bio-Komponente wurde hinzugefügt.
00:04:02Machen wir nun eine kurze Aktualisierung in der Vorschau.
00:04:06Wir sollten sehen können, wo sie hinzugefügt wurde.
00:04:10Da ist er. Ein neuer Bereich "Über den Autor".
00:04:13Nur zur Erinnerung:
00:04:15Wir haben die Änderungen in diesem Branch vorgenommen,
00:04:18dem "author-bio"-Branch.
00:04:19Das bedeutet, dass überhaupt keine Änderungen
00:04:22am Main-Branch vorgenommen wurden.
00:04:24Dieser Branch steht uns also zum Experimentieren zur Verfügung.
00:04:27Wenn wir also weiteren Text oder
00:04:29den Stil ändern wollten, können wir das hier frei tun.
00:04:33Wenn ich mir das so ansehe,
00:04:35finde ich, die Autoren-Bio sollte etwas kompakter sein.
00:04:38Ich passe das an, während ich noch in diesem Branch bin,
00:04:40nur um es euch zu zeigen.
00:04:41Mache die Autoren-Bio kompakter.
00:04:46Okay, wunderbar.
00:04:48Man sieht, dass v0 den Autoren-Bereich kompakter gemacht hat,
00:04:52indem insgesamt das Padding reduziert wurde.
00:04:56Es sieht viel besser aus.
00:04:57Damit bin ich sehr zufrieden.
00:04:58Wir können also einen PR öffnen und diese Änderungen pushen.
00:05:03Seht, wie dieser Workflow meinen Main-Branch schützt.
00:05:06Ich kann in diesem Experimentier-Branch so oft iterieren, wie ich will,
00:05:10aber Main bleibt stabil, bis ich komplett zufrieden bin.
00:05:13Alles klar, ich bin jetzt zufrieden mit der Autoren-Bio.
00:05:16Es ist Zeit, dies in meinen Main-Branch zu mergen.
00:05:18Ich erstelle einen Pull Request.
00:05:20Ein Pull Request oder PR ist im Grunde die Aufforderung,
00:05:25meine Änderungen aus dem "author-bio"-Branch
00:05:28in den Main-Branch zu übernehmen.
00:05:30Es ist der formelle Weg, Änderungen vorzuschlagen.
00:05:32Wir öffnen also einen PR direkt hier.
00:05:35Und wir klicken hier direkt auf den PR selbst.
00:05:44Das führt uns direkt zu GitHub.
00:05:46Und wie ihr sehen könnt,
00:05:47haben wir diese zwei Commits, die wir in v0 gemacht haben.
00:05:51Also das Erstellen der Autoren-Bio und sie kompakter zu machen.
00:05:56Wenn wir hier auf "Files changed" gehen,
00:05:58könnt ihr den exakten Code überprüfen, den v0 geändert hat.
00:06:03In einem Team-Umfeld
00:06:04würden eure Kollegen hier euren Code überprüfen
00:06:07und Kommentare hinterlassen.
00:06:08Bei Solo-Projekten
00:06:09ist dies euer letzter Check, um sicherzugehen,
00:06:11dass alles gut aussieht.
00:06:13Ich bin mit diesen Änderungen zufrieden.
00:06:14Also werde ich diesen Pull Request mergen.
00:06:17Gehen wir zurück zu v0.
00:06:20Wie ihr seht, können wir den PR mergen.
00:06:23Wir mergen das also jetzt.
00:06:29Und wenn wir zurück zu GitHub gehen,
00:06:31seht ihr, dass es gemergt wurde.
00:06:34Dieses Feature ist nun offiziell Teil unserer Main-Codebasis.
00:06:38Das ist jetzt alles live.
00:06:39Wir können auch hier in die Einstellungen gehen
00:06:42und uns das Vercel-Projekt ansehen und auf Vercel anzeigen.
00:06:46Wie ihr hier seht, ist unser Deployment durchgelaufen.
00:06:51Und wenn wir hier auf unsere Domains klicken, da ist es.
00:06:55Mein Blog ist live im Internet.
00:06:57Man sieht unseren Header mit dem Verlauf,
00:07:00die Blog-Beiträge.
00:07:01Und wenn ich hier runterscrolle, unsere Autoren-Bio.
00:07:06Im Grunde alles, was ich in v0 gebaut habe,
00:07:08wurde sicher über Git gemergt
00:07:10und ist nun bereitgestellt und für die Welt zugänglich.
00:07:13Das ist derselbe Workflow,
00:07:14den professionelle Entwicklerteams jeden Tag nutzen.
00:07:17Ihr baut also in v0, verwaltet euren Code mit Git
00:07:20und stellt ihn dann mit Vercel bereit –
00:07:22ein kompletter Produktions-Workflow.
00:07:25Ich hoffe, das hilft euch zu verstehen,
00:07:27wie man die Git-Integration von v0 souveräner nutzt.
00:07:30Probiert diesen Workflow selbst aus.
00:07:32Fangt klein an, erstellt einen Branch,
00:07:34experimentiert und stellt ihn bereit.
00:07:36Wenn ihr Fragen habt,
00:07:38besucht uns in unserer Community unter community.vercel.com.
00:07:41Vielen Dank fürs Zuschauen.