Wie ich in 2 Tagen eine App mit liebenswertem, Supabase und Netlify erstellt und bereitgestellt habe

etwas alleine schaffen. Ich hatte Ideen, hatte aber nicht die Zeit und die Ressourcen, um daran zu arbeiten.

Die Probability, Apps oder andere Softwareprodukte für Nichtentwickler zu entwickeln, hat mit den Fortschritten von LLMs erheblich gesteigert, da Andrej Karpathy auch mit dem Begriff „Vibe-Codierung“ betonte.

Ich wollte meine Probability mit Vibe -Codierung nutzen und eine Net -App erstellen. Dies battle eher ein Experiment, um zu beweisen, dass ich in 2 Tagen eine App erstellen und bereitstellen kann. Es musste nicht perfekt sein, das minimal lebensfähige Produkt würde den Job erledigen.

In diesem Artikel werde ich einen hochrangigen Überblick über den Prozess geben, einschließlich einiger Tipps und Tips zu den Instruments, die ich verwendet habe und wie viel ich für sie ausgegeben habe. Wenn Sie das Endprodukt zuerst sehen möchten, ist es Drawcraft.io.

Ich habe Liebenswürdigkeit, Supabase und Netlify in diesem Projekt verwendet.

• Lieben ist ein sehr beliebter KI -App -Builder.
• Supabase ist eine Entwicklungsplattform, die alle Backend-bezogenen Prozesse abwickelt. Die nahtlose Integration zwischen liebenswerter und Supabase ist ein wichtiger Vorteil.
• Netlify wird zur Bereitstellung der App verwendet. Es werden auch Area -Namenskäufe behandelt (falls gewünscht).

Bevor ich anfange, eines dieser Instruments zu verwenden, habe ich mir ein paar YouTube -Movies auf Personen angesehen, die mit ihnen verwendet und entwickeln. Ich möchte darauf hinweisen, dass ich keine Zugehörigkeit zu diesen Instruments habe.

Aufbau mit liebenswürdiger

Liebenswert hat sowohl kostenlose als auch bezahlte Pläne. Der Professional -Plan verfügt über mehrere Preisoptionen mit unterschiedlichen Kreditbeträgen. Ich habe das günstigste für 25 USD professional Monat gekauft, was Ihnen 100 Credit gibt. Sie erhalten auch 5 kostenlose Credit professional Tag.

100 Guthaben bedeutet nicht genau 100 Eingabeaufforderungen, aber die Anzahl der von Ihnen ausgegebenen Credit ist direkt proportional zur Anzahl der Nachrichten (dh Eingabeaufforderungen).

Wenn Sie mit liebenswürdiger Aufbau bauen, wird vorgeschlagen, eine detaillierte erste Eingabeaufforderung mit klaren Anweisungen zu haben. Wenn Sie eine sehr einfache erste Eingabeaufforderung schreiben (z. B. eine Kalender -App erstellen), müssen Sie viele Nachrichten (dh Ausgeben von Credit) schreiben, um sie anzupassen. Das Hinzufügen komplexer Funktionen danach kann auch etwas komplizierter sein, als sie zunächst zu deklarieren.

Nachdem dies gesagt wurde, hier ist die erste Eingabeaufforderung, die ich verwendet habe:

## Goal
Develop an internet utility that permits customers to create custom-made drawing photographs utilizing a big language mannequin (LLM).

## Core Options

1. **Person Enter and Drawing Technology**
   - Customers can enter an outline of the drawing they want, corresponding to "Bugatti automotive," "Farmhouse," "Father and Child," or "Cristiano Ronaldo."
   - Customers choose an issue stage for the drawing: Newbie, Medium, or Superior. 
     - Newbie: Appropriate for young children with easy, distinct traces.
     - Medium: Average complexity with extra particulars.
     - Superior: Extremely detailed and complicated drawings.
   - The appliance reformats the consumer's enter right into a structured immediate for the LLM to generate the drawing.
   - Customers can view and obtain the generated picture in PNG format.

