V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
bbdlg
V2EX  ›  分享创造

如何一天撸出一个完整的小程序

  •  2
     
  •   bbdlg · 2019-08-21 22:09:00 +08:00 · 6106 次点击
    这是一个创建于 1681 天前的主题,其中的信息可能已经有所发展或是发生改变。

    -1 我又来了

    前几天刚发了个 做了一个创意平台小程序 [好兔嗨皮] ,收获颇丰,感谢各位的真知灼见,真心受教了[抱拳]

    今天分享的是前几天做的一个小程序,一天赶出来的,大家给掌掌眼,看有没有推广的可能。

    0 起因

    随着各种工具 /轮子越来越多,做程序员可以说是越来越潇洒,真真的吃着火锅唱着歌,闲了调调 BUG。

    今天要分享的是一套完整的带后台的小程序,完全从 0 开始,没有借助微擎等小程序生成框架。

    1 成果

    从第一天早上 10 点的 Idea 到第二天凌晨 6 点提交上架,除去做饭+吃喝拉撒,总共花费约 16 个小时。

    复盘下来,觉得整个过程颇有代表性,故分享出来,供诸位拍砖。

    小程序截图

    注:经过十天审核,现在可以终于上线了。

    一文一图 小程序

    2 工具清单

    2.1 准备阶段

    2.2 开发阶段

    2.2.1 后台]

    • 版本管理:码云
    • 后台开发 IDE:PHPStorm
    • 后台框架:PHP + Laravel
    • 数据库:MySQL
    • 微信后台对接( Laravel 插件):EasyWechat
    • 图片存储( Laravel 插件):Aliyun-oss-storage

    2.2.2 小程序

    2.2.3 设计

    2.3 运维阶段

    • 小程序助手
    • 小程序数据助手
    • 小程序客服小助手

    3 开发过程

    3.1 从 Idea 到动手

    吃够了不经调研的动手开搞带来的苦头,近几年对于 Idea 到产品是颇为谨慎的。像这次干净利索的决定,显然已经是好久不见。

    其实我是不推荐这么迅速的作出开发新项目的决定的,除非具备几个因素:1、项目开发周期短,1-3 天为宜; 2、具备立竿见影的效果; 3、没钱了。

    从 Idea 到产品,首先需要梳理思路。之前用的 xmind,最近一直用新出的幕布,后者更方便分享,多端可用,比较适合国内的使用习惯。

    思维导图

    时间紧迫,简单画了画。如果是较大的项目,则需要有比较系统的思路。这里推荐下 processon,之前一直用他画流程图,最近发现它又新出了诸如商业画布一类的工具,很好用。

    3.2 着手设计

    产品最终的形态,在开发之处最好是要有原型的,否则开发过程中,会逐步失去方向,被琐碎的事情干扰,以致最终开发出的产品和最初的设想有很大出入。

    产品原型的工具,在上面没有列出来,是因为项目太小,画原型图在时间上划不来。原型图的工具推荐下 墨刀,和幕布一样,也是可以在线分享演示的,这在团队协作和给客户演示时非常方便。

    这次的设计,就是完全在脑子里打了个草稿,又去找了找同类型的产品取了点经,一个大概的产品模型就有了。

    至于风格什么样,那就只能靠天吃饭了。因为这么短的时间,不可能去动用设计的兄弟,所以就在 iconfont 和 ooopic 一类的设计网站上找灵感。好在 iconfont 上刚好有一组图标,与心目中的产品比较契合,果断下载。

    至此,logo、图标、框架等都齐了,开始最激动的撸代码阶段。

    3.3 撸代码

    一个人搞定前后端,这里面就有些门道了。 先干啥后干啥,每个人的喜好不同。以效率为出发点,我有如下建议:首搭框架,先前再后,先横再竖,敏捷交付。

    [首搭框架] ,是指先把前后端的基础框架搭建起来,该配的基础功能先做好。比如 Laravel 的本地调试环境、代码仓库、云端服务器、备案过的域名、小程序的账号、业务域名配置等等,这些环节先在脑子里过一遍,再从头到尾整个做完。

    之所以一鼓作气全部做完,是因为在后面编码的过程中,一旦被上面一些小问题卡住,思路就容易被打乱,影响效率。并且,很多事情是需要较长的时间的,比如域名备案,慢的话就得一二十天,如果被域名卡住,项目流产的可能性就会直线攀升。

    第二是 [先前再后] 。这个意思则是在开发某个功能时,先设计前端界面和逻辑,再做后端接口和数据。反过来不行么?行,但是不好。在这种快速迭代开发的情况下,前端页面和逻辑没有经过系统的设计,会经常发生变动。这和传统团队开发不太一样,没有概要设计到详细设计再到开发的过程,更没有并行开发的条件,因此要因地制宜,采取更适合这种小型作战的方式方法。

    当然,这个建议重点关注的是具体的功能开发,而不是完全取消前置设计。如果没有整体的框架设计,是万万不行的。

    第三是 [先横再竖] 。我们从水平和垂直两个方向,去划分具体的功能。比如这个项目中有四个页面,分别是发现页、发布页、个人主页、以及单篇展示页。我在开发时,先把四个页面建好,把 tab 和图标都加进去,页面切换做好,先感受下最终的效果。这种方式叫水平开发,好处在于让你会对产品的最终形态先有所感知,如果有不舒服的地方,及时地进行调整。

    当我们对某个页面,或者某个跨页面的功能进行开发时,则称之为垂直开发。此时的功能颗粒度就会相对较小,也更容易把控。

    最后是 [敏捷交付] ,是脱胎于敏捷开发模式的。意思是要持续的向客户交付可用的产品,这里的客户就是开发者自身。在前几个原则的基础上,要实现敏捷交付,还应该注意不要被细枝末节的点牵绊住。比如某个图标的配色不好,某个按钮的位置摆的不正等等。切记,一定要抓大放小,美化完善的工作一定放在最最后。再者,一款产品就是要在不断的打磨下,才能奔着精品而去。

    3.4 运营准备

    一个产品的启动是很有讲究的,尤其是社交和 UGC 产品。当一个用户初次使用时,如果觉得你这个产品冷冷清清毫无生气,是很难沉下心来去体验的。所以,适当的“作假”是提高用户体验的增长黑客手段。

    在产品达到一定量级后,一定记得把这些措施去除。比如王者荣耀的排位匹配,当你的等级很低时,会匹配一些 AI 机器人陪玩,以鼓励玩家。

    当到达人数比较多的等级阶段时,就会降低 AI 机器人的比率,因为让用户等待时间过久,是一件体验非常不好的事。同样的,在我们这个产品中,用户发出去的文章,在达到一定时间内,应当引入一定的激励机制,以鼓励用户。当用户较多时,真实的互动足够激励用户再创作时,则可取消激励机制,彻底度过项目的冷启动阶段。

    4 后记

    整个过程都是一个人完成的,对于小项目尚能如此,稍微大些的就需要考虑到协作问题。

    改天会就中小型团队协作的过程,以及用到的一些提高效能的工具进行分享。

    20 条回复    2020-07-15 10:49:30 +08:00
    zhou00
        1
    zhou00  
       2019-08-21 23:24:36 +08:00 via iPhone
    感谢分享
    loginbygoogle
        2
    loginbygoogle  
       2019-08-21 23:32:40 +08:00 via Android
    去偷,去抢
    GoLDTiGEr404
        3
    GoLDTiGEr404  
       2019-08-22 00:06:35 +08:00 via Android
    学习一下
    roberts
        4
    roberts  
       2019-08-22 09:09:42 +08:00   ❤️ 1
    找个类似的小程序逆向出源码,flask 搭建个后台😂,几个小时能搞定
    licoycn
        5
    licoycn  
       2019-08-22 09:14:32 +08:00
    还是很简单,对于不同需求的小程序花费不同的时间,之前对于简单的小程序都是几个小时就做出来了,一个论坛型的从无到有前后端包括管理只花费了 3 天多
    likefly
        6
    likefly  
       2019-08-22 09:22:34 +08:00
    赞了
    mrant
        7
    mrant  
       2019-08-22 09:43:39 +08:00
    用的自己的服务器吗,搭建在哪里的
    ppd
        8
    ppd  
       2019-08-22 10:10:17 +08:00
    感觉这类小程序完全没必要还搞个服务器,直接云开发就可以。
    joocoo
        9
    joocoo  
       2019-08-22 10:57:49 +08:00
    感谢分享~~
    payton93
        10
    payton93  
       2019-08-22 15:16:34 +08:00
    感谢,学习
    cyy564
        11
    cyy564  
       2019-08-23 09:41:18 +08:00
    学习了~
    bbdlg
        12
    bbdlg  
    OP
       2019-08-23 11:07:34 +08:00
    @mrant 是自己的服务器:)
    bbdlg
        13
    bbdlg  
    OP
       2019-08-23 11:12:56 +08:00
    @ppd 云开发的 IDE 还不是很完善,尤其是对某些框架,如 laravel
    joocoo
        14
    joocoo  
       2019-08-23 15:14:39 +08:00
    图都没显示~~
    bbdlg
        15
    bbdlg  
    OP
       2019-08-25 18:24:30 +08:00
    @joocoo 前几天阿里的云服务器废掉了,阿里工程师排查了半天,可能您刚赶上那段时间维护:(
    DoctorCat
        16
    DoctorCat  
       2019-08-28 15:33:59 +08:00   ❤️ 1
    执行力大赞
    bbdlg
        17
    bbdlg  
    OP
       2019-08-30 11:22:13 +08:00
    简书凉凉...上面的图床都挂了~~
    LamKingTak
        18
    LamKingTak  
       2019-10-11 11:21:01 +08:00
    带佬,开源吗
    ddzzhen
        19
    ddzzhen  
       2019-11-04 15:20:27 +08:00 via Android
    楼主可以有偿做个小程序吗
    Zaptain
        20
    Zaptain  
       2020-07-15 10:49:30 +08:00
    嗨,可以加个 vx 嘛,captainzi
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   978 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 20:10 · PVG 04:10 · LAX 13:10 · JFK 16:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.