STEAM與運算思維教學實務班–卡內基美隆大學機械學院入門課程:程式設計(1060728)

日期:106年7月28日(五)

主題:STEAM與運算思維教學實務班–卡內基美隆大學機械學院入門課程:程式設計

單位:資訊工業策進會 數位教育研究所

上課地點:台北市信義路三段153號3樓

課程計畫:

課程目標:

  1. 瞭解運算思維與STEAM於學科整合應用。
  2. 瞭解國際程式教育教學編制架構與教學內容。
  3. 瞭解數位學習平台與實體教學搭配。
  4. 瞭解各式輔助程式、專案的教學工具(如:Scratch、故事板、設計圖表、計畫文件、甘特圖等)。

課程大綱:

  1. 運算思維與STEAM於教學運用介紹
  2. 卡內基教學平台與教材編排設計介紹
  3. 簡易不插電教學活動實作
  4. 專案製作工具介紹與應用
  5. 計算機概論(基本實用電腦應用功能)
  6. Scracth基礎介紹與功能操作。
  7. 以Scracth為教學工具,STEAM實務任務設計範例介紹。
  8. Rubric 量表應用案例介紹。

課程內容:

(一) STEAM

科學(Science)、技術(Technology)、工程(Engineering)、藝術(Art)、數學(Mathematics)

STEM Integration in K-12 Education

Boyan Slat: How we will rid the oceans of plastic (May 2017)

How the oceans can clean themselves: Boyan Slat at TEDxDelft

シャボン玉が出る!遠くへ飛ぶオモチャ作ってみた【名前はまだない】DIY

(二)運算思維:

什麼是運算思維 (Computational Thinking)?

