讓MakeCode教你基礎JavaScript

十月 5, 2017
Facebook
Twitter
程式設計毫無疑問是現在世界上最重要的技能之一。
我們生活的周遭隨處都是科技,而程式設計的能力讓你能駕馭它們。程式設計入門有數不盡的方式,但大多不會像使用微控制器這樣精彩。這種微型電腦讓你與虛擬世界互動,同時延伸進入現實世界。

圖片

圖A
MakeCode是微軟新推出的一種程式設計環境,它不是第一種圖形化程式設計語言,卻是我見過最棒的解決方案。這類語言不會嚴格要求使用者熟記各種具體的語法,而是讓他們透過拖放式介面來堆疊指令,寫出應用程式(圖A)。

從零開始寫程式的過程,可以想成寫詩;語言裡的所有文字都可以用來寫,但需要耐心鍛鍊才能選出最適合的字來寫出順暢優美的文句。另一方面,圖形化程式設計就像用朋友家冰箱上的磁鐵來湊出句子。再怎麼不正經的派對動物也能拼出幾句打油詩,讓友人隔天打掃看到時能開心一點。

圖片

圖B
MakeCode脫穎而出的眾多特點之一是它不會限制只能使用程式方塊,可以和實際的程式碼視窗來回切換。把一個方塊加入程式中(圖B),並切換到程式碼檢視時,對應的函數會以JavaScriptJS)顯示,也就是MakeCode的基礎程式語言(圖C)。當然,如果接著以JS對程式碼做變更,再切換回方塊視窗,方塊就會顯示變更後的程式碼。這項切換功能讓程式設計的初學者能用程式方塊入門,同時快速學會JS語法,可運用在MakeCode之外的應用程式編寫。

圖片

圖C

JavaScript是現代網際網路的基礎技術之一,它讓開發人員寫出多樣的應用程式,而不需永遠依賴伺服器進行運算,可以分攤一些作業給本機瀏覽器完成。Gmail、Facebook、Makezine.com,甚至MakeCode自己的網站都是靠JavaScript運作。如果你是程式設計師,想要更進一步鑽研的話,MakeCode團隊還提供編譯器,以JS把使用者寫出的程式碼轉換成開發板所需的格式,不需要再回到伺服器。

開發板支援

MakeCode是針對實體運算設計,目前支援的開發板包括 BBC micro:bit、Adafruit的Circuit Playground Express、Chibi Chip和SparkFun的AMD21開發板。雖然這些系統多數仍在beta階段,其中micro:bit擁有最完整的支援。這塊強大的小板是入門的好選擇。標準的Arduino Uno有單一個內建可控制LED,但micro:bit有一個5×5 LED矩陣、內建加速度計(測量搖晃與移動)、磁力計(羅盤與金屬偵測功能)、兩個按鈕、光與溫度感測器,甚至有低功耗藍牙無線電通訊。這些配備加總起來,不用插上其他元件就能完成許多專題。
MakeCode完整支援這些元件,其中無線電通訊元件更為開發板增添功能,讓兩臺micro:bit可以跳過多數藍牙裝置需要的配對程序就互相通訊。MakeCode和micro:bit 的組合讓入門變容易,同時提供強大功能。我為了教200名沙烏地阿拉伯青少年使用微控制器的課程,挑選平臺時就相中這個組合。
入門MakeCode和它支援的平臺很簡單,不用下載或驅動程式,也不需要真的做設定。MakeCode完全在瀏覽器裡執行,所以只要有網路連線就能使用。而且透過內建模擬器,連實際的開發板都不需要。

寫程式


圖片

圖D
現在來測試一下。首先前往makecode.com,選取要用的板子。以下都以micro:bit為例。開啟新專題後,簡單的介面會在左邊顯示模擬開發板,中間是指令清單,右邊是包含開頭兩個方塊的程式碼視窗(圖D)。做過Arduino程式設計的人可能會對開頭這些方塊有印象;MakeCode中「Start」(開始)和「Forever」(永遠)對應的是「Start」和「Loop」(迴圈),這兩個函數是所有應用程式的基礎。「Start」方塊中放入的程式碼會在裝置每次開機、重開機和重設時執行,所以很適合用來加入一次性的程式碼,例如設定馬達初始位置或開啟感測器。「Forever」方塊會在開機後執行,並不斷重複執行,直到裝置關機或重設(這時「Start」會執行,接著是「Forever」)。
圖片

移動滑鼠游標到區塊上,就會顯示詳細的功能。

要在這兩個方塊新增程式碼只要簡單的拖放動作就能完成。在程式碼視窗和模擬器中間的就是用來打造應用程式的指令,相似的指令會放在同一個群組。對micro:bit而言,指令群組包含「Basic」(基礎)、「Input」(輸入)、「Music」(音樂)、LED、「Radio」(喇叭)、「Loops」(迴圈)、「Logic」(邏輯)、「Variables」(變數)、「Math」(數學)和「Advanced」(進階)(進階就留給你自己探索)。如果在某個群組裡沒找到需要的指令,別忘了點選「more」(更多)按鈕,以及向下捲動選項,因為有的可能在畫面之外。

圖片

圖E 巢狀建構程式碼片段來建立事件的序列。
MakeCode讓我們在micro:bit上輕鬆地多樣化使用LED陣列。不僅能開關個別的LED,還能在矩陣上顯示或捲動完整的字句及圖示,使用者完全不需要建立緩衝或個別控制矩陣中的LED(圖E)。

圖片

​每個程式碼函數類別都提供多種選項,讓你寫出精細的程式。

堆疊程式方塊

MakeCode的程式方塊會接合、堆疊起來成為應用程式。有些方塊可以從形狀看出來是用來嵌入其他方塊的。我發現的缺點之一是,方塊的形狀有時候太相似,很難看出接合後有沒有問題。希望系統能改成點選方塊或空位時選項只顯示可以搭配的項目,和微軟的專業開發工具做法類似。
每次新增一個方塊或變更一個變數,模擬視窗都會自動更新,顯示程式碼在開發板上的運作情形。我首次使用時就很滿意的是,不僅能看到板子上元件的情形,還看得到連接基本外部元件的方法,讓使用者學習電路接線。未來我期待看到它支援更多感測器和輸出,讓使用者在買硬體元件之前就能用虛擬方式開發完成整個專題。

MakeCode在行動裝置上一樣好用!

編譯完成的應用程式可以下載到電腦,或直接上傳到裝置。MakeCode相容的裝置在電腦上會以快閃儲存磁碟顯示,也就是不用驅動程式就能使用。裝置本身的程式編寫只需要把網頁下載的「.hex」檔案在插上USB時複製到裝置上。拖、放檔案就完成。裝置接著就會開始執行複製上去的程式碼。
如果要對這個系統提出真正的批評,就是它會讓裝置沒有回應。初學者可能不會注意到,但習慣微控制器即時反應速度的人,就會發現這些讓操作方便的程式碼帶來的負擔,降低了終端裝置的速度。

放眼未來

我很希望微軟能認真投入MakeCode,持續改進。對於打算入門微控制器的人,尤其是帶領大班級的教育工作者而言,這個系統值得一試,說不定會幫助你訓練出未來的程式設計師。
(譯:屠建明)
[原文]
Social media & sharing icons powered by UltimatelySocial