エンドツークラウド統合開発 - コンピューティング星座 - Cloud Functions

オープンソースの詳細については、以下をご覧ください。

51CTO オープンソース基本ソフトウェアコミュニティ

​​https://ost..com​​

1. はじめに

以前の記事では、中国の干支を計算するさまざまな方法を紹介し、サーバーレス クラウド関数コンピューティングも使用しました。しかし、当時はクラウド機能の呼び出しに Java が使用されていました。今回はエンドクラウド統合開発が直接使用されるため、はるかに便利です。クラウド機能 SDK を手動で統合する必要はありません。さらに、エンドサイドのコード開発とクラウドサイドのコード開発をDevEco Studio内で完結し、クラウド機能やクラウドデータベースをワンクリックでデプロイできます。効果を見てみましょう。

2. 効果

3. 説明

エンドクラウド統合プロジェクトの作成についてはここでは紹介しません。公式の詳細チュートリアル「エンドクラウド統合開発プロジェクトの作成 - エンドクラウド統合開発 - アプリケーション/サービス開発 - DevEco Studio ユーザーガイド (HarmonyOS) - ツール - HarmonyOS アプリケーション開発」に移動できます。エンドクラウド統合プロジェクトの構造は以前とは異なり、CloudProgram モジュールが追加されています。以下では、クラウド側の開発からエンドサイドの開発まで、プロジェクト開発について紹介します。

4. クラウドサイド開発

 {
 「ハンドラ」 : 「zodiacFun.myHandler」 、
 「トリガー」 : [
 {
 「タイプ」 : 「http」 、
 「プロパティ」 : {
 "enableUriDecode" : true 、
 「認証フラグ」 : 「true」 、
 「authAlgor」 : 「HDA-SYSTEM」 、
 「認証タイプ」 : 「apigw-client」
 }
 }
 ]
 }

 myHandler = async関数(イベント、コンテキスト、コールバック、ロガー) {
 // パラメータを印刷
ロガー。 info ( "**event: " + JSON . stringify ( event ))
 //12星座を定義する
十二支を[ "申" 、 "鶏" 、 "犬" 、 "豚" 、 "鼠"、 "牛" 、 "虎" 、 "兎" 、 "龍" 、 "蛇" 、 "馬" 、 "羊" ] とします。

 //パラメータをオブジェクトパラメータに変換する
イベント。本文= JSON 。解析(イベント.本文);
 // 年に応じて星座の添え字を計算する
idx = parseInt (イベント.本文.年) % 12 とします。
 // 星座を取得する
sx = zodiac [ idx ]とします。
 // HTTPレスポンスオブジェクトを生成する
res =新しいコンテキストとします。 HTTPResponse ({ "zodiac" : sx }, {
 「faas コンテンツ タイプ」 : 「json」
 }, "application/json" , "200" );

 // 折り返し電話
コールバック( res );

 };

エクスポート{ myHandler };

5. デバイス側の開発

サービスディレクトリ内のAgcConfig.ts

 '@hw-agconnect/api-ohos'からagconnectをインポートします。
 "@hw-agconnect/core-ohos"をインポートします。
 "@hw-agconnect/auth-ohos"をインポートします。
 '@hw-agconnect/auth-types-ohos'をインポートします。

 '../common/Log'からLogをインポートします。

 const TAG = "[AGCConfig]" ;

エクスポート関数getAGConnect (コンテキスト) {
試す{
 agconnect.instance () 。 init (コンテキスト) ;
ログ。 info ( TAG 、 「xx init AGC SDK 成功」 );
 agconnectを返します。
 }
キャッチ（エラー）{
ログ。エラー( TAG 、 「xx initAgcSDK が失敗しました」 + err );
 }
 }

サービスディレクトリ内の Function.ts

 '@hw-agconnect/api-ohos'からagconnectをインポートします。
 "@hw-agconnect/function-ohos"をインポートします。
 '../common/Log'からLogをインポートします。
 './AgcConfig'から{ getAGConnect }をインポートします。
 const TAG = "[AGCFunction]" ;
