鸿蒙智能课程表应用项目总结报告

一、项目背景与意义

在数字化校园建设的大背景下,高校师生对于教学信息管理的需求日益增长。传统的教学管理方式往往依赖于纸质通知或分散的在线平台,导致信息查询不便、更新滞后。为此,我们基于鸿蒙系统(HarmonyOS)开发了一款智能课程表应用,旨在通过一个统一的界面,集中管理课程、作业、考试和成绩等信息,提升教学管理的效率和用户体验。

本应用充分利用了鸿蒙系统的分布式能力和ArkUI框架的声明式UI开发优势,实现了跨设备的无缝协同和流畅的用户交互。通过本地数据管理,应用能够快速响应用户操作,即使在离线状态下也能正常使用,满足了校园场景中网络环境复杂的需求。

二、项目目标与范围

(一)核心目标

  1.  打造一个集成化的教学信息管理平台,覆盖课程、作业、考试和成绩等核心功能。
  2.  提供双角色切换功能,满足学生和教师不同的使用需求。
  3.  利用鸿蒙系统的特性,实现跨设备的数据同步和功能协同。
  4.  优化用户界面和交互流程,提升信息查询和管理的便捷性。

(二)功能范围

  1. 学生端功能
    • 查看个人课程表,按周次和星期筛选课程。
    • 浏览作业列表,标记作业完成状态。
    • 查看考试安排,包括考试时间、地点和倒计时提醒。
    • 查询成绩,了解各课程的评分情况。
  2. 教师端功能
    • 发布和管理课程信息,包括上课时间、地点和教学周次。
    • 发布作业,设定截止日期,并可查看学生的完成情况。
    • 安排考试,录入考试时间、地点和相关说明。
    • 管理学生成绩,录入和修改学生的成绩记录。
    • 查看学生列表,了解学生的基本信息和选课情况。

三、技术架构与选型

(一)技术栈

技术层级

选型

说明

操作系统

HarmonyOS 3.1

提供分布式能力,支持跨设备协同

UI框架

ArkUI

声明式UI开发,代码简洁,易于维护

编程语言

TypeScript

类型安全,开发效率高

数据存储

本地状态管理(@State)

快速响应,支持离线使用

开发工具

DevEco Studio 4.0

专为鸿蒙应用开发设计,功能强大

(二)架构设计

  1. 表示层:使用ArkUI框架构建用户界面,通过声明式语法实现UI的快速开发和更新。
  2. 业务逻辑层:处理用户交互,管理数据的增删改查,实现角色切换等功能。
  3. 数据模型层:定义课程、作业、考试、成绩和学生等数据实体,确保数据的一致性和完整性。

四、详细功能实现

(一)数据模型设计

1. 课程类(Course)
export class Course {
  id: string = generateUUID()
  name: string = ''           // 课程名称
  teacher: string = ''        // 授课教师
  location: string = ''       // 上课地点
  startTime: string = ''      // 开始时间(如:08:00)
  endTime: string = ''        // 结束时间(如:09:40)
  day: number = 0             // 星期几(0-6 代表周一到周日)
  weeks: number[] = []        // 教学周次数组(如:[1,2,3,...,16])
 
  constructor(init?: Partial<Course>) {
    if (init) Object.assign(this, init)
  }
}
2. 作业类(Assignment)
export class Assignment {
  id: string = generateUUID()
  courseName: string = ''     // 所属课程
  title: string = ''          // 作业标题
  deadline: string = ''       // 截止日期(YYYY-MM-DD)
  isCompleted: boolean = false // 完成状态
  teacher: string = ''        // 发布教师
 
  constructor(init?: Partial<Assignment>) {
    if (init) Object.assign(this, init)
  }
}
3. 考试类(Exam)
export class Exam {
  id: string = generateUUID()
  courseName: string = ''
  examDate: string = ''       // 考试日期
  examTime: string = ''       // 考试时间(如:09:00-11:00)
  location: string = ''       // 考试地点
  teacher: string = ''
 
