HarmonyOS 分散型親子教育

[[412544]]
詳細については、以下をご覧ください。
51CTOとHuaweiが共同で構築したHongmengテクノロジーコミュニティ
https://harmonyos..com

1. プロジェクトの紹介

遠隔教育とマルチスクリーンコラボレーションは、スマート教育にとって重要なシナリオです。このコードラボでは、親子の早期教育システムを使用して、分散型早期教育算数問題と分散型ジグソーパズルゲームという 2 つの包括的なケースを完了します。開発者が HarmonyOS アプリケーション開発、マルチスクリーンインタラクション、分散型クロスデバイスコラボレーションのエクスペリエンスを迅速に理解できるようにすることを目的としています。

このコードラボでは、Page Ability、Service Ability、Intent、分散タスクスケジューリング、パブリックイベントなどの紹介に重点を置きます。同時に、マルチスクリーンインタラクション、分散クロスデバイスコラボレーション、描画キャンバスの使用、古典的なパズルアルゴリズムについても紹介します。正式な紹介の前に、まずはこのコードラボで実装されている機能をすぐに理解していただけるよう、親子の早期教育システムのデモンストレーションを行います。

機能1: 幼児期の算数問題

幼児向けの算数問題をクリックすると、システムがランダムに 2 桁の加算問題を表示します。リアルタイム指導をクリックすると、2 つのキャンバスが表示されます。ローカル側ではドラフト計算に黒の手書き文字を使用し、リモート側ではリアルタイムのガイダンスに赤の手書き文字を使用できます。操作手順は両端でリアルタイムに同期されます。効果図を以下に示します。

機能2: ジグソーパズルゲーム

ジグソーパズルゲームをクリックすると、9 マスのジグソーパズルゲームが表示され (画像はランダムに配置されます)、画像をクリックするとパズルが完成します。ローカル側で親子コラボレーションをクリックすると、リモート側に同一のゲームページが表示されます。 2 つのデバイスはリアルタイムで相互作用し、写真を同期してつなぎ合わせることができ、操作手順もリアルタイムで同期できます。効果図を以下に示します。

上記の 2 つの親子ゲームがどのように実装されるかを知りたいですか?ぜひ私たちのコードラボで学んでください。

2. HarmonyOS環境を構築する

HarmonyOS環境を構築する

DevEco Studio をインストールします。詳細については、DevEco Studio のダウンロードを参照してください。
DevEco Studio 開発環境をセットアップします。 DevEco Studio 開発環境はネットワーク環境に依存する必要があります。ツールを正常に使用するには、ネットワークに接続する必要があります。次の 2 つの状況に応じて開発環境を構成できます。

インターネットに直接アクセスできる場合は、HarmonyOS SDK をダウンロードするだけです。
ネットワークがインターネットに直接アクセスできず、プロキシサーバー経由でアクセスする必要がある場合は、開発環境の構成を参照してください。

例:

プログラムを携帯電話で実行する必要がある場合は、事前に証明書を申請する必要があります。シミュレータを使用する場合はこれを無視できます。

キーと証明書要求ファイルを準備する

試運転証明書を申請する

この CodeLab は、次の機器を使用して完了できます。

開発者モードをオンにした実際のHarmonyOSデバイス

DevEco Studio のモバイルエミュレータ (エミュレータは現在分散デバッグをサポートしていません)

3. コード構造の解釈

このコードラボでは、コアコードのみを説明します。完全なコードは最後のリファレンスからダウンロードできます。まず、プロジェクト全体のコード構造を紹介します。

devices: デバイス選択ダイアログをカプセル化します。 SelectDeviceDialog で関連メソッドを直接呼び出すことができます。
point: 描画関連の関数をカプセル化しており、DrawPoint 内の関連メソッドを直接呼び出すことができます。
スライス: MainAbilitySlice はアプリケーションのメインページ、MathGameAbilitySlice は幼児向け算数問題のメインページ、MathDrawRemSlice は幼児向け算数描画ページ、PictureGameAbilitySlice はジグソーパズルゲームのメインページです。
utils: パブリックメソッドとパブリックデータをカプセル化します。
MathGameServiceAbility、PictureGameServiceAbility: リモート接続用のサービス機能。
resources: プロジェクトで使用されるリソースファイル (resources\base\layout の下の XML レイアウトファイルや resources\base\media の下の画像リソースなど) を保存します。
config.json: 設定ファイル。

