使用 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中文网其他相关文章！