[文章]HarmonyOS教程—分布式亲子早教系统

1. 项目介绍      
功能1：早教算数题
功能2：益智拼图游戏
2. 搭建HarmonyOS环境      
我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

• 安装DevEco Studio，详情请参考下载和安装软件。
• 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
  
  • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
  • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
    
• 开发者可以参考以下链接，完成设备调试的相关配置：
  
  • 使用真机进行调试
  • 使用模拟器进行调试
    

   
3. 代码结构解读      
本篇Codelab我们只是对核心代码进行讲解，您可以在最后的参考中下载完整代码，首先来介绍下整个工程的代码结构：

• devices：封装了选择设备的Dialog，您可直接调用SelectDeviceDialog里面的相关方法。
• point：封装了绘图的相关功能，您可直接调用DrawPoint里面的相关方法。
• slice：MainAbilitySlice为应用主页面，MathGameAbilitySlice为早教算数题主页面，MathDrawRemSlice为早教算数题绘图页面，PictureGameAbilitySlice为拼图游戏主页面。
• utils：封装了公共方法和公共数据。
• MathGameServiceAbility、PictureGameServiceAbility：供远端连接的Service Ability。
• resources：存放工程使用到的资源文件，其中resourcesbaselayout下存放xml布局文件；resourcesbasemedia下存放图片资源。
• config.json：配置文件。
  

   
4. 亲子早教系统页面流转      
亲子早教系统主页面和各个游戏页面的布局如下图所示，首先给大家介绍一下相关的布局代码。

首页的布局文件为ability_main.xml、页面控制逻辑MainAbilitySlice；早教系统的布局文件为math_game.xml、页面控制逻辑MathGameAbilitySlice；拼图游戏的布局文件为ability_picture.xml、页面控制逻辑PictureGameAbilitySlice。要实现页面的相互流转首先需要在MainAbility中设置路由，并在MainAbilitySlice中实现按钮的点击事件。

以跳转早教算数题为例，首先需要在MainAbility中设置路由，代码如下所示：

1. addActionRoute(CommonData.MATH_PAGE,MathGameAbilitySlice.class.getName());

复制代码

而后，需要在MainAbilitySlice中添加点击事件，代码如下所示：

1. private void mathGame() {
   
2.     LogUtil.info(TAG, "Click ResourceTable Id_math_game");
   
3.     Intent mathGameIntent = new Intent();
   
4.     Operation operationMath = new Intent.OperationBuilder()
   
5.             .withBundleName(getBundleName())
   
6.             .withAbilityName(CommonData.ABILITY_MAIN)
   
7.             .withAction(CommonData.MATH_PAGE)
   
8.             .build();
   
9.     mathGameIntent.setOperation(operationMath);
   
10.     startAbility(mathGameIntent);
    
11. }

复制代码

至此，您已实现跳转到早教算数题和益智拼图游戏两个页面了：

• 早教算数题的出题逻辑可以参考setQuestion和checkAnswer两个方法
• 拼图游戏图片乱序、移动图片、判断游戏结束、重新开始可分别参考pictureRandom、moveFun、gameOverFun、restartFun相关方法
  

因篇幅有限且相关游戏算法不属于本篇Codelab想为您重点介绍的HarmonyOS特性，因此不再赘述，您可自行调用相关函数、理解相关代码实现游戏功能，附件代码中也已进行了详细的注释。以上即完成了单机版本的HarmonyOS应用开发，接下来我们将为您重点介绍基于HarmonyOS分布式能力的相关系统设计。   

5. 发现设备和建立连接      
在早教算数题中点击实时辅导或者在拼图游戏中点击亲子协同，会弹出选择设备页面，如下图所示。我们已经在devices目录下为您封装好了选择设备的dialog，具体代码请参考DevicesListAdapter（设备列表适配器）、item_device_list.xml （设备列表item布局）、SelectDeviceDialog（选择设备列表的弹窗）、dialog_select_device.xml（弹窗布局）。

SelectDeviceDialog中选择设备弹窗的构造函数如下，需要传入三个参数：上下文、设备列表、选择结果的回调事件。在业务代码中调用如下构造函数即可打开选择设备的弹窗，代码如下所示：

1. public SelectDeviceDialog(Context context, List<DeviceInfo> devices, SelectResultListener listener) {
   
2.     initView(context, devices, listener);
   
3. }

复制代码

其中List<DeviceInfo> devices可以通过如下函数去获取，代码如下所示：

1. private void getDevices() {
   
2.     if (devices.size() > 0) {
   
3.         devices.clear();
   
4.     }
   
5.     List<DeviceInfo> deviceInfos =
   
6.         DeviceManager.getDeviceList(ohos.distributedschedule.interwork.DeviceInfo.FLAG_GET_ONLINE_DEVICE);
   
7.     LogUtil.info(TAG, "deviceInfos size is :" + deviceInfos.size());
   
8.     devices.addAll(deviceInfos);
   
9.     showDevicesDialog();
   
10. }

复制代码

选择结果的回调事件可以根据业务的不同传入不同的回调事件，例如早教算数题中选择设备后，需要拉起本地端和远程端两个画布，此订阅事件为startLocalFa和startRemoteFa，代码如下所示：

1. private void showDevicesDialog() {
   
2.     new SelectDeviceDialog(this, devices, deviceInfo -> {
   
3.         startLocalFa(deviceInfo.getDeviceId());
   
4.         startRemoteFa(deviceInfo.getDeviceId());
   
5.     }).show();
   
6. }

复制代码

而拼图游戏需要和另外一台设备建立连接，拉起另外一台设备的拼图页面，此回调事件为connectRemotePa，代码如下所示：

1. private void showDevicesDialog() {
   
2.     new SelectDeviceDialog(this, devices, deviceInfo -> {
   
3.         connectRemotePa(deviceInfo.getDeviceId(), PictureRemoteProxy.REQUEST_START_ABILITY);
   
4.     }).show();
   
5. }

复制代码

需要说明的是回调函数中deviceInfo是单击选中的设备信息，具体实现在SelectDeviceDialog的initView方法中，代码如下所示：

1. DevicesListAdapter devicesListAdapter = new DevicesListAdapter(devices, context);
   
2. devicesListContainer.setItemProvider(devicesListAdapter);
   
3. devicesListContainer.setItemClickedListener((listContainer, component, position, l) -> {
   
4.     listener.callBack(devices.get(position));
   
5.     commonDialog.hide();
   
6. });

复制代码

至此，您已经完成了多设备协同中发现设备和建立连接这一关键步骤。
   
6. 早教算数题      













7. 益智拼图游戏      
















   
8. 回顾和总结      
本篇Codelab通过一个亲子早教系统，完整的为您介绍了早教算数题和益智拼图游戏两个综合案例，旨在帮助您快速了解HarmonyOS应用开发、多屏互动、分布式跨设备协同的功能了解。您需要重点掌握跨设备协同、分布式任务调度、公共事件三项HarmonyOS能力。特别的，我们通过拆解步骤的方式详细为您介绍了如何在两台设备之间进行数据传递，这是您需要重点学习和掌握的知识点。

另外，本篇Codelab的两个案例还可以通过分布式数据服务和分布式文件服务去优化代码，我们将在后续Codelab中为您介绍这方面的知识点和案例。
   
9. 恭喜你      
目前你已经成功完成了Codelab并且学到了：

• 常用布局、自定义控件的使用
• Page Ability、Service Ability、Intent
• 多屏互动、分布式跨设备协同、分布式任务调度
• 公共事件
  

   
10. 完整示例