Erstellen Sie mit Supabase und Lovable in nur wenigen Minuten einen vollwertigen KI-basierten Kalorien-/Ernährungs-Tracker

TL;DR

Dieser Blog ist ein kurzes Tutorial/How-to, wie Sie mit Supabase & Lovable innerhalb von Stunden statt Tagen Full-Stack-Apps erstellen können! Ich habe mit diesen Tools in nur 8 Stunden eine vollwertige KI-basierte Kalorien-/Ernährungs-Tracker-App erstellt und werde das „Wie“ hier in diesem Blog zeigen.

Die Idee

Ich habe schon lange darüber nachgedacht, für mich selbst eine KI-basierte Kalorien-Tracker-App zu entwickeln, da ich häufig LLMs wie Claude und ChatGPT verwende, um meine täglichen Mahlzeiten, Kalorien und deren Makros mithilfe natürlicher Sprache zu verfolgen. Aber als Entwickler wusste ich, dass ich den gesamten Prozess einfacher und besser machen kann, und Munchwise macht genau das.
Munchwise erstellt personalisierte Ziele für Sie auf der Grundlage Ihrer persönlichen Daten und ermöglicht Ihnen dann, Ihre Mahlzeiten mithilfe natürlicher menschlicher Sprache zusammen mit vollständigen täglichen/wöchentlichen Analysen zu verfolgen!

Funktionen und Tech-Stack

Funktionen -

• Konto erstellen und personalisierte Ziele für Kalorien/Ernährung erhalten
• Verfolgen Sie Mahlzeiten und ihre Kalorien/Makros mithilfe natürlicher menschlicher Sprache
• Sehen Sie sich spezielle tägliche/wöchentliche Analysen an

Tech-Stack -

• Supabase – Authentifizierung, Datenbank, Edge-Funktionen
• Vite & React – Framework, Build-Tool
• Tailwind CSS – Styling
• Liebenswert – Codegenerierung

Erstellen des Frontends

PS: Bevor Sie beginnen, sollten Sie zu Lovable gehen und ein neues Konto erstellen!

Für das Frontend habe ich Lovable verwendet, um eine minimal funktionierende Benutzeroberfläche zu erstellen und ein grundlegendes Wireframe für die App zu erhalten, auf dem ich aufbauen konnte, und Lovable hat mich überhaupt nicht enttäuscht. Das ursprüngliche Design, das ich von Lovable bekam, war gut genug, um mit der Arbeit am Backend zu beginnen, und dann konnte ich die Benutzeroberfläche nach meinen Wünschen verbessern und ändern. So sah es in der ersten Iteration aus –

Danach lag mein Hauptaugenmerk darauf, die grundlegende Benutzeroberfläche für alle Seiten zu erstellen und einige weitere Eingabeaufforderungen wie diese zu verwenden -

Nach ein paar weiteren Eingabeaufforderungen sah die endgültige Benutzeroberfläche vonlovable so aus –

Wie Sie sehen können, sieht die Benutzeroberfläche bereits ziemlich gut aus, ohne dass ich Code schreiben muss! Ich habe die Seitenleiste in den letzten Iterationen entfernt und mich jedoch dafür entschieden, auf allen Seiten die obere Navigationsleiste zu verwenden.

Supabase integrieren

Die Backend-/API-Integration war für mich als Full-Stack-Entwickler schon immer komplex, da ich mein Frontend nicht überentwickele. Es war einfach großartig, dass Lovable fast 80 % der Backend-Aufgaben selbst erledigen konnte.
Alles, was Sie tun müssen, ist auf die Schaltfläche Supabase in der oberen rechten Ecke der Lovable-Seite zu klicken und dann können Sie Ihr Supabase-Konto mit Lovable verbinden. Sobald die Verbindung hergestellt ist, müssen Sie die Eingabeaufforderung erneut verwenden, um das von Ihnen benötigte Tabellenschema, die Authentifizierung, die RLS-Richtlinien und die Edge-Funktionen zu erstellen.
Aber zuerst müssen Sie ein Supabase-Konto erstellen, falls Sie noch keins haben, indem Sie zu https://supabase.com gehen -

1. Erstellen Sie ein Konto mit Github/E-Mail auf Supabase
2. Klicken Sie im Dashboard auf Neues Projekt und erstellen Sie dann ein neues Projekt.
3. Sobald Sie das Projekt erstellt haben, können Sie zu Lovable zurückkehren und dann Ihr Supabase-Konto verbinden und das von Ihnen erstellte Projekt auswählen, um eine Verbindung damit herzustellen.

Wie Sie sehen können, hat Lovable die erforderlichen Tabellen zusammen mit ihrem Schema und den erforderlichen Edge-Funktionen in meinem Supabase-Projekt erstellt und dann, nachdem ich die Änderungen genehmigt habe, die Migration durchgeführt!

Hinzufügen von KI-Superkräften

Die App nutzt KI-Vervollständigungen, um die natürliche menschliche Sprache in die Kalorien- und Nährwertdaten der Mahlzeit umzuwandeln. Ich habe für diesen Teil die API von TogetherAI verwendet und Lovable wusste wieder einmal genau, was zu tun war! Ich habe es einfach gebeten, Together AI für den KI-Teil zu verwenden, und es hat mich nach meinem API-Schlüssel gefragt und es war erledigt!

Sie können Ihren eigenen Together AI API-Schlüssel erhalten, indem Sie ein kostenloses Konto erstellen. Sie benötigen jedoch eine Kreditkarte, um mehr Guthaben hinzuzufügen.

Und damit waren alle Grundfunktionen der App bereit, von der Authentifizierung über das Onboarding des Benutzers bis hin zur Mahlzeitenverfolgung und -analyse, ohne dass ich bisher Code geschrieben hätte.

Fertigstellung der App

Da die App nun fertig war, musste ich nur noch hier und da einige Probleme mit der Benutzeroberfläche und auch einige Backend-Probleme beheben (hauptsächlich im Zusammenhang mit der API von TogetherAI). Ich habe noch ein paar Stunden an der App gearbeitet, Fehler behoben und Fehler behoben, und so sieht die App jetzt aus -

Ganz ordentlich, oder? Und ich scherze nicht, wenn ich sage, dass diese App in nur 8 Stunden erstellt wurde. Was wir heutzutage mit KI erreichen können, ist unvorstellbar und wenn Sie sie jetzt nicht verwenden, verpassen Sie wirklich etwas!

Links

Github – https://github.com/asrvd/munchwise
Supabase – https://supabase.com
Liebenswert - https://lovable.dev

Vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonErstellen Sie mit Supabase und Lovable in nur wenigen Minuten einen vollwertigen KI-basierten Kalorien-/Ernährungs-Tracker. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!