The Build of learn-with-helen.com

与AI一起开发 Learn-with-helen.com 的历程
in   1 minute read

过去2周，尝试了AI 融入开发，另在此记录一下这次尝试中开发 Learn-with-helen.com 的过程，以作纪念

第0步：技术选型

“我需要开发一个前后端分离的 Web 应用，请推荐我使用目前比较流行的技术栈。选择合适的框架和开发模式，为我生成一个完整的工程架构，并告诉我每个目录的意图。”

这是我在一周前开始这个项目时，向 Cursor 提出的第一个需求。然后经过了无数的问答和几乎没有敲入一行完整代码的情况下，我和 Cursor 一起一步一步完成了这个项目。

拥有 AI 的帮助，我一个人完成了 UI 设计、前端开发、后端开发、数据库设计、CI/CD 部署，以及域名配置、HTTPS 配置等以往可能需要一个小团队或者至少是能自诩为“全栈”的开发者才能完成的工作。这就是 AI 的力量。下面来简单流水式地记录一下整个过程。

一开始，我先是有了一个想法，我的原则就是尽量使用我不是特别熟悉的技术栈，这样我可以尝试 AI 辅助开发的能力边界，同时也能借机熟悉这些技术栈：

在与 Cursor 的沟通中，我们得出了以下的技术选型：

  • 前端使用 React (Npm)
  • 后端使用 Spring Boot (Gradle)
  • 数据库选择 PostgreSQL
  • 使用 Nginx 作为反向代理
  • 使用 Docker 作为容器，用 Docker Compose 来管理容器
  • 把代码放在 Github 上，使用 Actions 来管理 CI/CD 流程
  • 使用 AWS 的 EC2 服务器来部署
  • 挂载域名，并使用 Let’s Encrypt 来开启 HTTPS 访问


第1步：框架搭建

完成最小可运行版本，它只需要满足几个最需要的需求：

  • 前端：一个可以显示登录页面的页面（使用 React, Npm）
  • 后端：一个可以提供登录的 API（使用 Spring Boot, Gradle）
  • 数据库：一个可以存储用户信息的数据库（使用 PostgreSQL）

这个过程中，与 Cursor 一起主要完成了以下几个工作：

  • 在本地安装 PostgreSQL，在 Cursor 帮助下解决了权限问题，并设计了用户信息的数据库，创建了用户表
  • 基于 Spring Boot，结合 Cursor 提供的最佳实践，开发了登录 API（使用了 JWT 传递 token，最简单的版本）
  • 要求 Cursor 设计了登录页面的 UI（初版非常简陋）
  • 在 Cursor 辅助下配置 Node.js 环境，并基于 React，开发了登录页面，并实现了登录功能（基本可用）

至此，一个最小可运行版本完成了，至少验证了整个架构是可行的。在 AI 的帮助下这个过程变得非常迅速，只需要很短的时间即可完成，充分降低了心理门槛。


第2步：容器化

  • 前端 Dockfile 配置确保正常运行
  • 后端 Dockerfile 配置确保正常运行
  • 使用 Docker Compose 配置并运行容器

期间在 Cursor 的帮助下了解了 Docker 和 Docker Compose 的一些配置相关最佳实践，能让我在短时间内获取到高密度的知识。


第3步：功能开发

这是最令人愉悦的一步了，因为终于可以开始创造了。我要做的只是把需求告诉 Cursor，并且吸取了之前的经验我尽可能根据开发模式给出引导性的明确的要求。

同时，当我不满足于 AI 的输出时，我会尝试引导它去寻找互联网上的最佳实践，并通过 “Gaslight” 的方式让它“自信地”输出我想要的结果。

在短短不到三四天的时间，我完成了以下模块的开发，并不断完善中：

  • 用户鉴权模块
  • 课程管理模块
  • 文章管理模块
  • 课程预约模块（待开发）
  • 用户管理模块（待开发）
  • 数据统计模块（待开发）
  • AI 作业管理模块（待开发）


第4步：CI/CD 配置

在这一步，我给自己设定的目标是要用 Github 托管代码，并且使用 Github Actions 来管理 CI/CD 流程。并且希望是使用容器化部署的方案完成自动集成：

  • 注册 Docker Hub 账号
  • 开辟一台 AWS EC2 服务器（完成环境配置）
  • 配置调试 Github Actions 工作流（deploy.yml）
  • 确保当代码推送到指定分支时，Github Actions 能正常触发并完成部署

在对容器化部署及基于 Github Actions 自动化集成不熟悉的情况下，每一步都可能会遇到各种各样奇葩的问题，但好在有 Cursor 的辅助我可以省去非常多的搜索问题解决办法以及从头学习更合理的解决方案应该是什么样的时间。


第5步：域名配置

这一步相对简单，但是叠加了新的部署方式，仍然会遇到不少难以找到解决办法的问题，比如 EC2 Linux 2023 服务器上如何安装 Certbot，以及 Let’s Encrypt 的证书如何挂载到镜像中的 Nginx 容器中等等。这类由多重复杂因素耦合在一起的问题，对于当下的 AI 来说，可能就很难给出解决方案了。我想这是因为它的思考深度还不够，无法理解这些复杂因素之间的相互作用。

  • 从 Godaddy 购买域名
  • 配置域名解析
  • 通过 Let’s Encrypt 获取证书
  • 配置 Nginx 反向代理，允许 443 端口访问

总结

至此，不到一周，我就完在了整个架构的搭建，我可以直接向发布分支提交代码，新的修改便能自动完成集成、部署，并体现在网站上。过程中不仅完成了实现，还学到了非常多的知识。

这 5 步尝试，回头看去，时间不长，步骤不多，但其实如果没有 AI 的辅助，仅靠一人完成，必定需要花费数倍的时间。多花时间不可怕，可怕的是面对如此巨大的成本，未开始就已放弃可能是大概率的事，世界上很多的事都大抵如此。

感谢人工智能所科技突破，以及像 Cursor.ai、V0.dev 这样的 AI 集成工具提供商，把 AI 的力量接入日常工作流之中，并可能在未来彻底改变人们的学习与工作方式。

硬广

另外，顺便为夫人打个硬广，欢迎访问 Learn-with-helen.com 了解并预约课程，祝大家学有所成 ~