エクスポート関数zodiac ( context , params : any ): Promise <文字列> {
コンソール。 info ( 'xx 関数パラメータ: ' + JSON . stringify ( params ))
新しいPromiseを返します((解決、拒否) => {
 // AGC接続を取得する
getAGConnect (コンテキスト);
関数Resultを実行します。
 // クラウド関数のコールバックを取得する
functionCallableを agconnect とします。関数（）。 wrap ( "zodiacfun-$latest" );
 // クラウド関数を呼び出すためにパラメータを渡す
関数呼び出し可能。 (パラメータ)を呼び出します。それから(( ret :任意) => {
ログ。情報(タグ、 「xx 星座機能成功」 )
 // 正常に返された結果セットを取得します
関数Result = ret 。取得値();
ログ。 info ( TAG 、 "xx Zodiac 関数が呼び出され、返された値: " + JSON . stringify ( ret . getValue ()));
 // 結果セットをインターフェースに返す
解決します( functionResult . zodiac );
 }）。 catch ((エラー: any ) => {
ログ。 error ( TAG 、 「xx エラー - 黄道帯関数の結果を取得できませんでした。」 );
ログ。 error ( TAG , "xx エラーの詳細: " + JSON . stringify ( error ));
拒否(エラー);
 });
 });
 }

ページディレクトリ Index.ts ここにページレイアウトがあります。ここで上記のような効果が実現されます。

 '../services/Function'から{ zodiac }をインポートします。

 @エントリー
@コンポーネント
構造体インデックス{
 //選択した年を保存する
@州年:番号= 2022
 // 星座を計算する
@生まれた州:文字列= "?"
 // 計算中でしょうか？
 @状態フラグ:ブール値= false

 // 星座を計算する
ゲットボーン(){
 // 計算中としてマーク
これ。フラグ= true ;
コンソール。 info ( 'xx ページ年: ' + this . year )
 //パッケージパラメータ
パラメータ= {
 「年」 ：これ。年
 }
 // 関数の呼び出し
星座( getContext ( this )、 params )。それから(( res ) => {
 // 計算完了
これ。フラグ= false ;
 // 結果を星座変数に代入する
これ。生まれた=生まれた;
 }）。キャッチ((エラー) => {
 // 計算完了
これ。フラグ= false ;
コンソール。 error ( 'xx エラー: ' 、 err && err . message );
 });
 }

建てる（） {
スタック（）{
 if ( ! this . flag ) {
列（{スペース： 20 }）{
テキスト( '年を選択してください' )
 .フォントサイズ( 20 )
 .fontWeight (フォント太字)

 // 年を選択
カラム（） {
テキスト(この.年+ '' )
 .フォントサイズ( 20 )
 .fontWeight (フォント太字)
 。パディング( 10 )
 .幅( 100 )
 。境界線({幅: 1 、半径: 8 })
 }
 .bindMenu ([
 {値: '2006' 、アクション: () => { this .年= 2006 ;これ。生まれた= '?' } },
 {値: '2007' 、アクション: () => { this .年= 2007 ;これ。生まれた= '?' } },
 {値: '2008' 、アクション: () => { this .年= 2008 ;これ。生まれた= '?' } },
 {値: '2009' 、アクション: () => { this .年= 2009 ;これ。生まれた= '?' } },
 {値: '2010' 、アクション: () => { this .年= 2010 ;これ。生まれた= '?' } },
 {値: '2011' 、アクション: () => { this .年= 2011 ;これ。生まれた= '?' } },
 {値: '2012' 、アクション: () => { this .年= 2012 ;これ。生まれた= '?' } },
 {値: '2013' 、アクション: () => { this .年= 2013 ;これ。生まれた= '?' } },
 {値: '2014' 、アクション: () => { this .年= 2014 ;これ。生まれた= '?' } },
 {値: '2015' 、アクション: () => { this .年= 2015 ;これ。生まれた= '?' } },
 {値: '2016' 、アクション: () => { this .年= 2016 ;これ。生まれた= '?' } },
 {値: '2017' 、アクション: () => { this .年= 2017 ;これ。生まれた= '?' } },
 {値: '2018' 、アクション: () => { this .年= 2018 ;これ。生まれた= '?' } },
 {値: '2019' 、アクション: () => { this .年= 2019 ;これ。生まれた= '?' } },
 {値: '2020' 、アクション: () => { this .年= 2020 ;これ。生まれた= '?' } },
 {値: '2021' 、アクション: () => { this .年= 2021 ;これ。生まれた= '?' } },
 {値: '2022' 、アクション: () => { this .年= 2022 ;これ。生まれた= '?' } },
 {値: '2023' 、アクション: () => { this .年= 2023 ;これ。生まれた= '?' } },
 {値: '2024' 、アクション: () => { this .年= 2024 ;これ。生まれた= '?' } },
 {値: '2025' 、アクション: () => { this .年= 2025 ;これ。生まれた= '?' } }
 ])

 // ボタン操作を計算する
ボタン( '計算' 、 { type : ButtonType . Normal 、 stateEffect : true })
 .フォントサイズ( 18 )
 。境界半径( 8 )
 .幅( 100 )
 .margin ({下: 20 })
 .onClick (() => {
 // 年に基づいて星座を計算します
これ。取得誕生()
 })

 // 計算結果を表示する
テキスト( `${ this . year }の星座は ${ this . born }です` )
 .フォントサイズ( 20 )
 .fontWeight (フォント太字)
 }
 .width ( '100%' )
 。高さ( '100%' )
 .padding ({上部: '33%' })
 }それ以外{
 // 計算中
読み込みの進行状況()。色(色.青)
 。 backgroundColor (色.透明)
 }
 }
 }
 }

VI.結論

クラウド側でのクラウド関数の呼び出しは非同期であり、結果をすぐに返すことができないため、操作中に効果があまり明らかではないことをユーザーに知らせるために、ここで LoadingProgress コンポーネントが追加されます。録画中にネットワーク速度が非常に速くなり、LoadingProgress コンポーネントが点滅して消える場合があります。ネットワークが遅い場合、クラウド関数が応答を返すまで LoadingProgress は回転し続け、その後 LoadingProgress は消えます。

オープンソースの詳細については、以下をご覧ください。

51CTO オープンソース基本ソフトウェアコミュニティ

​​https://ost..com​​