色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙原生開發-仿ChatGPT應用實戰

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-01-23 17:40 ? 次閱讀

運行環境

DAYU200:4.0.10.16

SDK:4.0.10.15

IDE:4.0.600

前言

在配置好環境之后,可以嘗試這編寫一個較為簡單的應用程序練練手,這里選擇使用一個免費的API接口網站 ALAPI來嘗試編寫一個可進行對話的GPT應用程序。

創建項目

創建好項目之后可以先把helloworld的demo在真機上跑一下,注意需要簽名

簽名方式

隨后直接點擊運行,可以看到控制臺輸出

開發板效果如圖所示

修改圖標和名稱

項目中含有文件記錄了應用的圖標和名稱,一部分是設置里的,一部分是顯示在桌面的,需要將這兩部分均做修改。

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

如下圖所示,icon和label分別對應圖標與名稱,我們將這里改為我們需要的內容

此時在系統設置中我們的應用圖標和名稱應當都改過來了

修改桌面圖標和名稱

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

我們修改label的時候,修改中文目錄下的就可以,具體操作衛按住ctrl跳轉時選擇中文路徑

更改后效果如下

對應用添加相關權限

由于使用ChatGpt需要使用網絡權限,我們在這里添加網絡權限

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

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

自定義數據模型

本次調用GPT的API可以自定數據模型來實現,我們可以在ets目錄下新建Model文件夾,新建GPTModel文件(ts)

export class ChatGptModel {
  code: number = 0
  message: string = ""
  data: ChatGpt = new ChatGpt()
}

export class ChatGpt {
  content: string = ""

}

由于在API網站中查看ChatGPT調用時返回的參數較少,直接寫在里面

在網站的請求參數介紹中有這樣的內容

我們實現的時簡單的一對一的對話,所以message暫時可以不用管,在在線測試網站中嘗試

token可以通過注冊本網站來獲取[ ALAPI]

得到響應主體

{
  "code": 200,
  "msg": "success",
  "data": {
    "content": "你好!我是一個AI助手,可以幫助您回答問題和提供服務。有什么我可以為您做的嗎?"
  },
  "time": 1704790385,
  "usage": 1,
  "log_id": "603268355937845248"
}

可以看到我們需要的僅僅只有content內的內容。

創建輸入界面

作為一款問答式GPT應用,需要有用戶輸入的地方,我們這里簡單的做一個輸入頁面

輸入頁面可以直接在默認的index頁面中修改

輸入框組件

查詢按鈕

按鈕點擊時的事件,這里參考一篇博客,將用戶輸入內容傳遞給下一個頁面,下一個頁面我們將其命名為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
    })
  }
}

創建HTTP請求

下面我們寫用戶點擊按鈕后的返回頁面

1.導入http模塊

登錄后復制

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

2.創建createHttp

let httpRequest = http.createHttp();

3.填寫HTTP地址

httpData() {

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


      // data.result為HTTP響應內容,可根據業務需要進行解析
      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響應頭,可根據業務需要進行解析
      console.info('header:' + JSON.stringify(data.header));
      console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
      // 當該請求使用完畢時,調用destroy方法主動銷毀
      httpRequest.destroy();
    } else {

      console.error('error:' + JSON.stringify(err));
      // 取消訂閱HTTP響應頭事件
      httpRequest.off('headersReceive');
      // 當該請求使用完畢時,調用destroy方法主動銷毀
      httpRequest.destroy();
    }
  }
  );
}

不要忘記將頁面添加到mainpage中

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

接下來就可以嘗試運行一下代碼,在開發板中運行效果如下

點擊查詢之后的效果如下:

如此,一個簡單的GPT程序就做好了還可以讓它幫你寫情書哦

最后附上HarmonyOSOpenHarmony的技術分布曲線圖:主頁保存

審核編輯 黃宇

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • API
    API
    +關注

    關注

    2

    文章

    1499

    瀏覽量

    61971
  • 鴻蒙
    +關注

    關注

    57

    文章

    2345

    瀏覽量

    42822
  • OpenHarmony
    +關注

    關注

    25

    文章

    3716

    瀏覽量

    16271
  • ChatGPT
    +關注

    關注

    29

    文章

    1560

    瀏覽量

    7604
