開發(fā)2小時,修bug2周,我用Trae做了個小程序。

0 評論 4049 瀏覽 5 收藏 14 分鐘

在當今快速發(fā)展的科技時代,AI技術的崛起為開發(fā)者帶來了前所未有的機遇與挑戰(zhàn)。一方面,AI極大地降低了技術門檻,讓更多的創(chuàng)意得以快速實現;另一方面,它也提升了競爭維度,促使人們在認知、方法和時間效率上不斷提升。本文將通過一個開發(fā)者的真實經歷,講述如何利用AI編程工具Trae開發(fā)一款小程序,分享其中的靈感來源、開發(fā)過程以及遇到的困難與解決方法。

前段時間,我和大家一樣,也有一些困惑和焦慮,主要是面對未知、面對不確定性風險時的決策困難——到底選A還是選B,遺憾的是,真實的人生,它沒法A/B測試呀!

我去找一個創(chuàng)業(yè)老哥聊天,他算是我的Life coach,在我迷茫是給到過我不少正確建議,這次我把自己的顧慮、困惑講完之后,他沒直接回答,而是先給我講了一個小故事:

他說,他最近在和女兒玩《雙人成行》的游戲,這是一個解密類的游戲,雙方配合尋寶拿到鑰匙,走出迷宮就能通關成功。

起初,他不敢往前走,生怕記不住來時的路。

但是,后來他發(fā)現,等你真的拿到鑰匙之后,原本空蕩蕩地腳下會出現新的道路,你根本沒必要被原先的路徑所困擾。

別焦慮、別回頭,只管往前走,新的機會一定會跟著你的努力而出現。

這對我有很大的啟發(fā),類似于enlightenment(頓悟)。

其實,我知道很多同學在面對AI這個新事物的沖擊時,多少都會有些迷茫和不知所措,這也是我為何第一次直播分享「AI學習路徑」的原因。

說實話,按照我以往的習慣,我更傾向于精心準備之后再開直播,但聽了他的分享,我慚愧,整天講MVP、講試錯、講敏捷迭代,可真到用的時候,就成了顧慮的借口。

所以,我給自己定了個目標:2天內開播。

不管開播效果如何,只要勇敢地、敏捷地走出這一步,就是成功。

我覺得,這個觀念或態(tài)度,或許可以作為大家對AI學習的參考——別太多顧慮,先找個切入點做起來,培養(yǎng)AI信仰要從沉浸式體驗開始,新的機會密碼寫在下個路標牌上。

好,前言說的多了一些,主要是希望大家心態(tài)調整到位,后面才更能事半功倍,說回今天的主角——「小智文轉圖」。

01 場景是稀缺的,先從熟悉的自身需求出發(fā)

大概三年前,我就有這個需求:在看到優(yōu)秀的文字時,我希望能把「樸素的文字」轉化成「優(yōu)美的圖片」,這樣分享出來效果翻倍。

但是,遍尋各種瀏覽器插件、APP應用,我都沒找到合適的——要么功能復雜、要么體驗極差、要么會員費極貴

前段時間,我突發(fā)奇想,干脆用AI編程自己做一個小程序試試?

說干就干。

讓我沒想到的是,AI編程的能力迭代的如此之強,大概只用了2個小時,我就實現了基礎功能,剩下的更多的是對界面做些迭代、調試bug等。

這個即時的正反饋,讓我很有感觸,也讓我冷靜下來思考:

我越發(fā)覺得,一方面AI毋庸置疑地帶來了巨大的新機會,極大地降低了技術門檻,以至于類似于「小貓補光燈」、「不要臉」這類“無代碼”的現象級產品的出現。

但另一方面,AI客觀上也提升了競爭維度——信息平權和低門檻同步被拉低后,帶來的注定是更高維度的「認知競爭」、「方法競爭」以及「時間效率」。

而在這個更高維度的競爭上,場景是稀缺的,這也是為何我建議大家多從公司業(yè)務或者自身需求的小場景出發(fā)的原因。

你只有先通過一兩個小程序提升了用戶洞察力,才能形成正反饋的閉環(huán),才能發(fā)現更普適的新場景。

不要上來就立志做個百萬級的AI產品,先從滿足自身需求出發(fā),塔雖千層,總要從第一個臺階開始。

02 用Trae來開發(fā):寫好需求提示詞、做好原型圖

首先,這個階段我依然推薦大家用Trae來進行AI編程,兩個原因,一個是可以免費使用Claud3.7(偶爾需要排隊);另一個是Trae的產品迭代速度很快,比如,前幾天就接入了DeepSeek。

當然,如果你懂“無限續(xù)杯”的話,Cursor依然是王者般的存在。

說回開發(fā)邏輯:

從官網下載安裝包之后(官網:Trae IDE),一路點擊“下一步”,安裝完Trae之后,我們只需要在Build窗口表述我們需求即可。

如:

我想開發(fā)一個小程序,主要實現「文字轉圖片」的功能,產品有三個頁面,分別是“創(chuàng)建”、“記錄”、“說明”頁面。

創(chuàng)建頁面以卡片風格呈現,主要有三個卡片區(qū)域,分別為“添加文字”、“頭像、水印設置”、“選擇背景圖片”,每個區(qū)域的功能分別是……

創(chuàng)建頁面是首頁,你要參考我的原型圖來開發(fā),確保樣式和功能邏輯符合原型設計,不要過度自我發(fā)揮。

