Vibe打金计划(10)：终章，打到金了。

https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.milka 最终，喵卡上线了，做为“Vibe打金计划”的第一个产品，确确实实爆到了金币，还得到了一个光荣的“原创”标记。应用的结构和机制虽然其实很简单，但自我感觉还是相当不错的。 先来简单介绍一下这个应用本身的机制吧。 --- # 喵卡应用机制 ## 数据库 由于以前打算用MySQL后来又改掉了，所以现在用的是懒猫提供的minidb插件，minidb是一个很轻量级的文档式数据库，非常适合卡片这种简单的内容。 ### 主题（卡片包） 应用中最主要的维度就是主题，也可以称为卡片包，它包含了一组N张卡片。 除了标题和说明外，其实还预留有图片、排序编号等字段。 主题其实也可以单独设置风格，只是目前还没有做到。  ### 卡片/卡面 喵卡中应用了“卡面(card-face)”的概念，也就是说卡片的正面和背面其实是一样的数据结构，都包含一个标题和一个说明。 每面都是一条单独记录，也就是说未来有可能一张卡面可以用在不同的卡或主题中，但是目前还就只是一一对应的关系。 两面对应的样式是有所不同的，正面更注重标题，背景虽然标题也是主体，但说明部分比正面的视觉权重要稍高一点，甚至可以溢出滚动，也就是说可以放进去不少内容。 ### 关联数据 卡片的正面和背面由关联数据关联到主题，关联数据才是决定哪个卡面与另一个卡面相对应，同时属于哪个主题的。 理论上，有可能打乱卡面和卡背做一些小游戏，或者做成“多维”的卡片，即不只是正反两面，但这需要以后去扩展了。 ## 界面 主界面去掉了一切原本计划的管理功能，比如排序删除修改等。只留下添加主题和卡片的表单。所有的内容管理，包括未来的卡片修改排序或主题的单独编辑，都会放到设置页面。 帮助界面也从原来的计划中去掉了，改成初始数据中的一个卡片包。总之对于主界面，最主要的就是尽可能减少干扰。  列表页面很适合随意浏览，你看到哪个不熟悉的内容，先想一想，然后点开看答案，或许就会印象越来越深刻了。  幻灯片的界面将来会改成计时自动翻转的方式，可以不用按键盘坐在那里就能记忆。 ## 应用 背单词是记忆闪卡的最常见的应用，但实际上这些有正反两面的卡片还有很多其他的作用，比如百科知识、历史、文学诗歌，各类知识都可以用这种形式表现。   甚至谜语，台词，冷笑话，脑筋急转弯，只要你能想到的关系到两值数据的需要记忆或隐藏一半的信息，都可以找到合适的闪卡玩法。 ## 内容 在开发这一类的应用中，其实往往被忽略的一个问题是：内容从哪里来。虽然第一版的应用是主要靠用户自己创建和输入，但毕竟太麻烦了。 所以后续的升级中会加入各种导入或批量输入的方法，也包括官方的数据（卡包），争取尽可能让大家可以方便得到可用的内容，如果能够互相分享当然就更好了。  我甚至在做一个AI提示模板，让用户可以通过提示词要求AI一次性生成大量卡片内容，导入到喵卡里就可以使用。   （截至发稿前，其实上面有的界面和功能已经做好了，估计很快就能更新上去。） ## 副产品 对了，想到之前提过MySQL、Minidb、File-pickers做的demo还没有完成，算是跳票了吧，我想再改改把它改成真正有意义的工具再说。另外还有Refly画板和提示词库等，也都等过段时间再分享吧。 另外的副产品就是由此生成的内容库了，其实我自己也在用它学习词汇，怎么说呢？自己用自己的产品还是挺习惯，学得不累：P --- # 开发历程 整个开发历程其实在12篇《Vibe打金计划》中都提过了，但是在这里还是要吐一下槽。 ### 什么“说一句话剩下的AI就帮你做好了”真的是夸张的说法。 的确有的简单功能可以得到这样的惊喜，但是如果你对产品的逻辑和技术架构完全没有概念，当AI犯健忘或糊涂的时候就完蛋了。 ## 需要不断调教的AI 除了提要求，不断的反馈信息、反复抽卡，你还需要随时调整你的思路找到最好的方法。 有时要求它给你全部的代码，有时只要一小段，有时甚至只让它给你一个思路就好。 有一次发现不知什么时候，AI把原本信息提示的功能替换成简单的console.log了，这个功能偏偏还是在我一直不想再和它同步的主应用代码里。 我是实在不想让它再乱动主应用代码了，于是我这么说: > // 显示通知 showNotification(message, type = "info") { console.log(`${type.toUpperCase()}: ${message}`); // 这里可以实现更复杂的通知系统 } >为app.js里这个函数写一个很简单的提示框，在页面上提示信息，3秒钟后自动消失。 >尽量只在这个方法之内实现功能，不要改动主程序代码太多 于是它给我最简单的修改方式，我只在这个方法里修改并加了几行样式表就解决了问题。 ## 要求单模块功能 必要的时候，就只能要求它做独立的功能，把新的功能放在新的页面上，这样才不致于改坏文件，毕竟代码一到上千行，AI就会开始有点找不到北了。 比如在开发批量输入的页面时，我是这样对AI说的： >现在所有功能已经正常，应用已经上线。请写一个新的批量卡片数据生成的功能： >* 从一个固定格式的csv文件批量导入数据生成卡片数据 >* 可以上传文件或在文本框中输入这个数据，但即使是上传文件，也可以在文本框中预览和修改。 > …… > …… > …… >* 可以用单独的页面容器设计，不需要与app.js使用同样的页头和导航中，返回链接回到主应用。 > >请完全在一个新的文件中实现这个功能，只从原来内容引入必要的方法，只在设置页面增加一个到这个页面的入口。 由于Refly有知识库的关系，其实尽管是从头开发新页面，AI还是可以找到相关的知识，而且不受其他干扰，可以更有效地拿到正确结果。 ## 内容库的生成方法 对于内容（卡片包）的填充，我是在Refly上开了一个新的聊天线程。 我先把批量添加时生成的csv格式喂给它，然后让它“手工”整理第一个列表。 在确认了格式没什么问题之后，我又让它先写一段提示： >撰写一个提示词模板，包含【主题】和【详细要求】两个用户可以自行修改的字段。然后稍微详细些说明这种数据格式的特点和要求，包括正反面通常的意义（正面用来提醒和回忆，背面是要反转才会揭示的答案），也包括对逗号（比如半角逗号的字段要用半角引号括起来）和回行的处理。同时对字数提一定的要求，不要太长，除非用户在【详细要求】中有说明。  按Claude的一贯风格，它给我写了一个巨长的Markdown提示语，在试过多个主题效果可以之后，我把这个提示词也放进了应用。  或许有一天，等AI不要钱了，或者等算力舱普及了（哪个更近一点？），我们就可以只说一个主题，然后让AI自动生成卡片库了。 ## 还有一条宝贵的经验是：Gemini可以兜底！ 虽然Gemini也有它爱钻牛角尖的坏毛病，但是实测发现，对于Claude Sonnet 4犯的迷糊毛病，Gemini 2.5 Preview可以完美地擦干净它的屁股！ 这条我就说这么一句，信不信由你，不信可以自己试试：） --- # 喵卡升级计划 ## 更好的体验 其实我最终目标是做成一款炫酷的应用，所以现在的极简风格应该只是一个开始阶段。 在未来，卡片的风格和动效只会越来越好，主题也会有更多的背景、配色甚至装饰可选。 语音和链接也是我想做的功能，不过语言的物料还是个麻烦，不知道TTS引擎到底发展成什么样了，能否在懒猫上跑得动。 ## 分享与共享 其实这些记忆信息，有时候很适合用来分享。 之前小红书上有段时间不是流行背单词或学英语么？所以我计划再开发一个生成分享资源的形式，比如把卡片导出成漂亮的单独页面或列表，你随时可以把你的知识点生成一张图片分享到社交媒体去。 至于大家的共享，就只能期望有真正使用的用户之后了，或许会搞个卡包共享的网站之类，这些都是后话。 ## 更多使用场景 游戏化的测试场景一直是我想做的功能，所以在幻灯片优化好之后，我会为其加入计时计分或问答等玩法。 打印也是另一个计划中的功能，虽然纸质媒体已经不多受待见了吧，但如果能快速打印出实体的记忆闪卡，让小朋友能远离手机一会儿，大概也算是这个应用的一个功德？ --- # 相关文章 如果你对《Vibe打金计划》全系列有兴趣，以及想了解这个应用从构思到诞生的全过程，补课链接在这里： * [《Vibe打金计划之序章: 系统提示词》](https://lazycat.cloud/playground/guideline/745) * [《Vibe打金计划(1)：小白学打包应用》](https://lazycat.cloud/playground/guideline/753) * [《Vibe打金计划(2)：数据库功能测试与演示》](https://lazycat.cloud/playground/guideline/758) * [《Vibe打金计划(3)：一二三，分步走》](https://lazycat.cloud/playground/guideline/806) * [《Vibe打金计划(4)：新手调试一路通》](https://lazycat.cloud/playground/guideline/814) * [《Vibe打金计划(5)：懒猫minidb插件》](https://lazycat.cloud/playground/guideline/822) * [《Vibe打金计划(6)：怎样更有效地使唤AI》](https://lazycat.cloud/playground/guideline/843) * [《Vibe打金计划(7)：lzc-file-pickers插件》](https://lazycat.cloud/playground/guideline/844) * [《Vibe打金计划(8)：24小时开发原创应用?!》](https://lazycat.cloud/playground/guideline/869) * [《Vibe打金计划(9)：可爱又可恨的AI酱》](https://lazycat.cloud/playground/guideline/874) * [《Vibe打金计划(10)：终章，打到金了。》（本篇）](#) - * [《Vibe打金计划 番外篇:歪路子入门》](https://lazycat.cloud/playground/guideline/754) * [《边画边体验：用SVG-Edit绘制应用图标》](https://lazycat.cloud/playground/guideline/818) 另外在本系列几乎全程使用了Refly应用，同时表示感谢： https://appstore.lazycat.cloud/#/shop/detail/iamxiaoe.lzcapp.refly 后续的应用开发我会写单独攻略，还请到[喵爸联萌](https://lazycat.cloud/playground/user-profile/319/dynamic)的个人信息页中点一下“关注”🫶。

