自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

端云一體化開(kāi)發(fā)-計(jì)算十二生肖-云函數(shù)

云計(jì)算
這次直接使用端云一體化開(kāi)發(fā),方便了很多,不用手工集成云函數(shù)SDK, 而且在DevEco Studio 就可以完成端側(cè)代碼開(kāi)發(fā)和云側(cè)代碼開(kāi)發(fā),一鍵部署云函數(shù)和云數(shù)據(jù)庫(kù)。

??想了解更多關(guān)于開(kāi)源的內(nèi)容,請(qǐng)?jiān)L問(wèn):??

??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

一、前言

之前帖子介紹過(guò)用不同方式計(jì)算十二生肖,也用過(guò)Serverless云函數(shù)計(jì)算,但那時(shí)是用Java調(diào)用云函數(shù),這次直接使用端云一體化開(kāi)發(fā),方便了很多,不用手工集成云函數(shù)SDK, 而且在DevEco Studio 就可以完成端側(cè)代碼開(kāi)發(fā)和云側(cè)代碼開(kāi)發(fā),一鍵部署云函數(shù)和云數(shù)據(jù)庫(kù),下面先來(lái)看一下效果。

二、效果

端云一體化開(kāi)發(fā)-計(jì)算十二生肖-云函數(shù)-開(kāi)源基礎(chǔ)軟件社區(qū)

三、講解

創(chuàng)建端云一體化項(xiàng)目,這里就不介紹的,可以移步到官方詳細(xì)教程 ??創(chuàng)建端云一體化開(kāi)發(fā)工程-端云一體化開(kāi)發(fā)-應(yīng)用/服務(wù)開(kāi)發(fā)-DevEco Studio使用指南(HarmonyOS)-工具-HarmonyOS應(yīng)用開(kāi)發(fā)?? 端云一體化項(xiàng)目結(jié)構(gòu)和之前不一樣,多了CloudProgram模塊, 下面介紹項(xiàng)目開(kāi)發(fā),先從云側(cè)開(kāi)發(fā)開(kāi)始,再到端側(cè)開(kāi)發(fā)。

四、云側(cè)開(kāi)發(fā)

1、展開(kāi)CloudProgram模塊,右擊cloudfunctions目錄,創(chuàng)建自定義云函數(shù):

端云一體化開(kāi)發(fā)-計(jì)算十二生肖-云函數(shù)-開(kāi)源基礎(chǔ)軟件社區(qū)

端云一體化開(kāi)發(fā)-計(jì)算十二生肖-云函數(shù)-開(kāi)源基礎(chǔ)軟件社區(qū)

2、打開(kāi)function-config.json文件,記錄修改authType為apigw-client。
{
"handler": "zodiacFun.myHandler",
"triggers": [
{
"type": "http",
"properties": {
"enableUriDecode": true,
"authFlag": "true",
"authAlgor": "HDA-SYSTEM",
"authType": "apigw-client"
}
}
]
}
3、打開(kāi)zodiacFun.ts文件,編寫自定云函數(shù)邏輯,計(jì)算十二生肖方法就是寫在這里,同時(shí)把結(jié)果返回端側(cè).
let myHandler = async function (event, context, callback, logger) {
// 打印參數(shù)
logger.info("**event: "+JSON.stringify(event))
// 定義十二生肖
let zodiac = ["猴", "雞", "狗", "豬", "鼠", "牛", "虎", "兔", "龍", "蛇", "馬", "羊"];

// 轉(zhuǎn)化參數(shù)為對(duì)象參數(shù)
event.body = JSON.parse(event.body);
// 根據(jù)年份計(jì)算生肖下標(biāo)
let idx = parseInt(event.body.year)%12;
// 獲取生肖
let sx = zodiac[idx];
// 生成HTTP響應(yīng)對(duì)象
let res = new context.HTTPResponse({"zodiac": sx}, {
"faas-content-type": "json"
}, "application/json", "200");

// 回調(diào)
callback(res);

};

export { myHandler };
4、部署云側(cè)代碼到AGC上,右擊自定義云函數(shù)目錄,選擇Deploy Function, 自動(dòng)部署到Serverless上,如果提示沒(méi)有登錄,登錄成功后,再操作一次部署。