現在,你幫我創(chuàng)建下該項目。

寫好需求提示詞,并把原型設計的截圖一并附上去,注意,這點也是Trae的優(yōu)勢,可以根據原型圖來設計,我也確實做了簡單的原型設計,事實上,這樣AI執(zhí)行的效果會更理想。

再之后就是點擊發(fā)送,AI便會使用Claud3.5/Claud3.7模型來自動幫你創(chuàng)建項目,速度也很快,然后你安裝一個小程序開發(fā)工具,就可以預覽、調試、修Bug,直到達到令你滿意的效果。

實現的步驟真的不復雜,理論上,全程無代碼確實可以實現。

但這里面有不少坑,說起來話長,鏡哥準備單獨做個直播來分享,但我想先分享幾個實用的經驗,這對你在實操時會有幫助。

03 我踩過的幾個坑

① 不懂得Git代碼管理,項目維護很麻煩

一開始,我不知道怎么做代碼管理,甚至手動復制項目文件夾,相信不少同學都有過類似經歷。

所以,我的第一個經驗,也是給你的第一個AI編程建議是:老老實實地先去B站學習Git代碼操作,不需要很復雜,花一個小時時間,只需要懂一些基礎的發(fā)布、拉取命令即可。

這樣的話,當你修復一個bug時,就可以直接推送到云端。

當然,你也可以利用Trae來操作,而且現在Trae利用DeepSeek可以輔助寫更新日志,寫的還挺準,這點體驗確實很不錯。

另外,當你bug越修越多時(不要笑,Vibe coding遇到這種情況是常態(tài)),你就可以用Git命令幫你恢復歷時版本。

我一開始就是不懂Git,沒有發(fā)布云端進行保存,中間有好幾個版本越修bug越多,只能重新起了新項目。

圖-??通過Trae的源代碼管理,也可以推送代碼

② 不知道正確修復bug的方法

AI生成代碼很快,但是往往會有一些「頑固性Bug」無法修復。

這個時候就很難受,我們又沒有代碼基礎,怎么辦呢?

我的一個經驗是:

不要一股腦地把問題描述完讓AI修復,可以先讓AI復述業(yè)務邏輯,按流程節(jié)點添加到對話中逐條詢問

這樣更容易真正解決問題。

比如,我在群里也分享過這個案例:

起初,我在頭像彈窗時無法選擇別的頭像,怎么選都是默認頭像,我讓AI修復半天,愣是修復不了,還一本正經地回答我修復完成了。

后來,我就讓他復述下和“頭像選擇”相關的業(yè)務邏輯,然后AI就告訴我有哪些業(yè)務邏輯,我就逐條去添加對話驗證。

然后,AI告訴我有個遮罩和選擇頭像也有關系(大家在用Axure畫原型時,肯定都用過遮罩),我就添加對話問AI,這個遮罩的邏輯具體是什么。

果然,AI這次就精準定位到了問題——遮罩關聯的有彈窗關閉事件,遮罩又在最頂層。

這兩個信息很關鍵,這就導致你點擊別的頭像時,其實是點擊的透明遮罩,他就自動關閉了彈窗,就沒有執(zhí)行頭像選擇的事件。

你看,正確地提問時解決問題地關鍵。

我原先直接要答案,調了3、4個小時沒有結果,當我按流程節(jié)點復盤時,只用3分鐘就解決了這個問題。

圖-?? 問題拆解,快速修復bug的有效手段

③ 圖片太大,無法發(fā)布小程序

這個其實也是一個很實用的經驗。

微信小程序代碼包有大小限制,好像圖片資源不能超過200K,而我的業(yè)務邏輯是:把用戶輸入的文字,與背景圖片合成在一起,最終輸出優(yōu)美的圖文效果

而一個背景圖片就是一兩兆,怎么辦?

所以說,問題是驅動成長的關鍵,于是我就網上搜索解決方案,問了Kimi之后,發(fā)現可以用OSS來存儲圖片,之后把URL給到Trae就行,AI會調整代碼邏輯,實現線上加載。

說實話,以往也聽到過OSS,但是自己并沒有技術層面操作過,也不懂什么是Bucket,這次卻用了1個小時就成功接入了阿里云的OSS,之后Trae就用幾分鐘就實現了我的需求。

非常有成就感。

當然,這中間的一個坑是,阿里云的OSS既需要存儲包,還需要流量包,前者消耗的是你的存儲資源,一般不需要太大,后者則是用戶訪問時的流量消耗。

一開始我不知道還需要流量包,只買了存儲包,結果幾個朋友剛體驗一會兒,阿里云就發(fā)來了停服信息。

圖-??利用OSS,在線管理背景圖片

當然,這個項目并不復雜,甚至第一版還有很多問題和缺陷,還是那句話,重點其實是對場景的理解以及真實的實踐,后續(xù)我也會用這個項目和大家詳細分享個中的產品思考。

最后,AI時代,帶給我們無限的想象空間,但是,鏡哥還是想說一句,門外的熱鬧永遠是暫時的,而且永遠追不完的熱點,但這對我們產品崗位來說,競爭優(yōu)勢的內核永遠是產品思維

這或許才是咱們擁抱AI的正確態(tài)度。

希望本文對大家有參考。

本文由人人都是產品經理作者【產品大峽谷】,微信公眾號:【產品大峽谷】,原創(chuàng)/授權 發(fā)布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!