前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >利用微搭低代码开发每周菜谱小程序

利用微搭低代码开发每周菜谱小程序

原创
作者头像
低代码布道师
修改2021-07-14 11:19:29
1.2K0
修改2021-07-14 11:19:29
举报
文章被收录于专栏:微搭低代码微搭低代码

笔者一直是在政务赛道,给政府提供办公软件。因为去年甲方事业单位改革的原因,原来的负责人都转隶到了新的单位。现有的人员和机关事务服务中心合并,所以需要关注内部事务的业务,比如食堂、物业、停车、访客登记等业务。更换了业务方向后,由过去的解决公文流转、流程审批、信息报送等业务,转向到了内部管理业务。日常和客户沟通是免不了的,先看一下我们最近的一段沟通记录。

需求沟通

李科长:小韩,你最近给开发的菜谱评论有个问题。

小韩:领导,有啥问题呢?是有BUG么,上传不了么?

李科长:倒不是上传的问题,我们通知也发了,但是没人提问题,你觉得是啥原因呢?

小韩:没问题说明我们做的很好啊,没人有需求提问题啊。

李科长:哪是啊,没让你开发这个功能之前,提问题的人很多,还有告到大领导那,说单位食堂的饭品类不多,油大,不好吃。

小韩:这样啊,那我就知道了,因为咱们系统都是实名登录的,意见提交后会显示上传人的信息,可能大家有顾虑信息发布后被自己的领导看到觉得自己是刺儿头,所以不愿意公开提交意见。

李科长:是存在这个问题,你们的那个信息管理发布后还有阅读人的记录,要是有领导浏览了确实不太好,那可以在移动端上看到菜谱并评论不?

小韩:目前不太支持,因为咱们平台建立之初的目标是为领导服务,规划的是管理的功能,移动端主要是用来办理公文用的,主要是处室的收文人员和处长及厅领导,没有规划这种服务的功能。

看我们讨论的比较热烈,这时候坐在对面的小张也表达了一下自己的看法。

小张:我觉得还是我上次建议的,咱们搞个公众号,大家直接在手机上就可以看到单位的动态,也可以看到菜谱,在手机上操作大家都会,而且也不用单独安装APP又方便。

李科长:你的建议我和领导提了,我也咨询了一些公司,单独开发个公众号费用也比较高,领导没给批预算。

小张:那没办法啊,要想给单位的同事提供便利肯定要投入的啊,咱们要是没有预算这个事不就干不成了么。

沟通其实就是个头脑风暴的过程,大家集思广益,一碰撞就会产生不错的想法。这个时候我也发挥一下我的发散思维,给了个建议。

既然是预算紧张,这个事他们还想搞个创新,而且也咨询过一些专业的公司,那么以专业的角度,可能给一个咨询比较好。在沟通的过程中即使有些需求现在无法实现,如果给予客户中肯的建议,无疑拉近了双方的关系,客户觉得你在为他着想,信任慢慢也就建立了。

小韩:您有没有考虑自己干呢?

李科长:自己干主要我们不是专业干IT的,对这些都不了解,能行么?

小韩:最近腾讯云上线了一款低代码工具,就是解决非专业人员快速搭建的问题,而且上手比较容易,不需要太多的开发技能。

李科长:那咱们目前这个需求用你说的低代码工具多久能做出来呢?

小韩:有一天就够了,但是需要你们自己购买资源,而且服务器是运行在云上的,这种方案也需要你们自己考虑可行性。

李科长:那上线是在哪用呢?

小韩:他提供了网页版和小程序版,网页版可以用微信扫二维码直接打开,小程序的话也是扫码使用,日后想再次用的话可以通过小程序列表找到,也可以添加到手机桌面上使用。

李科长:今天和你沟通真是收获了挺多新的知识,你提的建议挺好,我和领导汇报一下,后续咱们多沟通。

需求分析

以上是个真实的沟通场景,日常我们做项目的时候也免不了需要沟通,如果只是简单的记录了双方的沟通记录是不够的,因为不聚焦,无法将对话内容变成实际的业务需求。所以开发系统需求分析是必不可少的环节,梳理出需求文档也便于和甲方的项目负责人沟通,看看双方的理解是否有差距。

按照我的沟通情况,其实是需要考虑两部分人员的需求。第一部分人员是管理者,他负责日常的菜谱发布和评论的审核。第二部分人员是机关的工作人员,他日常可以在小程序上查看每周的菜谱和发表的评论。

除了要规划不同人员具有不同的操作外,还需要考虑操作的便捷性,管理者是每周五确定下一周的菜单,周五需要上传下一周一周的菜单。正常情况下是周一到周五,遇到节假日需要考虑有倒休的情况,周六和周日有时候也需要上传菜谱。

因为考虑到管理的及时性,工作人员提交评论时需要及时发送消息给管理者,消息的发送形式也需要考虑,我们有几种选项,可以是短信提醒,微信公众号的模板消息。如果是短信提醒其实也需要告知短信的收费方案。而模板消息也需要对方订阅消息才能接收到。

