2025年10月1日星期三

Sora2发布不到24小时,花了半小时做了国内首款Sora应用,我把全过程都记录下来了!

🎬 半小时做了个Sora应用,我把全过程都记录下来了!从看到新闻到上线产品,只用了30分钟。

🎬 半小时做了个Sora应用,我把全过程都记录下来了!

从看到新闻到上线产品,只用了30分钟。这可能是全网最快的Sora2应用开发实录。

大家好,我是Maynor。

今天早上刷手机的时候,被一条消息震惊了:

OpenAI发布了Sora2!

而且这次不只是生成视频,还能像ChatGPT一样聊天!

作为一个喜欢折腾的程序员,我脑子里只有一个想法:

"能不能马上做一个出来?"

说干就干,半个小时后,我真的做出来了。

不仅做出来了,还开源了,还部署上线了。

今天这篇文章,我就把整个过程完整记录下来,看看一个想法是如何变成产品的。


📱 先看效果

话不多说,先上图:

聊天界面
聊天界面

这是聊天界面,和ChatGPT很像对吧?

视频生成
视频生成

输入文字描述,等30秒,视频就出来了

移动端
移动端

手机上也能用,随时随地

看起来还不错吧?

在线体验地址:https://sora-three-lake.vercel.app (需要魔法)

开源代码:https://github.com/xianyu110/sora

如果你想自己搭建一个,继续往下看。


⏰ 时间轴:半小时发生了什么?

让我们来复盘一下这半小时都做了什么:

🕐 09:00 - 刷到新闻

早上9点,在技术群里看到Sora2发布的消息。

第一反应:**"卧槽,这么快!"**

第二反应:**"有API吗?"**

第三反应:**"我能做点什么?"**

🤔 09:05 - 找API

Google搜索"Sora2 API",发现已经有API代理平台了。

找到了MaynorAPIPro这个平台,注册、充值、获取API密钥。

前后5分钟搞定。

💡 小插曲:充值的时候手抖,差点充了1000块...

💻 09:10 - 搭框架

打开VS Code,新建项目。

技术栈选择:

  • 前端:原生JavaScript(快!)
  • UI框架:Tailwind CSS(CDN引入,不用安装)
  • 后端:Node.js + Express(最熟悉)
  • 部署:Vercel(免费!)

10分钟搭好基础框架。

⚡ 09:20 - 写代码

核心功能:

  1. ✅ 聊天对话(流式输出)
  2. ✅ 视频生成(进度显示)
  3. ✅ 响应式布局(手机能用)

最难的是流式对话,但之前做过类似的,直接复用代码。

🐛 09:25 - 修Bug

测试的时候发现几个问题:

  • API返回格式和预期不一样 → 调整解析逻辑
  • 进度条不显示 → 修改CSS
  • 手机上按钮太小 → 增大点击区域

逐个解决。

🎉 09:30 - 上线!

推送到GitHub,连接Vercel,配置环境变量。

等待1分钟,自动部署完成。

访问域名,成功!

总用时:30分钟


🤷 为什么能这么快?

可能有人会问:"半小时真的能做完吗?"

答案是:在特定条件下,可以。

秘诀1:MVP思维

什么是MVP?

Minimum Viable Product(最小可行产品)。

不是做一个"完美"的产品,而是做一个"能用"的产品。

我只做了3个核心功能:

  • 聊天
  • 生成视频
  • 显示进度

其他的功能(用户系统、历史记录、分享功能等)都没做。

为什么?

因为这些功能不是核心,可以后面慢慢加。

先把最重要的功能做出来,验证想法是否可行。

秘诀2:技术选型

选择自己最熟悉的技术栈:

选项
为什么选它
原生JS
不用学新框架,直接开写
Tailwind CSS
CDN引入,不用配置webpack
Express
最简单的Node.js框架
Vercel
一键部署,不用配服务器

避免使用新技术!

学习新技术会拖慢速度,熟悉的技术才能快速上手。

秘诀3:复用代码

这不是我第一次做流式对话应用了。

之前做ChatGPT的项目时,已经写过类似的代码。

这次直接拿过来用,改改API地址就行。

站在巨人的肩膀上!

秘诀4:AI辅助

我用了Claude Code辅助开发。

遇到不确定的地方,直接问AI:

  • "怎么解析SSE格式的数据?"
  • "如何实现CSS进度条动画?"
  • "Vercel配置文件怎么写?"

AI给的答案,90%都能直接用。

工具用得好,效率提升10倍!


💡 遇到的3个大坑

开发过程不是一帆风顺的,我踩了几个坑:

坑1:API格式不一样

问题:MaynorAPIPro的API返回格式和OpenAI官方的不完全一样。

我按照官方文档写的代码,结果报错。

解决:打开浏览器开发者工具,看实际返回的数据是什么格式。

然后调整代码,适配实际格式。

教训:

不要完全相信文档,以实际测试为准。

坑2:流式数据断断续续

问题:聊天对话的时候,文字显示一卡一卡的,不流畅。

原因:前端处理流式数据的时候,没有做好缓冲处理。

解决:加了一个buffer变量,先把数据缓存起来,再逐行解析。

let buffer = '';

while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    buffer += decoder.decode(value);
    const lines = buffer.split('\n');
    buffer = lines.pop() || ''// 保留未完成的行

    for (const line of lines) {
        // 处理完整的行
    }
}

教训:

流式数据要做好缓冲,否则会丢数据。

坑3:Vercel部署404

问题:部署到Vercel后,访问任何页面都是404。

