Aitrainee | 公众号：AI进修生
🌟我将告诉您如何使用 Aider 和 Claude-3.5-Sonnet 生成全栈生产就绪的 Web 应用程序。我将使用 AI 创建一个全栈 NextJS (React) + Supabase 日历应用程序 ，而无需编写任何代码。
你还可以将其与开源 LLMs 一起使用，例如 DeepSeek-Coder-V2、Qwen2、Llama-3 和其他此类 LLMs。这将是关于如何使用人工智能创建 全栈应用程序的全面实践。
Hi，这里是Aitrainee，欢
迎阅读本期新文章。
起初，我学习了C语言，
直到我终于记住了数据结构，而人们对我说，这是网络的时代：
你应该学习PHP：
然后我学会了它。
接着人们对我说，所有东西都将移到客户端，
然后我学会了JavaScript。
之后人们说，应该更加互动和用户友好，所以我开始使用React。
现在人们说你不需要学习任何东西，因为显然计算机将自己完成所有事情，因为AI。
所以现在写AI相关的文章，这样AI就不会很快取代我。这些说法最初被认为是噱头，但随着大型语言模型（LLMs）的增强，这些说法真的变成了现实。
我写了相当多的文章关于文本到应用程序软件，其中有一篇我使用Claude制作了一个带有声音效果和一切的完整游戏。
这些AI文 章或许可以让你知道AI的边界在哪里，AI能干什么，其实他远比你想的有能力。
[
Aider + Claude + Invoke + Udio ：从头到尾使用 AI 创建游戏！（音乐、代码、动画）](http://mp.weixin.qq.com/s?__biz=MzkyMzY1NTM0Mw==&mid=2247489838&idx=1&sn=c8354773a3bffeddeeecd3f2f95beb2d&chksm=c1e094eef6971df85cf44949630447c0c490c854719674ce0a2ee267565b5ef98f4f132230f4&scene=21#wechat_redirect)
今天我们继续上一点难度，使用Aider和Claude制作一个完整的 全栈应用程序 。
现在问题是我会创建什么以及我会使用什么工具。好吧，我会使用NextJS作为前端，Supabase作为后端。我将创建一个包含登 录页、认证等的完整应用程序。
我会使用这些工具，因为大多数人现在都在使用它们，这将确保我们使用的是当前流行的前端和后端。
那么，我会创建什么呢？我会创建一个日历应用程序，这个日历应用程序将类似于Google日历，您可以创建事件、在日历上安排它们并查看您的日程，和通常日历应用程序中的功能一样。
如前所述，我将使用Claude 3.5 Sonet和AER来制作它。我不会触碰任何代码文件，除了设置环境变量和其他基本设置的东西，比如创建表等。
所以让我们开始吧，
好的，首先我们需要安装AER，
你可以通过pip install 命令轻松完成。
一旦完成，像这样导入你的Anthropic API密钥（上方插入的文章有提到免费API项目 ）。
现在你可以使用AER命令，但在此之前我们需要创建一个NextJS项目。为此，我们运行create next app命令，命名为calendar app。
好，它已经创建好了。现在我们进入文件夹。现在运行AER命令。
首先我们要求它生成一个简单的日历应用程序，
连接到Supabase进行认证等功能。确保你给出详细的提示以获得更好的结果。无论如何，发送请求。
好，它正在生成，稍等片刻。
好了，它已经生成了。
现在运行它，在运行之前，确保你运行npm install命令，以便安装所有依赖项。
现在启动它。
好，它报了一个错误。我们将这个错误粘贴到AER并让它修复这个问题。
它说它已经修复了。
好，它现在要求添加Supabase凭证的环境变量。所以，我创建了一个Supabase项目，并从那里获得了URL和一个匿名密钥。
然后我创建了一个.env文件并输入了详细信息，现在它运行正常。
你可以看到，这是登录和注册页面，我在文本框中输入的文本是不可读的，因为它是白色的，但无论如何，我注册并登录了。
你可以看到，这个日历看起来很好，并且有控件和一切，
但现在没有任何功能。
所以，首先我们让它修复设计，以确保一切可读（太黑了，字都看不清）。
好，它现在已经完成了。现在你可以看到一切都可读了。
▲ 上方视频5分钟部分查看动态内容
现在我们让AER连接到数据库并使其正常工作。
它现在已经完成了，并要求在Supabase中创建一个表。
还有一些其他问题，我也修复了。现在我可以创建事件，但上个月、下个月和不同的视图不起作用。所以我通过更多的提示修复了这些问题，现在它可以工作了。
这非常酷，你可以在任何月份创建事件，查看当天、一周的日程等。
▲ 上方视频5分钟部分查看动态内容
尽管在我们创建事件时，每个事件的时间仍然缺失，所以我也添加了这一点。现在它非常酷了。
在这之后，我又通过AER做了更多的修改，我添加了一个登陆页面，使其更美观，添加了Framer Motion等。
这是登陆页面，看起来很不错，有一个好的横幅部分、功能部分、推荐部分和一个CTA横幅。
如果我点击它，你可以看到这里有一个很酷的登录和注册页面。如果我在这里注册：
你可以看到它还会发送一个Supabase的验证邮件。
一旦你验证了，你就可以登录，你会看到这个日历，你可以点击任何日期，输入你的事件名称和时间，然后它就会被添加。
我通过AER添加了动画，这使整个应用程序更加流畅。你还可以看到多个视图，以及在不同月份之间切换。这看起来非常酷。
我不是一个马拉松程序员，所以这对我来说大约需要7到8个小时才能完成，但用AI这在一个小时内就完成了。
即使你是一个马拉松程序员，想想你在同样的时间里可以制作出多么好的产品。这真的很疯狂，看到事物成形。
许多人问我这需要多少钱，让我告诉你，这一切都在Claude提供的5美元免费信用额度内，所以这也非常酷。
看到AI模型的发展真的很令人惊叹。如果你对使用Claude制作游戏感兴趣，你可以看看下面的文章，并关注我。
[Devyan (CrewAI) + DeepSeek-Coder-V2：几秒钟生成一个应用程序（本地、快速、一次提示）
2024-07-12
[Aider + Claude + Invoke + Udio ：从头到尾使用 AI 创建游戏！（音乐、代码、动画）
2024-07-07
希望这篇文章对你有帮助，感谢阅读！
视频教程
https://www.youtube.com/watch?v=sKeIZGW8xzg&t=310s
参考链接：
[1]Aider : https://aider.chat
[2]Supabase : https://supabase.com/
知音难求，自我修炼亦艰
抓住前沿技术的机遇，与我们一起成为创新的超级个体
（把握AIGC时代的个人力量）
点这里👇关注我，记得标星哦～
一键三连「分享」、「点赞」和「在看」
科技前沿进展日日相见 ~