本人經管專業,擔任AI產品經理近8年。做夢都在想各種天馬行空的idea,但終究只能因為“不靠譜”而擱置。做夢也想不到,有一天我可以通過 獨立開發 的方式來實現它們!
以下是我過去兩周利用業余時間開發的**款小程序產品:讀啥鴨
?? 按主題自動匯聚各平臺書單
?? 讀啥鴨AI 給每份書單留下毒辣評論~
小程序已經正式上線,歡迎搜索“讀啥鴨”試用~
對于專業開發人員而言這不算什么。
但天知道,我自己把核心功能跑通那一刻有多激動。
以前(在工作沒有特別忙時),業余時間喜歡看書,所以**款練手的小產品自然而然選擇了書的方向。并沒有什么商業考量或者細致的需求分析,更不必經過冗長的討論決策,只是自己喜歡~
做自己喜歡的產品,帶著偏見!
做出這個決定,要追溯到國慶期間讀完知名獨立開發者Pieter Levels的《MAKE:building startups the indie way》 (《創造:以獨立開發者的方式創辦企業》)時不經發出的感嘆:雖然不會寫代碼,但看完《MAKE》我也想做獨立開發者了。
這本書非常棒,有成為獨立開發者想法的朋友去看看。
整本書讓我發生的最大觀念轉變是:以前總認為要先學編程,然后才能做產品,但學編程這個事實在無法讓我興奮,也很長時間無法獲得正反饋。而Levels提倡的是,先開始做產品,碰到什么不會的再邊做邊學。從最開始就感受創造(Make)的樂趣。不用對比什么具體的編程方法或工具,因為根本不重要,先把產品“拼”出來。
雖然觀念轉變了,但真正上路時,還是內心忐忑。
直到遇到下一個“貴人”,是的,大模型!
如果去除注冊小程序、粗略學習一下微信開發者工具基本操作等這些周邊工作。一邊學一邊寫,完成讀啥鴨核心頁面與功能邏輯總計應該花了不過10個小時。注意,這里的“寫”并非寫代碼。并且直到今天這個最新版本,我一行代碼都沒寫。
我主要干了四件事情:
學習相關工具:Cursor、微信開發者工具、小程序后臺向大模型提出清晰的需求,描述盡可能準確無歧義按照模型給出的說明創建相關代碼文件和文件夾,復制粘貼模型給出的代碼試運行測試效果,描述問題或復制報錯信息給模型,然后修改代碼后重新進行測試(這里也不需要寫代碼,但需要有比較強的邏輯思維能力和新概念學習能力)需要說明的是:由于有近8年的產品經驗,我雖然不會寫代碼,但是日常與開發人員溝通,對于一些開發相關的概念(比如前端、后端、函數、編譯、數據庫、對象存儲、大模型…)是有認知的,所以如果您是100%的小白,可能閱讀以下內容過程中需要查閱和理解一些基本概念。不過它們真的不難,并且應該不求甚解,先能跑起來就行,遇到不懂的或者報錯直接搜索或者問大模型,后面慢慢熟練使用了再循序漸進深入理解。
以下通過文字我只描述關鍵步驟,因為有許多調頁面整樣式以及指導模型修bug的工作是比較重復繁瑣的。
好,現在開始描述整個構建過程的關鍵步驟。
小程序后臺登錄注冊地址:
https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN個人就可以進行注冊并且順利完成認證與備案,不過會有一些不允許個人經營的范疇。
微信開發者工具下載地址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html該工具可用于開發小程序、小游戲和插件。
小程序開發微信官方文檔:
https://developers.weixin.qq.com/miniprogram/dev/framework/不用細看,直接開始干就行,只是以防需要的時候可以翻一翻或者搜索
小程序開發官方交流論壇:
https://developers.weixin.qq.com/community/develop/mixflow這個也是碰到問題了再搜索或者提問就行,我關于腳本的定時觸發問題就是在這里解決的。
1.2 開發工具相關
Cursor:https://www.cursor.com/
知名大模型輔助編程工具,就不贅述了,網上有大量介紹資料。大家也可以看我末尾視頻的操作演示,會用基本操作就夠了。
Bolt:https://bolt.new/
如果覺得Cursor還是有一定難度,也可以先嘗試Bolt來建立信心。這個操作就真的很簡單了,會打字就行。
1.3 非必要工作(可略過)
GitHub:https://github.com/
這是用來管理和分享代碼的地方,非必要,代碼在自己電腦上存著就行。我為了感受一下代碼版本管理和代碼開源的過程,所以用了一下。
讀啥鴨代碼開源地址(不是什么優雅的代碼,不必點Star):
https://github.com/wisdomqin/dushaya_readlistPS:使用Cursor與github聯動總是超時,不知道什么原因,所以最后使用Github Desktop來進行代碼同步。賬號在上一步創建好了,這里創建的可以理解為代碼文件夾。打開微信開發者工具軟件,登錄軟件后看到如下界面。
點擊添加按鈕,出現如下頁面
點擊創建按鈕后進入到該產品的開發界面,4個主要區域見下圖。
理論上,傳統的開發工作就是在區域2、3中創建代碼文件和編寫代碼,在區域1預覽效果,在區域4中查看運行信息和報錯信息。
這看起來難度很高,但下面有請Cursor登場。
2.2 Cursor登場
打開Cursor后應該是這個頁面,點擊Open a folder按鈕。
選擇剛才創建小程序時選擇的“目錄”文件夾,然后就會看到如下界面。可以看到左邊就是剛才在微信開發者工具界面中的區域2(代碼文件管理),右邊就是具體編寫某個代碼文件的地方。所以我們在Cursor中編輯的代碼(由于兩邊所指定的目錄位置一致)在微信開發者工具中也同樣會更新。稍后在Cursor中寫完代碼后會回到微信開發者工具中進行預覽調試。
然后點擊下圖中右上角這個按鈕。
你將看到一直陪伴你(哦不對,代碼全是它寫的…)開發助手(雖然有點土,但就這么叫它吧)。
如上圖所示位置可以切換模型,默認應該就是claude-3.5-sonnet,作為Cursor免費用戶,有免費使用的次數(應該是500次),這已經完全夠開發出一款類似讀啥鴨這樣的產品了。 如果沒有看到claude-3.5-sonnet或者選擇了無法使用,可以看下是否在Cursor客戶端沒有登錄賬號。
2.3 正式開始開發
終于到了最激動的環節。來看看我發出的前兩個請求:
我一次性幾乎把讀啥鴨的所有頁面和主要功能邏輯都告訴它了。它給了我設計思路,但幾乎沒什么代碼。
于是我繼續明確要求它幫我寫代碼。這次它幫我把每個頁面的主要代碼都寫了出來。(圖片太長,后面幾個頁面的代碼就省略了)
然后我告訴他我按照他提供的代碼完成了相應文件夾及文件的創建,并把它提供的代碼都復制到了對應文件中。(Cursor要是文件也能自動創建那就更簡單了)
可以看到我把我做了什么事情也會同步給他, 我覺得是挺有用的。對當前狀態和需求的描述盡量清晰準確,有助于它給出更正確的建議和代碼。
然后我就按照以上它給出的一步步把代碼復制到對應的文件中。這個時候我回到微信開發者工具中,就已經發現可以看到粗糙的頁面了(可惜沒有截圖)。但由于沒有數據,所以讓它幫我生成了一些示例數據。
這樣首頁(書單列表)就有了比較真實的樣子。不過默認生成的頁面比較丑,比如提交書單頁是下面這樣。
所以我先調整展示效果。(最開始我想的是簡潔黑白風格)
按照它的代碼進行修改。
這里會碰到一個新情況,這里不是完全新建一個代碼文件,而是在某個已經存在一些代碼的文件中進行修改,而開發助手在輸出代碼時可能會省略一些內容(這是有好處的,就比如我已經寫了1000字的文章,我讓它幫我加一個案例,它沒有必要把我寫好的內容又復述一遍,所以它會說哪里到哪里不變,從哪里開始插入xxxx),此時我們就沒法完全復制粘貼代碼了。
這個時候Cursor有個功能,簡稱為“自動修改”,如下圖所示,只需定位到對應的代碼文件,然后點擊新寫代碼的“apply”按鈕,Cursor就會自動判斷需要在當前代碼的哪里進行 增刪改 。
這個功能非常有用,這也是我不用寫一行代碼就完成開發的重要原因之一。
不過在這里Cursor有時是會犯錯的,比如當整個代碼比較復雜之后,它可能會忘了之前某些代碼是做什么用的,可能會錯誤刪除一些代碼,導致出問題。(因為這里涉及到大模型一個固有的限制,即上下文長度,這個短時間內很難解決。非大模型行業從業者可以忽略底層技術原理,可以簡單理解為 開發助手 的記憶能力有限,只記得跟你最近十幾次或者幾十次的交互內容)
所以有時我們需要適時告訴它某個頁面之前有什么樣的功能,在這個基礎上上讓它修改代碼,或者讓它盡量在不要刪除原代碼功能的基礎上給出修改建議。這里相關的功能演示如下,在提需求和問題時可以帶上相關的代碼。
當然這個過程不像上面我描述的這么簡單,有時也確實會出現代碼改壞了的情況,所以完成重要功能后可以把整個代碼文件夾復制一份進行備份。同時,當你經驗豐富之后,你也能發現這次它應該改壞了,于是可以不急于修改代碼,可以重新表述你的需求,帶上更多的背景信息或者一些限制要求。
這個過程你可以嘗試把它當做一個人,一個真的開發人員來看待,來給他提出要求。比如下面有一個很好的例子。
感覺怎么樣?
當我發現它能準確理解我的需求并解決問題時,真的太爽了。
再比如它有時會給我一段代碼和一些說明,但我并不懂,于是我直接引用那段代碼并問它:
2.4 與云開發環境相關的一些高階功能開發
主要頁面設計和基本交互功能都差不多完成了,我開始考慮如何填充真實數據。于是我先問問它的思路。
考慮得還挺全面的。
我先后構建了兩個功能,一個是用戶提交書單鏈接,我使用大模型能力自動解析鏈接中的書單內容;另一個是每隔20分鐘,自動從網上爬取一些書單內容。
先講**個功能,用戶提交。以下是一個在調試頁面測試的過程:用戶提交書單鏈接,自動解析內容,并給出評級和評價,輸出還帶有打字機效果,在手機端還有震動效果。
從每個書單鏈接中會自動生成書單信息,包括以下幾部分:【書單名稱】、【書單作者】、【書單描述】、【書單內容】、【標簽】、【讀啥鴨評級】、【讀啥鴨評價】實現這個功能涉及三個重要概念:云函數、大模型應用、云數據庫
云函數,我理解其實就是一個有著特定處理邏輯的功能,我這里實現的就是:接受用戶輸入的url,從url中返回書單信息。
它應該也可以直接寫在某個頁面的處理邏輯中,但如果它跟各個頁面都沒有關系,或者是一個多個頁面或功能都可以復用的功能,那么就可以把它作為云函數單獨拿出來。另外還有一個好處,我看起來云函數的更新不需要微信官方進行審核,直接上傳到云開發環境即可。
根據開發助手給我的指引,我創建了cloudfunctions文件夾(必須叫這個名字,應該是微信開發的規范),然后在里面創建了processBookList文件夾(自己命名的,代表“處理書單”的功能)。同樣按照開發助手的指引在該文件夾內創建必需的幾個文件:
為了標記能看得清晰,我把Cursor的主題色改成了白色
其中最核心的是index.js文件,包含了該云函數的運行邏輯;config.json則是用來控制一些諸如超時時間、內容最大限制、定時觸發機制等內容;package.json最主要的作用我理解就是描述該云函數正常運行所需要的依賴項;node_modules文件夾中我理解應該就是存儲所需依賴項的,這個文件夾是我們在安裝依賴項時被自動創建的。
如何安裝依賴項?
點擊下圖右上角這個按鈕,中間的下方會出現一個新的區域,先稱之為命令行區域,它默認會定位到你當前代碼那個文件夾內,通過命令行的方式打開文件夾(命令行常見操作方法見:
https://blog.csdn.net/Evankaka/article/details/49227669)。進入到processBookList這個云函數文件夾內,然后按照開發助手的指引,執行npm install axios安裝axios這個依賴項。安裝完成后有一堆看不懂的信息,可以復制給開發助手,他會給你解釋,一般來講沒什么需要修改的。
到這里,這個云函數需要開發的部分OK了,然后進入到微信開發者工具,如下圖點擊左上角“云開發”按鈕
進入云開發控制臺。點擊“云函數”,這里后面還會用到“數據庫”、“存儲”功能。
點擊“新建”一個名為processBookList的云函數。
然后進入微信開發者工具,如下圖,右鍵點擊該云函數,然后點擊上傳(“上傳所有文件”適用于依賴項有更新的情況,“上傳但不包含node_modules”適用于沒有更新依賴項的情況)。
上傳成功之后,再進入云開發控制臺,選擇該函數的“云端測試”。
然后在日志中可以查看這次運行的日志,如果有報錯的話把它發給開發助手進行調整修改,修改完重新上傳并測試,直至成功。
講完**個重要概念 云函數 ,第二個是 大模型應用開發 。
該云函數主要做兩件事情,**是調用遠程的書單內容解析服務獲取書單信息,第二是把獲取的信息存儲到數據庫中,用來后續在各個列表頁進行展示。
由于各個平臺(豆瓣、微信讀書、微博、小紅書…)書單內容結構是不一樣的,如果針對每個平臺單獨寫代碼解析書單內容,開發和維護成本很高,于是我就想到用大模型的能力,大模型可以類似人一樣去讀網頁中的內容、理解內容,然后按照我的需求輸出。另外 ,除了網頁中已有的 內容:【書單名稱】、【書單作者】、【書單描述】、【書單內容】,我還希望獲得更多有意思的增量內容:【標簽】、【讀啥鴨評級】、【讀啥鴨評價】,所以傳統代碼的方式就更不可行了。
所以這里書單內容解析服務我使用了自家的大模型應用開發平臺:畢昇BISHENG 。
BISHENG是一款 開源 LLM應用開發平臺,專攻企業場景, 可完全私有化部署在公司內部,已有大量行業頭部組織及世界500強企業在使用。
由于BISHENG可以開發非常復雜的應用,所以 讀啥鴨 的這個需求,如下圖所示,我基于BISHENG一個簡單的應用模板稍作修改即可。它主要實現了網頁文本內容的解析,然后把解析的文本與提示詞一起傳給大模型。大模型會按照提示詞中的要求輸出所需的書單信息。
我當前的提示詞是這樣的:
# 角色 你是一名毒辣的{input},態度要非常鮮明。
# 任務
1. 首先你需要閱讀下方”書單文章”,從中提取出【書單名稱】、【書單作者】、【書單描述】、【書單內容】四項信息,這四個信息很重要,不能編造,如果”書單文章”中不存在該信息,則置空,其中【書單內容】用 書名+作者名 這樣的形式表達,每本書之間用換行分隔,如:
《鋼鐵是怎樣練成的》奧斯特洛夫斯基
《老人與海》歐內斯特·海明威
2. 然后根據你的知識,分析“書單文章”內容,并輸出【標簽】、【評級】兩項信息,其中【標簽】可以是多個,但是不要超過5個;其中【評級】從以下幾種中選擇:平淡無奇、普通、有意思、別具一格、栩栩如生、艱深晦澀、見微知著、引人入勝、刻骨銘心、 發人深省、氣勢磅礴、一針見血、意味深長、彌足珍貴、典藏、出神入化,其中越往后要求越高、出現的概率也越低。
3.最重要的來了,對這個書單中列出的這些書進行【評價】,評價最主要的內容是說明為什么要讀這些書。可以挑選幾本進行簡評,也可以評價整個書單。語言風格詼諧幽默、一針見血、出人意料,內容中穿插不少于5個emoji表情,表達準確的前提下字數越少越好。注意:開頭不要“哇”、“哇塞”這些驚嘆的詞,直接說內容;并且不要用“xxx簡直是xxx”的說法。
舉一個好的例子:
書單中包含:《西游記》、《水滸傳》、《紅樓夢》、《三國演義》
評價:《西游記》?? 也可以說是“公費吃喝,到此一游”???,何為真經,孰能定義 ?? 《紅樓夢》可是文學巔峰,擁有極高的藝術成就和思想價值,可惜一般人不懂 ??
舉一個不好的例子(評價沒有詼諧幽默及出人意料):
書單中包含:《西游記》、《水滸傳》、《紅樓夢》、《三國演義》
評價:中國四大名著,文學成就極高,人一生絕不可錯過的書
4. 以上七項信息使用的語言與”書單文章”的語言保持一致,如”書單文章”內容是中文則為中文,若”書單文章”內容是英文則七項信息的內容也為英文。
5. 以上七項信息務必以JSON的格式進行輸出。
6. 如果你判斷“書單文章”中的內容并非書單,則不必輸出以上七項信息,告訴用戶這里面沒有書單信息請用戶檢查即可,語氣可以俏皮可愛一點。
# 書單文章 {content}
你的輸出:
構建完成后點擊“對外發布”按鈕,可以看到該應用的接口調用方法。
如果你的場景需要實現的大模型應用跟我類似,你又完全不懂技術,調用方式可以參考我的。
把這些提供給開發助手,它就會幫你寫好調用該接口的代碼。
基于BISHENG我們還可以開發許多更復雜的大模型應用。
現在我們獲取到了正確的書單信息,接下來就是存到數據庫。你在描述處理書單需求時,可以告訴開發助手你需要把處理結果存儲到微信云開發環境的云數據庫中,它就會提示你需要創建一個名為“xxx”的集合。如下圖所示,點擊添加按鈕進行創建即可。
好了,中間再經過各種調試修改,就可以通過頁面提交書單內容了!為了增加趣味性,我又提出了如下幾個新的要求。
沒錯,只需要像這樣直接提出你的要求,基本馬上就能實現。太爽了~
2.5 定時自動運行
用戶可以提交書單了,這很好。但早期哪有什么用戶來提交書單?
于是我讓他想辦法自動獲取
a few moments later
a few moments later
根據指引基本配置成功了。后來又增加了兩個優化項:
調用大模型耗時比較長且每次調用都產生一點費用,所以降低錯誤調用(有些鏈接不是書單信息),所以在云函數中先寫了一個邏輯讓它用正則匹配網頁中是否有“出版社”之類的關鍵字,有才去調用大模型應用。由于bing搜索出來的無效鏈接太多,改成定向搜索豆瓣豆列。排查云函數及定時觸發錯誤過程中發現幾個注意事項:
1、超時時間
改一下超時時間,默認是3秒,而我每次需要更新的書單數量比較多,所以改成了最長的60秒
2、定時器設置在該云函數的config.json文件中設置。我這里設置的意思是10分鐘執行一次。
需要注意的是,微信云函數的定時觸發器使用的是一種特殊的 cron 表達式,它包含 7 個字段,而不是標準 cron 表達式的 5 個字段。3、更新云函數、清理緩存
由于修改其他頁面代碼只需要保存代碼文件即可,修改云函數需要上傳生效,有時候會忘記這個步驟,導致怎么測都不行。。。
另外有些改動需要清理緩存才能生效,所以如果已經按要求修改了代碼卻總是不行(會有點崩潰),可以清除緩存試試,我一般選擇“全部清除”。
2.6 其他經驗
2.6.1 云存儲的使用
我用即夢(
https://jimeng.jianying.com)畫了許多種書單評級勛章。原本這些圖片都是放到代碼文件夾中的,但是微信會限制小程序代碼整體不能超過2M,所以就需要把這些圖片存儲在云存儲中。
操作也比較簡單,直接點擊“上傳文件”按鈕,把所有文件傳上來。然后每個文件的“文件id”就是讀取該文件的地址。根據開發助手的指引,把對相關圖片地址逐個進行替換即可。
2.6.2 質疑開發助手與自我能力提升
開發助手很強(本質是大模型很強),它不僅能幫我寫代碼,它甚至知道微信開發者工具各個按鈕在什么位置(應該是模型訓練數據中有其開發者手冊數據),引導我操作。
不過有時候也會有錯誤以及一些它不知道的事情,所以發現它給的建議沒作用時,可以使用搜索引擎來查找答案。
另一種好方法是,你察覺到它給出的答案有問題,可以嘗試給他一些反問和提醒。
如果你開始有能力給出一些正確的反問,代表你開始對代碼有一定的認知了。這是一個循序漸進的過程,你在一步步調試以及開發助手給你的說明當中,逐漸開始理解許多概念。先從前端的簡單的頁面設計開發到后端的邏輯到數據庫到一些函數的執行,一點一點接觸和學習更加復雜的概念。
這是由你自己的需求增加,自然而然向前推動的一個學習過程。我們不需要上來先去學一大堆概念,卻不知道有什么用。由于是面向一個具體的目標,我們會非常有動力去理解和學習,并且大部分是否有非常快的反饋。
寫到這里就差不多把開發 讀啥鴨 過程中的主要經驗都分享了出來。
還有許多不完美的地方,待后續去迭代,比如用戶體系,比如通過收集書單評級徽章的形式激勵用戶上傳更多書單,比如激勵用戶分享,比如支持解析微信公眾號文章的鏈接(微信官方的反爬比較厲害),比如支持B站視頻形式的書單,比如我還想加一個自動運營的功能(自動挑選一些書單卡片并發布到抖音、小紅書等社交平臺)…
平均1個月一款產品。著名獨立開發者Pieter Levels(《MAKE:building startups the indie way》 作者)也曾踐行過這個計劃。
每款產品不一定要做得很精美,應當盡早發布,盡早獲得真實反饋。用戶的真實反應要抵過自己無數巧妙的思考、分析。
我的靈感庫中大約還有20多條想要做的產品。
后續產品的開發過程也盡量(精力夠的話)會使用類似讀啥鴨這樣build in public的方式,通過公眾號、社群發布出來。
本文由 @七吟覃 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。