偷插電的資訊科學資訊理論單元的 Scratch 3 程式

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

教學部分請參考偷插電的資訊科學資訊理論單元

此單元有兩個程式:
1. 猜數字遊戲(此為筆者所製作)



2. 珠璣妙算(MasterMind) 此專案是由 8-bit-orange 所分享的,原專案網址為 https://scratch.mit.edu/projects/31361740/,筆者只是加上中文操作說明。
操作說明:

  • 點擊上方正方形改變顏色。
  • 按下空白鍵檢查答案是否正確。
  • 出現紅色圓形表示猜錯,綠色圓形表示猜對。
  • 下方畫面的數字表示猜了幾次。
  • 看看自己能在幾次內猜中。

建立聊天機器人:以Wit.ai為例(Building a Chatbot with Wit.ai)

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

現在有很多的工具可以用來建立簡易的聊天機器人,例如SmoochCompose.aiChattyPeopleOctane AiTelegramBotKitManyChatChatisfyMeokayFlowXOChatfuel等,有這麼多的工具可以用,那要怎麼選擇呢? 25 Chatbot Platforms: A Comparative Table 這篇文章也許可以提供一些想法。OK,本文將以Wit.ai來建立一個簡易的聊天機器人。

首先登入Wit.ai網站,筆者是使用Facebook帳號登入:

輸入帳戶基本資料後,按下Go down the rabbit hole按鈕來同意使用條款:

點選Settings來更改App的語言:

設定好App資訊後,按下 Change App Details 按鈕:

點選Understanding建立例句,這邊需要多建立幾個例句來分辨詢問『天氣』的意圖:

