台大CS+X教育，分享講座

1. 一場與程式設計的邂逅

2. 簡報連結
goo.gl/aDLuxF

3. whoami
建宇 ( Nick )
• 大學前不知道程式設計是可以吃的食物
• 熱愛教育與分享
• Scratcher
• 台科大機械三
• 橘子蘋果程設計學苑講師
• 曾任台科大程式設計社教學長
• 曾任北市光復國小程式社團老師

4. 這次分享你可以聽到
• 初了程式設計世界的面貌
• 在生活上多個應用程式的實作邏輯
• 在兒童程式教育現場的一些心得及趣事
• 關於使用 Scratch 的一些使用技巧

5. 分享大綱
• 介紹 (程式邏輯複習及分享方式說明)
• 專案實作 - 發票小幫手
• 專案實作 - 台灣公車通
• 專案實作 – 線上抽獎機
• 專案實作 – 門禁、報到系統
• 演算法體驗活動
• 總結

6. 為什麼學程式語言
跟電腦溝通

7. 為什麼使用Scratch
因為貓咪很可愛w

8. 猜數字遊戲在 JavaScript 與 Scratch 的比較
JS版本：https://jsbin.com/puwoqa/edit?js,output scratch版本：https://scratch.mit.edu/projects/75594930/

9. 彈性之實用功能
低階程式語言 高階程式語言 scratch

10. 彈性之教學功能
程式語言 Scratch

11. 課程方式說明
• 課程簡報：
• https://goo.gl/aDLuxF
• 實作專案分級
• 80 – 20 教學理論
• 80 中的 80 – 20 教學理論
• 別浪費你可以學習的時間
• 完全無接觸過的同學請點以下：
• 帳號申請及基本操作：https://goo.gl/czZUHZ

12. 程式邏輯複習
如何讓學生們懂你在講甚麼

13. 程式語言 ≠真理
如何讓學生們懂你在講甚麼

14. 序列
就…按照順序執行呀

15. • 生活上的序列
序列
拿新衣服
進入浴室
脫掉髒衣服 洗頭洗澡
擦乾身體
穿上新衣服 將髒衣服丟到洗衣籃
開心出浴室

16. 序列
拿新衣服
進入浴室
脫掉髒衣服 穿上新衣服
洗頭洗澡
擦乾身體 將髒衣服丟到洗衣籃
開心出浴室
• 生活上亂掉的的序列

17. 序列 Scratch範例
https://scratch.mit.edu/projects/157469849/#fullscreen

18. 變數
就…有一個欄位對應一個資料阿

19. 變數
• 生活上的變數 ( 腦中名稱與資料的對應 )
• 這次演講的名字 => 與程式設計….
• 今天午餐花的錢 => 70
• 最熟悉的程式語言 => scratch

20. 變數 Scratch範例
https://scratch.mit.edu/projects/157472219/#editor

21. 迴圈
就…重複的做某件事情呀

22. 迴圈
• 生活上的迴圈 ( 紅綠燈 )
紅
綠
黃

23. 迴圈趣味範例
來源參考：https://www.facebook.com/itisLOOKER/videos/1823922214525308/?pnref=story

24. Scratch中 迴圈的大分類
https://scratch.mit.edu/projects/157393478/#fullscreen
https://scratch.mit.edu/projects/157396259/#fullscreen

25. 判斷
依照條件看要不要做某件事

26. 判斷 Scratch範例
• 生活上的迴圈 ( 自動販賣機 )
• 如果 投入的金額 大於 可樂價格
• 就 …
• 否則
• 就 …

27. 判斷 Scratch範例
https://scratch.mit.edu/projects/157472219/#editor

28. 發票對獎機
範例APP : 發票小幫手

29. 發票對獎
中獎號碼查詢：http://invoice.etax.nat.gov.tw/
發票中獎期望值＝1.128元
發票中獎期望值＝ 3 元

30. 發票小幫手

31. Scratch 發票對獎機

