無他,AI編程就是幹中學!純小白用CodeBuddy暴力手搓微信小程序

「缸腦博物」第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