與大模型打交道,提示器是關(guān)鍵,前陣子仔細琢磨了李繼剛老師的提示詞,看了吳恩達老師的提示詞教學(xué)視頻。然后看了又到 Claude 與 OpenAI 的官網(wǎng)看了官方與提示詞相關(guān)的文檔,受益匪淺。
一個對大模型回答提升非常大的一點就是讓大模型不急著回復(fù),而是要求它逐步思考。開干的第一步,我想到了 Sealos 的新產(chǎn)品 Devbox。
為什么會突然想到 Sealos 呢?因為我之前用過他們的云開發(fā)產(chǎn)品和 AI 知識庫產(chǎn)品 FastGPT (https://fastgpt.cn),都非常牛逼,一直混跡在他們官方社群中。
他們每次發(fā)的文章都很有意思,我都看過,一點也不像其他技術(shù)文章那樣枯燥無味。你們連 AI 都玩的那么溜了,想必開發(fā)個網(wǎng)站并且無痛上線問題也不大吧?正好前幾天他們的新產(chǎn)品 Devbox 發(fā)布了,我就想試試。
/image_3.jpg)
珍愛生命,遠離 CI/CD。創(chuàng)建 Devbox 開發(fā)環(huán)境開干的第一步,就是進入 Sealos 桌面 (https://hzh.sealos.run),然后打開 Devbox:
/image_4.jpg)
新建一個項目,語言選擇 Node.js,CPU 調(diào)整到 1C、內(nèi)存 2G 就夠了,網(wǎng)絡(luò)配置中記得將端口改為 3000 (待會兒我們會用 React 框架來寫),系統(tǒng)會自動分配 HTTPS 域名,通過該域名即可訪問 Devbox 中的 3000 端口。
/image_5.jpg)
選擇框架后點擊創(chuàng)建,幾秒鐘即可啟動開發(fā)環(huán)境。在操作選項中選擇使用 Cursor 連接:
/image_6.jpg)
首次打開會提示安裝 Devbox 插件,安裝后即可自動連接開發(fā)環(huán)境。
/image_7.jpg)
/image_8.jpg)
是不是非常簡單?直接省略了配置域名解析、申請 SSL 證書,配置網(wǎng)關(guān)等與開發(fā)無關(guān)的繁瑣操作,爽!動嘴讓 Cursor 寫代碼我們天天當牛馬都當夠了,現(xiàn)在我要當老板,Cursor 給我當牛馬!按下 Ctrl+I 打開對話面板,第一次給的提示詞是:123
/image_9.jpg)
由于 Cursor 目前只能幫我們新建文件,還不能幫我們執(zhí)行命令,所以我在提示詞中說明了如果有執(zhí)行命令的需求,就通知我執(zhí)行,執(zhí)行完了它再繼續(xù)。
執(zhí)行命令初始化項目之后,它就開始給我吭哧吭哧干活了。我就看著它給我新建文件夾,新建文件,寫代碼,一頓操作猛如虎。
如果遇到依賴安裝比較慢的問題,可以使用以下命令替換成國內(nèi)源:
/image_10.jpg)
一陣忙完它還問我,有哪些區(qū),你要先完成哪部分,這些無所謂的問題就由它自己來定了。
/image_11.jpg)
哈哈,它又是一通忙活。這可能就是新版 Claude 的新功能,他能與用戶交互,并根據(jù)用戶的反饋調(diào)整自己的回答。我覺得非常好。這在以前是沒有這功能的。
有一個插件原來叫 Claude dev 現(xiàn)在叫 Cline,它的能力也非常強,也與用戶交互,但它每一步都要求用戶確認,我覺得有點啰嗦。而現(xiàn)在 Cursor+新版 Claude3.5 這點控制得非常好。
一通輸出完成后,我問它怎么看到效果。其實我知道怎么做,只是閑得蛋疼故意調(diào)戲哈大模型。它告訴我要在終端命令行輸入啥啥啥的。
這一點 Cursor 做得不如 Cline,Cline 在這種情況下它會自動調(diào)用終端命令,只要你點擊確認就會直接編譯運行,這點 Cursor 后期估計也會上。
在網(wǎng)頁打開的那一瞬間,這畫面不能說是達到我的要求,而是遠遠超出我的預(yù)期,頁面的配色,排版,動畫完全驚艷到我了,因為前不久我也用 Cursor 寫了個網(wǎng)頁,來來回回溝通很久也沒達到我要的效果。而這次是第一版就遠遠超出我的預(yù)期了。
先給大家看看效果。在 Devbox 開發(fā)環(huán)境中預(yù)覽網(wǎng)頁非常簡單,直接使用之前創(chuàng)建 Devbox 開發(fā)環(huán)境時自動分配的 HTTPS 域名進行訪問即可。
/image_12.jpg)
當然,因為我沒告訴它公司具體業(yè)務(wù),所以它在頁面里呈現(xiàn)的內(nèi)容也非??辗?,就像寫報告一堆空話屁話一樣。這就需要你一步一步來跟大模型交流了。
/image_13.jpg)
/image_14.jpg)
/image_15.jpg)
就這樣幾輪對話網(wǎng)站大體上就成型了。后續(xù)再幫我修改內(nèi)容,改成中英文雙語版。
/image_16.jpg)
/image_17.jpg)
過程中也可能不斷出錯,你把錯誤告訴它它就會自動幫你改改改,搞得我像個甲方爸爸了。
在整個過程中,我始終沒有手動寫過一句代碼,也沒手動修改一句代碼。一來我是想試試大模型的能力,再個最主要的原因還是不想費那神。新 Claude3.5 sonnet 確實也沒讓我失望。
最終網(wǎng)站效果:
/image_18.jpg)
/image_19.jpg)
/image_20.jpg)
網(wǎng)站上線前端頁面完成,洋洋灑灑放了這一通彩虹屁后,后端部署也需要重點講講。
對于我當前網(wǎng)站,我知道就算一年也沒幾個人來看,但是又需要它裝個門面,所以要求就是 1 要便宜,2 要簡單,那些要敲各種 Linux 命令的方案我看到就暈。而在 Devbox 開發(fā)環(huán)境里開發(fā)的項目部署起來非常的簡單無腦。。。來,看步驟:
為了保持項目結(jié)構(gòu)簡單,我們需要把項目中的所有文件移到根目錄,可以在 Cursor 中打開終端,然后執(zhí)行以下命令:123
接下來我們需要往
這個文件中寫入項目的啟動命令 (因為 Devbox 項目發(fā)布之后的啟動命令就是執(zhí)行
腳本)。
/image_21.jpg)
腳本修改完并保存之后,點擊【發(fā)布版本】:
/image_22.jpg)
填寫信息后點擊【發(fā)版】。
/image_23.jpg)
注意:發(fā)版會暫時停止 Devbox,發(fā)版后會自動啟動,請先保存好項目避免丟失數(shù)據(jù)。
稍等片刻,即可在版本列表中找到發(fā)版信息,點擊上線后會跳轉(zhuǎn)到部署頁面,點擊部署應(yīng)用即可部署到生產(chǎn)環(huán)境。CPU 和內(nèi)存可以根據(jù)自己的項目情況進行調(diào)整。
/image_24.jpg)
/image_25.jpg)
生產(chǎn)環(huán)境分配的 HTTPS 域名與開發(fā)環(huán)境獨立,部署后即可通過生產(chǎn)環(huán)境域名訪問服務(wù)。
/image_26.jpg)
/image_27.jpg)
我的線上 demo 會一直放在這邊不刪 (至少放一個星期吧),想直觀看到效果的同學(xué)可以通過這個域名訪問:https://tbhkzwzfjbvb.hzh.sealos.run總結(jié)Sealos 的操作確實是簡單,而且費用也確實是低。如果選擇最低配置,一天才幾毛錢。從項目開始到上線,總共只需要 1 天時間,其實還是利用空余時間來做的,因為我不是專職碼農(nóng)。
這效率放到以前想都不敢想。很多自媒體都在唱 AI 要取代程序員,它這是在取代程序員嗎?這分明是在助力程序員??!害得我恨不得把原來寫的哪些屎山代碼拿出來重新翻炒一番了。
文章轉(zhuǎn)載自:我一行代碼也沒寫,Cursor 和 Devbox 給我寫了個高仿蘋果官網(wǎng)!