临界态AI教育实战课

课程 5:开发一个本地数据库应用 资源下载

综合 30分钟 ★★★

适合人群:已完成课程0-4,对Alma有一定了解的学员

课前准备

  1. 打开自己的 AI课程文件夹
  2. 在里面新建一个文件夹 lesson-5
  3. 在 Alma 里面新建一个聊天,设置该项目的文件夹指向新建的文件夹
  4. 下载本课资源到文件夹

核心理念回顾

在开始之前,让我们再次强调 AI 时代的教学核心:

AI 代理的能力很强大,但是人如何说决定了 AI 如何做。

你的价值在于:

  • 理解业务需求 → 知道要做什么
  • 设定明确目标 → 定义什么才算做好
  • 清晰表达需求 → 让 AI 明白要怎么做
  • 懂得技术边界 → 知道什么能做、什么不能做
  • 解决执行困境 → 帮 AI 走出死循环和迷宫

本课将通过一个主案例 + 一个扩展练习,让你充分体会这一点。


第一部分:本地数据库应用 - 个人单词本

为什么要学数据库应用

在扩展练习中你会做同义词配对游戏,但游戏中的单词是固定的,不能保存自己学到的单词。现在我们要做一个"个人单词本"应用,让你可以:

  • 把学到的新单词添加到单词本
  • 随时查看单词本里的所有单词
  • 修改单词的翻译和备注
  • 删除不需要的单词
  • 关闭浏览器后,单词依然存在(数据持久化)

本课的核心价值

从一次性游戏到持久化应用

特性 同义词配对游戏 个人单词本应用
数据来源 固定在代码中 用户添加
数据保存 不保存 保存到浏览器数据库
使用场景 练习一次 反复使用
完整性 单一功能 CRUD 完整功能

什么是 IndexedDB

用生活类比理解

想象你的电脑里有一个智能文件柜:

文件柜的功能 IndexedDB 的对应
分类存放文件 创建数据库和表
添加新文件 Create(插入数据)
查找某个文件 Read(查询数据)
修改文件内容 Update(更新数据)
删除不需要的文件 Delete(删除数据)
文件一直在柜子里 数据持久化保存

IndexedDB 的特点

特点 说明
本地存储 数据保存在用户浏览器中,不需要服务器
容量大 可以存储几百 MB 的数据(localStorage 只能几 MB)
查询快 使用索引快速查找数据
异步操作 不会阻塞页面,性能好
永久保存 除非用户主动清除浏览器数据,否则一直存在

什么时候用 IndexedDB

场景 推荐技术 原因
存少量数据(如用户设置) localStorage 简单易用
存大量结构化数据 IndexedDB 容量大、查询快
需要后端协作 后端数据库 + API 多人共享数据
单机应用(本课) IndexedDB 完整的前端数据库

案例:个人单词本应用

项目概述

应用名称:个人单词本

核心功能

  1. 添加单词(英文、中文、音标、例句)
  2. 查看单词列表
  3. 编辑单词信息
  4. 删除单词
  5. 复习模式(随机显示单词测试记忆)

数据结构

字段 类型 说明 示例
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 操作的基本思路
  • 为后续学习后端开发打下基础

完整制作流程

按照流程进行。


第一步:明确目标

目标:创建一个个人单词本应用,功能包括:

  1. 添加单词:输入英文、中文,可选填音标和例句
  2. 查看列表:显示所有单词,支持按标签筛选
  3. 编辑单词:点击编辑按钮,修改后保存
  4. 删除单词:点击删除按钮,确认后删除
  5. 复习模式:随机显示单词,测试记忆