4. 親子早期教育システムのページフロー

親子早期教育システムのメインページと各ゲームページのレイアウトを下図に示します。まず最初に、関連するレイアウトコードを紹介します。

ホームページのレイアウトファイルは ability_main.xml で、ページ制御ロジックは MainAbilitySlice です。早期教育システムのレイアウトファイルは math_game.xml で、ページ制御ロジックは MathGameAbilitySlice です。ジグソーゲームのレイアウトファイルは ability_picture.xml で、ページ制御ロジックは PictureGameAbilitySlice です。ページのフローを実現するには、まず MainAbility でルーティングを設定し、MainAbilitySlice でボタンクリックイベントを実装する必要があります。

幼児の算数の問題にジャンプする例を挙げると、まず MainAbility でルートを設定する必要があります。コードは次のとおりです。

アクションルートを追加します(CommonData.MATH_PAGE、MathGameAbilitySlice.class.getName());

次に、MainAbilitySlice にクリックイベントを追加する必要があります。コードは次のとおりです。

プライベートvoid mathGame() {
    LogUtil.info(TAG, "ResourceTable Id_math_game をクリックします" );
    インテント mathGameIntent = new Intent();
    操作operationMath = new Intent.OperationBuilder()
            .withBundleName(バンドル名を取得())
            .withAbilityName(CommonData.ABILITY_MAIN)
            .withAction(CommonData.MATH_PAGE)
            。建てる（）;
    mathGameIntent.setOperation(operationMath);
    開始Ability(mathGameIntent);
 }

これまで、幼児向けの算数の問題と教育用ジグソーパズルの 2 つのページにジャンプしました。

幼児向けの算数の質問を設定するロジックは、setQuestion と checkAnswer の 2 つのメソッドを参照できます。
ジグソーパズルゲームの絵のシャッフル順、絵の移動、ゲーム終了の判定、再開については、それぞれ pictureRandom、moveFun、gameOverFun、restartFun 関連のメソッドを参照してください。

スペースが限られていることと、関連するゲームアルゴリズムがこのコードラボで重点的に扱いたい HarmonyOS 機能の一部ではないことから、ここでは詳細には触れません。関連する関数を呼び出し、関連するコードを理解して、ゲーム機能を実装できます。添付のコードにも詳細なコメントが記載されています。以上でHarmonyOSアプリケーションのスタンドアロン版の開発は完了です。次に、HarmonyOS の分散機能に基づいた関連システム設計の紹介に焦点を当てます。

5. デバイスを検出し、接続を確立する

幼児の算数問題のリアルタイム指導をクリックするか、パズルゲームでの親子の協力をクリックすると、下の図に示すように、デバイス選択ページがポップアップ表示されます。デバイス選択ダイアログをデバイスディレクトリにパッケージ化しました。具体的なコードについては、DevicesListAdapter (デバイスリストアダプター)、item_device_list.xml (デバイスリストアイテムレイアウト)、SelectDeviceDialog (デバイスリストを選択するためのポップアップウィンドウ)、dialog_select_device.xml (ポップアップウィンドウレイアウト) を参照してください。

SelectDeviceDialog のデバイス選択ポップアップウィンドウのコンストラクターは次のとおりです。コンテキスト、デバイスリスト、選択結果のコールバックイベントの 3 つのパラメータを渡す必要があります。ビジネスコードで次のコンストラクターを呼び出して、デバイスを選択するためのポップアップウィンドウを開きます。コードは次のとおりです。

パブリックSelectDeviceDialog(Contextコンテキスト、List<DeviceInfo>デバイス、SelectResultListenerリスナー) {
    initView(コンテキスト、デバイス、リスナー);
 }

リストデバイスは次の関数を通じて取得できます。コードは次のとおりです。

プライベートvoid getDevices() {
    (デバイスサイズ() > 0)の場合{
        デバイスをクリアします。
    }
    リスト<デバイス情報> デバイス情報 =
            DeviceManager.getDeviceList(ohos.distributedschedule.interwork.DeviceInfo.FLAG_GET_ONLINE_DEVICE);
    LogUtil.info(TAG, "deviceInfosのサイズは:" + deviceInfos.size ());
    デバイスにデバイス情報を追加します。
    デバイスダイアログを表示します。
 }

