智慧课堂辅助App的设计与实现

• 介绍
• 系统概要设计
• 下载体验
• • APP下载链接：
  • web版入口地址：
• 系统实现
• • 5.1 用户模块
  • • 5.1.1 登陆页
    • 5.1.2 注册页
    • 5.1.3 用户中心页
    • 5.1.4 个人信息页
    • 5.1.5 账号管理页
  • 5.2 课堂模块
  • • 5.2.1 课堂菜单首页
    • 5.2.2 创建课堂
    • 5.2.3 加入课堂
    • 5.2.4 课堂主页
    • 5.2.5 课堂公告
    • 5.2.6 课堂资料
    • 5.2.7 学生考勤
    • 5.2.8 考勤管理
    • 5.2.9 课堂话题
    • 5.2.10 课堂作业
    • 5.2.11 成绩统计
  • 5.3 私信聊天模块
  • • 5.3.1 联系人页
    • 5.3.2 添加好友
    • 5.3.3 好友请求管理
    • 5.3.4 好友消息页
    • 5.3.5 聊天主界面
    • 5.3.6 发送图片
    • 5.3.7 发送视频
    • 5.3.8 音视频通话
  • 5.4 后台管理模块
  • • 5.4.1 后台管理登录页
    • 5.4.2 用户账号管理
    • 5.4.3 后台数据统计
• GITHUB地址
• • 成果

介绍

智慧课堂辅助 App 结合了移动跨平台技术，系统由 APP 和 APP 后台管理系统 组成。系统服务端使用 Java 编程语言，采用SSH+Netty+Redis+FastDFS+RabbitMQ 框架设计。App 系统主要分用户模块、课堂模块、聊天模块和后台管理模块四部 分，实现了公告、话题、资料、考勤、作业、成绩、聊天等功能。各功能的查询 业务中引入了 Redis 实现对数据的分页缓存；课堂资料管理以及私信模块的文件 使用 FastDFS 分布式文件系统完成了对文件的存储；考勤、公告等子模块中使用 了 Websocket 与 RabbitMQ 消息队列实现业务纵向解耦和数据实时推送；聊天模 块则采用了 Netty 提供的 NIO 框架进行设计，利用 WebRtc 实现了音视频实时通 迅。APP 和管理后台网站都是基于 Flutter 跨平台框架完成设计。客户端可以打 包成 APP 和 Web 程序，运行在手机、ipad、电脑等设备上，并拥有一致的 UI 体 验。

系统概要设计

本系统总体上能够分为四大模块，分别是：课堂模块，私信聊天模块，用户模块和 管理员系统模块。课堂模块包括课堂的创建和加入，公告、资料和考勤、作业等功能， 用户模块包括修改密码、个人信息查询，注册登录和上传头像等，该模块能够很好的满 足用户的校园日常使用需求。私信聊天模块包括添加好友、搜索用户、文字聊天，视频 图片发送和音视频通话等功能，能很好满足用户沟通交流的需求，让教师与学生、学生 与学生之间方便的进行课堂互动，管理员系统模块包括了账号管理和系统数据统计，管 理账号能方便的找回丢失的用户数据，丰富的图表统计能知道系统的使用情况，方便改 进和完善系统。系统结构图如图所示，分别展示了各模块的功能结构。

下载体验

APP下载链接：

http://res.imtt.qq/res_mtt/m_download_qb/release/190409/release/qbload_yyb.html

web版入口地址：

http://47.102.97.30:11001/web/index.html (第一次打开，由于服务器带宽加载时间较长)

系统实现

5.1 用户模块

5.1.1 登陆页

打开 App 首先进入的是页面动画，接着在 App 处于未登录验证身份时将跳转到登 陆页面，登陆可以使用注册的手机号码或者邮箱号进行身份验证，登陆页面通过第一次 身份验证后将和 App 课堂首页进行替换，登陆页的实现如图 5.1 所示。

5.1.2 注册页

