▲ 社区活动:通过 PostHog + v0 实现快速交付与验证

VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00[无音频]
00:00:30[无音频]
00:01:00[无音频]
00:01:29大家好。
00:01:32欢迎参加本周的 Vercel 社区分享会。
00:01:36很高兴能在这里见到大家。
00:01:41能进行这样的直播环节真的很棒,因为我觉得我
00:01:44已经有一段时间没做了。
00:01:46所以,大家好。
00:01:47[笑声] 如果这是你第一次参加我们的社区会议,
00:01:53我是来自 Vercel 社区团队的 Pauline Navas。
00:01:57你可能在我们的社区平台
00:02:03[www.vercel.com](https://www.vercel.com),或者在 X 或 LinkedIn 上见过我,我经常在那里回答问题
00:02:08并与社区互动,以深入了解大家都在
00:02:12Vercel 上构建什么。
00:02:13所以,这始终是一个与我们的社区、
00:02:18客户以及用户实时连接的机会。
00:02:22太棒了,看到已经有这么多人在这里了。
00:02:25我看到聊天框里 Adam 说了晚上好。
00:02:29哈喽,哈喽,大家好。
00:02:31请在聊天框里留言,让我们知道你今天是从哪里收看的。
00:02:36如果你正在 X、YouTube 或 LinkedIn 上观看,
00:02:39并想加入实时聊天,请访问 [community.vercel.com/live](https://community.vercel.com/live)。
00:02:46你应该能在最上方找到这个环节,然后在聊天框中发表评论。
00:02:53对于今天的会议,每当我们有 Vercel
00:02:58市场集成(Marketplace Integration)的主题时,我都非常兴奋,
00:03:03因为能看到利用我们的集成功能
00:03:07可以在 Vercel 之上构建什么是非常酷的事情。所以今天我们要和 PostHog 聊聊。
00:03:11如果你以前没听说过他们,简单来说,PostHog
00:03:16是一个开源的产品分析平台。
00:03:19你可以把它看作是包含功能开关、A/B 测试、事件追踪,
00:03:25以及基本上所有能帮你了解人们使用你产品时
00:03:29实际情况的工具。
00:03:31让今天的会议特别令人兴奋的是,PostHog 现在
00:03:36直接集成了 v0。
00:03:38这意味着你可以从一个想法直接转变为一个在线实验,而无需
00:03:43离开你的构建器。
00:03:45所以不再是那种“先上线,以后再研究分析数据”的情况了。
00:03:50你可以在构建过程中直接设置功能开关、运行测试,
00:03:55并真正追踪那些自定义事件。
00:03:58那我就不再啰嗦了,嘿,各位,我看到好多人加入了聊天。
00:04:06很好。
00:04:06朋友们,告诉我们你是在哪里收看的。
00:04:09好的。
00:04:10那么废话不多说,我想邀请我们的嘉宾,来自 PostHog 的 Brooker。
00:04:16嗨,Brooker。
00:04:17- 嗨。
00:04:17很高兴来到这里。
00:04:19是的,正如 Pauline 所说,我叫 Brooker。
00:04:21我是增长团队的产品工程师。
00:04:25在开始之前,我会向大家介绍一下 PostHog 提供的内容,
00:04:30以及为什么你会想在 v0 中使用像 PostHog 这样的工具。
00:04:34然后我们会在 Vercel 和 v0 中演示几个使用案例。
00:04:41我会进行现场演示。
00:04:42我们会实际实现其中的一些案例。
00:04:46我想特别介绍两个案例,嗯,我想我应该先从
00:04:49什么是 PostHog 开始讲起,以及作为 v0 和 Vercel 的用户,
00:04:54你为什么会对它感兴趣。
00:04:56比如,你使用了 v0,构建了史上最酷的应用并发布了,
00:05:02你想知道它的运行情况,那你该如何了解呢?
00:05:06你如何理解人们是如何使用你的应用的,他们喜欢什么,
00:05:11不喜欢什么?
00:05:12当出现问题时,你如何察觉?
00:05:15很多时候,你部署了一个应用,它在预览模式下
00:05:19运行良好。
00:05:20也许你自己跑了一些测试,但当它在生产环境中运行时,
00:05:26它会遇到一些你未曾预料到的问题。
00:05:29那时可能会抛出一个异常,如果能对此
00:05:33有可见性,那将非常有帮助,特别是将这种可见性
00:05:39和上下文带入 v0 的 Agent 中,这样 Agent 就能理解
00:05:45生产环境中发生的一切,并为你修复问题,而不需要你
00:05:50四处收集不同系统中的上下文,无论是你的
00:05:55日志系统、错误系统,或者是你自己尝试
00:05:59重现问题并从 Chrome 开发者工具中复制粘贴。
00:06:02并不是说我以前没这么干过。
00:06:04- 我想我们都干过这种事。
00:06:07- 是的。
00:06:09所以,我想展示的一个用例是错误处理。
00:06:13另一个是功能开关和 A/B 测试。
00:06:17说实话,我真的很享受这种开发方式。
00:06:23比如,你正在和团队一起工作。
00:06:26你们在讨论一个想要添加的功能。
00:06:29也许你和你的队友在如何实现这个功能上
00:06:33有不同的意见。
00:06:34比如,我想用这种方式。
00:06:36他们想用那种方式。
00:06:39解决这个问题的一个绝佳方法就是两种都做,然后在
00:06:42生产环境中进行测试,看看哪种方式能给你带来更好的结果。
00:06:46所以我们也要演示一下这个过程。
00:06:48那么话不多说,让我分享一下我的屏幕。
00:06:51我将带你们了解端到端的整个流程。
00:06:55这个账户上已经完成了一小部分准备工作。
00:06:58所以我现在切换到一个尚未安装 PostHog 的账户。
00:07:06如果你们看到我的屏幕了,请告诉我。
00:07:09- 屏幕可见,Brooker。
00:07:11开始吧。
00:07:11- 太棒了。
00:07:12好的。
00:07:12我们现在在 Vercel 中。
00:07:14我们进入集成(integrations)页面,搜索 PostHog。
00:07:18我不知道为什么它显示……哦,浏览市场(Browse Marketplace)。
00:07:21所以我们要进入市场浏览。
00:07:22搜索 PostHog,选择这里的 PostHog,然后点击安装(Install)。
00:07:29系统会询问我是想创建一个新账户还是链接到现有账户。
00:07:32如果你已经有 PostHog 账户,可以直接链接。
00:07:35这个操作会为我做的是……我们就在这里安装它。
00:07:39它会……让我先……抱歉,我没法一边点击一边说话。
00:07:46为什么我必须输入账单地址?
00:07:48好的。
00:07:49你需要填写这个表单。
00:07:52点击继续。
00:07:53这实际上会同步你的……让我给你们看看它会做什么。
00:07:59它会同步你的环境变量,这样如果我转到设置(Settings)……
00:08:06噢,我还是看概览(Overview)吧。
00:08:09哦,我以为我已经安装过了。
00:08:14我们快点操作一下。
00:08:15我们要为一个项目安装它。
00:08:17所以我正在挑选我想安装到的项目。
00:08:20点击继续。
00:08:22太好了。
00:08:23这会……所以我选好了项目。
00:08:25让我看看。
00:08:30抱歉,我以为我这里已经有一个了。
00:08:32噢,我知道原因了。
00:08:33我只是选错了账号。
00:08:35我想应该是这一个。
00:08:37- 顺便说一下,这样一边调试一边演示步骤是最棒的。
00:08:41这太棒了。
00:08:42- 是的。
00:08:44好的,是的,我在这里连接好了。
00:08:47所以我想展示的是,这个集成非常酷的一点是,你
00:08:51不需要自己去管理环境变量。
00:08:55如果你有这方面的经验,就知道这并不好玩,尤其是当你
00:08:59需要轮换密钥时,而轮换密钥通常是个好主意。
00:09:03所以,Vercel 与 PostHog 的集成实际上会为你处理所有这些工作。
00:09:08你只需要像我刚才演示的那样,点击完成安装过程即可。
00:09:12방금 보여드린 것처럼요.
00:09:13它还处理计费问题,不过我们有非常慷慨的免费额度。
00:09:17所以希望你在起步阶段不需要考虑这个,直到你的产品
00:09:21大获成功,到那时这就会是你最不需要担心的事了。
00:09:24但是,是的,这会自动同步你的环境变量。
00:09:28我们这里需要的主要内容是 PostHog host……我不打算直接展示它们,
00:09:33因为我不想因此被指责,但 host 只是一个 URL。
00:09:39所以它大概就是 us.i.posthog.com 这样的。
00:09:43这个 PostHog key 是最重要的部分,它会告诉 PostHog,
00:09:48向 PostHog 标识你的项目。
00:09:50因此,当你的应用程序在生产环境中运行,并且错误、使用情况
00:09:58以及功能开关被报告回 PostHog 时,这个密钥就是用来
00:10:02将你的产品与 PostHog 项目关联起来的标识。
00:10:07所以能在这里自动设置好这些真的非常有用。
00:10:12关于 Vercel 这边有什么问题吗?
00:10:16它非常简单。
00:10:17我刚才只是粗略带过,还遇到了一些小问题,很抱歉。
00:10:21但基本上,你安装它,将其链接到你想
00:10:25使用它的 Vercel 项目,然后你就可以开始了。
00:10:28另外,我们这里有一些入门指南。
00:10:32如果你设置了功能开关,可以在这里看到它们。
00:10:35我现在在这个项目里还没有,但一分钟后就会有了。
00:10:40- 是的,这太棒了。
00:10:41我想说,现在还没有提问,这说明它确实非常无缝。
00:10:47我刚才在聊天中问了,有没有人以前尝试过这个集成?
00:10:51所以如果你用过,一定要告诉我们,并随提随问。
00:10:54- 好的,随时可以打断我。
00:10:58那我们现在开始演示吧。
00:10:59我有一个正在运行的应用。
00:11:01我做了一个小游戏。
00:11:02叫作 Hog Hop。
00:11:04这儿有个小 PostHog(小猪形象)。
00:11:06这里有些虫子跑来跑去,我正试图收集数据点。
00:11:12Max 正在跳来跳去收集数据点。
00:11:15我遇到了一个 Bug。
00:11:16当我收集到某些特定数据点时,画面就卡死了。
00:11:21我现在什么也做不了。
00:11:23我在生产环境中遇到了这个问题,我需要帮助来查明原因。
00:11:28正如我之前提到的,我可以打开开发者工具。
00:11:32我可以去查看 Vercel 的日志来尝试寻找错误。
00:11:41但我将向你们展示如何不需要做这些繁琐的工作。
00:11:44在 v0 中,你可以收集到关于该错误所需的全部上下文,并直接在
00:11:50那里修复它。
00:11:51首先,我来展示如何添加 MCP。
00:11:54在 v0 聊天框的左下角,有一个小加号按钮,
00:12:01里面有一个 MCPs 的选项。
00:12:04你只需点击“Add MCP”。
00:12:06PostHog 已经被设置为一种预设的 MCP。
00:12:10我已经为这个项目连接好了,所以我不打算断开它。
00:12:13你只需要点击那个加号,然后它会要求你登录
00:12:18你的 PostHog 账户。
00:12:19我刚才没展示的一点是,当你通过 PostHog
00:12:25和 Vercel 创建这个集成时,你会得到一个“在 PostHog 中打开”的按钮,它会让我
00:12:30直接登录 PostHog,而无需管理凭据之类的东西。
00:12:36我已经登录了,然后在 v0 中,当我想连接 MCP 时,
00:12:42我只需点击进行身份验证,它就会打开一个 PostHog 标签页来验证
00:12:48该 MCP。
00:12:50我刚才意识到我还没定义什么是 MCP,非常抱歉。
00:12:52MCP 即“模型上下文协议”(Model Context Protocol),它基本上是一种收集信息的方式,
00:12:58赋予 Agent(即 v0 Agent)收集信息或
00:13:03调用与该账户相关联的功能的能力。
00:13:07在这个例子中,我们的意思是:“嘿 v0,如果你需要询问任何问题或管理
00:13:14PostHog 中的事务”,这是一个功能非常齐全的产品,
00:13:19PostHog 的 MCP 也是如此,所以你可以在里面做很多事情。
00:13:24我来演示一下...我们有份文档...PostHog 文档中的模型上下文协议 (Model Context Protocol)。
00:13:29这里展示了你可以做的所有事情。
00:13:33看到这个列表别觉得压力太大。
00:13:35这些都已经加载到智能体中了。
00:13:36所以你其实可以直接问:“我能用 PostHog MCP 做什么?”
00:13:42它就会告诉你。
00:13:43只需确保我把这里的小开关打开了。
00:13:50好,我想在这里展示的是,再次强调一下,
00:13:55当我尝试收集这第三个数据点时,我遇到了一个 Bug。
00:14:00它直接卡住了。
00:14:01所以我要在这里描述一下。
00:14:04它告诉了我所有可以用 PostHog MCP 做的事。
00:14:08所以我要向智能体描述那个问题。
00:14:10我要说:“当我用 max 收集数据点时,有时会卡住。
00:14:23你能利用 PostHog MCP 的错误信息找到这个 Bug 并帮我修复吗?”
00:14:35在它处理的时候,我顺便展示一下 PostHog 的仪表盘。
00:14:39在 PostHog 里,我可以进入应用(apps)然后点击错误追踪(error tracking)。
00:14:47就像我说的,PostHog 能做很多事情。
00:14:50这里有很多功能你可以去探索。
00:14:55我们现在只重点关注几个,让你对能具体做些什么有个直观的了解。
00:15:01如果你更懂技术,想看看这些错误到底是怎么回事,
00:15:04你可以打开这个查看,比如,你可以...
00:15:11点进错误详情查看堆栈追踪(stack trace)。
00:15:14你可以看到它出现了多少次。
00:15:17还能看到什么?
00:15:20相似的问题。
00:15:21噢,我们来看看那个修复好没。
00:15:25哦,它修好了。
00:15:26好的。下次再等智能体处理时,我再给你们看别的。
00:15:30这里显示它已经修复了。
00:15:32让我看看能不能部署,或者我们可以在预览中测试一下。
00:15:37就这么办吧。
00:15:39好的。
00:15:39我要跳来跳去,收集点东西。
00:15:41噢,它起作用了。
00:15:42太棒了。就这么简单。
00:15:46我遇到了一个 Bug。
00:15:48我告诉它我观察到的现象。
00:15:51甚至如果你没有太多关于如何重现它的信息,
00:15:55你可以给它更少的信息,只让它去查找错误。
00:15:59所以我可以说,PostHog MCP 里还有其他我们需要修复的错误吗?
00:16:09我会加上“今天的”,这样我们就不会翻到太久以前的记录。
00:16:12我还想展示的是“会话重放”(session replay),这是一个非常酷的功能。
00:16:21我可以直接看到 —— 噢,这里看起来效果不太好。
00:16:27噢,真有意思。
00:16:28好吧。我们先跳过这个,但我之后会研究一下。
00:16:33通常情况下,你真的能看到用户在做什么。
00:16:36我想可能是因为我们在由于这个游戏所使用的技术,
00:16:42导致录制画面出问题了。
00:16:44但在其他类型的应用中,绝对不会这样。
00:16:50我在其他应用里从未见过这种情况。
00:16:51所以你可以看到人们是如何使用你的应用的,以及他们可能会遇到什么问题。
00:16:58直接看他们操作的实时视频真的能帮你理解当时的语境。
00:17:04这比单纯查看活动记录、事件
00:17:08或者日志能提供更多的信息。
00:17:13好了,我们还有几个其他的错误。
00:17:16这也是我想强调的一点。
00:17:18作为开发者,你可能并不清楚用户在生产环境中遇到的所有问题。
00:17:25他们可能没向你报告。
00:17:26你自己可能也没遇到过。
00:17:28所以,能直观看到所有的错误对你来说超级有帮助。
00:17:34在这个案例中,我们正遇到几个其他的错误。
00:17:40噢,看起来它们都被修复了。
00:17:43酷。关于这个有什么问题吗?
00:17:47接着我想聊聊功能旗标(feature flags)。
00:17:51聊天框里暂时没问题,不过有一些评论。
00:17:54有人说他们把很多工具集成在了一起,免费额度非常慷慨,
00:18:01而且平台的开发者体验(DX)也非常棒,很高兴听到这些。
00:18:05我其实有个问题,估计你下一部分可能会讲到。
00:18:11除了错误处理之外,PostHog MCP 还有哪些
00:18:19对 v0 用户来说价值很高但容易被忽略的功能?
00:18:23好。在我看来,功能旗标和实验(experiments)是最有益的功能之一。
00:18:30我认为有很多团队和应用还没用上这些,但其实非常有必要。
00:18:38我这就演示一下。
00:18:40好的,没问题。
00:18:41衔接得非常完美。
00:18:42是的。那么我们来添加 —— 在这个案例中,我有这个游戏。
00:18:46我现在没有杀掉那些 Bug 的办法。
00:18:48特别是这个,有个 Bug 在这个小平台上跳来跳去。
00:18:52我很难收集到那个数据点。
00:18:55我的用户也一样。
00:18:57所以我想构建一些额外的功能。
00:19:01那么我们来做个功能,让我的小刺猬能从眼睛里射出激光。
00:19:16但我想对比测试一下不同的功能。
00:19:22所以我在想,激光...
00:19:24我想我们可以做那种经典的,像马力欧一样的。
00:19:27还有 —— 既然如此,我们先开始构建一个多变量功能旗标,其中激光作为一个变量,
00:19:43踩在 Bug 上杀掉它们作为另一个变量。
00:19:52然后 —— 我在这里想展示几件事。
00:19:59MCP 非常强大。
00:20:02绝大多数你在仪表盘上能做的操作,都可以通过 MCP 完成。
00:20:07你可以在仪表盘里做。
00:20:10我给你们看,如果我们去应用(apps)。
00:20:17然后点击功能旗标。
00:20:21你也可以 —— 绝大多数能在 MCP 做的,也可以在这里的聊天框里完成。
00:20:25如果你使用 —— 我就在这开个新标签页吧。
00:20:29噢,标签页里没法聊天。
00:20:33哎呀。
00:20:34我把它弄丢了。
00:20:37开个新聊天,这就行了。
00:20:39我可以给它一个类似的提示词。
00:20:43唯一的区别是,这个聊天显然没法直接更新我的 v0 代码。
00:20:48我必须点接受。
00:20:52但我还是可以用它来管理功能旗标。
00:20:55或者在这里,我可以创建一个功能旗标,通过 —— 它现在应该正在创建。
00:21:01开始了。
00:21:02来了。
00:21:03实验,创建。
00:21:04我可以通过 UI 界面创建它。
00:21:07我在这里展示如何通过 v0 智能体使用 MCP 来创建,是因为我发现
00:21:16在像 v0 这样的智能体里能做的操作越多越好。
00:21:20我不想把时间花在到处点、去学习一个新的 UI 界面上。
00:21:24虽然仪表盘非常酷,我也很喜欢这里的界面,但我更愿意
00:21:31把更多的时间花在 v0 里直接构建。
00:21:35好极了。
00:21:36它已经设置好了这个实验。
00:21:39我们设置了一些指标。
00:21:40这是实验的关键点之一 —— 或者说是最核心的,就是
00:21:47你想要测试的假设是什么?
00:21:49v0 直接帮我们想出了一个假设。
00:21:53这还挺酷的。
00:21:55我可能想读读看,然后更新一下。
00:21:58这里说的是测试哪一个能带来更高的游戏完成率。
00:22:02这很酷。
00:22:03也许我的目标是游戏完成率。
00:22:05但也可能我的目标仅仅是玩游戏的时长。
00:22:09我觉得游戏完成率也挺合理的。
00:22:13所以它把那个设为主指标(primary metric)。
00:22:16所以首先你要想出一个假设。
00:22:18我在测试什么?
00:22:19在这个案例中,我在测试“踩踏”更有趣,还是“激光”更有趣?
00:22:26然后我们要设置主指标。
00:22:29接着还有“次要指标”(secondary metrics)的概念,我认为这非常重要。
00:22:33主指标是你想要达成的核心目标。
00:22:38但对于你添加的任何功能或做出的改变,都可能产生一些
00:22:43次生影响。
00:22:44比如在这里,也许他们每局杀掉的 Bug 数量变多或变少了。
00:22:49比如虽然游戏完成率变高了,但杀掉的 Bug 却变少了。
00:22:52虽然不太可能。
00:22:53或者,“每局死亡次数”是另一个值得关注的点。
00:22:57所以每当你设置实验时,思考一下“我的目标是什么?”
00:23:02这很重要。
00:23:03还要考虑那些可能受到影响,虽然不是
00:23:09核心目标,但在做决策时需要注意的事项。
00:23:14插个小问题,Brooker。
00:23:17如果有人一开始不小心设错了目标指标,在 PostHog 里
00:23:23调整实验有多容易?我的意思是在不丢失 v0 进度的情况下。
00:23:30简单,你可以再次通过 MCP、聊天框或者直接在这里的 UI 里操作。
00:23:36指标旁边有一个小铅笔图标。
00:23:39点它就行。
00:23:41比如,你想把“游戏完成”改成“在应用中停留的时长”之类的。
00:23:46点进去,找一个事件,或者...
00:23:47也许我们决定实际想检查的是他们的“流失率”是否变高了。
00:23:53所以我可以把它改成“页面离开”(page leave)。
00:23:58在这种情况下,我的目标是让这个数值降低。
00:24:00也就是说,我希望用户离开页面的比例变低。
00:24:03所以就是这么简单。
00:24:08就像我说的,你也可以用 MCP 来做,我个人觉得那要方便得多。
00:24:10不错,两种方式都能看到真是太好了。
00:24:16是的。
00:24:19挺好。
00:24:20对。
00:24:21它会自动重新计算。
00:24:22有时我会遇到这种情况,比如我正在运行一个实验。
00:24:23看到结果后,我意识到我有了
00:24:27另一个想问的问题。
00:24:32就像你说的,我想更新我正在追踪的指标。
00:24:33有时候我可能还没有对应的事件或追踪方式。
00:24:36这又是 MCP 能大显身手的地方。
00:24:43你可以说类似“添加一个事件”之类的话。
00:24:46我想想有什么好例子...比如“跳跃”。
00:24:48我可以加上“每次小刺猬跳跃时都添加一个事件”。
00:24:53在这种情况下,对于大多数这类事情,你可能只有在
00:25:02将追踪代码加入应用后的那些事件。
00:25:08那样的话,你可以调整实验的持续时间,让它从
00:25:10某个特定时间开始。
00:25:15你也可以定向...噢,抱歉。
00:25:21实在不好意思。
00:25:22那个,如果你在实验中途改了这些,有没有
00:25:24什么推荐的最佳实践?是应该重启测试,还是可以继续在
00:25:25同一个实验里收集数据?你明白我的意思吗?
00:25:31嗯,好问题。
00:25:38只要你清楚有哪些不同的变化可能会影响到你的实验,
00:25:40我觉得继续同一个实验没问题。
00:25:42但可能会有一种情况,比如同时发生了其他变化,
00:25:48那些变化可能会干扰你的实验结果。
00:25:49所以你要非常清楚自己正在运行的所有测试,
00:25:55以及它们之间可能产生的相互影响。
00:25:59所以我觉得通常来说,如果可以的话,像我们这次做的多变量测试,
00:26:02我同时有踩踏和激光,虽然它默认把激光设成了对照组。
00:26:06但我可能想要一个“没有任何武器”的对照组。
00:26:09把这些全部放在一个实验里会很有帮助,这样你就不会遇到
00:26:15不同实验互相竞争干扰的问题了。
00:26:20理解了吗?
00:26:30嗯,有道理。
00:26:35是的。
00:26:38我们来看看进度...噢,我刚才没把它加进队列。
00:26:39好,完成了。
00:26:41我们有了激光眼。
00:26:42来看看现在运行应用会发生什么。
00:26:45好了,大功告成。
00:26:47激光眼功能上线了。
00:26:48让我们看看现在的应用效果。
00:26:51太棒了。
00:26:52我有激光了,但它杀不死那些小怪。
00:26:57这太逊了。
00:26:58总之,你可能也会遇到这种情况。
00:27:02我没有有效地向 v0 发出提示。
00:27:05所以这不能怪 v0。
00:27:07我只是说“从眼睛里射出激光”。
00:27:10但我没说“用激光杀死害虫”。
00:27:12你也可以针对不同的用户。
00:27:16比如我可以对代理说,“针对我的用户开启‘重踏’功能”。
00:27:23然后我们看看它能不能找到我的用户是谁。
00:27:26这有点在挑战代理和 MCP 的极限,但 MCP 确实
00:27:31具备“查找用户”的能力。
00:27:35并为该用户设置实验变量。
00:27:41你可以针对不同的群体设置不同的变量。
00:27:46如果你想让“澳大利亚的所有人都有激光眼”,
00:27:51你也可以做到。
00:27:53我想我们的时间快用完了吧?
00:27:56我不记得具体时长了。
00:27:57是的,快到了。
00:27:58我刚刚确认了一下。
00:27:59没错。
00:28:00好的。
00:28:02我可以继续演示。
00:28:03但如果你还有其他我没覆盖到的问题,
00:28:08那会很有意思。
00:28:09是的,还有一个问题,对于刚接触
00:28:15实验功能的 v0 用户,你有没有一份清单之类的供大家参考,
00:28:21以避免设置出“糟糕”或具有误导性的实验?
00:28:27这个嘛,我不完全确定。
00:28:31我知道我们有一些指南。
00:28:32我现在不想在直播中费劲去找。
00:28:34但我之后一定会补上一份指南。
00:28:38我们可以。
00:28:39是的,我们绝对可以把它附在本次聊天对话的资源部分。
00:28:43没问题,百分之百。
00:28:44是的。
00:28:45另外,我也鼓励大家去尝试 AI 功能,
00:28:50去向聊天机器人提问,多探索 UI,里面有很多有用的信息,
00:28:55比如我提到的“假设”功能,你在 v0 里可能没看到。
00:28:58所以打开 UI 看看还有哪些可以玩的内容很有帮助。
00:29:02或者直接问 v0。
00:29:05比如问它,“我在这里可能漏掉了什么?”
00:29:10“这个功能还能怎么用?”
00:29:11“我们还能用它做点什么?”
00:29:13所以我鼓励大家尽量利用 v0,
00:29:18或者使用 PostHog AI,这是在 PostHog 里聊天的另一种选择。
00:29:23哇,我甚至都不知道你们有那个。
00:29:26那太酷了。
00:29:27我想我在每次集成分享会上都会问这个问题,但从长期来看,
00:29:35你们有什么计划吗?
00:29:36有什么可以跟我们分享的吗?
00:29:38是的,我们认为软件和产品开发的未来会更加自主化。
00:29:45我认为这已经正在发生了。
00:29:47但我觉得还有很长一段路要走。
00:29:53就像我刚才展示的错误修复功能,我觉得要不了多久
00:29:59这就会成为应用的标配,比如我的应用正在运行,
00:30:04后台有个东西就在自动修复错误,甚至不需要我指示,
00:30:09或许事后我只会收到一份关于发生情况的报告。
00:30:15但归根结底,未来我不想非得去提示 AI 检查错误,
00:30:20我不想在半夜
00:30:24被错误报警吵醒。
00:30:26我认为在未来,某种系统——可能是 PostHog,
00:30:35也可能是 Vercel,或者是两者协作。
00:30:38它们会持续收集信息,错误只是其中之一。
00:30:43还有我展示过的录屏重现、产品分析和实验,
00:30:49我真的需要手动创建不同的指标吗?
00:30:53刚才其实很有意思,我们看到 v0 已经
00:30:57为我们挑选了一些有趣的指标。
00:31:00但在未来,我可能会有一个代理专门监视这些东西,并直接更新代码,
00:31:05根本不需要我给出那么细致的指令,
00:31:14我只需要在战略层面进行引导,比如“我的游戏想要什么样的体验?”
00:31:19“我想要什么样的体验?”
00:31:20“我针对的目标指标是什么?”
00:31:22至于那些底层的工作,我认为大部分都会由
00:31:26自主化流程来完成。
00:31:28自主开发。
00:31:30没错。
00:31:31是的,我非常喜欢那个愿景,因为它与我们
00:31:37在 Vercel 和 v0 所讨论的一切都非常吻合。
00:31:40关键在于缩短从部署到观察的闭环。
00:31:43即在 PostHog 中观察,然后自动进行修复和迭代。
00:31:49太棒了。
00:31:50在结束之前,我想问最后一个问题,因为时间到了。
00:31:56人们该如何参与到 PostHog 社区中呢?
00:32:00我开头提到了 PostHog 是开源的。
00:32:03你们接受贡献吗?
00:32:05我不确定我说的对不对。
00:32:06顺便一说。
00:32:07我是这么读到的。
00:32:08是的。
00:32:09百分之百接受。
00:32:10我们会审核来自世界各地的 PR。
00:32:16还有一个 PostHog 论坛,你可以在里面提问。
00:32:21我们还有线下活动。
00:32:22同样,我手头没有网址,但我回头会发给你。
00:32:26好的,没问题。
00:32:27是的,有线下活动。
00:32:29只要注册就行。
00:32:30使用我们的 App。
00:32:31告诉我们你的想法。
00:32:32通过 X、LinkedIn 或任何你习惯的平台联系我们。
00:32:37让我们知道你的反馈,我们在这些平台上都非常活跃。
00:32:40太棒了。
00:32:41非常感谢你,Brooker。
00:32:43这次分享太精彩了。
00:32:44对于正在观看的各位,如果你有后续问题,请发在
00:32:49聊天区,我们会确保 PostHog 团队能看到并跟进。
00:32:54再次感谢你,Brooker。
00:32:56非常感谢你能抽出时间。
00:32:58谢谢。
00:32:59好的。
00:33:00谢谢邀请我。
00:33:02太棒了。
00:33:03非常感谢大家参加今天的直播和讨论。
00:33:08顺便一提,我们几乎每周都会举办社区直播活动。
00:33:14如果你访问 [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events),就能看到非常清晰的日程表,上面列出了
00:33:21我们所有的线上线下活动。
00:33:24请告诉我们,你希望在下一次社区会议中看到什么集成内容?
00:33:31我们一定会安排上。
00:33:33太棒了。
00:33:34再次感谢大家的参与。
00:33:39希望在下一次直播中见到你们。

Key Takeaway

本文介绍了如何利用 PostHog 与 v0 的深度集成,通过自动化错误追踪和实时 A/B 测试实现快速的产品交付与验证。

Highlights

PostHog 是一个开源产品分析平台,集成了功能开关、A/B 测试和事件追踪等工具。

Vercel 与 PostHog 的集成实现了环境变量的自动同步,简化了开发者的配置流程。

通过 MCP(模型上下文协议),v0 能够直接访问 PostHog 数据并自动修复生产环境中的 Bug。

PostHog 的会话重放(Session Replay)功能允许开发者直观查看用户操作以理解问题背景。

功能旗标(Feature Flags)和多变量实验可以帮助团队在生产环境中验证不同功能的有效性。

未来的软件开发将趋向自主化,系统能够实现自动监控、错误修复和指标优化。

Timeline

开场介绍与 Vercel 社区会议背景

会议由 Vercel 社区团队的 Pauline Navas 主持,她欢迎来自 X、YouTube 和 LinkedIn 等平台的观众。Pauline 强调了社区直播是与开发者实时连接的重要机会,旨在深入了解用户在 Vercel 上构建的内容。她引导观众访问特定网址参与互动聊天,并营造了轻松的会议氛围。本节为接下来的技术分享奠定了基础,展示了 Vercel 对社区互动的重视。

PostHog 平台概述及与 v0 的集成优势

Pauline 介绍了今天的主角 PostHog,这是一个包含 A/B 测试和事件追踪的开源产品分析平台。她重点提到 PostHog 现在与 v0 直接集成,使开发者能从想法直接转变为在线实验。这种集成意味着开发者不再需要先上线再研究数据,而是在构建过程中即可设置功能开关。这种“构建时即分析”的模式极大地提升了开发效率,减少了上下文切换。观众被告知这种无缝衔接将改变传统的产品验证工作流。

PostHog 在生产环境中的核心价值

来自 PostHog 的工程师 Brooker 加入分享,解释了为什么 v0 用户需要像 PostHog 这样的工具。他指出,应用在预览模式和生产环境中的表现往往不同,实时可见性至关重要。通过将生产环境的上下文带入 v0 Agent,AI 可以自动理解并修复异常,而无需手动收集日志。他预告了即将演示的两个主要案例:错误处理和功能开关 A/B 测试。这一部分强调了可见性在现代 DevOps 和 AI 驱动开发中的核心地位。

演示:在 Vercel 市场中安装与配置 PostHog

Brooker 现场演示了在 Vercel Marketplace 中搜索并安装 PostHog 集成的过程。他展示了该集成如何自动处理环境变量同步,避免了手动管理密钥和密钥轮换的烦恼。虽然演示中遇到了一些账号选择的小插曲,但这反而展示了调试的真实过程。他提到 PostHog 提供慷慨的免费额度,适合初创项目在起步阶段无成本使用。最后,他强调了 API 密钥在标识项目和关联生产数据方面的重要性。

实战:使用 MCP 在 v0 中自动修复 Bug

Brooker 演示了一个名为 Hog Hop 的小游戏,并展示了在收集数据点时发生的画面卡死 Bug。他通过 v0 聊天框添加了 PostHog 的 MCP(模型上下文协议),赋予 AI 调用 PostHog 功能的能力。AI 通过分析错误追踪数据,成功定位并修复了代码中的 Bug,整个过程无需离开构建器。他还介绍了“会话重放”功能,虽然游戏技术导致录制异常,但该功能通常能提供用户操作的实时视频。这证明了 AI 与分析工具结合后在自动化运维方面的巨大潜力。

实战:设置功能旗标与多变量 A/B 测试

本节重点讨论了功能旗标和实验功能,Brooker 为游戏角色设计了“激光眼”和“踩踏”两种新技能。他展示了如何在 v0 中通过 MCP 直接创建实验,并让 AI 自动生成实验假设和主指标(如游戏完成率)。他建议在设置实验时不仅要关注核心目标,还要关注可能受到影响的次要指标。Brooker 还演示了如何针对特定用户群体或地理位置开启功能变量。这种敏捷的实验方法允许团队基于真实数据而非主观意见做出产品决策。

未来愿景:自主化软件开发与社区总结

在问答环节,Brooker 分享了对软件开发未来的看法,认为系统将实现高度自主化,能够自动监控和修复错误。他希望未来的开发者只需在战略层面进行引导,而繁琐的底层修复工作由 AI 和分析系统协作完成。随后,他鼓励大家参与 PostHog 的开源社区和线下活动,并提供反馈。Pauline 总结了会议,预告了 Vercel 每周的社区直播计划,并征求下一次集成的建议。直播在积极的氛围中结束,强调了工具闭环对开发者体验的提升。

Community Posts

View all posts