超越人工智能🤖🧠 生成功能齐全的 Web 应用程序的技巧

TL;DR

支持我们！🙏⭐️

简介

问题所在

如何修复

最适合这项工作的工具：GPT Web App Generator。

技巧：让 GPT 为你编写 PRD

结论

你喜欢这个吗？

TL;DR

我是一名独立开发者，喜欢创建各种有趣的业余项目，比如我的 SaaS 应用CoverLetterGPT，目前用户约 4,000 人。因此，我一直在寻找 AI 辅助编码工具，希望能帮助我尽快启动新的全栈 Web 应用。

我尝试了很多，但发现大多数生成的代码库都太简单而无法使用，或者获得好的结果与自己编写代码一样耗时。

但是在尝试不同的工具和方法的过程中，我偶然发现了一个技巧，它帮助我为全栈应用程序创建了全面、实用的代码库，包括 Auth、API 路由、Tailwind CSS、DB 管理和其他更复杂的功能。

诀窍是什么？让ChatGPT为您想要创建的应用程序编写一份详细的产品需求文档，然后将其传递给 Wasp 的GPT Web 应用程序生成器。

结果确实令人惊讶，并且为您提供了比我尝试过的其他工具更好的启动代码库（主要是由于生成器本身的特殊性）。

最重要的是，它是免费使用的！🤑

支持我们！🙏⭐️

如果您希望表达对我们所做工作的支持，请考虑在 Github 上给我们一颗星！

我们在 Wasp 所做的一切都是开源的，您的支持激励着我们，并帮助我们继续使 Web 应用程序开发变得更容易、更少样板。

⭐️感谢您的支持🙏

简介

我是一名自学成才的全栈 Web 开发人员，并且非常乐意构建副项目。

例如，我最引以为豪的副项目是一个开源求职信生成器 SaaS 应用程序CoverLetterGPT，它拥有近 4,000 名用户！

我还有很多很搞笑的副业想法，比如这个应用程序可以把你最喜欢的科技影响者的 YouTube 视频变成一场饮酒游戏。🤣

这就是为什么我一直在尝试大量的人工智能辅助编码工具，以便尽快生成功能齐全的全栈 Web 应用程序。

目前有一些显而易见的工具，例如在 IDE 中使用 ChatGPT 和 Copilot，但总有新的工具涌现，尤其是那些充当 AI 助手或“代理”的工具。

我有机会尝试其中的一些，我甚至写了一篇长篇比较文章，对这两种工具进行了测试，所以如果你有兴趣的话可以看看。

但是这些工具存在一个主要问题：尽管它们能够生成一些好的样板代码，但它们通常包含很多错误，并且最终不会使开发人员的工作变得更容易。

问题所在

从理论上讲，人工智能辅助编码工具通常可以节省开发人员的时间和精力，尤其是在处理孤立的代码片段时。

一方面，我们有 ChatGPT 和 Copilot 等工具，可以帮助你重构代码、修复错误或生成代码片段。这就像拼图游戏，这些工具可以帮你找到下一个能填补空缺的碎片。

但编码不仅仅是填充下一个可用空间；它还涉及设想整个画面，理解更广泛的系统以及不同部分如何相互关联。

行为更像代理的人工智能辅助编码工具有可能理解生成更大代码库所需的更广泛上下文，但这说起来容易做起来难。目前，大多数工具最终生成的代码都充满错误。

最糟糕的是，他们输出的一些代码可能非常混乱，这实际上意味着您需要做更多的工作。

如何修复

AI助手就像新手学徒一样，需要全面了解自己的目标。为此，你需要制定详细的大纲以及一套全面的指导，以便为AI提供尽可能多的背景信息。

你本质上想要扮演产品经理/设计师的角色，并向 AI 提供产品需求文档 (PRD)，即一份明确概述

• 目的，
• 特征，
• 功能性，
• 和行为

待开发的产品。

但提供 PRD 只是成功的一半。这是因为 Web 应用的前端和后端组件需要相互了解。

而这正是大多数工具的不足之处，像Smol-Developer这样的工具可以创建不错的客户端和服务器代码，它们可以单独运行，但不幸的是不能协同工作！

鉴于此，似乎已经了解整个系统的来龙去脉、了解网络应用程序各个部分相互联系的人工智能工具是我们最好的选择。

简而言之，我们需要一种不仅能“完成任务”而且能“了解项目”的工具。

最适合这项工作的工具：GPT Web App Generator。

请记住，我在这里专注于生成全面的全栈代码库，而 Wasp 的GPT Web App Generator出人意料地出色地完成了这项工作。