運算思維就是解決問題的方法。
讓我們面對複雜的問題,能夠理解問題本質、發展可能的解決辦法。然後使用電腦、人或兩者都可以理解的方式來呈現這些解決方案。(參考:BBC

分成四個部分:

  1. 拆解(Decomposition):將複雜的問題或系統分解成更小、更易於管理的問題;
  2. 模式識別(Pattern Recognition):為了讓解決問題更有效率,將每個小問題分別檢視,思考之前是否有解過類似的問題;
  3. 抽象(Abstraction):只注意重要的細節,忽略不相關的資訊;
  4. 演算法(Algorithms ):設計簡單的步驟或規則來解決每個小問題。

最後,將這些簡單的步驟或規則寫成程式。

圖片來自 BBC BiteSize

程式是工具,實現「解決問題」的工具。程式語言本身並不涉及運算思維。

 

Abstraction – Computational Thinking

Algorithms

 


上課教材:

 STEM with Computer Science Catchup

  • 概述和順序
  • 持續性評估
  • 期末考試
  • 單元1:檔案和資料夾
  • 單元2:Scratch的介紹
  • 單元3:規劃
  • 單元4:更好的動畫
  • 單元5:除錯
  • 單元6:動作設計
  • 單元7:截圖工具
  • 單元8:對話
  • 單元9:水循環測驗專案
  • 單元10:網路霸凌動畫
  • 單元11:數學遊戲

學習資源:

 

Kendo UI for Angular

【課程主題】:Kendo UI for Angular

【課程內容】:

範例網站http://webnas.bhes.ntpc.edu.tw/chiubor/ng-demo-kendoui/

範例網站程式下載:ng-demo-kendoui

  • 下載解壓縮後,請至專案資料夾中,下達下列指令:
    • npm install => 重建 node_modules
  • 安裝後若仍有缺元件:
    • npm install –save 元件名稱

注意事項:

  • npm install 完成後,會出現下列警告訊息:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

警告原因是因為此元件僅適用於 darwin 作業系統,不適用於 Windows 作業系統,故予以跳過不安裝。

但若有其他元件相依於此元件,將導致其他元件無法正常安裝設定。因此最好是強制將其安裝,否則此訊息及此問題會不斷重演。

強制安裝指令:

npm install --force fsevents


課程相關教材:

開發環境與工具:

更新 Node.js, npm, Angular CLI

Node.js 重新安裝即可

npm i -g npm

npm unstall -g @angular/cli

npm i -g @angular/cli

網站佈署:

ng build --prod --base-href /ng-demo-kendoui/

將專案目錄下的 dist 資料夾整個複製到網站根目錄下(或另建置虛擬目錄),將 dist 更名為 ng-demo-kendoui

重點提示:

  • index.html 中的 base 修改成
    <base href="/VirtualDirectory/">
  • 或是在 build 的時候使用
    ng build --prod --base-href /VirtualDirectory/
    這個帶有 --base-href 參數的指令

Angular 學習資源

學習如何玩創世神教育版(1060701)

課程內容:Minecraft Education 創世神教育版

Minecraft Education 創世神教育版的說明課程是為了引導對創世神還不熟悉的教師及學生,或是需要再重新複習如何操作、建造以及了解基本遊戲的人。

微軟教師認證系列課程

學習如何玩創世神教育版 (一)

創世神教育版:玩、創造、學習 – 教育版認識以及其他老師怎麼融入教學分享

學習如何玩創世神教育版 (二)

一步一步一起玩創世神教育版

『彈指玩轉世界』專書發表暨程式教育論壇(1060314)

日期:106年3月14日

地點:新北市政府大樓6樓大禮堂。

活動內容:

9:30-10:00 報到(發送參與人員專書1本)。
10:00-10:40 揭書儀式、播放程式教育影片、長官貴賓參觀主題展區。
10:40-11:10 專題演講。
11:10-12:00 程式教育分享會(沙龍座談)。
12:00-13:00 參觀主題展區。【會後發贈餐盒】

參考資料:

相關連結:

活動照片:(摘錄自彭于佳、黃保太、呂天齡的Facebook)

新北市程式開發社群工作坊-Scratch擴充積木設計(1060308、0315、0322)

日期:106年3月8日、3月15日、3月22日

地點:新北市教研中心

講師:蔡佳倫老師

三周的課程如下:
—————————————————————-
3/8 第一節課會先講語言的轉換
3/15 第二節講講mblock的積木撰寫
3/22 第三節會講python跟scratch
—————————————————————-

設備使用 Arduino模擬器 和 S2A,不用準備硬體!

課程內容:

Scratch 擴充積木設計:

教學範例:

base_helper.s2e


{

“extensionName": " 自訂積木 “,
“extensionPort": 50000,
“blockSpecs": [
[“r", “資料", “hello"],
[“r", “資料1″, “hello1″],
]

}


用Python擴充我的Scratch2 — 原理與Hello World篇

base_helper_py3.py


def do_GET(self):

  try:

 """
 process HTTP GET requests
 """
# skip over the first / . example: /poll -> poll 
 cmd = self.path[1:]
 # create a command list . 
 cmd_list = cmd.split('/')
 
 s = "不回傳資料"
 ###### 處理Scratch送出的命令
 ###### 若需回應Scratch的Poll命令,再把文字存在變數s ##
 ##############################################################
 
 crlf = "\r\n"
 if cmd_list[0] == "poll":
 s="hello " + "hello" + crlf
 s+="hello1 " + "hello1" + crlf
 
 #############################################################

except:

s = “不回傳資料"

finally:

self.send_resp(s)


Creating Scratch 2.0 Extensions 摘要說明:

Block description

Each block is described by an array with the following fields:

  • block type
  • block format
  • operation or remote variable name
  • (optional) zero or more default parameter values

The block type is one of these strings:

  • " " – command block
  • “w" – command block that waits
  • “r" – number reporter block (round ends) ==> 前面有帶一個 checkbox
  • “b" – boolean reporter block (pointy ends)
  • “R" – Reporters that wait (round ends)

The block format is a string that describes the labels and parameter slots that appear on the block. Parameter slots are indicated by a word starting with “%" and can be one of:

  • %n – number parameter (round ends)
  • %s – string parameter (square ends)
  • %b – boolean parameter (pointy ends)

Menu parameters

Both command and reporter blocks can include menu parameters:

  • %m.menuName – menu parameter (not editable)
  • %d.menuName – editable number parameter with menu
{ 
  "extensionName": "Kinect",
  "extensionPort": 12345,
  "blockSpecs": [ 
    ["r", "get %m.coordinate position of %m.bodyPart", "position"],
  ], 
  "menus": { 
    "coordinate": ["x", "y", "z"],
    "bodyPart": ["head", "shoulder", "elbow", "hand"],
  },
}

position/y/hand 247 => 回傳值為 247 (鍵、值用空格分隔)

Polling (每秒 30 次)

Scratch to retrieves sensor values and status information from the helper app by sending a poll command:

request: /poll

Here’s an example poll response:

response: 鍵、值用空格分隔,每一筆資料用 crlf (\r\n) 分隔

brightness 75 + crlf (\r\n)
slider 17 + crlf (\r\n)

Commands

/beep                    (command with no parameters)
/setVolume/5   (command with a numeric parameter)

Commands that wait

turn motor on for 3 seconds

turns on the motor, waits three seconds, then turns it off again. When this block is used in a script, execution does not continue to the next block until the command completes. A command that waits is indicated by the “w" block type in the command descriptor.

When a “w" command is invoked, Scratch adds a unique command_id parameter to the request (before any other parameters). For example, for the motor command above Scratch would send:

request:     /motorOn/2437/3

The first parameter, 2437, is a unique identifier for this invocation of the command. For the three seconds that this command takes to complete, the helper app adds a busy line to the poll request:

response:  _busy 2437 …

A busy line consists of the string “_busy" followed by a list of unique identifiers separated by spaces. When Scratch gets a poll result that doesn’t include 2437 in the busy line (or doesn’t even have a busy line), it knows that the command is complete and allows the script that invoked that command to proceed.

Reporters that wait (目前已實作出來) => “R"

temperature in city_name

request:     /getTemperature/7639/Boston

response:  _result 7639 82

Reset command

Scratch extensions can control motors or music synthesizers. Users expect to be able to stop everything — turn off motors, silence music synthesizers, and reset hardware back to it’s original state — by clicking the stop button in the Scratch editor. Thus, when the stop button is clicked, Scratch sends a reset command to all active extensions:

request: /reset_all


參考資料與範例:

mBlock 擴充積木設計:

mBlock 積木程式轉Arduino 程式教學:

範例一:

Autodesk 123D circuits 繪圖

mBlock 積木程式:

Arduino 程式

#include <Arduino.h>
#include <Wire.h>
#include <SoftwareSerial.h>

double angle_rad = PI/180.0;
double angle_deg = 180.0/PI;
double switchStatus;

void setup(){
Serial.begin(9600); //改成9600,才能於123D中執行
pinMode(2,INPUT);
}

void loop(){
switchStatus = digitalRead(2);
Serial.println(switchStatus);
_loop();
}

void _delay(float seconds){
long endTime = millis() + seconds * 1000;
while(millis() < endTime)_loop();
}

範例二:

Autodesk 123D circuits 繪圖

mBlock 積木程式:

Arduino 程式

#include <Arduino.h>
#include <Wire.h>
#include <SoftwareSerial.h>

double angle_rad = PI/180.0;
double angle_deg = 180.0/PI;
double Button;
double LED;

void setup(){
    Button = 2;
    LED = 12;
    pinMode(Button,INPUT);
    pinMode(LED,OUTPUT);
}

void loop(){
    if(((digitalRead(Button))==(1))){
        digitalWrite(LED,1);
    }else{
        digitalWrite(LED,0);
    }
    _loop();
}

void _delay(float seconds){
    long endTime = millis() + seconds * 1000;
    while(millis() < endTime)_loop();
}

void _loop(){
}

參考資料:

BlocklyDesigner 安裝教學:

蔡佳倫教學影片:

活動照片: