在HarmonyOS中調用百度翻譯API

作者：木棉花_小藍 2023-12-20 17:38:44

系統 OpenHarmony

在本案例中，我們是通過Http數據請求的方式調用百度翻譯API的，這意味著應用必須擁有聯網權限。

想了解更多關于開源的內容，請訪問：

51CTO 開源基礎軟件社區

https://ost.51cto.com

介紹

通過http請求和HarmonyOS自帶的加密框架，可以為移動應用實現調用百度翻譯API的功能。

完整示例

完整示例鏈接

開發環境要求

● DevEco Studio版本：DevEco Studio 3.1 Release

● HarmonyOS SDK版本：API version 9

工程要求

● API9

● Stage模型

正文

代碼結構

main
├─ module.json5
├─ resources
│  ├─ zh_CN
│  ├─ rawfile        //圖片資源目錄
│  │  ├─ image1.png
│  │  └─ image2.png
│  └─ base
└─ ets
   ├─ XL_Modules
   │  └─ XL_Translation_Tool.ts    //翻譯工具模塊
   ├─ pages
   │  └─ Index.ets          //主頁面
   └─ entryability
      └─ EntryAbility.ts

添加權限

在本案例中，我們是通過http數據請求的方式調用百度翻譯API的，這意味著應用必須擁有聯網權限。所以我們需要在module.json5中申請“name”為"ohos.permission.INTERNET"的權限。

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "inuse"
        }
      }
    ],
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ]
  }
}

獲取百度翻譯開放平臺的App Id和密鑰

開發者能通過http數據請求調用百度翻譯API的前提是提供一些必要的認證信息，即開發者在百度翻譯開放平臺的App Id與密鑰。

首先，進入百度翻譯開放平臺的網址，網頁鏈接為http://api.fanyi.baidu.com。隨后，注冊個人用戶，并在注冊完成之后打開開發者信息的選項，即可查看自己的App Id與密鑰。

最后，我們還需要在平臺中開通通用文本翻譯API(這個是免費申請的)，成功開通后可以進入下一步。

翻譯工具模塊

在本案例中，調用百度翻譯API的關鍵代碼被封裝在翻譯工具類中，而翻譯工具類（ XL_Translation_Tool）則被集成在文件 XL_Translation_Tool.ts中。在XL_Translation_Tool.ts中，首先需要導入cryptoFramework與http，前者用于MD5數據加密，后者用于http數據請求。接著編寫兩個輔助函數，分別為Generate_number_Sequence_10與Transform_10_To_16，前者用于生成十位隨機數，后者則用于將10進制整數序列轉換為16進制整數序列。隨后，將MD5加密的代碼封裝在異步函數Generate_Sign內，并創建類XL_Translation_Tool。在類XL_Translation_Tool中，provideDeveloperInfo方法用于獲取開發者在百度翻譯開放平臺的App Id與密鑰，translate方法則是基于上述App Id與密鑰，以及待翻譯文本，來調用百度翻譯API。調用API需要的URL格式如下：

最后，導出一個XL_Translation_Tool實例。

//導入加密框架
import cryptoFramework from '@ohos.security.cryptoFramework';

//導入http模塊
import http from '@ohos.net.http';

/*
 * 函數名: Generate_number_Sequence_10
 * 描述: 隨機生成攜帶十個元素的數字序列（此序列的數據類型為字符串）
 */
function Generate_number_Sequence_10():string{

  var ret:string = ''

  for(var i = 0; i < 10; ++i){
    ret += Math.floor(Math.random()*9.999)
  }

  console.info('------[Random] '+ret)
  return ret

}

/*
 * 函數名: Transform_10_To_16
 * 描述: 用于將10進制整數序列（參數的數據類型為Uint8Array）轉換為16進制整數序列（輸出的數據類型為字符串）的輔助函數
 */
function Transform_10_To_16(Sign_10:Uint8Array):string{
  let Array_16 = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
  let Sign_16:string = ''
  for(var item of Sign_10) Sign_16 += Array_16[(item-item%16)/16]+Array_16[item%16]
  console.info('------[MD5 16]: '+Sign_16.toString())
  return Sign_16
}

/*
 * 函數名: Generate_Sign
 * 描述: 通過MD5模塊進行信息加密, 以生成簽名
 */
async function Generate_Sign(query:string,appId:string, key:string, sequence_10:string){

  //預定義輸出
  let output = {
    'ifComplete':false,
    'Sign_16':null,
  }

  //創建md模塊
  let MD5 = cryptoFramework.createMd('MD5')

  //MD5加密的輸入值
  let sign = appId + query + sequence_10 + key

  //數據轉換
  var arr = []
  for(var i = 0 ; i < sign.length ; i++)arr.push(sign.charCodeAt(i))
  var dataBlog = {
    data:new Uint8Array(arr)
  }
  console.info('------[MD5 10] dataBlog: '+dataBlog.data.toString())

  //開始MD5加密
  await MD5.update(dataBlog)
  var SecretSign
  await MD5.digest().then((mdOutput) => {
    SecretSign = mdOutput.data
    console.info("------[MD5 10] MD result: " + SecretSign.toString());
    output.ifComplete = true
    output.Sign_16 = SecretSign
  }).catch((err) => console.error("------[MD5 10] err: " + err.code))

  output.Sign_16 = Transform_10_To_16(SecretSign)

  //輸出加密結果
  return output

}

