Lernpfad
KI-Grundlagen
0 Min.
Bolt.new ist ein neues KI-Tool, das Text in Apps verwandelt. Ähnlich wie Lovable kannst du damit Apps nur mit Hilfe von Eingabeaufforderungen erstellen. In diesem Tutorial zeig ich dir das Tool und wir versuchen, damit eine App für das Training im Fitnessstudio zu erstellen.
Wenn du mehr über solche Tools erfahren möchtest, empfehle ich dir, dir unser Lovable-Tutorial.
Was ist Bolt.new?
Bolt.new ist ein Tool, mit dem Entwickler schnell Full-Stack-Anwendungen mit modernen Frameworks, Bibliotheken und Integrationen erstellen können, die schon fertig eingerichtet sind.
Anstatt ganz von vorne anzufangen oder ewig damit zu verbringen, Projektvorlagen einzurichten, kannst du einfach was wie „Erstelle eine SaaS-Landingpage mit Authentifizierung und Stripe-Zahlungen” eingeben, und Bolt baut dir in Sekundenschnelle ein funktionierendes Projekt auf.
Die Hauptsache ist, den Abstand zwischen einer Idee und einem funktionierenden Produkt zu verkürzen. Mit Bolt.new musst du Abhängigkeiten, Routing, Statusverwaltung oder Styling-Bibliotheken nicht mehr manuell zusammenstellen; das Tool kümmert sich automatisch darum. Es ist so gemacht, dass es von Anfang an den besten Praktiken folgt, sodass der Code strukturiert und einsatzbereit ist und nicht nur ein Wegwerf-Prototyp.
Mit Bolt.new kannst du ein Projekt mit nur einem Klick veröffentlichen und es so für alle im Internet zugänglich machen. Aber, zum Zeitpunkt, wo ich das hier schreibe, sind wichtige Sachen wie Datenbank und Authentifizierung noch in der Beta-Phase, was die Nutzung für echte Anwendungen ziemlich einschränkt.
So fängst du mit Bolt.new an
Um loszulegen, geh einfach auf ihre Website und mach dir ein Konto. Ohne Abonnement kannst du nur 1 Million Token pro Monat und maximal 150.000 Token pro Tag nutzen.
Mit der kostenlosen Version kannst du es mal ausprobieren, aber rechne nicht damit, dass du die App oft ändern kannst.
Ich hab versucht, das Token-Limit zu umgehen, indem ich alle Funktionen in der ersten Eingabeaufforderung ganz genau angegeben hab, aber ich hab festgestellt, dass dadurch meistens nur die Hauptidee der App generiert wird, was weitere Iterationen und damit mehr Tokens erfordert.
Wie man mit Bolt.new eine App erstellt: Fitnessstudio-Coaching-App
Um Bold.new zu testen, werden wir versuchen, eine Fitness-Coaching-App zu erstellen. Die Grundidee von so einer App ist, dass sie jeden Tag Übungen für uns plant und uns dabei hilft, unsere Fortschritte zu verfolgen. Dann macht es Pläne, die auf alten Daten basieren.
Hier ist die erste Eingabeaufforderung, die ich benutzt habe:
Ich will 'ne App entwickeln, mit der man seine Workouts im Fitnessstudio tracken kann. Jeden Tag sollte es mir ein Trainingsprogramm geben. Eine Übung gibt vor, welches Gerät man benutzt, wie schwer die Gewichte sind und wie oft man sie wiederholt. Mit der App sollte ich für jede Übung angeben können, wie viele Wiederholungen ich gemacht habe und ob es schwer, normal oder leicht war. Dann werden diese Infos genutzt, um die nächsten Tage zu planen.
Nachdem ich die Eingabeaufforderung abgeschickt hatte, wurde ein React-Projekt erstellt und die grundlegenden Funktionen wurden umgesetzt. Es gibt eine komplette Liste aller Dateien, die in den Protokollen erstellt wurden:
Nach einer Weile lief die App. So sah es zu diesem Zeitpunkt aus:
Als ich eine neue Trainingseinheit erstellt habe, kam das hier raus:
Das war nicht ganz das, was ich mir vorgestellt hatte, weil jede Übung aus nur einem Satz bestand, aber es war nah dran. Um ehrlich zu sein, glaube ich, dass meine erste Frage dazu nicht ganz klar war. Hier kommt das das Verständnis von Prompt Engineering nützlich ist.
Was die Token angeht, hat diese erste Eingabeaufforderung schon 97.000 der 150.000 pro Tag verfügbaren Token verbraucht. Das zeigt, dass wir mit dem kostenlosen Tarif unsere Ideen nicht wirklich weit bringen können.
Änderungen an der App anfragen
Die Hauptidee hinter diesen Text-zu-App-KI-Tools ist, dass wir unsere Ideen umsetzen können, ohne programmieren zu können, indem wir einfach mit der KI chatten und Änderungen anfordern.
Um das auszudrücken Vibe-Coding zu testen, bitte ich darum, dass jede Übung aus mehreren Sätzen besteht.
Bolt.new hat ein paar Änderungen gemacht, aber als es die App nochmal rendern wollte, gab's einen Fehler.
Die Benutzeroberfläche erkennt den Fehler und bietet die Möglichkeit, automatisch zu versuchen, ihn zu beheben.
Manchmal kann es den Fehler direkt erkennen und sich selbst reparieren. Aber in diesem Fall haben die neuen Änderungen noch andere Fehler mitgebracht:
Nach ein paar Runden Fehlerbehebung hatten wir eine funktionierende Version, in der jede Trainingseinheit mehrere Übungen mit jeweils mehreren Sätzen (Anzahl der Wiederholungen) hatte. Für jeden Satz können wir notieren, wie viele Wiederholungen wir gemacht haben, und dann Feedback dazu geben, wie schwer es uns gefallen ist.
Die Rückmeldungsdaten sollten für die Planung zukünftiger Sitzungen genutzt werden. Ich wollte mich mit dir unterhalten, um mehr darüber zu erfahren, wie diese Daten genutzt werden, aber da waren meine Credits für den Tag schon aufgebraucht.
Eines der Probleme, das ich oft bei der Entwicklung solcher Anwendungen habe, ist, dass wir kaum Einfluss darauf haben, was im Hintergrund passiert. Wir können das durch Ausprobieren und Benutzen der App sehen, aber das reicht nicht immer aus, um wirklich zu verstehen, wie die Dinge umgesetzt sind.
Ein Blick auf den Bolt.new-Code
Wenn du programmieren kannst, kannst du dir durch einen Blick auf den Code ein Bild davon machen, wie die App funktioniert. Anders als bei Lovable kann man bei Bolt.new den Code ganz einfach direkt in der Weboberfläche sehen.
Wenn du den Code-Editor öffnest, siehst du alle Projektdateien. Wenn du auf eine Datei klickst, wird sie im Code-Editor geöffnet, sodass du sehen kannst, wie sie funktioniert, und direkt im Browser Änderungen vornehmen kannst.
Dort habe ich eine Datei namens „ workoutGenerator.ts ” gesehen, deren Name schon sagt, dass sie die Logik zum Erstellen neuer Workouts enthält.
Da ich keine Credits mehr hatte, hab ich den Code kopiert und in chatGPT eingefügt und es gebeten, mir das zu erklären. Hier ist eine kurze Erklärung, wie es funktioniert:
Die App erstellt jeden Tag ein neues Training für dich, indem sie sich ansieht, was du schon gemacht hast. Es zählt, wie viele Workouts du schon gemacht hast, und wechselt zwischen verschiedenen Arten, wie Oberkörper, Unterkörper oder Ganzkörper, damit deine Muskeln mit der Zeit ein ausgewogenes Training kriegen. Für jede Trainingsart werden zufällig ein paar Übungen ausgewählt, die zu den richtigen Muskelgruppen passen, damit du nicht immer die gleichen Bewegungen machst.
Es schaut auch, wie gut du bei deinen letzten Trainingseinheiten warst. Wenn dir eine Übung leicht fällt und du oft Erfolg hast, wird das Gewicht leicht erhöht oder es werden mehr Wiederholungen hinzugefügt, damit du weiterhin gefordert bist. Wenn eine Übung zu schwer ist, wird das Gewicht reduziert, damit sie leichter zu machen ist. So passt sich das Training deinen Fortschritten an und hilft dir, dich im richtigen Tempo zu verbessern, ohne dich zu überfordern. Das klingt für mich vernünftig, vor allem für die erste Version des Produkts.
Veröffentlichung der Bolt.new-App
Um die App zu veröffentlichen, klick einfach oben rechts auf den Button „Veröffentlichen“.
Sobald es veröffentlicht ist, kriegen wir im Chat eine URL, über die wir die App öffnen können.
Wir können es im Browser nutzen und mit anderen teilen. Wir können es auch auf dem Handy installieren. Da es sich aber um eine Webanwendung handelt, installieren wir sie nicht über den App Store, sondern über den Browser, und zwar so:
- Öffne den Link auf dem Handy.
- Klick einfach auf das Optionsmenü im Browser.
- Klick auf die Option „Zum Startbildschirm hinzufügen”.
Leider hat Bolt.new die Anwendung nicht von Anfang an als Progressive Web App (PWA) gemacht. Das heißt, wenn wir es so wie gerade erklärt auf dem Handy installieren, wird einfach ein Link auf unserem Startbildschirm erstellt, sodass es sich nicht groß anders anfühlt als die Nutzung im Browser.
Ich hab's gebeten, die App in eine PWA umzuwandeln, damit sie sich wie eine native App verhält, aber das hat nicht so gut geklappt. Bolt.new hat gut angefangen und die nötigen Dateien erstellt, aber eine der Anforderungen für eine PWA sind Bildlogos. Leider hat Bolt.new versucht, diese durch das Schreiben der Bildbytes zu erzeugen, was wahrscheinlich nicht nur unsinnige Bilder erzeugt, sondern auch alle Token verbraucht hat.
Eine eigene Domain einrichten
Die URL, die wir für die App bekommen haben, wurde automatisch erstellt, was sie nicht ideal für die Produktion macht. Für ein echtes Produkt müssten wir unsere eigene Domain kaufen und einrichten. Das kannst du auf der Seite „Domains & Hosting“ in den Projekteinstellungen machen.
Die aktuelle Version der App speichert keine Daten in einer Datenbank. Wenn wir also die App erst auf unserem Computer und dann auf unserem Handy öffnen, sehen wir nicht die gleichen Daten. Die Daten werden lokal auf dem Gerät gespeichert. Wenn du also dasselbe Gerät benutzt, bleiben die Daten lokal gespeichert. Deshalb gehen der aktuelle Trainingsplan und die bisherigen Trainingseinheiten nicht verloren, wenn wir die App aktualisieren.
Für einen Prototyp ist das okay, aber für ein kommerzielles Produkt ist es überhaupt nicht geeignet. Im Moment sind Authentifizierung und Datenbanken noch in der Beta-Phase. Du kannst darauf zugreifen, indem du dich für die private Beta-Version anmeldest.
Fazit
Ich finde, Bolt.new ist echt super, um schnell einen Prototyp zu erstellen und eine Produktidee zu testen. Allerdings macht die KI oft nur oberflächliche Sachen, was bedeutet, dass man für richtige Anwendungen ziemlich viel wiederholen muss.
Selbst wenn man eine detaillierte erste Eingabe macht, kratzt das Ergebnis nur an der Oberfläche der ganzen Spezifikation, und die Token-Limits der kostenlosen Version machen es fast unmöglich, ohne ein Abonnement irgendwas Sinnvolles zu erstellen.
Da wichtige Dienste wie Authentifizierung und Datenbankunterstützung noch in der Beta-Phase sind, würde ich empfehlen, auf die vollständige Veröffentlichung zu warten, bevor du versuchst, eine produktionsreife Anwendung zu erstellen.
Insgesamt funktioniert Bolt.new ähnlich wie seine Konkurrenten, aber das Besondere daran ist, dass man den Quellcode direkt im Webinterface anschauen und bearbeiten kann. Das ist ein wichtiger Vorteil, der eines der größten Probleme löst, die ich mit Plattformen wie Lovable hatte.
