鸿蒙原生开发-仿ChatGPT应用实战

这篇具有很好参考价值的文章主要介绍了鸿蒙原生开发-仿ChatGPT应用实战。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

运行环境

DAYU200:4.0.10.16

SDK:4.0.10.15

IDE:4.0.600

前言

在配置好环境之后,可以尝试这编写一个较为简单的应用程序练练手,这里选择使用一个免费的API接口网站 ALAPI来尝试编写一个可进行对话的GPT应用程序。

创建项目

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

创建好项目之后可以先把helloworld的demo在真机上跑一下,注意需要签名

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

签名方式

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

随后直接点击运行,可以看到控制台输出

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

开发板效果如图所示

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

修改图标和名称

项目中含有文件记录了应用的图标和名称,一部分是设置里的,一部分是显示在桌面的,需要将这两部分均做修改。

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

如下图所示,icon和label分别对应图标与名称,我们将这里改为我们需要的内容

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

此时在系统设置中我们的应用图标和名称应当都改过来了

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

修改桌面图标和名称

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

我们修改label的时候,修改中文目录下的就可以,具体操作卫按住ctrl跳转时选择中文路径

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

更改后效果如下

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

对应用添加相关权限

由于使用ChatGpt需要使用网络权限,我们在这里添加网络权限

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

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

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

自定义数据模型

本次调用GPT的API可以自定数据模型来实现,我们可以在ets目录下新建Model文件夹,新建GPTModel文件(ts)

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

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

export class ChatGpt {
  content: string = ""

}

由于在API网站中查看ChatGPT调用时返回的参数较少,直接写在里面

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

在网站的请求参数介绍中有这样的内容

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

我们实现的时简单的一对一的对话,所以message暂时可以不用管,在在线测试网站中尝试

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

token可以通过注册本网站来获取 ALAPI

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

得到响应主体

{
  "code": 200,
  "msg": "success",
  "data": {
    "content": "你好!我是一个AI助手,可以帮助您回答问题和提供服务。有什么我可以为您做的吗?"
  },
  "time": 1704790385,
  "usage": 1,
  "log_id": "603268355937845248"
}

可以看到我们需要的仅仅只有content内的内容。

创建输入界面

作为一款问答式GPT应用,需要有用户输入的地方,我们这里简单的做一个输入页面

输入页面可以直接在默认的index页面中修改

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

输入框组件

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

查询按钮

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

按钮点击时的事件,这里参考一篇博客,将用户输入内容传递给下一个页面,下一个页面我们将其命名为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

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

接下来就可以尝试运行一下代码,在开发板中运行效果如下

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

点击查询之后的效果如下:

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

如此,一个简单的GPT程序就做好了还可以让它帮你写情书哦

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

最后附上HarmonyOS与OpenHarmony的技术分布曲线图:主页保存

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发

鸿蒙原生开发-仿ChatGPT应用实战,鸿蒙,harmonyos,鸿蒙开发,鸿蒙系统,程序员,Opeharmony,鸿蒙原生开发,鸿蒙实战开发文章来源地址https://www.toymoban.com/news/detail-820207.html

