问卷还可以这样开发,效率提升 150%

·  阅读 4949
问卷还可以这样开发,效率提升 150%

工作了一天,终于到了最 “鸡冻” 的时刻,等待下班铃声的响起...

不过没过多久,就听到了那既熟悉而又抗拒的消息提示声。临近下班前的消息,感觉就不太妙。不过还是硬着头皮打开了公司运营妹纸发的消息 —— “宝哥,帮帮忙,明天下午我们有一个新版的 PC 知识库的推广活动,想在我们的知识库模块中添加一个问卷入口,收集一下用户的使用体验”。

看完以上的消息之后,当时我的心情是这样的👇

本想装作没看见,奈何消息已变成已读。所以我只能强装镇定,给妹纸回了消息,让她把问卷要收集的信息发给我,过了一会儿妹纸把信息发了过来。看完后,发现表单并不会复杂,松了一口气。

之后,立马让妹纸去协调一下服务端的资源。没想到妹纸却回我说:“宝哥,这个功能不会太复杂,以你的技术能力,应该一个人就可以搞定吧”。既然妹纸都这样说了,我只能委屈的说没问题。接着,跟妹纸大致沟通了需求,确认说表单的数据,可以不用提交到我们的系统。

既然需求已经明确了,剩下的就是如何快速开发这个功能了。思考了一会儿,一个便捷的开发方案就涌现在脑海中。刚好之前有了解过在线的表单设计器和朋友公司的 Bass 产品 —— MemFire Cloud 。我就想利用在线表单设计器来快速生成表单代码,然后利用 MemFire Cloud 提供的服务来存储数据。大致方案已经有了,为了能早点下班,我立马行动起来。

一、拖拽生成表单

我司新版的 PC 知识库是基于 Vue 2 开发的,使用了 Element UI 组件库。经过一番搜索,我找到了 form-generator 这个开源项目。该项目是一款基于 Element UI 表单设计及代码生成器,目前 Github 上的 Star 数是 5.2K,是一个挺不错的开源项目。

不得不说以拖拽的方式设计表单,使用起来还是很 “香” 的。一顿操作后,表单就生成了,具体效果如下所示:

需要注意的是,该在线工具还允许我们为表单的每个字段配置正则校验。在完成表单设计之后,我通过点击 导出vue文件 的按钮,就下载到对应的 Vue 文件。此时,问卷表单的功能已经完成一大半了,就差对接数据提交的功能。所以接下来我们将利用 MemFire Cloud 提供的能力,来快速生成 API。

二、快速生成 API

MemFire Cloud 为应用开发者提供高可用、自动弹性伸缩的后端云服务。前端通过统一的 SDK 和 API 连接后端服务(云数据库、云存储、云函数、用户管理、统计分析等),加速移动/Web/IoT/游戏等应用的开发,并降低运维成本。

(图片来源:docs.memfiredb.com/)

简单介绍了 MemFire Cloud 的功能之后,下面我们来介绍如何使用 MemFire Cloud 云平台快速生成 API。

2.1 创建数据库账号

首先要使用 MemFire Cloud 云平台服务提供的服务,我们需要先注册一个账号。在账号注册成功后,我们就能登录 MemFire Cloud 云平台的管理后台。在创建表单应用前,我们需要先创建一个数据库账号,具体的操作方式如下图所示:

2.2 创建表单应用

在创建完账号之后,我们就可以创建表单应用了。首先点击左侧 我的应用 菜单,然后点击 创建应用 按钮,在弹出的对话框中输入应用名称并选择前面新增的数据库账号,最后点击 创建按钮 就会开始创建表单应用。

2.3 新建数据表

在成功创建完表单应用之后,我们就可以新建问卷表了,用于保存表单的数据。首先点击刚新建的表单应用,进入表单应用编辑页面,然后点击左侧 数据表 菜单,接着继续点击 新建数据表 按钮,具体步骤如下图所示:

