Transcription
Also, Sie wissen, wie wir auf Apples Website das Produkt haben, wir haben Zitate, wir haben dynamische Elemente wie dieses. Wir können sozusagen die Dekonstruktion des Produkts selbst sehen, und all diese Funktionen auf der Website verleihen ihm ein super professionelles und markenbezogenes Gefühl. Und ich bin sicher, dass einige von Ihnen das inzwischen bemerkt haben, aber diese Website ist nicht Apple. Dies ist eine, die ich mit Cloud Code mit dieser neuen Fähigkeit in etwa 30 Minuten erstellt habe. Also werde ich Ihnen heute den genauen Prozess zeigen, um Websites wie diese zu erstellen, die super professionell sind, die diese wirklich schönen Animationen haben und sich einfach großartig anfühlen. Ich werde Ihnen auch die Fähigkeit und alles, was Sie dafür brauchen, komplett kostenlos zur Verfügung stellen, so dass selbst wenn Sie Cloud Code noch nie geöffnet haben oder wissen, dass Sie noch nie eine Website erstellt haben, Sie in der Lage sein werden, genau das zu tun, was Sie auf dem Bildschirm sehen. Lassen Sie uns also keine Zeit verschwenden und direkt ins Video einsteigen. Okay, wir verwenden Cloud Code in Visual Studio Code. Wenn Sie das also nicht haben, gehen Sie einfach zum Browser, geben Sie VS Code ein und laden Sie es für Ihr Betriebssystem herunter. Es ist komplett kostenlos. Sobald Sie hier sind, gehen Sie nach links, das ist der Erweiterungsbutton. Geben Sie cloud code ein und installieren Sie diesen. Es wird Sie dann auffordern, sich mit Ihrem Anthropic-Abonnement anzumelden. Und übrigens, Sie müssen sich im kostenpflichtigen Plan befinden. Also entweder Pro oder Max, um Cloud Code nutzen zu können. Wenn Sie das dann installiert haben, klicken Sie auf diesen Button hier oben, das ist der Explorer, und Sie müssen einen Ordner öffnen. Gehen Sie also einfach zu Ihrem Desktop, gehen Sie zu Ihren Dokumenten, öffnen Sie einen brandneuen Ordner, nennen Sie ihn einfach, wissen Sie, 3D-Website-Tests, und öffnen Sie ihn dann hier. Hier sehen Sie, dass dies das Projekt ist, an dem ich gearbeitet habe. Ich habe es einfach animierte Websites genannt. Und was ich tun werde, ist, Ihnen alle Fähigkeiten hier zu geben, die Sie benötigen, um einfach zu replizieren, was ich tue. Und ich gebe Ihnen das alles kostenlos, natürlich. So dass, sobald Sie das haben, alles, was Sie tun müssen, ist, Cloud Code ein Video zu geben. Zum Beispiel haben wir hier ein Video einer Kamera. Sie können sehen, was passiert, es dreht sich einfach herum und dann geht es sozusagen in den Röntgenmodus und wir können ins Innere der Kamera sehen. Und jetzt, da Cloud Code das hat, sagen Sie einfach: "Erstelle mir eine Website für dieses Video." Und was Sie bekommen, ist etwas wie dieses, wo wir Vanta eins haben. Sie sehen, es sieht aus wie eine Produkt-Landingpage. Wenn wir anfangen, nach unten zu scrollen, wird die Kamera enthüllt. Und wenn wir weiter nach unten scrollen, erhalten wir dynamischen Text, der durchkommt, sowie die eigentliche Kameraanimation, die beginnt. Und das Verrückte ist, ich habe ihm keinen Text gegeben. Ich habe ihm kein Farbschema gegeben. Ich habe ihm keine Informationen über das Produkt gegeben. Offensichtlich könnten Sie das, aber was es tun wird, ist, es wird das einfach für Sie erstellen. Und dann können Sie loslegen und die Änderungen vornehmen, die Sie benötigen. Die beiden Fähigkeiten, die Sie benötigen, sind die Front-End-Design-Fähigkeit, die ich von Anthropic erhalten habe. Es war eine offizielle Fähigkeit, aber ich habe sie ein wenig verändert. Dies ist also sozusagen meine Version der Front-End-Design-Fähigkeit für diesen spezifischen Anwendungsfall. Und dann müssen Sie auch die Video-zu-Website-Fähigkeit holen. Beide Fähigkeiten sind buchstäblich nur Markdown-Dateien. Es sind Markdown-Dateien, an denen ich gearbeitet habe, die Claude Code die besten Praktiken für die Erstellung dieser animierten 3D-Websites mitteilen. Und Sie können diese Fähigkeiten komplett kostenlos erhalten, indem Sie meiner kostenlosen Community beitreten. Der Link dazu ist unten in der Beschreibung. Sie gehen zum Klassenzimmer, Sie gehen zum Abschnitt Fähigkeiten und Sie werden alle dort finden. Und buchstäblich alles, was Sie tun müssten, ist, sie aus Ihrem Download-Ordner zu nehmen, sie hierher auf die linke Seite zu ziehen und dann Claude einfach zu sagen: "Hey, richte diesen Ordner ein." Ich habe also meinen Claude. Innerhalb dieses Claude habe ich einen Fähigkeitenordner. Und dann innerhalb dieses Fähigkeitenordners, hier sind meine beiden Fähigkeiten, die ich brauche, dass Sie sie verwenden. Und es sollte auf der linken Seite ungefähr so aussehen. Bevor Sie sich zu sehr überfordert fühlen, wenn Sie Cloud Code noch nie zuvor verwendet haben, ist es super einfach. Hier haben wir unseren eigentlichen Agenten, mit dem wir sprechen und Gespräche führen. Und hier drüben haben wir nur Ordner. Ich habe Ihnen gerade gezeigt, wo die Fähigkeiten leben, nämlich in einem Claude-Ordner innerhalb eines Fähigkeitenordners. Aber dann ist der andere Kram hier drin super einfach. Hier sind alle Videodateien, die ich verwendet habe, um die vorherigen Websites zu erstellen. Und dann hat jede Website ihren eigenen Ordner erstellt. Für die Kamera-Website hat sie all diese Informationen. Für die Uhr-Website hat sie all diese Informationen. Und für die Yeti-Website hat sie auch all diese Informationen. Aber auf jeden Fall, wenn Sie einfach den Schritten folgen, die ich in diesem Video mache, wird alles Sinn ergeben und Sie werden eine schöne Ausgabe erhalten. Und übrigens, wenn das etwas verwirrend ist, dann schauen Sie sich unbedingt mein Fähigkeiten-Video an, das ich hier oben verlinken werde. Und wenn Sie das verstanden haben, springen Sie einfach wieder hierher zurück. In Ordnung. Ich werde Sie Schritt für Schritt durch diesen Prozess führen, damit Sie genau sehen können, was ich getan habe, um diese wirklich coolen Animationen zu erstellen. Und was Sie verstehen müssen, ist, dass all diese Animationen, die Sie auf der Website sehen, und all die anderen, die ich gezeigt habe, nur Videos sind. Und so habe ich hier einfach Nano Banana zwei verschiedene Bilder für mich generieren lassen und sie dann in ein Video verwandelt. Zum Beispiel ist das erste mit der Apple Watch einfach die Apple Watch, die sich öffnet und dann all ihre Schichten freilegt. Und dann, als ich wollte, dass sie sich wieder schließt, habe ich sie einfach aufgefordert, das Gegenteil zu tun. Und jetzt haben wir das zweite, wo es vom Endbild ausgeht und sich dann sozusagen wieder in sich selbst faltet und die Apple Watch enthüllt. Da Sie nun verstanden haben, wie einfach das wirklich ist, gehen wir zu Nano Banana und fangen an, einige Bilder zu erstellen. Okay, die Art und Weise, wie ich Nano Banana gerne benutze, egal ob im Playground wie diesem oder über die API, ist mit key.ai, weil ich festgestellt habe, dass es sehr schnell und sehr günstig ist. Also ging ich zu Nano Banana 2, der neuen Version von Nano Banana, und kam hierher und machte ein Bild im 16x9-Seitenverhältnis, und ich sagte, ich brauche ein professionelles Bild in Studioqualität von einem Mixer. Es sollte vor einem schlichten, komplett schwarzen Hintergrund sein, ohne Schatten, ohne Hände, ohne Reflexionen. Und das wird im Wesentlichen unser Startbild sein, wenn wir das eigentliche Video erstellen. Dann speicherte ich die Ausgabe, lud sie hier als Bildeingabe hoch und sagte genau denselben Prompt, aber diesmal sollte es mit Obst und Saft gefüllt sein. Jetzt haben wir also unser Startbild hier und unser Endbild und wir müssen es nur noch animieren, damit es tatsächlich so aussieht, als ob Obst und Saft hineingefüllt und gegossen werden. Dann fand ich die besten Ergebnisse mit cling 3.0, das Sie, wie gesagt, auch in diesem key.ai finden können. Wir geben ihm das Startbild, wir geben ihm das Endbild und hier ist, was ich für meinen Prompt getan habe. Ich ging tatsächlich zu Claude und gab ihm das Start- und Endbild und sagte: "Hilf mir, einen KI-Video-Prompt zu erstellen, bei dem der Deckel abfliegen soll. Obst und Saft sollen hineingefüllt werden. Und dann soll der Deckel wieder aufgesetzt werden. Keine Schatten, keine Hände, keine Reflexionen." Es spuckte diesen Prompt aus. Ich gab ihn in Cling ein. Und hier ist das Ergebnis. Ich habe das noch nicht angesehen, also hoffe ich, dass es gut ist. Okay. Interessant. Ich meine, offensichtlich müssen wir das vielleicht ein wenig korrigieren, aber für die Zwecke der Demo ist es mir egal. Das Obst und der Saft erscheinen irgendwie magisch aus dem Nichts und jetzt sind sie im Mixer. Okay, ich habe dieses Video heruntergeladen. Ich ziehe es einfach hier auf die linke Seite und Sie können jetzt sehen, dass dieses Video, das Cloud Code betrachtet, genau das ist, das wir gerade zusammen generiert haben. Das ist also das, was es verwenden wird. Es wird im Grunde dieses Video nehmen, etwa 120 Bilder extrahieren oder wie viele Bilder auch immer dieses Video ausmachen, und dann wird es all diese speichern. Als Beispiel, wenn ich zu den Bildern von der Uhr gehe, sehen Sie, dass es über hundert Webp-Bilder aus diesem tatsächlichen Video erstellt hat. Und es ist sozusagen eine Stop-Motion-Animation, bei der sich jedes Bild nur ein wenig verändert und wenn man das tatsächliche Video durchgeht, beginnt es sich zu formen. Es ordnet also im Grunde jedes dieser Bilder einer Scroll-Position zu. Wenn Sie also nach unten scrollen, enthüllt es sich sozusagen, oder wenn Sie rückwärts scrollen, geht es in die andere Richtung. Jetzt werde ich sicherstellen, dass mein Agent im Planmodus ist, was im Grunde bedeutet, dass er nichts tun wird. Er wird nur Dinge lesen und einen Plan erstellen, der zu viel besseren Websites beim ersten Versuch führt. Also, ich habe damit angefangen, indem ich sagte, ich habe einfach ein Video namens blendercling.mpp4 fallen gelassen. Helfen Sie mir, eine einseitige Produkt-Landingpage für dieses Produkt zu erstellen. Sie sollte modern sein. Sie sollte sich sehr professionell anfühlen. Sie sollte durchgängig flüssige Animationen und Design haben. Alle Texte sollten leicht zu lesen sein. Und der Hintergrund der Website sollte komplett schwarz sein. Es sollte ein dunkler Modus sein. und es sollte in den Hintergrund des Blender Cling Bildes übergehen, so dass es aussieht, als wäre es eine, wissen Sie, flüssige Webseite. Wenn Sie dies also wirklich für ein Produkt oder ein Unternehmen tun würden, würden Sie es wahrscheinlich mit mehr Informationen auffordern, aber ich zeige Ihnen jetzt nur, wie das funktioniert. Ich werde das im Planmodus abschicken, und Sie werden sehen, dass es natürlich zurückkommt und mir einige Fragen stellt. Wenn Sie sich fragen, wie ich direkt in meinen Cloud Code sprechen konnte, dann schauen Sie in die Beschreibung für mein Tool. Eine Sache, die Sie bemerken werden, wenn Sie die Funktionsweise durchlesen, ist, dass Sie ffmpeg haben müssen, das im Grunde nur Bilder aus Videos extrahiert. Es ist ein kostenloses Tool und wenn Sie es nicht installiert haben, wird Claude Code Ihnen helfen, es zu installieren. Es wird es einfach für Sie tun, also machen Sie sich keine Sorgen. Aber jetzt sehen Sie, dass es uns einige Fragen stellt. Die erste ist, was ist der Produktname und die Marke für diesen Mixer? Und ich werde einfach fortfahren und sagen, erstellen Sie eine fiktive Marke, genau wie es für Vanta 1, die Kamera-Website, getan wurde. Dann sagt es, welche Art von Inhaltsabschnitten möchten Sie? Ich werde einfach mit dem vollen Premium gehen, was wir für die anderen Beispiel-Websites gemacht haben. Aber natürlich könnten Sie es hier ein wenig anpassen, um Ihren Bedürfnissen gerecht zu werden. Und wenn Sie Cloud Code noch nie zuvor verwendet haben, was hier passiert, ist, dass Sie im Grunde alles sehen können, was Cloud Code denkt und tut. Sie können eine Aufgabe sehen, Sie können einen Glob sehen, Sie können sehen, was es liest, und Sie werden später sehen, wenn es tatsächlich anfängt, Dinge zu implementieren, wird es sich selbst eine Aufgabenliste oder eine To-Do-Liste erstellen, und Sie können ihm tatsächlich zusehen, wie es diese To-Dos erfüllt. Es ist also wirklich cool. Okay, jetzt sind wir an dem Punkt, an dem der Plan fertig ist. Wir haben Obsidian Vortex Premium Blender Landing Page. Wir haben die Markenidentität hier. Also Obsidian, Obsidian Vortex. Der Slogan ist: Vernichte alles. Die Akzentfarbe ist blutrot. Und wir haben Schriftarten. Wir haben die Videodetails, Implementierungsschritte. Hier ist also die ffmpeg-Sache, von der ich gesprochen habe. Das extrahiert die tatsächlichen Bilder. Dann baut es das HTML. Dann erstellt es all diese verschiedenen Abschnitte. Es baut das CSS. Es baut das JS. Und dann testet es lokal. Bevor das also irgendwo im Web landet, testen wir es hier. Und dann, wenn wir damit zufrieden sind, können wir es ins Web pushen. Und das zeige ich Ihnen am Ende des Videos. Ich werde also tatsächlich noch einen Vorschlag machen und dann lassen wir es mit dem Bauen beginnen. Ich möchte sagen, das sieht ziemlich gut aus. Es gibt eine Sache, die ich vergessen habe zu erwähnen, nämlich dass ich möchte, dass das Produktvideo irgendwie rechtsbündig ist. Ich möchte, dass es auf den rechten 2/3 der Seite ist und der gesamte Text linksbündig sein kann. Und das soll nur zeigen, dass Sie Kontrolle über das Aussehen haben. Ich werde das also abschicken. Es wird mit einem neuen Plan zurückkommen und ich werde ihn akzeptieren und dann melde ich mich bei Ihnen, wenn wir unsere erste Iteration dieser Website fertig haben. Und übrigens, jetzt, da ich den Plan akzeptiert habe, habe ich ihn in den Bypass-Berechtigungsmodus versetzt, damit er einfach weiterlaufen kann, ohne ständig anzuhalten, um mich zu fragen. Hier ist die To-Do-Liste, von der ich gesprochen habe. Es wird durchgehen und sicherstellen, dass all diese Punkte in Ordnung sind. In Ordnung, in wenigen Minuten kam es zurück und sagt: Wie Sie sehen können, ist die Website unter localhost live. Öffnen Sie sie im Browser und schauen Sie sie sich an. Lassen Sie mich das also öffnen und wir werden sehen, was wir bekommen haben. Sie haben gerade das Laden von Obsidian gesehen. Wir haben Obsidian Vortex. Es sieht bisher wirklich sauber aus. Sehen wir mal, was passiert, wenn ich anfange, nach unten zu scrollen. Wir sehen, wie der Mixer anfängt zu erscheinen. Schön. Und wenn ich weiter scrolle, haben wir wir haben keinen weiteren Mixer gebaut. Wir haben eine Naturgewalt entwickelt, die alles zu nichts reduziert, in absoluter Stille. Wenn ich weiter scrolle, sehen wir, dass die Früchte anfangen zu erscheinen. Wir haben also die Obsidian Vortex Maschine aus luft- und raumfahrttauglichem Edelstahl, bla bla bla. Es gibt auch Text im Hintergrund, wie ich glaube, er sagt: Vernichte alles. Das ist also ziemlich cool. Wir haben einen bürstenlosen Motor. Wir haben ein Titan-Klingen-Array. Das kommt also tatsächlich ein wenig spät herein, wie Sie sehen können. Wenn ich scrolle, kommt es etwas spät. Dieses kommt durch. Und dann haben wir diese Statistiken, die hochkommen. Wirklich schön. Und dann haben wir den letzten Mixer, den Sie jemals besitzen werden. Und dann sollte ich hier den CTA haben: Besitze die Macht. Vorbestellen Sie den Obsidian Vortex. Denken wir also einfach darüber nach. Ich habe einen Prompt fallen gelassen, der sagte: "Hier ist ein Video. Erstellen Sie eine einseitige Landingpage." Das war im Grunde alles. Es hat die Fähigkeit genutzt und einen Plan für uns erstellt. Und dann hatten wir tatsächlich eine Website, auf der so ziemlich alles perfekt ist. Offensichtlich gibt es ein paar Dinge, die wir iterieren müssen, aber das ist super, super sauber und die Animation sieht meiner Meinung nach wirklich gut aus. Aber das größte Problem, das ich bemerke, ist hier, wenn wir zu Feature Nummer zwei scrollen, wir sehen es wirklich nicht, es sei denn, wir scrollen wieder nach unten. Was ich jetzt tun werde, ist, ich werde das hier löschen, weil wir bei 53% Kontext sind, also möchte ich mich nicht mit Kontextverlust herumschlagen. Und ich werde wieder in den Planmodus wechseln. In Ordnung. Ich habe die Blender-Website getestet und sie sieht wirklich gut aus. Ich habe jedoch ein Feedback. Wenn wir nach unten scrollen und die Funktionen sehen, erscheint Funktion Nummer zwei nicht, bis sie im Grunde vom Bildschirm weg ist. Wir müssen also, dass sie etwas früher sichtbar wird. Aber abgesehen davon funktionieren alle anderen Funktionen, Funktionen 1, 3 und 4 gut. Ich werde das also abschicken. Und während es einen Plan erstellt, möchte ich nur sicherstellen, dass das korrekt war. Funktion drei sieht gut aus. Und wir haben nicht einmal Funktion vier. Hoffentlich kann es das verstehen, den Code lesen und sehen, was los ist. Während dies einen Plan erstellt, dachte ich, ich würde kurz den Unterschied zwischen localhost und etwas tatsächlich im Web erklären. Denn wenn Sie noch nie eine Website in Cloud Code erstellt haben, wird dieser Teil vielleicht noch nicht klar. Wir haben also sozusagen zwei verschiedene Umgebungen. Wir haben unseren lokalen Computer und dann haben wir die eigentliche Cloud. Erinnern Sie sich, als Cloud Code sagte: "Hey, cool. Ihre Website ist live. Sie können sie auf localhost Port 51006 testen." Wenn Sie das jetzt in Ihren Browser eingeben würden, würden Sie wahrscheinlich nichts bekommen. Aber ich kann es eingeben, weil es lokal auf meiner Maschine lebt, weil Claude Code uns hilft, den gesamten tatsächlichen Code zu schreiben, denn das ist wirklich, was eine Website ist. Es ist ein Haufen Code. Ob das HTML, JS, CSS oder was auch immer ist, es ist Code. Und so bauen wir gerade Code und testen ihn. Und dann gehen wir hin und her auf unserem Computer, bis wir zufrieden sind. Und dann, wenn uns der Code gefällt, pushen wir ihn irgendwo in die Cloud, damit er tatsächlich von anderen Leuten angesehen werden kann. Ich werde diese Pipeline abdecken, sobald wir zu diesem Stadium im Video kommen. Aber ich dachte, ich würde dieses lokale Ding zuerst kurz ansprechen. In Ordnung. Sie können sehen, dass es mit einem Plan zurückgekommen ist, um das späte Erscheinen von Blender Feature Nummer zwei zu beheben. Ich werde das einfach akzeptieren. Okay. Das hat es sehr schnell gemacht. Ich werde auf diese Website klicken und wir werden sehen, ob diese Korrektur tatsächlich vorgenommen wurde. Wir haben Funktion eins. Wir haben Funktion zwei. Da haben wir es. Und wir haben Funktion drei. Und alles andere sieht immer noch intakt aus. Die gesamte Magie, die hier passiert, liegt wieder innerhalb der Fähigkeit, die ich erstellt habe. Es ist die Video-zu-Website-Fähigkeit. Wenn ich das öffne, ist das im Grunde nur eine Markdown-Datei und sie besagt: Wandle ein Video in eine Premium-Scroll-gesteuerte animierte Website um. Hier steckt also die ganze geheime Soße, wie es das tatsächlich tut. Ich weiß, dass dies eine ziemlich umfangreiche Fähigkeit ist, aber hey, ich meine, es scheint ziemlich gut zu funktionieren. Und was Sie jetzt tun können, ist, jedes Mal, wenn Sie diese Fähigkeit zum Erstellen von Websites verwenden, würden Sie einfach sagen: "Großartig. Hier ist, was ich Ihnen gesagt habe zu beheben. Hier ist, was ich mag. Hier ist, was ich nicht mag. Stellen Sie sicher, dass all das in der skill.md reflektiert wird." Im Grunde wird die Fähigkeit jedes Mal, wenn Sie eine Website mit dieser Fähigkeit erstellen, besser und besser und besser. Jetzt haben wir unseren Code, den wir mögen, und es ist Zeit, ihn hierher zu pushen. Was wir tun müssen, ist, wir werden eine Kombination aus GitHub und Versel verwenden. GitHub erlaubt uns im Grunde nur, Code zu speichern. Im Grunde genauso, wie Sie vielleicht eine Word-Datei lokal auf Ihrem Computer hätten. Wenn Sie möchten, dass andere Leute sie verwenden können, müssten Sie sie auf OneDrive oder, wissen Sie, Google Docs legen, damit andere Leute die verschiedenen Versionen einsehen und daran zusammenarbeiten können. Und dann synchronisieren wir Versell mit unserem GitHub, damit wir diesen Code tatsächlich auf eine echte URL bereitstellen können, damit es nicht mehr nur eine lokale URL ist. Das Erste, was Sie tun möchten, ist, zu GitHub zu gehen und ein Konto zu erstellen. Es ist komplett kostenlos und existiert schon seit vielen, vielen Jahren. Es ist ein Industriestandard für Code. Und dann das Zweite, was Sie tun werden, ist, zu Versell zu gehen und auch hier ein Konto zu erstellen. Was cool ist, ist, dass wir im Grunde Cloud Code diese gesamte Pipeline für uns machen lassen können. Es ist super, super einfach. Wenn Sie also noch nicht Ihren Cloud Code mit Ihrem GitHub verbunden haben, würden Sie einfach hierher kommen, vielleicht die Konversation löschen und sagen: "Helfen Sie mir, mich mit GitHub zu verbinden, damit ich diese Codebasis in mein GitHub-Repository pushen kann." Und was es tun kann, ist, es kann Ihnen helfen, die CLI zur Authentifizierung zu verwenden. Das bedeutet, es wird einfach ein Pop-up für Sie geben und alles, was Sie tun müssen, ist sich anzumelden. Es ist super einfach. Hier sehen Sie, dass es heißt, Sie sind bereits mit GitHub als Nate Herki authentifiziert. Schön. Der nächste Schritt ist zu sagen: Großartig. Erstellen wir jetzt ein neues GitHub-Repository für mich. Sie können es einfach blender-website nennen und die Codebasis für die Blender-Website in dieses Repository pushen. Da wir etwas zu GitHub pushen und es ins Web kommt, sollten Sie hier vorsichtig sein, wenn Sie API-Schlüssel oder etwas Sensibles darin hätten. In diesem Fall haben wir buchstäblich nichts zu befürchten, aber das ist etwas, das man im Hinterkopf behalten sollte. In Ordnung, schön. Ihre Blender-Website ist jetzt auf GitHub live. Hier ist alles, was es getan hat. Und es sagt auch, wenn Sie das mit Versel für automatische Deployments verbinden möchten, können Sie das Repo vom Versell-Dashboard importieren. Lassen Sie uns also zuerst das GitHub-Repo überprüfen. Wir können sehen, dass dies eingerichtet wurde. Wir haben einen Commit, den wir gerade gemacht haben. Und das ist wichtig, denn jedes Mal, wenn wir eine Änderung vornehmen, können wir genau sehen, was mit dem Code passiert ist. Was Sie bemerken werden, ist, dass dies ein öffentliches Repository ist. Sie könnten in die Einstellungen gehen und es privat machen, und es würde trotzdem automatisch zu Versell deployen, kein Problem. Und jetzt, wo wir in Versell sind, muss ich nur hier zu Projekte gehen und auf Neu hinzufügen klicken. Und dann werden Sie feststellen, dass hier, weil ich mich mit meinem GitHub bei Versell angemeldet habe, steht GitHub-Repository importieren. Und alles, was ich tun kann, ist hier Blender-Seite auszuwählen. Auf Import klicken. Und das wird diese Website automatisch für uns erstellen. Ich werde also auf Deploy klicken. Und dann lassen wir das hochfahren. Und ich zeige Ihnen, dass dies jetzt im Web zugänglich ist. Großartig. Sie haben also gerade ein neues Projekt auf Nate Her Projekte bereitgestellt. Fahren wir fort zum Dashboard. In Ordnung. Etwas Interessantes ist passiert, und ich bin froh, dass es passiert ist, damit ich Ihnen zeigen kann, wie man es behebt. Unser Projekt ist jetzt hier auf Versell und wenn ich auf die Domain klicke, scheint alles zu laden, richtig? Richtig. Wir haben Obsidian Vortex. Wir sehen die Animationen durchkommen. Aber wenn ich anfange zu scrollen, wo ist unser Mixer? Wir bekommen immer noch den Text, der durchkommt. Wir bekommen immer noch all diese Animationen, die wir gesucht haben, aber unser Mixer ist nicht da. Was passiert ist, war, dass es beim Pushen dieses GitHub-Repos die Bilder ausgeschlossen hat. Wenn ich auf die linke Seite komme und wir zu unserem Blender-Projekt gehen und die Bilder öffnen, sehen Sie, dass all diese ausgegraut waren, was im Grunde bedeutet, dass alles in diesem Ordner nach GitHub gepusht wurde, außer den Bildern, was bedeutet, dass, wenn die Website versucht, sie zu rendern, keine Bilder zum Rendern vorhanden sind. Also habe ich gesagt: Okay, das hat nicht funktioniert. Sie müssen die Bilder im Code haben, damit er sie tatsächlich verwenden kann, sonst verschwindet die Animation einfach. Also habe ich es angewiesen, diese Änderungen zu aktualisieren und einen weiteren Push zu machen. Es hat das behoben und dann kam es im Grunde zurück und sagte: Okay, ich habe das getan, jetzt sind die Bilder im GitHub-Repo. Wenn ich zum GitHub-Repo gehe, sehen Sie, dass wir jetzt zwei Commits haben. Wenn ich auf die Commits klicke, sehen Sie schön, der zweite hat Animationsbilder für die Verscell-Bereitstellung hinzugefügt. Und dann in Versell, wenn ich zu Deployments gehe, sehen Sie, dass wir zwei hatten. Wir hatten dieses aktuelle, zu dem ich zurückgerollt bin, damit ich es Ihnen zeigen konnte, und dann haben wir dieses Hauptproduktions-Deployment, zu dem ich gehen könnte, und wir könnten es tatsächlich hochrollen. Ich könnte also auf diese drei Punkte klicken und dann auf Redeploy klicken. Und jetzt, da ich neu bereitgestellt habe, wenn ich diese Blender-Website noch einmal öffne und wir nach unten gehen und anfangen zu scrollen, können wir jetzt sehen, dass die Bilder gerendert werden und wir immer noch all die Animationen haben, die wir erstellt haben. Und jetzt ist die Website tatsächlich bereit. Und nur um Ihnen zu beweisen, dass dies wirklich in der Cloud ist, können Sie auf meinem Handy sehen, dass wir die Blender-Website mit den Animationen haben. Offensichtlich wurde dies noch nicht für Mobilgeräte optimiert, was der nächste Schritt wäre, aber Sie können sehen, dass die Animationen immer noch da sind. Und wenn es noch nicht ganz geklappt hat, hier ist der Vorteil, dies so zu tun. Jetzt, da wir unsere Website im Web haben, die vielleicht Kunden ansehen und mit der sie interagieren würden, was, wenn wir etwas wie die Farben ändern wollten oder vielleicht sogar die Animation ändern wollten, wir wollen nicht in Echtzeit ändern, was tatsächlich da draußen in der Produktion ist. Wir können also den Code ändern, wir können auf localhost testen, und dann, wenn wir damit zufrieden sind, pushen wir ihn zu GitHub und dann synchronisiert er sich automatisch mit unserer echten Domain. So haben wir im Grunde eine Testumgebung, eine Staging-Umgebung und dann unsere tatsächliche Produktionswebsite. Und was Sie gesehen haben, ist, dass dies buchstäblich etwa 30 Minuten gedauert hat. Und offensichtlich, wenn ich weitere 30 Minuten investiere, könnte die Website fünfmal besser sein. Und das ist verrückt, weil es so viele Unternehmen gibt, ob sie lokal in Ihrer Nähe sind oder Sie online suchen, die schreckliche Websites haben, weil sie sie nicht priorisieren wollen oder nicht Zehntausende von Dollar für eine neue Website an eine Webdesign-Agentur zahlen wollen. Das könnte auch potenziell Monate dauern. Währenddessen könnten Sie potenzielle Kunden finden. Sie könnten eine Nische finden. Nehmen wir an, Sie möchten Websites für Mixer-Unternehmen entwerfen. Sie könnten eine Demo-Website wie diese erstellen, richtig? Sie könnten so etwas an einem Tag erstellen, wenn Sie sich hinsetzen und es wirklich, wirklich gut machen wollen. Und dann senden Sie ihnen den Link per E-Mail oder gehen Sie hinein und zeigen Sie ihnen und sagen Sie: Ich kann das für Sie mit Ihren Produkten, mit Ihrem Text erstellen und ich kann es Ihnen in 2 Tagen liefern und ich kann Ihnen 5.000 bis 10.000 Dollar berechnen, was viel billiger ist, als sie es vielleicht bei anderen Anbietern bekommen. Und dann natürlich könnten Sie monatliches Hosting anbieten, Sie könnten Wartung haben, was wiederkehrende Einnahmen sind. Aber es stellt auch sicher, dass sie, wenn sie andere Funktionen benötigen, diesen Code beheben und alles hochladen können, weil Sie verstehen, wie das alles funktioniert. Vielleicht gefällt Ihnen der Stil nicht, wie ich das mit dem unterschiedlichen Text mache, der durchkommt, und vielleicht mit diesem Animations-Overlay-Ding. Dann aktualisieren Sie einfach die Fähigkeit, damit Ihr Cloud Code das nicht tatsächlich tut. Und sobald Sie jetzt tatsächlich verstehen, wie wir Videos in eine Reihe von Bildern verwandeln und sie dann durchscrollen lassen, werden Sie so viel mehr tun können, weil es nicht nur um rotierende Produkte oder Röntgenblick gehen muss. Es können Wörter sein. Es kann gehen. Es kann sein, was auch immer Sie wollen. Sie können auch diese Website awards mit drei Ws für einige Inspirationen zu Animationen besuchen. Es ist super, super cool, was die Leute hier tun. Aber das war's für heute. Wenn Sie es lieben, über solche Dinge zu reden, dann schauen Sie sich unbedingt meine Plus-Community an. Der Link dazu ist unten in der Beschreibung. Wir haben eine großartige Community von über 3.000 Mitgliedern, die jeden Tag mit KI aufbauen, Unternehmen mit KI aufbauen. Und wenn Sie ähnliche Ziele haben, ist das ein großartiger Ort. Aber auf jeden Fall, wenn Ihnen das Video gefallen hat oder Sie etwas Neues gelernt haben, geben Sie ihm bitte einen Daumen hoch. Das hilft mir auf jeden Fall sehr. Und wie immer schätze ich es, dass Sie es bis zum Ende des Videos geschafft haben. Wir sehen uns beim nächsten Mal. Danke an alle.