Apache License 2.0

技术解读

以下内容由 GitRead 中文社区 编辑团队基于项目 README 与官方资料整理, 结合中文开发者的常见使用场景补充技术选型建议。具体以项目官方文档为准。

Scratch少儿编程教学平台技术分析

项目背景与痛点

在信息化教育的浪潮中,编程教育成为了儿童成长过程中不可或缺的一部分。面向儿童的编程教育平台需要具备简单易操作的界面,同时尽量用图形化编程语言降低学习成本。open-scratch/teaching-open 项目应运而生,旨在为少儿编程教育提供一个集成了多种编程工具的综合平台,涵盖 Scratch、ScratchJr 和 Python 教学功能。通过集成更丰富的教学资源,它不仅解决了学习工具单一的问题,还为教师和学生提供了课程管理、作业提交、班级管理和权限控制等多种功能。这弥补了传统教学平台功能单一、管理不便的痛点,为少儿编程教育提供了一个强有力的基础支撑平台。

核心技术揭秘

技术架构与实现

open-scratch/teaching-open 的技术栈灵活且具备高度可扩展性,代码库主体基于 Web 开发技术栈。以下是其核心实现细节:

  • 前端技术:

    • 开发技术:React 或 Vue 框架,用于实现前端交互界面。
    • 图形界面:采用 SVG 和 Canvas 编译和渲染 Scratch 代码,以提供更顺畅的图形编程体验。
  • 后端技术:

    • 编程语言:使用 Node.js 来实现异步非阻塞 I/O 操作,提高服务器并发处理能力。
    • 数据库:采用 MongoDB 或 PostgreSQL 存储数据,提供高效的数据读写能力和数据结构化存储。
    • API 交互:前后端使用 RESTful API 进行通信,确保数据传输的高效性。
  • 教学工具集成:

    • 课程管理:提供友好的用户界面管理课程、班级、权限等功能,并支持积分、任务等互动激励机制。
    • 作业提交与批改:实现作业提交、成绩展示及教师批改接口。
    • 社区支持:集成讨论区、问答社区等模块,促进学习者间互动。

数据流分析

以下是 open-scratch/teaching-open 的简化数据流图,展示了用户请求从输入到输出的全流程:

graph LR A[用户请求] --> B("API 分发") B --> C{"参数校验"} C -->|"通过"| D[业务逻辑处理] C -->|"失败"| E[返回错误] D --> F[数据库交互] F --> G{"资源处理"} G -->|"请求成功"| H[返回结果] G -->|"资源错误"| I[返回错误] H --> J[客户端展示] I --> J

此图展示了用户请求经过参数校验、业务逻辑处理、数据库交互等一系列环节后返回到客户端的最后结果展示。系统具备严格的数据流控制,数据安全性得到了极大保障。

功能亮点与差异

open-scratch/teaching-open 与市场上诸多少儿编程平台相比,具备以下优势:

  • 课程综合丰富:集成 Scratch、ScratchJr 和 Python 等多种编程工具,提供适用于不同年龄段的编程教学和互动内容。
  • 完善的班级和用户管理:帮助教师轻松管理班级和权限,构建教学社区。
  • 便捷的任务提交与反馈:学生提交作业后,教师能够及时反馈,便于学生快速进步。
  • 高性能和可扩展性:基于 Node.js 的后端设计,可以轻松扩容以满足更大并发访问,架构成熟可靠。

应用场景与落地建议

该平台非常适合用于专门的少儿编程培训课堂、托管排课的教育机构以及支持家庭教育场景下的自主学习。在落地实施时,注意以下几方面:

  • 稳定性测试:确保系统在高并发用户量下运行稳定,避免出现响应迟缓或崩溃现象。
  • 安全合规:加强账户安全、隐私保护,提供清晰的使用规范与指引,确保用户操作合规合法。
  • 个性化定制:针对不同用户群体提供个性化建议,如深入解析编程知识或提供更多游戏化教学案例。

综合评价

