Vibe Coding zur Entwicklung echter Anwendungen mit KI: Eine Reise ohne Code mit Bolt. new

1. Einführung in den Kurs: In diesem Kurs werden wir darüber sprechen, wie Sie mithilfe von KI produktionstaugliche Anwendungen erstellen können , ohne eine einzige Codezeile schreiben zu müssen . Nun, Sie müssen nicht einmal Programmierkenntnisse haben. Das werden wir lernen und wir werden praktisch lernen. Ich bin einfach und freue mich sehr, Ihr Leitfaden in diesem praxisnahen Kurs zu sein , in dem wir untersuchen, wie künstliche Intelligenz Ihnen helfen kann Ihre App-Ideen zum Leben zu erwecken , ohne eine einzige Codezeile schreiben In diesem speziellen Kurs tauchen wir in eine erstaunliche Software namens Bolt Dot N ein. Dabei handelt es sich um ein hochmodernes Tool, mit dem Sie voll funktionsfähige Anwendungen erstellen können, Sie voll funktionsfähige Anwendungen erstellen indem Sie einfach beschreiben, was Sie wollen Nun, ganz gleich, ob Sie ein neugieriger Anfänger, ein technisch versierter Gründer oder einfach jemand sind , der Ihre Ideen schnell prototypisieren möchte Ihre Ideen schnell prototypisieren , damit Sie sie validieren können. Dieser Kurs hilft Ihnen zu verstehen , wie Sie das einfacher und schneller machen können und wie es zugänglicher ist als je zuvor. So läuft der Kurs ab. Also werden wir zuerst verstehen, was Bolt Dot Nu ist. Was ist dieses EI-Tool und wie funktioniert es? Wir richten unseren Account-Workspace und beginnen dann mit dem Schreiben einer Bewerbung. Also werden wir die Software Bolt Dot Neu verwenden , um eine Anwendung für uns zu generieren. Wir werden die Benutzeroberfläche und alle Einzelheiten verstehen , die für die Erstellung einer voll funktionsfähigen Anwendung in Produktionsqualität erforderlich sind für die Erstellung einer voll funktionsfähigen Anwendung in Produktionsqualität erforderlich einer voll funktionsfähigen Anwendung in Produktionsqualität Und dann werden wir unser zweites Projekt erstellen, das noch komplexer sein wird als das erste, und hier werden wir die wahre Leistungsfähigkeit solcher KI-Tools verstehen Ich werde nicht nur Produkte praxisnah entwickeln und Ihnen präsentieren, sondern ich werde auch hervorheben, wie Sie Ihr Produkt verfeinern können, wie Sie Verbesserungen vornehmen können, wie Sie Designs iterieren können und wie Sie Fehler in Ihrer Anwendung beheben können das alles auf eine ganz praktische Art und Weise , bei der wir Fehler reparieren, das Layout verbessern und unserer Anwendung neue Funktionen hinzufügen werden Layout verbessern und unserer Anwendung neue Funktionen hinzufügen Wann immer Sie etwas Neues entwickeln, ist es wirklich wichtig, dass Sie es irgendwo im Internet bereitstellen , damit die Welt darauf zugreifen kann, oder? Das wird also auch in dem Kurs behandelt , in dem wir die Hilfe von Bolt Dot New nutzen von Bolt Dot New und unserer Anwendung eine Datenbank hinzufügen, und wir werden sie auch auf einem Live-Server bereitstellen lassen, sodass die Welt darauf zugreifen kann. Am Ende des Kurses werden nicht nur mehrere Apps funktionieren, sondern Sie werden auch das Selbstvertrauen haben, Ihre Ideen blitzschnell weiterzuentwickeln, zu testen und auf den Markt zu bringen. Und dieser Kurs ist perfekt für Anfänger ohne Programmierkenntnisse. Auch wenn Sie Programmierkenntnisse haben, sind Sie willkommen. werden Sie lernen, wie das Codieren heutzutage viel schneller ist Mit Hilfe dieser KI-Tools werden Sie lernen, wie das Codieren heutzutage viel schneller ist. Anfänger ohne Programmierkenntnisse sind aber auch willkommene Unternehmer und Entwickler, die ihre Ideen prototypisieren möchten. Dieser Kurs ist auch für sie. Dieser Kurs richtet sich auch an alle, die neugierig sind, wie KI für bauproduktionstaugliche Anwendungen eingesetzt werden kann . Keine technischen Fähigkeiten, kein Problem. Alles, was Sie brauchen, ist eine Idee und diese tolle Software, die ganz neu ist , wird Ihnen helfen, den Rest zu erledigen. Lassen Sie uns also anfangen und beobachten, wie Ihre Ideen mit Hilfe von KI zum Leben erweckt werden. 2. Was ist Bolt.new?: Fangen wir also an, über Bolt zu sprechen. Was ist Bolt? Bolt EI ist also eine innovative EI-gestützte Webentwicklungsplattform , mit der Benutzer Full-Stack-Webanwendungen direkt in ihrem Webbrowser oder über den Webbrowser erstellen ausführen und bearbeiten und sogar bereitstellen Full-Stack-Webanwendungen direkt in , ausführen und bearbeiten und sogar bereitstellen können. Anstatt Code Zeile für Zeile zu schreiben, beschreiben Sie einfach, was Sie in natürlicher Sprache erstellen möchten , und dieses Tool , Bolt AI, generiert den entsprechenden Code. Okay. Also hier der Wortkopf zu deiner Lieblings-Suchmaschine. Also habe ich Google geöffnet. Sie können jede Suchmaschine Ihrer Wahl öffnen, und Sie können einfach hier nach Bolt suchen. Wenn Sie jetzt nach Bolt suchen, wird die erste Website, die Sie hier sehen , wahrscheinlich fett gedruckt sein. Okay? Sie können also darauf klicken und zu dieser speziellen Website hier kommen . Das ist also die offizielle Website. Oder wenn Sie dies aus irgendeinem Grund nicht als erstes Ergebnis sehen, gerne ein wenig nach unten scrollen. Okay? Es könnte das zweite oder dritte Ergebnis für dich sein. Oder Sie können dasselbe auch direkt eingeben. So weit, so gut, okay? Also, hier, du kannst diese Pointe hier drüben sehen. Was möchtest du bauen? Erstellen Sie atemberaubende Apps und Websites, indem Sie mit KI chatten. Ja, genau das macht dieses Tool. Es nutzt künstliche Intelligenz und Algorithmen für maschinelles Lernen in verschiedenen Entwicklungsphasen und erstellt ein vollwertiges Produkt für Sie Und mit diesem Produkt können Sie sogar eine Verbindung zur Datenbank herstellen. Sie können es im Internet bereitstellen und für jeden zugänglich machen . Wenn Sie sich also auf dieser speziellen Website befinden, können Sie diese Aufforderung einfach hier eingeben. Sie können sehen, Sie können hier klicken. Erstellen Sie eine Finanz-App. Sobald du das siehst, okay, es wird dich durch diese Chat-Seite hier führen. Also haben wir uns noch nicht angemeldet oder etwas unternommen. Wir haben einfach auf „ Eine neue Finanz-App erstellen“ geklickt, und Sie können sehen, dass sie mit dem Import des Projekts in Fettschrift begonnen hat dem Import des Projekts in Fettschrift und dass sie sagt, dass es einen Moment schaffen wird, und Sie können hier sehen, dass diese Finanz-App importiert (NPM-Installation), sie führt diese Okay, es hat diese Anwendung für uns eingerichtet , ohne dass wir zu viel über die Anwendung erzählen Und Sie können sehen, dass dies eine grundlegende Anwendung ist, die bereits mit Bolt erstellt wurde. Okay? Also diese Anwendung muss bereits mit Bolt erstellt worden sein, und genau das sehen Sie hier. Wenn Sie jetzt wieder auf die Homepage gehen, gibt es hier einige Optionen , Sie können sich das ansehen. Sie können sogar Dinge von Figma oder Github importieren , wenn Sie möchten, und sie hier erstellen. Okay? Und hier oben sehen Sie die Option Community Enterprise, und dann haben Sie eine Preisoption. Wenn wir jetzt über die Preisgestaltung sprechen, werden wir natürlich die kostenlose Version nutzen, okay? Ich glaube nicht, dass Sie eine kostenpflichtige Version benötigen werden, aber wenn Sie ernsthaft daran arbeiten oder ernsthaft daran arbeiten, ernsthaft mit diesem Tool arbeiten, dann können Sie in Zukunft auf arbeiten, ernsthaft mit diesem Tool arbeiten, Pro upgraden und Sie können die Vorteile hier vergleichen, okay? Aber zum Lernen, Experimentieren, Bauen von Projekten, okay, solange wir innerhalb der Minuten sind, tut mir leid, nicht Minuten Solange wir hier innerhalb der Grenzwerte sind, okay, musst du ein Upgrade durchführen Also eine kostenlose Version sollte hier in Ordnung sein. Jetzt kannst du hier in der kostenlosen Version sehen, du bekommst öffentliche und private Projekte, okay, was bedeutet, dass deine Projekte für dich privat sein können und nicht mit irgendjemandem geteilt oder mit niemandem gesehen werden können. Du bekommst 1 Million Tokens pro Monat, okay? Hier können Sie also sehen, dass Sie in der Pro-Version, wie beim 20-Dollar-Monatsplan, 10 Millionen Token pro Monat erhalten Hier bekommst du 1 Million Tokens pro Monat. Was sind Tokens? kommen wir gleich zurück, und Sie erhalten das als Limit-Deal. Okay, das ist das Tageslimit für die Tokens. Lassen Sie uns also über Tokens sprechen. Nun, was sind Tokens? Du kannst dir Token im Grunde als Währung vorstellen, okay? Oder lassen Sie mich hier zu den Ressourcen übergehen. Ich gehe zum Docs and Health Center. Okay. Und hier auf der linken Seite, das ist also die offizielle Dokumentation von Bold. Wenn du hier auf der linken Seite nach unten scrollst, siehst du etwas, das Tokens genannt wird. Wählen Sie das aus und Sie können es hier sehen. Okay, Tokens sind kleine Textstücke, okay? Okay, ich liebe Katzen und dann Ausrufezeichen. Okay, das sind alles Tokens hier drüben. Also wenn du das zählst, eins, zwei, drei und vier. Okay, das werden vier Tokens. Also Sprachlernmodelle wie LLMs, sie verarbeiten Text als Token, und das ist im Grunde die Einheit hier drüben oder die Währung, mit der Sie bezahlen Okay? Also, wenn Sie viel Input geben, wenn Sie viel entwickeln, wenn Sie viel über den Code iterieren und Ihre Nutzung hoch ist, dann werden Sie natürlich eine dann werden Sie natürlich große Anzahl von Tokens verwenden Wenn Sie eine große Anzahl von Tokens erstellen, wenn Sie eine große Anzahl von Tokens verwenden, werden Sie die Provotion benötigen Okay? Das ist es, worauf ich jetzt hinauswill. Okay? Solange Ihre Nutzung innerhalb von 1 Million Tokens pro Monat liegt, können Sie sich für den kostenlosen Tarif entscheiden. Okay. Also das ist etwas , das du verstehen musst. Sie können hier sehen, dass eine einfache Funktion 5.200 Token verwendet Ein Medium-Skript wird so viel Token verwenden. Eine vollständige Anwendung wird so viel Token verwenden. Und hier können Sie sehen, ob Sie ein LLM über einen kostenpflichtigen Dienst wie bold nutzen ein LLM über einen kostenpflichtigen Dienst wie bold Kosten werden oft auf der Grundlage der Anzahl der verarbeiteten Token berechnet auf der Grundlage der Anzahl der verarbeiteten Token Okay. Weniger Tokens bedeuten geringere Kosten. Also im Grunde ist es eine Einheit , es ist wie deine Währung, du kannst es dir vorstellen. Also hier, das ist Token, und das ist die offizielle Dokumentation hier drüben. Ich würde Sie daher sehr ermutigen, mit dieser Dokumentation herumzuspielen , wenn Sie in Zukunft Hilfe benötigen . Aber ja, vorerst ist es wichtig, dass du verstehst, was Tokens sind. Ordnung. Also hier geht es um Bolt. Das ist das Produkt, okay? Sie können auf diese verschiedenen Optionen klicken. Es kann Ihnen sogar helfen, eine mobile App zu erstellen. Sie können also auf diese verschiedenen Optionen klicken und dieses Produkt hautnah erkunden. Ich hoffe, das war bisher nützlich. 3. Ihre erste App mit KI und Bolt.new: Jetzt ist es an der Zeit, dass wir ein bisschen selbst Hand anlegen, unseren Arbeitsbereich einrichten und sogar eine erste Anwendung erstellen, und sogar eine erste Anwendung erstellen uns das Gefühl von EI vermittelt Okay? Also werde ich auf Get Started klicken. Wenn Sie bereits ein Konto haben, können Sie auf Anmelden klicken und Sie werden zur Anmeldeseite weitergeleitet, okay. Aber ich werde all diese Schritte für neue Benutzer befolgen , sodass Sie, wenn Sie mit dieser Einrichtung noch nicht vertraut sind , den Anweisungen folgen. Also sage ich, fang an. Du siehst diese Seite. Sie müssen sich also mit Google Github, E-Mail und Passwort anmelden , sodass Sie je nach Präferenz die entsprechende Option auswählen können , okay, und ein Konto erstellen. Denken Sie jetzt daran, dass Sie, wenn Sie sich mit E-Mail und Passwort anmelden , auch Ihre E-Mail-Adresse verifizieren müssen . Das ist also ein Schritt. Also werde ich hier schnell auf Mit Google anmelden klicken . Sie können also hier sehen, dass ich mich mit Google authentifiziert habe und ich wurde auf dieselbe Webseite weitergeleitet, die nichts anderes als die Startseite hier drüben ist, okay? Und du kannst hier unten sehen, okay, ich habe diese Seitenleiste, okay, die wir später untersuchen können Also, um die Webanwendung zu erstellen, werde ich hier meine Eingaben machen, okay? Und die Anwendung, die ich erstellen werde, kann zuallererst jede beliebige Anwendung sein, aber die Anwendung, die ich ausgewählt habe, ist ein zufälliger inspirierender Codegenerator, oder? Und ich beschreibe meine Anwendung hier, okay? Also erzähle ich das KI-Modell oder Boulg Dot New hier drüben. Ich sage Ihnen, erstellen Sie eine Webseite mit einer zentralen Schaltfläche, auf der steht, dass Sie einen neuen Code generieren Wenn Sie darauf klicken, wird unter der Schaltfläche ein zufälliger inspirierender Code angezeigt . Das ist es. Das ist eine sehr einfache Anwendung. Es zeigt nur zufällige Codes an. Okay? Jetzt kann ich schnell sagen, geh hier rüber, okay? Oder wenn Sie sich nicht sicher sind und diese spezielle Aufforderung ein wenig verbessern möchten diese spezielle Aufforderung ein wenig verbessern , dann gibt es diese Schaltfläche. Okay, Sie können diese Schaltfläche sehen, die Eingabeaufforderung verbessern, und es gibt eine Option zum Hochladen der Dateien als. Wenn Sie also zusätzlichen Kontext angeben möchten, können Sie auch Dateien hochladen. Aber ich würde sagen, die Aufforderung verbessern, okay? Und sobald Sie auf „Die Eingabeaufforderung verbessern“ klicken, wird diese Eingabeaufforderung verbessert detaillierter gemacht. Sie können es also hier sehen oder Sie können es sich durchlesen. Okay. Du kannst es dir durchlesen. Erstellen Sie eine ansprechende Webseite mit dem folgenden Design: ein sauberes, zentriertes Layout mit markanter Schaltfläche. Es enthält diesen Text, verwendet ein ansprechendes Farbschema und ein modernes Design hat Over - und Klickeffekte auf die Interaktion, die auf Desktop-Computern und Mobilgeräten leicht angeklickt werden kann Wenn darauf geklickt wird, sodass Sie es hier sehen können, kann ich den Code aus einem vordefinierten Array auf einer EPI abrufen, den Code unter der Schaltfläche anzeigen, und Sie können hier sehen, noch ein paar weitere Hinweise und Styling-Anforderungen Also habe ich gerade zwei Zeilen hinzugefügt, und hier wurde diese Eingabeaufforderung erweitert, um detailliertere Informationen hinzuzufügen Jetzt können Sie diese Informationen nach Belieben anpassen, wenn Sie nichts wollen, zum Beispiel, wenn Sie diese Animation nicht wollen, damit Sie diese Zeile loswerden können Wenn Sie etwas anderes hinzufügen möchten, können Sie es hier hinzufügen. Sie können also die Eingabeaufforderung verbessern, und je besser Ihre Eingaben oder der geschriebene Text oder die Beschreibung der gewünschten Anwendung für das KI-Modell sind , desto besser wird die Antwort sein. Das ist also sehr aufwändig Okay, es beschreibt alles und das ist der Vorteil, und das ist der Vorteil diese erweiterte Eingabeaufforderungsoption hier verwenden. Okay? Sie können sehen, dass die Bestätigungsaufforderung verbessert wurde. Also werde ich sagen, geh hier rüber. Und Sie können sehen, dass Sie auf diese Art von Seite weitergeleitet werden, die, Sie wissen schon , im Grunde damit beginnen wird, daran zu arbeiten. Und hier auf der rechten Seite werden Sie die Vorschau Ihrer Bewerbung sehen , richtig? Sie können also sehen, dass es denkt, ich denke 8 Sekunden lang nach. Okay? Und wenn du den Denkprozess sehen willst, kannst du darauf klicken. Okay. Also hier ist der Denkprozess. Also hat es das erstellt und generiert jetzt den gesamten Code. Sie können also sehen, dass es das gesamte Projekt für Sie einrichtet. Es aktualisiert diese Datei für Sie. Es schreibt im Wesentlichen Code für Sie. Also werden wir eine Weile warten. Bis der gesamte Codegenerierungsprozess abgeschlossen ist. Okay? Wenn Sie nun auch den Code sehen möchten, oben eine Option, nämlich die Code-Schaltfläche . Hier sehen Sie der gesamte Code generiert und aktualisiert wird. Aber das überspringe ich einfach. Ich wähle einfach die Vorschau aus , weil ich KI die Arbeit für mich erledigen lasse. Okay, wir werden eine Weile warten, bis gesamte Vorgang abgeschlossen ist. Es wird ein paar Sekunden oder Minuten dauern. Das ging also schnell. Es hat diese Art von Anwendung generiert. Sie können es hier sehen. Tägliche Inspiration, entdecken Sie Weisheit, die Motivation weckt und Ihr Potenzial mit jedem Klick entfacht Interessant. Klicken Sie auf die Schaltfläche oben, um Ihren ersten inspirierenden Code anzuzeigen Großartig. Also hier kannst du diesen Button sehen. Es hat eine gute Animation und einen guten Hover-Effekt. Du kannst sehen. Haben wir das entworfen? Haben wir das entwickelt? Absolut, nein. Okay? Es wird alles generiert von. Wenn du darauf klickst, wird ein neuer Code für dich generiert. Du kannst sehen, ob du an etwas arbeitest, das dir wirklich wichtig ist, du musst dich nicht drängen lassen. Die Vision zieht dich an. Das ist ein Code von Steve Jobs. Interessant. Okay. Also musste ich nicht einmal die Liste der Codes und all das geben. Es hat gerade die Arbeit für mich erledigt. Das kannst du sehen. Dies ist eine sehr einfache Anwendung , die sehr ansehnlich ist Es ist, als wäre es eine vorzeigbare Anwendung. Sie können sie in der Produktion einsetzen und sie als einfache Anwendung verwenden , die Sie mit KI in kaum 10 Minuten oder mit KI in 5 Minuten erstellt haben , die Sie mit KI in kaum 10 Minuten oder mit KI in 5 Minuten erstellt 10 Minuten oder mit KI in 5 Minuten Ich hoffe, das gibt Ihnen ein Gefühl dafür , wie mächtig EI sein kann. Also diese Plattform, das können Sie hier sehen, sie hat das aufgrund Ihrer Eingabe gedacht Zunächst haben wir diesen ausführlichen Input nicht gegeben. Wir haben nur zwei Zeilen gegeben. Wir haben Air gebeten, die Eingabeaufforderung zu verbessern. Es hat es auf diese Weise verbessert, okay? Und dann dachte es hier 8 Sekunden lang nach. Du kannst den Denkprozess genauso durchgehen wie zu dem, was es gedacht hat, hier drüben. Wenn ich darauf klicke, werde ich es einfach zusammenklappen. Dann wiederholte es im Grunde das, was es verstanden hatte. Also hat es das wiederholt, okay? Und es hat einen Plan erstellt und ihn hier veröffentlicht. Und dann hat es angefangen, die Anwendung zu entwickeln, und Sie können die Antwort hier sehen. Okay? Also ja, das ist deine erste Anwendung, die mit KI generiert wurde. Ich hoffe, das war großartig und ich hoffe, Sie können mitmachen. 4. Benutzeroberfläche und Funktionen verstehen: Jetzt ist es an der Zeit, die Benutzeroberfläche durchzugehen und die verschiedenen Optionen zu verstehen , die wir hier sehen. Also hier auf der linken Seite ist es natürlich ziemlich offensichtlich, dass du den Chat siehst und was auch immer du hier hinzufügst, welche Iterationen du auch machst, was auch immer dir der Bolzen sagt, du siehst alles hier drüben und den gesamten Fortschritt Jetzt, sofort auf der rechten Seite. Also das war die linke Seite, okay? Und das ist die rechte Seite. Auf der rechten Seite sehen Sie das Fenster, in dem eine Vorschau aktiviert ist. Und was auch immer von EI entwickelt wird, das ist etwas, das Sie hier im Fenster sehen , das Leben. Wenn Sie nun den Quellcode sehen möchten, haben Sie oben diese Code-Schaltfläche , auf die Sie klicken können darauf klicken, werden Sie zu diesem Quellcode-Fenster weitergeleitet , in dem Sie den gesamten Quellcode der Anwendung sehen können. Nun, das ist genau wie der Quellcode , den Sie auf Ihrem lokalen Computer sehen würden. Nun, wenn Sie sich mit Technik auskennen, würden Sie den gesamten Quellcode verstehen , der hier geschrieben ist. Okay? Wenn Sie also auf den Quellcode zugreifen möchten, können Sie den Quellcode hier überprüfen. Ordnung. Also hier geht es darum. Sie können sogar auf diese Weise in den Vollbildmodus wechseln , indem Sie hier auf diese Option klicken. Sie können auch nach Dateien suchen. In Ordnung. Also hier geht es um das Codefenster. Hier haben Sie auch Zugriff auf das Terminal. Sie können also hier sehen, dass Sie Zugriff auf Ihr Terminal haben. Sie können also grundsätzlich, wenn Sie etwas manuell erstellen oder bereitstellen möchten , all diese Dinge auch vom Terminal aus erledigen. Aber wir werden zum Vorschaufenster wechseln. Und hier haben Sie auf der rechten Seite einige Optionen, sodass Sie diese geöffnete Vorschau in einem separaten Tab sehen können. Du kannst also hier drüben klicken und es wird dich fragen, ob du deine Vorschau sehen möchtest Du musst diesen Tab mit dem Projekt verbinden, okay? Sie können also sagen , mit dem Projekt verbinden, und es wird Ihnen die Vorschau des gesamten Projekts hier angezeigt . Okay, was auch immer Sie dort sehen , Sie werden es hier sehen. Du kannst so etwas sehen. Du frischst den Mantel ständig auf, so. Ordnung. Das ist also der Vorschau-Tab, und dann haben Sie diesen responsiven Modus. Dies ist also im Grunde ein Schalter, mit dem Sie zwischen der mobilen Ansicht und der Desktop-Ansicht Also hier kannst du sehen, dass das auf dem iPhone 16 ist. So wird es also auf dem iPhone 16 aussehen. Ordnung, iPhone 16, Pixel neun, Galaxy 24. Okay, du kannst eine Grube vergrößern, wenn du willst. Also iPhone 16, ich zoome 200% rein. Okay. Und so werden Sie es auf Ihrem Handy sehen, wie auf dem iPhone. Also werde ich hier einfach wieder zum Desktop wechseln. Hier haben Sie den Inspektor. Sie können also hier drüben klicken und Sie können im Grunde hier drüben nachschauen. Ich habe das ausgewählt und Sie können sehen hier im Chat ausgewählt wurde. Okay? Und du kannst hier über dieses Element chatten. Das ist etwas, was du tun kannst. Also werde ich das einfach klären. Okay. Sie können damit auch im Vollbildmodus arbeiten. Dies sind also einige Optionen , die Sie kennen sollten. Oben haben Sie Optionen zum Exportieren. Sie können den Quellcode herunterladen und in Stack-Platten öffnen. Okay? Aber wenn Sie lokal weiterentwickeln möchten, können Sie es herunterladen. Es gibt einen Integrations-Tab, sodass Bolt diese Integrationen derzeit unterstützt Stripe, Super Base, steh auf. Möglicherweise werden Sie später weitere Integrationen sehen. Sie fügen ständig Integrationen hinzu, sodass Sie vielleicht mehr sehen werden. Aber im Moment, während ich das aufnehme, sehe ich ungefähr drei Integrationen. Alles klar? Jetzt sehen Sie hier auf der linken Seite diese Option. Also, wenn du daran festhältst, öffnet sich das, oder? Also hast du deine Chats. Das ist also der Chat , den wir heute machen, oder die Chat-Anwendung, tut mir leid, nicht die Chat-Anwendung, sondern die Codegenerator-Anwendung, die wir erstellt haben. Es besteht die Möglichkeit, kostenlose Token zu erhalten, sodass Sie Benutzer empfehlen und Token verdienen können. Das ist eine tolle Möglichkeit, deinem Konto Tokens hinzuzufügen , ohne auf Pro upgraden zu müssen, oder? Sie können das also überprüfen. Sie haben auch Einstellungen. Wenn Sie also irgendwelche Einstellungen ändern möchten, erscheinen Sie in den Einstellungen. Ich bin gerade im Dunkelmodus. Sie können auch in den Lichtmodus wechseln . Okay, das kannst du machen. Editor-bezogene Einstellungen, teambezogen, Sie haben Tokens. Also, was für Tokens du benutzt hast. All diese Informationen werden hier rüberkommen, deine Tarifinformationen und alles, im Grunde, richtig? Nun zu den Apps hier drüben, Sie haben also den Integrations-Tab gesehen, oder? Und hier sehen Sie auch eine ähnliche Liste von Anwendungen, die Sie hier verbinden können. Sie können also eine Verbindung zu Netlife herstellen. Net Life ist im Grunde genommen ein Server oder eine Cloud-basierte Plattform, mit der Sie Ihre Anwendung über das Internet hosten können Sie Ihre Anwendung über das Internet hosten Super Base ist ein Dienst , mit dem Sie eine SQL-Datenbank hosten können Und dann haben Sie Figma, von wo aus Sie die Designs eingeben können und der Bolt analysiert diese Designs und wandelt sie in den Kühlmodus um Und dann hast du auch GitHub. Wenn Sie das Backup dieses Quellcodes erstellen oder auf GitHub speichern möchten , können Sie dies tun, indem Sie GitHub verbinden. Zuallererst, was ist eine Feature-Vorschau? Die Feature-Vorschau ist eine Option, mit der Sie sich alle kommenden Funktionen ansehen können der Sie sich alle kommenden Funktionen ansehen . Okay, du kannst darauf zugreifen. Nein, das erste Feature hier ist DIFS. Was Sie also tun können, ist diesen DIF-Ansatz hier zu aktivieren. Bei diesem DIF-Ansatz werden die vorhandenen Dateien bearbeitet, anstatt die gesamte Datei für jede Änderung neu zu anstatt die schreiben, was bedeutet, dass weniger Token verwendet werden , wenn Sie diesen Modus hier aktivieren Okay? Nun, das ist nur für kostenpflichtige Tarife verfügbar, also habe ich diese Option nicht , weil ich einen kostenlosen Tarif habe. Dynamische Vernunft. Wenn Sie also Ihre Argumentationsfähigkeit verbessern möchten, können Sie dies umschalten. Okay? Dann haben Sie Zugriff auf die Wissensdatenbank. Hier können Sie also alle projektspezifischen Anweisungen oder jede Art von globalen Anweisungen definieren alle projektspezifischen Anweisungen oder jede Art von , die Sie hier definieren können. Und ja, Sie haben Backups und ein Netzwerk. Das sind also einige dieser Einstellungen, die existieren, und dann haben Sie Ihr Abonnement, zum Beispiel, welche Art von Abonnement Sie haben. Also habe ich einen kostenlosen Tarif. Okay, wenn du auf etwas upgradest, siehst du deinen aktuellen Tarif hier und dann hast du die Möglichkeit, dich abzumelden. Okay? Also das ist die gesamte Schnittstelle. Oben steht der Name des Projekts, und dieses Projekt ist privat. Sie können das Projekt umbenennen, wenn Sie möchten, Sie können es duplizieren und seine Sichtbarkeit hier ändern. Also wenn ich das in etwas anderes umbenennen möchte, schöner Codegenerator, oder ich kann sagen, zufällig oder ich kann inspirierend sagen Codegenerator, das kann ich machen, oder? Ich hoffe also, dass das Sinn macht, und ich hoffe, dass Sie sich über die Benutzeroberfläche im Klaren sind. 5. Erstellen eines etwas komplexen Projekts - Eine To-Do-List-Anwendung!: Jetzt ist es an der Zeit, dass wir mit der Arbeit an unserer zweiten Anwendung beginnen , die etwas komplex sein wird, und diese Anwendung wird die Aufgabenlistenanwendung sein Es ist also ein bisschen komplexer als das, was wir bereits entwickelt haben. Okay? Hier drüben wird es ein paar bewegliche Teile geben. Und ich bin hier auf dieser Hauptseite. Du kannst auf diese Hauptseite kommen indem du zu dieser URL gehst bool dot Nu oder du kannst hier rübergehen und sagen, starte einen neuen Chat Sie sagen, starten Sie einen neuen Chat, Sie werden standardmäßig auf diese spezielle Seite hier weitergeleitet. Sie können also auch die vorherigen Chat-Historien hier sehen , oder? Das ist also die erste Anwendung , die wir erstellt haben. Okay. Also hier drüben, was wir tun werden, ist eine Aufforderung hinzuzufügen, die ich bereits geschrieben habe. Also sage ich dieser App hier oder Boltea hier , dass sie eine einfache To-do-Listenanwendung erstellen Die App sollte ein Eingabefeld für eine neue Aufgabe und eine Schaltfläche zum Hinzufügen einer Aufgabe Die hinzugefügte Aufgabe sollte unten als Liste angezeigt werden. Okay? Nun, diese spezielle Sache ist eine Beschreibung der Gedanken die ich über die Anwendung habe. Und ich gebe diese Gedanken nur an die Leute hier drüben oder an irgendeine Art von künstlicher Intelligenz hier drüben weiter, oder? Also, wenn ich sage, los, okay, es wird anfangen, daran zu arbeiten, aber bevor ich das mache, werde diese Aufforderung ein wenig verbessern, oder? Lassen Sie uns das also verbessern, damit wir ein besseres Ergebnis erzielen können. Also wird es improvisieren und erläutern, was wir hier alles brauchen. Wenn du willst, kannst du das alles durchmachen. So können Sie Elemente der Benutzeroberfläche sehen. Es definiert die Benutzeroberfläche. Fügen Sie eine deutlich sichtbare Schaltfläche „Zur Aufgabe hinzufügen“ neben dem Eingabefeld hinzu. Zeigt eine Liste der Aufgaben unter dem Eingabebereich an. Bezug auf die Funktionalität werden Benutzer aufgefordert, die Aufgabenbeschreibung in das Eingabefeld einzugeben , wenn auf Aufgabe hinzufügen geklickt wird Okay, jede Aufgabe, wenn auf Aufgabe hinzufügen geklickt wird, wird sie der Liste hinzugefügt Und dann wird jede Aufgabe als separates Listenelement angezeigt Lassen Sie hier nicht zu, dass leere Aufgaben hinzugefügt werden. Das ist also eine Art von Validierung, die hinzugefügt wurde. Löschen Sie die Eingabe, nachdem Sie die Aufgabe hinzugefügt haben. So können Sie sehen, wie es beschreibt und wie es die Eingabeaufforderung für uns verbessert hat. Bezug auf das visuelle Design wurden hier einige Hinweise hinzugefügt, und hier können Sie einige optionale Verbesserungen sehen , die hier erwähnt wurden. In Ordnung. Wenn Sie die optionale Erweiterung ändern möchten, können Sie das hier tun, aber das werde ich nicht tun. Ordnung. Oder wir können es hier drüben fokussieren. Konzentriert. Also lass uns oder wir lassen es so. Lassen Sie uns sehen, welche Ergebnisse wir bekommen. Ich sage, mach weiter. Okay. Also hier habe ich eine Aufforderung bekommen, sobald ich gesagt habe, mach weiter. Also sagt es mir, hey, erzähl uns ein bisschen über dich, und du bekommst 1 Million, wenn du fertig bist. Es scheint also, als ob es eine Art gibt , die ich normalerweise nicht sehe, aber das ist eine Art Angebot oder eine Art von Forschungsarbeit, die auf dem Stuhl abläuft. Also kann ich nur ein paar Informationen über mich geben. Ich bin Pädagoge. Hier und ich bin ein Freiberufler, der alleine arbeitet oder für ein großes Unternehmen Was auch immer Sie sind, Sie können es hier wählen, und ich bin ein fortgeschrittener Mensch Also sage ich einfach als Nächstes und ich baue Produkte für mich selbst. Ich sage einfach als Nächstes. Okay? Und was willst du mit Mut erreichen? Starten Sie also die App oder Website, fertig. In Ordnung. Und sobald Sie dies getan haben, werden Ihrem Konto 1 Million Token kostenlos hinzugefügt . Das ist also großartig. Erzähle einfach ein paar Informationen über dich und du bekommst etwas umsonst. Okay, wenn Sie wieder hierher kommen, können Sie sehen, dass die ersten Dateien erstellt werden, sodass Sie alle hinzugefügten Schritte sehen können. Und wenn Sie nach oben scrollen, hat es sich aufgrund der von Ihnen gestellten Anforderungen zurückgezogen sich aufgrund der von Ihnen gestellten Anforderungen und erstellt alle Dateien Sie können hier sehen, wie alle Dateien generiert werden. Wenn Sie zur App Dot TSX gehen, wird der gesamte Code geschrieben, den Sie sehen können Es schreibt App Dot TSX. ? Wenn Sie hier zur Vorschau gehen, wurde die Anwendung gestartet, und es zeigt, dass ich eine umfassende To-Do-Flow-Anwendung erstellt habe . Sie können die Anwendung also hier oben sehen. Und hier können Sie sehen, es ist eine anständig aussehende Anwendung. Bleiben Sie mit Ihrem schönen Aufgabenmanager organisiert und produktiv, um Ihren Arbeitsablauf zu verbessern. Guter Slogan. Ich würde sagen, was muss getan werden Es gibt also ein Limit von 500 Zeichen, wie Sie sehen können, und dieses Limit sollte sich ändern und wenn Sie etwas eingeben, ist das gut. Sie haben diese Plus-Schaltfläche. Noch keine Aufgaben, also müssen Sie alle Aufgaben hinzufügen. Ich glaube also, sobald Sie die Aufgabe hinzugefügt haben, würde die Aufgabe hier erscheinen. Fantastisch. Und hier siehst du einige Tipps wie Enter drücken, um etwas hinzuzufügen, oder Escape, um es zu löschen. Fantastisch. Lass uns das testen. Ich werde sehen, wie ich Lebensmittel mitbringe. Lass mich einfach Enter sagen. Ordnung. Und ich habe hier so eine Benutzeroberfläche, die mir sagt, dass ich Lebensmittel mitbringen soll, zusammen mit diesem Häkchen hierher Lebensmittel mitbringen soll, zusammen mit diesem Häkchen Und es gibt mir auch die Uhrzeit und das Datum, wann ich diese Aufgabe hinzugefügt habe, und es kategorisiert sie als aktive Aufgabe, Wahnsinn Es sagt mir also, dass ich insgesamt eine Aufgabe hinzugefügt habe, aktiv ist eins und erledigt ist Null Okay, ich kann sagen, ich muss sagen, mach oder geh ins Fitnessstudio. Geh ins Fitnessstudio, so etwas. Und lassen Sie mich hier eine Aufgabe ankreuzen. Oh, Sie können also sehen, dass es die aktiven und erledigten Aufgaben wunderbar aufgeteilt hat die aktiven und erledigten Aufgaben wunderbar Haben wir das irgendwo in der Liste der Anforderungen angegeben , optionale Erweiterungen, o, optionale Erweiterungen, o, Implementieren von Aufgabenkategorien oder Prioritätsstufen Das war also in der optionalen Erweiterung enthalten. Sie können also hier sehen, dass auch alle optionalen Erweiterungen abgeschlossen wurden. Es wurde ein Kontrollkästchen neben der Aufgabe hinzugefügt , um den Markt als abgeschlossen zu markieren. Es wurde auch die Schaltfläche „Löschen“ hinzugefügt. Hat es die Schaltfläche Löschen enthalten? Ja, es hat eine Löschtaste. Fantastisch. Es wurden grundlegende Animationen beim Hinzufügen und Entfernen von Aufgaben hinzugefügt, die erledigt wurden, und es wurden Aufgabenkategorien oder Prioritätsstufen implementiert . Das sind also nichts anderes als Aufgabenkategorien, wie Sie sehen können. Und es zeigt mir auch den Fortschritt hier. Wurde das Fortschritts-Ding hier hinzugefügt, okay, ich kann es nicht finden, aber es hat sich von selbst hinzugefügt, glaube ich, was großartig ist. Okay? Ich glaube nicht, dass die Sache mit dem Fortschritt den Anforderungen hinzugefügt wird. Also das ist verrückt, okay, indem wir ihm nur ein paar Dinge gegeben haben, im Grunde eine ganze App für uns geschaffen Einen Tipp möchte ich hier erwähnen Als diese Aufforderung generiert wurde und Sie optionale Erweiterung gesehen haben, habe ich sie nicht entfernt Ich wollte es gerade entfernen, aber ich habe es nicht entfernt. Wenn Sie also kein gutes Ergebnis erzielen, wenn Sie eine erweiterte Eingabeaufforderung hinzufügen und einige optionale Verbesserungen hinzugefügt wurden, okay? Und die Antwort oder das Ergebnis, das Sie erhielten, war nicht wünschenswert und nicht das, was Sie wollten. Was Sie tun können, ist, die Last hier zu reduzieren, indem Sie die optionale Erweiterung loswerden und Ihre Aufgabe wirklich, wirklich konzentrieren. Wenn Sie das tun, können Sie von der KI bessere Ergebnisse erwarten. Aber in meinem Fall konnte ich selbst mit optionalen Verbesserungen sehen, dass die Ausgabe wirklich großartig ist. Ich sehe hier keine Probleme, oder? Die Ausgabe ist also großartig, aber das ist nur ein Tipp, den ich hervorheben möchte. Wenn Sie der Meinung sind, dass die Ausgabe nicht so gut ist, können Sie Ihre Aufforderung wirklich, wirklich fokussiert halten. Sie können Ihre Eingaben wirklich, wirklich auf den Kern der Funktionalität konzentrieren , die Sie gerade erstellen , und Sie können das Ergebnis sehen. Ihr Output wird immer besser sein. Also können wir versuchen, das klar und vollständig zu testen. Okay? Die fertigen Artikel wurden gelöscht. Es funktioniert einwandfrei. Ich kann das auch klären. Okay, das wurde also auch geklärt. Ich kann sagen, gut oder lerne heute. Moderatorin. Okay, aktive Aufgaben. Ich glaube nicht, dass noch etwas zum Testen übrig ist. Okay? Testen. Und ich werde sehen, dass ich mich entscheide. Okay, es funktioniert gut, das kann ich hier sehen. Die Anwendung funktioniert einwandfrei. Und wenn Sie dies in der ersten Version selbst hinzufügen möchten, muss ich sagen, dass wir eine ordentliche Menge an Funktionen hinzugefügt haben. Zum Beispiel haben wir das Hinzufügen von Aufgaben zum Entfernen hinzugefügt. die Funktion zum Durchstreichen Wir haben die Funktion zum Durchstreichen der Aufgabe hinzugefügt. Die Kategorisierung wurde hinzugefügt. Hier gibt es auch ein Dashboard, das Fortschritts-Dashboard, das ebenfalls in einer einzigen Eingabeaufforderung hinzugefügt wurde Das ist also beeindruckend. Es gibt auch einen Tipp, der hinzugefügt wurde. Nun, etwas, das ich hier hinzufügen kann, ist eine Fußzeile. Ich kann also sagen, fügen Sie unten eine professionelle Fußzeile hinzu, in der es um das Unternehmen geht Also kann ich das über das Unternehmen hinzufügen und es kann Copyright-Informationen erwähnen Etwas wie das. Also ich kann diese Art von Aufforderung hier geben und Sie können das an Ihre Anforderungen anpassen. Ich werde diese Aufforderung nicht verbessern, richtig, weil es nur eine Fußzeile ist, und ich werde sie einfach senden oder als Eingabe geben Lassen Sie uns sehen, dass es aussagekräftig ist, es fügt hier die professionelle Fußzeile hinzu und es erstellt diese Komponente Sie können also sehen, wenn Sie darauf klicken, dass diese Komponente erstellt wird. Es schreibt diesen Code. Wenn Sie darauf klicken, können Sie sehen, dass es diesen Code vollständig schreibt, und Sie können ihn live sehen. Sobald das geschrieben ist, wird es die App Dot TSX aktualisieren Sie können hier sehen, dass die gesamte Datei aktualisiert wird. Also warten wir, bis das passiert. Also ist das erledigt. In Ordnung. Und hier kannst du all die Dinge sehen , die hier gemacht wurden. Also wurden Unternehmensinformationen, Quicklinks sowie E-Mail-Kontakt - und Social-Media-Links hinzugefügt . Lassen Sie mich also nach unten scrollen und sehen: Okay, Firmeninformationen hier wurden hinzugefügt und Links zu sozialen Medien wie dieser. Lassen Sie mich das Ganze im Vollbildmodus betrachten. Ups, nicht dieser Teil. Also werde ich besser okay, die Vorschau ist weg. Also öffne ich das einfach in einem neuen Tab und stelle eine Verbindung zum Projekt her. Okay. Und hier. In Ordnung, also so sieht es aus oder so sieht es hier aus. Also kommt es hier senkrecht rüber. Es kommt vertikal herüber, weil dieser Raum oder die Fläche oder die Größe dieses Fensters sehr klein ist. Deshalb habe ich es in einem anderen Tab geöffnet , um ein Gefühl dafür zu bekommen. Es sieht anständig aus. Sie können es hier wiederholen, wenn Sie möchten Und hier können Sie versuchen, daran zu arbeiten, okay, Sie können sehen, ich bin Okay, du kannst also sehen, dass das gut aussieht. , es ist eine ordentliche Bewerbung Ich würde sagen, es ist eine ordentliche Bewerbung, oder? Und wenn Sie die Reaktionsfähigkeit auf dem iPhone 16 überprüfen. Schauen wir also auf Mobilgeräten nach. Ich werde dafür sorgen, dass das zu 100% ist. Also auf Mobilgeräten, okay, lass mich ein bisschen rauszoomen. Also, wenn es bei 90% liegt, können Sie sehen, wie es aussieht, oder? Es ist anständig genug. Okay. Die Ausgabe , die wir haben, ist also ganz anständig genug für Version 1.2, und ich bin damit zufrieden, oder? Ohne eine einzige Codezeile zu schreiben, können Sie die Leistungsfähigkeit von KI-Tools wie gebündelt sehen Ich hoffe, das war hilfreich. 6. Iterative Entwicklung mit Bolt.new: Jetzt ist es an der Zeit, dass wir über iterative Entwicklung sprechen Hier haben wir also diese Version 1.2 oder wie auch immer Sie diese spezielle Anwendung nennen Es wird Situationen geben, Sie bestimmte Dinge verbessern, neue Funktionen hinzufügen oder bestimmte Funktionen entfernen möchten. Das ist also etwas , das Sie hier mit Hilfe des Chats absolut tun können. Jetzt, hier, können Sie diese Plus-Schaltfläche sehen. Nehmen wir an, ich mag diese Plus-Schaltfläche nicht und ich kann das KI-Modell hier drüben beschreiben, sodass ich die Plus-Schaltfläche verbessern oder erweitern kann , um sagen zu können, Text hinzufügen. Okay, so etwas und gib ihm eine bessere Farbe. Also kann ich so etwas sagen. Ich kann die Aufforderung hier verbessern, um sie viel ausführlicher zu gestalten , damit ich eine bessere Antwort erhalte. Sie können also hier sehen, dass es das ausgearbeitet hat und lassen Sie mich das schicken Mal sehen, was passiert. In Ordnung. Das Ergebnis wird auf jeden Fall das bessere sein. Sie können also sehen, dass diese spezielle Datei hier aktualisiert wird. Wir werden eine Weile warten. Sie können also sehen, dass das Update abgeschlossen ist. Es hat das Update beschrieben und hier hat es diesen Anzeigentext hinzugefügt, oder? Und wenn ich jetzt sage, geh ins Fitnessstudio, kannst du sehen, wie der Knopf herausspringt Also es ist definitiv eine Verbesserung gegenüber dem, was wir zu Beginn hatten Natürlich haben wir in den Änderungen nicht viel beschrieben, aber wenn Sie spezielle Anforderungen oder ein bestimmtes Farbschema haben , können Sie dies hier bei der Eingabe definitiv erwähnen . Alles klar? Nun, bei jeder Art von Problemen, auf die Sie stoßen, wird es Szenarien geben, in denen Sie auch auf Probleme stoßen. Wenn ich zum Beispiel im responsiven Modus hierher gehe zum iPhone 16 gehe und ein bisschen hineinzoome, können Sie sehen, dass sich der Text hier überschneidet, oder? Es gibt also eine Textüberlappung im Eingabefeld, wenn Sie in den responsiven Modus wechseln. Ich werde dieses Problem also besser kommunizieren. Ich mache einfach einen Screenshot davon und füge ihn hier ein. Sie können also einfach einen Screenshot machen, ihn auf Ihrem Gerät speichern und ihn mit dieser Upload-Option hier veröffentlichen, oder Sie können diesen Screenshot direkt aufnehmen und hier einfügen. Das können Sie auch tun. Und du kannst sehen, äh, also habe ich mein Problem beschrieben. Ich habe ihm gesagt, hey, sieh dir den Hinweis in der Ausgabebox an. Entschuldigung, Hinweis im Eingabefeld. Es ist im responsiven Modus nicht lesbar und funktioniert auf dem Desktop einwandfrei, aber nicht auf Mobilgeräten wie dem iPhone 16. Je mehr Sie also näher darauf eingehen können, desto bessere Ergebnisse erhalten Sie, oder? Also ich habe es gut ausgearbeitet, ich denke, ich sage einfach senden und lass uns sehen, ob es das für uns reparieren kann Wir werden eine Weile warten, bis Bearbeitung für uns abgeschlossen ist Sie können also hier sehen, dass die Anwendung aktualisiert wurde, und hier wird beschrieben welches Update durchgeführt wurde. Und jetzt können Sie sehen, dass dieses Textfeld die volle Breite hat. Okay, wenn Sie also lesen, welche Änderungen es vorgenommen hat, hat es bessere Abstände, eine bessere Berührungsfreundlichkeit und eine klare Trennung hinzugefügt . Wenn Sie hier also etwas eingeben, ist das besser. Gehe zum Team. Du kannst es auf Mobilgeräten sehen, es wird cool aussehen. Und wenn du es hinzufügst, wird es gut aussehen. Keine Probleme als solche. Also funktioniert es auch auf Mobilgeräten einwandfrei. Lassen Sie uns auch auf dem Desktop nachschauen. Nichts ist kaputt, also ist nichts kaputt. Es sieht gut aus. Also ja, die Änderungen waren gut, und so können Sie sie wiederholen Jetzt könnt ihr sogar wissen, was wir hier gesehen haben, wir haben Probleme behoben Wir haben einige Verbesserungen vorgenommen. Wenn Sie hier irgendwelche Funktionen hinzufügen möchten, können Sie weitere Funktionen hinzufügen. Wenn ich also zum Beispiel die Liste mit zwei Aufgaben bearbeiten möchte, kann ich das auf jeden Fall auch tun. Also hier kann ich sagen, bitte fügen Sie Funktionen hinzu , damit ich 22 hinzugefügte bearbeiten kann. Okay. Und ich kann das verbessern und uns zeigen, wie die Verbesserung aussieht. Sie können also sehen, auf die ID oder die eindeutige Kennung als Eingabe zugreifen . Erlauben Sie Benutzern, die beiden Do-Titelbeschreibung und das Fälligkeitsdatum zu ändern . Hier gibt es also kein Fälligkeitsdatum, keine Beschreibung , und Prioritätsstufe ist auch nicht Also werde ich das einfach loswerden . Überprüfen Sie die bearbeiteten Informationen vor dem Speichern und speichern Sie sie hier, Bestätigungsnachricht, behandeln Sie alle Fehler und geben Sie die aktualisierte Aufgabe zurück, nachdem die Bearbeitung abgeschlossen ist Lassen Sie uns sehen, ob das gut geht. Also habe ich das als Eingabe gegeben, lassen Sie uns eine Weile warten. Also wurden die Updates gemacht. Sie können hier sehen, was aktualisiert wurde. Es wurde das Bearbeitungssymbol hinzugefügt. Es gibt eine Überprüfung, Schaltflächen zum Speichern und Abbrechen und visuelles Feedback. Okay, lassen Sie uns das testen. Also füge ich einfach ein Tulu hinzu und gehe zu drei. Alles klar Lassen Sie uns jetzt hierher kommen und es gibt ein Bearbeitungssymbol. Fantastisch. Ich klicke einfach auf Bearbeiten. Du kannst sehen, dass du dich bereits im Bearbeitungsmodus Gehe heute ins Fitnessstudio und du kannst hier speichern sehen. Sobald du Speichern sagst, kannst du sehen, dass todo es erfolgreich gelesen Es ist großartig. Und das kannst du verbessern. Ich kann das wieder bearbeiten. Du kannst es sehen. Das ist anständig. Nun, wenn Sie nicht möchten, dass die Nachricht hier drüben oder die Nachricht unten erscheint, können Sie all diese Eingaben hier machen und das Problem beheben. Aber ich bin damit einverstanden. Das sieht toll aus. Und ich finde es gut. Es ist ein gutes Ergebnis, das wir bisher erzielt haben , basierend auf den Eingaben , die wir gegeben haben. In Ordnung, ich hoffe, dass Sie sich über den gesamten Prozess im Klaren sind. Ich hoffe, Sie verstehen auch , wie mächtig diese Tools sein können. 7. Integration der Datenbank in Bolt.new: Also. Jetzt ist es an der Zeit, dass wir anfangen, über Daten in unserer Anwendung zu sprechen. Das ist also die Anwendung , die wir bisher erstellt haben. Sie ist hier im neuen Tab geöffnet. Es ist auch hier als Vorschau geöffnet. Aber hier in unserer Anwendung generieren wir Daten. Daten, das heißt, es gibt einige benutzergenerierte Daten wie Aufgaben, abgeschlossene Aufgaben. Daten werden auch aktualisiert, denn sobald die Daten generiert sind, gibt es in unserer Anwendung eine Funktion, die es Benutzern ermöglicht, die Daten zu aktualisieren Er kann die Daten als abgeschlossen markieren oder die Aufgabe als abgeschlossen markieren. Daten werden also auch aktualisiert, erstellt und gelöscht. All das passiert. Ab sofort werden diese Daten lokal in unserem Browser gespeichert, oder? Und du kannst dir das ansehen, okay? Wenn du gleich bei der ersten Aufforderung hier nach oben scrollst. Dies ist die erste Aufforderung, die ich gegeben habe , um die Todo-Listen-Anwendung zu erstellen Und sobald wir die Aufforderung gegeben haben, können Sie hier, nachdem Sie alle Funktionen verstanden haben, sehen , oder Bolt AI selbst erwähnt dass sie lokale Speicherpersistenz verwenden wird, was bedeutet, dass alle Daten, die Todo-Liste, alles, was Sie hier generieren im Browser selbst gespeichert werden Wenn Sie also eine Aktualisierung durchführen, lassen Sie uns eine Aktualisierung durchführen. Ich muss mich mit dem Projekt verbinden. Wir sind mit dem Projekt verbunden und Sie können sehen, dass die Daten hier nicht dauerhaft gespeichert sind. Wenn ich nun eine Aufgabe hinzufüge, so lass mich dir zuerst zeigen, wo die Daten gespeichert werden Ich zeige Ihnen also schnell, wie Sie die Daten im Chrome-Fenster sehen können. Sie müssen also mit der rechten Maustaste klicken, Sie müssen zur Inspektion gehen. Das mag für ein Publikum ohne Technikfreak etwas überwältigend erscheinen, aber bleiben Sie einfach dran. Sie müssen das nicht ausprobieren. Ich versuche nur, ein Konzept zu erklären. Hier musst du auf die Pfeile klicken und hier geht's zur Anwendung. Jetzt haben Sie hier in der Anwendung alle Speicherinformationen , die im Browser vorkommen. Klicken Sie auf lokalen Speicher und wählen Sie Ihre URL aus. Das ist also Ihre Anwendungs-URL, wählen Sie diese aus. Hier sehen Sie nun alle Informationen zu allen Informationen , die für diese Anwendung im Browser gespeichert sind. Nun, das ist nicht deutlich sichtbar, also werde ich darauf klicken und es ganz nach unten bringen. Also das ist jetzt viel besser. Also kannst du es hier sehen. Okay, und ich werde das schließen. Ich werde das auch schließen. Ich werde auch die Konsole von hier aus loswerden. Okay, das ist also fair genug. Jetzt kannst du die Todos hier sehen. Wenn du das ein bisschen erweiterst, kannst du Todos sehen, die leer sind Stimmt das? Sie können also sehen, wie Todos in unserer Anwendung verwaltet werden Es wird im Browser gespeichert. Wenn ich jetzt versuche, eine Aufgabe hinzuzufügen, sage ich, geh zu Jim Wenn ich Enter sage, kannst du sehen, es hier eine eindeutige ID gibt. Der Text lautet „Gehe zu Jim“. Ist es als abgeschlossen markiert? Nein, das ist hier also als falsch markiert. Du kannst es sehen. Es ist also ziemlich klar, dass Daten in unserer Anwendung auf diese Weise verwaltet werden. Also habe ich einfach rausgezoomt, damit Sie das gut sehen können , und lassen Sie mich das erweitern, damit Sie es hier sehen können. Abgeschlossen, erstellt am, ID und Text. All das ist da drüben. Sobald ich es als abgeschlossen markiere, also wenn ich es als abgeschlossen markiere, werden Sie sehen, dass diese Aktualisierung, dass abgeschlossen auf wahr gesetzt ist. Nun, das ist nicht die ungenutzte Art und Weise , wie produktionstaugliche Anwendungen Daten verwalten. Sie können Daten nicht im Browser verwalten, oder? Was ist, wenn Sie morgen diese Sitzung schließen und versuchen, von Ihrem Mobiltelefon aus auf diese Anwendung zuzugreifen. Die Daten befinden sich im Browser, sodass diese Daten nicht im mobilen Browser angezeigt werden. Nun, wie behebt man das Um dieses Problem zu beheben, verwenden produktionstaugliche Anwendungen eine Datenbank, die irgendwo in der Cloud gehostet wird. Nun zu dem hier drüben, falls Sie kommen, hier haben wir diesen Integrations-Tab und es gibt eine Integration , die uns Bolt mit Super Base ermöglicht. Also Super Base, wir können Super Base-Datenbank in unserer Anwendung verwenden, und wir können sie hier konfigurieren lassen . Jetzt ist die Frage, was ist Superbase? Ich würde Ihnen also empfehlen , zu Ihrer Lieblingssuchmaschine zu gehen und nach Super Base zu suchen, oder Sie können direkt zu superbs.com gehen Wenn Sie also diesen Tab hier öffnen, können Sie sehen, dass dies die offizielle Website von Super Base ist und Super Base die PosCRS-Entwicklungsplattform ist . Was ist PosCRS? PosGRS ist ein Datenbankanbieter. Ordnung, es gibt mehrere Datenbankanbieter die auf dem Markt erhältlich sind, wie Pascris SQL, dann haben Sie MySQL, Sie haben SQLLit Posgris ist also einer der Datenbankanbieter. Superbs nutzt also Poscris und es wird in der Cloud gehostet. Sie können Ihr Projekt mit Poscris-Datenbank, Authentifizierung, Instant-APIs und H-Funktion starten , all das bietet es. Nun, das Beste hier drüben, damit Sie nach unten scrollen und alle Funktionen erkunden können scrollen und alle Funktionen erkunden Ich hoffe, Sie wissen , was Super Base ist. Es wird uns ermöglichen, unsere Datenbank zu speichern. In die Cloud, die gehostet wird, okay? Und diese Datenbank wird eine Remote-Datenbank sein. Es werden Sterndaten gespeichert. Wenn Sie also morgen hier in diesem Browser eine Aufgabe hinzufügen und versuchen, von Ihrem Handy aus auf dieselbe Anwendung zuzugreifen , werden die von Ihnen hinzugefügten Daten angezeigt , sofern sie mit Ihrem Konto verknüpft Okay? Also ich hoffe, das macht Sinn. Und im Moment speichern wir es lokal, so wie ich es Ihnen gezeigt habe. Wenn Sie das nicht auf Ihrem Computer abrufen können oder wenn Sie einen anderen Browser verwenden, machen Sie sich keine Sorgen. Das war nur meine Art, Ihnen zu zeigen wie die Daten lokal gespeichert werden. Deshalb wollte ich beweisen und Ihnen zeigen wie Daten im Browser selbst gespeichert werden. Das ist es also, was hier benutzt wird. Das ist also erledigt. Ich werde diesen Tab einfach schließen. Es könnte überwältigend aussehen , wenn Sie kein Programmierer sind. wir hierher kommen, werden wir Super Bs in unsere Anwendung integrieren und alle Daten, die gespeichert werden, all die Aufgaben, alles, was gespeichert wird, alles wird in einer Cloud-Datenbank gespeichert , die für uns erstellt wird, und sie wird nicht im Browser gespeichert Um das zu tun, müssen wir mit Bolt sprechen und hier, ich werde sagen, alle Daten in unserer Anwendung in einer Datenbank persistieren , und ich werde diese Aufforderung verbessern. Also wird es diese Anforderung ausarbeiten und verbessern Sie können also hier drüben nachschauen, alle Daten identifizieren und zuordnen, entsprechende Datenbanktabellen mit Beziehungen implementieren , bewährte Verfahren anwenden und all das einbeziehen. Die Lösung sollte skalierbar sein und all das. Es wurde näher darauf eingegangen. Ihre Ausarbeitung könnte sich von meiner unterscheiden, aber ich werde das einfach schicken Ich werde das nicht ändern und lassen Sie uns sehen, wie das funktioniert Die Sache hier ist, dass wir noch keine Super Base in unser Konto integriert haben. Wir haben auch kein Konto , das wir mit Super Base erstellt haben. Lassen Sie uns also sehen, wie dieser Prozess funktioniert wenn Sie ein neuer Benutzer bei Super Base sind. Ich habe momentan kein Konto und ich werde es Ihnen erklären. Also lass uns sehen. Also hier erstellt es ein Migrationsskript unter dem Migrationsordner, superbs Migrations, superbs Migrations, und es hat diese Datei benannt, ungefähr so Ich werde eine Weile warten, bis all diese Schritte abgeschlossen Nach einer Weile wurden also einige Dateien erstellt. Es hat einige Zeit gedauert, und es wurden so viele Dateien erstellt, die bestimmte Befehle ausführen, und die Anwendung wurde gestartet. Aber auf der rechten Seite sehe ich Fehler , was in Ordnung ist. Wenn Sie jetzt nach unten scrollen, wird mir mitgeteilt, dass ich nach einer Superbase-Verbindung gefragt nach einer Superbase-Verbindung Es fordert mich also auf und ich benötige eine neue Superbase-Verbindung . Ja, ich brauche Also, was ich tun werde, ist, ich werde herkommen, ich werde bei Data Bese sagen Also klicke ich hier drüben auf diese Option und werde sofort zu dieser Website namens subbase.com weitergeleitet , die Website, die wir gerade Wenn Sie jetzt hier ein Konto haben, können Sie sich anmelden. Wenn Sie noch kein Konto haben, können Sie sich registrieren. Ihnen wird nichts berechnet. Ich Sie brauchen nichts oder Sie müssen meine, Sie brauchen nichts oder Sie müssen kein Geld ausgeben. Wenn wir zur Preisgestaltung gehen, haben sie ein großzügiges kostenloses Kontingent, das für uns ausreichen sollte, um unsere Ideen auf den Markt zu bringen und zu validieren, oder? Das ist also ein kostenloser Tarif. Das werden wir verwenden. Und was ich tun werde, ist, meine Daten einzugeben, alles hier drüben, und ich lasse das Konto einrichten. Nachdem Sie die E-Mail-Adresse und das Passwort eingegeben haben, werden Sie um eine E-Mail-Bestätigung gebeten. Machen Sie also diese Überprüfung und wir sehen uns dort. Als ich nun auf den Bestätigungslink in der Bestätigungs-E-Mail klickte , wurde ich gebeten, den API-Zugriff für Bolt zu autorisieren Also versucht Bolt hier, eine Verbindung zu meinem Superbse-Konto herzustellen, und fragt nach all Ich werde nur sagen, gründen Sie eine Organisation. Also werde ich einfach mit den Genehmigungen weitermachen. Und dafür werden wir eine Organisation gründen. Jetzt können Sie den Namen der Organisation hier eingeben. Okay, also ich sage hier FaslSog. Sie können einen beliebigen Namen eingeben, den Typ und den Plan auswählen Wir haben einen kostenlosen Tarif. Wir müssen nichts ausgeben. Ich sage, Organisation gründen. Und wir werden eine Weile warten. Also fragt es wieder danach, und ich sage autorisieren Es wird also eine Verbindung mit Bolt hergestellt und Sie können sehen, dass die Verbindung erfolgreich hergestellt wurde Wenn Sie jetzt hierher kommen, wurde mir ein Popup angezeigt, in dem Sie darauf hingewiesen werden, dass Sie Ihr Super Bs Data Bs - oder Super Bees-Projekt auswählen müssen . Superbspject soll also im Grunde genommen verbunden oder erstellt werden , wenn Sie es nicht haben Also werde ich es einfach erstellen, weil ich noch kein Projekt habe Also sage ich, mein Projektname ist To Do App, so ähnlich. Sie können das Passwort eingeben. Ich gebe einfach ein Passwort ein oder generiere es. Okay. Stellen Sie also sicher, dass Ihr Passwort hier stark genug ist Hier können Sie auch die Option Passwort generieren sehen. Also habe ich gerade darauf geklickt. Okay? Sobald Sie darauf klicken, wird ein Datenbankpasswort für Sie generiert und Sie können die Region auswählen. Ich behalte es einfach bei der Standardeinstellung und Sie können sehen, wie Sie ein Projekt erstellen. Jetzt wird das Projekt automatisch erstellt, und das hatten wir nicht, wir haben uns hier nicht viel Mühe gegeben. Sie können also hier sehen, dass die Integration abgeschlossen ist. Sie können sehen, dass Supervase installiert ist. Und hier können Sie sehen, dass es mit der Datenbank verbunden ist. Es ist mit Superbase verbunden, es ist mit dem Projekt verbunden, es hat die Authentifizierung eingerichtet Es hat eine Datenbank erstellt und dieses Setup abgeschlossen. All das ist erledigt, und jetzt fordert es mich auf, das Datenbankschema zu erstellen, also sage ich Anwenden und lassen Sie uns warten Es wird also das Anwenden der Datenbankmigration angewendet, okay, die Datenbankmigration wurde nicht korrekt angewendet, und hier hat es mir auch dieses Popup gezeigt. Es hat also ein Problem identifiziert und es gibt mir diese Option, um zu versuchen, es zu beheben. Also werde ich natürlich versuchen, das Problem zu beheben, und ich werde es beheben lassen. Und wir werden auch auf der rechten Seite zu diesem Fehler kommen , aber bleiben Sie einfach dran. Also repariert es das. Es macht es von selbst. Wir werden eine Weile warten, bis diese Korrekturen angewendet werden. Also wurden hier ein paar Änderungen vorgenommen, und meine Anwendung wird neu geladen Ich sehe, dass die Anwendung noch nicht funktioniert. Ich sehe immer noch einen Fehler, aber aufgefordert, die Migration abzuschließen, werde aufgefordert, die Migration abzuschließen, also sage ich Anwenden, und mir werden hier einige Probleme angezeigt, also werde ich versuchen, ihn zu beheben. Es hat also das Problem identifiziert, das ich auf der rechten Seite gesehen habe, und versucht es zu beheben. Sie können also all diese Fehler sehen, die mir angezeigt werden. Das war also der Fehler, den wir im Browser gesehen haben. Nachdem das vorherige Problem behoben war, okay, das vorherige Update wurde hier angeklickt, um es zu beheben Ich sehe wieder ein anderes Problem, also klicke ich erneut auf diesen Versuch, ihn zu beheben Schauen wir uns also an, wie viele Iterationen es gibt, um alle Probleme zu lösen Was hier passiert , ist, dass es die Probleme selbst erkennt und mich auffordert, es Also werde ich das einfach machen und es wiederholen, um das Endprodukt zu erhalten Nach ein paar Wiederholungen und mehrmaligem Klicken auf „Versuch beheben“ konnte ich sehen, dass das Problem auf der rechten Seite behoben wurde, und jetzt sehe ich dieses weitere Problem, nämlich dieses Also werde ich einfach versuchen, das Problem zu beheben. Jetzt wurden alle Probleme behoben. Ich habe hier ein paar Popups bekommen, in denen ich gefragt werde, ob hey, dieses Problem wurde identifiziert und behoben. Also habe ich es ein paar Mal und jetzt alle identifizierten Probleme, sodass Sie sie hier sehen können. All diese Probleme wurden bereits behoben, wenn Sie sich den Chat ansehen. Okay? Und wir sehen diese Anmeldeseite. Ordnung. Also haben wir Bowl nicht gebeten, eine Authentifizierung hinzuzufügen. Aber da Sie die Datenbank hinzufügen, hat sie die Authentifizierung von selbst hinzugefügt. Wenn Sie in den Chats nach oben scrollen und von der Stelle aus sehen, an der Sie die Datenbank zur Anwendung hinzugefügt haben, würden Sie außerdem Stelle aus sehen, an der Sie in den Chats nach oben scrollen und von der Stelle aus sehen, an der Sie die Datenbank zur Anwendung hinzugefügt haben, feststellen, dass dort eine Erwähnung gefunden wurde, wie Bolt erwähnt hat, dass auch Authentifizierung hinzugefügt wird , weil , wissen Sie, hier sind alle Funktionen , die hinzugefügt werden. Verwaltung von Benutzersitzungen, Passwortrecherche. Und das wird von Bolt selbst hinzugefügt , ohne dass wir es sagen, weil wir eine Datenbank hinzufügen, und jede Aufgabe sollte am Ende des Tages mit dem Benutzer verknüpft werden , oder? Weil du die Sitzung verwalten willst. Wenn Sie sich also vom Browser aus anmelden sollten Sie Ihre Todos im Browser sehen, und wenn Sie sich von Ihrem Telefon aus anmelden, sollten Sie Ihre Todos dort sehen Und das ist nur möglich, wenn deine Todos mit einem Konto verknüpft sind Ordnung. Also hat sich Bolt selbst darum gekümmert. Also, was ich tun werde, ist , mir die Rede anzusehen. Ich habe noch kein Konto. Also werde ich sagen, melde dich hier und gebe meine E-Mail-Adresse hier ein. Ich gebe auch das Passwort ein. Okay. Und ich sage, melde dich bei 123 an und ich sage einfach, erstelle ein Konto. Das Konto ist also erstellt und ich bin zur Anmeldeseite zurückgekehrt , und auf der Anmeldeseite habe ich meine E-Mail-Adresse und das Passwort eingegeben, und hier sehe ich Anmelden. Ordnung. Also ist die Anmeldung abgeschlossen. Nun, diese E-Mail , die ich verwende, ist eine Schein-E-Mail und nicht meine tatsächliche E-Mail hier. Okay? Ich habe das gerade für diesen Kurs erstellt. Also hier, ich habe mich mit dieser Schein-E-Mail angemeldet, und jetzt können Sie hier sehen, dass dies unsere Hauptanwendungsseite ist, die Sie sehen, oder? Und wenn Sie jetzt zu Super Base kommen, lassen Sie uns sehen, ob unsere Kontoinformationen im Super Base-Konto gespeichert sind Also hier gehe ich zur Seitenleiste und hier in die Datenbank Gehen wir zur Datenbank. Also unter Datenbank, wenn Sie zu Tabellen gehen. Okay, Sie können also über Ihren Schema-Visualizer schauen, Ihnen eine Visualisierung davon gibt welche Schemas existieren Hier können Sie also Benutzereinstellungen sehen bei denen Sie die Benutzer-ID und alles andere haben Dies speichert die Benutzereinstellungen. Dann müssen Sie Tags erstellen, dann müssen Sie es tun und dann Kategorien erstellen. All diese Informationen werden also in der Datenbank gespeichert. Wenn Sie zu Tabellen gehen, werden Sie die Tabellen hier sehen. Sie können all diese Tabellen sehen. Nun, wo ist die Benutzertabelle? Also Benutzertabelle, die Sie hier unter Datenbank nicht finden werden. Sie müssen zur Authentifizierung gehen. Unter Authentifizierung sehen Sie also diese Tabelle. Sie werden die Benutzer hier auf der linken Seite sehen. Auf der rechten Seite können Sie die Benutzer sehen , die in Ihrer Anwendung erstellt werden. Das ist also ein Benutzer, ein Benutzer, mit dem ich mich gerade angemeldet habe, und Sie können sehen, dass er gerade erstellt wurde. Das ist meine Benutzer-ID, richtig? Sie sehen hier also einige Informationen. Gehen wir jetzt zur Datenbank. Gehen wir zu den Tischen. Und hier siehst du ziemlich viele Tische hier drüben. Okay. Und wenn du zu Todos gehst, okay? Wenn Sie also im Tabelleneditor zur Ansicht gehen, lassen Sie uns zum Tabelleneditor gehen Hier können Sie jetzt alle Daten sehen , die sich in diesen Tabellen befinden Okay? Das ist dort im Tabelleneditor. Lassen Sie uns nun ein Tu Do hinzufügen und sehen, ob das Todo hier hinzugefügt wird. Also werde ich herkommen. Und hier werde ich sagen, sagen wir, gehen wir zu ihm. So etwas in der Art. Du kannst jede Aufgabe hinzufügen Ich sage Enter. Okay, wir sehen also , dass Todo hinzugefügt wird Und wenn du herkommst, okay, wir sehen noch keine Aktivität Haben wir hier eine Möglichkeit, uns zu erfrischen? Also sehe ich das Todo oben. Ich habe gerade auf dieses Todo geklickt und es hat die Daten hier neu geladen kannst du sehen. Geh ins Fitnessstudio, wie es erschienen ist. Du musst also herkommen. Wir fügen noch eine Aufgabe hinzu. Ich würde sagen geh zum Markt, so etwas Komm her. Du wirst Gudo MakeTueo hier nicht sehen. Klicken Sie auf Todos. Okay, oder wechsle so. Okay, ich sehe die Daten hier oben nicht. Es dauert vielleicht eine Weile, bis die Daten geladen sind, oder lassen Sie mich hier aktualisieren. Okay, ich sollte Goodomrket sehen, also musst du eine vollständige Aktualisierung durchführen wenn die Daten hier nicht angezeigt werden Also ja, das kommt hier rein und Sie können sehen, dass es mit meiner Benutzer-ID verknüpft ist Das ist die Todo-ID. Es wird alles in der Datenbank gespeichert, richtig, erstellt, aktualisiert und alle Informationen , die gespeichert und vervollständigt werden, sind als falsch markiert. Es ist also noch nicht vollständig Und wenn du eines der Too absolvierst, zum Beispiel, wenn ich GoodoGym hier abschließe. Das ist also eine abgeschlossene Aufgabe. Und wenn du hierher kommst und wenn ich das aktualisiere, werde ich sehen, dass GoodoGym abgeschlossen und als wahr markiert ist . Das kannst du sehen Es wird also auch in der Datenbank aktualisiert und die Datenbank wurde hinzugefügt. Ordnung. Und Sie können die Mühe sehen, die wir gerade unternommen haben, um die Datenbank hinzuzufügen. Diese Datenbank existiert in der Cloud in der Cloud, also über das Internet. Sie ist nicht lokal auf unserem System. Es ist da im Internet. Und wenn Sie Ihre Anwendung morgen über das Internet bereitstellen , wäre diese Datenbank Ihre Produktionsdatenbank. Okay? Also ich hoffe, das macht Sinn und ich hoffe, Sie können nachvollziehen, was wir alles getan haben. Also, jede Art von Iteration oder was auch immer du hier machen willst, du kannst Bol absolut sagen, dass es hier machen soll Aber das war bisher unglaublich, und du bekommst hier auch einen Sinnot-Button. Sie können Ihre Zeicheninformationen mit einem Sinnot-Button sehen. Lassen Sie mich das hier in einem separaten Tab öffnen . Ich verbinde das Projekt. Und du kannst sehen, wie das aussieht. Okay, ich muss mich einfach wieder anmelden, okay? Okay, du kannst also hier drüben sehen oder du kannst hier drüben sehen. Okay, es sagt mir also, migriere deine Todos. Wir haben festgestellt, dass Ihre Aufgaben lokal gespeichert sind. Möchtest du sie auf das Konto migrieren? Okay, die Migration ist also auch eine Funktion, die hier hinzugefügt wurde. Wenn der Benutzer das Konto nicht hätte, würde es dem Benutzer die Migration ermöglichen. Sobald Sie die Anwendung aktualisiert haben und diese Anwendung bereitgestellt wurde, können Sie im Grunde diese Anwendung bereitgestellt wurde, einfach auf Migrieren klicken und alle Aufgaben werden dem Konto hinzugefügt Lassen Sie uns also sehen. Also gut, gutes Fitnessstudio. Also wahrscheinlich hatte ich früher GoTo Jim hinzugefügt. Deshalb wird es zweimal hinzugefügt. Und lass mich das löschen, also lösche ich dieses GoTo Jim. Okay. Also du kannst sehen , dass alles gut funktioniert. Ich hoffe also, dass Sie mir folgen konnten, und ich hoffe, Sie haben das als sehr nützlich empfunden. 8. Bereitstellen Ihrer App in der Produktion: Wir haben gute Fortschritte bei unserer Anwendung gemacht, und was wir jetzt tun möchten, ist diese Anwendung über das Internet bereitzustellen, und ich würde sagen, ich möchte diese Anwendung, die URL, mit all meinen Freunden teilen . Aber kann ich die URL und alles andere mit meinen Benutzern, Freunden oder wem auch immer ich sie teilen möchte, teilen? Kann jeder über das Internet auf diese Anwendung zugreifen? Die Antwort lautet nein. Es befindet sich in Ihrem Konto hier drüben, und das ist keine öffentliche URL Also hier, wenn ich diese URL kopiere, ist das unsere Anwendungs-URL Und wenn ich einen neuen Inkognito-Modus oder eine Gastbrowsersitzung öffne einen neuen Inkognito-Modus oder , lassen Sie uns versuchen, darauf zuzugreifen Du würdest also sehen, dass es mich fragt, hey, um deine Vorschau zu sehen, musst du diesen Tab mit seinem Projekt verbinden, was bedeutet, dass du authentifiziert sein und dich mit deinem mutigen neuen Konto anmelden musst authentifiziert sein und dich mit deinem mutigen neuen Konto anmelden musst Wenn ich also sage, verbinde das Projekt, wirst du sehen, dass es das Projekt nicht finden konnte . Also müssen wir uns einloggen. Also werden meine Freunde keinen Zugriff auf mein Konto haben oder meine Benutzer oder irgendjemand über das Internet wird keinen Zugriff auf mein Konto haben. Ich werde meine Zugangsdaten nicht mit allen teilen, oder? Also, wie lösen wir das? Die Antwort darauf lautet also, wir diese Anwendung öffentlich bereitstellen müssen , oder ich sollte nicht sagen, öffentlich. Wir müssen diese Anwendung über das Internet bereitstellen. Wir müssen einen Hosting-Anbieter nutzen. Also werde ich Bolt New sagen, dass er das tun soll. Also werde ich hier sagen, stellen Sie diese Anwendung für mich bereit. Sie können einfach diese Eingabeaufforderung eingeben. Ich habe gerade gesagt, dass es eingesetzt werden soll. Saubere Bereitstellungsanweisungen. Lassen Sie uns sehen, was es tut. In Ordnung, ich habe diese Aufforderung nicht verbessert. Lassen Sie uns sehen, welche Ausgabe es mir gibt. Ich sage dir, Bold nutzt Netify. Damit Sie sehen können, werde ich Ihre Anwendung für Sie auf Netlify bereitstellen . Was ist nun Netlify? Ich wähle das einfach aus. Ich suche einfach hier nach Netlify. Was ist Net Leaf Wenn du zu Netefy gehst, gebe ich dir nur eine Einführung. Es ermöglicht Ihnen, Ihre Webanwendungen zu hosten, und es ist sehr einfach , dass es eine sehr einfach zu bedienende Ich sollte hier sagen, dass es eine sehr einfach zu bedienende Plattform ist. Und Sie können sehen, dass so viele Implementierungen durchgeführt wurden, mehr als 35 Millionen. Es wird von 7 Millionen Entwicklern verwendet. Es ist also definitiv eine der beliebtesten Lösungen auf dem Markt, und Sie müssen dafür nicht bezahlen. Sie erhalten einen großzügigen kostenlosen Tarif. Hier können Sie also sehen, dass es ein anständiges gibt Ich habe einige, ich benutze Netliee oft, und ich habe einige Websites, die es dort kostenlos hosten Wenn Sie hier etwas schikanieren, können Sie Netlifee kostenlos nutzen . Sie müssen nichts bezahlen Sie können erst bezahlen, wenn Sie skaliert haben und Pro-Features benötigen. Also brauchen wir Netlify hier drüben. Sie können hier sehen, dass wir aufgefordert werden, unsere Anwendung auf Netlife bereitzustellen Wenn Sie also hier nach unten scrollen, können Sie sehen, dass ich gerade am Entwickeln und Bereitstellen bin Also hat es hier ein paar Befehle ausgeführt. Es hat unsere Website mit einigen Befehlen erstellt und es hieß: Ich erstelle Ihre Anwendung und stelle sie auf Netlify bereit. Dadurch wird eine produktionsreife Version Ihrer schönen To-Do-Anwendung mit allen Funktionen und Die Website wurde erfolgreich bereitgestellt. wurde also bereits hier unter dieser URL bereitgestellt Die Site wurde also bereits hier unter dieser URL bereitgestellt. Lassen Sie mich also auf diese URL zugreifen. Ja, es wurde bereitgestellt. Sie können hier sehen, dass dies eine öffentliche URL ist. Wenn Sie also versuchen, diese Anwendung hier in einem anderen Tab zu öffnen , werden Sie Folgendes sehen. Das ist also eine öffentliche URL. Es ist eine Netlify-URL. Und lassen Sie mich Ihnen etwas sagen, wir haben hier keinen Domainnamen zugeordnet Stimmt das? Wir haben hier keinen Domainnamen zugeordnet, weil wir das nicht getan haben, oder? Das ist also eine öffentliche URL, die uns von Ntlefy zur Verfügung gestellt wird , und mit Hilfe von Bolt haben wir ND stellt diese Anwendung auf Netlify bereit und fordert uns auf, dieses Netlify-Projekt auf Ihr eigenes Konto zu übertragen dieses Netlify-Projekt Sie können diese URL verwenden, um Anspruch auf diese Anwendung zu erheben . Also klicke ich hier auf diese URL und sie wird mich zu dieser URL weiterleiten. Diese Anwendung ist also bereitgestellt, hieß es, und Sie müssen diese Anwendung beanspruchen , um sie auf Ihr Konto zu übertragen, richtig? Wenn Sie also auf die Schaltfläche zur Beantragung klicken, auf die Anspruchs-URL hier drüben, die Bolt bereitgestellt hat. Ihnen wird diese Anmeldeseite angezeigt , da Sie sich hier authentifizieren müssen. Wenn Sie kein Konto bei Netlify haben , ist das Sie können auf Anmelden klicken und Ihr Konto erstellen lassen Aber ich habe hier ein Konto. Ich bin ein Netlify-Benutzer, also melde ich mich einfach an. Wenn Sie noch kein Konto haben, können Sie sich gerne anmelden. Der Anmeldevorgang ist sehr einfach und kostet Sie nichts. Sie können hier sehen, dass ich mich bei meinem Netlify-Konto angemeldet habe bei meinem Netlify-Konto angemeldet Wenn du dich angemeldet hast, wirst du hier etwas Ähnliches sehen , deine fett gedruckten Apps auf Netlify beanspruchen oder wenn du dich nach dem Anmeldevorgang hier verirrst, kannst du erneut auf diese deine fett gedruckten Apps auf Netlify beanspruchen oder wenn du dich nach dem Anmeldevorgang hier verirrst, URL klicken Richtig? Also, ich sehe diese Claim Maps und ich werde mir Claymps hier ansehen. Es heißt also Apps beanspruchen und die App wurde beansprucht und auf mein Konto hier drüben übertragen . Das kannst du sehen. Es wird von Bolt hier aus bereitgestellt, und zu dieser Zeit wurde es veröffentlicht, und von hier aus können Sie es sogar in Pooled öffnen Sie können also sehen, welche Art von Integration sie mit Netefy haben , und das ist die URL, die Sie Und wenn Sie eine beliebige Domain zuordnen möchten, nehmen wir an, ich habe eine Domain gekauft, zum Beispiel eine Todo-Listen-App oder todo app.com . Das ist eine Domain, die ich gekauft habe Sie können zur Domainverwaltung gehen. Und Sie können die Domain hier hinzufügen, und Sie müssen die Dokumente hier nachlesen, wie Sie eine benutzerdefinierte oder Ihre eigene Domain hinzufügen können. Benutzerdefinierte Domain bedeutet, dass Sie Ihre eigene Domain, Ihre Anwendung, hinzufügen können . Sie müssen diese Schritte ausführen, wenn Sie darauf klicken. Wir geben Ihnen die Schritte, und Sie können den Schritten folgen und Ihre Domain hier hinzufügen lassen. Okay? Also das ist es, und du bekommst das hier drüben. Wenn Sie also versuchen, hier darauf zuzugreifen, können Sie sehen, dass es funktionieren wird. Wenn ich das hier in einem anderen Tab öffne, können Sie sehen, dass es hier funktioniert Lassen Sie mich mit dem Konto anmelden , das ich hier erstellt habe. Du kannst sehen, ich habe mich angemeldet und kann meine Todos auch hier sehen Das war ein neuer Browserbereich, wenn du dich erinnerst, ich habe ihn im Ratemodus geöffnet Ich habe mich mit meinem Konto und den Todos, die ich zusammen mit den Straßen hinzugefügt hatte, authentifiziert den Todos, die ich zusammen mit den Straßen hinzugefügt hatte Alles wird im Browser gespeichert, oder tut mir leid, nicht im Browser, sondern in der Anwendung, die die Datenbank verwendet Und wo auch immer ich mich anmelde, werde ich dasselbe sehen. Selbst wenn ich mich mit dieser URL von meinem Handy aus anmelde , funktioniert es für mich. unsere Anwendung jetzt in der Produktion verfügbar Ich möchte hier sagen, dass unsere Anwendung jetzt in der Produktion verfügbar ist. Und Spezialpanzer sind zu gewagt, oder? Bold hat den Job so einfach gemacht. Hier können Sie also sehen, dass dies auch alle Integrationen sind , die Sie durchführen können Ich sehe Netlify hier nicht, aber wir haben das Bolt-Konto nicht wirklich mit Netlify verbunden , aber wir haben es auf Netlify bereitgestellt und wir haben das Projekt hier für uns beansprucht und aber wir haben das Bolt-Konto nicht wirklich mit Netlify verbunden, aber wir haben es auf Netlify bereitgestellt und wir haben das Projekt hier für uns beansprucht. Das haben wir getan. Ich hoffe, das war nützlich und ich hoffe, Sie haben die Macht der KI verstanden und verstanden, wie Tools wie PLT Ihnen das Leben so viel einfacher machen können und wie Sie mit all diesem Wissen Ihre Ideen testen oder viele Dinge tun Ich hoffe, das war nützlich. 9. Schlussbemerkung zum Kurs: Und jetzt sind wir am Ende unserer Reise angelangt , wo wir gelernt haben, wie wir mithilfe von künstlicher Intelligenz und Tools wie Bolt Dot Nu produktionsreife Anwendungen entwickeln können mithilfe von künstlicher Intelligenz und Tools wie Bolt Dot Nu produktionsreife Anwendungen . Während dieser Reise haben wir untersucht, wie Sie mit diesen Tools echte produktionsreife Anwendungen erstellen echte produktionsreife Anwendungen ohne eine einzige Codezeile schreiben zu Wir haben zunächst verstanden, was Bool Dot New ist, und uns mit der intuitiven Benutzeroberfläche und den Funktionen vertraut gemacht intuitiven Benutzeroberfläche und den Funktionen Von dort aus haben Sie Ihre allererste KI-generierte Anwendung entwickelt und dabei aus erster Hand erlebt, und dabei aus erster Hand erlebt wie einfach Prom-gestützte Anschließend haben wir uns weiterentwickelt und eine To-Do-Listen-Anwendung erstellt. Dabei haben wir begonnen, uns mit der iterativen Entwicklung mit KI zu beschäftigen und zu lernen, wie Sie Ihre Projekte in nur haben wir begonnen iterativen Entwicklung mit KI zu beschäftigen und zu lernen, wie Sie Ihre Projekte in wenigen Minuten verfeinern und erweitern Als Nächstes haben Sie gesehen, wie Sie Datenbanken in Ihre Anwendung integrieren können , und damit das Speichern und Abrufen von Daten freigeschaltet und Abrufen Sie haben auch gelernt, wie Sie Ihre Anwendung in der Produktionsumgebung einsetzen können . Dadurch ist Ihre Anwendung nun über das Internet zugänglich Und falls Sie irgendwelche Ideen haben, die Sie mit der Welt teilen möchten, ist dies der beste Weg, Ihren Anwendungsprototyp zu ist dies der beste Weg erstellen, ihn zusammen mit einer vollwertigen Datenbank und mit der ganzen Welt zu teilen Denken Sie daran, dass dies erst der Anfang ist Neue Entwicklungen und KI-gestützte Entwicklungen entwickeln sich täglich weiter, und es gibt noch mehr zu entdecken Ich ermutige Sie, weiterhin mit den Anwendungskonzepten und neuen Produktideen zu experimentieren , Ihren Arbeitsablauf zu verfeinern und Ihre Kreationen mit der Welt zu teilen Danke, dass du mich auf dieser Reise ohne Code und KI begleitet hast . Ich hoffe, dieser Kurs hat Sie inspiriert und Sie zuversichtlich gemacht, innovative Anwendungsideen schneller und konsistenter als je zuvor zu entwickeln , zu wiederholen und auf den Markt , zu wiederholen und Zu diesem Kurs finden Sie auch ein Klassenprojekt im Projektbereich Ihr könnt es euch ansehen, und ich möchte euch alle sehr ermutigen, das Projekt zu beenden und es mit der ganzen Klasse zu teilen. Bis dahin wünsche ich euch Happy Building und ich können es kaum erwarten zu sehen, was ihr als Nächstes kreiert.