  constructor(init?: Partial<Exam>) {
    if (init) Object.assign(this, init)
  }
}
4. 成绩类(Grade)
5. 学生类(Student)
export class Student {
  id: string = generateUUID()
  name: string = ''
  studentId: string = ''      // 学号
  major: string = ''          // 专业
  courses: string[] = []      // 所选课程名称数组
 
  constructor(init?: Partial<Student>) {
    if (init) Object.assign(this, init)
  }
}

(二)核心业务逻辑

1. 角色切换机制
  1. 使用 @State userType: 'student' | 'teacher' = 'student' 记录当前角色。
  2. 顶部切换按钮通过 @Click 事件修改 userType,触发 UI 重新渲染。
2. 课程表生成算法
// 获取当前天的课程
getTodayCourses(): Course[] {
  return this.getCourses().filter(
    c => c.day === this.currentDay && c.weeks.includes(this.currentWeek)
  )
}
// 获取指定时间段的课程
getCourseInSlot(timeIndex: number): Course | null {
  const today = this.getTodayCourses()
  const slot = this.timeSlots[timeIndex] // "08:00-09:40"
  return today.find(c => `${c.startTime}-${c.endTime}` === slot) || null
}
3. 考试倒计时与颜色预警
getCountdownText(examDate: string): string {
  const diff = Math.ceil(
    (new Date(examDate).getTime() - Date.now()) / 86400000
  )
  if (diff < 0) return '已过期'
  if (diff === 0) return '今天考试'
  if (diff === 1) return '明天考试'
  return `还剩${diff}天`
}
 
getCountdownColor(examDate: string): Color {
  const diff = Math.ceil(
    (new Date(examDate).getTime() - Date.now()) / 86400000
  )
  if (diff <= 7) return Color.Red
  if (diff <= 14) return Color.Orange
  return Color.Green
}
4. 成绩颜色映射
getGradeColor(score: number): Color {
  if (score >= 90) return Color.Green
  if (score >= 80) return Color.Blue
  if (score >= 60) return Color.Orange
  return Color.Red
}

(三)UI 交互细节

1. 课程表卡片
  1. 有课时:彩色背景(根据课程名哈希取色),显示课程名、教师、地点。
  2. 无课时:灰色边框,提示“无课程”,教师端增加“点击添加”按钮。
2. 作业列表项
  1. 学生端:显示完成状态,可点击切换。
  2. 教师端:显示“编辑”按钮,点击可修改作业信息。
3. 考试列表项
  1. 学生端:显示倒计时,根据剩余天数显示不同颜色。
  2. 教师端:显示“编辑”按钮,点击可修改考试信息。
4. 学生管理
  1. 教师可查看学生列表,点击“成绩管理”按钮,弹出成绩录入对话框。
  2. 对话框支持录入平时成绩、考试成绩,自动计算总评成绩。

五、测试与优化

一)测试用例

模块

测试点

预期结果

角色切换

点击顶部切换按钮

UI 更新为对应角色界面

课程表

切换周次、星期

课程列表正确刷新

作业

学生点击作业项

完成状态切换

考试

考试日期临近

倒计时颜色变红

成绩

教师录入成绩

总评成绩自动计算

(二)性能优化

  1. 使用 LazyForEach 替代 ForEach 优化长列表性能。
  2. 图片资源压缩至 100KB 以内,减少包体积。
  3. 避免在 build() 中创建临时对象,减少 GC 压力。

六、运行效果图

1. 学生系统-课程表周视图

2. 学生系统-作业列表

  1. 学生系统-考试时间及成绩展示

4. 教师系统-添加课程弹窗

5. 教师系统-学生个人信息,成绩,课程,考试安排管理

七、结论与展望

1. 千行 ArkTS,0 崩溃,双角色切换丝滑。  

2. 课程/作业/考试/成绩 4 大模块,本地状态即改即显。  

3. 倒计时自动变色、弹窗一键录入

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