保姆级教程：三步搞定「懒猫微服 + Apple TV + Infuse」，打造属于你的丝滑个人影院

https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.shell.files ### 引子：在流媒体时代，我为什么还需要一个“私人片库”？ 在正式开始这篇教程前，我想先聊聊我的个人观影需求。因为你可能会问，现在看电影的方式这么多，为什么还要多此一举？ 这恰好是问题的核心。目前，我的观影方式大致分为三层，每一层都对应着不同的场景和需求。 #### 第一层需求：便捷与快速，主打一个“搜完即看” 这是最轻量级的方式。比如，我会在我的安卓电视上安装夸克网盘。恰好 88VIP 赠送了夸克的会员，虽然等级不是最高的，但容量足够，而且资源检索起来非常方便。 我的流程通常是：在 Telegram 的资源分享群组里搜索一部电影，找到夸克网盘的链接，一键保存到自己的网盘里。然后，直接在电视上打开夸克客户端播放。整个过程几乎只需要一两步操作，体验非常接近流媒体。当然，其他拥有 TV 客户端的网盘也可以实现类似的效果，比如爱优腾对应的TV 客户端。 #### 第二层需求：生态与品质，享受“官方正版”的丝滑 如果你拥有 Apple TV，那么体验会更上一层楼。 Apple TV 通过 HDMI 连接电视，把它变成一个纯粹的高性能显示器，而核心则由强大的 TVOS 系统驱动。它的芯片性能强悍（与 iPhone 13 Pro 同款的 A15 仿生芯片），播放 4K 高清视频、运行各类应用都游刃有余。你可以在它的 App Store 里安装 YouTube、Netflix（奈飞）。 我朋友也曾分享给我 Apple TV+ 的会员，里面的原创剧集品质相当不错。这一整套方案，代表了当前流媒体观影的顶级体验。 #### 第三层需求：收藏与回味，打造“属于我”的数字影库 那么，既然已经有了以上两种便捷的方式，为什么我还需要第三种呢？ 因为总有一些电影，是值得反复观看和珍藏的。 我会通过下载的方式，收藏一些我个人钟爱的 4K 高清电影，比如《黑客帝国》系列、《教父》系列，或是那部看了无数遍的《肖申克的救赎》。对于这些影片，我的需求不再是“看过”，而是希望能随时点开，精准地跳到某个我钟爱的片段，细细品味。 这时，无论是依赖时效性不强的网盘分享，还是在版权库里随时可能下架的流媒体平台，都无法给我那种“完全拥有”的掌控感和安全感。 这，就是我的第三层需求——一个属于我自己的、可永久珍藏的、高品质的私人媒体库。 而我们今天的主角 「懒猫微服 + Infuse」 组合，正是为了完美满足我这个“收藏家”的需求而生的。它将为我们那些珍爱的影片，提供一个稳定、美观且能随时访问的家。 ### **保姆级教程：三步搞定「懒猫微服 + Apple TV + Infuse」** #### 一、准备工作 在开始之前，请确保你已拥有： 1. **硬件：** 一台 Apple TV 2. **软件：** - 在 Apple TV 上通过 App Store 安装 **Infuse**（免费版已足够完成基础功能，推荐体验更佳的 Pro 版）。 - 在你的电脑（Mac/Windows）上安装 **懒猫微服客户端**。 #### 二、核心配置流程（全程重点） ##### **第一步：从「懒猫微服」获取 SMB 连接信息** 这是整个流程中最关键的一步，我们需要拿到打开你云端媒体库的“钥匙”。 1. 打开你电脑上的懒猫微服客户端。 2. 打开「应用」中「懒猫网盘」 找到「扩展」-> 「网络服务」-> SMB，你会看到系统为你生成好的专属连接信息。  记下或放在手边，我们马上就要用到这三个参数：域名、用户名、密码。 ##### **第二步：在 Apple TV 的「Infuse」中添加媒体源** 现在，我们来到电视前，拿起 Apple TV 的遥控器。（本教程以 macOS 版 Infuse 客户端截图为例，Apple TV 上的操作流程与界面几乎完全一致） 1. 打开 Infuse 应用。 2. 在主界面「文件」-> 「新增文件来源」，选择 “添加文件” 或 “添加共享”。 3. 在「添加共享」列表中，选择服务类型为 **SMB**。    1. 接下来，你将看到一个信息填写页面。在这里，我们需要将第一步获取的“钥匙”填进去： - **名称：** 可以随意填写，方便自己识别即可，例如 “我的懒猫影院”。 - **地址：** 完整地填入你在上步里看到的 **地址**。(这里建议选择「内网服务」下的「域名」) - **用户名：** 填入你的 「用户名」。 - **密码：** 填入你的 「密码」。 填写完毕后，点击“保存”或“连接”。Infuse 会开始连接你的懒猫网盘，并自动扫描里面的视频文件，抓取电影海报和信息。稍等片刻，一个漂亮的海报墙就会呈现在你眼前。  ##### **第三步：上传与欣赏** 配置是一次性的。从现在开始，你的工作流就变得极其简单了： 1. 在电脑上打开懒猫微服客户端。 2. 将下载好的电影、剧集等视频文件，直接拖拽上传到懒猫网盘中。  回到客厅，打开 Apple TV 上的 Infuse，它会自动刷新媒体库，你刚刚上传的影片已经带着精美的海报在那里等你了。点击播放，开始享受吧！🍿 #### 三、进阶实用技巧（让体验更上一层楼） - **关于字幕：** 为了让 Infuse 自动加载外挂字幕，请确保字幕文件（.srt, .ass 等）与视频文件的**主文件名完全相同**，并放在同一目录下。例如：`我的电影.mkv` 和 `我的电影.srt`。 - **海报识别错误怎么办？** 偶尔 Infuse 可能会识别错影片。别担心，在 Infuse 中，用遥控器长按错误的影片封面，在弹出的菜单中选择“编辑元数据”，你可以手动搜索正确的影片名称来修正它。 - **网络建议：** 为了流畅播放高码率的 4K HDR 影片，建议将 Apple TV 通过**有线网络**连接到你的路由器，这比 Wi-Fi 更稳定。 #### 总结 通过以上简单的三步，我们就成功地将懒猫微服强大的家庭私有云存储和 Infuse 出色的播放体验结合在了一起，打造了一个真正属于自己的、简单易用且美观的家庭影院系统。 这套方案最大的魅力在于它的“零维护”，你再也不用关心硬盘空间、文件格式和复杂的网络设置。你要做的，仅仅是收藏你热爱的影片，然后在沙发上享受它。 现在，轮到你来动手试试了！

