利用chatgpt做一款题库小程序
# 前端小白是如何利用chatgt用一周时间从0做一款微信小程序的
随着chatgpt
的大火,真的是在工作上给各行各业的人带来了极大的便利,本人是一个java
程序员,其实我自己是一直想开发一款属于自己的小程序的,但是迫于对前端知识的贫瘠,考虑到要学的前端开发知识有很多,比如js
,ts
,前端框架vue
,react
...,最难受的是css
样式,最简单的效果都要弄好久,每次想一想就放弃了。最近出来的chatgpt
,让我对这个想法重新有了信心,然后就是直接开干!
# ☝确定好方向
# 为什么要做一个题库小程序呢?
之前帮人家做过自动答题的程序,所以不少人问我有没有相关网站的题库,所以既然别人有这个需求,我觉得还是有做的可行性的。
# 🚌模仿同类产品
既然想好了要做什么,那我就直接去应用市场,微信小程序搜相关的应用,我一口气下载和看了十几款搜题程序,搜题大侠,题海,刷题神器,聚题库...,总结了几点:
- 提供了丰富的搜题方式,手动输入文字,语音输入,拍照识别
- 提供题库,可以让用户自己练习
- 用户可以自主上传题库
上面这几点,是用户的基础功能,也就是满足题库app的基本条件。 但是很多题库都没有把三点都做到,有些有拍照但是没有语音输入,有些只有文字输入,有些题库很丰富但是不支持用户自己导入题库,而且绝大多数app动不动就要收费,而且收费还很高,我觉得这可以是我的突破点,作为个人开发者,我的成本肯定比他们低,所以程序在收费方面肯定比他们低或者不收费。
# 🤔策划产品ui和功能
功能方面,我就先模仿他人的题库app,先把基础的功能做起来,第一步先把搜题功能做好,再做其他的功能。
- 搜题方式:实现手动输入文字,语音输入,拍照识别题目。
- 题库来源:我初步想的是爬数据+第三方api+用户上传,这样才能覆盖面广,而且题库也会一直更新。
根据要做的功能就简单画了下草图,自己不懂ui,审美也不太行就只能潦草一点了
# 🥊开发
# 后台
后台接口想了下,先暂定三个接口,为了接口不被轻易爬取,采用前台加密,后台解密的方式,每次请求都会携带秘钥,解密成功才会正确响应。
- 查询题库接口
- 登录接口
- 百度ocr接口
因为后端是自己老本行,花了一天左右差不多就做完了
# 前台
前台我首先调查了那几款框架好做微信小程序,就是坑比较少(包括uniapp
,taro
,原生),因为自己直接稍微接触过一点react
,鉴于taro
对react
的适配性比较好,taro
也一直在更新,所以我选择taro
(原生也考虑过,但是感觉要多花时间去了解,所以就pass啦)。
# 准备事项
开发小程序还是有很多准备的工作要做的,
- 比如得先注册一个微信小程序账号,每次发布就是需要登录这个账号来发布,
- 选择小程序的类目,这个挺重要的,因为有些类目,个人开发者不能申请,所以要特别小心,因为我做的属于题库,所以我选择了 信息查询和教育两个类目。
- 想一个容易被记住和被搜索到的小程序名称。
- 设计一个图标,我自己不会,就在图标网站先找了一个差不多适合的。
- 用户隐私保护指引,这个需要根据自己的小程序功能来填写,向我这边就需要麦克风和摄像机的权限,这个需要在里面说明用途,更新提交上去,这样才能保证审核可以成功。
# 根据demo修改
我先去官网clone了个demo下来,下载了微信开发者工具,尝试运行了下,发现还真有用 Taro官网 (opens new window)
然后自己先把首页的样子,用语言描述给chatgpt,给我画出大概得雏形,然后再进行微调
如此往复,我就得到了一个简洁的首页
然后就是对接接口啦,查询题库,ocr的接口,还有登录接口统统对接上去。 这里遇到了两个比较坑的地方。
- 一个是微信官方有一个“微信同声传译”插件,需要自己去市场里申请,结果发现自己死活申请不了,提示“个人主体不能申请”,可是我也看到类似的个人小程序也用了这个插件,这我就很迷糊了,凭什么我就不能申请成功,后面在我穷追不舍的搜索下,终于发现了另外的入口,申请成功!
申请步骤
- 找到了微信同声传译,登录后选择给哪个小程序添加,添加成功后去小程序的微信公众平台看已经添加成功了,而且是已通过状态。
- 获取用户的昵称和头像方式变了,之前只需要调用getUserProfile这个Api,在成功回调中就能获取用户信息,现在已经废弃了,现在需要开发者自己写表单,用户自己填写头像和昵称,感觉这个会让用户操作变得麻烦,所以我暂时先不实现这个功能了,等到那天想到合适的操作逻辑再做
这里前前后后花了我三四天的时间(主要是下班来做,上班一般没啥时间),主要是交互和摸清wx的api使用比较花时间,chatgpt在设计界面和交互真的帮了我很大的忙,还有一些前端错误他也能快速定位,并给出解决方案,给我节省了很多时间
# 发布
最后一步就是上传代码,提交审核,一般一天左右就会审核完成,再点击发布,就能看到上线的小程序,这一刻心情还是无比的激动!🥰
# 🚧开发总结
使用chatgpt帮助我一个前端小白慢慢搭建起一个小程序的过程中, 缺点在我看来是chatgpt并不会准确无误地给出我想要的答案,大多数是比较符合的,但是肯定不是特别符合,需要自己一点一点的调整。 优点是chatgpt每次告诉你答案的时候往往还会为我解答代码的作用,这让我更快地了解语言的一些特性和框架的使用,节省了自己去官网查文档的时间,这让我感觉自己是真的参与了这个前端开发,而不是随意地copy答案。
最后非常感谢大家看到这,很高兴分享这次的开发过程,总之就是有意思,效率是真的高。