功能设计

做完需求分析,在功能设计的时候其实我们就是要将功能分解成模块,我们准备按照角色进行分解,分为普通用户和管理员

普通用户

每周菜谱

  • 菜谱列表 以列表的形式列出历史的菜谱信息,按照时间倒序排列
  • 菜谱查看 可以查看具体一周的菜谱信息,每天又分为早餐和午餐

菜品评价

  • 评价列表 以列表的形式列出已经审核通过的评论信息,按照时间倒序排列
  • 评价查看 可以查看具体的评论信息
  • 评论新增 可以发布最新的评论信息,发布之后提交管理员审核

管理员

菜谱管理

  • 菜谱新增 可以新增一周的菜谱,一周分为七天,每天可以上传早餐和晚餐
  • 菜谱修改 可以修改菜谱的信息
  • 菜谱删除 可以删除菜谱的信息
  • 列表查询 以列表的形式展示每周的菜谱信息,具体格式为每周菜谱(一周的开始日期~一周的结束日期)

评论管理

  • 列表查询 以列表的形式展示评论信息,而且要显示评论的状态,分为待审核、审核通过、审核不通过
  • 评论查看 如果已经完成审核的评论可以进行查看
  • 评论审核 待审核的评论信息可以进行审核,有审核通过按钮和审核不通过按钮,点击按钮需要修改评论的状态数据库设计按照上述设计,我们需要两个数据源,分别是菜谱和评论菜谱表| 字段名称 | 字段英文名称 | 数据类型 | |--|--|--| | 开始日期 | begindate | 字符串| | 结束日期 | enddate | 字符串 | | 周一早餐 | mondaybreakfast | 字符串 | | 周一午餐 | mondaylunch | 字符串 | | 周二早餐 | tuesdaybreakfast | 字符串 | | 周二午餐 | tuesdaylunch | 字符串 | | 周三早餐 | wednesdaybreakfast | 字符串 | | 周三午餐 | wednesdaylunch | 字符串 | | 周四早餐 | thursdaybreakfast | 字符串 | | 周四午餐 | thursdaylunch | 字符串 | | 周五早餐 | fridaybreakfast | 字符串 | | 周五午餐 | fridaylunch | 字符串 | | 周六早餐 | saturdaybreakfast | 字符串 | | 周六午餐 | saturdaylunch | 字符串 | | 周日早餐 | sundaybreakfast | 字符串 | | 周日午餐 | sundaylunch | 字符串 |评论表| 字段名称 | 字段英文名称 | 数据类型 | |--|--|--| | 意见建议 | suggest| 字符串| | 状态 | status | 字符串 | | 回复内容 | reply | 字符串 |功能开发能看到这里说明我上面写的确实是您实际中需要解决的问题,那么咱们真正的干货来了,就需要花一定的篇幅来好好介绍一下咱们这款开发工具。它的特点呢是运行在云上,开通比较简单用您自己的微信号注册就可以,当然了作为一款商业软件他是采取的预付费模式,费用的话是每年120元,这些都是需要是否要采用这个方案要考虑的内容,具体的资费情况可以查看官方的介绍。开发的形式呢是采用拖拽式开发,我们具体的开发步骤分为定义数据源、创建应用、页面开发、部署测试几个步骤定义数据源我们在设计阶段设计了数据库的表,就是存储数据的地方,微搭需要在数据源管理里创建,具体方法是登录微搭的控制台,在数据源管理菜单点击新建数据源按钮
    在这里插入图片描述
    在这里插入图片描述
    我们输入数据源的名称和标识
    在这里插入图片描述
    在这里插入图片描述
    创建成功后我们需要创建字段,就按照我设计的字段依次建立就可以,点击添加字段按钮
    在这里插入图片描述
    在这里插入图片描述
    按照我们实际的设计添加具体的字段
    在这里插入图片描述
    在这里插入图片描述
    添加好后的效果
    在这里插入图片描述
    在这里插入图片描述
    可能对于新手小白来说数据源下边的方法不知道是啥意思
    在这里插入图片描述
    在这里插入图片描述
    这个就对应我在功能设计里写的增删改查的功能,平台已经默认都给你写好了,你不需要修改直接使用就可以 按照同样的方法我们创建第二个数据源评论
    在这里插入图片描述
    在这里插入图片描述
    然后按照设计添加对应的字段
    在这里插入图片描述
    在这里插入图片描述
    创建应用数据源定义好后,我们需要创建应用,一个应用就对应线上的一个小程序,基础版可以创建50个小程序,足够我们使用了。具体方法点击应用管理,点击创建空白应用按钮
    在这里插入图片描述
    在这里插入图片描述
    输入应用名称和标识点击确定就可以
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

页面开发

应用创建成功后,我们点击编辑应用按钮就可以进行页面的具体开发了

在这里插入图片描述
在这里插入图片描述

