產(chǎn)品經(jīng)理親測:3周用AI編程做出一個(gè)英語學(xué)習(xí)小程序

0 評論 1607 瀏覽 5 收藏 11 分鐘

都說普通人可以使用AI編程開發(fā)產(chǎn)品了,作為產(chǎn)品經(jīng)理的我決定親自試一試,用AI給孩子做一個(gè)背單詞小程序。歷時(shí)3周,踩坑無數(shù),最終成功上線!分享我的真實(shí)經(jīng)歷、踩過的坑和核心結(jié)論:普通人能用AI做產(chǎn)品,但“零基礎(chǔ)”目前仍不現(xiàn)實(shí),編程的基礎(chǔ)知識和產(chǎn)品思維是關(guān)鍵加速器。

緣起:從“看熱鬧”到“動手干”

今年3月份,在B站上看到了各種“AI編程”的視頻,都說普通人可以用AI編程來做自己的產(chǎn)品了。我跟著教程做了幾個(gè)簡單Demo后,我決定自己做一個(gè)能上線的產(chǎn)品。我有信心能做成功, 因?yàn)槲冶绕胀ㄈ藦?qiáng)點(diǎn),本身就是做產(chǎn)品的,而且我還自學(xué)過python和react的一些知識,可以寫簡單的小功能。想來想去,最后決定給我女兒做一個(gè)背單詞的英語學(xué)習(xí)小程序“洛洛的學(xué)習(xí)工具”。我大概花費(fèi)了3周的時(shí)間完成了開發(fā),主要是前后臺聯(lián)調(diào)浪費(fèi)的時(shí)間最多。

我的AI開發(fā)流水賬

首先是需要先寫提示詞,簡單的描述一下需求,讓AI來跟根據(jù)你的需求寫完整的prd需求文檔的。一次是肯定寫的不好,需要不斷的調(diào)整。我這文檔也是一點(diǎn)一點(diǎn)完善的,文檔寫的約詳細(xì),AI來寫代碼的時(shí)候就更容易。

初期的時(shí)候,只做了一個(gè)“單詞閃卡”功能, 之后又新增加的“測一測”和“寫一寫”。需求文檔寫完了后,在讓AI按照需求文檔生成小程序使用的API接口文檔,生成后也要自己檢查一下接口文檔的輸入和輸出參數(shù)是不是自己想要的,如果不是話,就繼續(xù)跟AI描述,讓他來修改文檔。直到你看到文檔大概沒有問題了,就可以讓AI根據(jù)需求文檔來編寫代碼了。

文檔完成后,就可以讓AI根據(jù)文檔先生成一般html的原型圖,看看和自己想想中的樣子是否一樣,如果不一樣就在寫提示詞優(yōu)化原型圖,畢竟優(yōu)化原型圖會比較簡單。

原型圖滿意后,就可以讓AI開始寫代碼了,這中間的過程是比較曲折的,各種的聯(lián)調(diào),各種的改。下面給大家分享一下做每個(gè)功能時(shí)候的大概流程。

小程序的核心功能

說一下小程序中的功能,這個(gè)小程序里面有24種主題單詞。每種主題里面都包含三種學(xué)習(xí)單詞的方式。

第一種,“單詞閃卡”功能

這些單詞的圖片 都是使用coze的工作流來批量生成的。

左右滑動圖片可以切換單詞閃卡。這個(gè)左右滑動的效果,滑動時(shí)圖片傾斜的角度,以及滑動的位置,漸變的消失位置,我是嘗試寫了好幾次提示詞,最終才實(shí)現(xiàn)的。感興趣的可以看首圖有小程序碼體驗(yàn)一下。?在寫提示詞的時(shí)候,要想用AI來實(shí)現(xiàn)好的效果,必須要有一些做產(chǎn)品的知識,否則你都不知道該怎么表達(dá)你的意圖。

錄音和播放錄音的交互效果,也是調(diào)試了很多次。有時(shí)候不光是要寫提示詞實(shí)現(xiàn)功能, 還有一些需要了解的交互設(shè)計(jì)的知識,如何讓用戶錄音和播放體驗(yàn)更好。

第二種,“單詞測一測”功能

這個(gè)功能相對簡單,選擇圖片上對應(yīng)的單詞,選錯了后,會錯誤的提示。在答題完成后,有個(gè)的統(tǒng)計(jì)頁面。但是因?yàn)闆]有做用戶相關(guān)的功能,這些錯誤的單詞也沒有存儲,用戶沒有辦法看到打錯的題,等有空增加一下用戶相關(guān)的功能吧。

第三種,“單詞寫一寫”功能

單詞圖片下面是打亂的字母排序,按單詞正確順序點(diǎn)擊字母,選錯字母的話,當(dāng)前位置的橫線會閃動變紅色, 拼寫成功后會顯示“下一題”的按鈕。這里有個(gè)小問題,當(dāng)單詞比較長的時(shí)候,字母選項(xiàng)就多,看著有點(diǎn)亂,應(yīng)該是當(dāng)字母特別長的時(shí)候,默認(rèn)已經(jīng)填寫了幾個(gè)字母,這樣看起來會比較好一些。

我們在看以下管理單詞的后臺功能

最早我是用了一個(gè)python腳本去批量生成單詞和圖片,后來維護(hù)起來太麻煩了,就又搞了一個(gè)管理后臺。 當(dāng)時(shí)是用Claude 3.5,它還不是那么強(qiáng)大,搞個(gè)前后臺聯(lián)調(diào)的項(xiàng)目很麻煩,經(jīng)常報(bào)錯,有時(shí)候調(diào)試幾個(gè)錯誤就需要消耗1個(gè)賬號的免費(fèi)額度。

“管理主題”頁面??梢宰约涸鰟h改查主題分類。

“管理單詞”頁面。這些單詞都是coze批量生成的,如果對哪個(gè)單詞的圖片不滿意,可以自己再單獨(dú)生成更合適的圖片。

“批量導(dǎo)入”功能。 把這個(gè)json示例扔給Deepseek,或者其他AI工具,讓他生成類似的json格式。然后把生成的json數(shù)據(jù),放入到輸入框中,點(diǎn)擊“處理數(shù)據(jù)”按鈕就可以批量生成對應(yīng)的主題和單詞。

再看一下coze的工作流功能

工作流的輸入是一個(gè)英語單詞,然后分成兩個(gè)主要的分支,一個(gè)是把單詞生成發(fā)音,另一個(gè)是根據(jù)單詞生成圖片內(nèi)容。最后輸出的結(jié)果是個(gè)json結(jié)構(gòu),包含單詞、發(fā)音、圖片。

這個(gè)工作流是可以發(fā)布成API的,這樣我們就可以使用程序去批量生成圖片,不用在coze里面,一個(gè)一個(gè)生成圖片。

部署上線

所有功能都做好了以后,測試沒有問題了, 就需要把后端的代碼部署到服務(wù)器了。我是買了一個(gè)京東云最低配置,促銷價(jià)首頁年28塊錢,網(wǎng)絡(luò)速度不是很快,訪問個(gè)幾十k左右的圖片都有點(diǎn)慢。 在服務(wù)端是裝了個(gè)寶塔來操作服務(wù)器。先把后端項(xiàng)目打包上傳到文件中,然后創(chuàng)建一個(gè)python項(xiàng)目指向這個(gè)文件目錄。 因?yàn)閿?shù)據(jù)量很小,所以我也沒有用數(shù)據(jù)庫,所有的數(shù)據(jù)都是存在一個(gè)json文件中。 等加上用戶系統(tǒng)后,再更換成數(shù)據(jù)庫吧。初學(xué)者就是先能用就行,怎么簡單,怎么來吧。

小程序端的代碼,上傳到小程序后臺來發(fā)布。如果只是自己訪問,申請小程序個(gè)人號就行, 也不需要認(rèn)證,也不需要備案。如果想被搜索到,那就需要認(rèn)證了,個(gè)人賬號認(rèn)證費(fèi)用每年30塊錢。

小程序備案,初審是微信的審核員來審核,他們審核的要求非常嚴(yán)格,小程序名字最好起得普通一點(diǎn),就比較容易審核通過。初審?fù)ㄟ^后會提交給管局審核。我的小程序的名字原來是叫“洛洛愛上背單詞”,但是備案的時(shí)候,不允許有任何學(xué)科類的名詞,無奈,只能改成叫“洛洛的學(xué)習(xí)工具”了。

基本上這個(gè)產(chǎn)品算真正上線了, 普通人可能要經(jīng)歷非常多的挫折才能上線成功。這也僅僅是上線了,想要靠這個(gè)賺錢,離的還很遠(yuǎn)。

通過做這個(gè)產(chǎn)品得出的結(jié)論是, 一個(gè)沒有任何代碼基礎(chǔ),和互聯(lián)網(wǎng)產(chǎn)品知識的人,要想做一個(gè)真正意義上的產(chǎn)品,可能使用目前的AI還是很困難的,需要首先去學(xué)習(xí)一些產(chǎn)品、技術(shù)的基礎(chǔ)知識, 但是比沒有AI之前要簡單太多了。

現(xiàn)在AI編程大模型進(jìn)化的速度非???,感覺每個(gè)月都有驚喜。 這個(gè)項(xiàng)目是我4月份寫的,當(dāng)時(shí)用的Cursor,模型還是Claude 3.5,估計(jì)寫這個(gè)項(xiàng)目用了10多個(gè)賬號的免費(fèi)額度?,F(xiàn)在已經(jīng)是Claude4.1了,比之前強(qiáng)了很多,而且還有涌現(xiàn)出其他的優(yōu)秀的大模型。編輯器也同樣重要,同樣是Claude4的模型,Cursor和 Augment ?就要比 Trae強(qiáng)一些,據(jù)說是因?yàn)樯舷挛墓芾砀靡恍?現(xiàn)在國外的軟件無論是Cursor,還是Augment ?在國內(nèi)使用起來都非常麻煩了。 要想獲得更好的效果,只能等待國內(nèi)的大模型和編輯器進(jìn)步了。

本文由 @還有點(diǎn)夢想的中年P(guān)M 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載

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

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