1.OzoBlockly 積木式語言編程簡介與演練

先來簡要了解一下我們所使用的這款Ozobot機器人,它可以運行於三種模式:第一種是最常見的用色筆畫線,讓它沿著不同顏色的線條走,或是畫出色碼,當 ozobot 路過時會執行對應的行為,這就是一種編程。第二種是用平板電腦(iOS或Android)裡安裝了特定的App 進行電子畫線及畫出色碼,有些還內建許多遊戲可以闖關,這就是用平板提供的編程,原則上是與前一種是相同的。至於第三種就是比較抽象且深具鍛鍊腦筋及展延意義的,就是使用 Ozoblockly 編程方式,直接把code燒錄(用閃光方式傳送)至機器人內,接著快速雙擊開機鈕,機器人就會改變行為直接執行所燒錄的程式碼。

就 Ozobot 機器人的編程學習課題,以形象來講,可分為"體外編程"以及"體內編程","體外編程"就是編制機器人運動路徑、自身動作、變臉絕技等等,就好像設計交通號誌與交通規劃般需要細心編制其程序,又由於這是著眼於機器人外在的,故謂之"體外編程";另對於"體內編程"就是大家較熟知的"Coding",也就是傳統意義要輸入電腦語言給機器人,由於是著眼於機器人內部所用的,故謂之"體內編程"(以上是本人的講法),Ozobot 機器人這方面是以 OzoBlockly 為其專屬積木式電腦語言(Block-based coding, sometimes known as Block-based programming),其編程是要在雲端 https://ozoblockly.com/editor 線上進行。"體外編程"是通過 Ozobot 機器人底部傳感器識別"外界"線條並循線移動,還會根據不同的線條顏色顯示出相應的顏色,也會依即定色碼展現相應的動作,因此,Ozobot 機器人可稱為"循線機器人"或"循線車"。又,當外界沒有條件建立移動線條與安排色碼時,該怎麼辦?所幸,原廠為 Ozobot 機器人提供"體內編程"機制,能將"體外編程"轉成積木式電腦語言的"內在運作邏輯",也就是,將原本要彰顯於外在的表現和特徵,全數編程化,之後儲存於 Ozobot 機器人的內部中,因此,這時候就該將 Ozobot 機器人稱之為"自走車"。


電腦科技發展以來,用軟體學程式,或是搭配硬體一起學,到底哪一個比較容易入門?孩子們對什麼學習方式比較容易產生興趣?這個問題一直以來都深藏在開發者腦袋深處啊!Ozobot 機器人幾乎找到一個突破,尋得一條光明之路,可輕易讓絲毫沒有電腦概念甚至不懂文字的小孩,能夠無負擔地踏上編程之路。

Ozobot 機器人其"體內編程"所採用的語言就像是Scratch的拖拉積木式的程式語言,它叫做OzoBlockly,可以設定它幾秒鐘就左轉、走多遠、轉幾度,讀到什麼顏色就做什麼事情,也有迴圈、函數和變數、數學運算等功能,具有非常完整的程式控制語言,編程者可以通過簡單地拖動不同的積木式語句模組,組成各種命令讓 Ozobot "自走車"執行動作,非常簡單易懂易學。