選択結果のコールバックイベントは、業務に応じて異なるコールバックイベントで渡すことができます。たとえば、幼児向けの算数の問題でデバイスを選択した後、ローカルとリモートの 2 つのキャンバスを表示する必要があります。サブスクリプションイベントは startLocalFa と startRemoteFa です。コードは次のとおりです。

プライベートvoid showDevicesDialog() {
    新しいSelectDeviceDialog(this, devices, deviceInfo -> {
        startLocalFa(デバイス情報を取得します。デバイスIDを取得します)
        startRemoteFa(デバイス情報.getDeviceId());
    }）。見せる（）;
 }

パズルゲームでは、別のデバイスのパズルページを開くために、別のデバイスとの接続を確立する必要があります。コールバックイベントは connectRemotePa で、コードは次のとおりです。

プライベートvoid showDevicesDialog() {
    新しいSelectDeviceDialog(this, devices, deviceInfo -> {
        connectRemotePa(deviceInfo.getDeviceId(), PictureRemoteProxy.REQUEST_START_ABILITY);
    }）。見せる（）;
 }

コールバック関数内の deviceInfo はクリックによって選択されたデバイス情報であり、具体的には SelectDeviceDialog の initView メソッドで実装されていることに注意してください。コードは次のとおりです。

 DevicesListAdapter devicesListAdapter = 新しい DevicesListAdapter(デバイス、コンテキスト);
デバイスリストコンテナにアイテムプロバイダーを設定します。
 devicesListContainer.setItemClickedListener((listContainer, コンポーネント, 位置, l) -> {
    リスナー.callBack(デバイス.get(位置));
    共通ダイアログを非表示にします。
 });

これまでに、マルチデバイスコラボレーションでデバイスを検出し、接続を確立するという重要な手順が完了しました。

例:

FA をリモートで起動するには、少なくとも 2 つのデバイスが同じ分散ネットワーク内にある必要があります。これは次の操作によって実現できます。

すべてのデバイスは同じネットワークに接続されています。

すべてのデバイスで同じ Huawei アカウントにログインします。

すべてのデバイスで、「設定 -> その他の接続 -> 複数デバイスのコラボレーション」をオンにします。

6. 幼児期の算数の問題

幼児向けの算数問題をクリックすると、システムがランダムに 2 桁の加算問題を表示します。リアルタイム指導をクリックすると、2 つのキャンバスが表示されます。ローカル側では黒の手書き文字を使用してドラフト計算を実行し、リモート側では赤の手書き文字を使用してリアルタイムのガイダンスを実行できます。操作手順は両端でリアルタイムに同期されます。効果は以下の図に示されています。次に、HarmonyOS の分散技術を使用して両端での同期描画を実現する方法について詳しく説明します。

ステップ1 - デバイスを選択する

詳細については、「5 デバイスの検出と接続の確立」を参照してください。

ステップ2 - 接続を確立する

クリックしてデバイスを選択すると、図面ページが表示されます。 onStart メソッドでは、デバイスを初期化して接続する関数 initAndConnectDevice が呼び出されます。リモートデバイスの remoteDeviceId は、intent パラメータを通じて取得され、connectRemotePa が呼び出されて接続されます。コードは次のとおりです。

プライベート void initAndConnectDevice(インテントインテント) {
    // ページの初期化
    this.context = MathDrawRemSlice.this;
    文字列 remoteDeviceId = intent.getStringParam(CommonData.KEY_REMOTE_DEVICEID);
    isLocal = intent.getBooleanParam(CommonData.KEY_IS_LOCAL, false );
    if (findComponentById(ResourceTable.Id_text_title) インスタンスのテキスト) {
        テキスト textTitle = (テキスト) findComponentById(ResourceTable.Id_text_title);
        textTitle.setText(isLocal ? "ローカル" : "リモート" );
    } 
  
    // リモートサービスに接続
    リモートデバイスIDが空の場合（）{
        リモートデバイスIDを接続します。
    }それ以外{
        LogUtil.info(TAG, "localDeviceId は null です" );
    }
 }

connectRemotePa メソッドを呼び出すと、MathGameServiceAbility とのサービス接続が確立されます。コードは次のとおりです。

インテント connectPaIntent = 新しい Intent();
操作 operation = new Intent.OperationBuilder()
        .withDeviceId(デバイスID)
       .withBundleName(バンドル名を取得())
       .withAbilityName(CommonData.MATH_GAME_SERVICE_NAME)
        .withFlags(Intent.FLAG_ABILITYSLICE_MULTI_DEVICE)
        。建てる（）;
 connectPaIntent.setOperation(操作);

接続が成功すると、onAbilityConnectDone メソッドがコールバックされ、2 つのデバイスが接続されます。次に、senDataToRemote メソッドを呼び出してデータを送信できます。コードは次のとおりです。

パブリックvoid onAbilityConnectDone(ElementName 要素名、IRemoteObject リモート、 int結果コード) {
    LogUtil.info(タグ、 "onAbilityConnectDone..." );
    接続能力(要素名、リモート、リクエストタイプ);
 } 
   
プライベート void connectAbility(ElementName elementName, IRemoteObject remote, int requestType) {
    プロキシ = 新しい PictureRemoteProxy(リモート);
    LogUtil.error(TAG, "connectRemoteAbility が完了しました" );
    プロキシがnullの場合
        試す {
            proxy.senDataToRemote(リクエストタイプ);
        } キャッチ (RemoteException e) {
            LogUtil.error(タグ、 「onAbilityConnectDone RemoteException」 );
        }
    }
 }

ステップ3 - 描画操作（具体的な業務、送信データの準備）

DrawPoint は描画ツールクラスです。点を描画するときに、X軸の座標、Y軸の座標、最後の点かどうかの3つの情報を記録します。この情報はpointsX、pointsY、isLastPointArray配列に記録され、リストとしてカプセル化されます。 allPoints のデータ型は次のように定義されます。

プライベートfloat [] pointsX;
プライベートfloat [] pointsY;
プライベートboolean[] isLastPointArray;
プライベートList<MyPoint> allPoints = 新しいArrayList<>();

最後のポイントかどうかは、TouchEvent.PRIMARY_POINT_UP イベントによって区別されます。イベントが検出されると、コールバック関数 callBack.callBack(allPoints) が呼び出されます。コードは次のとおりです。

 touchEvent.getAction() が TouchEvent.PRIMARY_POINT_UP の場合 {
    point.setLastPoint( true );
    allPoints.add (ポイント);
    callBack.callBack(allPoints);
 }

このとき、setOnDrawBack メソッドがコールバックされ、コードは次のようになります。

パブリックvoid setOnDrawBack(OnDrawCallBack コールバック) {
    this.callBack = コールバック;
 }

MathDrawRemSlice では、initDraw() がキャンバスを初期化します。描画が完了すると、setOnDrawBack メソッドがコールバックされます。 Points は上記の手順で描画された点であり、pointsX、pointsY、isLastPointArray 配列に格納されます。コードは次のとおりです。

 drawl.setOnDrawBack(ポイント -> {
    ポイントがnullの場合、ポイントのサイズは1 より大きいです。
        pointsX = 新しいfloat [points.サイズ（）];
        pointsY = 新しいfloat [points.サイズ（）];
        isLastPoint = 新しいブール値[ポイント。サイズ（）];
 ( int i = 0; i < ポイント.サイズ(); i++) {
           pointsX[i] = points.get(i).getPositionX();
           pointsY[i] = points.get(i).getPositionY();
           ポイントを取得するには、ポイントの取得メソッドを使用します。
        }
        ...
    }
 });