32. Scratch 發票對獎機
• 專案連結：
• https://scratch.mit.edu/studios/3970013/
• 實作解說( 了解邏輯並完成功能 )
• 第一：
• 對獎 ( 比對末三碼是否符合 )
• 第二：
• 安慰說詞 ( 在正確時間說「你沒中獎」)

33. Scratch 發票對獎機(挑戰)
• 實作解說
• 讓叩汀繼續判斷到底是中了幾獎呢

34. Scratch 中 數學領域教學分享
• 紅球大作戰
• 速度與重力的模擬
• 小六生
專案連結：https://scratch.mit.edu/projects/156964972/

35. Scratch 中 數學領域教學分享
• Diep.io
• 三角函數的使用
• 小四生
專案連結：https://scratch.mit.edu/projects/134260275

36. Scratch 中 數學領域教學分享
• google萬聖節遊戲改作
• 幾何、電腦視覺
• 未知的數學?
• 國二生
專案連結：https://scratch.mit.edu/projects/131758506/

37. 公車動態查詢系統
APP範例：台灣公車通

38. 台灣公車通

39. 運作原理
過去
APP 介面
現在

40. 公車動態查詢系統
• 新北、台北公車查詢系統：http://pda.5284.com.tw/MQS/businfo1.jsp

41. 台灣公車通實作
• 開啟 Excel

42. 台灣公車通實作
• 台北208公車查詢：http://pda.5284.com.tw/MQS/businfo2.jsp?routeId=208
1.點選資料
2.從Web
3.貼上查詢網址

43. 進入爬蟲選取頁面
1.勾選需要的資料(整個頁面)
2. 確定後送出

44. 設定更新間隔時間
設定參數
更新時間 最低 1 分鐘

45. 設定儲存位置
執行爬蟲
爬蟲成功

46. 設定儲存位置
或等待一分鐘自動更新
可以點擊 「重新整理」
更新公車動態

47. 網址中的秘密
208公車查詢
http://pda.5284.com.tw/MQS/businfo2.jsp?routename=208
311公車查詢
http://pda.5284.com.tw/MQS/businfo2.jsp?routename=311

48. 台灣公車通實作 ( 加強 )
• 開啟新的Excel視窗

49. 台灣公車通實作 ( 加強 )
• 編輯簡易介面

50. 台灣公車通實作 ( 加強 )
• 台北208公車查詢：
http://pda.5284.com.tw/MQS/businfo2.jsp?routeId=208
1.點選資料
2.從Web
3.貼上查詢網址

51. 更改查詢網址
http://pda.5284.com.tw/MQS/businfo2.jsp?routeId=["busRoute"]
1. 將網址後的路線號碼改成 ["busRoute"]
2. 送出查詢

52. 選擇對應儲存格

53. 設定更新間隔時間
設定參數 每分鐘更新
開啟時自動更新

54. 設定公車路線參數
選取對應的路線位置

55. 調整參數更新動作

56. 公車動態查詢介面
更改路線會自動更新查詢

57. 公車動態查詢介面 ( 挑戰 )
切換按鈕

58. 公車動態查詢介面 ( 挑戰 )
檔案 => 選項 => 自訂功能區 => 開發人員 打勾

59. 確認有開發人員工具列

60. 插入按鈕
在工作表中拖拉出一個按鈕

61. 設定巨集

62. 設定巨集

63. 設定巨集
然後點選左上的停止錄製
按下確定後做一次將公車路
線儲存格改為 311 的動作
( 修改 + 按下Enter)

64. 設定巨集
按右鍵 編輯文字
編輯好文字後直接點選工作表
就可儲存，不用按下Enter鍵

65. 測試按鈕

66. 存檔格式
格式：Excel 取用巨集的活頁簿