原因:缺少vercel.json配置文件,Vercel不知道怎么处理路由。

解决:添加配置文件:

{
  "version"2,
"builds": [
    {
      "src""server.js",
      "use""@vercel/node"
    }
  ],
"routes": [
    {
      "src""/(.*)",
      "dest""server.js"
    }
  ]
}

教训:

Vercel部署Node.js应用,一定要配置文件。


🎓 我学到了什么?

这个项目虽然小,但收获很多:

1. 快速验证想法

从想法到产品,只用了半小时。

这证明了:大部分想法,都可以快速验证。

不要等"准备好了"才开始,边做边调整。

2. MVP的威力

不需要做一个"完美"的产品。

只需要做一个"能用"的产品。

上线后,根据用户反馈再迭代。

3. 工具的重要性

选对工具,事半功倍:

  • AI辅助编程(Claude Code)
  • 快速部署平台(Vercel)
  • 组件库(Tailwind CSS)

好工具能节省80%的时间。

4. 开源的价值

我把代码开源了,很快就有人来:

  • 提问
  • 提建议
  • 提PR

这些反馈帮我发现了很多问题,也让项目更完善。

开源 = 免费的测试和反馈。


🚀 你也可以做一个

看完这篇文章,你可能想:"我也想做一个!"

太好了,我来教你。

方法1:直接用我的

最简单的方式,Fork我的项目:

  1. 打开 https://github.com/xianyu110/sora
  2. 点击右上角的"Fork"
  3. 等几秒钟,代码就到你账号下了

然后部署到Vercel:

  1. 访问 https://vercel.com
  2. 用GitHub登录
  3. 导入你Fork的项目
  4. 添加环境变量(API密钥)
  5. 点击部署

5分钟搞定!

方法2:从零开始

如果你想自己写:

第一步:注册API访问 https://apipro.maynor1024.live/ 注册账号,获取API密钥。

第二步:本地开发

# 克隆项目
git clone https://github.com/xianyu110/sora.git
cd sora

# 安装依赖
npm install

# 配置密钥
cp .env.example .env
# 编辑.env,填入你的API密钥

# 启动
npm run dev

第三步:部署上线推送到GitHub,连接Vercel,配置环境变量。

详细教程在我的GitHub仓库里。


💭 一些思考

做完这个项目,我有一些感悟想分享:

关于速度

"快"不是目的,"验证"才是。

快速做出来,是为了快速验证想法是否可行。

如果可行,再花时间打磨细节。

如果不行,及时止损,换个方向。

关于完美

"完成"比"完美"更重要。

很多人有想法,但迟迟不动手,因为想做得"完美"。

结果永远停留在想法阶段。

不如先做出来,再慢慢完善。

关于开源

开源不只是代码,更是态度。

把代码开源,不只是为了分享。

更重要的是:

  • 接受反馈
  • 持续改进
  • 回馈社区

关于AI

AI是工具,不是替代。

AI能帮你写代码、改Bug、优化性能。

但最重要的还是:

  • 你的想法
  • 你的判断
  • 你的决策

AI只是加速器,核心还是人。


📢 最后说几句

这个项目做完后,我把它分享到了:

  • GitHub
  • Twitter
  • 技术社区

收到了很多反馈:

正面的:

  • "太酷了!"
  • "我也想做一个!"
  • "代码写得很清晰!"

负面的:

  • "这不就是套壳吗?"
  • "有什么技术含量?"
  • "半小时做的,能有多好?"

我的回答是:

是的,这就是套壳。是的,技术含量不高。是的,半小时做的,肯定有很多不完善。

但是:

  1. 它能用
  2. 它开源
  3. 它有价值

对于想学习Sora2 API的人来说,这就是最好的教程。

对于想快速上手的人来说,这就是最好的模板。

这就够了。


🎁 彩蛋

如果你读到这里,恭喜你!

我准备了一个小彩蛋:

扫描下方二维码,回复"Sora",我会发送:

  1. 完整的技术文档
  2. 常见问题解答
  3. API使用技巧
  4. 部署避坑指南

🔗 相关链接

  • 在线体验:https://sora-three-lake.vercel.app
  • GitHub仓库:https://github.com/xianyu110/sora
  • 详细文档:仓库里的README.md
  • 问题反馈:GitHub Issues

✍️ 写在最后

从看到新闻,到做出产品,再到写完这篇文章。

整个过程充满了乐趣。

这就是程序员的快乐:

把想法变成现实的能力。

如果你也有想法,不要犹豫,马上动手!

说不定下一个刷屏的项目,就是你做的。


喜欢这篇文章的话,记得:

  • ⭐ 给GitHub仓库点个Star
  • 👍 点个在看
  • 🔄 转发给朋友

我是Maynor,一个喜欢折腾的程序员。

我们下篇文章见! 👋


P.S. 如果你也做了类似的项目,欢迎在评论区分享链接!

P.P.S. 如果遇到问题,可以在GitHub提Issue,我会尽快回复。

P.P.P.S. 这个项目会持续更新,欢迎关注!


图片
图片
图片

没有评论:

发表评论

Claude 4。5 太强了,代码开始贬值了

代码开始贬值,但解决问题的能力并没有 不知不觉,我已经写代码写了近10年了。 当初选择写代码,是因为兴趣,也因为写代码的工资确实高。 可是这几年,我越来越怕,怕有一天,自己被毕业了,找不到工作了。 前些天,一个朋友找我讨论了个需求,具体细节就不说了。 我心想,干脆用 Clau...