繼續增加例句,下圖中的數字說明:
1. 輸入使用者可能會用的句子。
2. 選擇 intent (為什麼要選擇 intent,請自行查看https://wit.ai/docs)。
3. 選擇『天氣』,此為剛剛造出來的選項。
4. 按下 Validate 按鈕。

重複上面1~4的步驟建立出如下的例句:

接著要使用Wit.ai所提供的API服務,切換到Settings,輸入對話內容後,複製 curl \ ....的文字,或是按下複製按鈕來複製。

接下來的動作需要用到 curl 這隻程式,在Linux上有這個,筆者是在Windows系統上使用git for windows所附的bash功能。回傳的文字編碼方式是Unicode,可以使用這個網址:https://r12a.github.io/apps/conversion/ 來做轉換,於是得到下面的結果。
上圖的藍色箭頭所指的是使用者輸入的文字,剛好在剛剛建立的例句裡,黃色箭頭所指就是Wit.ai回應的訊息【天氣】,此回應的訊息代表使用者有想詢問【天氣】的意圖(intent)。

下一步

讀者可以使用底下幾種方式整合這個聊天機器人到應用程式裡:
1. Node.js client
2. Python client
3. Ruby client
4. HTTP API

恩,Wit.ai的方式似乎還不夠直覺化,筆者會繼續研究其他ChatBot API再來分享。

Otto機器人動作之程式碼分析(Otto Source Code Understanding Part I)

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

本文會將以OTTO_BT.inoOtto函式庫的程式碼,針對跳舞動作的程式碼做說明,例子會以抖右腳(ShakeRightLeg)。

首先要把以C++語言寫好的函式庫(Otto.h)定義改引用進來

這樣子OTTO_BT主程式就會知道有函式庫需要納進來處理,於是Arduino IDE的編譯器(Compiler ==> 先當成翻譯機,會將C/C++語言翻譯成Nano板子看得懂的語言)會知道要對Otto.cpp做翻譯的動作。

接著看看主程式對Otto中對Otto腳位的說明,可以看出程式用了servo這個陣列來儲存nano腳位(依序為腳位2、3、4、5)的清單,此servo陣列型態是Oscillator,Oscillator也是在Otto程式庫中針對伺服馬達做操作的程式庫,此處不談Oscillator的細節(但Oscillator和左右轉與走動有關)。

有了對應表後,還得讓OTTO_BT主程式知道有Otto機器人的程式庫(積木)可以用,這邊透過底下的程式碼可以做到。
Otto Otto;  //This is Otto!
這一行告訴程式,有一個名叫Otto的變數,這邊可先想成有一個機器人在程式裡,要告訴此機器人的腳在哪裡,就是用Otto.init()函式:
Otto.init(PIN_YL,PIN_YR,PIN_RL,PIN_RR,true);
這一行就會設定servo陣列清單(從0開始編號)的順序
清單編號為0為YL的腳位 ==> 也就是 Nano 腳位 2
清單編號為1為YR的腳位 ==> 也就是 Nano 腳位 3
清單編號為2為RL的腳位 ==> 也就是 Nano 腳位 4
清單編號為3為RR的腳位 ==> 也就是 Nano 腳位 5

接著找OTTO_BT主程式中的 shakeLeg 部分:
    case 17: //M 17 500 
      Otto.shakeLeg(1,T,1);
      break;
    case 18: //M 18 500 
      Otto.shakeLeg(1,T,-1);
      break;

這邊是呼叫Otto的shakeLeg函式(積木),那我們看看這函式的程式碼:

在shakeLeg函式中有呼叫到_moveServos()函式,_moveServo()函式內容如下:


從以上的程式碼,筆者整理出要讓Otto抖腳的流程如下:

以此流程,筆者所製作的mBlock積木如下:

國中生的電腦課程設計

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

在思考如何設計國中生的電腦課程中,想起某位友人曾向我提及「虛體加實體」,也就是軟體與硬體兼施,讓學生們能動手DIY,於此我在整理一下我所蒐集到的資料。

軟體部分,有些人可能直接想到用Scratch教程式設計,但用Scratch當起頭真的適合嗎?個人覺得先讓學生玩一些軟體,讓學生了解軟體可以做什麼事之後,再來Scratch會比較好。此外若有例子說明軟體如何解決生活上的問題就更好了。同時請學生們思考自己日常生活中有什麼地方可以改進的(先不考慮需不需要用到軟體來協助),並且記錄下來,開始思索有什麼方法可以解決問題。

硬體部分,可以使用Arduino相關的開發版,例如Uno、Nano並搭配麵包板、杜邦線以及簡易的電子材料(如LED、按鈕、電阻等)。或選擇像是Difi這種整合的開發板。

至於要入門程式語言的話,先以玩遊戲的方式讓學生們有興趣,個人推薦不用登入的正體中文網頁遊戲,例如:
一小時玩程式:http://hocintw.thealliance.org.tw/
Codecombat:https://codecombat.com/
Blocky Games:https://blockly-games.appspot.com/

=========以上是去年的想法=========
筆者今年有不一樣的想法,原因如下(這是雲林縣的情況,其他縣市可能不一樣):

  1. 有些學生從國小三年級就在學校接觸電腦了。
  2. 也有學生上國中後才開始接觸電腦。
  3. 學生家中環境很早讓小孩開始接觸。

這三點整理出一個疑問點:「要有電腦才能學習電腦相關的知識嗎?」

答案是不用!
理由如下:

  1. 在電腦還未普及時,也是有很多人在上電腦科學相關的課程。
  2. 有推廣「不插電的電腦科學」的前輩們。
  3. Code.org有不錯的不插電教材
  4. 開源的程式桌遊
  5. 一堂不需要電腦的程式設計課
所以擔任電腦課程的教師們,也許可以試著使用不插電的教材安排幾堂不用電腦的電腦課。

參考資料
[1] Maker 和 Hacker 該如何選擇開發板呢?
[2] 五個網頁遊戲,讓你進入迷人的程式世界
[3] 玩知名遊戲學寫程式! Code.org 一小時學會寫小遊戲

使用Chrome做JavaScript程式除錯(JavaScript Debugging with Chrome DevTools)

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

Google Chrome 瀏覽器中有 DevTools 的工具可以用來協助開發網頁,官方的說明網頁如下:https://developers.google.com/web/tools/chrome-devtools/。本文將使用官方的加法範例作為說明,開啟範例網頁後,分別在Number 1與Number 2輸入數字,按下Add Number 1 and Number 2按鈕後,會看到錯誤的預期結果:

此時可以開啟DevTools工具:

可以在DevTools加入中斷點,方法如下:




設定好後,按下Add Number 1 and Number 2按鈕,會發現程式停在onClick function的第一行程式碼,可以使用下圖的按鈕來進行除錯。

此時應該會發現程式錯在 updateLabel() function。

原因是因為預期sum會做 Number 1 與 Number 2的數字相加,但卻做字串的合併,解決的方法之一是使用parseInt()函式。

好了,本文就介紹Chrome DevTools的除錯功能到這兒。

參考資料:
[1] https://developers.google.com/web/tools/chrome-devtools/javascript/

使用 appsgeyser 製作手機Flappy小遊戲(Using appsgeyser to create a simple flappy game for Android phone)

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

用製作網頁的方式來產生手機程式已經不稀奇了,但是筆者還是要介紹一下如何使用appsgeyser來製作一個手機版的小遊戲。首先進入到appsgeyser的App製作網頁 https://www.appsgeyser.com/create/start/ ,接著搜尋game的範本,會看到 Flappy 與 2048 兩個遊戲的範本

選擇自己想要建立的範本(本文以Flappy為例)後,出現如下畫面:

開始選擇角色的圖案,




選完角色後,按下NEXT按鈕,會出現設定App的名稱與App的說明,以及App的小圖示設定

最後按下CREATE按鈕,就會詢問是否要註冊一個帳號,此處可用臉書帳號建立。完成後就可以在自己的帳號看到此遊戲的相關設定


此畫面上有個Refresh Preview,按下此按鈕後,就可以用模擬器來玩玩看自己製作的Flappy小遊戲。

遊戲預覽畫面影片:

BlocksCAD 3D 積木程式建立機器人(Creating a 3D Robot Model with BlocksCAD)

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

BlocksCAD是以類似Scratch積木程式來設計3D模型的網頁版編輯器。開啟網頁版編輯器後,可見到下圖:

接著我們可以用下圖中四個積木:球體、立方體、圓柱體、座標平移,來畫一個簡單的機器人(下圖右邊)

Youtube上有四部教學影片可參考:


OK,那這個簡單的機器人要怎麼畫出來呢?底下是筆者想到的一個參考範例:

進階練習題:

參考資料
[1] https://www.blockscad3d.com/hourofcoderobot


Python 巴斯卡三角形 Pascal's triangle

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

巴斯卡三角形的圖形如下:



那要怎麼用Python來輸出呢?首先,先看看Wiki上的動畫(下圖出自Wiki)。
於是第一個作法就是用此法來做:

而第二種做法是用二項式定理的公式:

而用二項式定理的方法還可以用動態規劃(Dynamic Programming)與遞迴(Recursion)方式來寫程式,這就留給讀者當練習。

開源跨平台遊戲開發工具介紹:GDevelop

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

GDevelop是一套開源(OpenSource)與跨平台(Cross-Platform)的遊戲開發工具,有兩種版本可以使用:
線上測試版,下圖是以 Platformer 為範本的例子。

單機版有支援 Windows、macOS、Linux 常見的三種作業系統。

GDevelop是以HTML5為主的網頁遊戲開發工具,可在手機、電腦、平板上支援 HTML5 的瀏覽器運作。除此之外,GDevelop使用拖拉的方式來設計遊戲。

依照官方教學文章:Tank shooter,就可以輕易做出類似下面影片的小遊戲。

讀書筆記《第3選擇:解決人生所有難題的關鍵思維》

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

作者建議將下列二十項事情養成習慣:
1.留意自豪。不再認為自己總是「正確」的。
2.學習說「抱歉」。
3.對於感受到的冷落與輕視,要迅速原諒。
4·對你自己和其他人做出、並信守非常小的承諾。
5.花時間處在大自然之中。
6.廣泛地閱讀。
7.時常運動。
8.獲得充足的睡眠。
9.研讀具有啟發性或是神聖的作品。
10.為自己空出安靜的時間,思考具有創意的第3選擇,以解決你的挑戰。
11.對跟你有所關連的人表達出愛和感謝。
12.你擁有兩個耳朵,但只有一張嘴:依照比例善加使用。
13.練習對其他人慷慨大方。
14.避免拿自己跟其他人做比較,就是別這麼做。
15.要心懷感謝。表達出來。
16.學習變得充滿熱誠、不屈不撓,發現如何為他人創造出偉大的勝利。
17.當事情的進展不如理想時,休息一下,到街頭去散個步,晚上睡個好覺,然後以全新一天的新鮮感和觀點再回來處理。
18.如果你真的無法達成雙赢,務必記得,在某些狀況之下「沒有協議」會是最好的選擇。
19.當事情涉及到其他人、他們的反應、他們的弱點,以及獨特性或怪癖時,只要多微笑就好。而當事情牽涉到你青少年的孩子時,提醒你自己,「同樣地,這件事也會過去。」
20.永遠不要停止相信第3選擇的可能性。

閒聊預測這件事

若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

最近在閱讀《邊緣商機:如何精準預測人工智慧、自動駕駛、共享經濟、無人商店等趨勢的下一步》這一本書,標題很吸引人,因為如何精準預測呢!但這分明就是出版商故意這樣命名的,因為此書的原文是《The Signals are Talking: Why Today’s Fringe is Tomorrow's Mainstream》啊!

整本書用了Uber、Google無人車、Biohacking等例子,告訴讀者如何從邊緣(小處)的發現到變成主流(大處)趨勢的分析過程。作者先說明如何使用他多年經驗的分析技巧(放大鏡)來驗證目前智慧型手機是怎麼來的,以及Sony公司的一個小故事,接著再以Uber為例子分析Uber未來會如何發展,作者也在書中說明他的預測不一定準確,因為變動的因素有很多,但要強調的是
『在分析預測的過程中,要不時更新資訊,並從各方面思考。』
這不是廢話嗎?不好意思,這句話是筆者的心得,不是作者說的。OK,那這本書跟程式設計有什麼關係?當然有關係啦!假設要幫人設計一套軟體時,不知道對方的需求時,對方又說不出過所以然時,就得用分析方法來一一幫對方釐清,有時還得預測對方有可能的需求是什麼!舉個例子來說,iOS與Android這兩套目前主流的手機作業系統是怎麼設計出來的?那未來的手機作業系統又會如何演變?

也許有人會說,這跟我有什麼關係?這,有可能沒有關係,因為什麼時間點會發生,沒人知道。但也沒有人敢保證《刀劍神域劇場版:序列爭戰》的場景不會出現在現實生活中。

看完本書的人可以運用書上的分析方法與技巧來預測未來的科技如何變化。那人工智慧(AI)對食、衣、住、行、育、樂,這六項有什麼影響?AI對法律又會有什麼影響(這裡提到法律是因為紅旗法案的關係)?

機器人會不會變成執法人員(如警察抓犯人)?現在就有闖紅燈照相(雖然這技術還不夠看啦),但讀者們,不覺得闖紅燈照相只是個起頭(邊緣)而已嗎?

預測準不準見仁見智,預測很像算命,都有其分析方法與技巧。而算命師會告訴你,他是如何預測你的命運(算出你的命運)嗎?我們對算命師怎麼算命不感興趣,但對於結果準不準就非常在意!也很多人對於趨勢的預測不感興趣,卻對於別人對趨勢的預測結果準不準非常感興趣,尤其是那些大師級的分析者。

所以預測之前要先分析,在使用電腦來做氣象預測之前,一樣要分析資料,才能做預測。但在分析之前有件事情很重要:
要有資料」。

沒有資料或資訊時,大概只有神才能做到精準預測吧!