この時点で、ローカルキャンバスの描画が完了し、描画されたポイントの情報が pointsX、pointsY、isLastPointArray 配列に格納され、送信するデータが準備できたことになります。

ステップ4 - データの送信

データの送信には、サービス能力、分散タスクスケジューリング、パブリックイベントという 3 つの HarmonyOS 機能が関係します。関連する基礎知識に精通していない場合は、まず公式ドキュメントを参照して学習することができます。描画が完了すると、senDataToRemote メソッドが呼び出され、描画されたポイント情報 (pointsX、pointsY、isLastPointArray) がデータに保存され、送信されます。コードは次のとおりです。

プライベートvoid senDataToRemote( int requestType)はRemoteExceptionをスローします{
    LogUtil.info(TAG, "ローカル描画サービスにデータを送信します" );
    MessageParcel データ = MessageParcel.obtain();
    MessageParcel の返信 = MessageParcel.obtain();
    MessageOptionオプション= 新しい MessageOption(MessageOption.TF_SYNC);
    試す {
        ポイントXがnullの場合、ポイントYがnullの場合、isLastPointがnullの場合
           data.writeFloatArray(ポイントX);
           data.writeFloatArray(ポイントY);
           data.writeBooleanArray(最後のポイント)
        }
        remote.sendRequest(リクエストタイプ、データ、応答、オプション);
 ec を返信します。
        （ec != ERR_OK）の場合{
            LogUtil.error(タグ、 「リモート例外:」 );
        }
    } キャッチ (RemoteException e) {
        LogUtil.error(タグ、 「リモート例外:」 );
    ついに
        データを再要求します。
        返信.reclaim();
    }
 }