2. **Person Interface and Expertise**
   - Design a clear and trendy touchdown web page, just like a SaaS platform, utilizing whites and gentle colours for a minimalist aesthetic.
   - Make sure the interface is intuitive and user-friendly, facilitating simple navigation and interplay.

3. **Authentication and Subscription**
   - Implement consumer authentication and signup performance.
   - Provide two subscription tiers:
     - **Free Plan**: Permits as much as 3 drawings per thirty days.
     - **Professional Plan**: Permits as much as 20 drawings per thirty days at a price of $20 per thirty days.

## Technical Necessities

- **Frontend**: Use trendy net applied sciences to create a responsive and visually interesting consumer interface.
- **Backend**: Develop a strong backend to deal with consumer requests, handle subscriptions, and interface with the LLM for drawing technology.
- **Database**: Implement a database to retailer consumer info, subscription particulars, and drawing historical past.
- **Safety**: Guarantee safe dealing with of consumer knowledge and transactions, adhering to greatest practices in net safety.

## Extra Concerns

- Optimize the appliance for efficiency and scalability to deal with various hundreds and consumer calls for.
- Present clear directions and help for customers to maximise their expertise with the appliance.
- Think about implementing analytics to trace consumer engagement and drawing preferences for future enhancements.

Das erste Design erwies sich als ziemlich intestine, aber ich musste einige Anpassungen vornehmen. Nach der ersten Eingabeaufforderung habe ich hauptsächlich Nachrichten mit nur einer Anweisung verwendet. Sie können den Code auch für eine liebenswerte Benutzeroberfläche bearbeiten, um Änderungen vorzunehmen, und diese Änderungen konsumieren Ihre Credit nicht.

Supabase -Integration

Obwohl ich in meiner ersten Aufforderung geschrieben habe, Authentifizierung und Abonnement hinzuzufügen, funktionierte es nicht, weil es kein richtiges Backend hat. Hier kam Supabase ins Spiel.

Es ist sehr einfach, Supabase in Ihre liebenswerten Projekte hinzuzufügen. Sie erstellen einfach ein Supabase -Konto und befolgen die Schritte, um es in Ihr Projekt in liebenswerter Benutzeroberfläche zu integrieren.

Sobald die Supabase -Integration vollständig ist, kann liebenswert der Code zum Hinzufügen von Benutzerauthentifizierung und zum Erstellen von Datenbanktabellen und zum Hinzufügen von Kantenfunktionen zum Umgang mit Backend -Aufgaben werden.

Eins Downside Ich hatte battle, dass es kontinuierlich Anfragen zur Überprüfung des Benutzungsabonnementstatus gesendet habe. Ich habe dieses Downside festgestellt, indem ich die Netzwerkaktivität manuell überprüft habe. Ich musste ein paar Nachrichten für liebenswert ausgeben, um dieses Downside zu beheben. Dies könnte eine einfache Lösung gewesen sein, wenn Sie Entwickler sind. Ich konnte es alleine lösen, musste aber einige Zeit damit verbringen. Ich wollte mich nur schnell bewegen und für alles liebenswert benutzen.

Supabase Free Tier -Grenzen wurden schnell konsumiert, und ich musste auf einen bezahlten Plan aufrüsten, der 25 US -Greenback professional Monat kostet. Ich denke, das Downside, das ich oben erwähnt habe, hat den größten Teil meiner Grenze verbraucht.

Github -Integration

Liebenswerten macht es sehr einfach, Ihr Github -Konto zu integrieren. Sie können die Anweisungen zur liebenswerten Benutzeroberfläche befolgen, um die Integration zu vervollständigen und das Projekt in GitHub zu erstellen.

Wichtig: Denken Sie daran, dass jede Veränderung, die liebenswert in Ihrem Projekt vornimmt, automatisch in die Standardzweig in GitHub verpflichtet wird. Dies ist eine Zwei-Wege-Integration. Wenn Sie additionally Änderungen an der Standardzweig mit einer IDE- oder GitHub-Benutzeroberfläche vornehmen, werden diese Änderungen automatisch auf Ihr liebenswerter Projekt angewendet.

