学习工作
【学习工作赛道】知语 — AI 驱动的个性化初中英语学习平台
让规律自己浮现，让英语不再可怕
0.大家好！我是高校人力资源管理者，也是一名高校老师。我没有技术背景，写代码这件事曾经离我十万八千里。但我的孩子正在丧失学习英语的兴趣——每次翻开课本都是一场拉锯战，背单词像在完成罚单，开口说英语更是想都别想。
于是我试着把脑子里的想法一句句讲给 TRAE 听。我说：“首页要有六个模块入口，用暖橙色和深青色作为品牌色”“名著导读要能搜索书名，AI 生成英文片段和词汇标注”“听力训练要有语音朗读，语速能调节”。让我没想到的是，从6月28日报名到7月13日，每天下班用 TRAE 忙活一个小时，TRAE 真的一步步把这些需求变成了可以运行的代码。
最让我觉得"原来这么简单"的一刻，是部署上线。我以为需要专业运维知识，结果 TRAE 一步一步教我在华为云服务器上装 Docker、配 Nginx、用 PM2 管理进程，整个流程清晰得像照着菜谱做菜。中间遇到 Supabase 自建的 GoTrue schema 报错、PostgREST 识别不到新表等问题，TRAE 也都帮我一一定位解决。
TRAE 帮我跨过的最大的坎，就是"从想法到产品"这堵墙。它让我相信，只要你能把需求说清楚，技术实现不再是障碍。
一、Demo 简介
是什么
知语（ZhiYu）是一个面向初中生的 AI 驱动个性化英语学习平台，同时提供 Web 网站和移动端 App（WebView 封装 APK），已部署上线可实际使用。以 MiniMax 大模型为学习引擎，Supabase 自建部署为后端，通过五维能力画像实现自适应学习路径调度。
面向谁
核心用户：河南省初中生（七至九年级），使用人教版 Go for it 教材。家长群体可查看学习进度和成就，辅助辅导。
主要功能
名著导读
输入书名，AI 生成英文经典片段、词汇标注、阅读指导和理解测验。生成内容自动保存到历史记录，可随时回看、删除。
听力训练
分级听力材料，支持 TTS 语音朗读（14 种英文神经语音），听写对照练习，语速可调（0.5x-1.5x）。
语法精练
按年级/单元系统学习语法，选择题练习 + AI 深度解析错因，提交确认后展示正确答案与讲解。
游戏化机制**
积分（XP）、等级、成就徽章、连续打卡、学习地图，从"要我学"到"我要学"。
Web 端
知语首页：欢迎信息 + 五大学习模块快速入口（阅读、听力、词汇、口语、写作、语法）
登录页面：品牌标识 + 邮箱密码登录
个人主页：学习数据概览
技术栈
知语站在巨人的肩膀上，整合了 30+ 个 GitHub 开源项目构建而成：
| 层级 | 开源项目 |
|---|---|
| 前端框架 | Next.js · React · TypeScript |
| UI 组件 | Tailwind CSS · shadcn/ui · Base UI · lucide · Sonner · CVA · clsx · tailwind-merge · tw-animate-css · next-themes |
| 状态管理 | Zustand · OpenAI Node SDK（用于 MiniMax API 调用） |
| 后端服务 | Supabase（自建） · PostgreSQL · GoTrue · PostgREST |
| API 代理 | Express · http-proxy-middleware · cors · dotenv |
| TTS 语音 | edge-tts（微软神经语音） · Coqui TTS（备选） |
| 移动端 | Expo · React Native · React Navigation · react-native-webview · TanStack Query · Phosphor Icons |
| 部署运维 | Docker · Nginx · PM2 |
| 参考资料 | English-level-up-tips（英语学习内容参考） |
二、Demo 创作思路
灵感来源
我的孩子，已经丧失了学习英语的兴趣。每次翻开课本都是一场拉锯，背单词像在完成罚单，开口说英语更是想都别想。作为家长，我看在眼里、急在心里——不是急着要分数，而是怕他从此把英语当成一辈子的敌人。
于是我决定做一个真正根据自己孩子量身定制的学习工具。它知道他哪里薄弱、哪里卡壳，知道什么难度刚好"跳一跳够得着"，而不是把所有人塞进同一条流水线。
想解决的问题
-
无兴趣：死记硬背、机械刷题，兴趣在反复挫败里被磨灭
-
无方法：教辅千人一面，无法匹配个体差异和薄弱点
-
无成就感：同类错题反复错，口语不敢开口没人陪练
为什么做这个方向
市面上的英语学习产品要么是纯刷题工具（枯燥），要么是通用 AI 对话（不贴合教材）。知语的差异化在于：以教材知识库为底座 + AI 动态生成个性化内容 + 游戏化机制重塑兴趣。先服务好一个孩子，再让更多孩子受益——从畏惧到亲近，从被动接受到主动发现。这就是"知语"名字的由来："知"是领悟与发现，"语"是英语本身。
三、产品界面展示
Web 端界面
Web 端截图
阅读理解模块：分级短文列表，支持按难度（简单/中等/困难）和年级筛选
名著导读模块：输入书名，AI 生成英文经典片段、词汇标注和阅读指导，下方显示历史记录
语法精练模块：按年级/单元系统学习语法
听力训练模块：分级听力材料 + TTS 朗读
设置页面：TTS 语音选择 + 语速调节滑块（0.5x-1.5x）
成就页面：积分、等级、成就徽章展示
移动端 App 界面（APK v0.3.3）
移动端截图
App 首页：六大模块卡片入口
名著导读：搜索 + 历史记录
语法练习完成：结果展示
移动端 App 通过 WebView 加载网站内容，与 Web 端功能完全同步，无需重新打包即可实时更新。
四、Demo 体验地址
在线体验
测试账号：399708655@qq.com | 密码：123456
支持 PC 浏览器和手机浏览器访问。移动端 App（APK v0.3.3）通过 WebView 加载网站内容，无需重新打包即可实时更新。
**推荐体验路径：**登录 → 首页查看五大模块 → 名著导读（搜索"小王子"）→ 语法精练 → 设置页面试试 TTS 语音朗读
五、TRAE 实践过程
整个知语项目从架构搭建到功能开发、从 AI 集成到部署上线，全部使用 TRAE IDE 完成。以下是关键开发步骤，以及每一步中如何借助 GitHub 开源项目：
1 项目架构搭建与品牌设计
使用 TRAE IDE 创建基于 Next.js 16 + TypeScript 的项目骨架。UI 层采用 Tailwind CSS v4 原子化样式 + shadcn/ui 组件库 + Base UI 无头组件 primitives，配合 lucide 图标和 Sonner 通知组件，构建出统一的视觉体系。样式工具链使用 CVA + clsx + tailwind-merge + tw-animate-css，next-themes 实现主题切换。确定品牌色系：暖橙 #D97042 + 深青 #3D8B7A，设计全局错误边界、骨架屏加载、视图过渡动画等基础设施。
Session ID: 【1954277226974764:bad0b9c055aec4b6f5f6b78676998f38_6a3fafb91dcda42e77024dfe.6a3fb1951dcda42e77024e71.6a3fb1951dcda42e77024e6f:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/27 19:18:45)】
Session ID: 【1954277226974764:be63470fa87bc4808d724aff6edffa4f_6a3fafb91dcda42e77024dfe.6a40dee41dcda42e770253c5.6a40dee41dcda42e770253c3:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/28 16:44:20)】
截图：使用 TRAE IDE 生成知语首页，包含五大模块入口和品牌设计
2 五大学习模块开发
依次开发阅读理解（分级短文 + 名著导读）、听力训练（听写对照 + TTS 朗读）、词汇记忆（间隔复习）、口语对话（AI 情景演练）、语法精练（选择题 + AI 错因解析）五大模块。前端状态管理使用 Zustand，轻量高效。每个模块包含列表页、训练页、结果页三个视图，使用 200ms 淡入动画实现视图过渡。
Session ID: 【1954277226974764:3593193f932600fea43aa36bee29d11d_6a3fafb91dcda42e77024dfe.6a41179a1dcda42e77025463.6a41179a1dcda42e77025461:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/28 20:46:18)】
截图：名著导读页面，AI 生成的英文经典片段、词汇标注和历史记录功能
3 AI 引擎集成（MiniMax-M3 大模型）
通过 OpenAI Node SDK 的兼容接口接入 MiniMax-M3 大模型 API，实现名著导读内容生成（书籍介绍 + 5 段经典片段 + 词汇标注 + 阅读指导 + 理解测验）、词汇 AI 解释、口语对话陪练等功能。解决了 API 响应中 </think> 标签和 RichMediaReference 干扰 JSON 解析的问题，设置 max_tokens=8192 确保完整输出。
Session ID: 【1954277226974764:18b63a01f5b1d42312df757e4408890d_6a3fafb91dcda42e77024dfe.6a49f957163fff2beeb66033.6a49f956163fff2beeb66031:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/5 14:27:35)】
4 TTS 语音朗读系统
搭建 Python TTS 服务器（端口 5002），使用 edge-tts（微软神经语音 TTS）提供 14 种英文语音，Coqui TTS 作为可选备选引擎。Next.js API 代理转发请求（/api/tts），前端优先使用服务端 TTS，浏览器 Web Speech API 作为降级方案。支持语音选择、语速调节（0.5x-1.5x）、LRU 缓存（50 条）。英语学习内容部分参考了 English-level-up-tips 开源项目的英语学习方法论。
Session ID: 【1954277226974764:50d36ab3c98c8eb04c100eb147e07c70_6a3fafb91dcda42e77024dfe.6a5432a730557628da95d472.6a5432a630557628da95d470:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/13 08:34:47)】
截图：设置页面 TTS 语音配置，支持 14 种英文神经语音和 0.5x-1.5x 语速调节
5 自建 Supabase 部署（华为云）
在华为云服务器（139.9.35.117）上使用 Docker 自建 Supabase 全套服务：PostgreSQL（端口 5433）、GoTrue 认证（8000）、PostgREST（8001）、Express + http-proxy-middleware 代理（3001）。Nginx 反向代理统一入口（端口 80），PM2 管理进程。前端通过 @supabase/supabase-js 和 @supabase/ssr SDK 连接后端。解决了 GoTrue schema 访问、UUID-Text 类型不匹配、cookie 名称不一致、PostgREST 缓存 schema 不刷新等多个部署问题。
Session ID: 【1954277226974764:9b5c8281254e6ade892e11eeeaf24f07_6a3fafb91dcda42e77024dfe.6a532af530557628da95bb93.6a532af530557628da95bb91:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/12 13:49:41)】
6 移动端 App 打包（Expo + EAS Build）
使用 Expo SDK 57 + React Native 开发移动端，React Navigation 管理路由，react-native-webview 加载网站内容，Phosphor Icons 提供图标，Async Storage 本地存储，TanStack Query 数据请求。EAS Cloud Build 打包 APK（v0.3.3，103.1 MB），解决了 SDK 57 兼容性（splash 属性、usesCleartextTraffic）、npm lock 文件同步、EAS Build 国内网络访问等多个问题。App 通过 WebView 实时加载最新内容，无需重新打包即可更新功能。
Session ID: 【1954277226974764:6bce699ba46fe6267aefb5d752e2508c_6a3fafb91dcda42e77024dfe.6a53803230557628da95ca8b.6a53803230557628da95ca89:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/12 19:53:22)】
7
名著导读历史记录功能
新增 book_guides 数据库表持久化 AI 生成的导读内容，支持历史记录列表、一键加载回看、删除不需要的记录。开发了 GET/DELETE API 路由，前端添加历史记录 UI（加载骨架屏、空状态提示、删除按钮加载态）。调试中发现 PostgREST 启动后缓存 schema 不自动刷新新表的问题，通过重启容器解决。
Session ID: 【1954277226974764:f782dcdfe00a5ee93b2325050658307a_6a3fafb91dcda42e77024dfe.6a54c43fe5785ea8ff04fadd.6a54c43fe5785ea8ff04fadb:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/13 18:55:59)】
截图：名著导读历史记录功能，生成内容自动保存，可一键加载回看或删除
8 Bug 修复与持续迭代
修复了多个关键问题：WebView 中 TTS 不可用（替换为异步 TTS 可用性检测）、ConfirmDialog 弹窗不关闭导致遮罩残留阻止点击（添加 setOpen(false)）、语法模块练习完成后无法进入下一题（同一根因）、TTS 语音列表异步加载（voiceschanged 事件监听 + Android Chrome resume() 调用）等。每次修复后通过 SFTP 上传到服务器、Next.js build、PM2 重启完成部署。
Session ID: 【1954277226974764:4886fb40ceddc65ba346c10a6ce54fe9_6a3fafb91dcda42e77024dfe.6a53b1bd30557628da95d29a.6a53b1bc30557628da95d298:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/12 23:24:45)】
六、开源项目致谢
知语的诞生离不开开源社区的馈赠。以下是在 TRAE 辅助下整合使用的 GitHub 开源项目（按功能分类）：
前端框架与核心
Next.js— React 全栈框架**React— UI 库TypeScript**— 类型安全
UI 组件与样式
Tailwind CSS— 原子化 CSS**shadcn/ui— 组件库Base UI— 无头组件lucide— 图标库Sonner— Toast 通知CVA— 组件变体管理clsx— 类名拼接tailwind-merge— 类合并tw-animate-css— 动画工具next-themes**— 主题切换
状态管理与数据
Zustand— 轻量状态管理**OpenAI Node SDK— LLM API 调用TanStack Query**— 数据请求
后端与数据库
Supabase— 开源 Firebase 替代**PostgreSQL— 关系型数据库GoTrue— 认证服务PostgREST**— REST API
API 代理层
Express— Web 框架**http-proxy-middleware— 代理中间件cors— 跨域处理dotenv**— 环境变量
TTS 语音引擎
edge-tts— 微软神经语音（14 种英文语音）Coqui TTS— 深度学习 TTS（备选）
移动端
Expo— RN 开发平台**React Native— 跨平台移动开发React Navigation— 导航路由react-native-webview— WebView 组件Phosphor Icons— 移动端图标Async Storage**— 本地存储
部署运维
Docker— 容器化部署**Nginx— 反向代理PM2**— 进程管理
参考资料
English-level-up-tips— 英语学习方法论参考
感谢每一位开源贡献者。知语能从一个家长的想法变成可用的产品，正是因为站在了你们的肩膀上。
七、报名帖链接
已通过的社区报名帖：
https://forum.trae.cn/t/topic/49254
做给一个孩子的工具，希望也能照亮更多孩子。
知语，2026 