在登录页点击注册新用户后进入注册页，注册页能够选择手机和邮箱两种注册方 式，注册页需要完善的信息有学校名称、用户身份、真实姓名、昵称和设置账号密码； 注册页的系统实现如图 5.2 所示。

5.1.3 用户中心页

用户中心页用于用户账号信息展示，账号设置、系统的关于信息、系统的推广和 App 的退出，用户中心页的系统实现如图 5.3 所示。

5.1.4 个人信息页

个人信息页主要用来展示和修改个人的基本信息，如账号昵称、头像、性别、教师 或学生相关的资料信息，其中点击头像，能够上传本地图库的图片修改头像；点击二维 码，能够展示个人的二维码名片；点击身份可以对教师和学生两个身份之间切换，教师 和学生身份切换将改变整个 App 的功能和界面的对应变化，个人信息页的系统实现如图5.4 所示。

5.1.5 账号管理页

账号管理页主要用来展示账号的基本信息、安全设置和修改账号密码以及切换当前 账号，账号管理页的系统实现如图 5.5 所示。

5.2 课堂模块

5.2.1 课堂菜单首页

课堂首页主要分教师和学生两个不同的用户界面，主要操作有创建课堂、加入课堂、 二维码扫描、编辑课堂和删除课堂，而学生用户只有展示加入课堂的列表展示，并且不 能创建和管理课堂等自定义操作，课堂菜单首页系统实现教师版和学生版如图 5.6 所示。

5.2.2 创建课堂

只有切换到教师身份下的用户才能创建课堂，只有在创建了课堂前提下才能够进入 课堂完成各项课堂功能操作和使用。课堂创建可以设置课堂名称、课号、学期和课堂背 景色或者课堂首页图片，可以醒目提示用户。创建课堂的系统实现如图 5.7 所示。

5.2.3 加入课堂

教师用户和学生用户都能够通过课堂码或者扫描课堂二维码加入课堂，用户不能重 复加入相同的课程，并且加课成功后会跳转到课堂主页，加入课堂的系统实现如图 5.8 所示。

5.2.4 课堂主页

在点击对应的课程后进入对应的课堂主页，该主页主要操作有公告、资料、话题、 考勤、作业、测试和成绩；点击加课码可以弹出对应的课堂二维码，通过点击同学，可 以查看本课堂的学生，课堂主页的实现如图 5.9 所示。

5.2.5 课堂公告

教师用户在课堂主页点击公告后进入公告列表页面，可以进行公告发布和浏览，编 辑和删除公告，学生用户只能查看，不具备管理功能，课堂公告的系统实现如图 5.10 所示。

5.2.6 课堂资料

教师和学生用户可以通过资料模块进行多文件上传和下载，包括图片、视频、文档 等多种格式，并且支持图片和视频格式的预览，通过该功能，能获取到教学资源的文件， 该功能只有教师有权限删除文件，学生用户无法删除上传的文件；其中删除和下载的操作可长按对应的文件项进行页面更换操作，课堂资料的系统实现如图 5.11 所示。

5.2.7 学生考勤

教师发布考勤任务后，学生用户立即收到系统推送的考勤消息，进行对应的考勤任 务打卡，在指定的范围内输入正确的考勤码完成出勤，否则超时将被系统视为缺勤。学 生完成签到任务的过程实现如图 5.12 所示。

5.2.8 考勤管理

教师用户可以发布数字考勤和 GPS 考勤两种考勤任务，考勤截止时间可以由教师 用户自定义设置，考勤码由系统自动生成 6 位唯一的码值，其中 GPS 考勤方式可以设 置考勤地点范围距离内完成考勤才有效，否则将被系统视为缺勤。考勤管理的系统实现 如图 5.13 和图 5.14 所示。

5.2.9 课堂话题

教师和学生都能在课堂话题中通过发帖和留言评论的方式进行互动，学生可以在话 题中发布课堂上遇到的难题，教师可以在帖子下留言解答，其他学生用户也可以跟帖讨 论。话题内容支持文字、图片和点赞，用户可以查看点赞数量比较多或者评论数量的话 题，参与其中。课堂话题的系统实现如图 5.15 所示。

