1 of 85

Web:Bit 教育版

是什麼？

2 of 85

2

3 of 85

http://gg.gg/190718

4 of 85

講師是誰？�( 余斗木貢青年 )

5 of 85

5

簡介

張宗彥 ( 張小彥、oxxo.studio )

​

現任：�Webduino 設計總監 / 網路行銷 / 教材編輯 / 創意實作

​

待過：�中冠資訊 / 鴻海 / 中研院

�畢業：�國立臺灣藝術大學多媒體動畫研究所 / 中央大學物理系

�專長：�胡思亂想 / 視覺設計 / 網頁前端 / 網路行銷 / 攝影 / 插畫

OXXO.STUDIO 部落格作者

​

6 of 85

6

MOPCON 2017 講者

https://mopcon.org/2017/speakerDetail.php?speaker=27

7 of 85

7

Blog

https://www.oxxostudio.tw/

8 of 85

8

著作

9 of 85

認識 Webduino

10 of 85

10

關於 Webduino

WEB 技術

雲端服務

物聯網、APP 開發、資訊教育

網頁前後端、原型設計、程式學習

11 of 85

11

Webduino 的特色

協助快速開發數據視覺化、串接所有 Web-based 服務，充滿無限可能。

圖形化操作介面，拖拉程式積木即可學程式

只要會操作網頁，不需安裝任何軟體，即可體驗服務

線上編輯工具

Wifi 控制

充滿應用彈性

LED ON

輕鬆學程式

圖形化操作介面，拖拉程式積木即可學程式

跨平台運行

不論 PC, Android, iOS,皆可以運行

12 of 85

12

Webduino 概念與架構

一對一、多對一、一對多

13 of 85

13

Web:Bit 是什麼？

只要使用過一次

就會瘋狂愛上程式學習的軟體+硬體

14 of 85

14

Web:Bit 適合誰

15 of 85

Web:Bit 教育版

開發板

16 of 85

16

Web:Bit 元件模組

17 of 85

17

Web:Bit 實體開發板 vs 虛擬開發板

優勢：具備完整功能、實際應用開發

劣勢：需要花錢購買，硬體損壞

虛擬開發板

實體開發板

優勢：軟體內建、免費體驗、毋須擔心硬體損壞。

劣勢：無法完全模擬實際狀況 ( 例如體感 )

18 of 85

Web:Bit 教育版

編輯器

19 of 85

19

獨具匠心的操作介面，大朋友、小朋友都能開心體驗。

20 of 85

20

兩種版本的編輯工具，適合各式各樣的操作情境

優勢：支援 USB 連線、支援 USB 更新和設定、基本功能可離線運作。

劣勢：不支援網址分享檔案、需要下載安裝。

