schulcloud/schulcloud-client

Schul-Cloud Client

基于NodeJS和Express实现的Schul-Cloud客户端。

开发环境状态: !https://travis-ci.com/schul-cloud/schulcloud-client.svg?branch=master

生产环境状态: !https://travis-ci.com/schul-cloud/schulcloud-client.svg?branch=production

镜像概述和主要用途

Schul-Cloud Client是Schul-Cloud系统的核心前端应用，基于NodeJS和Express框架开发，为用户提供与Schul-Cloud系统交互的界面。该客户端支持与后端服务、日历服务、通知服务等集成，可通过主题定制实现界面个性化，并提供完善的测试机制确保跨浏览器兼容性。

核心功能和特性

• 与Schul-Cloud后端服务无缝集成
• 支持主题定制，可通过环境变量切换主题
• 集成日历服务（需配置环境变量启用）
• 集成通知服务（需配置环境变量启用）
• Google Analytics跟踪支持（需配置跟踪ID）
• 提供前端测试框架（基于nightwatch.js）
• 支持浏览器同步（browser-sync）开发模式

使用场景和适用范围

适用于教育机构部署Schul-Cloud系统时作为前端用户界面，供学生、教师等用户访问和使用Schul-Cloud平台的各项功能。支持开发环境调试和生产环境部署，可根据需求定制主题和集成第三方服务。

环境要求

• node.js 8.7或更高版本（可从https://nodejs.org/en/download/%E4%B8%8B%E8%BD%BD%E5%AE%89%E8%A3%85%EF%BC%89
• 更多依赖和版本信息可参考https://github.com/schul-cloud/schulcloud-client/blob/master/Dockerfile

安装与设置

德语安装文档：Setup SC

简要步骤：

1. 将项目克隆到本地目录
2. 进入克隆目录，执行 npm install
3. 全局安装nodemon和gulp：npm install -g nodemon gulp

运行方法

常规运行

1. 启动https://github.com/schul-cloud/schulcloud-server
2. 进入项目目录
3. 执行 gulp watch 运行gulp
4. 设置环境变量：
   • Ubuntu/Mac: export TZ=Europe/Berlin
   • Windows: set TZ=Europe/Berlin
     （可选）设置标题：SC_TITLE=HPI Schul-Cloud 和 SC_SHORT_TITLE=Schul-Cloud
5. 执行 npm run watch 启动应用
6. 访问 http://localhost:3100

使用browser-sync的替代方法

1. 执行 gulp watch reload 运行gulp并启用浏览器同步（同时启动node客户端服务器）
2. 访问 http://localhost:7000

服务集成配置

• 日历服务：设置 export CALENDAR_SERVICE_ENABLED=true 以启用https://github.com/schul-cloud/schulcloud-calendar
• 通知服务：设置 export NOTIFICATION_SERVICE_ENABLED=true 以启用https://github.com/schul-cloud/node-notification-service
• Google Analytics：设置 export GOOGLE_ANALYTICS_TRACKING_ID={TRACKING_ID} 以启用跟踪（替换{TRACKING_ID}为实际跟踪ID）

主题定制

1. 将主题添加到 /theme 目录
2. 设置环境变量 SC_THEME 为主题目录名称
3. 执行 gulp clear 清除构建文件和gulp缓存

Windows系统主题设置

执行 set SC_THEME={themeName}（等号前后无空格）

测试

注意：请确保所有更改在Chrome、https://www.mozilla.org/de/firefox/new/%E5%92%8Chttps://www.apple.com/de/safari/%E4%B8%8A%E5%9D%87%E5%8F%AF%E6%AD%A3%E5%B8%B8%E5%B7%A5%E4%BD%9C%EF%BC%81HTML/CSS%E7%BB%84%E4%BB%B6%E8%AF%B7%E5%8F%82%E8%80%83caniuse%E3%80%82

基本测试

1. 设置演示用户 schueler@schul-cloud.org 的密码：
   • Ubuntu/Mac: export SC_DEMO_USER_PASSWORD={PASSWORD}（无需大括号）
   • Windows: set SC_DEMO_USER_PASSWORD={PASSWORD}（无需大括号）
2. 执行 npm run test
3. 如需使用非本地后端URL，设置环境变量 BACKEND_URL 和 PUBLIC_BACKEND_URL（方法同上）
4. 如需查看覆盖率，执行 npm run coverage

前端测试

当前使用nightwatch.js进行前端测试，API文档见这里。

步骤：

1. 执行 npm run watch 启动客户端服务器
2. 打开另一个命令行，执行 npm run frontendTests 以在Chrome和Firefox上运行测试

如需指定浏览器测试：
./node_modules/.bin/nightwatch --config nightwatch.conf.js --env chrome（将chrome替换为firefox可测试Firefox）

添加新测试

1. 复制现有测试文件
2. 初始测试用例应包含登录、检查等基础步骤
3. 在检查步骤和 browser.end() 之间添加自定义测试用例
4. 将测试添加到 diff.sh（该脚本比较PR分支与主分支，在相关文件变更时添加测试）

分支命名规范

1. 提取Trello工单URL的最后部分（例如："8-setup-feathers-js"）
2. 以Trello ID命名分支（例如："8-setup-feathers-js"）

提交规范

默认分支：master

步骤：

1. 进入项目目录
2. 运行测试（见上文）
3. 提交时使用有意义的提交信息（避免类似"dfsdfsf"的无意义信息）
4. 切换到master分支
5. 执行 git pull
6. 切换到待上传的分支
7. 执行 git rebase -p develop（请勿使用git merge！）并解决可能的合并冲突
8. 执行 git push