使用 Supabase 和 Lovable 只需 rs 創建一個基於 AI 的全端卡路里/營養追蹤器

長話短說

此部落格是一個簡短的教學/操作方法，介紹如何使用 Supabase 和 Lovable 在幾小時而不是幾天內創建全端應用程式！我使用這些工具在短短 8 小時內創建了一個基於 AI 的全端卡路里/營養追蹤器應用程序，我將在本部落格中展示「如何」。

想法

自從我經常使用 Claude 和 ChatGPT 等法學碩士來使用自然語言來追蹤我的日常飲食、卡路里及其宏指令以來，我一直在考慮為自己建立一個基於人工智慧的卡路里追蹤器應用程式。但作為一名開發人員，我知道我可以讓整個過程變得更容易、更好，而 Munchwise 正是這樣做的。
Munchwise 根據您的個人資訊為您建立個人化目標，然後讓您使用自然的人類語言以及完整的每日/每週分析來追蹤您的餐點！

功能和技術堆疊

特點 -

• 建立帳戶並獲得卡路里/營養的個人化目標
• 使用自然的人類語言追蹤飲食及其卡路里/宏量
• 查看專門的每日/每週分析

技術堆疊 -

• Supabase - 驗證、資料庫、邊緣功能
• Vite & React - 框架、建構工具
• Tailwind CSS - 樣式
• 可愛 - 程式碼產生

創建前端

PS：在開始之前，您應該前往 Lovable 並建立新帳戶！

對於前端，我使用 Lovable 創建了一個最小的工作 UI，並為我可以構建的應用程式獲取了基本線框，Lovable 根本沒有讓我失望。我從 Lovable 獲得的初始設計足夠好，可以開始在後端工作，然後我可以根據自己的需求改進和更改 UI。這是第一次迭代的樣子 -

在此之後，我的主要重點是建立所有頁面的基本 UI，並使用更多類似這樣的提示 -

再經過幾次提示後，lovable 製作的最終 UI 是這樣的 -

如您所見，無需我編寫任何程式碼，UI 就已經看起來非常漂亮了！我確實在最後的迭代中刪除了側邊欄，並決定在所有頁面上使用頂部導覽列。

整合 Supabase

身為全端工程師，後端/API 整合一直很複雜，因為我不會過度設計我的前端。因此，Lovable 能夠獨自完成近 80% 的後端任務，這真是太神奇了。
您只需點擊Lovable頁面右上角的Supabase按鈕即可將您的Supabase帳戶連接到Lovable。連線後，您需要再次使用提示來根據您的需求建立表格架構、驗證、RLS 策略和邊緣函數。
但首先您需要建立 Supabase 帳戶（如果您還沒有），請造訪 https://supabase.com -

1. 在 Supabase 上使用 Github/電子郵件建立帳戶
2. 進入儀表板後，點選新項目，然後建立一個新項目。
3. 建立專案後，您可以返回 Lovable，然後連接您的 Supabase 帳戶並選擇您建立的專案進行連線。

如您所見，Lovable 在我的 Supabase 專案中建立了所需的表及其架構以及所需的 Edge 函數，然後在我批准更改後，它就運行了遷移！

新增人工智慧超能力

該應用程式依靠人工智慧完成將自然人類語言轉換為膳食的熱量和營養數據。我在這部分使用了 TogetherAI 的 API，Lovable 再次確切地知道該怎麼做！我只是要求它在 AI 部分使用 Together AI，它要求我提供 API 金鑰，然後就完成了！

您可以透過建立免費帳戶來取得自己的 Together AI API 金鑰，但您需要信用卡來添加更多積分。

至此，應用程式的所有基本功能都已準備就緒，從身份驗證到用戶入門再到膳食追蹤和分析，而我還沒有編寫任何程式碼。

完成應用程式

現在應用程式已經準備好了，我唯一要做的就是修復一些與 UI 相關的問題以及一些後端問題（主要與 TogetherAI 的 API 相關）。我在應用程式上又花了幾個小時來調試和修復問題，這就是應用程式現在的樣子 -

很整潔吧？我不是開玩笑，這個應用程式只花了 8 個小時就完成了，現在我們使用 AI 可以實現的成就是難以想像的，如果你現在不使用它，你就真的錯過了！

連結

Github - https://github.com/asrvd/munchwise
Supabase - https://supabase.com
可愛 - https://lovable.dev

非常感謝您的閱讀！

以上是使用 Supabase 和 Lovable 只需 rs 創建一個基於 AI 的全端卡路里/營養追蹤器的詳細內容。更多資訊請關注PHP中文網其他相關文章！