自由钢琴：零门槛的在线音乐创作与演奏平台

**自由钢琴 (AutoPiano.cn)** 是一款创新性的网页版虚拟钢琴工具，通过极简的字母谱语法系统和丰富的社区曲库，让音乐爱好者无需乐理基础即可轻松弹奏经典曲目，并支持原创乐谱分享。 https://appstore.lazycat.cloud/#/shop/detail/xyz.mxue.autopiano --- ### **核心功能亮点** #### 1. **极简演奏体验** - **键盘映射**： - 白键：字母 `A-S-D-F-G-H-J` 等（对应音符 `C4-B4`） - 黑键：`Q-W-E-R-T-Y-U`（需配合 Shift 键） - 特殊和弦：红键 `[abc]`（同时按下多个键）  #### 2. **独创字母谱系统** - **语法规则**： ```markdown # 基础语法（初级） - 单键：`s` (白键) / `W` (黑键) - 连续音符：`sshhjih`（《小星星》片段） - 和弦：`[abc]`（三键齐按） - 快速连奏：`(abc)` # 进阶语法（精确控制） - 小节线：`|` - 时值标记： 四分音符 `q_1` / 八分音符 `h_2_` / 十六分音符 `c__1` ``` - **场景示例**： 《生日快乐》只需输入：`OOPO SA | OOPO DS | OOHF SAP | GGF SDS` #### 3. **开放式乐谱生态** - **提供各种曲库的弹奏乐谱，快速上手**： - 热门入门：《祝你生日快乐》《小星星》《新年好》 - 流行金曲：《晴天》《青花瓷》《告白气球》《天空之城》 - 国际经典：《We Wish You a Merry Christmas》《卡农 D大调》   - **难度分级**：曲目标注“困难度”，从《新年好》到《卡农》渐进式学习。  - **创作投稿**： - 用户可提交原创乐谱（需填写乐谱名、作者、邮箱）  #### 4. **演奏播放展示** - **可播放流行歌曲，并自动展示当前按键**：根据按键节奏、位置慢慢学习掌握歌曲弹奏  ---  ### **应用场景** - **音乐启蒙**：儿童通过字母谱快速理解旋律结构。 - **休闲娱乐**：上班族用键盘弹奏《千与千寻》减压放松。 - **教学工具**：教师生成简易乐谱讲解基础乐理。 - **创作者实验场**：作曲家试用新旋律后一键投稿分享。 --- ### **设计哲学** > *“生活的乐趣不夸张，我心中的欢乐通过音乐让全世界感知。”* 产品以 **“零挫败感”** 为核心： - 界面无复杂按钮，打开网页即弹奏。 - 错误提示友好（如“注意区分大小写（黑白键）”）。 - 语法说明可视化，对照表清晰展示映射规则。 --- > **一句话总结**：从按下第一个字母键到完成《卡农》演奏，自由钢琴让每个人成为“指尖上的作曲家”。

懒猫游戏首发，快来娱乐区和小伙伴组一把紧张又刺激的无名杀

 作为一款集生产力与娱乐为一身的懒猫微服怎么能少的了娱乐呢？ 无名杀作为古风游戏区开源界扛把子（笔者瞎说的），也是很荣幸的作为第一款上线懒猫微服娱乐区的“3A”（笔者瞎说的）大作上线了 。 https://appstore.lazycat.cloud/#/shop/detail/lzc.game.noname 首先就是在懒猫应用商店娱乐区将应用安装到你的盒子中，安装完成后打开游戏。  能看到无名杀有很丰富的玩法，像经典的身份，国战和对决以及挑战模式，不仅有斗地主、单挑还有非常新颖的战棋、塔防、炉石和乱斗玩法，这众多的玩法就足矣让我眼花缭乱了。  当然近 300+ 的武将也是十分震撼的，我已经沉迷于挑选三国美女中无法自拔了…  当然三国的帅哥也挺好看的，但是美女武将请让我先选，嘿嘿嘿…  不过但是，道理我都懂可是这佐藤雏是不是来错时代了…这不是三国吗，emmmmm，不过毕竟佐藤雏是神嘛，既然是神那穿越也就可以理解了对吧，我们不要拘谨于这点小细节。当然如果不需要某些武将的话在设置中是可以关闭的。  在设置中除了能够设置武将之外还能看到全部的卡牌，这里标准的三国杀卡牌都是比较全的，并且除了标准的技能和装备卡牌之外，看看我还发现了什么  对没错，居然还有古剑奇谭卡牌？？？虽然没看懂但我大受震撼。  稍等一下，让我快速击败他们然后我们看看联机模式（笔者战斗中…）。  好了好了让我们继续看看联机模式，基于懒猫微服强大的网络功能，在懒猫微服安装的无名杀会创建一个联机服务器，只要我们在懒猫微服的客户端里邀请好友加入盒子，就能和好友一起组队联机痛快的杀一把无名杀了，并且支持跨平台（支持 Android、IOS、Windows、MacOS、Linux 同时在线）一起畅快游玩嗷。  打开联机模式后就可以创建一个房间，等待好友连接到你的懒猫微服后打开游戏（游戏是安装在盒子里的，好友可以直接在线游玩）然后进入联机模式就能看到你创建的房间了，点击进入你的房间，然后你（房主）就可以开始游戏了。  随后就是与好友痛快的厮杀一场了。 写了这么久，都看到最后了。大家是不是应该给天真一个点赞收藏评论一键三连呢？同时也记得给开发者一个五星好评支持一下嗷，有问题也可以在懒猫应用商店反馈给开发者，开发者也会及时修复处理并提交修复给上游促进游戏可持续发展。 最后感谢无名杀开发者和开发社区的贡献，感谢他们给我们带来如此好玩的游戏。同时感谢移植的开发者小伙伴们，帮助我们实现游戏部署安装做出的适配工作。 版权声明：文章由作者原创未经许可禁止转载，文章中的部分素材来自互联网，如有侵权请联系作者进行删除。无名杀基于 GPL-3.0 license 开源版权归原作者所有，源代码地址 <https://github.com/libccy/noname>，移植 Fork 版本源代码地址：<https://gitee.com/runui/lzc-game-noname>