Ozoblockly 就如同大多數的程式學習平台,然而其積木式程式的邏輯方塊總是最直觀且最親民的!而Ozoblockly最特別的還有一點,多了對於用戶(也就是程序員)的分級制度!從第一級到第四級(目前第五級保留),除開如左圖所示第一級積木只有圖像沒有文字之外,其他積木都有文字輔助識別的,其文字具有直接的邏輯運算(後續會介紹)意義,而每上升一個等級都又開放了更多元趨複雜的程式積木。也就是說,如果孩子只有五六歲並不識字,也可以在沒有負擔條件下盡情抒發想像力撰寫程式(代碼)呀!他可以從第一級開始練習編程,因為第一級的積木選項少,簡單直觀明瞭易懂,也沒有語言上的阻礙,單純的使用數字、圖像、顏色和光線排列組合,在進入門檻那麼低之下,手上那台小小的 Ozobot 機器人就擁有無限大大的可能了!

  • 第一個項目:OzoBlockly初步了解
    1. 介紹OzoBlockly積木式語言雲端編程作業整體布局:

    2. 進入OzoBlockly官方網頁後,會看到如左圖所示線上版的編程畫面,其操作介面分五大區塊:①積木箱與指令區、②積木程式區、③輔助台區、④存取區、⑤光傳輸區。操作介面畫面的最左方是①積木箱與指令區,這裡提供了四大類(目前保留第五類)共近百個積木讓你使用。在畫面中央是②積木程式區,在這裡僅將指令區所需積木拖曳到此區存放,並經拼接組合各式積木以達到設計邏輯所要的功能。畫面的右方是③輔助台區,在這裡能找到一些範例、說明資料與操作介面的語言設定。畫面下右側的灰色圖示是④存取區,選用此區左起第二個磁碟片圖示能將雲端所有用到的程式積木儲存到本地電腦,以便下回能用此區最左邊資料夾圖示將本地程式積檔上傳到雲端繼續編程;如要移除程式積木,可以把積木拉進①指令區或是此區最右邊的垃圾筒;如要重做上一次動作,只需點擊此區右旋轉圖示;反之如要撤消上一次動作,只需點擊此區左旋轉圖示;如要複製積木程式區積木,只要先點擊該積木,再點擊此區右起第二個双文件圖示即可。畫面下左側原有個"FLASHING"標籤,點擊之後,會看到如左圖下方所示的⑤光傳輸區畫面,先將Ozobot底座貼於光傳輸區白色區域,按下該區的"Load"按鈕就能將積程式經編譯載入到Ozobot裡。
    3. 介紹 OzoBlockly 積木式語言形象特徵:
      如以形象外觀特徵來看,則 OzoBlockly 可分為狀若嘴巴的容器式與形如蛋捲的橫條式兩類積木,橫條式積木語言只能是單一橫條以垂直方向拼接堆疊而成,至於容器式積木語言則是肚裡能撐船,能彈性容納各種積木(也就是不區分容器式或橫條式)。
    4. 介紹 OzoBlockly積木式語言操作特徵:
      運用拖拉(Drag & Drop)操作方式,從工具箱裡的OzoBlockly積木取出後方到編輯區,再依原設計所設想的邏輯和其他積木拼接起來,就能將整個邏輯串連運作起來。
    5. 介紹積木式語言邏輯運算特徵:

    6. OzoBlockly,可以設定它幾秒鐘就左轉、走多遠、轉幾度,讀到什麼顏色就做什麼事情,也有迴圈、函數和變數、數學運算等功能,具有非常完整的程式控制語言,編程者可以通過簡單地拖動不同的積木式語句模組,
      結構化程式設計由Dijkstra (1969)提出:
      1. 消除程式因goto指令而造成如麵條穿插式雜亂無章狀態。
      2. 強調任何程式邏輯均可由三種結構組成。如左圖所示。
         (1)循序(Sequential):簡單命令式的指令如 COMPUTE, READ, WRITE 與代數指令如X=Y+Z。
         (2)選擇(Selection):需做決策時,用 IF-THEN-ELSE 指令與 CASE 指令。
         (3)重複(Repetition):當需反覆時,用 DO-WHILE 與 DO-UNTIL 指令。

    7. 介紹 OzoBlockly 積木式語言進入口特徵:
      文字式電腦語言,,然而 OzoBlockly 並沒有提供設定程式從哪開始執行的積木,
    8. 介紹於 OzoBlockly 電腦螢幕校正 Ozobot 的方法:
    9. Ozobot 於 OzoBlockly 電腦螢幕校正法介紹影片


         智慧設備電子螢幕校正方法:
      1. 打開電腦螢幕最高亮度。
      2. 要先點擊該編程畫面下左側原有個"FLASHING"標籤,點擊之後,會看到前面介紹過的⑤光傳輸區畫面,
        注意其中有個白底的大圓塊。
      3. 一直按住機器人開關鈕直到信號燈變成白色(約二秒)後鬆開手按鈕,這時白色信號燈開始閃動。
      4. 將閃動的機器人貼放在光傳輸區的大白圓塊中心。
      5. 當 Ozobot 閃動綠色信號燈時意味著校準成功,如果 Ozobot 開始閃動紅色,則意味著需要再次校準。
      6. 注意:每次使用前或由實體平面轉到電子平面時都需要對Ozobot進行校準。
    10. 介紹 OzoBlockly積木式語言編程過程特徵:

    11. 使用blockly的時候,使用者可以通過拖曳模組,來構建代碼邏輯,過程很像搭積木 在使用者視角下,blockly是一個簡單易用的視覺化工具,用來生成代碼。在開發者視角下,blockly是一個文字方塊,裡邊包含了用戶輸入好的代碼。 代碼生成到文字方塊的過程,就是用戶在blockly裡拖曳的過程。
    12. 介紹如何將 OzoBlockly 積木式語言傳輸到 Ozobot 過程:

    13. ,先將Ozobot底座貼於光傳輸區白色區域,按下該區的"Load"按鈕就能將積程式經編譯載入到Ozobot裡。
    14. 介紹 OzoBlockly 雲端編程過程:
    15. 進入北京小芽科技有關Ozobot在Ozoblockly上程式設計的中文講解教程視頻
    16. OzoBlockly雲端編程過程練習:
    17. 分容積式與橫條式兩類,


  • 第二個項目:OzoBlockly初級雲端編程
  • 題目引自官方資源 http://games.ozoblockly.com/shapetracer-basic,但他沒有提供說明與答案,需要靠自己摸索。
    1. 初級習作一:
    2. 題目:認識Ozobot每走一步約1公分,且移動指令正是以""(step)為單位來計算行走距離而下圖每格都是1公分,請依下圖場景進行OzoBlockly編程

      參考答案:[set light color <G>]§[→ move <forward> distance <10 steps> speed <slow>]
    3. 初級習作二:
    4. 題目:認識當Ozobot當自走車轉彎時,需要賦予旋轉(rotate)指令,再附加左右指引即可,請依下圖場景進行OzoBlockly編程

      參考答案:
      [set light color <R>]§[→ move <forward> distance <5 steps> speed <slow>]§[◎ rotate <right>]
                                     §[→ move <forward> distance <5 steps> speed <slow>]§[◎ rotate <left>]
                                     §[→ move <forward> distance <5 steps> speed <slow>]
    5. 初級習作三:
    6. 題目:認識當Ozobot當自走車行進時,是可以切換燈號顏色的,請依下圖場景進行OzoBlockly編程。

      參考答案:
      [set light color <BE>]§[→ move <forward> distance <5 steps> speed <slow>]§[◎ rotate <right>]
                                       §[→ move <forward> distance <3 steps> speed <slow>]§[set light color <R>]
                                       §[→ move <forward> distance <7 steps> speed <slow>]§[◎ rotate <right>]
                                       §[→ move <forward> distance <5 steps> speed <slow>]
    7. 初級習作四:
    8. 題目:將前述所學OzoBlockly 積木式指令進行綜合演練,請依下圖場景進行OzoBlockly編程。

      參考答案:
          [set light color <G>]§[→ move <forward> distance <6 steps> speed <slow>]§[◎ rotate <right>]
        §[set light color <R>]§[→ move <forward> distance <6 steps> speed <slow>]§[◎ rotate <left>]
      §[set light color <BE>]§[→ move <forward> distance <6 steps> speed <slow>]
    9. 初級習作五:
    10. 題目:認識當Ozobot當自走車行進間要掉頭時,需要賦予旋轉(rotate)指令,並附加回頭指引即可,請依下圖場景進行OzoBlockly編程。

      參考答案:
          [set light color <R>]§[→ move <forward> distance <4 steps> speed <slow>]§[◎ rotate <u-turn left>]
                                         §[→ move <forward> distance <8 steps> speed <slow>]§[◎ rotate <u-turn right>]
      §[set light color <BE>]§[→ move <forward> distance <4 steps> speed <slow>]§[◎ rotate <left>]
                                         §[→ move <forward> distance <4 steps> speed <slow>]§[◎ rotate <u-turn right>]
                                         §[→ move <forward> distance <8 steps> speed <slow>]
    11. 初級習作六:
    12. 題目:將前述所學OzoBlockly 積木式指令進行綜合演練,請依下圖場景進行OzoBlockly編程。

      參考答案:
      [set light color <G>]§[→ move <forward> distance <4 steps> speed <slow>]§[◎ rotate <left>]
                                     §[→ move <forward> distance <4 steps> speed <slow>]§[◎ rotate <left>]
                                     §[→ move <forward> distance <8 steps> speed <slow>]§[◎ rotate <left>]
                                     §[→ move <forward> distance <4 steps> speed <slow>]§[◎ rotate <left>]
                                     §[→ move <forward> distance <4 steps> speed <slow>]§[set light color <R>]
    13. 初級習作七:
    14. 題目:將前述所學OzoBlockly 積木式指令進行綜合演練,請依下圖場景進行OzoBlockly編程。

      參考答案:
         [set light color <R>]§[→ move <forward> distance <5 steps> speed <slow>]
       §[set light color <Y>]§[→ move <forward> distance <3 steps> speed <slow>]
             §[◎ rotate <left>]§[→ move <forward> distance <3 steps> speed <slow>]
      §[set light color <G>]§[→ move <forward> distance <3 steps> speed <slow>]
             §[◎ rotate <left>]§[→ move <forward> distance <3 steps> speed <slow>]
      §[set light color <R>]§[→ move <forward> distance <3 steps> speed <slow>]
             §[◎ rotate <left>]§[→ move <forward> distance <3 steps> speed <slow>]
    15. 初級習作八:
    16. 題目:認識當Ozobot當自走車行進間要斜角轉彎時,需要賦予旋轉(rotate)指令,並附加微調指引即可,請依下圖場景進行OzoBlockly編程。

      參考答案:
      [set light color <R>]§[◎ rotate <slight right>]§[→ move <forward> distance <5 steps> speed <slow>]
        §[◎ rotate <right>]§[→ move <forward> distance <5 steps> speed <slow>]§[set light color <BE>]
                                     §[→ move <forward> distance <5 steps> speed <slow>]§[◎ rotate <left>]
                                     §[→ move <forward> distance <5 steps> speed <slow>]§[◎ rotate <left>]
                                     §[→ move <forward> distance <5 steps> speed <slow>]§[◎ rotate <left>]
                                     §[→ move <forward> distance <5 steps> speed <slow>]§[set light color <R>]
                                     §[→ move <forward> distance <5 steps> speed <slow>]§[◎ rotate <right>]
                                     §[→ move <forward> distance <5 steps> speed <slow>]
    17. 初級習作九:
    18. 題目:將前述所學 OzoBlockly 積木式指令進行綜合演練 ,請依下圖場景進行OzoBlockly編程。

      參考答案:
        [set light color <Y>]§[◎ rotate <slight left>]§[→ move <forward> distance <6 steps> speed <slow>]
      §[set light color <R>]§[◎ rotate <slight left>]§[→ move <forward> distance <8 steps> speed <slow>]§[set light color <Y>]
             §[◎ rotate <left>]§[◎ rotate <slight left>]§[◎ rotate <slight left>]§[→ move <forward> distance <6 steps> speed <slow>]
      §[set light color <R>]§[◎ rotate <slight left>]§[→ move <forward> distance <8 steps> speed <slow>]
    19. 初級習作十:
    20. 題目:將前述所學 OzoBlockly 積木式指令進行綜合演練,請依下圖場景進行OzoBlockly編程。

      參考答案:
        [set light color <G>]§[◎ rotate <slight right>]§[→ move <forward> distance <5 steps> speed <slow>]
      §[set light color <R>]§[◎ rotate <right>]§[→ move <forward> distance <5 steps> speed <slow>]
                                       §[◎ rotate <slight left>]§[→ move <forward> distance <5 steps> speed <slow>]
               §[◎ rotate <left]§[◎ rotate <slight left>]§[→ move <forward> distance <5 steps> speed <slow>]
      §[set light color <G>]§[◎ rotate <slight left>]§[→ move <forward> distance <5 steps> speed <slow>]


  • 第三個項目:OzoBlockly中級雲端編程
    1. 中級習作一:
    2. 題目:令 Ozobot 自走車行走四邊形。
      基礎指令:迴圈式重複指令(repeat)
      教師手冊:四邊形每一邊都一樣(不變),相同走法跑四回,只有方向一開始需要改變 / 掌握不變與變異的綜合技能。
      參考答案:[repeat <4> times·do]{ [→ move <forward> distance <4 steps> speed <medium>]§[◎ rotate <right>]§[!wait <3> second(s)] }
    3. 中級習作二:
    4. 中級習作三:
    5. 中級習作四:
    6. 中級習作五:
    7. 中級習作六:
    8. 中級習作七:
    9. 中級習作八:
    10. 中級習作九:
    11. 中級習作十:
  • 第四個項目:OzoBlockly高級雲端編程
  • 題目引自官方資源 http://games.ozoblockly.com/shapetracer-advanced,但他沒有提供>說明與答案,需要靠自己摸索。
    1. 高級習作一:
    2. 題目:
      參考答案:
    3. 高級習作二:
    4. 高級習作三:
    5. 高級習作四:
    6. 高級習作五:
    7. 高級習作六:
    8. 高級習作七:
    9. 高級習作八:
    10. 高級習作九:
    11. 高級習作十: