本教程將向您展示如何使用微搭低代碼，快速搭建一個基于GPT的聊天Web應(yīng)用或小程序，跟朋友分享搭建的AI應(yīng)用一起體驗GPT技術(shù)帶來的便捷。

    一、準(zhǔn)備工作

    在開始搭建聊天機(jī)器人之前，您需要做以下準(zhǔn)備：

   ?一個GPT服務(wù)的API接口：可以使用騰訊AI、文心一言、科大訊飛等AI服務(wù)提供商均可。本教程為方便演示，使用了一個模擬的API接口，可按需替換為上述正式的GPT接口。

   ?開通微信小程序（可選）：如果沒有微信小程序賬號，可在微搭控制臺直接申請注冊，或者也可以直接發(fā)布為H5網(wǎng)頁應(yīng)用。

    二、搭建ChatBot聊天應(yīng)用

    首先，一個常見的聊天對話機(jī)器人應(yīng)用預(yù)覽界面，如下圖所示：

    通過應(yīng)用界面可以看到，它主要由如下幾個部分組成：

    ?一個對話聊天界面

    ?一個API數(shù)據(jù)查詢接口

    ?界面UI與后端數(shù)據(jù)的聯(lián)動渲染

    現(xiàn)在，就參照上面的幾個模塊，分5個步驟來依次拆解和搭建：

    1.對應(yīng)用界面進(jìn)行組件和樣式配置

   我們先拖入一個滾動容器和一個普通容器，一個用來展示聊天的上下文對話，一個用來展示輸入框和發(fā)送按鈕。然后依次拖入圖中大綱樹所示的組件，組件相應(yīng)的層級關(guān)系可以參考下圖中的大綱樹結(jié)構(gòu)。

   接下來針對上述組件分別進(jìn)行樣式的配置，我們默認(rèn)使用樣式面板的彈性（Flex）布局，包含接收消息和發(fā)送消息兩個普通容器，可以分別選擇樣式面板中的彈性布局中的左對齊（接收消息）和右對齊（發(fā)送消息），如上圖所示。

   接著可以分別配置圖片和文本兩個組件的高度和寬度大小以及內(nèi)外間距，以達(dá)到想要的視覺效果，文本組件的參考樣式配置如下。

    圖片組件的參考樣式配置如下。

   完成聊天上下文對話框的樣式配置之后，可以進(jìn)行底部的”輸入框和按鈕容器“的樣式配置，樣式配置方式與發(fā)送消息容器類似，可使用彈性布局并選擇“左對齊”的方式布局，由于底部容器是固定位置的，故需要額外配置一下定位屬性，參考如下：

   然后再針對容器內(nèi)的多行輸入組件和按鈕組件分別進(jìn)行配置，兩個組件的寬度可分別設(shè)置為70%和30%，參考如下：

   后，如果針對小程序希望設(shè)置其頂部導(dǎo)航欄的背景和標(biāo)題顏色等，可在大綱樹中選中頁面根節(jié)點(diǎn)，在右側(cè)屬性區(qū)進(jìn)行配置，參考如下：

   以上，通過進(jìn)一步按需微調(diào)一些樣式細(xì)節(jié)如組件背景色以及間距等后，即可達(dá)到上文提到的應(yīng)用界面效果。整體頁面配置過程完全可視化操作，不需要了解代碼。如果對樣式配置不是很熟悉的朋友，也可以參考微搭的基礎(chǔ)視頻教程來參考學(xué)習(xí)。

    2.配置數(shù)據(jù)變量和數(shù)據(jù)源API

    下面開始進(jìn)行數(shù)據(jù)的綁定和數(shù)據(jù)源的配置：

    a.新建一個數(shù)組對象的自定義變量chatList，用于存儲聊天記錄

   首先配置一個變量，如命名為chatList聊天記錄這么一個變量，一個對象數(shù)組，默認(rèn)值為如下所示，當(dāng)然大家也可以基于這個結(jié)構(gòu)任意修改。

   "res":"不是，紅孩兒是牛魔王的養(yǎng)子。據(jù)西游記中的記載，牛魔王是一個孤獨(dú)的怪物，他在深山里住了很久，沒有子女，卻有一個養(yǎng)子——紅孩兒，紅孩兒的父母去世時，牛魔王便收養(yǎng)了他。",

   接著把這個數(shù)組變量的初始值跟我們的這個頁面的內(nèi)容分別進(jìn)行綁定。首先我們選擇大綱樹中的”循環(huán)展示“組件，在循環(huán)展示組件的數(shù)據(jù)屬性配置為剛剛新建的數(shù)組變量

   然后繼續(xù)選擇該組件內(nèi)的子節(jié)點(diǎn)，如文本組件，分別綁定這個數(shù)組中的對象屬性值，比如發(fā)送消息容器下的文本組件，則綁定循環(huán)對象下的req屬性即$w.i，對應(yīng)接收消息下的文本組件則綁定屬性$w.item_repeater1.res，如下圖所示：

    這一步數(shù)據(jù)綁定完成之后，接下來就可以去配置請求遠(yuǎn)程數(shù)據(jù)的數(shù)據(jù)源API了。

    b.配置一個數(shù)據(jù)源APIs（用于請求GPT接口）

   API的配置相對比較簡單，主要參考AI服務(wù)商的API文檔。此處為方便演示，我們使用Postman提供的echo測試接口，該API接口對應(yīng)的參數(shù)配置參考如下：

   通過點(diǎn)擊上圖數(shù)據(jù)源中的【方法測試】，得到API的返回結(jié)果如下，點(diǎn)擊【出參映射】即可完成出參結(jié)構(gòu)的配置：

    3.給發(fā)送按鈕綁定請求事件

   我們在第1步中已經(jīng)在頁面中放置了多行輸入框、按鈕和文本展示等組件。接下來，我們需要給輸入框配置相關(guān)的事件響應(yīng)邏輯，來獲取用戶輸入的消息內(nèi)容，首先新建一個自定義變量$page.dataset.state.text。

   再將多行輸入框的值通過綁定值改變事件，來賦值給該變量$page.dataset.state.text，參考的配置如下：

   同時，給發(fā)送按鈕組件綁定一個點(diǎn)擊事件，將發(fā)送的文本信息加入到聊天列表中。即點(diǎn)擊發(fā)送按鈕時，將發(fā)送的文本數(shù)據(jù)插入到之前定義的聊天記錄數(shù)組變量$page.dataset.state.chatList中，如下所示：

   然后，再給按鈕組件綁定事件來處理輸入框中用戶發(fā)送的消息，選擇按鈕組件，在右側(cè)事件面板中配置如下邏輯，即點(diǎn)擊按鈕時觸發(fā)API請求，并將獲取到的API返回結(jié)果渲染在頁面中，參考配置如下：

    4.將API返回數(shù)據(jù)與在頁面中進(jìn)行渲染展示

    第4步，再將調(diào)用API成功返回值用“變量賦值”方法加入到chatList數(shù)組中

   這里我們需要在數(shù)據(jù)中增加一條新的消息，采用表達(dá)式綁定的方式進(jìn)行原有的ChatList變量進(jìn)行解構(gòu)后再賦值，圖中表達(dá)式參考如下：

    除了上述API返回成功后的變量賦值事件配置外，還可以配置更多控制狀態(tài)的事件動作，例如：

   ?通過新建一個$w.page.dataset.state.loading變量來控制API的加載狀態(tài)。

   ?通過新建一個$w.page.dataset.state.scrollTop變量，每次消息接收/發(fā)送成功時賦值一個較大隨機(jī)數(shù)如下圖所示，來控制滾動容器確保在每次有新消息時，滾動容器能自動滑動到頁面底部。

   別忘了將變量$w.page.dataset.state.scrollTop綁定到滾動容器組件的“豎向滾動條位置”的屬性值上，如下圖所示。

   以上是幾個控制發(fā)送狀態(tài)的事件配置示例，開發(fā)者還可以按需自行擴(kuò)展，如增加請求接口的異常時提示等，或者參考文末的應(yīng)用模板鏈接來安裝查看。

    5.完成開發(fā)，進(jìn)行應(yīng)用發(fā)布

   前端界面和后端數(shù)據(jù)邏輯都配置開發(fā)完成后，可在應(yīng)用編輯器的右上角點(diǎn)擊“發(fā)布”按鈕，可以選擇發(fā)布到已綁定的小程序，或者直接發(fā)布移動端的H5應(yīng)用，如下所示：

   至此，一個基礎(chǔ)的AI聊天應(yīng)用搭建就完成了。上述教程所搭建的應(yīng)用已經(jīng)上架到微搭模板中心，可以在微搭控制臺打開GPT聊天應(yīng)用模板安裝體驗。