[{"data":1,"prerenderedAt":422},["ShallowReactive",2],{"page-/post/daily/when-a-developer-want-to-dosomething":3,"surrounding-page":413},{"id":4,"title":5,"author":6,"body":7,"date":397,"description":13,"extension":398,"group":399,"lastmod":400,"meta":401,"navigation":404,"path":405,"rawbody":406,"seo":407,"showTitle":5,"stem":408,"tags":409,"versions":399,"__hash__":412},"content/post/daily/when-a-developer-want-to-dosomething.md","当一个程序员突然想做一款产品","枣把儿",{"type":8,"value":9,"toc":382},"minimark",[10,14,18,21,24,27,30,37,40,43,46,49,66,71,74,77,80,83,86,89,154,157,160,163,166,169,172,175,178,181,184,187,190,202,210,213,216,222,225,228,232,235,280,283,286,289,292,295,301,307,310,315,329,334,337,345,348,351,358,361,364,367,370,373,376,379],[11,12,13],"p",{},"你一定有很多瞬间，脑子诞生了一个有趣的产品雏形，但因为种种原因搁浅，最终没有落地。",[15,16,17],"h2",{"id":17},"引言",[11,19,20],{},"在一个普普通通的周二，我又㕛叒一次萌生了和许多程序员一样的想法：做一款自己的产品。",[11,22,23],{},"鉴于以前的想法 99% 都变成了一个一个不能用的 demo，还有 1% 在反复起步，这次我痛定思痛，决心一定要好好“架构”一番！！",[15,25,26],{"id":26},"起步",[11,28,29],{},"说干就干。我熟练的打开Obsidian，打开Excalidraw 新建绘图，开始设计网站的草图，然后在一旁开始罗列想用的技术栈、表结构、功能点。一阵奋笔疾书后，一个网站的大概样子已经尽收我眼底！",[11,31,32],{},[33,34],"img",{"alt":35,"src":36},"","https://img.zzao.club/article/202411191426107.png",[11,38,39],{},"正当我心中一阵窃喜时，我突然意识到我还缺一个Logo。",[11,41,42],{},"是的，这是一个非常严重的问题。虽然我还没有新建文件夹，但是这种建成后必定一流的网站要有一个配得上它的一流Logo才对。不行，我一定要为它找一个称心如意的Logo才行。但是今天已经快下班了，我只能明天再搞了。",[11,44,45],{},"ok，愉快的第二天马上就来了。",[11,47,48],{},"我开始从AIGC和自主设计两个方向寻找适合我的Logo，很快啊，AIGC被我排除了，因为它感觉就像一个不合格的Tony老师一样，不适合我这种精益求精的态度。",[11,50,51,52,59,60,65],{},"于是我打开b站，开始观摩几个设计领域的大up主，看看能不能吸取到一星半点的灵感（当然是只感受到了nb二字）。突然，我发现了一个",[53,54,58],"a",{"href":55,"rel":56},"https://www.bilibili.com/video/BV13U4y1u7zB/?spm_id_from=333.999.0.0&vd_source=cf9b3c8faa56d0c64b09a55be382ef80",[57],"nofollow","搬运自YouTube的视频","，再结合之前我在",[53,61,64],{"href":62,"rel":63},"https://www.pinterest.com/",[57],"pinterest","看到的让我眼前一亮的像素风格，就决定是你了！！",[11,67,68],{},[33,69],{"alt":35,"src":70},"https://img.zzao.club/article/202411191426108.png",[15,72,73],{"id":73},"再起炉灶",[11,75,76],{},"我打开了我珍藏已久的Adobe AI , 想尝试按视频里的操作自己设计一番，但无奈它提示我因为某些原因不能继续使用了，并且只给了我退出软件和购买软件两个选项。我在微信提示余额不足后咬牙选择了退出。",[11,78,79],{},"既然如此，我只能自己先实现一个生成LOGO的工具了。（是的，像擦出爱情的火花一样突然）",[11,81,82],{},"（至于最开始是想做什么产品，我先按下不表）",[15,84,85],{"id":85},"功能构思",[11,87,88],{},"在分析了视频里的操作方式后，先在脑子构思一些这个小工具具体实现的功能：",[90,91,92,96,99,102,110,127],"ul",{},[93,94,95],"li",{},"一个可拖动的画布",[93,97,98],{},"一个可绘制的区域，区域内由带有黑色边框的小方格组成，并且可缩放可拖动。",[93,100,101],{},"小方格可以设置数量，如：100x100，单个方格可以设置大小，如格尺寸为：5x5",[93,103,104,105],{},"绘图模式下，鼠标可在绘图区域的小方格上点击并滑动，小方格会被设置对应的颜色\n",[90,106,107],{},[93,108,109],{},"颜色可配置，并且方便切换：比如tab键自动轮换预制的几种颜色",[93,111,112,113],{},"绘制后，图片可导出\n",[90,114,115,118,121,124],{},[93,116,117],{},"导出时，去除黑色边框？",[93,119,120],{},"导出时，去除未涂色的方格？",[93,122,123],{},"导出时，批量设置未涂色的方格颜色？",[93,125,126],{},"导出时，压缩图片？",[93,128,129,130],{},"导入一个图片，分析图片的像素值，自动绘制到画布上\n",[90,131,132,135,138,141,144,147],{},[93,133,134],{},"图片要不要限制大小？",[93,136,137],{},"导入的图片在前端分析还是在后端分析？",[93,139,140],{},"在后端分析的话，如何设计一个上传接口，且避免自己的服务器被挤爆？",[93,142,143],{},"分析一个图片像素分布的插件、算法是不是已经有类似的库可以直接拿来用？",[93,145,146],{},"如果自己手写一个分析像素值的功能，如何设计采样的步长最合理，最高效？",[93,148,149,153],{},[150,151,152],"del",{},"不会已经有AI可以直接替代我这个产品了吧？","（想到这里，我狠狠的打了自己一个大嘴巴子！想起了以前各种没出世的小产品，我决不能再找到一个理由不去完成这个产品）",[11,155,156],{},"构思到这里，我已经可以在脑子里完整的走完【生成像素LOGO】这个功能。",[11,158,159],{},"这算是一个产品经理立项的过程了，先聆听客户需求-> 再分析和拆解-> 以一个产品的形态实现客户的需求-> 梳理成文档发给研发部门或开项目启动会",[11,161,162],{},"后面可能还会有交底、反交底、UI评审、测试用例评审等等会议，这里出于产品本人即是UI又是开发，在大家的一致赞同下就跳过了。",[15,164,165],{"id":165},"技术栈选择",[11,167,168],{},"围绕着这些要实现的功能，我作为一个开发，首先想到了两种方向：",[11,170,171],{},"第一个是原生dom。",[11,173,174],{},"没错，在这个卷虚拟dom卷的没边儿的年代，我还能想到用原生dom来实现这个功能，实在是不忘初心，值得一个点赞和关注。",[11,176,177],{},"绘制方格、鼠标事件、控制涂色、导出图片，这些看起来都不是问题。",[11,179,180],{},"问题是：怎么控制这多dom一起缩放和拖拽？",[11,182,183],{},"由于感觉实现起来比较繁琐，不够优雅，加上这方面没有经验，以免被不能解决的问题卡住。",[11,185,186],{},"我开始思考第二个方向：Canvas。",[11,188,189],{},"先找别人做好的轮子。",[191,192,193,196,199],"ol",{},[93,194,195],{},"Fabric",[93,197,198],{},"Konva",[93,200,201],{},"Pixi",[11,203,204,205,209],{},"在经过不长时间的google之后，我分别尝试了这三个插件，且看到了一个关于这种canvas库的性能对比网站。最终选择了",[53,206,198],{"href":207,"rel":208},"http://konvajs-doc.bluehymn.com/docs/index.html",[57],"。",[11,211,212],{},"因为它内置了图层、图形、选择、变形、拖转、鼠标事件、导出图片/json等常用功能，比较是最贴合我的需求的，并且中文文档和英文的Api文档还算友好。",[11,214,215],{},"关于性能，这是一个在技术选型时经常提到的问题。但事实就是，不是每个产品的量级都会发展到那么大，你在考虑几万、几十万、几千万用户或者多么多么复杂的渲染场景的时候，却连第一个真实用户都还没有？更何况我这是个没人用的工具(⊙︿⊙)",[11,217,218],{},[219,220,221],"strong",{},"为不存在的用户绞尽脑汁的进行性能优化，不如先为第一个用户实现主体功能",[11,223,224],{},"毕竟后续的优化也是KPI嘛",[11,226,227],{},"解决了核心库的选择，剩下的就是围绕项目搭建所用的技术了",[229,230,231],"h3",{"id":231},"前端",[11,233,234],{},"前端技术的选择，秉承着用新不用旧的原则，全部用最新的技术栈，也不考虑兼容问题。所以我选择了以下技术：",[90,236,237,245,253,261,268,275],{},[93,238,239,244],{},[53,240,243],{"href":241,"rel":242},"https://cn.vuejs.org/",[57],"Vue"," 3.x",[93,246,247,252],{},[53,248,251],{"href":249,"rel":250},"https://router.vuejs.org/zh/",[57],"Vue-router"," 4.x",[93,254,255,260],{},[53,256,259],{"href":257,"rel":258},"https://cn.vitejs.dev/guide/",[57],"Vite","4.x",[93,262,263],{},[53,264,267],{"href":265,"rel":266},"https://pinia.vuejs.org/",[57],"Pinia",[93,269,270],{},[53,271,274],{"href":272,"rel":273},"https://www.tailwindcss.cn/docs/installation",[57],"TailwindCss",[93,276,277],{},[53,278,198],{"href":207,"rel":279},[57],[229,281,282],{"id":282},"后端",[11,284,285],{},"既然是大前端，肯定优先选择Node，尽量把JS玩明白。",[11,287,288],{},"因为它的应用场景不光是页面或者Api服务，还包括客户端、命令行、各类编辑器插件、某些写作软件的插件、浏览器插件、爬虫、自动化等等。熟练后，使用范围非常广，可玩性非常强。",[11,290,291],{},"并且，司以为，业务层注重的应该是业务逻辑、思维逻辑，并不是你选了什么编程语言做后端，就可以避免屎山代码，就比别的语言优雅。",[11,293,294],{},"所以Node作为一个链接数据库和前端/客户端，提供一定量的稳定服务的编程语言，对我来说足矣。",[11,296,297,298,209],{},"再插一嘴选TS还是JS的问题，除了核心问题和选什么语言一样外。在工作上保持一定的挑战性对个人的成长很有帮助，所以建议还想成长的前端er，无脑选TS，",[219,299,300],{},"走在薪资的前沿总是没有错的",[11,302,303],{},[304,305,306],"em",{},"Node版本选择：",[11,308,309],{},"我目前是16.20.2 ，16的稳定版， 18、 20 也是可以的，我记得Vite5已经不支持低于18的版本，所以家里有条件的可以直接从20用起了。（偶数版本是稳定版）",[11,311,312],{},[304,313,314],{},"Node框架选择：",[11,316,317,322,323,328],{},[53,318,321],{"href":319,"rel":320},"https://docs.nestjs.cn/",[57],"Nest"," ：Node框架的不二之选。搭配",[53,324,327],{"href":325,"rel":326},"https://www.tslang.cn/",[57],"TypeScript","使用，既能学习到后端业务如何设计，又能参考目录接口如何设计，又能感受和使用TypeScript，一石三鸟。",[11,330,331],{},[33,332],{"alt":35,"src":333},"https://img.zzao.club/article/202411191426109.png",[229,335,336],{"id":336},"服务器",[11,338,339,344],{},[53,340,343],{"href":341,"rel":342},"https://www.aliyun.com/daily-act/ecs/activity_selection?spm=5176.28508143.J_ahRFo5CaAe_asSOaCgS4J.7.5421154akYLvYx&scm=20140722.M_169282029.P_163.MO_2275-ID_10071131-MID_10071131-CID_30876-ST_9367-V_1",[57],"阿里云服务器","，前一阵搞活动99元/年，还是很划算的。",[11,346,347],{},"牵扯到的备案、域名、Nginx+Https，后续上线篇会展开讲讲。",[229,349,350],{"id":350},"部署方式",[11,352,353],{},[53,354,357],{"href":355,"rel":356},"https://www.docker.com/",[57],"Docker",[11,359,360],{},"用docker跑nginx、redis、mysql，这样本地和服务器环境能尽量保持一致，还能提前验证问题。不至于本地开发完没问题，部署上去又出现各种问题",[11,362,363],{},"至此，一个从产品立项、到技术选型、最后到运维部署的流程已经梳理完成。下一步就是具体实现各个功能了！",[15,365,366],{"id":366},"小结",[11,368,369],{},"源于一个突发的灵感，在纠结了它到底对谁有用之后，我决定先上手实现它。",[11,371,372],{},"也许功能对其他人没用，但记录和写作的过程对我很有用。",[11,374,375],{},"如果对新入行的同学，也能有一点点启发和带动作用，这将是我继续写下去的最大动力。",[11,377,378],{},"喜欢的朋友可以点个关注，继续追更后续的技术篇。有任何前端问题想要咨询的同学，也欢迎加VX：523748995，我会尽力为你解答。",[11,380,381],{},"感谢你的阅读，我是枣把儿~",{"title":35,"searchDepth":383,"depth":383,"links":384},2,[385,386,387,388,389,396],{"id":17,"depth":383,"text":17},{"id":26,"depth":383,"text":26},{"id":73,"depth":383,"text":73},{"id":85,"depth":383,"text":85},{"id":165,"depth":383,"text":165,"children":390},[391,393,394,395],{"id":231,"depth":392,"text":231},3,{"id":282,"depth":392,"text":282},{"id":336,"depth":392,"text":336},{"id":350,"depth":392,"text":350},{"id":366,"depth":383,"text":366},"2023-12-06T00:00:00.000Z","md",null,"2025-08-19T00:00:00.000Z",{"published":402,"category":403},"2023-12-11 00:00:00","早早集市",true,"/post/daily/when-a-developer-want-to-dosomething","---\npublished: 2023-12-11 00:00:00\nauthor: 枣把儿\ntitle: 当一个程序员突然想做一款产品\ndescription: 你一定有很多瞬间，脑子诞生了一个有趣的产品雏形，但因为种种原因搁浅，最终没有落地。\ncategory: 早早集市\ntags: [\"产品\", \"早早集市\", \"生活\"]\ndate: 2023-12-06\nlastmod: 2025-08-19\nshowTitle: 当一个程序员突然想做一款产品\n---\n你一定有很多瞬间，脑子诞生了一个有趣的产品雏形，但因为种种原因搁浅，最终没有落地。\n\n## 引言\n\n在一个普普通通的周二，我又㕛叒一次萌生了和许多程序员一样的想法：做一款自己的产品。\n\n鉴于以前的想法 99% 都变成了一个一个不能用的 demo，还有 1% 在反复起步，这次我痛定思痛，决心一定要好好“架构”一番！！\n\n## 起步\n\n说干就干。我熟练的打开Obsidian，打开Excalidraw 新建绘图，开始设计网站的草图，然后在一旁开始罗列想用的技术栈、表结构、功能点。一阵奋笔疾书后，一个网站的大概样子已经尽收我眼底！\n\n![](https://img.zzao.club/article/202411191426107.png)\n\n正当我心中一阵窃喜时，我突然意识到我还缺一个Logo。\n\n是的，这是一个非常严重的问题。虽然我还没有新建文件夹，但是这种建成后必定一流的网站要有一个配得上它的一流Logo才对。不行，我一定要为它找一个称心如意的Logo才行。但是今天已经快下班了，我只能明天再搞了。\n\nok，愉快的第二天马上就来了。\n\n我开始从AIGC和自主设计两个方向寻找适合我的Logo，很快啊，AIGC被我排除了，因为它感觉就像一个不合格的Tony老师一样，不适合我这种精益求精的态度。\n\n于是我打开b站，开始观摩几个设计领域的大up主，看看能不能吸取到一星半点的灵感（当然是只感受到了nb二字）。突然，我发现了一个[搬运自YouTube的视频](https://www.bilibili.com/video/BV13U4y1u7zB/?spm_id_from=333.999.0.0\\&vd_source=cf9b3c8faa56d0c64b09a55be382ef80)，再结合之前我在[pinterest](https://www.pinterest.com/)看到的让我眼前一亮的像素风格，就决定是你了！！\n\n![](https://img.zzao.club/article/202411191426108.png)\n\n## 再起炉灶\n\n我打开了我珍藏已久的Adobe AI , 想尝试按视频里的操作自己设计一番，但无奈它提示我因为某些原因不能继续使用了，并且只给了我退出软件和购买软件两个选项。我在微信提示余额不足后咬牙选择了退出。\n\n既然如此，我只能自己先实现一个生成LOGO的工具了。（是的，像擦出爱情的火花一样突然）\n\n（至于最开始是想做什么产品，我先按下不表）\n\n## 功能构思\n\n在分析了视频里的操作方式后，先在脑子构思一些这个小工具具体实现的功能：\n\n*   一个可拖动的画布\n*   一个可绘制的区域，区域内由带有黑色边框的小方格组成，并且可缩放可拖动。\n*   小方格可以设置数量，如：100x100，单个方格可以设置大小，如格尺寸为：5x5\n*   绘图模式下，鼠标可在绘图区域的小方格上点击并滑动，小方格会被设置对应的颜色\n    - 颜色可配置，并且方便切换：比如tab键自动轮换预制的几种颜色\n*   绘制后，图片可导出\n    *   导出时，去除黑色边框？\n    *   导出时，去除未涂色的方格？\n    *   导出时，批量设置未涂色的方格颜色？\n    *   导出时，压缩图片？\n*   导入一个图片，分析图片的像素值，自动绘制到画布上\n    *   图片要不要限制大小？\n    *   导入的图片在前端分析还是在后端分析？\n    *   在后端分析的话，如何设计一个上传接口，且避免自己的服务器被挤爆？\n    *   分析一个图片像素分布的插件、算法是不是已经有类似的库可以直接拿来用？\n    *   如果自己手写一个分析像素值的功能，如何设计采样的步长最合理，最高效？\n    *   ~~不会已经有AI可以直接替代我这个产品了吧？~~（想到这里，我狠狠的打了自己一个大嘴巴子！想起了以前各种没出世的小产品，我决不能再找到一个理由不去完成这个产品）\n\n构思到这里，我已经可以在脑子里完整的走完【生成像素LOGO】这个功能。\n\n这算是一个产品经理立项的过程了，先聆听客户需求-> 再分析和拆解-> 以一个产品的形态实现客户的需求-> 梳理成文档发给研发部门或开项目启动会\n\n后面可能还会有交底、反交底、UI评审、测试用例评审等等会议，这里出于产品本人即是UI又是开发，在大家的一致赞同下就跳过了。\n\n## 技术栈选择\n\n围绕着这些要实现的功能，我作为一个开发，首先想到了两种方向：\n\n第一个是原生dom。\n\n没错，在这个卷虚拟dom卷的没边儿的年代，我还能想到用原生dom来实现这个功能，实在是不忘初心，值得一个点赞和关注。\n\n绘制方格、鼠标事件、控制涂色、导出图片，这些看起来都不是问题。\n\n问题是：怎么控制这多dom一起缩放和拖拽？\n\n由于感觉实现起来比较繁琐，不够优雅，加上这方面没有经验，以免被不能解决的问题卡住。\n\n我开始思考第二个方向：Canvas。\n\n先找别人做好的轮子。\n1.  Fabric\n2.  Konva\n3.  Pixi\n\n\n在经过不长时间的google之后，我分别尝试了这三个插件，且看到了一个关于这种canvas库的性能对比网站。最终选择了[Konva](http://konvajs-doc.bluehymn.com/docs/index.html)。\n\n因为它内置了图层、图形、选择、变形、拖转、鼠标事件、导出图片/json等常用功能，比较是最贴合我的需求的，并且中文文档和英文的Api文档还算友好。\n\n关于性能，这是一个在技术选型时经常提到的问题。但事实就是，不是每个产品的量级都会发展到那么大，你在考虑几万、几十万、几千万用户或者多么多么复杂的渲染场景的时候，却连第一个真实用户都还没有？更何况我这是个没人用的工具(⊙︿⊙)\n\n**为不存在的用户绞尽脑汁的进行性能优化，不如先为第一个用户实现主体功能**\n\n毕竟后续的优化也是KPI嘛\n\n解决了核心库的选择，剩下的就是围绕项目搭建所用的技术了\n### 前端\n\n前端技术的选择，秉承着用新不用旧的原则，全部用最新的技术栈，也不考虑兼容问题。所以我选择了以下技术：\n\n*   [Vue](https://cn.vuejs.org/) 3.x\n*   [Vue-router](https://router.vuejs.org/zh/) 4.x\n*   [Vite](https://cn.vitejs.dev/guide/)4.x\n*   [Pinia](https://pinia.vuejs.org/)\n*   [TailwindCss](https://www.tailwindcss.cn/docs/installation)\n*   [Konva](http://konvajs-doc.bluehymn.com/docs/index.html)\n\n### 后端\n\n既然是大前端，肯定优先选择Node，尽量把JS玩明白。\n\n因为它的应用场景不光是页面或者Api服务，还包括客户端、命令行、各类编辑器插件、某些写作软件的插件、浏览器插件、爬虫、自动化等等。熟练后，使用范围非常广，可玩性非常强。\n\n并且，司以为，业务层注重的应该是业务逻辑、思维逻辑，并不是你选了什么编程语言做后端，就可以避免屎山代码，就比别的语言优雅。\n\n所以Node作为一个链接数据库和前端/客户端，提供一定量的稳定服务的编程语言，对我来说足矣。\n\n再插一嘴选TS还是JS的问题，除了核心问题和选什么语言一样外。在工作上保持一定的挑战性对个人的成长很有帮助，所以建议还想成长的前端er，无脑选TS，**走在薪资的前沿总是没有错的**。\n\n*Node版本选择：*\n\n我目前是16.20.2 ，16的稳定版， 18、 20 也是可以的，我记得Vite5已经不支持低于18的版本，所以家里有条件的可以直接从20用起了。（偶数版本是稳定版）\n\n*Node框架选择：*\n\n[Nest](https://docs.nestjs.cn/) ：Node框架的不二之选。搭配[TypeScript](https://www.tslang.cn/)使用，既能学习到后端业务如何设计，又能参考目录接口如何设计，又能感受和使用TypeScript，一石三鸟。\n\n\n![](https://img.zzao.club/article/202411191426109.png)\n\n### 服务器\n\n[阿里云服务器](https://www.aliyun.com/daily-act/ecs/activity_selection?spm=5176.28508143.J_ahRFo5CaAe_asSOaCgS4J.7.5421154akYLvYx&scm=20140722.M_169282029.P_163.MO_2275-ID_10071131-MID_10071131-CID_30876-ST_9367-V_1)，前一阵搞活动99元/年，还是很划算的。\n\n牵扯到的备案、域名、Nginx+Https，后续上线篇会展开讲讲。\n\n### 部署方式\n\n[Docker](https://www.docker.com/)\n\n用docker跑nginx、redis、mysql，这样本地和服务器环境能尽量保持一致，还能提前验证问题。不至于本地开发完没问题，部署上去又出现各种问题\n\n至此，一个从产品立项、到技术选型、最后到运维部署的流程已经梳理完成。下一步就是具体实现各个功能了！\n\n## 小结\n\n源于一个突发的灵感，在纠结了它到底对谁有用之后，我决定先上手实现它。\n\n也许功能对其他人没用，但记录和写作的过程对我很有用。\n\n如果对新入行的同学，也能有一点点启发和带动作用，这将是我继续写下去的最大动力。\n\n喜欢的朋友可以点个关注，继续追更后续的技术篇。有任何前端问题想要咨询的同学，也欢迎加VX：523748995，我会尽力为你解答。\n\n感谢你的阅读，我是枣把儿\\~\n\n\n",{"title":5,"description":13},"post/daily/when-a-developer-want-to-dosomething",[410,403,411],"产品","生活","ryzt7Wuc0CqzQKL_ecNzCZYrU0UP2bhTgXzA48lBT68",[414,418],{"title":415,"path":416,"stem":417},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":419,"path":420,"stem":421},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005087141]