HarmonyOS鸿蒙NEXT开发案例：教育行业官方模板介绍 （Part2：艺术培训模板）

💡摘要： 本模板来自华为生态市场（Huawei Partner Market），本文选取了教育行业的一个官方模板——艺术培训元服务模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！

一、概述

1. 行业洞察（待补充）

   1）行业痛点

2. 优秀案例概览

   基于以上行业分析，本期将介绍鸿蒙生态市场教育行业模板——艺术培训元服务模板，为行业提供常用功能的开发案例，模板主要分首页、课程中心、打卡活动和我的四大模块

   • Stage开发模型 + 声明式UI开发范式
   • 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件
   • 本模板为端云一体化模板，已集成华为账号、地图、日历、支付等服务，只需做少量配置和定制即可快速实现课程购买、打卡活动参与、课程表查看等功能

首页	课程中心	打卡活动	我的

本模板主要页面及核心功能如下所示：

艺术培训模板
  |-- 首页
  |    |-- 轮播图
  |    |-- 核心功能入口(专栏列表、热门课程、关于我们、附近门店)
  |    |-- 直播课程列表
  |    |-- 热门课程列表
  |    └-- 商家信息
  |
  |-- 课程中心
  |    |-- 课程列表
  |    |-- 课程详情页
  |    |-- 预下单页
  |    └-- 下单完成页
  |
  |-- 打卡活动
  |    |-- 活动详情页
  |    |-- 打卡详情页
  |    └-- 提交打卡页
  |
  └-- 我的
       |-- 用户信息
       |    └--用户资料页
       |-- 订单
       |    |--订单列表页
       |    └--订单详情页
       |-- 学习工具
       |    |--已购课程页
       |    |--查看课表页
       |    |--个人打卡页
       |    └--学员证
       └-- 商家信息

二、应用架构设计

1. 分层模块化设计

• **产品定制层：**专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。

  • 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。

• **基础特性层：**用于存放相对独立的功能UI和业务逻辑实现。

  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。

• **公共能力层：**存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。

  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
  • 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

本模板详细工程结构可见工程结构章节。

2. 业务组件设计

为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。

三、行业场景技术方案（待补充）

1. 账号管理 1）场景说明 2）技术方案

2. 商家信息 1）场景说明 2）技术方案

3. 课程中心 1）场景说明 2）技术方案

4. 打卡活动 1）场景说明 2）技术方案

四、模板代码

1. 工程结构

详细代码结构如下所示：

ArtTraining
  |-- Application                      // 客户端工程文件
  |    |-- AppScope
  |
  |    |-- commons                     // 公共能力层
  |    |     |-- commonlib             // 工具方法、常量、公共类型定义封装
  |    |     |-- componentlib          // 公共组件、弹窗封装
  |    |     └-- network               // 网络库及mock封装
  |
  |    |-- components                  // 可分可合组件
  |    |     |-- module_check_in       // 打卡组件
  |    |     |-- module_course_list    // 课程列表组件
  |    |     |-- module_store_map      // 商铺地图组件
  |    |     └-- module_ui_base        // 公共基础包
  |
  |    |-- EntryCard
  |
  |    |-- feature                     // 基础特性层
  |    |     |-- checkin               // 打卡活动模块
  |    |     |-- courses               // 课程中心模块
  |    |     |-- home                  // 首页模块
  |    |     └-- mine                  // 我的模块
  |
  |    |-- products                    // 产品层
  |    |     └-- entry                 // 主入口模块
  |
  |    |-- screenshots                 // README.md中的图片和视频资源
  |
  |    └-- README.md                   // 项目介绍及启动指导
  |
  └-- CloudProgram                     // 服务端工程文件
       |-- clouddb                     // 云数据库
       |     |-- dataentry             // mock数据
       |     └-- objecttype            // 数据结构定义
       |
       └-- cloudfunctions              // 云函数
             |-- account-management    // 账号管理函数
             |-- order                 // 订单函数
             └-- preload               // 预加载函数

2. 关键代码解读（待补充）

• 待补充

3. 模板集成

本模板提供了两种代码集成方式，供开发者自由使用。

1）整体集成

开发者可以选择直接基于模板工程开发自己的应用工程。

• 模板代码获取：

  • 通过IDE插件创建模板工程，开发指导。
  • 通过生态市场下载源码， 下载地址。
  • 通过开源仓访问源码，仓库地址。

• 打开模板工程，根据README说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。

• 对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。

  • 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。
  • 在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。

• 根据自己的业务内容修改模板，进行定制化开发。

2）按需集成

若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。

• 组件代码获取：

  • 通过IDE插件创建模板工程，开发指导。
  • 通过生态市场下载源码， 下载地址。

• 下载组件源码，根据README中的说明，将组件包配置在自己的工程中。

• 根据API参考和示例代码，将组件集成在自己的对应场景中。