Scratch 3.0建站指南（一）

Scratch 3.0已经到来

Scratch 3.0是下一代Scratch。它是Google的Blockly项目的一个分支，采用HTML5而不是2.0版本使用的flash，随着H5技术逐渐发展，原本采用flash技术的已经逐渐在向H5转移，相对于flash来讲，H5在页面的装载速度上整体上会更快一些，另外，也相对较为省电。更为重要的是，flash对于移动端没什么办法，IOS压根就不支持它。也因此，Scratch 3.0是可以在手机和平板上运行的，因为H5需要的是Javascript的支持，这在现代浏览器上都是没问题的，移动端也不例外，但确实还是有不支持的浏览器，那就是IE浏览器，但这也不是大问题，目前还在使用IE浏览器的比例已经很小了，微软在Win10上采用新的内核开发了Edge浏览器，也步入了现代浏览器的行列。

Scratch 3.0是向下兼容的，因此原来2.0的项目在3.0上也是可以运行的，但从实际测试的效果来看，有些2.0的项目还是会让3.0崩溃的。

Scratch3.0 的用户界面发生了很大的改变，更便于使用和学习：

1. 可以在单个列表中滚动浏览所有块（所有类别）；
2. 舞台从左边转移到了右边，这样编程操作会更为集中；
3. 某些块（例如“指向方向”） 的输入方式变为更为直观，它会显示一个表盘让你拖动；
4. 所有项目现在都以变量（称为“我的变量”）开头，以帮助初学者掌握；
5. 笔块和音乐块现在是Extensions，允许添加功能，同时简化基本块调色板；
6. 颜色选择器块提供更多选项和控制，比如可以直接点选颜色；

所以说，不管是从架构还是从UI上，3.0都比2.0都有了很大的改变，如果计划采用Scratch的，选择3.0是肯定的，如果已经采用了2.0的版本，我的建议是逐渐迁移到3.0上，不管怎么说，单单移动端可以运行的理由就足够了，跟不用说其他的一些新的功能比如声音控制Scratch项目。

Scratch2.0 有单机版，可以下载后安装使用，对于线下实体教授scratch的机构来说，还是比较方便，但Scratch 3.0，它使用的是React JS（Facebook倡导的一种框架技术），是运行在浏览器中的，所以需要后端能够Host Scratch3.0的组件，在前端请求的时候可以提供服务。

有人会问，是否一定要建立一个网站，Scratch官方是否提供在线Scratch 3.0的版本，是的，Scratch官方提供在线版本，现在有个beta版本供大家试用：https://beta.scratch.mit.edu/，
大家使用这个版本也是可以开展教学任务的，文件可以存放本地。

那么有了官方版本是否就不再需要自己再建设一个Scratch 3.0的网站了？这个问题要看我们对于Scratch 3.0的需求是怎样的，比如更高的效率（国外网站在第一次访问时会比较慢），是否需要品牌宣传，是否与学员体系整合，是否需要对学员的进度进行统一的管理，是否需要将作品保存在云端，是否需要将作品分享和转发等等。如果有这些定制化的要求，那么建站就是必须的了。

接下来的内容中我们就讨论一下如何针对Scratch 3.0进行建站。

Scratch 3.0采用的模块化的开发方法，大家可以在Github上看到Scratch 3.0的项目结构。https://github.com/LLK

这里我们需要的scratch-gui这个项目，它负责最后的用户UI界面的呈现。

我们还需要一些技术的准备工作，这不是一份手把手的教程，需要您具备一些技术储备，大致我们会需要到git, node, webpack的一些基本知识，如果需要定制开发，还需要reactjs的功力，在部署的环节还需要一些linux方面的知识。

建站之本地环境准备：

1. 步骤一：在本地成功运行

Scratch 3.0的项目都是开源的（感谢伟大的开源思想），在将scratch-gui的源码git 到本地后，依照readme的指示操作，经过一番努力后，你通过npm start，会启动一个本地的版本，严格来说是webpack作为一个web server来host了Scratch 3.0的服务，通过localhost:8601，可以访问Scratch 3.0的GUI，这个GUI与你访问到的官方的Scratch 3.0基本上是一致的。

2. 步骤二：编译GUI项目

我们需要通过webpack将整个GUI项目进行编译、打包，通过npm run build指令，最后可以在Build目录下打包整个项目文件，我们一般会看到如下几个文件，lib.min.js, gui.js, blocksonly.js, compatibilitytesting.js, player.js, index.html，以及一些静态资源文件在static目录下，在我们请求index.html文件时，会加载gui.js, gui.js依赖于lib.min.js，因此也会被同时加载，对于运行GUI来说需要的是lib.min.js, gui.js, index.html和static目录资源

3. 步骤三：将项目部署到虚拟环境

你需要一个服务器来Host它，可以使用Virtual Box或使用vagrant来创建一个虚拟服务器，服务器的操作系统可以采用centos，系统的配置就相对简单了，因为Host的基本都是静态文件，当然，你还需要nginx或apache作为服务器代理来处理http的请求，因为在本地端的要求比较简单，所以，如果使用nginx的话，在default.conf配置一下Location目录，将在步骤二打包的build目录下的文件全部copy到该目录下，这时你通过80端口来访问这台虚拟服务器就可以看到Scratch 3.0的GUI了。

在后边的章节我们将再讲一些关于生产环境部署，以及定制开发的内容。

参考网站：https://www.wecoding.com.cn