長話短說

此博客是一個簡短的教程/操作方法，介紹如何使用 Supabase 和 Lovable 在幾小時而不是幾天內創(chuàng)建全棧應用程序！我使用這些工具在短短 8 小時內創(chuàng)建了一個基于 AI 的全?？防?營養(yǎng)跟蹤器應用程序，我將在本博客中展示“如何”。

想法

自從我經常使用 Claude 和 ChatGPT 等法學碩士來使用自然語言來跟蹤我的日常膳食、卡路里及其宏指令以來，我一直在考慮為自己構建一個基于人工智能的卡路里跟蹤器應用程序。但作為一名開發(fā)人員，我知道我可以使整個過程變得更容易、更好，而 Munchwise 正是這樣做的。
Munchwise 根據(jù)您的個人信息為您創(chuàng)建個性化目標，然后讓您使用自然的人類語言以及完整的每日/每周分析來跟蹤您的膳食！

功能和技術堆棧

特點 -

• 創(chuàng)建帳戶并獲取卡路里/營養(yǎng)的個性化目標
• 使用自然的人類語言跟蹤膳食及其卡路里/宏量
• 查看專門的每日/每周分析

技術堆棧 -

• Supabase - 身份驗證、數(shù)據(jù)庫、邊緣功能
• Vite & React - 框架、構建工具
• Tailwind CSS - 樣式
• 可愛 - 代碼生成

創(chuàng)建前端

PS：在開始之前，您應該前往 Lovable 并創(chuàng)建一個新帳戶！

對于前端，我使用 Lovable 創(chuàng)建了一個最小的工作 UI，并為我可以構建的應用程序獲取了基本線框，Lovable 根本沒有讓我失望。我從 Lovable 獲得的初始設計足夠好，可以開始在后端工作，然后我可以根據(jù)自己的需要改進和更改 UI。這是第一次迭代的樣子 -

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

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

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

集成 Supabase

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

1. 在 Supabase 上使用 Github/電子郵件創(chuàng)建帳戶
2. 進入儀表板后，單擊新項目，然后創(chuàng)建一個新項目。
3. 創(chuàng)建項目后，您可以返回 Lovable，然后連接您的 Supabase 帳戶并選擇您創(chuàng)建的項目進行連接。

如您所見，Lovable 在我的 Supabase 項目中創(chuàng)建了所需的表及其架構以及所需的 Edge 函數(shù)，然后在我批準更改后，它就運行了遷移！

添加人工智能超能力

該應用程序依靠人工智能完成將自然人類語言轉換為膳食的熱量和營養(yǎng)數(shù)據(jù)。我在這部分使用了 TogetherAI 的 API，Lovable 再次確切地知道該怎么做！我只是要求它在 AI 部分使用 Together AI，它要求我提供 API 密鑰，然后就完成了！

您可以通過創(chuàng)建免費帳戶來獲取自己的 Together AI API 密鑰，但您需要信用卡來添加更多積分。

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

完成應用程序

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

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

鏈接

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

非常感謝您的閱讀！

以上是使用 Supabase 和 Lovable 只需 rs 創(chuàng)建一個基于 AI 的全棧卡路里/營養(yǎng)跟蹤器的詳細內容。更多信息請關注PHP中文網其他相關文章！