【scratch二次开发教程 第2章】运行scratch-gui项目并了解工程结构


作者:管理员
分类:scratch 二开
发布时间:2019-12-14 11:19:08
热度:21734

					【scratch二次开发教程 第2章】运行scratch-gui项目并了解工程结构
写在前面
该系列文章是为具有开发能力的朋友写作的,目的是帮助他们在scratch 3.0的基础上开发一套完整的集scratch 3.0编程工具、用户社区和作品云端存储及、品牌集成于一体的scratch编程平台。如果您不是开发者,但想要拥有自己的教育平台和品牌,也欢迎学习交流和洽谈合作。
所以如果您是想学习scratch少儿编程课程,那请忽略该系列的文章。

这一章我们开始尝试在本地将scratch-gui项目的最新代码运行起来,并对其项目结构有个初步的认识。

本地搭建运行
我们从官方的gitlab仓库拉取最新的代码:




git clone https://github/LLK/scratch-gui.git目前主分支是develop,并且在不断的更新中,注意查看一下自己克隆的分支是否正确。

进入工程,安装依赖:






cd scratch-guinpm install如果还没有安装npm,请参考https://npmjs/
这个过程中可能会碰到错误信息而安装失败,这时我们需要根据具体的错误信息自己去网上寻找解决方案。

安装完成后,启动服务:




npm start看到如下信息后:



打开浏览器,访问localhost:8601就会看到scratch 3.0的playground为render-gui完整模式的界面,像官网的一样:





由于scratch-gui也处于开发之中,我们看到的有些功能还没有实现,或者没有开源出来。但是对于编程模块的功能,我们可以自己尝试一下,基本上都是跟官方的一样的。如果我们不打算在编程功能模块做进一步扩展的话,这一块的功能我们可以直接拿来使用,而不需要再进行二次开发了。




工程目录结构


我们先一起来过一遍scratch-gui工程的基本目录结构,以便开始我们的二次开发之旅。




我们在WebStorm中打开项目,看到如下目录结构:





熟悉react-redux框架的朋友应该很快就清楚工程各个目录的作用, src目录是我们真正需要了解和二次开发重点要修改的目录,主要包括:


components: 组件目录,主要定义UI组件的结构和样式,负责数据的展示

containers:主要负责对components中部分组件的封装,处理组件的业务逻辑,将组件的数据与redux打通,不涉及样式

css: 全局样式设置文件

examples/extensions: 关于scratch扩展的配置示例 

lib: 工具方法目录,供组件调用的一些模块和方法,其中以-hoc.jsx结尾的高阶组件,是为UI组件提供额外的功能方法

playground: 多种模式的使用示例:积木模式(blocks-only)、舞台模式(player)、完整模式(render-gui)

reducers: redux的store的初始状态、actions和 reducers的定义

index.js: 作为 library 打包的入口文件


好了,本章我们成功拉取scratch-gui的代码,并在本地成功运行起来,然后简单地分析了它的代码目录结构,下一节课我们将尝试在平台中自定义我们的品牌logo.