67. 台灣公車通
• 台北市、新北市公車：
• http://pda.5284.com.tw/MQS/businfo1.jsp
• 桃園公車：
• http://ebus.tycg.gov.tw/Taoyuan/PDA/busroute.aspx?lang=Cht
• 台中市公車：
• http://citybus.taichung.gov.tw/ibus/pda/aspx/businfomation/choiceRoad.aspx?lang=CHT
• 台南市公車( 無直接開放資料)：
• http://tourguide.tainan.gov.tw/newtnbusweb/RouteSearch.aspx
• 範例( 藍幹線資料 )：
http://tourguide.tainan.gov.tw/NewTNBusAPI/API/GoAndBackWithTime.ashx?id=1200&go
back=0
• 高雄市公車：
• http://ibus.tbkc.gov.tw/KSBUSN/pda/busroute.aspx?lang=Cht

68. Scratch 清單學習
清單、變數傻傻分不清楚

69. Scratch清單積木
動作模仿：
• 更改資料
• 刪除資料
• 新增資料
https://scratch.mit.edu/projects/157486357/#editor

70. Scratch清單積木
用程式在試一次看看
• 更改資料
• 刪除資料
• 新增資料
https://scratch.mit.edu/projects/157486357/#editor

71. Scratch清單積木
變數、清單比一比

72. Scratch清單積木
清單綜合練習：
• 將右方程式改成迴圈執行
https://scratch.mit.edu/projects/157492334/#editor

73. Scratch 清單 遊戲範例
清單遊戲：
• 貪食蛇：
• https://scratch.mit.edu/projects/89246796/
• 跳舞機：
• https://scratch.mit.edu/projects/136908501/

74. 線上抽獎機
Scratch清單範例

75. 網路社群抽獎行銷
【hi8丸五月份粉絲好康來囉】
• 只要你完成以下兩個步驟，就有機會獲得總額價值超過1000萬元
的獎品，獎品最大獎包含太空獨享來回艙票乙份，價值990萬元。
• 符合條件
• 將這篇文設定分享( 別忘記設公開哦 )
• 在此篇文下方TAG你三位有興趣的朋友
你知道嗎，其實以公開分享貼文或TAG好友來換取抽獎資格是違反官方規定的
https://www.facebook.com/page_guidelines.php E.3

76. 實體抽獎 v.s. 線上抽獎
http://sample.diary.tw/lucky-draw/

77. 活動線上抽獎範例
https://www.facebook.com/abrandnewway2017/videos/279364072502511/

78. 線上抽獎機 實作

79. 線上抽獎機 實作
實作內容：
• 內容新增：
• 新增獎項功能
• 清單初始化
• 抽獎功能：
• 抽出號碼
• 抽獎機適當的更新
實作專案： https://scratch.mit.edu/studios/3975036/

80. 線上抽獎機 實作
實作內容：
• 內容新增：
• 新增獎項功能
• 清單初始化 (舞台)
實作專案： https://scratch.mit.edu/studios/3975036/

81. 線上抽獎機 實作
實作內容：
• 抽獎功能：
• 抽出號碼
• 抽獎結果呈現
• 檢查是否會有重複獲獎的可能?
實作專案： https://scratch.mit.edu/studios/3975036/

82. 線上抽獎機 實作 (挑戰)
實作內容：省去對照得獎者資訊
• 抽獎名單匯入
• csv檔案格式讀取

83. 線上抽獎機 實作 (挑戰)
創建csv檔案
橫向排列抽獎名單、新增一格並填上一個空白(方便撰寫程式)

84. 線上抽獎機 實作 (挑戰)
檔案 => 另存 => csv格式

85. 讀取csv檔案資訊
以記事本開啟 csv 檔案，csv檔案格式為以逗號將資料間隔開的

86. 線上抽獎機 實作 (挑戰)
抽獎名單匯入程式，建議等實作完再來看看是如何運作的( 較繁複 )

87. 線上抽獎機 實作 (挑戰)
使用 csv 匯入抽獎資訊
輸入功能關鍵字 csv 複製記事本上的csv資訊

88. 線上抽獎機 實作 (挑戰)
完成匯入

89. 剛剛影片中第一個被抽出的人是誰?
你能確定這是第一個被抽出來的嗎?
你是如何推斷的?
探討 – 抽獎的公平性

