![]()
「缸脑博物」第10期
1. 概述
项目目标:制作1个能够展示微信公众号文章的小程序
主要功能:能展示文章封面&标题、可跳转查看文章原文
AI工具:CodeBuddy
(官网:www.codebuddy.ai)
项目耗时:约10个小时
开发经验:有一定c#、python经验,但没接触过小程序开发
最终成品:
![]()
2. CodeBuddy是个啥?
首先,我们可以让CodeBuddy做个自我介绍:
![]()
图:直接提问CodeBuddy
额~看起来,回答有些简单。
实际上,CodeBuddy是腾讯云自主研发的AI编程工具。在生态位上,和Cursor、Claude类似,都能够在人类的自然语言驱动下“直接干活”。
由于是腾讯云研发,CodeBuddy对于小程序生态,尤其其中的云开发部分,更为了解和适应。最关键的,能直接执行云开发相关的操作。
![]()
图:CodeBuddy支持各类模型
3. 啥都不懂,就是干!
理论上,Vibe Coding当然就是我用自然语言说需求,工具帮我一键生成。但在实际的工作中,事情显然不可能这么简单。
实际的体感更像是产品和程序大佬之间对需求,会有大量来回拉扯的情况。
而这位程序大佬又有两个特点:一是很多系统的权限它没有,得靠你来帮忙开个门;二是它比较被动,有些事情你不问或者不提,它就当不知道。
接下里,我会列出在整个Vibe Coding过程中的一些关键点,包括需要我手动操作的内容、卡点以及令人印象深刻的部分。
3.1. 创建工程,以及...注册工作
在有了AI后,制作一个小程序最大的工作量,竟然是注册各类账号!
首先,你得注册一个小程序账号,并且下载「微信开发者工具」。这将是我们制作小程序的主要开发工具。
![]()
图:小程序注册,具体的流程可以问元宝
![]()
图:微信开发者工具
另外,我们还需要注册一个云服务器,以支持云开发相关的功能。
![]()
图:云开发控制台界面
注意,我并不是提前知道需要注册的全部内容,而是在制作过程中,由于一些卡点或者CodeBuddy提醒,才根据提示前往注册。
因此,如果不熟悉开发流程和架构是完全没有问题的。自信些!我们与专业的开发者仅存在效率层面的差别。
在这个过程中,无论是CodeBuddy,还是元宝,还是其它任何的AI,都可以解决流程层面的问题。
在「微信开发者工具」中创建工程后,我们直接将工程所在的整个文件夹拖入CodeBuddy中,就实现了两者的“互连”。
![]()
图:CodeBuddy连通了小程序的工程
3.2. 需求沟通
我们首先自然需要告诉CodeBuddy我们的需求。
作为个人开发者,我想要比较“邪修”的偷懒做法,就2步:
● 用人话告诉CodeBuddy我的需求
● 让CodeBuddy整理优化我的需求
只要我确认CodeBuddy理解对了,就直接让它干。剩下的问题都在干中学,更多的功能也在干中加。
总之,对小白来说,有一个你和AI工具能一起聊的直观原型非常重要。
![]()
图:微信开发者工具可预览工程
这里附上我给CodeBuddy的需求描述:
「我想要做一个微信小程序,以下是其需求。请帮整理优化提示词并整理成markdown格式。
● 小程序的主要功能是展示我个人的微信公众号「宅在缸中的脑斯基」的文章,用户能够通过小程序便捷地浏览、查看、查询公众号文章。
● 小程序的主界面能看到每篇文章的封面,封面上有标题、发布时间、评论数量、点赞数等重要信息。我希望一个界面上由两列封面构成。玩家可以滑动屏幕查看更多文章。
● 小程序的主界面最上方应该有个搜索框,可以对整个公众号的文章进行搜索并打开相应的文章页面
● 搜索框的左边是公众号的logo,点击后会跳转到公众号的主页,方便用户关注」
![]()
图:让CodeBuddy梳理下需求
3.3. Debug&功能迭代
应该说,Debug是Vibe Coding中最轻松的环节——每次报错就是把报错都复制给CodeBuddy。
如果不想让它直接改代码,而是先分析定位问题,人为确认后再改动,可以先用「Chat」模式与模型沟通,再启用「Craft」模式让它执行自己的方案。
值得一提的是,你也可以直接上传图片给CodeBuddy来增强它对一些问题的理解。例如当它让你手动执行一些操作而你找不到按钮时,直接丢给它现在的界面截图;又比如小程序的某个功能显示异常,可以把报错连带着错误显示的截图一起丢给AI。
![]()
图:2种工作模式
而增加功能也是一个便捷的事情。例如我想要增加一个能够一键返回顶部的按钮,就可以告诉CodeBuddy:
「现在,我想要在图中差不多的位置加一个按钮,管理员点击后能直接回到最顶部。这样当我浏览到很后面的文章时,能快速回到顶部」
并且丢给它一张示意图,它就大概知道怎么回事了。
![]()
图:懂了么?Buddy
如果嫌它一开始设计的按钮太丑,就直白告诉它,同时附上截图,它会懂得如何修改。
![]()
图:太丑了,哥!
总之,你就把和CodeBuddy对话的窗口当做你和某个程序大佬沟通的企微或者飞书的聊天界面就ok了。
3.4. N轮Debug也无法解决的问题
在整个小程序制作过程中,遇到的最大卡点是「未认证的个人订阅号,无法关联小程序,从而无法走云托管的方式来读取数据」。
按最初的设想,小程序应该直接拉取公众号的数据,然后进行展示。问题在于数据怎么拉?
微信推荐的方式是通过「免鉴权调用账号接口能力」来实现数据的安全读取。简单来说,就是通过在程序之外的绑定关系(靠扫码)来获得数据读取权限。
但问题是,我的公众号属于个人主体,无法申请微信认证,也就无法走官方推荐的数据读取方式。
![]()
图:对CodeBuddy的“拷问”
最后,CodeBuddy建议通过手动上传和维护的方式来实现这个小程序,并且为我制作了相应的管理界面。
![]()
图:小程序的文章管理后台
这里体现了目前Vibe Coding一个比较大的痛点,就是并非所有问题都是代码层面的问题。上面这个卡点,可能Debug了十几轮,CodeBuddy换用了几种不同的方案,都无法解决。
最后问题的定位需要发挥想象力和充分拷问AI。
当然,如果是有经验的开发肯定一开始就知道项目的技术边界在哪里、最佳实现路径是什么,但这主要是因为当前大量的程序是构建在传统逻辑上的;随着整个技术地基被AI重塑一遍,我们对于流程、权限的认知可能会有完全有别于现在的理解。
4. AI编程的“正邪大战”
在各种教程中,我看到一类由程序员出的Vibe Coding教程。它们给我的感觉就像是编程世界里的“名门正派”——他们会手动创建文件夹、文件,并且频繁使用@来精准地让ai针对特定对象进行操作。甚至他们会告诉ai用何种方式、哪种插件来实现某个功能。
对这些名门弟子,AI更像是一个能帮助处理各类重复工作和繁杂任务的外门弟子。定位上更像一种效能工具。
而对于非程序员,AI则更像是某个充满“邪恶能量”的强大法宝。有了AI,即使自身武力低位,也能发挥远超自身的战力。唯一的代价就是有点不稳定,弄不好就走火入魔了(项目卡壳)。
我们也可以从商业范式的角度来观察这种AI编程的不同定位——to B 还是 to C?是成为程序员的效能工具,还是成为每个人的AI程序员?
![]()
图:AI编程的商业范式究竟为何?
在我看来,目前的编程语言,在未来都可能成为像汇编一样的某种“底层语言”,或者说是“中间层语言”,只有少量的专业人员能够理解和使用它们。
更多的人,都直接使用自然语言进行编程(Vibe Coding,氛围编程)。甚至都不是在编程,而是在与AI聊天,让它完成需求。
这带来一个有趣的事情——大量的需求将成为短暂的、临时的甚至毫无意义的存在,可能在某个用户一闪念间产生,而在AI瞬时满足后消失。如同手机普及下的大量拍摄行为,临时而随意。
也许,主流的AI编程将是to C的、如同魔法般的需求处理器。大多数时候,它产出的不是某个app,而是直接跳过app,完成app需要的原始功能。也就是说,to C的AI编程本身就将是终极的app。
而由于精确性和效率,与传统编程结合的AI编程将在一些高精尖的领域呈现高度to B的生态,成为资本手中的利器。
无论怎样,有件事是确定的——AI将深刻改变这个世界的游戏规则,但并非所有的鱼都能上岸。
END
![]()
往期精选
![]()
![]()
![]()
更多游戏资讯请关注:电玩帮游戏资讯专区
电玩帮图文攻略 www.vgover.com
