Scratch3.0 二次開發環境部署(一)

簡介

在這裏插入圖片描述Scratch終於在2019年1月2日,發佈了3.0正式版。
我們先來看下Scratch3.0改進了什麼。
首先要說明的是,3.0完全兼容2.0的作品,所有用2.0製作的作品,都可以在3.0中打開,但反之不行,也就是說Scratch2.0編輯器打不開3.0製作的作品。所以基本上從2019年開始,就要用Scratch3.0開始編程了。

Scratch3.0改動最大的部分,是在擴展部分。
以前Scratch2.0就這3個擴展模塊
在這裏插入圖片描述
這次Scratch3.0有9大擴展模塊,當然音樂、畫筆、視頻偵測這3塊,以前就有,估計Scratch的開發組也是爲了硬湊9張圖,把他們給放這裏了。
可以看到,這些擴展模塊的核心,就是大大增強了和現實的互動!
文字朗讀:可以朗讀你的文字了,可惜不支持中文。
Makey Makey,micro:bit,Lego EV3,LEGO WeDo 2.0,都是連接實體硬件設備,從而讓程序和現實硬件連接起來。
在這裏插入圖片描述

另外非常重要的一點,Scratch3.0可以運行在移動設備上了,可以在平板電腦、iPad上直接通過瀏覽器來訪問Scratch的在線編輯器,並且還爲了適應移動設備,特意加大了積木塊的大小,就是方便拖動。這大大的擴展了Scratch的使用範圍。、

Scratch3.0是一次非常重大的升級,對少兒編程來說,是一個里程碑式的,進一步降低了用戶的學習門檻,拓展了和現實之間的互動。

環境構建

1、安裝Nodejs、npm

安裝Node.js步驟
1、下載對應你係統的Node.js版本:https://nodejs.org/en/download/
2、選安裝目錄進行安裝
3、環境配置
4、測試

下載
在這裏插入圖片描述下載完成後,雙擊“node-v6.9.2-x64.msi”,開始安裝Node.js

在這裏插入圖片描述點擊【Next】按鈕

在這裏插入圖片描述
勾選複選框,點擊【Next】按鈕
在這裏插入圖片描述

修改好目錄後,點擊【Next】按鈕
在這裏插入圖片描述

安裝完後點擊【Finish】按鈕完成安裝
在這裏插入圖片描述
至此Node.js已經安裝完成,可以先進行下簡單的測試安裝是否成功了,後面還要進行環境配置
在鍵盤按下【win+R】鍵,輸入cmd,然後回車,打開cmd窗口
在這裏插入圖片描述
在這裏插入圖片描述

安裝完後的目錄如下圖所示
在這裏插入圖片描述
此處說明下:新版的Node.js已自帶npm,安裝Node.js時會一起安裝,npm的作用就是對Node.js依賴的包進行管理,也可以理解爲用來安裝/卸載Node.js需要裝的東西

環境配置
說明:這裏的環境配置主要配置的是npm安裝的全局模塊所在的路徑,以及緩存cache的路徑,之所以要配置,是因爲以後在執行類似:npm install express [-g] (後面的可選參數-g,g代表global全局安裝的意思)的安裝語句時,會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中,佔C盤空間。
例如:我希望將全模塊所在路徑和緩存路徑放在我node.js安裝的文件夾中,則在我安裝的文件夾【D:\Develop\nodejs】下創建兩個文件夾【node_global】及【node_cache】如下圖:
在這裏插入圖片描述

創建完兩個空文件夾之後,打開cmd命令窗口,輸入
npm config set prefix “D:\Develop\nodejs\node_global”
npm config set cache “D:\Develop\nodejs\node_cache”
在這裏插入圖片描述
接下來設置環境變量,關閉cmd窗口,“我的電腦”-右鍵-“屬性”-“高級系統設置”-“高級”-“環境變量”

在這裏插入圖片描述

進入環境變量對話框,在【系統變量】下新建【NODE_PATH】,輸入【D:\Develop\nodejs\node_global\node_modules】,將【用戶變量】下的【Path】修改爲【D:\Develop\nodejs\node_global】
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
測試
配置完後,安裝個module測試下,我們就安裝最常用的express模塊,打開cmd窗口,
輸入如下命令進行模塊的全局安裝:

npm install express -g # -g是全局安裝的意思
在這裏插入圖片描述

2、安裝Git

Git下載

在這裏插入圖片描述
在這裏插入圖片描述下載最新版本,點擊紅框或籃筐處即可

2、源碼下載

在github上下載源碼的zip,然後解壓到一個目錄上。
獲取scratch-gui源代碼,網址https://github.com/LLK/scratch-gui
在這裏插入圖片描述

運行

解壓源碼,並cd到解壓後scratch-gui目錄進入
在這裏插入圖片描述
構建項目:
1、npm install
如果成功的話,會一直下載依賴
項目順利啓動
2、npm run start
在這裏插入圖片描述
加載界面
啓動瀏覽器,在瀏覽器裏輸入:localhost:8601進入scratch3.0界面。
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章