SABA移动应用方案文档

赛博鼎讯 北京 技术有限公司 SABA Dxtek Technologies Co Ltd Beijing SABA 移动应用方案文档移动应用方案文档 SABA 移动应用方案文档 Page 2 修订历史记录修订历史记录 日期日期版本版本说明说明作者作者 2014 10 81 冯静亚 2014 11 102 完成大部分内容冯静亚 2014 11 183 增加服务器处理流程 调整开发计划 预计 3 月底完成 冯静亚 2015 3 194 重新绘制界面 调整需求冯静亚 2015 8 175 完善考试需求冯静亚 SABA 移动应用方案文档 Page 3 目录目录 1 简介5 1 1 现有 SABA anywhere 的问题5 1 2 方案概述5 2 部署方案6 3 业务流程7 4 移动课件标准7 5 客户端功能需求7 5 1 客户端界面规范7 5 2 单点登录10 5 3 界面流转12 5 4 界面原型12 5 4 1 登录12 5 4 2 主界面14 5 4 3 课程16 5 4 4 考试20 5 4 5 调研26 5 4 6 同事圈27 5 4 7 我28 5 4 8 二维码签到 废弃 31 5 4 9 提问题34 5 4 10 课件录制35 6 门户后台管理功能需求35 6 1 课程管理35 6 2 课件制作36 6 3 客户端定制36 7 开发计划36 7 1 版本规划36 7 2 v1 开发计划36 8 设计要点37 9 个性化定制37 10 用户数据统计38 11 扩展性设计38 12 服务处理流程38 13 安全机制40 14 未尽事宜40 SABA 移动应用方案文档 Page 4 15 数据结构40 Comment fjy1 单点登录集成 2 课程业务的集成 中石油的场 景 SABA 移动应用方案文档 Page 5 移动应用方案文档移动应用方案文档 1 1 简介简介 应用名称 mLearn 赛博云 LOGO 通过移动应用 实现部分移动学习的功能 1 1 1 1 现有现有 SABASABA anywhereanywhere 的问题的问题 SABA 已经存在一个移动应用 实现了部分课件的播放 但是存在一些问题 对移动课件的支持较差 很多 PC 上的课程无法播放 不能实现课件在移动端与 PC 端同时播放 不能在移动端和 PC 端同步学习状态和进度 不能在移动实现交流互动功能 界面易用性差 不够友好 没有移动考试功能 1 2 1 2 方案概述方案概述 采用 HTML5 跨平台技术框架 同步实现 Android 和 iOS 应用 提供一站式的解决方案 即实现课件播 放 论坛 问答 评价等功能 在应用中应呈现所有的权限范围内的课程列表 但是不是所有课件都能播 放 能够播放的课件格式参考 课件标准 通过中视云对课件进行移动端和 PC 端编码 使得同一个课件 可在手机和 PC 上播放 以海尔项目作为需求原型 优先适配 SABA 后台 后续根据项目要求适配 dElearn 拟至少在 2 个版本里实现本文描述的功能 v1 实现基础的课程播放 点赞功能 v2 以及后续版本实现通知公告 考试 调研 同事圈等功能 关于考试功能关于考试功能 考虑到 SABA 原生考试功能比较弱 从现有客户来看 对 saba 原生考试功能满意度不高 因此拟将 delearn 的考试集成到 saba 中 使用 delearn 的考试功能替换 saba 原生的考试功能 SABA 移动应用方案文档 Page 6 2 2 部署方案部署方案 mLearn 移动应用 PC 浏览器 Panopto 服务器 SABA Web 应用SABA 内容服务器 SABA 应用 web 服务器 dElearn Web 应用 mLearn Web 应用 门户 Web 应用 其中 SABA 应用 web 服务器为标准的 saba 程序再集成门户 mLearn 和 dElearn 其中门户 mLearn 和 dElearn 通过 web 应用的方式部署到 saba 服务器 o门户 Web 应用 提供 PC 端的网页访问 并提供附加的课程 课件管理功能 omLearn Web 应用为移动应用提供后台服务 通过 mLearn 服务器访问 Panopto 服务器 SABA 内 容服务器和 SABA 应用 mLearn 仅提供数据服务 没有 PC 端的页面 所有的 PC 端管理功能由 其他组件提供 odElearndElearn WebWeb 应用应用 用于提供考试功能 包括 PC 端的考试和移动端的考试 Panopto 服务器 用于提供视频服务 Comment fjy2 在课件兼容性里增加 鼎讯课件 在数据库中增加即可 在移动端课件列表上以不同的图标呈现 2 在移动端呈现所有课件 Comment fjy3 进阶需求 弹幕 Comment fjy4 需要记录学习进度 Comment fjy5 待验证 将所有视频 存在一个用户下 只使用该用户在后台 登录 直接播放视频的内部链接 SABA 移动应用方案文档 Page 7 3 3 业务流程业务流程 线下 制 作课件 门户课件管理 制 作上传课件 Panopto 上传视 频 SABA 课件管理 创建课件 视频课件 其他课件 SABA 课程管理 创建发布课程 门户课程管理 设 置课程封面图片 手机播放 4 4 移动课件标准移动课件标准 在客户端中参考 Scorm 标准 只做部分实现 课件标准的实现方式决定了课件播放界面的功能 对课 件标准做简化 支持如下课件 视频多媒体课件 o每个课件只支持一段视频 o由 panopto 提供视频服务 将 panopto 的视频链接复制到 saba 课件中 客户端直接播放视频 链接 该视频链接既能适应手机屏幕也能适应 PC 屏幕 PPT 课件 系统将 ppt 转换为图片 在课件播放器中手动翻阅 图文课件 Pdf 课件 网页课件 SABA 既定课程的约定 只有一个学习内容 5 5 客户端功能需求客户端功能需求 5 1 5 1 客户端界面规范客户端界面规范 以下罗列客户端界面规范 1 颜色规范 常规颜色 284058 示例 课程 使用场景 用于显示常规的标题 小标题文字 SABA 移动应用方案文档 Page 8 点击动作颜色 008aff 示例 更多 21 使用场景 用于可点击的按钮文字 图标 如 介绍文字色 3c6084 示例 人力资源类课程 销售类课程 生产制造类课程 使用场景 一般用在毛玻璃上显示文字介绍 如主界面模块的介绍 课程的介绍 公告通知的摘 要 2 字体规范 客户端主要使用是字体样式及其应用场景如下 标题文字 字体大小 24pt 颜色 常规颜色 示例 课程 应用场景 模块顶部标题 主界面模块名称 课程类别名称等标题区域 可点击链接文字 颜色 点击动作颜色 示例 更多 21 应用场景 更多操作 返回链接 3 动作规范 在任何节目点击 home 按钮均可回到主界面 根据手机操作习惯 手指定位模糊 应尽量使用大面积的点击区域 一般来说 应使整块的内 SABA 移动应用方案文档 Page 9 容单元区域作为点击响应区 对于下面的界面应使用红色区域响应点击操作 常用操作应在 3 步骤内完成 对于左右导航 应支持左右滑动手势 如下面的考试界面 应支持左右滑动 SABA 移动应用方案文档 Page 10 安全生产法规考试 返回 19 23 单选题 生产经营单位的主要负责人对本单位安全生产工 作负有的责任不包括 10分 2 20 A建立 健全本单位安全生产责任制 B组织制定本单位安全生产规章制度和操作规程 C组织制定并实施本单位安全生产教育和培训计划 D任命安全生产主管人选 上一题下一题 答题卡 点击动作应使用按压效果 以便用户体会到点击成功 5 2 5 2 单点登录单点登录 考虑到该客户可能要适配 SABA 的各种登录入口 移动客户端的登录应指向 mLearn 服务器 由该服 务器做登录认证 并返回相关数据 SABA 移动应用方案文档 Page 11 mLearn AppmLearn ServerSABA Server 用户名 密码 处理验证规则 用户名 密码 权限 在上图中 mLearn Server 的 处理验证规则 应具有较好的扩展性 使得可以适配 SABA 的各类验 证机制 SABA 移动应用方案文档 Page 12 5 3 5 3 界面流转界面流转 0封面 1登陆 否 2主界面 是否登录过 1 1 设置服务器 是 3课程 3 1类别课程 列表 注销 4考试5调研 第一次使用 否 是 3 2课程详细 界面 3 3课程讨论 区 3 4课件播放 4 1 4 4答题 界面 4 5答题卡界 面 6同事圈7我 设置 8提问题 界面流转图 5 4 5 4 界面原型界面原型 5 4 1 登录 关键特性 1 输入用户名和密码执行登录 2 默认情况下 服务器地址为赛博云 3 可手动设置服务器地址 4 登录方式应与后台服务器一样 输入的用户名和密码应与 PC 端一致 5 是否显示申请试用 应受后台控制 6 空用户名时 对话框显示的文字 用户名 应可在后台订制文字 如可改为 工号 SABA 移动应用方案文档 Page 13 登录界面 7 设置服务器可能被 登录 和 设置 两个界面调用 返回按钮注意需要返回到相应的页面 SABA 移动应用方案文档 Page 14 设置服务器 5 4 2 主界面 关键特性 1 模块的启用 禁用 主界面呈现的模块受服务器端的参数控制 以便在不同阶段发布不同的功能 而不必升级程序 2 模块数字提示规则 a 课程 未点击过的课程数量 b 考试 状态为待答题的考试的数量 c 调研 状态为进行中的调研的数量 d 同事圈 新消息数量 SABA 移动应用方案文档 Page 15 e 如果数字超过 99 则显示为 99 3 模块简介规则 a 课程 按照时间倒序显示未读课程 如没有未读课程 则显示课程类别 b 考试 按照状态顺序 待答题 答题中 未开始 已答题 已过期 时间倒序显示考试的 名称和状态 c 调研 按照状态顺序 进行中 已完成 已过期 时间倒序显示调研的名称和状态 d 同事圈 显示最新一条聊天记录 e 我 显示积分和排名 4 点击轮播图片可以执行如下操作 具体执行何种操作可在后台设置 1 打开公告通知 2 打开课程明细 3 打开考试列表 同时将指定的考试置顶 4 打开调研 同时将指定的调研置顶 5 点击公告通知 进入公告通知详细页面 HR系列课程之 中国管理 之路 上线 6 点击整个模块矩形区域 而不仅仅是图标或者标题 进入相应模块 SABA 移动应用方案文档 Page 16 主界面 5 4 3 课程 关键特性 1 分类别呈现课程 每个类别最多呈现 4 门课程 要查看所有课程 可以点击更多链接 2 呈现用户权限内的课程列表 排列顺序为发布时间的倒序 3 课程类别名称后 以圆点提示未读课程数量 如果超过 99 则以 99 表示 4 课程的格式包括 视频 图文 html 页面 ppt 以不同的图标显示 图片介绍中 如果是视频 则显示视频时长 分钟 秒 如果是 ppt 则显示页数 如果是图文则不显示数字 5 未点击过的课程 结尾以蓝色圆点标记 6 向下拖拽界面刷新内容 SABA 移动应用方案文档 Page 17 7 点击课程项目整个区块 进入课程明细界面 8 当发生异常时 提示错误信息 课程 SABA 移动应用方案文档 Page 18 类别课程界面 进阶关键特性 1 课程搜索 结合 panopto 可搜索视频内容 2 课程到常用腾讯微博 新浪微博 微信等媒体 5 4 3 1 课程详细界面 关键特性 1 讨论区默认呈现最近 10 条记录 点击讨论区标题进入完整讨论区 2 简介默认只呈现 4 行 点击简介区块展开完整简介 3 格式包括 视频 PPT 图文 链接 4 如果点过赞了 再次点击就取消点赞 未点赞状态为空心图标 5 课程资料区 如果是视频则显示时长 如果是 ppt 显示 页数 xx 图文则不显示数字 SABA 移动应用方案文档 Page 19 课程详细信息 进阶关键特性 1 离线下载课件 使得可以在没有网络的情况下学习课程 5 4 3 2 课程讨论区 关键特性 1 模仿微信群聊 2 头像以圆形呈现 3 左侧显示其他人的聊天记录 并显示用户名 右侧显示自己的聊天记录 不显示用户名 4 可以发送文字消息 5 可以发送图片消息 SABA 移动应用方案文档 Page 20 6 每个课程均自动创建一个讨论区 7 单击自己的消息 显示子菜单 删除 点击删除可以删除自己的消息 8 时间显示规则 参考微信 分为两部分 a 日期 当天的消息不显示日期 昨天的消息显示 昨天 昨天之前 本周之内 的消息显 示 星期 X 本周之前的消息显示完整日期 xxxx 年 yy 月 dd 日 b 时间 上午 下午 小时 分钟 课程讨论区 5 4 4 移动考试概述 可将考试发布成网页格式 通过微信 邮件等方式将考试发布出去 拟使用 html5 技术开发实现考 试客户端 使其可同时适配移动应用和 web 应用 移动考试的后台拟使用 delearn 需要实现 delearn 与 saba 之间权限的集成 在客户端可以通过两种方式进行考试 移动应用 在移动应用中打开考试 直接作答 移动 web 将考试以二维码对方式发布出去 考生通过微信扫描二维码即可进行作答 SABA 移动应用方案文档 Page 21 业务流程 5 4 5 考试 移动应用 关键特性 1 考试的状态 未开始 当前时间还没有到考试的开始时间 待答题 当前时间处于起止时间内 当前用户尚未答题的考试 答题中 当前时间处于起止时间内 当前用户已经在答题 但是还没有交卷的考试 一般指答题中 途退出的情况 已答题 已交卷的考试 已过期 当前时间超过了结束时间的考试 2 点击待答题的考试 整个区块 提示 确认开始考试 点击确定后方进入考试 3 点击未开始的考试 不做任何响应 4 点击已考完的考试 打开试卷 查看自己的答题情况 5 已考完的考试 显示考试结果 创建考试 考试管理 发布考试 生成二维码 考试管理考试管理 考试管理 微信 扫描考试二维码 考试答题 提交 答卷 输入用户名密码 网页或者客户端 答题页面 SABA 移动应用方案文档 Page 22 5 4 5 1 考试 单选题 以下关键特性为考试的题目的公用关键特性 1 左右滑动可以实现上一题和下一题的翻动 2 如果考试有时长限制 顶部显示分钟的倒计时 分 秒 3 题干显示格式 题号 当前题序号 总题目数 2 20 题型 单选题 多选题 问答题 填空题 题干结尾显示题目分数 4 底部可以在不同的题目之间导航 并可进入答题卡 以下为单选题的关键特性 1 参考兜行 选择了选项后自动翻到下一题 SABA 移动应用方案文档 Page 23 5 4 5 2 考试 多选题 选项区别 A 未选中 B 已选中 SABA 移动应用方案文档 Page 24 5 4 5 3 考试 填空题 点击空格处输入文字 SABA 移动应用方案文档 Page 25 SABA 移动应用方案文档 Page 26 5 4 5 4 考试 问答题 5 4 5 5 考试 答题卡 关键特性 1 点击交卷按钮 即可交卷 交卷后不可修改答案 考试状态记为已答题 2 以黄色显示未答的题目 3 点击题号 打开相应的试题 SABA 移动应用方案文档 Page 27 5 4 6 考试 移动 web 版 移动 web 版考试界面的关键特性与移动应用的保持一致 增加输入用户名密码并进行验证的功能 5 4 6 1 界面原型 正在进行的考试 通过扫描二维码或者点击链接 打开考试界面后 如果考试正在进行 则呈 现如下界面 SABA 移动应用方案文档 Page 28 已经结束的考试 SABA 移动应用方案文档 Page 29 未开始的考试 SABA 移动应用方案文档 Page 30 5 4 7 调研 调研的题型仅包括 单选题 多选题 问答题 其界面操作与考试类似 但是没有倒计时 SABA 移动应用方案文档 Page 31 5 4 8 同事圈 与课程讨论区一样 这是一个公共的讨论区 SABA 移动应用方案文档 Page 32 5 4 9 我 关键特性 1 呈现当前用户的完成课程数量 积分和积分排名 2 点击设置 进入服务器设置页面 见 5 4 1 登录 3 点击注销 弹出提示 确认注销当前用户 点击是后进行注销 并进入登录界面 SABA 移动应用方案文档 Page 33 5 4 9 1 公告通知 关键特性 1 点击行任意位置 包括标题和摘要 即可打开内容 2 对每个公告通知显示 2 行摘要 SABA 移动应用方案文档 Page 34 SABA 移动应用方案文档 Page 35 5 4 9 2 公告通知内容 5 4 10 二维码签到 废弃 通过扫描后台生成的课程二维码 实现当前用户对课程的签到 关键特性 2 可扫描课程签到二维码图片 3 呈现要签到的课程信息 4 可确认课程并签到 SABA 移动应用方案文档 Page 36 扫二维码 扫描二维码 SABA 移动应用方案文档 Page 37 签到 时间 2014 11 8 13 00 地点 海尔大学A212 你正在签到本课程 确认是你正在学习的课 程后 请点击签到按钮 营销策略培训 签到 二维码签到 SABA 移动应用方案文档 Page 38 时间 2014 11 8 13 00 地点 海尔大学A212 营销策略培训 已签到 签到 签到成功 5 4 11 提问题 用于收集用户意见 SABA 移动应用方案文档 Page 39 5 4 12 录课件 后续版本实现 用户使用手机摄像头录像 并上传视频到 panopto 用户录入视频介绍文字 观看者以手机网页形式打开视频 参考微信公众号视频播放风格 6 6 门户后台管理功能需求门户后台管理功能需求 6 1 6 1 课程管理课程管理 此处课程管理用于补充 SABA 课程管理不能维护的数据 主要补充的数据包括 课程图片 用于显示在手机客户端上 其他由客户端呈现的数据 关键特性 维护补充课程信息 生成课程二维码 用于打印输出 由客户端扫描签到 SABA 移动应用方案文档 Page 40 6 2 6 2 课件制作课件制作 此处用于制作和加工支持客户端播放的课件 主要加工两种课件 视频课件 将课程与 panopto 视频实现集成 微软 Powerpoint 课件 可上传 Powerpoint 文件 由系统处理成可以在移动客户端播放的课件 普通网页课件 6 3 6 3 客户端定制客户端定制 此处对客户端进行定制 主要定制内容包括 封面图片 产品 LOGO 界面文字 可实现多语 部分文字定制 v2 7 7 开发计划开发计划 7 1 7 1 版本规划版本规划 版本版本内容内容开发周期开发周期 1 mlearn Web 应用集成 门户课程管理 基础功能 客户端基础框架 包括应用框架与 UI 框架 客户端登录 客户端主界面 客户端视频课件播放 从 2015 3 24 到 2015 4 24 2 门户课件制作 制作 ppt 课件和图文课件 网页 客户端 Ppt 课件管理和播放 客户端图文课件 网页 播放 客户端课程点赞 论坛 客户端考试 从 2015 4 27 到 2015 5 20 3 Delearn Web 应用集成 客户端考试 从 2015 5 21 到 2015 6 20 7 2 7 2 v1v1 开发计划开发计划 任务名称开始时间完成时间备注 客户端客户端20152015 年年 3 3 月月 5 5 日日20152015 年年 4 4 月月 2 2 日日 UIUI 定义定义20152015 年年 3 3 月月 5 5 日日20152015 年年 3 3 月月 5 5 日日已完成 UI 风格投票 UI 设计 基于确定 UI 风格 设计完整 UI 需求定义 根据 UI 设计 得到 明细需求 基础框架编码基础框架编码20152015 年年 3 3 月月 2626 日日20152015 年年 4 4 月月 2 2 日日 组件 通讯协议 组件 通讯协议 页面框架页面框架 单元测试框架 界面组件 基础通讯协议 页面框架 已完成 主界面 SABA 移动应用方案文档 Page 41 服务端服务端20152015 年年 3 3 月月 2626 日日20152015 年年 4 4 月月 2 2 日日 mLearn 服务端代码与 SABA 的集成 门户改造 改进开发框架 门户课程管理 门户增加移动应用配置 先在增加配置项 再在界面中增加配 置文本框 功能实现功能实现20152015 年年 4 4 月月 2 2 日日20152015 年年 4 4 月月 1515 日日 同时含客户端和服同时含客户端和服 务端的实现务端的实现 登录认证登录认证 服务实现 客户端实现 课程模块课程模块20152015 年年 4 4 月月 2 2 日日20152015 年年 4 4 月月 1515 日日 课程列表服务实现 根据权限读取课程 目录和课程列表 课程列表客户端实现 课程详细界面服务实现 课程详细界面客户端实现 不含课程论坛 课件播放 8 8 设计要点设计要点 1 灵活的集成方案 既能与 dElearn 集成 也能和 saba 集成 o独立部署 webapp o先和 SABA 做集成 能呈现 SABA 的课程 实现和 SABA 的单点登录 进一步实现呈现 dElearn 的课程 2 下列资源应可以在服务器端设置 在客户端缓存 只有发生变化才做自动更新 o封面图片 广告图片 应该从服务器端获取 以便可以替换封面图片 o产品 LOGO 包括标题栏的 SABA logo o部分提示文字 可根据需要由服务器指定 3 客户端尽量做简单 从功能到内容应从服务器端下载并缓存到客户端 4 模块化开发 采用可自动扩展的机制 在无需升级程序的情况下 就可以使用性能 5 升级的功能模块或新功能 可以自动下载到客户端 并自动部署 6 单点登录 应实现统一的单点登录 实现统一登录接口 使得在后台可以配置不同的登录方式 7 编制一个测试框架 每开发一个服务都要使用测试框架对服务进行测试 在做性能测试时 使用测 试框架即可 9 9 考试系统与考试系统与 SABASABA 的集成的集成 10 10 自动更新机制自动更新机制 需求 在不需要重新下载安装程序的基础上 通过内部下载即可完成程序升级 如 12306 移动应用 SABA 移动应用方案文档 Page 42 解决方案 可以通过使用 appcan 的企业服务 直接把代码上传到自己的服务器上 打包成 zip 文件 客户端可自动下载更新 11 11 个性化定制个性化定制 如同 SABA 网站需要定制一样 不同的客户对客户端的要求不一样 存在定制的需求 由于安卓系统可 以自行打包发布 因此有的定制可通过发布不同的客户端程序实现 而 iOS 系统如果不越狱 则只能从苹 果 AppStore 下载客户端程序 只能发布一个客户端 定制分为两个阶段 连接到服务器之前的定制 本阶段的定制内容比较少 目前可以简化为服务器地址的默认值定制 此问题可以通过用户手动输入实现 为了进一步提高易用性 在安卓客户端中可以通过发布不同的 客户端预置服务器地址 连接到服务器之后的定制 此阶段的定制后通过程序设计 使得所有可定制的资源在服务器后台管 理界面设置 由客户端从服务器下载资源并缓存 12 12 用户数据统计用户数据统计 需要记录用户的每个点击操作 统计用户的操作习惯 分析用户的关注点 对每个页面每个按钮进行 功能编码 在提交操作时 同时提交功能编码 以便后台操作等级数据 保存统计结果 理想情况下 应 考虑记录用户的所有操作 对于形成的数据 可以分析用户的操作行为 13 13 扩展性设计扩展性设计 为使得 mLearn 能够适配于不同的服务器 SABA dLearn 应考虑面向接口实现 即所有写入数据的 操作应面向接口 由不同的接口提供具体实现 可能需要的接口包括 1 登录 2 对学习记录的增删改 3 读取课件 4 课程评价的读取和设置 5 签到 6 评论的增删改 7 课程明细的读取 以上接口均通过 dframe 的服务机制实