鴻蒙原生開(kāi)發(fā)-仿ChatGPT應(yīng)用實(shí)戰(zhàn)

運(yùn)行環(huán)境

DAYU200:4.0.10.16

SDK：4.0.10.15

IDE：4.0.600

前言

在配置好環(huán)境之后，可以嘗試這編寫(xiě)一個(gè)較為簡(jiǎn)單的應(yīng)用程序練練手，這里選擇使用一個(gè)免費(fèi)的API接口網(wǎng)站 ALAPI來(lái)嘗試編寫(xiě)一個(gè)可進(jìn)行對(duì)話的GPT應(yīng)用程序。

創(chuàng)建項(xiàng)目

創(chuàng)建好項(xiàng)目之后可以先把helloworld的demo在真機(jī)上跑一下，注意需要簽名

簽名方式

隨后直接點(diǎn)擊運(yùn)行，可以看到控制臺(tái)輸出

開(kāi)發(fā)板效果如圖所示

修改圖標(biāo)和名稱(chēng)

項(xiàng)目中含有文件記錄了應(yīng)用的圖標(biāo)和名稱(chēng)，一部分是設(shè)置里的，一部分是顯示在桌面的，需要將這兩部分均做修改。

第一部分目錄在AppScope/app.json5

如下圖所示，icon和label分別對(duì)應(yīng)圖標(biāo)與名稱(chēng)，我們將這里改為我們需要的內(nèi)容

此時(shí)在系統(tǒng)設(shè)置中我們的應(yīng)用圖標(biāo)和名稱(chēng)應(yīng)當(dāng)都改過(guò)來(lái)了

修改桌面圖標(biāo)和名稱(chēng)

修改src/main/module.json5中如圖所示的label和icon。

我們修改label的時(shí)候，修改中文目錄下的就可以，具體操作衛(wèi)按住ctrl跳轉(zhuǎn)時(shí)選擇中文路徑

更改后效果如下

對(duì)應(yīng)用添加相關(guān)權(quán)限

由于使用ChatGpt需要使用網(wǎng)絡(luò)權(quán)限，我們?cè)谶@里添加網(wǎng)絡(luò)權(quán)限

在src/main/module.json5中modele中添加配置

"requestPermissions": [{
  "name": "ohos.permission.INTERNET"
}],

自定義數(shù)據(jù)模型

本次調(diào)用GPT的API可以自定數(shù)據(jù)模型來(lái)實(shí)現(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í)返回的參數(shù)較少，直接寫(xiě)在里面

在網(wǎng)站的請(qǐng)求參數(shù)介紹中有這樣的內(nèi)容

我們實(shí)現(xiàn)的時(shí)簡(jiǎn)單的一對(duì)一的對(duì)話，所以message暫時(shí)可以不用管，在在線測(cè)試網(wǎng)站中嘗試

token可以通過(guò)注冊(cè)本網(wǎng)站來(lái)獲取[ ALAPI]

得到響應(yīng)主體

{
  "code": 200,
  "msg": "success",
  "data": {
    "content": "你好！我是一個(gè)AI助手，可以幫助您回答問(wèn)題和提供服務(wù)。有什么我可以為您做的嗎？"
  },
  "time": 1704790385,
  "usage": 1,
  "log_id": "603268355937845248"
}

可以看到我們需要的僅僅只有content內(nèi)的內(nèi)容。

創(chuàng)建輸入界面

作為一款問(wèn)答式GPT應(yīng)用，需要有用戶(hù)輸入的地方，我們這里簡(jiǎn)單的做一個(gè)輸入頁(yè)面

輸入頁(yè)面可以直接在默認(rèn)的index頁(yè)面中修改

輸入框組件

查詢(xún)按鈕

按鈕點(diǎn)擊時(shí)的事件，這里參考一篇博客，將用戶(hù)輸入內(nèi)容傳遞給下一個(gè)頁(yè)面，下一個(gè)頁(yè)面我們將其命名為ChatGpt

源代碼如下

import router from '@ohos.router'

@Entry
@Component
struct Login {
  @State message: string = '歡迎使用ChatGpt'

