鸿蒙原生开发-仿ChatGPT应用实战
运行环境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@componentstruct 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程序就做好了还可以让它帮你写情书哦
最后附上harmonyos与openharmony的技术分布曲线图：主页保存
在 Omniverse Kit 104 中使用 C++ 和 Python 创建自定义元宇宙应用
其实人工智能也是一把暗藏风险的双刃剑
rfid仓库管理系统的硬件组成和软件组成
5G网络建设最新进展的总结
高频耦合UPS变换电路设计
鸿蒙原生开发-仿ChatGPT应用实战
Amazfit智能运动手表3系列将迎重大更新 运动模式将增至80种
显卡缺货，矿卡复兴：显卡市场又要变天 NV动心思了
微雪电子VL53L1X测距传感器4米VL53L1X测距模块简介
明年三星Galaxy全系列将预装Samsung Pay
风电场上的无线测温的操控及无线测温技术
大线径绕线电感在使用中发热大会影响使用吗
iPhone15系列国行售价曝光
联智通达科技LX-R3S嵌入式主板介绍
华为与拓维信息携手推进OpenHarmony在公路领域生态建设
关于Pre-trained模型加速模型学习的建议
Altera宣布启动其设计解决方案网路，加速客户FPGA、SoC等产品的创新
什么是编码器呢？如何测量旋转量和旋转速度？
怎么知道手表中框防水性能是否符合要求
工业物联网的构建需要注意什么问题
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@componentstruct 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程序就做好了还可以让它帮你写情书哦
最后附上harmonyos与openharmony的技术分布曲线图：主页保存
在 Omniverse Kit 104 中使用 C++ 和 Python 创建自定义元宇宙应用
其实人工智能也是一把暗藏风险的双刃剑
rfid仓库管理系统的硬件组成和软件组成
5G网络建设最新进展的总结
高频耦合UPS变换电路设计
鸿蒙原生开发-仿ChatGPT应用实战
Amazfit智能运动手表3系列将迎重大更新 运动模式将增至80种
显卡缺货，矿卡复兴：显卡市场又要变天 NV动心思了
微雪电子VL53L1X测距传感器4米VL53L1X测距模块简介
明年三星Galaxy全系列将预装Samsung Pay
风电场上的无线测温的操控及无线测温技术
大线径绕线电感在使用中发热大会影响使用吗
iPhone15系列国行售价曝光
联智通达科技LX-R3S嵌入式主板介绍
华为与拓维信息携手推进OpenHarmony在公路领域生态建设
关于Pre-trained模型加速模型学习的建议
Altera宣布启动其设计解决方案网路，加速客户FPGA、SoC等产品的创新
什么是编码器呢？如何测量旋转量和旋转速度？
怎么知道手表中框防水性能是否符合要求
工业物联网的构建需要注意什么问题