新范式下的低代码方案

前言

低代码由来已久,主要是减少开发人员的编码时间,提高产品交付效率,甚至功能完备的低代码平台可以使非开发人员使用。

正如此,多年来,低代码平台层不出穷,但依然没有出现现象级的产品,不过,大多数公司也都有自己的低代码平台,体验和效果也是参差不齐。

新范式的到来

如今人工智能又达到了一个新的阶段,有预言说,它最先代替的是程序员。我认为这很难,如果你深度使用了ChatGPT,它确实非常非常惊艳,但是,要想取代程序员,还为时过早。不过如果能够善加利用,它将是一把利器,可以事半功倍。

但是,目前还没有发现一款体验非常好的GPT产品可以无缝的与开发环境融合。即使"历史悠久"的GitHub Copilot也没有达到一种理想效果,虽然还有它的孪生兄弟GitHub Copilot Chat也总是缺少一些体验。

虽然现在还没一个非常好的产品来辅助我们开发(GitHub Copilot已经很好了),但是也不影响一个新的范式即将到来,GPT注定会改变我们的开发方式。

目前,就我的体验来说,ChatGPT的自定义GPT体验是最好的,但是在开发的过程中,也相当割裂。下面我们就来定制这样一个GPT,看他的效果如何。

自定义GPT

假定你可以访问ChatGPT,并且开通了Plus。

自定义一个GPT和开发一个项目差不多,需要反复调试,第一版完成之后,还需迭代。但是,相对于开发项目,自定义一个GPT的调试过程要相对简单,我这里直接给出一个调试好的,你可以直接把这个指令粘贴到你的ChatGPT里。

typescript 复制代码
你是一位资深的前端开发工程师,你的目标是根据用户要求创建一个不省略任何逻辑的,功能完备的组件。你需要跟用户沟通需求,满足条件之后进行组件开发。
你严格遵循如下规则完成组件开发:
- 使用最新的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,怎么使用呢?比如你可以输入这样的要求:

xml 复制代码
根据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、注册按钮下面要有一个跳转逻辑:已有账户登录?

它就会非常贴心的生成如下代码:

ini 复制代码
<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>

效果非常好,如果有哪些不满足要求, 可以不断的与之沟通,继续完善代码。当然如果有些小的改动,可以直接在编辑器里修改代码。比如,上面的上面发送验证码的地方是有问题的,没有没有判断邮箱是否可用,这里你就可以自己加个逻辑,或者告诉它 发送邮箱验证码之前,必须校验邮箱

于是,它就会给你想要的逻辑,非常喜人。不过有时候他会给出代码片段,有时候也会给出全部代码,看自己情况要求它。

typescript 复制代码
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. 最终完成开发。

如果有这样一个平台,那么,开发效率将是巨大的提升。

相关推荐
緑水長流2 分钟前
什么是Promise?什么是async和await?
前端·javascript·vue.js
Mintopia3 分钟前
Three.js 相机(Camera)的使用详解
前端·javascript·three.js
wordbaby6 分钟前
PC 屏幕自适应的流行方案解析
前端
Mintopia6 分钟前
Node.js 中path模块的深度解析与实战应用
前端·javascript·node.js
程序员小续7 分钟前
git rebase 和git merge使用及区别
前端·git·后端
静待一世花开8 分钟前
React基础学习
前端
华科云商xiao徐9 分钟前
使用Scrapy编写图像下载程序示例
前端
WillaWang9 分钟前
html结构中图片下方的间隙
前端
阿笑带你学前端10 分钟前
从0到1:我用Flutter造了个全平台IPTV神器,从此看直播不再"精神分裂"!
前端·flutter
ak啊12 分钟前
emit 阶段写入文件系统以及持久化缓存机制
前端·webpack·源码