90. 門禁、報到系統
Scratch清單範例

91. 介紹 - KKTIX
https://ntust-coding-club.kktix.cc/events/7a87634f
現場報到
https://ntust.me/b2gaj

92. 介紹 – 簽到系統
簽到資料：https://ntust.me/c7scq
測試頁面：https://nick0603.github.io/GoogleSheet_CheckIn/index.html

93. 介紹 – 門禁系統

94. 讀卡機動作說明
動作：
• 將卡號一一打出( 記得切換成英打 ) + 按下Enter

95. 報到系統 實作

96. 報到系統 實作
scratch專案連結：https://scratch.mit.edu/studios/3977520/
• 實作項目( 完成簽到功能 )

97. 報到系統 實作 (挑戰1)
實作項目( 是否重複簽到 )

98. 報到系統 實作 (挑戰2)
實作項目( 新增簽到時間 )

99. 演算法體驗
不插電資訊教育 – 海戰棋

100. 海戰棋遊戲說明
• 兩人一組，你們各會拿到一張紙A或B，不要給對方看到你的內容
• 玩法說明：
• 圈起自己紙上上半部其中一艘戰艦，然後告訴你的同伴你圈的數字
• 輪流猜測對方的戰艦在哪
• 猜測的方式是猜的人念出代表位置的字母，而同伴則告訴你猜的那個船在
那張紙上的數字是幾號。
• 你花了幾次猜測到同伴的船在哪裡?這就是你在這場遊戲中的分數

101. 海戰棋 第一局
• 艦隊的號碼是以 升冪 排序。

102. 海戰棋 最後一局
• 艦隊的號碼是以 雜湊 排序
• 此 海戰棋 中的 雜湊法 以以下方法
• e.g.
• 艦隊號碼為 666
• ( 6 + 6 + 6 ) 取除 10 的餘數為 8
• 666 戰艦被分類到第 八 艦隊
• 艦隊號碼為 520
• ( 5 + 2 + 0 ) 取除 10 的餘數為 7
• 520 戰艦被分類到第 七 艦隊

103. 搜尋演算法 – 二元搜尋法
• 大老二手牌整理 => 按大小排序 => 幫助收尋

104. 搜尋演算法 – 雜湊法
• 接龍手牌整理 => 按花色排序 => 幫助收尋

105. 1A2B
• 遊戲說明：https://zh.wikipedia.org/zh-tw/%E7%8C%9C%E6%95%B0%E5%AD%97
https://scratch.mit.edu/projects/2665310/#fullscreen http://oddest.nc.hcc.edu.tw/math231.htm

106. 1A2B 電腦破解策略
• 窮舉法：將所有可能全部執行一次 0123->0124->0125->0126
• 推理法、收尋法(窮舉延伸)：
• crushBullsCows 或 avgBullsCows
推理法： http://slovesnov.users.sourceforge.net/index.php?bullscows_play,english
演算法樹狀圖：http://slovesnov.users.sourceforge.net/index.php?bullscows_tree,english,crushBullsCows

107. 額外分享
• 炸彈問題：推理法製做的AI
• https://scratch.mit.edu/projects/124893071/
• 遊戲玩法：
• 有一倒數計時的炸彈將爆炸
• 你和你的敵人為了 … 賭氣
• 隨機由任何人開始
要拿輪流拿 1 ~ 3 秒的時間

108. 額外分享 - AlphaGo
報導連結：https://www.inside.com.tw/2017/04/14/how-alphago-inspire-human-in-go

109. 總結
還有回家練習哦w

110. 回家練習 - 1A2B
• 實作項目：教貓咪如何判斷幾A幾B，填入變數即可
• Scratch專案：https://scratch.mit.edu/projects/157430311/
• Scratch上傳區：https://scratch.mit.edu/studios/3977706/

111. 橘子蘋果 暑期營隊助教徵選
橘子蘋果：https://orangeapple.co
徵選表單：http://bit.ly/橘子蘋果營隊助教

112. Q&A
要結束了OAO