一、需求

本文主要是试用豆包AI编程，入口如下。

一直想做一个RSS Web客户端，这里就以这个需求为例。需求如下：

  1. 界面简洁、美观
  2. 每个RSS源只显示最近3条记录，其他丢弃避免信息太密集
  3. RSS记录明显页面展示图文友好、中英文友好
  4. 为了避免无效访问源页面，定时从RSS源抓取数据并存储到本地比如DB中

二、doubao AI编程

doubao AI编程prompt记录

2.1 完全前端实现

完全前端实现方式，RSS源和抓取的网页数据存浏览器LocalStorage，不支持跨浏览器跨用户跨机器，仅用于demo。支持平台调试。结果如下：

支持安装包完整文件下载到本地运行和调试。下载到本地的好处是可以自己做分发和部署，而且本地部署可以解决网站访问的科学上网问题。

生成的html文件同目录下运行下面命令把当前目录发布成http服务器即可。

python3 -m http.server 8000

AI生成调试过程中遇到下面问题：

  1. form在sandbox提交限制问题
    第一个版本生成的代码中存在form提交限制问题，调试遇到问题后doubao解决方法是：form表单按钮类型从submit改为button，Javascript手动提交表单。

Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.

  1. 跨域问题
    因为前端代码需要访问各个RSS源，存在一个跨域问题。doubao平台的解决方案是通过三方代理比如https://cors-anywhere.herokuapp.com/，通过服务端请求RSS源，同时三方代理返回浏览器时声明允许跨域。不过这个访问是临时性的，需要申请一个测试时间段，仅用于demo。

  1. 网络不通需要科学上网问题
    部分RSS源只能科学上网才能访问，平台有局限性。这个是部署问题，需要自己解决。

2.2 本地部署调试完整前后端应用

Doubao AI编程支持方案和代码的生成，包括后端NodeJS API，MongoDB的代码，但是不支持最终安装包的生成和下载，不支持平台调试。原因如下：

由于平台限制，无法直接提供可下载的压缩包文件，但我可以提供一个一键生成完整项目文件的脚本，您只需复制执行即可在本地生成所有代码文件，步骤如下：

通过shell生成所有的代码目录结构和文件，有点挫但是我试着在本地macbook中运行了一下，能用！

生成项目目录结构如下：

启动服务端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# shell生成项目目录和文件,假设shell文件名genPrj.sh
chmod +x genPrj.sh
./genPrj.sh

# 进入后端目录
cd rss-client/server

# 安装依赖
npm install

# 启动MongoDB
brew update

# 安装mongoDB brew仓库
brew tap mongodb/brew

# 安装community最新版本
brew install mongodb-community

# 启动mongoDB服务
brew services start mongodb-community

# 启动后端服务（确保MongoDB已运行）
npm start

启动客户端

1
2
3
4
cd rss-client/client
# 启动前端应用服务
python3 -m http.server 8001

浏览器访问http://localhost:8001,验收成功！

三、总结

doubao AI编程优势是前端项目页面和项目生成、平台部署和调试，并支持安装包下载本地部署调试，整体页面看着也比较舒服。但是前端解决问题有限，不能满足所有的需求。

后端代码可以生成而且可用。但是平台部署调试不支持，也不支持直接生成本地代码安装包。

长远来看，如果能支持前后端一体的代码生成、部署和调试，本地安装包下载，甚至支持自动部署vercel或者cloudflare类似PAAS平台就把生态打通了，一定会收获一大批开发者拥趸。