端云一體化開(kāi)發(fā)-計(jì)算十二生肖-云函數(shù)-開(kāi)源基礎(chǔ)軟件社區(qū)

5、到這里云側(cè)開(kāi)發(fā)就完成了,可以登錄到AGC->云函數(shù),找到剛才部署的云函數(shù),測(cè)試一下自定義云函數(shù)。

五、端側(cè)開(kāi)發(fā)

1、先看一下端側(cè)模塊結(jié)構(gòu):

端云一體化開(kāi)發(fā)-計(jì)算十二生肖-云函數(shù)-開(kāi)源基礎(chǔ)軟件社區(qū)

2、common目錄放一些公共的封裝類,比如Log類; components目錄放自定義組件;entryability是自動(dòng)生成的,里面有一個(gè)EntryAbility類,包含生命周期;pages目錄放UI布局頁(yè)面;services目錄放業(yè)務(wù)邏輯類,比如調(diào)用云側(cè)接口。3、這里只介紹services目錄和pages目錄下的工作,先介紹如何和AGC連接上的,這里使用一個(gè)單獨(dú)的文件來(lái)處理:

services目錄下AgcConfig.ts

import agconnect from '@hw-agconnect/api-ohos';
import "@hw-agconnect/core-ohos";
import "@hw-agconnect/auth-ohos";
import '@hw-agconnect/auth-types-ohos';

import { Log } from '../common/Log';

const TAG = "[AGCConfig]";

export function getAGConnect(context) {
try {
agconnect.instance().init(context);
Log.info(TAG, "xx init AGC SDK success");
return agconnect;
}
catch (err) {
Log.error(TAG, "xx initAgcSDK failed" + err);
}
}

services目錄下Function.ts

import agconnect from '@hw-agconnect/api-ohos';
import "@hw-agconnect/function-ohos";
import { Log } from '../common/Log';
import { getAGConnect } from './AgcConfig';
const TAG = "[AGCFunction]";
export function zodiac(context, params: any): Promise<string> {
console.info('xx Function Params: ' + JSON.stringify(params))
return new Promise((resolve, reject) => {
// 獲取AGC連接
getAGConnect(context);
let functionResult;
// 獲取云函數(shù)回調(diào)
let functionCallable = agconnect.function().wrap("zodiacfun-$latest");
// 傳遞參數(shù)調(diào)用云函數(shù)
functionCallable.call(params).then((ret: any) => {
Log.info(TAG,'xx Zodiac Function Sucess')
// 獲取成功返回結(jié)果集
functionResult = ret.getValue();
Log.info(TAG, "xx Zodiac Function Called, Returned Value: " + JSON.stringify(ret.getValue()));
// 返回結(jié)果集給界面
resolve(functionResult.zodiac);
}).catch((error: any) => {
Log.error(TAG, "xx Error - could not obtain zodiac function result. " );
Log.error(TAG, "xx Error Detail: " + JSON.stringify(error));
reject(error);
});
});
}

pages目錄 Index.ts 這里是頁(yè)面布局,上面看到的效果,就是這里實(shí)現(xiàn)的。

import { zodiac } from '../services/Function';