Ein anderer Downside Ich hatte es mit der Arbeit mit mehreren Zweigen. In liebenswerten Dokumenten wird angegeben, dass liebenswerte sich immer für den Standardzweig verpflichtet. Der Standardzweig battle zunächst die Hauptzweig. Als ich jedoch einen neuen Zweig erstellt und als Standardzweig festgelegt habe, spiegelte sich diese Änderung nicht von Liebenswerten wider. Es verpflichtete sich immer wieder zum Hauptzweig.

Eines der YouTube -Movies zeigt eine Choice, um die Filiale auf einer liebenswerten Benutzeroberfläche zu ändern, aber ich konnte sie nicht finden. Es scheint, als ob sich eine liebenswerte Benutzeroberfläche danach verändert hat. Vielleicht existiert es nicht mehr. Dies battle keine Blockade für mich, additionally ging ich weiter, aber ich möchte definitiv die Lösung für dieses Downside lernen.

Bereitstellung der App

Es gibt viele Alternativen zur Bereitstellung Ihrer App. Ich habe diesen Schritt nicht viel Gedanken gemacht. Ich habe ein paar Leute verwendet, die Netlify verwendet haben, additionally wollte ich es nur versuchen.

Netlify bietet einen kostenlosen Plan an, der mir ausreichte. Es gibt Ihnen 300 Credit und jede Bereitstellung kostet 15 Credit.

Sobald Sie ein Konto erstellt haben, können Sie Ihr GitHub -Projekt zu Netlify hinzufügen, indem Sie den Anweisungen folgen.

Sie können einen Netlify -Area -Namen kostenlos verwenden oder einen benutzerdefinierten Domänennamen über Netlify kaufen. Sie können Ihre Area natürlich anderswo kaufen und sie auf Netlify verwenden.

Wichtig: Standardmäßig bereitet Netlify Ihre Web site automatisch bereit, wenn Sie sich zu Ihrer Produktionszweig verpflichten. Wie ich bereits erwähnt habe, drücken liebenswerte Commits automatisch auf die Standardzweig. Wenn Ihre Standardzweig als Produktionszweig verwendet wird, was definitiv keine gute Praxis ist, wird Netlify immer dann eine Bereitstellung vornehmen. Das Downside dabei ist, dass Sie schnell Ihre kostenlosen Netlify -Credit verbrauchen.

Loveable’s Efficiency

Liebenswert hat großartige Arbeit geleistet, um eine ganze Net -App zusammenzustellen. Das Endprodukt ist jedoch nicht perfekt. Nachdem ich die Website eingesetzt und begann, bemerkte ich einige Probleme. Das Gute ist, dass sie alle geringfügige Probleme waren und ich sie liebenswerte Behebung haben konnte.

Ich wollte auch einige Probenzeichnungen zum Drawcraft.io hinzufügen. Ich habe versucht, es durch liebenswert zu machen, indem ich Zeichnungen im Chat angeschlossen habe, aber es hat nicht funktioniert. Dann habe ich die Beispielzeichnungen auf der Github -Benutzeroberfläche hochgeladen und liebenswert gebeten, mit diesen Bildern ein Field „kostenlose Beispielzeichnungen“ auf der Web site zu erstellen, und es funktionierte.

Wie viel habe ich ausgegeben

Ich habe insgesamt 102 US -Greenback ausgegeben, um meine erste Net -App zu erstellen. Es ist eine einfache App, die eine einfache Sache tut, aber mein Ziel battle es, zu sehen, ob ich tatsächlich eine funktionale Web site mit KI-basierten Instruments erstellen könnte.

Es ist wichtig zu beachten, dass einige dieser Ausgaben für andere Projekte verwendet werden können. Jetzt liegt es an mir, mehr Ideen zu entwickeln und sie in die Tat umzusetzen.

Danke fürs Lesen. Bitte lassen Sie mich wissen, wenn Sie Suggestions haben.