可視化程式設計教育随想

前言

之前寫了一篇有關apaas/ivx的文章，讓我的思路發散到了程式設計教育，尤其是可視化教育程式設計方面。不僅因為我是學教育出身，更多的是因為教育是民生基礎而程式設計又是網際網路科技的代表。恰巧最近又看了許多華南師範大學焦建利教授對電化教育方面的技術反思文章，遂決定随筆兩兩記錄一下對程式設計教育、網絡學習方面的看法。觀點非常主觀，若有不同觀點不吝賜教。

網絡學習的市場潛力在網際網路剛興起時就被嗅探到了，國家當時也花費了很大力氣參與其中——精品課程，OJ系統，高校自己開發的學習平台和線上作業系統。但這些在我眼裡不過是應試教育的另一種展現罷了，差別隻是讓學生上課的地點從學校轉移到了電腦前，學生可以做小動作、開着音樂或遊戲混系統記錄的學習時長。即便處于興趣，也基本浏覽課程的第一節，然後打開了其他連結。能驅動在校學生投入精力利用平台學習的最大動力便是學分，這又讓我考慮另一個問題：學習的目的和源動力是什麼。

入學時第一課老師問我們，你們考研的目的是什麼，大家七嘴八舌，有人說為了有高學曆好找工作，有人說為學習本身，有人說為了寒暑假，不管因為什麼原因，這些目的全部可以抽象為一個概念——需求。需求是經濟學的沖突點之一，價格、資源配置設定、市場等諸多概念說穿了是對需求的分析與操作，學習便是人對于教育及教育所帶來價值的需求。那麼能将網絡學習的好的産品一定抓住了對其有需求的使用者。這些線上學習的潛在使用者可能限于地理條件，學習成本等因素的制約，願意去了解和嘗試非課堂式的教學活動。在程式設計學習領域目前做的比較好的有以下幾類：

1. 從零開始的工具網站，這類是我們剛開始決定為自己學習程式設計的免費入門平台，內建了各大語言的基礎教程，部配置設定合了線上編譯工具，帶領學習者遊走于入門和放棄的交界處。代表有：w3school、runoob；
2. 有從零開始的課程學習，也有進階的實戰課程，學習形式以視訊為主，部配置設定以線上程式設計工具，學習者可以和教師或互相交流以達到知識内化的目的。優勢是資源豐富，視訊容易讓新人上手；缺點是内容的時效性通常難以保證，視訊對能力強的學習者而言效率低。代表有：可汗學院、mooc；
3. 學習門戶論壇，這類大家接觸的應該就比較多了，經常看技術文的同學一定都有自己的閱讀平台和閱讀習慣了。這類平台提供的是技術/知識分享服務，通常針對某個要點展開具體的原理分析也有對某一概念/知識點的宏觀講解。優點是針對性強，圖文的呈現方式能快速解決問題；缺點是内容的品質難以控制，本身依賴大量的使用者的自發行為，若參與度不足難以支援起學習生态。代表有：csdn、掘金、極客論壇；
4. 隻提供專有功能的工具平台，這類學習平台通常具有獨一無二的功能，使用者利用其獨特的功能訓練自己的專項技能，并能将自己的成果展示分享，這類學習平台針對的使用者都是有較強學習意願，渴望對技能進行精進。代表有:scratch、codepen、codewars

我們今天所讨論的可視化程式設計就屬于第4類，scratch是其中的典型代表。

一、可視化程式設計

在說可視化程式設計教育之前，先說一下可視化程式設計。這個概念其實早就運用到了現實的開發當中，做過ios或android的同學一定對xcode和android studio非常熟悉，在建構頁面時為了簡化xml的編寫可以在預覽頁拖入元素。我在上一篇介紹過的ivx編輯器則完全依托這種可視化方案，盡量減少對代碼的直接編譯。這些工具是商業化的産品，旨在為企業和開發者提供更高的開發效率減少成本，但顯然其教育因素則展現不出來，學習者如果直接上手使用則沒有進一步的導向進而放棄使用。是以專門為教育設計的可視化程式設計産品便應運而生。

二、可視化程式設計教育産品

（一）scratch

提到可視化程式設計教育則必須提到scratch這款産品，如果你從事教育技術行業或網際網路教育，多多少少應該對它的有所了解，作為可視化程式設計教育行業内産品的代表需要單獨提出來介紹。