@Entry
@Component
struct Index {
// 存儲(chǔ)選擇年份
@State year: number = 2022
// 計(jì)算出來(lái)生肖
@State born: string = "?"
// 是否在計(jì)算中
@State flag: boolean = false

// 計(jì)算生肖
getBorn() {
// 標(biāo)識(shí)為計(jì)算中
this.flag = true;
console.info('xx Page year: ' + this.year)
// 封裝參數(shù)
let params = {
"year": this.year
}
// 調(diào)用函數(shù)
zodiac(getContext(this), params).then((res) => {
// 計(jì)算完成
this.flag = false;
// 結(jié)果賦值給生肖變量
this.born = res;
}).catch((err) => {
// 計(jì)算完成
this.flag = false;
console.error('xx error: ', err && err.message);
});
}

build() {
Stack() {
if (!this.flag) {
Column({space: 20}) {
Text('請(qǐng)選擇年份')
.fontSize(20)
.fontWeight(FontWeight.Bold)

// 選擇年份
Column() {
Text(this.year + '')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.padding(10)
.width(100)
.border({ width: 1, radius: 8 })
}
.bindMenu([
{ value: '2006', action: () => {this.year = 2006; this.born = '?'} },
{ value: '2007', action: () => {this.year = 2007; this.born = '?'} },
{ value: '2008', action: () => {this.year = 2008; this.born = '?'} },
{ value: '2009', action: () => {this.year = 2009; this.born = '?'} },
{ value: '2010', action: () => {this.year = 2010; this.born = '?'} },
{ value: '2011', action: () => {this.year = 2011; this.born = '?'} },
{ value: '2012', action: () => {this.year = 2012; this.born = '?'} },
{ value: '2013', action: () => {this.year = 2013; this.born = '?'} },
{ value: '2014', action: () => {this.year = 2014; this.born = '?'} },
{ value: '2015', action: () => {this.year = 2015; this.born = '?'} },
{ value: '2016', action: () => {this.year = 2016; this.born = '?'} },
{ value: '2017', action: () => {this.year = 2017; this.born = '?'} },
{ value: '2018', action: () => {this.year = 2018; this.born = '?'} },
{ value: '2019', action: () => {this.year = 2019; this.born = '?'} },
{ value: '2020', action: () => {this.year = 2020; this.born = '?'} },
{ value: '2021', action: () => {this.year = 2021; this.born = '?'} },
{ value: '2022', action: () => {this.year = 2022; this.born = '?'} },
{ value: '2023', action: () => {this.year = 2023; this.born = '?'} },
{ value: '2024', action: () => {this.year = 2024; this.born = '?'} },
{ value: '2025', action: () => {this.year = 2025; this.born = '?'} }
])

// 計(jì)算按鈕操作
Button('計(jì)算', {type: ButtonType.Normal, stateEffect: true})
.fontSize(18)
.borderRadius(8)
.width(100)
.margin({bottom: 20})
.onClick(() => {
// 根據(jù)年份計(jì)算生肖
this.getBorn()
})

// 顯示計(jì)算結(jié)果
Text(`${this.year} 年生肖是 ${this.born}`)
.fontSize(20)
.fontWeight(FontWeight.Bold)
}
.width('100%')
.height('100%')
.padding({top: '33%'})
} else {
// 計(jì)算中
LoadingProgress().color(Color.Blue)
.backgroundColor(Color.Transparent)
}
}
}
}

六、總結(jié)

由于調(diào)用云側(cè)云函數(shù)是異步的,不能馬上返回結(jié)果,這里添加LoadingProgress組件,讓用戶知道在運(yùn)行中,效果看得不是很明顯,可能錄制時(shí),網(wǎng)速很快,LoadingProgress組件閃一下就不見(jiàn)了,如果遇到網(wǎng)絡(luò)慢時(shí),LoadingProgress就會(huì)一直轉(zhuǎn),直到云函數(shù)返回響應(yīng)時(shí),再消失LoadingProgress。

??想了解更多關(guān)于開(kāi)源的內(nèi)容,請(qǐng)?jiān)L問(wèn):??

??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

責(zé)任編輯:jianghua 來(lái)源: 51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)
相關(guān)推薦

2023-03-15 16:24:43

云數(shù)據(jù)庫(kù)代碼開(kāi)發(fā)

2023-06-14 15:10:36

鴻蒙游戲開(kāi)發(fā)

2022-07-11 16:26:37

eTS計(jì)算鴻蒙

2012-06-07 08:52:08

微軟云計(jì)算Windows

2012-05-08 09:44:38

2023-08-04 17:43:31

2023-08-09 15:01:21

2019-07-26 15:25:23

青云QingCloud云計(jì)算

2012-05-07 17:09:52

2021-01-05 17:37:19

云應(yīng)用Oracle云平臺(tái)

2017-04-26 21:08:22

研發(fā)協(xié)同云

2015-05-15 13:56:53

云端一體

2014-05-12 15:51:03

浪潮BIM一體化

2024-07-10 08:52:17

2017-06-30 14:32:07

紅帽一體化混合云

2013-12-26 09:39:13

云巔
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)