首页的制作

默认会创建一个首页,就是我们打开小程序看到的第一个页面

在这里插入图片描述
在这里插入图片描述

一般的小程序首页会放置具体可以操作的功能,我们以图标的形式引导用户进行点击,首先我们开发菜谱管理的功能,图标的话我们可以去iconfont上下载,可以免费使用

在这里插入图片描述
在这里插入图片描述

在搜索框输入菜谱,点击png下载就可以

在这里插入图片描述
在这里插入图片描述

下载好了之后,我们需要把图标上传到我们的素材库以备后续进行使用,可以点击左侧菜单栏的资源管理,将下载好的素材上传上去

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

素材有了我们就需要考虑功能的实现了,首页的功能需要选择合适的布局,布局就是规定了页面的结构,因为是图标加文字的形式所以我们选择栅格布局,有四列就足够了。具体的操作方式是选择对应的组件,可以点击也可以拖入编辑区

在这里插入图片描述
在这里插入图片描述

初学者可能对插槽不是特别理解,其实就像积木一样,有插槽的地方说明继续可以放置其他组件,这里我们在第一个插槽里先放置一个容器组件,我一般的习惯是切换到大纲视图,然后选中插槽再往里放组件,这样比较精准。

在这里插入图片描述
在这里插入图片描述

放置容器组件的目的是为了让图片和文字描述垂直排列,所以我们需要设置一下容器的样式为flex布局,主轴方向为垂直,主轴和副轴都是居中对齐

在这里插入图片描述
在这里插入图片描述

然后在容器组件里放置图片组件,图片组件放置后我们改一下图片的宽和高各为100

在这里插入图片描述
在这里插入图片描述

然后增加一个文本组件,将内容修改为菜谱管理

在这里插入图片描述
在这里插入图片描述

按照相同的方法我们依次在其余的插槽中放置图片和文本组件,修改标题为每周菜谱、评论管理、发布评论

在这里插入图片描述
在这里插入图片描述

现在图片是默认图片,我们可以将图片修改成使用素材库的图片,选中图片组件点击云朵的图片使用素材库的图片即可

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

图标定义好后,我们需要为图标定义事件,我们选择容器组件,定义点击事件

在这里插入图片描述
在这里插入图片描述

选择平台方法的导航事件

在这里插入图片描述
在这里插入图片描述

导航事件需要选择导航的页面,我们需要创建一个页面

在这里插入图片描述
在这里插入图片描述

做了这么多操作了,点击保存按钮,将你的操作提交到服务器上,要不然就白做了

在这里插入图片描述
在这里插入图片描述

接下来我们需要创建我们跳转的页面,菜谱管理页面,在左侧的导航条切换到页面管理,创建一个新页面即可

在这里插入图片描述
在这里插入图片描述

录入页面的名称和标识即可

在这里插入图片描述
在这里插入图片描述

页面创建成功后我们回到首页上,选中我们的容器组件,切换到事件页签选择我们刚刚创建的页面,这样事件就定义好了

在这里插入图片描述
在这里插入图片描述

费了这么大的力气终于搭建好一个页面,在编辑器里是看不到页面跳转的,为了测试一下我们的设置是否正确,我们点击预览发布按钮,将代码提交到生产环境看一下效果

在这里插入图片描述
在这里插入图片描述

选择实时预览就可以了,其余两个操作都比较耗时,如果测试通过了之后再点击云端构建就可以

在这里插入图片描述
在这里插入图片描述

默认会生成一个二维码和链接,二维码可以手机体验,链接可以直接在电脑上体验

在这里插入图片描述
在这里插入图片描述

限于篇幅的原因,后续的功能我们放在后边几篇文章中讲解,要不然全搞在一起看起来也过于的累了,不利于学习。

部署测试

页面全部做完就需要集成测试了,方法我们前边已经讲过了,就是预览发布,实时构建,然后就反复测试就可以了。

系统体验地址

我已经成为微搭的第一批体验会员,教程展示的小程序也已上线,欢迎在线体验

每周菜谱小程序

总结

本次实战分享是结合笔者在工作中遇到的一个具体需求,菜谱管理,结合上半年笔者参加微搭低码的一个公测体会,开发了一款物业小程序。行文思路是按照传统软件开发的瀑布模式,从需求到设计然后再到开发部署,初学者可以一步步的按照笔者的步骤快速的构建一款应用。当然了学习的道路长且远,随着你的应用上线,需求会源源不断的过来,还需要我们持续不断的学习,以自己的专业知识来满足客户的要求也为社会贡献自己的价值。笔者参加了新星计划,如果觉得有用请一键三联就是对笔者最好的鼓励,原创不易,还需您的鼓励。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求沟通
  • 需求分析
  • 功能设计
    • 普通用户
      • 管理员
        • 页面开发
          • 首页的制作
        • 部署测试
        • 系统体验地址
        • 总结
        相关产品与服务
        云开发 CloudBase
        云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档