scratch是一款由麻省理工學院開發，針對6-10歲兒童開發，旨在讓學習者通過感覺學習計算機編譯原理的可視化線上學習系統。開發者期望通過學習Scratch，啟發和激勵使用者在愉快的環境下經由操作（如設計互動故事）去學習程式設計、數學和計算知識，同時獲得創造性的思考，邏輯程式設計，和協同工作的體驗。———— wiki

下圖是scratch的界面：

可以看到左側對應的事件、監聽器、一般方法、控制器等可視元件，拖入到中間的編輯區域就可以像搭積木一樣編輯自己的作品，點選整塊積木就會運作，運作結果可在右上角體驗。積木本身是svg标簽，随着使用者的操作會拉伸變形，本身功能做的非常好。

随着2019年scratch v3.0版本的上線（編輯系統和頁面基于react，2.0基于flash），已經功能的不斷擴充，市場便瞄準了這一教育商機。将整套scratch-gui開源庫下載下傳下來，稍加改動或直接照搬，将scratch強行加入自己的教學過程來提升辦學機構的格調，而是否需要線上程式設計，是否能将其用到商業目的都沒有被機構納入考慮範圍。不過這種粗暴的引入方式卻很能抓住二三線城市家長的心，就和投機理财一樣，家長在看過scratch的示範後也不會多想這些問題，最多覺得機構的技術有優勢，然後盲目跟随程式設計教育的大流參與其中。

（二）國内産品

接下來給大家舉幾個生動的例子，為了避免不必要的麻煩，我會用到我的千年老ps技術給機構的圖檔打碼。下面是某教育機構的軟體下載下傳頁面:

果然，scratch隻是噱頭之一，這家機構的主打還是一對一直播課程。不僅如此，當我進入官網的時候客服真實敬業，不停問我孩子多大了，當我試探性的問了幾個scratch版本及版權相關問題的時候，他又将話題轉移到了孩子多大的問題。對自己産品捂得這麼緊，在網際網路行業意味着什麼不言而喻。最後吐槽一下下載下傳軟體裡還有vscode，你交的課程夠硬核的。

再來說一個國内正向的例子，程式設計貓是針對10歲以上兒童的一款python學習系統，點選連結後未登入狀态下也可以直接進入編輯器頁面。正如之前提到的ivx編輯器，敢于把自家的核心工具直接暴露在外的一定是主打項目并且有相當的不可複制性，不怕你看到之後偷走。程式設計貓的整體界面入下圖：

不得不說界面的整體布局和功能還是沿用了scratch的大架構，創新點在于對元件的優化更加适配python語言的學習，可視元件部分的svg重畫并且全中文支援，點選代碼模式可切換積木對應的python語言，這一點與blockpy類似，對于學習而言有很大幫助：

其平台配有相關的視訊課程，推薦想讓孩子學習程式設計的家長去體驗了解一下。

（三）國外産品

再将視野轉到海外，不得不佩服人家在創意領域确實比我們高出不少——scratch目前支援視訊源接口、樂高接口，除了scratch這種偏學院派的産品，還有如極客戰紀這樣的程式設計類遊戲，針對python的blockpy編輯器。

blockpy是面向高年齡向青少年的針對性很強的學習系統，不再主打對界面的呈現效果，預覽到的運作結果也全變成了console的列印結果。元件部分有諸如variable、input、value這種python的專業元件，界面的整體風格也更加嚴肅，同樣有元件轉代碼預覽的功能。除此之外他還具有ivx這種商業可視化開發工具都不具備的大資料導入功能，這已經将學習的内容與前沿技術聯系了起來，其界面如下圖：

大家注意我用紅圈标出來的地方是他們的一個“特色”，下方元件扣的不瓷實有條縫，由于網上有開源代碼是以大家都可以用到編輯器功能，是以隻要你看到國内積木拼接部分出現這種情況，基本用到就是這套開源代碼。

最後給大家推薦一款程式設計遊戲——human resourse（ios store ￥30）。這款遊戲内部采用的是類似彙編的語言去控制小人搬動箱子，如何利用給定的元件讓小人工作的最有效率是玩家的目标。有意思的是随着關卡的不斷發展，我們主人公的發量也愈發堪憂，真的是很好地映射了程式員這一行業的生理特征。

三、可視化程式設計教育的問題

（一）資源的浪費

