本章你将学会软件的本质是——一份写给计算机看的指令清单桌面软件、网页软件、手机 App 之间的关系认识我们的目标产品 EngFlow 的全部功能分清源码和能运行的软件是两回事认出 EngFlow 项目文件夹里每堆文件各自负责什么需要的前置章节无真的从零开始对应项目文件项目根目录、index.html、src/、public/、src-tauri/1.1 从一个场景开始先做个小调查。今天早上你打开电脑双击了 EngFlow 的图标窗口啪地弹出来你背了 20 个单词点了 4 个按钮给自己今天的复习打了分。现在我问你一个有点怪的问题刚才那一刻计算机到底做了什么它没有背单词。计算机这辈子只会做一件事听话。你其实是软件给它一份指令清单它就一条一条照做一秒钟能做几十亿条。双击图标的意思是“嘿去把这份清单找出来从头执行。”所以——软件software就是一份写给计算机看的指令清单。就像菜谱。菜谱本身不是红烧肉它是如何做红烧肉的描述软件也不是你看到的漂亮界面它是如何做出那个界面、如何处理你点的每个按钮的描述。计算机是全世界最勤快、也最死板的厨师菜谱写错一步它就错给你看。【配图说明左边一张菜谱纸写着鸡蛋打散→下锅→…“右边一张代码纸写着用户点击卡片→显示释义→…”中间一个equals号标题软件计算机的菜谱】1.2 原理为什么软件长得不一样菜谱可以用纸写、用黑板写、存在手机备忘录里——内容是同一份载体不同。软件也一样按在哪运行分成三大类① 网页软件指令清单放在网上的服务器上你打开浏览器才执行。微信网页版是。② 桌面软件清单直接装进你的电脑双击就运行不联网也能用。你玩的单机游戏是。③ 手机 App其实也是装进设备里运行原理和桌面软件是一家。那么问题来了EngFlow 是个桌面软件双击图标、有自己窗口、断网也能背单词可本书后面大量出现的却是 HTML、CSS、JavaScript——这些不是做网页的技术吗这就是 EngFlow 聪明的地方也是我们这本书第一个值得讲的工程决策借一个没有边框的浏览器来当软件的身体。做法是这样的把网页技术写出来的界面装进一个由 Rust 语言做的小盒子里。小盒子负责开窗口、画标题栏、处理安装卸载窗口里面呢其实是一个浏览器在渲染我们的网页。这个技术叫Tauri陶瑞。市面上更有名的同类盒子叫Electron它是 GitHub 那批人先写了个叫 Atom 的代码编辑器给它套上一层 ChromiumChrome 用的那套内核当外壳后来干脆把这层外壳单独拆出来卖给大家用一路演化成了今天的 Electron。所以你看到的 EngFlow表面一个正经的桌面软件有自己的窗口和图标肚子里一个网页在运行好处我们只需要学做网页这一套技术就能做出桌面软件。一套手艺两种产物。【配图说明三层剖面图。顶层EngFlow 窗口桌面软件“中层Tauri 盒子Rust 写的壳”底层Vue 网页HTMLCSSJS“旁边标注你双击图标 → 盒子启动 → 盒子在窗口里打开一张网页”】1.3 动手时间实验 1当一分钟的用户5 分钟先把D:\WorkSpace\CET6\learnEnglish这个项目跑起来具体命令在第 6 章会一步步讲现在照着敲就行# 打开终端后面第 4 章会教怎么打开现在可以在项目文件夹地址栏输入 cmd 回车npmrun tauri dev等十几秒会出现一个标题为“EngFlow · 英语学习工作台”的窗口。现在你是用户把五个功能各玩一遍仪表盘首页顶部五个导航——仪表盘 / 词本 / 语法 / 句子工坊 / 报告。看到待复习今日新词两个数字了吗背后是一套叫间隔重复的算法第 14 章整个单元就是拆它。点“开始今日学习”出现单词卡正面是单词点一下或按空格翻到背面看释义——按 1~4 给这个单词打分“不认识/模糊/记得/很简单”。玩 3 张就退出不用学完。词本页点 收藏生词输入单词panda、释义熊猫点加入词本。你已经亲手往软件里塞了一个数据句子工坊→ 听写练习点喇叭听一句英文在框里打出来点提交答案——它会逐词标出你漏了哪个、多了哪个。关掉窗口再打开——刚才收藏的 panda 还在。数据没丢它被存在了你电脑的某个角落里。存哪儿了第 13 章带你把它挖出来。实验 2偷看菜谱原文5 分钟关掉软件。用记事板或 VS Code第 4 章装打开这个文件D:\WorkSpace\CET6\learnEnglish\src\srs.ts不用看懂只要求你找到这一行exportconstINTERVALS[0,1,2,4,8,16,32];看到没这就是刚才打分后决定下次什么时候复习的全部秘密的种子今天学会的词明天复习、再隔 2 天、4 天、8 天……这个清单会贯穿全书第 14 章我们把它逐行拆开。此刻你只需要建立一个感觉软件里每一个神奇行为都能溯源到几行你看得见、读得懂的普通文字。实验 3软件 vs 源码分家3 分钟现在你手上有两样东西是什么类比D:\WorkSpace\CET6\learnEnglish\整个文件夹源码source code给人读的菜谱原文菜谱书npm run tauri dev弹出的窗口 / 最终打包的 exe软件计算机照着菜谱做出来的菜一盘红烧肉计算机运行的是菜我们学习和修改的永远是菜谱。这也是为什么程序员之间互相发的是源码文件夹而不是软件——菜会凉菜谱可以传一千年。1.4 回到 EngFlow整个项目文件夹导览把D:\WorkSpace\CET6\learnEnglish摊开用资源管理器看一眼即可一共就这么几堆东西。现在每个都能用一句话认领learnEnglish\ ├─ GRE_8000_Words.txt ← 一堆原材料7744 行乱糟糟的 GRE 单词文本 ├─ index.html ← 网页的出生证明每个网页项目都有一张这个 ├─ package.json ← 购物清单 遥控器按钮表第 4 章细讲 ├─ vite.config.ts ← 开发工具台的设置单第 5 章细讲 ├─ public\ ← 静态资源成品词库 gre-bank.json1.95MB7668 词住这里 ├─ scripts\ ← 把 GRE_8000_Words.txt 加工成 gre-bank.json 的工厂车间 ├─ src\ ← ★ 主厨房软件的全部菜谱 │ ├─ main.ts ← 开火第一步先运行这个文件 │ ├─ App.vue ← 总装台导航、页面切换都归它管 │ ├─ components\ ← 乐高零件盒9 个界面组件仪表盘、卡片、词本…… │ ├─ data\ ← 食材库80 个种子单词、语法点、长难句 │ ├─ srs.ts ← 间隔重复算法实验 2 你已经偷看过 │ ├─ store.ts ← 冰箱数据怎么存、怎么取 │ ├─ types.ts ← 包装盒规格说明书每条数据长什么样 │ ├─ audio.ts ← 喇叭让电脑朗读单词 │ └─ retention.ts ← 记忆衰减模型报告页的遗忘曲线靠它 └─ src-tauri\ ← 那个 Rust 盒子窗口大小、图标、打包配置都在这注意到没有文件的名字几乎就是功能说明书srs.ts 间隔重复Spaced Repetition System 的缩写store.ts 仓库。好名字是软件世界里免费的礼物我们后面起名字时会一直讲究这个。1.5 小毛病大修理坏例子小朋友小明以为软件 那个 exe 文件他把 EngFlow 的快捷方式删了就说我把软件删了。修理快捷方式只是便利贴exe 只是做好的菜真正的软件本体是那份菜谱源码/指令。这也是为什么删除软件要点控制面板里正规的卸载而不是删桌面图标。在计算机世界里符号、本体、原料三者要分清——这个习惯以后能帮你避开大坑比如本书第 27 章打包发布时很多新手会分不清dist 文件夹刚炒出来的菜和源码菜谱哪个才该发给朋友。1.6 本章你会解释合上书用你自己的话回答家长旁听软件到底是什么关键词指令清单/菜谱桌面软件和网页软件最大区别是什么EngFlow 为什么用做网页的技术做桌面软件关键词Tauri 盒子、一套技术两种产物源码和运行起来的软件哪个是菜谱、哪个是菜src/和src-tauri/两堆文件夹分别管什么参考1→1.2 节2→1.2 节3→1.3 实验 34→1.4 节导览表。1.7 练习★ 找一找你电脑上已安装的某个软件的安装目录看看能不能分辨出壳exe、dll和内容资源图片、数据文件——对照 EngFlow 的src-tauri和src的关系。★★ 打开src\data\words.ts找到abandon这个词的条目数一数一条单词数据一共有几个字段。提示word、phonetic、pos、meaning、example、exampleZh、level、id——第 12 章会正式讲这些字段为什么长这样。★★★ 思考题如果 EngFlow 的所有数据只存在你自己电脑的engflow.json里换一台电脑登录你的学习记录会怎样你觉得软件应该怎么解决不用写代码把你的方案用三五句话写给家长听。第 13 章学完数据存哪后回来重答一遍看看你的直觉对不对。下一章我们拆开肚子里的网页一个界面怎么会被三种语言HTML、CSS、JavaScript合作画出来——每种各写 20 行当场跑给你看。