code4maus 开源项目教程

1. 项目介绍

code4maus 是一个基于 Scratch 的图形化编程环境，旨在通过游戏化的方式帮助儿童学习编程概念。该项目由 WDR（Westdeutscher Rundfunk）开发，旨在为儿童提供一个有趣且易于理解的编程学习平台。code4maus 的核心理念是通过互动和游戏，让儿童在玩耍中掌握编程的基础知识。

2. 项目快速启动

2.1 环境准备

在开始之前，请确保你已经安装了以下工具：

• Node.js
• Yarn
• AWS CLI（如果你需要下载资产）

2.2 安装依赖

首先，克隆项目仓库并进入项目目录：

git clone https://github.com/wdr-data/code4maus.git
cd code4maus

然后，安装项目依赖：

yarn install

2.3 配置环境

复制 .env.example 文件并重命名为 .env：

cp .env.example .env

2.4 下载资产（可选）

如果你需要下载项目资产，请确保你已经配置了 AWS CLI 并有权限访问 hackingstudio 配置文件：

export AWS_PROFILE=hackingstudio
yarn assets:download

2.5 启动项目

启动前端项目：

yarn start

打开浏览器并访问 http://localhost:8601，等待构建完成。

如果你需要使用保存功能，请启动后端服务：

yarn start:backend

3. 应用案例和最佳实践

3.1 创建新游戏

在 src/lib/edu 目录下创建一个新的游戏文件夹，并确保文件夹名称以 game 或 example 开头。游戏文件夹应包含一个 Scratch 3 项目文件（.json）和一个游戏配置文件（.js）。

例如：

mkdir src/lib/edu/example-your-cool-project
unzip /your/downloaded/sb3 -d src/lib/edu/example-your-cool-project
yarn prettier --write src/lib/edu/example-your-cool-project/project.json

3.2 添加幻灯片

你可以在游戏中添加幻灯片，这些幻灯片会显示在右下角。在游戏配置文件中添加 slides 数组：

export default {
  id: 'your-game',
  slides: [
    {
      asset: require('/assets/slide-01.svg'),
      caption: 'Where is my green pullover?'
    }
  ]
}

3.3 限制可用积木

如果你想覆盖游戏中的类别和积木，可以在游戏配置文件中添加 blocks 数组：

export default {
  id: 'your-game',
  blocks: [
    {
      category: 'motion',
      blocks: ['movesteps', 'turnright', 'turnleft', '--', 'gotoxy']
    },
    {
      category: 'sound',
      blocks: ['playuntildone']
    }
  ]
}

4. 典型生态项目

4.1 Scratch

code4maus 基于 MIT 的 Scratch 项目，Scratch 是一个广泛使用的图形化编程工具，适用于教育和娱乐目的。Scratch 的开放性和社区支持使得 code4maus 能够快速扩展和定制。

4.2 Scratch Blocks

Scratch Blocks 是 Scratch 项目的一部分，提供了图形化编程的积木组件。code4maus 使用了这些积木组件，并通过自定义翻译和功能扩展，使其更适合儿童使用。

4.3 AWS S3

code4maus 项目使用了 AWS S3 存储服务来管理项目资产。通过 AWS CLI，开发者可以轻松地下载和上传项目所需的资源。

通过以上教程，你可以快速上手 code4maus 项目，并开始为儿童创建有趣的编程学习体验。