在HarmonyOS中調(diào)用百度翻譯API
作者：木棉花_小藍
在本案例中，我們是通過Http數(shù)據(jù)請求的方式調(diào)用百度翻譯API的，這意味著應用必須擁有聯(lián)網(wǎng)權(quán)限。
介紹
通過http請求和HarmonyOS自帶的加密框架，可以為移動應用實現(xiàn)調(diào)用百度翻譯API的功能。
完整示例
開發(fā)環(huán)境要求
● DevEco Studio版本：DevEco Studio 3.1 Release
● HarmonyOS SDK版本：API version 9
工程要求
● API9
● Stage模型
正文
代碼結(jié)構(gòu)
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添加權(quán)限
在本案例中，我們是通過http數(shù)據(jù)請求的方式調(diào)用百度翻譯API的，這意味著應用必須擁有聯(lián)網(wǎng)權(quán)限。所以我們需要在module.json5中申請“name”為"ohos.permission.INTERNET"的權(quán)限。
{
"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和密鑰
開發(fā)者能通過http數(shù)據(jù)請求調(diào)用百度翻譯API的前提是提供一些必要的認證信息，即開發(fā)者在百度翻譯開放平臺的App Id與密鑰。
首先，進入百度翻譯開放平臺的網(wǎng)址，網(wǎng)頁鏈接為http://api.fanyi.baidu.com。隨后，注冊個人用戶，并在注冊完成之后打開開發(fā)者信息的選項，即可查看自己的App Id與密鑰。
最后，我們還需要在平臺中開通通用文本翻譯API(這個是免費申請的)，成功開通后可以進入下一步。
翻譯工具模塊
在本案例中，調(diào)用百度翻譯API的關(guān)鍵代碼被封裝在翻譯工具類中，而翻譯工具類（ XL_Translation_Tool）則被集成在文件 XL_Translation_Tool.ts中。在XL_Translation_Tool.ts中，首先需要導入cryptoFramework與http，前者用于MD5數(shù)據(jù)加密，后者用于http數(shù)據(jù)請求。接著編寫兩個輔助函數(shù)，分別為Generate_number_Sequence_10與Transform_10_To_16，前者用于生成十位隨機數(shù)，后者則用于將10進制整數(shù)序列轉(zhuǎn)換為16進制整數(shù)序列。隨后，將MD5加密的代碼封裝在異步函數(shù)Generate_Sign內(nèi)，并創(chuàng)建類XL_Translation_Tool。在類XL_Translation_Tool中，provideDeveloperInfo方法用于獲取開發(fā)者在百度翻譯開放平臺的App Id與密鑰，translate方法則是基于上述App Id與密鑰，以及待翻譯文本，來調(diào)用百度翻譯API。調(diào)用API需要的URL格式如下：
最后，導出一個XL_Translation_Tool實例。
//導入加密框架
import cryptoFramework from '@ohos.security.cryptoFramework';
//導入http模塊
import http from '@ohos.net.http';
/*
* 函數(shù)名: Generate_number_Sequence_10
* 描述: 隨機生成攜帶十個元素的數(shù)字序列（此序列的數(shù)據(jù)類型為字符串）
*/
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
}
/*
* 函數(shù)名: Transform_10_To_16
* 描述: 用于將10進制整數(shù)序列（參數(shù)的數(shù)據(jù)類型為Uint8Array）轉(zhuǎn)換為16進制整數(shù)序列（輸出的數(shù)據(jù)類型為字符串）的輔助函數(shù)
*/
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
}
/*
* 函數(shù)名: Generate_Sign
* 描述: 通過MD5模塊進行信息加密, 以生成簽名
*/
async function Generate_Sign(query:string,appId:string, key:string, sequence_10:string){
//預定義輸出
let output = {
'ifComplete':false,
'Sign_16':null,
}
//創(chuàng)建md模塊
let MD5 = cryptoFramework.createMd('MD5')
//MD5加密的輸入值
let sign = appId + query + sequence_10 + key
//數(shù)據(jù)轉(zhuǎn)換
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)
//輸出加密結(jié)果
return output
}
/*
* 枚舉名: TranslationForm
* 描述: 用于確定翻譯流程的始末
*/
export enum TranslationForm{
From_En_To_Zh = 0,
From_Zh_To_En = 1
}
/*
* 數(shù)據(jù)類型名: TranslationResult
* 描述: 類XL_Translation_Tool的translate方法返回的數(shù)據(jù)類型
*/
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提供百度翻譯平臺的開發(fā)者信息, 這是百度翻譯API得以被調(diào)用的前提
*/
public provideDeveloperInfo(appId:string, key:string){
this.Baidu_APPID = appId
this.Baidu_Key = key
this.If_Provide_Developer_Info = true
}
/*
* 方法名: translate
* 描述: 將輸入的字符串信息, 通過百調(diào)用度翻譯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 = '請為翻譯工具提供百度智能翻譯平臺的開發(fā)者信息'
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位隨機整數(shù)序列
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 = '加密過程出錯, 請檢查相關(guān)項'
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)
//調(diào)用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()
//返回翻譯結(jié)果
return ret
}
}
//導出本模塊
export default new XL_Translation_Tool()主頁面
在頁面Index.ets中，我們需要設計一個自定義彈窗（名為dialog1）。該彈窗有一個用@Link裝飾器修飾的變量If_Provide_Developer_Info，表示此自定義彈窗組件與其父組件支持雙向數(shù)據(jù)傳遞。彈窗中有兩個文本輸入組件，分別用于輸入開發(fā)者的App Id與密鑰，而內(nèi)容為"確定"的文本組件則用于調(diào)用XL_Translation_Tool實例的provideDeveloperInfo方法，將開發(fā)者認證信息載入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('結(jié)果')
}
.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
......這樣之后，調(diào)用百度API的案例便編寫完成了，使用模擬器或真機可以查看運行效果。受一些奇怪的bug的影響，本案例中的翻譯功能只支持英譯中。
總結(jié)
通過本次案例，相信你已經(jīng)學會如何在HarmonyOS中調(diào)用百度翻譯API。
責任編輯：jianghua
來源：
51CTO 開源基礎(chǔ)軟件社區(qū)
