# 前言低代码由来已久，主要是减少开发人员的编码时间，提高产品交付效率，甚至功能完备的低代码平台可以使非开发人员使用。正如此，多年来，低代码平台层不出穷，但依然没有出现现象级的产品，不过，大多数公司也都有自己的低代码平台，体验和效果也是参差不齐。 # 新范式的到来如今人工智能又达到了一个新的阶段，有预言说，它最先代替的是程序员。我认为这很难，如果你深度使用了ChatGPT，它确实非常非常惊艳，但是，要想取代程序员，还为时过早。不过如果能够善加利用，它将是一把利器，可以事半功倍。但是，目前还没有发现一款体验非常好的GPT产品可以无缝的与开发环境融合。即使“历史悠久”的GitHub Copilot也没有达到一种理想效果，虽然还有它的孪生兄弟GitHub Copilot Chat也总是缺少一些体验。虽然现在还没一个非常好的产品来辅助我们开发（GitHub Copilot已经很好了），但是也不影响一个新的范式即将到来，GPT注定会改变我们的开发方式。目前，就我的体验来说，ChatGPT的自定义GPT体验是最好的，但是在开发的过程中，也相当割裂。下面我们就来定制这样一个GPT，看他的效果如何。 ## 自定义GPT *假定你可以访问ChatGPT，并且开通了Plus。* 自定义一个GPT和开发一个项目差不多，需要反复调试，第一版完成之后，还需迭代。但是，相对于开发项目，自定义一个GPT的调试过程要相对简单，我这里直接给出一个调试好的，你可以直接把这个指令粘贴到你的ChatGPT里。 ``` 你是一位资深的前端开发工程师，你的目标是根据用户要求创建一个不省略任何逻辑的，功能完备的组件。你需要跟用户沟通需求，满足条件之后进行组件开发。你严格遵循如下规则完成组件开发： - 使用最新的Typescript和Vue3进行开发。 - 使用Ant Design of Vue UI库。 - 代码结构必须是这样的：。 - 使用 Ant Design Vue 的栅格系统：利用 Ant Design Vue 的和组件创建响应式布局。 - 如果需要导航路由，必须这样：import { useRouter } from 'vue-router'; const router = useRouter(); router.push('xxx'); - 如果有URL相关访问，必须这样：import { useRoute } from 'vue-router'; const route = useRoute(); route.xxx - 如果有提示、通知等，必须这样：import { notification, message, xxx } from 'ant-design-vue'; - 如果有Form表单，必须这样： - 如果组件有文字必须使用中文。 - 代码里避免使用any，复杂字段必须定义类型，可以参考api.json文档。 - 如果有数据提交按钮，按钮必须包含loading，防止多次触发。 - 如果有危险操作，进行二次确认。 - 如果有数据访问，做好下面处理： - import axios from '@/axios-config'; - 根据api.json文档定义请求数据及响应的数据类型。 - 使用api.json提供的接口路径。 - 根据响应状态进行成功或者失败提示。 - 所有接口返回的数据类型都被如下范型包括: [这里需要填写自己的] - 输出代码之前： - 必须先参考示例代码文件LoginView.vue【重要】 - 先把思路写出来，观察思路是否符合规则，之后再输出代码。 - 示例代码文件LoginView.vue内容如下： [这里需要填写自己的] ``` 你需要把 API 文档上传进去。另外，可以根据开发过程遇到的问题，不断的调试这个指令，非常简单。 ## 使用自定义GPT 上面，我们自定义了一个GPT，怎么使用呢？比如你可以输入这样的要求： ``` 根据API文档及示例代码开发一个用户注册组件，要求如下： 1、根据API定义三个字段，邮箱、邮箱验证码、密码 2、邮箱后面需要有验证码发送按钮，参考下面代码 3、发送按钮要有一分钟倒计时功能 4、注册按钮下面要有一个跳转逻辑：已有账户登录？ ``` 它就会非常贴心的生成如下代码： ``` ``` 效果非常好，如果有哪些不满足要求，可以不断的与之沟通，继续完善代码。当然如果有些小的改动，可以直接在编辑器里修改代码。比如，上面的上面发送验证码的地方是有问题的，没有没有判断邮箱是否可用，这里你就可以自己加个逻辑，或者告诉它 ` 发送邮箱验证码之前，必须校验邮箱 ` 于是，它就会给你想要的逻辑，非常喜人。不过有时候他会给出代码片段，有时候也会给出全部代码，看自己情况要求它。 ``` const isEmailValid = (email: string): boolean => { const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; return emailRegex.test(email); }; const sendVerificationCode = async () => { if (!isEmailValid(registerForm.value.email)) { notification.error({ message: '请输入有效的邮箱地址' }); return; } if (countdown.value > 0) return; // 原有的发送验证码逻辑保持不变 // ... }; ``` # 总结 1. 根据自己的业务需求，可以非常方便的调教出一个GPT。 2. 在使用的过程中，写清楚自己的需求。 3. 如果它生成的代码有问题，可以进一步沟通。 4. 它生成的代码结构非常的清晰。 5. 它命名的代码名称也非常的合理。它现在能做到的已经非常棒了，未来会更加可期。不过，从体验角度来说，我们需要在开发工具和ChatGPT之间来回切换，还是有些麻烦，什么时候，开发工具中，可以支持就太好。还有一点儿，现在还需要我们自己去发现问题，与它沟通，指出问题，让它修正问题。如果有一个良好的产品，可以使用测试驱动开发，先让它生成测试代码，根据测试代码，生成逻辑代码。如果测试代码跑不通，自动的把错误消息反馈给它，它再修改，再跑测试代码，这体验简直逆天。 # 期望希望一个体验非常完美的平台赶快到来： 1. 调试好自己的GPT。 2. 直接支持开发环境。 3. 根据用户需求生成测试代码。 4. 用户检查测试代码是否覆盖所有情况。 5. 然后生成逻辑代码。 6. 自动跑测试代码。 7. 如果有问题，自动把问题反馈给它。 8. 在此基础上再生成逻辑代码。 9. 然后再跑测试代码。 10. 循环往复。 11. 实在不行开发人员介入解决问题。 12. 最终完成开发。如果有这样一个平台，那么，开发效率将是巨大的提升。