/*
 * 枚舉名: TranslationForm
 * 描述: 用于確定翻譯流程的始末
 */
export enum TranslationForm{

  From_En_To_Zh = 0,

  From_Zh_To_En = 1

}

/*
 * 數據類型名: TranslationResult
 * 描述: 類XL_Translation_Tool的translate方法返回的數據類型
 */
declare type TranslationResult = {

  ifComplete:boolean

  result:string

  description:string

}

class XL_Translation_Tool{

  private TAG:string = '------[XL_Translation_Tool] '

  private Baidu_Translation_API_URL_Prefix:string = 'https://fanyi-api.baidu.com/api/trans/vip/translate'

  private Baidu_APPID:string = ''

  private Baidu_Key:string = ''

  private If_Provide_Developer_Info:boolean = false

  /*
   * 方法名: provideDeveloperInfo
   * 描述: 為XL_Translation_Tool提供百度翻譯平臺的開發者信息, 這是百度翻譯API得以被調用的前提
   */
  public provideDeveloperInfo(appId:string, key:string){
    this.Baidu_APPID = appId
    this.Baidu_Key = key
    this.If_Provide_Developer_Info = true
  }

  /*
   * 方法名: translate
   * 描述: 將輸入的字符串信息, 通過百調用度翻譯API進行翻譯并返回
   */
  public async translate(message:string, form:TranslationForm):Promise<TranslationResult>{

    //預定義返回值
    var ret:TranslationResult = {
      ifComplete:false,
      result:null,
      description:''
    }

    //判斷appId和key是否被提供
    if(!this.If_Provide_Developer_Info){
      ret.description = '請為翻譯工具提供百度智能翻譯平臺的開發者信息'
      console.info(this.TAG+'Please provide the appId and key')
      return ret
    }

    //通過http模塊實例化HttpRequest
    var httpRequest = http.createHttp()

    let from:string
    let to:string
    let query:string = message+''

    if(form == TranslationForm.From_En_To_Zh){
      from = 'en'
      to = 'zh'
    }else if(form == TranslationForm.From_Zh_To_En){
      from = 'zh'
      to = 'en'
    }

    //生成10位隨機整數序列
    const RANDOM_SEQUENCE:string = Generate_number_Sequence_10()

    var sign:string

    //生成簽名
    let msg = await Generate_Sign(query,this.Baidu_APPID,this.Baidu_Key,RANDOM_SEQUENCE)
    if(msg.ifComplete){
      sign = msg.Sign_16
    }else {
      ret.description = '加密過程出錯, 請檢查相關項'
      return ret
    }

    //拼接URL
    let url = this.Baidu_Translation_API_URL_Prefix
    +'?q=' + encodeURI(query)
    +'&from=' +from
    +'&to='+to
    +'&appid='+this.Baidu_APPID
    +'&salt='+RANDOM_SEQUENCE
    +'&sign='+sign

    console.info(this.TAG+'url: '+url)

    //調用request方法
    await httpRequest.request(url,{
      method:http.RequestMethod.POST,
      header:{
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then((data)=>{
      console.info(this.TAG+'Succeed in connecting to Internet')
      // @ts-ignore
      let trans_result = JSON.parse(data.result).trans_result
      console.info(this.TAG+'Result:' + data.result);
      console.info(this.TAG+'code:' + JSON.stringify(data.responseCode));
      console.info(this.TAG+'Translate output:'+trans_result[0].dst)
      ret.ifComplete = true
      ret.description = '翻譯成功'
      ret.result = trans_result[0].dst
    }).catch(err => console.error(this.TAG+'err:'+JSON.stringify(err)))

    //銷毀HttpRequest實例
    httpRequest.destroy()

    //返回翻譯結果
    return ret
  }

}

//導出本模塊
export default new XL_Translation_Tool()

主頁面

在頁面Index.ets中，我們需要設計一個自定義彈窗（名為dialog1）。該彈窗有一個用@Link裝飾器修飾的變量If_Provide_Developer_Info，表示此自定義彈窗組件與其父組件支持雙向數據傳遞。彈窗中有兩個文本輸入組件，分別用于輸入開發者的App Id與密鑰，而內容為"確定"的文本組件則用于調用XL_Translation_Tool實例的provideDeveloperInfo方法，將開發者認證信息載入XL_Translation_Tool實例中。

//導入自定義的翻譯工具
import XL_Translation_Tool, { TranslationForm } from 'ets/XL_Modules/XL_Translation_Tool'

//主頁面UI
@Entry
@Component
struct Index{
		......
}

//自定義彈窗
@CustomDialog
struct dialog1{

  dialogController:CustomDialogController
  @Link If_Provide_Developer_Info:boolean
  @State private Baidu_AppId:string = ''
  @State private Baidu_Key:string = ''

  build(){
    Column(){

      Text('APP Id: ')
        .fontSize(20)
        .fontWeight(600)
        .fontColor(Color.Gray)
        .margin({
          top:20,
          bottom:4
        })
        .width('86%')

      TextInput()
        .type(InputType.Number)
        .width('95%')
        .height(40)
        .backgroundColor('#eeeeee')
        .onChange((value:string) => this.Baidu_AppId = value)

      Text('密鑰: ')
        .fontSize(20)
        .fontWeight(600)
        .fontColor(Color.Gray)
        .margin({
          top:20,
          bottom:4
        })
        .width('86%')

      TextInput({
        text:this.Baidu_Key
      })
        .type(InputType.Password)
        .width('95%')
        .height(40)
        .backgroundColor('#eeeeee')
        .onChange((value:string) => this.Baidu_Key = value)

      Row(){
        Text('確認')
          .fontSize(24)
          .fontWeight(700)
          .fontColor(Color.Blue)
          .onClick(() => {
            this.dialogController.close()
            this.If_Provide_Developer_Info = true
            XL_Translation_Tool.provideDeveloperInfo(this.Baidu_AppId, this.Baidu_Key)
          })

        Text('取消')
          .fontSize(24)
          .fontWeight(700)
          .fontColor(Color.Red)
          .onClick(() => {
            this.dialogController.close()
          })
      }
      .width('100%')
      .margin({
        top:30
      })
      .justifyContent(FlexAlign.SpaceEvenly)


    }
    .height(260)
    .width('92%')
  }

}

最后，編寫頁面入口Index。dialogController表示自定義彈窗組件dialog1的控制器。

//導入自定義的翻譯工具
import XL_Translation_Tool, { TranslationForm } from 'ets/XL_Modules/XL_Translation_Tool'

//主頁面UI
@Entry
@Component
struct Index {

  @State private If_Provide_Developer_Info:boolean = false
  @State private translation_mode:number = TranslationForm.From_En_To_Zh

  @State private translation_content:string = ''
  @State private translation_result:string = ''

  private dialogController = new CustomDialogController({
    builder:dialog1({
      If_Provide_Developer_Info:$If_Provide_Developer_Info
    })
  })


  private async Begin_Translate(){
    let result = await XL_Translation_Tool.translate(this.translation_content, this.translation_mode)
    this.translation_result = result.result
  }

  build() {
      Column() {

        Text('百度翻譯API')
          .fontSize(36)
          .fontColor(Color.Pink)
          .fontWeight(800)
          .margin({
            top:20
          })


        Row(){

          Row() {
            Text('英譯中')
              .fontSize(20)
              .fontColor('#8099ff')
              .fontWeight(800)

            Image($rawfile('image2.png'))
              .height(30)
              .width(30)
          }

          Text('提供密鑰')
            .fontSize(20)
            .fontColor('#ff6666')
            .fontWeight(800)
            .onClick(() => this.dialogController.open())

        }
        .margin({
          top:20
        })
        .width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)

        Text('輸入')
          .fontSize(20)
          .fontWeight(600)
          .fontColor(Color.Gray)
          .margin({
            top:30,
            bottom:10
          })
          .width('86%')


        TextArea()
          .width('90%')
          .height(120)
          .border({
            width:3,
          })
          .onChange((value:string) => this.translation_content = value)
          .fontSize(21)

        Text() {
          Span('結果')
        }
        .fontSize(20)
        .fontWeight(600)
        .fontColor(Color.Gray)
        .margin({
          top: 30,
          bottom: 10
        })
        .width('86%')


        TextArea({
          text:this.translation_result
        })
          .width('90%')
          .height(150)
          .border({
            width:3,
          })
        .fontSize(21)


        Row(){

          Image($rawfile('image1.png'))
            .height(40)
            .width(40)

          Text('翻譯')
            .fontWeight(700)
            .fontSize(24)
            .fontColor(Color.White)
            .margin({
              left:20
            })

        }
        .width('93%')
        .height(50)
        .backgroundColor('#8099ff')
        .borderRadius(30)
        .justifyContent(FlexAlign.Center)
        .margin({
          top:50
        })
        .onClick(() =>{
          if(!this.If_Provide_Developer_Info){
            this.dialogController.open()
            return
          }
          console.info('------[ArkUI] '+'--'+this.translation_content+'--')
          this.Begin_Translate()
        })


      }
      .width('100%')
  }
}

//自定義彈窗
@CustomDialog
......

這樣之后，調用百度API的案例便編寫完成了，使用模擬器或真機可以查看運行效果。受一些奇怪的bug的影響，本案例中的翻譯功能只支持英譯中。

總結

通過本次案例，相信你已經學會如何在HarmonyOS中調用百度翻譯API。