课程 5:开发一个本地数据库应用 资源下载
适合人群:已完成课程0-4,对Alma有一定了解的学员
课前准备
- 打开自己的 AI课程文件夹
- 在里面新建一个文件夹
lesson-5 - 在 Alma 里面新建一个聊天,设置该项目的文件夹指向新建的文件夹
- 下载本课资源到文件夹
核心理念回顾
在开始之前,让我们再次强调 AI 时代的教学核心:
AI 代理的能力很强大,但是人如何说决定了 AI 如何做。
你的价值在于:
- 理解业务需求 → 知道要做什么
- 设定明确目标 → 定义什么才算做好
- 清晰表达需求 → 让 AI 明白要怎么做
- 懂得技术边界 → 知道什么能做、什么不能做
- 解决执行困境 → 帮 AI 走出死循环和迷宫
本课将通过一个主案例 + 一个扩展练习,让你充分体会这一点。
第一部分:本地数据库应用 - 个人单词本
为什么要学数据库应用
在扩展练习中你会做同义词配对游戏,但游戏中的单词是固定的,不能保存自己学到的单词。现在我们要做一个"个人单词本"应用,让你可以:
- 把学到的新单词添加到单词本
- 随时查看单词本里的所有单词
- 修改单词的翻译和备注
- 删除不需要的单词
- 关闭浏览器后,单词依然存在(数据持久化)
本课的核心价值
从一次性游戏到持久化应用:
| 特性 | 同义词配对游戏 | 个人单词本应用 |
|---|---|---|
| 数据来源 | 固定在代码中 | 用户添加 |
| 数据保存 | 不保存 | 保存到浏览器数据库 |
| 使用场景 | 练习一次 | 反复使用 |
| 完整性 | 单一功能 | CRUD 完整功能 |
什么是 IndexedDB
用生活类比理解
想象你的电脑里有一个智能文件柜:
| 文件柜的功能 | IndexedDB 的对应 |
|---|---|
| 分类存放文件 | 创建数据库和表 |
| 添加新文件 | Create(插入数据) |
| 查找某个文件 | Read(查询数据) |
| 修改文件内容 | Update(更新数据) |
| 删除不需要的文件 | Delete(删除数据) |
| 文件一直在柜子里 | 数据持久化保存 |
IndexedDB 的特点
| 特点 | 说明 |
|---|---|
| 本地存储 | 数据保存在用户浏览器中,不需要服务器 |
| 容量大 | 可以存储几百 MB 的数据(localStorage 只能几 MB) |
| 查询快 | 使用索引快速查找数据 |
| 异步操作 | 不会阻塞页面,性能好 |
| 永久保存 | 除非用户主动清除浏览器数据,否则一直存在 |
什么时候用 IndexedDB
| 场景 | 推荐技术 | 原因 |
|---|---|---|
| 存少量数据(如用户设置) | localStorage | 简单易用 |
| 存大量结构化数据 | IndexedDB | 容量大、查询快 |
| 需要后端协作 | 后端数据库 + API | 多人共享数据 |
| 单机应用(本课) | IndexedDB | 完整的前端数据库 |
案例:个人单词本应用
项目概述
应用名称:个人单词本
核心功能:
- 添加单词(英文、中文、音标、例句)
- 查看单词列表
- 编辑单词信息
- 删除单词
- 复习模式(随机显示单词测试记忆)
数据结构:
| 字段 | 类型 | 说明 | 示例 |
|---|---|---|---|
| id | 数字 | 唯一标识,自动生成 | 1, 2, 3... |
| english | 文本 | 英文单词 | big |
| chinese | 文本 | 中文翻译 | 大的 |
| phonetic | 文本 | 音标(可选) | /bɪg/ |
| example | 文本 | 例句(可选) | This is a big house. |
| tags | 文本 | 标签(可选) | 基础、形容词 |
| created_at | 时间 | 创建时间 | 2024-01-15 10:30:00 |
| updated_at | 时间 | 修改时间 | 2024-01-15 10:30:00 |
数据库基础概念(小白易懂)
什么是数据库
数据库就像一个智能的电子表格,它可以:
| 功能 | 电子表格 | 数据库 |
|---|---|---|
| 存储数据 | 可以 | 可以 |
| 快速查找 | 慢(手动搜索) | 快(索引) |
| 处理大量数据 | 困难 | 轻松 |
| 多人协作 | 不行 | 可以 |
| 数据关联 | 不行 | 可以 |
什么是表
表就像 Excel 中的一个工作表,用来存储同一类数据。
示例:单词表(words)
| id | english | chinese | phonetic | example | tags | created_at |
|---|---|---|---|---|---|---|
| 1 | big | 大的 | /bɪg/ | This is big. | 基础 | 2024-01-15 |
| 2 | small | 小的 | /smɔːl/ | It is small. | 基础 | 2024-01-15 |
| 3 | fast | 快的 | /fæst/ | He runs fast. | 基础 | 2024-01-15 |
什么是字段
字段就是表格的列,定义了数据的具体属性。
示例:english 字段
| 属性 | 说明 |
|---|---|
| 字段名 | english |
| 数据类型 | 文本(字符串) |
| 约束 | 必填(不能为空) |
| 示例值 | big, small, fast |
什么是 CRUD 操作
CRUD 是数据库的基本操作,是单词的缩写:
| 操作 | 英文 | 中文 | 例子 |
|---|---|---|---|
| Create | 创建 | 添加数据 | 添加单词"big"到单词本 |
| Read | 读取 | 查询数据 | 在列表中查看所有单词 |
| Update | 更新 | 修改数据 | 把"big"的中文改成"巨大的" |
| Delete | 删除 | 删除数据 | 从单词本中删除"big" |
记忆方法:增删改查
完整应用的意义
理解数据结构
数据结构的重要性:
- 清晰的数据结构让应用更容易理解和维护
- 合理的数据字段确保数据完整性和可用性
- 规范的数据类型避免数据错误和混乱
- 适当的数据约束保证数据质量
本课的数据结构设计:
单词(Words)
├── 基础信息:id, english, chinese
├── 补充信息:phonetic, example
├── 分类信息:tags
└── 时间信息:created_at, updated_at为后续学习打基础
学习路径:
| 阶段 | 技术重点 | 目标 |
|---|---|---|
| 第一阶段 | 前端数据库(IndexedDB) | 理解数据库基本概念 |
| 第二阶段 | 后端数据库(MySQL/PostgreSQL) | 学习服务器端数据库 |
| 第三阶段 | 数据库设计 | 学会设计复杂的数据结构 |
| 第四阶段 | 数据库优化 | 学习索引、事务、缓存 |
本课的定位:
- 是数据库学习的入门课
- 让学生理解"数据持久化"的概念
- 掌握 CRUD 操作的基本思路
- 为后续学习后端开发打下基础
完整制作流程
按照流程进行。
第一步:明确目标
目标:创建一个个人单词本应用,功能包括:
- 添加单词:输入英文、中文,可选填音标和例句
- 查看列表:显示所有单词,支持按标签筛选
- 编辑单词:点击编辑按钮,修改后保存
- 删除单词:点击删除按钮,确认后删除
- 复习模式:随机显示单词,测试记忆
界面设计:
- 顶部:应用标题 + 统计信息(共 XX 个单词)
- 中部:单词列表(表格形式)
- 底部:操作按钮(添加、复习)
- 弹窗:添加/编辑单词的表单
第二步:设计输出格式
应用结构:
单词本应用/
├── index.html # 主文件(内嵌 CSS 和 JS)
├── README.md # 使用说明
└── images/ # 图标资源(可选)第三步:提出需求
极简版本
我想做一个使用indexeddb的单词本学习的网页应用,请你规划一下,然后使用ui-ux-pro-max设计样式创建出来,然后我会打包成应用程序
基础提示词(10个单词快速验证)
请创建一个最简个人单词本应用(IndexedDB):
- 功能:添加/列表/删除
- 初始数据:10个单词(big/small/fast/slow/happy/sad/beautiful/magnificent/incredible/extraordinary)
- 单文件 index.html(HTML/CSS/JS 同文件),表格展示,顶部显示总数详细提示词(完整功能)
请创建一个完整的个人单词本应用(IndexedDB),要求:
- 单文件 `index.html`(HTML/CSS/JS 都在一个文件里),代码有中文注释
- 数据库:WordBookDB / words;字段:id, english, chinese, phonetic, example, tags, created_at, updated_at
- 功能:添加/编辑/删除/列表展示;标签筛选 + 关键词搜索;复习模式(随机词→显示答案→下一个)
- 初始化:首次写入10个示例词(如 big/small/fast/slow/happy/sad/beautiful/magnificent/incredible/extraordinary),其他字段可为空
- 界面:表格列表 + 顶部统计 + 弹窗表单,简洁清晰即可
输出:完整可直接保存为 `index.html` 的代码文件。第四步:应对可能出现的情况
情况 1:IndexedDB 初始化失败
问题描述:打开页面时,数据库无法创建
应对提示词:
IndexedDB 初始化失败,请检查:
1. 数据库名和表名是否正确
2. 是否添加了错误处理(onerror 事件)
3. 是否检查了浏览器兼容性
4. 请添加详细的错误日志,使用 console.log 输出错误信息情况 2:添加单词后列表没有更新
问题描述:点击保存后,单词没有出现在列表中
应对提示词:
添加单词后列表没有更新,请修复:
1. 检查事务是否成功(onsuccess 事件)
2. 事务成功后是否调用了 loadWords() 函数刷新列表
3. 检查表单是否正确获取了输入值
4. 添加调试日志,输出新增的单词数据情况 3:编辑单词时数据没有填充
问题描述:点击编辑按钮,表单是空的
应对提示词:
编辑单词时数据没有填充,请修复:
1. 检查是否正确获取了要编辑的单词 id
2. 是否使用 id 从数据库查询了单词数据
3. 查询成功后,是否将数据填充到表单的输入框中
4. 添加调试日志,输出查询到的单词数据情况 4:删除单词没有确认
问题描述:点击删除按钮,直接删除了
应对提示词:
删除单词需要确认,请添加:
1. 点击删除按钮时,使用 confirm() 弹出确认对话框
2. 确认对话框文字:"确定要删除这个单词吗?"
3. 只有点击"确定"后才执行删除操作
4. 删除成功后,刷新列表情况 5:复习模式单词不随机
问题描述:复习模式总是按相同顺序显示单词
应对提示词:
复习模式的单词顺序需要随机,请修复:
1. 从数据库查询所有单词
2. 使用 Math.random() 打乱单词数组的顺序
3. 或者使用 Fisher-Yates 洗牌算法
4. 每次进入复习模式都重新随机排序第五步:验证结果
功能测试清单
1. 数据库初始化
- 打开页面,检查 IndexedDB 是否成功创建
- 检查是否自动添加了10个示例单词
- 检查单词总数显示是否正确(10个)
2. 添加单词功能
- 点击"添加单词"按钮,弹窗是否正常显示
- 输入英文和中文,点击保存
- 检查单词是否添加到列表
- 检查单词总数是否增加
3. 编辑单词功能
- 点击某个单词的"编辑"按钮
- 检查表单是否正确填充了当前单词的数据
- 修改中文翻译,点击保存
- 检查列表中的翻译是否更新
4. 删除单词功能
- 点击某个单词的"删除"按钮
- 检查是否弹出确认对话框
- 点击"确定"
- 检查单词是否从列表中删除
- 检查单词总数是否减少
5. 查看列表功能
- 检查表格是否正确显示所有字段
- 检查标签筛选器是否工作
- 检查关键词搜索是否工作
6. 复习模式功能
- 点击"复习模式"按钮
- 检查是否随机显示一个单词
- 点击"显示答案"按钮
- 检查是否显示中文翻译
- 点击"下一个"按钮
- 检查是否显示新的单词(不重复)
7. 数据持久化
- 添加几个单词
- 关闭浏览器
- 重新打开页面
- 检查之前添加的单词是否还在
数据完整性测试
| 测试项 | 预期结果 | 测试方法 |
|---|---|---|
| id 自动生成 | 每个单词有唯一 id | 添加多个单词,检查 id 是否连续 |
| 时间戳自动生成 | created_at 和 updated_at 有值 | 添加单词后,检查时间字段 |
| 编辑时更新时间 | updated_at 变化 | 编辑单词后,检查 updated_at 是否更新 |
| 删除后数据清理 | 数据库中不再有该记录 | 删除单词后,使用浏览器开发者工具检查数据库 |
浏览器兼容性测试
在以下浏览器中打开 index.html,检查是否正常显示:
- Chrome
- Firefox
- Safari
- Edge
实践任务总结
你需要完成的步骤
- 创建项目文件夹
单词本应用/ - 在 Alma 中新建聊天,设置工作目录指向
单词本应用/ - 使用基础提示词(5个单词版本)向 Alma 提出需求,快速验证功能
- 保存代码为
index.html,在浏览器中打开测试 - 确认基础功能正常后,使用详细提示词(完整功能版本)生成应用
- 在浏览器中打开
index.html,按照测试清单逐项验证功能 - 根据测试结果,使用相应的应对提示词向 Alma 反馈问题
- 优化代码直到所有功能正常
- 测试数据持久化(关闭浏览器后重新打开)
- 浏览器兼容性测试
- 完成所有功能验证
成功标志
当你完成以下内容时,说明你已经掌握了本课的全部技能:
- 理解 IndexedDB 的基本概念和优势
- 掌握 CRUD 操作的思路和实现
- 能够使用自然语言向 AI 表达数据库需求
- 能够独立完成数据库应用的开发和测试
- 理解数据结构设计的重要性
- 感受完整应用的魅力
第二部分:分发你的应用 - 让 AI 帮你打包(高级技巧,可选)
本节需要用户有一定计算机知识和耐心.
为什么要打包应用
现在你已经做好了个人单词本应用,但是分发 HTML 文件有几个问题:
| 问题 | 说明 |
|---|---|
| 分发不方便 | 需要把整个文件夹压缩发送给用户 |
| 用户体验差 | 用户需要解压、双击打开 HTML 文件 |
| 兼容性问题 | 不同浏览器的显示效果可能不同 |
| 无法安装 | 用户无法像安装软件一样安装你的应用 |
解决方案:使用 Pake 将你的网页应用打包成桌面应用程序
什么是 Pake
Pake 是一个可以将任何网页打包成桌面应用程序的工具,它有以下特点:
| 特点 | 说明 |
|---|---|
| 多平台支持 | Windows、macOS、Linux 都可以打包 |
| 简单易用 | 让 AI 帮你操作,不需要自己学命令 |
| 体积小 | 打包后的应用体积很小 |
| 性能好 | 使用 Rust 编写,性能优秀 |
| 免费开源 | 完全免费,可以商用 |
完整制作流程
按照流程进行。
准备工作(重要)
在开始打包之前,需要做好两项准备工作:
- 去 https://rustup.rs/ 下载 rustup-init.exe,安装rust语言的支持.
- 把我们预先提供的pake压缩包文件解压放到工作目录下:确保能够找到库
- 准备应用图标:让应用看起来更专业
准备工作 1:检查网络环境
为什么需要检查网络环境
Pake 打包需要下载以下依赖:
| 依赖 | 来源 | 大小 | 内地网络问题 |
|---|---|---|---|
| Node.js | 官网或镜像 | ~30 MB | 可使用国内镜像 |
| Rust | 官网或镜像 | ~200 MB | 可使用国内镜像 |
| npm/pnpm 包 | npm 仓库 | ~100 MB | 需配置国内镜像 |
| Electron/Tauri | GitHub | ~300 MB | 下载可能很慢或失败 |
向 Alma 提出网络检查需求
基础提示词:
请帮我检查当前网络环境:
1. 检查是否能访问 GitHub(Pake 的源码托管地)
2. 检查是否能访问 npm 仓库(下载依赖包)
3. 根据检测结果,告诉我是否适合使用 Pake 打包
4. 如果网络有问题,请给出建议和替代方案应对网络问题
情况 1:GitHub 无法访问
应对提示词:
GitHub 无法访问,请帮我:
1. 检查 Pake 是否有国内镜像或预编译版本
2. 如果有预编译版本,提供下载链接
3. 如果没有,提供其他打包工具的替代方案情况 2:npm 下载速度慢
应对提示词:
npm 下载速度很慢,请帮我配置国内镜像:
1. 配置 npm 使用腾讯云镜像:https://mirrors.cloud.tencent.com/npm/
2. 或者配置淘宝镜像:https://registry.npmmirror.com/
3. 如果使用 pnpm,也请配置对应的镜像
4. 配置完成后,告诉我如何验证镜像是否生效情况 3:依赖下载失败
应对提示词:
依赖下载失败,请帮我:
1. 查看具体的错误信息
2. 根据错误信息,提供解决方案
3. 如果是网络问题,建议使用离线安装包或预编译版本
4. 如果仍然无法解决,推荐其他打包工具准备工作 2:准备应用图标
应用图标要求
不同平台的图标要求:
| 平台 | 文件格式 | 推荐尺寸 | 其他要求 |
|---|---|---|---|
| Windows | .ico | 256x256 或更大 | 支持 32x32 到 256x256 多种尺寸 |
| macOS | .icns | 1024x1024 | 需要包含多个尺寸的图标 |
| Linux | .png | 512x512 | 透明背景推荐 |
建议:准备一个 512x512 或 1024x1024 的 PNG 图片,Pake 会自动转换为不同平台所需的格式。
向 Alma 提出图标制作需求
方案 1:使用 AI 生成图标
请帮我为"个人单词本"应用设计一个图标:
应用类型:英语单词学习工具
核心功能:单词管理、复习测试
设计风格:简洁、现代、扁平化
颜色方案:蓝色或绿色(学习相关)
请使用文生图技能生成图标图片:
1. 尺寸:1024x1024
2. 格式:PNG
3. 背景透明或纯色
4. 图标元素:书本、英文字母、笔记本等
5. 保存到 AIDOCS/images-minimax/ 文件夹
6. 文件名:wordbook-icon.png
请直接生成,不要问我问题。方案 2:使用现有图标资源
请帮我为"个人单词本"应用找一个合适的图标:
1. 访问图标网站(如 icon-icons.com、macosicons.com)
2. 搜索关键词:word、book、study、english、learning
3. 选择一个简洁、现代的图标
4. 下载 512x512 或 1024x1024 的 PNG 格式
5. 保存到 AIDOCS/images/ 文件夹
6. 文件名:wordbook-icon.png
请告诉我你选择的图标的下载地址和说明。方案 3:让 Alma 直接设计并生成
请帮我为"个人单词本"应用设计并生成图标:
应用描述:一个帮助用户管理英语单词的桌面应用,功能包括添加单词、查看列表、编辑、删除、复习模式等。
设计要求:
1. 风格:简洁、现代、扁平化
2. 颜色:蓝色(#3498db)或绿色(#2ecc71)
3. 元素:可以是书本、英文字母 A、笔记本、翻开的字典等
4. 背景:白色或透明
生成要求:
1. 使用文生图技能生成
2. 尺寸:1024x1024
3. 格式:PNG
4. 保存到 AIDOCS/images-minimax/ 文件夹
5. 文件名:wordbook-icon.png
请直接生成多个版本(至少 3 个),让我选择最合适的。图标质量检查
检查提示词:
请帮我检查生成的图标是否符合要求:
1. 尺寸是否正确(1024x1024)
2. 文件格式是否正确(PNG)
3. 背景是否合适(白色或透明)
4. 颜色是否清晰(蓝色或绿色)
5. 元素是否明显(书本、字母、笔记本等)
6. 整体风格是否简洁现代
如果不符合要求,请告诉我具体问题,并重新生成。第一步:明确目标
目标:将个人单词本应用打包成桌面应用程序,方便分发和使用。
打包要求:
- 目标平台:Windows(也可选择 macOS 或 Linux)
- 应用名称:个人单词本
- 窗口大小:1200x800 像素
- 输出位置:当前工作目录
第二步:设计输出格式
打包后得到的文件:
| 平台 | 文件类型 | 示例文件名 |
|---|---|---|
| Windows | .exe | 个人单词本.exe |
| macOS | .app | 个人单词本.app |
| Linux | AppImage | 个人单词本.AppImage |
说明:
- Windows 用户下载后双击
.exe文件即可运行 - macOS 用户下载后双击
.app文件即可运行(可能需要右键打开) - Linux 用户下载后双击
.AppImage文件即可运行(可能需要添加执行权限)
分发方式:
- 直接发送可执行文件
- 或者压缩后发送
- 或者上传到网盘提供下载
第三步:向 Alma 提出需求
确认pake的工具包是否可用
Alma,我已把pake项目文件夹放在了工作目录下.根据它的cli-usage文件,确认一下我的环境是否还需要什么依赖?列举出来,我将安装它们.根据Alma给出反馈,安装依赖,然后进入下一步.
基础提示词(打包本地应用)
场景:你已经做好了单词本应用,想打包成桌面应用
请使用 Pake 帮我打包我的这个应用:
应用路径:单词本应用/index.html
应用名称:个人单词本
目标平台:Windows
应用图标:AIDOCS/images-minimax/wordbook-icon.png(如果有的话)
请帮我完成打包,并告诉我打包后的文件在哪里。详细提示词(指定更多参数)
请使用 Pake 帮我打包我的个人单词本应用:
应用路径:单词本应用/index.html
应用名称:个人单词本
目标平台:Windows
窗口大小:宽 1200,高 800
应用图标:AIDOCS/images-minimax/wordbook-icon.png
我已把pake项目文件夹放在了工作目录下.
注意事项:
1. 打包前请先启动本地服务器,让应用可以通过 http://localhost:8000 访问
2. 打包后请告诉我生成的文件在哪里
3. 如果打包过程中出现任何问题,请告诉我具体是什么问题
4. 如果图标不存在,请使用默认图标,并提醒我打包 PinMe 上的应用
场景:你已经把应用上传到 PinMe,想打包成桌面应用
请使用 Pake 帮我打包我的个人单词本应用:
应用网址:https://pinme.eth.limo/xxxxx(你的 PinMe 网址)
应用名称:个人单词本
目标平台:Windows
应用图标:AIDOCS/images-minimax/wordbook-icon.png(如果有的话)
请帮我完成打包,并告诉我打包后的文件在哪里。
我已把pake项目文件夹放在了工作目录下.
指定不同平台
请使用 Pake 帮我打包我的个人单词本应用,生成三个平台的安装包:
应用路径:单词本应用/index.html
应用名称:个人单词本
目标平台:Windows、macOS、Linux
应用图标:AIDOCS/images-minimax/wordbook-icon.png(如果有的话)
请帮我完成打包,并告诉我生成的文件在哪里。
我已把pake项目文件夹放在了工作目录下.
第四步:应对可能出现的情况
情况 1:Alma 询问如何安装 Pake
应对提示词:
Pake 工具包已经准备好了,在 我的工作目录下。
请按照以下步骤操作:
1. 解压 Pake-main.zip 到 lesson-5/
2. 进入 Pake-main 目录
3. 检查是否已经安装了必要的依赖(Node.js、Rust)
4. 如果没有安装,请提示我,我会帮你处理
准备工作完成后,再执行打包命令。情况 2:本地文件无法直接打包
应对提示词:
无法直接打包本地文件,请按照以下步骤操作:
1. 先启动一个本地服务器,让我能够通过 http://localhost:8000 访问 index.html
2. 你可以使用 Python 的 http.server:python3 -m http.server 8000
3. 服务器启动后,再使用 Pake 打包 http://localhost:8000/index.html
请先启动本地服务器,然后再打包。情况 3:打包速度很慢(你可以询问进展)
应对提示词:
打包速度慢是正常的,因为需要下载依赖和编译。
请耐心等待,打包过程可能需要几分钟。如果超过 10 分钟还没有完成,请告诉我,我会检查是否有问题。Pake 打包正在后台运行中,正在进行编译。首次打包需要编译 Rust 代码,这通常需要 3-5 分钟时间,请耐心等待。
进程状态:
正在执行 tauri build 命令
目标平台:aarch64-apple-darwin (Apple Silicon macOS)
我会在完成后通知你。情况 4:打包后找不到生成的文件
应对提示词:
打包后文件应该在当前工作目录,但是我没有找到。
请帮我:
1. 确认打包是否成功完成(查看有没有报错信息)
2. 检查当前工作目录是哪个
3. 列出当前目录的所有文件,帮我找到生成的 .app 或 .exe 文件情况 5:Windows 无法打开应用
应对提示词:
我在 Windows 上双击应用,提示"Windows 已保护你的电脑"或者杀毒软件报毒。
请帮我解决:
1. 告诉我如何点击"更多信息"然后"仍要运行"
2. 告诉我如何将应用添加到杀毒软件的白名单
3. 确认这通常是误报,不是应用有问题说明:Windows 的安全机制可能会阻止运行未签名的应用,这是正常的安全提示。
第五步:验证结果
验证提示词
请帮我验证打包结果:
1. 检查生成的应用文件是否存在(.app 或 .exe)
2. 尝试运行应用,看是否能正常打开
3. 检查应用内的所有功能是否正常(添加单词、查看列表、编辑、删除、复习模式)
4. 检查 IndexedDB 数据是否能正常保存和读取
5. 检查窗口大小是否符合要求(1200x800)
6. 检查应用图标是否显示正确
如果以上都正常,请告诉我"打包验证通过"。如果有问题,请列出需要修复的地方。功能测试清单
| 测试项 | 预期结果 | 测试方法 |
|---|---|---|
| 应用文件存在 | 有 .app 或 .exe 文件 | 查看文件列表 |
| 应用能打开 | 双击后应用启动 | 双击运行应用 |
| 窗口大小正确 | 1200x800 像素 | 查看窗口尺寸 |
| 应用图标显示 | 显示正确的图标 | 查看应用图标 |
| 添加单词功能 | 能正常添加单词 | 测试添加功能 |
| 查看列表功能 | 能显示所有单词 | 查看单词列表 |
| 编辑单词功能 | 能正常编辑单词 | 测试编辑功能 |
| 删除单词功能 | 能正常删除单词 | 测试删除功能 |
| 复习模式功能 | 能正常进行复习 | 测试复习功能 |
| 数据持久化 | 关闭后重新打开,数据还在 | 添加数据后重启应用 |
分发应用
用户使用方法
Windows 用户:
- 下载你发送的
.exe文件 - 如果提示"Windows 已保护你的电脑",点击"更多信息",然后点击"仍要运行"
- 如果杀毒软件报毒,将应用添加到白名单
- 双击运行,应用会自动打开,加载你的网页应用
macOS 用户:
- 下载你发送的
.app文件 - 右键点击应用,选择"打开"
- 在弹出的对话框中点击"打开"
- 应用会自动打开,加载你的网页应用
Linux 用户:
- 下载你发送的
.AppImage文件 - 右键点击文件,选择"属性",在"权限"标签中勾选"允许将文件作为程序执行"
- 双击运行,应用会自动打开,加载你的网页应用
版本管理
建议在应用名称中包含版本号:
Windows:
个人单词本_v1.0.exe
个人单词本_v1.1.exe实践任务总结
你需要完成的步骤
- 确认你的
单词本应用/index.html可以正常运行 - 在 Alma 中,使用基础提示词向 Alma 提出打包需求
- 按照 Alma 的指引,完成准备工作(解压 Pake、启动本地服务器等)
- 等待 Alma 完成打包
- 在 Alma 中,使用验证提示词让 Alma 帮你验证打包结果
- 双击运行生成的应用文件
- 按照测试清单逐项测试功能
- 如果有问题,使用相应的应对提示词向 Alma 反馈
- 将应用分享给其他人使用
成功标志
当你完成以下内容时,说明你已经掌握了应用分发的技能:
- 理解为什么需要打包应用
- 知道如何用自然语言向 Alma 提出打包需求
- 能够让 Alma 帮你完成应用打包
- 了解常见问题的应对策略
- 能够将应用分发给用户
关键思考点
通过这个案例,你学到了什么?
从网页到应用的跨越:
- 网页应用:需要在浏览器中打开,用户体验一般
- 桌面应用:独立运行,安装后即可使用,用户体验更好
分发的重要性:
- 好的应用需要让更多人使用
- 简单的分发方式降低用户使用门槛
让 AI 帮你操作:
- 不需要学习 Pake 的具体命令
- 不需要理解打包的技术细节
- 只需要用自然语言告诉 Alma 你想做什么
- Alma 会帮你处理所有技术细节
完整的开发流程:
- 从设计 → 开发 → 测试 → 打包 → 分发
- 这就是一个完整的应用开发流程
- 你现在已经掌握了全流程的核心技能
AI 时代的新工作方式:
- 不需要学习复杂的打包技术
- 不需要理解底层原理
- 只需要知道"用什么工具"、"想做什么"
- 把技术细节交给工具和 AI
这就是"工具比技术更重要"的精髓。
扩展练习:互动游戏设计
本部分为扩展练习,用于训练需求表达与问题预判,不影响主线完成。
案例:英文同义词单词配对
我们要设计一个英文同义词单词配对小游戏。这个游戏的核心在于:你用自然语言告诉 AI 你想要什么样的游戏,AI 来实现它。
目标
制作一个有趣的英文同义词配对游戏,帮助学生学习单词。
第一步:明确目标
目标:创建一个互动的同义词单词配对游戏,用于帮助学生记忆英文单词。
第二步:设计输出格式
游戏结构:
- 游戏类型:单词配对游戏(左右配对)
- 配对内容:英文单词 ↔ 同义词
- 界面形式:网页(HTML + JavaScript)
- 保存位置:
lesson-5/游戏/synonym-game/index.html(当前项目目录)
数据格式:
游戏内容 = [
{ word: "big", synonym: "large", hint: "尺寸" },
{ word: "small", synonym: "tiny", hint: "尺寸" },
{ word: "fast", synonym: "quick", hint: "速度" },
...
]第三步:提出需求
基础提示词
创建一个英文同义词单词配对游戏。提示:先用自己的语言描述需求,再比对答案;或让 Alma 给你生成一版需求描述。
💡 答案提示(点击展开)
查看完整的详细提示词
请创建一个英文同义词单词配对游戏,要求如下:
游戏设计:
- 游戏类型:单词配对游戏(左右配对)
- 左边显示英文单词,右边显示对应的同义词
- 点击单词和同义词进行配对,配对成功则消除
- 配对错误则显示错误提示,不消除
关卡设计:
- 第一关:5个单词对(基础级,如 big-large, fast-quick)
- 第二关:8个单词对(中级,如 happy-joyful, angry-furious)
- 第三关:10个单词对(高级,如 magnificent-splendid, incredible-unbelievable)
数据内容:
每个单词对包含:
- 英文单词
- 同义词
- 中文提示(帮助记忆)
界面要求:
- 清晰的标题:英文同义词连连看
- 显示当前关卡和进度
- 显示得分
- 显示倒计时(限时挑战,超时失败)
- 配对成功显示绿色动画
- 配对错误显示红色震动效果
文件保存:
- 保存到 `lesson-5/游戏/synonym-game/` 文件夹(当前项目目录)
- 主文件名为 `index.html`
- 所有代码(HTML、CSS、JavaScript)写在一个文件里
评分规则:
- 配对成功:+10分
- 配对错误:不扣分
- 限时内通关才计分,剩余时间折算加分
- 三关总分,通关才能看到最终得分
请直接创建游戏文件,不需要问我问题,按照上述要求执行。第四步:应对可能出现的情况
情况 1:AI 询问是否需要更多单词
原因:AI 想确认单词数量
应对提示词:
不需要,请直接使用以下23个单词对:
第一关(基础级):
1. big - large (尺寸-大)
2. small - tiny (尺寸-小)
3. fast - quick (速度-快)
4. slow - gradual (速度-慢)
5. happy - glad (情绪-高兴)
第二关(中级):
6. angry - furious (情绪-愤怒)
7. sad - unhappy (情绪-悲伤)
8. beautiful - pretty (外观-美丽)
9. ugly - unpleasant (外观-丑陋)
10. strong - powerful (力量-强大)
11. weak - fragile (力量-弱小)
12. smart - clever (智力-聪明)
13. stupid - foolish (智力-愚蠢)
第三关(高级):
14. magnificent - splendid (壮观)
15. incredible - unbelievable (难以置信)
16. extraordinary - exceptional (非凡)
17. fantastic - wonderful (奇妙)
18. terrible - awful (糟糕)
19. delicious - tasty (美味)
20. disgusting - nauseating (恶心)
21. generous - charitable (慷慨)
22. greedy - selfish (贪婪)
23. brave - courageous (勇敢)
请使用这些单词对创建游戏。情况 2:游戏界面不够美观
原因:AI 没有理解美观要求
应对提示词:
游戏界面需要更加美观:
1. 使用柔和的配色方案:
- 背景:浅蓝色或浅绿色
- 卡片背景:白色
- 选中状态:浅黄色
- 配对成功:浅绿色
- 配对错误:浅红色
2. 添加动画效果:
- 卡片出现时有淡入动画
- 配对成功时有放大消失动画
- 配对错误时有左右震动动画
3. 字体要求:
- 使用清晰易读的字体(如 Arial, 微软雅黑)
- 字号要足够大(至少 16px)
4. 布局要求:
- 居中布局
- 卡片之间有足够间距
- 响应式设计,适应不同屏幕尺寸
请按照这些美观要求重新创建游戏。情况 3:游戏无法正常配对
原因:JavaScript 逻辑有问题
应对提示词:
游戏配对功能有问题,请检查并修复:
配对逻辑要求:
1. 用户先点击左边的单词(变成选中状态)
2. 用户再点击右边的同义词
3. 判断是否配对成功:
- 如果配对成功:两个卡片都显示绿色,然后淡出消失
- 如果配对失败:两个卡片显示红色震动,然后恢复原状
4. 配对后,重新开始点击(不能重复点击已选中的)
调试重点:
- 检查 id 匹配逻辑
- 检查点击事件处理
- 检查状态重置
请修复后重新创建游戏文件。情况 4:关卡切换不正常
原因:关卡切换逻辑有问题
应对提示词:
关卡切换需要按照以下逻辑:
第一关:
- 显示5个单词对
- 全部配对完成后,显示"第一关完成!"
- 点击"进入第二关"按钮进入第二关
第二关:
- 显示8个单词对
- 全部配对完成后,显示"第二关完成!"
- 点击"进入第三关"按钮进入第三关
第三关:
- 显示10个单词对
- 全部配对完成后,显示"恭喜通关!"
- 显示总分(三关得分之和)
- 点击"重新开始"按钮从第一关开始
关卡切换时:
- 清空游戏区域
- 重新加载新关卡的单词对
- 重置分数和时间
- 更新关卡显示
请修复关卡切换逻辑。第五步:验证结果
验证提示词
请检查游戏是否完整实现了以下功能:
1. 三关关卡设计:
- 第一关:5个单词对
- 第二关:8个单词对
- 第三关:10个单词对
2. 配对功能:
- 点击单词和同义词能够配对
- 配对成功显示绿色并消失
- 配对错误显示红色震动
3. 关卡切换:
- 第一关完成后能进入第二关
- 第二关完成后能进入第三关
- 第三关完成后显示总分
4. 界面效果:
- 动画效果流畅
- 颜色搭配美观
- 响应式布局
- 倒计时结束会提示失败或重新开始
5. 文件保存:
- 文件保存在 `lesson-5/游戏/synonym-game/index.html`
- 代码格式清晰
如果以上功能都正常,请告诉我"游戏验证通过"。如果有问题,请列出需要修复的地方。关键思考点
通过这个案例,你学到了什么?
清晰的需求描述:不是笼统地说"做个游戏",而是详细说明:
- 游戏类型(单词配对,而非通用的连连看)
- 关卡结构
- 数据格式
- 界面要求
- 保存位置
预判问题:提前想到可能出现的问题:
- 单词数量不够
- 界面不够美观
- 功能逻辑有bug
- 关卡切换有问题
准备应对策略:为每个问题准备好提示词,而不是:
- 自己去写代码修复
- 一遍遍让 AI 猜
- 陷入死循环
验证结果:最后全面检查功能是否完整
如何平衡游戏的趣味性和教育价值:
- 关卡设计要有梯度,从易到难
- 评分机制要合理,既要奖励又要激励
- 动画效果要恰到好处,不能喧宾夺主
这就是"人如何说决定了 AI 如何做"的精髓。
本课学到的技能
Part 1:本地数据库应用
理解 IndexedDB 数据库概念
- 数据持久化、CRUD 操作、数据结构设计
- 与 localStorage 的区别
用自然语言描述数据库需求
- 数据表设计、字段定义、功能需求
- 增删改查的具体实现
掌握数据库应用开发流程
- 数据库初始化、数据操作、界面交互
- 错误处理和验证测试
Part 2:应用分发与打包
理解应用分发的价值
- 从网页到桌面应用的跨越
- 提升用户体验,降低使用门槛
掌握 Pake 打包工具的使用
- 基本打包命令和参数
- 常见问题的解决方法
了解应用分发策略
- 版本管理和更新说明
- 用户反馈收集
扩展练习:互动游戏设计(可选)
用自然语言描述游戏设计
- 游戏类型、关卡结构、规则系统
- 清晰的数据格式和界面要求
预判问题并准备应对策略
- 单词数据、界面美观、功能逻辑、关卡切换
验证游戏完整性
- 功能检查、用户体验、代码质量
核心收获
关于"如何说"
- 清晰的目标:不是"做个数据库应用",而是"做一个有CRUD功能的单词本应用"
- 明确的格式:不是"做个表",而是"做一个包含X个字段的数据表,每个字段的类型和约束是什么"
- 预判问题:不是等出问题了再说,而是提前准备好数据库初始化失败、数据操作失败等问题的应对策略
关于"如何思考"
- 系统化思维:从一次性游戏到持久化应用,再到完整分发的跨越
- 数据思维:理解数据是应用的核心,数据结构设计至关重要
- 产品思维:不仅会开发,还要会分发,让更多人使用你的作品
- 工具思维:选择合适的工具,比从零开始更重要
关于"如何协作"
- 信任 AI:让它处理复杂的数据库操作代码
- 保持掌控:你定义数据结构和业务逻辑
- 及时调整:发现问题就优化表达,自己不钻进 IndexedDB 的技术细节
实践建议
- 从简单应用开始:先做个简单的单词本或记事本,熟悉 CRUD 流程
- 积累提示词模板:把常用的数据库提示词保存下来,形成模板库
- 理解数据结构:每次完成后思考:数据结构设计是否合理,如何优化
- 探索更多应用:尝试制作不同的数据库应用(图书管理、任务清单等)
下一步学习
*恭喜你!现在你已经能够:
- 用自然语言描述和设计互动游戏(可选)
- 创建本地数据库应用,理解数据持久化和 CRUD 操作
- 使用 Pake 将网页应用打包成桌面应用,实现完整的应用分发
- 掌握 AI 时代的"思考-表达-协作"工作方法*