前言
低代码由来已久，主要是减少开发人员的编码时间，提高产品交付效率，甚至功能完备的低代码平台可以使非开发人员使用。
正如此，多年来，低代码平台层不出穷，但依然没有出现现象级的产品，不过，大多数公司也都有自己的低代码平台，体验和效果也是参差不齐。
新范式的到来
如今人工智能又达到了一个新的阶段，有预言说，它最先代替的是程序员。我认为这很难，如果你深度使用了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库。
- 代码结构必须是这样的：<template></template><script setup lang="ts"></script><style scoped></style>。
- 使用 Ant Design Vue 的栅格系统：利用 Ant Design Vue 的 <a-row> 和 <a-col> 组件创建响应式布局。
- 如果需要导航路由，必须这样：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表单，必须这样：<a-form @finish="handleLogin" :model="loginForm" :rules="rules" :label-col="{ span: 4 }" layout="horizontal">
- 如果组件有文字必须使用中文。
- 代码里避免使用any，复杂字段必须定义类型，可以参考api.json文档。
- 如果有数据提交按钮，按钮必须包含loading，防止多次触发。
- 如果有危险操作，进行二次确认。
- 如果有数据访问，做好下面处理：
- import axios from '@/axios-config';
- 根据api.json文档定义请求数据及响应的数据类型。
- 使用api.json提供的接口路径。
- 根据响应状态进行成功或者失败提示。
- 所有接口返回的数据类型都被如下范型包括:
[这里需要填写自己的]
- 输出代码之前：
- 必须先参考示例代码文件LoginView.vue【重要】
- 先把思路写出来，观察思路是否符合规则，之后再输出代码。
- 示例代码文件LoginView.vue内容如下：
[这里需要填写自己的]
你需要把 API 文档上传进去。
另外，可以根据开发过程遇到的问题，不断的调试这个指令，非常简单。
使用自定义GPT
上面，我们自定义了一个GPT，怎么使用呢？比如你可以输入这样的要求：
根据API文档及示例代码开发一个用户注册组件，要求如下：
1、根据API定义三个字段，邮箱、邮箱验证码、密码
2、邮箱后面需要有验证码发送按钮，参考下面代码
<a-input-search v-model:value="value" placeholder="input search text" size="large" @search="onSearch" >
<template #enterButton>
<a-button>Custom</a-button>
</template>
</a-input-search>
3、发送按钮要有一分钟倒计时功能
4、注册按钮下面要有一个跳转逻辑：已有账户登录？
它就会非常贴心的生成如下代码：
<template>
<a-row type="flex" justify="center">
<a-col :xs="24" :sm="16" :md="12">
<a-form @finish="handleRegister" :model="registerForm" :rules="rules" layout="horizontal">
<a-form-item label="邮箱" name="email">
<a-input-search
v-model:value="registerForm.email"
placeholder="请输入邮箱"
size="large"
@search="sendVerificationCode"
>
<template #enterButton>
<a-button :disabled="countdown > 0">{{ countdown > 0 ? `${countdown}秒` : '发送验证码' }}</a-button>
</template>
</a-input-search>
</a-form-item>
<a-form-item label="邮箱验证码" name="emailVerification">
<a-input v-model:value="registerForm.emailVerification" placeholder="请输入验证码" />
</a-form-item>
<a-form-item label="密码" name="password">
<a-input-password v-model:value="registerForm.password" placeholder="请输入密码" />
</a-form-item>
<a-form-item>
<a-button type="primary" block html-type="submit" :loading="loading">注册</a-button>
</a-form-item>
<a-form-item>
已有账户登录？<a @click="navigateToLogin">点击登录</a>
</a-form-item>
</a-form>
</a-col>
</a-row>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { notification } from 'ant-design-vue';
import axios from '@/axios-config';
interface RegisterModel {
email: string;
emailVerification: string;
password: string;
}
const registerForm = ref<RegisterModel>({
email: '',
emailVerification: '',
password: ''
});
const rules = {
email: [{ required: true, message: '请输入邮箱', trigger: 'blur', type: 'email' }],
emailVerification: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
};
const loading = ref(false);
const countdown = ref(0);
const router = useRouter();
const sendVerificationCode = async () => {
if (countdown.value > 0) return;
// 发送验证码请求
try {
const response = await axios.get('/auth/verify-email', { params: { email: registerForm.value.email } });
if (response.appCode === 2000) {
notification.success({ message: response.message });
countdown.value = 60;
let interval = setInterval(() => {
countdown.value--;
if (countdown.value === 0) clearInterval(interval);
}, 1000);
} else {
notification.error({ message: response.message });
}
} catch (error) {
notification.error({ message: '验证码发送失败' });
}
};
const handleRegister = async () => {
try {
loading.value = true;
const response = await axios.post('/auth/register', registerForm.value);
if (response.appCode === 2000) {
notification.success({
message: '注册成功',
description: '您可以现在登录了'
});
router.push('/login');
} else {
notification.error({
message: '注册失败',
description: response.message
});
}
} finally {
loading.value = false;
}
};
const navigateToLogin = () => {
router.push('/login');
};
</script>
<style scoped>
</style>
效果非常好，如果有哪些不满足要求， 可以不断的与之沟通，继续完善代码。当然如果有些小的改动，可以直接在编辑器里修改代码。比如，上面的上面发送验证码的地方是有问题的，没有没有判断邮箱是否可用，这里你就可以自己加个逻辑，或者告诉它 发送邮箱验证码之前，必须校验邮箱
于是，它就会给你想要的逻辑，非常喜人。不过有时候他会给出代码片段，有时候也会给出全部代码，看自己情况要求它。
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;
// 原有的发送验证码逻辑保持不变
// ...
};
总结
- 根据自己的业务需求，可以非常方便的调教出一个GPT。
- 在使用的过程中，写清楚自己的需求。
- 如果它生成的代码有问题，可以进一步沟通。
- 它生成的代码结构非常的清晰。
- 它命名的代码名称也非常的合理。
它现在能做到的已经非常棒了，未来会更加可期。
不过，从体验角度来说，我们需要在开发工具和ChatGPT之间来回切换，还是有些麻烦，什么时候，开发工具中，可以支持就太好。
还有一点儿，现在还需要我们自己去发现问题，与它沟通，指出问题，让它修正问题。如果有一个良好的产品，可以使用测试驱动开发，先让它生成测试代码，根据测试代码，生成逻辑代码。如果测试代码跑不通，自动的把错误消息反馈给它，它再修改，再跑测试代码，这体验简直逆天。
期望
希望一个体验非常完美的平台赶快到来：
- 调试好自己的GPT。
- 直接支持开发环境。
- 根据用户需求生成测试代码。
- 用户检查测试代码是否覆盖所有情况。
- 然后生成逻辑代码。
- 自动跑测试代码。
- 如果有问题，自动把问题反馈给它。
- 在此基础上再生成逻辑代码。
- 然后再跑测试代码。
- 循环往复。
- 实在不行开发人员介入解决问题。
- 最终完成开发。
如果有这样一个平台，那么，开发效率将是巨大的提升。
原文链接：https://juejin.cn/post/7322275119593144383 作者：我们来掘金吧
