zenba.eth

x.com/i/article/2032…

【Vibe Coding 实战 Part 2】我用 AI 把“美股看板”升级并发布到了云端，全程只用了三步 在上一篇文章中，我们通过 Google Antigravity 和几句提示词，成功在本地电脑上跑出了一个简易的“美股追踪看板”。 但作为一个追求极致效率的 Vibe Coder，我怎么能忍受它只能在我的电脑上跑？我要把它发布到网上，变成一个可以在手机上随时查看的独立 App。 今天分享 Vibe Coding 的第二篇，如何指挥 AI 进行功能迭代、修复“天书”般的报错，并最终实现零成本的云端部署。 首先来看我的成果：点击访问 Stock Dashboard 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 就像是程序员的网盘。 注册并登录 github.com。 点击右上角 "+" -> "New repository"。 Repository name：随便填，比如 my-stock-app。 选择 Public (公开)，不要勾选其他任何初始化选项。 点击 Create repository。 在跳转的页面中，点击链接文字 "uploading an existing file"。 把上面准备好的 4 个文件 全部拖进去。 点击底部的绿色按钮 Commit changes。 3. 一键部署到 Streamlit Cloud 这是最后一步！ 打开 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，实现永久的数据同步？》

Get ready to join the Booster Program with @turtledotxyz on #Binance Wallet! 📅 Start Time: September 30, 2025, at 10:00 (UTC). 🎯 Eligibility: Users with 61 or above Binance Alpha Points 🎁 Rewards: 15,000,000 TURTLE ⚠️ Important Note: Tokens from the Booster Program are subject to a lock-up period set by the project team. Please make sure you understand the risks before participating. More details and the Event Portal will be announced soon on the @BinanceWallet X account — stay tuned! 👉 Check for Details: binance.com/en/support/ann…