tl; dr

此博客是一個簡短的教程/如何使用Supabase和可愛的方式來在幾個小時內而不是幾天內創建全棧應用程序！我在短短8個小時內使用這些工具創建了一個基於全堆AI的卡路里/營養跟踪器應用程序，我將在此博客中顯示“如何”。

這個想法

我一直在考慮為自己構建一個基於AI的卡路里跟踪器應用程序，因為我使用Claude和Chatgpt等LLM經常使用自然語言來跟踪我的日常餐點，卡路里及其宏。但是，作為開發人員，我知道我可以使整個過程變得更輕鬆，更好，並且munchwise可以做到這一點。 Munchwise根據您的個人信息為您創建個性化目標，然後讓您使用天然人類語言以及完整的每日/每週分析來跟踪餐點！

功能和技術堆棧

特徵 -

創建帳戶並獲得卡路里/營養的個性化目標

使用天然人類語言跟踪餐點及其卡路里/宏
• 查看專用的每日/每週分析
supabase- auth，database，edge functions

vite&react-框架，構建工具

Tailwind CSS-樣式
可愛 - 代碼生成
• 創建前端
對於前端，我用可愛的是創建一個最小的工作UI，並為該應用程序獲得了基本的線框，我可以構建該應用程序，並且根本不會讓我失望。我從可愛獲得的最初設計足以開始從事後端工作，然後我可以改進和更改UI，但我想要自己。這是第一次迭代中的樣子 -

[2

之後，我的主要重點是為所有頁面構建基本UI，並使用一些此類提示 -

[2

多提示後，可愛製作的最終UI看起來像這樣 -

[2 [2

如您所見，如果我編寫任何代碼，UI看起來已經很不錯！我確實在最終迭代中刪除了側邊欄，但決定在所有頁面上使用頂級磁帶。

整合supabase

後端/API集成對我來說一直很複雜，因為我並沒有過度工程師的前端工程師。因此，可愛的人能夠完成幾乎80％的後端任務，真是太神奇了。

您所要做的就是單擊可愛頁面右上角的

supabase

按鈕，然後您可以將您的supabase帳戶連接到可愛的。連接後，您需要再次使用提示來創建表模式，auth，rls策略和邊緣功能。 但是首先，如果您還沒有訪問https://supabase.com-

，則需要創建一個supabase帳戶。

使用supabase上的github/電子郵件創建帳戶

一旦在儀表板上單擊

新項目，然後創建一個新項目。

創建了項目後，您可以返回可愛，然後連接您的Supabase帳戶，然後選擇您創建的與之連接的項目。

[2 [2 [2 如您所見，可愛的表格以及它們的supabase項目中所需的邊緣功能創建了所需的表格，然後一旦我批准了更改，就會遷移遷移！

添加AI超級大國

該應用依賴於AI完成，將天然人類語言轉換為餐食的熱量和營養數據。我一起使用了這部分的API，並再次可愛地知道該怎麼做！我只是要求它一起使用AI作為AI部分，它要求我提供我的API鍵，然後完成！

您可以通過創建一個免費帳戶來獲得自己的AI API密鑰，但是您將需要信用卡來添加更多信用。 [2

，因此，所有應用程序的基本功能都可以從身份驗證到用戶的入門到進餐跟踪和分析，而沒有我編寫的任何代碼。

完成應用程序
現在已經準備好了，我唯一要做的就是在這里和那裡解決一些與UI相關的問題，以及一些後端問題（主要是相關的API API）。我在應用程序上工作了幾個小時，調試和修復內容，這就是該應用現在的樣子 - 很好吧？當我說這個應用程序僅在8個小時內製作時，我並不是在開玩笑，這些天我們可以使用AI實現的目標是難以想像的，如果您現在不使用它，您真的會錯過！
鏈接

github -https：//github.com/asrvd/munchwise
1. 可愛-https：//lovable.dev
2. 非常感謝您的閱讀！