鴻蒙原生應(yīng)用有問必答
運行環(huán)境
DAYU200:4.0.10.16
SDK：4.0.10.15
IDE：4.0.600
前言
在配置好環(huán)境之后，可以嘗試這編寫一個較為簡單的應(yīng)用程序練練手，這里選擇使用一個免費的API接口網(wǎng)站ALAPI來嘗試編寫一個可進行對話的GPT應(yīng)用程序。
創(chuàng)建項目
創(chuàng)建好項目之后可以先把helloworld的demo在真機上跑一下，注意需要簽名。
簽名方式：
隨后直接點擊運行，可以看到控制臺輸出。
開發(fā)板效果如圖所示：
修改圖標和名稱
項目中含有文件記錄了應(yīng)用的圖標和名稱，一部分是設(shè)置里的，一部分是顯示在桌面的，需要將這兩部分均做修改。
第一部分目錄在AppScope/app.json5。
如下圖所示，icon和label分別對應(yīng)圖標與名稱，我們將這里改為我們需要的內(nèi)容。
此時在系統(tǒng)設(shè)置中我們的應(yīng)用圖標和名稱應(yīng)當都改過來了。
修改桌面圖標和名稱
修改src/main/module.json5中如圖所示的label和icon。
我們修改label的時候，修改中文目錄下的就可以，具體操作衛(wèi)按住ctrl跳轉(zhuǎn)時選擇中文路徑。
更改后效果如下：
對應(yīng)用添加相關(guān)權(quán)限
由于使用ChatGpt需要使用網(wǎng)絡(luò)權(quán)限，我們在這里添加網(wǎng)絡(luò)權(quán)限。
在src/main/module.json5中modele中添加配置。
"requestPermissions": [{
"name": "ohos.permission.INTERNET"
}],自定義數(shù)據(jù)模型
本次調(diào)用GPT的API可以自定數(shù)據(jù)模型來實現(xiàn)，我們可以在ets目錄下新建Model文件夾，新建GPTModel文件（ts）。
export class ChatGptModel {
code: number = 0
message: string = ""
data: ChatGpt = new ChatGpt()
}
export class ChatGpt {
content: string = ""
}由于在API網(wǎng)站中查看ChatGPT調(diào)用時返回的參數(shù)較少，直接寫在里面。
在網(wǎng)站的請求參數(shù)介紹中有這樣的內(nèi)容。
名稱 | 必填 | 類型 | 描述 | 示例 |
token | true | string | 請求token，用戶中心獲取。 | 用戶中心獲取token |
content | string | 需要對話的內(nèi)容，如：幫我寫一封情書。 | ||
message | string | ChatGPT消息請求格式 | ||
max_tokens | int | 最大返回的tokens限制，默認不填返回最多, 3.5默認最大是16000 tokens, 請不要超過這個限制否則會報錯 |
我們實現(xiàn)的時簡單的一對一的對話，所以message暫時可以不用管，在在線測試網(wǎng)站中嘗試。
token可以通過注冊本網(wǎng)站來獲取ALAPI。
得到響應(yīng)主體。
{
"code": 200,
"msg": "success",
"data": {
"content": "你好！我是一個AI助手，可以幫助您回答問題和提供服務(wù)。有什么我可以為您做的嗎？"
},
"time": 1704790385,
"usage": 1,
"log_id": "603268355937845248"
}可以看到我們需要的僅僅只有content內(nèi)的內(nèi)容。
創(chuàng)建輸入界面
作為一款問答式GPT應(yīng)用，需要有用戶輸入的地方，我們這里簡單的做一個輸入頁面。
輸入頁面可以直接在默認的index頁面中修改。
輸入框組件。
查詢按鈕。
按鈕點擊時的事件，這里參考一篇博客，將用戶輸入內(nèi)容傳遞給下一個頁面，下一個頁面我們將其命名為ChatGpt。
源代碼如下：
import router from '@ohos.router'
@Entry
@Component
struct Login {
@State message: string = '歡迎使用ChatGpt'
build() {
Column() {
TextInput({
placeholder: "請輸入您的問題"
}).onChange((value: string) => {
console.info("輸入的問題是" + value)
this.message = value
}).type(InputType.Normal)
Button("查詢")
.width("100%")
.backgroundColor(Color.Orange)
.fontColor(Color.Black)
.margin({
bottom: 10
})
.onClick(() => {
router.pushUrl({
url: "pages/ChatGpt",
params: {
message: this.message
}
}, router.RouterMode.Single)
})
}.width("100%").height("100%").justifyContent(FlexAlign.Center).padding({
left: "10", right: 10
})
}
}創(chuàng)建HTTP請求
下面我們寫用戶點擊按鈕后的返回頁面。
導(dǎo)入http模塊。
import http from '@ohos.net.http';
import { BusinessError } from '@ohos.base';創(chuàng)建createHttp。
let httpRequest = http.createHttp();填寫HTTP地址。
httpData() {
// 3.每一個httpRequest對應(yīng)一個HTTP請求任務(wù)，不可復(fù)用
let httpRequest = http.createHttp();
//4.
httpRequest.request(// 填寫HTTP請求的URL地址，可以帶參數(shù)也可以不帶參數(shù)。URL地址需要開發(fā)者自定義。請求的參數(shù)可以在extraData中指定
"https://v2.alapi.cn/api/chatgpt/pro",
{
method: http.RequestMethod.GET, // 可選，默認為http.RequestMethod.GET
// // 開發(fā)者根據(jù)自身業(yè)務(wù)需要添加header字段
header: [{
'Content-Type': 'application/json'
}],
// 當使用POST請求時此字段用于傳遞內(nèi)容
extraData: {
"token": "此處替換為你的token",
"content":this.paramsFromIndex?.['message'],
"max_tokens":"10000"
},
// expectDataType: http.HttpDataType.STRING, // 可選，指定返回數(shù)據(jù)的類型
// usingCache: true, // 可選，默認為true
// priority: 1, // 可選，默認為1
// connectTimeout: 60000, // 可選，默認為60000ms
// readTimeout: 60000, // 可選，默認為60000ms
// usingProtocol: http.HttpProtocol.HTTP1_1, // 可選，協(xié)議類型默認值由系統(tǒng)自動指定
// usingProxy: false, //可選，默認不使用網(wǎng)絡(luò)代理，自API 10開始支持該屬性
}, (err: BusinessError, data: http.HttpResponse) => {
//對網(wǎng)絡(luò)數(shù)據(jù)的處理
if (!err) {
// data.result為HTTP響應(yīng)內(nèi)容，可根據(jù)業(yè)務(wù)需要進行解析
console.info('Result:' + JSON.stringify(data.result));
let ChatGptModel: ChatGptModel = JSON.parse(data.result.toString())
this.ChatGpt = ChatGptModel.data
console.info('code:' + JSON.stringify(data.responseCode));
// data.header為HTTP響應(yīng)頭，可根據(jù)業(yè)務(wù)需要進行解析
console.info('header:' + JSON.stringify(data.header));
console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
// 當該請求使用完畢時，調(diào)用destroy方法主動銷毀
httpRequest.destroy();
} else {
console.error('error:' + JSON.stringify(err));
// 取消訂閱HTTP響應(yīng)頭事件
httpRequest.off('headersReceive');
// 當該請求使用完畢時，調(diào)用destroy方法主動銷毀
httpRequest.destroy();
}
}
);
}不要忘記將頁面添加到mainpage中
路徑src/main/resources/base/profile/main_pages.json。
點擊查詢之后的效果如下：
如此，一個簡單的GPT程序就做好了還可以讓它幫你寫情書哦。
