免费Python学习网站

从0到1：我用 React + Pyodide 打造了一个零后端、游戏化的 Python 学习平台

导语 你有没有想过，让初学者像玩游戏一样学 Python？ 不需要安装任何环境，打开浏览器就能写代码、闯关、获得即时反馈？ 我花时间，用AI开发了一个这样的平台 —— python-web-try。 它拥有 60 个互动关卡、内置 AI 辅助、插件系统和自监控机制，且完全运行在 GitHub Pages 上，服务器成本几乎为零。

今天，我将毫无保留地分享我的技术选型、架构设计、踩坑实录和推广心得。 如果你也想做一款“小而美”的技术产品，这篇文章或许能帮你少走几个月弯路。

一、为什么我要做这个项目？ 我观察到，很多编程初学者卡在“环境安装”这一步，还没写一行代码就放弃了。而市面上已有的在线编程平台，要么需要注册付费，要么交互不够有趣。

我的目标是做一个完全免费、无需注册、打开即玩的 Python 学习工具，把枯燥的语法变成“闯关打怪”的体验。

核心用户画像：

编程零基础的大学生

想快速验证 Python 代码片段的数据分析师

想带学生入门的编程老师

二、技术选型： 模块 技术 选型理由 前端框架 React 18 + TypeScript 生态成熟，类型安全，适合中型项目 构建工具 Vite 5 极速冷启动，HMR 体验好，打包配置灵活 路由 react-router-dom v6 最稳定的 SPA 路由方案 Python 运行时 Pyodide 在浏览器端直接执行 Python，无需后端服务器 数据持久化 localStorage + GitHub Gist 同步 无后端，用户进度存本地，可手动云端备份 样式系统 CSS 变量 + 5 套主题 像素风与现代风双适配，满足个性化需求 监测系统 自研 useMonitor Hook 实时记录组件渲染次数、错误率、性能指标 部署 GitHub Pages + Actions 零成本、自动构建部署，写代码即上线 最具特色的两点：

Pyodide 浏览器端 Python 执行：所有代码运行在用户本地，不占用服务器资源，也保护了用户代码隐私。

AI Agent 自优化：平台内置了一个“经验包”（experiencePack.ts），记录了我开发过程中的所有模块设计、约定、模式、教训。AI 助手可以读取它，在新功能开发时自动遵循已有规范，避免重复犯错。

三、架构设计：如何组织 60 关课程 + 插件系统？ 项目结构清晰分层，避免循环依赖：

text src/ ├── ai/              # AI 经验包、Agent 逻辑（纯 TS，不引 React） ├── components/      # 通用 UI 组件（不引 pages） ├── context/         # React Context（主题、监测等） ├── data/            # 课程内容、关卡配置（纯数据，不引 React/Context） ├── pages/           # 页面级组件（可引 components 和 context） ├── utils/           # 工具函数 └── config/          # 全局配置（版本管理、路由映射） 经验包（experiencePack.ts） 是项目的“大脑”，它包含 7 层信息：

OVERVIEW：项目整体描述

MODULES：各模块职责与依赖关系

CONVENTIONS：命名、目录、提交规范

PATTERNS：常用设计模式（如 PluginShell 统一外壳）

LESSONS：踩坑记录（如：PluginShell 只接受 6 个 props，不要传 description）

COMPONENTS：核心组件接口文档

CONVERSATION_LOG：与 AI 协作的历史记录

每次开发新功能前，我都会让 AI 先 grep 这个文件，避免重复踩坑。

四、核心功能实现亮点

1. 游戏化闯关（60 关） 每关包含题目描述、初始代码、预期输出。

用户点击“运行”后，Pyodide 执行代码，比对输出结果。

通过后解锁下一关，并记录通关时间。

所有关卡数据存储在 data/lessonContent.ts（最大的文件，超过 2000 行）。 学的时侯拉到最下面，上面点不了

1. 蚕食爬虫（Nibble） 一个模拟“代码吞噬”的小游戏，用户通过编写简单的 Python 逻辑，控制爬虫吃掉目标字符。 目前还不能用 意在培养对字符串处理和循环的直觉。

数据层在 data/nibbleLevels.ts，使用 DocumentFragment 管理 DOM 片段（注意避免使用伪 ParentNode）。

1. 插件中心（Plugin Shell）

2. 监测系统（Monitor Context） 每个页面组件必须调用 useMonitor() 注册自身，并定期上报 reportHealth()。

监测数据包括：页面加载时间、组件渲染次数、错误捕获、用户操作流。

这为后期优化提供了数据支撑。

1. AI Agent 自优化 当系统检测到性能瓶颈或错误频发时，会自动生成优化建议，并写入经验包的 PATTERNS 层。

例如：曾发现 nibbleLevels.ts 中误用 ParentNode，AI 自动提醒改为 DocumentFragment，并更新了 LESSONS 层。

五、部署与运维：如何做到零成本？ 代码托管：GitHub 私有仓库（主分支 codex/pack34-kimi-super-evolution-plugins）

CI/CD：GitHub Actions 自动构建 npm run build，并将产物推送到 gh-pages 分支。

访问地址：https://5zdz5.github.io/python-web-try/

成本：GitHub 免费，Pyodide 资源 CDN 免费，域名用 GitHub 默认子域名 —— 每月花费 0 元。

自动部署配置片段（.github/workflows/deploy.yml）：

yaml on: push: branches: [ codex/pack34-kimi-super-evolution-plugins ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: { node-version: 22 } - run: npm install && npm run build - uses: peaceiris/actions-gh-pages@v3 with: { github_token: ${{ secrets.GITHUB_TOKEN }}, publish_dir: ./dist } 六、踩坑实录（附解决方案） 问题 原因 解决方案 构建时 tsc 报错 100+ 类型定义不严谨 强制 npx tsc --noEmit 0 错误才能提交 PluginShell 双重标题 复用组件时未传 embedMode 增加 embedMode 属性，内部条件渲染 经验包字符串单引号闭合 路径如 ‘/games’ 被误解析 统一使用模板字符串或转义 LLM 返回 JSON 带 Markdown 代码块 原始清洗不彻底 使用 sanitizeLLMJSON 三重清洗（提取代码块→截取首尾→清理尾逗号） 页面跳转后状态丢失 未用 useMonitor 注册 强制新页面必须调用 useMonitor() + reportHealth()

功能： 游戏中心 主页

成就中心 进化档案 git 经验包 网页优化

 我的思维模式

还会不断加强，修bug,敬请期待

支持宝宝吧，求求了

下一步计划：

增加“代码对战”模式，用户之间互评代码

开放插件 SDK，让社区贡献课程

集成更多 Python 库（如 numpy、pandas）到 Pyodide 环境

如果你对这个项目感兴趣，欢迎：

⭐ 给 GitHub 仓库点个 Star：https://github.com/5zdz5/python-web-try

🚀 直接体验：https://5zdz5.github.io/python-web-try/