引言
近期AI热潮涌动，我一直在想ChatGPT辅助项目开发的能力到底怎么样？于是就有了这个项目。这是一个基本的网页应用，实现了基本的与chatGPT聊天，用户登录注册，用户信息管理功能。技术上涵盖了前端、后端和数据库的所有方面。
我的目标是探索和实验GPT-4在软件开发中的应用，看看它是否能帮助我实现全栈开发的目标，尤其是对我这样的前后端开发初学者来说。
背景
在开始这个项目之前，我对前后端开发的了解几乎为零。我只了解一些基本的HTML和CSS规则，我花了一个小时看了Vue3的官方文档，又花了一个多小时完成了官方的互动教程，从而对Vue3的代码结构有了一点基本的理解。至于后端开发，我选择使用Python，主要是因为我有Python编程经验（但是对Python后端开发一无所知）。
项目技术栈
- 前端 vue3
- 后端 python flask
- 数据库 mysql
- 最重要的：ChatGPT-4
如何开始？
首先确定基本思路。在开始开发之前，我首先与GPT-4进行了一番讨论，以明确我要实现的项目的基本思路。我问了GPT-4一些问题，例如：“我需要做什么才能实现这样的项目？”以及“我需要了解哪些基本概念？”。这一阶段的目标是构建一个大概的项目蓝图，并确定我需要掌握的基础知识。
然后是了解基本概念。在确定了项目的基本思路后，我开始学习和理解一些基本的概念，比如什么是node，npm等。这是一个重要的步骤，因为这些基础知识是我进行后续开发的基础。
再之后是选择技术栈和确定项目结构。在与GPT-4的讨论中，我收到了一些关于技术栈选择和项目结构的建议。GPT-4帮助我理解了各种前后端框架的优势和劣势，并基于我的项目需求给出了建议。在这一步我确定了将要使用的工具和项目的基本架构。
最后是确定整体项目的文件目录结构。在明确了项目结构后，我开始让GPT规划和创建项目的文件结构。这包括了前端、后端和数据库的所有相关文件。这一步确保我能有一个清晰、有组织的工作环境，为后续的开发工作铺平道路。GPT-4给我的部分文件目录结构如下：
|-- frontend/ # 前端代码目录 |
|-- public/ # 存放静态文件，如图标等 |
|-- src/ # 前端主要源代码
| | |-- components/ # 存放可复用的Vue组件
| | |-- views/ # 存放页面级的Vue组件
| | | |-- Login.vue # 登录页面组件
| | | |-- Register.vue # 注册页面组件
| | | |-- UserProfile.vue # 用户个人信息页面组件
| | | |-- UserChat.vue # 聊天界面页面组件
| | | |-- UserTopup.vue # 用户充值页面组件
| | |-- App.vue # Vue应用的根组件
| | |-- main.js # 前端应用的入口文件
| | |-- router.js # 定义前端路由
| | |-- store.js # 使用Vuex，定义Vuex状态管理
| |-- .gitignore # 定义不需要纳入Git版本控制的文件和文件夹
| |-- package.json
| |-- README.md
可以看到结构非常清晰，后续的注释也让我对整体项目组成有了很好的理解。
至此，我已经完成了项目的初步设计，并为正式开发做好了准备。接下来，我将进一步描述我在前端、后端和数据库的开发过程中的具体实践。
正式开发
项目的基本设计完成后，我开始了正式的开发工作。我采取了最小可行性迭代开发的策略，逐步完成前端、后端和数据库的开发。
前端
前端开发的第一步是配置环境。将你在上一步得到的项目设计草案输入给GPT，然后告诉你的服务器配置（什么操作系统之类），让GPT-4指导你配置环境。遇到错误情况就将错误信息反馈给GPT让它告诉你怎么修改。这里我比较顺利的安装了必要的工具和库，并成功配置了我的开发环境。接下来，我开始根据之前设计的项目结构来创建和组织我的前端代码。
在功能实现方面，我首先给出了粗略的功能需求，例如“我想实现一个用户登录和注册功能”。要注意让GPT-4先说出实现这些功能的基本思路，这样可以确保开发过程不会偏离目标。然后，让GPT按照它给出的思路进行开发。
在这个过程中，一般来说，你第一次给它需求都是很笼统粗糙的，比如“实现一个用户登录和注册功能”，这样的需求并不具体。GPT也只会给你一份最基本的代码，给你的前端页面加上一个非常粗糙的表格用于用户登录。但是我们可以在这个基本需求的基础上不断追加要求，让GPT逐步修改代码。比如我想让登录页面以半透明的状态覆盖在当前页面上，先让它说思路。下面是GPT的回复：
要将登录页面作为半透明覆盖在其他页面上，我们可以使用一个叫做模态窗口（Modal）的概念。模态窗口是一种在用户必须与之交互才能返回主窗口的窗口。 具体步骤如下：
1. 创建一个背景覆盖层（Overlay）：这是一个全屏的半透明背景，可以使下面的内容变暗，从而让用户的注意力集中在模态窗口上。你可以通过创建一个新的div，然后使用CSS给它设置固定位置（fixed），全屏大小，以及半透明的背景颜色来实现。
2. 设置登录界面为模态窗口：将登录界面设置为在覆盖层上的模态窗口，可以通过相对于覆盖层的绝对定位，以及设置合适的z-index来使其显示在覆盖层上面。
3. 切换模态窗口的显示和隐藏：你可以在Vue组件中设置一个变量（例如isModalVisible），用来控制模态窗口的显示和隐藏。当用户点击登录按钮时，你可以切换这个变量的值来显示或隐藏模态窗口。
4. 处理用户交互：你可能需要处理一些用户交互，例如点击覆盖层或按下ESC键时关闭模态窗口。这可以通过在覆盖层上添加一个点击事件，或者在全局添加一个键盘事件来实现。
以上就是实现这个功能的基本步骤，接下来我可以帮你修改代码实现这个功能，你需要吗？
确认它的思路没有问题后，就可以让它修改代码。在经过调试确认它的代码没问题，最后就可以让它增加一些css样式，让界面更加美观。最终达到下面的效果：
可以看到，这已经是一个还不错的登录页面了。前端的其余部分都可以参考上面描述的步骤进行。
后端与数据库
后端的开发过程与前端相似。将设计方案输入给GPT-4，并告诉它我的服务器配置信息，比如操作系统、Python版本等等。GPT-4则会指导我如何安装必要的工具和库，以及如何处理可能出现的错误。
到功能实现阶段，首先将项目设计草案和上一步的主要前端代码输入给GPT，然后像boss一样提需求。我想要什么什么。整个流程和前端的开发过程一致。首先给出粗略的需求，例如“我想实现一个用户注册的API接口，请你给出实现思路”，确认它的思路没问题后，让GPT给出基本代码。然后在此基础上再追加功能点，比如“请调整代码使得这个API接口和前端接口一致””请再用户注册前增加校验“之类。
对于数据库的开发，根据GPT指导配置MySQL环境，让它根据我的需求设计数据库结构，然后创建了必要的数据表和关系。
各部分之间的协调
在前端、后端和数据库的开发完成后，我开始处理它们之间的协调问题。这包括了处理前后端的通信，后端与数据库的交互等等。在这个过程中，我需要确保所有的部分能够正确地工作在一起，为用户提供一致和流畅的体验。
这里我使用的方法是分功能点逐步调试，先将项目结构输入给GPT，然后将涉及某一个功能的全部相关代码都给它，让GPT进行分析修改，整个过程还是比较顺利的。
开发过程中遇到的挑战
在项目开发过程中下面两个问题是比较常见的。其中一些挑战与我的需求描述有关，而另一些则与GPT-4的答复有关。
需求表述不出来或表达的不明确
一开始，我发现自己在描述需求时经常感到困难，我无法准确的用语言表达出我想要的效果，我的脑子里只有一个模糊的想法。这也使得GPT-4在理解我的需求时遇到了困扰。
我发现，如果我能够以一种更细致、更明确的方式来表达我的需求，那么GPT-4就能更好地帮助我。因此，我开始尝试从一个大概的想法开始，逐步和GPT沟通，逐步细化，逐步提出更具体的需求。在一些情况下，我甚至会让GPT-4来猜测我可能的需求，这样可以让我的需求表述更加清晰明确，从而得到我想要的结果。
GPT-4的建议并非总是完全靠谱
尽管GPT-4的建议在大多数情况下都是有帮助的，但有时它给出的解决方案并不能真正解决问题。一个具体的例子是，我曾经被一个关于异步函数状态同步的问题困扰。尽管我向GPT-4描述了我的问题，并尝试了它给出的多个解决方案，但问题仍然没有得到解决。
我最后的解决方案是，重新学习了一些关于异步函数的概念知识，然后修改了我的需求表述，将模糊的需求细化到最具体的代码层面上。例如，我告诉GPT-4我需要修改之前的代码，实现在 store.dispatch('submitQuestion', userQuestion.value) 执行的过程中界面显示 userQuestion 的内容和 ，当异步函数执行完成后，将 替换为得到的结果。最终是这样的需求表达让GPT顺利完成了我的需求。
一些trick
让GPT帮你写git commit
每当完成一部分功能的代码修改，直接让gpt帮你写commit，再也不用绞尽脑汁回忆，我今天干了啥来着
维护项目设计草案描述和文件目录结构
维护项目和文件结构很重要，每当新开窗口，你就可以在一开始将文件结构输入给gpt，方便gpt理解你的需求。
三个思路原则
在你想要让GPT帮你实现某个功能需求之前，先让GPT提供三个可行的思路。这样可以保证GPT理解的和你想要实现的对应得上，同时三个可选项也可以开拓你的思路，让你知道，哦，原来实现这个功能可以这样进行。在某种程度上增加了你的项目开发经验。下面是一个例子：
“请你作为专业的全栈开发工程师。我想开发一个前后端分离的项目。前端使用vue3，后端使用python，数据库使用mysql，整个项目运行在云服务器上。现在需要设计一个用户账户实现，请先提供三个可行的思路。”
总结
时间花费
| 事项 | 内容 | 花费时间 |
|---|---|---|
| 前期准备 | 包括了解vue3，了解基本概念之类 | ~3h |
| 设计草案 | 与GPT沟通设计思路，设计项目结构 | ~2h |
| 正式开发 | 前后端环境配置，开发和调试等 | ~30h |
| 零碎事项 | Git相关，云服务器配置之类 | ~2h |
| 合计 | ~37h |
总得来说，这是一个比较简单的全栈开发项目，但是对于新手而言还是有一定的挑战在里面。如果没有chatGPT辅助，我正常的学习和开发流程会有更多的时间花费在阅读文档，阅读博客，搜索bug解决方案，搜索怎么进行环境配置这些步骤上，这些步骤无疑是非常耗费时间的。而且可以确定的是，作为一个全栈新手，我很难在一开始就有一个比较清晰的项目设计思路，这是GPT给我的一个很大的助力。
当然依赖GPT进行开发也有它的弊端，许多基础的代码都是GPT直接给出而不是自己编写，对于很多的代码细节个人就很难体会。哪怕我利用GPT辅助开发数个前后端项目之后，我也不敢说我已经掌握了VUE或者是python flask。
从生产力角度而言，GPT毫无疑问是非常强的生产力工具。在心里层面上，拥有GPT辅助，我在学习新事物时少了很多的心里负担，因为我知道，我学习过程中几乎所有的问题都有GPT老师随时给我解答。这可以让人少很多在门槛上打转的困境。
Something else
这是项目的GitHub链接，欢迎大家尝试。
