#夏日挑战赛# 【木棉花】：基于HarmonyOS的AI作诗应用开发 原创 精华

前言

「本文正在参加星光计划3.0–夏日挑战赛」
观看了《HarmonyOS零基础JS开发之AI作诗》直播课后，根据课程进行了实战开发，实现了基于HarmonyOS的AI作诗应用开发。

概述

实现效果如下：

正文

一、开发准备

1、下载安装好DevEco Studio

2、新建一个空白项目

二、开发步骤

1、添加权限

直播课程中给出了AI作诗的接口

HTTP数据请求功能主要由http模块提供。使用该功能需要申请ohos.permission.INTERNET权限。在config.json文件下添加代码:

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

此外，在config.json文件中的"abilities"模块里添加下述代码，可以去除在真机运行时左上方的标签

       "metaData": {
          "customizeData": [{
            "name": "hwc-theme",
            "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",
            "extra": ""
          }]
        }

2、界面布局

index.hml文件

<div class="container">
    <div class="container1">
        <text class="title">藏头诗</text>
        <input class="input" type="text" onchange="get_cangtou" placeholder="例：我爱祖国"></input>
        <button class="create" onclick="create_cangtou" value="生成藏头诗"></button>
        <divider class="divide"></divider>
        <text class="title">输入第一句诗</text>
        <div class="container2">
            <input class="input" type="text" onchange="get_xuxie" placeholder="例：本来无一物"></input>
        </div>
        <button class="create" onclick="create_xuxie" value="AI生成整首诗"></button>
        <dialog id="cangtouDialog">
            <div class="dialog-div1">
                <text class="txt">藏头诗生成成功</text>
                <text style="width : 100%; height : 180px; font-size : 16px; text-align : start; margin : 10px;">
                    {{ result_tou }}
                </text>
                <button class="close" onclick="close_tou" value="关闭"></button>
            </div>
        </dialog>
        <dialog id="xuxieDialog">
            <div class="dialog-div2">
                <text class="txt">整首诗生成成功</text>
                <text class="text">{{ result_xu }}</text>
                <button class="close" onclick="close_xu" value="关闭"></button>
            </div>
        </dialog>
    </div>
</div>

3、初始化数据

index.js

   data: {
        content_tou:"我爱祖国",
        content_xu:"本来无一物",
        result_tou:'',
        result_xu:''
    },

4、获取输入内容

    get_cangtou(e){
        this.content_tou=e.value
    },

    get_xuxie(e){
        this.content_xu=e.value
    },

5、通过网络接口生成诗

首先import需要的http模块：

import http from '@ohos.net.http';

点击按钮时响应事件——创建一个HTTP请求，返回一个HttpRequest对象，根据URL地址，发起HTTP网络请求，同时将结果赋值给弹窗内的文本组件，并显示弹窗内容。注意：每一个httpRequest对应一个http请求任务，不可复用，因此我在这里设置的是每次点击按钮都会创建一个http请求。

    create_cangtou(){
        console.info('pyl-Input:'+this.content_tou);
        let httpRequest = http.createHttp();
        httpRequest.request(
            "https://py.myie9.com/cangtoutest/"+this.content_tou,
            {
                method:http.RequestMethod.GET,
                header: {
                    'Content-Type': 'text/plain'
                },
                connectTimeout: 60000,
                readTimeout: 60000,
            }, (err, data) => {
            if (!err) {
                console.info('pyl-Result:' + data.result);
                this.result_tou = data.result;
                this.$element('cangtouDialog').show();
            } else {
                console.info('pyl-error:' + JSON.stringify(err));
            }
        })
    },

    create_xuxie(){
        console.info('pyl-Input:'+this.content_xu);
        let httpRequest = http.createHttp();
        httpRequest.request(
            "https://py.myie9.com/xuxietest/"+this.content_xu,
            {
                method:http.RequestMethod.GET,
                header: {
                    'Content-Type': 'text/plain'
                },
                connectTimeout: 60000,
                readTimeout: 60000,
            }, (err, data) => {
            if (!err) {
                console.info('pyl-Result:' + data.result);
                this.result_xu = data.result;
                this.$element('xuxieDialog').show();
            } else {
                console.info('pyl-error:' + JSON.stringify(err));
            }
        })
    },

详情代码见demo源码仓pyl_poem文件

结语

以上就是我这次的小分享啦❀❀！欢迎评论区交流哦O(∩_∩)O

更多资料请关注我们的项目 : Awesome-Harmony_木棉花