碧華國小資訊中心

日期：105年7月5日

主題：運算思維 – Scratch 2 程式設計

講師：邱昭士

運算思維與程式設計

• 運算思維在中小學之推動策略 – 台北市立大學盧東華教授
• 運算思維與程式語言教學增能 – Kids Coding Studio 蔡淑玲 Shalley
• 運算思維簡報_呂聰賢
• 新北市蘆洲國中研習：運算思維與程式設計

視覺化程式語言_handson_20160606 – 台北市立大學盧東華教授

• HOC – code.org
• Scratch
• google blockly
• app inventor

Scratch 2 程式設計

• Scratch 官方網站：https://scratch.mit.edu/
• 離線檔案下載：碧華國小檔案伺服器下載  → 【程式教育】→ Scratch

範例教學

• 迷宮

• BMI計算器

MIT App Inventor 簡介：

• MIT App Inventor 2 開發網站：http://ai2.appinventor.mit.edu
  → 以 Google 帳號登入

• MIT App Inventor 官方網站：http://appinventor.mit.edu

建置App Inventor 2 開發環境：

App Inventor 2 開發環境在雲端，本機只需安裝App Inventor 2 的開發工具檔(模擬器)，即可開始運用App Inventor 2 編撰App應用程式，接著在模擬器中安裝MIT AI2 Companion元件即可在模擬器中執行應用程式專案，或以手機執行應用程式專案。

測試 MIT App Inventor2 程式執行的各種方式：

線上教學文件：麗山高中 – 程式設計延伸學習：MIT App Inventor 2‎ > ‎測試執行程式

一、WiFi連線：

• 適用於有Android 裝置、電腦、裝置間有WiFi連線，是測試執行App程式最方便的方式（注意：需同一網域）。
• 在實機上安裝：MIT AI2 Companion App：Google Play 商店
• 選取『連線→ AI Companion』
• 註：WiFi連線測試不會將程式安裝至Android裝置上，僅是在Android裝置執行並顯示程式結果，當連線中斷Android裝置上的程式即消失。

WIFI 連線實機執行應用程式

1. 條件：電腦與手機網路在同一個網段。
2. 手機開啟「Play 商店」→ 搜尋「MIT AI2 Companion」→ 安裝 MIT AI2 Companion。
3. 手機執行 MIT AI2 Companion → 按 Connect【連線】 鈕，在下拉式選單中點選 AI Companion，將產生的六個字元輸入實機，再於實機按 connect with code 鈕；或在實機按 scan QR code 鈕，再以實機掃描對話方塊中的 QR Code 圖形。

二、模擬器(Emulator)：

• 在沒有Android 裝置下，可安裝MIT App Inventor 2 軟體，以模擬器(emulator)測試App程式。
• 官方網站模擬器下載操作方法：麗山高中 – 模擬器安裝教學影片
• 模擬器下載：
  • 官方網站下載
  • 碧華國小檔案伺服器下載  → 【程式教育】→ 【App Inventor2】→ MIT_App_Inventor_Tools_2.3.0_win_setup.exe
• 執行電腦程式集中的『aiStarter.exe』程式後會出現一個命令視窗。【切記：模擬器執行期間切不可先關閉此命令視窗，否則會導致模擬器無法連線，電腦須重新開機才能解決這個問題。】
• 選取『連線→ 模擬器』

建立模擬器

• 啟動 aiStarter → 按 Connect(連線) 鈕後在下拉式選單中點選 Emulator(模擬器) 項目 → 出現鎖頭圖示時，向右拖曳鎖頭以解鎖 → 由系統自動安裝 MIT AI2 Companion。

在模擬器中執行應用程式

• 按 Connect(連線) 鈕後在下拉式選單中點選 Emulator(模擬器) 項目。

三、USB連線：

• 適用於有Android 裝置，但電腦與裝置間無WiFi連線的環境，可使用USB連線測試App程式。
• 在實機上安裝：MIT AI2 Companion App：Google Play 商店
• 手機以 USB 傳輸線與電腦連接 →按 Connect【連線】 鈕後在下拉式選單中點選 USB 項目。
• 以USB傳輸線連接實機與電腦，系統會自動安裝實機的驅動程式。

實機中執行前準備工作

• 如果是要在實機中安裝下載的 apk 檔，改變手機應用程式設定：執行 設定 / 安全性，勾選 未知的來源 選項。
• 如果是要在實機上進行程式模擬，除了上述動作外，請再執行 設定 / 開發人員選項，勾選 USB 偵錯。

在實機中安裝應用程式

1. 手機開啟「Play 商店」→ 搜尋「QuickMark」→ 安裝 QuickMark。
2. 按 Build【打包apk】 鈕，於下拉式選單中點選 App (provide QR code for .apk)【打包apk並顯示二維條碼】 →使用實機中的 QuickMark 掃描 QRCode。.

相關網站：

• QuickMark

設計步驟：

建立專案(New project )：

1. 使用 Designer(畫面編排) 畫面：設計Android裝置的使用者介面(即畫面配置區)→(1)選擇程式元件(Palette)、(2)設定程式元件的屬性(Properties) 。
2. 使用 Blocks(程式設計) 畫面：設計程式的控制及邏輯(即程式碼編撰)。
3. 使用Android裝置或模擬器測試執行程式。

教學影片：

App Inventor 2 中文版 – 呂聰賢：教學影片

App Inventor 2 零起點速學指南 – 呂聰賢 – YouTube 92 部影片

教學網站：

• 麗山高中 – 程式設計延伸學習：MIT App Inventor 2

• App Inventor 2 來了 – AppInventor中文學習網

• App Inventor 2 – 高中磨課師「基礎程式設計」課程網站

範例教學：

• 範例一：ai2入門範例25題 – 鶯歌高職盧淑惠老師

• 範例二：1040701國中生暑期育樂營(觸控) – 鶯歌高職盧淑惠老師

• 範例三：1040703國中生暑期育樂營(聲控) – 鶯歌高職盧淑惠老師

• 範例四：App Inventor Code Snippets 研究