它是如何做到的呢？答案在于Wasp作为一个框架如何帮助你构建全栈 React/NodeJS Web 应用。

本文无法详细解释，但简而言之，Wasp 有一个编译器，可以根据配置文件帮助您构建应用。配置文件就像一组指令，编译器可以理解并使用它，为您拼凑出全栈应用的各个部分。

这使得 AI 能够更轻松地正确完成应用程序的各个部分！一旦编写了基本的客户端和服务器代码以及主配置文件，Wasp 编译器就会接管并将它们拼凑在一起，从而消除许多潜在的错误可能性！

最后，您将获得具有以下功能的 React/NodeJS 代码库：

1. 全栈认证
2. 服务器配置和 API 路由
3. Tailwind CSS 配置和样式
4. cron 作业和队列
5. 电子邮件发送
6. 部署

更酷的是，这个工具不需要你非常明确地描述，因为细节已经融入到工具本身中。换句话说，它可以为你节省大量的时间和精力，而不会影响最终产品的质量或一致性。

技巧：让 GPT 为你编写 PRD

好吧，但如果你像我一样，真的不知道如何写好产品需求文档 (PRD)。而且，写一份详细的产品需求文档可能相当耗时。不过幸运的是，ChatGPT 知道怎么做。

谢谢，ChatGPT🙏

因此，为了从 Wasp 的GPT Web App Generator中获得真正出色的结果，我首先要求ChatGPT（使用 GPT-4）为我编写一份详细的产品需求文档，如下所示：

Write a Product Requirement Document for the following full-stack app:

An app where users can track their house plants and their watering schedule.

然后，我将稍微修改 ChatGPT 的输出，然后将其传递给 GPT Web App Generator：

Product Requirements Document for a House Plants Tracking Application

1. **Product Title**: GreenLush: Your House Plant Care Companion

2. **Purpose**: 

The GreenLush app is designed to help users manage their house plants and keep track of their watering schedules. This app will serve as a reminder tool, a database for plant types, and a platform for users to know more about house plant care. 

3. **Features and Functionality**:

    3.1. **User Registration & Profile Management**: To allow users to create and manage their account.

    3.2. **Plant Database**: A comprehensive directory of house plants, with visuals and information about each type.

    3.3. **Plant Profile**: Users can create a profile for each house plant they own, fill in its type, and assign a custom nickname and photo.

    3.4. **Watering Schedule**: By selecting or inputting the type of plant, the app will suggest an ideal watering schedule. Users can confirm or customize this schedule and notifications will be sent when it's time to water each specific plant. 

    3.5. **House Plant Care Tips**: A section of the app that provides general care tips and recommendations for house plants.

4. **Behavior of the Product**:

    4.1. Users will be prompted to sign up when they open the app for the first time. 

    4.2. Once registered, users will be able to browse the plant database, create and manage plant profiles, set watering schedules, and read plant care tips. 

    4.3. Notification alerts will be sent according to the set watering schedule. 

GPT Web App Generator 将开始为您的应用生成计划，逐个文件执行该计划，甚至进行一些错误检查和修复。

非常整洁！

然后，您可以在下载并在本地运行生成的应用代码之前对其进行检查。这很不错，因为有时调整提示符和一些设置来查看是否能获得更好的结果会很有用。

最棒的是，整个过程完全免费。您甚至不需要使用自己的 API 密钥！

上图是我根据上面的示例提示实际生成的、可运行的全栈应用程序。我只需要初始化数据库、注册/登录，然后 BOOM，应用程序就启动并运行了！

🤩 顺便说一句，如果您想查看 GPT Web App Generator 根据上述 PRD 创建的代码，请访问： https: //magic-app-generator.wasp-lang.dev/result/1f28b518-0cca-4352-84e4-69a4ac04d0fa

这里有更多关于您可以使用该工具构建的应用程序类型的示例，但最好还是自己尝试一下，看看能得到什么！

结论

市面上有很多非常酷的 AI 辅助编码工具，但对于启动全栈 React/NodeJS 应用程序，我发现GPT Web App Generator是性能最好的工具。

根据应用程序的复杂程度，它始终如一地生成功能齐全、全面的全栈启动代码库，几乎不需要任何错误修复。

结合“PRD hack”，您可以避免编写大量样板文件，从而节省大量时间。

因此，如果您有任何问题，或者知道任何其他类似的甜蜜提示，请在评论中告诉我！

你喜欢这个吗？

如果是这样，您可以通过一种非常简单、免费且轻松的方式来展示它：通过star 我们的 GitHub repo 🌟

如果您愿意的话我们将非常感激！

⭐️感谢您的支持🙏