このうち、remote.sendRequest は MathGameServiceAbility のサービスにデータを送信します (ステップ 2 は MathGameServiceAbility とのサービス接続を確立するためです)。サービス接続が確立されると、onRemoteRequest メソッドがコールバックされます。コードは次のとおりです。

 @オーバーライド
public boolean onRemoteRequest( intコード、MessageParcel データ、MessageParcel 応答、MessageOptionオプション) {
    LogUtil.info(タグ、 "onRemoteRequest..." );
 float [] pointsX = data.readFloatArray();
 float [] pointsY = data.readFloatArray();
    ブール値[] isLastPointArray = data.readBooleanArray();
    reply.writeInt(ERR_OK);
    sendEvent(isLastPointArray、pointsX、pointsY);
戻る 真実;
 }

onRemoteRequest メソッドでは、sendEvent が呼び出され、配列 pointsX、pointsY、isLastPointArray が送信されます。 sendEvent はパブリックイベントを通じてデータを転送します。登録されているパブリックイベントは CommonData.MATH_DRAW_EVENT です。コードは次のとおりです。

プライベートvoid sendEvent(boolean[] isLastPoint, float [] pointsX, float [] pointsY) {
    LogUtil.info(TAG, "sendEvent..." );
    試す {
        インテントのintent = 新しいIntent();
        操作 operation = new Intent.OperationBuilder()
                .withAction(CommonData.MATH_DRAW_EVENT)
                。建てる（）;
        インテントをsetOperation(操作);
       パラメータをintent.setParam(CommonData.KEY_POINT_X, pointsX);
       パラメータをintent.setParam(CommonData.KEY_POINT_Y, pointsY);
       パラメータをセットします。
        CommonEventData イベントデータ = 新しい CommonEventData(intent);
        CommonEventManager.publishCommonEvent(イベントデータ)。
    } キャッチ (RemoteException e) {
        LogUtil.error(TAG, "publishCommonEvent 例外が発生しました。" );
    }
 }

ステップ5 - データの受信

MathDrawRemSlice は CommonData.MATH_DRAW_EVENT のパブリックイベントをサブスクライブします。コードは次のとおりです。

プライベートvoid subscribe() {
    マッチングスキル matchingSkills = new MatchingSkills();
    マッチングスキル。イベントを追加します(CommonData.MATH_DRAW_EVENT);
    マッチングスキル。イベントを追加します(CommonEventSupport.COMMON_EVENT_SCREEN_ON);
    CommonEventSubscribeInfo subscribeInfo = 新しい CommonEventSubscribeInfo(matchingSkills);
    サブスクライバー = 新しい MyCommonEventSubscriber(subscribeInfo);
    試す {
        CommonEventManager.subscribeCommonEvent(サブスクライバー);
    } キャッチ (RemoteException e) {
        LogUtil.error( "" , "subscribeCommonEvent例外が発生しました。" );
    }
 }

関連するイベントがサブスクライブされると、onReceiveEvent メソッドがコールバックされます。このとき、pointsX、pointsY、isLastPointArray を解析し、drawl.setDrawParams(isLastPointArray, pointsX, pointsY) メソッドを呼び出してリモート側で描画します。コードは次のとおりです。

パブリックvoid onReceiveEvent(CommonEventData commonEventData) {
    インテント intent = commonEventData.getIntent();
    ポイントX = intent.getFloatArrayParam(CommonData.KEY_POINT_X);
    ポイントY = intent.getFloatArrayParam(CommonData.KEY_POINT_Y);
    isLastPoint = intent.getBooleanArrayParam(CommonData.KEY_IS_LAST_POINT);
    // データを受信したら、リモートキャンバスを描画します
    drawl.setDrawParams(isLastPoint、pointsX、pointsY);
    LogUtil.info(タグ、 "onReceiveEvent...." );
 }

ステップ6 - データの双方向通信