在点击 新建数据表 按钮后,在当前页面右侧会以 Drawer(抽屉)的形式,显示新建数据表的表单。接着我们根据已生成 Vue 表单文件中的字段来创建 feedbacks 数据表的字段,具体的过程如以下动图所示:

以上动图只演示了添加 name 字段的过程,通过 添加字段 按钮,我们陆续添加了 mobile、post、score 和 suggestion 等字段。最后每个字段的详细配置信息如下图所示:

提示:上图中的 id 字段是默认生成的,它的值会不断自增。

经过一番配置之后,我们问卷的 API 就已经创建好了,整体操作起来还是挺方便的。下面我们只要对接一下客户端 SDK 就可以提交表单数据了。

三、集成 JS 客户端 SDK

在集成 JS 客户端 SDK 的时候,可以通过 npmCDN 的方式来安装 SDK。这里我们使用 npm 的方式:

npm install @supabase/supabase-js
复制代码

在成功安装了 @supabase/supabase-js 模块之后,我们需要在表单页面中引入该模块,然后使用表单项目总览页面中的信息来创建 JS 客户端对象,需获取的 JS 客户端对象初始化信息如下图所示:

在获取初始化信息之后,我们就可以创建 JS 客户端对象:

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  "https://c5s0hnq5g6heb3j9g3gg.baseapi.memfiredb.com", // baseURL
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW" // 公开的密钥(仅截取部分内容)
);
复制代码

有了 supabase 客户端对象之后,我们就可以利用该对象提供的方法来提交表单数据了,具体的使用方式如下:

// src/components/FeedbackForm.vue
export default {
  data() {
    return {
      // 省略其他属性
      submitting: false
    };
  },
  methods: {
    submitForm() {
      this.$refs["elForm"].validate(async (valid) => {
        if (!valid || this.submitting) return;
        this.submitting = true; // 避免快速点击,重复提交数据
        const { error } = await supabase
          .from("feedbacks") // 数据表的表名
          .insert(this.formData);  
        const msg = error == null ? "感谢您的反馈!" : "服务器开小差,请稍后再试";
        alert(msg);
        if(!error) this.$refs["elForm"].resetFields(); // 复位表单
        this.submitting = false;
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
复制代码

在以上代码中,supabase.from 方法用于指定数据表的表名,而 insert 方法用来插入新增的数据。需要注意的是,insert 方法的参数也可以是数组,即可以批量插入多条数据。在插入数据时,也可以配置 { upsert: true } 选项来执行 upsert 操作。

其实除了 insert 方法之外,该 SDK 也为我们提供了 select(获取数据)update(修改数据)delete(删除数据) 等方法。同时,也提供了强大的修改器(limit、order、range 等)和过滤器(filter、or、not、eq 等),感兴趣的小伙伴可以阅读 MemFire Cloud JS 客户端文档

在完成以上三个步骤之后,我们调查问卷功能就已经开发完成了。成功收集的问卷数据,我们可以在 MemFire Cloud 云平台管理后台中进行查看:

四、总结

利用 form-generator 表单设计器和 MemFire Cloud 提供的简单易用、功能强大的数据存储功能,我快速完成了公司运营妹纸的调查问卷功能,成功逃过加班的 “厄运”。其实后期还可以考虑对这两个工具做进一步的整合,即可以根据表单设计器生成的字段信息,自动创建对应的表结构,同时自动生成客户端 SDK 的调用代码。

在日常生活中,利用 MemFire Cloud 提供的数据库即服务的功能,我们还可以快速开发一些小的工具。比如网页书签收集器,感兴趣的小伙伴可以参考 d2-daily-chrome-extension 这个项目,只需把 axios 替换成 @supabase/supabase-js 客户端,你就可以快速开发一个网页书签收集器的 Chrome 插件。如果你还有其它更好玩的想法,欢迎给我留言哟。

五、参考资源

分类:
前端
收藏成功!
已添加到「」, 点击更改