緣由:之前玩 micro:bit 時,對於 Microsoft 設計的 MakeCode系統 印象深刻,也佩服其開源的態度,試著瞭解一下...
準備環境:
1.Windows 10/MacBook Pro筆電
2.Google Chrome/Safari
先到 https://github.com/Microsoft/pxt 下載源碼,如下圖
再進入 pxt 該目錄,依據網頁指示安裝( 注意: Node: minimum version 5.7+ ),如下圖
再依照 https://makecode.com/cli 指示,安裝 Yotta, 下載 SRecord 1.64 並壓縮至 C:\ 及安裝 Visual Studio (含 C++ toolchains)...如下圖
再到 C:\ 建立目錄及安裝 microbit,如下圖
安裝完成後,直接執行 pxt serve 就可以快樂玩~離線版的 MakeCode (pxt) 了,如下圖
在上圖中左方有多一個 [資源管理器],那是我多安裝了 Chrome 擴充功能 [Extension for micro:bit],如下圖
接著,示範 Hello! (左邊有一個 micro:bit 的 所見即所得模擬器,真是太帥了),如下圖
至於如何使用 Visual Studio Code 來看源碼爬code,這要再研究了...
另外,
也可以在 MacBook筆電 下載安裝,如下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4migRiX2sj4AMfUVxK_XbijOJU5mVk8zQgDuvTG53jF-7lx15QScR9IGCXOCMkH8kyew2x8RTuMEdDj44mLqiAxfSs2UmZdlxrTca6-QwaKAIeCcckL_zhpng5LHDO8xbWGTqG2o6KUI/s320/davis_%25E2%2580%2594_-bash_%25E2%2580%2594_93%25C3%259740_%25E5%2592%258C_Blogger%25EF%25BC%259A%25E6%259B%25BE%25E4%25BB%25A4%25E7%2587%258A_%25E9%2583%25A8%25E8%2590%25BD%25E6%25A0%25BC_-_%25E4%25BF%25AE%25E6%2594%25B9%25E6%2596%2587%25E7%25AB%25A0.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivw7G7CKN8WMBeb7_bW-kkZY3Gvbzk4BqdUgkxGyHkps1E0D6CI1JM5s2j5C1_N2cYaXCXNAw9eH5BaT3py9LeU6JqFza5Zt6MVNNJ-MH2PeMNsgo17nzQ1hrLMInPkVk-_MoqqEpC08c/s320/pxt-microbit_%25E2%2580%2594_npm_TERM_PROGRAM_Apple_Terminal_SHELL__bin_bash_%25E2%2580%2594_93%25C3%259740_%25E5%2592%258C_Microsoft_pxt-microbit__A_Blocks___JavaScript_code_editor_for_the_micro_bit_built_on_Microsoft_MakeCode.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPRArjFIR5V-QGWau__fiJT3H_bbjtOoI_3K6E-zTdKg7VZeCp0QsgaBDOTgnVUHlp4bZRt5Nu86jWZVHZ2spV1ePcAy-6TXbZ968qvMk3kirizADuQcFS_Felt93IjVqyFKS4yJI2w4/s320/mb_%25E2%2580%2594_node__usr_local_bin_pxt_serve_%25E2%2580%2594_140%25C3%259740.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgByoahLYxGOn6lcjSqVC-2VRu_YA0aCVajTWS1ZqfLJIaHhSVZ9n06m3ra8QYOFpjS-EsPOkY1D-7onROnmKRQDPmDF8s5J5p1i2ytI0IFhyVcjI_FgRABjovG2b6BHg1RxnB4Pvve74s/s320/mb_%25E2%2580%2594_node__usr_local_bin_pxt_serve_%25E2%2580%2594_140%25C3%259740.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYn549tZIqRY96UrCBi2DDnJuB17ot-YVUixszh3r8BQ3fdgElF14Dum7y3rSjznPYDGUYA36YBpzfLSnhJNm_H5S8M3S2PAUnzjDhw4QunkU8V-BlSPqJyAv5cuFsUbD45HW3zOsoi88/s320/mb_%25E2%2580%2594_node__usr_local_bin_pxt_serve_%25E2%2580%2594_140%25C3%259740.png)
另外,根據 https://makecode.com/cli 指示,新增專案,如下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPavo7G2SW7pYjYTMm9sjjfXpJxLw_2P8V_Z-mznv5GReQ9113gMJWnclDUV5yQBH_dDHJZB3q5wM0-gFWEFWY7nKgmiNAOUzo7EkXsaVfHApGhYmdHkUKusi9ZMMcm3v1S7ZEDr4jVPo/s320/Command_Line_Tool_-_Microsoft_MakeCode.png)
再依 https://code.visualstudio.com/docs/setup/mac 執行 Visual Studio Code 增加 code 指令,如下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3UaqB6PxUkrAOL4BTnj46V58Pulb6bKUfnIcC-bgRe9MI5EgExPX8awMN6LfLw7cAzoOPeE3zxp20s4dthMbFxpQdR61rJX8Wbe7c3sUNw3VzGQKBFVwknZwgjqyhDpsBT2EBi_vSwHQ/s320/Running_Visual_Studio_Code_on_Mac.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWVY68RbK0pzf86w7J3WRxGTw1sRRn3dnJUHkCXda66ws5Z1wGzt3KaSAob-WUtULUxi11x9fnsXxb-uOjUQQ63eUaOd3o767kpEf50tNfXJcnkAV1gfrdNgTAQPRu1j8DwFe9bS3gVA/s320/test_ts_%25E5%2592%258C_Running_Visual_Studio_Code_on_Mac_%25E5%2592%258C_blink_%25E2%2580%2594_-bash_%25E2%2580%2594_124%25C3%259738.png)
就可以在 Terminal終端機 下達 code . 指令 來開啟 Visual Studio Code 了,如下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXpqKZ8qQd4Ap94UdeKcUnoUJxKsanFcJQbjlL8yORBNHPWrPiCdbHe3PiqMkJJKx-LrJWvvUqosOw5N8iRY_IZ6NsM8ibqeGhPenkuCzxOw1oDSzhAEEkDj8CY8OzMq_yBknsv7Mfek/s320/led_ts_%25E2%2580%2594_blink_%25E5%2592%258C_blink_%25E2%2580%2594_-bash_%25E2%2580%2594_80%25C3%259724.png)
在 Project專案 中 pxt_modules 目錄有豐富的源碼可提供深究者參攷...
準備環境:
1.Windows 10/MacBook Pro筆電
2.Google Chrome/Safari
先到 https://github.com/Microsoft/pxt 下載源碼,如下圖
再進入 pxt 該目錄,依據網頁指示安裝( 注意: Node: minimum version 5.7+ ),如下圖
再依照 https://makecode.com/cli 指示,安裝 Yotta, 下載 SRecord 1.64 並壓縮至 C:\ 及安裝 Visual Studio (含 C++ toolchains)...如下圖
再到 C:\ 建立目錄及安裝 microbit,如下圖
安裝完成後,直接執行 pxt serve 就可以快樂玩~離線版的 MakeCode (pxt) 了,如下圖
在上圖中左方有多一個 [資源管理器],那是我多安裝了 Chrome 擴充功能 [Extension for micro:bit],如下圖
接著,示範 Hello! (左邊有一個 micro:bit 的 所見即所得模擬器,真是太帥了),如下圖
至於如何使用 Visual Studio Code 來看源碼爬code,這要再研究了...
另外,
也可以在 MacBook筆電 下載安裝,如下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4migRiX2sj4AMfUVxK_XbijOJU5mVk8zQgDuvTG53jF-7lx15QScR9IGCXOCMkH8kyew2x8RTuMEdDj44mLqiAxfSs2UmZdlxrTca6-QwaKAIeCcckL_zhpng5LHDO8xbWGTqG2o6KUI/s320/davis_%25E2%2580%2594_-bash_%25E2%2580%2594_93%25C3%259740_%25E5%2592%258C_Blogger%25EF%25BC%259A%25E6%259B%25BE%25E4%25BB%25A4%25E7%2587%258A_%25E9%2583%25A8%25E8%2590%25BD%25E6%25A0%25BC_-_%25E4%25BF%25AE%25E6%2594%25B9%25E6%2596%2587%25E7%25AB%25A0.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivw7G7CKN8WMBeb7_bW-kkZY3Gvbzk4BqdUgkxGyHkps1E0D6CI1JM5s2j5C1_N2cYaXCXNAw9eH5BaT3py9LeU6JqFza5Zt6MVNNJ-MH2PeMNsgo17nzQ1hrLMInPkVk-_MoqqEpC08c/s320/pxt-microbit_%25E2%2580%2594_npm_TERM_PROGRAM_Apple_Terminal_SHELL__bin_bash_%25E2%2580%2594_93%25C3%259740_%25E5%2592%258C_Microsoft_pxt-microbit__A_Blocks___JavaScript_code_editor_for_the_micro_bit_built_on_Microsoft_MakeCode.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPRArjFIR5V-QGWau__fiJT3H_bbjtOoI_3K6E-zTdKg7VZeCp0QsgaBDOTgnVUHlp4bZRt5Nu86jWZVHZ2spV1ePcAy-6TXbZ968qvMk3kirizADuQcFS_Felt93IjVqyFKS4yJI2w4/s320/mb_%25E2%2580%2594_node__usr_local_bin_pxt_serve_%25E2%2580%2594_140%25C3%259740.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgByoahLYxGOn6lcjSqVC-2VRu_YA0aCVajTWS1ZqfLJIaHhSVZ9n06m3ra8QYOFpjS-EsPOkY1D-7onROnmKRQDPmDF8s5J5p1i2ytI0IFhyVcjI_FgRABjovG2b6BHg1RxnB4Pvve74s/s320/mb_%25E2%2580%2594_node__usr_local_bin_pxt_serve_%25E2%2580%2594_140%25C3%259740.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYn549tZIqRY96UrCBi2DDnJuB17ot-YVUixszh3r8BQ3fdgElF14Dum7y3rSjznPYDGUYA36YBpzfLSnhJNm_H5S8M3S2PAUnzjDhw4QunkU8V-BlSPqJyAv5cuFsUbD45HW3zOsoi88/s320/mb_%25E2%2580%2594_node__usr_local_bin_pxt_serve_%25E2%2580%2594_140%25C3%259740.png)
另外,根據 https://makecode.com/cli 指示,新增專案,如下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPavo7G2SW7pYjYTMm9sjjfXpJxLw_2P8V_Z-mznv5GReQ9113gMJWnclDUV5yQBH_dDHJZB3q5wM0-gFWEFWY7nKgmiNAOUzo7EkXsaVfHApGhYmdHkUKusi9ZMMcm3v1S7ZEDr4jVPo/s320/Command_Line_Tool_-_Microsoft_MakeCode.png)
再依 https://code.visualstudio.com/docs/setup/mac 執行 Visual Studio Code 增加 code 指令,如下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3UaqB6PxUkrAOL4BTnj46V58Pulb6bKUfnIcC-bgRe9MI5EgExPX8awMN6LfLw7cAzoOPeE3zxp20s4dthMbFxpQdR61rJX8Wbe7c3sUNw3VzGQKBFVwknZwgjqyhDpsBT2EBi_vSwHQ/s320/Running_Visual_Studio_Code_on_Mac.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWVY68RbK0pzf86w7J3WRxGTw1sRRn3dnJUHkCXda66ws5Z1wGzt3KaSAob-WUtULUxi11x9fnsXxb-uOjUQQ63eUaOd3o767kpEf50tNfXJcnkAV1gfrdNgTAQPRu1j8DwFe9bS3gVA/s320/test_ts_%25E5%2592%258C_Running_Visual_Studio_Code_on_Mac_%25E5%2592%258C_blink_%25E2%2580%2594_-bash_%25E2%2580%2594_124%25C3%259738.png)
就可以在 Terminal終端機 下達 code . 指令 來開啟 Visual Studio Code 了,如下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXpqKZ8qQd4Ap94UdeKcUnoUJxKsanFcJQbjlL8yORBNHPWrPiCdbHe3PiqMkJJKx-LrJWvvUqosOw5N8iRY_IZ6NsM8ibqeGhPenkuCzxOw1oDSzhAEEkDj8CY8OzMq_yBknsv7Mfek/s320/led_ts_%25E2%2580%2594_blink_%25E5%2592%258C_blink_%25E2%2580%2594_-bash_%25E2%2580%2594_80%25C3%259724.png)
在 Project專案 中 pxt_modules 目錄有豐富的源碼可提供深究者參攷...
留言