瀏覽器版 ( https://webbit.webduino.io )

安裝版 ( 下載安裝 )

優勢：免安裝，打開瀏覽器就能用，支援網址分享檔案。

劣勢：不支援 USB 連線、不支援 USB 更新和設定、需網路連線。

21 of 85

21

豐富多采的程式積木，大幅降低學習門檻

22 of 85

22

日益豐富的擴充功能，賦予卓越超群的開發能力。

23 of 85

23

四五十個由淺入深的教學範例，快速體驗 Web:bit 的奧妙。

24 of 85

24

所有用法均有詳細教學，完全無基礎也可以輕鬆上手。

https://tutorials.webduino.io/zh-tw/docs/webbit/index.html

25 of 85

Web:Bit

小怪獸篇

26 of 85

26

講話

27 of 85

27

展示圖片

28 of 85

28

改變情緒

29 of 85

29

點擊小怪獸

30 of 85

30

點擊小怪獸發出各種音效

31 of 85

練習時間

  1. 點擊怪獸時，其他怪獸不說話
  2. 點擊怪獸改變表情

32 of 85

32

改變尺寸大小

33 of 85

33

改變位置

34 of 85

34

旋轉角度

35 of 85

35

鍵盤互動：使用鍵盤控制小怪獸移動

36 of 85

36

搭配「迴圈」應用：自動旋轉

37 of 85

37

搭配「雙重迴圈」應用：上下移動

38 of 85

38

迴圈有沒有「背景執行」的差別

39 of 85

練習時間

小怪獸一邊移動，一邊改變情緒

40 of 85

40

滑鼠互動：小怪獸追著滑鼠跑

41 of 85

41

舞台互動：撞到舞台邊緣就反彈

42 of 85

42

小怪獸手錶

43 of 85

43

小怪獸手錶 ( 搭配數學式控制旋轉角度 )

44 of 85

44

小怪獸鬧鐘 ( 搭配邏輯判斷 )

45 of 85

練習時間

觸發小怪獸鬧鐘五秒後，時鐘繼續運作

46 of 85

46

輸入文字，讓小怪獸講話

47 of 85

47

輸入文字，讓小怪獸講話，並進行語音朗讀

48 of 85

48

連續輸入，使用「變數」獲取輸入的文字

49 of 85

49

輸入文字，進行數字加總

50 of 85

練習時間

試做一個和小怪獸互相問答的情境

51 of 85

範例延伸 1

九九乘法表測驗

( 使用九九乘法表範例 )

52 of 85

範例延伸 2

Google 試算表英文單字測驗

( 下載範例 )

53 of 85

範例延伸 3

小怪獸聊天室

( 下載範例 )

54 of 85

Web:Bit

開發板篇

55 of 85

55

三種操控方式，各有所長

虛擬開發板

真實開發板

56 of 85

56

設定矩陣 LED 亮燈顏色

57 of 85

57

矩陣 LED 繪製圖案

58 of 85

58

矩陣 LED 繪製心跳動畫

59 of 85

59

顯示單一字母或單一數字

60 of 85

60

跑馬燈顯示一串英文字或數字

61 of 85

61

跑馬燈連續顯示

62 of 85

62

點擊小怪獸，改變矩陣 LED 圖案

63 of 85

練習時間

1. 點擊小怪獸控制燈號迴圈

霧裡看花的提示

64 of 85

練習時間

2. 輸入英文字，由跑馬燈顯示

65 of 85

65

進階燈號控制：使用迴圈燈號

66 of 85

66

進階燈號控制：指定 x 和 y 座標

67 of 85

67

進階燈號控制：使用迴圈控制 x 和 y 座標燈號

68 of 85

68

進階燈號控制：使用雙重迴圈顯示燈號

69 of 85

練習時間

  1. 將燈號動畫變成垂直顯示

70 of 85

練習時間

2. 燈號繞著四周圍移動

71 of 85

範例延伸 1

反彈球

( 使用反彈球範例 )

72 of 85

範例延伸 2

嚇到吃球球

( 使用鍵盤操控範例，修改成控制 紅色燈 去吃 綠色燈 )

73 of 85

73

按鈕開關操作：控制小怪獸

74 of 85

74

按鈕開關操作：控制小怪獸移動位置

75 of 85

75

按鈕開關操作：控制小怪獸說話

76 of 85

76

按鈕開關操作：控制燈光圖案 ( 剪刀石頭布 )

77 of 85

77

按鈕開關操作：簡單的數字加總競賽

78 of 85

78

按鈕開關操作：改變講話的怪獸

79 of 85

練習時間

按鈕開關控制小怪獸行為

80 of 85

範例延伸

大家一起變顏色

( 下載範例 )

81 of 85

81

蜂鳴器：自訂音樂

82 of 85

82

蜂鳴器：使用迴圈重複播放

83 of 85

83

蜂鳴器：鍵盤鋼琴

84 of 85

84

蜂鳴器：使用按鈕開關控制播放

85 of 85

練習時間

點擊不同的小怪獸，播放不同音樂