懒猫微服开发篇（零）：上架应用需要哪些知识

懒猫微服的可玩性在于可以让开发人员放开手脚来做一些事情，等于是提供了一个可靠的基础设施。那么理所当然我们可以把开源的知识应用到上面，比如开发或者移植应用，或者干脆部署一些好玩的东西。这在传统NAS上实现起来很困难，甚至都没有包管理工具。 我们看一看开发懒猫应用，需要什么样的知识？ 那么，开发懒猫微服的应用需要掌握哪些技能呢？ ### NPM 懒猫微服的 CLI 本质上是一个通过 NPM 全局安装的工具包，因此掌握一些基本的 NPM 使用方法是必要的。 ```bash npm install -g @lazycatcloud/lzc-cli ``` 这个工具是用 JavaScript 编写的，但如果你只是为了使用而非开发，那么并不需要掌握这门语言。当然，你也可以选择使用 pnpm 或 yarn 作为包管理工具，或者通过 NVM 来创建 Node.js 虚拟环境。 如果在 macOS/Linux 上遇到了权限不足的问题，其实不一定要使用 `sudo`。默认情况下，npm 的全局目录是 `/usr/local`，普通用户对其没有写权限。比如我们可以看到： ``` ll /usr/ total 0 drwxr-xr-x 918 root wheel 29K 6 5 14:05 bin/ drwxr-xr-x 32 root wheel 1.0K 6 5 14:05 lib/ drwxr-xr-x 417 root wheel 13K 6 5 14:05 libexec/ drwxr-xr-x 8 root wheel 256B 6 10 09:31 local/ drwxr-xr-x 230 root wheel 7.2K 6 5 14:05 sbin/ drwxr-xr-x 43 root wheel 1.3K 6 5 14:05 share/ drwxr-xr-x 5 root wheel 160B 6 5 14:05 standalone/ lrwxr-xr-x 1 root wheel 25B 6 5 14:05 X11@ -> ../private/var/select/X11 lrwxr-xr-x 1 root wheel 25B 6 5 14:05 X11R6@ -> ../private/var/select/X11 ``` 因此我们可以通过设置 npm 的全局安装目录，规避权限问题。在当前用户目录中创建一个文件夹并添加到环境变量中即可： ```bash npm config get prefix /usr/local mkdir ~/.npm_packages npm config set prefix ~/.npm_packages/ npm config get prefix /Users/home/.npm_packages export PATH=~/.npm-global/bin:$PATH ``` 开发的技能是可选的，如果你只是移植现有的应用的话，那么具备一些Docker Compose的知识就足够了，这个我们后面再说。 如果是开发原创APP的话，那么无论是Vue，React，Go，Python都有用武之地，只要是Web的应用能够本地运行或者打包成Docker就能上架商店。相信很多开发的小伙伴也会做一些Devops的事情，这部分的技能是可以完全迁移过来的。 ### Linux 很多NAS是基于FreeBSD或者Linux改的，懒猫微服是基于debian12， 虽然在设计之初是针对非专业玩家。但是后来也开放了SSH，可以做和其他Linux一样的事情，给了root用户，所以可以底层操作文件，网络，查看分区，监控，以及系统负载。 所以不是只有树莓派或者自己笔电装机才能学Linux，懒猫微服的系统重启之后会复原（除了root目录和网络设置），所以请随便折腾。 虽然有了一套很完善的图形客户端，但是相信很多专业的玩家还是更加喜欢用传统Linux的方式来看待这个微服，我管他叫做拆解系统设计。 举个例子：用 `htop` 查看负载、用 `nmtui` 配置网络、用 `lsblk` 查看磁盘分区、用 `systemctl` 设置服务自启。深度定制的系统，让我们可以完全无视内核，以及grub的这些东西。甚至连sambda，webdav这些server都不用自己安装。 ### Docker Docker好像对NAS玩家是必须的，无论是群晖，威联通。与传统NAS不一样的是，懒猫微服集成了三套docker，分别是系统组件，playground和应用商店。 playground就是我们刻板印象的Docker， 这里叫做`pg-docker`，所以需要懂一些Docker的知识，比如下载，打包，上传，还有数据卷的贡献。甚至包括Docker- compose的使用。 应用商店也是基于Docker运行的， 上架软件时有两种方式： 1. **直接打包**：这个一般用于原创应用或者移植开源无docker版本的应用。调试的时候可以使用懒猫内置的Docker Registry 的image进行测试，颇有VS code remote的风格。这个调试模式叫做devshell。 2. **Docker 镜像迁移**：一般用于已有的docker image的迁移，由于国内出海宽带不足，访问Docker经常失败。所以需要使用懒猫提供的Docker Registry 来做一个国内版本的镜像。然后再做目录的映射。 ### OIDC 这个稍稍有点跑题，前面的都是传统Devops需要的东西。这里的OIDC叫做OpenID Connect，是单点登录实现的一种。传统的认证有基于cookie的，或者基于JWT的。OIDC是后者，也是单点登录中最优雅的实现。除了OIDC之外，你可能听说过SAML，Oauth，其实也都是Single Sign-On的不同实现，而Oauth是和OpenID Connect 源同一脉，Oauth的各家实现千差万别，而OpenID Connect 既统一了规范，解决用户态的问题。换句话说OAuth 2.0只是用来授权，颁发的是`Access Token`，而对于访问者是谁还需要开发人员自己存数据库。OIDC则是引入了`ID Token`，这通常是通常是 JWT，所以认证直接请求IDP解码就好了。大致是这个流程： 下图是 OIDC 的基本流程：  #### 能够学到哪些知识： 1. 微服内部的官网看起来是根据OpenResty改的（个人推断），所以可以来复习一下nginx或者OpenResty相关的知识 2. Docker的使用，容器这几年还是挺火的，移植应用必备，甚至还支持web VNC。 3. HTTP 知识：有些情况需要对http的请求做特殊的处理，比如加一些自定义header或者cookies 4. 单点登录：微服内置了OIDC的认证，应用能够自动帮助我们申请CLIENT_ID和CLIENT_SECRET，简化了和IDP打交道的环节。 ### 总结 如果你熟悉 Web 开发、Docker 和基本的 Linux 操作，那么你已经可以快速上手懒猫微服的应用开发。无论是移植开源项目，还是开发原创 App，只要能够在本地运行或打包为 Docker 镜像，就可以顺利上架到应用商店。 懒猫微服不仅仅是一个面向普通用户的 NAS 系统，更是一块为开发者打造的自由试验田 —— 它就是一台稳定可靠的 Debian 云主机，你可以在上面尽情发挥创意与技术。 

大佬原创应用：九匠音乐使用体验

## 🤔 介绍 懒猫商店已经有很多音乐播放器，但体验下来，这款是目前最干净、简洁的。 这是社区大佬@halo_芒鸽 的原创应用，官方对于原创有奖励，好羡慕。 https://appstore.lazycat.cloud/#/shop/detail/mcloud.mg.app.jjmusic  在夜间模式下，有些按钮是看不清了，为了方便演示，我还是切回日间模式。 ## ✨ 特色功能 ### **导入音乐** 打开之后，界面非常清爽，你需要在右上角的设置，导入音乐。  选择懒猫网盘里，你存放音乐的文件夹，我只有几十首歌曲，扫描很快。 封面图我选择均显示，页面会好看些。 ### 创建歌单 在左侧可以创建歌单，标题还支持表情符号，建完排序就挺有意思的。  在歌曲右侧的3个点，可以把歌曲添加到歌单里。  音乐播放很简单，点击暂停，再次点击播放。 ## 💡 实际使用体验分享 我自己用了，真实感受如下： ### 优点满满： - ✅ **启动超快**：2几秒钟就能启动 - ✅ **界面清爽**：没有花里胡哨的装饰，专注功能本身 ### 小缺点也要说： - ❗ **功能还在扩展**：相比一些老牌工具网站，功能还不够全面 - ❗ **界面较简洁**：有些人可能觉得不够炫酷 移动端的体验还不太好，但大佬响应速度很快，新的功能还在持续迭代。 ## 🎉 总结 对于专注简洁，这个播放器绝对值得一试！ 虽然它可能不是最功能最全面的工具，但它的优势在于：**简单、纯净、实用**。 希望原创应用发展的越来越好。

TalkFlow使用初体验：去中心化的聊天工具

## 这是什么？ TalkFlow是社区大佬的一个原创应用，我们看下应用描述： 100%纯血去中心化分布式通信工具，完美适配懒猫微服硬件平台，通过懒猫微服可靠的网络穿透能力进一步提升稳定性。端到端加密聊天和群聊，军用级加密标准，内置安全模块已被应用于荷兰海军物联网设施和美国CIA通信工具等其他真实场景。独立密钥对卡包，加密状态一切清晰可见，只有你自己配置的密钥对和构建的证书可以解密数据。可与本地AI通过中继和内置SEA模块进行安全的远程通信，其中包括自然语言物联网控制器，与懒猫微服算力仓兼容。一切开源，可审计，TalkFlow非营利性项目工作组免费提供全天24小时技术和安全援助. 一句话简单概括：这是个看起来很牛X的加密聊天工具。 https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.ponzs-talkflow ## 核心功能使用 ### 1. 安装注册 打开应用，它的颜值很高，注意你要点击一下，才能进功能  初次进入时，会有个key，要记得保存在本地，只会出现1次，以后就再也看不到了。  进入之后，默认是聊天页面，是空白的，只有别人给你发消息，才会在首页看到  ### 2. 添加好友 点击左侧联系人，在右上方可以添加好友  这里可以输入对方的key，或者下方的按钮扫码  自己的二维码，可以在这里看：点击头像，右侧有二维码  在电脑端不好扫码，在手机端可以用相机，同时它也有客户端  如果想用同一个账号登录，就要用的第1步保存的key了。 对方同意后，就可以在联系人看到了  不过目前我试的消息会有一些延迟，因为节点在美国。 ### 3. ai对话 左侧的位置，集成了ai对话的功能。  目前左侧的功能还在持续迭代，大佬后续会加入无人机的支持，用去中心化网络驱动无人机，会更安全，用自然语言控制它，而不是用遥控器。 ## 总结 这是个去中心化的工具，没有任何云服务器，你的数据只会存储在本地。 大佬说，即使他去世了，只要还有人在用，它就能运行。🤣 如果你特别看重隐私，可以试下这个应用。

Vibe打金计划(9)：可爱又可恨的AI酱

如果你看过本系列之前的内容，可能会觉得Vibe coding始终不值一提，也可能会惊叹于开发竟能如此简单？ ### 但它实际上并不简单 我在分享过的工作流中（就是那个庞大的几十个节点的Refly画布），其实删除了很多无用的分支，其数量大约占到了剩余部分的1/2或2/3左右。 比如十几个问答回合之后你会发现AI完全跑偏了，比如你让它修改一个小问题发现它给你整了个巨大的调试功能，比如你纠结于它给你的每次结果都跑不通导致越描越黑…… 但始终，它是我们目前仅有的选择。 AI的功能其实还有很大的提升空间，接下来的内容就让我补完这个过程中的痛苦经历，以及从这个痛苦经历中悟出的解决办法。同时我也会延续之前开发“喵卡”应用的后续过程，希望能对你起到哪怕一点点避坑的作用。 来来来，闲言碎语不要讲，且听我表一表~~武松武二郎~~AI这个~~Bitch~~让人又爱又恨的东西。 *（注：我在“喵卡”应用的开发中始终用的是Claude sonnet 4，以下提到“AI”其实主要是指这个模型）* --- https://appstore.lazycat.cloud/#/shop/detail/iamxiaoe.lzcapp.refly # 代码质量不稳定 其实从上次说到的优化喵卡界面开始，事情就开始变得不是那么简单顺畅了。 我发现了一个Claude（或者其他AI也有）的一个比较讨厌的事实： 那就是它没事就会私自优化和重构代码，优化过程中有时就出错，加上记忆偶尔混乱，导致整个文件的功能时好好坏不稳定。然后你如果让它部分修改，它只管加不管减，最后页面可能能用，但代码超极乱…… 就……真的是在堆屎山。 加上与copilot模式有区别，在聊天式对话中，AI可能在“记忆”过程中有一些缓存空间专门存储这些代码，这些代码却又是不可见甚至会混乱的（矢量空间？），所以可能几次修改之后，你发现它给你的代码与之前有完全的不同，如果不检查就用，很可能会引起全局的混乱和没法调试的错误。 反过来说，如果你要一直追问或要求它追加修改，AI很可能犯得错更多。 比如对JS文件可能给你完全不一致且有错误的代码，或者忘记之前的某些方法又重写了新的代码；而css文件更糟糕，几乎每次有什么新的界面元素，它只会在文件末尾添加新代码，最终导致同一元素有多个重复且不同的样式块，旧的样式属性会被优先级覆盖但是始终藏在巨大的文件中。 ## 写长文件却无法维持 比如下面这个情况： 我在Vibe开发“喵卡”时，到了开发的中段（经验不足的）我才发现一个问题，就是以我对于应用第一版上线的要求，尤其是在我前一步修改了部分计划删除了一些需求的时候，其实对于后端保存临时文件之类的功能都已经不需要了，第一版本质上说已经是一个静态应用了。 但是AI只管继续完成任务，不断把新的功能甚至调试功能都加在前端主应用JS中，甚至本来可以用模板的HTML代码都直接嵌进JS的变量去用！  自始至终，完全没有提到“某些文件不再需要”、“某段代码可以删除了”之类的提示，所以如果你不细看细想，它生产过的垃圾都会变成你代码中的垃圾。 ## 严重的健忘症患者 而当一个文件写到近两千行左右（虽然让我写可能要长出五倍），AI可能开始忘记以前写好的一些方法，当修改时它会创建新的方法，经常是修改这个问题时改坏了另一个地方。 由于它不提示清理内容，于是我主动要求AI帮我判断和清理不再需要的文件： >我把现有的文件结果同步给你，请先判断一下这些文件中，根据之前的对话历史的变化，有哪些文件是不再用到可以删除的，有哪些是可以再利用的。 同时也要求拆分一些代码，以便更好维护： >是否可以拆分现有的js和css，使文件不要太长，且更易维护？但不要拆分太多，适当即可。 它的回复相当好，也相当专业，看上去也确实记得项目中的每一个文件（也可能因为我导入了文件结构）  但是在后续的开发中，它常常会忘记已经分拆了文件，在改一个功能的时候，它会把之前分拆出去的内容又重新写回到主文件中！ --- # 相爱-分手-复合 我发现这个过程很像是恋人间的关系，又爱又恨、时好时坏，在一次次的分分合合中互相磨合，最后互相理解得更多…… 啊，不行，这太变态了。 ## 难以同步 我有时会手动调整一些样式或功能之类的小地方，开始的时候每改一处都会小心翼翼地把信息同步给它，AI看上去听到了，也确认甚至提出了修改建议。这时通常我会认为它已经“知道”或“记住”了我的改动，然而往往并非如此。 在后续的修改中，它会常常“以它自己的方式”悄悄地把之前的代码写回去，导致我哭笑不得。如果不检查就使用，会发现之前改好的地方又坏了，这太糟了。 由于怕了这种情况，我也会尝试改为只让AI去修改的方式，哪怕一个样式的小修改也让它去做，还要描述好情况，指定位置，甚至解释原因。 但结果呢？几乎没有改善！ 我甚至尝试了两次与它同步新的文件，但也并不理想。 AI开始变得像一个顽固而心不在焉的家伙，回答相当不靠谱，开发进入了一种僵局。 ||| |---|--| ## 自己动手 之前我不知道是因为前后端融合还是对话太长导致了AI忆记过载之类，总之界面是越改问题越多，有时还有整体崩溃的情况。太累了。 ### 要放弃吗？不可能的。 毕竟功能开发已经相当完整了，只是样式和简单JS其实我也行的，我需要的只是调整一下心态，从指挥者变成擦屎官就好了。 于是我开始了占用了整个开发时间一半的手动调试阶段，手动整理和调试了大半的样式表，又从头开始理解整个前端代码的运行逻辑。 好在AI写代码习惯还行，变量命名很规范，必要的注释也都有，除了文件巨长之外没啥大毛病。 于是在这种情况下，我手动修改了大部分的样式和小部分的代码功能。 结果就是我与AI“分手”了，随着改动的增加，“复合”看上去越来越没有可行方法。 ## 聚焦具体问题 在漫长而痛苦的过程中，我一直在思考与AI“恢复关系”的方法，比如让它以方法函数为单位，每次只修改一小个代码块。 比如改动最大的主界面仍然由我手动控制，但某个新功能页面，就可以让它在新的模块中单独开发。 这样即使万一混乱代码积累更多，也只会堆成另一座屎山，用孙悟空的说法就是，担两座山比只担一座山舒服多了。 于是我先借由对于比较独立的设置页面提出修改，把问题先聚焦在在这个功能模块上： >下面请只针对设置页面进行一些修改，首先去掉settings-page的背景色，让其可以透出底色。然后整个settings-header都去掉，它没有实际意义。然后将每个功能的setting-card里的card-icon中的emoji小图标，移动到card-content.h4的标题文字之前，缩小一下，把card-icon容器去掉，以节省页面空间。在section-content的右上角加一个关闭按钮，关闭其实就是重新加载页面，以显示修改过的数据并刷新首页。 然后限制它只能在个文件内部修改： >好的，在我们同步所有文件之前，请先在现有的setting.js中修改，可以新建一个模块也可以修改setting.js，主要目标是完成导入和导出数据模块的功能。可能会需要有一个类似中间格式的json，希望它结构简单易懂易扩展，以后也方便把其他应用生成的内容转换过来。另外导入时要选择增量导入还是完全覆盖，导出则可以整个导出就可以了。 经过这种聚焦，代码质量开始回升，毕竟小段的代码无论对它还是对我，都是更好控制的。 ## 非线性合作 （天才的我想出了这样的标题） 由于进行了任务分拆和聚焦，后面的修改开始变的顺利多了，与AI的“复合”似乎有了些眉目。我发现我还是爱它的，它应该也还爱我。 与此同时，因为虽然我对主JS的代码进行了一些修改，但大致的逻辑其实一直没有动过。所以对于主JS的修改，我会基本上沿用手动调整，即使不会改或需要与别的文件进行联控，我也会让AI只提供“需要修改的地方”的代码片断。 由于已经看过了完整的逻辑，所以修改和替换这些代码片断对我来说还算是能做到。 “喵卡”的项目，从分拆代码到最后基本都跑通，大约经历了十来个问答回合，但是对我来说，所用的时间却和之前只由AI开发相比之下长了更久更久。  不过后来我甚至渐渐习惯了这种片段式修改的方式，因为框架只要不做修改，片断对全局的影响比起AI把整个代码重写来说要小得多。况且对于它给我的片断，我都是在能够自己理解并检查修改后才实际部署的。 --- # 尝试复合 常言道破镜难重圆，我自己摸索出的“非线性合作”方式虽然可以短期解决眼前的问题，让项目进行下去，但是可以预见未来再全部交回给AI，重新做甩手掌柜的可能性越来越低。 所以还是得想办法与AI酱复合。 同样与恋爱关系相比的话，复合的前提是更多的相互理解，与重建相互间的信任。 好歹也用AI这么久了，该踩的坑都踩过了，该擦的屁股也擦过了，想继续在一起的话不让步是不行的。 ## 避免健忘 完全避免AI健忘是不可能的，但AI作为预测工具，其预测的根本还是基于你提供的物料。那么有没有一种可能，正是你提供的过多物料，包括聊天线程太长，才导致了它思维混乱？ 解决的办法也很简单，开始新的聊天线程最方便，但是我不太想用，毕竟之前的线程完整地表现了所有的开发逻辑，也体现了很多BUG及解决方式，如果重新开始，我没有把握它不会犯以前的问题，比如重新给我加入Service Workers。 那么剩下的就是减少物料了，我从对话中去掉了很多多余的参考。比如minidb的使用很简单，而且一直没有出什么错，于是我把相关的资料从参考中去掉了；再比如打包配置文件，其实它们一直存在在列表中，而且已经稳定，于是也减掉。 经过减少“垃圾食品”，AI的记忆力明显恢复，代码质量肉眼可见的回升了。 ## 避免过度优化 由于对需求的理解经常跑偏，AI有时会提出很奇葩的解决方案。 比如一个事件绑定的小问题，在桌面端当窗口缩放，有一些渲染难以靠CSS解决，所以需要重绘整个页面；而在移动端，软键盘打开时实际上窗口会被缩放，于是就激活了页面重绘，导致软键盘又收了回去，无法在表单中添加新的内容，最终发现其实就是判断下设备加两行代码的问题。 但一开始，AI居然给我提供了一个洋洋洒洒上百行的方案，包括专门检查每个事件的方法。 这个问题的解决过程是，我在尝试它的方法不行后，想起来在分析错误的环节里AI提到过窗口缩放会导致软键盘异常，于是自行寻找每个改变窗口大小的方法，以及寻找window.resized的事件监听。找到怀疑的地方后提供给它，询问是否这个问题，果然在我提之后它才意识到，问题迎刃而解。 再比如导出和导入时，本来很稳定的数据结构导出后无法导入，或导入后找不到。原因是minidb的记录识别字段是_id，AI编程时却使用了id。这个本来只是搜场后改改的问题，AI却给我整出了导出前格式判断、导入前格式判断、各种动态检查，甚至把创建数据中用到的每个id都转换成_id。 最后还是我发现问题，是minidb不允许自己设置_id，并提义AI修改后才顺利解决。  ## 利用传统工具 上述id问题的解决方法，是逐个修改和统一变量名，导致变动又多又杂。 AI能给我的方法，是在回复中包含每一个错误的变量名，然后指示我找到并修改。如果遵照它的方法，必然要多花费大量的时间。 其实后来我的方法是在代码编辑器中搜索错的变量名，手动改一下就好了…… 再比如几次,同页上有多项内容要修改，可按AI的推荐修改后却不知哪里错了，无法运行下去。 于是我打开git中之前某次功能稳定的提交，与现有文件对比，就知道具体改了哪些地方，这样只要逐个判断修改过的代码块是否是产生问题的根本，然后把看上去没问题的代码保留，把怀疑有错的地方恢复，测试个几下后搞定。 --- 最后需要声明一下：以上的绝大部分内容，都是我个人摸索的经验，不一定代表完全有效，每个人也有每个人习惯的方法，不能统一而论。但理论上，使用这些思路是有一定机率可以提高你的AI输出质量并提高效率的。 正如恋爱脑一发作人往往会变得盲目，使用AI也不要拘泥于凡事都靠AI，人类自己的敏锐与直觉是AI不具备的，很多传统的工具也往往比AI有用。打开思路，不执着、不纠结，或许才是玩转AI更好的方式。 《Vibe打金计划》可能会在下一篇后终结，也可能会延续，谁知道呢？ 如果你对《Vibe打金计划》全系列有兴趣，补课链接在这里： * [《Vibe打金计划之序章: 系统提示词》](https://lazycat.cloud/playground/guideline/745) * [《Vibe打金计划(1)：小白学打包应用》](https://lazycat.cloud/playground/guideline/753) * [《Vibe打金计划(2)：数据库功能测试与演示》](https://lazycat.cloud/playground/guideline/758) * [《Vibe打金计划(3)：一二三，分步走》](https://lazycat.cloud/playground/guideline/806) * [《Vibe打金计划(4)：新手调试一路通》](https://lazycat.cloud/playground/guideline/814) * [《Vibe打金计划(5)：懒猫minidb插件》](https://lazycat.cloud/playground/guideline/822) * [《Vibe打金计划(6)：怎样更有效地使唤AI》](https://lazycat.cloud/playground/guideline/843) * [《Vibe打金计划(7)：lzc-file-pickers插件》](https://lazycat.cloud/playground/guideline/844) * [《Vibe打金计划(8)：24小时开发原创应用?!》](https://lazycat.cloud/playground/guideline/869) ……发现由于这个漫长的开发过程，我似乎已经成了Refly的攻略专业户，但是推荐这个好用的工具再多也不嫌过分，希望大家都可以多用。

写给小白的移植指南(一)：如何移植网站应用到懒猫，爆金币

和懒猫的结缘，是我在X上闲逛时，无意中刷到了王总的信息流。 于是翻着他的blog，一篇篇刷下去，很吸引人，尤其是通宵敲代码的那些经历，让我共鸣了。 于是参加抽奖活动，居然中了个充电器。 在大佬坚持不懈的安利下，我在5.18买了个猫。 他说移植一个应用，奖励100元，如果是原创应用，奖励更多。 经过一个多月的努力，终于让我薅回来了。 今天复盘一下移植app的经历，希望对大家有帮助。 ## 先说说我的痛点 - 我完全不知道什么是docker - 甚至都没写过命令行代码 - 不知道咋移植 - 无从下手 - 不知道从哪里找应用 ## 迈开第一步 既然不知道如何移植，最快的办法，就是看其他大佬怎么移植的。 我在懒猫商店发现了这么一个应用： https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.game2048 注意到它，是因为我之前玩过1024的游戏，跟他这个差不多。 于是跟着这个应用详情，我来到了github的地址。  在github上可以看到，这是一个静态网站，也没有什么docker镜像之类的东西。  于是我跑去VIP群（每个懒猫用户都有一个VIP群），问这种东西咋移植。 很快有人回复：可以参考它的lpk文件。但是需要进ssh，写代码，我一阵头大。 后来，我发现了大佬开发的这个应用： https://appstore.lazycat.cloud/#/shop/detail/top.j0k3r.lpk-inspector 真是福音啊，进去搜2048，  直接点进去，就能看到它的配置，真是太方便了。  ### **看配置** 从上面可以看到，每个lpk应用，都有3个文件。 icon.png 是应用图标， manifest.yml 里面是主要的配置。 content.tar 里面是网站发布后的一些文件。 具体字段就不阐述了，可以去看官方文档： https://developer.lazycat.cloud/ ### **开始移植** 到了这一步，相信很多程序员就可以自己操作了。 我打开VSCode，下载下来代码，编译网站，按照要求准备好这3个文件，打包成lpk，安装到懒猫。 这些步骤基本没有什么卡点，我就不废话了。 ### **注意事项** 对于简单的html应用、游戏，官方可以上架，但没有激励，毕竟这种应用太多了，可以理解。 ## 最后想说的 我在没移植之前，觉得太难了。 等移植完第一个app，内心成就感爆棚：原来我也可以！ 当然，除了这种静态网站应用，还有很多其他类型的应用，我会在后续文章中分享如何移植。 如果你也想移植应用，爆金币，不妨从2048开始，这种是最简单的。

Vibe打金计划(8)：24小时开发原创应用?!

