導(dǎo)讀 | 上周OpenAI發(fā)布了對話語言模型 ChatGPT，相關(guān)討論引爆全網(wǎng)。你是否也迫不及待體驗一番？本文特邀作者騰訊云開發(fā)者社區(qū)作者戴傳友從開發(fā)環(huán)境準備、開發(fā)過程、服務(wù)器接口、騰訊API網(wǎng)關(guān)接入到部署，詳細教你如何動手開發(fā)一個chatGPT微信小程序。
在《ChatGPT-地表最強AI模型！要消滅人類？》、《算法工程師深度解構(gòu)ChatGPT技術(shù)》兩篇文章中，我們分別囊舉了ChatGPT的豐富玩法并解析其工作原理。如果你對相關(guān)內(nèi)容感興趣，歡迎回溯圍觀～公眾號的粉絲朋友們在評論區(qū)暢想了更多ChatGP應(yīng)用實踐，也有粉絲表示想要親自體驗下其奇妙之處。此次，我們邀請騰訊云開發(fā)者社區(qū)開發(fā)者由淺入深帶你動手開發(fā)一個ChatGPT微信小程序，其中會詳細介紹開發(fā)環(huán)境準備、項目實現(xiàn)、服務(wù)接口搭建、騰訊API網(wǎng)關(guān)接入、部署等環(huán)節(jié)。
準備工作在微信中搜索 "ChatGPT"相關(guān)的小程序，檢查有哪些名字未被占用。選好名字并記錄準備144px*144px尺寸的logo，并在微信公眾平臺官網(wǎng)首頁申請微信小程序。一般來說，大概3個小時左右就可以通過審核。OpenAI（ https://openai.com/）目前不在中國區(qū)域開展業(yè)務(wù)，國內(nèi)不能正常的體驗到openai提供的服務(wù)。賬號的申請和注冊具體教程，各位閱讀者可以自行搜索。申請到賬號之后，為了在代碼中實對OpenAI 提供的 api ，我們還需要申請一個apiKey。這是通過代碼訪問ChatGPT的關(guān)鍵所在。賬號申請成功后，訪問https://beta.openai.com/account/api-keys頁面生成apiKey。其中尤其注意保存好key（不能再次查看，如果丟失只能重新生成）。至此，基本準備工作已全部完成，接下來將為各位開發(fā)者講述核心代碼的開發(fā)流程。
首先，根據(jù)自己的實際情況下載對應(yīng)版本的微信開發(fā)者工具。下載地址如下：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html其次，我個人建議新建小程序時選擇最簡單的基礎(chǔ)模版，并勾選使用微信云開發(fā)環(huán)境。去除繁雜的配置以便你能更快速的對微信小程序的代碼結(jié)構(gòu)有初步了解。我成文時，因為申請的小程序還沒有審核通過，所以選擇下述測試號用來進行開發(fā)。導(dǎo)出初始化項目之后，你會看到比較清晰的文件結(jié)構(gòu)。小程序開發(fā)跟普通的html、css、js 三劍客用來開發(fā)網(wǎng)頁沒有本質(zhì)的區(qū)別。在微信體系內(nèi)，wxml、wxss、js 都是 html、css、js的子集。頁面的結(jié)構(gòu)在wxml 中寫，用到的樣式在 wxss中定義；變量和函數(shù)以及網(wǎng)絡(luò)請求 等在 js 中執(zhí)行。簡單說來，小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。這里的 app 是指放在根目錄的 app.js、app.json、app.wxss 這三個文件，他們主要負責全局性的邏輯、配置及樣式。pages 則是你即將編寫的多個頁面。多個 pages 之間可以通過官方提供的導(dǎo)航功能進行跳轉(zhuǎn)。每個 page 頁面由 page.js、page.json、page.wxml、page.wxss 四個文件組成。其中 WXML 頁面類似 HTML 文件，主要負責頁面的結(jié)構(gòu)。相比于 HTML而言，WXML 更加簡單。開發(fā)過程中，布局基本上是在使用view和text標簽，以及其它官方文檔上說明的其他標簽。但是各位在開發(fā)過程中，需要尤其關(guān)注官方文檔中有關(guān)組件的內(nèi)容。- 通過 useExtendedLib 擴展庫 的方式引入。這種方式引入的組件將不會計入代碼包大小。
- 通過npm (opens new window)方式下載構(gòu)建。npm包名為weui-miniprogram。
如果你在開發(fā)過程中不想花大量時間研究npm且期望快速實現(xiàn)看到效果，又或者受困于小程序商店上架會限制到代碼包大?。ǖ莡seExtendedLib 擴展庫不計入代碼包大?。?，個人建議選擇了第一種方式。https://wechat-miniprogram.github.io/weui/docs/quickstart.html2）定義tabbar
如果你覺得一個頁面展示的信息過于單調(diào)，可以在小程序中使用tabbar。按照微信官方提供的自定義tabbar指引，你可以輕松把代碼復(fù)制到項目工程中。本文把核心步驟代碼公示出，更多細節(jié)有興趣可以訪問微信官方指引頁，地址如下：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html主要步驟： 在app.json 中新增 tabbar 配置信息{
"pages": [
"pages/chat/index",
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "ChatGPT",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"useExtendedLib": {
"weui": true
},
"tabBar": {
"color": "#1485EE",
"selectedColor": "#FF514E",
"list": [
{
"pagePath": "pages/chat/index",
"text": "ChatGPT概覽"
},
{
"pagePath": "pages/index/index",
"text": "我的創(chuàng)作"
}
]
}
}
值得注意的是，tabBar-list-pagePath的路徑需要存在，否則編譯器會報錯。此處我把項目的工程目錄截圖公開，各位對比上下文配置信息更容易理解。
3） 編寫主界面
規(guī)劃的界面中只需要一個輸入框及一個詢問按鈕。當用戶點擊詢問按鈕的時候，獲取輸入框中的值，去請求服務(wù)器的/ask接口獲取結(jié)果。獲取數(shù)據(jù)之后，再展示到頁面中的結(jié)果展示中。確定了這個基本流程，接下來只要知道這些基本組件在微信小程序里面使用什么標簽就好了。更多的細節(jié)可以訪問 微信小程序的開發(fā)文檔。<form bindsubmit="submitForm">
<view class="weui-form">
<view class="weui-cells__title">請輸入你想要解決的問題：</view>
<view class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea name="q" class="weui-textarea" placeholder="可以問我今天天氣怎么樣？或者講個故事" rows="2"></textarea>
<div class="weui-textarea-counter"><span>0</span>/50</div>
</div>
</div>
<block wx:if="{{result}}">
<view class="weui-cells__title">回復(fù)：</view>
<view class="usermotto">
<text class="user-motto">{{result}}</text>
</view>
</block>
</view>
<view class="weui-form__tips-area"> <block wx:if="{{downloadUrl}}">
<view class="weui-cell">
<button disabled="{{downloaddisabled}}" loading="{{downloadloading}}" load aria-role="button" bindtap='download' data-text="{{downloadUrl}}" plain>立即下載
</button>
</view>
</block>
<block wx:if="{{message}}">
<view class="weui-form__tips">
{{message}}
</view>
</block>
</view>
<view class="weui-form__opr-area">
<button aria-role="button" class="weui-btn weui-btn_primary" disabled="{{disabled}}" loading="{{loading}}" form-type="submit"> 詢問ChatGPT
</button>
</view>
</view>
</form>
<form bindsubmit="submitForm"> </form>
然后在對應(yīng)的js文件里面定義submitForm方法。
5）請求服務(wù)器接口
submitForm: function (e) {
//一般前置檢查代碼
...
const that = this
wx.request({
url: 'http://youdomain.com/api/xxxx',
method: 'post',
header: {"content-type": "application/x-www-form-urlencoded"},
data: data,
success(rsp) {
console.log("ask result-----",rsp.data)
that.setData({
result: rsp.data.data.rsp,
disabled: false,
loading: false,
})
},
complete(d) {
console.log(d)
}
})
console.info("form.submited")
....其他相關(guān)代碼
},
值得注意的是，上面用到的url需要在小程序中進行域名白名單注冊，否則無法被訪問到。同時進行注冊的域名，需要進行備案。配置地址：登錄微信小程序管理后臺，在開發(fā)管理-服務(wù)器域名中進行配置。如下圖。到此，小程序部分配置完成。開發(fā)者可以用手機進行預(yù)覽，或者真機調(diào)試。如果此時沒有配置域名，也可以通過忽略掉域名強制檢查。當然，如果是正式上線審核的話，必須有一個經(jīng)過備案的域名，且該域名在小程序后臺中完成了配置。上述內(nèi)容搭建完成后，下一步是配置服務(wù)器。本著快速開發(fā)的原則，可以借用“現(xiàn)成的輪子”，保障效率第一。各位可以參考現(xiàn)有的api-server腳手架（https://github.com/wytxer/template-node-egg）。之后配置接口名字以及對應(yīng)的handle。我定義了一個名字叫做 /ask 的接口名字，同時定義了處理ask接口的 handle函數(shù)如下。async ask() {
const { request, helper, axios, logger } = this.ctx
const { message } = request.body
logger.info('requset body===', request.body)
logger.info("message===",message)
...其余相關(guān)代碼
這里的token就是前面提到的在openai上申請到的token
const config = {
headers: { Authorization: `Bearer ${token}` }
}
const req = {
model: 'text-curie-001',
prompt: message,
max_tokens: 2000,
temperature: 0.5
}
console.log("req===",req)
let text = ''
const result = await axios.post('https://api.openai.com/v1/completions', req, {
timeout: 300000,
headers: { Authorization: 'Bearer ${token}' }
})
.then(rsp => {
console.log('pdf file result', rsp)
if (rsp.choices) {
text = rsp.choices[0].text
}
})
.catch(err => {
console.log('pdf file error', err)
})
const data = {
rsp: text
}
helper.success(data, 'success')
}
這里的token就是前面提到的在openai上申請到的token ，注意不要泄漏。騰訊api網(wǎng)關(guān)接入及部署
考慮到并發(fā)能力，頻率限制，自動擴容等能力的接入，我選擇了騰訊云api網(wǎng)關(guān)。如何把api通過騰訊云暴露到外網(wǎng)呢？首先，訪問https://console.cloud.tencent.com/apigateway/service?rid=1。其次，新建一個service，并且選擇https協(xié)議【微信要求https協(xié)議】。最后，新建接口ask并且映射到我們自己的服務(wù)器。https://cloud.tencent.com/developer/article/1877519在微信開發(fā)者工具里面進行代碼上傳，然后在微信小程序后臺里面就能看到上傳的版本。建議各位開發(fā)者提交審核之前用真機掃描體驗一下，有bug及時修復(fù)。確認無誤后就可以提交審核了，系統(tǒng)提示1-7個工作日內(nèi)完成。審核完成后，手動進行 “全量” 或者 “灰度” 發(fā)布，你的Chatgpt小程序就能在微信內(nèi)被搜索到。
1、算法工程師深度解構(gòu)ChatGPT技術(shù)
2、耗時減半？騰訊云OCR只做了3件事
3、探秘微信業(yè)務(wù)優(yōu)化：DDD從入門到實踐
4、10分鐘！從架構(gòu)視角讀懂K8s
粉絲福利，后臺回復(fù)“ChatGPT”獲得本篇作者推薦相關(guān)學(xué)習(xí)材料
