長(zhǎng)話短說(shuō)

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

想法

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

功能和技術(shù)堆疊

特點(diǎn) -

• 建立帳戶(hù)並獲得卡路里/營(yíng)養(yǎng)的個(gè)人化目標(biāo)
• 使用自然的人類(lèi)語(yǔ)言追蹤飲食及其卡路里/宏量
• 查看專(zhuān)門(mén)的每日/每週分析

技術(shù)堆疊 -

• Supabase - 驗(yàn)證、資料庫(kù)、邊緣功能
• Vite & React - 框架、建構(gòu)工具
• Tailwind CSS - 樣式
• 可愛(ài) - 程式碼產(chǎn)生

創(chuàng)建前端

PS：在開(kāi)始之前，您應(yīng)該前往 Lovable 並建立新帳戶(hù)！

對(duì)於前端，我使用 Lovable 創(chuàng)建了一個(gè)最小的工作 UI，並為我可以構(gòu)建的應(yīng)用程式獲取了基本線框，Lovable 根本沒(méi)有讓我失望。我從 Lovable 獲得的初始設(shè)計(jì)足夠好，可以開(kāi)始在後端工作，然後我可以根據(jù)自己的需求改進(jìn)和更改 UI。這是第一次迭代的樣子 -

在此之後，我的主要重點(diǎn)是建立所有頁(yè)面的基本 UI，並使用更多類(lèi)似這樣的提示 -

再經(jīng)過(guò)幾次提示後，lovable 製作的最終 UI 是這樣的 -

如您所見(jiàn)，無(wú)需我編寫(xiě)任何程式碼，UI 就已經(jīng)看起來(lái)非常漂亮了！我確實(shí)在最後的迭代中刪除了側(cè)邊欄，並決定在所有頁(yè)面上使用頂部導(dǎo)覽列。

整合 Supabase

身為全端工程師，後端/API 整合一直很複雜，因?yàn)槲也粫?huì)過(guò)度設(shè)計(jì)我的前端。因此，Lovable 能夠獨(dú)自完成近 80% 的後端任務(wù)，這真是太神奇了。
您只需點(diǎn)擊Lovable頁(yè)面右上角的Supabase按鈕即可將您的Supabase帳戶(hù)連接到Lovable。連線後，您需要再次使用提示來(lái)根據(jù)您的需求建立表格架構(gòu)、驗(yàn)證、RLS 策略和邊緣函數(shù)。
但首先您需要建立 Supabase 帳戶(hù)（如果您還沒(méi)有），請(qǐng)?jiān)煸L https://supabase.com -

1. 在 Supabase 上使用 Github/電子郵件建立帳戶(hù)
2. 進(jìn)入儀表板後，點(diǎn)選新項(xiàng)目，然後建立一個(gè)新項(xiàng)目。
3. 建立專(zhuān)案後，您可以返回 Lovable，然後連接您的 Supabase 帳戶(hù)並選擇您建立的專(zhuān)案進(jìn)行連線。

如您所見(jiàn)，Lovable 在我的 Supabase 專(zhuān)案中建立了所需的表及其架構(gòu)以及所需的 Edge 函數(shù)，然後在我批準(zhǔn)更改後，它就運(yùn)行了遷移！

新增人工智慧超能力

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

您可以透過(guò)建立免費(fèi)帳戶(hù)來(lái)取得自己的 Together AI API 金鑰，但您需要信用卡來(lái)添加更多積分。

至此，應(yīng)用程式的所有基本功能都已準(zhǔn)備就緒，從身份驗(yàn)證到用戶(hù)入門(mén)再到膳食追蹤和分析，而我還沒(méi)有編寫(xiě)任何程式碼。

完成應(yīng)用程式

現(xiàn)在應(yīng)用程式已經(jīng)準(zhǔn)備好了，我唯一要做的就是修復(fù)一些與 UI 相關(guān)的問(wèn)題以及一些後端問(wèn)題（主要與 TogetherAI 的 API 相關(guān)）。我在應(yīng)用程式上又花了幾個(gè)小時(shí)來(lái)調(diào)試和修復(fù)問(wèn)題，這就是應(yīng)用程式現(xiàn)在的樣子 -

很整潔吧？我不是開(kāi)玩笑，這個(gè)應(yīng)用程式只花了 8 個(gè)小時(shí)就完成了，現(xiàn)在我們使用 AI 可以實(shí)現(xiàn)的成就是難以想像的，如果你現(xiàn)在不使用它，你就真的錯(cuò)過(guò)了！

連結(jié)

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

非常感謝您的閱讀！

以上是使用 Supabase 和 Lovable 只需 rs 創(chuàng)建一個(gè)基於 AI 的全端卡路里/營(yíng)養(yǎng)追蹤器的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！