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. 非常感谢您的阅读！