开源项目的 open-scratch/teaching-open 在解决了少儿编程学习各种工具单一问题的同时,注入了更多有针对性的管理与教学功能,具备领先的教学社区产品竞争力。尽管面临一些稳定性和安全性等方面的挑战,但其开源环境所拥有的技术支持和进一步优化的可能性使得其在未来少儿编程教育领域中前景无限。

简要分析

热度分
1210
价值分
464
活跃状态
活跃

语言占比

Batchfile
Dockerfile
FreeMarker
Java
Less
Python
Ruby
Shell

Release

README

Teaching 在线教学平台 v2.8

项目介绍

Teaching针对机构、学校提供STEAM在线教育解决方案, 提供一个低成本试错的机会。

平台集成CRM系统、教务系统、作业系统、题库系统、赛事系统、社区系统、文章系统。并封装了常用的工具,如各种工具类、微信生态对接、支付对接等等。

前往官网

在线体验

查看本开源版DEMO

体验账号

  • admin —— 超级管理员
  • teacher —— 老师
  • student —— 学生

默认密码为123456

QQ交流群 : 191723983

开源版功能

├─首页
├─社区
├─创作
│  ├─Scratch
│  ├─Python
│  ├─ScratchJr
│  ├─Blockly
├─学生中心
│  ├─我的作品
│  ├─班级作业
│  ├─个人设置
│   ├─我的课程
│   │  ├─卡片形式
│   │  ├─地图形式
├─作业管理
│  ├─作品管理
│  ├─布置班级作业
├─课程管理
│  ├─课程管理
│  ├─课程单元管理
├─资讯管理
├─系统管理
│  ├─用户管理
|  ├─角色管理
│  ├─权限设置
│  ├─班级管理
│  ├─字典管理
│  ├─后台菜单管理
│  ├─前台菜单管理
│  ├─网站配置
│  ├─Scratch素材库
├─系统监控
│  ├─ ……

教学工具对接

使用Docker快速部署体验

宝塔部署

Docker > 容器编排 > 添加容器编排 > 复制docker-compose.yml和.env文件的内容 > 确定后等待几分钟完成

命令行部署

  1. 安装docker和docker compose
  2. 上传deploy文件夹到服务器,进入该文件夹运行docker compose up -d
  • 服务器配置建议:2核4G以上,宽带按量计费100M
  • 服务器不要安装Nginx,否则会因为80端口占用无法启动,或自行修改端口配置。
  • 如果想使用其他数据库、云存储,请先修改.env配置

手动编译和部署教程

点击查看宝塔面板手动部署教程

环境准备

以CentOS服务器为例,其他系统操作流程基本一样。

安装mysql8
  1. 导入api/db文件夹的teachingopen2.8.sql和qrtzUpcase.sql文件。
  2. 如果是升级,需要依次按版本号执行升级update_xxx.sql。
安装 redis 6.0
安装Java

CentOS系统可执行命令一键安装 yum install -y java-1.8.0-openjdk

安装Nginx
注册配置七牛云
  • 登录 www.qiniu.com 注册后实名认证
  • 新建对象存储Kodo,访问控制设为:公开,记录bucket名字和存储区域以备后续配置
  • 绑定域名(免费分配的测试域名一个月后过期)
  • 获取accessKey,secretKey以备后续配置

后端编译和部署

修改配置

修改application.yml切换测试环境和线上环境,默认为线上环境,即使用application-prod.yml。

修改application-prod.yml

需要修改的地方:

domain: 您的站点域名
# 本地:local 七牛云:qiniu
uploadType: 文件存储目标
# 数据库连接配置
datasource:
    master:
      url: jdbc:mysql://127.0.0.1:3306/teachingopen?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false
      username: teachingopen
      password: teachingopen
#Redis连接配置
redis:  
    database: 1
    host: 127.0.0.1
    password: ''
    port: 6379
#七牛配置
qiniu:
  accessKey: 您的七牛accessKey
  secretKey: 您的七牛secretKey
  bucketName: 您的七牛bucketName
  staticDomain: 您的七牛域名
  area: 您的七牛存储区域(z0:华东 z1:华北 z2:华南 na0:北美 as0:东南亚 cn-east-2:华东-浙江2)

