socialcomputing/elas-official-frontend

ELAS前端服务技术文档

镜像概述与主要用途

ELAS（学生探索性学习分析工具包）前端服务是ELAS平台的用户界面组件，旨在为杜伊斯堡-埃森大学学生提供直观、交互性强的学习分析应用访问入口。该服务作为平台与用户的交互桥梁，展示后端服务处理的学习数据分析结果，支持学生使用各类学习分析工具，助力学习活动开展。

核心功能与特性

• 统一访问入口：整合E3Selector、StudyCompass、CourseRecommender等学习分析应用，提供一站式访问界面
• 数据交互支持：与ELAS后端服务（服务注册中心、API网关、认证服务等）无缝对接，实现实时数据交互
• 开发友好：支持本地开发环境快速配置，便于学生开发者进行功能扩展与定制
• 跨平台兼容：响应式设计，适配不同设备（电脑、平板等）的访问需求

使用场景与适用范围

适用用户

• 杜伊斯堡-埃森大学在读学生
• 参与ELAS平台开发的学生开发者

典型使用场景

• 学生通过前端界面访问学习分析应用，获取个人学习数据洞察
• 学生使用课程推荐、学习路径规划等工具辅助学习决策
• 开发者基于前端服务进行新学习分析应用的界面集成与测试

详细使用方法与配置说明

环境依赖

需预先安装以下软件：

• Node.js (v18.12.1)：Ubuntu安装指南 或 https://nodejs.org/dist/v18.12.1/node-v18.12.1-x64.msi
• Git：https://www.digitalocean.com/community/tutorials/how-to-install-git-on-ubuntu-22-04#installing-git-with-default-packages 或 https://git-scm.com/downloads
• 代码编辑器：推荐Visual Studio Code或IntelliJ Ultimate

配置步骤

1. 获取代码与进入目录

bash
git clone <ELAS项目仓库地址>
cd elas-official/frontend

2. 创建环境配置文件

• 在frontend目录下创建.env文件
• 复制同目录下example.env文件的全部内容到.env文件中
• （可选）根据实际需求修改.env文件中的配置变量（如API地址、端口等）

3. 安装依赖包

bash
# 推荐使用npm ci安装锁定版本依赖
npm ci

# 若npm ci执行失败，可尝试以下命令（谨慎使用，可能更新依赖版本）
# npm install
# 或 npm install --force

启动与停止服务

启动服务

bash
npm start

服务启动后，可通过 http://localhost:8080 访问前端界面。

停止服务

在运行服务的终端中按 Ctrl + C 即可停止。

Docker部署示例

快速部署

通过Docker Compose一键部署整个ELAS平台（含前端服务）：

bash
# 在项目根目录执行
docker compose up

需确保项目根目录存在有效的docker-compose.yml文件，该文件会自动配置并启动前端及关联后端服务。

技术架构

ELAS前端服务作为平台的用户交互层，通过API网关与后端微服务通信，获取并展示学习分析数据。平台整体技术架构如下：

开发与维护指南

代码管理

• 使用Git进行版本控制，推荐通过GitHub Desktop简化提交、分支管理等操作
• 提交代码前需确保本地测试通过，避免破坏主分支稳定性

依赖管理

• 通过npm管理Node.js依赖，非必要不修改package-lock.json文件
• 安装新依赖时需指定版本号，确保团队开发环境一致性

调试建议

• 使用浏览器开发者工具（F12）调试前端界面样式与交互逻辑
• 通过VS Code的调试功能设置断点，分析JavaScript代码执行流程