手順 1 ～ 5 では、データの一方向通信、つまりローカルエンドからリモートエンドへのやり取りについて説明します。この例の描画は双方向通信であり、両端で描画できます。これはどのように達成されるのでしょうか?ステップ 1 でデバイスが選択されると、startLocalFa と startRemoteFa が呼び出され、startLocalFa によって渡される remoteDeviceId は選択されたデバイス ID であり、startRemoteFa によって渡される remoteDeviceId は現在のデバイスの ID であるため、双方向通信が実現されます。コードは次のとおりです。

プライベートvoid showDevicesDialog() {
    新しいSelectDeviceDialog(this, devices, deviceInfo -> {
        startLocalFa(デバイス情報を取得します。デバイスIDを取得します)
        startRemoteFa(デバイス情報.getDeviceId());
    }）。見せる（）;
 }
プライベートvoid startLocalFa(文字列デバイスID) {
    LogUtil.info(タグ、 "startLocalFa..." );
    インテントのintent = 新しいIntent();
    パラメータをセットします。
    ...
 }
プライベートvoid startRemoteFa(文字列デバイスID) {
    LogUtil.info(TAG, "startRemoteFa..." );
    文字列 localDeviceId = KvManagerFactory.getInstance()
            .createKvManager(新しい KvManagerConfig(this)).getLocalDeviceInfo().getId();
    インテントのintent = 新しいIntent();
    ローカルデバイスIDを設定します。
    ...
 }

デバイスの選択、接続の確立、データの送信、データの受信という重要な手順に従うことで、2 つのデバイスの同期描画とリアルタイム表示の機能を実現できます。

- 仕上げる

7. ジグソーパズル

ステップ1 - デバイスを選択する

詳細については、「5 デバイスの検出と接続の確立」のセクションを参照してください。

ステップ2 - 接続を確立し、デバイスを起動する

親子連携をクリックすると、選択したデバイスの deviceId が記録されます。 connectRemotePa メソッドを呼び出すと、フラグビットが REQUEST_START_ABILITY である PictureGameServiceAbility とのサービス接続が確立されます。コードは次のとおりです。

プライベートvoid showDevicesDialog() {
    新しいSelectDeviceDialog(this, devices, deviceInfo -> {
        connectRemotePa(deviceInfo.getDeviceId(), PictureRemoteProxy.REQUEST_START_ABILITY);
    }）。見せる（）;
 }
プライベートvoid connectRemotePa(String deviceId, int requestType) {
    デバイスIDが空の場合（）{
        インテント connectPaIntent = 新しい Intent();
        操作 operation = new Intent.OperationBuilder()
                .withDeviceId(デバイスID)
                .withBundleName(バンドル名を取得())
                .withAbilityName(CommonData.PICTURE_GAME_SERVICE_NAME)
                .withFlags(Intent.FLAG_ABILITYSLICE_MULTI_DEVICE)
                。建てる（）;
        connectPaIntent.setOperation(操作);
    ...
 }

接続が成功すると、onAbilityConnectDone メソッドがコールバックされ、2 つのデバイスが接続されます。次に、sendDataToRemote メソッドを呼び出してデータを送信します。ここで、requestType は REQUEST_START_ABILITY です。コードは次のとおりです。

パブリックvoid onAbilityConnectDone(ElementName 要素名、IRemoteObject リモート、 int結果コード) {
    LogUtil.info(タグ、 "onAbilityConnectDone..." );
    接続能力(要素名、リモート、リクエストタイプ);
 } 
   
プライベート void connectAbility(ElementName elementName, IRemoteObject remote, int requestType) {
    プロキシ = 新しい PictureRemoteProxy(リモート);
    LogUtil.error(TAG, "connectRemoteAbility が完了しました" );
    プロキシがnullの場合
        試す {
            proxy.sendDataToRemote(リクエストタイプ);
        } キャッチ (RemoteException e) {
            LogUtil.error(タグ、 「onAbilityConnectDone RemoteException」 );
        }
    }
 }

PictureGameServiceAbility サービスで senDataToRemote メッセージを受信すると、onRemoteRequest がコールバックされます。このときコードは REQUEST_START_ABILITY なので、リモート側のパズルページが表示されます。コードは次のとおりです。

 public boolean onRemoteRequest( intコード、MessageParcel データ、MessageParcel 応答、MessageOptionオプション) {
    ...
    if (コード == REQUEST_START_ABILITY) {
        LogUtil.error(TAG, "RemoteServiceAbility::isFirstStart:" );
        インテント secondIntent = new Intent();
        操作 operation = new Intent.OperationBuilder().withDeviceId( "" )
                .withBundleName(バンドル名を取得())
                .withAbilityName(CommonData.ABILITY_MAIN)
                .withAction(CommonData.PICTURE_PAGE)
                。建てる（）;
    ...
    }それ以外{
    ...
    }
    ...
 }

以上で、ローカル側からリモート側への一方向通信が完了します。リモートデバイスが起動すると、PictureGameAbilitySlice で onStart メソッドが実行され、次に initRemoteView メソッドが実行され、その中で connectRemotePa メソッドが再度呼び出されます。このとき渡されるフラグは REQUEST_SEND_DATA です。ローカルデバイスのページは繰り返し起動されず、データ接続のみが確立されます。コードは次のとおりです。

プライベートvoid initRemoteView(インテントインテント) {
    ローカルの場合
        リモートデバイスID = intent.getStringParam(CommonData.KEY_REMOTE_DEVICEID);
        リモートデバイス ID を接続します。
        画像インデックスがnullの場合
            データ情報を更新します。
        }
    }
 }