正如之前提到的，scratch面向低領兒童，旨在訓練孩子的邏輯思維、數學思維、判斷力等，不管對應人類的發展或個人的認知體系建設都很有意義。但如blockpy這樣的針對某一語言的基礎學習或興趣學習，其造成了一定的資源浪費：學生學習使用可視化積木，同時必須對應相應的程式設計語言，當掌握了語言技巧後學習者會抛棄編輯器系統轉而投向更專業的學習方式，那麼原本平台工具僅發揮了入門級的作用，這對于工具本身來說是一種浪費。

對于學習者而言，如果在一段時間内學會了使用編輯器的能力，但為了現實需求和工具的功能限制不得不去進行專業技能訓練，造成了學習使用工具過程中的效能浪費。學習者不能用可視化工具實作開發的需求，僅能得到相應的邏輯訓練，而習得的工具使用的能力隻能随時間流逝遺忘。

目前推出的可視化程式設計工具和可視化程式設計學習工具如果能做到一個結合，将大大提高學習者的學習效能，整個過程可以類似scratch鍛煉邏輯能力->blockpy學習變量等程式設計概念->ivx專門的商業開發，如果有機構能建立這一整套體系，其影響力相當于釋出一門新的程式設計語言。

（二）程式設計教育越發表層話

以下援引焦建立教授《兒童可視化程式設計教育随想》的内容

從 BASIC，到FORTRAIN, C，C++,這一路走來。随着計算機圖形界面的普及，尤其是可視化程式設計語言的興起和流行，人們開始從枯燥地編寫代碼，轉化成了可視化的、子產品化的程式設計學習。程式教學開始逐漸地由純粹代碼的程式設計（Text-Based Programming）向可視化的子產品化拖拽式程式設計（Drag and Drop Programming）轉變。由此，湧現出了一大批的可視化程式設計的工具，從當年的LOGO語言，到現在異常流行的Scratch，再到 Tinker，BYOB/Snap!、Pocket Code、Blockly、Hopscotch、GameSalad、Code.org、Touch Develop、MIT App Inventor、Alice、BeetleBlocks、Starlogo-TNG我們幾乎可以列舉出數百個可視化程式設計的應用。

于是，一個新的問題出現了。當我們擺脫了純粹代碼編寫的碼農式程式設計學習，開始更多地依賴可視化的、子產品化的、甚至傻瓜化的程式設計的時候，一方面使得程式設計成了四歲以上的每一個孩子都可以學習的技能，在機器人、創客教育、STEAM的熱潮下，使得程式設計教育再度流行起來了；另一方面，這種發展态勢在提升了程式設計學習的趣味性和低門檻的同時，是不是也使得我們的程式設計教育走向了一種更加表層、膚淺的道路？

程式設計思維的邏輯訓練也好，對某種語言的可視化學習也罷，其内容的深度和廣度都及其有限，當學習者學習水準不斷提高，現有内容便難以支撐後續高階的學習。比如<可視化程式設計+人工智能>、<可視化程式設計+大資料>等高端技術的可視化教育研究依然尚待開拓。

一方面機構渴望利用可視化教育工具立刻從市場中賺取利潤，另一方面又不願意花費大的周期和資金去自研或擴充工具。是以市面上的現有教育工具基本都是依托開源項目，即便在教學政策上有新的idea也不會投入實施。不僅在教育屆，整個網際網路屆都是如此，像程式設計貓、ivx的團隊在當今浮躁的社會值得令人敬佩。

思考

在我們上國中的時候看到有同學去買來“網頁三劍客”的CD光牒，詢問後知道要安裝、打底、制作，那時候架構根本沒有出現，js還是處于無人問津的狀态。我表弟也在小的時候被計算機老師推薦了一本很厚的javaEE，對于那個年代國中生要搭建環境開發一張jsp網頁也着實需要費一番功夫。後來進入大學學了計算機相關課程，再後來為了提升自己又通過網際網路上的各種資源了解新的程式設計理念與思想。

今天知識壁壘被搜尋引擎削減了很多，但仿佛行業的創新力和想象力反而下降了。大多人隻會一味追随科技熱點，資本家滿嘴提到的是他從别處聽說的概念并考慮怎麼變現；從業者翻看新技術的文檔并跟從學習卻缺乏思考。

• 可視化程式設計+教育——scratch；
• 區塊鍊技術+證書頒發——MIT學位證書（麻省團隊開發并投入使用）；
• 人工智能+仿人類機器人——google運動智能；

希望我們的技術工作者也能有更多的想象力。