界面设计

  • 顶部:应用标题 + 统计信息(共 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

实践任务总结

你需要完成的步骤

  1. 创建项目文件夹 单词本应用/
  2. 在 Alma 中新建聊天,设置工作目录指向 单词本应用/
  3. 使用基础提示词(5个单词版本)向 Alma 提出需求,快速验证功能
  4. 保存代码为 index.html,在浏览器中打开测试
  5. 确认基础功能正常后,使用详细提示词(完整功能版本)生成应用
  6. 在浏览器中打开 index.html,按照测试清单逐项验证功能
  7. 根据测试结果,使用相应的应对提示词向 Alma 反馈问题
  8. 优化代码直到所有功能正常
  9. 测试数据持久化(关闭浏览器后重新打开)
  10. 浏览器兼容性测试
  11. 完成所有功能验证

成功标志

当你完成以下内容时,说明你已经掌握了本课的全部技能:

  • 理解 IndexedDB 的基本概念和优势
  • 掌握 CRUD 操作的思路和实现
  • 能够使用自然语言向 AI 表达数据库需求
  • 能够独立完成数据库应用的开发和测试
  • 理解数据结构设计的重要性
  • 感受完整应用的魅力

第二部分:分发你的应用 - 让 AI 帮你打包(高级技巧,可选)

本节需要用户有一定计算机知识和耐心.

为什么要打包应用

现在你已经做好了个人单词本应用,但是分发 HTML 文件有几个问题:

问题 说明
分发不方便 需要把整个文件夹压缩发送给用户
用户体验差 用户需要解压、双击打开 HTML 文件
兼容性问题 不同浏览器的显示效果可能不同
无法安装 用户无法像安装软件一样安装你的应用

解决方案:使用 Pake 将你的网页应用打包成桌面应用程序

什么是 Pake

Pake 是一个可以将任何网页打包成桌面应用程序的工具,它有以下特点:

特点 说明
多平台支持 Windows、macOS、Linux 都可以打包
简单易用 让 AI 帮你操作,不需要自己学命令
体积小 打包后的应用体积很小
性能好 使用 Rust 编写,性能优秀
免费开源 完全免费,可以商用

完整制作流程

按照流程进行。


准备工作(重要)

在开始打包之前,需要做好两项准备工作:

  1. https://rustup.rs/ 下载 rustup-init.exe,安装rust语言的支持.
  2. 把我们预先提供的pake压缩包文件解压放到工作目录下:确保能够找到库
  3. 准备应用图标:让应用看起来更专业

准备工作 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 用户

  1. 下载你发送的 .exe 文件
  2. 如果提示"Windows 已保护你的电脑",点击"更多信息",然后点击"仍要运行"
  3. 如果杀毒软件报毒,将应用添加到白名单
  4. 双击运行,应用会自动打开,加载你的网页应用

macOS 用户

  1. 下载你发送的 .app 文件
  2. 右键点击应用,选择"打开"
  3. 在弹出的对话框中点击"打开"
  4. 应用会自动打开,加载你的网页应用

Linux 用户

  1. 下载你发送的 .AppImage 文件
  2. 右键点击文件,选择"属性",在"权限"标签中勾选"允许将文件作为程序执行"
  3. 双击运行,应用会自动打开,加载你的网页应用

版本管理

建议在应用名称中包含版本号:

Windows

个人单词本_v1.0.exe
个人单词本_v1.1.exe

实践任务总结

你需要完成的步骤

  1. 确认你的 单词本应用/index.html 可以正常运行
  2. 在 Alma 中,使用基础提示词向 Alma 提出打包需求
  3. 按照 Alma 的指引,完成准备工作(解压 Pake、启动本地服务器等)
  4. 等待 Alma 完成打包
  5. 在 Alma 中,使用验证提示词让 Alma 帮你验证打包结果
  6. 双击运行生成的应用文件
  7. 按照测试清单逐项测试功能
  8. 如果有问题,使用相应的应对提示词向 Alma 反馈
  9. 将应用分享给其他人使用

成功标志

当你完成以下内容时,说明你已经掌握了应用分发的技能:

  • 理解为什么需要打包应用
  • 知道如何用自然语言向 Alma 提出打包需求
  • 能够让 Alma 帮你完成应用打包
  • 了解常见问题的应对策略
  • 能够将应用分发给用户

关键思考点

通过这个案例,你学到了什么?

  1. 从网页到应用的跨越

    • 网页应用:需要在浏览器中打开,用户体验一般
    • 桌面应用:独立运行,安装后即可使用,用户体验更好
  2. 分发的重要性

    • 好的应用需要让更多人使用
    • 简单的分发方式降低用户使用门槛
  3. 让 AI 帮你操作

    • 不需要学习 Pake 的具体命令
    • 不需要理解打包的技术细节
    • 只需要用自然语言告诉 Alma 你想做什么
    • Alma 会帮你处理所有技术细节
  4. 完整的开发流程

    • 从设计 → 开发 → 测试 → 打包 → 分发
    • 这就是一个完整的应用开发流程
    • 你现在已经掌握了全流程的核心技能
  5. 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`
   - 代码格式清晰

如果以上功能都正常,请告诉我"游戏验证通过"。如果有问题,请列出需要修复的地方。

关键思考点

通过这个案例,你学到了什么?

  1. 清晰的需求描述:不是笼统地说"做个游戏",而是详细说明:

    • 游戏类型(单词配对,而非通用的连连看)
    • 关卡结构
    • 数据格式
    • 界面要求
    • 保存位置
  2. 预判问题:提前想到可能出现的问题:

    • 单词数量不够
    • 界面不够美观
    • 功能逻辑有bug
    • 关卡切换有问题
  3. 准备应对策略:为每个问题准备好提示词,而不是:

    • 自己去写代码修复
    • 一遍遍让 AI 猜
    • 陷入死循环
  4. 验证结果:最后全面检查功能是否完整

  5. 如何平衡游戏的趣味性和教育价值

    • 关卡设计要有梯度,从易到难
    • 评分机制要合理,既要奖励又要激励
    • 动画效果要恰到好处,不能喧宾夺主

这就是"人如何说决定了 AI 如何做"的精髓。


本课学到的技能

Part 1:本地数据库应用

  1. 理解 IndexedDB 数据库概念

    • 数据持久化、CRUD 操作、数据结构设计
    • 与 localStorage 的区别
  2. 用自然语言描述数据库需求

    • 数据表设计、字段定义、功能需求
    • 增删改查的具体实现
  3. 掌握数据库应用开发流程

    • 数据库初始化、数据操作、界面交互
    • 错误处理和验证测试

Part 2:应用分发与打包

  1. 理解应用分发的价值

    • 从网页到桌面应用的跨越
    • 提升用户体验,降低使用门槛
  2. 掌握 Pake 打包工具的使用

    • 基本打包命令和参数
    • 常见问题的解决方法
  3. 了解应用分发策略

    • 版本管理和更新说明
    • 用户反馈收集

扩展练习:互动游戏设计(可选)

  1. 用自然语言描述游戏设计

    • 游戏类型、关卡结构、规则系统
    • 清晰的数据格式和界面要求
  2. 预判问题并准备应对策略

    • 单词数据、界面美观、功能逻辑、关卡切换
  3. 验证游戏完整性

    • 功能检查、用户体验、代码质量

核心收获

关于"如何说"

  • 清晰的目标:不是"做个数据库应用",而是"做一个有CRUD功能的单词本应用"
  • 明确的格式:不是"做个表",而是"做一个包含X个字段的数据表,每个字段的类型和约束是什么"
  • 预判问题:不是等出问题了再说,而是提前准备好数据库初始化失败、数据操作失败等问题的应对策略

关于"如何思考"

  • 系统化思维:从一次性游戏到持久化应用,再到完整分发的跨越
  • 数据思维:理解数据是应用的核心,数据结构设计至关重要
  • 产品思维:不仅会开发,还要会分发,让更多人使用你的作品
  • 工具思维:选择合适的工具,比从零开始更重要

关于"如何协作"

  • 信任 AI:让它处理复杂的数据库操作代码
  • 保持掌控:你定义数据结构和业务逻辑
  • 及时调整:发现问题就优化表达,自己不钻进 IndexedDB 的技术细节

实践建议

  1. 从简单应用开始:先做个简单的单词本或记事本,熟悉 CRUD 流程
  2. 积累提示词模板:把常用的数据库提示词保存下来,形成模板库
  3. 理解数据结构:每次完成后思考:数据结构设计是否合理,如何优化
  4. 探索更多应用:尝试制作不同的数据库应用(图书管理、任务清单等)

下一步学习


*恭喜你!现在你已经能够:

  1. 用自然语言描述和设计互动游戏(可选)
  2. 创建本地数据库应用,理解数据持久化和 CRUD 操作
  3. 使用 Pake 将网页应用打包成桌面应用,实现完整的应用分发
  4. 掌握 AI 时代的"思考-表达-协作"工作方法*