导言
近期AI热潮涌动，我一向在想ChatGPT辅佐项目开发的才能到底怎样样？所以就有了这个项目。这是一个根本的网页运用，完结了根本的与chatGPT谈天，用户登录注册，用户信息办理功用。技能上涵盖了前端、后端和数据库的一切方面。
布景
在开端这个项目之前，我对前后端开发的了解简直为零。我只了解一些根本的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.com/yang-smith/…
这是项目的GitHub链接，欢迎我们尝试。