收藏 人收藏

    評論

    相關推薦

    鴻蒙原生開發手記:01-元服務開發

    簡介 元服務是鴻蒙中的一種輕量應用形態,無需下載,直接運行。類似于微信小程序,但與小程序不同的是,元服務更加輕量。 元服務使用原生開發,是系統級提供的,無論從易用性、性能、體驗上,都要比小程序好
    發表于 11-14 17:28

    鴻蒙Flutter實戰:07混合開發

    # 鴻蒙Flutter實戰:混合開發 鴻蒙Flutter混合開發主要有兩種形式。 ## 1.基于har 將flutter module
    發表于 10-23 16:00

    軟通動力榮膺首批“鴻蒙原生應用開發及培訓鉆石服務商”

    近日,鴻蒙原生應用合作交流推介會在深圳成功召開。在此次盛會上,軟通動力脫穎而出,成為鴻蒙生態的首批認證合作伙伴,并榮獲“鴻蒙原生應用
    的頭像 發表于 05-22 10:53 ?745次閱讀

    哪吒汽車APP啟動鴻蒙原生應用開發

    哪吒汽車正式簽約,啟動鴻蒙原生應用開發;在5月17日,在上海市經濟和信息化委員會指導的“千帆競發啟航 共筑鴻蒙生態——HDD上海站·鴻蒙
    的頭像 發表于 05-18 09:48 ?1163次閱讀

    實錘!騰訊終于擁抱鴻蒙生態,微信鴻蒙原生版本即將上線

    兼容,為用戶提供更好的使用體驗。微信的加入將為鴻蒙生態注入新的活力,為用戶帶來更多便利和樂趣 。此前華為宣布啟動原生應用的布局后,美團、微博、釘釘等頭部廠商紛紛官宣啟動鴻蒙原生應用的
    發表于 04-30 21:14

    深圳市24年,實現鴻蒙原生應用數占全國總量10%以上

    不吹不捧,鴻蒙自從24年的星河版發布會之后。純血鴻蒙已經開啟大規模的行動,首批 200 + 鴻蒙原生應用已經在加速開發,先鋒垂域齊備,覆蓋便
    發表于 03-04 21:42

    鴻蒙實戰項目開發:【短信服務】

    、OpenHarmony 多媒體技術、Napi組件、OpenHarmony內核、Harmony南向開發鴻蒙項目實戰等等)鴻蒙(Harmony NEXT) 技術知識點 如果你是一名An
    發表于 03-03 21:29

    使用 Taro 開發鴻蒙原生應用 —— 快速上手,鴻蒙應用開發指南

    隨著鴻蒙系統的不斷完善,許多應用廠商都希望將自己的應用移植到鴻蒙平臺上。最近,Taro 發布了 v4.0.0-beta.x 版本,支持使用 Taro 快速開發鴻蒙
    的頭像 發表于 02-02 16:09 ?863次閱讀
    使用 Taro <b class='flag-5'>開發</b><b class='flag-5'>鴻蒙</b><b class='flag-5'>原生</b>應用 —— 快速上手,<b class='flag-5'>鴻蒙</b>應用<b class='flag-5'>開發</b>指南

    淘寶與華為合作將基于HarmonyOS NEXT啟動鴻蒙原生應用開發

    1月25日,淘寶與華為舉辦鴻蒙合作簽約儀式,宣布將基于HarmonyOS NEXT啟動鴻蒙原生應用開發
    的頭像 發表于 01-26 16:14 ?1119次閱讀

    淘寶正式啟動華為鴻蒙原生應用開發

    華為與淘寶近日宣布,淘寶已正式啟動鴻蒙原生應用開發。這一合作標志著鴻蒙生態在電商領域的布局進一步擴大,將為用戶帶來全新的全場景購物體驗。
    的頭像 發表于 01-26 15:59 ?784次閱讀

    鴻蒙原生應用/元服務實戰-Web隱私聲明

    這個位置的隱私申明是需要在WEB網頁下完成的,ArkTS鴻蒙原生應用與元服務開發者,不一定熟悉這塊,一些公司也不一定有自己的服務器和域名、網站網頁或者相關權限是外包,沒法進行實時操作。所以,這塊要提前準備,要不會影響提交進度。
    發表于 01-24 15:05

    多家頭部企業宣布「啟動鴻蒙原生應用開發」,你看好鴻蒙系統走向「獨立」嗎?

    鴻蒙生態迎「關鍵一戰」,多家頭部企業宣布「啟動鴻蒙原生應用開發」,你看好鴻蒙系統走向「獨立」嗎?
    的頭像 發表于 01-24 11:47 ?560次閱讀
    多家頭部企業宣布「啟動<b class='flag-5'>鴻蒙</b><b class='flag-5'>原生</b>應用<b class='flag-5'>開發</b>」,你看好<b class='flag-5'>鴻蒙</b>系統走向「獨立」嗎?

    京東正式啟動鴻蒙原生應用開發

    華為與京東于近日宣布達成一項重要合作,正式啟動鴻蒙原生應用開發。這一合作旨在利用HarmonyOS NEXT的獨特優勢,為消費者提供更出色的購物體驗。
    的頭像 發表于 01-18 15:02 ?777次閱讀

    京東與華為鴻蒙合作 京東啟動鴻蒙原生應用開發

     1月10日,華為和京東宣布正式合作,共同推動鴻蒙原生應用的開發,進一步完善鴻蒙生態系統。
    的頭像 發表于 01-11 16:22 ?981次閱讀

    鴻蒙千帆起】《開心消消樂》完成鴻蒙原生應用開發,創新多端聯動用戶體驗

    《開心消消樂》已經完成鴻蒙原生應用開發,樂元素成為率先完成鴻蒙原生應用開發的 20+游戲廠商之一
    發表于 01-03 10:22
    主站蜘蛛池模板: 国产视频www| 亚洲国产精品免费观看| SM调教贱屁股眼哭叫求饶H| 免费视频久久只有精品| 777午夜精品久久AV蜜臀| 蜜芽tv在线www| 69精品国产人妻蜜桃国产毛片| 毛片999| 8090碰成年女人免费碰碰尤物| 乱亲女H秽乱长久久久| 777黄色片| 女人一级毛片免费观看| my pico未删减在线观看| 啪啪啪社区| 大胸美女被吊起来解开胸罩| 少妇大荫蒂毛多毛大| 国产精品久久久久久人妻精品蜜桃| 污到湿的爽文免费阅读| 国产亚洲精品久久久999无毒| 亚洲乱码中文字幕久久| 久久青草免费91线频观看站街 | 女教师の诱惑| NANANA在线观看高清影院| 日韩一区二区天海翼| 国产精品成人无码免费视频| 亚洲福利区| 久久精品天天中文字幕| 97人视频国产在线观看| 秋霞电影网午夜鲁丝片无码| 国产成人午夜精品免费视频| 亚洲AV久久无码精品热九九| 久99视频精品免费观看福利| 2023国产精品一卡2卡三卡4卡| 欧美97色伦影院在线观看| 国产 欧美 亚洲 日韩视频| 亚洲 自拍 偷拍 另类综合图区| 精品成人在线视频| 99精品欧美一区二区三区美图| 日本乱hd高清videos| 国产嫩草在线观看| 伊人22222|