### 成功了! Vibe打金计划的第一个作品终于打包1.0.0提交审核了，运气好的话应该能与本文同时上线。 由于本标题党的作风一贯实诚，这里还是要特别说明一下：说是24小时，就是真的24小时。只不过实际跨度约为不到三天，因为要除去吃饭睡觉去超市以及陪娃和摸鱼的时间，是指坐下工作的时间加起来应该大约在24个小时以内。 （以后的开发中我会试着缩短这个时间。） 当然这24小时中也还不包括预先研究的时间，《Vibe打金计划》系列大约开始于两周前，而这个项目大约也是在一周前就开始研究了。只不过如同我在之前说过，原本是打算用MySQL服务的，由于各种原因，中间除了研究MySQL又研究了minidb和file-pickers两个懒猫官方插件，所以绕了点弯路多花了些时间。 如果你对《Vibe打金计划》全系列有兴趣，补课链接在这里： * [《Vibe打金计划之序章: 系统提示词》](https://lazycat.cloud/playground/guideline/745) * [《Vibe打金计划(1)：小白学打包应用》](https://lazycat.cloud/playground/guideline/753) * [《Vibe打金计划(2)：数据库功能测试与演示》](https://lazycat.cloud/playground/guideline/758) * [《Vibe打金计划(3)：一二三，分步走》](https://lazycat.cloud/playground/guideline/806) * [《Vibe打金计划(4)：新手调试一路通》](https://lazycat.cloud/playground/guideline/814) * [《Vibe打金计划(5)：懒猫minidb插件》](https://lazycat.cloud/playground/guideline/822) * [《Vibe打金计划(6)：怎样更有效地使唤AI》](https://lazycat.cloud/playground/guideline/843) * [《Vibe打金计划(7)：lzc-file-pickers插件》](https://lazycat.cloud/playground/guideline/844) --- 正式重启这个应用的开发大约刚好是三天前的现在写攻略的这个时间。 # Milka！ 应用名称为《喵卡 Milka》，是一款记忆卡片的小应用。 稍后我会试着编辑文章并加入应用的链接，现在先讲述一下我用这24小时（工作时间）人工构思、指挥以及几乎完全依靠AI开发这个应用的完整过程。 整个过程使用Refly及Claude sonnet 4组织提示和编写代码，大约只手动修改了很少的部分（却花了不少时间）。 https://appstore.lazycat.cloud/#/shop/detail/iamxiaoe.lzcapp.refly --- # 整理需求 在[《Vibe打金计划(3)：一二三，分步走》](https://lazycat.cloud/playground/guideline/806)中，其实我已经写了关于这个应用的基本需求生成过程，当时它的代码也已经写好了大半，但由于始终觉得MySQL启动有点慢（也可能是我机器的问题），最终决定换用官方插件minidb，完全推倒重写这个应用。 最终的Refly画布大约是这个样子的，但是只有绿色的三组节点是整个开发过程，其中红色区是之前第一步MySQL版的内容，紫色区是minidb研究，蓝色区是file-pickers研究。  于是我在绿色区的开头引用了红色区的旧对话记录，以便尽可能的利用AI现有的记忆，然后导入了minidb和file-pickers导出的文档，写了如下的注释： >我准备完全重构这个项目，从零开始架构。但要去掉使用MySQL的镜象部分，改用懒猫官方提供的minidb插件，并使用lzc-file-pickers插件管理更新数据和增加数据包的操作，先不要编码，请先根据以上情况修改需求文档，需包含上述两个插件的简述，以及一个分步式开发的计划。等我确定需求文档的内容之后才会需要正式编码。 AI给我的第一个方案并不理想，包括把file-pickers的植入放在了太前会占用较多开发时间，另外开发计划是沿用（预测）了传统开发的惯例时长，分了五步计划，总共计划了最多11周的开发时间！**（但从另一个角度看，我是不是用vibe节省了近三个月的时间？）** ## 调整需求 于是我决定第一期先不用从网盘选择文件，先弃用file-pickers的植入。 >文件选择器的插入并不急切，因为保存的部分还是在数据库，导出为数据包也用传统方式下载到本地即可实现。所以从网盘中选择文件并升级数据包是后面的事情，可以放在较后执行。 另外全程将使用AI编程，所以期望可以在很快的时间内开发完成，计划中的时间天数没有什么用。 步骤尽量控制在三步左右。 从上一次开发得出经验，其实需求和开发计划还是相当重要的，尤其是在Refly中，AI可以全程（基本）遵守需求和计划进行开发。如果你有比我更多的开发规则经验，应该可以用更好的需求和计划指导AI进行更有效的开发。 所以我在这之后又调整了一些细节，包括整理及精简项目结构和修改配置文件，以求在开始时更好地限制和指导AI。 --- # 正式编码 计划基本满意之后，由于有详细文档的导入，我只需要一个简单的命令就可以让它开始开发了： >现在编写生成全部位于app下的文件的代码，基于第一期计划 所以虽然它在最初的计划中第一期的时间写了“1-3周”，但实际上AI只在一个交互回合中用了20-30秒就给我把大致的框架写出来了，包括每一个必要文件的完整代码。 总共9个文件，我没有仔细统计有多少行，总之可以看一下滚屏效果： https://lzc-playground-1301583638.cos.ap-chengdu.myqcloud.com/guidelines/319/1f5ac988-64ac-4cfb-ae4f-653624598271.mp4 -  以上代码只包含了很少的错误，其中包括AI常出现的写出来的代码有被打断导致语法错误的情况，这时只需要让它重新提供单个文件就行了。 ## 关于Service Workers 不过另外有一个问题是AI自动加入了Service Workers机制，这玩意让我有点头痛。可能是我不会用，也可能是因为SW太过强大了。它直接在浏览器中生成缓存，并用缓存去截断真实路由，所以一旦处理不好尤其是如果AI失忆或犯神经导致没有注销或更新记录，这个页面就会一直刷新不到修改的内容，在调试时非常麻烦。 在浏览器中还可以从开发者工具中绕过它，再清不干净可以新开一个窗口。可是在懒猫应用中，据我的猜测似乎每个应用对应的就只是一个窗体，缓存很可能是保存在本地系统对应这个窗体ID的记录里，也找不到地方清理这个缓存，要么就要写专门代码清空所有SW缓存（或许还清不干净），要么只能修改项目包id启动新的窗体才能刷到新的版本。 对大神们这可能很简单，但以我小白水平来说，我不想折腾那么多，而且懒猫基本上四舍五入算是本地(至少大多数情况下是本局域网)应用，对缓存没那么大要求，这个应用又没有太多的数据流，所以实在没必要搞这玩意。于是我在提示中严格强调了不允许使用SW。 --- # 第二期开发 除了上述的两个问题，我大约只和AI进行了三四轮有效问答回合（有效是指刨除我为了发现问题问的关于SW的几个支线问题），就把一个可用的Demo给架好了。 抱歉我对整个开发中间环节的界面都没有截图，但说实话界面基本70%符合我的要求，于是我打算让它进行下一步的开发。但是首先要确定，它是否还能记住开发计划： >目前一切功能正常，请先确认下一步的开发计划 ## 调整计划 & 美化界面 但是很明显AI又想太多了，我发现计划不太符合我的要求，于是临时修改计划（从后果看也许并不是个好的决定） >这个规划有点太长了，首先去掉社区功能。数据导入和导出，以及从网盘选择文件也先延后。这一步首先完善界面，让它基本可用，将创建主题和卡片的体验从系统对话框改为页面表单。优化体验让卡片有3D翻转的效果。请给我更新的计划。 又是用了几十秒增加了新的功能，第二期的“几周”时间又节省出来了。其实最基本的功能已经都运行正常了，于是我开始优化界面： >现在让我们做一些页面美化，首先目前的卡片显示还有一些问题，当卡片翻转时，反面没有显示卡片的背面，而是显示了水平镜面翻转的正面，可能是层次样式的问题，需要解决。然后，整个页面改为一体化，不分页头和主题，而是统一的一个浅灰色纯色背景。所有的字体用细体，不要用加粗。LOGO从现在的emoji改为assets/logo.png，限制大小为60x60px。不需要面包屑导航，不需要卡片左下方的编号显示。 ## 嘿，记得这个icon吗？  我在[《边画边体验：用SVG-Edit绘制应用图标》](https://lazycat.cloud/playground/guideline/818)中，也是使用了懒猫中的应用SVG-Edit用矢量绘制了它。 https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.svgedit 由于它的中间有一个代表卡片的空白空间，我直接把导航第二层页面中的返回按钮加在了上面，如果需要返回到首页，猫的“嘴”中会显示一个返回箭头的图标。  --- # 喵卡功能说明 至此，随着界面的优化，加上一些细节的调试和修改，一个应用的雏形其实已经基本搭好了。 首先，在喵卡应用中，你可以创建无限个“主题”，至于什么主题完全由你来定。  最张见的不外乎是背英语单词，但除此之外的各种语言或其他知识，比如数学公式、历史事件、科学概念……各种知识可能都需要用记忆闪卡来强化记忆。 然后每个主题中你又可以建立多张卡片。  每张卡片都有正反两面，其实是一样的数据结构，用关联表把它们互相以及和主题联系起来。正面和反面都包含主体内容和备注两个主要字段（但显示有区别）。 你可以根据需要填写卡片内容，比如英文单词就可以在主体中分别填写中英文单词，以及助记提示和详细解释；比如历史就可以正面写简单事实，背面写时间和详情。 这样你在使用的时候会先看到正面的提示信息，在心中默记之后，点击将卡片翻过来，查看和对比背面的答案内容。 它目前有列表和幻灯片两种显示模式，适合不同的学习习惯和场景。同时也有“太空白”和“星辰灰”（是的我故意的）两种风格可以切换。   这个应用对于和小朋友做学习游戏互动来说也会很有用处，就像听写一样，可以让小朋友根据正面的提示说出或写下答案，再与背面的答案对照。 甚至多人进行趣味问答，或团队性质的脑筋急转弯或百科知识抢答赛，也是很有创意的玩法。 --- 好了，以上的过程已经比较完整地展现了我在Vibe编码的过程的主要要点和心得。如果你要开发一款与这相当或比这更简洁的应用，相信可以从中参考经验，希望能找到合适的方法以更快得到结果。 但同时，以上也只是喵卡应用开发的“顺畅”部分，时间其实只用了全部24小时中的15-16个小时。在后续的攻略中我会继续展开写一些“不顺畅”的部分，包括手动调整代码以及怎样与AI分离又同步的痛苦故事，以及如何（用AI）开发主体功能以外的功能和后期调试的经验。 所以不要走开，呯！（请）呯！（看）呯！（下）呯！（集）（还有人懂这梗吗？）