5.2.10 课堂作业

教师用户可以发布课堂作业，并设置作业的截止时间和分数。发布作业后，学生用户必须在截止时间前，以上传作业附件的形式提交作业，超过时间，则无法完成作业提 交。最后教师可以对提交作业的学生进行批改。课堂作业的系统实现如图 5.16 所示。

5.2.11 成绩统计

学生用户可以在课堂中查看个人的成绩，成绩主要统计考勤、作业两部分的得分情 况。考勤和作业最终得分都是取平均值，满分为 100。以扇形图、柱状图的方式进行展 示统计结果。成绩统计的系统实现如图 5.17 所示。

5.3 私信聊天模块

5.3.1 联系人页

联系人页面主要分好友和班级两个子页面用于管理查找好友、添加好友和选择好友 聊天等操作，联系人页的实现如图 5.18 所示。

5.3.2 添加好友

添加好友操作主要分两种方式，第一种是通过用户的手机号或邮箱号进行搜索，第 二种方式是通过扫描用户个人二维码搜索，查找到的用户如果已经是好友关系，便可以 直接发起聊天，否则需要点击添加好友发送请求，等待对方同意后便能发起聊天，添加 好友的实现如图 5.19 所示。

5.3.3 好友请求管理

用户发送添加好友的请求后，收到请求的好友将会受到请求通知，通过点击新朋友， 进入好友请求管理页面，可以同意或者选择拒绝申请好友的请求，也可以通过点击好友 请求项查看好友的资料再决定是否同意请求，同意或拒绝请求，对方都能收到消息通知， 好友请求的实现如图 5.20 所示。

5.3.4 好友消息页

好友消息用于接收好友的在线消息和离线消息，当好友立即发送消息后，会进行未 读消息统计，或者当用户上线后，会收到离线时好友发送的未读消息统计和展示，好友 消息的系统实现如图 5.21 所示。

5.3.5 聊天主界面

聊天主界面主要用于聊天消息的展示，其中功能栏包括文字发送、图片发送、拍照、 视频发送、音视频通信和定位操作，聊天主界面的系统实现如图 5.22 所示。

5.3.6 发送图片

发送图片可以通过从手机图库中选择图片，也可以通过相机拍摄，选择的图片将进 行本地压缩大小后发送给好友用户，本身用户生成缩略图展示，点击缩略图可以浏览图 片，发送图片的系统实现如图 5.23 所示。

5.3.7 发送视频

发送视频，小于 8M 的视频会进行原像素发送，大于 8M 的视频会进行视频压缩后 发送给好友，发送视频的系统实现如图 5.24 所示。

5.3.8 音视频通话

好友之间可以进行音视频通话，支持打开语音和关闭语音设置，并且支持切换前后 摄像头。音视频采用 webrtc 技术，时延在几十毫秒以下，不会有卡顿情况。音视频通话 的系统实现如图 5.25 所示。

5.4 后台管理模块

5.4.1 后台管理登录页

后台管理登陆页面，只有管理员用户才能登陆，进入管理页面后，是欢迎页，可以 看到最新的数据，如图 5.26 和 5.27 所示。

5.4.2 用户账号管理

用户账号管理，主要用于查询教师和学生用户情况，管理账号密码，支持多条件搜 索和分页查询，能快速查询到特定的用户信息。账号管理的系统实现如图 5.28

5.4.3 后台数据统计

后台数据统计能够统计某一时间段用户的注册情况和访问使用 App 的情况，以及账 号类型、用户性别的占比情况，以各种数学统计图形工具来展示数据，给用户直观的视 图效果。后台数据统计的系统实现如图 5.30 所示。

GITHUB地址

Flutter APP源码已经分享到Github，欢迎到github上查看，喜欢的记得给星星嗷~ 由于本项目为毕业设计项目，时间比较赶，部分界面UI比较难看，部分功能没有完成，后续有时间会进一步完善和增加功能
地址： https://github/332870852/course_app

成果