Reasonix实战笔记：打造一个「待办事项管理」小程序

1. 实战概述

• 本项目使用Reasonix AI编程助手，通过自然语言指令"创建待办事项管理小程序"，自动生成了基于TypeScript + HTML + CSS的完整项目结构。实现了增删改查、状态筛选、本地存储等功能，并成功部署到华为云服务器。整个过程无需手写代码，展示了AI驱动开发的高效性。

2. 实战步骤

2.1 环境检查与启动Reasonix

• 依次执行命令

  cd.\AgentProjects\ToDoListApp\ node-v git-v npx reasonix code

• 粘贴DeepSeek API key

• 敲回车确认

  ✅关键信息

  • Node.js v24.12.0（兼容现代 TS）
  • Git 已安装（用于版本控制）
  • npx reasonix code启动 Reasonix 会话，进入交互式 AI 编程模式
  • 系统提示粘贴 DeepSeek API Key（需提前在 https://platform.deepseek.com/api_keys 获取）
  • 配置文件保存至：C:\Users\Administrator\.reasonix\config.json

  💡Note：Reasonix 是 DeepSeek 推出的本地化 AI 编程代理，可理解需求 → 生成结构 → 编写代码 → 自动测试/编译。

2.2 输入需求，触发项目生成

• 在 Reasonix 会话中输入

  “帮我创建一个‘待办事项管理’小程序的项目结构，使用 TypeScript + HTML + CSS，包含增删改查功能”

• 📌Reasonix 响应

  • 分析需求 → 规划目录结构
  • 自动生成如下文件树：

    / ├── index.html # 入口页面 ├── style.css # 样式 ├── tsconfig.json # TypeScript 配置 └── src/ └── todo.ts # 核心逻辑（类型定义 + CRUD + DOM 渲染）

• 同时输出tsconfig.json内容（ES2020 + bundler 模式 + strict 检查），确保兼容性与类型安全。
  

2.3 文件创建与编译准备

• Reasonix 自动执行：

  + 新增 tsconfig.json + write_file index.html + write_file style.css + write_file src/todo.ts

  ✅ 所有文件一次性创建完成（共 4 文件），耗时约 22 秒。

• 随后提示：“All files created. Now let me compile the TypeScript and then verify with a quick check…”

• 但首次执行npx tsc报错：

  To get access to the TypeScript compiler, tsc, from the command line either: - Use npm install typescript to first add TypeScript to your project before using npx - Use yarn to avoid accidentally running code from un-installed packages

  ➡️解决方案：手动安装 TypeScript 开发依赖

  npminstalltypescript --save-dev

• 安装成功后再次运行：

  npx tsc

  ✅ 编译成功！生成

  • dist/todo.js
  • dist/todo.js.map

• 项目结构更新为

  / ├── dist/ │ ├── todo.js │ └── todo.js.map ├── node_modules/ ├── src/ │ └── todo.ts ├── index.html ├── style.css ├── tsconfig.json └── package.json / package-lock.json

2.4 项目功能清单与启动方式

2.4.1 项目功能清单

2.4.2 项目启动方式

• 直接双击打开index.html（浏览器自动加载）
• 或命令行：

  # Windowsstart index.html# macOSopenindex.html

• 修改源码后需重新编译：

  npx tsc

2.5 验证小程序运行结果

• 打开D:\AgentProjects\ToDoListApp\index.html，页面呈现
  

  • 标题：待办事项
  • 统计：共 3 项 · 已完成 1 项
  • 输入框 + 「添加」按钮（蓝色）
  • 三个任务卡片：
    • ☐ 学习 TypeScript
    • ✅ 写一份 README（已勾选，文字灰色）
    • ☐ 部署到 GitHub Pages
  • 每项右侧有「编辑」「删除」按钮
  • 底部红色按钮：「清除已完成」

✅ 所有功能均按需求实现，且数据持久化有效（刷新后状态保留）。

• 单击【清除已完成】按钮
  
• 添加新的待办事项
  
• 勾选【学习TypeScript】，表明完成
  
• 查看未完成事项
  
• 查看已完成事项
  

2.6 将项目部署到华为云服务器

2.6.1 登录华为云服务器

2.6.2 检测Tomcat服务是否可用

• 访问http://1.95.173.32:8080/（1.95.173.32是华为云弹性公网IP）
  

2.6.3 将项目部署到Tomcat服务器

• 执行命令：cd $CATALINA_HOME/webapps，进入Tomcat应用目录
  
• 将项目ToDoListApp上传到webapps目录
  
• 执行命令：ll ToDoListApp
  

2.6.4 测试项目是否部署成功

• 访问http://1.95.173.32:8080/ToDoListApp
  

3. 实战总结

• 本次实战利用Reasonix AI编程助手，成功零手写代码构建了一个功能完备的TypeScript待办事项管理小程序。整个过程从环境配置、需求描述、代码生成、编译调试到功能验证一气呵成。项目包含了增删改查、状态筛选、本地存储等核心功能，并最终部署至华为云Tomcat服务器对外访问。实践证明，AI编程代理能极大提升开发效率，将复杂的开发流程简化为自然语言交互，降低了技术门槛，是快速验证想法和构建原型的强大工具。