  build() {
    Column() {
      TextInput({
        placeholder: "請(qǐng)輸入您的問(wèn)題"
      }).onChange((value: string) = > {
        console.info("輸入的問(wèn)題是" + value)
        this.message = value

      }).type(InputType.Normal)

      Button("查詢(xún)")
        .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請(qǐng)求

下面我們寫(xiě)用戶(hù)點(diǎn)擊按鈕后的返回頁(yè)面

1.導(dǎo)入http模塊

登錄后復(fù)制

import http from '@ohos.net.http';
import { BusinessError } from '@ohos.base';

2.創(chuàng)建createHttp

let httpRequest = http.createHttp();

3.填寫(xiě)HTTP地址

httpData() {

  // 3.每一個(gè)httpRequest對(duì)應(yīng)一個(gè)HTTP請(qǐng)求任務(wù)，不可復(fù)用
  let httpRequest = http.createHttp();
  //4.
  httpRequest.request(// 填寫(xiě)HTTP請(qǐng)求的URL地址，可以帶參數(shù)也可以不帶參數(shù)。URL地址需要開(kāi)發(fā)者自定義。請(qǐng)求的參數(shù)可以在extraData中指定
    "https://v2.alapi.cn/api/chatgpt/pro",
    {
      method: http.RequestMethod.GET, // 可選，默認(rèn)為http.RequestMethod.GET
      // // 開(kāi)發(fā)者根據(jù)自身業(yè)務(wù)需要添加header字段
      header: [{
        'Content-Type': 'application/json'
      }],
      // 當(dāng)使用POST請(qǐng)求時(shí)此字段用于傳遞內(nèi)容
      extraData: {
        "token": "此處替換為你的token",
        "content":this.paramsFromIndex?.['message'],
        "max_tokens":"10000"
      },
      // expectDataType: http.HttpDataType.STRING, // 可選，指定返回?cái)?shù)據(jù)的類(lèi)型
      // usingCache: true, // 可選，默認(rèn)為true
      // priority: 1, // 可選，默認(rèn)為1
      // connectTimeout: 60000, // 可選，默認(rèn)為60000ms
      // readTimeout: 60000, // 可選，默認(rèn)為60000ms
      // usingProtocol: http.HttpProtocol.HTTP1_1, // 可選，協(xié)議類(lèi)型默認(rèn)值由系統(tǒng)自動(dòng)指定
      // usingProxy: false, //可選，默認(rèn)不使用網(wǎng)絡(luò)代理，自API 10開(kāi)始支持該屬性
    }, (err: BusinessError, data: http.HttpResponse) = > {
    
    //對(duì)網(wǎng)絡(luò)數(shù)據(jù)的處理    
    if (!err) {


      // data.result為HTTP響應(yīng)內(nèi)容，可根據(jù)業(yè)務(wù)需要進(jìn)行解析
      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ù)需要進(jìn)行解析
      console.info('header:' + JSON.stringify(data.header));
      console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
      // 當(dāng)該請(qǐng)求使用完畢時(shí)，調(diào)用destroy方法主動(dòng)銷(xiāo)毀
      httpRequest.destroy();
    } else {

      console.error('error:' + JSON.stringify(err));
      // 取消訂閱HTTP響應(yīng)頭事件
      httpRequest.off('headersReceive');
      // 當(dāng)該請(qǐng)求使用完畢時(shí)，調(diào)用destroy方法主動(dòng)銷(xiāo)毀
      httpRequest.destroy();
    }
  }
  );
}

不要忘記將頁(yè)面添加到mainpage中

路徑src/main/resources/base/profile/main_pages.json

接下來(lái)就可以嘗試運(yùn)行一下代碼，在開(kāi)發(fā)板中運(yùn)行效果如下

點(diǎn)擊查詢(xún)之后的效果如下：

如此，一個(gè)簡(jiǎn)單的GPT程序就做好了還可以讓它幫你寫(xiě)情書(shū)哦

最后附上HarmonyOS與OpenHarmony的技術(shù)分布曲線圖：主頁(yè)保存

審核編輯 黃宇