Vibe Coding 实战 Part 2

我用 AI 把“美股看板”升级并发布到了云端，全程只用了三步 在上一篇文章中，我们通过 Google Antigravity 和几句提示词，成功在本地电脑上跑出了一个简易的“美股追踪看板”。 但作为一个追求极致效率的 Vibe Coder，我怎么能忍受它只能在我的电脑上跑？我要把它发布到网上，变成一个可以在手机上随时查看的独立 App。 今天分享 Vibe Coding 的第二篇，如何指挥 AI 进行功能迭代、修复“天书”般的报错，并最终实现零成本的云端部署。 首先来看我的成果：点击访问 Stock Dashboard https://stockdashboard888.streamlit.app/ (注：由于是免费服务器，首次加载可能需要几十秒唤醒) 第一阶段：像产品经理一样提需求 Vibe Coding 的核心不是写代码，而是清晰地描述逻辑。 1. 净化信息流：区分“新闻”与“公告” 初版抓取的数据里，既有《华尔街日报》的分析，也有枯燥的 SEC 8-K 文件。我希望把它们分开。 我的 Prompt： “请修改代码，将信息流分为两类：‘官方公告’和‘媒体新闻’。规则：如果发布者是 PR Newswire、Business Wire 或标题包含 8-K、10-Q，归为公告；其他的归为新闻。在界面上用 Tab 标签页将它们分开显示。” AI 的执行： AI 自动引入了关键词过滤逻辑。现在，我想看财报直接点“公告”栏，想看市场新闻点“新闻”栏，效率翻倍。 2. 给 App 装上记忆：收藏功能 之前版本网页的一个痛点是“刷新即忘”，我需要一个收藏夹来收藏重要的新闻。 我的指令 (Prompt)： “增加一个收藏功能。 在每条新闻旁边加个‘⭐ Save’按钮。 点击后，将新闻标题和链接保存到本地的 bookmarks.csv 文件里。 在侧边栏增加‘我的收藏’列表，读取这个 CSV 文件。” AI 的执行： 几秒钟后，代码更新完毕。我的看板从此拥有了“记忆”，重启电脑后收藏的数据依然存在。 第二阶段：像指挥官一样“修 Bug” 在开发收藏功能时，我遇到了 Vibe Coding 报错。屏幕上出现了一大片红色的字： StreamlitDuplicateElementKey: There are multiple elements with the same key... 如果是以前，我可能直接关机放弃了。但现在，我只需要读懂报错的字面意思：“有重复的钥匙 (Key)”。 当然，更简单的方法是把报错信息复制粘贴到Gemini里去问AI，让AI帮你选择如何修复。 问题分析： 原来，有一篇新闻同时提到了 NVDA 和 MSFT 两只股票。程序在渲染这两个股票的卡片时，给这篇新闻的收藏按钮生成了一模一样的 ID（Key）。系统不知道用户点的是哪一个，所以崩了。 我的修复指令 (Prompt)： “报错显示按钮 ID 重复了。请修改代码逻辑：在生成收藏按钮的 Key 时，不要只用新闻链接，把股票代码 (Ticker) 也加进去拼在一起，确保每个按钮 ID 都是独一无二的。” 结果： AI 修改了一行代码，将 ID 生成逻辑从 link 改成了 ticker_link。报错消失，程序完美运行。 第三阶段：全网发布！保姆级部署教程 现在，我们要把这个跑在本地电脑上的程序，发布到互联网上。 我们将使用 GitHub (存代码) + Streamlit Cloud (跑代码) 的黄金组合。全程免费，无需服务器知识。 1. 收拾行囊：检查 4 个核心文件 在你的项目文件夹里，必须确保有以下 4 个文件（没有就手动新建 txt 文件改名）： stock_dashboard.py (你的主代码) requirements.txt (至关重要！ 这是告诉云端服务器要安装什么软件的清单) 如果你的文件夹里没有，请新建一个 txt，复制以下内容进去保存： yfinance gnews finvizfinance pandas watchdog watchlist.csv (你的初始关注股票列表，里面随便填一行 NVDA 即可) bookmarks.csv (你的初始收藏夹，新建一个空文件，填入表头 Timestamp,Ticker,Category,Title,URL,Source 即可) 2. 把代码上传到 GitHub GitHub 就像是程序员的网盘。 注册并登录 http://github.com。 点击右上角 "+" -> "New repository"。 Repository name：随便填，比如 my-stock-app。 选择 Public (公开)，不要勾选其他任何初始化选项。 点击 Create repository。 在跳转的页面中，点击链接文字 "uploading an existing file"。 把上面准备好的 4 个文件 全部拖进去。 点击底部的绿色按钮 Commit changes。 3. 一键部署到 Streamlit Cloud 这是最后一步！ 打开 http://share.streamlit.io。 点击 "Sign in with GitHub" (用 GitHub 登录) 并授权。 点击醒目的蓝色按钮 "New app"。 填写表单： Repository: 点击下拉框，选中你刚才创建的 my-stock-app。 Main file path: 填写 stock_dashboard.py。 点击右下角的 Deploy!。 4. 见证奇迹 屏幕上会出现“烤蛋糕”的动画。等待约 2 分钟，你的浏览器会自动刷新，展示出你的美股看板！ 总结 回顾一下，我们完全没有手写一行 Python 代码，仅仅通过与 AI 对话： 明确了需求（自动抓取、美股、时区转换）。 迭代了功能（分类公告、本地收藏）。 修复了 Bug（指出了逻辑冲突）。 完成了部署（利用 GitHub 和 Streamlit Cloud）。 下期预告： 现在的 App 虽然能用，但因为是免费云服务，重启后“收藏夹”数据可能会因为不是实时保存而丢失。 下一篇，我们将挑战进阶形态：《给 AI 装上“云大脑”：如何让美股看板连接 Google Sheets，实现永久的数据同步？》(XinGPT🐶)