Erstellen von Apps und Websites mit KI | Ein praktischer Leitfaden für Vibe-Programmierung

1. Willkommen im Kurs: Wir leben in einer Zeit, in Einführung profitabler Produkte leichter denn je ist . Sie benötigen kein riesiges Budget. Sie müssen niemanden einstellen und Sie müssen definitiv nicht wissen, wie man programmiert. Das heißt, wenn Sie ein Freelancer sind, eine Agentur leiten, ein Startup gründen oder einfach nur jemand mit einer Produktidee, aber keine Ahnung haben, wie man sie baut Dieser Kurs ist für dich. Hallo, alle zusammen. Ich bin Adi. In diesem Kurs zeige ich Ihnen, wie Sie eine wirklich funktionierende Web-App erstellen, eine, die Sie tatsächlich verwenden oder sogar verkaufen können , ohne eine einzige Codezeile schreiben zu müssen. Nun, ich bin kein Backend-Entwickler, und so etwas mit Benutzerauthentifizierung, echten Datenbanken und einer übersichtlichen Benutzeroberfläche zu erstellen so etwas mit Benutzerauthentifizierung, , würde normalerweise ein Team oder Monate des Lernens erfordern Aber heute werden wir es in weniger als einer Stunde schaffen, indem wir einfach ein Gespräch mit KI führen, und es gibt viele KI-gestützte Plattformen, und ich habe einige getestet Für diesen Kurs verwenden wir HostingerHizons. Das Besondere daran ist, dass es von HostingerH entwickelt wurde. Wir sind seit über 20 Jahren im Hosting-Bereich und bedienen fast Wenn sie also versprechen um das Hosting von Domains und die Skalierung zu kümmern, haben sie tatsächlich die Infrastruktur Wir werden die App Schritt für Schritt erstellen indem wir die KI mit Anweisungen anleiten, die Basisstruktur erstellen, die Funktionalität verfeinern, das die Basisstruktur erstellen, die Funktionalität verfeinern, das Layout anpassen und die Funktionen nach und nach verbessern Das Projekt, ein einfacher, aber funktionaler Rechnungsmanager für Damit können sich Benutzer anmelden, Kunden verwalten, Rechnungen erstellen und diese sogar als PDF herunterladen Und ja, wir werden Superbse für die Benutzerauthentifizierung und die sichere Datenspeicherung über die gesamte KI-Schnittstelle integrieren Superbse für die Benutzerauthentifizierung und sichere Datenspeicherung über die gesamte KI-Schnittstelle Backend-Codierung erforderlich. Am Ende dieses Kurses werden Sie wissen, wie Sie mit einer KI sprechen, um nützliche Web-Apps oder Websites zu erstellen, wie Sie Ihre Eingabeaufforderungen strukturieren, um bessere Ergebnisse zu erzielen, wie Sie Tools wie Super Base ohne tiefgründige Kenntnisse integrieren Super Base ohne tiefgründige Kenntnisse und wie Sie schnell echte Produkte entwickeln Idee, auf der Sie sitzen und von der Sie immer wieder sagen , dass Sie sie eines Tages umsetzen werden, nun, Sie können sie heute auf den Markt bringen Keine Ausreden mehr, nicht technisch genug zu sein oder nicht über das Budget oder das Team zu verfügen Lass uns anfangen. 2. Kurzübersicht über Hostinger Horizons: Okay, bevor wir in den Modus zur App-Erstellung wechseln, möchte ich Ihnen einen kurzen Überblick über HostingerHorizon geben, damit Sie verstehen, womit damit Sie Horizons ist im Grunde so, als hätte man einen Entwickler, Designer und Texter Designer Sie chatten einfach damit und es erstellt tatsächliche Websites und Webanwendungen mit Datenbanken, Benutzerkonten, Zahlungsabwicklung und all dem. Es gibt andere Plattformen, die ähnlich funktionieren, aber was Hostinger auszeichnet ist, dass alles integriert ist Sie benötigen kein separates Hosting, E-Mail-Dienste und keine SSL-Zertifikate, Hostinger kümmert sich um alles Wenn Sie also bereit für den Start sind, können Sie Ihre Domain und Ihr Hosting von derselben Plattform aus verwalten , anstatt mit mehreren Diensten jonglieren Nachdem das geklärt ist, möchte ich Ihnen zeigen, wie Sie anfangen können. Als allererstes müssen Sie ein kostenloses Konto bei Hostinger erstellen Sie müssen also auf tohstinger.com gehen und auf Mein Konto klicken. Dadurch wird eine Seite geöffnet, auf der Sie ein erstellen oder sich mit Ihrem bestehenden Konto anmelden Das habe ich jetzt schon gemacht. Sobald Sie angemeldet sind, werden Sie zu Ihrem Dashboard weitergeleitet. Hier kannst du dein gesamtes Hosting-Erlebnis kontrollieren. Um mit Horizons zu beginnen, können Sie gleich hier in der linken Seitenleiste auf Horizons klicken Wenn Sie bereits Projekte haben, die mit Horizons erstellt wurden, werden diese hier aufgelistet Andernfalls können Sie einfach auf Projekte hinzufügen klicken. Alternativ können Sie direkt zu hoizons dothstingor.com gehen und sofort mit der Erstellung beginnen und Nun, die Oberfläche hier ist sehr, sehr einfach. Hier schreiben Sie die Aufforderung, und es gibt tatsächlich drei Möglichkeiten, mit der KI zu kommunizieren. Das kannst du per Chat tun. Sie können das tun, indem ein Bild hochladen, oder Sie können die Stimme verwenden, was ziemlich cool ist Jetzt unterstützt Horizons tatsächlich über 80 Sprachen. Sie können also in Ihrer Muttersprache denken und sprechen, was einfach fantastisch ist Nun, nur um Ihnen eine Vorstellung davon zu geben, wie das funktioniert, lassen Sie uns eine sehr einfache Demo erstellen, richtig, ein einfaches Testprojekt , nur um die Dinge in den Griff zu bekommen . Also hier drin werde ich sagen, eine Landingpage für eine SAS namens Time Tracker erstellen, und ich werde ihr keine weiteren Details geben. Also werde ich einfach auf Senden klicken und die KI hat gerade angefangen, ihren Job zu machen. Es ist eigentlich eine sehr kommunikative KI. Ich habe mir gerade gesagt, lass uns gehen. Ich bin dabei, eine unglaubliche Time-Tracker-SAS-Landingpage zu erstellen, und sie sagt mir genau, was sie tut. Und das wird ein bisschen dauern, bis die KI alle Seiten und das ganze Design erstellt. Und Sie können genau hier sehen, dass es daran arbeitet. Sie haben hier ein paar Tipps, die Sie durchgehen können, während Sie warten. Und da wir warten, möchte ich Ihnen nur sagen, dass diese Plattform tatsächlich in viele Dienste wie PayPal, Stripe, Super Base und sogar Google AdSens integriert Stripe, Super Base und sogar Google AdSens Das gibt Ihnen also wirklich die Möglichkeit, sehr komplexe Apps zu erstellen, und Sie werden in diesem Kurs tatsächlich einen Vorgeschmack darauf bekommen , wenn wir die Superbase-Integration für die Benutzerauthentifizierung und den sicheren Speicher für unsere Rechnungs-App verwenden die Superbase-Integration für die Benutzerauthentifizierung und den sicheren Speicher für unsere Rechnungs-App In Ordnung, die KI scheint also fertig zu sein. Es sagt mir, dass alles erledigt ist, Ihre atemberaubende SAS-Landingpage zur Zeiterfassung bereit ist, Sie zu beeindrucken Und lassen Sie uns sehen, was sie geschaffen hat. Und lassen Sie mich den Zoom hier zurücksetzen , damit wir das Ganze sehen können. Also einfach so, es hat aus einem Satz, den ich ihr gegeben habe, eine Landingpage erstellt Satz, den ich ihr gegeben habe, eine , komplett mit Animationen. Ich habe hier sogar Preistabellen und Schaltflächen, und es wurde alles erstellt, von Text über Bilder bis hin zum Layout. Und Sie können damit sogar im Vollbildmodus arbeiten und eine Vorschau anzeigen. Und Sie können sich auch die mobile Ansicht ansehen. Es erstellt also standardmäßig ansprechende Layouts, obwohl ich es nicht darum gebeten , was ziemlich cool ist. Das ist es also, was es dir standardmäßig bietet. Jetzt ist es Ihre Aufgabe, zu überprüfen, was dadurch geschaffen wurde, und damit zu beginnen, Dinge zu ändern und sie an das anzupassen, was Sie für das Projekt benötigen. Wenn Sie Fehler oder Fehler im Layout entdecken , können Sie die KI einfach darauf hinweisen , und sie wird ihr Bestes tun, um sie zu beheben. Wenn ich zum Beispiel nach unten zum Preisbereich scrolle, können wir sehen, dass das beliebteste Logo direkt unter der Preisliste steht, und das möchte ich nicht. Lassen Sie uns das der KI also tatsächlich sagen. Ich werde sagen, dass ich einen Fehler entdeckt habe. Das beliebteste Logo in der Preisübersicht befindet sich unter der Preisliste, und es muss auch darüber stehen. Bitte repariere es. Treten Sie ein, und jetzt wird die KI das interpretieren und ihr Bestes tun, um das Problem zu beheben. Und sie wird sich tatsächlich mit dir unterhalten. Es wird es dir gleich sagen. Du hast es. Ich mache mich sofort daran, das beliebteste Abzeichen im Preisbereich zu reparieren . Diesmal werde ich perfekt über der Karte stehen. Mal sehen, ob es das tatsächlich tut. Okay, also die KI hat mir gesagt , dass alles erledigt ist. Lass es uns überprüfen. Und sicherlich liegt es jetzt über der Preisliste. Und dann können Sie weitermachen und, Sie wissen schon, ihn bitten, weitere Änderungen vorzunehmen. Wenn Sie zum Beispiel möchten, dass dies die Preisliste überlagert, können Sie ihn einfach darum bitten, und das sollte eine sehr einfache Lösung sein Oder wenn es irgendwelche anderen Änderungen gibt , die Sie vornehmen möchten, ich weiß nicht, das Layout, die Farben, die Typografie, können Sie ihn im Grunde alles fragen, was Sie wollen , und das wird es tun Nehmen wir an, Sie haben jetzt ein Produkt, mit dem Sie zufrieden sind, ist der nächste Schritt die Veröffentlichung Lassen Sie mich kurz darauf eingehen Sie müssen hier in die obere rechte Ecke gehen und auf Veröffentlichen klicken. Hostinger Horizons können Sie Ihr Projekt tatsächlich auf einer kostenlosen temporären Subdomain veröffentlichen , die Sie hier sehen Für mich ist es für dieses Projekt hellgrün, wahre Zahlen stehen auf hostingsite.com . Und Sie können jederzeit darauf klicken, um Ihre Website live zu sehen. Und das ist großartig, wenn Sie Ihre Arbeit Ich weiß nicht, Ihren Kunden, Ihren Stakeholdern, Ihrem Team präsentieren möchten Ihre Arbeit Ich weiß nicht, Ihren Kunden, Ihren Stakeholdern, . Sie haben einen Live-Link, über den Sie ihnen zeigen können, was Sie getan haben. Sie können auch eine benutzerdefinierte Domain hinzufügen. diesem Grund habe ich bereits gesagt , dass Hostinger quasi alles für Sie erledigt denn auch wenn Sie derzeit keine Domain haben, können Sie diese über Hostinger kaufen und dann auf Ihr Projekt anwenden Hier müssen Sie dafür nicht woanders hingehen und dann zurückkommen und die gesamte Domainzuweisung erledigen Es ist alles eingebaut, und ich denke, das ist ein großer Vorteil Und noch eine Sache, die ich erwähnen wollte , bevor wir die Dinge abschließen Wenn Sie irgendwann nicht weiterkommen oder Hilfe bei der Einrichtung benötigen, können Sie sich rund um Uhr vom Kundenerfolgsteam von Hostinger Zögern Sie also nicht, sie zu kontaktieren, wenn Sie Unterstützung benötigen Okay, jetzt, da Sie gesehen haben, wie intuitiv Horizons für einfache Projekte ist, lassen Sie uns etwas Ehrgeizigeres wie unsere Rechnungsmanager-App in Angriff nehmen wie unsere Rechnungsmanager-App Das wird in der nächsten Lektion behandelt. 3. Was wir bauen: Wie ich bereits erwähnt habe, entwickeln wir eine Invoice Manager-App, ein Projekt, das sich realen Herausforderungen wie Benutzerauthentifizierung, Datenbanken und Integrationen von Drittanbietern befasst Wenn Sie das bauen können, können Sie fast alles bauen. Lassen Sie mich Sie zunächst durch die App führen, die wir anstreben, und dann zeige ich Ihnen, wie Sie eine solide Eingabeaufforderung erstellen, um die KI zum Laufen und dann zeige ich Ihnen, wie Sie eine solide Eingabeaufforderung erstellen zu bringen. Das habe ich als meine Idee für die Rechnungs-App aufgeschrieben. Weißt du, wenn du meine Gedanken schnell aufschreibst, kannst du es dir wie einen Gehirnabfall vorstellen, im Grunde einfach, Ideen schnell aufzuschreiben Also möchte ich diese App machen, wie ein Rechnungstool für Freelancer, und ich denke darüber nach, sie vielleicht Freelancer Bill zu nennen Sie muss nicht schick sein, sie muss nur funktionell sein. Benutzer müssen sich anmelden, vielleicht über Superbse. Dann können sie Kunden hinzufügen und Rechnungen erstellen. Die App benötigt ein Dashboard mit einer Liste von Rechnungen und möglicherweise einigen Statistiken wie Gesamtumsatz, Anzahl der Kunden, Ausgabenrechnungen usw. Jede Rechnung hat eine Präfixnummer. Es wird automatisch inkrementiert, etwa INV, 001, 002 usw. Wenn ich jetzt eine Rechnung erstelle, möchte ich den Kunden aus einem Drop-down-Menü auswählen können Ich möchte Einzelposten haben , die eine Beschreibung, die Menge und den Preis haben, genau wie jede andere Rechnung. Die Rechnungssumme sollte automatisch aktualisiert werden. Ich kann den Status jeder Rechnung entweder auf „Neu“ setzen, was die Standardeinstellung „ Gesendet“ oder „Bezahlt“ ist, und ich möchte die Rechnung als PDF herunterladen können . Und vielleicht kann ich später eine E-Mail-Funktion hinzufügen , sodass ich die Rechnung direkt aus der App an die Kunden senden kann . Außerdem hätte ich gerne eine Seite für die Kunden. Ich möchte Kunden hinzufügen, bearbeiten und löschen, und dafür benötige ich einige grundlegende Informationen wie Name, E-Mail, Telefon und Adresse. Und ich hätte auch gerne eine Einstellungsseite, auf der sie ihre Unternehmensinformationen eingeben und auch das Rechnungspräfix ändern können . Sauberes Layout, vielleicht mit einer Seitenleisten-Navigation, und sehr wichtig, alle Daten sind an den angemeldeten Benutzer gebunden Das ist also das, worüber ich für die App nachdenke. Es ist wie ein grober Plan. Das ist definitiv keine gute Idee für eine Aufforderung, weil es irgendwie überall ist. Und beim Schreiben von KI-Eingabeaufforderungen. Sie müssen dies auf eine bestimmte Weise tun wenn Sie die besten Ergebnisse erzielen möchten Und dafür werde ich Ihnen einige Tipps und Tricks geben , wenn Sie die Aufforderung für dieses Projekt schreiben. Lassen Sie uns also ein neues Projekt oder ein neues Textdokument erstellen, ich sollte sagen, für die Aufforderung, und fangen wir an. Der allererste Tipp ist, mit einem klaren Ziel zu beginnen und genau zu sagen, was Sie erstellen möchten und was es bewirken soll. Erstellen Sie also zum Beispiel eine Web-App für Freelancer, um Rechnungen zu verwalten und zu versenden In unserem Beispiel würde der erste Satz also ungefähr so aussehen Hallo, ich würde gerne eine Web-App für Freelancer namens Freelancer Bill erstellen für Freelancer namens Freelancer Bill Die App soll Benutzern helfen, Kunden und Rechnungen an einem Ort zu verwalten Kunden und Rechnungen an einem Ort Also eine sehr klare Beschreibung dessen, was wir erreichen wollen. Danach sollten wir die wichtigsten Merkmale als kurze scanbare Teile auflisten die wichtigsten Merkmale als kurze scanbare Teile Und die Verwendung von Aufzählungspunkten ist eine großartige Idee. die Kernfunktionen angeht, möchte ich mich also sicher anmelden und authentifizieren, Superbse verwenden, eine Ansicht erstellen, Rechnungen und Kunden bearbeiten und löschen, Rechnungen als PDF herunterladen und schließlich alle Daten an die angemeldeten Benutzer gebunden Das sind die wichtigsten Funktionen. Danach können wir mit der Beschreibung der Seiten beginnen , die die KI erstellen soll. Und in meinem Fall sehen diese ungefähr so aus. Ich möchte also eine Dashboard-Seite mit einer Tabelle, auf der alle Rechnungen mit Bearbeitungs- und Löschaktionen angezeigt werden. Und ich möchte auch einige Übersichtsstatistiken, die mir die gesamte Rechnungsnummer, den Gesamtumsatz, die Gesamtzahl der Kunden und auch den ausstehenden Betrag anzeigen. Die zweite Seite ist die Bearbeitungsseite für die Rechnungserstellung oder das Rechnungsformular, wie ich es hier nenne. Ich hätte also gerne ein Drop-down-Menü, um einen Kunden auszuwählen , mehrere Einzelposten für Beschreibung, Menge, Einzelpreis hinzuzufügen mehrere Einzelposten für Beschreibung, Menge, , die Gesamtsummen automatisch zu berechnen, Rechnungsnummer mit benutzerdefiniertem Präfix automatisch zu generieren, und ich gebe ihm einige Beispiele dafür, was ich damit meine Außerdem hätte ich gerne die Option, den Rechnungsstatus, „ Neu gesendet“ oder „Bezahlt“ auszuwählen Neu gesendet“ oder „Bezahlt Dann hätte ich auf der Kundenseite gerne eine Liste aller Kunden mit der Möglichkeit, sie hinzuzufügen, zu bearbeiten und zu löschen. Jeder Kunde hat einen Namen, eine E-Mail-Adresse und eine Telefonnummer. Wie Sie sehen können, beschreibe ich sehr detailliert was ich erreichen möchte und wie diese bestimmte Seite aussehen soll. Schließlich die Einstellungsseite, die Unternehmens- oder persönlichen Informationen, die als Absender auf den Rechnungen verwendet wurden, sowie die Möglichkeit, ein benutzerdefiniertes Präfix für Rechnungsnummern zu definieren , aufgeführt sind. Und schließlich habe ich einige technische Hinweise hinzugefügt. Ich sagte, verwenden Sie Superbse für die Benutzerauthentifizierung und Datenspeicherung, und ich habe auch einige Designeinstellungen hinzugefügt, falls diese wichtig sind, oder? Ich sagte, das Design sollte sauber, modern und ansprechend sein und ein helles Farbschema verwenden Am Ende sagte ich: Lassen Sie uns mit der Generierung der Grundstruktur und der Benutzeroberfläche beginnen , und ich werde alles Schritt für Schritt in den Folgeanweisungen verfeinern Schritt in den Folgeanweisungen Das ist nicht notwendig, aber ich fand es einfach eine nette Ergänzung So sieht die endgültige Eingabeaufforderung aus. Wir sind von dieser App-Idee, die im Grunde nur eine zufällige Sammlung von Gedanken war , zu einer strukturierteren Aufforderung übergegangen im Grunde nur eine zufällige Sammlung von Gedanken war , zu , die die KI darüber informiert , was wir erstellen wollen und welche Ziele das Projekt verfolgt. Nachdem wir das erledigt haben, kopieren wir diese Aufforderung und springen zurück zu Horizons, fügen das ein und beginnen mit der Erstellung unserer Rechnungs-App Lass uns gehen. Und während das funktioniert, wollte ich noch eine weitere Sache erwähnen, und Sie können sich das als bewährte Methode vorstellen. Haben Sie keine Angst vor Wiederholungen, oder? Sie müssen nicht vom ersten Versuch an alles perfekt machen vom ersten Versuch an alles perfekt Du musst das wie ein Gespräch mit der Plattform behandeln . Im Grunde genommen die KI. Sie also zunächst die Grundlagen für Ihre App und iterieren Sie dann Fügen Sie dann Funktionen hinzu und nehmen Sie Änderungen vor. Wie gesagt, behandle es wie ein Gespräch. Es ist das Beste, was du tun kannst. Und hier ist noch ein toller Tipp, diesmal von Hostinger Um die besten Ergebnisse zu erzielen , sollten Sie Ihre Nachrichten einfach, kurz und auf jeweils eine Änderung konzentrieren Wenn Sie also Änderungen vornehmen möchten, schreiben Sie keine Nachricht mit der Aufschrift: Nun, ändern Sie dies und dann das und nehmen Sie dann eine weitere Änderung an diesen Elementen vor. Nehmen Sie eine Änderung nach der anderen vor. Das verwirrt die KI nicht auf diese Weise. Und es wird für Sie auch einfacher sein, alles zu debuggen und zu testen, denn wenn Sie Dinge mit solchen Plattformen erstellen, werden Sie feststellen, dass Sie eine Menge Tests durchführen müssen, oder Nachdem die KI eine bestimmte Änderung vorgenommen hat, die du die beiden fragst , musst du testen und sehen, ob sie korrekt implementiert wurde Und in einigen Fällen müssen Sie testen, ob sich diese bestimmte Änderung nicht auf andere Teile der App oder deren Funktionalität ausgewirkt hat. Also, weißt du, es ist ein Prozess, aber es ist definitiv besser, weißt du, ein Team von Leuten einzustellen, riesige Budgets für die Entwicklung einer App auszugeben und vor allem Wochen und Monate damit zu verbringen, etwas zu entwickeln. Mit dieser Art von Vibe-Coding, könnte man es wohl nennen, ist es wirklich einfach, man kann es selbst machen Wir sind also fast fertig , wo die KI fast fertig ist , um unsere Grundlage für die App zu schaffen Ich bin wirklich gespannt, was sie gebaut hat. Okay, alles erledigt, es scheint, dass Ihre Rechnungs-App für Freiberufler bereit ist, zu rocken. Lassen Sie mich wissen, ob Sie Anpassungen wünschen. Okay, wir sehen also im Grunde eine sehr einfache Anmeldeseite, weil ich in der Aufforderung gesagt habe, dass, okay, Benutzer angemeldet sein müssen, um etwas in der App tun zu können. Der erste logische Schritt besteht also darin, die Benutzer aufzufordern, sich anzumelden. Wir können also unsere E-Mail-Adresse und unser Passwort eingeben . Wenn wir auf diese Links klicken, wechseln sie einfach von der Anmeldung zur Kontoerstellung. Wir haben hier auch eine kleine Einführung in die App mit den grundlegenden Kernfunktionen. Funktioniert noch nicht , weil wir keine aktive Superbse-Integration haben Die KI hat mir hier sogar gesagt, dass Sie diese Schritte ausführen müssen, wenn Sie bereit sind, auf Super Base umzusteigen , um sichere Authentifizierung und Datenspeicherung zu Wie wäre es, wenn wir das als Nächstes machen? Weil, weißt du, Integration von Super Base ist wahrscheinlich das Technischste, was wir für diesen Build tun müssen. Also wir sehen uns in der nächsten Lektion. 4. Integration von Supabase und Durchführung von ersten Tests: Okay, also Super Base, was ist das? Nun, einfach ausgedrückt ist es eine Entwicklungsplattform. Weitere Informationen dazu finden Sie auf superbs.com Wir werden nicht ins Detail gehen , weil ich ehrlich gesagt auch nicht viel darüber weiß Ich bin von Beruf kein Backend-Entwickler, also habe ich SupaBase noch nie benutzt Bei KI-Tools wie Hosting oder Horizons hält mich das jedoch nicht davon ab, eine App damit zu erstellen , da es sehr einfach ist, sie mit Ihrem Horizons-Projekt zu verbinden Ihrem Horizons-Projekt zu Also hier ist, wie du es machst. Sie sind wieder hier auf der Horizons-Plattform und würden nach oben rechts gehen, und würden nach oben rechts gehen wo Integrationen stehen Sie würden darauf klicken und SupaBase auswählen. Es sagt Ihnen sogar, dass Sie Benutzeranmeldungen, Anmeldungen, Datenspeicher und andere Backend-Funktionen hinzufügen können Anmeldungen, Datenspeicher und andere Backend-Funktionen Klicken Sie also hier darauf, dass Sie aufgefordert werden, eine Organisation und ein Projekt auszuwählen Nun, ich habe hier bereits einige definiert , weil ich zuvor einige Tests mit Super Base durchgeführt habe. Aber wenn Sie es zum ersten Mal verwenden, wird es für Sie anders aussehen. Im Wesentlichen müssen Sie eine Organisation gründen. Für mich heißt es Hostinger Horizons Org. Du kannst es nennen, wie du willst. Und nachdem Sie das erstellt haben, können Sie ein neues Projekt erstellen. Lassen Sie uns das jetzt zusammen machen, und das bringt Sie zur Super Base-Website, auf der Sie sich anmelden müssen. Wenn Sie noch kein Konto haben, erstellen Sie einfach eines. Es ist kostenlos. Ich klicke auf Jetzt registrieren und gebe eine E-Mail-Adresse und ein Passwort ein und klicke auf Anmelden. Jetzt müssen wir also unsere E-Mails überprüfen , um die Registrierung zu bestätigen. Die E-Mail sieht ungefähr so aus. Sie klicken einfach auf E-Mail-Adresse bestätigen. Und in diesem Schritt wird mir Super Base tatsächlich sagen, dass ich eine neue Organisation gründen soll. Klar, lass uns das machen. Ich sage das Team von Audi. Ich persönlich kann vorerst den kostenlosen Tarif wählen. Das ist großartig für meisten Leute, die gerade erst anfangen. Es ist mehr als genug. Klicken wir also auf Organisation erstellen. Und dann wähle ich diese Organisation und nenne das Projekt Freelance Bill. Und wir können hier ein gutes Passwort setzen, und das wird für die eigentliche Datenbank verwendet. Dann können Sie die Region auswählen , die Ihren Benutzern am nächsten ist, und Sie tun dies, um die beste Leistung zu erzielen. Ich bin in Europa ansässig, also wähle ich einfach Central U und erstelle dann ein neues Projekt. Okay, cool. Sobald das in Superbse erledigt ist, müssen wir wieder unsere Horizonte hosten und das Projekt auffrischen Und dann müssen wir zurück zu Integrationen gehen. Klicken Sie auf Sup Base Dann klicken wir auf Weitere Organisation hinzufügen, weil ich hinzufügen möchte , die wir gerade erstellt haben. Und hier erhalte ich ein Pop-up mit der Bitte, den API-Zugriff für Hosting oder Horizons zu autorisieren, und ich wähle die Addis-Teamorganisation aus, die ich gerade Addis-Teamorganisation aus, die ich Also werde ich auf Hosting Horizons autorisieren klicken. Und jetzt ist diese neue Organisation verbunden. Und ich kann das freiberufliche Build-Projekt sehen und klicke einfach hier in der Seitenleiste auf Connect Okay. Und es wird nach einer Bestätigung gefragt, und ich werde erneut klicken, Verbindung herstellen. Auf diese Weise habe ich der KI tatsächlich eine Aufforderung gegeben und ihr gesagt, bitte verbinde meine Rechnung für SuperbasePject, einen Freelancer, mit meiner Website, und ich habe Natürlich verbinde ich dein SuperbasePject sofort mit dem Freelancer Bill, sichere Benutzerauthentifizierung und einen robusten Datenspeicher für deine App ermöglicht robusten Und in dieser Zeit richtet die KI tatsächlich alles für Sie Sie legt die Datenbanktabellen für Rechnungen, Kunden und Einstellungen fest. Es integriert die Super Base-Authentifizierung für eine sichere Anmeldung und Registrierung und wechselt für die gesamte Datenverwaltung vom lokalen Speicher zu Superbse Ordnung. Jetzt sollte alles vollständig verbunden sein und ich sollte Zugriff auf meine App haben, und ich sollte in der Lage sein, Konten zu erstellen und mich anzumelden. Mal sehen, ob das der Fall ist. Lass uns damit beginnen , auf die Anmeldeseite zu gehen. Ich werde meinen vollständigen Namen als Pod eingeben. Und ich gebe meine E-Mail-Adresse als Adi Pordla gmail.com ein, gebe ein Passwort ein und klicke auf Konto erstellen Mal sehen, ob das funktioniert, ob das funktioniert. Es gab mir eine Benachrichtigung, dass es, Hoppla, verschwunden ist Im Grunde wurde ein Konto erstellt. Gehen wir jetzt zur Anmeldeseite. Klicken Sie auf Anmelden. Und es heißt, dass die E-Mail nicht bestätigt wurde. Okay, wir haben auch einige Fehler in der Plattform. Es heißt, es ist ein Superbase-Fehler. Es heißt, dass die E-Mail nicht bestätigt wurde. Mal sehen, ob ich tatsächlich eine Bestätigungs-E-Mail erhalten habe . Und ich habe es getan. Es heißt, bestätige deine Anmeldung, also lass uns das bestätigen Jetzt erhalte ich einen Fehler, dass der lokale Host sich weigert, eine Verbindung herzustellen. Okay, das ist bei Super Base eigentlich üblich. Ich habe einige Nachforschungen zu diesem Thema angestellt, und es ist eines der Probleme Sie konfrontiert werden könnten, wenn Sie so etwas bauen. Also hier ist, wie du es reparierst, richtig? Du gehst zurück zu Super Base, du gehst zur Authentifizierung. Sie gehen zur URL-Konfiguration und hier können Sie sehen , dass sie derzeit auf den lokalen Host 3.000 eingerichtet ist . Sie müssen dies in Ihre tatsächliche Website-Adresse ändern. Dafür kehren wir also zu Horizons zurück. Ja, wir veröffentlichen das, damit wir die URL bekommen, und, weißt du, wir können das öffnen und unsere Seite ansehen Und wir können das ohne den Login-Teil kopieren und wir können zu Super Base zurückkehren. Wir können das einfügen und die Änderungen speichern. Okay, als Nächstes müssen wir die Bestätigungs-E-Mail erneut senden. Das Problem ist, dass sie nur einmal gesendet wird. Also hier ist, was wir tun werden. Wir gehen zur Benutzerverwaltung in Super Base und ich wähle das aus, und ich sage, einen Benutzer löschen. Jetzt kehren wir zu unserer Plattform zurück. Lassen Sie uns eine kurze Aktualisierung durchführen. Und lass uns anmelden, aber diesmal verwenden wir eine andere E-Mail-Adresse. Also werde ich einfach diese verwenden und ein Konto erstellen. Okay. Es ist noch nichts passiert. Schauen wir uns Super Base an, um zu sehen, ob wir das getan haben, ja. Dies wurde hinzugefügt, und jetzt sollten wir der E-Mail nach dem Bestätigungslink suchen . Also lass uns das machen. Und sicherlich haben wir einen Bestätigungslink für diese E-Mail-Adresse. Lassen Sie uns das bestätigen. Das hat uns also irgendwohin gebracht. Wenn wir zu Super Base zurückkehren und eine Aktualisierung durchführen, sollten wir jetzt die Anmeldung sehen, wenn das passiert. Jetzt ist die E-Mail bestätigt und wir sollten uns bei der App anmelden können. Gehen wir also hier zurück zu Horizons. Wir klicken auf Anmelden Jetzt wird bei mir ein Web-App-Fehler erkannt. Bitten Sie Horizons, diesen Fehler für Sie zu beheben. Bitten wir es also, das Problem zu beheben. Okay, anscheinend ist alles behoben und es sagt mir, dass das Layout jetzt korrekt die Superbase-Authentifizierung verwendet und ich die alten Dateien bereinigt habe Nun, wie wäre es damit? Also was wir hier haben, wir haben eine freiberufliche Rechnung, ein Dashboard, Kunden, eine neue Rechnung und Einstellungen. Okay, und dann einige Kontoinformationen. Aber bevor ich weitermache, möchte ich die An - und Abmeldefunktion testen , um zu sehen, ob sie ordnungsgemäß funktioniert Also werde ich auf Abmelden klicken. Cool. Okay, das bringt mich zurück zur Anmeldeseite. Lassen Sie uns also meine Anmeldeinformationen auswählen oder meine Anmeldeinformationen eingeben erneut anmelden. Und ja, Erfolg. Das scheint also gut zu funktionieren. Und das ist mir eigentlich ein bisschen zu hell. Bevor wir also weitermachen, lassen Sie uns unsere ursprüngliche Aussage ändern und diese App mit einem dunklen Schema erstellen. Also werde ich noch einmal mit der KI sprechen und sagen, dass ich meine Meinung geändert habe. Bitte verwende ein dunkles Farbschema für die App mit einer, sagen wir, mintgrünen Akzentfarbe , weil das für meine Augen einfach ein bisschen zu hell war . Das gibt uns auch die Möglichkeit, diese Art von Designänderungen zu testen denn das Ändern eines Farbschemas für eine App wie diese ist ein ziemlich großes Unterfangen. Es dauert ziemlich lange , wenn Sie es von Hand machen würden Wie Sie sehen können, erledigt die KI das in sehr kurzer Zeit. Es ist noch keine Minute vergangen , seit ich sie darum gebeten habe. Mal sehen, was es sich ausgedacht hat. Okay, der letzte Schliff. Und kurz bevor es fertig war, es mir gesagt, dass es so aussieht, als ob ein lästiger Fehler in die JSX-Dateien des Clients gerutscht ist, und ich werde ihn sofort entwirren und Sie wieder in einwandfreiem Zustand bringen wieder in einwandfreiem Zustand bringen Interessant. Während der Generierung und Änderung des Farbschemas wurde der Syntaxfehler in einer der Dateien festgestellt und behoben. Ordnung. Also das haben wir viel besser gemacht, offensichtlich nicht perfekt. Dem Designer und mir fallen sofort Dinge auf, die repariert werden sollten, aber wissen Sie, ich habe nicht wirklich genaue Angaben gemacht , wie das aussehen sollte. Ich habe ihm nur gesagt, verwende ein dunkles Farbschema, und das hat es getan. Und es sieht vorerst gut aus. Mir gefällt auch die Farbauswahl. Das ist nett. Wir haben hier einige sehr subtile Animationen. Und ja, das ist das Dashboard, das die Gesamtrechnungen, den Umsatz und den ausstehenden Betrag der Kunden anzeigt . Cool. Kunden. Noch keine Kunden, die hinzugefügt werden können. Neue Rechnung. Ich kann den Kunden aus dieser Liste auswählen. Ich kann den Status „ Neu senden bezahlt“ auswählen , genau wie ich es in der Aufforderung gesagt habe. Wir haben ein Rechnungsdatum. Wir haben ein Fälligkeitsdatum, cool, und dann die Einzelposten, und ich kann so viele hinzufügen, wie ich will. Und wenn ich auf Abbrechen klicke, komme ich zurück zum Dashboard und dann zu Einstellungen, Unternehmensinformationen, E-Mail-Adresse, Geschäftsadresse und Rechnungseinstellungen. Ich habe das Präfix der Rechnungsnummer. Kann ich eine Rechnung erstellen? Ich muss eigentlich zuerst einen Kunden erstellen. Fügen wir unseren ersten Kunden hinzu. Sagen wir Kunde eins, E-Mail, Kunde one@gmail.com. Telefon, Adresse, Kunde eine Adresse. Lass es uns hinzufügen. Cool. Also das wurde hinzugefügt. Und dann gehen wir zurück zum Dashboard und erstellen eine Rechnung. Okay, da steht: Keine Kunden gefunden, keine Kunden gefunden. Ein erster Test zeigt also , dass das meiste davon funktioniert, aber wir haben noch einiges zu tun. Gehen wir zurück zur Super Base und dann zur Datenbank. Und hier zeigt es uns tatsächlich die Struktur unserer Datenbanken. Wir haben also eine Tabelle für Rechnungen. Wir haben eine für Einstellungen und wir haben eine für Kunden, und Sie können sehen, wie diese miteinander verbunden sind. So hat zum Beispiel jede Rechnung eine Kundennummer, richtig, sodass ich Ihnen das direkt zeigen kann. Die Kunden-ID in der Rechnungstabelle ist mit der Idee des tatsächlichen Kunden verknüpft . Ja, interessant. Okay, hier scheint also alles in Ordnung zu sein. Gehen wir zurück zu den Tischen. Und wenn wir hier zu den Clients gehen und sie uns im Tabelleneditor ansehen, ja, wir können den Client sehen, den wir gerade in der App erstellt haben. Wir können den Namen, die E-Mail, das Telefon, die Adresse und den Zeitpunkt der Erstellung sehen die E-Mail, das Telefon, . Die Verbindung mit Superbse funktioniert also einwandfrei. Und das ist alles, was ich jetzt sehen wollte. Wir haben den wahrscheinlich kompliziertesten Teil des Prozesses abgeschlossen, und das war die Superbase-Integration. Lassen Sie uns nun die App Schritt für Schritt verfeinern und die notwendigen Änderungen vornehmen , um sie in den gewünschten Zustand zu bringen. Damit werden wir in der nächsten Lektion beginnen. 5. Fehler beheben und das Layout optimieren: Okay, das Ziel dieser Lektion ist es also , die folgenden Dinge zu testen Kann ich Rechnungen korrekt erstellen und sie mit bestimmten Kunden verknüpfen? Kann ich die Einstellungen richtig ändern und sie auf die Rechnungen anwenden lassen? Und kann ich Kundenrechnungen und -einstellungen dem Login-Benutzer zuordnen , was bedeutet, dass die Daten dieses Benutzers völlig anders sein werden, wenn ich einen neuen Benutzer erstelle ? Das sind die Dinge, die ich in dieser Lektion testen möchte. Fangen wir also mit den Rechnungen an. Wie ich Ihnen in der vorherigen Lektion gezeigt habe, haben wir erfolgreich einen Kunden erstellt Als wir jedoch eine neue Rechnung erstellen wollten, konnten wir keinen Kunden aus der Drop-down-Liste auswählen. Lassen Sie uns das der KI also genau sagen. Beim Erstellen einer neuen Rechnung ist die Kunden-Dropdown-Liste leer, obwohl ich erfolgreich Kunden erstellt habe , und das war's. Die KI sagt mir: Hey, du hast es entdeckt, ich entschuldige mich Es scheint, als hätte ich ein Kabel zwischen Ihren neuen Superbase-Kundendaten und dem Rechnungsformular unterbrochen Ihren neuen Superbase-Kundendaten und Weißt du, mir gefällt die Art und Weise, wie diese KI kommuniziert. Es ist sehr höflich, hat aber gelegentlich Sinn für Humor Warten wir also, bis der Fehler behoben ist. Und beachten Sie, dass ich es pro Aufforderung nur um eine Sache gebeten habe. Das ist eine bewährte Methode, die Sie auch anwenden sollten. Also sagt mir DAI, dass alles behoben ist. Lassen Sie uns sehen, klicken Sie auf Neue Rechnung, wählen Sie den Kunden aus, und tatsächlich kann ich jetzt einen Kunden auswählen. Lassen Sie uns hier tatsächlich einen neuen Kunden erstellen, Kunde zwei. Lassen Sie uns das hinzufügen. Das wurde erfolgreich hinzugefügt, gut. Gehen wir nun zurück zur neuen Rechnung und wir können zwischen Kunde eins und Kunde zwei wählen. Fantastisch. Okay. Also Kunde eins, neue Rechnung, heutiges Datum, Fälligkeitsdatum der Rechnung. Sagen wir, Einzelposten zum Monatsende. Sagen wir, ich weiß nicht, YouTube-Video. Eine Menge, sagen wir 100$. Können wir das auch zum Inkrementieren verwenden? Das können wir Aber der Inkrementwert hier ist nicht richtig, weil er nur die Dezimalstellen auf diese Weise erhöht . Das müssen wir beheben , aber es ist nichts Dringendes Wir können die Menge auch hier aktualisieren. Zwei, und es aktualisiert automatisch die Gesamtsumme, was eine meiner Anforderungen war. Cool. Lassen Sie uns also eine Rechnung erstellen. Okay. Die neue Rechnung wurde erfolgreich erstellt, aber die Rechnung wird mir hier in der Liste nicht angezeigt. Lass es uns sagen. Ich werde sagen, dass ich eine Rechnung erstellt habe, aber die App zeigt sie mir nicht im Bereich „Letzte Rechnungen“ an. Und weißt du, ich habe da einen kleinen Tippfehler gemacht, als ich gesagt habe , dass das bei KI nicht wirklich wichtig ist, weil sie versteht, was Sie sagen wollen Äh, huh. Offenbar sucht das Dashboard immer noch nach Rechnungen im alten lokalen Speicher statt in der neuen Superbse-Datenbank , die wir gerade Und das ist der Grund, warum deine neue Rechnung nicht Cool angezeigt wird. Es sagt dir also auch, dass es aus diesem Grund nicht funktioniert. Lass es mich reparieren. Das gefällt mir. Das ist cool. Und es hat es repariert. Super nett. Letzte Rechnungen, ich kann jetzt die Rechnung sehen , die ich gerade erstellt habe. Cool. Lass uns noch einen erstellen. Lassen Sie uns dieses Mal Kunde zwei auswählen. Neu. Lassen Sie uns das Fälligkeitsdatum auf, ich weiß nicht, den 7. August festlegen. Lassen Sie uns dieses Mal zwei Einzelposten hinzufügen. Machen wir also einen YouTube-Kurs für 2.000$ und fügen wir, ich weiß nicht, Marketingdienstleistungen Einer für 1230 $9. Okay, die Summe ist also korrekt berechnet. Lassen Sie uns eine Rechnung erstellen. Gut. Okay, das hat also die Liste der letzten Rechnungen aktualisiert. Hier wurde auch der ausstehende Betrag aktualisiert, was gut ist. Das ist also die Summe der Rechnungen. Habe zwei Kunden, Gesamtumsatz Null. Ich glaube, das wird aktualisiert, sobald die Rechnungen als bezahlt markiert sind. Es hängt davon ab, wie die KI die Logik dahinter entwickelt hat, und ich habe insgesamt zwei Rechnungen. Cool. Okay, damit ich neue Rechnungen erstellen kann. Ich kann neue Kunden erstellen. Mal sehen, ob wir eine bestimmte Rechnung oder einen Kunden bearbeiten können. Fangen wir hier mit Kunden an. Nehmen wir an, ich aktualisiere Client zwei und sage statt Adresse die lange Adresse von Kunde zwei. Aktualisieren Sie also den Client, die Kundeninformationen wurden erfolgreich aktualisiert. Das ist gut. Wenn ich jetzt zum Dashboard zurückkehre und Rechnung zwei bearbeite, nehmen wir an, ich ändere den YouTube-Kurs auf 5.000 und aktualisiere die Rechnung. Und ja, das scheint sich gut zu aktualisieren. Wenn ich das bearbeite und den Client ändere, funktioniert es auch einwandfrei. Lassen Sie uns den Client wieder ändern und den Status auf gesendet statt auf neu aktualisieren. Ja, das funktioniert auch, und das Schöne ist, dass die KI diese Pillen hier verwendet die je nach Status unterschiedlich gefärbt sind. Das ist eine sehr nette Abwechslung. Lassen Sie uns die erste Rechnung bearbeiten und sie als bezahlt markieren und sehen , wie sich das auswirkt. Okay, das wird jetzt grün angezeigt und die KI hat jetzt den Gesamtumsatz aktualisiert. Der Gesamtumsatz setzt sich also aus den Beträgen der bezahlten Rechnungen zusammen, während der ausstehende Betrag, wie er sein sollte, auf dem Betrag der Rechnungen basiert, die entweder gesendet wurden oder neu sind während der ausstehende Betrag, wie er sein sollte, auf dem Betrag der Rechnungen basiert . Und das Interessante daran ist, dass ich KI das nicht wirklich spezifiziert habe. Ich habe sie nicht nach dieser Funktionalität gefragt, aber sie wusste es, oder? Ohne dass ich ihm genau sagen muss , wie das funktionieren soll, ist es sehr intuitiv. Es wusste also genau, wie das funktionieren sollte. Das macht die Dinge einfach so viel einfacher, wenn die KI auf halbem Weg auf dich trifft Okay, lassen Sie uns zu den Zielen für diese Lektion zurückkehren. Ich sagte, dass ich testen möchte, ob, Sie wissen schon, diese bearbeitet werden können, was sie können. Außerdem, ob die Einstellungen ihren Job richtig machen. Lassen Sie uns diese Einstellungen also tatsächlich ändern. Und fangen wir mit den Rechnungseinstellungen , denn das Rechnungspräfix ist standardmäßig INV, aber ändern wir es in AD, sagen wir, oder ADR Und lassen Sie uns die Einstellungen speichern. Wenn ich jetzt eine neue Rechnung erstelle, bin ich wirklich neugierig auf die Rechnungsnummer und das Präfix, denn normalerweise sollte die Rechnungsnummer in meinem Kopf sollte die Rechnungsnummer automatisch auf der Grundlage der letzten Rechnung erhöht werden, aber ich sollte jetzt das neue Präfix verwenden , das ich generiert habe Und das habe ich der KI nicht spezifiziert, aber ich bin gespannt, ob sie das tatsächlich selbst implementiert hat Wählen wir also Kunde zwei aus und, sagen wir, bla, mit einem Preis von zehn, erstellen wir die Rechnung. Wow, cool Okay, das hat die Rechnung ADR 003 erstellt. Es wurde also nicht nur das neue Präfix verwendet, das ich ihm gegeben habe, sondern es wurde auch die Rechnungsnummer dort fortgesetzt , wo sie aufgehört hatte. Supercool. Okay, lassen Sie uns diese Rechnung tatsächlich löschen Bist du sicher, dass du diese Rechnung löschen möchtest ? Diese Aktion kann nicht rückgängig gemacht werden? Okay. Aber warum erhalte ich eine Browser-Benachrichtigung anstelle einer In-App-Benachrichtigung? Klicken wir also auf „ Okay, die Rechnung wurde erfolgreich gelöscht“. Also, wenn ich jetzt eine neue erstelle, sagen wir, eine für Kunden. Oh, ungültige Eingabe. Ich habe das nicht wirklich gesehen, aber ich glaube, das liegt daran, dass ich das Fälligkeitsdatum nicht auswählen konnte. Okay. Gehen wir also zurück zu den Fehlern. Super-Base-Fehler. Lass uns das kopieren. Und sagen wir der KI, dass sie das reparieren soll. Ich habe diesen Fehler bekommen und werde ihm sagen, dass das Fälligkeitsdatum ein Pflichtfeld sein soll , weil ich vergessen habe, das Fälligkeitsdatum auszuwählen. Also das durch einen Fehler. Und um das zu verhindern, muss ich mich nicht unbedingt die ganze Zeit auf die KI verlassen. Ich kann es sagen, hey, mach dieses Feld zu einem Pflichtfeld. Das sollte alle Probleme lösen, die wir in der Zukunft haben könnten. Okay, anscheinend ist alles erledigt, der Fehler ist behoben und das Fälligkeitsdatum ist jetzt ein Pflichtfeld, genau wie Sie es wollten, sagt mir die KI Okay. Mal sehen, ob diese Anpassungen funktionieren. Lassen Sie uns also eine neue Rechnung erstellen. Ja, wähle den Kunden aus. Das Fälligkeitsdatum ist jetzt erforderlich, aber was passiert, wenn ich auf Rechnung jetzt erstellen klicke Okay? Also sagt es mir, bitte fülle dieses Feld aus. Das Fälligkeitsdatum wurde tatsächlich automatisch eingetragen. Interessant. Okay. Also lass uns das einfach machen. Lass uns das machen. Rechnung erstellen. Okay, das wollte ich ursprünglich testen. Wenn ich eine Rechnung lösche, zum Beispiel Rechnung 003, und eine neue erstelle, verwendet die KI dann immer noch das 003-Präfix, was sie tun sollte, oder geht zu 004, weil wir zuvor eine Rechnung mit dieser Nummer hatten, aber sie hat das Richtige getan. Es hat 003 verwendet. Und lassen Sie uns noch einen erstellen , weil ich auf dieses Fälligkeitsdatum neugierig war. Offenbar wird dieses Fälligkeitsdatum automatisch mit dem letzten Tag des aktuellen Monats aufgefüllt mit dem letzten Tag des aktuellen Monats Was für mich wohl in Ordnung ist. Und ich denke, das wird vorerst gut funktionieren. Ich gehe davon aus, dass ich Kunden hinzufügen, bearbeiten und löschen kann . Ich habe das Löschen von Clients nicht wirklich getestet . Also lösche. Ja, es funktioniert also. So kann ich bei Kunden und Rechnungen bearbeiten, löschen und das Präfix entsprechend ändern. Als letztes möchte ich testen , ob die Daten, die hier erstellt wurden, Einstellungen für Kundenrechnungen, mit dem Login-Benutzer verknüpft sind. Und dafür müssen wir nur einen neuen Benutzer erstellen und neue Daten dafür erstellen. Und wenn wir den Benutzer wechseln, sollten wir nur die Daten sehen können , die dem jeweiligen Benutzer zugeordnet sind, wenn das Sinn macht. Also lass uns abmelden. Nett. Dadurch wurde auch der Anmeldebildschirm aktualisiert. Das gefällt mir. Melden wir uns an und erstellen Sie hier ein neues Konto. Und ich werde einfach eine zufällige E-Mail-Adresse verwenden , die ich zum Testen habe, und ich werde damit ein Konto erstellen. Also sollte ich jetzt eine E-Mail bekommen. Ja, das funktioniert. Bestätigen Jetzt melden wir uns mit diesen Informationen an. Wir haben also keine Rechnungen. Jeglicher Art. Wir haben keine Kunden. Und wenn wir zu den Einstellungen gehen, ist hier alles leer, außer den Einstellungen, die besagen, dass die Rechnungspräfixnummer ADR ist, aber das habe ich kürzlich für den vorherigen Benutzer hinzugefügt. Also lass uns weitermachen und das beheben. Und ich werde nur sagen, wenn ein neuer Benutzer erstellt wird, verwenden Sie bitte INV als Standard-Rechnungspräfix In Ordnung, also lass uns sehen, ob das funktioniert. Also das ist ein neuer Benutzer, und sicherlich genug, wir haben die INV. Nun, das ist nett Es hat auch automatisch die E-Mail ausgefüllt , mit der ich mich angemeldet habe, und ich glaube nicht, dass sie vorher da war, oder? Okay, aber wir haben auch hier einen Fehler. Wir haben einen Superbase-Fehler, also lassen Sie uns das beheben. Und nur ein kurzer Tipp. Wenn Sie mehr als eine Zeile in dieses Feld schreiben möchten, können Sie Shift Enter drücken, um zu einer neuen Zeile zu wechseln. Wenn Sie einfach direkt die Eingabetaste drücken, wird die Aufforderung an die KI weitergeleitet. Okay, lassen Sie uns sehen, gehen wir zurück zu den Einstellungen und wir haben einen weiteren Fehler, doppelte Schlüsselwerte. Okay, lass es uns erzählen. Jetzt habe ich das. Mal sehen, was da steht. Huch, ein Fehler beim doppelten Schlüssel. Sieht aus, als hätten wir einen klassischen Rennzustand. Ich weiß nicht, was das bedeutet. Sowohl auf meinem Datenbank-Trigger als auch auf der Einstellungsseite versuchen wir, gleichzeitig ein Standardprofil für Sie zu erstellen . Äh, huh. Ich entschuldige mich für den kleinen Stau Sehr interessant. Also, es sagt mir, dass es im Handumdrehen repariert wird, alles erledigt. Die Einstellungsseite wird jetzt problemlos geladen. Mal sehen, ob das der Fall ist. Hey, tut es. Sehr beeindruckend. Okay. Also das ist das Ding , das ich testen wollte. Lassen Sie uns einen neuen Client erstellen, und ich sage Demo-Client eins, Demo-Client one@gmail.com, und ich werde ihn hinzufügen. Und dann lassen Sie uns hier eine neue Rechnung für den ersten Demo-Client erstellen . Nennen wir das Logo-Design. Rechnung im Wert von 1.000$ erstellen. Okay, also für diesen Benutzer für den Benutzer Audi habe ich die Rechnung 001 für Demo-Kunde eins über 1.000$, richtig Wenn wir uns jetzt abmelden und mein anderes Konto verwenden, ja, alle Daten sind jetzt richtig verknüpft Ich habe meinen ersten und meinen zweiten Kunden, die wir ursprünglich erstellt haben. Ich habe die drei Rechnungen , die ich dort erstellt habe. Und was die Einstellungen angeht, ja, ich habe das INV-Präfix, obwohl ich mich erinnere, es in ADR geändert zu Also, wenn ich jetzt eine neue Rechnung erstelle, warte mal. Also lass uns das Präfix hier in ADR ändern. Okay. Also, wenn ich jetzt eine neue Rechnung erstelle, wird es ADR 004 sein. Okay. Wenn ich mich jetzt abmelde und mich bei dem anderen Konto und ich hier reingehe und das Rechnungspräfix ändere in Ich weiß nicht, sagen wir, HHH, speichere die Änderungen und erstelle eine neue Rechnung Ja, siehst du, das ist nicht richtig weil es das neue Rechnungspräfix nicht verwendet Also lass mich das sagen. Nehmen wir an, das neue geänderte Rechnungspräfix wird beim Erstellen einer neuen Rechnung nicht verwendet. Wie Sie sehen können, ist dieses ganze KI-Gebäude sehr gesprächig, oder? Du bittest es, etwas zu tun, du testest es. Wenn es nicht funktioniert, sagst du ihm, es erneut zu tun. Du testest andere Dinge. Wenn diese nicht funktionieren, sagst du ihr, dass sie Änderungen vornehmen soll. Das ist im Grunde alles, was es gibt. Aber das Schöne daran ist natürlich, Sie nicht wissen müssen, wie man Code schreibt. Die KI erledigt das für dich. Äh, huh. Das Problem bestand also offenbar darin, dass das Rechnungsformular immer noch die alten zwischengespeicherten Einstellungen betrachtete die alten zwischengespeicherten Einstellungen anstatt die neuesten abzurufen Okay, also lass uns das richtig testen . Wenn Sie jetzt zu den Einstellungen gehen, haben wir das HHH-Präfix. Lassen Sie uns also eine neue Rechnung erstellen. Und jetzt benutzt es HHH 003, aber ich will diesen Bindestrich eigentlich nicht Also werde ich der KI sagen, ich keinen Bindestrich in der Rechnungsnummer haben möchte Benutze einfach Präfix plus Nummer. HHH, zum Beispiel HHH 03 oder 003. Also ja, ich habe es gerade entdeckt. Ein Fehler, und ich habe darum gebeten, ihn zu beheben. Ihre Rolle, ich schätze, Sie könnten es hier nennen, ist die des, Sie wissen schon, Supervisors, Teamleiters, sogar des Qualitätskontrollpersonals, Sie sind im Grunde derjenige mit der Vision. Sie müssen wissen, Sie wissen schon, wie das Projekt aussehen soll und wie es funktionieren soll, und dann müssen Sie diese Vision der KI vermitteln, indem Sie, ja, mit ihr sprechen. Es ist eine sehr interessante Welt, in der wir gerade leben. Ordnung, lassen Sie uns noch einmal eine neue Rechnung erstellen HHH 04. Und wenn ich das auf DDD ändere, die Änderungen speichere und eine neue Rechnung erstelle , erstellen wir den Kunden Lassen Sie uns den Kunden tatsächlich auswählen. Ja. DDD 05. Okay, lassen Sie uns noch einmal abmelden und uns mit dem anderen Konto anmelden Und ich möchte die Einstellungen hier überprüfen. Es verwendet immer noch das Präfix ADR. Lassen Sie uns das auch auf OOOO ändern, ich weiß nicht, QQQ, Änderungen speichern, neue Rechnung Und es ist jetzt QQ q005. Cool. Okay, also alles , was ich in dieser Lektion testen wollte, funktioniert einwandfrei. Ich kann Kunden hinzufügen, bearbeiten und löschen. Ich kann dasselbe für Rechnungen tun, und alle Daten, die ich für den LogIn-Benutzer erstelle , sind mit diesem LogN-Benutzer verknüpft, was super cool ist In der nächsten Lektion werden wir nun damit beginnen, unserer Rechnungs-App einige erweiterte Funktionen hinzuzufügen , und wie üblich werden wir die Dinge gründlich testen und sicherstellen, Dinge gründlich testen und dass alles funktioniert Und wenn nicht, bitten wir einfach die KI, das Problem zu beheben. Also wir sehen uns in der nächsten Lektion. 6. Erweiterung der Rechnungsfunktionalität: Ordnung, ich habe also ein ganz bestimmtes Ziel für diese Lektion Ich möchte eine Download-Funktion als PDF in meiner App implementieren eine Download-Funktion als PDF in meiner App Außerdem möchte ich eine Rechnungsvorschau implementieren . Was bedeutet das? Wenn ich eine neue Rechnung erstelle oder eine bestehende bearbeite, hätte ich gerne irgendwo auf der Seite eine Vorschau , die mir zeigt , wie die Rechnung aussieht, wie sie aussieht, wenn sie als PDF heruntergeladen wird , falls das Sinn macht. Also lass uns das machen. Lass uns damit beginnen. Funktioniert der Download-Button hier? Der PDF-Download ist noch nicht implementiert. Sie können es in Ihrer nächsten Aufforderung anfordern. Okay, lassen Sie uns das anfragen. Ich würde sagen, bitte implementieren Sie PDF-Download für Rechnungen. Sehr einfache Anfrage. Wir bearbeiten eine Anfrage nach der anderen. Wie gesagt, das ist eine bewährte Methode, weil es nicht einmal die beste Methode für die KI ist, sondern auch für Sie, weil es die Dinge einschränkt , die Sie testen möchten. Wenn du fragst oder wenn du die KI fragst, ob du fünf Dinge weißt, musst du in einer Aufforderung auf fünf verschiedene Dinge testen. Aber wenn Sie sich auf eine Sache nach der anderen konzentrieren, ist es für Sie viel einfacher und es ist auch viel klarer für die KI. Ich freue mich immer sehr die Antworten zu lesen , die mir die KI gibt. Also hier ist mein Spielplan. Installieren Sie Auto Table, ein Tool, das mir hilft, professionell aussehende Tabellen in Ihren PDF-Rechnungen zu erstellen, eine spezielle Seite zu erstellen Logik für die PDF-Generierung zu erstellen. Es sagt mir, dass ich der neuen Ansichtsseite eine Schaltfläche zum Herunterladen von PDF-Dateien hinzufügen und die erforderlichen Elemente aktualisieren werde. Okay, lass uns sehen, was es getan hat. Also hat es das Download-Symbol geändert. Zu einem Augensymbol. Und wenn wir darauf klicken, oh, das ist super cool. Es zeigt mir tatsächlich eine Vorschau, und das ist es, was mich umhauen lässt , wenn ich solche Tools verwende Ich wollte eine Vorschau, oder? Ich wollte es auf der Bearbeitungsseite oder der Anzeigenseite haben. Aber ich habe nie darüber nachgedacht, wie es, wenn wir hier draußen eine Vorschaufunktion hinzufügen würden? Ich habe es nicht einmal darum gebeten, aber es hat es trotzdem getan. Rechnungsnummer, Firmeninformation, Rechnungsdatum des Kunden. Sie können den Inhalt der Rechnung sehen und sie dann herunterladen. Lass es uns herunterladen. Rechnung QQQ 05 PDF. Laden wir es herunter und sehen wir uns an, wie es aussieht. Es enthält alle notwendigen Informationen. Es hat meinen Firmennamen, Bill von Bill Two. Es hat also den Kunden erwischt, richtig? Ja. Menge, Stückpreis, ist das korrekt? Ja, ist es. Danke für Ihr Geschäft. Ja, es funktioniert also. Wie einfach war das? Und wenn ich die Rechnung bearbeite, habe ich dann auch einen Download-Button? Habe ich nicht. Die einzige Möglichkeit, die Rechnung derzeit herunterzuladen besteht darin, sie zu öffnen und dann das PDF herunterzuladen. Und ich kann auch auf Bearbeiten klicken und ich werde zur Bearbeitungsseite weitergeleitet. Ja, ich bin mit diesem Flow einverstanden. Ich denke, es wird vorerst gut funktionieren. Und ich kann auch auf eine Rechnung klicken und werde dann zur Vorschauseite NIE weitergeleitet. Dies sind tatsächlich einige bewährte Methoden wenn es um UX geht, und die KI hat sie einfach automatisch implementiert, was sehr beeindruckend, sehr beeindruckend ist. Okay. Der Download-Teil als PDF ist also fertig, und das hat Minuten gedauert. Sehr cool. Lassen Sie uns den Teil implementieren, in dem mir eine Vorschau angezeigt wird, wenn ich eine Rechnung hinzufüge oder bearbeite. Wenn ich zum Beispiel diese Seite betrete, möchte ich die Rechnungsdetails wie zuvor bearbeiten können , aber ich möchte hier auf der einen Seite eine Vorschau der endgültigen Rechnung sehen . Also lass uns das machen. Also lass uns das fragen. Wenn ich eine Rechnung hinzufüge oder bearbeite, würde ich gerne nebenbei eine Live-Rechnungsvorschau sehen. Live, was bedeutet, dass der Inhalt aktualisiert wird , wenn ich die Rechnungsdetails ändere. Mal sehen, was es macht. eine Live-Rechnungsvorschau eine fantastische Idee. Ich werde das Rechnungsformular so umgestalten, dass es eine schöne Echtzeitvorschau enthält, die sofort aktualisiert wird, während Sie tippen Mal sehen, was dabei herauskommt. Kannst du dir vorstellen, irgendwo mit deinem Laptop am Strand zu sitzen , Apps zu entwickeln, Produkte zu bauen? Sehr, sehr gut. Okay, lass uns gehen. Lass uns bearbeiten. Sicherlich haben wir diese Vorschau auf der rechten Seite. Ändern Sie das Fälligkeitsdatum auf das erste, das sofort aktualisiert wurde. Cool. Lassen Sie uns die Beschreibung hier in Videos ändern, die in Echtzeit aktualisiert werden. Lassen Sie uns die Menge hier auf zwei ändern. Das funktioniert. Lass uns den Preis ändern. Das ist ein Problem. Das Formular hier ist einfach zu eng gequetscht. Also müssen wir das ändern. Also ändere die Menge auf drei. Ja, die Preise werden automatisch aktualisiert. Cool. Lass uns ein paar Notizen hinzufügen. Hey, danke, dass du mit mir gearbeitet hast. Rechnung aktualisieren. Okay, das war also, glaube ich, dieser. Ja. Okay. Also das war die Bearbeitungsseite. Wenn wir die neue Seite öffnen, ja, es funktioniert einwandfrei. Funktionell funktioniert es also, aber wir müssen hier einige Probleme mit der Benutzerfreundlichkeit korrigieren. Zuallererst sind diese Felder jetzt also zu klein Ich meine, die Menge, ja, ich denke, das ist okay, weil sie normalerweise nur einen kleinen Wert hat, aber der Preis ist zu gering. Die Summe ist zu gering. Wie Sie sehen können, läuft der Text hier irgendwie über. Und ich habe das Gefühl , dass die Seitenleiste hier nur verschwendeter Platz ist Beginnen wir also damit, die Seitenleiste zu entfernen und diesen Inhalt in eine obere Leiste zu verschieben. Also werde ich ihm Folgendes sagen. Die Seitenleiste nimmt zu viel Platz ein. Bitte entfernen Sie sie und verschieben Sie ihren Inhalt in eine obere Leiste. Sollte einfach genug sein. Und nochmal, diese Art von Änderung würde, glaube ich, wahrscheinlich mehrere Stunden in Anspruch nehmen wahrscheinlich mehrere Stunden , je nachdem, wer das für Sie macht , wenn wir über ein lebendes Volk sprechen . Aber ja, die KI wird es im Handumdrehen codieren. Okay, das sieht viel besser aus. Es hat die ganze Sache an die Spitze gebracht. Es zeigt mir das Dashboard, die neue Rechnung des Kunden, aber keine Einstellungen. Ebenfalls, Ah, okay. Also war es hier wie ein Drop-down-Menü, in dem mir, dem Benutzer, die Einstellungsseite angezeigt wird. Und dann der Link zum Abmelden. Ziemlich cool, bis auf die Tatsache, dass ich da nur ein G habe und es im Grunde kein Kreis ist, also müssen wir das korrigieren Ich werde also sagen , dass die Drop-down-Menüschaltfläche in der oberen Leiste nicht richtig aussieht. Es zeigt nur ein G in einer vertikalen Pillenform an. Bitte aktualisieren Sie dies, damit ein Benutzersymbol angezeigt und verschieben Sie den Benutzernamen und die E-Mail-Adresse aus dem Drop-down-Menü. Das sollte also einfach genug sein. So kann der Benutzer immer seinen Namen und seine E-Mail sehen, wenn er eingeloggt ist. Ordnung. Also das sieht ein bisschen besser aus, ist aber noch nicht perfekt, weil diese Form hier sehr seltsam ist. Es ist wie eine Pillenform, aber wir haben Zugriff auf die Einstellungen, was nett ist, und den Link zum Abmelden cool. Aber lassen Sie uns das Problem tatsächlich beheben. Also werde ich ihm sagen, dass Hintergrund des Symbols immer noch eine vertikale Pillenform hat. Bitte mach einen Kreis daraus. In Ordnung, lassen Sie uns sehen, wie das funktioniert. Okay, und ich denke, das hat es endlich behoben. Der Button sieht jetzt toll aus. Es funktioniert wie es sollte. Ich habe die Informationen hier nett und ich kann zwischen diesen Seiten wechseln. Okay, jetzt, da wir die Seitenleiste aus dem Weg geräumt haben, lassen Sie uns diese Seite zur Rechnungsbearbeitung bearbeiten und sehen, wie das mit dem zusätzlichen Speicherplatz ist Auf einer Live-Website haben wir diese Seitenleiste offensichtlich nicht Es wird im Grunde so aussehen. Aber wissen Sie, wir müssen immer noch sicherstellen, dass dieses Layout auf vielen verschiedenen Bildschirmgrößen funktioniert. So sieht es also auf dem Handy aus. Okay, das ist nicht zu schäbig, und das Menü dort funktioniert immer noch Nett. Aber auf dem Desktop habe ich das Gefühl, dass wir mit diesem Formular noch nicht da sind. Schauen wir uns also an, wie wir das beheben können. Und weißt du was? Eigentlich werde ich nicht einmal versuchen, eine Lösung für dieses Problem zu finden. Ich werde der KI einfach das Problem beschreiben und schauen, was sie sich einfallen lässt, denn wenn sie etwas tut und es mir nicht gefällt, kann ich jederzeit zu einer bestimmten Version der App zurückkehren einer bestimmten Version der , indem ich auf die Schaltfläche Wiederherstellen Also ja, wir können nach jedem Chat eine bestimmte Version dieser App wiederherstellen , wenn uns die Änderung nicht gefällt Also werde ich hier tatsächlich meine Probleme beschreiben. Und die Probleme liegen im Grunde genommen im Bereich Einzelposten, weil wir nicht genug Platz für die Menge pro Einheit haben . Ich werde also sagen, dass das Rechnungsformular im Bereich Einzelposten nicht genug Platz für die Einzelpostenfelder bietet, insbesondere für die Preisfelder. Kannst du dafür eine Lösung finden, oder? Ich beschreibe also eigentlich nur das Problem. Ich versuche nicht, es für die KI zu finden. Ich warte nur ab, welche Vorschläge es mir dafür gibt. Und wenn sie mir nicht gefallen, kann ich jederzeit zurückkehren oder Sie bitten, weitere Änderungen vorzunehmen Sehen wir uns den Plan hier an. Es heißt also, dass es das Rasterlayout überarbeiten und die mobile Ansicht verbessern möchte das Rasterlayout überarbeiten und die mobile Ansicht verbessern Ordnung. Nun, schauen wir mal, wie das läuft. Okay, neue Rechnung. Lass uns sehen. Hm. Ich meine, es hat nicht wirklich viel gebracht, oder? Also, wenn ich das ändere, nein, das funktioniert immer noch nicht richtig, weil sich die Summe hier, wenn wir es mit größeren Beträgen zu tun haben, immer noch überschneidet oder ihren Rahmen überschreitet. Und schauen wir uns die mobile Ansicht an, weil dort steht, dass sie die mobile Ansicht aktualisiert hat. Lassen Sie uns das fragen. Es wurden keine wirklich wertvollen Änderungen vorgenommen, also werde ich nicht zu einer älteren Ansicht zurückkehren , sondern sie bitten diese ein wenig zu verschieben Also habe ich sie nach einer Lösung gefragt , die mir nicht wirklich gut gefallen hat, also werde ich ihr sagen, was zu tun ist im Bereich Einzelposten Bitte geben Sie im Bereich Einzelposten die gesamte Breite der Artikelbeschreibung ein und verschieben Sie die Menge, Einzelpreis und den Gesamtpreis eigenständig, oder besser gesagt, die zweite Zeile. Auf diese Weise haben die Daten genug Platz. Okay. Und noch ein Tipp hier, und das habe ich schon einmal gemacht, wenn Sie einmal feststellen dass Sie nicht in der Lage sind, mit der KI zu kommunizieren, wenn Sie sie bitten, etwas zu tun, sie aber einfach nicht zu verstehen scheint , was sie tun muss, dann versuchen Sie, eine andere KI zu verwenden, um eine Aufforderung dafür zu generieren. Also habe ich das in der Vergangenheit gemacht. Ich fragte die KI etwas, das sie nicht verstehen würde, und dann bat ich CHAT GPT, eine Aufforderung zu schreiben, die ich der KI geben sollte eine Aufforderung zu schreiben, die ich der KI geben Und ich erklärte HatGPT, was ich machen wollte. Also hat HatGPT das genommen und eine sehr detaillierte, sehr technische Aufforderung geschrieben, die ich dann dieser anderen KI gegeben habe, und sie hat den Job endlich erledigt Es funktioniert nicht immer, aber normalerweise hilft es Okay. Lassen Sie uns jetzt die Rechnung bearbeiten. Ja, da haben wir's. Ja, das ist viel besser. Jetzt haben wir viel Platz sowohl für die Beschreibung als auch für die anderen drei Felder. Etwas anderes, das ich hier hinzufügen möchte , ist eine Währung zum Stückpreis. Also werde ich sagen, fügen Sie auch die US-Dollar-Währung zum Stückpreis hinzu. Okay, die KI hat also Änderungen vorgenommen. Was heißt das? Wir müssen sie testen. Also bearbeiten wir. Wir haben jetzt auch das Dollarzeichen dort, und wenn wir das ändern, werden auch die Beträge hier aktualisiert und sie werden auch hier in der Vorschau aktualisiert. Sehr nett. Wenn wir uns die Vorschau hier ansehen, funktioniert sie immer noch. Und wenn ich eine neue Rechnung erstelle, den Kunden auswähle, gibt es hier eine Kleinigkeit. Die Rechnungsnummer scheint abgeschnitten zu sein. Sie ist also nicht abgeschnitten. Auf der Bearbeitungsseite, aber auf der Erstellungsseite ist es abgeschnitten. Interessant. Wir werden es erzählen. Auf der Seite „Rechnung erstellen ist die Rechnungsnummer abgeschnitten Bitte korrigieren Sie das Testen einer neuen Rechnung. Jetzt heißt es also A, wählen Sie die Rechnungsnummer, das Datum und das Fälligkeitsdatum des Kunden aus. Und wenn ich bearbeite, so wird die Rechnungsnummer korrekt angezeigt, aber ich möchte nicht, dass das Hash-Zeichen da ist. Okay. Aber es wird auf der neuen Rechnung nicht richtig angezeigt. Diese Aufforderung für dieses Mal würde also darin bestehen, das Hash-Zeichen von der Rechnungsnummer auf der Seite mit den Rechnungsdetails zu entfernen . Außerdem wird bei der Erstellung einer neuen Rechnung auf der Rechnungsnummer A angezeigt, bitte korrigieren. Also habe ich meine eigene Empfehlung irgendwie gebrochen, weil ich sie gebeten habe , zwei Dinge in einer Aufforderung zu erledigen. Mal sehen, wie es funktioniert. Normalerweise würde ich das, wie gesagt, nicht wirklich empfehlen, weil es für dich viel einfacher und für die KI auch viel übersichtlicher ist. Aber schauen wir uns an, wie es nur dieses eine Mal funktioniert. Okay. Also jetzt entfernt es das Hash-Zeichen von der Rechnungsnummer, und wenn ich eine neue Rechnung erstelle, QQQ 06, ja, das ist korrekt Wie Sie sehen können, wurden die Probleme jetzt behoben und mir wird die richtige Rechnungsnummer angezeigt Schauen wir uns nun schnell die anderen Details an, die auf der Rechnung erscheinen sollten. Wenn ich also den Kunden auswähle, wählt er Kunde eins, Kunde zwei, das ist richtig. Aber was ist mit meinen eigenen persönlichen Daten? Also lass uns tatsächlich zurückgehen. Gehen wir zu den Einstellungen. Und lassen Sie uns hier den Firmennamen eingeben. Nehmen wir an, ich weiß nicht, Pordla Designs Ic hat meine E-Mail-Adresse und Sicher. Sagen wir einfach nur eine Schein-Telefonnummer, die Adresse Geben wir, äh, die Adresse und füllen wir alle Felder hier aus. Okay? Änderungen speichern. Cool. Wenn ich jetzt eine neue Rechnung erstelle , werden meine Informationen korrekt eingegeben. wird zwar nicht angezeigt Meine Website wird zwar nicht angezeigt. Oh nein, ja, das tut es. Das habe ich nicht gesehen. Das ist cool. Okay, lassen Sie uns dem Kunden einen Status, ein Rechnungsdatum und ein Fälligkeitsdatum setzen. Ich fülle das automatisch aus. Fälligkeitsdatum morgen. Und sagen wir, ich weiß nicht, YouTube, Menge zwei Stückpreis 100 und drücken Enter, um die Rechnung zu erstellen. Cool. Und wir haben hier einen Fehler. Ich sehe den Kunden für diese Rechnung nicht. Wenn ich das auf Kunde 2 ändere, sehen wir es dann? tun wir nicht. Bei der Rechnung QQQ 006 treten einige Probleme auf , wenn ich eine neue Rechnung erstelle Haben wir dieselben Ja, das tun wir. Okay. Also haben wir gerade ein neues Problem entdeckt. Deshalb musst du testen, testen, testen und einfach weiter Dinge reparieren. Bei der Erstellung, sagen wir, wird der Kunde nicht in der Tabelle mit den letzten Rechnungen für neue Rechnungen angezeigt . Das ist ein seltsames Verhalten. Mal sehen, ob es das behebt. Offenbar wurde der Name des Kunden bei der Erstellung einer neuen Rechnung nicht richtig gespeichert, weshalb er nicht in Ihrem Dashboard angezeigt wurde. Solche Dinge passieren, weißt du, sogar der KI. Wenn Sie diese Änderungen vornehmen, ändern Sie den Code selbst. Es ist also nur natürlich, dass Sie, wenn Sie etwas ändern, etwas anderes durcheinander bringen, aber es scheint, dass es behoben wurde. Wenn ich jetzt also eine neue Rechnung für den Kunden erstelle, ja, ich zeige sie korrekt an. Fantastisch. Okay. Und die Rechnungsnummer wird dort korrekt angezeigt. Eine Sache, die mir aufgefallen ist , ist , dass sich die Rechnungsvorschau, die ich hier sehe , tatsächlich von der Rechnungsvorschau unterscheidet , die ich hier sehe. Also sollten wir das vielleicht ändern. Lass mich dich bitten, das zu tun. Also werde ich ihm genau das sagen, was ich dir gesagt habe. Die Rechnungsvorschauen unterscheiden sich zwischen der Vorschauseite und den Bearbeitungsseiten für Anzeigen Bitte machen Sie sie identisch. Ordnung, schauen wir uns das an. Also das ist die Vorschau Es sieht auf eine bestimmte Art aus, gut. Und wenn wir zur Bearbeitung gehen, ja. Also ich denke, das sieht ziemlich genauso aus. Also ich bin damit zufrieden. Wenn ich also diese Rechnung, die 008-Rechnung, jetzt herunterlade und sie öffne, mir die richtigen Informationen angezeigt, oder? Ja. Aber das Design der eigentlichen Rechnung sieht nicht wirklich wie die Vorschau aus, die ich hier sehe. Und es wäre schön, wenn all dies dasselbe wäre. Lassen Sie uns das tun, außer dass die Vorschau dieses dunkle Farbschema verwendet und die Rechnung, die ich erstelle, in einem hellen Farbschema sein sollte einem hellen Farbschema weil Sie sie vielleicht auf Papier drucken möchten. Lassen Sie uns das in diesem Fall also fragen. Sorgen Sie dafür, dass das herunterladbare PDF-Format genauso aussieht wie die beiden Vorschauen, die Sie gerade erstellt außer dass Sie ein helles Farbschema für das PDF verwenden Mal sehen, ob das möglich ist. Oh, Mann. Oh, ich liebe das. Es scheint, dass es nichts gibt, was die KI nicht kann. Ich meine, ich habe sie gerade darum gebeten, was meiner Meinung nach eine sehr komplexe Aufgabe ist, oder? Aber die KI sagt mir , hey, du hast es verstanden. Ich werde das installieren und das aktualisieren. Ziemlich cool. Schauen wir uns also an, ob es hier irgendwelche Änderungen an den Vorschauen gegeben hat . Ich habe es nicht getan Also, wenn ich das PDF jetzt herunterlade, Oh. Okay. Was ist das? Ja, das ist nicht gut. Ja, vielleicht war ich mir nicht ganz klar. Es scheint, dass es nur ein Bild der Vorschau, die ich in der App hatte, aufgenommen und es einfach auf einen weißen Hintergrund gelegt hat. Und das wollte ich nicht. Ich möchte grundsätzlich dieses Format haben, dieses Layout der Rechnung, aber in einem hellen Farbschema. Also lass es uns noch einmal fragen. Ich werde sagen, dass das nicht die richtige Lösung ist. Bitte verwenden Sie für das PDF dasselbe Format und Layout wie für die Vorschau, oder ich sollte sagen, für die Rechnungsvorschau. Das PDF wird jedoch ein helles Farbschema verwenden. Und ich denke, das sollte reichen. Mal sehen, ob das spezifisch genug dafür ist. Falls nicht, nun ja, ich denke, ich werde mit meinem guten Freund Chad GPT sprechen und dich bitten, eine bessere Eingabeaufforderung für die KI zu erstellen Lass uns eine Vorschau ansehen, lass uns herunterladen. Ja, das ist immer noch nicht richtig, weil ja, es verwendet das Format, aber es funktioniert nicht richtig. Das ist die erste Rechnung. Und der Text war hier tatsächlich auswählbar, aber in diesen beiden ist er nicht einmal auswählbar Das ist im Grunde ein Bild. Gehen wir also zu HatGPT und versuchen, eine Lösung dafür zu finden Ordnung, also nachdem ich mit CHADGPT gesprochen hatte, habe ich ihm im Grunde gesagt, dass ich mit Hosting Horizons eine App zur Rechnungsstellung baue Ich versuche, das Format der PDF-Datei an die Vorschau aus der App anzupassen Format der PDF-Datei an die Vorschau aus der App anzupassen Also habe ich ein bisschen Kontext gegeben und gefragt, kannst du mir mit einer Aufforderung helfen? Also gab es mir eine Aufforderung. Dieser, der ein bisschen zu detailliert ist. Also habe ich es gesagt, das ist zu detailliert. Die KI weiß bereits, was wir bauen, also gab sie mir diese kleinere Aufforderung. Also lass es uns so versuchen. Ich werde das einfach nehmen. Ich werde es einfügen. Und die Aufforderung hier lautet im Grunde: Erstellen Sie das exportierte PDF, passen Sie dem Sprachlayout auf dem Bildschirm genau die gleiche Struktur, den gleichen Abstand und die gleiche Ausrichtung Der einzige Unterschied besteht darin, ein helles Farbschema, weißen Hintergrund, schwarzen Text für den Druck zu verwenden weißen Hintergrund, schwarzen Text für den Druck das Design sauber und konsistent mit der Vorschau zu halten Mal sehen, ob das in irgendeiner Weise hilft. Meiner Erfahrung nach funktioniert dies, wie gesagt, die meiste Zeit, da eine andere KI die Eingabeaufforderungen für Sie schreibt, normalerweise zu detaillierteren, technischeren Aufforderungen führt , aber das ist nicht immer der Fall Wenn das nicht richtig funktioniert, schauen wir uns vielleicht etwas an, das die KI nicht kann, aber ich bezweifle ehrlich gesagt, dass das der Fall ist Also sagt er, oder es heißt, du hast es verstanden. Ich entschuldige mich Das letzte Zelt war nicht ganz pixelgenau. Okay, also lass uns das anklicken. Klicken wir auf PDF herunterladen. Mal sehen, ob nein, das scheint nicht richtig zu funktionieren, auch dieses Mal nicht. Lassen Sie uns das sagen. Sie fügen immer wieder ein Bild in dieses PDF ein. Der Text ist nicht einmal auswählbar. Bitte generieren Sie das PDF auf die gleiche Weise, wie Sie es bei der ersten Erstellung dieser App getan haben Verwenden Sie jedoch das Layout und Struktur aus der Rechnungsvorschau auf dem Bildschirm. Also, wir greifen das Ganze aus einem anderen Blickwinkel an. Mal sehen, ob das etwas bewirkt. Die wiederholten Fehltritte tun mir aufrichtig leid. Ich implementiere gerade diese richtige Lösung und bin zuversichtlich, dass Sie mit der professionellen Qualität der Ergebnisse zufrieden sein werden mit der professionellen Qualität der Ergebnisse zufrieden Nun, das bleibt abzuwarten, mein KI-Freund. Äh, huh. Also, anscheinend hat es ein HTML-to-Canvas-Paket verwendet, um das zu erstellen Jetzt entfernt es das und bringt die automatische Tabelle zurück , um ein PDF mit echtem auswählbarem Text zu erstellen Okay, lassen Sie uns das versuchen. Hoppla. Lass uns herunterladen Aha. Da haben wir's. Jetzt scheint es es fast richtig anzuzeigen. Es ist nicht zu 100%, aber es ist ziemlich nah dran. Es sind quasi alle Informationen an der richtigen Stelle, außer auf der Rechnung. Das ist eine Art Box-Layout mit der Kopfzeile, der Tabellenkopf ist so farbig, und die Vorschau zeigt es einfach so. Ich glaube, ich nehme es. Ich denke, ich kann das noch ein bisschen weiter optimieren, aber diese Lektion hat sowieso viel zu lange Ich denke, im Moment haben wir eine ziemlich große Ähnlichkeit mit unserer Vorschau hier, und ich werde den Sieg davontragen Die Ziele für diese Lektion waren also, die Rechnungsvorschau und auch den Download als PDF zu implementieren die Rechnungsvorschau und auch den Download als Und wie Sie gesehen haben, funktioniert das ganz gut. Sie können auf eine beliebige Rechnung klicken, um hier eine Vorschau zu sehen. Sie können das als PDF herunterladen auch eine neue Rechnung erstellen oder eine bestehende Rechnung bearbeiten, wird auf der rechten Seite tatsächlich eine Vorschau angezeigt. Und diese Vorschau wird live aktualisiert, während Sie die Rechnungsdetails aktualisieren. Also, was brauche ich noch oder möchte ich für diese App machen? Nun, es scheint vorerst wirklich gut zu funktionieren. Die eine Sache, die ich meiner Meinung nach sofort ändern würde , ist die Tatsache, dass wir zu viele Schaltflächen haben, sagen wir, neue Rechnung, oder? Wir haben hier eine, und wir haben eine hier, und im Hauptmenü steht auch Neue Rechnung. Also ich denke, ich würde das gerne rationalisieren und eine einzige Schaltfläche haben, vielleicht hier oder vielleicht hier in der Kopfzeile Entferne diesen Menüpunkt und nimm dann vielleicht paar Designänderungen vor , damit das Ganze etwas ausgefeilter aussieht Aber das ist für die nächste Lektion, denn wie gesagt, das ist schon zu lang. Ich werde Sie also in der nächsten Lektion sehen, in der wir die letzten Änderungen für unsere App implementieren werden. 7. Hinzufügen des letzten Schliffs: Okay, willkommen zurück zur letzten Build-Lektion dieses Projekts, und die Ziele für dieses Projekt sind sehr einfach. Wir mussten die neuen Rechnungsschaltflächen ausdünnen , weil es zu viele gibt und sie über das gesamte Layout verteilt sind. Und wir müssen auch einige ästhetische Änderungen vornehmen. Verfeinern Sie das EUI einfach noch ein bisschen. Fangen wir also mit dem Button an. Ich werde also sagen, wir haben zu viele Schaltflächen, um eine neue Rechnung zu erstellen. Behalte einen einzigen Akzent in der oberen Leiste. Und ich denke, es versteht sich von selbst, dass die anderen beiden entfernt werden sollten Mal sehen, ob es das richtig macht. Und anscheinend hat die KI dabei einen Fehler gefunden, ein lästiges Semikolon Okay, das habe ich nicht gesehen, aber anscheinend aber Also ja, wir haben jetzt eine einzige Schaltfläche für neue Rechnungen , die uns zur Seite Neue Rechnung erstellen führt. Nett. Und wenn wir auf Bearbeiten klicken , gelangen wir zur Seite Rechnung bearbeiten. Das ist also Ziel Nummer eins. Ziel Nummer zwei ist es, einige ästhetische Änderungen vorzunehmen. Und dafür würde ich diese Bildfunktion tatsächlich gerne testen. Also würde ich gerne ein paar Bilder finden , die das Layout zeigen, das ich erreichen möchte. Gib sie der KI und bitte sie die Farben und, du weißt schon, den Abstand und alles an die Bilder anzupassen du weißt schon, den Abstand und alles , die ich ihr gerade gegeben habe. Schauen wir uns also an, wie das läuft. Gehen wir zu Dribbling und suchen wir nach dem, was das für ein dunkles Armaturenbrett wäre Mal sehen, ob wir etwas finden, das mir gefällt und von dem ich denke, dass es für diese Art von Projekt gut funktionieren würde für diese Art von Projekt gut Das ist also interessant. Aus unserem Verstand. Das sieht interessant aus. Also lass uns das speichern. Und das speichert es tatsächlich als Web-P-Bild. Ich frage mich, ob die KI Web-P-Uploads akzeptiert. Das ist zu dunkel. Das sieht interessant aus. Nochmals, ich werde nicht versuchen, deinen Namen auszusprechen. Also lass uns das Bild speichern. Okay, versuchen wir es mit diesen beiden Bildern, richtig? Also gehen wir zurück und klicken auf Hochladen. Ich werde einfach diese beiden Web-P-Bilder auswählen und sehen, ob das funktioniert. Also anscheinend hat es das getan. Okay, cool. Also lassen Sie uns es tatsächlich dazu auffordern. Bitte verwenden Sie die beiden Bilder als Referenz und ändern die Farben und Abstände der Benutzeroberfläche. Ich bin wirklich neugierig darauf , denn wenn das gut funktioniert, dann ist es wirklich einfach, eine App zu erstellen, die nicht nur gut funktioniert, sondern auch gut aussieht, weil Sie einen professionellen Designer ein Design für diese App erstellen lassen können einen professionellen Designer ein Design für diese App erstellen und Sie können die KI einfach bitten , das so genau wie möglich anzupassen möglich. Es heißt, dass hier geplant ist, die Farbpalette zu überarbeiten, Abstände und Layouts zu verfeinern und jede Komponente der Benutzeroberfläche zu überprüfen, um sicherzustellen, dass sie perfekt auf das neue Farbschema und die neuen Abstände abgestimmt sind. In Ordnung, richtig. Nun, der Plan klingt großartig. Schauen wir uns die Implementierung an. Und hier sind wir. Als Referenz habe ich eine ältere Version der Benutzeroberfläche geöffnet. Das war, weißt du, bevor wir die Layoutänderungen hier vorgenommen haben. Und das ist das Neue. Also ja, es ist definitiv anders als das, was wir vorher hatten. Lass uns eins davon öffnen. Es ist nicht wie Tag und Nacht, aber ich denke, es ist eine Verbesserung. Es hat die Akzentfarbe geändert weil die beiden Bilder , die ich ihm gegeben habe, ja, sie verwendeten diese Art von Orange-Orange. Ja, ich habe hier definitiv einige Änderungen vorgenommen. Zum Beispiel hat es all diesen Abschnitten eine helle Hintergrundfarbe hinzugefügt . Es hat den Kontrast dieser Grenze irgendwie verringert. Und es fügte hinzu, dass mir das gerade aufgefallen ist. Ich habe der Stoppleiste eine Art Unschärfe hinzugefügt, wie einen Hintergrundunschärfeeffekt , und ich denke, das wurde behoben Ich glaube nicht, dass es vorher behoben wurde. Jetzt bleibt es also an Ort und Stelle , wenn wir auf und ab scrollen. Okay, insgesamt ja, ich mag diese Änderungen, und ich denke, ich kann einfach weiter mit der KI sprechen und das perfektionieren und so aussehen lassen, dass es so aussieht, wie ich es mir vorgestellt habe. Es geht wirklich nur darum, wie viel Zeit Sie bereit sind, mit der KI zu verbringen. Wenn Sie, wissen Sie, versuchen, ein MVP zu entwickeln, ein Produkt mit minimaler Rentabilität , das Sie, wissen Sie, den Stakeholdern zeigen möchten , dann ist es mehr als genug, so etwas zu entwickeln Es sieht toll aus. Es reagiert. Weißt du, es funktioniert auch auf Mobilgeräten. Es ist sauber und Sie können jederzeit visuelle Änderungen daran vornehmen. Ich möchte also nur eine letzte Testrunde durchführen , um sicherzustellen, dass alles einwandfrei funktioniert, bevor ich weitermache. Also lass uns zu den Kunden gehen. Lassen Sie uns einen Kunden hinzufügen. Oh, es hat auch diese Felder hier geändert. Es hat auch ihr Aussehen grundlegend verändert . Okay, Kunden hinzufügen. Funktioniert, bearbeitet Kunden. Funktioniert. Lass uns wieder hierher gehen. Lass uns eine neue Rechnung erstellen. Wählen Sie Kunde drei aus. Ja, cool. Menge Artikelbeschreibung, zwei davon für 300$. Hey, lass uns eine tolle Rechnung haben. Ja. Also das hat funktioniert Ich kann es mir gut in der Vorschau ansehen. Ich kann ein PDF davon herunterladen. Und das PDF sieht so aus. Es hat auch die Farben im PDF geändert, obwohl ich nicht darum gebeten habe. Cool. Ich kann die Rechnung bearbeiten und dann Rechnungen löschen. Nett. Und ich glaube, ich werde hier mit dieser App aufhören. Ich glaube, ich habe es in einen sehr anständigen Zustand gebracht, in welchem? Eine Stunde. Vielleicht dauert der Kurs vielleicht etwas länger als eine Stunde, aber Sie müssen verstehen, dass es natürlich weniger Zeit in Anspruch nehmen würde vielleicht etwas länger als eine Stunde, aber Sie müssen verstehen, , wenn ich gesamten Prozess machen den gesamten Prozess machen würde, ohne mit der Kamera zu sprechen den gesamten Prozess machen würde, ohne mit der Kamera zu sprechen. Aber ich bin zufrieden mit dem, was ich bisher geschaffen habe, und ich werde es hier beenden. Bitte nehmen Sie an der nächsten Lektion teil, um das Fazit und die nächsten Schritte zu erfahren. Wir sehen uns dort.