這是小卷對AI編程工具學(xué)習(xí)的第3篇文章，今天以實際開發(fā)一個思維導(dǎo)圖的需求為例，了解AI編程開發(fā)的整個過程
1.效果展示
2.AI編程開發(fā)流程
雖然AI編程知識簡單對話就行，不過咱要逐步深入到項目開發(fā)中，所以還需要前面的需求分析、調(diào)研等等步驟，下面是完成一個需求的流程圖：
3.尋找思維導(dǎo)圖Coze插件
我們在Coze的國內(nèi)站點里搜索能生成思維導(dǎo)圖的插件，Coze官網(wǎng)地址：https://www.coze.cn/ ，這里發(fā)現(xiàn)TreeMind樹圖就可以滿足我們的需求，輸入文字，輸出思維導(dǎo)圖的圖片：
4.創(chuàng)建插件測試流程
我們在工作空間 > 項目開發(fā) > 創(chuàng)建這樣創(chuàng)建一個應(yīng)用，
然后創(chuàng)建工作流，在工作流中添加節(jié)點將TreeMind插件添加進來后，再修改下輸入輸出的變量配置，這樣一個工作流就創(chuàng)建好，接著可以手動測試功能是否正常
這里我讓其生成一張分布式系統(tǒng)的思維導(dǎo)圖，試運行成功后得到圖片的鏈接地址，打開后就是下面的這張圖片，能滿足我們的需求：
接下來我們將整個流程發(fā)布上線，后續(xù)的開發(fā)編程過程就可以用到了。
點擊發(fā)布按鈕，然后發(fā)布時選上API
5.API參數(shù)獲取
Coze API的使用是有限制和計費的，基礎(chǔ)版本的賬戶每月只有100次調(diào)用機會，超過后需要升級成專業(yè)版才能付費使用，
Coze API官方文檔介紹地址：https://www.coze.cn/open/docs/developer_guides/coze_api_overview
API調(diào)用工作流文檔地址：https://www.coze.cn/open/docs/developer_guides/workflow_run
5.1個人訪問令牌
地址：https://www.coze.cn/open/oauth/pats
自行手動創(chuàng)建一個，然后把token拷貝下來，注意只有第一次創(chuàng)建的時候才能看到token
5.2 workflow id和app_id的獲取
打開應(yīng)用工作流編輯頁面，點擊工作流，在瀏覽器的地址欄里project-ide后面跟的數(shù)字就是app_id，而workflow后面的那串數(shù)字就是workflow_id
5.3 在線測試API
我們通過在線測試普通Apifox來測試接口，地址：https://app.apifox.com/
可以將工作流API文檔里的示例拷貝出來，在Apifox中選擇導(dǎo)入cURL的方式新建一個請求，修改對應(yīng)的參數(shù)為自己創(chuàng)建的應(yīng)用參數(shù)，就可以請求執(zhí)行了，下面是我的請求示例，大家可以自行參考：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="shell" cid="n35" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">curl --location --request POST 'https://api.coze.cn/v1/workflow/run'
--header 'Authorization: Bearer pat_npmd******'
--header 'Content-Type: application/json'
--data-raw '{
"workflow_id": "746*****6370",
"parameters": {
"input": "生成分布式系統(tǒng)的思維導(dǎo)圖"
},
"app_id": "74663******692927",
"is_async": false
}'</pre>
6. Cursor編程集成Coze插件
為了開發(fā)生成思維導(dǎo)圖的瀏覽器插件，我們開始逐步操作，第一步，先生成插件的基礎(chǔ)框架：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="shell" cid="n41" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">## 用戶故事
用戶選中文字，可以顯示浮動按鈕“生成思維導(dǎo)圖”，點擊后彈出右側(cè)窗口，顯示對應(yīng)的文字
注意：
1.使用manifest v3版本開發(fā)
2.注意中文編碼問題
任務(wù)
請按照用戶故事和注意點幫我開發(fā)谷歌插件</pre>
接著生成側(cè)邊欄的功能
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="shell" cid="n46" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">繼續(xù)側(cè)邊欄的實現(xiàn)：
1.創(chuàng)建一個側(cè)邊欄的HTML頁面
2.實現(xiàn)在background.js中打開側(cè)邊欄的邏輯
3.添加側(cè)邊欄的樣式</pre>
可能會出現(xiàn)一些bug問題，我們把bug發(fā)給cursor后繼續(xù)修改完善，下面是框架的效果圖，可以看到已經(jīng)滿足我們的需要了，然后可以進行下一步操作了
6.1 整合coze API
基于現(xiàn)有代碼，現(xiàn)在我們需要整合Coze的API，建議提前把已有功能告訴Cursor，這樣也能更好地理解代碼背景。輸入提示詞示例，可結(jié)合個人實際情況調(diào)整：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="shell" cid="n57" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"># 目的
用戶需求是基于網(wǎng)頁選中的內(nèi)容生成一個思維導(dǎo)圖
用戶故事
用戶在網(wǎng)頁上選中一段文字，點擊浮動按鈕，可以生成思維導(dǎo)圖的圖片，在側(cè)邊欄展示
生成思維導(dǎo)圖的接口
curl請求的代碼
curl --location --request POST 'https://api.coze.cn/v1/workflow/run'
--header 'Authorization: Bearer 替換為自己的'
--header 'Content-Type: application/json'
--data-raw '{
"workflow_id": "替換為自己的",
"parameters": {
"input": "生成分布式系統(tǒng)的思維導(dǎo)圖"
},
"app_id": "替換為自己的APP_ID"
}'
請求參數(shù)說明
- parameters下面的input：網(wǎng)頁選中內(nèi)容
返回數(shù)據(jù)
{
"code": 0,
"cost": "0",
"data": "{"output":"https://static.shutu.cn/shutu/jpeg/opence/2025/02/04/77b63eae2ea61d3******223.jpeg"}",
"debug_url": "https://www.coze.cn/work_flow?execute_id=7467838*******",
"msg": "Success",
"token": 0
}
返回參數(shù)說明
- data下的output為思維導(dǎo)圖的圖片地址
2.code 狀態(tài)碼，不是0代表出差 - msg 返回信息
注意
- 注意使用manifest v3版本開發(fā)
- 注意中文編碼問題
任務(wù)
根據(jù) 用戶故事 和提供的 生成思維導(dǎo)圖接口，以及相關(guān)注意點，請優(yōu)化當前谷歌插件</pre>
最終效果已滿足用戶需求了?。?！
剩下的比如圖標不好看等等問題可以自行調(diào)整
6.總結(jié)
今天通過一個實際需求，了解了AI編程的整個開發(fā)流程，相信看到最后的讀者也能自行學(xué)會AI編程。
在AI時代，以后的程序員可能不必再執(zhí)著于從零開始寫代碼，學(xué)會借助現(xiàn)有工具，運用自己的創(chuàng)意，懂得站在巨人肩膀上，總能看得更遠，走得更快
