Erstellen von Apps und Vibe-Code mit liebenswerter KI

1. Liebenswertes Intro zum Kurs: Hallo, willkommen im Lovable Vibe Coding Boot Camp. Mein Name ist Greg Hung. Ich bin ein kanadischer Entwickler und Vibe-Programmierer, und ich glaube, dass diese Plattform im Jahr 2026 eine der leistungsstärksten und benutzerfreundlichsten Plattformen ist, um Ihre Apps mit Ihren Ideen und Ihrer Kreativität ganz einfach von Ihrem Computer oder ich glaube, dass diese Plattform im Jahr 2026 eine der leistungsstärksten und benutzerfreundlichsten Plattformen ist Ihrem Telefon aus zu erstellen Ihrem Telefon aus Die Kosten beginnen bereits bei 25 US-Dollar , um loszulegen. Und in diesem Kurs werde ich dir die Grundlagen und die Plattform beibringen und dir einige der Projekte vorstellen, die ich mit Lovable erstellt habe . Das ist ein globales Verzeichnis, das es dir ermöglicht, Gerichte aus der ganzen Welt zu finden. Außerdem ermöglicht es Nutzern, ein Konto zu erstellen und ihre eigenen Beiträge, ihre eigenen Bewertungen und ihre eigenen Bewertungen und ihre eigenen Es ist also eine Crowdsource-Pickball-Plattform . Ich habe auch Apps wie ein TikTok-Portfolio erstellt. Ich habe sogar Apps erstellt, mit denen Sie eine Verbindung zu Ihrem Cloud Drive herstellen können, sodass Sie Dateien auf Ihrem Cloud Drive teilen und verkaufen können. Die leistungsstarke Funktion, auf die ich mich in Lovable ab Juni 2026 freue , heißt Connectors Konnektoren ermöglichen es Ihnen also sich mit Plattformen wie Stripe, Google Drive oder TikTok zu verbinden , und sie ermöglichen es Ihnen, wirklich, wirklich gut mit diesen anderen Plattformen zu kommunizieren , um sehr anpassbare Apps zu erstellen , die Sie dann auf Ihrer Website veröffentlichen können , oder Sie können eine liebenswerte Domain kostenlos verwenden Und ich werde Ihnen zeigen, wie Sie Ihre App, die Sie erstellt haben, auf Ihrer Website veröffentlichen können Ihre App, die Sie erstellt haben, auf Ihrer Website Ich werde einige Beispiele vorstellen und Schritt für Schritt durchgehen sowie meine Anweisungen dazu teilen, wie ich sie erstellt habe Also, wenn das aufregend klingt, lass uns anfangen. 2. Lovable Tour 2026 auf dem Desktop: Hallo zusammen, dies ist eine kurze Tour durch Lovable im Sie haben die Plattform aktualisiert, was großartig ist. Sie haben diese Anschlüsse, das sind ziemlich neue Funktionen. Es ist gut sichtbar über Ihrer Hauptaufforderung hier. Und Sie können es auch auf der linken Seite sehen. Also nur eine Vorschau, wenn Sie eine Verbindung zu diesen Anschlüssen herstellen, aktivieren Sie zusätzliche Funktionen. Ich kann zum Beispiel einen TikTok-Connector verwenden, um eine Verbindung zu meinen Konten herzustellen, nützliche KI-Informationen über mein TikTok-Konto zu erhalten und daraus eine App zu erstellen. kann Supabase verwenden, um eine Datenbank einzurichten , wenn ich möchte, dass Leute meine App verwenden und Konten erstellen Ich kann einen Google Drive-Connector verwenden, um tatsächlich eine Verbindung zu Dateien auf meinem Cloud Drive und sie zu verkaufen. Das ist nur ein Beispiel. Und Sie haben hier all diese anderen wie Microsoft Outlook, Microsoft Excel, Sana, Twitch, Gemini Enterprise und so weiter Hier gibt es also viele Möglichkeiten, und Sie können die sehen, mit denen ich bereits verbunden bin Okay, auf der linken Seite siehst du die Anzahl deiner verbleibenden Credits, die Art des Plans und deine Workspace-Mitglieder. Ressourcen, hier kannst du dir andere Vorlagen ansehen, und dann kannst du dir die Konnektoren hier ansehen. So können Sie in verschiedenen Bereichen auf dieselben Funktionen zugreifen. Jetzt können Sie Projekte sehen, die Sie alle haben, Sie können die Projekte sehen, die Sie erstellt haben, diejenigen sehen, die mit Ihnen geteilt wurden, und Sie auch einige Ihrer Projekte auf der linken Seite sehen. Und wenn sie die drei Punkte haben, können Sie von diesem Projekt aus auf die Einstellungen zugreifen, es umbenennen, neu mischen und löschen Wenn Sie jetzt auf ein aktuelles Projekt klicken, die Aufforderung auf der linken Seite Wenn Sie weiter daran arbeiten möchten, können Sie sich diese suggestiven Eingabeaufforderungen ansehen, die nützlich sind, wenn Ihnen kein nächster Schritt einfällt Lovable hilft dir also tatsächlich dabei, den nächsten Schritt vorherzusagen. Auf der rechten Seite ist dies die Vorschau. Hier können Sie die App tatsächlich ausprobieren. Sagen wir, auf dem Bildschirm können Sie sehen, dass wir uns in der Vorschau befinden, aber es gibt verschiedene Möglichkeiten, sie anzusehen. Sie können die Dateien Ihres Projekts sehen. Sie können die Codeansicht sehen. Kehren wir dort zu dieser Ansicht zurück. Und von hier aus kannst du verschiedene Bereiche deines Projekts, deines Dashboards, deiner Authentifizierung und deiner Spieler auswählen . Ich denke also, wenn wir mehr Leute registrieren würden, würden wir hier darauf zugreifen. Und dann hast du die Wurzel, die einfach ein Backslash ist Sie können Ihr Projekt über eine Vorschau mit anderen Personen teilen über eine Vorschau mit anderen Personen und es sogar standardmäßig auf einer benutzerdefinierten Domain oder einer liebenswerten Domain veröffentlichen einer benutzerdefinierten Domain oder einer liebenswerten Domain Und das ist deine allgemeine Vorschau von Lovable. Und wieder können Sie es in der Projektansicht remixen Sie können die Anschlüsse sehen. Ich möchte Ihnen schnell den Domainbereich zeigen. Okay, wir können also auf Einstellungen klicken. Okay, wir können meine Pläne und Credits hier sehen. Das ist der Plan, an dem ich arbeite. Mein Cloud- und EI-Balance. Das ist die Menge an Cloud und EI, die ich verwendet habe. Ich musste mir keine Gedanken über eine Übernutzung meiner Apps machen, aber ich habe sie nicht wirklich in der Produktion eingesetzt Hier drüben, Workspace-Domains. Du kannst hier tatsächlich eine Domain kaufen, oder was du tun kannst, wenn du sie veröffentlichst, du kannst sie mit einer bestehenden Domain verbinden, und sie machen es ziemlich einfach. Ich habe tatsächlich einige meiner anderen Projekte miteinander verbunden , die ich Ihnen zeigen werde. Also habe ich dieses Golfspiel hier erstellt und es bereits auf der golf.ai Creative Dot Academy veröffentlicht, und das ist ziemlich einfach zu machen. Sie können auf Domains verwalten klicken und eine Verbindung zu einer bestehenden Domain herstellen Sie geben sie einfach ein und Verbindung zu Cround oder was auch immer Ihre Domain-Registrar-Plattform ist, hergestellt, und das war ziemlich Da ist also deine Tour durch Lovable im Jahr 2026. 3. Tipps zum Programmieren von Vibe-Codierungen: Hier sind also meine Tipps zum Ausdenken von Eingabeaufforderungen Wissen Sie, das erfordert viel Übung. Deshalb werde ich einige der von mir verwendeten Eingabeaufforderungen mit Ihnen teilen Eingabeaufforderungen Und Sie werden sich mit einem Teil der Fachsprache vertraut machen, die Sie verwenden , um verschiedene Funktionen in einer App zu beschreiben Eine Funktion in einer App könnte also darin bestehen, dass sie Ihnen Benachrichtigungen sendet oder es Ihnen ermöglicht, ein Konto oder mehrere Konten zu erstellen und Beiträge von anderen Benutzern anzunehmen Beiträge von anderen Benutzern Und je mehr du übst, Vibe Coding. Sie werden sich mit der Sprache vertraut machen und Ihre Kenntnisse verbessern Ein Beispiel ist also meine TikTok-App. Mein erster Abschlussball bestand also darin, die TikTok-Inhalte eines YouTubers auf einer benutzerdefinierten Portfolio-Seite zu präsentieren . Die App ruft eine Liste der veröffentlichten Videos ab und rendert sie zusammen mit Metadaten wie Titeln, Sub-Nails und Interaktionszahlen Nun, wenn du ein YouTuber bist, mag das für dich normal klingen, aber wenn du es nicht bist, musst du nur üben und dich mit der Sprache vertraut machen Und die EI-Modelle sind wirklich gut darin , natürliche Sprache zu interpretieren. Es ist also in Ordnung, zunächst einfach zu kommunizieren, um liebenswert zu sein, als ob Sie mit einer Person sprechen Und dann können Sie es eingrenzen. Sie müssen nicht gleich bei der ersten Aufforderung alles richtig machen, aber es hilft, so spezifisch wie möglich zu sein. Und dann können Sie Ihre App bei nachfolgenden Eingabeaufforderungen verfeinern , falls das sinnvoll ist 4. Intro zu Lovable Connectors – Meine App verwendet den Google Drive Connector: In dieser Videolektion sollen die App und die Chat-Konnektoren die App und die Chat-Konnektoren Dies ist eine ziemlich neue Funktion. Wir sind Mitte 2026 und ich werde Ihnen den Google Drive- und Stripe-Connector in einer meiner Apps zeigen den Google Drive- und Stripe-Connector in einer meiner Apps Wählen Sie also im Grunde den Connector aus, und dann würden Sie sich authentifizieren, und dann können Sie eine App erstellen, die beispielsweise tatsächlich eine Verbindung zu Ihrem Google Also gehe ich zu dieser App. Es ist eher eine ganze Plattform, und ich zeige Ihnen einige der wichtigsten Eingabeaufforderungen und dann lade ich die Website herunter Meine erste Aufforderung lautete also , mir zu erlauben, meine Online-Kurse zu verkaufen, sie auf Google Drive zu speichern dem Nutzer eine Vorschau einiger Lektionen zu ermöglichen Es ist also eine sehr allgemeine Aufforderung, nicht sehr spezifisch oder lang. Und damit haben die Dinge angefangen. Also machte es Annahmen, machte weiter und erstellte den Entwurf. Und es ermöglichte mir, tatsächlich ein Konto zu erstellen. Also werde ich mich hier abmelden. Sie können also tatsächlich einen Kontonamen und ein E-Mail-Passwort erstellen und dann können Sie tatsächlich eine E-Mail erhalten , mit der Sie sich anmelden können. Also werde ich mich als Benutzer anmelden. Und sobald Sie ein Benutzer sind, können Sie die kostenlosen Kurse auf der rechten Seite durchsuchen. Das sind also einige Kurse, die ich eingerichtet habe. Und diese Kurse waren tatsächlich Videos, die auf meinem Google Drive gespeichert waren. Also habe ich diese Beschreibung erstellt, und hier ist die kostenlose Vorschau. Das sollte funktionieren. Das ist ein bisschen selbstverständlich. Okay. Also das ist der Vorverkauf und wenn du ihn nicht gekauft hast, wird der Rest gesperrt, bis du den Kurs kaufst. Du kannst hier also sehen, dass die anderen Lektionen gesperrt sind. Also kann jemand entweder den Kurs kaufen oder ein All-Access-Abonnement abschließen, und ich habe das mit Stripe eingerichtet, sodass tatsächlich Zahlungen akzeptiert werden. Und da es sich um den Testmodus handelt, wird Ihre Karte nicht wirklich belastet. Und sobald Sie dies abgeschlossen haben, erhalten Sie den Link zum Kurs. Okay, schauen wir uns einfach an, wie es als Administrator vom Backend aus aussieht als Administrator vom Backend , also melde ich mich ab Und ich habe ein Admin-Konto. Hier drüben. Wenn ich jetzt zu Admin gehe, Hoppla Wenn ich zu Admin gehe. Ich kann die Kurse auswählen. Ich kann auch einen neuen Kurs erstellen. Und das ist der Teil, in dem ich tatsächlich mein Google Drive durchsuchen und auswählen kann, dass ich mein Google Drive tatsächlich durchsuchen kann. Und wähle einige Lektionen , die auf meinem Google Drive gespeichert sind. Ziemlich cool. Also ja, das Schlüsselkonzept hier ist, dass Sie mit einem Connector eine Verbindung zu Inhalten oder Dateien herstellen können , die auf Ihrem Google Drive gespeichert sind. Je nach Konnektor, wie bei Stripe, dafür Zahlungen und verschiedene Arten von Konnektoren erforderlich. Und wenn wir uns die Eingabeaufforderungen auf der linken Seite ansehen, zeige ich Ihnen nur einige der wichtigsten Eingabeaufforderungen Eine der Aufforderungen lautete also, dem Administrator zu erlauben, Google Drive zu durchsuchen und Kurse zur Veröffentlichung auszuwählen Und von da an ging es nur noch darum, die App zu testen und dann kleine Änderungen vorzunehmen und pro Lektion einen Thumbnail-Picker hinzuzufügen, sodass jede Videovorschau ein benutzerdefiniertes Thumbnail aus dem Drive verwendet werden kann ein benutzerdefiniertes Thumbnail aus dem Drive Erlauben Sie dem Administrator, das Titelbild zu ändern und die Stripe-Integration hinzuzufügen , damit Sie mit Stripe bezahlen können Okay. Erlauben Sie dem Administrator, Lektionen, die aus Google Drive ausgewählt wurden, hinzuzufügen oder zu entfernen , Drag-and-Draw-Funktionen hinzuzufügen und so weiter. Und ich bin an einem Punkt angelangt, an dem ich diese App tatsächlich veröffentlichen kann. Es ist ziemlich benutzerfreundlich, und das Schöne ist, dass ich mehr Kurse erstellen kann , indem ich auf meinem Google Drive stöbere, und ich habe auch meine veröffentlichten Kurse hier. Und bei denen, die veröffentlicht sind, kann ich mir die Lektionen tatsächlich ansehen. Ich kann sie modifizieren. Und es ist nicht nur auf Online-Kurse beschränkt. könnte ich alles auf meinem Google Drive verkaufen Mit der Integration von Stripe könnte ich alles auf meinem Google Drive verkaufen. Also los geht's, wir haben veröffentlichte Kurse. Wir haben einige, die sich im Entwurfszustand befinden. Wenn ich also synchronisiere, wird tatsächlich eine Verbindung zu Ihrem Google Drive hergestellt. Ich zeige dir die Videos , die sich in dem Ordner befinden. Wenn ich also auf Lektionen klicke, erhalte ich die Bestätigungsnachricht für die Synchronisierung. So kann ich die Beschreibung, den Preis und das Titelbild ändern . Ich kann Unterricht nehmen. Und ja, ich kann den Kurs hier anpassen. Ich kann ein Bild auswählen und mein eigenes hochladen. Ich denke, Sie haben die Idee, dass hier, Sie wissen schon, eine Menge Sie wissen schon, eine Menge Power mit Liebenswerten und Verbindungsstücken steckt Und deine Vorstellungskraft ist es wirklich so ziemlich. Wenn du also nicht all das durchmachen willst , um etwas Ähnliches zu erstellen, werde ich das als Vorlage verpacken und es dir ermöglichen, deine eigenen Online-Kurse zu erstellen , deine eigenen zu verkaufen wenn du Google Drive verwendest. Okay. Also ja, das ist die Stärke von Lovable und Connectors. 5. Vorlagen und Remixe: Okay, das sind die verschiedenen Vorlagen, die in Lovable verfügbar sind, und ich zeige dir nur, wo du sie finden kannst Lass uns einfach zur Hauptseite gehen. Von hier aus können Sie also nach unten scrollen. Also klicke ich oben links auf das Hauptsymbol für die Startseite. Und dann scrolle nach unten. Du kannst meine Projekte sehen, aber ich kann auf Liebenswerte Vorlagen klicken und ich kann auf Alle durchsuchen klicken, und ich kann auf Alle durchsuchen klicken damit du ein paar wirklich gute Ausgangspunkte hast Je nachdem, welche Art von Website Sie möchten, benötigen Sie eine Plattform für Reiseinhalte, ein Formular zur Einreichung von Fehlern für die IT, Fotostudio oder eine Marktplatzplattform für Ferienwohnungen KI-Filmproduktion. Also Homepage-Vorlage für visuelle Planungsseiten. Schauen wir uns diese Mietplattform hier an. Sie können also darauf klicken. Wählen Sie Vorlage verwenden aus. Und das nennen wir einen Remix. Remix bedeutet also im Grunde ein bestehendes Projekt zu nehmen und es zu benennen Ich lasse es einfach so stehen. Okay, lies den Haftungsausschluss, bestätige ihn und mische ihn neu. Also los geht's. Es erstellt ein neues Projekt, richtet die Integrationen Und wenn das erledigt ist, werden wir die Möglichkeit haben, von vorne anzufangen und es nach unseren Wünschen anzupassen Wirklich neugierig zu sehen , wie dieser aussieht. Okay, der Remix ist fast fertig. Auf der linken Seite der Eingabeaufforderung werden mir einige Fragen gestellt Was ist dein Hauptziel für dieses Remix-Projekt? Erstellen Sie eine echte Produktportfolio-Demo oder lernen Sie die Codebasis kennen? Lassen Sie uns sagen, lassen Sie uns ein echtes Produkt einsetzen. Was möchten Sie als Nächstes zuerst angehen? Branding und Design, Backhand-Integrationen, Features und Funktionen Lassen Sie uns Merkmale und Funktionen auswählen. Lassen Sie uns die bestehende Lovable Cloud verwenden, einreichen Und ich werde weitermachen und das einfach testen Valencia, ich bin mir nicht sicher, ob das irgendwelche Scheindaten enthält. Also lass uns das einfach testen. Also können wir dieses Vancouver testen und damit herumspielen . Okay, die Aufforderung möchte, dass wir etwas beantworten. Entfernen Sie die Demo, die Hardcodierung und Anzahl der Demos, damit die App mit echten Benutzerdaten und Zahlungen ausgeführt werden kann . Entferne die demospezifischen E-Mails. Okay. Nun, ich werde sagen, ja, fangen wir dort an. Ordnung, die Demo wurde neutralisiert und ja, wir können das weiter modifizieren Aber ich denke, du verstehst die Idee. Wir haben einen guten Ausgangspunkt. Wir können das testen. Wir können Funktionen hinzufügen. Wir können die Admin-Konten zurücksetzen. Und ja, das ist ein Beispiel dafür , wie wir eine Vorlage verwenden. Ich möchte dir nur zeigen, ob wir ein bestehendes Projekt von mir remixen wollen Okay, das ist also eines meiner bestehenden Projekte hier. Pickleball-Liste Wenn ich es remixen wollte, würde ich in die obere linke Ecke klicken Ich würde Remixe als Projekte auswählen. Ich würde ihm einen Namen geben. Ich würde auswählen, ob ich die Projekthistorie einbeziehen möchte oder nicht, und dann würde ich von einem neuen Ausgangspunkt ausgehen. Wir haben uns also bereits mit einem Remix befasst , als wir die Vorlage verwenden. Ich gehe einfach schnell zu einem bestehenden Remix über, weil der Remix eine Weile dauert Wir gehen einfach zu diesem Remix. Und sehen wir uns hier einfach meine ersten Eingabeaufforderungen an. Okay, ich habe darum gebeten, es neu gemischt zu haben, weil ich ihm zusätzliche Funktionen geben wollte Also würde ich die Möglichkeit hinzufügen , Personen anhand ihrer Bewertungen zu suchen Aber ein weiterer Grund, warum du Remixe machen möchtest , ist vielleicht, dass ich dieselben Funktionen anwenden möchte, aber auf verschiedene Sportarten Also vielleicht eine Golfliste, eine Golfplatzliste, oder vielleicht möchten Sie eine neue Funktion hinzufügen, Sie möchten sie einfach sichern Also, ja, so können wir Remixe machen. Also werde ich nicht den gesamten Prozess durchmachen, aber was ich tun werde, ist meine Hauptaufgabe, mir einen Globalisten auszusuchen Ich wähle Remix. Ich nenne es Golfliste. Also im Grunde würde ich es den Remix durchgehen lassen, und sobald ich die Möglichkeit habe, es aufzufordern, würde ich es einfach bitten, die Daten durch Golfplätze statt durch Pickleballplätze zu ersetzen die Daten durch Golfplätze statt durch Pickleballplätze 6. Pickelliste mit Liebenswerten: In diesem Video werde ich dir eine ziemlich fertige, vibe-codierte Seite zeigen eine ziemlich fertige vibe-codierte Seite Und das ist eine Pickleball-Liste. Es ist eine globale Liste von Pickleball-Clubs und -Plätzen auf der ganzen Welt, und sie Gehen wir also zur Hauptseite. Also gruppiert es die Kunst nach Ländern. Es werden die besten Spieler in jedem Land angezeigt. Sie können die Anzahl der Spielfelder sehen , die zu einer Gruppe für jedes Land gehören, und es gibt unterschiedliche Ansichten. Sie haben die Kachelansicht, wir haben die Rasteransicht, die nicht nach Ländern gruppiert ist, und wir haben die Kartenansicht. Und dann haben wir zusätzliche Filter, sodass Sie nach Häfen suchen können , die sich in einem bestimmten Land befinden. Ich kann mir vorstellen, dass das hier behoben werden muss. Aber lass uns einfach einen Test eingeben. Thailand. Und Sie können hier sehen, dass ich eine Benutzerpasswortdatenbank eingerichtet habe. Wenn Sie also ein Konto erstellen, haben Sie die Möglichkeit, ein CORT einzureichen Sie können der Liste tatsächlich ein neues CORT hinzufügen. Und Sie können tatsächlich eine Bewertung abgeben. Sie können Fotos hinzufügen. Ich werde dir nur einen zeigen, bei dem ich getestet habe , eine Bewertung hinzuzufügen. Also hier ist das Foto, das ich hinzugefügt habe. Jeder, der ein Konto hat, kann also eine Einreichung einreichen. Sie können auch Spiele hosten. Und ja, hier drüben kannst du ein Spiel erstellen. Du kannst Spiele hosten. Und ich möchte es ein bisschen sozialer machen , damit du dich mit anderen Spielern verbinden kannst , die du vielleicht nicht kennst. Ich habe einen Posteingang erstellt, um mit anderen Spielern zu interagieren . Der Profilbereich. Sie können Ihre Bewertung tatsächlich auswählen. Sehen Sie sich die RTs an, die Sie hinzugefügt haben. Und ich habe eine Admin-Ansicht erstellt. Der Administrator kann also Einreichungen tatsächlich genehmigen. Okay, das ist also das Admin-Konto. Unter dem Admin können wir also alle ausstehenden Einreichungen sehen, alle genehmigten. Sie können also sehen, dass ich dieses Foto für das CRT genehmige , was nett ist Ja, das ist also die Pickelist-App. Und Sie können sehen, dass der Domainname Tennis Pickleball Dot Coach ist Nun, das ist eigentlich eine Subdomain meiner Pickleball-Website Tennis to Pickleball und ich habe hier einen Link erstellt. Und umgekehrt. Ich muss das auffrischen. Das sollte also auch zurück zu meiner Website führen. Wenn du auf das Logo klickst. Wir müssen die neueste Version veröffentlichen, weil ich diese Änderung gerade vorgenommen habe, also müsste ich sie tatsächlich veröffentlichen Lassen Sie mich Sie also hinter die Kulissen mitnehmen. Lassen Sie mich diese letzte Änderung einfach hier veröffentlichen. Also einige wichtige Dinge, die es zu beachten gilt: Ich verwende Lovable, um diese Seite zu erstellen Ich verwende eigentlich eine Worpress-Website nur für meine reguläre Ich habe diese WordPress-Seite auf WordPress erstellt, das von ScruD gehostet wird . SiteGround ist daher eine Hosting-Website, von der bekannt ist, dass sie sehr reaktionsschnell empfohlen wird Sie können sehen, dass sie mir bereits einige Statistiken gegeben hat, was interessant ist, weil ich die Seite gerade erstellt habe So wie es sich auf die eigentliche Domain bezieht. Ich musste tatsächlich eine Subdomain erstellen, List Dot Pickleball Dot Und dann Lovable, sobald ich die App veröffentlicht habe, gibt es dir die Möglichkeit, auf deine benutzerdefinierte Domain zu verweisen , sodass du sie in deiner Subdomain auflisten kannst Ich gebe dir die IP-Adresse. Das war ein bisschen knifflig, aber es kann auch über diese URL hier aufgerufen werden. Lassen Sie mich Ihnen den Prozess also nur den Anfang auf der Website von Lovable zeigen den Anfang auf der Website von Lovable Lass uns einfach zurückgehen. Siehst du, es gibt eine Menge beweglicher Teile. Ich zeige Ihnen einige der wichtigsten Eingabeaufforderungen zur Erstellung dieser App. Okay. Erstellen Sie ein professionelles, auf Mobilgeräte reagierendes globales Pickleball-Verzeichnis namens Picklelist Die App sollte es Benutzern ermöglichen, Gerichtsstandorte weltweit per Crowdsourcing zu ermitteln Kernfunktionen gehören eine interaktive Karte und Suche, Crowdsourcing-Einträge, sodass Nutzer ein CORT einreichen können, Benutzerprofile und Wir haben also eine Datenbank. Benutzer können ihre eigenen Profilbewertungen hinzufügen. Und dann, damit wird der Kern eingerichtet, die erste Aufforderung. Und was mir an Lovable gefällt, ist, dass es Ihnen einige Möglichkeiten gibt, einige Entscheidungen zu treffen , nachdem Sie die Aufforderung eingereicht haben Meine nächste Aufforderung bestand also darin, einige der Probleme zu beheben. Und dann wollte ich das Verzeichnis zunächst mit einigen aktuellen Kunstwerken füllen , denn um den Stein ins Rollen zu bringen, benötigen Sie einige vorhandene Daten Deshalb habe ich sie gebeten, das Verzeichnis mithilfe von Informationen aus dem Internet mit Kunstwerken aus Kanada zu füllen das Verzeichnis mithilfe von Informationen aus dem Internet mit Kunstwerken aus Kanada . Was es auch getan hat Und ich kenne diese Gerichte, also ist die KI in Lovable intelligent genug , um einige Daten im Internet Und dann habe ich kleinere Änderungen vorgenommen, sodass der Benutzer zwischen Map und ListView wählen Also fing ich an, einige Tests an der App durchzuführen und bemerkte einige neue Funktionen, die ich brauchte Deshalb ermöglichen wir den Leuten, Fotos hochzuladen und sie dann mit weiteren Daten zu füllen Und dann habe ich ein Administratorkonto eingerichtet , um die Beiträge zu überprüfen Und dann habe ich mehr Gerichte in den Vereinigten Staaten und Mexiko gegründet. Und dann habe ich es einfach repariert , weil ich die Fotos nicht ansehen konnte, nachdem eine Einreichung genehmigt wurde, also haben sie das repariert. Und dann habe ich einige Änderungen an der Kachel vorgenommen. Ich wollte Internetgeschwindigkeiten und Lebenshaltungskosten auflisten, weil es eine Pickleball-Zielseite Und der Rest besteht nur darin, Dinge zu reparieren , die nicht funktioniert haben Hier ist also die Aufforderung , den Miniaturansichten zusätzliche Informationen hinzuzufügen Fügen Sie den Vorschaubildern zusätzliche Messwerte für Pickleball-Ziele, Recherchen wie monatliche Lebenshaltungskosten, aktuelles Wetter und Wi-Fi-Geschwindigkeiten Das ist also, glaube ich, in der Rasteransicht. Sie können dort also all diese wichtigen Informationen sehen. Stellen Sie dann die Standardansicht so ein, dass sie nach Ländern gruppiert und dann nach den drei besten Spielern in jedem Land angezeigt wird. Dann habe ich hier einen Logo-Header hinzugefügt, und Sie können sehen, dass ich einfach die Möglichkeit gegeben habe, auf meine Websites zu verlinken, einen Nachrichtenbereich und die Möglichkeit, Spiele zu hosten, hinzugefügt habe. Ja, das ist so ziemlich alles. Es ist also ein Prozess Sie Ihre Kernfunktionen abrufen, testen und dann herausfinden, was behoben werden muss, zusätzliche Funktionen hinzufügen und den Vorgang einfach wiederholen Und ja, der wichtigste letzte Teil bestand darin, es auf meiner Domain zu veröffentlichen Es ist ziemlich viel Arbeit, einen brauchbaren Feinschliff zu erreichen. Aber es gibt immer kleine Dinge , die Sie möglicherweise reparieren müssen. Aber wenn wir aktualisieren, aktualisieren wir das. Die einzige Funktion, die ich testen muss, ist die Verlinkung zurück zur Website, und das funktioniert. Da haben wir es also. Also das ist die Verwendung von Lovable Gehen wir für Lovable einfach zurück zur Basiseingabeaufforderung, damit wir auf Click klicken können oben links auf Click klicken können, um zum Dashboard zurückzukehren Sie verwenden also GBT 5.5 und hier ist die Hauptaufforderung. Was ich an Lovable mag, ist, dass es einfach zu bedienen ist. Es ist mächtig Sie können Ihre bestehenden Projekte sehen. Es gibt bereits Vorlagen. Also hat wirklich jeder einen guten Ausgangspunkt um eine Vibe-App zu erstellen, und wie Sie sehen können, habe ich sie mit meiner eigentlichen Website verlinkt, wo sie einfach wie jede andere App wird, und ja, das nutzt WordPress und Sitground Also ja, kurz gesagt, so habe ich die Pickelist mit Lovable erstellt Die letzte Sache, die ich Ihnen nur mitteilen werde, sind die tatsächlichen Kosten. Also verwende ich den Pro-Plan. Also gehe ich zu meinem M. Ich gehe zu meinen Plänen. Ich habe den Pro-Tarif. Der P-Plan kostet also 50 US-Dollar pro Monat. Und ja, es sind mehr als genug Credits, um diese App zu erstellen Also haben sie mir 100 monatliche Credits gegeben, und du hast gesehen, dass ich sie aufgebraucht habe. Ich habe immer noch 84 Credits übrig, und Sie können hier die Credits sehen, sie werden täglich und monatlich zurückgesetzt, und das ist auch etwas, das Sie beachten sollten. Sie möchten versuchen, die App mit der geringsten Anzahl an Credits zu erstellen , aber Sie möchten auch genügend Zeit haben, um zu testen und sicherzustellen , dass alle Fehler behoben sind 7. App veröffentlichen: Sie werden also den Punkt erreichen, an dem Ihre App bereit ist, mit der Welt geteilt zu werden, und an diesem Punkt möchten Sie Ihre App veröffentlichen. Sie können sie selbst testen und in der Vorschau anzeigen, aber ja, Sie müssen sie veröffentlichen, wenn Sie sie mit der Außenwelt teilen möchten. Der Vorgang besteht also darin, auf Veröffentlichen zu klicken, und Lovable führt Sicherheitsscans Ich gebe Ihnen die Möglichkeit, grundlegende Sicherheitsscans durchzuführen, was großartig ist, da Vibe-Coding Problem war verschiedenen Vibe-Coding-Plattformen oft ein Sie haben dann die Möglichkeit, es auf einer liebenswerten Domain oder einer benutzerdefinierten Domain zu veröffentlichen , die Sie bereits besitzen. Ich besitze bereits besitzen. Ich besitze mehrere Domains bei Namecheap und Go Daddy, und das ist in Ordnung, und Lovable macht hervorragende Arbeit, wenn es darum geht, eine Verbindung zu diesen Plattformen herzustellen oder Ihnen die Anweisungen zu oder Ich besitze auch Domains auf SiteGround, und dort gibt es eine gute Ich empfehle daher Sight Ground als Plattform für Ihre Domains und Websites . Ich verwende die Plattform, um meine WordPress-Websites zu hosten. Und es funktioniert gut mit Lovable. Eine weitere Sache ist, wenn Sie den Code speichern möchten, können Sie dies tun, indem Sie ihn mit einer Plattform namens GitHub verbinden einer Plattform namens GitHub GitHub ist also eine Plattform , mit der Entwickler tatsächlich arbeiten, sie speichern den Code in sogenannten Repositorys Sobald Sie also mit Ihrem Lovable-Projekt fertig sind, können Sie den Code dort speichern Vielleicht möchtest du deinen Code als Vorlage weiterverkaufen oder mit einem anderen Team teilen Also werde ich auch erläutern , wie das geht. Sie können Ihr Projekt auch einfach als liebenswerte Vorlage kostenlos mit anderen teilen , und ich zeige Ihnen auch, wie das geht Du kannst auch ein von dir erstelltes Projekt remixen. also eine andere Version davon erstellen, haben Sie vielleicht eine Pickleball-Liste erstellt und möchten eine Golfliste erstellen Ich werde Ihnen auch zeigen, wie das geht. Solange du kein Konto hast du keine Zahlungen mit Stripe akzeptierst, kannst du ein Projekt neu mixen Nachdem das gesagt ist, lassen Sie uns zur Sache kommen. 8. Speichern auf github: Ich werde Ihnen zeigen, wie Sie Ihr liebenswertes Vibe-Coding-Projekt nehmen und es mit GitHub synchronisieren können. Das ist die Plattform, auf der Sie den Code für Ihr Projekt mitbringen und dort speichern, als Zip-Datei herunterladen können, damit Sie ihn mit einem Entwickler teilen können , um Ihr Projekt weiter zu verfeinern, oder vielleicht möchten Sie Ihre liebenswerte Vorlage an jemand anderen verkaufen Also habe ich meinen Projekt-Golf-Yard-Kumpel. Ich werde den Mauszeiger auf der linken Seite bewegen. Ich werde auf die drei Auslassungspunkte klicken. Ich werde auf Einstellungen klicken. Also auf der linken Seite, unter Projekt, kann ich Git sehen. Also werde ich auf Git klicken. Ich werde mich für die Synchronisierung mit Git entscheiden. Und du kannst sehen, dass wir verbunden sind, und ich kann auf dieses Drop-down-Menü klicken , um Auf GitHub anzeigen auszuwählen GitHub ist also eine völlig andere Plattform. Und unter diesem Codebereich kann ich darauf klicken und ZIP herunterladen auswählen. Das bedeutet also, dass ich eine vollständig enthaltene Datei oder Cyto-Dateien in der Zip-Datei habe eine vollständig enthaltene Datei oder Cyto-Dateien in , die alle Codierungskomponenten enthalten , die ein Entwickler benötigen würde, um weiter daran zu arbeiten, oder vielleicht möchte er, wie gesagt, meine Vorlage von der liebenswerten Plattform aus verwenden So können wir unser Projekt auf GitHub speichern. 9. Fazit: Okay, damit ist unser Lovable-Kurs für Vibe-Coding Es ist Juli 2026 und Lovable hat Sie haben weitere Vorlagen hinzugefügt. Sie haben leistungsstarke Konnektoren hinzugefügt, denen Sie problemlos eine Verbindung zu Plattformen wie Stripe herstellen können, um Zahlungen entgegenzunehmen und Apps zu erstellen denen Benutzerkonten einfach erstellt werden können. Über die Konnektoren können Sie eine Verbindung zu Google Drive oder TikTok herstellen. Und ich habe einige , wie ich sagen würde, ziemlich funktionale Apps entwickelt , die ich mit dieser Version von Lovable tatsächlich im Internet veröffentlicht mit dieser Version von Lovable tatsächlich im Internet habe. Ich würde in den letzten Jahren sagen, Lovable. Ich würde sagen, Lovable war in den vergangenen Jahren noch nicht bereit dafür, aber ich kann mir die Verbesserungen vorstellen, die Sie jetzt in Ihrer App bearbeiten und erstellen können jetzt in Ihrer App bearbeiten und erstellen Da ist der Sicherheitsscan, und wenn Sie etwas veröffentlichen, gibt es eine enge Integration mit SytGround, das ich verwende, um meine Domains und Websites zu hosten Ich bin also gespannt, wo ich das hinbringen kann, wo Sie das Wissen, das Sie in diesem Kurs erworben haben, nutzen können , um zu sehen, was Sie erstellen können Wie Sie sehen können, habe ich die Pickleball-Liste und das TikTok-Portfolio erstellt . Ich habe den digitalen Drive-Store eingerichtet , um mein Filmmaterial von meinem Google Drive und vieles mehr zu verkaufen meinem Google Drive und vieles mehr zu Jetzt sind Sie an der Reihe, zu sehen, was Sie mit Ihren Fähigkeiten und Ihrer Kreativität schaffen können. Viel Glück auf deiner zukünftigen Vibe-Coding-Reise.