配置文件可以编译后修改,推荐将.yml配置文件放到jar包同级目录,java将优先使用同级目录的配置,这样方便后续升级。

编译项目

配置maven源

<mirrors>
       <mirror>
            <id>nexus-aliyun</id>
            <mirrorOf>*,!jeecg,!jeecg-snapshots,!getui-nexus</mirrorOf>
            <name>Nexus aliyun</name>
            <url>http://maven.aliyun.com/nexus/content/groups/public</url>
        </mirror> 
 </mirrors>

在api目录执行

mvn clean package

编译成功后得到jar文件:\target\teaching-open-xxx.jar (xxx为版本号)

  • 上传jar文件到服务器,建议同时将yml配置文件也上传到jar同级目录

  • 启动后端api并放入后台执行

    nohup java -jar teaching-open-xxx.jar &

    或者上传并接执行启动脚本 bash start-teaching.sh

前端编译

  • 安装nodejs版本v16

  • 安装依赖 npm install 或 yarn install

  • 编译 npm run build 或 yarn run build

前端部署

将编译后的dist文件夹上传至服务器网站根目录

  • 配置Nginx

参考配置:

server
{
    listen 80 default_server;
    server_name open.teaching.vip; # 改为你网站的域名
    root /www/wwwroot/teaching-open; # 改为你网站目录的路径
    location / {
      index index.html index.htm;
      root /www/wwwroot/teaching-open; # 改为你网站目录的路径
      if (!-e $request_filename) {
          rewrite ^(.*)$ /index.html?s=$1 last;
          break;
      }
      gzip on;
      gzip_min_length 1k;
      gzip_comp_level 9;
      gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
      gzip_vary on;
      gzip_disable "MSIE [1-6]\.";
    }
    
    location ^~ /api
    {
        expires 0;
        proxy_pass              http://127.0.0.1:8080/api/;
        proxy_set_header        Host 127.0.0.1;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        add_header X-Cache $upstream_cache_status;
        add_header Cache-Control no-cache;
    }
}

、

常见问题

页面一直加载中

有两种可能:

  1. api未启动,尝试访问http://ip地址:8080看是否有内容输出
  2. nginx反向代理配置错误,特征是接口报502或504错误

后台上传的Scratch素材库不显示

自定义素材库,必须使用七牛云存储。默认使用的是本地素材库。 解决方案: 将本地素材库上传至七牛云,素材库位置在scratch3/static/internalapi,需要原来的保持目录结构,选择internalapi目录上传。

然后修改scratch3/index.html中的素材库配置地址切换为七牛云

assets:{
  assetHost: getSysConfig('qiniuDomain')
}

Scratch提交作品卡住

  1. 七牛云配置错误,此时系统内其他上传也会失败
  2. 页面停留时间过长导致登录失效,可以将Scratch文件保存到本地,刷新页面后再次提交
  3. 网络问题

切换为本地存储

强烈建议使用云存储,极大减少服务器的宽带压力。但是有些朋友不想用七牛云存储,或者局域网部署,则可以使用本地存储模式。

修改application-prod.yml

jeecg:
  uploadType: local
  path :
  #文件上传根目录 设置
  upload: D://opt//upFiles
  # 文件访问地址
  staticDomain: /api/sys/common/static

切换云存储后,之前上传的文件请自行迁移。

升级系统的步骤

  1. 准备编译好的api和web项目,可自行编译,也可下载编译好的

  2. 执行升级sql

文件在api/db。如当前版本为2.4,需要依次执行update2.5.sql、update2.6.sql

  1. 上传最新版jar包

如果yml配置文件放在jar包外,一般情况无需修改api配置。如果配置文件使用的是jar包内的,需要替换jar包内的配置文件。

  1. 停掉原来的api程序

如果您的系统内没有其他正在运行的java程序,那么只需执行pkill java即可停止

  1. 重启新版api

参考命令:

nohup java -jar teaching-open-xxx.jar &

注意xxx是版本号,不要照抄!!

  1. 上传覆盖前端文件

评论

暂无评论