上記の手順により、ローカル側とリモート側の間の双方向通信が完了し、データ転送機能が実現されます。

ステップ3 - ジグソー操作（特定の業務、送信するデータの準備）

スペースが限られていることと、ジグソーパズルゲームはこのコードラボで紹介したい HarmonyOS の機能の 1 つではないため、詳細には触れません。ご自身で理解してください。私たちがお伝えする結論は、パズル操作を完了するには、移動した画像の添え字 moveImageId、移動した画像の位置 movePosition、および最終配置された画像の添え字 imageIndex という 3 つの重要なデータを記録する必要があるということです。パズルを1回クリックすると、上記の3つのデータが記録されます。コードは次のとおりです。

プライベートクラス ImageClick は Component.ClickedListener を実装します {
    @オーバーライド
パブリックvoid onClick(コンポーネント コンポーネント) {
 int imageId = コンポーネント.getId();
 ( int position = 0; position < imageIndex.length; position++) {
            if (imageId == imageResourceTable[位置]) {
                // 画像の動きを完了し、動きの情報を記録する
                moveFun(画像ID、位置);
                イメージIDを移動します。
                位置を移動します。
            }
        }
        // ページの表示を更新します
        画像インデックスにイメージとデコード境界を設定します。
        // データを送信する
        senDataToRemoteFun();
    }
 }

ステップ4 - データの送信

データを送信するプロセスは、幼児の算数の問題と同じです。詳しくはまた改めてご紹介させていただきます。比較研究のために幼児期の算数の問題を参照することができます。パズルが完了すると、senDataToRemote メソッドが呼び出され、キー情報 (imageIndex、moveImageId、movePosition) がデータに保存され、送信されます。コードは次のとおりです。

プライベートvoid senDataToRemote( int requestType)はRemoteExceptionをスローします{
    MessageParcel データ = MessageParcel.obtain();
     ...
    試す {
     ...
        data.writeIntArray(画像インデックス);
        data.writeInt(画像IDを移動)
        data.writeInt(位置を移動)
        remote.sendRequest(リクエストタイプ、データ、応答、オプション);
     ...
    } キャッチ (RemoteException e) {
     ...
    ついに
     ...
    }
 }

このうち、remote.sendRequest は PictureGameServiceAbility サービスにデータを送信し (ステップ 2 は PictureGameServiceAbility とのサービス接続を確立するため)、サービス接続が確立された後に onRemoteRequest メソッドがコールバックされます。受信順序は送信順序 (imageIndex、moveImageId、movePosition) と一致している必要があります。一致していないと、受信操作が間違ってしまいます。コードは次のとおりです。

 public boolean onRemoteRequest( intコード、MessageParcel データ、MessageParcel 応答、MessageOptionオプション) {
    LogUtil.info(タグ、 "onRemoteRequest..." );
 int [] imageIndex = data.readIntArray();
 int移動イメージ ID = data.readInt();
 int移動位置 = data.readInt();
     ...
    LogUtil.info(TAG, "受信番号:" + imageIndex.length);
    reply.writeInt(ERR_OK);
    if (コード == REQUEST_START_ABILITY) {
     ...
    }それ以外{
        sendEvent(画像インデックス、画像ID、位置の移動);
    }
戻る 真実;
 }

