Schnelle Entwicklung von KI-Anwendungen: Von der Idee zum MVP ohne Programmierung

1. Kurs-Einführung: Hallo, da. Willkommen zum VAST-Kurs Build AI Apps. Mein Name ist Nima Tahami und in den letzten Jahren hatte ich das Glück, über 18.000 Schüler zu unterrichten und Dutzende von Apps zu entwickeln Sie sehen, die meisten Menschen geben ihre Idee auf bevor sie überhaupt anfangen, sie zu entwickeln und Sie fangen an, alle Teile zu überdenken oder bleiben im Code stecken Sie müssen eigentlich keine Programmierkenntnisse mehr haben , um Ihre Ideen zum Leben zu erwecken. Dank KI. In diesem Kurs werde ich Ihnen die genauen Schritte zeigen, die ich unternehme, um eine Idee von einer Idee über Designs bis hin zu einem echten Produkt zu entwickeln. keine Programmierkenntnisse erforderlich, und Sie erhalten eine App, die tatsächlich live im Internet verfügbar ist und die von den Leuten genutzt und bezahlt werden kann. Egal, ob Sie ein Designer sind, wenn Sie nicht mehr nur Bildschirme entwerfen , oder ob Sie ein Produktmanager sind, der seine Ideen zum Leben erwecken möchte, dann ist dieser Kurs genau das Richtige für Sie. Und Sie werden sich diesen Kurs nicht nur ansehen. Sie können tatsächlich zusammen mit mir entwickeln und Ihre eigene Idee zum Leben erwecken und lernen, wie Sie Tools wie Claude und Cursor verwenden können, um Ihre App viel schneller zu erstellen. Das ist ein super praktischer Kurs. Ich hoffe, Sie sind bereit, Ihre Idee tatsächlich umzusetzen und endlich zum Leben zu erwecken. Lass uns anfangen. 2. Notiz hinter den Kulissen: Bevor ich mit den Vorlesungen weitermache, möchte ich hier eine kurze Pause einlegen, nur um Ihnen kurzen Einblick hinter die Kulissen , wie diese Vorträge tatsächlich gemacht werden wird eine Menge Zeit in die Planung der Vorlesungen und das Filmen und Bearbeiten gesteckt. Ich habe ein Tool namens Clip entwickelt , mit dem ich jetzt alle meine Aufzeichnungen mache, einschließlich der Vorträge, die Sie gerade ansehen wollten. Ich freue mich sehr darüber , deshalb zeige ich es Ihnen. Ich lasse im Grunde das Filmmaterial, das ich für die Vorlesungen habe, fallen das Filmmaterial, das ich für die Vorlesungen habe , und anstatt Dutzende von Stunden damit zu verbringen, Dutzende von Stunden den gesamten Kurs mit dem Editor zu bearbeiten, habe ich jetzt die KI in diesem Tool, die Bearbeitung übernimmt. Wenn Sie auch nur im Entferntesten darüber nachdenken Tutorials oder YouTube oder andere Kursinhalte zu erstellen, oder Inhalte in der Art eines pädagogischen Talkkopfs zu erstellen, könnte das auch sehr hilfreich sein. Im Moment geht es das durch und bereinigt all die Fehler, die ich gemacht habe, damit, wenn du dir die Vorlesungen ansiehst , es ist professionell, es ist glatt, es ist sauber und du sitzt nicht da und verschwendest deine Zeit damit, dir einen Vortrag anzusehen , der keinen Sinn macht, oder nur zufällige Pausen während des gesamten Videos. Also schau es dir an. Hier gibt es einen Link, falls Sie wiederum daran interessiert sind, Inhalte zu filmen oder einfach nur herumzustöbern und zu sehen , ob Sie es für Ihren eigenen täglichen Gebrauch verwenden können . Genieß den Rest des Kurses. 3. Schnelles Entwerfen: Das ist also eine spannende Woche, in der wir tatsächlich unser Produkt entwickeln können, aber nicht irgendein Produkt oder irgendeine Version unseres Produkts, das Produkt mit minimaler Rentabilität, von dem Sie sicher gehört haben der wertvollste Teil des Produkts oder der Wert dass es der wertvollste Teil des Produkts oder der Wert ist, den unser Unternehmen haben wird Wir werden es in einer kleinen App oder einem Produkt verpacken und das gezielt verkaufen, richtig? Ähm, also, ich weiß, du hast vielleicht tonnenweise Funktionen im Sinn und tonnenweise Möglichkeiten, deine Idee umzusetzen, und, weißt du, dasselbe für mich und die App beim Entwickeln, aber ich werde nicht voreilig eine Liste mit 20 Funktionen schreiben und dann jede einzelne erstellen, richtig. Wenn ich nicht garantiert habe, dass ich Kunden für mein Produkt finde, ist das potenziell Zeitverschwendung. Aber was hilfreich sein wird, ist, einzugrenzen , welche Funktionen oder welche Teile der Werte, über die wir gesprochen haben der Benutzer von dem Produkt erwartet, und sich speziell darauf zu konzentrieren Ähm, also bei diesem Set werden wir für Geschwindigkeit und nicht für Perfektion entwerfen . Also gebe ich dir ein Beispiel. Dies ist die allererste Version meines Bearbeitungs-App-Clips, die ich erstellt habe. Es war noch kein vollwertiger Editor. Erstens habe ich tatsächlich nur ein Feature dieses Produkts entwickelt. Und diese Funktion dient eigentlich dazu, lange Vorträge oder längere Videos in kurze Rollen zu verwandeln. Es wird also Ihr längeres Video nehmen und wir machen daraus kleinere Videos, basierend auf dem Protokoll und dem, was daran interessant ist Und wie Sie sehen können, sind die Designs auch sehr einfach. Es gibt kein ausgefallenes Design, obwohl ich wahrscheinlich mehr Zeit damit hätte verbringen können, es zu entwerfen. Ich entschied mich für die einfachste Version, die ich konnte. Du lässt einfach deine Videos fallen. Und zu der Zeit habe ich sogar bei den Designs den Leuten erlaubt, mehrere Videos zu veröffentlichen, aber irgendwann habe ich auf nur ein Video zurückgegriffen Also auch hier möchten Sie Ihre Funktionen auf den wichtigsten Wert eingrenzen , den Sie den Benutzern vermitteln möchten Bleib dabei. Das Gleiche. Hier habe ich ein Onboarding für das Video. Sobald du das Video veröffentlicht hast, wirst du gefragt, ob es Figma-Kurs geht Auch hier habe ich diesen Figma entworfen, aber in Wirklichkeit habe ich sogar diesen Schritt gemacht und ihn so gestaltet, dass Sie einfach nur die Themen auswählen, die Sie exportieren möchten Sobald das Transkript analysiert wurde, müssen Sie, anstatt Sie zu fragen, worum es in diesem Kurs geht, anstatt Sie zu fragen, worum es in diesem Kurs geht, einfach ankreuzen, welches der Themen Sie exportieren möchten Ähm, so super einfach. Nochmals, all das sind wahrscheinlich insgesamt drei Bildschirme, vielleicht vier. Das ist alles Teil desselben Bildschirms. Es ist wie ein Ladebildschirm. Und auch hier, obwohl ich Designerin bin und nach Perfektion suche, versuche ich, nicht zu tief in die Designdetails vorzudringen und einfach auf den einfachsten Teil dieses Produkts zu konzentrieren. Und dann kann man sich ihre Videos ansehen, und von hier aus können sie es wieder, heißt es, bearbeiten. In der ersten Version gab es keine Bearbeitungsmöglichkeiten . Sie können es nur öffnen, das Filmmaterial ansehen, es exportieren, löschen und dann mit dem nächsten fortfahren Also wieder super einfach. Und hier hatte ich es sogar, sodass Sie wieder Ordner für jedes Projekt haben wieder Ordner für jedes Projekt und in Projekte wechseln können. Für die erste Version war es also sehr einfach, und ich ermutige Sie, dasselbe zu tun. Designen Sie nicht bis zur Perfektion, sondern für eine Art MVP- oder Feature-Compilation, oder? Konzentrieren Sie sich also auf das, was die wichtigste Funktion Ihrer App ist , die das Problem für die Nutzer tatsächlich löst , und konzentrieren Sie sich darauf Vergiss all die anderen Funktionen, oder? dabei zu helfen, empfehle ich dir wirklich, auch den Community-Bereich in Figma zu nutzen , wenn du deine Designs in Figma machst , was ich sehr Sie haben bereits Tonnen von UI-Kits drin, die die Leute bereits entworfen haben Ich empfehle Ihnen sehr, wenn Sie eine Designbibliothek wie ShatCN verwenden Das ist auch großartig. Viele Unternehmen verwenden es, vor allem, wenn Sie etwas entwerfen, das vielleicht einen Dashboard-Bildschirm oder etwas anspruchsvolleres hat. Sie haben jede Menge Komponenten wie Diagramme, die Sie verwenden können, und Dashboards Verweisen Sie also auf jeden Fall hier auf diesen. Nochmals, wenn Sie einen von ihnen öffnen, wir an, ich habe diesen ersten hier geöffnet. Auch dies ist eine Designbibliothek, die von Verso geöffnet wird und die Sie verwenden können So können Sie alle Komponenten sehen, die sie bereits haben. Sie müssen zum Beispiel keine Eingabekomponente von Grund auf neu entwerfen , sondern ziehen Sie einfach eine von hier her. Sie haben einen Farbtyp, und ich glaube, es gibt auch umfangreichere Versionen davon. Wenn Sie sich das hier ansehen, sind sie, wie alle Komponenten, nach Seiten aufgeschlüsselt. Sie haben also Alarm-Dialoge, ähm, Avatare, Badges, Breadcrumb-Navigation, Schaltflächengruppen Erkunden Sie also, was Ihnen zur Verfügung steht, und versuchen Sie nicht, alles von Grund auf neu zu nicht Und Sie werden sehen, wenn wir anfangen, unser Produkt zu entwickeln, werden wir diese Bibliotheken nutzen anstatt alles von Grund auf neu zu machen. Wenn Sie also mit der Entwicklung des Produkts weitermachen und wir zurückkommen und ChatGPT verwenden, um unseren Funktionsumfang einzugrenzen, Sie daran dass Sie externe Bibliotheken verwenden möchten Sie möchten die Mindestanzahl der Seiten, die Sie für Ihre App benötigen, einfach halten Mindestanzahl der Seiten, die Sie für Ihre App benötigen, einfach Seiten, die Sie für Ihre App benötigen, Du brauchst keine ausgefallenen Einstellungen oder Profilfunktionen nur bei, weißt du. Diese kleinen Details sind also im großen Maßstab wichtig, aber zunächst, wenn Sie gerade erst anfangen, müssen Sie keine Zeit damit verbringen, alle einzelnen Seiten zu Zeit damit verbringen, alle einzelnen Seiten Kommen Sie zurück und beginnen Sie dann mit eigentlichen Planung. Was werden wir bauen Ich werde über mein Produkt sprechen, aber wenn ich das mache, tun Sie natürlich dasselbe für Ihr Produkt. 4. Verwenden von ChatGPT zur Planung unserer App: Richtig, also bereiten wir uns Arbeit an unserer ersten Version unserer App zu beginnen , bevor wir sie entwickeln und sogar die gewünschten Funktionen entwerfen Wir wollen natürlich KI nutzen, um uns bei der Entscheidung für einige dieser Funktionen zu helfen. Und eine meiner Lieblingsübungen ist es, mit ChatGPT über, du weißt schon, die erste Version unseres Also hier habe ich eine Aufforderung geschrieben, die mir helfen soll, die erste Version einer MVP einer App zu planen Für eine App, die Benutzern hilft, den Überblick über ihre Ausgaben zu behalten , Rechnungen für Reisen einfach aufzuteilen und nur die Funktionen zu schreiben, die den Nutzern den größten Mehrwert Recherchieren Sie, was Wettbewerber wie Split Wise in ihrem Produkt vermissen oder worüber sich Nutzer online beschweren . Das macht zwei Dinge Erstens gibt es uns einige Funktionen, die am wichtigsten sind und die wir entwickeln werden, anstatt einfach alles , was wir bauen können. Dann wird es auch ein bisschen online nachschauen , vielleicht bei Reedit und anderen Quellen Es wird sich also tatsächlich mit diesen Ressourcen befassen, wenn Sie ihm sagen, dass es etwas recherchieren soll, um online zu sehen , welche Beschwerden sie über diese Produkte Wenn Sie möchten, können Sie spezifischer sein und sagen: Schauen Sie auf Reedit und Websites wie G two , der Bewertungsplattform für Apps Also drücken wir die Eingabetaste und schauen, was dabei herauskommt Und wie Sie sehen können, durchsucht es das Internet und erstellt dann MVP-Plan, der auf echten Benutzerbeschwerden von Redt, dem Trust-Pilotprojekt und den Feedback-Foren für Apps basiert Trust-Pilotprojekt und den Feedback-Foren für Apps Auf dieser Grundlage kam ich mit künstlicher Reibung und Paywalls zurück, kam ich mit künstlicher Reibung und Paywalls zurück, dem größten Schmerz. Das ergibt Sinn Jedes Mal, wenn ich Blitzwise verwende, können Sie nur eine bestimmte Anzahl von Transaktionen hinzufügen Wie hier steht, gibt es drei pro Tag, die du hinzufügen kannst, und dann zwingt dich das, für die App zu bezahlen, oder? Es könnte also interessant für uns sein, diese Möglichkeit zu nutzen und tatsächlich ein Produkt zu entwickeln, das vielleicht, du weißt schon, einmalig bezahlt wird, wie ein Lifetime-Deal oder so. Zahlen Sie, ich weiß nicht, 20, 30, 40 Dollar. Auch hier werden wir uns die Preise ausdenken, zahlen aber X Dollar. Sie erhalten das Produkt, Sie müssen sich nicht jedes Mal Sorgen machen es Sie um eine Zahlung bittet, oder? Also ich glaube, die Gebühren verteilen sich auf ein paar Dollar pro Monat. Aber auch hier könnte es nervig sein, immer von diesem Bildschirm getroffen zu werden, und ich weiß, dass mir das schon einmal passiert ist . Jede Reibung fühlt sich inakzeptabel an. Also werden wir damit bauen, oder? Das ist zwar kein Feature, aber es ist eine Benutzererfahrung , auf der wir aufbauen und eine bessere Version davon entwickeln werden. Zu viele Reibungsverluste bei der Einrichtung sind sinnvoll. Ich habe das auch gemacht. Es sind Gruppen involviert, und Einladungen können chaotisch sein. Wenn wir also Freunde einladen, machen wir es ganz einfach Tatsächlich werden wir es so gestalten, dass du nicht einmal ihre E-Mail-Adressen eingeben musst, vielleicht teilst du einfach einen Link und die Leute können automatisch an Reisen teilnehmen, ohne ihre E-Mails im Voraus wissen zu müssen . Wenn wir das also erstellen, werden wir es so gestalten, dass Benutzer möglichst wenige Schritte unternehmen können, um Freunde einzuladen, oder? Also werden wir das behalten. Nicht unbedingt ein Feature. Auch hier geht es um eine Verbesserung der Benutzererfahrung, aber ich baue dabei auf Design als Unterscheidungsmerkmal, und Sie möchten dasselbe tun Lassen Sie uns also weitermachen und das im Hinterkopf behalten. Und wenn Sie das durchgehen, notieren Sie sich auch, ob es auf einem Blatt Papier oder auf Ihrem Computer ist. Notieren Sie sich, was Sie tun möchten , das sich von dem unterscheidet, was die Konkurrenz da draußen tut , sodass Sie sich von anderen abheben können. Verwirrendes Mentalmodell zur Beruhigung, nicht wahr? Wenn Sie also versuchen, eine Einigung zu erzielen, verstehen die Leute nicht unbedingt, wie das funktioniert, es ist unklar, wer wem zu viele Mikrotransfers zahlen soll , emotionale Unbeholfenheit Also können wir das auch in das Produkt einarbeiten, oder? , wenn die Reise vorbei ist Warum machen wir es nicht einfach, wenn die Reise vorbei ist, herauszufinden, wer wie viel bezahlen muss? Vielleicht schicken Sie ihnen sogar E-Mail-Erinnerungen oder ähnliches, oder? Mir ist auf Split Wise aufgefallen, ich keine Erinnerungen erhalten habe , wenn ich jemanden bezahlen muss Es schickt mir monatliche Kontoauszüge, aber das ist etwas anderes als, weißt du, wenn du deinen Freund irgendwie dazu bringen musst, hey, kannst du mir etwa 100 Dollar zahlen für irgendwas wie Airbnb, oder? Das könnten unangenehme Momente sein, und das könnte ein weiterer Aspekt sein, um unser Produkt von Splitwise zu unterscheiden Also ja, hier gibt es jede Menge Dinge , auf die ich nicht zu sehr ins Detail gehen werde, aber ich werde sie bei meinem Designprozess berücksichtigen Die Kernchance ist also, dass die Nutzer kein Finanzinstrument wollen. Sie wollen einen Helfer bei der Reisekoordination , der automatisch mit Geld umgeht. Wir sind auf einer Reise, mach einfach diese Aufwandsliste. Nur MVP-Funktionen, die die sofortige Erstellung von Reisen mit echtem Mehrwert fördern, oder? Das heißt also, keine Konten. Eine Reise erstellen, einen Share-Link generieren, genau das, was ich mir auch vorgestellt hatte. Leute treten per Link bei. Es ist keine Anmeldung erforderlich. Ich bin mir beim Anmeldeteil nicht hundertprozentig sicher und das liegt nur daran , dass wir immer noch Benutzer benötigen, um sich zu authentifizieren Aber ich könnte mir vorstellen, dass das möglicherweise auch funktioniert. Also muss mindestens eine Person ein Konto erstellen, um die Reise zu erstellen, aber die Gäste müssen das möglicherweise nicht tun. Und nochmal, das sind gerade, wir sind gerade dabei, ein Brainstorming durchzuführen. Wenn wir zum eigentlichen Gebäudeteil kommen, was bald darauf passieren wird, werden wir diese tatsächlich definieren, bevor wir Hat sogar eine Reihe von Funktionen ChatGPT sagt, dass Sie diese sicher nicht in das MVP aufnehmen sollten, und das werden wir im Hinterkopf behalten, wie, Sie wissen schon, Bankintegration, Abonnements usw. Also hier ist, was es sich ausgedacht hat. Es heißt: Cor Loop, Reise erstellen , Link teilen, Ausgaben sofort hinzufügen, Saldo sehen, übersichtlich abrechnen, mit minimalen Zahlungen abrechnen. Ich finde das großartig, oder? Das ist also ein bisschen einfacher als alle anderen Funktionen, die es hier eingerichtet hat. Aber wenn wir eine einfache Version davon erstellen, ist das Feature wirklich nur eine Sache. Und das ist, du weißt schon, die Möglichkeit, deine Reise auf der Grundlage der Ausgaben zu begleichen, oder? Wir bauen nicht, obwohl es uns diese Schleife von verschiedenen Bildschirmen mitteilt , die wir vielleicht benötigen. Möglicherweise benötigen Sie einen Bildschirm, um eine Reise zu erstellen. Derselbe Bildschirm, den Sie teilen können. Das Hinzufügen von Ausgaben wäre Teil desselben Bildschirms, wobei Saldo wieder auf demselben Bildschirm angezeigt würde. Minimale Zahlungen, wir werden uns nur eine Welle von genau demselben Bildschirm aus einfallen lassen, auf dem Sie tatsächlich sehen können , wem was gehört. Natürlich wird der Bildschirm verschiedene Zustände und verschiedene Komponenten haben , aber wir werden ihn so sauber wie möglich halten. Natürlich benötigst du auch einen Startbildschirm, um Reisen von dort aus erstellen zu können. Sie haben also einen Startbildschirm , auf dem Sie alle Ihre Reisen sehen können. Ähm, dann musst du auf der Reisen-Seite nicht zu verschiedenen Orten navigieren, ein supereinfacher Ort, um zu sehen, was insgesamt ist, wie hoch der aktuelle Saldo ist, wem gehört was? Und dann die Möglichkeit, Ausgaben hinzuzufügen, und wir werden es so sauber wie möglich halten und wieder mit so wenigen Bildschirmen wie möglich arbeiten. In diesem Sinne werde ich mit den Designs beginnen. Du machst dasselbe in der nächsten Vorlesung. Ich werde zurückkommen, um zu erklären, wie ich mein Design gemacht habe und welche Entscheidungen ich auf den Seiten getroffen habe , die ich gerade erklärt habe. Also werde ich die ersten zwei oder drei Hauptbildschirme entwerfen , die Authentifizierung, alle Fahrten und dann spezifische individuelle Reiseseiten. Also werde ich das entwerfen. Sie entwerfen Ihre wichtigsten Bildschirme, beschränken Sie es auf drei oder höchstens vier, wenn Sie können. Ich weiß, dass einige Produkte vielleicht etwas komplizierter sind als andere, aber versuchen Sie auch hier, es auf das Minimum und die wichtigsten Bildschirme zu beschränken. Wir sehen uns in einer Minute und freue mich darauf, auch Ihr Design zu sehen. 5. Entscheidung für das Gerät: Bevor Sie mit Ihrem Designprozess beginnen, fragen Sie sich vielleicht, ob ich eine Webanwendung erstellen sollte. Sollte ich eine mobile Anwendung erstellen? Sollte ich eine Desktop-Anwendung erstellen. Es gibt jede Menge Fragen dazu, was gebaut werden soll und mit welchem Stack man bauen soll. Der Stack besteht aus all den Tools und der Software, die wir verwenden werden, um unsere App tatsächlich zu entwickeln Nun, meine Meinung dazu ist sehr einfach. Im Allgemeinen verwende ich einfach eine Webanwendung, die mobilfreundlich ist auf die Benutzer über ihren Browser im Internet zugreifen können, es sei denn, hier kommen die nativen Anwendungen ins Spiel. Es sei denn, Sie machen etwas Bestimmtes, wie z. B. Videobearbeitung, etwas, das die Stop-Maschine des Benutzers mit einbezieht. Sie möchten einen Teil dieses Speichers, dieser Leistung oder dieses Speichers nutzen. Für meinen Clip-Desktop-Editor habe ich beschlossen, ihn eigentlich nur für den Desktop zu erstellen, aber er verarbeitet die gesamte Videobearbeitung und das Rendern lokal , und ich muss das nicht auf einem Server machen, was vor allem am Anfang teuer sein könnte. Für eine einfache Webanwendung wie Bitwise Petit oder Friends on Trips kann man nun wie Bitwise Petit oder Friends on Trips Rechnungen aufteilen Eine Webanwendung ist ausreichend. Jetzt tendiere ich vielleicht dazu, später eine native Anwendung zu erstellen, die ich in den App Stores einreichen kann , damit Benutzer sie auf ihr Handy herunterladen können. ist praktisch, wenn mein ENS diese App täglich oder wöchentlich nutzen wird , vor allem, wenn ich B2B-Routen verwende und ich Benutzer habe , die möglicherweise wöchentlich beruflich unterwegs sind. Das ist ein Ort, an dem es am sinnvollsten ist, eine native mobile Anwendung zu erstellen. Oder in Ihrem Fall, wenn Sie eine App entwickeln , bei der der Benutzer mit dieser App interagiert täglich oder wöchentlich und häufig mit dieser App interagiert, ist es möglicherweise besser, sie als native App zu erstellen. Natürlich haben sie alle ihre Herausforderungen. Wenn Sie eine native App erstellen, müssen Sie sie im App Store einreichen und Apple muss sie überprüfen, bevor Sie sie tatsächlich live im App Store sehen können. Der App Store kann auch sehr wettbewerbsfähig sein. Aber auch wenn Sie eine Web-App erstellen, Sie vor dieser Herausforderung. Aber es gibt Vor- und Nachteile. Auf dieser Grundlage müssen Sie selbst entscheiden, was am sinnvollsten ist. Auch hier würde ich im Allgemeinen einfach eine Webanwendung verwenden, auf die über den Browser zugegriffen werden kann. Jeder hat einen Browser auf seinem Handy und man muss wirklich darüber nachdenken. Handelt es sich bei Ihrer Anwendung um ein SAS, auf das möglicherweise nur über das Internet auf einem Computer zugegriffen werden kann, dann ist es in diesem Fall eine einfache Wahl. Aber wenn Sie etwas entwickeln, das die Leute vielleicht häufiger auf Mobilgeräten verwenden, dann wird die Auswahl etwas schwieriger. Aber auch hier tendiere ich zu einer Web-App, es sei denn , Sie haben spezielle Fälle, in denen der Benutzer A, die Maschinenleistung des Geräts in dem Umfang nutzen muss der Benutzer A, die Maschinenleistung des Geräts in dem Umfang nutzen , zum Beispiel für ein Spiel, oder wenn Sie eine App erstellen möchten , die Benutzer täglich oder wöchentlich verwenden, zum Beispiel, sagen wir, eine Einkaufs-App. Sie jetzt daran, dass Sie Ihren Stack später jederzeit ändern können. Sie können Ihre Web-App jederzeit auch zu einer mobilen App machen. Fangen Sie einfach mit den Grundlagen an, beginnen Sie mit dem, was am schnellsten ist, und deshalb schlage ich für die meisten Ideen eine Web-App vor. 6. Inspiration bekommen: Ordnung, jetzt, wo wir entschieden haben, was wir entwickeln wollen und welche Funktionen wir für unser MVP darauf aufbauen wollen, brauchen wir etwas Inspiration von anderen Tools, die es bereits gibt, um unsere eigene App zusammenzustellen Der beste Weg, das zu tun, besteht darin, diese Plattform namens Mobiin zu verwenden , die enthält Screenshots von buchstäblich Tausenden verschiedener Anwendungen und sogar Animationen als Teil davon zeigt Dies ist ein großartiges Tool , um zu sehen, was andere Apps tun Hier oben können Sie also tatsächlich nach der jeweiligen App suchen. Sie können auch danach filtern , ob Sie nach Webdesigns, iOS- oder Mobilgeräten suchen . Also werde ich hier nach Split Wise suchen , weil das ein ähnliches Tool ist was ich erstellen werde . Wenn ich es öffne, können Sie sehen, dass alle Split-Wise-Bildschirme hier angezeigt werden. Sie können tatsächlich weitermachen und es speichern. Das werde ich speichern. Sie können alle einzelnen Bildschirme hier sehen. Hier haben wir Zuschlag und Kosten. Ich werde einiges davon verwenden , um tatsächlich entwerfen zu können. Sie können genau sehen, wie Sie die Splits durchführen können. Wie sie ihre Transaktionsseite anzeigen und sogar einige zusätzliche Seiten haben, finden Sie hier unten. Während Sie das tun, können Sie tatsächlich einzelne Bildschirme auswählen. Ich wähle diese Bildschirme hier gerne für den zusätzlichen Kostenfluss aus. Ich werde weitermachen und diese drei kopieren. Sie haben dieses Plug-In, das Sie installieren und dann zur App wechseln und auf Ausführen klicken können. Von hier aus können Sie die Bildschirme dann tatsächlich einfügen. Ich drücke Befehl V. Und es hat die Bildschirme hier eingefügt Während ich meine App entwerfe, werde ich mir diese Bildschirme ansehen, um mich inspirieren zu lassen Das können Sie natürlich mit mehreren verschiedenen Apps tun. Wenn Sie auf Mobiin suchen, werden Sie auf jeden Fall die Screenshots Ihrer Konkurrenten finden Screenshots Ihrer Konkurrenten und diese als Inspiration für Ihre eigenen Designs verwenden Es gibt noch eine weitere sehr hilfreiche Möglichkeit, Mobiin zu verwenden, und das ist der Flow-Tab Wenn Sie von den Bildschirmen aus tatsächlich zu Flows wechseln, können Sie die Bildschirme einfacher durchsuchen Ich möchte zum Beispiel einen Blick darauf werfen, wie Leute ihre Ausgaben aufgeteilt hinzufügen. Ich kann mir die Kategorie der Ströme ansehen. Hier gehen wir also zu Hinzufügen und Ausgaben, und wir haben alle Bildschirme, die sich auf das Hinzufügen von Ausgaben beziehen , nebeneinander, was sehr hilfreich ist. Wenn ich jetzt meine eigene App entwerfe, achte ich darauf, dass ich in diesem Flow nichts verpasse. Auch hier kann ich das entweder in meiner Handysammlung speichern, es Reisekosten-App nennen, auf Erstellen klicken oder es erneut nach Figma kopieren 7. Planung unserer Funktionen: Nachdem wir nun einige Beispiele für Apps gesehen haben , die eine ähnliche Funktionalität bieten, werde ich die Modelle durchgehen , oder jetzt sind es hauptsächlich Wireframes , die Nicht einmal Wireframes, sondern meistens nur Anforderungen, würde ich sagen Für die Authentifizierungsseite habe ich den einfachen Anmeldebildschirm Figma aus der ShaTSN-Bibliothek abgerufen habe ich den einfachen Anmeldebildschirm Figma aus der ShaTSN-Bibliothek abgerufen. Oder in diesem Fall beim Anmeldebildschirm werde ich dafür sorgen, dass der Anmeldebildschirm sehr ähnlich aussieht , mit einem Bild hier, Eingabe auf der linken Seite und dann möglicherweise einer E-Mail-Bestätigung, die so aussieht Auch hier habe ich das direkt aus der CN-Bibliothek des Chats abgerufen . Jetzt werde ich eine Willkommensseite haben, auf der schnell nach dem Namen des Benutzers gefragt wird und möglicherweise sogar nach seiner ersten Reise gefragt wird. Das wären drei Schnellfelder, um den Namen und die erste Reise von ihnen zu bekommen, was den Namen der Reise und die Daten beinhalten wird, aber die Daten, ich denke, ich denke , ich habe es stattdessen einfach. Sobald sie dann zu ihrem Dashboard, dem Haupt-Startbildschirm, gehen , sehen sie alle ihre Reisen. Von dort aus können sie eine neue Reise erstellen. Klicken Sie auf eine Schaltfläche, um eine neue Reise zu erstellen. Sie sehen eine Navbar Dann finden Sie unter jeder Reise oder für jede Reisekarte einen Namen, Daten, die möglicherweise beigetreten sind, und Sie können sehen, wer und wie viele Status Ich meine, ob die Reisen abgeschlossen, alle bezahlt sind oder noch im Gange sind, sagen wir, die Gesamtkosten Nun, das könnte optional sein. Auch hier ist nichts davon vorerst in Stein gemeißelt und die Kosten für den Benutzer. Dem Benutzer, der es von seinem Dashboard aus betrachtet, gehen die Kosten dieser Reise zu seinen Lasten. Dann wäre ein Link zum schnellen Kopieren schön, damit Sie nicht einmal in die Reise gehen müssen , wenn Sie schnell eine andere Person dazu einladen möchten . Das wird das Dashboard sein, wieder ganz einfach. Dann endlich die Reiseseite. Die Reiseseite wird alle Details zur Reise enthalten. Es werden der Name und die Daten wieder sein, möglicherweise optional. Alle Informationen von der Karte bis hierher, wo der Benutzer die Reise tatsächlich verlassen oder löschen kann, wo der Benutzer die Reise tatsächlich verlassen oder löschen kann falls er sie erstellt hat, er kann abrechnen und es gibt Ihnen eine einfache Aufschlüsselung darüber, wer wem schuldet, wie viel, ob öffentlich oder wenn ein Benutzer, der nicht authentifiziert oder eingeloggt ist, besucht, kann er eine Schaltfläche sehen, um der Reise beizutreten und dann werden sie Sie werden aufgefordert, sich zu registrieren und teilzunehmen. Das geht ganz einfach mit zwei Klicks Wenn der Nutzer eine Reise erstellt, muss er lediglich einen Namen hinzufügen, die Daten optional und dann einfach auf Link kopieren klicken, um sie zu teilen. Um eine Ausgabe hinzuzufügen, wird es einen einfachen Ablauf geben. Ich überlege noch einmal, auf derselben Seite möchte ich nicht einmal ein Pop-up oder eine andere Seite zeigen , aber sobald ich mit dem Entwerfen angefangen habe, werde ich das im Detail herausfinden. Dann haben wir den Namen der Ausgabe. Was war das für eine Ausgabe? Wie hoch war die Summe? Wer war beteiligt, und dann einige gespaltene Typen. War es gleichwertig? Waren es bestimmte Beträge oder Prozentsätze zwischen Menschen oder sogar potenziell, ich denke, das ist neu Ich habe das bei anderen Tools nicht gesehen, aber seit Tagen. Stellen Sie sich etwas wie Airbnb vor, wenn jemand 20 Tage im Vergleich zu 30 Tagen bleibt. Geben Sie einfach an, wie viele Tage oder wie viele Nächte jemand im Vergleich zu allen anderen geblieben ist, und auf diese Weise können Sie das einfach berechnen. Es ist nett, sie zu haben, aber wahrscheinlich werden wir sie zumindest für mich aus dem MVP heraushalten zumindest für mich Die Tags, die markiert werden, könnten Arten von Kategorien von Zäunen sein, waren es Essenskosten oder waren es B & B, Wohnen usw. Dann auch die Währungsauswahl. Wenn Sie mehrere Währungen haben möchten, wäre das auch nett, denn wie Sie sich vorstellen können, , wenn Sie mehrere Währungen in der App haben könnte es etwas komplizierter werden, wenn Sie mehrere Währungen in der App haben. Vorerst MVP, erste Version, die Benutzer kommen und beschweren sich später darüber Aber vorerst wollen wir nur so schnell wie möglich die erste Version herausbringen Es wird also nur eine Währung geben, egal welche Währung Sie kennen, in Ihrem Land oder dem Land des Benutzers verwenden , wir werden uns daran halten. Dann sind sie jetzt alle eingerichtet. Auch hier könnte sich all dies ändern und wird sich im eigentlichen Design- und Entwicklungsprozess ändern. Sie müssen sich noch kein glasklares Bild davon machen, wenn es um die Konstruktion oder Planung Wir haben uns einige Beispiele angesehen. Wir haben auf jeder Seite eine Liste mit dem zusammengestellt, was wir wollen. Super einfach. Abgesehen von der Authentifizierung, die hier zwei Seiten umfasst, ist alles andere nur ein Begrüßungsbildschirm und zwei weitere Bildschirme. Das ist es, was wirklich ein MVP ist. Sie könnten sogar noch einen Schritt weiter gehen und es weniger kosten, aber ich würde sagen, das wäre das am wenigsten rentable Produkt , das auch wertvoll ist. Wir wollen, dass es wertvoll ist. Wir wollen auch nicht, dass es zu MVP wird, wo es zu wenig kostet, denn denken Sie daran, dass wir für dieses Produkt Gebühren erheben dass wir für dieses Produkt und es nicht einfriert Wir wollen auch sicherstellen, dass es einen Mehrwert bietet und professionell und sauber aussieht Aber Sie benötigen nicht unbedingt Tausende von Funktionen, um den Benutzern Gebühren zu zahlen, eine einfache ist ausreichend. Ja, ich fange jetzt an, mit all diesen Bildschirmen zu designen . Komm zurück und erkläre meinen Designprozess und ich hoffe, du tust dasselbe. 8. Überprüfen von Designs: In Ordnung, ich bin damit fertig, meine erste Version zu entwerfen. Und nochmal, darauf bin ich nicht besonders stolz , denn das soll MVP sein Ich habe diese Designs in vielleicht weniger als, ich würde sagen, vier oder fünf Stunden zusammengestellt ich würde sagen, vier oder fünf Stunden Der Schlüssel hier ist Geschwindigkeit und das ist es, was Sie für Ihre erste Version wollen. Ähm, also nochmal, ich habe hier eine Authentifizierung. Viele dieser Komponenten, sehen Sie, habe ich aus der ShaTSN-Bibliothek auf Figma abgerufen Das findest du im Community-Bereich. Ich habe den Bestätigungsbildschirm von dort eingefügt, und dann ist das eine sehr einfache Seite, wie lautet Ihr Name Sieht ein bisschen schlicht aus, also werde ich es vielleicht im eigentlichen MVP ein bisschen besser machen Und dann haben wir die MitripsPage. Ich habe meine Reisen hier. Äh, Bali mit sieben Freunden, und so viel schuldet man dir Also bekommst du sofort eine Vorstellung von all deinen Reisen, wie viel dir geschuldet wird oder wie viel du Also in diesem Fall schuldet man mir etwas und füge hier diese nette kleine Note hinzu, genau wie, du weißt schon, einen Stempel, den man in einen Reisepass bekommt Solche kleinen gestalterischen Details sind immer noch, ähm, wichtig, würde ich sagen MVP heißt also nicht, dass du etwas Hässliches machen solltest. Ähm, weißt du, nicht benutzerfreundlich. Es bedeutet nur die einfachste Version , die Sie herausbringen können und die Sie nicht wochenlange Entwicklungszeit kostet. Hier finden Sie einen Link zum schnellen Kopieren, damit Benutzer die Reise schnell kopieren und an ihre Freunde senden können. Sie können eine neue Reise erstellen und wenn sie auf dieser Seite sind und noch keine Reisen haben, ihr Status etwas leer wie dieser. Auch hier habe ich diese Vorlage aus der Chat CN-Bibliothek abgerufen, einige Änderungen daran vorgenommen, und hier sind wir. Äh, dann die wichtigste Seite. Ich habe mit zwei Versionen angefangen. Zuerst habe ich mit dieser Version angefangen und angefangen, sie zusammenzustellen, und es war ein bisschen überall und es erinnerte mich an Split Wise. Hier kommt ChatGPT ins Spiel. Ich habe es eigentlich zuerst gefragt, wie kann ich meine App anders machen? , die ich aus gestalterischer Sicht Was sind die Dinge , die ich aus gestalterischer Sicht anders mache. Eines der Dinge, auf die es ankommt, ist, eine Geschichte zu erzählen und es einfach zu machen, genau zu verstehen, wo Sie mit Ihrer Balance stehen. Anstatt bei Transaktionen die Nase vorn zu haben, gehen wir davon aus, wie viel mir die Nutzer schulden, und sie können es leicht nachvollziehen. Ich habe ihm das erste Design gegeben und gesagt: Was hältst du davon? Das habe ich bisher. Auch hier wurde es bei mir wiederholt. Ich habe mir gesagt, haben Sie eine klarere Zusammenfassung für Benutzer. Als ich anfing, das Design immer mehr zu aktualisieren, schickte ich immer wieder Versionen und bekam einige Ideen. Natürlich habe ich das alles nicht umgesetzt , aber irgendwann hieß es, du bist gut genug, das Ganze als MVP auf den Markt zu bringen. Das war V One Ich habe das entworfen, um mir so etwas auszudenken. Jetzt hier auf der Reiseseite habe ich Freunde hierher eingeladen. Das ist der Haupt-CTA, alle Reisen sodass du zu allen Reisen zurückkehren kannst Hier unten findest du einige kurze Informationen, wer die Reise erstellt hat, wann und wie viele Personen daran beteiligt sind Ich denke, wenn du mit der Maus darüber fährst, kannst du vielleicht die tatsächliche Liste der Personen oder so etwas sehen der Personen oder so etwas Nochmals, diese kleinen Interaktionen, mit denen wir uns im eigentlichen Entwicklungsprozess befassen im eigentlichen Entwicklungsprozess Sie müssen sich mit Ihren Designs nicht sehr eingehend befassen. Dann haben Sie eine Liste Salden, z. B. wer Ihnen sofort wie viel schuldet, Sie wissen, wie viel Ihnen insgesamt geschuldet wird und wer Sie bezahlen muss Quick Mark hat bezahlt. Sie müssen sich nicht mit anderen Apps abfinden. Wir sehen hier die Reiseaktivitäten, dann kannst du alle Transaktionen einzeln aufgelistet sehen. Was waren die Transaktionen? Titel, wer hat ihn hinzugefügt und zwischen wem war er? Am wichtigsten, wie viel bekommst du zurück oder wie viel schuldest du, wenn du für etwas bezahlen musst Auch hier ist es super einfach, es fallen keine zusätzlichen Kosten an. Ich habe noch nicht an diesem Beitrag gearbeitet um zusätzliche Kosten hinzuzufügen. Das ist mein Design. Ich hoffe, du hast etwas Ähnliches für deine App gemacht. Auch hier gilt: Beschränken Sie sich auf eine minimale Anzahl von Bildschirmen, falls Sie diesen Prozess noch nicht gestartet diesen Prozess und nutzen Sie ChatGPT und andere KI-Tools haben, und nutzen Sie ChatGPT und andere KI-Tools, um Ihnen Feedback zu geben, aber verlassen Sie sich nicht vollständig darauf , denn auch hier ist es nicht perfekt, es ist kein Designer, manchmal sagt es Ihnen, was Sie hören möchten, oder es wird Ihnen zusätzliche Dinge sagen , die möglicherweise nicht relevant sind. Hier können auch Sie als Designer oder Ihre Designerseite herauskommen und sich hier mit KI ein wenig wehren oder herausfordern. Ähm, also ja, da haben wir es und Zeit, mit dem Bau zu beginnen. Bevor wir also zum eigentlichen Cursor springen und diese App erstellen, schauen wir uns an, welchen Stack wir tatsächlich verwenden werden. 9. Einen Stapel auswählen: Ordnung, kommen wir endlich zum spannenden Teil, Erstellung unserer ersten Version, unserer MVP-App Wir werden den Stack durchgehen, den wir verwenden werden oder den ich zumindest verwenden werde Wenn Sie mitmachen möchten, verwenden Sie denselben Stapel, tun Sie dies bitte auf jeden Fall. Wenn Sie bereits einen Stack haben, den Sie bevorzugen, bezieht sich „ Do the same stack“ im Wesentlichen auf alle Tools und das, was Sie verwenden um Ihre Anwendung zu programmieren oder zum Leben zu erwecken. Im Moment entwerfen wir nur Figma, es ist eine Anwendung, mit der wir unsere Bildschirme entwerfen können Aber um dieses Design tatsächlich in eine wirklich funktionale Webanwendung umzuwandeln eine wirklich funktionale Webanwendung und sie live zu stellen, damit die Leute sie benutzen, bezahlen, E-Mails erhalten können usw., müssen wir einen Stack verwenden damit im Grunde alles funktioniert, sowohl in Bezug auf das Frontend, das der Designteil ist, als auch auf das Backend, das ist der gesamte Serverteil der alle Informationen und Daten verarbeitet. Also ganz schnell, lassen Sie uns durchgehen, was ich verwenden werde , und dann entscheiden Sie selbst, ob Sie dem folgen oder einen anderen Hirsch verwenden möchten. Die wichtigsten Tools, die ich verwenden werde, um dieses Projekt zu programmieren, werden Cursor sein, das KI-Codierungstool. Es hat einen eingebauten KI-Agenten, mit dem Sie chatten können, und natürlich Modelle wie Cloud und GPT verwendet Ähm, und andere, um die Idee zum Leben zu erwecken. Dann haben wir das Code-Repository auf Github. Hier wird der Code gespeichert. Jedes Mal, wenn Sie den Code aktualisieren, wird er irgendwann auch den Benutzern zur Verfügung gestellt. Wir werden gleich besprechen , wie das funktioniert. Für den Stack wird die eigentliche Web-App mit NexGS erstellt, was es uns ermöglicht sowohl Frontend- als auch Back-End-Anwendungen und APIs zu erstellen , und dann für die Datenbank, wie wir die Daten speichern oder wo wir die Daten speichern werden, erfolgt dies über Mongo DEB, was sehr einfach einzurichten ist. Dort werde ich meine Benutzer- und Reisedaten speichern Next ATJS ermöglicht es uns im Wesentlichen , Benutzer zu authentifizieren, sodass sie sich einfach anmelden einige einfache Anmeldeoptionen wie Anmeldung bei Google, E-Mail Versal ist das, was wir verwenden werden, um unseren Code bereitzustellen. Sobald unser Code auf GitHub bereitgestellt ist, wird er auf Versal gespeichert, wo im Wesentlichen die Anwendung und das Backend gehostet Von dort aus können wir sogar Dinge wie Analysen und Protokolle und ähnliches sehen Analysen und Protokolle und ähnliches Stripe wird das Zahlungsunternehmen sein, das uns bei der Abwicklung von Zahlungen für diese App unterstützt. Auch hier werden wir entscheiden, wie wir den Preis für unsere App festlegen, aber sobald wir das getan haben, ist Stripe das Tool, mit dem wir diese Zahlungen abwickeln werden. Resend ist ein Tool zum Versenden von E-Mails. Sowohl für Benachrichtigungen als auch für Anmelde-E-Mails werden wir Resend verwenden, um sie zu versenden. So ziemlich alles ist zunächst kostenlos Sie haben natürlich alle kostenpflichtige Tarife, und Dinge wie Stripe, Stripe berechnet nur den Prozentsatz der Transaktionen, sodass Sie sich keine Gedanken über andere Zahlungen von ihnen machen müssen keine Gedanken über andere Zahlungen von ihnen Nochmals, alle anderen, entweder ist es kostenlos oder kostenlos. Dies sind einige optionale. AW steht für Speicher. Wenn Sie Benutzerbilder oder Uploads von Belegen speichern möchten, werde ich das in meinem Fall mit AWS tun Nochmals, für MVP, ich lasse das wahrscheinlich weg. Google Analytics eignet sich gut, um Besucher - und Benutzerdaten im Auge zu behalten Ein weiteres gutes Analysetool ist PostHG, mit dem Sie sogar mehr Informationen wie Heatmaps abrufen können und wie Nutzer interagieren und was sie sich ansehen , wenn sie mit Ihrer App interagieren Sehr gut zum Debuggen und für solche Dinge , um herauszufinden, wo Probleme liegen Also auf jeden Fall ein guter und nützlicher. Aber auch hier ersetzt die optionale Super-Base-Zensur off und die Datenbank, sodass Sie Next JS und Mongo DB nicht benötigen Wenn Sie Super Base verwenden und ich glaube, sogar für einige E-Mails E-Mails anmelden, Sie es wahrscheinlich auch nicht benötigen Ich werde ein paar Sachen ersetzen. Aber auch hier habe ich es nicht wirklich benutzt, weil ich nicht wirklich so viel Bedarf sehe, wir haben schon einen Stack, finde es heraus. Wenn du gerade lernst und es ausprobieren willst, ist das auch keine schlechte Option, soweit ich weiß. Das ist der Stack, den wir verwenden werden. Wir fangen jetzt an, indem wir in den Cursor springen. Vorher werden wir unser Projekt im nächsten Video tatsächlich einrichten und dann zurückkehren, um daran zu arbeiten. 10. Einrichtung unseres Projekts: Ordnung. Bevor Sie beginnen, möchten Sie NoJS installieren Gehen Sie zu nojs.org und klicken Sie auf Genjs. Sie benötigen dies, um tatsächlich eine neue App mit dem von uns besprochenen Stack erstellen zu können eine neue App mit dem von uns besprochenen Stack Auch hier gilt: Wenn du diesem Stack nicht folgen willst und du bereits deinen eigenen hast oder du schon kein JS herausgefunden hast, musst du dem natürlich nicht folgen. Dies ist der Fall, wenn Sie dies gerade zum ersten Mal tun und noch nie eine NoJS-App erstellt Sobald Sie fertig sind, möchten Sie das Terminal öffnen. also von Ihrem Computer oder Ihrem Anwendungsordner Suchen Sie also von Ihrem Computer oder Ihrem Anwendungsordner aus nach der App Terminal. Es sieht ungefähr so aus, und dann können Sie tatsächlich einen Ordner auf Ihrem Desktop oder wo auch immer Sie bereits Code oder andere Projekte für sich behalten , erstellen. Wenn Sie einen Ordner haben, navigieren Sie am besten zu diesem Ordner. Ich habe bereits einen Ordner namens Code. Ich werde einfach CD-Code wie diesen machen. Da haben wir's. Ich bin im Code-Ordner. Wenn Sie einen Ordner für sich selbst haben, tun Sie das natürlich dort. Das musst du nicht. Das ist einfach mehr für die Organisation. Dann willst du NPX schreiben, Next App erstellen, drückst die Eingabetaste und es wird dich fragen, wie das Projekt heißt Im Moment rufe ich diese Trips-App auf und drücke dort die Eingabetaste Ich werde die Einstellungen tatsächlich anpassen, also werde ich meine eigenen Einstellungen wählen, gehen Sie einfach hier runter. Ich werde TypeScript nicht verwenden, ich werde Yes Int verwenden, diesem auf Nein klicken, bei jenem auf Ja Den Rest werde ich standardmäßig beibehalten. Ja, nein. Da haben wir's jetzt, es wird installiert. Nochmals, so richte ich Projekte ein, Sie müssen dem nicht folgen, aber so würde ich es machen. Es läuft gerade und erstellt dieses Projekt. Jetzt habe ich in diesem Ordner diese Reisekosten-App und sie hat alle Dateien erstellt. Was ich jetzt tun möchte, ist diesen Ordner tatsächlich in Cursor zu öffnen . Ich habe Cursor bereits installiert. Wenn Sie es nicht installiert haben, machen Sie weiter und tun Sie das. Sobald ich den Cursor öffne, sehe ich, dass ich diese Schnittstelle hier bekomme. Ich habe gerne die Seitenleiste hier drüben, die primäre Seitenleiste. Sie können auch Befehl B ausführen und jetzt können Sie alle Ordner hier sehen , was perfekt ist. Sie können sogar weitermachen und dieses Projekt ausführen. Ich öffne ein neues Terminal indem ich in der Statusleiste oder in der Menüleiste auf Terminal und dann Statusleiste oder in der Menüleiste auf Neues Terminal klicke. Wenn Sie hier NPM run Dev So ausführen, wird das Projekt tatsächlich ausgeführt und es wird in einem neuen Browser geöffnet So wie das. Wenn Sie das haben, bedeutet das, dass Sie eine No-JS-App erstellt haben und sie einwandfrei funktioniert. Dies wird als Grundlage für den Code oder das Projekt dienen , das wir verwenden werden Lassen Sie uns in der nächsten Vorlesung darauf zurückkommen, um dies auf GitHub oder das Code-Repository zu übertragen dies auf GitHub oder das Code-Repository zu 11. Verwenden von Git: Ordnung. Wir wollen unseren Code , den wir gerade erstellt haben, obwohl er momentan eine Basis ist, auf Git Hub ablegen obwohl er momentan eine Basis ist , sodass der Code dort gespeichert wird. Auf diese Weise können wir unseren Code, wenn wir ihn aktualisieren , dorthin übertragen, sodass er mit allen Änderungen gespeichert wird. Später, wenn wir den Versal verbinden, der, Sie sich erinnern, die Hosting-Plattform ist, nimmt er automatisch den neuesten Code von GitHub und stellt ihn für Benutzer oder online auf Ihrer Domain bereit Benutzer oder online auf , sodass Benutzer Ihr Produkt problemlos verwenden können Ähm, es ist super einfach, Git über Inside of Cursor einzurichten Git über Inside of Cursor Natürlich können Sie das über github.com tun und dort anmelden. Erstellen Sie also ein Konto, falls Sie noch keines haben Aber wenn du hier drüben einfach auf den Tab Git im Wesentlichen gehst , kannst du deinen ersten, du weißt schon, Commit erstellen Ich werde einfach ein erstes Commit wie diesem machen und diesen Branch veröffentlichen. Jetzt, gerade jetzt, sagt es mir, willst du das zu einem öffentlichen Repository machen? Das heißt, jeder auf GitHub kann meinen oder einen privaten Code sehen ? den meisten Fällen möchtest du ein privates Repository erstellen es sei denn, du machst ein Open-Source-Projekt. Aber andernfalls wählst du privat und es wird sofort dort veröffentlicht. Dann kannst du es sogar auf GitHub öffnen. Wenn du auf GitHub auf Öffnen klickst, wird in meinem GitHub-Konto diese Reisekosten-App als privates Repository mit dem gesamten Code hier erstellt diese Reisekosten-App als . Äh, und wenn du jetzt, nur als Beispiel, irgendwelche Änderungen am Code vornimmst, gehe ich zu Page Dot JS, das ist, du weißt schon, der Startbildschirm, den wir gesehen haben. Zuallererst werde ich sicherstellen , dass die App läuft. Also dieser Startbildschirm, sagen wir, ich möchte nur den Text hier aktualisieren, um loszulegen, ähm, du weißt schon, und das in Reisekosten ändern. Er klickt auf Automatisch speichern, das aktualisiert das übrigens. Jetzt haben wir das. Dann können wir sehen, ob du zum Git-Tab gehst , wir können sehen, dass es Änderungen im Seitenpunkt JS gibt, und wir können sehen, ob du genau darauf klickst, was sich geändert hat, diese Zeile ändert sich zu dieser, was richtig ist, und dann können wir diesen Commit-Text tatsächlich ändern. Also klicken wir auf Commit und synchronisieren dann diese Änderungen. Diese Änderung ist jetzt auch auf GitHub verfügbar . Wenn du Wenn ich dieses Git Hub-Repo öffne wieder auf „ Wenn ich dieses Git Hub-Repo öffne“ gehst, kannst du sehen, dass gerade ein Commit stattgefunden hat und ich kann alle Commits hier sehen Das macht es einfach, den Überblick über alle Änderungen zu behalten , die Sie im Laufe der Zeit an Ihrem Code vorgenommen haben . Falls Sie irgendwo einen Fehler gemacht haben, können Sie jederzeit zu einem dieser Commits zurückkehren Aus diesem Grund verwenden wir Git während des gesamten Projekts, während ich es Sie werden sehen, dass ich es zwischen jeder Funktion, Implementierung oder jedem Bildschirm mehrmals verwende jeder Funktion, Implementierung oder , damit ich den Fortschritt verfolgen kann, falls es erneut Probleme gibt Ich kann zum vorherigen Commit zurückkehren oder zurückkehren. 12. Auswählen des Cursormodells: Ich wollte kurz auf die Unterschiede zwischen den verschiedenen Modellen und Agentenmodi eingehen und darauf, wie ich sie verwende. die Modi angeht, gibt es den Agentenmodus , den wir verwendet haben, um Aufgaben zu übertragen, die Cursor für uns erledigen muss. Aber wir haben auch den Planmodus. Bevor der Agent tatsächlich Maßnahmen zur Änderung des Codes ergreift, bitten wir Sie, die Dinge zu planen und uns mitzuteilen, was er tun wird und wie er etwas implementieren würde, damit wir ein Dokument überprüfen können, bevor es tatsächlich implementiert wird. Es gibt auch einen Debug-Modus, dem Sie gezielt Fehler beheben können, und auch Fragen-Modus, wenn Sie nur Fragen zu Ihrem Code oder der aktuellen Funktionsweise Ihrer App stellen möchten . den Modellen kannst du sogar Auto ausschalten, wenn du nicht möchtest, und du kannst Max-Modus einschalten, wenn du die maximale Anzahl an Tokens haben möchtest, die für diese Aufgabe verwendet werden Composer ist ein Cursor-eigenes Modell, das ziemlich gut funktioniert. Ich habe das oft versucht. Ops ist auch großartig, einschließlich Sont. Normalerweise arbeite ich nicht mit den GPT-Modellen, aber sie sind auch hier erhältlich. Mein persönlicher Favorit ist auch Sonnet oder Ops Composer. Denken Sie jedoch daran, dass dies nicht erforderlich ist, es sei denn, Sie stellen eine komplexere oder kompliziertere Aufgabe , mit der der Automde normalerweise zu kämpfen hätte Sobald Sie Cursor eine etwas kompliziertere oder kompliziertere Aufgabe stellen müssen , würde ich diese Modelle verwenden, wobei ich bedenke, dass es natürlich mehr Tokens und Credits kostet, sie zu benutzen 13. Startseite hinzufügen: Natürlich gibt es mehrere Dinge, die Sie von hier aus tun können. Richten Sie entweder die API-Routen für das Backend ein, Sie können die Datenbank erstellen und MongoDB einrichten Sie können die Benutzeroberfläche und die Designs einrichten. Was ich persönlich gerne mache, ist, zuerst die Designs einzurichten und dann auf die Funktionalität der App einzugehen. Einer der größten Fehler, den ich beim Vibe-Codieren sehe , ist, der App alles auf einmal zu geben der App alles auf einmal zu Sobald Sie das getan haben, verlieren Sie technisch gesehen die Kontrolle über alles und müssen dann zurückgehen und der App sagen, dass sie überall Änderungen vornehmen soll Aber wenn Sie den gesamten Vibe-Coding-Aspekt kontrollieren, dem Sie nur eine Aufgabe geben, bei dem Sie nur eine Aufgabe geben, eine Sache nach der anderen, können wir das nicht nur kontrollieren und einschränken, weil wir auf jeder Seite sehen können , was es tut, sondern es ist auch besser, weil es besser organisiert ist und die Wahrscheinlichkeit, dass Fehler auftreten, geringer ist. Obwohl ich mir ziemlich sicher bin, dass es immer noch Fehler geben wird, oh, ich werde mit der Benutzeroberfläche beginnen. Ich fange mit der Homepage an. Hier, zurück in den Designs, haben wir die Authentifizierungsseiten, und ich bin mir sicher, dass Sie auch Authentifizierungsseiten für sich selbst benötigen. Aber meine Hauptseite ist eine Dashboard-Seite, und wenn Sie eine Dashboard-Seite oder Homepage wie diese haben, können Sie immer mit dieser beginnen , und genau dazu ermutige ich Sie. Ähm, und wir werden den sogenannten Figma-MCP-Server verwenden , der im Wesentlichen eine Verbindung zwischen Figma und Cursor herstellt , um das tun zu können oder das einfach zu tun, sodass wir einen Link von Figma kopieren, in Cursor einfügen können, und wir nehmen tatsächlich alle Eigenschaften vom Bildschirm, nicht nur Screenshots, und implementieren ein sehr nahes und wir nehmen tatsächlich alle Eigenschaften vom Bildschirm, nicht nur Screenshots, , saubere Version dieses Designs oder der Benutzeroberfläche Äh, um das zu tun, brauchst du Figma Pro, du brauchst das Konto auf professioneller Ebene und dann wirst du hier in den Dev-Modus wechseln. Hier drüben können Sie das MCP auf diesem Panel sehen. Wenn Sie es nicht sehen, ist MCP möglicherweise deaktiviert. Wenn MCP deaktiviert ist, wird dieser aktivierte Desktop-MCP-Server angezeigt . Du wirst darauf treffen Dann aktivierst du MCP für diese URL und kopierst sie Sobald Sie das wieder in Cursor kopiert andere Tools verwenden, haben diese für die meisten auch MCP Recherchieren Sie ein wenig über Ihr Tool und wie Sie MCP einrichten Für Cursor gehen Sie zu Einstellungen, Sie gehen zu Tools und MCP und dann klicken Sie auf einen neuen MCP-Server, und dann ersetzen Sie diese URL durch die URL , die Sie von FICMA erhalten haben Ich habe es bereits eingerichtet, also werde ich das nicht tun, aber stellen Sie sicher, dass Sie danach auf Speichern klicken Wenn Sie es dann richtig gemacht haben, sollten Sie FICMA die Anzahl der aktivierten Tools sehen FICMA die Anzahl der und es ist hier aktiviert. Stellen Sie das sicher, bevor Sie fortfahren. Auf diese Weise können Sie einfach auf die gewünschte Seite klicken. Ich möchte die Dashboard-Seite. Kopieren Sie diese Aufforderung hierher, obwohl wir einige Änderungen daran vornehmen und sie dann wieder in den neuen Chat hier in Cursor bringen werden. Fügen Sie es ein. Ich werde dafür nur ein Automodell verwenden. Aber natürlich gibt es auch andere Modelle , die Sie verwenden können, und wir werden ein wenig über die Modelle und deren Auswahl sprechen später ein wenig über die Modelle und deren Auswahl sprechen. Aber vorerst sollte ein Automode ausreichen. Wir werden darunter ein paar Notizen schreiben. Wir werden sicherstellen, aus jeder Karte eine Komponente wird. Und stellen Sie sicher, dass Navbar in eine Komponente umgewandelt wird. Was ich Cursor anweise, ist, die Navbar und diese Karten zu nehmen und sie zu Komponenten zu machen , damit wir später leicht Änderungen daran vornehmen können und unser Code sauberer ist Wir werden das einfach tun, drücken Sie die Eingabetaste. Ich werde damit anfangen. Nun, wenn Sie MTP richtig laufen lassen, sollten Sie innerhalb einer Minute sehen, wie es Sie nach einigen Berechtigungen fragt . Da hast du's. Da siehst du, es läuft Get Design Context Figma. Sie können die Screenshots sehen. Auch hier werden Sie möglicherweise nach einigen Berechtigungen gefragt , wenn Sie dies noch nicht ausgeführt haben. Wir geben dem eine Minute. In der Zwischenzeit gehe ich zurück zur Homepage und schaue nach, welche Änderungen dort vorgenommen werden, oder am eigentlichen Dateibrowser, sollte ich sagen. Jetzt wird mit der Erstellung der einzelnen Komponenten begonnen Es erstellt eine NAVR-Komponente, Tripcard-Komponente und aktualisiert die Seite mit NAVR und der Verwendung von Reisekarten Auch hier konzentrieren wir uns zunächst auf das Design gehen dann auf die eigentliche Feature-Implementierung, Datenbank und Funktionalität der eigentlichen Reiseerstellung und Es ist alles erledigt. Es gab uns eine Zusammenfassung von allem, was es mit diesen Komponenten gemacht hat und es hat die Seite aktualisiert, dass JS. Wir behalten alle Änderungen bei und kehren zu unserem Browser zurück, auf dem diese App ausgeführt wird. Da haben wir es. Das ist das Design, es wurde von Figma kopiert. Das ist ziemlich anständig Offensichtlich hat es Probleme wie diese Icons, die zu weit gedehnt sind, aber es kommt dem, was wir uns irgendwann wünschen, sehr nahe. Ich werde noch eine Sache machen und ich werde ChadSN installieren lassen , um in Zukunft Komponenten von dort zu verwenden in Zukunft Komponenten von dort Da ich die ShaTSN-Bibliothek verwende, möchte ich sicherstellen, dass sie Zugriff auf die Shad CN-Komponenten hat die Es sollte weitermachen und das installieren und es wird nach der Shad CNUI suchen und sie installieren und hoffentlich einige Aktualisierungen vornehmen, sodass diese Schaltflächen tatsächlich von Shad CN stammen und nicht von benutzerdefinierten codierten Ich lasse es das machen. Du kannst das Gleiche tun, und dann kommen wir in der nächsten Vorlesung zurück, um das aufzupolieren und zu unserer Reiseseite überzugehen. 14. Designverbesserungen: Ich habe hier ein paar Dinge getan, um das Design ein bisschen besser zu machen das Design ein bisschen besser Ich zeige es dir einfach hier. Ich habe die Probleme mit der Ellipse und dem Text darin behoben , der nicht da war, und diesem SVG, das für das Flugzeug gestreckt wurde Um das zu tun, habe ich ein paar Eingabeaufforderungen geschrieben. Ich werde sie ganz schnell durchgehen, denn auch hier möchte ich nicht zu viel Wert auf die Bauphase oder diesen Teil des Gebäudes legen , sondern einfach schnell sagen, welche Art von sondern einfach schnell sagen Eingabeaufforderungen ich der KI gegeben habe Ich habe dafür gesorgt, dass die Textellipse dadurch größer wird. Aber lassen Sie mich vorher mit dem beginnen, was ich ursprünglich getan Ich habe es zunächst zwei Korrekturen vorgenommen. Ich sagte: Stellen Sie sicher, dass sich um die Ellipse im Inneren eine Textebene befindet, und wiederholen Sie die Städtenamen genau wie im Figma-Design Sie möchten auf das Figma-Design zurückgreifen, das Sie ihm gegeben haben, und das schlichte Logo ist gequetscht. Können Sie sicherstellen, dass das Seitenverhältnis erhalten bleibt ? Das hat keinen guten Job gemacht. Dann habe ich Figma durchgesehen, diese einfache Ebene ausgewählt und sie dann als SVG exportiert Als SBG hier. Sobald Sie das exportiert haben, stellen Sie sicher, dass Sie es in den öffentlichen Ordner einfügen Wenn Sie in Ihre Ordner gehen , in denen sich Ihre Datei oder Ihr Projekt befindet , stellen Sie sicher, dass Sie jedes beliebige Symbol in diesen öffentlichen Ordner einfügen , da die Symbole dort gespeichert werden sollten. Sie können hier sogar Ordner erstellen , und das ist eine bewährte Methode. Wenn Sie einen Ordner mit Symbolen erstellen und dann alle Ihre Symbole dort speichern möchten. Ich werde es einfach halten und einfach alles hineinlegen. Also habe ich einen anständigen Job gemacht. Der Text war etwas zu klein im Vergleich zu der Ellipse, die bereits da war , dem Kreis Ich habe darauf geachtet, dass es die richtige Größe hat. Ich habe es nur gebeten, es so zu gestalten , dass es dem gleichen Weg folgt. Einer war eher rund als oval, also habe ich dafür gesorgt, dass zusammenpasst, und er hat das hervorragend hinbekommen und ich habe ihm gesagt, dass er das SPG für das Flugzeug verwendet Ähm, und nochmal, ein paar kleine Änderungen machen die Texte ein bisschen größer Wenn Sie also irgendwelche Anpassungen vornehmen müssen, sagen Sie es einfach etwas kleiner oder größer, drehen Sie das Flugzeug SPG, weil es in die falsche Richtung gerichtet war Stellen Sie also sicher, dass Sie es um 90 Grad drehen usw. Auch hier war der Datumsstempel aus. Also du kannst in den Designs hier sehen, es sieht ziemlich gut aus. Aber anfangs in der App war das nicht der Fall. Aber dann habe ich es gebeten, dafür zu sorgen, dass es in der Mitte steht. Jetzt sieht es also ziemlich gut aus. Nochmals, einige Mikroanpassungen, den Text nach unten bringen, eins oder fünf versuchen , einige Änderungen vornehmen. Du hast mir gesagt, das ist der Abstand von 110 Pixeln statt 100, ich sagte, versuche es mit eins oder fünf, weil das zu viel war Geben Sie konkrete Zahlen an, wenn Sie können. Als Nächstes werden wir zurückkommen und an der Reiseseite arbeiten. 15. Seite Reisen: Bevor ich fortfahre, werde ich sicherstellen, dass ich aktualisiertes Design für die Reisekarte schreibe und diese Änderung festschreibe. Auch hier gilt: Zwischen den Änderungen, die Sie vornehmen, möchten Sie ab und zu zu Github , damit Sie den Überblick über alles und alle Änderungen behalten können , die Sie vorgenommen haben. Nur für den Fall, dass Sie ein Rollback durchführen müssen, ist es auch viel einfacher. Auf unsere nächste Seite, die für mich die Reiseseite ist, glaube ich, diese hier. Dies ist die aktualisierte. Ich werde in den Dev-Modus wechseln , den MCP-Link kopieren und minimieren hier sicher, dass alles, was Sie auswählen, an Figma geht Stellen Sie sicher, dass Cursor. Stellen Sie sicher, dass Sie in Figma den gesamten Rahmen auswählen also sicher, dass Sie zwischen Ihren Änderungen, die Sie vornehmen , hier einen neuen Chat in Ihrem KI-Chat-Bereich erstellen , sodass er nicht zu viel Guthaben verbraucht oder dass Sie einen Chat nicht zu lang machen, was sowohl für die Änderungen als auch für die Kreditbasis ineffizient sein könnte Änderungen als auch für die Kreditbasis Sie möchten sicherstellen, dass Sie einen neuen Chat erstellen, auf Command oder Control unter Windows drücken, und dann füge ich den Link von Figma für diese Reiseseite und gebe ihm einige Informationen. Ich sage, füge eine neue Reiseseite hinzu. Basierend auf den folgenden Designs navigiert der Benutzer zu dieser Seite, indem er auf der Startseite auf die Reisekarte Lassen Sie mich noch einmal einen Blick auf die Designs werfen und sehen, ob es noch etwas anderes gibt Auch hier werde ich es so einrichten, dass sowohl Karten in Komponenten als auch Spesenkarten in Komponenten umgewandelt werden. Der Rest sieht gut aus. Eine weitere Sache, die ich tun möchte, ist sicherzustellen , dass es heruntergeladen wird, damit die Symbole heruntergeladen werden. Manchmal funktioniert das jedoch nicht, wir müssen die Symbole und Bilder möglicherweise manuell in unser Projekt exportieren die Symbole und Bilder möglicherweise manuell in unser Projekt Aber lassen Sie uns auf den ersten Blick sehen, wie das funktioniert. Ich mache eine Pause und komme zurück, wenn es fertig ist. Ordnung. Alles ist erledigt und ich erhalte eine Zusammenfassung von allem, was es getan hat, einschließlich der Ausgabenkarte für die Kontoausgabenkomponente und der Reiseseite sowie der Routen. Die Routen sind die Art und Weise, wie die Leute in Ihrer NextGS-App navigieren , und so hat sie das alles erledigt Jetzt können wir es versuchen und haben sogar den Link hier erstellt. Trips Slug ist im Grunde die ID für diese Reise. Es schafft sogar einen Teil der Grundlage für unser späteres Backend, was unglaublich ist Bisher hatten wir noch kein Backend oder keine Serverintegration. Aber wir werden es bald tun und das wird sehr hilfreich sein. Dabei wurde das Design für die Reisekarten ein wenig durcheinander gebracht Design für die Reisekarten Wir werden das in nur einer Sekunde beheben. Aber mal sehen, ob wir auf einen klicken. Wir haben einen Fehler. Das kommt sehr häufig vor, wenn Sie mit KI arbeiten. Wenn Sie einen Fehler wie diesen erhalten, kopieren Sie einfach die Fehlerinformationen hierher geben Sie sie zurück an Ihren Codierungsagenten. Lassen Sie ihn sich diesen Fehler ansehen und beheben Sie ihn. den meisten Fällen ist es entweder ein logischer Fehler oder es wurde vergessen, eine Variable oder etwas Ähnliches zu definieren, wo sie normalerweise klein ist und sofort behoben wird. Gib ihm etwas Zeit. Und währenddessen können wir hier hin und da gehen wir hin. Es ist repariert und sieht toll aus, um ehrlich zu sein. Es ist auf Anhieb, es ist so nah wie möglich an den Figma-Designs Auch das ist das Schöne an MCP. hätte ich dafür mindestens ein Vorher hätte ich dafür mindestens ein paar Tage Aber jetzt haben wir das alles. Natürlich hat es nichts getan, was Sie ihm nicht gesagt haben, dass das Hinzufügen von Kosten noch nicht funktioniert. Alle Reisen funktionieren, geht zurück zu allen Reisen. Freunde einladen macht noch nichts, genau wie diese drei Punkte hier. Und du kannst sehen, dass es zwei verschiedene Versionen erstellt hat. Es gibt diese Version hier für Tokio. Aber wenn ich zurückgehe, gibt es auch diese Version für Bali, sie sehen anders aus. Das sind noch keine Knöpfe, also müssen wir natürlich einige Dinge reparieren. Ich werde mir diese Dinge notieren und Sie sollten es auch tun. Notieren Sie sich beim Zusammenstellen der einzelnen Seiten, was falsch ist. Ich werde mir notieren, dass der Button hier repariert werden muss Notieren Sie sich die zusätzlichen Kosten, aber auch für diese werde ich eine neue Aufforderung dafür erstellen eine neue Aufforderung dafür Ähm, der Rest sieht okay aus, aber natürlich gibt es Probleme wie diese Ausrichtungsprobleme. Sie sehen, dieser hier ist auf Align. Kleine Dinge wie diese, notieren Sie das und geben Sie es an die KI zurück. Hier hinter dem Pfeil gibt es keinen Gradienten , wie ich ihn in meinen Entwürfen habe. Es sind wirklich kleine subtile Dinge. Ich werde diese Korrekturen vornehmen, weil sie kleiner sind, und dann zurückkommen und mit dem Rest weitermachen, was zusätzliche Kosten verursachen wird. Dann werde ich auch daran arbeiten, eine neue Reise zu erstellen. Das sind zwei Dinge, an denen ich als Nächstes arbeiten werde. Ähm, und nochmal, für deine App, folge mir. Aber wenn du genau das Gleiche machst, weißt du, du kannst genau mitmachen. 16. Weiterleitung zum Dashboard: Ordnung. Mein Cursor nimmt jetzt kleine Änderungen vor, wie den Gradienten hier drüben, von dem ich gesprochen habe. Nun, eine Sache, die ich sagen möchte ist eine kleine Änderung, die ich vornehmen möchte , und sicherstellen möchte, dass Sie in Ihrem Projekt das Projekt in Ihrem App-Ordner vornehmen , dass Sie in Ihrem Projekt das Projekt in Ihrem App-Ordner Ihr Seitenpunkt JS ist zunächst die ursprüngliche Seite, die angezeigt wird. In unserem Fall ist es im Moment also nur ein lokaler Host, 3.000. Es gibt keine Seite mit Schrägstrich, Summe. Wenn du hier drüben bist, hiplah Bali, dann schaust du dir im Grunde in diesem App-Ordner die Reiseseite an in diesem App-Ordner die Dort hast du diese Reise-ID. Wir möchten unsere Seite jetzt auch hierher verschieben , diese hier her. Wenn Sie eine Dashboard-Seite wie diese haben, die ich habe, möchten Sie nicht, dass das Ihr Seitenpunkt-JS ist , weil das eigentlich für Ihre Landingpage gedacht ist. Wenn Leute auf Ihrer Website landen, der Marketing-Seite, der ersten Seite, die angezeigt wird, zum Beispiel hier für die aktuelle Version von QClip ist es diese Seite, dann habe ich eine Dashboard-Seite Das Slash-Dashboard ist eigentlich die Dashboard-Seite. Eine kleine Änderung, ich werde sie haben und ich werde das in einem neuen Chat machen Stellen Sie sicher, dass die aktuelle Seite JS zu einer Dashboard-Seite wird. Und ändern Sie den Seitenpunkt JS , dass er nur einen Platzhaltertext für unsere Landingpage enthält Wir wollen jetzt nicht, dass daraus eine Landingpage wird. Das werden wir gleich machen. Aber vorerst möchte ich nur sicherstellen, dass diese Seite zu einer Dashboard-Seite wird , damit später keine Verwirrung entsteht. Stellen Sie sicher, dass Sie auch so etwas tun, wenn Sie nicht getan haben, da es eine Änderung bewirkt, wenn wir hierher zurückkehren, die Landingpage bald kommt und wenn Sie dann zum Slash-Dashboard gehen, los geht's Wir haben hier eine Dashboard-Seite. Der Einfachheit halber würde ich sagen, füge eine Schaltfläche auf der Landingpage hinzu, die mich zum Dashboard führt. So landen wir jedes Mal, wenn wir das Projekt starten , standardmäßig auf der Landingpage, die sich gerade hier befindet. Wir wollen nur einen Button haben. Auch dies ist vorübergehend, nur damit wir schnell zu dieser Seite gelangen können. Deshalb werde ich weiterhin kleine Änderungen vornehmen , hauptsächlich am Design und an der Funktionalität wie diese hier für die Designseite. Sobald die Dinge fertig sind, werden wir weitermachen oder ich werde mit dem Hinzufügen von Ausgaben und dem Hinzufügen eines Reiseplans fortfahren . Eine weitere Sache, die ich tun werde , ist, ähm, du weißt schon, die Links für alle Buttons, die zuvor mit Page JS verknüpft waren, so zu ändern, dass sie zu Porta JS auf der Trips-Seite führen. Ich möchte nur sichergehen, dass auch dieser Link hier geändert wird. Alle Reisen sollten zurück zum Dashboard und nicht zur Startseite oder erneut zur Landingpage gehen. Stellen Sie sicher, dass Sie diese Änderung vornehmen. Nur etwas Subtiles zu beachten. 17. Ausgaben hinzufügen: Ordnung, die Dinge beginnen gut und viel sauberer auszusehen , also werde ich weitermachen und die Änderungen übernehmen. Seite „Karten ändern und Reisen hinzufügen“. Ich werde diese Änderungen jetzt synchronisieren und gehe zurück Ich möchte meinen Ablauf zum Hinzufügen von Ausgaben hinzufügen. Ich habe es hier schon entworfen, weil ich mir gedacht habe, warum es nicht einfacher ist, es an Cursor zu übergeben. Hier doppelklicke ich, um diese Karte auszuwählen, die im Grunde genommen zusätzliche Kosten verursacht, und gehe diese Karte auszuwählen, die im Grunde genommen zusätzliche Kosten verursacht, und dann zu MCP, um den Link oder den Dev-Modus wieder hier in Cursor zu kopieren den Link oder den Dev-Modus wieder hier in Cursor Ich werde einen neuen Chat erstellen, diesen einfügen und sagen, füge eine Karte hinzu, damit Benutzer Ausgaben hinzufügen können, sobald sie auf Ausgaben hinzufügen klicken Aber auf der Reiseseite solltest du so spezifisch sein und ein Beispiel geben, wo es sich befindet, obwohl wir es wahrscheinlich auch herausfinden werden, aber das macht es ein bisschen einfacher. Stellen Sie sicher, dass dieser Blog eingeblendet ist. Wenn der Benutzer auf Abbrechen klickt, schließen Sie ihn. Wenn in den Eingabefeldern Änderungen vorgenommen oder Zahlen hinzugefügt wurden, zeigen Sie zuerst eine Warnung an brechen Sie sie dann ab oder schließen Sie sie. In Ordnung. habe dort einige Anweisungen gegeben und die wichtigste war, wenn der Benutzer klickt, um diese Ausgabe zu stornieren, stellen Sie sicher, dass er tatsächlich dazu aufgefordert wird, das tatsächlich schließen möchte oder nicht? Auf diese Weise verlieren sie keine Daten. Nur ein sehr kurzer Überblick. Hier habe ich ein Betragsfeld, also gibt der Benutzer den Betrag Es sagt ihnen, wofür es war. Hier taucht die Kategorie hier auf. Oder der Name der Ausgabe. Dann teilt es sich so Normalerweise ist es standardmäßig gleich aufgeteilt, also für alle gleich Aber wenn sie wollen, können sie tatsächlich reingehen und die Zahlen ändern und sie werden dynamisch aktualisiert. Wenn sie auf prozentualer Basis arbeiten wollen, können sie das tun. Wenn sie von Dollar zu Dollar gehen, können sie das tun, oder, wenn sie wollen, von Tag zu Tag, können sie das auch tun. Wenn Sie sich dann daran erinnern, wird berechnet, wie viele Tage von der gesamten Reise entfernt sind. Hat diese Person in diesem Airbnb geschlafen, Hat diese Person in diesem Airbnb geschlafen berechnet also den richtigen Betrag und fügt dann die Kosten hinzu. Also ziemlich einfach und unkompliziert. Es wird damit beginnen und lassen Sie uns in einer Minute sehen , was es tut. In Ordnung. Es hat funktioniert und wir werden es mit Kosten sehen. Es ist also offensichtlich, dass es nicht auf die Figma-Designs zugegriffen hat. Ich kann es am Design erkennen, aber ich folge nicht genau, wie es aussehen sollte Ich werde es fragen, hast du dich genau an die FICMA-Designs gehalten und es danach gefragt Wir hatten keinen Zugriff und holen die Designs jetzt ab. Manchmal passiert das Es macht Fehler, es greift aus irgendeinem Grund nicht wirklich darauf Möglicherweise müssen Sie es erneut versuchen Nur eine freundliche Erinnerung: Möglicherweise müssen Sie das mehrmals tun , wenn es nicht beim ersten Mal passiert Mal sehen, was es dieses Mal macht. Diesmal hat es das Problem behoben. Tatsächlich gebe ich einige Zahlen ein. 20$ berechnet automatisch alles auf 30$, los geht's Sie können Personen daraus entfernen. Dies sind wahrscheinlich nicht die richtigen Staaten, also muss ich nur diese kleinen Dinge aktualisieren. Sie können dies auf Prozentbasis tun. Und das sieht auch nicht ganz richtig aus. Auch hier und da muss ich möglicherweise ein paar Änderungen vornehmen, um sicherzustellen, dass es aus Gründen der Einzelheiten aktualisiert wird Aber das Basisdesign ist anständig. Die Platzierung ist natürlich nicht richtig, aber zumindest fragt es uns, wir sie wirklich verwerfen wollen, auf Kosten, und dann können Sie jetzt nicht, es lässt Sie leere Ausgaben hinzufügen Solche kleinen Dinge müssen repariert werden. Aber wir werden diese Änderungen vornehmen und in der nächsten Vorlesung weitermachen und in der nächsten Vorlesung weitermachen 18. Authentifizierungsseiten: Ordnung, wir kommen zum Kern des Kurses, der Bauphase, und werden realistischer. Ich habe das Lichtsystem hinter mir geändert, um es an die Stimmung anzupassen. Aber im Grunde werden wir jetzt anfangen, an unserer Authentifizierung zu arbeiten Also werde ich das Projekt durchführen und noch einmal überprüfen, wo wir uns gerade befinden. Ich habe meine Dashboard-Seite eingerichtet. Offensichtlich handelt es sich dabei um Testdaten und nicht um echte Daten. Wir werden also dazu übergehen, echte Fahrten und echte Daten zu erstellen. Im Moment sind das alles nur Tests, aber ich habe eine funktionierende, erste Benutzeroberfläche in Betrieb. Natürlich müssen noch Verbesserungen vorgenommen werden, aber wir werden nicht auf die Details eingehen. Tatsächlich sollten Sie bei der Erstellung Ihres MVP dem Momentum Priorität einräumen und es schnell herausbringen , anstatt den kleinen Details. Als Designer gehe ich manchmal in das Kaninchenloch , gehe ich manchmal in das Kaninchenloch kleine Designdetails zu korrigieren, und bis zu einem gewissen Grad sind sie mit Sicherheit wichtig Ja, ich habe den Kostenfluss auch hier für mich selbst hinzugefügt Nochmals, nicht perfekt. Es müssen noch Optimierungen vorgenommen Aber ich denke, dies ist ein guter Zeitpunkt, um tatsächlich mit der Authentifizierung zu beginnen Mit anderen Worten, Benutzer können sich tatsächlich anmelden und ein Konto erstellen. Dafür werden wir zwei Tools verwenden. Wir werden ATJS verwenden , diese Bibliothek , mit der Sie Ihre Benutzer mit verschiedenen Anwendungen anmelden können , auch mit Github und Google, natürlich auch mit Github und Google, Twitter, Apple und E-Mail Auch hier werden wir MVP machen und vorerst nur bei E-Mails bleiben Aber um diese einzurichten, können Sie natürlich auch das durchgehen Sie benötigen nur ein bisschen mehr Zeit und ein bisschen mehr Einrichtung an sich. Sie können tatsächlich die Anweisungen für diese Geräte durchgehen , um beispielsweise Google einzurichten . Deshalb beginnen wir vorerst mit der einfachen E-Mail-Anmeldung, sodass die Nutzer ihre E-Mail-Adresse eingeben . Ich werde ihnen einen magischen Link schicken, um sich anzumelden. Und für diesen magischen Link müssen wir tatsächlich E-Mails senden. Um E-Mails zu versenden, verwenden wir dieses Tool namens Resend diesem erneuten Senden können Sie im Wesentlichen bis zu 3.000 E-Mails pro Monat kostenlos Das ist eine großartige Option. Machen Sie also weiter und beginnen Sie mit der Erstellung eines Kontos für Resend Ich werde das Gleiche hier machen. Ordnung. Sobald Sie angemeldet sind, können Sie einen API-Schlüssel für Ihre Konten erstellen . Fahren Sie fort und tun Sie das. Und stellen Sie sicher, dass Sie ihn kopieren. Was Sie jetzt tun möchten, ist, dass Sie in Ihrem Cursor oder wo auch immer Sie Ihre Dateien haben, zurückkehren Ihrem Cursor oder wo auch immer Sie Ihre Dateien haben und eine neue Datei erstellen, und Sie werden sie genau buchstabiert Punkt ENV Punkt Lokal nennen Punkt ENV Punkt Lokal Das ist also eine Umgebungsdatei, in all Ihre API-Schlüssel gespeichert werden, sodass diese API-Schlüssel verwendet werden können, um Ihre App beim erneuten Senden von E-Mails zu authentifizieren Dies ist eine sehr private Datei. Du möchtest das nicht auf GitHub posten oder veröffentlichen. Aus diesem Grund ist es automatisch in der Ignorier-Datei enthalten, wodurch das Hochladen dieser Datei ignoriert wird Diese Datei definiert tatsächlich, was auf GitHub übertragen wird und was nicht, und Punkt ENV-Dateien nicht Diese sind geheim. Sie möchten es geheim halten und zwar auf Ihrem Computer. Ähm, für hier kannst du es wirklich eingeben, wie du willst, aber ich mache einfach Resend Underscore API underscore-key, equals, und füge dann deinen Wert equals, und füge dann Sobald Sie Ihren Wert eingefügt haben, klicken Sie auf Speichern Jetzt wollen wir auch Auth JS einrichten. Also werden wir, du weißt schon, Cursor sagen, dass er uns dabei helfen soll Aber zuerst werde ich das Design für unsere Authentifizierungsbildschirme kopieren . Also werde ich einfach diesen hier machen. Ich werde hier rüber gehen. Da haben wir's. Lassen Sie uns diesen Anmeldebildschirm von Figma implementieren. Lassen Sie uns zunächst das Design tatsächlich implementieren , bevor wir den Anmeldebildschirm integrieren Ich werde nur darauf achten, Shad CN-Elemente zu verwenden. Und diese Seite sollte Slash Login sein. Ich sage dir, welchen Namen du erstellen sollst, obwohl du ihn wahrscheinlich sowieso herausgefunden hättest, aber ich sage dir, dass du explizit eine Anmeldeseite unter unserer App erstellst eine Anmeldeseite unter unserer Wenn du zu deinem App.com-Slash-Login gehst, Leute und auf dieser Seite Damit werden wir anfangen. Wir werden in einer Sekunde wiederkommen, um zu sehen, wie es funktioniert. Gehen wir zu Slash Login. Und da haben wir's. Gar nicht schlecht, sehr nah an dem, was wir haben. Wir werden uns später hier um die Grafik kümmern , sobald wir unsere App gestartet haben. Aber das ist großartig. Es gibt wieder kleinere Probleme, die behoben werden müssen , wenn ich mit der Maus über die Schaltflächen fahre Diese Anmeldeschaltfläche zeigt nicht den richtigen Cursor Nochmals, für diese kleinen Dinge, einfach sicher, dass Sie es auf der Anmeldeschaltfläche wissen lassen, der richtige Linkcursortyp nicht angezeigt wird diese Weise möchten Sie Ihr Fix-Set klein und nacheinander angehen . Dann sehen wir, dass wir uns angemeldet haben. Wir haben noch keinen Anmeldebildschirm, also werde ich ihn auch bitten, diese Seite zu duplizieren und bei der Anmeldung mit Schrägstrich auch eine Anmeldeversion zu erstellen Ich stelle das in die Warteschlange. Als Nächstes wird es daran funktionieren. Und während das erledigt und abgeschlossen ist, kommen wir in der nächsten Vorlesung zurück, um mit unserem Authentifizierungs-Setup fortzufahren . 19. Datenbank: Ordnung, ich habe gerade eine Anmeldeseite und bevor wir unsere Authentifizierung wirklich zum Laufen bringen können , müssen wir eine Datenbank einrichten. In der Datenbank werden die Daten also gespeichert. Sobald ein Benutzer also seine E-Mail-Adresse das Passwort eingegeben hat und ein Konto erstellen möchte, und zwar immer dann, wenn wir Aktualisierungen für diesen wird hier in der Datenbank im Wesentlichen ein Kontodatensatz erstellt, Benutzer vornehmen müssen oder wir Reisen hinzufügen müssen oder wir müssen Ausgaben hinzufügen. All das muss getrennt sein. Sie können sie sich als Tabellen oder separate Kategorien von Dokumenten vorstellen separate Kategorien von Dokumenten , die wir mithilfe einer Datenbank benötigen. Für unsere Datenbank werden wir MongoDB verwenden. Natürlich gibt es auch andere Optionen wie Postgres und Neon und viele Wenn Sie bereits an einen gewöhnt sind, wählen Sie ihn aus. Wenn nicht, ist der Einstieg in Mongo DB einfach. Gehen Sie zu mongodb.com und legen Sie los. Ich habe bereits ein Konto, ich werde mich anmelden. Sobald Sie angemeldet sind, stellen Sie sicher , dass Sie ein neues Projekt erstellen. Ich werde meine Projektreise vorerst nur Expense App nennen . Auch das kannst du später ändern. Klicken Sie auf Weiter. Klicken Sie auf Projekt erstellen. Sobald Sie hier sind, möchten Sie weitermachen und einen Cluster erstellen. Cluster ist im Wesentlichen ein Container für Ihre Datenbank. Hier werden einige Optionen angezeigt. Ich werde die kostenlose Version wählen Anfang gut genug ist, und wenn Sie dann immer mehr Benutzer haben, möchten Sie vielleicht auf die anderen upgraden. Um für den Namen Cluster Null zu verwenden und diese dann mit den Standardeinstellungen zu belassen, erstellen Sie ein Deployment. Jetzt werden Sie hier sofort einen Benutzernamen und ein Passwort sehen. Sie werden weitermachen und auf Datenbankbenutzer erstellen klicken. Sie wählen eine Verbindungsmethode und ich wähle Compass. Compass ist also diese Anwendung, die auf Ihrem Computer läuft und Sie können die Daten im Wesentlichen verwalten sodass Sie sie sehen können. Sie müssen sich nicht jedes Mal in Ihrem Browser bei mongodb.com anmelden jedes Mal in Ihrem Browser bei mongodb.com Tatsächlich können Sie dafür einfach diese MongoDB Compass-App verwenden diese MongoDB Compass-App Mach weiter und lade es herunter. Nehmen Sie sich dafür eine Sekunde Zeit, wenn Sie es nicht haben. Ich habe es bereits, also klicke ich auf Ich habe Compass installiert. Dann bekommst du hier unten eine Schnur für deine Verbindung. Sie benötigen diese Zeichenfolge erneut , um sie in Ihrem Code zu haben. Stellen Sie sicher, dass Sie das kopieren. Treffer hier erledigt. Gehen Sie zurück zu Ihrem Code und innerhalb von Punkt Punkt Local, den wir erstellt haben, werden Sie eine neue Zeile erstellen, Mongo-Unterstrich URI entspricht, und dann die Zeichenfolge einfügen, die Sie von Mongo DB erhalten haben Klicken Sie auf Speichern und schließen Sie das. Sobald Sie sich in MongoDB Compass befinden, können Sie eine neue Verbindung hinzufügen und den URI einfügen, den Sie erhalten haben Ich werde hier den Namen in Trip Expense App ändern und dann speichern und eine Verbindung herstellen Also bin ich jetzt hier drin. Es gibt noch keine Daten, also gibt es hier nichts, was Sie sehen können. Wir werden noch eine Sache machen. Sie werden hier am Ende Ihrer Zeichenfolge zu Ihrem eigenen Local zurückkehren , wo der Schrägstrich mongodb.net steht, Sie werden Dev DEV schreiben ist nicht unbedingt wichtig, wie Sie es schreiben oder ob Sie Entwicklung oder ähnliches schreiben Das ist alles nur, um hier einen Ordner namens Dev oder einen Container zu erstellen . Sie können sich das vorstellen, der Ihre Dev- oder Testing-Datenbank im Grunde von Ihrer Produktions-Datenbank trennt . Sobald wir live gehen und andere Benutzer dies verwenden können, möchten Sie, dass das normalerweise in einem anderen Container in Ihrer Datenbank oder in Ihrem Cluster bleibt Ihrer Datenbank oder in , damit nicht alles durcheinander gerät. Dies dient eher der Organisation und bewährten Methoden. Sobald wir zur eigentlichen Produktion kommen, werden Sie sehen, wie das geht. Aber stellen Sie vorerst sicher, dass Sie den Schrägstrich Dev hinzufügen . Wir sind alle hier eingerichtet. Kommen wir jetzt in der nächsten Vorlesung zurück um tatsächlich mit der Benutzerauthentifizierung zu beginnen 20. Authentifizierung abschließen: Um zur Erstellung von Benutzern zu gelangen. Eine Sache, die ich beachten möchte , ist, dass wir gerade in meiner App diese E-Mail-Adresse und dieses Passwort haben. Ich werde mich dafür entscheiden, kein Passwort zu und es einfach zu halten, sodass die Benutzer einfach ihre E-Mail-Adresse eingeben und einen Link erhalten, über den sie sich ganz einfach bei der App anmelden können. Auf diese Weise ist es viel einfacher und sie müssen sich kein Passwort usw. merken. Natürlich können Sie sich dafür entscheiden , dies zu tun, wenn Sie möchten. Natürlich werden diese Schaltflächen wahrscheinlich zunächst nicht funktionieren . Später, wenn wir Zeit haben, können wir das jederzeit einrichten. Aber konzentrieren wir uns vorerst nur darauf, dass sich Benutzer per E-Mail anmelden. Um das zu tun, werde ich hier drüben und in einen neuen Chat gehen. Wir werden Next Auth installieren und die Authentifizierung implementieren, es funktioniert und auch ein Benutzermodell und die notwendigen Dateien für Mongo hinzufügen ein Benutzermodell und die notwendigen Dateien für Mongo Sie werden das schreiben und im Grunde sagen Sie Ihnen nur, dass Sie die nächste JS-Bibliothek installieren sollen, über die wir gesprochen haben, und dann wird es weitermachen und ein Benutzermodell erstellen Jedes Mal, wenn wir über so etwas wie ein Modell sprechen, bedeutet das im Grunde, die Parameter eines Benutzers zu definieren . Ein Benutzer hat beispielsweise eine E-Mail, hat ein Passwort, er hat einen Vornamen, er hat Reisen, die er erstellt hat, und Reisen sind solche, die im Wesentlichen mit einem anderen Modell verknüpft werden könnten. Sie möchten sich das als die Daten vorstellen, die sich auf den Benutzer beziehen, oder auch immer das andere Modell, das wir erstellen. Sobald wir mit der Erstellung des Reisemodells begonnen haben, benötigen wir auf ähnliche Weise Datumsfelder von welchem Tag bis zu welchem Tag. Ähm, wie viele Personen sind Teil dieser Reise, wer ist Teil dieser Reise? Welche Kosten fallen bei dieser Reise an. Wir können sehen, dass Cursor bereits einen für unseren Benutzer dot js zusammengestellt hat. So sieht es aus, oder? Wir haben den Namen, wir haben die E-Mail, wir haben das Passwort. Es hat das Passwort hinzugefügt, weil es in den Designs gesehen wurde, aber auch hier brauchen wir es nicht. Das sind Zeitstempel, die im Grunde nur zeigen, wann dieser Benutzer erstellt wurde Wann wurden sie zuletzt aktualisiert oder wann wurden ihre Daten zuletzt aktualisiert? Standardmäßig sollten sie da sein. Wir werden diese Akte behalten. Ich habe hier einen Fehler gemacht und vergessen, ihr mitzuteilen, dass sie das Passwort tatsächlich entfernen und erneut senden für den Versand von Bestätigungs-E-Mails verwenden soll das Passwort tatsächlich entfernen und erneut senden für den Versand von Bestätigungs-E-Mails verwenden Genau das mache ich gerade, indem ich ihm sage, dass er das Passwort aus der App und der Authentifizierung entfernen und stattdessen das E-Mail-Feld verwenden und zur Bestätigung erneut senden soll aus der App und der Authentifizierung entfernen und stattdessen das E-Mail-Feld verwenden und zur Bestätigung erneut senden Ich werde warten, bis es fertig ist, und dann zurückkommen. Damit Next Auth funktioniert , müssen Sie außerdem noch diesen geheimen Authentifizierungsschlüssel benötigen, um ihn in unsere eigene lokale Datei oder Umgebungsdatei integrieren oder hinzufügen zu können ihn in unsere eigene lokale Datei oder Umgebungsdatei integrieren oder hinzufügen zu unsere eigene lokale Datei oder Umgebungsdatei integrieren oder Kopieren Sie einfach dieses NpxOtSecret von hier drüben und führen Sie es dann Ich werde hier ein neues Terminal öffnen und das dann einfach ausführen Du machst das Gleiche. Dann werden Sie möglicherweise aufgefordert, ein neues Paket zu installieren Geben Sie einfach Y ein und drücken Sie die Eingabetaste für Ja. Ich werde dir einen gewissen Wert geben. Stellen Sie einfach sicher, dass Sie das kopieren und in Ihre eigene lokale Datei einfügen . Cursor hat sogar ein Beispiel für mich zusammengestellt , um zu sehen, welche Dinge ich benötige. Ich benötige das auch kürzlich per E-Mail. Stellen Sie sicher, dass Sie das hinzufügen. Zum Testen können Sie es einfach so lassen. Sobald wir eine Domain gekauft haben, wollen wir die echte Domain tatsächlich nutzen. werde meinen Server neu starten, indem ich Control C drücke und dann hier raufgehe, um NPM Run Dev auszuführen Ich verwende einfach die Aufwärtspfeiltaste, um zum letzten Befehl zurückzukehren , den ich dort geschrieben habe, drücke die Eingabetaste und öffne dann mein Projekt noch einmal Wir haben diese E-Mail. Willkommen zurück. Jetzt habe ich kein Konto, also werde ich mich anmelden. Stellen Sie sicher, dass Sie hier die E-Mail-Adresse angeben , mit der Sie sich zu Testzwecken bei Resend angemeldet haben . Da haben wir's. Wenn ich meine E-Mails checke, erhalte ich so etwas. Scheint, als hätten wir das nächste Geheimnis nicht korrekt eingefügt, so wie es in dieser Beispieldatei steht. Testen wir das noch einmal, klicken Sie, um sich anzumelden, und da haben wir es. Wir sind angemeldet. Wir haben jetzt tatsächlich einen Benutzer. Hier steht unsere E-Mail, wir können uns hier abmelden. Wenn ich zu unserem Mongo DB Compass und diese Reisekosten-App aktualisiere, können wir sehen, dass wir diesen Ordner jetzt Dev haben , weil wir den Schrägstrich Dev eingeben Wenn ich dann hierher gehe, haben wir Benutzer, und los geht's. Das ist mein Benutzer, also ist es dort aufgetaucht . Wir haben hier keinen Namen. Vielleicht können wir es auf der Anmeldeseite so einrichten , dass der Benutzer dort seinen Vornamen eingibt. Ursprünglich war es mein Design, ich dachte, ich mache eine separate Seite, aber es ist albern, hier nur ein Feld zu haben Ich werde einen neuen Chat erstellen und Cursor bitten, der Anmeldeseite über der E-Mail ein neues Namensfeld hinzuzufügen der Anmeldeseite über der E-Mail ein neues Namensfeld . Der Vorname des Benutzers wird auch in der DB-Abkürzung für Datenbank gespeichert Ich werde das laufen lassen und so ziemlich haben wir unsere Authentifizierung abgeschlossen Jetzt haben wir Benutzer, wir haben eine Datenbank und wir sind dem Ziel, diese App tatsächlich voll funktionsfähig zu machen, einen Schritt näher gekommen. Kommen wir als Nächstes zurück, um uns darauf konzentrieren, Benutzern das Erstellen von Reisen zu ermöglichen. 21. Fahrten erstellen: Ordnung. Ich glaube, ich bin bereit, der Erstellung einer neuen Reise hier mit der Erstellung einer neuen Reise zu beginnen, damit die Leute auf Neue Reise erstellen klicken können. Ich denke an MVP, Keep it simple, Schnellwarnmodell-Bildschirm, der angezeigt sie nach dem Namen der Reise und den Daten fragt . Die Daten wird und sie nach dem Namen der Reise und den Daten fragt. Die Daten sind optional, aber ich behalte das dort Und ich werde sicherstellen, dass die CN-Komponenten verwendet da sie bereits über Datumsauswahlmöglichkeiten verfügen, sodass Sie das nicht herausfinden müssen Im übrigen brauchen wir eigentlich nichts anderes vom Benutzer Also vielleicht werde ich einfach schnell eine Reise erstellen und den Einladungslink einfügen und kopieren. Sie machen das einfach und dann können sie es an jeden schicken, an dem sie an ihrer Reise teilnehmen möchten. Lass uns damit anfangen. Ich gehe zurück und erstelle hier einen neuen Chat und sage, ähm, lassen Sie uns das Hinzufügen einer Reise funktionstüchtig machen. Benutzer können eine neue Reise hinzufügen. Stellen Sie sicher, dass Sie es dem Benutzermodell hinzufügen. Stellen Sie sicher, dass Sie ein neues Reisemodell erstellen. Also nochmal, das Modell hier ist, wie wir den Überblick über verschiedene Arten von Daten behalten Eine Reise sollte ihre eigenen Daten vom Nutzer haben, und die Reise wird Dinge beinhalten wie, wie wir bereits erwähnt haben, den Namen der Reise, ähm, die Anzahl der Ausgaben oder die Ausgaben darunter, wer Teil dieser Reise ist, sodass wir den Benutzern tatsächlich die richtigen Reisen zeigen oder ihnen ermöglichen können, sie wer Teil dieser Reise ist, sodass wir den Benutzern tatsächlich die richtigen Reisen zeigen oder ihnen ermöglichen können zu sehen und so weiter und so weiter. Als Teil dieses Reisemodells, also schreibe ich einfach als Teil des Reisemodells, achten Sie darauf, den folgenden Namen hinzuzufügen: Besitzer, also wer diese Reise erstellt hat, Benutzer, die Teil davon sind. Später werden wir Ausgaben hinzufügen. Wir haben kein Ausgabenmodell, also lassen wir das einfach weg. Startdatum, Enddatum der Reisen. Wir brauchen nicht wirklich einen Ort, das wäre nur der Name. Was brauchen wir noch? Ich denke , das ist für den Anfang gut. Dann lassen wir es ein neues Modell mit Shad CN erstellen, den Komponenten, die auftauchen, wenn der Benutzer zuschlägt , erstellen eine neue Reise und fragt nur nach dem Namen, den Daten und den Startdaten Machen Sie Daten optional, aber der Name ist erforderlich, und geben Sie den primären CTA oder Call to Action ein, erstellen Sie eine Reise und kopieren Sie den Einladungslink mit einem sekundären CTA, um einfach eine Reise zu Wir werden das überprüfen, eine Sekunde warten und dann kommen wir zurück, um zu sehen, was es macht Es ist wichtig zu wissen, was im Hintergrund vor sich geht , wenn es dieses Ding macht und jenes hinzufügt. Ich möchte sichergehen , dass Sie verstehen was der KI-Agent im Hintergrund tut , denn auch hier halte ich es für wichtig, auch einige Hintergrundinformationen zu haben. Es macht ein paar Dinge. Es kreiert ein Modell für unsere Reise. Wenn wir hier weitermachen, sehen wir alle Daten, von denen wir ihr gesagt haben, dass wir sie haben wollen. Ich habe sogar einige zusätzliche hinzugefügt, wie zum Beispiel den Einladungscode, den ich ihm nicht gesagt habe, aber er tut das , sodass er einen Reisecode generieren kann , den sich die Leute gegenseitig schicken können. Es wurde auch eine API-Route erstellt. API-Route ist im Wesentlichen eine Möglichkeit für das Frontend dem Backend zu kommunizieren und beispielsweise neue Reisen zu erstellen. Wenn wir hier reingehen, erledigt es ein paar Dinge indem es zuerst überprüft, ob der Benutzer authentifiziert ist Es führt einige erste Überprüfungen durch und stellt sicher, dass der Name der Reise hinzugefügt wurde Wenn der Benutzer diese nicht hinzufügt und versucht, eine neue Reise zu erstellen, wird ihn diese API-Route im Wesentlichen daran hindern, dies zu tun. Aber wenn alles in Ordnung zu sein scheint, wird er weitermachen und die Reise mit den folgenden Informationen erstellen lassen , mit dem Namen, wem sie gehört, wer Teil davon ist, wo die Benutzer, wann ist das Startdatum? Wann ist das Enddatum. Im Wesentlichen ermöglicht dieser Code dem Frontend über diese API-Route mit dem Backend zu kommunizieren. Ähm, offensichtlich macht es von selbst einige Annahmen. Die KI wird das also tun, wenn Sie ihr nicht genügend Informationen oder Kontext geben. Ich glaube, ich habe auf der Reiseseite nicht ausführlich darüber gesprochen , was wir tun wollen, ob es die Art von leeren Karten oder falschen Karten ersetzen soll , die wir bisher erstellt haben. Lassen Sie uns sehen, was es macht, und dann weitermachen. In Ordnung, es sieht also so aus, als ob ich momentan keine Reisen habe. Es hat die leere Seite, die ich bereits entworfen habe, noch nicht implementiert , aber ich habe ihr diese Seite noch nicht gegeben. Das ist der nächste Schritt in der Liste der Dinge, die zu tun sind. Aber lass uns versuchen, eine neue Reise zu erstellen. Nennen wir es Bali 2025. Startdatum. Wählen wir den 2. März aus, machen wir den sechsten, erstellen wir eine Reise und kopieren die Einladungs-Tinte, aber wir können die Reise nicht erstellen. Etwas ist passiert. Mal sehen, was weg ist. Hier in Ihrem Terminal werden Sie immer alle Fehler sehen , die möglicherweise aufgetreten sind. Es sieht so aus, als ob es einen Fehler gab, der etwas mit dem nächsten zu tun hat, das hier geschrieben wurde. Was Sie hier mit dem Cursor tun können , ist, dass Sie tatsächlich an und dann zu den Terminals gehen und dort auswählen können, dass dies das Knoten-Terminal ist . Sie können also das Knoten-Terminal auswählen und sagen, wir haben einen Fehler und lassen es ihn herausfinden. Sieht aus, als ob es behoben wurde. Lass uns das noch einmal versuchen. Und es gibt immer noch ein Problem. Wiederholen Sie erneut genau den gleichen Vorgang. Es gibt noch einen Fehler, es sieht so aus, als ob der Fehler jetzt woanders ist. Mal sehen, ob wir ihn beheben können. Mal der Charme. Klicken wir auf Reise erstellen und kopieren den Link zur Einladung. Bum, immer noch ein Fehler. Stellen Sie sicher, dass Sie ab und zu nach Korrekturen den Server anhalten. Drücken Sie also Strg C in Ihrem Terminal und starten Sie Ihre Entwicklungsumgebung erneut, führen Sie Ihre App erneut aus und lassen Sie uns das noch einmal tun. Bali 2025 und wir werden einige Termine festlegen, auch wenn es nicht notwendig ist. Und da haben wir es. Wir sind auf Bali 2025. Es hat sogar diesen Link hier erstellt. Jetzt bin ich mir nicht sicher, ob der Link tatsächlich kopiert wurde. Lassen Sie uns versuchen, dass es selbst eine Einladungs-Tinte erstellt und wir es dann nach draußen ausführen. Wir haben hier nicht wirklich den richtigen Link, also wurde der Einladungsteil nicht richtig implementiert, aber das liegt einfach daran, dass wir die Reise überstürzt erstellt haben und nicht mehr Details darüber angegeben haben, wie es mit der Einladung von Freunden usw. umgehen wird mit der Einladung von Freunden usw. umgehen Meine Logik ist also, lassen Sie uns zuerst die Erstellung der Reise abschließen Lassen Sie uns die Kostenerstellung und all das herausfinden. Dann werden wir daran arbeiten, wie die Benutzer tatsächlich Freunde zum Beitritt einladen können. Im Moment ist das unglaublich. Wenn wir wieder hierher gehen, wurde die Reise erstellt, und das ist nicht nur eine Fälschung, sondern sie ist tatsächlich in unseren Warenkorb gegangen und wenn wir unseren Mongo-DB-Kompass aktualisieren, können wir sehen, dass wir jetzt diesen Ordner für Reisen hier haben , mit all den Reisen, die wir erstellt haben, diese eine Reise, die wir erstellt haben, können wir sehen, wer Teil davon ist Wenn Sie eine Objekt-ID sehen, die auf eine andere Tabelle in einem anderen Ordner verweist auf eine andere Tabelle in einem anderen Ordner Das ist der Benutzer, den ich hier habe. Das ist die Objekt-ID hier. Es entspricht dem Benutzer oder dem Besitzer und als Teil der Benutzer ist es auch mein Konto. Ich bin sowohl der Besitzer dieser Reise als auch der Nutzer, was Sinn macht. Wir haben das Startdatum und das Enddatum. Es wurde ein Einladungscode erstellt. Auch hier haben wir keine weiteren Informationen darüber gegeben, wie Einladungen funktionieren sollten, aber das werden wir später wieder tun, sobald ich den gesamten Ablauf für eine Reise abgeschlossen habe. Lassen Sie uns zurückkommen und tatsächlich an den Ausgaben arbeiten. Ähm, und dann fange mit Einladungen an. 22. Kostenfluss: Es sieht also so aus, als ob wir hier auf dem richtigen Weg sind. Also warum treiben wir es nicht voran , indem wir die Ausgaben in die Realität umsetzen? Lassen Sie uns also Funktionen zu den Ausgaben hinzufügen, ein Ausgabenmodell mit allen erforderlichen Parametern erstellen und darauf achten, und darauf achten Ausgaben zum Reisemodell hinzuzufügen, falls das nicht bereits vorhanden ist. Stellen Sie sicher, dass die Ausgaben tatsächlich die Salden verschiedener Benutzer berechnen. Da haben wir's. Das schicken wir durch. Zeit, unseren Kostenfluss zu testen. Lassen Sie uns eine Ausgabe hinzufügen. Nehmen wir an, es waren 20$ und es war für Lebensmittel. Und natürlich habe ich selbst nur eine Person zu der Reise hinzugefügt, also macht das nicht wirklich Sinn Aber lass uns einfach weitermachen und schauen, ob das funktioniert. Da haben wir's. Es wurde hinzugefügt. Offensichtlich muss im Moment etwas daran gearbeitet die E-Mail hier anstelle des Vornamens anzuzeigen. Ich vermute, irgendwo im Code wird die E-Mail angezeigt, wenn es keinen Namen für den Benutzer gibt Lassen Sie uns das tatsächlich testen Ich gehe zu Mongo DB Compass und anstatt dass der Name hier leer oder null ist, lassen Sie uns weitermachen und tatsächlich eine Änderung daran vornehmen Wenn wir auf Update klicken, legen wir den Namen fest. An Nima Tahami. Dieses Set ändert diesen Namen im Wesentlichen in Nima Tommy. Normalerweise kannst du es direkt dort bearbeiten, aber weil es Null war, mussten wir es tatsächlich so machen Wenn wir jetzt frisch sind, haben wir einen Namen. Wenn ich die App aktualisiere und los geht's. Ich hatte recht, der Code ersetzt den Namen durch E-Mail. Wenn der Benutzer keinen Namen hat, wird dieser angezeigt. Aber ich habe dafür gesorgt, dass ich ab jetzt die Namen der Benutzer im Anmeldevorgang sammle um zu sehen, ob wir zu allen Reisen zurückkehren und uns abmelden. Lass uns jetzt anmelden. Ich werde nach dem vollständigen Namen fragen, es sei denn, du gibst deinen vollen Namen an, ich lasse dich nicht registrieren, du musst deinen vollen Namen eingeben. Da haben wir's. Der Ausgabenfluss funktioniert auch. Wenn wir unsere Datenbank hier aktualisieren, sollte ich die Ausgaben als separate Tabelle sehen , und los geht's. Wir haben die Reise , der sie gehört, ähm, bezahlt von, wer hat diese Reise eigentlich bezahlt? Wie hoch war der Betrag? Wie lautet die Beschreibung? Wie ist es aufgeteilt? Es hat all das im Hinterkopf behalten, ebenso wie die Spaltungen. Wer schuldet wie viel? Das sieht ziemlich gut aus. Ich werde nicht lügen. Natürlich gibt es immer noch Verbesserungen, die ich daran vornehmen kann sodass Benutzer Ausgaben löschen können, um sicherzustellen, dass diese Aufteilung zwischen den beiden richtig funktioniert. In Zukunft werde ich einige Tests durchführen, um sicherzustellen, dass das funktioniert. Im nächsten Schritt werde ich dafür sorgen, dass der Ablauf „Freunde einladen “ funktioniert, sodass Benutzer tatsächlich einen Link hierher kopieren, auf Freunde einladen klicken, einen Link kopieren und dann andere Freunde in die App einladen können. Das Problem ist, dass wir derzeit nicht mehrere Konten erstellen können , da Resend uns nur erlaubt , E-Mails von Domains zu versenden, die wir besitzen, und wir haben diese App nicht wirklich gebrandmarkt oder eine Domain gefunden oder ähnliches Wir müssen eine Pause einlegen, ein bisschen über Branding sprechen und uns einen Namen einfallen lassen und all das Sobald wir damit fertig sind, können wir diesen Ablauf tatsächlich weiter testen. Im Moment muss ich mir darüber keine Gedanken machen. Das ist eher in der Testphase. Vorerst werde ich sicherstellen, dass das Einladen von Freunden funktioniert, wenn es implementiert ist. Benutzer, die nicht authentifiziert sind, können die Seite sehen, nur die Reiseinformationen hier drüben und dann vielleicht eine Schaltfläche, um der Seite beizutreten 23. Branding: Wir müssen uns also eine Marke einfallen lassen, bevor wir weitermachen. Weißt du, irgendwann in deinem Projekt musst du das machen. Es ist eines dieser Dinge, bei denen es manchmal etwas Zeit in Anspruch nimmt, vor allem, den richtigen Namen, das richtige Logo, weißt du, Schriftarten, Farben usw. auszuwählen das richtige Logo, weißt du, Schriftarten, Farben usw. Ich stehe oft vor diesem Problem, wie Sie sich vorstellen können, ähm, ich weiß nicht, mehr als 16 Apps zu entwickeln Lassen Sie sich also selbst eine Anwendung einfallen , die Ihnen dabei hilft. Alternativ können Sie dies jetzt natürlich auch in ChatGPT tun Sie müssen es nicht genau in diesem Tool tun, aber ich habe dieses Tool im Wesentlichen zusammengestellt um Ihnen schnell eine Marke bieten zu können, einschließlich Farben, Domainideen, Namensideen und so weiter Ich besitze also bereits eine Domain tripvela.com, und weil ich diese für ein früheres Projekt hatte , das nie wirklich ins Leben gerufen wurde, möchte ich sie für dieses Projekt verwenden , weil sie sehr relevant ist, aber ich habe kein Logo dafür und ich habe nicht wirklich bestimmte Schriftarten und Farben. Also werde ich Brand Kit verwenden, um mir das auszudenken. Du wirst die Marke oder, du weißt schon, die Idee hier schreiben , eine App, die Freunden hilft, die Reisekosten aufzuteilen. Weil ich schon einen Namen habe, werde ich sagen, dass er Tripvela heißt Ich brauche den Namen D nicht. Ich brauche nur ein Logo und vielleicht ein paar Schriftfarben Hier dauert es eine Sekunde. Offensichtlich zeigt es Tripvela als Namen. Hier ist ein einfaches Logo, das ich verwenden kann. Dies ist ein einfaches Logo, aber Sie können auch ein Premium-Logo erwerben. Ich werde das Premium-Logo ausprobieren. Dieses Farbschema ist nicht schlecht, aber ich werde es ändern und versuchen, zu sehen, was wir hier noch bekommen können. Das ist anständig. Dieses Grau ist auch nett. Ich könnte einige dieser Farben verwenden. Aber lassen Sie uns vorerst sehen, das ist das Premium-Logo, das es sich ausgedacht hat. Lass uns das noch einmal ausprobieren. Offensichtlich wird tripl.com verwendet, weil ich das für meine Domain habe, aber es zeigt Ihnen auch andere verfügbare Domains Wenn du andere Namen möchtest, kannst du sie mischen. Sie müssen nicht Ihren eigenen Namen in das Tool eingeben. Alles erstellt eine E-Mail-Signatur für Sie, sodass Sie diese für Ihre E-Mail verwenden können. können gerne damit herumspielen, sich eine Namensidee einfallen lassen, sich einige Schriftarten und Farben einfallen lassen. Auch hier können Sie dies verwenden oder mit ChatGPT chatten, um sich das auszudenken, und dann eine Domain kaufen Stellen Sie sicher, dass Sie eine Domain kaufen und dann zurückkehren , um Ihre Domain in Resend zu integrieren , damit wir mehrere Benutzer erstellen können, damit wir unseren Einladungsablauf tatsächlich testen können , oder zumindest für Wenn deine Bewerbung anders ist und du das nicht tun musst, kannst du das bis zum Ende warten lassen Wir sehen uns in einer Minute. 24. Verbinden der Domäne zum erneuten Senden: Ich hoffe, Sie haben inzwischen die Domain gekauft , die Sie für Ihr Projekt verwenden werden Sobald Sie das getan haben, verwende ich hier Namechep, also verwenden Sie vielleicht Go Daddy, Namechep Stellen Sie sicher, dass Sie den Abschnitt Erweitertes DNS finden , damit Sie hier einige Einträge hinzufügen können Diese Aufzeichnungen ermöglichen es uns, E-Mails von Resend an Benutzer zu senden Wir müssen hier in resend.com unter Domains unter resend.com Schreiben Sie Ihre Domain. Sie können auch eine Domain hinzufügen. Sie können E-Mails beispielsweise von der Benachrichtigung dotdmain.com Ich werde das Gleiche tun. Ich werde notifications.tripvela.com verwenden, was meine Domain ist. Und dann werden wir die Domain hinzufügen. Dann gebe ich dir hier einige Anweisungen. Du kannst dir sogar ein Video ansehen, wenn du willst. Aber es ist ziemlich einfach. Sie müssen diese Einträge lediglich in Ihr DNS bei Ihrem Domain-Anbieter kopieren . Sie werden einen neuen Datensatz hinzufügen. Wenn Sie zurückschauen, ist dies ein TXT-Eintrag Sie möchten einen TXT-Eintrag auswählen. für den Host erneut alles ein, Fügen Sie für den Host erneut alles ein, was Sie hier sehen. Fügen Sie für den Wert ein, was Sie hier sehen Sie können es einfach kopieren und sicherstellen, dass Sie es richtig machen. Nehmen Sie sich Zeit dafür. Du wirst auch einen MX-Record machen. MC-Aufzeichnungen sind tatsächlich hier drüben. Ich habe bereits Punktbenachrichtigungen gesendet. Dann möchte ich diesen hier drüben kopieren. Ich werde tatsächlich einen weiteren MX-Eintrag hinzufügen, oder tatsächlich, das ist ein TXT-Eintrag, kein MX-Eintrag, sondern ein weiterer TXT-Eintrag hier oben, füge den Host ein und füge diesen hier ein, den Wert. Wir haben diese jetzt hier gemacht, und dieser ist optional, aber ich empfehle Ihnen, ihn zu tun. Ein weiterer TXT-Eintrag. Also und drücke Enter. Ich möchte nur sichergehen, dass Sie das auch tun, ist hier die Priorität für den MX-Eintrag auf zehn zu setzen. Weil wir davon keine E-Mails erhalten werden, wird es nur gesendet, damit sich die Leute anmelden können. Wir müssen den Empfang nicht aktivieren. Ich habe die Einträge hinzugefügt und dann wird der DNS überprüft. Gib ihm einfach etwas Zeit. Wenn Sie das richtig gemacht haben, wird bald alles grün markiert sein. Dann wissen Sie, dass Sie dieses Setup haben und können beginnen, E-Mails von dieser Domain aus zu versenden. Manchmal kann dies etwas länger dauern als gewöhnlich, geben Sie ihm etwas Zeit. Es kann bis zu ein paar Stunden oder Minuten dauern, aber normalerweise wird dies sofort erledigt und wir sind verifiziert. Wir sind startklar. Jetzt müssen wir nur noch zu unserer Codebasis zurückkehren und sicherstellen, dass in der Codebasis in Ihrem On Dot Local, genau wie im On-Punkt-Beispiel hier, das erneute Senden von E-Mail zu der E-Mail geändert wird, die Sie gerade erstellt haben erneute Senden von E-Mail zu der E-Mail geändert wird, die Sie gerade erstellt Aber natürlich haben Sie gerade eine Domain erstellt. Meins war eine Benachrichtigung, Punkt tripvela.com, aber du brauchst einen Anfang für die E-Mail und für diese kannst du normalerweise einfach so etwas wie keine Antwort unter tun Keine Antwort auf notifications.tripvela.com. Ich werde nur überprüfen, ob ich das hier habe. Stellen Sie sicher , dass Sie die E-Mail, die von einer E-Mail erneut gesendet wurde, ersetzen , dass Sie die E-Mail, die von einer E-Mail erneut , damit sie es weiß und von der richtigen E-Mail gesendet Ich teste das gerade einer anderen E-Mail, um zu sehen, ob es funktioniert Ich sehe, dass es funktioniert. Jetzt erhalte ich es von Tripvela-Benachrichtigungen auf tribella.com, schicke es mir und dann kann ich Jetzt haben wir einen weiteren Benutzer erstellt, ich kann Reisen unter diesem Benutzer erstellen Aber was mich interessiert, ist, an einer Reise teilnehmen zu können , die jemand anderes bereits gemacht hat. Kommen wir zurück und arbeiten in der nächsten Vorlesung an diesem Ablauf. 25. Freunde einladen Setup: Also habe ich von dem Benutzer , den ich gerade erstellt , einem anderen Benutzer, mit dem ich die erste Reise erstellt habe, versucht, auf denselben Link zuzugreifen , den dieser Benutzer für diese Reise hat. Dies ist der Link für diese Reise. Aber jetzt sehe ich , dass ich keinen Zugang zu dieser Reise habe. Da ich nicht der Ersteller der Reise bin und auch nicht zu den Nutzern der Reise gehöre, habe ich keinen Zugriff darauf. Aber was wir wollen, ist, dass wir tatsächlich einige Informationen über die Reise zeigen wollen , vielleicht nur diesen oberen Teil hier, dass es sich um eine Reise nach Bali handelt, dass das der Besitzer ist, das sind die Daten und wie viele Personen reisen. Äh, und anstatt all die anderen Informationen wie Salden und Reiseaktivitäten zu sehen Salden und Reiseaktivitäten , weil sie für mich noch nicht relevant sind , habe ich an der Reise nicht teilgenommen. Was wir tun können, ist eine Schaltfläche mit der Aufschrift An dieser Reise teilnehmen zu haben eine Schaltfläche mit der Aufschrift An dieser Reise teilnehmen , um Aktivitäten oder ähnliches zu sehen . Sie klicken auf den Button. Wenn sie dann kein Konto haben oder ausgeloggt sind, werden sie aufgefordert, ein Konto zu erstellen oder sich anzumelden. Sobald sie das getan haben, sollten sie in der Lage sein, automatisch Teil dieses Strips zu werden und dann alle Salden und Reiseaktivitäten zu sehen . Vorerst werden wir es Cursor oder dem Cursor AI-Agenten mitteilen . Wir möchten es Nutzern ermöglichen, sowohl anonym als auch eingeloggte Nutzer, die nicht Teil einer Reise sind, allgemeine auch eingeloggte Nutzer, die nicht Teil einer Reise sind, Informationen über die Reise einzusehen. Das gilt nur für den oberen Teil, nicht für die Abschnitte „Bilanz“ oder „ Reiseaktivitäten“. Stattdessen sollte es eine Schaltfläche geben, mit der Sie an der Reise teilnehmen können. Wenn ein Benutzer darauf klickt, sollte er zur Anmeldeseite werden. Wenn er nicht Teil der Reise ist, sollte er Teil der Reise werden und alle relevanten Informationen sehen. Was wir dir sagen, ist, dass wir wollen, dass die Leute im Internet diesen Strip über diesen Link finden können. Wenn Sie diesen Link haben, bedeutet das, dass Sie auf die Reise zugreifen können. Also hat es jemand mit dir geteilt , der Zugriff auf diesen Link hat. Es ist also kein öffentlich zugänglicher Link , von dem jeder weiß. Es ist ein einzigartiger Link. Wie Sie hier sehen, hat es hier einen Ausweis, den die Leute normalerweise nicht finden werden. Es sei denn, jemand hat diesen Link mit Ihnen geteilt, ähnlich wie ein Google Dog - oder Figma-Link funktioniert Die Leute können auf diese Seite gehen, aber sie können keine der Daten sehen, bis sie tatsächlich ein Konto erstellt und an der Reise teilnehmen So werden wir sehen, dass Freunde an der Reise teilnehmen. Ich als Reiseveranstalter sende diesen Link an meine Freunde und erlaube ihnen dann, Ich als Reiseveranstalter sende diesen Link an meine Freunde und erlaube ihnen dann ein Konto zu erstellen oder sich anzumelden falls sie bereits eines haben, damit sie an dieser Reise teilnehmen und am Hinzufügen von Ausgaben und dem Anzeigen von Salden teilnehmen können dieser Reise teilnehmen und am Hinzufügen von Ausgaben und dem Anzeigen von Salden teilnehmen , denen sie etwas schulden oder schulden. Ich lasse das ausklingen und dann kommen wir zurück, um zu sehen, wie es von dort aus aussieht. 26. Testen von Einladungslinks: Ähm, ich habe eine weitere Aufforderung an Cursor übergeben, als es fertig war, und ich sagte, wenn ein Benutzer auf Freunde einladen klickt, zeig es Toast, was mit anderen Worten, das bedeutet, eine kleine Nachricht , die Erfolg usw. oder Fehler anzeigt , und sagt kopierter Link, schicke ihn an ein oder zwei Freunde, das ist nur eine freundliche Nachricht und dann kopiere sie in ihre Zwischenablage, damit sie ihn versenden können Weil mir aufgefallen ist, dass es nicht funktioniert, wenn ich zu Freunde einladen gehe , also habe ich dafür gesorgt, dass es auch Funktionen dafür bietet. Sie können jederzeit mehrere Eingabeaufforderungen senden, um Dinge zur Warteschlange hinzufügen zu können Dinge zur Warteschlange hinzufügen zu können , sodass der KI-Agent, sobald er eine Sache erledigt hat, auch an einer anderen Sache funktioniert Natürlich können Sie Agenten parallel ausführen, indem Sie einen neuen Agenten erstellen und mehrere Agenten parallel ausführen lassen Ich mache das gerne, wenn ich an etwas Komplizierterem arbeite . Dieses Projekt ist so einfach , dass wir nur eins nach dem anderen ausführen können. Ordnung. Lass es uns testen. Wir gehen hier rüber und schauen uns das gleich an, auch wenn das nicht meine Reise ist, sondern eine Reise, auf die ich über ein anderes Benutzerkonto zugegriffen habe. Ich kann tatsächlich an der Reise teilnehmen. Wenn ich also auf Joint Trip Boom klicke, kann ich alle Informationen sehen und sogar Ausgaben hinzufügen. Da haben wir's. Dieser Benutzer heißt Tim Cook, also kann ich die Kosten hier sehen. Wenn ich hier 20 hinzufüge, kannst du sehen, dass es genauso schön aufgeteilt ist, wenn ich Prozentzahlen mache. Der Prozentsatz funktioniert nicht richtig. Es muss prozentual berechnet werden, also wird es diese Felder in Prozent ändern. Das Gleiche für den Dollar und das Gleiche von Tag zu Tag. Offensichtlich braucht es etwas Arbeit. Wir sind noch nicht hier, um etwas zu perfektionieren. Wir sind nur hier, um sicherzustellen, dass die Basis funktioniert, und dann werden wir anfangen, kleine Anpassungen vorzunehmen. Wenn ich Kosten hinzufüge, okay, diese werden hinzugefügt. Wunderschön. Es wird aufgeteilt zwischen dieser Person und dieser Person gezeigt. Auch hier und da müssen kleine Anpassungen vorgenommen werden. Ich kann sehen, dass mir 10$ geschuldet sind, also ist das nett und ich kann es als bezahlt markieren, aber das funktioniert nicht, weil wir das bisher nicht implementiert haben Wir werden sicherstellen, dass auch die Salden ordnungsgemäß umgesetzt werden Also werden wir weitermachen und das auch tun. Aber im Moment können wir sehen, dass alles gut funktioniert , sodass andere Benutzer an den Reisen teilnehmen können. Wir haben zwei Probleme mit Next JS Wenn Sie Fehler haben, kopieren Sie sie einfach wie folgt auf den Cursor und öffnen Sie einen neuen Chat und teilen Sie einfach den Fehler mit und wir werden ihn hoffentlich beheben . Das Gleiche gilt für diesen. Das werde ich in einem neuen Chat machen. Ich werde es diese Fehler beheben lassen. Du arbeitest auch an deinen Funktionen und dann kommen wir in der nächsten Vorlesung zurück, um an Salden zu arbeiten, sodass die Leute ihre Salden sehen können und es ist intelligent und berechnet oder vereinfacht die Schulden automatisch oder vereinfacht ähnlich wie es Spitwise Sobald das fertig ist, werde ich ein paar kleine Änderungen vornehmen Ich komme zurück und erkläre die Änderungen, die ich vorgenommen habe. Wir können übrigens sehen, dass diese Fehler verschwunden sind , das ist also nett. Aber im Moment denke ich, dass wir so ziemlich fertig sind. Wenn ich zu allen Reisen gehe, kann ich mir diese Reise hier ansehen. Das ist nicht richtig, weil dort nur du steht, aber es sollte eigentlich sagen wie viele Personen an dieser Reise teilnehmen, weil nicht nur ich jetzt, es sind dieser Reise teilnehmen, weil nicht nur ich jetzt, drei Mitglieder, heißt es, obwohl es zwei sein sollten. Auch hier und da kleine Fehler. Notieren Sie sich alle Fehler , die Sie sehen. Wenn Sie Ihre App auf diese Weise testen, notieren Sie sich alle auftretenden Probleme, damit Sie sie nacheinander beheben können . Ähm, das ist das Beste, was man tun kann. Versuche nicht, alle Probleme auf einmal zu lösen. Cursor könnte die Dinge noch mehr durcheinander bringen, ähm, aber ich habe eine Liste von Dingen zu erledigen, einschließlich, wissen Sie, ein besseres Format, um die Aufteilung zwischen einem besseren Symbol hier anzuzeigen, also dieses Symbol könnte sich je nach Ausgabennamen ändern, ähm, wissen Sie, im Moment erlaubte es mir, eine Ausgabe hinzuzufügen, ohne zu sagen, wofür sie gedacht war. Also, hier gibt es einiges zu korrigieren, wenn es um Fragen geht, zum Beispiel, warum es drei Mitglieder ausgewählt hat. Ich werde zurückkommen und diese Änderungen ganz am Ende vornehmen. Schließlich möchte ich vor Abschluss unseres MVP auch sicherstellen, dass die App auch für Mobilgeräte optimiert ist , falls Nutzer versuchen, auf dem Handy darauf zuzugreifen, was sie bei einer App wie dieser sicher tun werden Möglicherweise müssen wir auch daran einige Anpassungen vornehmen. Lassen Sie uns zurückkommen, an den Salden arbeiten, sicherstellen, dass die Funktionalität funktioniert, und dann mit kleinen Korrekturen und mobilen Displays fortfahren. 27. Guthaben hinzufügen: Zurück in der App habe ich einen weiteren Benutzer erstellt und dort eine weitere Ausgabe hinzugefügt. Jetzt ist mein Guthaben Null , weil ein Benutzer mir 10$ schuldet, der andere, ich schulde 10$ Jetzt möchte ich sicherstellen, dass diese Saldofunktion funktioniert und die Leute Dinge tatsächlich als bezahlt markieren können Ich möchte sicherstellen, dass es vereinfachte Schulden gibt, sodass wenn Benutzer sich gegenseitig etwas schulden, , wenn Benutzer sich gegenseitig etwas schulden, vereinfacht wird, wer wen bezahlen muss , sodass die Leute überall keine Transaktionen oder Überweisungen tätigen müssen , und es wird einfach vereinfacht, wer wem schuldet, um die Anzahl der erforderlichen Transaktionen zu reduzieren. Natürlich gibt es noch andere Dinge, die ich reparieren möchte, aber vorher gehe ich hier zu Cursor, öffne einen neuen Chat und wir werden sagen, ich möchte, dass die Balance funktioniert und funktioniert. So können Nutzer damit verfolgen, ob sie für jeden Nutzer, dem sie Geld schulden oder dem sie Geld schulden, als bezahlt markieren für jeden Nutzer, dem sie Geld schulden oder dem sie Geld schulden, als bezahlt Ich möchte auch, dass die Saldenberechnung vereinfacht wird , sodass automatisch berechnet wird , wer welchen Betrag zahlen muss, um die geringste Anzahl von Transaktionen oder Überweisungen zu begünstigen , die Nutzer während der Reise untereinander tätigen müssen Füge oben rechts neben den Salden einen Schalter hinzu, der besagt, dass die automatische Berechnung aktiviert ist Wenn sie es ausschalten, wird angezeigt, wie viel jedem einzelnen Benutzer geschuldet wird oder was er dem Benutzer schuldet Ganz einfach, ich sage Ihnen, dass Sie das funktionstüchtig machen und , dass Sie das funktionstüchtig machen in der Datenbank nachverfolgen sollen, wer wen bezahlt hat, sodass es hier für den Benutzer sichtbar sein kann . Wenn ich zum Beispiel diesen Benutzer hier bezahlt habe , wird das nachverfolgt Oder ich denke, in diesem Fall kann ich sagen, dass Mark bezahlt hat, wenn der Benutzer mich bezahlt hat. Das Gleiche gilt für diesen, behalten Sie Überblick und machen Sie es lebendig, und vereinfachen Sie dann auch die Schulden, sodass , wenn Benutzer sich gegenseitig etwas schulden, wieder die geringste Anzahl von Überweisungen erforderlich ist, genau wie bei der Aufteilung. Das sind zwei Änderungen, die ich vorgenommen habe. Mal sehen, wie sie es machen. den Cursor im Auge, während er etwas tut , denn manchmal merke ich , dass er versucht, etwas Neues zu tun. Ich habe es gebeten, sicherzustellen, dass der kostenpflichtige Button hier funktioniert, und ich wollte eine neue Liste erstellen , die wir nicht einmal benötigen. Jetzt sind die automatischen Taschenrechner aktiviert und wenn ich bei diesem anderen Benutzer etwas sehe, funktioniert es, weil es momentan ausgeschaltet ist und ich sehe, dass mir diese beiden Leute jeweils 10$ schulden Aber wenn ich Automatisch berechne, zahlt mir diese Person 20 Dollar und ich bin zufrieden. Das funktioniert, das ist gut, aber wir müssen sicherstellen, dass die gezahlte Mark auch funktioniert. Es heißt, es funktioniert jetzt, mal sehen. Es ist einfach von dort verschwunden. Das ist interessant. Wir werden dafür sorgen, dass die Karten nicht verschwinden. Ich habe dort zu früh gesprochen. Es arbeitet noch an dieser Funktion, also werden wir ihr jetzt etwas Zeit geben . Wir sehen, dass das jetzt funktioniert. Ich kann diese Zahlungen rückgängig machen und sie als bezahlt markieren. Es gibt einige Probleme beim Duplizieren der Karten Ich werde sicherstellen , dass es tatsächlich dieselbe Karte behält und diese nur ändert diesen Prozess durchlaufe, stelle ich auch fest, dass es hier eine UX-Lücke gibt , die verbessert werden könnte. Ich habe Split Wise unzählige Male benutzt und eines der Dinge ist, dass man nie weiß, wann man handeln muss. Wann solltest du eigentlich anfangen, andere Leute zu bezahlen. Ich denke darüber nach, eine Schaltfläche zur Abrechnung hinzuzufügen , mit der der Eigentümer der Reise interagieren kann. Sie haben eine Schaltfläche mit der Aufschrift , ähm, abrechnen, wodurch die Reiseaktivität geschlossen wird , sodass die Leute keine Ausgaben mehr hinzufügen können. Dann wird jedem Teilnehmer eine E-Mail geschickt, wie viel er genau wem auf diese Weise schuldet. Sie müssen nicht einmal in die App gehen, um es zu sehen und sie können einfach einen einfachen Button in der E-Mail haben , auf dem steht, dass Mark bezahlt hat. Ich werde an der nächsten Vorlesung arbeiten und dann sicherstellen , dass der gesamte Kreislauf geschlossen ist bevor ich zurückkomme und nur noch ein paar Probleme repariere , die in der App sind, und dann sollten wir startklar sein. 28. Wir kommen zum Ende.: Ordnung. Hier sind wir. Ich habe Cursor angewiesen, die Schaltfläche „ Bereit zur Abrechnung“ hinzuzufügen. Als Besitzer dieser Reise kann ich sie jetzt als „ Bereit zur Abrechnung“ kennzeichnen. Da haben wir's. Es ist bereit, sich zu einigen. Ich kann hier keine Transaktionen mehr hinzufügen und auch niemand anderes in der Reise und die Teilnehmer können sagen, was sie tun müssen. Hier ist ein Benutzer, der sagt, dass Sie alles geklärt haben. Unglaublich. Hier ist noch einer, der besagt, dass Sie diesem Benutzer 20$ schulden Da haben wir's. Das funktioniert jetzt ziemlich gut für einen MVP, es ist sehr gut Wir haben hier eine Schaltfläche zum Rückgängigmachen, falls Sie dies benötigen. Als Nächstes habe ich eine Liste mit all den kleinen und größeren Korrekturen zusammengestellt , an denen ich arbeiten möchte. Offensichtlich wäre das zu viel für mich , als dass wir das zusammen tun könnten, und es ist ein bisschen überflüssig weil ich diese UX-Notizen der Benutzeroberfläche einfach in Cursor einspeisen werde diese UX-Notizen der Benutzeroberfläche , damit es sie nacheinander repariert . Dann werde ich testen, sicherstellen, dass es funktioniert, und versuchen, nicht zu viel Zeit damit zu verbringen. Natürlich ist es wichtig, keine fehlerhaften Produkte zu versenden. Aber für mich werden diese wahrscheinlich höchstens ein paar Stunden dauern, sodass ich bis Ende des Tages eine funktionierende Version von Tripvela habe und dann werden wir zurückkommen und lernen, wie wir unsere App tatsächlich über Verso pushen können , damit sie von der Produktion lebt , sodass die Leute unsere Domain besuchen und unsere Anwendung sehen und sich auch dafür registrieren können unsere Domain besuchen und unsere Anwendung sehen und sich auch dafür registrieren Nun, eine wichtige Sache, die wir noch nicht implementiert haben, ist auch Die Möglichkeit, Benutzern zu ermöglichen, für dieses Produkt zu bezahlen. Wir werden tatsächlich daran arbeiten , wenn wir unsere Landingpage in den folgenden Vorlesungen oder Modulen zusammenstellen , sodass der Benutzer an dieser Stelle auf der Landingpage bezahlen kann, und dann sorgen wir dafür dass die Integration stattdessen im Wesentlichen funktioniert. Es wird ein bisschen zu viel sein, dies derzeit zu tun , da wir auch die App zusammenstellen. Machen Sie also dasselbe, fassen Sie Ihre Seiten zusammen, denen Ihre Funktionalität die wichtigsten ist , und machen Sie sich dann Notizen über kleine Dinge, die Ihnen unterwegs auffallen. Sie können Ihre App vorerst auch ein oder zwei Freunden auf Ihrem Computer zeigen ein oder zwei Freunden auf Ihrem Computer , um auch deren Feedback zu erhalten und vielleicht bemerkt einer von ihnen etwas, das Sie verpasst haben. Aber es ist auch eine gute Übung. Wenn Sie dann bereit sind, kommen Sie zurück und wir fahren mit unserem nächsten Abschnitt fort , der sich mit Landingpage, Marketing und Zahlungen befassen wird . 29. Endgültige App-Überprüfung: Ordnung. Ich habe ein paar Stunden damit verbracht, das alles zu reparieren und für den Versand vorzubereiten. Also werde ich ein paar Änderungen durchgehen, die ich vorgenommen habe. Ich habe hier einige Ladezustände hinzugefügt. Ich habe Cursor tatsächlich ein Skelett erstellen lassen , das diese Karte geladen hat. Also wenn es geladen wird, sieht es gut aus. Ich habe jetzt auch einen leeren Status, also wenn Benutzer das Dashboard aufrufen und keine Fahrten haben, ähnlich wie ich es in Figma hatte Ich habe auch ein Logo erstellt. Ich habe das Logo und den Namen hier oben platziert. Erstellen einer neuen Reise ist so ziemlich dasselbe außer dass ich das Datumsfeld hier geändert habe, um es ein bisschen schöner zu machen und wir zu einer Reise übergehen , die bereits existiert Also habe ich hier ein paar Dinge hinzugefügt, die Möglichkeit, alle Personen als Teil der Reise zu sehen, die Saldokarten funktionieren jetzt alle und die Ausgaben haben alle benutzerdefinierte Symbole, und die Ausgaben haben alle die auf den Ausgaben basieren Wenn Sie kein Symbol finden können, wird es einfach das Dollarzeichen wie dieses verwenden. Das Hinzufügen von Ausgaben funktioniert jetzt. Ich habe hinzugefügt, wer bezahlt hat, sodass Sie den Benutzer, der bezahlt hat, tatsächlich ändern können. Sie können das Datum ändern und jetzt funktionieren all diese Funktionen einwandfrei. Die Spaltungen machen Sinn. Wenn ich 20$ mache, ergibt alles Sinn Du kannst es sogar tagsüber tun. Das ist gut für Dinge wie Hotels, Airbnbs, wo Sie es nach Tagen aufteilen möchten Ja, und dann kannst du diese Kosten hinzufügen. Wenn du Ausgaben hinzufügst, musst du sicherstellen, dass du sagst, wofür sie bestimmt waren. Nehmen wir an, ich habe 200$ für eine Hotelanzeige ausgegeben und dann bekomme ich 150 zurück und ich kann sehen, wer dazwischen war all den kleinen Änderungen habe ich die Gesamtausgaben für diese Reise hinzugefügt, den Snavbr ein wenig angepasst und ein Drop-down-Menü für das Profil hier oder das Profil-Dropdown hinzugefügt das Profil hier oder das Profil-Dropdown Dann habe ich auch einige Änderungen für Mobilgeräte vorgenommen. Auf dem Handy sieht es jetzt auch gut aus und lassen Sie mich Ihnen nur zeigen, dass dies nur dazu dient, Ihnen auf dem Handy zu zeigen, wie es aussieht. Es ist jetzt mobilfreundlich. Auch hier habe ich jedem einzelnen Stück für Stück Dinge gegeben. Ich sagte für Mobilgeräte, mach das Folgende und jetzt kannst du sehen, dass alle Karten gut aussehen. Was die App selbst angeht, sie ist fertig. Ähm, obwohl wir noch keine Landingpage haben und wir eine Landingpage benötigen, bevor wir das Ganze durch die Produktion bringen und es den Nutzern ermöglichen, sie zu benutzen. Das werden wir im nächsten Modul tun, um zurückzukommen und tatsächlich damit zu beginnen, mehr Marketingressourcen zusammenzustellen , einschließlich der Landingpage und der Möglichkeit, und der Möglichkeit Zahlungen von Benutzern für diese App einzuziehen , bevor wir sie tatsächlich live schalten können , damit die Leute sie nutzen können. Aber insgesamt habe ich die App getestet. Sie funktioniert gut und ich ermutige Sie, dasselbe mit Ihrer App zu tun . Sobald Sie bereit sind mit mehr Marketingmaterial zu beginnen, sehe ich Sie in der nächsten Vorlesung. 30. Überprüfung der Landingpage: Stelle meine Landingpage zusammen, die ich für Tripvela, meine App zur Erfassung von Reisekosten, verwenden werde meine App zur Erfassung von Reisekosten Ich nehme mir etwa einen Tag Zeit, um das zusammenzustellen, und ich werde durchgehen, wie ich der Vorlage, die ich vorgestellt habe , gefolgt bin und wie ich mich für die Elemente entschieden habe , die ich hier habe Das Wichtigste zuerst: Ich habe wirklich einprägsamen H-One-Text hinzugefügt, und genau das empfehle ich Ihnen, erneut zu tun Ihr Heldenbereich ist einer der wichtigsten Abschnitte, daher sollten Sie sicherstellen, dass Sie genau das Problem erwähnen, das Sie für Kunden lösen möchten genau das Problem erwähnen, das Sie für Kunden lösen Also, weißt du, ich habe meine Nummer geschrieben, um über die Art von Aufwand zu sprechen , die Ausgaben auf Reisen aufzuteilen Also habe ich ohne großen Aufwand die Reisekosten aufgeteilt. Und dann erklären Sie im Untertext ein bisschen mehr darüber, Sie wissen schon, was dieses Produkt macht Also habe ich die geteilten Ausgaben nachverfolgt und sofort abgerechnet , sodass sich jeder darauf konzentrieren kann, das zu genießen. Und dann kannst du deine erste Reise planen. Das ist der wichtigste Aufruf zum Handeln. Benutzer werden tatsächlich zur Anmeldeseite weitergeleitet, um ein Konto zu erstellen. Eine nette Grafik hier an der Seite, eine nette kleine Animation hier, um verschiedene Reisen zu zeigen , hier kann man Leute sehen, die für eine Reise ausgeben. Ich spreche wirklich genau darüber, was das Produkt ist und was das Problem ist. Dann gehst du hier runter und liest die Problemstellung. Gehen Sie in eine Gruppe Die Ausgaben häufen sich schnell, eine Person bezahlt das Abendessen, eine andere bucht Tickets, jemand anderes bezahlt den Uber und so erinnert sich niemand daran, wer was schuldet Das ist eine wahre Sache , die auf Reisen häufig passiert und daher spricht es wirklich die Emotionen des Benutzers und die Erfahrung an , die er gemacht hat Dann habe ich die Lösungserklärung. TriplLA hilft Ihnen dabei, den Überblick zu behalten , damit Sie die Reise genießen können. Auch hier hilft dir die App, den Überblick zu behalten, sodass du dich stattdessen auf die Reise konzentrieren kannst So lädst du Freunde zu deiner Reise ein, richtest eine Reise ein und teilst den Link mit deinen Freunden und deiner Familie. Hier gibt es eine Beispielreise und ich werde dir das gleich zeigen , füge Ausgaben hinzu. Hier ist ein Beispiel für eine Ausgabe. Fügen Sie Ausgaben zu Ihrer Reise hinzu, behalten Sie den Überblick über die Transaktionen und zahlen Sie dann hier unten ab. Nochmals, nette kleine Hover-Animationen. Sie müssen das nicht auf Ihrer Landingpage tun , aber weil ich Design als Unterscheidungsmerkmal zu meinem Produkt verwende , ähm, verwende ich hier einige nette Animationen und Mikrointeraktionen Auch hier gilt: Begleichen, schauen, wem was schuldet, Mark hat bezahlt, wenn Sie im Quadrat sind, und sorgen Sie Bevor ich Ihnen hier eine Beispielreise zeige, gehe ich hier runter und zeige Ihnen Nochmals, ein kleiner Pausenabschnitt, Kosten aufteilen, abrechnen, keine umständlichen IOU-Chats und dann noch ein Aufruf zum Handeln, erstellen Sie Ihre Wie Sie sehen können, sind die Aufrufe zum Handeln sehr aufeinander abgestimmt Plane deine erste Reise, erstelle deine erste Reise rund um einen zentralen Aufruf zum Handeln. Ich habe nicht 1 Million verschiedene. Diese Seite, die du in der Navigationsleiste siehst, gehe zu meinen Reisen, wird nur angezeigt, weil ich bereits als Benutzer angemeldet bin, sonst würde es nur „Anmelden“ oder „Einloggen“ heißen. Und dann habe ich mir die Preise ausgedacht , basierend auf dem, worüber wir uns unterhalten. Ich entschied mich für zwei Pläne, einen pro Reise. Wenn es also Kunden gibt, die das einfach nutzen und ausprobieren wollen , können sie einfach zehn Dollar pro Reise zahlen und dann unbegrenzt bezahlen, anders als die anderen Konkurrenten auf dem Markt, ähm, und sich dann mit so vielen Freunden wie möglich teilen. Es gibt kein Limit, oder sie zahlen nur einmal 40$, dann haben sie unbegrenzt viele Fahrten für immer, alles in diesem Plan, plus keine Gebühren pro Fahrt, wieder unbegrenzt, Ausgaben, also das ist ein hervorragendes Preis-Leistungs-Verhältnis Jemand, der sich das anschaut und viel reist, denkt wahrscheinlich, wenn ich mehr als viermal in meinem Leben reise und die Ausgaben mit Freunden teile, was genau die Zielgruppe anspricht, die ich will, dann bekommen sie mit Sicherheit dieses Angebot statt dieses. Und dann schließe ich aufgrund einiger häufig gestellter Fragen. Also habe ich mir wieder ein paar Fragen ausgedacht, die vielleicht die Gedanken der Leute übersteigen. Wann markiere ich jemanden als bezahlt? Sind andere Personen oder müssen andere Personen zahlen, um Mitglied zu werden? Gibt es eine kostenlose Testversion? Und so habe ich all diese nacheinander beantwortet. Ich ermutige Sie, dasselbe für Ihren FAQ-Bereich zu tun. Es gibt natürlich eine Seite mit Nutzungsbedingungen, eine Datenschutzseite, die ich noch nicht eingerichtet habe, aber Sie könnten dafür verschiedene Ressourcen nutzen, z. B. sich die Bedingungen der Konkurrenz ansehen oder sich diesbezüglich auch mit ChatGPT beraten Ich überlasse das ganz Ihnen, denn das sind Kleingedruckte und sie sind ein bisschen wichtig, für manche sogar sehr, je nachdem , welche Art von App Sie erstellen Ich überlasse das dir und ich werde weitermachen und sie machen. Ähm, außer dem, was für diese Landing Page benötigt wird , um sie funktionsfähig zu machen oder zwei weitere Dinge. Zum einen richten Sie Favicon und Social Share Image so ein, dass Benutzer die Metadaten und alles andere korrekt sehen Im Moment sagt einfach Tripvela, was großartig ist. Aber auch hier ist das Symbol generisch, es ist nur ein versales Wir werden sie in der nächsten Vorlesung einrichten , weil sie mit Sicherheit für Ihr Projekt gelten werden , ebenso wie ein Bild zum Teilen in sozialen Netzwerken, also ein Bild, das jedes Mal angezeigt wird, wenn Sie Ihren Link an Personen senden, denen ich eine wenn Sie Ihren Link an Personen senden Nachricht sende, oder auf LinkedIn und sozialen Medien Da wir später etwas Marketing betreiben werden, ist es wichtig, dass du sie richtig einrichtest. Und sobald wir das getan haben, werden wir Stripe tatsächlich verbinden , sodass wir den Nutzern tatsächlich Gebühren berechnen können. Im Moment haben wir diese Zahlungssache, aber wir können den Nutzern noch keine Gebühren berechnen. Diese machen eigentlich nichts, also werden wir sie später auch mit Stripe verbinden . Ich verspreche, dir die Musterreise zu zeigen. Ich habe hier die Beispielreise nach Barcelona veröffentlicht, an der Benutzer teilnehmen können, und sie sieht genauso aus wie eine echte Reise. Sie gibt ihnen einen Vorgeschmack darauf, was sie erwarten können, vor allem, weil ich keinen kostenlosen Tarif habe. Sie können sich ein Bild davon machen, wie das Hinzufügen von Ausgaben aussieht, und sie können sogar damit herumspielen und auch Ausgaben hinzufügen genau wie in der echten App. Aber das ist natürlich nicht mit dem Backend verbunden. All das habe ich Cursor als Scheinwebsite machen lassen, nichts hier wird gespeichert. Es ist hauptsächlich so, dass die Leute damit herumspielen und sich ein Bild davon machen können, wie die App aussieht. Ich denke, das ist wirklich wichtig, um ihnen einen Vorgeschmack auf die App zu geben . Wir werden zurückkommen und über den letzten Feinschliff an der Landingpage sprechen , der erforderlich ist, bevor wir weitermachen und mit Marketing und Vertrieb beginnen. 31. Stripe-Einrichtung: Wählen Sie auf unserer Landingpage Zahlungen aus Wir werden Stripe verwenden, um Zahlungen zu verarbeiten. Das ist der einfachste Weg , das zum Laufen zu bringen. Wenn es darum geht, ein Konto einzurichten, ist dies der schnellste und auch einfachste Weg, Zahlungen online abzuwickeln. Sobald Sie also ein Konto über stripe.com erstellt haben, Ihnen möglicherweise Fragen wie diese gestellt, um die Dinge einzurichten . Sie müssen sie nicht beantworten Sie können sie überspringen, aber Sie können wählen, ob Sie wiederkehrende Zahlungen oder nicht wiederkehrende Zahlungen haben Unsere Zahlungen sind nicht abonnementbasiert, also wählen wir einmalige Zahlungen aus und klicken dann auf Weiter, und wir werden hier weitermachen Nun wurden Sie gefragt, Sie zu einem Sandbox- oder Live-Konto wechseln möchten Live-Konto ist Ihr Produktionskonto für Ihre eigentliche App, wenn sie für Benutzer live ist Sandbox dient der Testumgebung. Wir werden vorerst zu Sandbox gehen. Dann werden Sie weitermachen und nach API-Schlüsseln für Entwickler suchen In der Regel wird dies auch hier auf Ihrer Homepage angezeigt. Machen Sie also weiter und holen Sie sich von dort zwei Schlüssel , die Sie zu Ihrer Umgebungsdatei hinzufügen können. Einer ist der API-Schlüssel. Der andere ist geheim. Auch hier möchten Sie sicherstellen, dass diese geschützt sind und nur zu Ihrer Umgebungsdatei hinzugefügt werden. In der Beispieldatei hier werde ich den Stripe-API-Schlüssel haben. Sie haben einen Stripe-API-Schlüssel und Stripe nennt ihn dann Stripe Secret. Sie möchten fortfahren und sicherstellen , dass diese in Ihrer tatsächlichen Umgebungsdatei hinzugefügt werden , und dann fügen Sie diese Werte hinzu, damit dies funktioniert. Nehmen Sie sich dafür einen Moment Zeit. Nachdem ich diese Schlüssel hinzugefügt habe, werde ich Cursor bitten, Stripe zu implementieren, um Zahlungen für die beiden Pläne auf unserer Homepage zu verarbeiten . Ich werde ihm nur erklären , dass der Tarif pro Reise pro Reise gilt und 999$ kostet, sodass Benutzer nur eine einzige Reise erstellen können. Wenn Nutzer versuchen, mehr Reisen zu erstellen, leiten Sie sie auf die Stripe-Zahlungsseite weiter und achten Sie darauf, dass Sie im Rahmen des Benutzermodells die Gutschriften pro Fahrt im Auge behalten . Was ich Ihnen hier erzähle Informationen über den ersten Plan , der pro Reiseplan gilt. Er kostet 999$ und ermöglicht es dem Benutzer, Er kostet 999$ und ermöglicht es nur eine einzige Reise zu erstellen. Und wenn sie versuchen, mehr Reisen zu erstellen, wird die Zahlungsseite erneut geöffnet, auf der sie bezahlen und, Sie wissen schon, eine weitere Reise kaufen können. Ich sage Ihnen, dass Sie das Reiseguthaben im Auge behalten sollen. Also, wie viele Reisen Menschen auf dieser Grundlage als Teil des Benutzermodells unternehmen können . Dann der andere Plan, ein Plan, ist lebenslang und kostet 39 99$ und ermöglicht es Benutzern, unbegrenzt viele Fahrten auf ihrem Konto zu erstellen. Achten Sie darauf, dies auch im Benutzermodell im Auge zu behalten . Ich werde nur sicherstellen, dass es weiß, dass Benutzer keine Reisen erstellen können, ohne über Guthaben oder lebenslangen Zugriff zu verfügen. Ordnung. Ich werde das schicken und noch einmal kurz darüber sprechen, was ich getan habe. Ich habe die beiden Pläne, die ich habe, und die Preise dafür erklärt und sie gebeten, Stripe für diese zu implementieren. Ich habe spezifische Anweisungen gegeben um sicherzustellen, dass das Benutzermodell aktualisiert ist wiederum die Art und Weise, wie wir Informationen über die Benutzer speichern Informationen über die Benutzer und das können Sie in den Modellen hier sehen. Also das Benutzermodell und Sie können sofort sehen, dass es aktualisiert wurde, sodass Reisegutschriften hinzugefügt wurden. Also pro Fahrt würde diese Zahl hier aktualisiert werden. Wir wissen also, wie viele Reisen Menschen aufgrund der vielen Credits, die sie haben, erstellen können. Oder wenn sie lebenslangen Zugriff haben, ist es hier ein boolescher Wert, der erstellt wurde , der wahr oder falsch ist und es Ihnen ermöglicht, den Überblick zu behalten Ich werde diese Datei behalten und sicherstellen , dass Sie den Server tatsächlich beenden und später erneut ausführen, wenn die App das Modell wechselt Sie den Server tatsächlich beenden und später erneut ausführen, wenn die App das Also werde ich warten, bis es fertig ist , und es dann erneut ausführen. Mir wurde gesagt, stellen Sie sicher, dass Sie Ihre Stripe-Werte hinzufügen. Das haben wir schon gemacht, das ist also gut. Dann werden wir weitermachen und die API-Skripte dafür hinzufügen. Es sieht so aus, als ob die Implementierung fertig ist. Ich werde jetzt weitermachen und die Implementierung testen. Als Benutzer, der keine Credits hat, werde ich versuchen, eine neue Reise zu erstellen. Lass uns Bali machen und einfach auf Reise erstellen klicken. Du benötigst einen Plan , um eine Reise zu erstellen, pro Reise zu kaufen oder lebenslangen Zugang zu erhalten. Der einzige Nachteil dabei ist, dass die Optionen hier realistisch angezeigt werden, anstatt mir nur sagen, dass ich die Reisegutschriften benötige Lassen Sie uns nun von der eigentlichen Homepage aus testen, ob diese funktionieren. Es ist ein Fehler aufgetreten, also werde ich weitermachen und sicherstellen, dass ich diesen Fehler zurückgebe. Was ist mit Lebenszeit? Das Gleiche. Auch hier, falls Fehler auftreten, geben Sie sie an Cursor zurück und lassen Sie sie analysieren. Es sieht also so aus, als ob es behoben wurde. Sieht so aus, als ob der Fehler tatsächlich bei mir lag. Ich habe mich gebeten, die Stripe-Preis-ID pro Fahrt und auch die Lebensdauer der Preis-ID in der lokalen Umgebungsdatei festzulegen Fahrt und auch die Lebensdauer der Preis-ID . Wir müssen diese Pläne tatsächlich in Stripe erstellen. Es gibt Ihnen die Anweisungen, gehen Sie zum Stripe-Dashboard, Produktkatalog und zum Produkt. werden wir tun. Wir gehen zum Produktkatalog, erstellen ein Produkt und geben diesem einen Namen pro Reise. Es handelt sich um eine einmalige Zahlung von 999$ und wir werden das Produkt hinzufügen und sicherstellen, dass Sie in dieses Produkt gehen und die Preis-ID tatsächlich hierher kopieren. Genau wie in meiner Beispieldatei hier drüben. Ich werde das kopieren und sicherstellen, dass ich diese Preis-ID in diese Umgebungsdatei einfüge . Nehmen Sie sich dafür eine Sekunde Zeit. Zurück bei Stripe werde ich auch ein Produkt fürs Leben kreieren und es zu einem Unikat von 39 99 machen. Produkt, gleiche Idee. Kopiere die Preis-ID und zurück in die Umgebungsdatei Ich füge sie ein und stelle sicher, dass deine Werte mit einem Preisunterstrich beginnen Jetzt, wo das an Ort und Stelle ist, werde ich das ausprobieren. Da haben wir's. Jedes Mal, wenn Sie mit einem Stripe-Konto testen, können Sie einfach 42, vier, zwei, zwei eingeben, es mehrmals für die Kreditkarte wiederholen, einen zufälligen Ablauf festlegen und sofort mit CVC-Zahlung bezahlen Hier ist die Sache. Im Moment haben wir das Stripe-Konto verbunden und den Preis oder die Tarife, die wir haben, mit den Preis oder die Tarife, die dem Stripe-Konto und unserem Produkt verknüpft. Jetzt kann unser Produkt diesen Link tatsächlich generieren , damit die Leute den Plan kaufen können. Aber wir benötigen einen sogenannten Webhook oder Stripe-Webhook, damit wir unsere Anwendung und unsere Anwendungen tatsächlich verstehen oder im Backend haben, verstehen und uns anhören können , wenn Stripe ihm mitteilt, dass ja, diese Person tatsächlich einen Plan gekauft hat Also haben wir den ersten Schritt miteinander verbunden. Wir müssen jetzt zurückkommen und den Webhook, der auch hier erwähnt wird, tatsächlich verbinden , wie Sie sehen, an einem Webhook-Endpunkt sollte er ungefähr so aussehen Und fügen Sie dieses Ereignis hinzu, und Sie müssen auch ein Stripe-Webhook-Geheimnis in Ihrer Umgebung, einer lokalen Datei, festlegen Stripe-Webhook-Geheimnis in Ihrer Umgebung, einer lokalen Datei, Da wir das lokal auf unserem Computer testen und unseren Produktionsserver noch nicht haben, müssen wir den Webhook-Listener auch lokal verwenden, um von Stripe darauf hinzuweisen, dass ein Benutzer tatsächlich Pläne erstellt oder gekauft hat Kommen wir im nächsten Abschnitt zurück, um den Stripe-Webhook zu implementieren 32. Stripe-Webhook: Also haben wir Stripe verbunden, und jetzt müssen wir tatsächlich eine Verbindung zum Webhook herstellen. So weiß unser Backend im Wesentlichen , So weiß unser Backend im Wesentlichen , wenn Benutzer Pläne über Stripe kaufen Denn im Moment, wenn wir Leuten tatsächlich ermöglichen, einen Tarif zu erstellen, leiten wir sie zu Stripe weiter, und das ist eigentlich die Website von Stripe Es ist nicht unsere Website. Wir wissen nicht, wann die Zahlung eines Benutzers tatsächlich erfolgt, bis Stripe uns mitteilt, dass dies über einen sogenannten Webhook geschieht Wenn Sie hier zu Entwicklern auf Stripe gehen, gehen Sie zu den Webhooks Sie können von hier aus tatsächlich einen Webhook einrichten oder mit einem lokalen Listener testen Vorerst werden wir mit einem lokalen Listener testen. Folgen Sie den Anweisungen hier und stellen Sie sicher, dass Sie sich anmelden . Das alles können Sie über Ihr Terminal hier unten tun Das alles können Sie über Ihr Terminal hier unten Folgen Sie dem Link vom Terminal aus und klicken Sie auf Zugriff zulassen. Stellen Sie dann sicher, dass Sie diese Zeile hierher kopieren und sie auch in Ihrem Terminal ablegen. Wenn Sie das jetzt in Ihr Terminal einfügen, erhalten Sie ein Webhook-Geheimnis Sie möchten sicherstellen , dass Sie auch ein Stripe-Webhook-Geheimnis hinzufügen , das etwa gleich ist, und dann Ihr Webhook-Geheimnis eingeben, das wie folgt beginnt: WHSEcUnderscore usw. und dann Ihr Webhook-Geheimnis eingeben, das wie folgt beginnt: WHSEcUnderscore Nehmen Sie sich einen Moment Zeit, um es zu finden und das zu tun. Sobald ich das getan habe, bin ich hier auf ein Problem gestoßen. Wenn Sie also auf Probleme stoßen, suchen Sie einfach dieses Stripe-Terminal, senden Sie es und sagen Sie, dass Cursor Fehler gemeldet hat. Es wird Sie bitten, weiterzumachen und zu verstehen was schief gelaufen ist, und Ihnen sagen, was Sie tun müssen. Noch ein Problem, aber es hat erklärt, dass wir tatsächlich sicherstellen müssen, dass es sich um den Localhost Dot Colon 3.000 slash APISISH Stellen Sie sicher, dass Sie genau das befolgen. Lass uns das noch einmal versuchen. Ich habe mein Geheimnis erneut aktualisiert, und wir werden es ein anderes Mal erstellen. Mal sehen, ob es diesmal funktioniert. Siehst du, wir haben 200 von unserer API zurückbekommen . SipeSash Webhook bedeutet, dass es Sie können in unseren Benutzerdaten auf Mongo sehen, ich dieses Reiseguthaben jetzt Das ist nur passiert, weil der Stripe-Webhook funktioniert hat, was bedeutet, dass du jetzt tatsächlich eine Reise erstellen kannst . Lass uns das versuchen Ich werde einfach Bali Two Create setzen und los geht's. Jetzt habe ich diese Reise erstellt , weil ich Credits hatte. Ich aktualisiere die Credits oder wenn ich meine Benutzerdatenbank aktualisiere, da Sie sehen können, dass das Reiseguthaben aufgebraucht ist. Das funktioniert jetzt richtig. Wenn ich zurückgehe und versuche, eine weitere Reise wie Bali Three zu erstellen , weiß es, dass ich kein Guthaben mehr habe, und leitet mich zurück zur Checkout-Seite. Ich weiß, dass das jetzt funktioniert. Ich werde auch meinen Lifetime-Plan testen, dieselbe Konfiguration, aber mit der Laufzeit sollte ich in der Lage sein, mehrere Reisen zu erstellen. Ich lasse dich das für dein eigenes Setup machen. Möglicherweise haben Sie ein Abonnement, folgen Sie den Anweisungen und dem Cursor, um das einzurichten. Wohlgemerkt, dass wir den Stripe-Webhook bisher nur so eingerichtet haben , lokal funktioniert und noch nicht in unserer Produktion Sobald wir unsere Anwendung in die Produktion gebracht haben, müssen wir zurückkommen, um unseren Produktions-Stripe tatsächlich mit der App zu verbinden Produktions-Stripe tatsächlich mit der App zu Sobald wir das getan haben, müssen wir auf Zum Live-Konto wechseln klicken und unsere Preise tatsächlich vom Test in die Produktion kopieren. Das werden wir in einer Sekunde tun, wenn wir bereit sind, unsere App zu veröffentlichen. 33. Sicherheitseinstellungen: Wir bereiten uns darauf vor, unsere App in Produktion zu bringen und es jedem auf der Welt zu ermöglichen, sie zu nutzen. Wir müssen hier noch zwei kleine Dinge tun , die aber wirklich wichtig sind. Das erste ist, dass Sie in Ihrem Projekt auf MongoDB weitermachen und sich anmelden und zu Ihrem Projekt gehen möchten Dann möchten Sie hier auf der Registerkarte Sicherheit unter Datenbank- und Netzwerkzugriff gehen Greifen Sie dann auf die IP-Zugriffsliste zu. Dies ist im Wesentlichen die Liste der IP-Adressen, die auf die Datenbank zugreifen können. Im Moment ist Ihre IP-Adresse hier enthalten, was es Ihnen ermöglicht, von Ihrem lokalen Computer aus Änderungen an der Datenbank vorzunehmen, ähm, aber die Sache ist, sobald wir live gehen, Benutzer mit unterschiedlichen IP-Adressen werden Benutzer mit unterschiedlichen IP-Adressen auf der ganzen Welt Ihre Anwendung verwenden. Ähm, das würde also nicht unbedingt funktionieren, weil dann die Datenbank nicht funktioniert und neue Einträge oder Löschungen von verschiedenen IP-Adressen erlaubt Löschungen von verschiedenen IP-Adressen Deshalb müssen Sie hier eine IP-Adresse hinzufügen und sicherstellen, dass Sie den Eintrag in der Zugriffsliste Null Punkt Null Punkt Null eingeben Also vier Nullen und dann Null. Sie möchten das bestätigen und dann sollte es hier hinzugefügt und aktiv sein Nun, das birgt natürlich ein gewisses Sicherheitsrisiko und es gibt andere Möglichkeiten, dies zu tun, aber das ist der einfachste Weg, es einzurichten. Stellen Sie einfach sicher, dass Ihr Datenbankpasswort und Ihr Benutzername sicher sind. Der, den Ihnen Mongo Di B bei der Einrichtung dieses Clusters gegeben Mongo Di B bei der Einrichtung dieses Clusters Das Wichtigste ist, dass Sie sicherstellen, dass das geschützt ist, damit niemand in Ihre Datenbank eindringen kann Eine weitere Sache, die wir in der Codebasis für unsere App tun werden, um sie sicher zu machen, ist, dass wir eine Sicherheitsüberprüfung durchführen, um sicherzustellen, dass nichts öffentlich zugänglich oder falsch ist, und sicherstellen , dass die API-Ratenbegrenzung implementiert wird, um Missbrauchern vorzubeugen, eine gründliche Sicherheitsüberprüfung aller Bend-Funktionen durchzuführen und eingeben zu lassen API-Ratenbegrenzung implementiert um Missbrauchern vorzubeugen eine gründliche Sicherheitsüberprüfung aller Bend-Funktionen durchzuführen und eingeben Dies dient nur dazu, sicherzustellen, dass Cursor noch einmal die Sicherheit Ihres Projekts überprüft und Ihre Codebasis überprüft. Es stellt sicher, dass eine Ratenbegrenzung gilt, die im Wesentlichen verhindert, dass Personen Ihren Server oder Ihre API mehrmals spammen. Auch hier gibt es viele Benutzer, und einige von ihnen könnten versuchen, Ihre Plattform zu nutzen Nun, das passiert jedem Entwickler, also stellen Sie sicher, dass Sie diese Aufforderung tatsächlich ausführen, und natürlich gibt es wahrscheinlich auch andere Eingabeaufforderungen, die Sie ausführen können , um dies sicherzustellen Aber das ist die, die IE derzeit normalerweise verwendet . Sie überprüft alles in Bezug auf Authentifizierung, Middleware und API-Routen. Lassen Sie es sein Ding machen, damit Ihr Code sicherer ist Aber bevor wir zurückkommen und unsere App tatsächlich live auf unserer Domain veröffentlichen, damit andere Benutzer sie verwenden können 34. Vorstoß zur Produktion: Ordnung. Das sind aufregende Zeiten. Wir sind endlich bereit, unsere Anwendung , an der wir so hart gearbeitet haben öffentlich ins Internet zu stellen, sodass jeder auf der Welt sie tatsächlich nutzen kann. Das ist also aufregend und wir werden das wieder tun, wie in unserem Stack erklärt. Wir verwenden Versal, um unsere Anwendung bereitzustellen Versal ist also im Grunde die Plattform, auf der unser Projekt gehostet wird, und es ist eine großartige Sie können kostenlos loslegen und auch, Sie wissen schon, die eingehenden Logs verfolgen Sie wissen schon, die eingehenden Logs Stellen Sie also sicher, dass Sie einen letzten Test Ihrer Anwendung durchführen. Stellen Sie sicher, dass sie funktioniert, senden Sie sie an Github, falls Sie dies nicht getan haben. Du meldest dich bei Verso an, erstellst ein neues Projekt und dann werden wir dich bitten, deinen Github zu verbinden Stellen Sie sicher, dass Sie Ihren Github verbinden, damit Sie Ihre Anwendung tatsächlich verbinden oder sie mit nur einem Klick auf eine Schaltfläche in Verso importieren können. Das habe ich schon gemacht Ich mache weiter und benenne diesen in Tripvela um. Dann ist hier noch eine wichtige Sache, die du tun musst. Sie müssen hier tatsächlich die Umgebungsvariablen hinzufügen , damit dies funktioniert, sobald Ihre App gepusht ist. Ich werde hier eine Pause einlegen, nur um es schnell zu erklären. Sie möchten tatsächlich in Ihre Umgebung, die lokale Datei, gehen und jede dieser einzelnen Zeichenketten kopieren . Mongo-URI, zum Beispiel, Sie werden das in den Schlüssel einfügen und dann für den Wert den Wert einfügen, der nach dem Gleichheitszeichen hier steht. Nehmen Sie sich Zeit für diesen , denn es ist sehr einfach, einen Fehler zu machen , und Sie müssen auch einige davon aktualisieren, damit sie etwas anders Mongo Wenn Sie sich zum Beispiel an unsere Entwickler-Website oder unsere Dev-Site erinnern, haben wir für Dev erstellt In Ihrer Produktion möchten Sie Slash Prod oder Production verwenden, sodass Ihre Benutzerdaten von Benutzern aus der realen Welt in einem anderen Teil des Clusters gespeichert werden als die Testdaten Und dann werden Sie weitermachen und weitere hinzufügen. auch hier daran, dass einige davon unterschiedlich sein werden. Mong wird derselbe bleiben, bis auf den letzten Teil anstelle von Dev. Stellen Sie sicher, dass es Slash Prod ist Next Auth Secret wird gleich bleiben. nächste Auth-URL ist Ihre URL, über die Benutzer auf diese Website zugreifen Stellen Sie sicher, dass Sie HTTPS eingeben, also stellen Sie sicher, dass Sie das S für sicher und dann den Schrägstrich Colin angeben sicher und dann den Schrägstrich Colin und dann Ihre eigentliche Website dort platzieren In meinem Fall wird das tripvelala.com sein, HTTPS. TripVela.com. Sie müssen am Ende keinen Schrägstrich setzen Schlüssel zum erneuten Senden ist derselbe , da Sie E-Mails von demselben Konto aus senden Die Absender-E-Mail sollte ebenfalls gleich bleiben. Sie müssen es nicht ändern. Jetzt werden die Stripe-API, Stripe-Secret und der Stripe-Webhook unterschiedlich sein In diesem Fall müssen Sie tatsächlich zu Stripe wechseln und zu Ihrem Live-Konto Wenn Sie irgendwelche Vereinbarungen haben, stellen Sie einfach sicher, dass Sie diese im Stripe-Live-Dokument überprüfen, und dann können Sie die Dinge tatsächlich kopieren . Wählen Sie aus, was Sie kopieren möchten. Wir möchten unsere Produkte kopieren. Klicken Sie auf Weiter. Dann hast du deine Schlüssel hier drüben, die du für das Live-Konto kopieren kannst, das sollte wieder hier auf Versell reingehen. Lassen Sie jetzt das Webhook-Geheimnis raus. Das machen wir in der nächsten Vorlesung zusammen. Ihre Stripe-Preisnummer pro Fahrt oder die Stripe-ID, die Sie für Ihre Zahlungsart haben , wird ebenfalls unterschiedlich sein. Stellen Sie sicher, dass Sie diese auch direkt aus der Live-Version Ihres Stripe kopieren direkt aus der Live-Version Ihres . Stellen Sie also sicher , dass Sie hier klicken und sie korrekt kopieren. Nochmals, das einzige andere, das anders sein sollte, ist ein Stripe-Webhook-Secret Das werden wir in der nächsten gemeinsamen Vorlesung tun Fahren Sie fort und geben Sie diese Variablen korrekt ein. Ich nehme mir dafür eine Minute Zeit, überprüfe sie, stelle sicher, dass Sie sie richtig eingerichtet haben , und wir sehen uns in einer Minute. Nachdem Sie alle kopiert haben, stellen Sie sicher, dass Sie auf Deploy klicken. Sobald Sie auf Deploy klicken, können Sie sehen, wie die App tatsächlich mit dem Erstellen beginnt, oder Versa beginnt, Ihr nächstes Projekt auf ihren eigenen Servern zu erstellen , und Sie erhalten eine Zusammenfassung darüber, was getan wurde. Es besteht die Möglichkeit, manchmal eine große Chance , dass Sie Fehler bekommen oder dass Sie darauf stoßen. Wenn ja, erweitern Sie das einfach, kopieren Sie diese Fehler und geben Sie sie in Cursor ein, um sicherzustellen, dass dort aktualisiert oder Änderungen vorgenommen werden. Wenn Sie das richtig gemacht haben, ist alles in Ordnung, Sie sollten eine Live-Bereitstellung haben. Sie daran, dass wir unsere Domain noch nicht verbunden haben. Eine weitere nette Sache an Versell ist, dass jedes Mal, wenn Sie zu Ihrem Github-Hauptzweig , Ihre Live-App aktualisiert wird, sodass Sie dafür nichts weiter tun müssen nichts weiter tun müssen Wenn du Änderungen an deiner App, Feature-Updates und dergleichen und auf GitHub pushst, wird deine App automatisch für Benutzer aktualisiert Stellen Sie sicher, dass sie getestet wurden, bevor Sie etwas auf GitHub pushen. Gehen wir in der Zwischenzeit zu Domains und fügen tatsächlich eine bestehende Domain zu diesem Projekt hinzu, trilala.com, und wir werden hier auf Speichern klicken. Ich habe diese Domain bereits in einer anderen App, ich werde die Domains nur in dieses Projekt verschieben Das Einzige, was Sie von hier aus tun müssen , ist sicherzustellen, dass Sie zu Ihrem Domainregister gehen . Wenn Sie Name-Chip oder Go Daddy haben, stellen Sie sicher, dass Sie dort hinübergehen und zum erweiterten DNS gehen und diese Werte hinzufügen, genau wie wir es für die Resend-Schlüssel getan haben Folgen Sie diesen Anweisungen bei Ihrem Domain-Anbieter und treffen Sie mich dann wieder hier. Stellen Sie nun sicher, dass Sie diese Einstellungen sowohl für die Version ohne WWW als auch für die Version , in der dies bereits geschehen ist, aktualisieren sowohl für die Version ohne . Anschließend können Sie versuchen, auf Aktualisieren zu klicken, sobald Sie dies getan haben Sie haben es richtig konfiguriert. Da haben wir's. Ich habe hier ein paar Probleme mit dem Design auf der Homepage, also werde ich sie in Cursor einspeisen, um sie zu beheben. Ich hoffe, Sie haben keine Probleme, oder falls doch, nehmen Sie sich Zeit, diese Probleme zu beheben , und dann werden wir zurückkommen, um den Stripe-Webhook korrekt einzurichten , damit die gesamte App ordnungsgemäß funktioniert Aber herzlichen Glückwunsch, dass Sie Ihre App veröffentlicht haben. 35. Stripe-Integration abschließen: Ein letzter Schritt, um unsere App so einzurichten , dass sie bereit ist, Zahlungen anzunehmen, besteht darin, unseren Stripe-Webhook während der Produktion einzurichten Wenn Sie sich erinnern, können wir anhand des Webhooks nachvollziehen, ob ein Nutzer tatsächlich bezahlt hat , und ihm dann das Abonnement oder den Vorteil, den Plan usw. geben. Ein Cursor- oder AI-Agent, bitte ihn, dir Anweisungen zu geben, wie du den Webhook für die Produktion deiner App einrichten Ich gebe Ihnen Schritt für Schritt, basierend auf dem, was Sie tun müssen. In meinem Fall wurde mir gesagt, dass ich diesem Schritt folgen und zum Stripe-Dashboard gehen muss . Hier ist ein Stripe-Dashboard, gehen Sie zu Entwicklern und klicken Sie dann auf Webhooks, dann möchten Sie ein Ziel hinzufügen Sobald Sie das Ziel hinzugefügt haben, ist dies der Link, den Sie möchten, aber wir benötigen ihn in einer Sekunde Für meine App muss nur die Checkout-Sitzung abgeschlossen sein. Ich suche nach dem Punkt Checkout Session Dot Completed, und schon wird er angezeigt. Für Ihre App könnte das anders sein. Dies ist das Ereignis, das der Webhook abhört. In meinem Fall wollen wir immer dann, wenn eine Checkout-Sitzung erfolgreich abgeschlossen wurde, eine Checkout-Sitzung erfolgreich abgeschlossen wurde, weitermachen und auf diesem Endpunkt darauf achten Die Endpunkt-URL ist die, die Sie von der App erhalten haben, aber Sie möchten diese natürlich durch Ihre Domain abzüglich der Trip.com-Slash-APIs als Webhook ersetzen . Dann klicke ich auf Create Destination und stelle sicher, Dann klicke ich auf Create Destination und stelle dass Sie dieses Geheimnis kopieren und dann zu Ihrem Deployment zurückkehren und zu den Einstellungen auf Erslls gehen Stellen Sie sicher, dass Sie Ihr Projekt auswählen, zu Ihren Einstellungen gehen, zu Umgebungsvariablen und dann weitermachen und Umgebungsvariable hinzufügen möchten wechseln und dann weitermachen und Umgebungsvariable hinzufügen möchten. Wenn Sie sich daran erinnern, sollte es in Ihrem Code so lauten Stripe underscore webhook underscore Stellen Sie sicher, dass Sie das kopieren und dann den Wert einfügen , den Sie von Stripe erhalten haben Klicken Sie auf Speichern und dann auf Erneut bereitstellen. Jedes Mal, wenn Sie Änderungen an Ihren Umgebungsvariablen vornehmen, möchten Sie mit der erneuten Bereitstellung fortfahren , sodass Ihrer letzten Bereitstellung dieser Umgebungsschlüssel hinzugefügt wird Dann können Sie in Ihrem Projekt den Überblick über Ihre Bereitstellungen behalten . Wir sehen, dass sie gerade erstellt werden Sobald Sie also gepusht haben, nur noch herausfinden , ob dieser Stripe-Webhook funktioniert, indem Sie eine Testzahlung Sie können entweder Ihre Kreditkarte herausziehen und verwenden oder Sie können hier in Stripe einen Gutschein erstellen, einen Gutschein für 100% Rabatt einrichten und dann sicherstellen, dass Sie Cursor anweisen Aktionscodes zu aktivieren Und sobald Sie das getan haben, können Sie einfach Ihren Gutscheincode eingeben und dann einfach testen, Ihr App-Abonnement oder Ihre Preisgestaltung funktioniert. Jetzt, wo das geklärt ist, haben wir unsere App zum Laufen gebracht. Du kannst das mit Freunden teilen. Jetzt verspreche ich, Ihnen zu zeigen, wie das OG-Bild und die Metadaten, die wir eingerichtet haben, aussehen. Wenn du also deinen Link zu deiner App in, sagen wir mal, eine Nachricht einfügst, kannst du hier sehen, dass Tripvela die Reisekosten problemlos aufteilt Jedes Mal, wenn jemand tripvela.com teilt, wird es so angezeigt, was großartig aussah Ich könnte in Zukunft die Änderung vornehmen, anstatt nur den Namen hier drüben zu haben, vielleicht habe ich eine Beschreibung dessen, was das Produkt Damit ist die Zusammenstellung unseres Produkts abgeschlossen. Der nächste Schritt besteht darin, den Leuten tatsächlich davon zu erzählen und Verkäufe zu erzielen 36. Was kommt als Nächstes?: Herzlichen Glückwunsch, dass Sie es im Kurs so weit geschafft haben. Ich möchte ein bisschen darüber sprechen was von hier aus passiert. Wo gehen wir hin? Was machst du mit deinem Produkt und wie stellst du sicher, dass du mit deinem Erfolg auf Kurs bleibst und wie Erfolg von nun an überhaupt noch aussieht? Viele Menschen gehen davon aus, dass Tausende von , nur weil sie ein Produkt auf den Markt Benutzern, nur weil sie ein Produkt auf den Markt bringen , es sofort nutzen werden. In Wirklichkeit sind die Zahlen viel geringer und es dauert länger. Abgesehen davon, dass Sie mit Ihren Fortschritten einfach mehr Patienten benötigen, müssen Sie verstehen, dass , in den nächsten Wochen oder Monaten es Ihr Ziel ist, in den nächsten Wochen oder Monaten so viel Feedback wie möglich von den ersten 50 bis es Ihr Ziel ist, in den nächsten Wochen oder Monaten so viel Feedback wie möglich von den ersten 50 bis 100 Benutzern zu erhalten, das Sie bekommen können Konzentrieren Sie sich noch nicht darauf , Tausende zu erreichen. Sprechen Sie mit diesen 50 bis 100 Benutzern, stellen Sie sicher, dass Sie Ihr Produkt verbessern , hören Sie ihnen zu und verbessern Sie sich auf der Grundlage des Feedbacks, das sie Ihnen tatsächlich geben. Das eigentliche Ziel besteht darin, Ihr Produkt in seiner aktuellsten Version mit anderen zu teilen Ihr Produkt in seiner aktuellsten Version mit und das Feedback zu nutzen um ein Produkt zu entwickeln, das Sie später auf Tausende von Benutzern skalieren können. Feedback von echten Benutzern ist ein enormer Hebel, und viele Gründer ignorieren dies, aber wenn Sie es richtig nutzen, werden Sie ein Produkt für ein bestimmtes Zielgruppensegment oder den Zielmarkt entwickeln für ein bestimmtes Zielgruppensegment oder den , das Sie Laufe der Zeit skalieren und schnell erweitern können. Im Moment machen wir einige Annahmen zu unserem Produkt, aber wir stellen es den Nutzern vor, wir erfahren tatsächlich, wer unser echter Kunde ist und was ihnen an unserem Produkt wirklich wichtig ist. Sobald wir diese Antworten erhalten haben, können wir uns auf das Marketing konzentrieren und uns darauf konzentrieren, die richtigen Funktionen für sie zu entwickeln. Sie erfahren auch, welche Marketingmethoden für Sie am besten geeignet sind. Ist es ein Video, oder ist es ein Blogbeitrag, oder ist es eine Partnerschaft oder vielleicht ist es direkte Öffentlichkeitsarbeit Indem Sie experimentieren und lernen welche Methode am besten funktioniert, werden Sie lernen, worauf Sie sich konzentrieren müssen, damit Sie, wenn Sie Geld für Ihr Marketing ausgeben, Ihr Geld nicht verschwenden und es richtig für die richtigen Marketingkanäle ausgeben es richtig für die Suchen Sie nach guten Signalen von Ihrem Produkt, z. B. wenn Nutzer Ihr Produkt teilen, über Ihr Produkt sprechen, antworten und Ihnen Feedback zu Ihrem Produkt geben Manchmal müssen Sie sich selbst aus dem Weg gehen, um mit Kunden sprechen zu können und Feedback direkt von ihnen zu erhalten. Manchmal ist es Kunden vielleicht nicht wichtig genug, Ihnen Feedback zu geben, es sei denn, Sie fragen danach. Stellen Sie also sicher, dass Sie sich an sie wenden und nach ihren Erfahrungen fragen. Einige davon könnten als automatische E-Mails eingerichtet werden , die von Ihrer App ausgehen. Achten Sie darauf, E-Mails häufig zu nutzen, insbesondere für Ihre bestehende Benutzerbasis. werde mein Produkt Tripvela weiterhin in den verschiedenen Reisegemeinschaften teilen und direkte Kontakte knüpfen, um die ersten hundert Nutzer zu erreichen und von dort aus Möglichkeiten zu erkunden, wie ich vielleicht digitale Nomaden ansprechen kann, die in ich vielleicht digitale Nomaden ansprechen kann, die vielleicht digitale Nomaden ansprechen den sozialen Medien eine Fangemeinde haben, Inhalte zu erstellen, um sie für mich zu Das werden meine nächsten Wochen und Monate sein und ich hoffe, Sie nutzen alle Tools und Marketingmethoden , über die wir gesprochen haben und Ihr Produkt auf weit über Tausende von Benutzern ausweiten und wünsche Ihnen alles Gute damit. Danke, dass du an dem Kurs teilgenommen hast.