前言
低代码由来已久,主要是减少开发人员的编码时间,提高产品交付效率,甚至功能完备的低代码平台可以使非开发人员使用。
正如此,多年来,低代码平台层不出穷,但依然没有出现现象级的产品,不过,大多数公司也都有自己的低代码平台,体验和效果也是参差不齐。
新范式的到来
如今人工智能又达到了一个新的阶段,有预言说,它最先代替的是程序员。我认为这很难,如果你深度使用了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 作者:我们来掘金吧