長話短說

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

想法

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

功能和技術(shù)堆棧

特點 -

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

技術(shù)堆棧 -

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

創(chuàng)建前端

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

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

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

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

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

集成 Supabase

作為一名全棧工程師，后端/API 集成一直很復雜，因為我不會過度設(shè)計我的前端。因此，Lovable 能夠獨自完成近 80% 的后端任務(wù)，這真是太神奇了。
您只需點擊Lovable頁面右上角的Supabase按鈕即可將您的Supabase帳戶連接到Lovable。連接后，您需要再次使用提示來根據(jù)您的需要創(chuàng)建表架構(gòu)、身份驗證、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)建了所需的表及其架構(gòu)以及所需的 Edge 函數(shù)，然后在我批準更改后，它就運行了遷移！

添加人工智能超能力

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

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

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

完成應用程序

現(xiàn)在應用程序已經(jīng)準備好了，我唯一要做的就是修復一些與 UI 相關(guān)的問題以及一些后端問題（主要與 TogetherAI 的 API 相關(guān)）。我在應用程序上又花了幾個小時來調(diào)試和修復問題，這就是應用程序現(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)跟蹤器的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！