到了这里,关于鸿蒙原生开发-仿ChatGPT应用实战的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS鸿蒙原生应用开发设计- 服务组件库

    HarmonyOS设计文档中,为大家提供了一些已经设计好的原生服务组件库,开发者可以根据需要直接引用。 开发者直接使用官方提供的服务组件库样式,既可以符合HarmonyOS原生应用的开发上架运营规范,又可以防止使用别人的内容产生的侵权意外情况等,减少自主创作设计的工作

    2024年02月08日
    浏览(62)
  • HarmonyOS鸿蒙原生应用开发设计- 元服务(原子化服务)图标

    HarmonyOS设计文档中,为大家提供了独特的元服务图标,开发者可以根据需要直接引用。 开发者直接使用官方提供的元服务图标内容,既可以符合HarmonyOS原生应用的开发上架运营规范,又可以防止使用别人的元服务图标侵权意外情况等,减少自主创作元服务图标的工作量。当然

    2024年02月06日
    浏览(53)
  • HarmonyOS SDK,助力开发者打造焕然一新的鸿蒙原生应用

    鸿蒙生态 千帆启航仪式于 1 月1 8 日正式启动。 从2019年 HarmonyOS 正式发布到2 020 年“没有人能够熄灭漫天星光”,今天,满天星光终汇成璀璨星河, HarmonyOS NEXT鸿蒙 星河版 重磅发布,带来了全新架构、全新体验、全新生态。 作为支撑鸿蒙原生应用开发的技术源动力,Harmon

    2024年01月20日
    浏览(92)
  • 鸿蒙HarmonyOS4.0开发应用从入门到实战 安装DevEcoStudio

    安装包下载地址: 可以根据自己的操作系统选择对应版本下载。 HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 下载好后,打开安装包,进入安装界面: 点击Next,进入安装目录选择页面(不要出现中文或特殊字符),可以走默认路径: 点击Next,进入安装选项页面,按照如

    2024年02月04日
    浏览(82)
  • 课程分享:鸿蒙HarmonyOS系统及物联网开发实战课程(附课程视频及源码下载)

    课程名称: 鸿蒙HarmonyOS系统及物联网开发实战课程 课程介绍: HarmonyOS 是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,HarmonyOS 提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持手机、平板、智能穿戴、智慧屏、

    2024年02月06日
    浏览(58)
  • 鸿蒙HarmonyOS开发实战—多媒体开发(音频开发 一)

    HarmonyOS音频模块支持音频业务的开发,提供音频相关的功能,主要包括音频播放、音频采集、音量管理和短音播放等。 基本概念 采样 采样是指将连续时域上的模拟信号按照一定的时间间隔采样,获取到离散时域上离散信号的过程。 采样率 采样率为每秒从连续信号中提取并

    2024年01月24日
    浏览(51)
  • 鸿蒙(HarmonyOS)应用开发指南

    1.1 简介 鸿蒙 (即 HarmonyOS ,开发代号 Ark ,正式名称为华为终端鸿蒙智能设备操作系统软件)是华为公司自 2012 年以来开发的一款可支持鸿蒙原生应用和兼容 AOSP 应用的 分布式操作系统 。该系统利用“分布式”技术将 手机、电脑、平板、电视、汽车和智能穿戴 等多款设备

    2024年02月02日
    浏览(104)
  • 鸿蒙HarmonyOS实战-Stage模型(应用上下文Context)

    应用上下文(Context)是应用程序的全局信息的接口。它是一个抽象类,提供了访问应用程序环境的方法和资源的方法。应用上下文可以用于获取应用程序的资源、启动Activity、发送广播等。每个应用程序都有一个应用上下文对象,它在整个应用程序的生命周期内都是唯一的。

    2024年02月20日
    浏览(61)
  • HarmonyOS 鸿蒙应用开发(十一、面向鸿蒙开发的JavaScript基础)

    ArkTS 是HarmonyOS(鸿蒙操作系统)原生应用开发的首选语言。它是用于构建用户界面的一种TypeScript方言,扩展了TypeScript以适应HarmonyOS生态系统的UI开发需求。ArkTS 融合了TypeScript的静态类型系统和现代UI框架的设计理念,为开发者提供了一种更安全高效的方式来编写HarmonyOS应用。

    2024年02月20日
    浏览(56)
  • 【HarmonyOS】开发一个可以看小姐姐的鸿蒙应用 鸿蒙开发入门

    先整张效果图,丑点是丑点,但可以用,买不起鸿蒙系统手机的我,只配用虚拟机。 要说目前最火的手机操作系统,要我来看的话那必然是鸿蒙无疑。16号刚刚结束了第五次鸿蒙内测,在看到这次的内测名单之后,居然有970的机器,这是不是说明俺这手里奋战了三年的荣耀

    2024年02月15日
    浏览(94)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包