新范式下的低代码方案

前言

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

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

新范式的到来

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

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

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

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

自定义GPT

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

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

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

  // 原有的发送验证码逻辑保持不变
  // ...
};

总结

  1. 根据自己的业务需求,可以非常方便的调教出一个GPT。
  2. 在使用的过程中,写清楚自己的需求。
  3. 如果它生成的代码有问题,可以进一步沟通。
  4. 它生成的代码结构非常的清晰。
  5. 它命名的代码名称也非常的合理。

它现在能做到的已经非常棒了,未来会更加可期。

不过,从体验角度来说,我们需要在开发工具和ChatGPT之间来回切换,还是有些麻烦,什么时候,开发工具中,可以支持就太好。

还有一点儿,现在还需要我们自己去发现问题,与它沟通,指出问题,让它修正问题。如果有一个良好的产品,可以使用测试驱动开发,先让它生成测试代码,根据测试代码,生成逻辑代码。如果测试代码跑不通,自动的把错误消息反馈给它,它再修改,再跑测试代码,这体验简直逆天。

期望

希望一个体验非常完美的平台赶快到来:

  1. 调试好自己的GPT。
  2. 直接支持开发环境。
  3. 根据用户需求生成测试代码。
  4. 用户检查测试代码是否覆盖所有情况。
  5. 然后生成逻辑代码。
  6. 自动跑测试代码。
  7. 如果有问题,自动把问题反馈给它。
  8. 在此基础上再生成逻辑代码。
  9. 然后再跑测试代码。
  10. 循环往复。
  11. 实在不行开发人员介入解决问题。
  12. 最终完成开发。

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

原文链接:https://juejin.cn/post/7322275119593144383 作者:我们来掘金吧

(0)
上一篇 2024年1月11日 上午10:48
下一篇 2024年1月11日 上午10:58

相关推荐

发表回复

登录后才能评论