Vibe-Programmierung mit CURSOR IDE: Erstellen und Starten von Micro-SaaS (+ NextJs, Clerk, Supabase, Stripe)

1. Einführung: In diesem Kurs erfahren Sie mehr über KI-Codierung und wie Sie Apps mit der Cursor-IDE erstellen. Obwohl wir Cursor verwenden, können derselbe Prozess und dieselbe Aufforderung auch auf andere IDs wie Winsorf- oder VS-Code mit KI-Erweiterungen angewendet andere IDs wie Winsorf- oder VS-Code mit KI-Erweiterungen Dieser Kurs ist praktisch und wir konzentrieren uns auf die Erstellung von Full-Stack-Anwendungen In diesem Fall bauen wir ein SAS, was für Software as a Service steht. Es ist eine App, die Sie erstellen, für die Sie eine Gehaltsabrechnung einrichten und Benutzer nach dem Abonnement zugreifen können Sie erfahren mehr über den Cursor und wie Sie ihn für die KI-Codierung verwenden können , und wie Sie sich darauf vorbereiten können , selbst zu bauen Wir werden lernen, wie man Chip-SAS-Anwendungen effektiv erstellt, wie man das Abonnementmanagement, den Authentifizierungsanbieter und die Datenbank implementiert Authentifizierungsanbieter und die Anwendungen durchgehend testet. Wir werden das auf SAS lernen , das wir gemeinsam von Grund auf neu erstellen werden. Wir werden uns damit befassen, wie man Stripe für Abonnements einrichtet, ein Kundenportal, um diese zu verwalten. Wie man mit Super Base arbeitet und vielem mehr. Wir werden uns mit den Funktionstests befassen, damit Sie Ihre Anwendung später selbst testen können Anwendung später selbst Insgesamt können die in dieser Sitzung demonstrierten Fähigkeiten auf Ihre anderen Projekte angewendet werden. Lassen Sie uns über den Ansatz sprechen, den wir beim Aufbau der Projekte mit KI verwenden werden. Das Ziel ist wirklich, Sie an den Punkt zu bringen dem Sie Spaß daran haben, Ihre eigenen Produkte in Ihrer eigenen Größe zu entwickeln und an dem Sie das Rad nicht neu erfinden und ein neues Backend für Ihre Anwendungen erstellen , wenn wir über Authentifizierung und Abonnementverwaltung sprechen Authentifizierung und Abonnementverwaltung Wenn Sie nur eines einrichten und es dann wiederverwenden können. Später, nachdem wir ein SAS erstellt haben, werden Sie auch lernen, wie Sie die Funktionstests für die neu erstellte Anwendung durchführen , sodass Sie die Zahlungen, Abonnements und die Datenbank testen und alles lokal einrichten, sodass Sie lokal testen und Fehler beheben können , bevor Sie sie in der Produktion einsetzen. Sie erfahren, wie Sie Webhooks testen, z. B. ob die Zahlungen mit Stripe erfolgreich waren, ob das Abonnement in der Datenbank zugeordnet ist und ob die Authentifizierung mit dem Sachbearbeiter ordnungsgemäß funktioniert KI hat Sie nicht verloren und Sie möchten Anwendungen mit KI erstellen, Spaß haben und einfach Produkte entwickeln, die Sie im Kopf haben, und Ihre Ideen in die Produktion Ich freue mich darauf, Sie in der nächsten Lektion zu sehen. 2. SaaS-Projektdemo: Fahren wir nun mit der Demo fort. Wir sind auf der Landingpage und die Hauptsache dort ist der Aktionscode und ein Teaser Wir haben die Demo, die die Funktionen zeigt, die der Benutzer nach dem Abonnieren unserer SAS-Anwendung erhalten wird , und wir möchten sie abonnieren, und ich werde zur Anmeldeseite weitergeleitet Ich werde mit Google weitermachen. Der Benutzer wurde auch in unserer Datenbank gespeichert. Wir können das Produkt noch nicht verwenden. Wir müssen uns zuerst anmelden. Klicken wir auf Abonnieren, um darauf zuzugreifen. Da sind wir auf der Preisseite. Wir wählen Abonnieren. Jetzt können wir sehen, dass die Zahlung erfolgreich war. Wir gehen zum Dashboard und dort haben wir das Produkt einsatzbereit, und lassen Sie es uns ausprobieren. Sie können zwischen den Chat-Modellen Deese Reasoner und Desk wählen Chat-Modellen Deese Reasoner und Desk Ich zeige Ihnen zunächst die Funktionalität im Designmodus Ich werde dort auf Designmodus aktivieren klicken. Und wenn ich dort zum Beispiel einen Absatz schicke, weiß der Assistent, dass er mit einem Code antworten sollte, der mit Tailwind-CSS gestaltet Ich werde auf Senden klicken und Sie können als Antwort sehen, ich dieses Absatzdesign mit dem Rückenwind-CSS Die nächste Funktion ist, dass ich dort einige Vorlagen habe, zum Beispiel habe ich ihre Vorlage für die Stripe-Integration, also werde ich darauf klicken, bestätigen und jetzt generiert KI die Antwort für die Stripe-Integration Wenn ich das Abonnement kündigen möchte, kann ich das tun. Ich würde einfach mit einem verwalteten Abonnement dorthin gehen. Es wird mich zum Kundenportal weiterleiten und dort kann ich einstellen. 3. AI IDE – Wichtige Informationen: Lassen Sie uns zuerst über KI-IDs sprechen und dann über den Ansatz, den ich für die Erstellung der Projekte verwenden werde. Wir haben eine ganze Reihe von Optionen. Ich benutze und werde den Cursor verwenden, weil ich für mich damit angefangen habe und ich denke, er hat wirklich alles, was ich brauche. Einfach. Es funktioniert, und für mich ist das so ziemlich genug. Es gibt andere Optionen wie vSCDE, mit denen Sie sich vielleicht am wohlsten fühlen, wenn Sie bereits programmieren, weil Sie sie wahrscheinlich in den letzten Jahren verwendet Und es gibt Erweiterungen, die Sie verwenden können, gut, Ru-Code, und ich habe auch von Augment gehört . Dann haben wir Windsurf, das auch eine ziemlich gute KI-IDE ist Und dann haben wir hier den Cursor. Und der Cursor ist die eine IDE, die ich in diesem Kurs verwenden werde. Aber aus meiner Sicht denke ich, dass es nicht das Wichtigste , welche IDE Sie haben. Es geht darum, mit welcher ID du dich am wohlsten fühlst, welche ID du gerne verwendest. Und im Grunde sind Sie neugierig auf einige Funktionen, die Ihnen beim Codieren der Anwendung helfen. Irgendein Chat, das ist zusätzliche Funktion, die Cursor hat, wo du Fragen stellen kannst und er aktualisiert deinen Code nicht direkt, aber er gibt dir die Antworten , die du dann anwenden kannst, ich denke, WinSerf und die erwähnten Erweiterungen im VS-Code haben auch eine ähnliche Funktion, und die dritte Funktion ist, wenn du Code taggen und eine Abkürzung machen wirst, Beispielsweise können Sie in Sutter K den ausgewählten Code mit dem Cursor bearbeiten Aber höchstwahrscheinlich ist nur der KI-Agent derjenige, der Ihnen am meisten hilft und den Sie wirklich benötigen, wenn Sie effektiv sein und KI-Codierung verwenden möchten, um Ihre Anwendungen zu erstellen Die Frage ist, benötigen Sie eine KI-ID? Und die Antwort lautet: Ja, wenn Sie effektiv sein wollen, brauchen Sie sie. Aber natürlich ist es auch möglich, dies nur mit einem Browser, einem Chat (GBT), Clot oder einem anderen Modell zu tun , das Sie verwenden möchten Aber dann wirst du eine Menge Dinge kopieren und einfügen, aber das ist immer noch irgendwie möglich Es gibt jedoch keinen Grund , AI ID nicht zu verwenden. 4. Bau- und Versandansatz: Lassen Sie uns über den Ansatz sprechen, den wir für die Erstellung der Projekte mit KI verwenden werden. Das Ziel ist wirklich, Sie an den Punkt zu bringen, an dem Sie Spaß daran haben, Ihre eigenen Produkte und Ihre eigene Sauce zu entwickeln, und an dem Sie das Rad nicht neu erfinden und ein neues Backend für Ihre Anwendungen erstellen , wenn wir über Authentifizierung und Abonnementverwaltung sprechen Authentifizierung und Abonnementverwaltung Wenn Sie nur eines einrichten und dann wiederverwenden können. Später, nachdem wir die SAS erstellt haben, werden Sie auch lernen, wie Sie die Funktionstests an der neu erstellten Anwendung durchführen die Funktionstests an der neu erstellten Anwendung Sie werden also die Zahlungen, Abonnements und die Datenbank testen und alles lokal einrichten, sodass Sie lokal testen und Fehler beheben können , bevor Sie sie in der Produktion einsetzen. Sie erfahren , wie Sie Webbooks testen ob die Zahlungen mit Stripe erfolgreich waren, ob das Abonnement in der Datenbank zugeordnet ist und ob die Authentifizierung mit Clerk Was wir tun werden, um unsere Anwendungen zu erstellen, wir werden Dritte für die Authentifizierung oder unser Projekt verwenden , wir werden Clerk für die Einrichtung der Abonnementverwaltung einsetzen , wir werden Stripe verwenden und für die Datenbank werden wir SupaBase wir Und all diese drei Anbieter verfügen bereits über eine Dokumentation darüber, wie Sie dies implementieren und dafür sorgen können, dass es mit Ihrer Anwendung funktioniert Das bedeutet, dass wir im Grunde nur ein Next JS-Starterkit erstellen müssen, weil wir unsere Anwendung mit Next JS erstellen werden . Und nachdem wir die Abonnements, die Datenbank und die Authentifizierung eingerichtet haben, werden wir nur das MVP programmieren , damit wir mit der Kernfunktionalität testen können, ob unser Produkt erfolgreich ist oder nicht, und es dann mit der Kernfunktionalität testen können, ob unser Produkt in der Produktion einsetzen Und falls wir die Benutzer bekommen, können wir damit beginnen, darauf aufzubauen und immer mehr Funktionen hinzuzufügen Mit diesem Ansatz können wir mehr Produkte auf den Markt bringen und unseren Bauprozess so effektiv wie möglich gestalten. KI hat Sie also nicht verloren und Sie möchten Anwendungen mit KI erstellen, Spaß haben und einfach Produkte entwickeln, die Sie im Sinn haben, und Ihre Ideen in die Produktion umsetzen. Ich freue mich darauf, Sie in den nächsten Lektionen zu sehen. 5. Cursor-Absturzkurs: Holen Sie sich die Cursor-IDE. Sie werden zu cursor.com gehen und dort die Datei herunterladen Nachdem Sie es heruntergeladen haben, erstellen einen neuen Ordner für meine Anwendung, und ich werde zum Ordner Cursor wechseln Ich ziehe es per Drag & Drop und es öffnet den Ordner in der Cursor-IDE. Jetzt gibt es den Ordner, und darin können wir mit der Erstellung der Dateien beginnen. Unsere Anwendungen werden mit Next JS erstellt. Der Befehl richtet alle erforderlichen Dateien für uns ein, und dann füge ich nur die erforderlichen Komponenten hinzu , damit unsere Seite das gewünschte Aussehen erhält. Um dir zu zeigen, was du dort mit Carolus I machen kannst, öffnest du diesen Chat Dort können Sie sehen, dass Sie den Agenten haben, und er kann den Code für Sie erstellen Wenn Sie dorthin wechseln, können Sie einfach fragen, und es wird kein Code erstellt. Zum Beispiel, wie man die nächste JS-Anwendung erstellt. Damit wird er die Befehle nicht für Sie ausführen, sondern Ihnen nur sagen, welchen Befehl Sie verwenden sollten. Sie können es auch direkt von dort aus ausführen, aber wenn Sie es unter Kontrolle haben möchten , können Sie einfach auf Kopieren klicken. Dann öffnen Sie das Terminal. Sie können eine Abkürzung verwenden oder Sie können einfach Terminal, neues Terminal verwenden. Und bevor ich diesen Befehl benutze, mache ich am liebsten und er benutzt eigentlich keine KI für diesen Befehl, weil ich lieber auf Talen-CSS gehe und dort den aktuellsten Befehl ankreuze, um die Anwendung zu erstellen. Es ist möglich, dass sie ein Update für die neue Tailwind-Version den aktuellsten Befehl ankreuze, um dort den aktuellsten Befehl ankreuze, um die Anwendung zu erstellen. Es ist möglich, machen , und es ist noch nicht im Modell enthalten, und es ist einfach viel einfacher als Die Eingabeaufforderung AI, dann werden Sie den Befehl seitenweise Anstelle der Mapp fügen Sie dort einen Punkt ein, der diese App in Ihrem Ordner erstellt Sie drücken die Eingabetaste, dann tun Sie Ja für Rückenwind, nein für Quellverzeichnis, nein für Turbopek, nein für Es wird die Abhängigkeiten installieren, und von nun an werden wir KI verwenden Und wenn wir wieder zum Agenten wechseln, können wir mit unserer ersten Aufforderung beginnen. Und es wird eine Testaufforderung sein, weil ich Ihnen zeigen möchte, was wir dort mit dem Cursor machen können und einige echte Grundlagen. Wenn du KI einfach fragen möchtest und nicht zulassen möchtest, dass sie deinen Code aktualisiert, wirst du auf „Fragen“ umschalten, und dort bitte zum Beispiel, wie ich meine Ausleihseite aktualisieren kann. Anstatt einfach schnell deinen gesamten Code auf deiner Ausleihseite zu ändern, wird dir nur gesagt, wie du das machen kannst. Was gut ist, wenn du vielleicht zum Beispiel Programmieren lernen möchtest , da kannst du sehen, ich habe uns gerade die Antwort gegeben . Auch einige Vorschläge. Wir können es auch anwenden, aber es hat nichts gebracht. Wenn Sie dort den Agenten angeben und dort, ändern Sie bitte meine Landingpage, der Agent wird gestartet und dann können wir natürlich immer noch ablehnen, aber Sie können sehen, dass es bereits begonnen hat, den Code zu ändern. In einigen Fällen, wenn Sie eine Funktion für die Anwendung implementieren möchten, werden natürlich wenn Sie eine Funktion für die Anwendung implementieren möchten, die Ordner hinzugefügt, und ja, jetzt liegt es an uns, ob wir das akzeptieren wollen oder nicht. In diesem Fall kann ich das akzeptieren, und wenn ich mit der Ausgabe nicht zufrieden bin, kann ich Restore Checkpoint ausführen, dann werde ich weitermachen, es wird es einfach zurückgesetzt, und jetzt ist der Code weg nächste coole Sache ist, dass Sie dort auch ein Bild einfügen können Wenn Sie also eine Vorstellung davon haben wie Ihre Seite aussehen soll, können Sie die Seite dorthin schicken, und es wird zumindest das Layout kopiert und versucht, ein ähnliches Design zu erstellen. Wenn Sie nach einer bestimmten Datei fragen möchten , können Sie sie dort bearbeiten. Wir gehen zu Dateien und Ordnern und bearbeiten einfach die Datei oder gehen direkt zum Ordner. Aber meistens werden Sie wirklich nur diesen Agenten verwenden, Ihre Aufforderung dort eingeben, sie dann akzeptieren, sie noch einmal überprüfen und die Anwendung Schritt für Schritt erstellen, ohne etwas Verrücktes dort einzufügen, etwa, ich mache keine 150 Zeilen mit ich mache keine 150 Zeilen Eingabeaufforderungen, weil es dann vielleicht nur einen Teil davon implementiert. Es wird versuchen, alles in einem schlechten Zustand zu machen. Ich kann es wirklich nicht empfehlen, und ich empfehle, eine kleinere Eingabeaufforderung zu verwenden. Was ich auch gerne verwende, wenn ich einen Teil gesehen habe, der mir nicht gefällt, sagen wir zum Beispiel, dass mir dieses Div nicht gefallen wird, ich werde es einfach so nehmen. Mach Sutural Plus und es öffnet sich dieses Fenster. In diesem Fenster kann ich eine Eingabeaufforderung eingeben und den Code bearbeiten Normalerweise finde ich ein solches Element und es hat zum Beispiel ein besseres Layout. Ich muss eine kleine Änderung vornehmen, also möchte ich einfach etwas auswählen oder etwas verfeinern, und ich werde dort, bitte, das Design dieses Elements aktualisieren. Und dann wird es anfangen generieren und einfach den ausgewählten Code zu aktualisieren, was großartig ist, weil dann nichts von Ihrem anderen Code kaputt geht. Falls Sie eine vielleicht komplexere Implementierung haben, wenn Sie diese in den Agenten einfügen, ja, wahrscheinlich wird auch nur der Code aktualisiert, den Sie wirklich aktualisieren möchten. Aber es ist schon oft passiert, dass sie einfach angefangen haben nachzudenken und auch einige unnötige Änderungen vorgenommen und dann den Code kaputt gemacht haben, und das ist einfach eine reibungslosere Art, Dinge zu reparieren falls Sie wissen, wo genau das Problem ist, das Sie lösen möchten Jetzt kann ich es einfach akzeptieren und das war's. Kein anderer Code wurde geändert, und das ist es im Grunde. Nehmen wir den Code mit Idol K, schreiben hier Aufforderungen, um den bestimmten Teil zu aktualisieren, fragen direkt beim Komponisten, dem Agenten, und meistens senden wir die Eingabeaufforderungen dorthin und akzeptieren dann einfach den Code oder fragen im Chat nach, falls Sie nach einer bestimmten Funktionalität fragen, ein Brainstorming durchführen oder etwas herausfinden möchten, ohne Ihren Code zu bestimmten Funktionalität fragen, ein Brainstorming durchführen oder etwas herausfinden möchten, ändern Dies wird das Cursor-Intro sein, und wir werden mehr erfahren, indem wir bauen sehen uns in der nächsten Lektion, in der wir tatsächlich anfangen werden, etwas zu bauen 6. AI API-Schlüssel abrufen: Wir benötigen zuerst ABI-Schlüssel und können dann mit der Erstellung der Anwendung beginnen. Ich werde Deepsk AIIBike verwenden, aber Sie können jeden KI-API-Schlüssel verwenden, den Sie verwenden möchten Zum Beispiel können Sie mit der Gemini AI API einen kostenlosen API-Schlüssel erhalten, den Sie verwenden können, und nachdem wir ihn erhalten haben, werden wir ihn irgendwo speichern Wir werden es verwenden, nachdem wir mit der Entwicklung in Cursor begonnen Holen wir uns jetzt zuerst die API-Schlüssel. Wir werden auf Platforms.com gehen. nächste wichtige Abschnitt die API-Schlüssel. Dort werden Sie einen neuen API-Schlüssel erstellen und diesen im Cursor oder in Ihrer IDE verwenden, wo Sie den Code aus der Dokumentation verwenden werden Sie können dort sehen, ich werde einfach eine neue erstellen. Ich kann es zum Beispiel Cursor nennen, aber wenn Sie es in einer anderen IDE verwenden, ist es auch in Ordnung. Kurzer Hinweis: Sie können jeden AI ApiKey verwenden , den Sie verwenden möchten Zum Beispiel gibt es auch diesen kostenlosen Gemini-APIKey Wenn Sie zu astudio.google.com Slash APIK gehen, gelangen Sie auf diese Seite, auf der Sie sich mit Ihrem Google-Konto anmelden und dann ApiKey erstellen und diese Gemini-API auch kostenlos verwenden können . Wenn Sie zu astudio.google.com Slash APIK gehen, gelangen Sie auf diese Seite, auf der Sie sich mit Ihrem Google-Konto anmelden und dann ApiKey erstellen und diese Gemini-API auch kostenlos verwenden können. Denken Sie nur daran, dass Sie, wann immer ich über Deep Seek oder die Verwendung von Deep Seek spreche, die Eingabeaufforderung so anpassen, dass stattdessen die Gemini-API verwendet wird über Deep Seek oder die Verwendung von Deep Seek spreche, die Eingabeaufforderung so anpassen, dass stattdessen die Gemini-API . Das sind nur Informationen für Sie, sodass Sie die KI-Anbieter ganz einfach austauschen können Jetzt gehen wir zu apitps.com und dort werden wir in Ihrem ersten API-Aufruf diese Dokumentation haben, die wir verwenden werden, um unseren ersten API-Aufruf zu erstellen Wir haben dort die Basis-URL. API-Schlüssel ist der, den wir gerade auf der Seite bekommen haben, und dort werden wir neugierig auf diesen Codeblock in einem Node-JS sein. 7. Eingabeaufforderung 1: Kernfunktionen, Ausgangspunkt: Sollte jetzt die Next Jz-Anwendung aus der letzten Lektion haben. Falls nicht, kannst du jetzt mit mir kreieren. Auch beim Versuch der Aufforderung werde ich uns einen Befehl besorgen, werde ich uns einen Befehl besorgen das nächste Jz mit Rückenwind erstellen Dort werden wir ein neues NextGZ-Projekt erstellen ein neues NextGZ-Projekt Wir werden weitermachen. Wir werden einem Browser eine Notizquelle mit Ja und dann die empfohlenen Optionen hinzufügen. Nachdem der Vorgang abgeschlossen ist, werden wir die Open AI-Bibliothek installieren. Das NPM ist OpenAI, es wird das installieren und dann können wir anfangen, mit dem Code zu arbeiten, den wir in der Dokumentation haben Wir erstellen einen API-Ordner mit Route Ts und fügen dort den Code Jetzt werde ich dieses Modell auf Reasoner umstellen, da es auch da ist, und ich werde den API-Schlüssel bekommen Also werde ich auf die Plattform deepsk.com gehen. Dort. Wenn Sie diesen Schlüssel gespeichert haben, können Sie ihn einfach einfügen und wir werden ihn dort ablegen. Es wird genau an dieser Position sein, und wir werden einen Ordner erstellen, Deep Seek, und ich werde die Route dort platzieren damit wir eine bessere Ordnerstruktur haben. Jetzt werde ich das in Composer einfügen, als API-Endpunkt für die Interaktion mit Deep Seek fungieren, und dort können Sie sehen, dass es uns Code zur Verfügung gestellt hat, den wir einfach akzeptieren können. Wenn Sie den Deepsk-API-Schlüssel in Umgebungsvariablen speichern möchten , fügen Sie ihn einfach dort in der Punkt-N-Datei Ansonsten ja, ich kann dir jetzt unseren API-Schlüssel zeigen. Ich werde es einfach später löschen, also spielt es keine Rolle. Jetzt werde ich dort eine neue Aufforderung namens Deep Seek API-Route vom Frontend zum Generieren von Inhalten einfügen . Dadurch wird eine Komponente für mich erstellt , in der wir die Antworten von Deepsek R One abfragen und erhalten können Antworten von Deepsek R One abfragen und erhalten Jetzt werden wir Cursor auch anweisen, die Seite zu bearbeiten. Und jetzt sollte es fertig sein. Wir werden NPM R auf einem tauben, offenen lokalen Host ausführen. Ich kann sehen, dass es einige Fehler gibt, also lassen Sie uns sie einfach mit Composer beheben . Jetzt sind wir grün, also sollte es in Ordnung sein Jetzt gibt es noch einen weiteren Fehler, und bevor wir ihn versuchen, sollten wir ihn einfach mit einem Composer beheben. Also hat es die Route Ts aktualisiert. Und bevor wir sagen, wo alles gut lesbar sein wird, werde ich dort einfach eine Textdatei erstellen ich Ihnen die Eingabeaufforderung zeige, die ich gemacht habe. Generieren Sie also bitte eine vollständige Seite in XS, auf der hauptsächlich ein Chat-Fenster für die Interaktion mit Deep Skir angezeigt wird hauptsächlich ein Chat-Fenster für die Interaktion mit Deep Skir angezeigt Interaktion mit Deep Skir Das Seitendesign sollte ein modernes, futuristisches, schönes und minimalistisches Aussehen haben schönes und minimalistisches Es sollte Talen-CSS verwenden, sie verdunkeln und so weiter. Wir werden es dort einfügen, senden und mal sehen, was sich ARO einfallen lässt Es wird also die Antwort dieser Komponente einfügen. Da bekommen wir eine solche Benutzeroberfläche, was nicht schlecht ist. Ich werde versuchen, dort eine weitere Aufforderung Generieren eines Teils des Codes einzufügen. Und Sie können sehen, dass ich den Inhalt erhalte , den wir in unserem Code korrigieren müssen , um besser formatierte Antworten usw. zu erhalten , weil er ihn uns in einer Zeile gibt Wir können den Cursor tatsächlich bitten, ihn zu formatieren. Dort wählen wir das einfach aus, machen CeDerK. Bitte formatieren Sie das. Wir können auch versuchen, das Modell für den Deep Sk-Chat umzustellen , und wir können es einfach dort im Modell tun. Deep-Sk-Chat statt des Reasoners. Wenn du es speicherst und dort Hallo sagst . Ist das ein Reasoner oder ein Chat-Modell? Es wird uns antworten, dass es sich um ein Chat-Modell handelt. Falls Sie es auch wechseln möchten, können Sie dies ganz einfach so tun. Aber ich werde es wieder auf Resoner setzen und wir werden jetzt die Benutzeroberfläche verbessern Jetzt können wir versuchen, mit Talent-CSS eine ansprechende Button-Komponente in Neck JS zu generieren eine ansprechende Button-Komponente in mit Talent-CSS eine ansprechende Button-Komponente in Neck JS Wir erwarten also, dass ein Komponentenstil mit Rückenwind-CSS ein Abonnement für unseren Newsletter ermöglicht Jetzt machen wir einen Screenshot dieser Benutzeroberfläche, und ich werde ihn dem Cursor zur Verfügung stellen und im Composer werde ich darum bitten, die Benutzeroberfläche zu verbessern Wir erhalten also diese Antworten. Bitte erstellen Sie eine Benutzeroberfläche, die besser aussieht und die Benutzererfahrung verbessert. Ich möchte, dass Antworten in Code formatiert werden, Eingabeaufforderung besser angezeigt wenn nötig, die Anzahl der Zeilen vergrößert , eine bessere Farbgebung usw. Es wird den Code für die Komponente bereitstellen. Wir werden es akzeptieren. müssen wir einige Plugins installieren. Also werden wir dort, wie empfohlen, die Installation mit dem ersten Befehl und jetzt auch mit dem zweiten so oder andersherum ausführen mit dem ersten Befehl und jetzt . Jetzt hat es eine zusätzliche Tailwind-Konfigurationsdatei erstellt, also werden wir sie einfach zusammenführen und die Javascript-Datei löschen können Bitten wir auch darum, das Problem richtig zu beheben , da wir auch einige andere Plugins installieren müssen einige andere Plugins installieren müssen Nachdem wir das eingestellt haben, werden wir NPM Run Dev erneut ausführen. Und es sollte funktionieren. Also haben wir dort unseren Deep Seek AI-Chat. Ich werde nach der Komponente für das Abonnement des Newsletters fragen und auf die Antwort warten. Und wenn man sich die Antwort ansieht, sieht alles viel besser aus. Ich werde jetzt diese Newsletter-Komponente erstellen und dort den Code einfügen. Ich muss dieses Plugin, ReactoKfm, installieren , damit ich es einfach machen kann. NPM, ich reagierte Jeder hilft uns auch dabei, zu sagen, wie wir es installieren sollen Dann auf der Seite, die ich jetzt bearbeiten werde , bevor ich diesen Code einfach formatiere. Und wir werden dort unter diesem Absatz bearbeiten. Wir müssen auch importieren. Da fehlt uns nur der Use-Client , weil dies eine Client-Komponente ist, und jetzt haben wir sie da. Und wenn wir es senden, sollten wir die Erfolgsmeldung erhalten. Jetzt wollen wir das Erinnern an den Kontext unseres Chat-Fensters implementieren . Also werde ich im Composer eine Aufforderung einfügen, mich an den Kontext zu erinnern, und dort werde ich ihn jetzt testen. Bitte generieren Sie die Schaltfläche mit einer einfachen Funktionalität mit HTML und CSS. Jeder wird diesen Button für uns generieren, und jetzt werden wir Sie bitten, ihn mit Rückenwind-CSS zu senden Das heißt, er muss sich die letzte Nachricht merken, die er gesendet hat , und er muss das CSS auf Tail-End-CSS ändern Und wie Sie sehen können, hat er sich daran erinnert und uns die Schaltfläche zur Verfügung gestellt, über die wir auch das hintere CSS sehen können. Jetzt ist der Kontext des Chats behoben. 8. Eingabeaufforderung 2: Entwurf: Wir werden einfach bei den grundlegenden Chat-Bood-Funktionen aufhören den grundlegenden Chat-Bood-Funktionen und nicht weiter gehen Nun, mit der zweiten Aufforderung an ihrem Switch und auch einer Template-Funktion. Für Switch möchte ich, dass der Benutzer vom Reasoner zum Chat-Modell wechseln kann vom Reasoner zum Chat-Modell wechseln Ich frage mich nur , ob der Benutzer auf eine einfache Tabelle klickt und er sie hat Für das Templating möchte ich dort eine Vorlage haben, zum Beispiel die Generierung eines Angestellten für die Webanwendung Und wenn der Benutzer auf diese Vorlage klickt, antwortet ihm das Boot einfach Damit können Sie im Grunde immer mehr Vorlagen hinzufügen, und dann kann der Benutzer einfach die Vorlage auswählen, darauf klicken, und der Chat-Bad öffnet und er muss nicht nachdenken, vielleicht sollten Sie das generieren, das generieren und so weiter, und wir werden dort eine grundlegende Struktur der Aufforderung haben , aus der der Benutzer wählen kann Nehmen wir also diese Eingabeaufforderung und platzieren sie dort. Jetzt bin ich in Crouser und werde das Modell Deep Seek R verwenden , aber wenn Sie es auf der Website verwenden, wenn Sie Cursor nicht verwenden möchten oder wenn Sie es mit Rohcode in VS-Code verwenden , sollte das auch in Ordnung sein, aber Sie müssen den Code nur dem Tool zur Verfügung stellen, in dem Sie ihn verwenden Wenn Sie sich auf einer Website befinden, müssen Sie einfach dort eine Seite platzieren. Im Rohcode kann es auch den Kontext lesen. Ich werde es in den Composer stellen und wir können sehen, dass der Benutzer unserer Next Jz-Anwendung zwei Funktionen hinzufügen möchte, und da ist es, wir werden es akzeptieren und wir schauen uns die Seite an und schauen uns die neuen Funktionen Auf unserer Seite haben wir es dort, und es sieht so aus, als könnten wir leicht zwischen Chat und Reasoner wechseln, und versuchen wir, dort einen Einrichtungsassistenten einzurichten. Die Eingabeaufforderung wird eingefügt. Wir müssen die Benutzeroberfläche noch aktualisieren damit sie etwas benutzerfreundlicher ist, da Sie sehen können, dass dort die Eingabeaufforderung für den Einrichtungsangestellten angezeigt wird die Eingabeaufforderung für den Einrichtungsangestellten angezeigt Wenn der Benutzer es also implementieren möchte , klickt er einfach darauf Wir möchten also, dass dies sofort ausgeführt wird und der Benutzer keinen zusätzlichen Schritt ausführen muss sofort ausgeführt wird und der Benutzer keinen zusätzlichen Schritt ausführen , um auch auf Gesendet zu klicken. Und ich würde das auch gerne aus dem Chatfenster löschen. Also die Auswahl des Modells irgendwo unten oder vielleicht oben, und diese Vorlagen würde ich vielleicht auf der linken Seite platzieren oder so 9. Eingabeaufforderung 3: Kleinere Funktionen: Habe diesen Abschlussball auch verbessert. Ich habe es einfacher geschrieben, aber dann habe ich es an KI geschickt und ihr gesagt, sie soll es für mich verbessern, und jetzt haben wir es da. Also lass es uns durchgehen. Zunächst möchte ich die Funktionalität meines Projekts verbessern , indem ich neue Funktionen hinzufüge. Was wir brauchen, ist eine Modellauswahl. Also ich möchte das außerhalb des Chat-Fensters platzieren, und es ist da, weil ich möchte, dass der Benutzer zwischen Reasoner und Chat wechseln kann Was den zweiten Punkt betrifft, die Funktionen der Vorlage. Daher sollten die Vorlagenfunktionen auf der linken Seite der Benutzeroberfläche platziert werden . Und dort wollen wir auch einige Stripe-Integration, Prisma Warm, Umgebungsvariablen usw. hinzufügen Prisma Warm, Umgebungsvariablen usw. Sie können dort immer mehr hinzufügen was auch immer Ihnen in den Sinn kommt, Sie können dort hinzufügen Ja, es wird etwas sein, was der Administrator dann für seine Benutzer verwalten wird. Also habe ich dieses Beispiel dort eingefügt. Was mir dann fehlt, um ehrlich zu sein, ich kann mir das nicht vorstellen. Lass uns weitermachen, und ich werde zurückgehen. Aber ich denke, als es erweitert wurde, ihre Funktionalität entfernt. Fügen Sie Funktionen hinzu, ich werde sie dort notieren und darauf zurückkommen. Gehen wir zum dritten Punkt. Wo ist die neue Funktion zur Kontextualisierung der Tuggle-Taste? Diese Funktionalität sollte also eine Schaltfläche zur Benutzeroberfläche hinzufügen. Und wenn darauf geklickt wird, ändert sich eine Schaltfläche, um anzuzeigen, dass sie aktiv ist Und wenn es aktiv ist, sollte Deep Seek einen Kontext haben diese KI modern und minimalistisch wie Shed CN UI zu gestalten Der Zweck besteht darin, dass KI, wenn der Benutzer Code einfügt, während der Modus aktiv ist , eine verbesserte Version des Codes zurückgibt, wodurch die Benutzeroberfläche und die Benutzerfreundlichkeit verbessert werden wodurch die Benutzeroberfläche und die Benutzerfreundlichkeit verbessert sodass sie modernen minimalistischen Standards entsprechen, beispielsweise in CheCN Dann habe ich da auch ein Ziel. Sinn dieser Aufforderung besteht also darin, für jede Oberfläche eine Funktion zu erstellen , bei der der Benutzer Kontrolle über die Modulauswahl hat und die letzte Zeile, die wir nicht benötigen. Und jetzt gehen wir zurück zu den Vorlagenfunktionen dort bei der Funktionalität. Also was ich dort gemacht habe, die Funktionalität ist, dass, wenn wir auf die Vorlage klicken, der Deep Sk anfangen sollte zu reagieren, weil wir nicht wollen, dass der Benutzer in dem zusätzlichen Schritt auch auf Senden klickt. Das ist eine ziemliche Aufforderung, aber nehmen wir sie. Gehe zur Seite. Ich werde einen Komponisten eröffnen. Übrigens müssen Sie keine Eingabeaufforderungen in diese Prompts-Datei schreiben Ich schreibe es dort nur für dich. Du kannst es einfach von meinem Github kopieren und einfügen und es in dein Chat-Fenster mit KI einfügen. Lass es mich dort einfügen. Lass uns sehen, was Deep Seek gekocht hat. Ich werde es akzeptieren. Jetzt sollten wir es haben. Lass uns auf die Seite gehen. Und vielleicht die Färbung, ich würde eine dunklere nehmen, vielleicht die Farbdetails, wir können sie loswerden. Gehen wir zurück zu ID. Und jetzt werden wir in Composer darauf hinweisen, dass wir die Benutzeroberfläche unserer Anwendung aktualisieren möchten , und ich werde dort angeben, dass ich subtile Schatten, glatte Übergänge und abgerundete Ecken haben möchte . Sie können dort das Design einfügen , das Sie für Ihre Anwendung haben möchten , oder KI bitten, Ihre Eingabeaufforderung zu verbessern, sodass Ihre Anwendung auf ein dunkles Design mit Detailfarben aktualisiert wird ein dunkles Design mit , die Sie erwähnen werden, usw. Dann nehme ich diese Aufforderung, füge sie in Composer ein und lasse die KI das Design entwerfen. Wir werden nur das Design ändern, nicht die Funktionalität. Das ist wichtig , weil wir sicherstellen wollen , dass die Funktionalität nicht beeinträchtigt wird. Also werde ich einfach darum bitten, die Grenzen aufzuheben, ich denke, wir können das schaffen. Und um ehrlich zu sein, werde ich nicht einmal dazu auffordern, wir werden das hier von Her Border Purple entfernen. David. Was ich auch tun werde, ist, dass ich diese Deep Seek-Sache ändern , weil unsere Seite nicht Deep Seek ist. Unsere Seite ist unsere Seite, wir haben den Namen, den Sie wählen werden. Lass uns etwas Lustiges versuchen. Also da in der Kopfzeile. Ich werde Cider plus K machen. Ich kann es jetzt auf Kleidung umstellen , weil es nur eine Textgenerierung sein wird Für die Aufforderung möchte ich den Namen ändern. Also werde ich zum Beispiel AI Fullstack Kitchen und zwei Beschreibungen verwenden , etwas Einprägsames, gebrauchte Vorlagen, schnell gebaut, heute ausliefern. Das ist nur eine Idee Natürlich liegt es an Ihnen, was Sie entscheiden werden . Ich werde es speichern. Jetzt können Sie die Seite erneut überprüfen. Okay, vielleicht ist der MOG nicht gut. Von wird diese Aufforderung verwenden. Vielleicht ist dieses Heidekraut nett, modern, schön, einprägsam, minimalistisch, futuristisch und so weiter, Also lass uns das benutzen. Ich habe auch dort Abschlussball gemacht, dass es momentan sehr einfach aussieht. Ich werde es akzeptieren. 10. Eingabeaufforderung 4: Anpassungen: Was ich jetzt weiß , ist , dass diese Vorlagenauswahl wahrscheinlich nicht funktionieren wird, und ich werde auch das Chatfenster erweitern da es sich derzeit in der 1,5-Zeile Bitte verfeinern Sie die aktuelle Funktionalität des Eingabeaufforderungsfensters in unserer Komponente. Derzeit zeigt das Textfeld für die Chat-Eingabeaufforderung in meiner Chat-Anwendung nur 1,5 Zeilen Und das wollen wir verbessern. Das Textfenster oder das Textfeld sollte vertikal wachsen, und ich habe so etwas wie Chat GBT Ich gebe dort auch an, dass er es vielleicht auch auf seiner Website macht, aber es ist momentan nicht verfügbar, also kann ich nicht sagen, ob das eine bessere UIC ermöglichen wird Kopieren wir diese Aufforderung und fügen sie dort ein. Hoffentlich möchte ich dafür die Verbindung unterbrechen. Nein, aber Spaß beiseite, die Argumentation ist ziemlich Ja, er hat es wirklich auf den Punkt gebracht. Ja, alles ergibt absolut Sinn. Ich stimme zu, was er vorschlägt. Lassen Sie uns also die von ihm vorgenommenen Änderungen nutzen. Lasst uns das akzeptieren. Hoffentlich macht er uns wegen der Nachricht keinen Streich . Lass uns die Seite überprüfen Jetzt werden wir die Vorlage testen, also klicke ich dort auf Clark und du kannst sehen, dass sie gesendet wird, aber du musst noch einmal auf die Schaltfläche klicken , nachdem du sie angeklickt hast, die erste. Wir müssen zumindest eine Bestätigung implementieren, und es ist eigentlich eine ziemlich gute UX. Wir können es also so belassen, aber wir werden auch eine Bestätigungsebene über der ausgewählten Vorlage implementieren eine Bestätigungsebene über . Lassen Sie uns mit der fünften Eingabeaufforderung für die Funktionalität beginnen, wenn ein Benutzer auf eine Vorlage klickt und diese im Textfeld angezeigt wird Wenn der Benutzer dann erneut darauf klickt, fügen Sie eine Erweiterung hinzu. Der Benutzer weiß also, dass er dies nur bestätigen muss. Wir werden die Aufforderung dort einfügen und an Deepsk senden. Dort haben wir die Begründung und da ist die Ausgabe. Lass es uns akzeptieren Das sieht ziemlich gut aus, aber es wählt fast alle Vorlagen aus. Das müssen wir reparieren, aber ansonsten sieht es ziemlich gut aus. Bei der letzten Vorlage funktioniert es irgendwie, aber wir werden es schaffen, es zu reparieren. Wir sind wahrscheinlich nur einen Augenblick davon entfernt, das Ganze zum Laufen zu bringen. Lassen Sie uns dort angeben , dass dies für Stripe N für andere Tasten ordnungsgemäß funktioniert. Wenn ich auf sie klicke, wird die Konformation angezeigt, aber ja, sie sind zusammengebunden Wir werden uns noch einmal die Begründung für unsere Frage holen. Was ist da, das Problem, wie muss er es beheben und so weiter Dann werden wir alles akzeptieren, jetzt werden wir es testen. Hey, und es sieht gut aus. Jetzt funktioniert es richtig. Lassen Sie uns versuchen zu bestätigen, und es wird gesendet. Und das bedeutet, dass wir gerade eine neue Funktionalität in unsere Anwendung implementiert haben. Ich werde jetzt den Designmodus testen. Lassen Sie uns versuchen, dort Code einzufügen und ihn ohne Kontext zu senden und zu sehen, was passiert. Und jetzt habe ich den aktiven Designmodus nicht aktiviert. Wir werden es zuerst ohne es versuchen und dann werden wir es überprüfen. Da haben wir den Code. Sie können nur eine Antwort darauf sehen, was er wahrscheinlich mit diesem Button machen kann, ich für die Aufforderung sechs geschickt habe. Lassen Sie uns sagen, wenn der Designmodus aktiviert ist, möchte ich nur erweiterten DI-Code mit tailNCSS zurückgeben, ohne zusätzlichen Text und die guten Styling-Praktiken wie zuvor beibehalten die guten Styling-Praktiken wie Ich möchte das verbessern, denn wenn ein Benutzer diesen Entwurfsmodus verwendet, können Sie dort jetzt alles einstellen, was Sie für ihn möchten Wenn Sie also zum Beispiel einen TelnCSS-Kontext für Ihre Anwendung haben , geben Sie ihn einfach dort ein. Bitte verwenden Sie TelnCSS jedes Mal, wenn Sie kein reines CSS Sie können dort im Grunde alles einstellen, und ich mag diese Funktion wirklich Ich werde dort vorerst das TelwnCSS platzieren und wir werden es auf einer Schaltfläche testen , die wir zuvor gesendet haben, und wir werden überprüfen, was die Antwort ist Idealerweise sollte es nur ein Code mit den Rückenwind-Klassen sein. Und es funktioniert Jetzt können wir in diesem Nutzeffekt die Ausgabe aktualisieren, weil ich nicht möchte, dass diese Codes am Codeende beginnen. Das brauchen wir nicht, weil der Benutzer nur die vollständige Antwort kopieren und in seinen Code einfügen möchte . Er möchte den Code-Start und das Code-Ende nicht entfernen. Er will nur den Code versenden, die Antwort bekommen, ihn kopieren und einfügen und fertig. Ich werde die Aufforderung vorbereiten, weil wir eine Funktion zum Kopieren und Einfügen benötigen Es wird uns die Antwort schicken. Wir werden sie akzeptieren. Jetzt werden wir es testen und wir werden es kopieren, und wir sollten es in unserer Zwischenablage haben und wir können es einfügen Das bedeutet, dass diese Funktionalität funktioniert und wir werden ihr einfach eine bessere Benutzeroberfläche hinzufügen Der Benutzer klickt auf das Kopieren der Zwischenablage. Es wird auch das Symbol ändern. Das zeigt an, dass es erfolgreich kopiert wurde. Jetzt werden wir die Benutzeroberfläche dort verbessern. Ich werde das Farbteam auf Grau mit Kalkdetails ändern . Dann werde ich ein Designelement hinzufügen, einen tollen Hintergrund. Du kannst das einfach von meinem Git nach oben kopieren . Auf der Seite wird es so aussehen. Wir werden einige Hintergründe entfernen. Bei einigen abgerundeten Excel-Klassen zur Ausrichtung unseres Designs wird dadurch der Randradius vergrößert. Wir halten uns zurück, wenn wir eine lange Nachricht sehen, das wird passieren. Wir machen die Aufforderung sieben. Bitte beheben Sie das Problem, dass ein Benutzer eine lange Nachricht schreiben kann, diese aber nicht richtig formatiert ist wodurch die Nachricht erweitert wird, überläuft usw. Wir werden es senden und es sollte das Problem beheben. Wenn Sie die Farbe der Bildlaufleiste ändern möchten, dies in Globals Dot Css Übrigens, für die Rolle dort im Nachrichtenkontext korrigieren wir sie einfach als Benutzer oder Assistent 11. So liefern Sie Apps schnell: Jetzt ist es an der Zeit, Ihren SAS-Anwendungen ein Back-End hinzuzufügen. Und was ist der einfachste Weg , tatsächlich am Backend zu sein und eine funktionierende SAS-Anwendung mit bereits funktionierender Authentifizierung, Datenbank, Abonnementverwaltungssystem usw. zu haben eine funktionierende SAS-Anwendung mit bereits funktionierender Authentifizierung, Datenbank, Abonnementverwaltungssystem usw. zu Es verwendet Strikit, das Sie in Ihren Projekten wiederverwenden können Es wird einen Kern Ihrer SAS-Anwendungen geben. Denn sobald Sie dieses Setup eingerichtet und bereit haben, können Sie einfach mehrere Anwendungen darauf aufbauen. Sie klonen einfach das Repository und erstellen Anwendung eins, Anwendung zwei, Anwendung drei und so weiter. Und auf diese Weise können Sie Anwendungen wahnsinnig schnell chippen, weil es keinen Sinn macht , das Rad jedes Mal neu zu erfinden, wenn Sie eine neue Anwendung erstellen Deshalb gebe ich Ihnen jetzt zwei Optionen. Verwenden Sie zunächst ein Clerk Building Startikit, was das einfachste ist, und zweitens das Stripe Berk Billing verwendet die Funktion Clerk Billing, die Stripe eigenständig implementiert Es fallen einige höhere, aber immer noch sehr geringe Gebühren pro Benutzer an. Wenn Sie Ihre ersten Anwendungen erstellen und wir über Hunderte, vielleicht sogar Tausende von Benutzern sprechen , glaube ich nicht, dass sich zwischen diesen beiden so viel ändert. Ich persönlich verwende Clerk, aber das Stripe Starter Kit macht ziemlich viel Spaß Du hast ein bisschen mehr Kontrolle. Sie integrieren Stripe selbst, und es ist immer noch sehr gut zu wissen, wie man es benutzt. So lernen Sie, wie Sie Clerk Billing oder sogar ein Stripe SAS-Startukit verwenden Clerk Billing oder sogar ein Stripe SAS-Startukit In den folgenden Lektionen werden wir dieses Clerk Startkit, das einfachste , das Sie verwenden können, besprechen und durchgehen dieses Clerk Startkit, das einfachste , das Sie verwenden können, Mit der Funktion Clerk Billing ist wirklich nichts einfacher für Ihre AISAS-Anwendung zu verwenden da Sie nur eine Sache oder im Grunde zwei Dinge erledigen müssen , Sie werden diese beiden integrieren und sie werden nahtlos zusammenarbeiten, was absolut großartig ist, was absolut großartig ist denn dann müssen Sie sich wirklich keine Gedanken über den Aufwand beim Einrichten der Webhooks für Stripe und Meiner Meinung nach ist dies also der beste Einstieg in das Kit und diese Drittanbieter sind die besten, mit denen Sie Ihre SAS-Versandreise beginnen können Ich werde Ihnen in den folgenden Lektionen erklären , wie Sie sie verwenden können Und dann kannst du später mit den KI-Videos weitermachen , die ich zur Entwicklung des Produkts selbst habe, und dann kannst du auf dem Starterkit aufbauen. Sobald Sie also das Start-Ukit verstanden haben, werde ich die nächsten Lektionen erklären, fordern Sie einfach die KI auf, so wie ich es bei dem Projekt tun werde Und Sie werden die Features und Funktionen entwickeln, und dann haben Sie ein funktionierendes Produkt nun in den folgenden Lektionen Lassen Sie uns nun in den folgenden Lektionen das Starter-Kit verstehen. Dann lass es uns benutzen. Darauf aufbauend in Cursor mit Eingabeaufforderungen, die die Funktionen hinzufügen Normalerweise fügen wir sie dem Dashboard hinzu, und dann haben Sie funktionierende Anwendungen Außerdem werde ich Ihnen ein Stripe Starter Kit zur Verfügung stellen, das Sie für die Anwendungen verwenden können , die wir später entwickeln, da ich bei der Erstellung dieser Anwendungen tatsächlich das Stripe Starter Kit verwendet habe. Sie können es aber einfach gegen das Clerk Starter Kit mit einer Clerk-Abrechnungsfunktion austauschen Das verwendet Stripe, aber ein Clerk Billing verwendet bereits Stripe selbst, sodass Sie sich darüber keine Gedanken machen müssen Und es liegt wirklich an Ihnen, ob Sie bei meinen ursprünglichen Lektionen bleiben , die Sie später sehen werden und ob Sie das Stripe Starter Kit verwenden, das ich Ihnen auch in den Kursressourcen verlinken werde Ihnen auch in den Kursressourcen verlinken Überprüfe einfach die Beschreibung. Der Link wird dort sein, oder ob Sie diesen Link von Clerk Billing verwenden werden Falls Sie diesen ersten verwenden, richten Sie die Webhooks nicht mit Stripe usw. ein, sondern schauen Sie sich später einfach die Videos mit den Eingabeaufforderungen an und wie ich die KI-Anwendungen erstellt habe Ich werde Sie also in den folgenden Lektionen wiedersehen, in denen wir erklären werden, wie Clerk ein Start-Ukit erstellt Und das Stripe Starter Kit wird später erklärt, oder wie man das Stripe-Start-Arquit einstellt, wird später in den Lektionen erklärt , in denen wir die Anwendungen selbst erstellen werden die Anwendungen selbst erstellen werden 12. 0 aiCoding IntroStarterKit: In diesem Abschnitt gehen wir auf ein Starterkit ein, das wir für unsere SAS-Anwendung verwenden werden für unsere SAS-Anwendung verwenden die wir In diesem Abschnitt werden wir dafür sorgen, Authentifizierung funktioniert, sodass wir uns an- und abmelden können. Außerdem werden wir dafür sorgen, dass die Abrechnung funktioniert oder ein Abonnementsystem, bei dem wir einen Pro-Plan abonnieren können, und dann erhalten wir Zugriff auf unser Produkt, das im Dashboard angezeigt wird, und wir werden auch überprüfen, wie Verbindung mit Superbase funktioniert, wie wir Daten in unserer SupaBase-Datenbank speichern können und wie wir Daten aus dieser Datenbank abrufen können 13. Starterkit 1 AnleitungErstellenNextjsAnwendung: Wir werden in den VS-Code gehen und dort einen Ordner öffnen, den wir erstellen Ich werde SAS, Dev erstellen und hier können wir anfangen. Wir öffnen zuerst ein Terminal und in diesem Terminal führen wir einen Befehl aus oder erstellen eine NextGS-Anwendung Im besten Fall mit Tailwind CSS, wo Sie diesen Befehl bekommen können Was ich gerne mache, ist auf die Tailwind-CSS-Website tailwncss.com zu gehen und dort auf loslegen zu klicken Die Framework-Anleitungen, als nächstes JS. Darauf sind wir zuerst neugierig. Jetzt werden wir es im Terminal einfügen, und wir wollen nicht, dass mein Projekt da ist, weil dadurch ein neuer Ordner erstellt würde, mein Projekt in diesem Ordner, mein Projekt in diesem Ordner, wir bereits für unsere SAS-Anwendung erstellt haben. Also mache ich dort nur den Punkt und es wird ein Projekt in unserem Ordner erstellt . Ich werde die Eingabetaste drücken. Jetzt wird es mich fragen, ob es weitergehen soll, ich werde ja tun. Ich möchte ja tun, um CSS zu überschreiben, nein zum Quellverzeichnis Nein zu Turbobek, nein zu Allis. Jetzt wird es alles installieren. Danach können wir NPN Run Deep ausführen, um unsere neue Anwendung zu testen Dort können wir sehen, dass es angefangen hat zu laufen. Und jetzt gehe ich zum Beispiel zur App, Seite T sechs, und wir testen und fügen dort den Text read 200 hinzu und speichern ihn. Sie können sehen, dass Dalen funktioniert, weil das Design geändert wurde, und wir können weitermachen und mit der Erstellung des nächsten JSAS-Starterkits beginnen des nächsten JSAS-Starterkits , das wir dann für unsere Anwendung verwenden werden 14. Starterkit 2-ErklärungVonArchitektur: Lassen Sie mich nun erklären, wie unsere Anwendung funktionieren wird. Wir haben dort unser MicroSAS und wir haben auch einen Sachbearbeiter für Abrechnungs- und Abrechnungslösung und SuperBaseO-Datenbank, in der wir alle Aufzeichnungen speichern werden Was wird dort passieren? Wenn wir unsere Anwendung zum ersten Mal aufrufen, werden wir einen Benutzer für den Sachbearbeiter erstellen Es wird nur dort und nicht in Superbse erstellt. Unsere Anwendung wird wissen , dass der Benutzer angemeldet ist, wie sein Name oder seine E-Mail-Adresse ist und so weiter Ich kann ihn zum Beispiel dazu bringen, das Dashboard zu verwenden. Jetzt gibt es auch die Abrechnungslösung, und die Summe der Schulden ist , dass wir jetzt auch wissen können, ob der Benutzer für einen Pro-Tarif bezahlt oder ob er einen kostenlosen Tarif verwendet, und das vereinfacht die endgültige Beantragung. Der Sachbearbeiter wird nun überprüfen , ob der Benutzer angemeldet ist. Es wird geprüft, ob er einen Pro-Tarif hat , und auf dieser Grundlage können wir dem Benutzer einige Seiten und einige Abschnitte anzeigen einige Abschnitte So lassen wir ihn zum Beispiel auf das Dashboard gehen, nachdem er sich angemeldet hat, aber es gibt, hey, wenn Sie unser Produkt oder einige zusätzliche Funktionen unseres Produkts weiterhin nutzen möchten , müssen Sie den Pro-Plan oder wie auch immer Sie ihn nennen möchten, erwerben. Sobald er den Plan hat, die Informationen darüber, ob er den P-Plan hat, müssen wir die Informationen darüber, ob er den P-Plan hat, nicht mehr in SupaBase speichern Es wird in Clerk gespeichert und der Sachbearbeiter wird über unseren Benutzer, seine E-Mail-Adresse und seine Planversion Bescheid wissen seine E-Mail-Adresse und seine Planversion Natürlich können Sie auch den Namen und andere Informationen kennen , aber die wichtigste ist die E-Mail-Adresse und für welchen Tarif er bezahlt Und nachdem wir Datensätze speichern möchten , die unser Benutzer im Produkt erstellt, müssen wir mit Super Base kommunizieren und die Aufzeichnungen dort speichern. Woher wissen Sie, dass dieser Datensatz für diesen und jenen Benutzer bestimmt ist. Das funktioniert so, dass der Angestellte uns die Benutzer-ID gibt und wir sie zusammen mit anderen Informationen über den Datensatz, den wir speichern werden, in Super Base anderen Informationen über speichern Beispielsweise wird der Datensatz ABC für die Benutzer-ID Benutzer zehn gespeichert Was wir von Clerk bekommen werden. Nehmen wir an, wir werden Super Base hierher verschieben und möchten, dass unser Benutzer das Produkt sieht Eigentlich nur Benutzer mit Pro-Plan mit Basisabonnement. Was passiert , wenn dieser Plan kostenlos ist oder etwas anderes als ein Pro-Plan? Nun, er sieht das Produkt nicht, aber falls er zum Pro-Plan wechselt, wird unsere Anwendung es erkennen und er kann alles verwenden, wo wir festlegen, dass der Pro-Plan benötigt wird . 15. Starterkit 3-Abhängigkeiten: Wird die Abhängigkeiten installieren. Wir werden ein Terminal öffnen und dort diesen Befehl einfügen, und ich werde Ihnen erklären, was wir überhaupt installieren. Ich werde auch den Punkttext mit den Abhängigkeiten angeben, aber Sie müssen das nicht erstellen, ich werde dort nur einige praktische Dateien speichern , die ich mit Ihnen teilen werde wir sogar installieren. Wir installieren Clerk, also die Authentifizierung und Benutzerverwaltung, aber auch die Abrechnung, dass wir Tupa Base SSR und Suba Base JS verwenden werden Tupa Base SSR und Suba Base JS verwenden Dabei handelt es sich um eine Superbase-Clientbibliothek für Datenbanken und für Klassenvarianz-Autoritäten Datenbanken und für Klassenvarianz-Autoritäten Dabei handelt es sich um ein Hilfsprogramm zur Verwaltung von CSS-Klassenvarianzen bei Rückenwind, das Sie etwas später verstehen werden, und Sie werden sehen, wie wir es verwenden werden. CLA sechs Dies ist ein Hilfsprogramm für die bedingte Verknüpfung von Klassennamen. Wenn etwas zutrifft, fügen wir einen Tailwind-CSS-Klassennamen hinzu und dann Framer dann Framer Dies wird eine Animationsbibliothek sein, die wir später für die Animation unserer Komponenten verwenden werden , wenn wir an einer besseren Benutzeroberfläche für unsere Ausleihseite arbeiten werden . Es ist eine React-Icon-Bibliothek, die wir Ripe verwenden werden , die wir eigentlich nicht benötigen Sie werden nicht zusammengeführt. Dies ist ein Programm zum Zusammenführen Zehn CSS-Klassen, die wir auch für den Fall benötigen, dass wir zusätzliche DLN-CSS-Klassen zu einem Element hinzufügen möchten, in dem einige Talen-CSS-Klassen vorhanden sein werden und Tailwind bereits einige Talen-CSS-Klassen vorhanden sein werden und Tailwind Dabei handelt es sich um ein vorgefertigtes Hilfsprogramm für die Animation von Tailwind und um das Typoskript-First-Schema zur Schemavalidierung Das heißt, bevor wir eine Anfrage senden, kann dies das Formular, in das wir die Daten einfügen, validieren und uns zum Beispiel sagen: Hey, du musst diesen Titel oder diese Beschreibung ausfüllen , um diesen Datensatz zu speichern Jetzt haben wir es da, ich drücke die Eingabetaste und jetzt werden alle Abhängigkeiten installiert. Jetzt gehen wir zum Paket Dot JSON und dort statt Sent geben wir den Befehl next int ein was das bedeutet und warum wir das tun. Wir verwenden NextGS und in diesem Fall verwendet next Lind automatisch Next JS-Konfiguration und wendet einige spezifische Next JS-Lint-Regeln Wofür ist es gut? Es wird uns helfen, Codeprobleme frühzeitig zu erkennen. Wenn wir dann den Build machen , wird es uns sagen: Hey, du musst dieses oder jenes reparieren und nachdem wir unsere Anwendung gelöscht haben, werden wir keine Probleme mehr 16. Starterkit 4 Variablen: Es ist Zeit für die Einstellung der Umgebungsvariablen. Was bedeutet das? Das bedeutet, dass wir eine neue Datei erstellen und sie Punkt NV nennen werden. In Gignor können wir jetzt überprüfen, ob diese Datei da ist, da wir diese Datei definitiv nicht später auf unserem Githup bereitstellen möchten diese Datei definitiv nicht später auf unserem Githup Sie werden dort alle Geheimnisse haben und diese Datei definitiv niemandem zugänglich machen , denn dann kann die Person , die zu dieser Datei gelangt , Zugriff auf Ihren Angestellten oder Super Base oder vielleicht auf einen KI-API-Schlüssel erhalten, den Sie dort später für Ihre Anwendung einfügen später für Ihre Anwendung und Sie können Tun Sie es auf keinen Fall. diese Anwendung durchgehen, werden Sie die falschen Werte meiner Umgebungsvariablen sehen. Aber zu Lernzwecken werde ich diese Datei natürlich unscharf lassen, aber sie wird falsche Werte verwenden Da sind die Werte, die wir benötigen , damit unsere Anwendung funktioniert Es wird nur die Authentifizierung des Angestellten sein, veröffentlichte Schlüssel für den nächsten Beamten und der geheime Schlüssel für den Angestellten Und dann benötigen wir von Sup Base aus die Superbase-URL, den Superbase-Anonymisierungsschlüssel und den Super Base-Service-Roll-Key Es ist einfach, diese Schlüssel zu bekommen. Das Einzige, was wir brauchen, ist, uns bei Clerk und Super Base zu registrieren oder anzumelden und sie dorthin zu bringen und in diese Doden-Datei einzufügen Und jetzt werden wir das zusammen durchgehen und diese Umgebungsvariablen setzen 17. Starterkit 5 Supabase: Nachdem wir uns bei Supabase angemeldet haben, werden wir ein neues Projekt erstellen Dort werde ich es SsnF nennen. Ich werde das Passwort generieren. Ich werde es kopieren und irgendwo speichern. Mach dir keine Sorgen, ob du es speichern möchtest oder wenn du es vergisst, du kannst später in den Einstellungen ein neues Passwort generieren . Das ist überhaupt kein Problem. Dann wähle ich eine Region und klicke auf Neues Projekt erstellen. Jetzt habe ich es da, ich kann auf Verbinden klicken. Ich werde auf App Frameworks klicken, das NextJS mit einem Browser mit Supabase JS, und dort in der lokalen haben Sie die geheimen Schlüssel, und Sie werden sie kopieren und dort anstelle dieser beiden einfügen, und jetzt erhalten Sie den Supabase-Dienst Jetzt fahren wir mit den Projekteinstellungen fort. Dort werden wir uns mit den API-Schlüsseln befassen. Und dort werden wir alle geheimen Schlüssel preisgeben und kopieren. Wir werden es in unsere Doden-Datei einfügen, und jetzt haben wir alle geheimen Schlüssel für Supabase 18. Starterkit 6-Einstellungstest für Mitarbeiter: Oder Sachbearbeiter, wir müssen uns anmelden oder registrieren. Ich werde mit Git Up weitermachen. Dann werden wir eine Anwendung erstellen, und ich werde sie erneut benennen, ich werde die Anmeldung mit E-Mail oder Google aktivieren. Ich werde eine Anwendung erstellen und dort auf NextJS klicken, und wir haben diese Abhängigkeit bereits installiert Dort können wir die Umgebungsvariablen kopieren und in unsere Dudan-Datei einfügen Wir werden es dort anstelle dieser beiden einfügen. Jetzt sollten wir eine Middleware-Datei, eine Datei für diese Anmeldung und Anmeldung erstellen Datei für diese Anmeldung und Anmeldung Außerdem erfahren Sie, wie wir diesen Clerk-Anbieter verwenden sollten, wie Sie Anmelde- und Anmeldeschaltflächen verwenden können und so weiter Und das werden wir gemeinsam einrichten . Was wir tun müssen, ist, dass wir zuerst dort im Stammordner eine neue Datei mit dem Middleware-Punkt Ts erstellen und dort den Code einfügen, den wir in der Anleitung zur Einrichtung der Clerk-Seite haben zur Einrichtung der Clerk-Seite Dann können Sie sehen, dass wir einen Browser auswählen werden. Und was wir tun müssen, ist, dass wir zu Layout TS sechs gehen müssen, und dort wollen wir genau die gleichen Schritte ausführen wie in diesem Handbuch. Aber wir werden den Clerk-Provider aus der Clerk NextJS-Bibliothek einfügen und dann diesen HTML-Text, den wir in dieser Rückgabe haben, in den Clerk-Anbietertext einbinden Ich werde es so ausdrücken. Jetzt werde ich es formatieren und am Ende wird es so aussehen. Jetzt befindet sich unsere Wandanwendung im Clerk Provider-Kontext. Wir können überprüfen, ob der Benutzer angemeldet, abgemeldet usw. ist angemeldet, abgemeldet usw. Vorerst können wir auf ihren Next JS-Leitfaden „ Weiter“ klicken, und Sie können dort weitere Informationen lesen Zum Beispiel, wie Sie die Anmelde- und Registrierungsseite pages.c6 erstellen sollten die Anmelde- und Registrierungsseite pages.c6 und Wir werden diese Anmelde - und Anmeldeseiten in unserer App erstellen - und Anmeldeseiten in Sie müssen diesen Off-Ordner erstellen, oder Sie müssen nicht genau diesen Off-Ordner erstellen, aber ich werde erklären, warum es gut ist, diesen zu erstellen. Wir haben das in Klammern , weil es nicht wirklich zur URL gelangt Es wird nicht unsere Seite mit Schrägstrich-Anmeldung sein, sondern nur unsere Seite mit Schrägstrich-Anmeldung Wenn es in Klammern steht, ist es nur für uns. Wir haben eine bessere Ordnerstruktur. Das ist ein guter Ansatz. Wir werden das verschieben und wir werden den Anmelde - und Anmeldeordner haben Bei der Anmeldung müssen wir auch einen weiteren Anmeldeordner in diesem Format erstellen Es ist sehr wichtig, dass es so ist, und dann melden Sie sich in diesem Ordner an, erstellen Sie Seite T sechs oder melden sich genauso an. Sie müssen also einen Anmeldeordner erstellen. In diesem Anmeldeordner erstellen Sie einen Anmeldeordner mit diesen eckigen Klammern und darin die Seiten bis sechs. Und was bedeuten diese eckigen Klammern mit diesen Punkten? Es ist ein optionaler Catch-All-Unterpfad. Das heißt, wenn wir einen SSO-Rückruf mit Anmeldebestätigung oder einen SSO-Rückruf mit Schrägstrich bei der Anmeldung haben , wird es immer noch in diesen Seitenpunkt Tsix fallen Jetzt können wir zur Seite DTS 6 selbst übergehen, und das ist nur eine Kopie aus der offiziellen Clerk-Dokumentation aus der offiziellen Clerk-Dokumentation Sie können es tatsächlich auf ihrer Seite sehen. Und ich bearbeite dort einfach etwas Styling. Wir haben dort Flexbox-Layout, Justify und Items Center hinzugefügt Justify und Items Center Das Anmelde- oder Anmeldeformular befindet sich also in der Mitte der Seite und ist nicht nach links ausgerichtet, wie es der Fall wäre, wenn Sie diese Tailint-Klassen nicht hinzufügen Und ich habe auch den Bildschirm mit der Mindesthöhe hinzugefügt. Es ist also nicht nach oben ausgerichtet, sondern befindet sich in der Mitte des Bildschirms. Und da es auf der Seite keinen anderen Inhalt gibt, würde ich diese Mindesthöhe hinzufügen. Was ist nun, wenn wir unsere Clerk-Verbindung testen? Als Erstes werden wir also auf die App-Seite DotTSix gehen App-Seite DotTSix gehen Dies wird später die Landing Page sein, und dort können wir die Wall Next JS-Vorlage tatsächlich löschen die Wall Next JS-Vorlage Wir können dort nur das Wrapping-Diff belassen, das ist in Ordnung. Und wir können dort mit dem Import beginnen. Auch hier gilt: Wenn Sie auf die Seite gehen, können Sie dort Sitzungs - und Benutzerdaten in Ihrer NextJS-Anwendung mit Clerk lesen , und wir können sie im Grunde kopieren, dort einfügen und wir werden sie einfach aktualisieren Wir werden es in die Seite Taix in unserer App einfügen, diese hier. Und da werden wir diesen Import machen, wir werden ihn oben einfügen, dann nehmen wir und fügen ihn in unseren Export der Seite Jetzt müssen wir das asynchron machen und es wird funktionieren und es gibt den Fehler , dass der Benutzer möglicherweise Null sein kann, also können wir dieses Fragezeichen anpassen, es wird auch den Nullwert annehmen Dieses Fragezeichen ist eine optionale Verkettung, und wir können jetzt nur auf den Vornamen zugreifen , wenn der Benutzer nicht Null oder undefiniert ist Und wenn der Benutzer Null ist, wird dieser Ausdruck undefiniert, aber unsere Anwendung stürzt nicht ab Es wird also nur willkommen angezeigt. Aber das sollte keine Rolle spielen, denn wenn der Benutzer nicht authentifiziert wird, meldet er sich erneut an, um diese Seite aufzurufen Nachdem wir diese Testdaten, die wir dort erhalten haben, in der Dokumentation gespeichert haben, können wir unsere Website tatsächlich öffnen Wenn Sie den Server erneut ausführen oder NPM run Df überhaupt nicht ausgeführt haben, können Sie die Seite aktualisieren und sicherstellen, dass Sie sich auf dem richtigen lokalen Host befinden Geben wir ihm ein besseres Styling. Lassen Sie uns Text sieben Excel machen. Wir können es sehen. Geben wir Text neun Excel. Ich werde die Textgröße erhöhen, sodass Sie sie in Excel sehen können, geben Sie sie mit voller Eingabe ein. Ich kann dasselbe für diese Begrüßung tun, vielleicht sogar Excel, und das ist nur zum Testen. Jetzt können wir sehen, melden Sie sich an, um diese Seite anzusehen. Natürlich sind wir nicht angemeldet, daher können wir diese Seite nicht sehen. Was wir tun werden , ist, dass wir in der URL nach unserem lokalen Host, 3.000, nach unserem lokalen Host, 3.000, das Schrägstrichzeichen für die Anmeldung verwenden Dadurch werden wir hierher weitergeleitet. Jetzt können wir uns dort anmelden. Aber natürlich müssen wir uns zuerst anmelden, aber Clerk macht das automatisch wenn Sie zum Beispiel mit Google weitermachen , aber wir können es auch testen, sich anmelden Sie sehen dort das Layout und wie es zentriert ist. Ich werde jetzt den Nutzer auswählen, mit dem ich mich anmelden möchte, also werde ich mit Google fortfahren und einen Teil meines Google-Kontos auswählen. Und sobald ich angemeldet bin, kann ich dort die Begrüßung und den Namen des Kontos sehen , mit dem ich mich registriert habe und mit dem ich mich angemeldet habe. Ich habe dort. Jetzt können wir sehen, dass das funktioniert. Und wenn wir zu Clerk gehen und das Update aktualisieren, können wir in unserem Clerk-Konto auch den Benutzer sehen, der sich hier angemeldet 19. Starterkit 7 – Abrechnung für Mitarbeiter: Jetzt ist es an der Zeit, die Abrechnung für den Sachbearbeiter einzurichten. Also werden wir Abonnements abschließen. Wir werden auf Erste Schritte klicken und dort einen Plan erstellen. Wir werden ihren kostenlosen Plan haben. Wir können es lassen. Wir klicken auf Großartiger Plan. Wir werden es Pro-Plan nennen. Wir beziehen uns auf diesen Plan, wir müssen den Pro-Plan verwenden. Wir können dort eine Beschreibung hinzufügen, müssen es aber vorerst nicht tun, um ehrlich zu sein. Und die monatliche Grundgebühr können wir tun oder 99€. Und jährlich 2,5$. Das werden 30$ pro Jahr sein, und wir tun dies mit Absicht, weil wir möchten unsere Benutzer das Jahresabonnement anstelle des monatlichen Abonnements kaufen Jahresabonnement anstelle des monatlichen Abonnements Wir können dort eine kostenlose Testversion für sieben Tage anbieten, und dort unten können wir vorerst Funktionen hinzufügen Ich werde dort einen vollen Zugriff einrichten Ich werde eine Funktion erstellen, ich werde schon da sein, und das wird reichen. Ich werde auf Speichern klicken. Und damit haben wir einen Pro-Plan erstellt. Jetzt ist es gespeichert. Wir können zu den Plänen zurückkehren. Wir haben es hier. Jetzt klicken wir auf Abrechnung aktivieren. Wir haben die Abrechnung aktiviert und können auf unserer Preisseite eine Preistabelle erstellen . Wir werden in einen Ordner gehen und dort einen neuen Ordner erstellen, und es wird einen Preisordner geben. Und darin werden wir Seite Ta sechs erstellen. Auf dieser Seite TA sechs werden wir ein Diagramm zurückgeben, in dem wir diese Preistabelle, die wir von Clerk erhalten, neben JS platzieren diese Preistabelle, die wir von Clerk erhalten, neben JS Wir werden es dort importieren und auf die Seite stellen. Wir können etwas Styling hinzufügen, also lasst uns zuerst die Seite öffnen. Geben Sie dort auf unserer Seite einfach die Preisgestaltung an. Dort werden wir die maximale Breite angeben. Lassen Sie uns Excel mit maximaler Breite drei machen. Wir können den Hintergrund weiß machen, damit wir unseren Bereich tatsächlich sehen können. Jetzt erstellen wir ein Flexbox-Layout mit Mitte und in der Artikelmitte , um es horizontal und vertikal Wir müssen auch einen Bildschirm mit minimaler Höhe erstellen. Und was wir nun tatsächlich tun werden, lassen Sie uns das Item Center wegnehmen. Anstatt Center zu rechtfertigen, machen wir AMC Auto Jetzt ist es in der Mitte. Wir werden den Hintergrund weit löschen, weil wir bereits wissen, wo er sich befindet. Und wir können wählen, ob wir einen kostenlosen Plan haben möchten, gerade für uns aktiv ist, oder einen neuen Plan. Lassen Sie uns nun die Pläne testen, und ich werde diese Kommentare einfach löschen damit wir sie klarer haben und einfacher testen können. Ich werde jetzt hinzufügen, was passiert ist, und wir werden abwarten , wo wir das bekommen können. Und wir werden das verwenden, um den Plan zu überprüfen. Das heißt, wir erstellen jetzt einen konstanten, einen Pro-Plan, und wir werden damit nach dem Pro-Plan suchen. Falls der Benutzer keinen Pro-Plan hat, setzen wir jetzt ein Ausrufezeichen. Falls es also falsch ist, geben wir zurück, dass Sie keinen Pro-Plan haben Jetzt werden wir prüfen, ob der Benutzer einen Pro-Plan hat. Bei diesem Ausrufezeichen wird der Wert also grundsätzlich umgedreht Wenn das falsch ist, wird es zurückgegeben. Sie haben keinen Pro-Plan. Falls dies zutrifft, wird diese If-Bedingung übersprungen und es wird weiterhin der Vorname des Willkommensbenutzers angezeigt Jetzt können wir zu unserer Seite gehen. Lassen Sie uns die Preisgestaltung entfernen und da haben wir sie. Fügen wir auch den Text sieben Excel hinzu, damit wir ihn sehen können. Sie haben keinen Pro-Plan, und das stimmt, denn wir haben tatsächlich einen kostenlosen Plan. Jetzt gehen wir zu Clerk und dort werden wir tatsächlich überprüfen, wie der API-Name für den kostenlosen Tarif lautet Dort werden wir Abonnementpläne konfigurieren, und der Planschlüssel lautet Free User Das heißt, wir werden zu unserer Seite zurückkehren. Und statt eines Pro-Plans werde ich nach einem kostenlosen Benutzerplan suchen. Jetzt bin ich dabei, weil ich bereits den kostenlosen Benutzerplan habe. Aber wir werden nach einem Pro-Plan suchen. Aber damit können wir bedingtes Rendern basierend auf dem Plan unseres Benutzers durchführen. Es ist so einfach, und jetzt erstellen wir eine Datei in unserem neu erstellten Lippenordner, die wir gemeinsam erstellen werden, und dort werden wir die Pläne unseres Benutzers überprüfen. In unseren anderen Dateien können wir also bereits erstellten Code wiederverwenden , den wir in einem anderen Ordner speichern, und wir müssen nicht all diese Zeilen erneut erstellen 20. Starterkit 8 lib-Ordner und Abonnement-Dienstprogramm: Wir werden einen Lippenordner erstellen. Dies wird ein zentraler Ort für Hilfsfunktionen, Konfigurationen und gemeinsam genutzten Code sein. Sein Zweck besteht darin, die Geschäftslogik von den UI-Komponenten zu trennen, wiederverwendbare Hilfsfunktionen zu beherbergen die nicht zu einer bestimmten Komponente gehören, und es kann auch Konfigurationsdateien oder Setup-Code enthalten . Wir werden dort Datenbankdienstprogramme, Authentifizierungshelfer, API-Dienstprogramme, Validierungsschemas, Konstanten, Typdefinitionen usw. bereitstellen Der Vorteil, unsere Dateien in einem solchen Ordner zu haben , liegt in der Wiederverwendbarkeit, sodass die Funktionen über mehrere Komponenten hinweg importiert werden können hinweg importiert Wir werden dort die Abonnementschecks der Pläne ablegen, und wir können sie für mehrere Komponenten wiederverwenden Natürlich Wartbarkeit, weil wir dann einen zentralen Ort für die Logik haben Aber wenn wir ein paar Updates machen müssen, können wir das nur in dieser Datei machen und nicht für alle Komponenten, dann ergibt das eine saubere Architektur Bei den Komponenten wird es jedoch mehr um die Benutzeroberfläche gehen, und die Logik wird in diesem Lippenordner und der Typsicherheit liegen, da die gemeinsam genutzten Typen Konsistenz in der gesamten Anwendung gewährleisten. Aber zu den Typen und all diesen anderen Dingen, die ich erwähnt habe, kommen wir später. Jetzt werden wir den Abonnement-Helper in diesem Lippenordner ausführen. Der Loop-Ordner wird im Stammordner erstellt. Das heißt in unserem SAS Def-Ordner. Und im Inneren können wir mit der Erstellung der Datei beginnen, und das wird das Abonnement Dot Ts sein Im Abonnement Ts können wir jetzt mit der Erstellung dieses Dienstprogramms zur Verwaltung von Benutzerabonnements beginnen . Diese Datei kümmert sich um die Erkennung und Validierung des Plans mithilfe der Sachbearbeiter-Authentifizierung Es wird uns ein Tool zur Verfügung stellen, mit dem wir den Status des Benutzerplans überprüfen und den Zugriff kontrollieren können , den er über die Anwendung erhalten wird Im TS-Abonnement importieren wir zunächst Daten vom Clerk NextJS-Server Dann definieren wir die möglichen Abonnementtypen für die Typsicherheit, und das wird kostenlos oder P sein . Dann erstellen wir eine asynchrone Funktion, rufen den Benutzerplan ab, und diese Funktion sollte den aktuellen Benutzerabonnementplan abrufen Wenn der Benutzer über einen Pro-Tarif verfügt, wird er in P aufgelöst. Wenn er einen kostenlosen Tarif hat, wird er kostenlos aufgelöst, und wenn der Benutzer nicht authentifiziert ist oder keinen anerkannten Tarif hat, wird Null aufgelöst Das ist auch der Grund, warum wir das Versprechen geben, und dieses Versprechen bezieht sich auf den Tarif , also für Ihren Pro oder Null Einfach ausgedrückt bedeutet das, dass diese Funktion verspricht, dass sie den Plantyp oder Null zurückgibt. Wir werden die Methode he von Clerk of Object destrukturieren. Destrukturierung bedeutet , eine Eigenschaft aus einem Objekt zu extrahieren und sie einer Variablen zuzuweisen. Hier rufen wir ab, was ein Objekt von Clerk mit den Benutzerinformationen zurückgibt, und wir werden seine Eigenschaft in eine Variable extrahieren Falls es sich um einen Funktionstyp handelt, können wir mit der Überprüfung fortfahren, ob er Plan Pro hat Und falls ja, geben wir Pro zurück. Falls es einen kostenlosen Tarif geben wird und in unserer Anwendung kostenlose Tarif unter dem API-Namen free user steht. Wir werden kostenlos zurückkehren. Und was ist, wenn wir das nicht haben? Der Benutzer ist also nicht authentifiziert oder hat keinen gültigen Plan? Nun, dann wird es diesen Teil überspringen und wir werden jetzt zurückkehren. Und jetzt, um das zu testen, was wir tun können, ist, dass wir auf unsere Seite gehen, ihre App-Seite, und ich kann jetzt dieses Abonnement-TS importieren, damit ich den Benutzerplan aus der Abonnementdatei importieren und abrufen kann . Und dort kann ich const machen und dort kann ich einen variablen Plan erstellen Ich kann warten, einen Benutzerplan bekommen und dort kann ich nachholen, falls der Plan nicht da ist Pro, dann zeige ich an, dass du keinen Pro-Plan hast. Lass uns auf unsere Seite gehen. Jetzt auf unserer Seite. Wir werden es haben. Wenn wir das tun, sollte das nicht gleich kostenlos Es wird übersprungen und das Rendern wird begrüßt, weil unser Plan derzeit kostenlos ist. Was bedeutet das? Das bedeutet, dass wir jetzt für das bedingte Rendern benötigen, dass dieser Plan nicht gleich kostenlos oder gleich pro ist und so weiter. Um einige Codezeilen zu speichern, und jetzt können wir das tatsächlich löschen, weil wir es in unseren Abonnement-Punkten haben, aber diese Datei dient nur zu Testzwecken. Wir werden später tatsächlich die Benutzeroberfläche für unsere Ausleihseite aufrufen. Sie können jetzt sehen, dass wir diese Prüfung durchführen müssen. Hey, ist es kostenlos, ist es Pro oder so? Ein besserer Ansatz ist, dass wir uns Abonnementpunkten befassen und die neue Methode entwickeln werden. Und diese Methode kann eine asynchrone Exportfunktion sein , siehe Pro-Plan Wir werden unser Versprechen auf Bolin setzen kehrt es zurück oder es wird falsch sein Wir werden einen variablen Plan erstellen. Wir warten auf die Funktion, holen uns den Benutzerplan und kehren dann mit oder falsch zurück. Und um ein paar zusätzliche Zeilen zu sagen, könnten wir auch variabel machen und dann True oder False speichern, je nachdem, ob der Plan pro oder kostenlos ist, aber wir können einfach den Vergleich von Plan zu Pro zurückgeben. Das wird also mit Strings, Plan String und Pro String verglichen . Und falls der Plan Pro ist, in unserem Fall der Plantyp , kann in unserem Fall der Plantyp , der dort zurückgegeben wird, Pro oder Free sein. Falls es Pro ist, wird es true zurückgeben. Falls es kostenlos ist, wird es falsch zurückgegeben. Wir müssen nicht importieren, um den Benutzerplan zu erhalten, aber wir werden den Check Pro-Plan importieren. Dann warten wir nicht auf den Abruf des Benutzerplans, sondern auf den Check Pro-Plan Und wir werden das nicht in einem variablen Tarif speichern , aber wir werden jetzt eine bessere Benennung finden, vielleicht ist es Pro-User Und dann werden wir es auf diese Bedingung setzen. Falls es ein Pro-User ist, kommt es zurück. Sie haben keinen Pro-Tarif, aber wir wollen das überprüfen. Es sollte also so sein, falls es kein Pro-User ist, falls das ist Pro-User falsch ist, wird angezeigt, dass Sie kein Pro-Abo haben, was auch stimmt, weil wir kostenlose Nutzer sind. Derzeit ist dieser Wert falsch. Und diese If-Bedingung tritt nur ein, wenn der Wert wahr ist. Deshalb machen wir dieses Ausrufezeichen? Weil wir sonst alles andere im Zustand anzeigen müssten alles andere im Zustand anzeigen Und das ist viel einfacher, denn für den Fall, dass der Benutzer kein Vorbenutzer ist, zeigen wir jetzt Fall, dass der Benutzer kein Vorbenutzer ist, nur einen Satz an. Und natürlich, nur um es ganz klar zu sagen, wir können das DIF anzeigen und in dieses Div können wir noch viel mehr Dinge einfügen So funktioniert unsere Abonnement-TS-Datei im Lip-Ordner, und das wird es für diese Lektion sein 21. Starterkit 9 Navigationsleiste: Beginnen Sie mit der Erstellung einer Navigationsleiste. Diese Komponente wird in allen Anwendungen gemeinsam genutzt. Wir werden einen Komponentenordner erstellen , der sich in einem Stammordner befindet. In unserem SAS Def-Ordner werden wir also Komponenten erstellen, und dort werden wir Navbar dot Dasix erstellen In dieser SNAP-Leiste definieren wir zunächst den Use-Client. Das bedeutet, dass dies eine Client-Komponente sein wird, da sie die Interaktivität von Blind Site verwenden zum Beispiel für die Navigation die Wenn wir zum Beispiel für die Navigation die geschlossene und die offene Navigation ändern werden, werden wir zum Beispiel State Hook verwenden, und dazu werde ich gleich mehr erklären Fahren wir nun mit dem Import von Tinte aus dem nächsten Link fort. Und warum wir diesen Link anstelle einer normalen Anker-Technologie verwenden werden , liegt darin, dass diese in der nächsten Anwendung einer regulären Anker-Technologie oder internen Navigation vorgezogen wird . Es wird schnellere, bessere Übergänge geben, ohne dass ganze Seiten neu geladen Dann importieren wir die Schaltflächen „ Anmelden“, „Abmelden“, „ Anmelden“ und „Abmelden“ aus Clerk Dies werden wir für die An - und Abmeldung verwenden - und Abmeldung Dann importieren wir Symbole aus UCT React, Menü und X-Symbol U State Hook aus React Dann werden wir mit der Definition der Navbar-Funktion fortfahren. Und wir werden einen Export für Navbar erstellen. Im Inneren können wir mit dem ersten Status beginnen , der verfolgt, ob das mobile Menü geöffnet oder geschlossen ist Wir erstellen eine Statusvariable ist offen, gesetzt ist offen, ihren Wert und der Standardstatus ist falsch. Also standardmäßig la, das mobile Menü wird geschlossen. Dann erstellen wir eine Funktion, ein Google-Menü. Und in dieser Funktion verwenden wir das Set is open, um die State-Variable set is open zu setzen. Das wird der Schalter dafür sein. Dort rufen wir set is open und ändern den Wert von I open Wenn das Menü also geöffnet ist, wird es geschlossen und wenn es geschlossen ist, wird es geöffnet. Dieses Umschaltmenü rufen wir dieses Menüsymbol auf, das wir etwas später implementieren werden Dann werden wir eine weitere Funktion erstellen, ein geschlossenes Menü. Und diese Funktion, bei der wir einstellen, ist offen für Stürze, nicht für andere Werte, einfach für Stürze und wann wir diese Funktion für das geschlossene Menü verwenden werden. Wir werden sie verwenden, wenn auf einen Menü-Link geklickt wird oder wenn das Menü geschlossen werden soll Der Benutzer wählt ein Dashboard oder eine Preisgestaltung, dann wird das Menü automatisch geschlossen, weil die UIx so sein sollte macht keinen Sinn, den Benutzer einfach zur Seite weiterzuleiten und dann beim Schließen des Menüs einen weiteren Klick ausführen zu müssen beim Schließen des Menüs einen weiteren Klick ausführen Das ist ein zusätzlicher Klick, wir definitiv nicht wollen. Wir werden es so verwenden und jetzt können wir zurückkehren. Und in dieser Rückkehr können wir endlich mit Navbar beginnen Wir werden die Dif-Technologie öffnen und dort das Design der Navigationsleiste vornehmen , die wir in unser Layout einfügen werden, und wir werden sie auf all unseren Seiten verwenden Für die Navigationsleiste selbst können wir jetzt zu Seite t sechs gehen, und dort können wir tatsächlich, Sie haben keinen Pro-Plan, nur als nächstes zum Beispiel, damit es nicht dauert und uns vorerst nicht so sehr ablenkt, dann können wir zurück zur Navigationsleiste gehen. Wir können hier weitermachen. Das Erste, was wir tatsächlich tun werden , ist, diese Diff-Technologie gegen eine NAF-Technologie auszutauschen, und dann werden wir mit dem Unterricht fortfahren Zunächst werden wir die Breite auf das gesamte Xbox-Layout einstellen und die Navigationsleiste so ausrichten, dass die Navigationsleiste horizontal zentriert wird gesamte Xbox-Layout einstellen und die Navigationsleiste horizontal zentriert Dann fahren wir mit etwas Pedding fort , sodass wir die Verteilung auf Ober- und Unterseite und auf mittlerem Bildschirm erhöhen können, aber wir können etwas später mit diesen Werten spielen Jetzt werden wir drinnen eine Dif-Technologie entwickeln. In dieser Dif-Technologie werden wir eine gewisse maximale Breite schaffen. Machen wir das für Excel. Jetzt können wir verschiedene Farben verwenden damit wir sie tatsächlich auf dem Layout sehen können. Aber zuerst fügen wir auch etwas horizontale Polsterung oder Polsterung vier hinzu Wenn wir nun Inhalte hinzufügen, können Sie sie noch nicht sehen, da wir sie zum Layout hinzufügen müssen Wir gehen von Layout zu TS 6 über und fügen dort das Naugbr über dem Hauptteil hinzu. Wir drücken die Eingabetaste Jetzt wird es aus Komponenten importiert, und das bedeutet, dass es durch unsere Anwendung auf jeder Seite gerendert wird, und das bedeutet, dass es durch unsere Anwendung auf jeder Seite gerendert wird, weil es jedes weil es gleichen Zeit mit den Kindern gerendert wird, und die Kinder werden zum Beispiel diese Seite sein, aber dann auch die Dashboard-Seite und so weiter Das heißt, wir haben jetzt die Navbar auf unserer Website auf unserer Seite, Sie können sie dort sehen. Und wir können weitermachen Als Nächstes werde ich ein weiteres Div in dieses Div legen, ich werde wieder etwas Bettwäsche hineinlegen. Ich werde die horizontale Bettwäsche sechs und die vertikale Bettwäsche vier platzieren und das Flexbox-Layout vertikal zentrieren und den Abstand zwischen horizontal begründen Das heißt, wenn ich die Elemente eins, zwei und drei verwende, dann haben sie den Öko-Abstand zwischen ihnen Wenn es also so ein Beispiel geben würde , stell dir vor, es gäbe drei Linien. Jetzt wird es drei Zeilenabstände geben, also 2-3. Der Abstand ist also immer gleich. Das ist gut, denn stellen Sie sich vor , es wird ein Logo geben, es gibt Menüelemente auf diesem Element und es wird automatische Aktionen die Schaltfläche „Kontaktieren Sie mich“ oder ähnliches geben. Lassen Sie uns die Elemente bewegen und loslegen. Dort können wir mit einem für das Logo beginnen. Fügen wir ein Flexbox-Layout und Artikelmitte hinzu, um es vertikal zu zentrieren, dann fahren wir mit einem weiteren Div fort, und zu diesem Div fügen wir etwas Breite und etwas Höhe Runden Sie das Ganze ab, um daraus einen Kreis zu machen. Vorerst können wir die Hintergrundlinie 400 verwenden Lassen Sie uns nun auch das Flux-Box-Layout wählen und das Ganze horizontal oder vertikal und horizontal zentrieren. Jetzt werden wir das Logo platzieren. Ich werde es so ausdrücken. Und lassen Sie uns dort zum Beispiel nur ein Tief und dort auch schwarzen Text eingeben. Es kann Font Bolt sein. Jetzt können Sie das Logo in unserer Navigationsleiste sehen. Wenn du es schon schöner machen willst, können wir zu diesem Div unter diesem Nap-Deck gehen, und wir können die Hintergrundunschärfe in Excel machen, dann das Excel abrunden und diesen Hintergrund grün auf Limette 720 reduzieren, das erhöht die Deckkraft um 0,2, und Hintergrundunschärfe ist jetzt nicht sichtbar , weil nur ein schwarzer Hintergrund dahinter ist, aber du kannst ihn dort hinzufügen, falls Sie werden einen Hintergrund mit Farbverlauf oder einen anderen verwenden Hintergrund mit Farbverlauf oder Außerdem wird der Hintergrund unscharf. Jetzt haben wir es auf unserer Seite und natürlich können wir die Deckkraft sogar verringern, vielleicht 0.1 wird der beste sein. Und wenn Sie möchten, können Sie auch Rand und Rand weiß hinzufügen . Sie werden jetzt also die Grenze sehen. Aber natürlich werden wir dort Lime 200 hinzufügen oder wir nehmen 500 mit einer Opazität von 0,1 Nicht sichtbar. Vielleicht machen wir 0,3. Ja, so etwas in der Art. Und wir können auch den Hintergrundgradienten verwenden. Wenn Sie einen Hintergrundverlauf für Ihre Navigationsleiste erstellen möchten , machen Sie einfach einen Hintergrundverlauf, um aus Kalk zu schreiben und Sie können jetzt wählen , welcher Ton 100 oder 900 oder etwas dazwischen sein soll , und dann ist es die Deckkraft, und Sie können ihn auch eingeben Setzen wir die Testfarbe Rot auf 200. Jetzt können Sie sehen, wie es aussieht, und Sie können dort zum Beispiel auch eine Orange, 300 eingeben . Offensichtlich funktionieren diese Farben nicht zusammen, nur ein Test. Aber jetzt werde ich Lime Lime hinzufügen, und ich werde 600 bis 500 durchgehen, und ich werde dort auch die Opazität 2.1 und 2.1 hinzufügen, ich werde eine Farbe wie diese haben Natürlich ist das ein Hintergrundverlauf nach rechts, also kann ich ihn auch nach unten oder nach links oder unten rechts ändern unten oder nach links oder unten rechts Vorerst lassen wir unsere Navigationsleiste so aussehen und können mit der Codierung fortfahren. Da haben wir unser Logo, ich werde es dort lassen, LO, und wir können zu den Navigationslinks übergehen. Also werde ich ein weiteres Div erstellen und in diesem Div werde ich einen Link erstellen. Und für diesen Link muss ich HRF hinzufügen. Andernfalls wird es einen Fehler ausgeben und zu unserer Ausleihseite führen, was vorerst nur ein leerer Schrägstrich ist, denn wenn Sie den Pfad zu unserer Ausleihseite sehen , ist er dort in der App Die URL wird also der lokale Host mit einem Schrägstrich von 3.000 sein. Das ist es Und nachdem wir dieses HRF haben, können wir mit dem Styling fortfahren oder das Styling, das wir hinzufügen werden, ist weißer Text mit einer Opazität von 0,1 Jetzt fügen wir den Text hinzu, der in unserer Navbar sichtbar ist. Dann werden wir weitermachen aber wir werden es vollständig sichtbar machen Also werden wir es einfach in Textweiß ändern. Jetzt können Sie sehen, wie es sich ändern wird, und wir können mit kleinerem Text weitermachen, und das war's. Wir brauchen dieses Div eigentlich nicht. Jetzt sollte es in Ordnung sein. Wir können mit dem Text von Clerk beginnen, aber wir werden dort angemeldet sein, und falls der Benutzer bereits angemeldet ist, wird der Inhalt angezeigt, der in wird der Inhalt angezeigt, der diesem Text enthalten sein wird Ich werde dort einen Link einfügen. In diesen Link werde ich ein Dashboard einfügen, da wir im Menü nur das Dashboard anzeigen möchten , falls der Benutzer angemeldet ist. Und jetzt geben wir natürlich einen Fehler aus, weil uns HRF für unseren Link fehlt , wo es das Dashboard sein sollte Und der Klassenname wird wieder mit einer Opazität von 0,9 stehen und wie man ihn vollständig sichtbar machen kann Wir können diesen Text tatsächlich klein nehmen und ihn dort stylen Ich denke, wir können diesen Text auch weiß mit einer Opazität von 0,9 nehmen und vielleicht können wir die Opazität auf 0,8 erhöhen Jetzt zeigen wir das Dashboard an, sobald der Benutzer angemeldet ist, und unten werden wir einen weiteren Link erstellen, und dieser dient der Preisgestaltung Also nochmal, wir werden ihr die HRF oder den Preis und den Klassennamen geben ihr die HRF oder den Preis und den Klassennamen Der Text sollte weiß sein. Nun ist die gute Frage, warum diese beiden Divs nicht nach links und rechts geschoben werden und sie nebeneinander liegen Zuerst werden wir die Breite auf die volle Breite setzen, und für Excel ist das zu viel, machen wir das. Für Excel ist es jetzt viel besser. Und jetzt können wir auch zusätzliches Div hinzufügen. Und dieses Div wird für den Kontakt-Button und für die Authentifizierung sein. Auch mit der mobilen Menütaste. Falls dies auf dem Handy sein wird. Also zuerst platzieren wir in diesem Div das Flexbox-Layoutelement in der Mitte es vertikal zentriert ist, und dann können wir uns darin , sodass es vertikal zentriert ist, und dann können wir uns darin anmelden und falls der Benutzer angemeldet sein sollte, werden wir dort die Schaltfläche zum Abmelden platzieren In den Text der Abmeldeschaltfläche werden wir eine Schaltfläche oder Abmeldung einfügen, und wir werden dort einen Stil einfügen , der vier sein wird, PY 2,5, und auf ihrem Text auf Weiß Jetzt setzen wir es ein und der Hintergrund kann sein. Jetzt können wir etwas herausfinden oder wir können nur den Rahmen und den Rand wie 800.3 Opazität und abgerundetes Excel machen nur den Rahmen und den Rand 800.3 Opazität und abgerundetes Excel vielleicht machen wir es tatsächlich 0,7 Das dient zum Abmelden. Jetzt fügen wir auch angemeldet hinzu. Blow, wir fügen einen abgemeldeten Text hinzu. Das heißt, wenn ein Benutzer abgemeldet ist, sieht er den Inhalt, der sich zwischen diesen Texten befindet , und dort wird es eine Anmeldeschaltfläche geben, in die wir ein Datum eingeben , und das Styling, das wir hinzufügen, wird ziemlich ähnlich sein Horizontale Abfüllung auf vier, vertikale Abstände auf 2,5 in unserem Text auf Weiß, und wir werden tatsächlich hinzufügen, wir werden keine Ränder hinzufügen Wir werden einen Hintergrund hinzufügen und dafür einen schönen Hintergrund finden Lassen Sie uns zunächst abmelden, also werde ich darauf klicken. Jetzt können wir sehen, wie es wie abgerundetes Excel aussieht Wir können eine Deckkraft von 0,3 und Hintergrundverlauf nach unten rechts oder einfach nach rechts von Lime 900,5 Opazität bis Lime 800.3 Opazität erstellen Und tatsächlich habe ich ein besseres Styling dafür gefunden , wie ich diesen Hintergrund mit einer Deckkraft von 0,3 weiß machen Ohne den Mauszeiger zu bewegen, wird dies ein weißer Hintergrund mit einer Opazität von 0,1 sein weißer Hintergrund mit einer Opazität von 0,1 Ich werde einen Rand haben, und die Rahmenfarbe wird weiß mit einer Opazität von 0,2 sein Jetzt haben wir die Schaltfläche zum Signieren. Lassen Sie uns versuchen, den Mauszeiger darüber zu Es wird so aussehen. Und damit haben wir das An- und Abmelden abgeschlossen. Und dort, übrigens, für die Menüelemente, platzieren wir dort SpaceX oder, das heißt, es wird ein gewisser horizontaler Abstand zwischen den einzelnen Elementen in diesem Div beibehalten gewisser horizontaler Abstand zwischen den einzelnen Elementen in diesem Div Jetzt können wir mit dem mobilen Navigationssymbol fortfahren. Dort werden wir mit dem Div beginnen und es auf dem mittleren Bildschirm und darüber verstecken. Wenn unsere Website also den mittleren Bildschirm überschreitet, wird dieses Element ausgeblendet. Das heißt, auf einem mobilen Bildschirm oder vielleicht einem kleineren Tablet wird es angezeigt. Und wenn Sie dann zum Desktop oder vielleicht zu einem größeren Tablet-Bildschirm wechseln, wird dieser ausgeblendet. Übrigens sollten diese Menüpunkte anders sein. Also, das sollte auf dem mobilen Bildschirm, dem Standardbildschirm, ausgeblendet sein , sodass wir dort kein Handy oder so angeben müssen . Und auf einem mittleren Bildschirm wird das tatsächlich angezeigt. Ich kann es so ausdrücken. Wenn Sie nun zur mobilen Ansicht wechseln , werden diese Menüelemente dort ausgeblendet. Und dieses Handysymbol wird angezeigt. Jetzt müssen wir dieses Handysymbol hinzufügen, damit es tatsächlich angezeigt wird. Aber wir werden das jetzt machen. Dort werde ich eine Schaltfläche hinzufügen, und innerhalb dieser Schaltfläche werde ich eine Bedingung hinzufügen, und falls öffnen wahr ist, wird ein Schließen-Symbol ausgeführt, das für uns dieses Symbol ist. Dort können wir die Höhe und Breite eines Klassennamens auf fünf erhöhen und den Text weiß hinzufügen , wir hier hinzufügen können. Falls das Öffnen falsch ist, rendern wir das Menüsymbol. Und wieder fügen Sie den Klassennamen Höhe und Breite zu fünf hinzu, weiße Text ist da. Was wir auch zu dieser Schaltfläche hinzufügen werden, wird in Excel herumlaufen und darüber, wie wir es auf den Signierknopf in einen weißen Hintergrund mit einer Deckkraft von 0,3 ändern werden Signierknopf in einen weißen Hintergrund mit einer Deckkraft von 0,3 Was wir nun noch zu dieser Schaltfläche hinzufügen müssen , ist die OnClick-Funktion, und wenn Sie darauf klicken, wird dadurch die von uns erstellte Funktion Toggle Menu aufgerufen die von uns erstellte Funktion Toggle Menu Wenn wir es uns jetzt genauer ansehen, können Sie sehen, dass wir das Symbol haben Und es funktioniert. Natürlich das Menü, das wir mit den Menüpunkten verbinden werden ist das Menü, das wir mit den Menüpunkten verbinden werden, noch nicht da, aber wir werden es in einer Weile codieren Und lassen Sie uns damit weitermachen. Wir werden es zuerst hier reinigen. Jetzt sollten wir einen Button und vier Divs haben. Und da sollten wir wieder mit der Bedingung beginnen , ob der Fall offen ist, stimmt Wir werden dieses Div rendern, und in diesem Fall gibt es nichts Falsches, denn falls es falsch ist, werden wir nichts rendern. Es wird nur die Desktop-Navigation sein. Okay, in diesem Gericht können wir mit dem Styling beginnen. Auf mittlerem Bildschirm wird dies ausgeblendet. Auch das wird in Set Zero behoben. Also werden wir jetzt alle Seiten auf Null setzen, da dies behoben ist. Wir müssen die Position festlegen. Stattdessen sagt Null, dass, hey, unten, oben links und rechts Null sein sollten. Und diesen Index werden wir auf 40 setzen. Jetzt machen wir in Side div und mit diesem Div stellen wir es sofort. Und wir werden den Klassennamen der festen Position in Satz Null setzen, wie im obigen Div, Hintergrund schwarz mit einer Deckkraft von 0,5 und Hintergrundunschärfe klein Wenn Sie darauf klicken, wird die Funktion für das geschlossene Menü aufgerufen. Falls wir also darauf klicken, wird es geschlossen. Was ist das und was sollte es sein? Dies wird der Hintergrund für unsere mobile Navigation sein, falls sie geöffnet wird. Sie werden jetzt den nächsten sehen. Wir werden dort einfach den Menüinhalt, die Menüpunkte einfügen. Lassen Sie uns also eine Festplatte im festen Bereich erstellen, wir setzen links und rechts auf vier und oben auf zehn und setzen den Index auf 50. Dann machen wir mit einem anderen Div weiter. In diesem Div werden wir etwas Bettwäsche hinzufügen. Lassen Sie uns also Bedding Six verwenden. Und wir werden an der Grenze, und ich werde sagen die Randfarbe weiß mit einer Opazität von 0,1 und dem relativen Bus weil wir dort einige Epsoldenelemente auf diesem Div haben werden Epsoldenelemente auf Wir werden den geschlossenen Knopf drücken. Also setze ich den Button und klicke, das ruft erneut das Schließenmenü und den Klassennamen auf , wir setzen die absolute Position, oberen beiden rechts, auf eine gewisse Breite und Höhe. Ein paar Radios mit Rahmen, also mache ich ein abgerundetes Medium auf ihrem Hintergrund weiß mit einer Deckkraft von 0,1 und einem Rand mit weißer Randfarbe, eine Deckkraft von 0,2, dann ein Flexbox-Layout, um alles mit Objekten zu zentrieren und mittig zu positionieren, und das Wir werden das X-Symbol hinzufügen. Wir werden dort die Breite und Höhe hinzufügen. Nun wollen wir sehen, wie es aussieht, wir werden es inspizieren. Wir können es dort auf unserer Website sehen. Wir können es jetzt schließen, und wir können zuerst weitermachen, und dann werden wir es polieren. Im Folgenden werde ich ein Div erstellen, und in dieses Div werde ich ein Flexbox-Layout mit einer Flex-Richtungsspalte einfügen , was bedeutet, dass alle Elemente in diesem Div untereinander liegen Ich werde einen gewissen Abstand zwischen ihnen herstellen, also werde ich Leerzeichen Y, vier verwenden Ich kann vielleicht auch drei machen, und lass es uns später erhöhen, falls es nicht genug ist. Wir werden es so zentrieren, dass der Text mittig ist, und der Abstand von oben beträgt acht. Jetzt werde ich im Grunde den gleichen Inhalt verwenden, der sich auf der Desktop-Navigation befindet. Was ich tun kann ist , dass ich es einfach kopieren und dort einfügen kann . Lass mich es einfach formatieren. Jetzt haben wir es. Ich kann versuchen, das Menü zu öffnen, und wir haben es auf unserer Website. Dort werde ich es versuchen, damit du es dir ansehen kannst. Also funktioniert es so. Anstatt auf Sie zu setzen und den Text weiß zu machen, machen wir ihren Hintergrund weiß mit Punktopazität und runden ihn auch auf Excel und etwas Streicheln ab, ich mache Bettwäsche vier Gehen wir für die Deckkraft auf 0,1. Jetzt ist es besser. Lassen Sie uns auch die Marge von oben erhöhen. Ich würde die machen Ich werde ihre 12 machen. Jetzt sieht es so aus. Jetzt kann ich mir diese Stunde nehmen und sie und Bettwäsche abrunden und hier und hier bearbeiten für diese beiden anderen Links. Eine weitere Sache, die wir tun müssen, ist, diesen Links auch das Menü „Klicken Sie auf Schließen“ hinzuzufügen. Einfach in ihrem OnClick and Close-Menü. Ansonsten wurde das Menü, wie Sie sehen können, nicht geschlossen. Und wenn wir jetzt zum Beispiel auf die Homepage gehen wollen , klicken wir einfach darauf. Es wird uns weiterleiten und es wird geschlossen. Jetzt müssen wir noch eine weitere Sache tun , und das ist ein gewisser Abstand zu unserer Schaltfläche zum Signieren oder Abmelden. Sie sind hier. Und jetzt können diese Anmeldung und dieses Signo auch in die mobile Navigation verschoben werden Lassen Sie uns unsere mobile Navigation öffnen. Nehmen wir diese beiden Knöpfe. Lass uns sie in ein Div packen Da werden wir das machen. Ab einem mittleren Bildschirm werden wir diesen Flex anzeigen. Und jetzt ändern wir das auf mittleren Bildschirm. Wir haben es da, alles ist in Ordnung. Und was wir jetzt tun können, wir nehmen das angemeldet, melden uns ab, kopieren es, fügen es ein und wir werden es dort in diese Schüssel unter dem Preis legen. Formatieren wir es noch einmal. Jetzt können wir es speichern. Und wir haben es hier. Loggen Sie sich ein. Wir können uns anmelden. Es wird uns zu Clerk weiterleiten Und wenn wir es auf Desktop umstellen , haben wir es immer noch hier. Es wird genauso funktionieren. Es wird einfach versteckt werden. Und auf dem mobilen Bildschirm wird es in unserer Navigation sein. Formatieren wir es so. Lass uns diese leeren Zeilen löschen, unsere Datei speichern. Und damit haben wir unsere Navigationsleiste fertig. 22. Starterkit 10 wieToChangeAFont: Sie eine Schriftart in Ihrer Anwendung ändern möchten, finden Sie in Dokumentation Informationen zur Und wenn Sie dort nach unten scrollen, empfehlen sie, variable Schriftarten zu verwenden. Vial öffnet sich. Es wird eine Liste der Schriftarten angezeigt, die Sie verwenden können und die am besten zu verwendenden sind. Ein beliebtes Beispiel ist Bricklash Grotesque. Dann haben Sie auch die Roboto-Familie, und Sie können aus einer Vielzahl von Schriftarten wählen Zum Beispiel können wir jetzt versuchen, bei der grotesken Art zu bleiben, wie wir unsere Anwendung ändern würden Verwenden Sie diese spezielle Schriftart , damit wir ins Layout übergehen werden. Wir verwenden diese Schrift, wie wir sie ändern werden. Sie ist sehr einfach. Wir werden BricklagGrotesque importieren Dann werden wir dort eine Variable erstellen und die Einstellungen der Schrift speichern, und wir werden sie dort für die Einstellungen des Hauptteils verwenden Jetzt ändern wir und Body im globalen Zo CSS die dortige Schriftfamilie auf unsere neue Schriftart, und wir brauchen dieses Team auch nicht in der Warteschlange. Es gibt nur eine Einstellung, dass wir ein dunkles Farbschema bevorzugen, und wir verwenden diese Einstellung für den Fall, dass wir später einen Teamwechsel hinzufügen würden, und jetzt ist unsere neue Schriftart auf unserer Website. 23. Starterkit 11-DashboardundFinalTest2: Finalisieren Sie unser Starterkit. Wir werden nun unseren Dashboard-Ordner erstellen . Also erstellen wir im App-Ordner einen neuen, ein Dashboard, und darin werden wir eine Seite Tasix erstellen Jetzt können wir die Homepage kopieren und das Dashboard einfügen, speichern und im Grunde genommen den Inhalt hierher holen und den Inhalt einfügen und auf dieser Seite platzieren Dort werden wir Sie darauf hinweisen, dass Sie einen Pro-Plan benötigen. Um einen Zugang zu erhalten, können wir diesen authentifizierten Benutzer löschen , da der Benutzer bereits angemeldet ist , da der Benutzer bereits angemeldet Andernfalls würde er dieses Dashboard nicht einmal sehen, und da können wir diese Begrüßung mit dem Vornamen vorerst behalten diese Begrüßung mit dem Vornamen vorerst Wir können auch von dort löschen, dass es sich um einen authentifizierten Scheck handelt , und jetzt können wir auf die Hauptseite einer Seite gehen, und dort können wir einfach eine Antwort eingeben . Wir werden sie vorerst eingeben Wir können den Text der Ausleihseite, die Mindesthöhe des Bildschirms, das Flexbox-Layout, Zeugenaussage und Wir können das in einige einfügen. Das kann eine Überschrift sein. Dort können wir Text einfügen, Fi Excel. Und vorerst wird dies unser Platzhalter sein, den wir für die Ausleihseite behalten werden Natürlich ist das eher ein Starter-Kit, sodass wir dort vorerst keine Ausleihseite einrichten müssen, und wir werden es für jedes Produkt anpassen , das wir mit diesem Starterkit, das wir gerade vorbereitet haben, erstellen werden mit diesem Starterkit, das wir gerade vorbereitet haben, erstellen Auf einem Dashboard haben wir jetzt die Überprüfung des Abonnements und können es testen. Also lass uns einloggen. Sobald ich angemeldet bin, kann ich zum Dashboard gehen. Jetzt kann ich sehen, dass ich auf das Dashboard zugreifen kann, aber ich habe kein Propan, also kann ich nicht auf den Text zugreifen Willkommen, verwenden Sie den Referenznamen, als ob er hier wäre. Eigentlich habe ich einen kostenlosen Plan, und wenn du ihn testen möchtest, kannst du den Pro-Plan auch so ändern, dass er nur zu Testzwecken einen kostenlosen Tarif akzeptiert. Es wird aber auch möglich sein, in Clerk einen Testmodus zu starten, den Sie dann auch einfach kostenlos für Ihren Testbenutzer herunterladen und damit testen Dies ist aber auch eine einfache Option, bei der Sie vorerst auch den Fuser-Plan auf einen Pro-Plan umstellen werden Und wenn Sie dann alles getestet und gemacht haben, werden Sie den Pro-Plan einfach wieder dort ablegen Was, glaube ich, so mit dem API-Schlüssel ist. Nein, es ist nur P. Deshalb geben wir jetzt einen kostenlosen Benutzer an und wir können damit testen. Für das Starterkit selbst, das war's. Wir haben eine Homepage, ein Dashboard, das erst nach dem Login sichtbar ist , und einen Inhalt, der erst nach dem Abonnieren unserer Anwendung sichtbar ist . Preise, wenn wir das Abonnement fertig haben Wir haben dort auch eine kostenlose 7-Tage-Testversion eingerichtet. Bei der jährlichen Version gibt es einen großen Rabatt, und nachdem wir den Pro-Plan erhalten haben, können wir den Inhalt des Dashboards sehen. Wo wird unser Produkt sein? 24. Starterkit 12 supabaseClerkIntegration: Führen Sie die Integration von Clerk und Supbase durch. In Clerk werden wir uns mit Konfiguration und Integrationen befassen. Wir werden Superbse überprüfen und die Integration verwalten. Hier wählen wir die Anwendung und den Arbeitsbereich aus. Ich werde die Entwicklung durchführen lassen und dort werden wir diese Sachbearbeiter-Domain kopieren In einer Superbase werden wir mit unserem Projekt weitermachen. Hier werden wir zur Authentifizierung übergehen. Melden Sie sich bei Anbietern an, Drittanbieter bei Provider Clerk und hier fügen wir die URL ein , die wir von Clerk erhalten haben Ich werde eine Verbindung herstellen. Und jetzt habe ich es fertig. Ich kann also die Tabellen mit allen Richtlinien und der Subobase erstellen , die wir für unsere Benutzer benötigen , um Datensätze einzufügen, zu bearbeiten, zu löschen oder zu aktualisieren 25. Starterkit 13TabellenundRichtlinienerstellenMitSupabaseSqlEditor: Jetzt gehen wir in den SQL Editor und fügen hier dieses Skript ein. Jetzt gehen wir in den SQL Editor und fügen hier dieses Skript ein. Und was dieses Skript tun wird. Zuerst wird dadurch eine Datensatz-Testtabelle mit dem Primärschlüssel erstellt , der hier eine ID vom Typ W ID ist Dies ist eine eindeutige Kennung für jeden Datensatz, und sie wird automatisch mit dieser Funktion generiert , zufälliges WD generieren. Wir werden hier auch einen Fremdschlüssel haben, jeden Datensatz mit einem bestimmten Benutzer von clerk verknüpft Und wenn JWT auf SAP umgestellt wird, wird automatisch die Benutzer-ID des Sachbearbeiters abgerufen Dann das Datenfeld , das wir zum Testen verwenden werden , wo wir tatsächlich Inhalte platzieren werden. Der Benutzer kann es dann speichern, bearbeiten, abrufen und löschen Das wird nur zum Testen sein. Später können Sie sich das wie einige andere Felder vorstellen , die wir für Datensätze speichern werden, und einige davon können Null sein, nicht. Dieses Feld darf zum Beispiel nicht Null sein, da es das einzige Inhaltsfeld ist, das wir haben werden, Zeitstempel von „ erstellt am“ und „aktualisiert Und standardmäßig ist das jetzt auf Zeit eingestellt. Das heißt, nachdem der Datensatz erstellt, erstellt und aktualisiert wurde, wird er auf die aktuelle Uhrzeit gesetzt. Dann werden wir einen Datenbankindex für die Performance erstellen. Das heißt, wenn wir die Benutzer-ID abfragen, erfolgt die Abfrage viel schneller weil wir den Index haben und er direkt zu den entsprechenden Zeilen springen kann und nicht jede Runde in unserer Datenbank oder in den Benutzerdatensätzen scannen muss jede Runde in unserer Datenbank oder in den Benutzerdatensätzen also einen Index erstellen, Testbenutzer-ID beim Record-Test mit der Benutzer-ID aufzeichnen, wird Raw das für uns erledigen Dann erstellen wir die Autodate-Funktion, und das bedeutet, dass das aktualisierte AT-Feld automatisch auf die aktuelle Uhrzeit aktualisiert wird auf die aktuelle Uhrzeit aktualisiert wenn ein Datensatz geändert wird Mit dem Skript werden wir die Funktion erstellen, aktualisierte rote Spalte Dann erstellen wir einen Trigger , um die Funktion automatisch aufzurufen, sodass das aktualisierte Rot automatisch angezeigt wird . In der letzten Zeile aktivieren wir dann die Sicherheit auf Datenbankebene mithilfe der Sachbearbeiter-Authentifizierung Jetzt können wir dieses Skript ausführen. Es wird die Tabelle erstellen. Sie können hier den Record-Test des Tabelleneditors sehen. Fügen wir nun die Richtlinien ein. Wir werden dort dieses Skript platzieren. Beginnen wir mit der Richtlinie zum ersten Lesen. Wir werden zuerst eine neue Sicherheitsregel auf Zeilenebene mit einem Namen erstellen . Dieser Name wird auf Ross Select stehen. Es wird auch auf unserem Tisch liegen. Dies ist unser Tabellenrekordtest. Es wird für den ausgewählten Vorgang verwendet, was bedeutet, dass der Benutzer die Datensätze auswählen muss , um sie lesen zu können. Wenn er also möchte, dass seine Seite mit Daten gefüllt wird, die er gespeichert hat, muss er im Grunde genommen eine Auswahloperation in Super Base durchführen, um zu den Datensätzen zu gelangen. Das ist also für Select. Dann gilt das für alle angemeldeten Benutzer. Und wenn Sie dies verwenden, wird Raw nur angezeigt, wenn ein JWT-Sub der Raw-Benutzer-ID entspricht werden die Benutzer-IDs verglichen, und falls es den Benutzer erkennt, wird es sagen: Hey, in diesem JWT-Token kann ich vereinfacht sehen, dass es sich um diesen Benutzer handelt, damit kann er den Datensatz lesen Dann ist es im Grunde dasselbe für alle anderen Richtlinien zum Löschen, Aktualisieren und Einfügen Dort kann man aber auch mit Check sehen und mit Check verwenden. Was ist mit Scheck? Bei check ist grundsätzlich so, dass die Zeile, die in unsere SupaBase eingefügt wird , eine Benutzer-ID haben muss , die der Benutzer-ID und JWT Sub entspricht, und für das Update gibt es sowohl using als auch with check, weil zuerst überprüft wird, ob es die Benutzer-ID gibt um diesen Datensatz anzuzeigen, und mit check wird hier die Benutzer-ID angezeigt, die wir abgleichen müssen, um dies zu abgleichen müssen, um dieser Aktualisierungsvorgang für unsere Superbase. Und um die Daten zu löschen, werden wir dies erneut überprüfen Wir werden diese RLS-Richtlinien für unsere neuen Tabellen verwenden. Wir werden es einrichten müssen, weil wir diese Sicherheiten auf Zeilenebene einrichten müssen , um die Sicherheitsebenen zu erstellen , die wir für unsere Anwendung benötigen Und ja, jetzt können wir das ausführen. Dadurch wird das RLS erstellt. Ich führe es bereits aus Für mich wird es also einen Fehler ausgeben, weil es bereits existiert, und jetzt haben wir Datentabelle mit der Sicherheitsstufe für Zeilen, und wir können versuchen, einige Daten aus unserer Datenbank zu erstellen und abzurufen. 26. Projekt 0: Vollständiges Testen von Projekt 0: Und jetzt kann der lustige Teil beginnen. Wir werden in unseren Dashboard-Ordner gehen und dort einen neuen Ordner erstellen , Komponenten unterstreichen Dort in diesem Ordner werden wir alle Komponenten behalten , die sich auf unser Dashboard beziehen Ich werde eine neue Datei erstellen und diese Datei SuperbsetST dot Tsix nennen Dort werde ich den vorgefertigten Code einfügen , ich für diesen Testzweck habe, und ich werde Ihnen den Code zeigen Wir werden es durchgehen und ich werde Ihnen erklären was es tut und wie es unsere Verbindung testet. Wenn Sie nun die Superbase-Verbindung testen möchten , indem Sie die Datensätze für Ihren Benutzer erstellen, löschen, aktualisieren und abrufen möchten, dass Sie gesperrt sind, wie in unserem Starterkit, müssen Sie diese Dinge tun Zuerst werde ich Ihnen helfen, wie Sie dorthin gelangen können, und dann werde ich Ihnen erklären, was diese Dateien bewirken Aber wenn Sie es jetzt testen und zum Laufen bringen möchten, müssen Sie genau das tun. Als Erstes erstellen Sie eine Supabse-Punktdatei in diesem Lip-Ordner und fügen dort diesen Code zum Erstellen eines Server-Superbase-Clients ein Außerdem müssen Sie sicherstellen, dass Sie über diese beiden Umgebungsvariablen verfügen Nächste öffentliche Superbase-URL und nächste öffentliche Superbase-On-Taste Es muss übereinstimmen, und das sind die Werte, die wir von Superbse erhalten haben Dann liest es die Werte und Sie greifen damit auf Ihre Datenbank zu Als Nächstes müssen Sie einen Aktionsordner in unserem Lippenordner erstellen . In diesem Aktionsordner erstellen Sie eine Datei mit dem Namen supabastest dot actions dot ts Wir nennen diesen SupaBase-Test, weil er nur zu Testzwecken dient Und bei jeder Anwendung , die wir erstellen, wird das ein bisschen anders sein, weil wir unterschiedliche Tabellen mit unterschiedlichen Feldern, unterschiedlichen Benennungen usw. haben werden unterschiedlichen Benennungen usw. Dies ist nur ein Test, bei dem wir versuchen werden, wie das funktioniert und versuchen zu lernen, wie wir es dann in jeder unserer anderen Anwendungen verwenden können es dann in jeder unserer anderen Anwendungen Sie werden also Superbstest Dot Action Dots erstellen, und dort werden wir vorerst diesen Code einfügen Dann gehen wir zum Dashboard über. Falls Sie dies noch nicht getan haben, erstellen Sie diese Datei mit Unterstrich-Komponenten, in der wir alle Komponenten für unser Dashboard ablegen Und darin werden wir den besten Punkt Ta 6 erstellen. Wir werden es so erstellen, weil wir dann auf das Dashboard gehen und die Komponente hier platzieren können auf das Dashboard gehen und die Komponente hier platzieren Aber lassen Sie uns zuerst die SupaBase-Testkomponente durchgehen, damit der Code hier so aussieht Ich habe dort auch die Kommentare. Okay. Und jetzt, wo wir es haben, gehen wir auf diese Seite TS 6 im Dashboard und heißen stattdessen Benutzer und Vorname willkommen. Wir geben das Div zurück, in dem wir unsere Komponente platzieren werden. Wir können diesen Benutzer auch löschen, wir benötigen ihn nicht mehr, und auch diesen Import löschen. Speichern Sie es und jetzt können wir es testen. Außerdem benötigen wir vorerst kein Styling für unsere Dashboard-Seite, sodass wir dort nur leere Fragmente hinterlassen können, mit denen wir mehrere Elemente gruppieren ohne unnötiges Markup vorzunehmen, wie es bei diesem DIF der Fall war Jetzt kann ich es speichern und wir können zu unserer Seite gehen. Hier auf unserer Seite gehen wir zum Dashboard, und dort können Sie sehen, derzeit unser Setup ist, es ist ziemlich einfach, Benutzeroberfläche ist ziemlich einfach, aber es wirklich zu Testzwecken. Was wir jetzt tun können , ist, dass wir dort eine Testbeschreibung eingeben können , die wir erstellen werden. Jetzt können wir sehen, dass der Datensatz da ist. Wir können nach Supabse gehen. Hier können wir den Rekord sehen. Wir können versuchen, es zu bearbeiten. Auch hier werden Sie die Änderung in Super Base sehen. Und jetzt können wir versuchen, es zu löschen, was auch funktionieren wird. Und wir können versuchen, einige Datensätze schneller zu löschen. Löschen. Ja, es funktioniert. Also dieser Test war erfolgreich. Jetzt funktioniert unsere Integration von Superbase und Clerk. Die Aufzeichnungen werden unter unserem Benutzer von clerk gespeichert und das ist so ziemlich alles 27. Projekt 0: Arbeiten mit Datenbanken Schritt für Schritt: Wir werden mit SupaBasetts beginnen. diese Datei kommuniziert die Anwendung mit der SupaBase-Datenbank und stellt außerdem sicher, dass Benutzer nur ihre eigenen Daten sehen, aktualisieren, löschen oder einfügen dürfen aktualisieren, löschen oder Was passiert, ist, dass wir den öffentlichen Schlüssel verwenden, um eine Verbindung zu SupaBSE herzustellen, und nachdem der Benutzer beim Clerk angemeldet ist, erhält er Dann senden wir dieses Token jedes Mal an SupaBase, wenn wir Super Base überprüft das Token und greift nur auf das spezifische Datenlicht zu, und greift nur auf das zu diesem Token gehört Wir haben da diese Client-Funktion zum Erstellen einer Serversubbase, und diese Funktion gibt dem Superbase-Client Bescheid , wer der aktuelle Benutzer ist Superbase-Client Bescheid , wer der aktuelle Benutzer Es wird das Token von Clerk nehmen und es Superbse geben Und dann wird Superbse herausfinden , welche Daten der Benutzer sehen darf Das ist die Adresse unseres Suba Base-Projekts. Das ist der öffentliche Schlüssel, und da passiert es. Dadurch wird das Geheimnis des Benutzers vor dem Angestellten eingeholt und SupaBase wird bewiesen, wer er 28. Projekt 0: Erstellen, Lesen, Aktualisieren und Löschen von Daten: Gehen wir zu einer anderen Datei über, superbstest Punkt als Punkte, und diese Datei wird die Funktionen haben , mit denen Benutzer die Testdatensätze in der Superbase aufrufen, sehen, ändern oder löschen Wir haben den Pfad erneut validiert. Dies hilft der Website, zu aktualisieren , wenn wir die Daten ändern Dann nennen wir diesen Createserver, Superbase-Client, und dann verwenden wir Dies hilft bei der Überprüfung, ob die Eingabe gültig ist. Das Feld ist also nicht leer, nicht zu lang und so weiter. Dann haben wir hier definiert wie unsere Datensätze aussehen sollen, sodass ID für Stärke, Benutzer-ID usw. stehen soll. Dann werden wir das Datensatzschema weiter testen. Dadurch wird überprüft, ob die Beschreibung nicht leer und auch nicht zu lang ist. Dabei wird der Typ für die Formulardaten verwendet , die wir einsenden werden. Wir haben es hier. Und dann haben wir die Funktion G Testaufzeichnungen. Dadurch werden im Grunde alle unsere Testaufzeichnungen abgerufen. Zuerst werden wir hier den Superbse-Client erstellen, damit er weiß, wer wir sind, und wir werden Supabase nach all unseren Datensätzen fragen , wobei die neuesten zuerst Das bedeutet, dass uns nur unsere Datensätze zurückgegeben werden, und falls dies fehlschlägt, wird ein Fehler ausgegeben Aber wenn wir keine Datensätze haben, wird einfach eine leere Liste zurückgegeben, und wir können das dann in unserer Komponente superbstest dot Tsix behandeln unserer Komponente superbstest dot Tsix Dann haben wir ihre Funktion zum Erstellen Wir werden die Daten validieren, um sicherzustellen, dass die Beschreibung ausgefüllt und auch nicht zu lang ist. Dann werden wir wieder einen Superbse-Client erstellen, genau wie in der vorherigen Funktion , der für uns prüft , ob wir einen neuen Datensatz in unserer Datenbank erstellen dürfen einen neuen Datensatz in unserer Datenbank erstellen Falls nicht, schlägt es fehl und der Pfad wird erneut validiert Das heißt, wenn wir einen Datensatz erstellen, wird dieser automatisch angezeigt und wir müssen unsere Seite nicht aktualisieren Der Testdatensatz aktualisieren ist derselbe. Wir werden die Daten validieren, Radio-Superbase-Client starten, dann haben wir den Aktualisierungsvorgang Falls es fehlschlägt, wird ein Fehler ausgegeben und der Pfad wird erneut validiert Nachdem wir unseren Datensatz aktualisiert haben, wird er automatisch angezeigt und wir müssen ihn nicht erneut aktualisieren Das Gleiche gilt für das Löschen eines Datensatzes nur mit einer anderen Operation. Und das war nur eine Testfunktion , die wir meiner Meinung nach nicht brauchen. Dann gehen Sie zur Super Base-Testkomponente. Was in dieser Komponente passiert , ist , dass wir, weil wir React-Hooks verwenden werden, dafür sorgen, dass diese Komponente den Client verwendet. Es wird auf der Client-Seite sein, und dort werden wir React-Hooks importieren, stat und use effect verwenden, dann user from clerk verwenden, und dann importieren wir die Funktionen, die wir in unseren Superbasetest-Punktaktionen haben , die wir Jetzt werden wir mit unserer Komponente beginnen und wir werden mit dem Stagemanagement beginnen Wir werden alle Datensätze speichern aus der Super Base-Datenbank abgerufen wurden Dann werden wir die Beschreibungseingabe speichern. ID des Datensatzes, der gerade bearbeitet wird , Beschreibungseingabe, wenn wir einen vorhandenen Datensatz bearbeiten werden , Mobbing, um den Ladestatus während des Datenbankvorgangs anzuzeigen während des Datenbankvorgangs Nachricht zur Anzeige einer Erfolgs - oder Fehlermeldung für den Benutzer, und wir erhalten den aktuellen authentifizierten Benutzer vom Dadurch erhalten wir Informationen wie Benutzer-ID, die wir für die Datenbankabfragen verwenden werden Die Standardwerte hier sind leer oder falsch oder Null oder leeres Array, und dieser Nutzungseffekt ruft automatisch Datensätze ab, wenn sich ein Benutzer anmeldet In dieses Abhängigkeits-Array fügen wir den Benutzer ein, und dieser Effekt wird ausgeführt, wenn sich ein Benutzer ändert Sie sagen hier, holen Sie nichts ab, wenn kein Benutzer angemeldet ist, und falls es erfolgreich ist, holen Sie sich die Benutzerdatensätze von Dann werden wir eine Funktion haben, um alle Datensätze von Superbse abzurufen Wir werden hier den Trcage verwenden, und beim Versuch werden wir den Ladespinner zeigen , während wir die Daten abrufen, also setzen wir Loading auf Drew und rufen dann die Superbase auf, um alle Datensätze für den aktuellen Benutzer abzurufen alle Das ruft die Testaufzeichnungen ab, die wir hier haben. Also werden wir es tatsächlich anrufen und versuchen, es zu bekommen, falls das fehlschlägt. Es wird es auffangen. Es wird uns den Fehler schicken. Und jedes Mal, wenn dieser Block beendet ist, ob er erfolgreich ist oder wenn dies zu einem Fehler führt, führt dies dazu, dass der Ladevorgang in den letzten Block fällt. Dann haben wir den Datensatz erstellen, und jetzt ist es im Grunde immer wieder dasselbe . Wir haben Funktionen zum Erstellen von Datensätzen, Aktualisieren von Datensätzen, Löschen von Datensätzen und genau das Gleiche. Es gibt Try Catch und schließlich, die ganze Zeit, und schließlich stellen wir das Laden auf Stürze ein. In Catch fangen wir den Fehler ab, und in try versuchen wir, die Funktionen, die wir in diesem subopastesten Punkt erstellt haben, Punkte aufzurufen in diesem subopastesten Punkt erstellt Wenn es uns dann gelingt, Datensätze zu erstellen, leeren wir die Beschreibung Wir haben das Feld also bereit für einen neuen Datensatz, den wir erstellen möchten Das Gleiche gilt hier, weil wir die Zustandsvariablen verwenden. Nach der erfolgreichen Coll-Funktion, die wir hier haben, müssen wir den Status also zurücksetzen , damit die alten Werte dort nicht bestehen bleiben Wenn der Benutzer dann nicht da ist, wird angezeigt, bitte melden Sie sich an, Superbase-Verbindung zu testen Wir brauchen das nicht, weil wir tatsächlich diese Abonnement-Ts verwenden, bei denen wir prüfen, ob der Plan Pro ist, aber für Testzwecke können wir ihn einfach dort belassen Dann kommen wir tatsächlich zur Rückgabe der Komponente selbst. Hier wird es als Super Base Connection Test bezeichnet. Es hat ein ziemlich einfaches Design. Dort werden die Nachrichten angezeigt. Falls also ein Fehler auftritt, wird die Meldung auf Fehler gesetzt oder falls sie erfolgreich ist, wird die Nachricht mit der Erfolgsmeldung , je nachdem, welche Operation Sie ausführen werden, gesetzt , je nachdem , und sie wird oben angezeigt , dann haben wir das Formular zum Erstellen von Datensätzen und wir haben unsere Datensatzliste. Und falls wir keine Datensätze haben, wird es angezeigt, dass keine Datensätze gefunden wurden. Falls wir Aufzeichnungen haben, wird es hier weitergehen, und falls wir Aufzeichnungen haben, ist das falsch, sodass es nicht gerendert wird und unsere Aufzeichnungen angezeigt werden. Falls wir einen Datensatz bearbeiten, sehen wir dieses Div mit der Option, die Beschreibung zu bearbeiten und sie zu speichern oder zu stornieren. Und falls es falsch ist, wird diese Datensatzbeschreibung mit der Möglichkeit angezeigt , den Datensatz zu bearbeiten oder zu löschen. Und das wird so ziemlich alles für die Komponente sein. Dann befindet sich die Komponente auf der Dashboard-Seite. Wenn ich mich abmelde, können wir nichts sehen und wir können nicht zum Dashboard gelangen. Es gibt nur eine Landingpage, aber wenn wir uns wieder anmelden, können wir sie wieder verwenden und sie wird funktionieren, und wir werden alle Änderungen in unserer Superbase sehen 29. Projekt 0: Erklärung der Supabase-Testaktionen: Wir werden mit SupabSTTS beginnen. diese Datei kommuniziert unsere Anwendung mit der SupaBSE-Datenbank und stellt außerdem sicher, dass Benutzer nur ihre eigenen Daten sehen, aktualisieren, löschen oder einfügen dürfen aktualisieren, löschen oder Was passiert, ist, dass wir den öffentlichen Schlüssel verwenden, um eine Verbindung zu SupaBSE herzustellen, und nachdem der Benutzer beim Clerk angemeldet ist, erhält er Dann senden wir dieses Token jedes Mal an SupaBase Super Base überprüft das Token und greift nur auf die spezifischen Daten zu, die mit diesem Token verknüpft sind Wir haben dort diese Client-Funktion zum Erstellen einer Serversubbase, Superbse-Client weiß, wer der aktuelle Benutzer Es holt sich das Token von Clerk und gibt es dann an Superbse weiter. Dann wird Super Base herausfinden, welche Daten der Benutzer sehen darf Dies ist die Adresse unseres Super Base-Projekts. Das ist der öffentliche Schlüssel, und da passiert es. Dadurch wird das Geheimnis des Benutzers vor dem Angestellten eingeholt und SupaBase wird bewiesen, wer er Gehen wir zu einer anderen Datei über, superbstest Punkt wirkt punktuell, und diese Datei wird die Funktionen haben , die es Benutzern bei, C, ermöglichen, die Testdatensätze in der SupaBase zu ändern oder zu löschen Wir haben den Pfad erneut validiert. Dies hilft der Website, zu aktualisieren , wenn wir die Daten ändern Dann nennen wir diesen Create Server Superbase Client , den ich gerade hier erklärt Und dann benutzen wir dieses ZOD. Dies hilft bei der Überprüfung , ob die Eingabe gültig ist. Das Feld ist also nicht leer, nicht zu lang. Dann haben wir hier definiert wie unser Datensatz aussehen soll, sodass ID eine Zeichenfolge und auch eine Benutzer-ID sein sollte . Dann werden wir das Datensatzschema weiter testen. Dadurch wird überprüft, ob die Beschreibung nicht leer und auch nicht zu lang ist. Also validieren wir hier. Wir werden dort den Fehler anzeigen, dass die Beschreibung erforderlich ist, falls sie nicht vorhanden ist, oder dass sie weniger als eine bestimmte Anzahl von Zeichen enthalten sollte In diesem Fall 500. Dies ist der Typ für die Formulardaten, die wir einsenden werden , und dann haben wir die Funktion G Testdatensätze. Dadurch werden im Grunde alle unsere Testdatensätze abgerufen. Zuerst werden wir hier den Super Base-Client erstellen, damit er weiß, wer wir sind, und wir werden Supabase nach all unseren Datensätzen fragen , wobei die neuesten zuerst Und falls das fehlschlägt, wird ein Fehler ausgegeben Aber wenn wir keine Datensätze haben, wird nur eine leere Liste zurückgegeben. Und das können wir dann in unserer Komponente superbstest dot Tsix handhaben unserer Komponente superbstest dot Tsix Dann haben wir ihre Funktion zum Erstellen Wir werden die Daten validieren, um sicherzustellen, dass die Beschreibung ausgefüllt und auch nicht zu lang ist. Dann werden wir einen Superbase-Client erstellen. Auch hier das Gleiche wie in der Funktion zuvor. Dadurch wird für uns überprüft, ob wir einen neuen Datensatz in unserer Datenbank erstellen dürfen . Falls nicht, schlägt es fehl und der Pfad wird erneut validiert Das heißt, wenn wir einen Datensatz erstellen, wird er automatisch angezeigt und wir müssen unsere Seite nicht aktualisieren Der Testdatensatz aktualisieren ist derselbe. Wir werden die Daten validieren. Dann haben wir den Aktualisierungsvorgang. Falls es fehlschlägt, wird ein Fehler ausgegeben und Path erneut validiert Nachdem wir unseren Datensatz aktualisiert haben, wird er automatisch angezeigt und wir müssen ihn nicht erneut aktualisieren Das Gleiche gilt für das Löschen eines Datensatzes nur mit einer anderen Operation. Und das war nur eine Testfunktion , die wir meiner Meinung nach nicht brauchen. 30. Projekt 0: Landingpage in Marketingordner verschieben: Übrigens werden wir einen neuen Ordner Marketing erstellen. Wir werden ihn in Klammern setzen, sodass der Pfad nicht der lokale Host 3.000 Marketing sein wird, um auf unsere Ausleihseite zuzugreifen Es wird immer noch nur Local Host 3.000 sein, und das wird die Ausleihseite selbst sein, denn wenn sie in Klammern steht, sie für den Pfad nicht berücksichtigt Das heißt, für eine bessere Ordnerstruktur werden wir dieses Marketing erstellen und dort eine Ausleihseite in Ponens einrichten, die für diese Ausleihseite bestimmt sind 31. End-to-End-Tests: Ihr Punkt und Ihre Datei mit allen Umgebungsvariablen sollten so aussehen. Wir bearbeiten drei neue Umgebungsvariablen, und es ist diese nächste Anmelde-URL für öffentliche Angestellte und Anmelde-URL , wo Sie sich einfach mit einem Schrägstrich anmelden und sich mit einem Schrägstrich anmelden müssen Im Grunde werden Sie diese beiden Zeilen einfach kopieren und einfügen. Für Web Book Secret ist dies das Webhook-Geheimnis von Clerk, und Sie werden es dort ablegen, und das war's Nachdem Sie all diese Umgebungsvariablen haben, sind Sie fertig, und das war's Und als letztes werden Sie sich als Nächstes an den öffentlichen AURL Local Host 3.000 halten öffentlichen AURL Local Host 3.000 Jetzt werden wir den Befehl ausführen und Px Prisma generieren, um das Schema zu generieren Wir machen npxPrisma DB Push. Dies sollte das Schema in unsere Superbase übertragen. Und bevor wir das tun, müssen wir dort noch eine weitere Sache unter dieser URL hinzufügen eine weitere Sache unter dieser URL Wir werden eine direkte URL hinzufügen , um eine direkte Verbindung zu unserer Superbase Nachdem wir das haben und es gespeichert haben, können wir npxPrisma DB Wir werden den Befehl ausführen, und das sollte unser Prisma-Modell in unsere Superbase-Datenbank übertragen Das heißt, wir gehen jetzt in unsere Superbase, wir haben ihr Benutzer- und Jetzt können wir mit den Tests fortfahren. Um das jetzt zu testen, brauchen wir zwei Dinge. Zuerst öffnen wir Engroc Dot , das Sie heruntergeladen und installiert haben, und dort werden wir Engroc HTTP Wenn Sie beispielsweise auf dem lokalen Host 3.001 laufen, müssen Sie ngroc HTDP Dort werde ich diese URL nehmen. Dort gehst du in Configure, dort scrollst du nach unten, gehst zu Webhooks Wir werden einen neuen Endpunkt hinzufügen. Ich werde die URL von Engroc einfügen und API Webhooks Clerk machen Dort werde ich den Benutzer und all diese Ereignisse überprüfen. Klicke auf Erstellen und ich erhalte dieses Signaturgeheimnis. Also werde ich es einfach anzeigen, dann kopiere ich es und füge es so in unsere Umgebungsvariablen ein. Wir fügen auch im Terminal diesen Befehl Stripe Listen forward to Local Host 3.000 API-Webhooks, Stripe, bevor Sie den Stripe-Login durchführen müssen , wie wir es zuvor getan haben , um sich beim Stripe anzumelden Danach wird es überprüft. Jedes Mal, wenn Sie Ihre Anwendung testen möchten, müssen Sie genau das tun. Stripe, hören Sie auf Local Host 3.000, API Webhook Stripe weiter 3.000, API Webhook Stripe Das muss der richtige Pfad sein. Wenn es zum Beispiel Webhooks XIX gibt, dann benötigen Sie die API Web Hooks Six Stripe, aber wir haben die richtige Benennung, also ist es in Ordnung so Jetzt sind wir bereit, damit wir es testen können. Wenn Sie mit dem Benutzer testen möchten , den Sie bereits in Ihrem Sachbearbeiter haben, löschen Sie den Benutzer einfach aus Ihrem Sachbearbeiter Andernfalls wird es nicht funktionieren. Der Benutzer, mit dem Sie das testen möchten, darf zuvor nicht im Sachbearbeiter gewesen Es muss dort sein, kurz nachdem Sie sich jetzt bei ihm angemeldet haben, da der Benutzer sonst doppelt angezeigt wird Ich werde nicht in deiner Superbase erstellt und das wird nicht funktionieren. Dort ist eine kleine Korrektur erforderlich, um den richtigen Pfad zu finden. Wenn Ihr Hintergrund nicht die richtige Farbe hat, überprüfen Sie das CSS mit dem blauen Punkt des Globus. Vergewissere dich, dass es nur eine Grundfarbe gibt. Dies ist für Hintergrund und Vordergrund. Überprüfen Sie die Tailwind Dot-Konfigurationspunkte noch einmal und stellen Sie sicher, dass diese beiden Dateien für Sie funktionieren Ich meine, mit den Farben und allem weil du vielleicht dort stecken bleiben kannst, versuche herauszufinden, wo du die Farben ändern solltest und so weiter, aber diese beiden Dateien machen es Globe B Punkt CSS und Tail in Config ICV fehlen auch Stripe. Lassen Sie uns also NPMI-Stripe machen. Manchmal gibt es dieses Problem mit der API-Version. Also lass es uns einfach auf eine Kabelverbindung umstellen. Und jetzt müssen wir unsere Komponente in ein Dashboard verschieben, da sie sich derzeit auf einer Ausleihseite auf Seite Tsix Wir werden in den App-Ordner gehen. Wir werden ein neues erstellen, wir nennen es Dashboard. In diesem Ordner werden wir Paget Six erstellen. Und auf diese Seite können wir diese Ausleihseite einfach verschieben. Kopieren wir es und fügen es dort ein. Dort können wir auch den Header entfernen und den Import des Newsletter-Abonnements entfernen . Wir werden diese Komponente nicht verwenden. Außerdem werden wir kein Bild verwenden. Jetzt kehren wir zu Seite 6 zurück. Wir werden dort dasselbe tun. Und dort können wir die Überschrift für diesen Teil auf der Ausleihseite hinterlassen . Bitte machen Sie diese Dummy-Funktionalität. Jetzt werde ich das einreichen, und das wird dort eine Summen-Demo für unsere potenziellen Kunden auf der Ausleihseite Und wenn sie das Produkt kaufen und ihr Dashboard bekommen, wird es die eigentliche Funktionalität geben. der Ausleihseite können wir die Komponente entfernen, und tatsächlich haben wir dort mit einer ziemlich schlechten Benennung angefangen. Benennen wir es in AI um und klicken Sie auf Fenster. Lassen Sie uns auch auf SuDateImports for AI klicken und auf Window klicken. Wir brauchen die richtige Benennung und wir haben dort beim Einfügen der Dateien von should be app einen Fehler gemacht und für die API nehmen wir einfach diese beiden Ordner und fügen sie dort in den API-Ordner und fügen sie dort in Dann haben Sie im API-Ordner einen Deep-Sek-Benutzer-Webhooks und in Webhooks Clerk und Stripe Da dieser API-Ordner dann leer ist, können wir ihn löschen. Und noch etwas ist, dass Preisgestaltung und Bezahlung auch in die App verlagert werden sollten. Und dann sind wir startklar. Wir haben das Problem mit der Abhängigkeit. Lassen Sie uns eine npmiSwix-Installation durchführen. Es gibt eine Sache, die wir korrigieren müssen, und das ist diese Platzhalter-Benutzeroberfläche, weil sie bei weitem nicht der Benutzeroberfläche entspricht, die wir tatsächlich in unserem Produkt haben Und wir werden es umgehend dort platzieren. Machen Sie dieses Produkt zur gleichen MOUI wie das Produkt selbst, da wir eine AIChed-Fensterkomponente haben Jetzt können wir Descar One auswählen, ich reiche es ein. Lass es uns ausstellen, und ich denke, das hat R one perfekt gemacht. Was wir dort hinzufügen werden, ist eine Code-Aktionsschaltfläche, also werde ich sie oben platzieren. Ich werde dort diese Aufforderung an der Schaltfläche „ Erste Schritte“ platzieren , die den Benutzer zur Anmeldung weiterleitet. Ich werde mit Google weitermachen. Jetzt werden wir in unserem Dashboard-Ordner Layout DTS six hinzufügen Wir werden dort zum Starter zurückkehren und zum Layout TS Six und zum Dashboard-Ordner Wir werden es kopieren, in unsere Anwendung einfügen und dort können wir sehen, dass wir keinen Zugriff auf diese Seite haben. Wir müssen auf Abonnieren klicken, um darauf zuzugreifen. Jetzt werden Sie diesen Befehl ausführen. Stripe Hören Sie sich die lokalen 3.000 beliebten APA-Webhooks, Stripe, an und auf der Seite können wir auf Abonnieren klicken Dort werden wir die Daten eingeben und abonnieren. Die Zahlung war erfolgreich, wir gehen zum Dashboard, dort wird sie geladen und wir haben Zugriff auf das Produkt. Wir können den Designmodus verwenden. Wir können einfach etwas generieren, zum Beispiel Stripe-Integration, bestätigen und schon haben wir die Antwort. In unserer Datenbank können Sie sehen, dass das Abonnement erstellt wurde und das bedeutet, dass alles funktioniert. 32. Bereitstellung: diesen Versal spielen, gehen wir zuerst zu package do JSON und fügen dort dem Skript diese zusätzlichen Befehle Dann werden wir eine Datei mit dem Namen VersaldJsn erstellen und diesen Inhalt dort ablegen Dann fügen wir Unzufriedenheit in die nächsten Punkte der Konfiguration ein, dann führen Sie diesen Befehl aus und entfernen Sie IM recross force dot Next wir Unzufriedenheit in die nächsten Punkte der Konfiguration ein, dann führen Sie diesen Befehl aus und entfernen Sie IM recross entfernen Sie IM recross Dann führen Sie NPM install erneut aus, und dann führen Sie NPM run built aus, wodurch im Grunde überprüft wird , ob Ihre Anwendung bereit ist, bereitgestellt zu werden, falls Fehler auftreten Sie werden dort angezeigt und Sie müssen keine Zeit mit VerSL verschwenden, da VerSL fehlschlägt, falls der Build dort nicht richtig funktioniert. Jetzt müssen wir dieses Projekt veröffentlichen, um aufzustehen. Ich mache Sutrla plus Shift plus P. Publish um aufzustehen, ich nenne das Projekt Deep Seek, irgendwas und ich wähle aus, irgendwas und ich wähle aus dieses Projektarchiv privat oder öffentlich sein soll Was den Einsatz angeht, spielt das keine Rolle. Nur wenn Sie den Code mit jemandem teilen möchten, sollten Sie ihn veröffentlichen, da Sie ihn sonst nicht sehen können. Dann wirst du alle Änderungen dort speichern. Sie werden dort oben über dem Namen des Ordners auf Source klicken . Alles sollte inszeniert werden. Du kannst dort eine Commit-Nachricht eingeben, auf Commit klicken und es wird sie an Git weiterleiten Wenn Sie dann Änderungen an Ihren Dateien vornehmen, werden die neuen Änderungen dort angezeigt, und Sie können erneut eine Commit-Nachricht eingeben. Zum Beispiel Deployment Fix, Commit und so weiter. Auf diese Weise werden Sie Ihre Live-Seite auf Versal mit einigen neuen Funktionen und Inhalten aktualisieren Ihre Live-Seite auf Versal mit einigen neuen Funktionen und Inhalten Jetzt gehst du bei einem neuen Projekt zu virsal.com. Ich werde bei meinem Project Deep nach ARO Project One suchen, das ich gerade auf meinem Git upp veröffentlicht habe und dort kann ich alle Umgebungsvariablen einstellen, wie das aussehen soll Wenn du in deinen Punkt und deine Datei gehst und ihr Webhook-Geheimnis hast, wirst du dort den Namen der Umgebungsvariablen eingeben und dort den Wert eingeben, also ungefähr so Und dann wirst du das für all deine Umgebungsvariablen tun all deine Umgebungsvariablen Zum Beispiel, Angestellter, ich erinnere mich nicht an den Namen, aber ja, Sie wissen wahrscheinlich, was ich meine Angestellter und füge es dort ein. Dann haben Sie den Stripe One, und Sie müssen dort die Namen eingeben, die Sie in Ihrer Umgebungsvariablendatei haben Oder du kannst es auch auf eine andere Art machen. Sie können den Punkt und die Datei oben einfügen, und es sollten alle Werte geladen werden. Lass es uns jetzt versuchen. Wir werden dort auf Deploy klicken. Es wird scheitern. Wir werden auf Gehe zum Projekt klicken. Dort werden wir auf Einstellungen klicken. Umgebungsvariablen, und da ist die Schaltfläche. Ich werde dort einen Wert eingeben, auf einen anderen klicken, auf Punkt und Datei importieren klicken. Sie müssen die DTN-Datei suchen, und nachdem Sie sie bearbeitet haben, werden alle Umgebungsvariablen dort geladen und Sie müssen sie nicht einzeln schreiben. Ich werde dort auf Speichern klicken Ich kann diesen xx-Wert löschen, weil ich ihn natürlich nicht verwenden werde. Und jetzt kann ich zu Bereitstellungen gehen. Fahren Sie mit diesem fort, klicken Sie zum Beispiel auf Erneut bereitstellen und die Seite wird Jetzt öffnen wir die Seite, die URL, auch mit HTTPS, kopieren Ich muss zum Angestellten gehen und dort den Endpunkt für unser Webook , das wir dort eingegeben haben, vom Ngrog auf unsere URL von Versal ändern dort eingegeben haben, vom Ngrog auf unsere URL von den Endpunkt für unser Webook , das wir dort eingegeben haben, vom Ngrog auf unsere URL von Versal ändern. Und es sollte so aussehen Dies ist der Link zu unserer Seite, und da ist Slash API Webooks Jetzt werde ich es speichern. Stellen Sie sicher, dass das WebHook-Geheimnis das richtige ist , das wir auf Versal hochladen , und das sollte auch so sein 33. Projekt 2: Intro: werden eine SAS-Anwendung für YouTube-Videoanalyse entwickeln , unsere Nutzer abonnieren können, und dann haben sie Zugriff auf unser Produkt, das wir Schritt für Schritt mit KI erstellen werden , auch unter Verwendung von Dokumentationen. Ziel ist es, Ihnen zu helfen, ein Produkt mit minimaler Rentabilität zu entwickeln und zu lernen, wie Sie mit einem ähnlichen Ansatz selbst eine SAS - oder MicroSAS-Anwendung erstellen mit einem ähnlichen Ansatz selbst eine Ich helfe Ihnen dabei, die Eingabeaufforderungen zu erstellen, die Sie wiederverwenden können ein SAS einzurichten und zu erfahren, wie Sie es auch dann zum Laufen bringen können, wenn einige neuere Versionen veröffentlicht werden. Sie werden sehen, welche Dokumentationen Sie verfolgen sollten und wie eine Reihe von Eingabeaufforderungen erstellen , die Ihnen ein ähnliches Ergebnis liefern sollten Und wenn Sie später ein weiteres SAS erstellen, wissen Sie bereits, wo Sie nach all den Dingen suchen müssen, die Sie für Ihren Bauprozess benötigen für Ihren Bauprozess benötigen Und was wir in dieser Sitzung tun werden Wir werden anhand von Eingabeaufforderungen ein Produkt erstellen dann werden wir Drittanbieter für die Datenbank und Zahlungen integrieren Drittanbieter für die Datenbank und Zahlungen Wir führen Funktionstests durch, bei denen Sie lernen , wie Sie Ihre SAS-Anwendungen bis zum Ende testen können, und wir werden dies auch für Versal bereitstellen Unsere Anwendung wird also live sein. Sehen wir uns nun die Demo dieser SAS an. Wir befinden uns hier auf einer Landingpage und werden auf Get Started klicken. Dadurch werden wir zur Anmeldeseite weitergeleitet, auf der ich Weiter mit Google auswählen werde. Jetzt wird der Benutzer in Clerk gespeichert, dann wird er über das Webbook auch in unserer Datenbank gespeichert In unserer Datenbank können Sie sehen, dass ich bei einem neuen Benutzer eine Null für die Stripe-Kunden-ID Der nächste Schritt besteht darin, Zugriff auf die Anwendung zu erhalten. Dort werde ich auf Abonnieren klicken. Es wird mich zur Stripe-Checkout-Sitzung weiterleiten . Dort werde ich bezahlen. Ich erhalte die Nachricht, dass die Zahlung erfolgreich war, und jetzt kann ich das Produkt und die Funktionsweise des Produkts verwenden das Produkt und die Funktionsweise des Produkts Ich gebe dort die YouTube-URL und klicke auf Video analysieren. Dort sehe ich das Vorschaubild des Videos, das gerade analysiert wird, als Grundlage für die Analyse, bis es geladen ist Da ist die KI-Analyse. Ich kann die Analyse in der Datenbank speichern. Dann werde ich es dort in der gespeicherten Analyse sehen. Wenn ich darauf klicke, wird ein Modell mit der gespeicherten Analyse geöffnet , und ich kann es bearbeiten und in der Datenbank speichern oder einfach löschen. Gehen wir jetzt zur Datenbank und ich kann das aktive Abonnement für meinen Benutzer sehen, und ich kann auch sehen, wie die Analyse in der Datenbank gespeichert wird. Und wenn Sie den Prozess sehen möchten, wie ich das von Grund auf gemacht habe, lassen Sie uns zum Schluss gleich darauf eingehen. 34. Projekt 2: Einrichtung: Verwenden Sie zunächst den Befehl von TelewnCSS, um unsere Anwendung zu erstellen Sie können KI verwenden, um dies zu tun, oder Sie können es einfach selbst mit telencss.com tun und sicherstellen, dass Sie die aktuellste Version des Befehls verwenden Das heißt, wir gehen zu tansss.com, starten das Framework Next JS und Wir werden diese Zeile kopieren und zu unserer ID zurückkehren und sie dort einfügen Wir müssen kein Saatgut für mein Projekt verwenden. Lassen Sie uns anstelle meines Projekts DR Dot verwenden, da wir uns bereits in dem Ordner befinden, den wir für unsere Anwendung erstellt haben. Also habe ich einen Ordner mit dem Namen Video Analyzer SAS erstellt. Dann habe ich diesen Ordner in der Cursor-IDE geöffnet und jetzt werde ich diesen Befehl ausführen. Ich werde Enter drücken. Dann mache ich mit Y weiter. Ich möchte Tail WN CSS verwenden, kein Quellverzeichnis, kein Turbopec, kein AIS, und jetzt werden alle Abhängigkeiten installiert, und dann Als Nächstes werden wir den Server betreiben, also werden wir NPM run Death ausführen Wir werden diesen lokalen Host öffnen und dort sollten wir die erste Benutzeroberfläche mit der nächsten JS-Vorlagenanwendung haben die erste Benutzeroberfläche mit der nächsten JS-Vorlagenanwendung Wenn das angezeigt wird, bedeutet das auch, dass das Tailwind-CSS funktioniert Wenn du testen willst, ob es wirklich funktioniert, kannst du zur Seite gehen und dort vielleicht einfach den Hintergrund auf Grün setzen 400 speichern Sie es zum Beispiel. Dann können Sie sehen, dass es funktioniert, weil es die Endklasse gelesen und auf Ihre Seite angewendet hat. Aber jetzt werden wir anfangen zu fragen und diese Dinge der KI überlassen Wir wollten nur sichergehen , dass wir die Anwendung richtig eingestellt haben und der Rückenwind Wir haben die richtige Konfiguration und können jetzt mit der Aufforderung beginnen nächste Schritt für mich besteht darin, den Eingabeaufforderungspunkt dxDFLE zu erstellen Ich werde alle Eingabeaufforderungen speichern , damit Sie sie dann wiederverwenden können, verbessern und Sie müssen diese Eingabeaufforderungen nicht dxtfLE erstellen. Es genügt, wenn Sie den Komponisten direkt dazu auffordern 35. Projekt 2: Eingabeaufforderung 1: Beginnen Sie mit der Aufforderung Nummer eins. Ich werde diese Struktur beibehalten. Zuerst werde ich erklären, worum es bei dieser Anwendung gehen sollte, dann die Kernfunktionen der Anwendung, dann die Kernfunktionen der Anwendung, dann die UI-Komponenten, die ich haben möchte, dann das Design der Anwendung und dann einige zusätzliche Überlegungen zum Code. Lassen Sie uns mit den wichtigsten Funktionen der Anwendung beginnen. Diese Anwendung sollte die URL „ YouTube Below“ als Eingabe verwenden. Dort werden wir am Ende eine andere API verwenden, das spielt vorerst keine Rolle. Dann sollte es eine saubere, benutzerfreundliche Oberfläche bieten. Kernfunktionen gehören das YouTube-URL-Eingabefeld mit Validierung, Fortschrittsanzeige für den Ladestatus, Anzeige der Analyseergebnisse und Fehlerbehandlung für ungültige TRLs, Witwen ohne Transkripte und API-Fehler Für die UI-Komponenten benötige ich ein Hauptformular mit YouTube-URL-Eingabe und YouTube-Symbol. Ich möchte YouTube-URL-Eingabe und YouTube-Symbol ein Formular mit Ladestatus und Fortschrittsanzeige während der Verarbeitung einreichen und Fortschrittsanzeige Dann eine Ergebnisanzeige mit dem Bereich Videoanalyse wird ein weiteres Video analysiert, sauberes und ansprechendes Layout. Für das Styling möchte ich Tailing-CSS, responsives Design mit Mobile-First-Ansatz, moderne und saubere Oberfläche, Ladeanimationen, Fortschrittsanzeigen und dunkle Farben mit einigen roten Details verwenden responsives Design mit Mobile-First-Ansatz, moderne und saubere Oberfläche, Ladeanimationen, Fortschrittsanzeigen und dunkle Farben , aber hauptsächlich auf die scan-ähnliche Benutzeroberfläche konzentrieren und für den Code Typoskript für die Typsicherheit verwenden, Typoskript für die Typsicherheit verwenden, richtige Fehlerbehandlung, einen Ladestatus und das Benutzerfeedback implementieren einen Ladestatus und das Benutzerfeedback Halten Sie die Benutzeroberfläche sauber und minimal und konzentrieren Sie sich auf Mit dieser Aufforderung werden wir sie jetzt kopieren. Wir werden es dem Komponisten übergeben und auf die Antwort warten. Und jetzt haben wir etwas Output. Sie sollten dort in der API und im Transkript Route DS haben. Und das ist wahrscheinlich nicht richtig. Wir müssen Rapid API nicht verwenden. Wir werden nur die YouTube-Transkriptbibliothek verwenden, sie aber in der nächsten Aufforderung angeben Ich werde wissen, wie man versucht, es so allgemein wie möglich zu machen. Unabhängig davon, welche Ausgabe Sie von der ersten Aufforderung erhalten, werden wir sie in der zweiten Aufforderung korrigieren Aber Sie sollten dort die Route für das Transkript haben, dann die Fehleranzeige der Komponenten, Fortschrittsanzeige, Ergebnis und Eingabe Ich denke, das ist richtig. Und die Seite, die diese Komponenten verbindet. Die Mission unserer nächsten Aufforderung besteht darin, die Antwort zu verspotten, da wir derzeit keine API für die KI-Analyse angeschlossen haben. Aber sie versuchen, das so allgemein wie möglich zu machen. Wir werden versuchen, die Ausgabe der ersten Eingabeaufforderung zu korrigieren. Das heißt, selbst wenn Ihre Eingabeaufforderung bei einigen nächsten Eingabeaufforderungen eine andere Ausgabe als meine haben wird, sollten wir dieselbe Ausgabe erreichen Wir können alle akzeptieren und die Seite überprüfen. Sie können sehen, dass derzeit nichts unternommen wird. Wir haben die YouTube-URL. Es liest die gültige URL nicht. Es sieht so aus, als würde es nicht einmal das Ergebnis der Transkriptionen Das werden wir jetzt beheben. 36. Projekt 2: Eingabeaufforderung 2: Gehen wir zur Eingabeaufforderung, und dort werde ich das Feld notieren, falls es welche gibt, ich werde dort nicht das finden, was ich erwarte. Und lassen Sie uns die Eingabeaufforderung durchgehen. Zuerst möchte ich einen Abschnitt mit dem Texttranskript aus dem Eingabevideo anzeigen Texttranskript aus dem Eingabevideo Stellen Sie außerdem sicher, dass wir in den Punkten der API-Transkriptzeile wieder eine andere API verwenden werden, da dies in der Produktion nicht funktioniert Für dieses MVP möchte ich Schwarz-Weiß-Farben verwenden. Sie können dort auch alle Fehler notieren, die Sie haben. Ich werde dort nicht sagen, dass derzeit die YouTube-URL nicht gültig ist, obwohl sie es ist Ich werde auch das Beispiel einer gültigen YouTube-URL angeben und dort auch vermerken, was ich erwarte. Ich erwarte also, dass ich die YouTube-Video-URL eingebe. Ich klicke auf Analysieren und es wird angezeigt, dass das Video geladen oder verarbeitet wird. Danach wird der Abschnitt mit einem Text aus dem Videotranskript angezeigt Abschnitt mit einem Text aus dem Videotranskript Sie können dort wissen, was Sie von Ihrer Seite erwarten. Sie können dort auch Ihre Fehler oder Bugs kennen. Sie können dort auch Ihre Farbpräferenzen notieren. Was erwartest du dann? Vielleicht möchten Sie eine andere Bibliothek verwenden, und wir werden auf die Antwort warten. Jetzt werden wir Hall akzeptieren und prüfen, was implementiert ist . Da sieht es gut aus. Es benutzt die richtige Bibliothek. Jetzt gehen wir auf unsere Seite und klicken auf Aktualisieren. Es sieht so aus, als ob es immer noch nicht die richtige Farbe verwendet hat, aber wir können es später reparieren. Das ist kein großes Problem. Wir geben die YouTube-URL ein und es funktioniert. Da haben wir also das Transkript, aber wir brauchen diese Funktion nicht Wir werden das im Grunde einfach wegwerfen und dort nur die Analyse zeigen Aber genau so sollte es funktionieren. Wir können auf ein anderes Video analysieren klicken, wir können dort wieder den YouTube-V-Link einfügen. Es wird der Fortschrittsbalken angezeigt, und dann können wir dort das Video mit dem Vorschaubild und mit einem Videotranskript sehen dem Vorschaubild und mit , was perfekt ist Und wir können mit der Arbeit am Aufforderungsbaum beginnen , sodass wir dieses Transkript nicht benötigen, sondern es verwenden und daraus eine KI-Analyse erstellen Dafür benötigen wir auch eine KI-API , die uns bei dieser KI-Analyse hilft Und ich werde Deep Seek verwenden. Ich verwende immer noch die Credits. Ich habe dort für 2$ aufgeladen. Sie können also einfach alles verwenden, was Sie möchten. Es muss nur eine AIAPI sein , die Ihnen hilft, diesen Text zu analysieren Wenn ich auf die Plattform dotpsq.com gehe, gehe ich dort zu den API-Schlüsseln, und ich habe Ich werde einen neuen erstellen, also werde ich diesen widerrufen, einen neuen APAKey erstellen, ihn kopieren und zu meiner ID zurückkehren Jetzt gehst du in die Dot N-Datei. Wenn Sie noch keinen haben, erstellen Sie ihn einfach und dort speichere ich den AI APIKey 37. Projekt 2: Eingabeaufforderung 3: Gehen wir nun zu Prompt und dort werden wir die Funktionalität implementieren, die ich gerade erwähnt habe. Ich möchte meine bestehende Funktionalität erweitern, bei der eine KI den transkribierten Text des Eingabevideos analysiert und AIAPIKey, den ich in meiner Doden-Datei habe, wiederverwenden Jetzt kann ich auch angeben, um welchen API-Schlüssel es sich handelt, und dann die Funktionalität implementieren , bei der die KI das Transkript analysiert, das wir aus dem Video erhalten Transkript analysiert, das wir aus dem Video Zeigen Sie den transkribierten Text niemals irgendwo an, und wenn der Text geladen wird, zeigen Sie ein Skelett Nachdem KI die Videozusammenfassung generiert hat, zeigen Sie sie professionell und leicht lesbar an. Sorgen Sie dafür, dass sich alles einfach, hell und freundlich anfühlt , mit glatten Schriften und guten Abständen Dann lösche ich einfach die Schriften. Wir können die Abstände belassen und das endgültige Aussehen sollte sich modern und poliert anfühlen. Mit dieser Aufforderung gehe ich davon aus , dass ich den Text nur analysiere. Ich werde sicherstellen, dass der transkribierte Text niemals irgendwo angezeigt wird, weil wir ihn nicht benötigen, und das sollte die Funktionalität sein Dann werden wir darauf aufbauen, aber für den Moment wird das reichen Wir werden es in den Composer schreiben und auf die Antwort warten. Schauen wir uns die Antwort an. Es analysiert die Funktionalität und hat eine neue Route in der API für Analyze erstellt. Dann verwendet es die Deep CKI API, was richtig ist. Es ist eine Komponente des Analyseergebnisses. Anschließend wurde die Hauptseite aktualisiert, sodass anstelle des Zeilentranskripts KI-Analysen abgerufen und angezeigt Es wurden die UI-Komponenten, Transkriptergebnis und der Edit Skeleton Loader aktualisiert, die Fortschrittsanzeige aktualisiert, Benutzererfahrung verbessert, und jetzt können wir die Website testen Auf unserer Website fügen wir die YouTube-URL und klicken dann auf Analysieren Du kannst den Server auch neu starten , falls das bei dir nicht funktioniert. Das heißt, in Ihrem Terminal müssen Sie ct plus C und NPM De ausführen und den lokalen Host 3.000 erneut öffnen Schauen wir uns an, wie die Inhaltsanalyse läuft. Also hat es die URL validiert. Es hat die Videodetails abgerufen, das Transkript extrahiert, die Daten verarbeitet und analysiert jetzt den Inhalt Und da haben wir das analysierte Video. Wir haben die Zusammenfassung, die wichtigsten Punkte, die Erkenntnisse und die Schlussfolgerung. Ich meine, es ist gut. Wir können dann die Benutzeroberfläche verbessern , weil wir möchten, dass dies etwas besser hervorgehoben wird. Ich meine, die Abschnitte, die wichtigsten Punkte und alles. Aber ja, es ist nur ein Detail, an dem wir dann arbeiten können und wir werden es zum Laufen bringen. Jetzt können wir uns hauptsächlich auf die Funktionalität und die Funktionalität konzentrieren . Ich glaube, es ist das, was wir für unser MVP wollten. Jetzt wollen wir einige zusätzliche Funktionen für unsere SAS. Wir möchten diese Analysen auch speichern, die gespeicherten Analysen auflisten, und dafür wird es wahrscheinlich auch schon soweit sein. 38. Projekt 2: Eingabeaufforderung 4: Und für die Aufforderung dazu werden wir auch mit Prisma beginnen Sobald die KI-Analyse abgeschlossen ist und das Ergebnis in einer Komponente angezeigt wird, möchte ich eine sichere Bindung hinzufügen, die es Benutzern ermöglicht, diese Analyse in der Datenbank zu speichern Definieren Sie ein Prisma-Modell zum Speichern von KI-Analyseergebnissen. Die Ergebnisse sollten im JSON-Format gespeichert werden. Es sollte die Analyse über Prisma in der Datenbank speichern. Erstellen Sie außerdem ein Modell für den Benutzer und weisen Sie die Analyse dem aktuellen Benutzer zu Für die Benutzeroberfläche möchte ich eine sichere Grenze unter dem KI-Analyseergebnis hinzufügen Grenze unter dem KI-Analyseergebnis Wenn darauf geklickt wird, sollte sie die API-Anfrage zum Speichern der Analyse auslösen die API-Anfrage zum Speichern der Analyse Zeigen Sie außerdem den Lade- und Erfolgsstatus auf der Schaltfläche an. , Erstellen Sie auf der Hauptseite unter dem Fenster und dem Postfach einen visuell ansprechenden Bereich alle zuvor gespeicherten Analysen angezeigt , und aus der Datenbank abgerufen werden. Jede Analyse sollte als anklickbare Karte angezeigt werden um eine klare Lesbarkeit zu gewährleisten Und wenn der Benutzer auf eine Analyse klickt, öffnet er ein gut gestaltetes Modell, das die vollständige Analyse lädt und in einem benutzerfreundlichen Format darstellt Außerdem möchten wir neben der angezeigten Analyse eine Schaltfläche zum Bearbeiten hinzufügen. Und wenn der Benutzer auf Bearbeiten klickt, sollte der Text editierbar sein Nachdem der Benutzer Änderungen vorgenommen hat, kann er auf eine sichere Grenze klicken, und wir sollten auch das reibungslose Erlebnis mit klaren visuellen Hinweisen genießen mit klaren visuellen Hinweisen Und dann auch auf die Schaltfläche Löschen , um die Analyse zu löschen. Und wir werden dort auch irgendwo zwischen diesen Zeilen erwähnen , bitte benutzen Sie den Sachbearbeiter falls Sie das auch implementieren werden Und jetzt werde ich diese Aufforderung annehmen, einen Komponisten öffnen und ihn dort einfügen Wir werden auf die Antwort warten. Sehen wir uns jetzt die Antwort an. Also die Datenbankintegration, da können wir das Prisma und das geplante Prisma sehen . Wo ist das Modell Dann die abgeleitete Autorenauthentifizierung, uns fehlen die Ordner, die wir für die Anmeldung und Registrierung benötigen und einige zusätzliche Dinge, aber wir wollen das Rad neu erfinden Ich habe diese Dinge bereits vorbereitet, und ich werde Ihnen zeigen, wie Sie sie einfach aus der Dokumentation wiederverwenden können und sich nicht auf KI verlassen können, denn manchmal gibt es einige Änderungen in Dokumentation und KI kann Irre führen und Sie werden eine Menge Fehler bekommen Also werde ich dir jedes Mal zeigen, wie das funktioniert, wenn wir zu clergy.com gehen und du dort auf Dokumente klickst Sie können dort sehen, wie Sie Clerk tatsächlich in Ihre nächste JS-Anwendung implementieren Clerk tatsächlich in Ihre nächste Das ist zum Beispiel für die Middleware Dots. Wir kopieren es einfach und fügen es ein. Dort kannst du sehen, wie es für den Layoutpunkt Ta sechs aussehen sollte . Auch hier werden wir die vorgeschlagenen Änderungen dort kopieren und einfügen. Also müssen wir das in den Clerk Provider packen. Wir werden die Anmeldung verwenden und so weiter. Fügen wir es in den Layoutpunkt Tasix ein, nachdem wir es haben Unsere Seite wird nicht ausgeführt, weil wir die API-Schlüssel von einem Angestellten benötigen und jetzt zeige ich Ihnen, wie Sie das tun können 39. Projekt 2: Setup-Mitarbeiter: Melden Sie sich an und gehen Sie dann zu diesem Dashboard. Dort in unseren Anwendungen klicken wir auf Anwendung erstellen. Namen der Anwendung wähle ich SAS Tutorial und muss mich neben E-Mail auch bei Google anmelden. Ich werde jetzt auf Anwendung erstellen klicken . Ich habe ihre Anleitung , wie das mit NextJS Wir gehen zu Configure und kopieren dort die beiden geheimen Schlüssel von Clark Wir werden es in unsere DTN-Datei einfügen und jetzt können wir den Rest der Fehler auf unserer Seite beheben Das bedeutet, dass uns normalerweise einige Bibliotheken fehlen , weil die KI sie nicht installiert Wir werden alle Dateien durchgehen und prüfen, ob Fehler vorliegen. Falls uns eine Bibliothek fehlt, geben wir einfach NPM I und den Bibliotheksnamen Zum Beispiel, NPM I reagiere Modell, und wir können mit dem Analysemodell weitermachen , es sollte in Ordnung sein Wir können es einfach umschreiben, dann wird es funktionieren. Und jetzt ist es an der Zeit, wieder zur Dokumentation für den Sachbearbeiter zu gehen und diese Anmelde- oder Anmeldeseite zu implementieren Sie können sehen, dass es ziemlich einfach ist. Es sind ungefähr vier Codezeilen, aber wir müssen die Ordner erstellen. Im App-Ordner müssen wir einen Anmelde- und Anmeldeordner erstellen, und in diesen Ordnern müssen wir diese Anmelde- und Anmeldeordner mit den Punkten und dem Punkt Tsix auf der Innenseite der Seite erstellen mit den Punkten und dem Punkt Tsix auf der Innenseite der Seite Wir werden dort in der App in unseren Ordner gehen , den wir in Klammern erstellen werden Das heißt, es wird es nicht im Pfad lesen. Wenn wir uns anmelden, sieht es so aus, als würde sich unsere Seite anmelden, und es wird nicht so aussehen, als ob unsere Seite Schrägstrich, weil sie ignoriert wird , da sie in Klammern Wir werden es nur als Gruppierung für uns selbst verwenden. Wir haben also unsere Ordner gut strukturiert und wir haben dort kein Durcheinander Jetzt erstelle ich die Anmeldung und melde mich auch mit den Punkten und allem an. Ich erstelle Seite D sechs darin und kopiere dann den Code aus der Dokumentation auf dieser Seite DaixFles nun in unseren Umgebungsvariablen sicher, dass wir die Anmelde-URL und die Anmelde-URL für den nächsten öffentlichen Angestellten haben , und sie werden auf unsere Seite gehen und wir werden auf „Anmelden und sie werden auf unsere Seite gehen und wir werden auf “ klicken. Dadurch werden wir zum Anmeldeformular mit dem Angestellten weitergeleitet Dort können wir versuchen, uns bei Google anzumelden, und wir können dort unser Symbol für den Nutzer sehen Wir werden dieses Symbol später löschen, weil wir nur die Anmeldung und Registrierung verwenden werden, damit der Benutzer seine E-Mail nicht bearbeiten kann, weil das in unserer Datenbank zu seine E-Mail nicht bearbeiten kann, weil Chaos führen würde, und wir werden lediglich die Funktionalität implementieren, bei der wir, nachdem sich ein Benutzer angemeldet hat, seinen Benutzer mit einem Clerk-Webhook in unserer Datenbank speichern mit einem Clerk-Webhook in unserer Datenbank In der Dokumentation werden wir die Sachbearbeiterdaten mit Ihrer Anwendung mit Webooks synchronisieren und dort können wir uns die Implementierung ansehen. Wir können uns die Einrichtung des End-Grogs ansehen , den wir zum Testen verwenden werden, weil der Endpunkt, den wir auf clerk setzen werden , Local Host 3.000 nicht sehen kann Also müssen wir Local Host 3.000 nehmen und es in die URL ändern, die der Angestellte lesen kann Die Endarbeit wird uns dabei helfen. Es wird einfach einzurichten sein. Ich werde Ihnen Schritt für Schritt eine Lösung zeigen, wie das geht. Dort kannst du das Codebeispiel der Webhooks sehen, aber ich werde dir auch diesen Code zur Verfügung stellen, sodass du ihn einfach kopieren und einfügen kannst und keine großen Probleme damit hast 40. Projekt 2: Stripe und Supabase einrichten: Ich werde zu diesem Git gehen, das ich dir auch zur Verfügung stellen werde. Ich werde die Webhooks kopieren und einfügen. Ich werde auch den Dashboard-Ordner einfügen. Stripe ts und Abonnement-Ts aus einem Bibliotheksordner in meinen bereits erstellten Bibliotheksordner. Ich werde auch das Schema Dot Prisma kopieren und einfügen. Ich werde einfach eine Verbindung zum Analysemodell zu meinem Benutzermodell hinzufügen zum Analysemodell zu meinem Benutzermodell Ich dann kann dann sehen, dass es einige Fehler gibt, also muss ich Swix installieren Ich werde npmiSwix machen. Dann muss ich die Stripe-Bibliothek installieren, also werde ich npmiStripe machen Jetzt werden wir die geheimen Schlüssel für Superbse und Stripe einrichten die geheimen Schlüssel Am Ende sollten Ihr Punkt und Ihre Datei mit diesen Stripe-Schlüsseln, Superbse-Schlüsseln, den Sekretariatsschlüsseln, die wir bereits zusammen erstellt haben, und dem AI-API-Schlüssel so aussehen Superbse-Schlüsseln, den Sekretariatsschlüsseln, die wir bereits zusammen erstellt haben, und dem AI-API-Schlüssel und In meinem Fall ist es der Deep Sk-API-Schlüssel. Wir gehen zu supbs.com und melden uns dort an oder registrieren uns, nachdem Sie auf dem Dashboard Sie müssen eine neue Organisation erstellen und dann können Sie dort ein neues Projekt erstellen In drei Stufen können Sie bis zu 23 Projekte haben. Sie klicken auf das Projekt, das Sie erstellen möchten, und dort können Sie auch auswählen, welches Projekt Sie verwenden möchten, sodass ich im ersten bin. Wenn Sie nur eines erstellt haben, wird es nur dieses Projekt geben. Dann klicken wir dort auf Connect. Es gibt zwei Saiten. Wir müssen in die Umgebungsvariablen die Datenbank-URL und die direkte URL einfügen . In der Datenbank-URL haben Sie die Zeichenfolge Nummer 6543 und in der direkten URL wird es die mit 5432 sein Kopieren Sie einfach diese beiden Zeichenfolgen und fügen Sie dort auch das unter dem Sie dieses Passwort erhalten können Sie werden in den Projekteinstellungen dorthin gehen. Dort gehst du in die Datenbank und dort klickst du auf Passwort zurücksetzen. Sie werden es generieren, kopieren und speichern. Dann geben Sie an dieser Stelle ein Passwort ein. Und noch etwas für die Datenbank-URL: Nach der Zeichenfolge, die Sie aus Ihrer Datenbank einfügen, setzen Sie dort ein Fragezeichen, BG Bouncer entspricht Schraube und Verbindung mit Limit auf Wie ich bereits erwähnt habe, werden wir jetzt Engrog einstellen Dies wird uns helfen, unseren lokalen Server dem Internet zugänglich zu Was wir tun müssen, ist einfach Engrog herunterzuladen , nachdem Sie es heruntergeladen haben. Sie öffnen die Datei Engrog Dot, Sie öffnen die Datei Engrog Dot eine Datei, die ein Terminal für Sie öffnet Und bevor Sie es herunterladen, müssen Sie sich auf engrog.com anmelden, dort ein Konto erstellen. Dann laden Sie es herunter und öffnen die Engroc Dot X-Datei, die müssen Sie sich auf engrog.com anmelden, dort ein Konto erstellen. Dann laden Sie es herunter und öffnen die Engroc Dot X-Datei, die so aussieht. Wir werden Engroc HTTP 3.000 machen. Wenn Sie beispielsweise auf dem lokalen Host 3.001 arbeiten, müssen Sie Engroc HTDP 3.001 ausführen beispielsweise auf dem lokalen Host 3.001 arbeiten, müssen Sie Engroc Dort werde ich diese URL nehmen. Dort gehst du in Configure. Dort wirst du nach unten scrollen, zu Webhooks gehen. Wir werden einen neuen Endpunkt hinzufügen. Ich werde dort die URL von Engroc einfügen und Slash API Webhooks clerk machen Dort werde ich den Benutzer und all diese Ereignisse überprüfen. Klicke auf Erstellen und ich erhalte dieses Signaturgeheimnis. Also werde ich es einfach anzeigen, dann kopiere ich es und füge es so in unsere Umgebungsvariablen ein. Jetzt werden wir einen Stripe einrichten. Sie werden sich also zuerst bei Stripe anmelden oder registrieren und dann in Stripe ein neues Produkt erstellen, und dort im neuen Produkt werden wir uns mit Entwicklern befassen, dort werden wir uns mit API-Schlüsseln befassen. Und dort nehmen wir den veröffentlichbaren Schlüssel. Dann gehen wir zu unserer IDE, fügen ihn dort ein und gehen zurück zum geheimen Schlüssel Wir werden auf Reveal klicken und dann erneut klicken, damit wir ihn in die Zwischenablage bringen und ihn in unsere dotnf-Datei einfügen, also in unsere also Ich habe den veröffentlichbaren Schlüssel und den geheimen Schlüssel. Ich werde diesen Umgebungsvariablen einen Namen geben Da dies ein öffentlicher Schlüssel sein wird, werde ich den nächsten öffentlichen und dann den veröffentlichbaren Stripe-Schlüssel angeben, und für den geheimen Schlüssel werde ich Stripe geheim halten, dann kehren wir zur Stripe-Seite zurück Dort gehen wir zum Produktkatalog und Sie können sehen, dass ich die beiden Produkte bereits habe, aber ich werde mit Ihnen ein neues erstellen Also lass uns dort auf Produkt klicken. Ich werde es Thumbnail Previewer nennen. Dort werde ich ein Jahresabonnement für die Thumbnail Dort werde ich die Aufnahme einstellen, dann werde ich früh 20$ zahlen oder lassen Sie uns 19,99 machen, und ich werde auf Produkt klicken Jetzt wird das Produkt gespeichert. Jetzt klicke ich auf das Produkt und dort habe ich eine Produkt-ID, also kann ich darauf klicken, und es wird die Produkt-ID für mich kopieren, die ich auch in meinen Umgebungsvariablen speichere. Und dort werde ich auf drei Punkte klicken und die Preis-ID kopieren. Also diese Preis-ID werde ich in meiner Umgebung speichern, also werde ich ihre Stripe-Price-ID so machen, speichern. Jetzt habe ich den veröffentlichbaren Schlüssel, geheimen Schlüssel und die Preis-ID unseres einzigen Produkts Du kannst es so sehen. Ich habe es da hingestellt. Und die letzte Umgebungsvariable, die wir von Stripe benötigen , ist das Stripe-Webbook-Secret Also lass es uns dort vorbereiten. Dies ist nicht das Geheimnis, das Sie preisgeben sollten. Für das Geheimnis erhalten Sie es tatsächlich vom Terminal generiert. Also was wir jetzt tun müssen, wir werden mit Webhooks dorthin gehen Wir werden auf Test in Local Environment klicken und dort erhalten wir die Anleitung, was wir tun müssen , um den Stripe für Webhooks einzurichten Also müssen wir zuerst den Client herunterladen . Dort wählst du dein System für Windows aus. Dann werde ich diese Zip-Datei von Github herunterladen. Sie werden es entpacken, dann öffnen Sie den Ordner, dann öffnen Sie Umgebungsvariablen auf Ihrem Computer und fügen dort einen Pfad zu dieser Punkt X-Datei Sie werden Ihr Terminal öffnen. Sie werden dort Stripe schreiben und Sie werden diese Informationen erhalten. So wissen wir, dass Sie den Client erfolgreich installiert haben. Dort werden wir zu dieser Seite zurückkehren. Dann geben wir dort diesen ersten Befehl ein, Stripe Login. Wir werden die URL kopieren, sie dort öffnen, dort werden wir das Wort sehen. Wir werden auf Zugriff sperren und Zugriff gewährt klicken. Wenn wir jetzt zu dieser Seite zurückkehren, werden wir sehen, dass sie abgeschlossen Dann kopieren wir diesen Befehl und öffnen dort ein neues Terminal, sodass ich eine IDE bin. Ich öffne das neue Terminal und lasse dort Stripe Listen an den lokalen Host weiterleiten und nicht an 4242, sondern an 3.000 Jetzt drücke ich die Eingabetaste. Und sobald ich es installiert habe, generiert es dieses Geheimnis für mich, also werde ich es dort in Stripe Webook Secret eingeben Ich werde es speichern. Und wenn ich jetzt zu Stripe zurückkehre, werde ich das zum Laufen bringen. Und jetzt sind wir wieder bei unserer Jordan-Akte und wir sollten all diese geheimen Schlüssel eingerichtet haben. Wir müssen einige Befehle ausführen, beginnend mit npXpress MDB Push um unser neues Schema in Supabase zu übertragen Wenn Sie dort bereits einige Daten haben, müssen Sie diese überschreiben Alle deine Daten gehen verloren, falls du bereits etwas in deiner Superbase hast Nachdem Sie es erfolgreich übertragen haben und wir in Ihre Superbase gehen und die Aktualisierung durchführen, werden Sie dort Baumtabellen für Analyse, Abonnement und Benutzer sehen Analyse, Abonnement und 41. Projekt 2: Eingabeaufforderung 5: der fünften Aufforderung werden wir erwähnen, dass wir ein anderes Paket verwenden möchten, um das Transkript für den YouTube-Videolink zu erhalten das Transkript für den YouTube-Videolink Dadurch werden Benutzereingaben in die Anwendung eingegeben. Wir möchten das Paket, das wir derzeit verwenden , durch ein neues Paket ersetzen, und wir werden im Folgenden auch einen Codeausschnitt bereitstellen Und dieses Code-Snippet habe ich auf GitAp von einem Benutzer gefunden , der ähnliche Wir werden es in den Composer einfügen, dort werden wir es senden und auf die Antwort warten Und wir haben es. Jetzt ist es an der Zeit, es zu testen, da es im Grunde nur die Route zur TS-Datei geändert hat. Sonst nichts. Das heißt, lassen Sie uns es testen und dann versuchen, es bereitzustellen. Und selbst mit dem neuen Paket sieht es so aus, als ob es funktioniert. Da haben wir die Analyse, und sie ist im Grunde dieselbe wie die vorherige, vielleicht sogar besser in der 42. Projekt 2: Testen: Jetzt werde ich testen, ob die Sachbearbeiterdaten ordnungsgemäß in unserer Superbase gespeichert werden ordnungsgemäß in unserer Superbase gespeichert Wenn Sie dies testen möchten, stellen Sie sicher, dass Sie den Ngrok und den Endpunkt auf Clerk setzen Stellen Sie sicher, dass Sie keine Benutzer haben, mit denen Sie diese Anwendung testen , in Clerk , da Sie jetzt eine neue erstellen müssen Wenn Sie sich als bereits vorhandenes Konto anmelden, wird es nicht in der Datenbank gespeichert Also werde ich meinen Benutzer von dort löschen. Jetzt gehe ich wieder auf die Seite. Ich werde nur sicherstellen, dass ich abgemeldet bin. Und nachdem ich mich angemeldet habe, wird der Benutzer in Super Baase gespeichert . Wenn Sie die Analyse speichern, wird sie dem Benutzer zugewiesen und sie wird auch in unserer Datenbank gespeichert, und wir können ein aktives Abonnement erstellen das dort auch Superbase zugewiesen wird Unsere Benutzerverwaltung ist abgeschlossen. Wenn Sie Fehler in Ihrer Anwendung bekommen, sollte KI in der Lage sein, sie zu beheben, aber normalerweise liegt es an einigen Klammern oder vielleicht kann es an einem fehlenden Bibliotheksnamen liegen sollte KI in der Lage sein, sie zu beheben, aber normalerweise liegt es einigen Klammern oder vielleicht kann es , was bedeutet, dass ClernJS nur ein Slash-Server ist, und die Überprüfung der Benutzer-ID erfolgt jetzt auch erfolgt jetzt Sie fügen einfach dieses Schlüsselwort hinzu dieses Ich empfehle Ihnen, Datei für Datei zu prüfen, ob Probleme oder Fehler vorliegen, und zu versuchen, diese zu beheben. Es sollte wirklich einfach sein und falls Sie welche haben, sollte Ihnen KI dabei helfen. Jetzt werden wir unserer Seite eine Navigationsleiste hinzufügen. Wir werden diese ChatSN-Bibliothek für Verbote verwenden. Das heißt, wir werden NPx spätestens bei Bn machen. Jetzt werden wir das installieren, warum weitermachen. Es wird eine neue Benutzeroberfläche für Ordnerkomponenten erstellt, und dort in der Benutzeroberfläche werden HetSin-Komponenten aus der ChetsN-Bibliothek und im Komponentenordner gespeichert. Wir werden Tasix genügend Balken hinzufügen Wir haben bereits einen Komponentenordner im App-Ordner, aber diese Komponenten werden für die Landingpage oder für die Anwendung bestimmt sein Landingpage oder für die Wenn Sie ihre Komponenten für die Anwendung selbst hinzufügen , können wir auch einen Komponentenordner im Dashboard-Ordner erstellen . Jeder Ordner wird also seine eigenen Komponenten haben. Für den Stammordner fügen wir unsere Komponenten hinzu, die für die Wandanwendung bestimmt sind. In diesem Fall wird es UI sein, die Komponenten von Chetcn weil sie in der Wandanwendung wiederverwendet werden können , und die Navigationsleiste, weil Layout Dt ta 6 hinzugefügt werden, und das gilt auch für die Wandanwendung Ich gebe dir die Navbar , die schon funktionieren wird. Das einzige, was Sie tun müssen , ist, zum Layout DTS 6 zu wechseln und dort die Navbar-Komponente zu implementieren Sie können die Eingaben von Clerk löschen. Sie verlassen den Just Clerk Provider Import. Und jetzt, wie man die Stripe-Funktionalität testet. Wir werden sicherstellen, dass wir unseren Benutzer haben. Wir sind wie in der Datenbank angemeldet. Dann gehen wir in unsere IDE und öffnen das neue Terminal. Wir werden sicherstellen, dass dieser Befehl ausgeführt wird. Es ist Stripe Listen , um 3.000 ABI-Webbooks Stripe an den lokalen Host weiterzuleiten . Wenn Sie auf dem lokalen Host 3.001 arbeiten, muss er an den lokalen Host 3.001 weitergeleitet werden Dann gehen wir in unserer Bewerbung auf die Preisgestaltung ein Das heißt, wir benötigen die Preisgestaltung für diesen Ordner, wir nehmen ihn aus diesem Git und legen ihn in unser Repository im App-Ordner. Jetzt klicken wir auf dieser Seite auf Abonnieren, um zur Zahlungsabwicklung mit Stripe zu gelangen. Wir geben die Daten ein, klicken auf Bezahlen und Abonnieren. Jetzt gehen wir in die IDE, diesen Zahlungsordner, wir werden in den App-Ordner wechseln. Jetzt können wir sehen, dass unsere Zahlung erfolgreich war. Und im Terminal können Sie den HTDP-Statuscode 200 sehen, was für Erfolg steht Das bedeutet, dass unsere Zahlung an Stripe erfolgreich war. Und jetzt ist die Frage, ob wir in die Datenbank gehen und dort ein Abonnement abschließen, ich sehe schon, dass es in Ordnung ist. Wir haben unserem Benutzer den Abonnementstatus aktiv zugewiesen, das heißt, alles funktioniert, was perfekt ist. Jetzt werden wir auch diesen Typenordner bekommen , der Benutzerpunkte mit ihren Typen enthält, und wir werden ihn dort im Stammordner ablegen. Dann gehen wir in das Dashboard, wir bereits konkurrieren, es sollte funktionieren. Wenn wir auf unsere Seite gehen, klicken Sie auf Dashboard. Wir hatten dort den erforderlichen Premium-Zugang, aber da wir abonniert sind und es in unserer Datenbank steht, haben wir das Abonnement aktiv Das Produkt, das wir derzeit auf unserer Homepage haben, wird also in unser Dashboard verschoben, und auf unserer Homepage werden wir einfach eine Werbeaktion oder Demo machen, um wir einfach eine Werbeaktion oder Demo machen die Funktionalität des Produkts zu zeigen , auf die der Benutzer nach dem Kauf des Abonnements zugreifen kann Das bedeutet, dass unsere SAS jetzt technisch funktioniert, aber wir müssen natürlich einige letzte Updates vornehmen und die Dinge verschieben , die letzten Tests durchführen und sie dann in der Produktion einsetzen Wir haben die Seite TS 6, und da ist die Wandfunktionalität unserer Anwendung. Was wir tun müssen , ist, sie mit der Seite Tsix zusammenzuführen , die wir im Dashboard haben Und wie wir das machen können, gibt es zwei Möglichkeiten. Die erste besteht darin, einfach diesen Code zu nehmen, diesen Code auszuwählen, Rutter plus K, falls Sie den Cursor gedrückt haben, diesen Code dort einzufügen und zu sagen, dass wir diesen Code mit diesem Dashboard zusammenführen wollen , und die KI sollte damit gut umgehen Die zweite Möglichkeit besteht darin, Composer einzugeben , dass wir das machen wollen, App-Seite DTS 6 mit dem Dashboard, Seite Tix zusammenzuführen , und das sollte auch irgendwie funktionieren, aber ich bin mir nicht sicher, welche Option besser ist Und die dritte Möglichkeit besteht darin, es manuell zusammenzuführen. Aber wahrscheinlich werden wir eine der Möglichkeiten ausprobieren , wie A I uns helfen wird. Lass es mich damit versuchen. Also habe ich den WAL-Code von Paged auf Six kopiert. Auf der Dashboard-Seite D sechs habe ich den Code ausgewählt Ich habe Plus K gemacht, also hat es nur den Kontext dieses Codes, und es wird nichts anderes ändern. Ich werde diesen Code mit diesem Dashboard zusammenführen. Ich werde es einreichen und jetzt auf die Antwort warten. Lassen Sie uns das jetzt akzeptieren und sehen , ob das funktioniert oder nicht. Wir werden auf unsere Seite gehen. Wir haben ihr Abonnement aktiv. Es gibt die Funktionalität, und jetzt werden wir sie testen. Zuerst werde ich versuchen, die Analyse zu öffnen, das funktioniert. Ich werde versuchen, es zu bearbeiten. Das funktioniert immer noch. Ich werde versuchen, es zu löschen. Funktioniert auch, und ich werde die URL dorthin schicken. Klicken Sie auf Video analysieren und ich werde warten, ob auch die Analyse funktioniert. Da ist das analysierte Video, wir werden die Analyse speichern. Jetzt ist es auch gespeichert, und das bedeutet, dass alles funktioniert. In unserem Dashboard haben wir die Funktionalität. Dann können wir zur Landingpage zurückkehren und sie kehrt zum Cursor zurück und kehrt zur Seite Tsix, dieser App, Seite T sechs Dort können wir all diese Funktionen löschen, die sich auf unsere Anwendung beziehen . Anschließend können wir wieder alle Codes auswählen oder in den Composer einfügen Dann zur Aufforderung, ich werde dort jetzt diese Ausleihseite einfügen , die keine Funktionalität hat. Ich habe alles ins Dashboard verschoben. Bitte machen Sie dies nur zu einer Ausleihseite , auf der für das Produkt geworben wird, damit Sie es analysieren können, und fügen Sie auch einen Button hinzu , um loszulegen, der den Benutzer zur Preisgestaltung führt , wo er das Produkt kaufen kann. Ich trete ein, und es spielt keine Rolle, ob ich das einfach auswähle und Null plus K drücke . Wenn ich einen Composer öffne oder du ihn einfach in eine KI einfügst, wird die Seite generiert und die alte Funktionalität wird entfernt. Wenn ich es jetzt einfach speichere, erhalte ich die grundlegende Ausleihseite, und ich kann dort auch einige Benutzerdaten sehen. Ich will es nicht. Ich werde es einfach finden. User Barn, es ist da. Lass es uns löschen. Nun, da haben wir tatsächlich auch die Überschrift gelöscht. Da haben wir die Landingpage für unsere SAS. Eigentlich hatte ich mit der Preisgestaltung nicht recht. Es sollte eine Dashboard-Umleitung sein denn selbst wenn der Benutzer gesperrt ist und er anfängt, wird er zum Dashboard weitergeleitet, aber unsere Benutzerverwaltung kümmert sich wird er zum Dashboard weitergeleitet, darum und er wird wissen, dass der Benutzer nicht angemeldet ist Das bedeutet, dass er sich anmelden und registrieren muss . Nachdem er das getan hat, wird er dort feststellen, dass er kein aktives Abonnement hat Jetzt wollen wir das in die Produktion bringen. Bisher verwenden wir die YouTube Transcript API, um das Transkript abzurufen Aber als ich das in der Produktion getestet habe, sieht es so aus, als ob diese API dort nicht funktioniert Also habe ich nach verschiedenen Lösungen gesucht und eine gefunden, die funktioniert. Und jetzt zeige ich Ihnen, wie Sie diese Lösung erhalten und wie Sie sie in Ihre SAS-Anwendung implementieren können. 43. Projekt 2: Bereitstellung: Schließen Sie den Server und wir werden den Befehl NPM run build ausführen. Dieser Befehl sollte Ihnen sagen, ob der Builder erfolgreich sein wird oder nicht, und falls nicht, werden wir wissen, welche Fehler wir beheben sollten Wenn Sie irgendwelche Slink-Fehler haben, ist es gut, sie zu beheben. Aber wenn Sie jetzt keine Zeit damit verbringen möchten , sondern dies bereitstellen und im nächsten Konfigurations-DTS sehen möchten , wie es gemacht wird , fügen wir Ignore During Build zu True zu YsInD hinzu und für TypeScript fügen wir Dann führen wir NPM run built aus, um zu überprüfen, ob wir bereit sind, dies bereitzustellen, und das sind wir bereit sind, dies bereitzustellen, und das sind Was wir also tun werden, ist, das auf Git up zu veröffentlichen Ich werde ihr veröffentlichtes Git up machen. Ich werde einen Namen für dieses Repository erstellen. Und nachdem es erfolgreich veröffentlicht wurde, können Sie zur Quellcodeverwaltung gehen, und wenn Sie etwas ändern möchten, z. B. genug Balken dort, füge ich einfach etwas Text hinzu und speichere ihn. Dort können Sie die Änderungen sehen, die Sie codiert haben. Und wenn du sie übernehmen und sie dann auch in die Produktion übernehmen möchtest , klickst du dort einfach auf Änderungen in der Phase. Sie werden eine Commit-Nachricht eingeben, Navbar aktualisieren und Sie werden auf Commit klicken Und dann wird es auf Ihrem Giru gespeichert und weil es mit Versal verbunden ist, wird es automatisch für die Produktion bereitgestellt Aber jetzt werde ich es in Szene setzen und die Änderungen entfernen, weil ich dort keine Änderungen vornehmen möchte Und wir werden in das Paket Dot JSON gehen und bei Prisma Generate bauen Wir speichern es, gehen zur Quelle und bearbeiten es, um die Änderungen schrittweise vorzunehmen. Und die letzte Datei, die wir erstellen müssen, ist Versal Dot JSON. Und dort werden wir diesen Code einfügen. Was das bedeutet. Die maximale Timeout-Dauer ist auf 10 Sekunden festgelegt Wir müssen es auf 60 erhöhen. Wenn wir das nicht sagen, können wir das wirklich analysieren , ich weiß nicht, vielleicht ein 5-Sekunden-Video. Dann werden wir das speichern, wir werden es bereitstellen und wir werden es auf unser Git übertragen. Und wir werden jetzt zum Versal gehen und versuchen, das zu implementieren Nachdem Sie sich bei Versal angemeldet haben, klicken Sie auf ein neues Endprojekt Dort wählen Sie Ihr Repository aus. In meinem Fall ist es Video Analyzer, SAS, und Sie werden dort auf Import klicken . Sie müssen jetzt einige Umgebungsvariablen hinzufügen. Und wenn Sie nicht eins nach dem anderen hinzufügen möchten, können Sie sich einfach über den Wert lustig machen. Vorerst werden Sie auf Deploy klicken. Jetzt klicken Sie auf GT-Projekt. Es ist fehlgeschlagen, und natürlich ist es gescheitert, weil wir nicht die richtigen Umgebungsvariablen geladen haben. Dort gehen wir zu den Einstellungen der Projektumgebungsvariablen. Wir werden dort einen falschen Wert angeben. Wir werden auf einen anderen klicken. Jetzt können wir den Punkt und die Datei importieren. Es wird importiert. Du wirst sie retten. Jetzt löschen wir einfach die gefälschten Werte, die wir dort eingegeben haben Das heißt, wir können jetzt zur Bereitstellung zurückkehren und die Bereitstellung erneut durchführen Nachdem wir es erneut bereitgestellt haben, sollte alles funktionieren und wir sollten unsere Anwendung einsatzbereit haben Jetzt müssen wir die Anwendung öffnen und die URL kopieren Nachdem wir die URL haben, gehen wir zu Clerk, konfigurieren Webooks und dort müssen wir das aktuelle von Ngrok auf das ändern , das wir von Versal erhalten haben Das Wichtigste ist, dass wir, nachdem wir sie geändert und dort platziert haben, immer noch den API-Slash-Webhooks-Schrägstrich CORK beibehalten müssen Ich habe das bereits erwähnt, aber es ist wirklich wichtig, sonst funktioniert es nicht, weil Benutzer nicht in Ihrer Superbase erstellt werden und wir ihnen keine Analysen zuweisen können Sie werden kein Abonnement kaufen können, weil das auch mit ihnen verbunden ist und die Anwendung einfach nicht funktioniert Und der letzte Schritt werden einige Verbesserungen der Benutzeroberfläche sein. Ich wollte das nach der Bereitstellung machen , weil ich dir auch zeigen wollte , wie du deine Anwendung dann aktualisieren, sie auf Git up pushen und sie in der Produktion aktualisieren kannst . Das ist ein sehr einfacher Prozess, weil wir nur unsere Anwendung aktualisieren, jetzt die Benutzeroberfläche, dann werden wir sie auf Git pushen und sie wird automatisch in Versal für unsere Produktion bereitgestellt, und sie wird nach etwa ein oder zwei Minuten live sein etwa ein oder zwei Minuten da wir den Commit auf Git übertragen Falls die Bereitstellung nicht fehlschlägt, aber wenn Sie nur die UI-Updates durchführen, sollte die Bereitstellung nicht fehlschlagen, zumindest ist es mir nicht passiert. Wenn wir einige Backend-Updates durchführen, vielleicht die Routen ändern usw., kann es passieren, dass es fehlschlägt, weil Sie vielleicht Ihre Anwendung testen und alles so aussieht, als ob es funktioniert Sie werden dieses Szenario, das einige Fehler verursachen wird , nicht testen. Wir werden nur die Benutzeroberfläche ändern, das Testen wird einfacher sein als bei einigen Backend-Prozessen, und alles sollte reibungslos und ohne Probleme in die Produktion übergehen ohne Probleme in die Produktion übergehen Ich werde das tun, indem ich herausfinde , was auf der Ausleihseite angezeigt werden soll , und ich werde es an KI Dann gehe ich zum Dashboard. Ich werde mich wahrscheinlich von den Preisen inspirieren lassen , die ich dort derzeit habe. In einem ähnlichen Stil möchte ich auch das Dashboard und die Ausleihseite gestalten. Sie können zur Seite T 6 mit den Preisen gehen, dort kopieren Sie diese Wandkomponente, dann öffnen Sie einen Composer und Sie werden aufgefordert, meine Wandanwendung in einem Stil zu gestalten , der meiner Preiskomponente entspricht. Und Sie werden dort den Code einfügen. Jetzt werden Sie es an den Composer senden und auf die Antwort warten, und die KI sollte Ihnen helfen Ihre Anwendung auf ähnliche Weise zu entwerfen, was im SchetzN-UI-Stil ist, würde ich sagen, versuchen Sie, selbst etwas herauszufinden Ich werde auf jeden Fall versuchen , ein Video zu erstellen, dem auch die SAS-Anwendungen entworfen Wir lernen also alle etwas Neues. Ich werde es akzeptieren, und ich denke, es hat ziemlich gut funktioniert. Wir haben dort die Landingpage. Wir haben das Dashboard, das meiner Meinung nach fantastisch aussieht. Wenn Sie das öffnen, haben wir das Modell. Wir können den Vorgang auch noch einmal versuchen , und hier haben wir ihn. Eine weitere Sache werde ich tun. Ich brauche diesen Teil dort nicht. Ich muss nicht einmal eine Aufforderung erstellen. Ich gehe einfach zum Dashboard. Ich werde dort diesen YouTube-Videoanalysator finden. Und ich kann diesen und diesen Rand mit Bettwäsche löschen, ich kann ihn nehmen und ich kann ihn dort zum Abonnement hinzufügen. Ich werde dieses Laufwerk löschen, speichern und jetzt wird die Seite so aussehen. Konzentrieren wir uns auf die Landingpage und schauen wir uns an, was wir dort tun können, um die Konversionsrate der Nutzer zu erhöhen , die unsere Sauce tatsächlich kaufen. Ich würde eine Demo unseres Produkts mit einem Colo-Aktionsverbot, das wir bereits haben, dort platzieren unseres Produkts mit einem Colo-Aktionsverbot , die erste Version und dann den FAQ-Bereich. Abschnitt mit Kundenrezensionen mit einigen Testimonials. Die Anwendung funktioniert, und das wird es wahrscheinlich sein Wir müssen eine Eingabeaufforderung erstellen , die all diese Schritte abdeckt. Zunächst wird es einen Demo-Bereich geben. Es wird eine Einführung in unser Produkt mit einem Platzhalterbild geben, wo ich dann ein echtes Bild unseres Produkts verwende . Damit fordere ich die KI auf, und ich werde es wo ich dann ein echtes Bild unseres Produkts verwende. Damit fordere ich die KI auf, dort ein Platzhalterbild einzufügen, und ich werde Im zweiten Abschnitt möchte ich in drei einfachen Schritten erläutern , wie Sie unser Produkt verwenden können Das heißt, der Nutzer gibt den YouTube-Videolink ein, klickt auf Analysieren und dann kann er die Analyse speichern oder bearbeiten. Für den FAQ-Bereich möchte ich dort drei Fragen zu unseren YouTink-Analyseprodukten und Abonnementplänen stellen drei Fragen zu unseren YouTink-Analyseprodukten , denen wir nur eine für Im vierten Abschnitt geht es um Testimonials mit einigen wenigen Platzhalter-Testimonials. Im vierten Abschnitt geht es um Testimonials mit einigen wenigen Platzhalter-Testimonials. Später werden wir das hinzufügen , aber im Moment haben wir noch keine Testimonials, haben wir noch keine Testimonials sodass wir diesen Abschnitt vorbereiten können. Wir können es verstecken und auf konkretes Feedback warten , das wir erhalten werden Und der letzte wird ein Fußzeilenbereich sein , der sich unten auf der Seite Jetzt können wir diesen Befehl ausführen, wir werden ihn akzeptieren, und jetzt sehen wir uns die Ausgaben an Da sind wir auf der Ausleihseite, und da haben wir den Titel mit einer Beschreibung. Moment gibt es den Screenshot der Produktdemo, bei dem es sich um eine Schaltfläche zum Aufrufen von Aktionen handelt, sich unsere Benutzer für die Anwendung anmelden können. Wie es dann in drei einfachen Schritten funktioniert Geben Sie den Link ein, klicken Sie auf Analysieren, speichern und bearbeiten. Dann haben wir ihre häufig gestellten Fragen. Dies kann leicht geändert werden. Wir werden einfach auf die Landingpage gehen. Lass uns die FAQ finden, und dort können wir einfach die Fragen und Antworten ändern. Dann haben wir den Abschnitt, was unsere Benutzer sagen, und dort werden wir die Testimonials haben Wenn wir vorerst noch keine Testimonials haben, können wir sie einfach verstecken und sie werden auf unserer Seite ausgeblendet und sie werden auf unserer Seite ausgeblendet können wir sie einfach verstecken und sie werden auf unserer Seite ausgeblendet. Aber ich werde es dabei belassen Und der letzte Abschnitt wird eine Fußzeile sein, und dort haben wir einige zusätzliche Informationen, vielleicht kontaktieren Sie uns, einige Links und so weiter Fügen wir nun das Demo-Bild unseres Produkts hinzu. Wir werden das tun , indem wir in unserer Anwendung zur öffentlichen Datei wechseln Dort werden wir einen neuen Ordner mit Bildern erstellen und dort ein Bild unserer Anwendung einfügen. Jetzt kehre ich zur Landingpage zurück und importiere dort die Image-Produktdemo. Jetzt werden wir diese Produktdemo-Eingabe verwenden. Wir werden zum Platzhalter gehen. Ich bin mir nicht sicher, was es ist. Lass uns versuchen, es zu finden. Dort geben wir das Platzhalterbild ein. Und das wird unsere Ausleihseite sein. Da haben wir den Titel mit einer Beschreibung, Aufruf zum Handeln. Vielleicht sollten wir diesem Aktionscode eine andere Farbe geben . Wir können das für Handys testen. Es sieht so aus, als ob alles reagiert und funktioniert. Und jetzt werden wir das einsetzen. Wir werden zur Quellcodeverwaltung gehen und dort alle Änderungen vornehmen. Wir werden die Commit-Nachricht mit dem UI-Update erstellen und auf Commit klicken. Und umgekehrt, der neue Build wird automatisch gestartet Und jetzt haben wir das implementiert. Wenn wir den Link öffnen, ist unsere Seite live. Lassen Sie uns jetzt unsere Anwendung testen. Wir sind hier auf einer Landingpage und werden auf Get Started klicken. Dadurch werden wir zur Anmeldeseite weitergeleitet , auf der ich Weiter mit Google auswählen werde Jetzt wird der Benutzer in Clerk gespeichert, dann über Webhook Er wird auch in unserer Datenbank gespeichert In unserer Datenbank können Sie sehen, dass ich bei einem neuen Benutzer eine Null für die Stripe-Kunden-ID Der nächste Schritt besteht darin, Zugriff auf die Anwendung zu erhalten. Dort werde ich auf Abonnieren klicken. Es wird mich zur Stripe-Checkout-Sitzung weiterleiten . Dort werde ich bezahlen. Ich erhalte die Nachricht, dass die Zahlung erfolgreich war, und jetzt kann ich das Produkt und die Funktionsweise des Produkts verwenden das Produkt und die Funktionsweise des Produkts Ich gebe dort die YouTube-URL und klicke auf Video analysieren. Dort sehe ich das Vorschaubild des Videos, das gerade analysiert wird, Gerüst für die Analyse, bis es geladen ist Da ist die KI-Analyse. Ich kann die Analyse in der Datenbank speichern. Dann werde ich es dort in der gespeicherten Analyse sehen. Wenn ich darauf klicke, wird ein Modell mit der gespeicherten Analyse geöffnet , und ich kann es bearbeiten und in der Datenbank speichern oder einfach löschen. Gehen wir jetzt zur Datenbank und ich kann das aktive Abonnement für meinen Benutzer sehen, und ich kann auch sehen, wie die Analyse in der Datenbank gespeichert wird. 44. Projekt 3: Intro und Demo: Wir werden eine Po STAC SAS-Anwendung erstellen, die auf Next JS basiert. Ich werde KI verwenden, um mir beim Aufbau des Backends dafür zu helfen, und wir werden die Authentifizierung mit dem Sachbearbeiter einrichten, Daten auf Super Base speichern, Prisma RM verwenden und Zahlungen mit Stripe konfigurieren Du findest den gesamten Code und die Eingabeaufforderungen verlinkt Die Eingabeaufforderungen befinden sich in der Prompts-Datei und Sie können den Code für sich selbst verwenden und einfach darauf aufbauen Schauen wir uns nun die Demo der Anwendung Danach werde ich Ihnen Schritt für Schritt erklären, wie ich sie erstelle Lassen Sie uns die Anwendung überprüfen. Wir befinden uns auf einer Ausleihseite und müssen uns jetzt anmelden. Wir werden an den Sachbearbeiter weitergeleitet und wählen unseren Benutzer Ich werde sie weiterhin bei Google verwenden. Dort werde ich auf Abonnieren klicken, da ich keinen Zugriff auf das Produkt habe , da ich noch nicht bezahlt habe. Hier falte ich die Testdaten und bezahle, und dann habe ich Zugriff auf die Anwendung. Hier können Sie die PDF-Datei hochladen. Klicken Sie dann auf die Schaltfläche Dokument analysieren Die Zusammenfassung wird unten angezeigt. Ich habe es mit einem KI-generierten PDF-Dokument getestet , das Eingabeaufforderungen enthält, und es hat eine nette Zusammenfassung geliefert Das wird für die Demo sein, und jetzt wollen wir sehen, wie ich das von Grund auf neu erstelle 45. Projekt 3: Eingabeaufforderung 1 für Kernfunktionen: unserer IDE werden wir diesen Befehl ausführen, um eine nächste JS-Anwendung zu erstellen. Wir setzen Nein in das Quellverzeichnis, Ja in einen Router, und dann gehen wir einfach zu den empfohlenen Optionen und um all diese Eingabeaufforderungen, die ich heute verwenden werde empfohlenen Optionen und um , zu speichern, erstelle ich eine neue Datei, Eingabeaufforderungen, und zuerst eine, wir beginnen mit, erstellen Sie bitte die nächste JS-Anwendung namens PDF TwoII, die es Benutzern ermöglicht, als PDF hochzuladen und eine zusammengefasste Version ihres Inhalts bereitzustellen. Im Folgenden finden Sie die detaillierten Anforderungen. Wir beginnen mit der Anwendungsübersicht. Benutzer sollten also in der Lage sein, das PDF vom RPC hochzuladen, und die Anwendung analysiert das hochgeladene PDF und zeigt eine zusammengefasste Version seines Inhalts Auf einer Seite, wie der Ausleihseite, bieten wir eine minimalistische Einführung in das Produkt Dann werden wir einen Text hinzufügen, der das Tool als modernen KI-gestützten PDF-Zusammenfasser beschreibt , so etwas Ähnliches Dann fügen wir eine Schaltfläche hinzu, um zur Dashboard-Seite zu navigieren Auf der Dashboard-Seite haben wir ein Eingabefeld, in dem der Benutzer eine PDF-Datei aus dem RPC auswählen kann Wir werden auch eine Schaltfläche mit der Bezeichnung Analysiertes PDF hinzufügen, die den Zusammenfassungsprozess auslöst. Unter der Schaltfläche zeigen wir den zusammengefassten Inhalt nach der Verarbeitung Wir wissen dort auch, dass wir anstelle der Upload- und Analysefunktionen einen Abonnement-Button anzeigen, wenn der Nutzer kein Abonnement abgeschlossen hat und sein Dummy-Wert sinkt Abonnement abgeschlossen hat und Und dort habe ich auch erwähnt, dass wir vorerst Dummy-Logik für Abonnements verwenden werden Dummy-Logik für Abonnements verwenden Für die Designspezifikationen werden wir ein dunkles, modernes Team mit dunkelgrauem Hintergrund und lila Akzentdetails verwenden mit dunkelgrauem Hintergrund und lila Akzentdetails Stellen Sie außerdem sicher, dass das Design minimalistisch und ansprechend ist. Wir werden Delvin CSS für das Styling verwenden, und jetzt zur Navbar-Komponente Wir möchten eine ausreichend einfache Leiste mit dem Logo und den Links für die Anmeldung und Und was die technische Seite angeht, werden wir Next GS als Framework verwenden Wir werden Kommentare in den Code aufnehmen , die die Logik erklären, damit Sie sie besser verstehen können. Dann möchten wir , dass dies tatsächlich funktioniert und kein Scheinwert für die PDF-Analyse Bitte geben Sie eine vollständige Codestruktur für diese Anwendung an, einschließlich Komponenten, Seiten und Gestaltung Kopieren wir also eine Eingabeaufforderung und geben sie an Deepsk R One weiter, um zu sehen, wie es damit umgeht. Ich werde es dort einfügen. Ich werde sicherstellen, dass das Argumentationsmodul aktiviert ist Wir haben also die Antwort dort. Lass uns anfangen. Wir fügen es tatsächlich in unseren Ausweis ein. Wir sollten diese Rückenwind-Formulare installieren. Gehen wir also zur IDE und legen es dort ab. Und ich habe vergessen, zum Abschlussball zu gehen, bitte schicke mir den Code noch einmal, aber benutze Typoskript Ja, ich sollte dort auch erwähnen , dass es in Typoskript sein sollte, also werde ich ihm einfach sagen, dass er es reparieren soll und er wird mir den Code erneut schicken Jetzt können wir mit dem Kopieren und Einfügen beginnen. Ich werde mit der Konfigurationsdatei in Rückenwind beginnen , dann können wir Navbar machen, also werde ich den Komponentenordner erstellen Und Navbar Tsix. Ich werde es dort einfügen. Dann eine Landingpage. Also werde ich es in unserer App dort platzieren, dann auf der Dashboard-Seite. Also werde ich dort einen Dashboard-Ordner erstellen, Seite DTSix, und ihn dort ablegen Wir benötigen diese Anmeldeseite nicht , da sie von einem externen Anbieter verwaltet wird Dann sollten wir das in unser Globus Dot CSS einfügen , also werde ich es tun Und dann sollte es das sein. Also schauen wir mal, was wir da haben. Die erste Sache ist, dass wir das nicht wollen. Zweitens hat er auch vergessen, das zu löschen, und ich denke, es wird dasselbe Problem geben. Also lass uns einfach dieses JSX-Element löschen. Jetzt müssen wir auch die Navbar importieren. 46. Projekt 3: Funktionen und KI-API: Wir werden eine zweite Aufforderung senden, um die Dashboard-Seite zu überprüfen und zu optimieren. Wir möchten abonnieren, um die PDF-Analysefunktionen freizuschalten, die PDF-Datei zur Zusammenfassung hochzuladen, eine Zusammenfassung des PDF-Inhalts anzuzeigen und auch den Code zu verbessern, eine bessere Leistung zu erzielen, bewährte Methoden zu verwenden, die Konsistenz des Stils zu verbessern, die Konsistenz des Stils zu verbessern, Vorschläge für die Implementierung eines echten APA-Backends für die PDF-Analyse zu geben eines echten APA-Backends für die PDF-Analyse und auch nicht die Gesamtfunktionalität zu ändern oder entwerfen, einfach den Code umgestalten und verbessern Also werde ich die Aufforderung dorthin schicken , ich habe auch versucht, dort hinzuzufügen, bitte für die PDF-Analyse, verwenden Sie die Deep Sk RO API, die das erledigt Implementiere es in den Code. Und ich werde diese Aufforderung senden und mal sehen, ob DC das alleine machen kann , oder ob ich ihm einige seiner Unterlagen zur Verfügung stellen muss, und dann wird er darauf aufbauen. Wir haben die Antwort da, und jetzt können wir sie umsetzen. Wir haben das Armaturenbrett. Es verwendet also wieder das JSX-Element, aber ich denke, wir können es einfach reparieren Mal sehen, ob ich es dort einfach lösche. Jetzt braucht es auch diesen. Im Moment können wir ihren Use-Client verwenden, damit er funktioniert, und wir können ihn testen, und wir können damit fortfahren, den anderen Code zu bekommen. Ich werde nach unten scrollen. Dort kann ich Deepsk ApiKey sehen Ich werde es in die NFle legen, also werde ich dort eine neue Datei erstellen Punkt N, lege sie Dort werden wir den API-Schlüssel einfügen. Wenn Sie also zu platform.dips.com gehen, gehen Sie zu APIKys und erstellen dort einen neuen API-Schlüssel Dort kopieren Sie den Schlüssel selbst und selbst Dort können wir einen neuen API-Schlüssel erstellen , einfach so etwas. Ich kann das kopieren. Ich werde es dort in meine Bewerbung aufnehmen. Ich werde diesen Schlüssel später löschen, also werde ich ihn dir jetzt zeigen, aber du solltest den Schlüssel niemals jemandem zeigen und jetzt zurück zur Deep Seek selbst. Jetzt sollten wir Indexpunkte für Typen erstellen. Dort werden wir einen neuen Ordner erstellen, Types Insight. Wir werden Indexpunkte erstellen, dort werden wir die Typen platzieren und wir können weitermachen. Also müssen wir API Analyze Dots erstellen. Wir werden das kopieren, aber wir werden dort noch einige Fragen stellen. Also werde ich diese drei Dinge dort kopieren und einfügen. Und ich werde beim ersten Punkt mehr über die Ordnerstruktur fragen, dann werde ich beim zweiten und dritten nach der Ordnerstruktur fragen. Ich werde diese Anfrage senden. Wir werden warten. Und es gab mir eine Ordnerstruktur. Also das ist eigentlich ziemlich praktisch. Wir werden die API erstellen und analysieren und dort in die Route TS einfügen, um sie zu codieren. Wir werden die API erstellen, analysieren und in Analyze werden wir die Route Ts erstellen. Wir werden dort den Code einfügen. Dann werde ich dort weitermachen. Ich werde diese beiden Nachrichten ignorieren , weil er sie mir erneut senden wird. Da es eine Ordnerstruktur gibt, benötigen wir einen Bibliotheksordner mit Uts-Typen. Wir haben ihn bereits, aber wir werden ihn einfach umbenennen, also werde ich ihn in API dot d dot ts umbenennen. Ich werde auch Middleware Dots und Lip Folder mit Middlewares und Utools So lip Folder, Middle Wares und auch Utils erstellen und Lip Folder mit Middlewares und Utools So lip Folder, Middle Wares und auch Utils Middle Dann werde ich den API-Handler für Ratenbegrenzer mit Punkten erstellen und die Anfrage validieren. Jetzt erstelle ich auch im ZIP-Ordner Fehlerpunkte und kann zum Kopieren und Einfügen des Codes übergehen Also werde ich für die analysierten gerouteten Punkte diesen Code einfügen Bei Fehlerpunkten füge ich diesen Punkt, den Ratenbegrenzer, dort ein Dort haben wir Anfragen validiert. Die Mitte sind Die Typen. Und das ist es. Wir werden auch diese Plugins installieren, also werden wir dort diesen Befehl ausführen. Ich denke, wir sollten auch Open AI installieren. Dort müssen wir nur die nächste Antwort importieren. Im Rate Limiter müssen wir den Cache und den API-Fehler aufgrund von Fehlern importieren , und da sollte diese Anfrage als nächste Anfrage stehen, und wir müssen die nächste Anfrage importieren, und das war's Jetzt würde ich sagen, wir können versuchen, das auszuführen und zu sehen, ob es irgendwie funktioniert oder nicht, und es sieht so aus, als ob es irgendwie funktioniert Also haben wir es da. UI ist nicht die beste, aber wenn es zumindest irgendwie funktioniert, bin ich damit einverstanden. Ich wähle ein PDF zum Importieren und nachdem ich auf ANI PDF geklickt habe, sollte es analysieren, welchen Inhalt das PDF hat. Da ist das PDF und ich werde auf ANI PDF klicken und mal sehen. Abrufen ist fehlgeschlagen, also werden wir überprüfen, wo der Fehler liegt Ich werde das Terminal dort öffnen, aber es gibt keine Fehler Jetzt werde ich untersuchen, wo der Fehler liegt, also nehmen wir das und gehen zu Deep Seek. Hallo, ich habe versucht, das PDF zu analysieren und habe diesen Fehler bekommen. Und mal sehen, was er herausfinden wird. Jetzt haben wir die Antwort. Also werde ich es kopieren, einfügen, von dort kopieren. Das sollte für die Route sein. Und es ist in Ordnung. Jetzt der nächste Inhalt, und wir müssen den Frontend-Call ändern. Ich nehme diesen Frontend-Anruf entgegen und muss ihn dort im Frontend implementieren. Also lass es mich einfach machen. Das heißt, wir müssen das jetzt nehmen, es sollte in Ordnung sein. Also werden wir jetzt auf unsere Seite gehen. Wir können aktualisieren und mal sehen, ob es jetzt funktioniert. Es wird verarbeitet. Sieht aus, als wäre es irgendwo gescheitert. Also lass uns sehen. Vielleicht wird es nicht angezeigt, also werde ich darauf hinweisen, dass die Ausgabe nirgends angezeigt wird und die Konsole nichts gesperrt ist. Ich werde es an Deepsk schicken und lassen Sie uns noch einmal sehen, was das Ergebnis sein wird Wir haben eine verbesserte Lösung, also werde ich sie auf Route DS übertragen. Ich werde dort hingehen, es dort einfügen, und das hier wird für die Dashboard-Seite sein. Ich werde diese Handle-Analysefunktion übernehmen. Fügen Sie es einfach anstelle der aktuellen Handle-Analysefunktion ein, und ich werde auf PDF analysieren klicken und wir haben einen Fehler erhalten, sodass der API-Fehler nicht gefunden wurde. Also jetzt mit dem Fehler und mir wurde auch gesagt, dass es sich beim Endpunkt nicht sicher ist, ich klicke dort auf die Suche, auch im Web, habe den Fehler dort eingefügt und für die Antwort habe ich bekommen, was ich genau tun sollte Also habe ich das einfach kopiert und eingefügt, habe es ihm in der nächsten Aufforderung gesagt. Basierend auf diesem Kontext, was Sie gerade gesendet haben, geben Sie mir bitte einen festen Code, und ich werde ihn implementieren. Also werde ich mit der Route beginnen. Dann auf der Seite, dann muss ich auch PDF Utils erstellen. Installiere dieses Plugin und das wird es sein. Ich musste nur die Route aktualisieren, und jetzt sollte es in Ordnung sein. Wir werden versuchen, das PDF zu analysieren, und jetzt müssen wir ein bisschen warten, und da ist die Zusammenfassung aus dem PDF. Ich werde es einfach so schnell wie möglich machen. Können Sie bitte die Zusammenfassung formatieren? Es ist also gut lesbar, ein Modelldesign. Also, wenn mein Benutzer die Zusammenfassung erhält, ja, er kann sie gut lesen. Dort erhalte ich den Code, und das ist der Code für die Zusammenfassung mit der Funktion. Lass es uns einfach kopieren. Wir werden nun zu unserer Zusammenfassung in unserem Code gehen, sich auf der Dashboard-Seite befindet. Wir werden es dort platzieren, und wir müssen diese Funktion streichen und sie über die Rückgabe stellen . Also werde ich es kürzen. Jetzt werde ich es dort unter der letzten Funktion platzieren . Es ist dieser. Also ja, es sollte da sein. Jetzt werde ich es speichern und Sie können sehen, wir haben es gut formatiert mit diesen beiden, ich würde sagen, kleinen Symbolen Ich lasse uns einfach diese beiden SUGS entfernen und es sollte in Ordnung sein Da ist also der erste. Wir können es einfach entfernen, und da ist das zweite. Und das wird es sein. Da haben wir die Zusammenfassung aus dem PDF. Falls ihr neugierig seid, welches PDF ich dorthin geschickt habe. 47. Projekt 3: Implementierung von Auth, Datenbank und Stripe: Jetzt ist es Zeit für die dritte Aufforderung. Ich werde da sein, bitte hilf mir jetzt, OTB ORM und Stripe für die Zahlung zu implementieren OTB ORM und Stripe für die Zahlung Zur Authentifizierung werden wir die Clard-Authentifizierung mit Anmelde- und Anmeldeseiten implementieren Clard-Authentifizierung mit Anmelde- und Anmeldeseiten Wir werden Middleware für geschützte Routen hinzufügen, Benutzerprofilverwaltung einrichten und auch Webbookhandling für Benutzerereignisse implementieren ORM mit Modell für Datenbank und ORM Implementieren Sie Prisma Ich habe es später in dieser Nachricht erwähnt, weil wir unten das Benutzer- und Abonnementmodell haben , bei dem wir bleiben möchten Sie dann für die Zahlungsintegration mit Stripe Richten Sie dann für die Zahlungsintegration mit Stripe ein Stripe-Abonnementsystem mit frühzeitiger Preisgestaltung, Zahlungsabwicklung, Webhook-Bearbeitung für Abonnementereignisse und Markierung des Abonnementstatus für Benutzer ein. Zu diesem Zweck werden wir auch erwähnen, dass wir nach der Zahlung, wo der Benutzer über die Abonnementschaltfläche darauf zugreifen kann, wo der Benutzer über die Abonnementschaltfläche darauf zugreifen kann, dort haben, aber derzeit hat es eine Dummy-Funktionalität Wir möchten, dass der Benutzer zu Stripe weitergeleitet wird. Dann haben wir das Prisma-Datenbankmodell. Ich werde auch erwähnen, dass es nicht geändert werden soll, und ich werde dort das Modell für Benutzer und Abonnement angeben Jetzt werde ich diese Aufforderung annehmen und sie Deepsek vorlegen. Ich werde auch die Suche im Internet überprüfen. Wir werden es auch dort platzieren, bitte geben Sie mir einen Code und auch eine Fotostruktur. Es ist also klar, wo der Code hingehört. Und dort erhalten wir die Antwort und wir haben die Struktur, genau so, wie wir sie erwähnt haben. Wir haben den Da-Code, und um ehrlich zu sein, sieht er sehr vielversprechend aus. Es gibt eine Anmeldeseite genau wie in der Dokumentation für den Angestellten Da ist die Stripe-Integration , die ebenfalls sehr vielversprechend aussieht Und es gibt das Webook für Stripe. Bisher sieht die Struktur wirklich gut aus. Und wir haben den Abonnement-Check im Dashboard. Wir haben dort die Umgebungsvariablen für den Angestellten usw. vorbereitet Umgebungsvariablen für den Angestellten usw. Und lass es uns versuchen. Lassen Sie uns das jetzt programmieren und schauen, ob es funktioniert oder nicht. Gehen wir Schritt für Schritt vor. Zuerst werden wir diesen Befehl ausführen. Lassen Sie uns dort in unserer Anwendung in unserer ID ein Terminal öffnen. Dann bereite ich einen zweiten Dann ist da noch die Ordnerstruktur, also muss ich einen Ordner erstellen. Dort werde ich mich anmelden und anmelden und dort die Seite t sechs eingeben . Lass es uns machen. Ich werde das auch kopieren und im Stammordner oder im App-Ordner dorthin gehen, ich werde es in Klammern erstellen Das heißt, wenn Sie zur Anmelde- oder Anmeldeseite gelangen möchten, müssen Sie SignN nicht mit dem Schrägstrich absetzen Wenn es in Klammern steht, wird es ignoriert. Es wird also nur eine Anmeldung mit Schrägstrich sein. Dort werde ich drinnen einen neuen Ordner erstellen, ich werde dort das ablegen, was ich kopiert habe, aber nur ohne Seite T sechs Ich werde es auch für die Anmeldung erstellen. Drinnen werde ich dort und da Seite T sechs erstellen. Jetzt füge ich diesen Code in Middleware ein, Ts. Ich werde es dort einfügen Diesen Import mit der Middleware werde ich oben drauf legen, und das können wir dort platzieren Nun, die Sache ist auch so, dass Off-Middleware jetzt nicht mehr von Angestellten benutzt wird Stattdessen wird es wieder einen Fehler geben, auf den wir stoßen würden, und wenn wir KI fragen würden, würde er uns wahrscheinlich die Antwort geben, aber er muss jetzt mit Middleware arbeiten, die aber er muss jetzt mit Middleware arbeiten nicht von Middleware ist, Butler-Middleware nicht von Middleware ist, Butler-Middleware und ja, das so machen. Außerdem müssen wir dort weder die öffentliche Route noch die angegebene angeben Wir werden es einfach so exportieren. Lass uns jetzt weitermachen. Wir sollten das auf das Layout setzen, also kopieren wir es. Und dort in unserem Layout in unserer App, das wir dort finden, werden wir es einfügen und wir werden einfach überprüfen, was wir hinzufügen müssen. Also im Grunde gibt es alles. Wir müssen dort nur die Eingabe oben platzieren. Und wie Sie sehen können, fehlt uns auch der Text des Sachbearbeiters Also lass es uns dort hinstellen. Sollte den HTML-Code umschließen. Und unten und lösche das. Jetzt wird es gut sein. Dann werden wir weitermachen. Es gibt die Seiten zum Anmelden und Registrieren. Das ist also Anmeldung. Und das ist ein Zeichen. Also Prisma Schema Dot Prisma, das heißt, wir werden im Stammordner ein neues Prisma erstellen, und Insight, wir werden neue Dateien erstellen, Schema Dort werden wir das Modul einfügen. Jetzt müssen wir in einem Lap-Ordner Prisma Dot ds erstellen . Lass uns dorthin gehen Manchmal wird diese Datei, die wir als Prisma Ts erstellen , auch TB Ts genannt Im Grunde genommen initialisieren wir das Prisma, sodass wir es nicht immer wieder tun müssen Jetzt die gestreiften Ts in unserer Lippenmappe. Also lass uns mit Stripe Dots weitermachen. Jetzt gibt es ein Problem mit der APA-Version, aber auch das müssen wir selbst auf die neueste API-Version aktualisieren , die wir für Stripe verwenden sollten. Dann müssen wir einen API-Stripe-Ordner erstellen und dort die Route DS ablegen. Gehen wir zur API, erstellen den Stripe-Ordner, erstellen den Routenpunkt Ts und legen ihn dort ab. Dann werden wir in Webhooks Route DS erstellen. Dann werden wir die Dashboard-Seite damit aktualisieren. Mal sehen, was wir hinzufügen müssen. Diese Importe. Dann das über der Rückgabe und dann dieses bedingte Rendern. Ich kann diesen Code jetzt löschen und dort ablegen. Und wir werden diesen Inhalt nehmen, verstanden. Und wir werden nach der Generierung von Stripe-Buttons fragen , solche Dinge. Dann werden wir Sie auffordern, den Code für den Stripe-Button zu generieren. Wir hatten das zuvor gemacht, aber es basierte auf dem Dummy-Wert Sie können vielleicht eine Funktion erstellen, abonnieren, die im Grunde der Dummy-Wert selbst war Sie schicken uns einfach alles, also erstellen wir das in Einzelteilen Machen wir es so wie er ist. Lass es uns dort erstellen. Stripe Button mach TA sechs, was ich tun würde, aber ich werde es nicht so machen, wie ich es will. Wie mir DC mitteilt, würde ich dort einen Ordner erstellen, der Komponenten unterstreicht, und ich würde dort verwandte Komponenten in das Dashboard einfügen Komponenten in das Dashboard Aber lass es uns jetzt nicht tun. Also werde ich den Stripe-Button machen, ich werde dort den Import einfügen. Ist es wichtig? Ja, ist es. Zum Schluss müssen wir den Slash-Server hinzufügen. Jetzt werden wir diese API-Version für Stripe in unsere Stripe DTS-Datei einfügen für Stripe in unsere Stripe DTS-Datei Da, lass uns zuerst das Prisma drücken. Und dann beheben wir diese beiden weiteren Fehler, die wir dort haben. Wir haben also die Prisma-Datei, und wir müssen sie auf unsere Superbasis übertragen und dort werden wir unsere Daten speichern Was wir in unserer Dotina-Datei tun müssen, ist, dass wir dort alle Umgebungsvariablen ablegen müssen Wir können sie auch von dort übernehmen, damit wir die genauen Variablen kennen, nach denen wir suchen sollten Das heißt, wir müssen es von Clerk, Superbse und Stripe bekommen Clerk, Superbse und Jetzt zeige ich dir, wie du das machen kannst. 48. Projekt 3: Abrufen und Festlegen von API-Schlüsselgeheimnissen: Wir werden die Benutzerverwaltung in Clark integrieren, und Sie melden sich an gehen dann zu diesem Dashboard. Dort klicken wir in unseren Anwendungen auf Anwendung erstellen. Namen der Anwendung wähle ich SAS Tutorial und muss mich neben E-Mail auch bei Google anmelden. Ich werde auf Anwendung erstellen klicken und jetzt habe ich ihre Anleitung, wie man das mit Next JS macht. Wir haben ihre Umgebungsvariablen. Lass uns auf Kopieren klicken und jetzt werden wir es dort einfügen. Dann können wir uns auch das Beispiel der Implementierung für dieses An- und Abmelden ansehen , aber wir nehmen daraus aber wir nehmen nur den Clerk-Provider und fügen ihn in unser Root-Layout Und diese Schaltflächen werden wir in die Navigationsleiste einfügen. Wenn Sie mit einem Leitfaden fortfahren möchten, klicken Sie dort und fahren mit dem nächsten GS-Leitfaden fort. Und es gibt eine Dokumentation der Dinge, die wir nach Supabse fahren werden Und dort werden wir uns anmelden oder einloggen, wenn Sie bereits ein Konto haben , oder Sie können grundsätzlich auch Continue with Giu verwenden Dort klickst du auf Neues Projekt erstellen. Wir werden Organisation wählen. Dort wählen wir den Projektnamen aus. Dort generieren wir ein Passwort und klicken auf Kopieren. Speichere dieses Passwort irgendwo. Wir werden es in einer Weile verwenden, Ihre Herkunft auswählen und dann auf Neues Projekt erstellen klicken Jetzt können wir in Super Base in den Projekteinstellungen und dort in der Datenbank den Projekteinstellungen und dort in der Datenbank diese Verbindungszeichenfolge abrufen Wir werden auf Kopieren klicken und zu unseren Umgebungsvariablen gehen und sie dort einfügen. Jetzt fügen Sie dort in Ihr Passwort Ihr Passwort ein, das Sie von Superbase erhalten haben und das so aussehen wird, aber das ist natürlich Ihr Passwort Und dann nimm diese Wandzeichenfolge und füge sie in diese Datenbank-URL Jetzt werden wir zur Dokumentation mit dem Titel Super Base with Prisma gehen , und dort können wir auch einige nächste Schritte sehen , die wir tun müssen, um dies mit Prisma zu verbinden Dort findest du diese beiden Zeichenketten. Die erste wird für die Datenbank-URL sein. Im Grunde ist es das Gleiche, was wir haben. Das einzige, was dort nach dem Datenbanknamen bearbeitet wurde , ist dieses Fragezeichen mit PG Bouncer Nehmen wir es und fügen es dort ein. Für die Datenbank-URL sieht Ihre Zeichenfolge dann wie zuvor aus, aber mit dem Bearbeitungs-Fragezeichen und dem PG-Bouncer Dort erstellen wir eine neue Umgebungsvariable, die als direkte URL bezeichnet wird Nimm diese Zeichenfolge und füge sie dort ein. Jetzt löschen wir das bis zu diesem Datenbanknamen , der PostGress ist. Wir werden dieses Board auf 5432 ändern Jetzt werden wir es speichern. Jetzt gebe ich einfach das echte Passwort aus der Superbase Falls du es vergessen hast, zeige ich dir, wie du es bekommen kannst. Dort in der Datenbank klickst du auf Datenbankpasswort zurücksetzen, Passwort generieren, es vorher zurücksetzen, kopierst es einfach, wenn du ein neues willst, und dann zeigst du es dort an. Was wir jetzt tun werden , ist, dass wir dort NPXPrisma migrate Dev in das Terminal einfügen werden NPXPrisma migrate Dev in das Terminal Wir werden dort einen Namen für die Migration eingeben und ein bisschen warten Wir können das auch mit npxPrisma DB Push machen. npxPrisma DB Push ist der Fall, wenn Sie schnell einige Änderungen an Ihre Datenbank übertragen möchten schnell einige Änderungen an Ihre Datenbank übertragen Es verfolgt sie nicht und npxPrisma migrate deep verfolgt npxPrisma Wenn wir einige Felder oder ein Modell hinzufügen, werden wir Sie können es dort auch in Prisma-Migrationen sehen. es. Und dort im Tabelleneditor können Sie jetzt den Benutzer der Abonnementtabelle sehen, und Sie können dort alle Felder sehen. Wir öffnen die Dokumentation des Sachbearbeiters und werden dort die Daten des Sachbearbeiters mithilfe von Webhooks mit Ihrer Anwendung synchronisieren Daten des Sachbearbeiters mithilfe von Webhooks mit Ihrer Anwendung Der erste Schritt besteht darin, Ngro einzurichten . Dies hilft uns, unseren lokalen Server dem Internet zugänglich zu Was wir tun müssen, ist einfach Ngrog herunterzuladen , nachdem Sie es heruntergeladen haben. Sie werden die EngrogTexa-Datei öffnen, die ein Terminal für Sie öffnet. Bevor Sie es herunterladen, müssen Sie sich auf engrog.com anmelden, dort ein Konto erstellen. Anschließend laden Sie es herunter und öffnen die EXE-Datei Engrog Dot, die dort ein Konto erstellen. Anschließend laden Sie es herunter und öffnen die EXE-Datei Engrog Dot, die so aussieht. In dieses Terminal werden wir das einfügen , aber es werden nicht 80 sein, es werden 3.000 sein, da dies unser lokaler Host ist Jetzt können wir sehen, dass es es so weiterleitet. Wenn wir in unseren Engroc gehen und in die Tunnel gehen, können wir sehen, dass es dort angezeigt wird Für den nächsten Schritt haben wir diese Umgebungsvariablen bereits Das einzige, was wir nehmen werden, ist dieses Webook-Geheimnis. Kopieren wir es und fügen es in unsere N-Datei ein. Dort in den Umgebungsvariablen werde ich es so platzieren und speichern. In Schritt zwei können Sie sehen, dass wir dieses Clerk-Dashboard mit unserem Endpunkt aktualisieren müssen dieses Clerk-Dashboard mit unserem Endpunkt aktualisieren Wir sind von Engroc dort angekommen, wir werden in unserem Clerk, wir werden dort in Webhooks einsteigen Dort werden wir auf Am Endpunkt klicken und dort, was wir tun Wir werden diese URL aus dem Engoc einfügen. Wir werden es dort einfügen. Und danach machen wir API, Webhooks, Clerk Dies ist die Endpunkt-URL, die wir dort verwenden sollten. Und was wir abonnieren möchten, ist die Benutzererstellung. Wir können dort den Benutzerpunkt erstellen platzieren und das Ausgewählte auch aktualisiert, gelöscht usw. lassen . Lass uns auf Create klicken, auf Secret zuweisen klicken und es von dort kopieren Und wir werden es in diesem Spiel zu unserem Webbook Secret hinzufügen. Jetzt werden wir einen Stripe einrichten. Zunächst melden Sie sich bei Stripe an oder registrieren Sie sich. Und dann werden Sie in Stripe ein neues Produkt erstellen, und dort im neuen Produkt werden wir uns mit Entwicklern befassen, werden wir uns mit Entwicklern befassen dort werden wir uns mit API-Schlüsseln befassen. Und dort werden wir den veröffentlichbaren Schlüssel nehmen. Dann gehen wir zu unserer IDE, fügen ihn dort ein und gehen zurück zum geheimen Schlüssel Wir werden auf Reveal klicken und dann erneut klicken, damit wir ihn in die Zwischenablage bringen und ihn in unsere dotnf-Datei einfügen, also in unsere also Ich habe den veröffentlichbaren Schlüssel und den geheimen Schlüssel. Ich werde diesen Umgebungsvariablen einen Namen geben Da dies ein öffentlicher Schlüssel sein wird, werde ich den nächsten öffentlichen und dann den veröffentlichbaren Stripe-Schlüssel angeben, und für den geheimen Schlüssel werde ich Stripe geheim halten, dann kehren wir zur Stripe-Seite zurück Dort gehen wir zum Produktkatalog und Sie können sehen, dass ich dort bereits zwei Produkte habe, aber ich werde mit Ihnen ein neues erstellen Lass uns dort auf Produkt klicken. Ich werde dort einen Namen für das SAS-Produkt angeben. Ich werde dort einen wiederkehrenden Preis und 1990 $9 festlegen . Es wird nicht monatlich sein Ich werde es auf jährlich einstellen und dort auf Produkt klicken. Jetzt klicke ich darauf , um dorthin zu gelangen. Wenn Sie von dort aus klicken, können Sie die Preis-ID kopieren und diese dann in Ihren Umgebungsvariablen speichern. Sie können es so sehen. Ich habe es da hingelegt. Und die letzte Umgebungsvariable, die wir von Stripe benötigen , ist das Stripe Webbook Secret Also lass es uns dort vorbereiten. Dies ist nicht das Geheimnis, das Sie preisgeben sollten. Für das Geheimnis erhalten Sie es tatsächlich vom Terminal generiert. Also, was wir jetzt tun müssen, wir werden uns mit Web-Hooks darauf konzentrieren. Wir werden auf Test in Local Environment klicken und dort erhalten wir die Anleitung, was wir tun müssen , um den Stripe für Webhooks einzurichten Also müssen wir zuerst den Client herunterladen . Dort wählst du dein System aus, für das Windows geeignet ist Dort werde ich diese Zip-Datei von Github herunterladen. Sie werden es entpacken, dann öffnen Sie den Ordner, dann öffnen Sie Umgebungsvariablen auf Ihrem Computer und fügen dort einen Pfad zu dieser Punktax-Datei Sie werden Ihr Terminal öffnen. Sie werden dort Stripe schreiben und diese Informationen erhalten. So werden Sie wissen, dass Sie den Client erfolgreich installiert haben. Dort werden wir zu dieser Seite zurückkehren. Dann geben wir dort diesen ersten Befehl ein, Stripe Login. Wir werden die URL kopieren. Öffne es dort, dort werden wir das Wort sehen. Wir werden auf L Access klicken und der Zugriff wird gewährt. Wenn wir nun zu dieser Seite zurückkehren, werden wir sehen, dass sie abgeschlossen Dann kopieren wir diesen Befehl und öffnen dort ein neues Terminal. Jetzt werden wir das einfügen, um das Ereignis an unsere Webhooks weiterzuleiten. Was wir tun müssen, ist, dass wir es auf unseren lokalen Host ändern Außerdem werden wir den API-Webhooks-Stripe platzieren . Wir werden eingeben Damit erhalten wir das Stripe-Webhook-Geheimnis. Wir werden es einfügen und dort ablegen, unser Terminal öffnen und dort Stripe Trigger Payment Intent Success ausführen. Dort können Sie sehen, dass wir die Statusantwort 200 erreichen. Ihre Dotn-Datei mit allen Umgebungsvariablen sollte so aussehen 49. Projekt 3: Abonnementprüfung: Wenn Sie drei neue Umgebungsvariablen bearbeiten, ist es die Anmelde-URL und die Anmelde-URL für den nächsten Beamten Anmelde-URL Dort werden Sie sich einfach mit Schrägstrich anmelden und sich mit Schrägstrich anmelden. Im Grunde werden Sie diese beiden Zeilen einfach kopieren und einfügen. Für Webbook Secret ist dies das Webhook-Geheimnis von Clerk und Sie werden es dort ablegen, und das Nachdem Sie all diese Umgebungsvariablen haben, sind Sie fertig, und das Und zuletzt werden Sie sich an die URL des nächsten öffentlichen Zugriffes halten , den lokalen Host 3.000. Jetzt werden wir den Befehl ausführen und Px Prisma generieren, um das Schema zu generieren Wir machen npxPrisma D B push. Dies sollte das Schema in unsere Superbase übertragen. Und bevor wir das tun, müssen wir dort noch eine weitere Sache unter dieser URL hinzufügen eine weitere Sache unter dieser URL Wir werden eine direkte URL hinzufügen , um eine direkte Verbindung zu unserer Superbase Nachdem wir das haben und es gespeichert haben, können wir npxPrisma DB Wir werden den Befehl ausführen, und das sollte unser Prisma-Modell in unsere Superbase-Datenbank Das heißt, wir werden jetzt in unsere Superbase gehen, wir haben ihr Benutzer- und Abonnementmodell, was Jetzt können wir mit dem Testen fortfahren. Für das Update müssen wir eine neue Aufforderung eingeben. Also gehe ich zu meiner Eingabeaufforderung, die ich dort einfüge, nur weil ich sie mit Ihnen teilen möchte. Andernfalls können Sie den Deep Sk natürlich direkt aufrufen. Ich notiere sie nur dort, sodass Sie dieselben Eingabeaufforderungen verwenden können wie ich Ich werde dort Eingabeaufforderung vier einfügen, und ich werde sie jetzt erstellen. Bitte senden Sie mir die Benutzerimplementierung in der API und erstellen Sie dann Code mit einer Ordnerstruktur, in der ich sie implementieren soll Überprüfe die Abonnements, betrachte Schema Adt Prisma und ändere es trotzdem nicht Dann muss ich auf der Dashboard-Seite nach seinem Abonnement Nehmen wir das und lassen Sie uns danach fragen. Da ist die Antwort. Lass uns diese API-Benutzerroute Ts ausprobieren. Lass es uns da hinstellen. API-Benutzer- und Route-IDs. Da ist der Code. Jetzt sollten wir auch diese beiden Typdefinitionen hinzufügen. Also das sind die Typen Benutzerpunkt Ts. Dann füge das zu unserer Dashboard-Seite hinzu. Lass uns das kopieren. Gehen wir zu unserer Dashboard-Seite. Lass es uns da hinstellen. Dort werden wir diesen Nutzungseffekt nehmen und ihn dort platzieren. Und diese Importe Dann werden wir dieses Benutzerabonnement annehmen, aber jetzt wollen wir die Importe dort ablegen. Außerdem sollten wir dort sein. Das ist dupliziert, also können wir es löschen, und Navbar, die wir bereits haben, nutzen die Tatsache, dass wir es dort hinzufügen werden . Und jetzt sollte das in Ordnung sein Später werden wir auch den NIST-Code löschen. Und jetzt sollten wir auch nach diesem Benutzerdatenabonnement suchen, wir können das nehmen und wir werden es dort ablegen Also da unten können wir auch den Strey-Button hinzufügen und dann setzen wir ihn so ein, speichern ihn und alles sollte in Ordnung sein Es liegt ein Fehler vor. Lass es uns einfach schnell finden. Dies wird nicht mehr benötigt, da wir einen anderen Ansatz verwenden. Daher werden wir es löschen. Wenn das Abonnement abgeschlossen ist, nehmen wir es im Clip-Ordner auf. Wir werden eine neue Datei erstellen, Abonnementpunkte, und sie dort ablegen. Jetzt können Sie sehen, dass wir beim Abrufen dieser Benutzer-ID zwei Fehler haben und wie wir dieses Problem einfach beheben können, indem wir Ihnen die Rückgabe versprechen. Damit das funktioniert, müssen wir also darauf warten. Wir werden dort warten. Dann fehlt es uns auch dort, also warten wir einfach darauf und es sollte unsere Fehler beheben. Jetzt sollte alles funktionieren. Lassen Sie uns also noch einmal NPM run def machen. Und wir haben den Fehler, und liegt daran , dass ich dort einen Fehler gemacht habe Wir müssen auch Ordner erstellen, uns anmelden und registrieren. Dann werden wir uns anmelden und uns bei der Anmeldung anmelden Jetzt wird es funktionieren. Also machen wir NPM Run Death Also sind wir da. Das ist die Landingpage. Wir werden auf Erste Schritte klicken. Bevor wir anfangen, nehmen wir unsere NAF-Leiste, kopieren sie und gehen zu Deep Seek Dort werden wir es einfügen und eine weitere Aufforderung machen. Bitte passen Sie diese Navigationsleiste an, und wir möchten die Navigationsleiste an die korrekte Implementierung anpassen , indem wir den Sachbearbeitertext und alles andere verwenden den Sachbearbeitertext und alles Also werde ich die Suche noch einmal überprüfen, damit sie etwas Dokumentation aus dem Internet finden kann Dann werde ich die Aufforderung senden und erwarte, dass die Navbar-Komponente mit dem richtigen Text und allem zurückgegeben wird Navbar-Komponente mit dem richtigen Text und allem zurückgegeben dem richtigen Text und allem Und da ist unsere NAF-Bar. Jetzt kann ich es kopieren und dort ablegen. 50. Projekt 3: Webhooks für Clerk und Stripe: Wir werden nun den Prompt erstellen und auch erwähnen, dass wir das laut der Dokumentation von Stripe oder Clerk für die Webhooks wollen das laut der Dokumentation von Stripe oder Clerk für Fangen wir an, den Prompt zu schreiben. Ich werde es dort hinstellen. Es wird Prompt Nummer fünf sein, und jetzt werde ich es erstellen und es wird wirklich einfach sein. Bitte schicken Sie mir die Webhooks für Clerk und Stripe gemäß der Dokumentation und meinem Datenbankschema mit Jetzt werden wir die Aufforderung senden. Und da ist die Antwort. Dann sollten wir Clerk in Webhooks haben, und ich denke, es ist eine etwas andere Ordnerstruktur, die wir dort haben Also da in Webhooks. Lassen Sie uns einen neuen Ordner, Clerk und die Route Dots erstellen Clerk und die Route Wir werden es dort hinstellen. Dann streifen Sie eins. Also im Grunde können wir den von dort verschieben. Wir werden dort den Code eingeben. Dann haben wir da die Umgebungsvariablen , die Struktur, wie es aussehen sollte, und das sollte sein. Dieser für Stripe ist schon da. Also können wir diesen einfach löschen und wir werden dort nur Webhooks, Clerk und Stripe haben Noch eine Korrektur, da sollte es wieder Gewicht geben, also legen wir es einfach da hin und fügen es auch als Und für den Sachbearbeiter, lass uns dieses Plugin installieren. Also lass uns das Terminal öffnen und NPMI swix machen. Und auch wir werden dort warten. Und wenn Sie sich fragen, wo Sie die Dokumentation für den Sachbearbeiter bekommen können, können Sie auf diese Seite gehen Webhooks von clerk.com Documents synchronisieren Daten Dort können Sie also auch die Dokumentation finden und sie Deepsk zur Verfügung stellen 51. Projekt 3: Testen: Um das zu testen, brauchen wir zwei Dinge. Zuerst öffnen wir Ngroc , das Sie heruntergeladen und installiert haben, und dort werden wir Engroc HTTP Wenn Sie beispielsweise auf dem lokalen Host 3.001 laufen, müssen Sie Engroc HTDP Dort werde ich diese URL nehmen. Dort gehst du in Configure, dort scrollst du nach unten, gehst zu Webhooks Wir werden einen neuen Endpunkt hinzufügen. Ich werde die URL von Engroc einfügen und API Webhooks Clerk erledigen Dort werde ich den Benutzer und all diese Ereignisse überprüfen. Klicke auf Erstellen und ich erhalte dieses Signaturgeheimnis. Also werde ich es einfach anzeigen, dann kopiere ich es und füge es so in unsere Umgebungsvariablen ein. Ich werde auch im Terminal diesen Befehl einfügen Stripe Listen forward to local Host 3.000 API-Webhooks, Stripe Vorher müssen Sie sich wie zuvor mit dem Stripe anmelden , um sich beim Stripe anzumelden Danach wird es überprüft. Jedes Mal, wenn Sie Ihre Anwendung testen möchten, müssen Sie nur diesen Vorgang ausführen. Stripe wird an Localhost 3.000 API Web Book Stripe weitergeleitet an Localhost 3.000 API Web Book Stripe Das muss der richtige Pfad sein. Wenn es zum Beispiel Webhooks XIX gibt, dann benötigen Sie die API Webhooks ixix Stripe, aber wir haben die richtige Benennung, also ist es in Ordnung so Jetzt sind wir bereit, damit wir es testen können. Wenn Sie den Benutzer testen möchten , den Sie bereits in Ihrem Sachbearbeiter haben, löschen Sie den Benutzer einfach aus Ihrem Sachbearbeiter Andernfalls wird es nicht funktionieren. Der Benutzer, mit dem Sie das testen möchten, darf zuvor nicht im Sachbearbeiter gewesen Es muss dort sein, kurz nachdem Sie sich jetzt bei ihm angemeldet haben, da der Benutzer sonst doppelt angezeigt wird Ich werde nicht in deinem Superbse erstellt und das wird nicht funktionieren. Jetzt bin ich eingeloggt. Ich werde Superbse überprüfen Ich kann dort meinen Benutzer sehen, was großartig ist. Jetzt werden wir dort eine Sache korrigieren , wir brauchen diese Funktion nicht, und sie ist abonniert, und sie ist abonniert weil wir dort nur überprüfen werden, ob der Benutzer dort abonniert ist wir werden eine neue Variable erstellen, ob sie abonniert ist Wir werden den Abonnementstatus überprüfen, falls er aktiv ist. Das wird sich als wahr erweisen. Falls nicht, wird dies als falsch gelten. Und dort werden wir auch ein Update machen. Das können wir jetzt löschen. Und lass es einfach so stehen. Und was wir tun werden , ist, dass wir über diese Rendite hinausgehen und dort einen kleinen Scheck ausstellen werden. Wenn das Abonnement falsch ist, werden wir zurückkehren. Sie sind nicht abonniert, wir schreiben nur Wir können dort nun sehen , dass wir nicht abonniert sind und analog zu den Premium-Funktionen können wir 52. Projekt 3: Stripe Checkout-Schaltfläche: Wir müssen den Stripe-Button überprüfen. Gehen wir zur Eingabeaufforderung und dort zur Eingabeaufforderung. Ich werde ein neues erstellen. Bitte erstellen Sie eine Stripe-Schaltfläche gemäß der Stripe-Dokumentation. Damit ich eine Zahlung erstellen kann. Jetzt nehmen wir diese Aufforderung und fügen sie in Deep Seek ein. Jetzt wird er mit der Button-Erstellung beginnen. Da haben wir es fast. Er hat also die Checkout-Sitzung erstellen und dann den Stripe-Checkout-Button gesendet die Checkout-Sitzung erstellen . Ich denke, er meint, dass wir es dort platzieren sollten, also gehen wir dort neben dem Stripe-Button hin, erstellen dort eine Stripe-Checkout-Sitzung mit Punkt ts fügen den Code dort ein. Auch das muss gewichtet werden. Dann werden wir die Funktionalität für die Schaltfläche selbst von dieser kopieren. Wir werden es dort kopieren und einfügen. Wir müssen das so anpassen, wie wir es erstellt haben. Stripe-Checkout-Sitzung, Stripe-Checkout-Sitzung. Ich habe dort einen falschen Namen eingegeben und da fehlt uns eine Komponente von ChtCNH Sie können Komponenten von ChetCn Es ist super einfach, mach einfach nPx ShetCn spätestens auf der Schaltfläche. Geben Sie ein und es wird die Komponente automatisch aus der ChetCN-Bibliothek herunterladen Dort werden wir einfach die empfohlenen Dinge tun und fertig Das bringt uns zur nächsten Eingabeaufforderung und es wird Aufforderung sieben sein. Dieser wird für Stripe Checkout Session Dot S sein . Ich wollte eine einfache Funktionalität beibehalten und gleichzeitig ein tolles Abonnement haben, weil sie etwas mehr Dinge als nötig beinhaltet und Fehler verursacht. Ich werde auch erwähnen , dass ich es laut Stripe-Dokumentation haben möchte , und für Button behalte ich einfach die einfache Funktionalität bei und nenne das Create Subscription. Also werde ich das kopieren. Dann sind wir hier mit dem Stripe-Button und mit der Stripe-Checkout-Sitzung. In der Stripe-Checkout-Sitzung haben Sie also im Grunde nur eine Funktion, nämlich Abonnement erstellen. Und das wird so aussehen. Ich werde das natürlich auch auf Git hochladen und du kannst das COVID in der Beschreibung finden, also kannst du das nehmen und darauf aufbauen Sie können dort sehen, dass ich die Stripe Beauty-Price-ID verwende, die wir in unseren Umgebungsvariablen festgelegt haben Und in der Stripe-Taste nenne ich das einfach Abonnement erstellen. Also lass uns das jetzt testen. Nachdem ich zum Dashboard gekommen bin, klicke ich auf Jetzt abonnieren. Es wird mich weiterleiten. Dort werde ich die Informationen eingeben. Oder Sie testen Stripe mit 4242, Kartennummer, dann zahlen und abonnieren Dann werden wir auf eine Seite weitergeleitet , die nicht existiert, weil wir eine Seite mit erfolgreicher Zahlung oder eine Seite mit stornierter Zahlung benötigen Ich kann Ihnen diese beiden Seiten zur Verfügung stellen. Ich werde sie dort ablegen, damit du sie von Git nehmen kannst. Ich denke, sie sind auch in der Stripe-Dokumentation enthalten. Wenn wir jetzt zur Seite gehen, können wir sehen, dass wir Zugriff auf die Anwendung haben. Wir werden auch zu Superbase gehen. Dort werden wir es aktualisieren und wir können sehen, dass unser Abonnement funktioniert Unser Benutzer hat jetzt ein aktives Abonnement. Lassen Sie uns versuchen, ein PDF hochzuladen. Jetzt analysieren wir und wir haben dort das analysierte PDF. 53. Projekt 3: Aktualisieren der Benutzeroberfläche mit KI: Eingabeaufforderungen, ich werde die Benutzeroberfläche des Designmodells mit klaren Linien, offenen Räumen und intuitiver Navigation mit dunklem Hintergrund und schönen Farbdetails einrichten. Bitte ändern Sie nicht die Funktionalität, sondern nur die Benutzeroberfläche Also werde ich das kopieren und jetzt werde ich Seite für Seite vorgehen. Und dort gehe ich zuerst zur Landing Page oder eigentlich zuerst zur Dashboard-Seite. Ich werde dort CederLKPase eingeben, Enter drücken und mal sehen, was es Und jetzt sieht das viel besser aus. Wir fahren mit der Navigationsleiste fort. Also wieder Sutro plus K, gib dort diese Aufforderung ein und gib ein, jetzt gehen wir zur Ausleihseite und dort werden wir dasselbe tun Es wurden auch einige zusätzliche Inhalte bearbeitet, was großartig ist. Nun, das sieht gut aus. Ich mag es. Und ich denke, das ist es im Grunde. Wir werden anfangen. Wir müssen abonnieren. Es hat das Abonnement ausgecheckt. Jetzt sind wir drin, wir wählen die Datei aus. Wir haben die Datei da. Wir werden auf Dokument analysieren klicken. Es wird geladen und da sind wir. 54. Projekt 3: Bereitstellung: Jetzt werden wir das einsetzen. Zunächst werden wir überprüfen, ob wir dort unbenutzten Code haben. Gehen wir also einfach von Seite aus. Da ist nichts. Da brauchen wir das nicht. Und überprüfen Sie nur , ob wir alle Importe verwenden, sonst kann es nicht erstellt werden. Ich denke, es ist in Ordnung. Jetzt werden wir den Button und den Checkout überprüfen. Jetzt die Stripperin, auch mit dem Angestellten. Die nächste Antwort wird nicht verwendet. Jetzt die Route dorthin, analysiere dort, wir brauchen diesen API-Schlüssel nicht. Und da sieht es so aus, als ob alles in Ordnung ist. API-Handler für Schienenmessgeräte ist leer. Lass es uns einfach löschen Ich bin mir nicht sicher, warum DeepC es erstellt hat, wenn es leer ist, aber okay, da haben wir alles Sieht so aus, als ob der gesamte Code verwendet wird. Also sollte es UTS funktionieren und da ist alles in Ordnung. Wir werden den Dateicode für JSON erstellen und diesen Code dort ablegen Dann in einer nächsten Konfiguration Gs und wenn Sie weitere Next-Konfigurationsdateien haben, löschen Sie diese. Wir werden diesen Inhalt veröffentlichen. Dann fügen Sie im Paket JSON dort im Skript diesen Inhalt für diese Befehle ein und führen dann die Terminalbefehle in dieser Reihenfolge aus. Zuerst diesen, dann diesen, diesen, dann führen Sie NPM install und dann führen Sie NPM run Build aus, und der Build sollte erfolgreich ausgeführt werden und der Build sollte erfolgreich ausgeführt Jetzt solltest du bereit sein und wir können diesen Code auf unserem Git-Upp bereitstellen und dann eine Umkehrung vornehmen, wir werden Was ich tun werde, ist Sutrllus Shift plus B zu machen , Ich kann ihr privates oder öffentliches Repository erstellen. Da dieses Repository für Sie da sein wird, werde ich es veröffentlichen und dann das Projekt teilen. Dort werdet ihr nun alle Änderungen in Szene setzen. Du legst dort den ersten Commit ein, klickst auf Commit und veröffentlichst den Zweig. Jetzt haben wir es dort auf Git Ap und es ist auch sehr wichtig, das in Get Ignore zu überprüfen. Ich weiß, dass ich das spät mache, aber es sollte jetzt in der Standardzeile sein. Wir haben da die Punkt-Nf-Datei. Denn andernfalls werden wir all unsere geheimen Schlüssel preisgeben, und jeder könnte sie sehen und nehmen, und wir natürlich nicht, wollen wir natürlich nicht, weil es geheime Schlüssel sind, und jeder könnte sie sehen und nehmen, und das wollen wir natürlich nicht, weil es geheime Schlüssel sind, die Zugriff auf unsere Lieferantendatenbank ermöglichen und so weiter Stellen Sie also sicher, dass es nicht da ist und stellen Sie sicher, dass die N-Datei dort niemals bereitgestellt wird. Jetzt gehen wir zu versal.com. Jetzt werde ich ein neues Projekt hinzufügen. Ich werde bei meinem Project Deep nach ARO Project One suchen, das ich gerade auf meinem Git upp veröffentlicht habe und dort kann ich alle Umgebungsvariablen einstellen, wie das aussehen soll Wenn du in deinen Punkt und deine Datei gehst und ihr Webhook-Geheimnis hast, wirst du dort den Namen der Umgebungsvariablen eingeben, und dort wirst du den Wert ungefähr so eingeben Und dann wirst du das für all deine Umgebungsvariablen tun all deine Umgebungsvariablen Also zum Beispiel, Angestellter, ich erinnere mich nicht an den Namen, aber ja, Sie wissen wahrscheinlich, was ich meine Angestellte und füge es dort ein. Dann haben Sie den Stripe One, und Sie müssen dort die Namen eingeben, die Sie in Ihrer Umgebungsvariablendatei haben Geben Sie dort die Eigennamen und die richtigen Werte ein, und wenn Sie fertig sind, klicken Sie auf Deploy. Oder du kannst es auch auf eine andere Art machen. Sie können den Punkt und die Datei oben einfügen, und es sollten alle Werte geladen werden. Lass es uns jetzt versuchen. Also werden wir dort auf Deploy klicken. Es wird fehlschlagen, weil wir den Punkt und die Datei dort nicht haben. Wir werden auf Gehe zum Projekt klicken. Dort klicken wir auf Einstellungen, Umgebungsvariablen. Und da ist der Button. Ich werde dort einen Wert eingeben, auf einen anderen klicken, auf Punkt und Datei importieren klicken. Sie müssen die DTN-Datei suchen, und nachdem Sie sie bearbeitet haben, werden alle Umgebungsvariablen dort geladen und Sie müssen sie nicht einzeln schreiben. Ich werde dort auf Speichern klicken Ich kann diesen xx-Wert löschen, weil ich ihn natürlich nicht verwenden werde. Und jetzt kann ich zu den Bereitstellungen gehen, mit dieser fortfahren, zum Beispiel auf Erneut bereitstellen klicken Jetzt sind wir bei einer Webpack-Konfiguration gescheitert. Also werden wir das zur nächsten Dot Config Dogs-Datei hinzufügen. Dann werden wir es speichern. Wir gehen zum Quellcode, stellen es dort bereit, geben eine Commit-Nachricht ein und übergeben es. Ich habe es bereits getan, nachdem es Repo bekommen hat, das Deployment wird erneut ausgeführt und es wird erfolgreich sein Wenn ich jetzt auf den Link klicke, komme ich zu meiner Seite und wenn ich möchte, dass das funktioniert, brauche ich diese URL Ich muss zu Clerk gehen und dort den Endpunkt für unseren Webhook, den wir dort platzieren, vom En grog auf unsere URL von Versel ändern unseren Webhook, den wir dort platzieren, vom En grog auf unsere URL Ich werde es dort ablegen. Und es sollte so aussehen. Dies ist der Link zu unserer Seite, und da ist die Slash-API Webhooks Jetzt werde ich es speichern. Vergewissern Sie sich , dass das Webook-Geheimnis das richtige ist , das wir auf Versal hochladen, und das sollte es sein Und so werdet ihr dieses Versal einsetzen, es live schalten, und so wird es