onRemoteRequest メソッドでは、sendEvent が呼び出され、imageIndex、moveImageId、movePosition が送信されます。 sendEvent は共通イベントを登録してデータを転送します。登録された共通イベントは CommonData です。ピクチャー_ゲーム_イベント。コードは次のとおりです。

プライベートvoid sendEvent( int [] imageIndex, int moveImageId, int movePosition) {
    試す {
        インテントのintent = 新しいIntent();
        操作 operation = new Intent.OperationBuilder()
                .withAction(CommonData.PICTURE_GAME_EVENT)
                。建てる（）;
        インテントをsetOperation(操作);
        パラメータをセットします。
        パラメータをセットします。
        intent.setParam(CommonData.KEY_MOVE_POSITION、movePosition);
        CommonEventData イベントデータ = 新しい CommonEventData(intent);
        CommonEventManager.publishCommonEvent(イベントデータ)。
    } キャッチ (RemoteException e) {
        LogUtil.error(TAG, "publishCommonEvent 例外が発生しました。" );
    }
 }

ステップ5 - データの受信

データを受信するコードフローは、幼児向け算数の問題と同じです。詳しくはまた改めてご紹介させていただきます。比較研究のために幼児期の算数の問題を参照することができます。 PictureGameAbilitySlice は CommonData のパブリックイベントをサブスクライブします。ピクチャー_ゲーム_イベント。コードは次のとおりです。

プライベートvoid subscribe() {
    マッチングスキル matchingSkills = new MatchingSkills();
    マッチングスキルにイベントを追加します(CommonData.PICTURE_GAME_EVENT);
    マッチングスキル。イベントを追加します(CommonEventSupport.COMMON_EVENT_SCREEN_ON);
    CommonEventSubscribeInfo subscribeInfo = 新しい CommonEventSubscribeInfo(matchingSkills);
    サブスクライバー = 新しい MyCommonEventSubscriber(subscribeInfo);
    試す {
        CommonEventManager.subscribeCommonEvent(サブスクライバー);
    } キャッチ (RemoteException e) {
        LogUtil.error( "" , "subscribeCommonEvent例外が発生しました。" );
    }
 }

関連するイベントがサブスクライブされると、onReceiveEvent メソッドがコールバックされます。このとき、imageIndex、moveImageId、movePosition を解析することができ、updateDataInfo が呼び出されて相手側のレイアウトファイルが更新されます。コードは次のとおりです。

 @オーバーライド
パブリックvoid onReceiveEvent(CommonEventData commonEventData) {
    ...
    インテント intent = commonEventData.getIntent();
    データ情報を更新します。
 } 
   
プライベート void updateDataInfo(インテントインテント) {
    画像インデックス = intent.getIntArrayParam(CommonData.KEY_IMAGE_INDEX);
    移動イメージID = intent.getIntParam(CommonData.KEY_MOVE_IMAGE_ID, -1);
    移動位置 = intent.getIntParam(CommonData.KEY_MOVE_POSITION, -1);
    getUITaskDispatcher().delayDispatch(() -> setImageAndDecodeBounds(imageIndex), DELAY_TIME);
 }

デバイスの選択、接続の確立、データの送信、データの受信という重要な手順に従うことで、2 つのデバイス間で同期されたパズルの機能を実現できます。上記の 2 つのケースでは、2 つのデバイス間のデータのやり取りを十分に理解し、HarmonyOS の分散特性を体験しました。何か得られると信じています。

- 仕上げる

例:

上記のコードはデモの参考用です。製品コードでは、データの検証と国際化を考慮する必要があります。

8. 総括と結論

このコードラボでは、親子の早期教育システムを使用して、早期教育の算数問題と教育用ジグソーパズルという 2 つの包括的なケースを徹底的に紹介します。 HarmonyOS アプリケーション開発、マルチスクリーンインタラクション、分散型クロスデバイスコラボレーションの機能をすぐに理解できるようにすることを目的としています。デバイス間のコラボレーション、分散タスクのスケジュール設定、パブリックイベントという 3 つの HarmonyOS 機能を習得することに重点を置く必要があります。特に、分解手順を通じて 2 つのデバイス間でデータを転送する方法を詳しく紹介します。これは、学習と習得に重点を置く必要がある知識ポイントです。

さらに、このコードラボの 2 つのケースでは、分散データサービスと分散ファイルサービスを通じてコードを最適化することもできます。この点に関する知識ポイントと事例については、今後のコードラボで紹介していきます。