App Inventor 簡介: 由麻省理工學院(MIT)所開發的程式設計軟體,具有免費、簡單的特色
以拖曳與拼接積木(方塊)方式來撰寫程式的一種圖形化程式語言
彈性課程範例:
狗叫 | 彈鋼琴 | 小畫家 |
App Inventor 執行:
AI Companion | USB | 模擬器 | 打包成apk檔至手機安裝 |
Android系統手機 執行"MIT AI2 Companion" App 如果呈現灰色, |
Android系統手機
|
不需手機 在電腦中安裝模擬器(安裝aiStarter) 如果失敗,可選連線/重製連線 耗時,有些功能無法執行 |
apk檔至手機,執行安裝 網址轉QR CODE: |
QR code | 下載模擬器 |
開發程序:
登入Google帳號-->進入App Inventor2網站-->設定繁體中文-->建立新專案
-->第一支 App Inventor程式
step1:在Chrome瀏覽器,在網址列輸入 http://ai2.appinventor.mit.edu , 按Enter鍵,連至App Inventor 2 網站
step2:輸入Google帳號、密碼
step3:轉成繁體中文
step4:選 專案/新增專案,並輸入專案名稱(只能用英文、數字、底線,勿用中文)
中英文轉換 |
|
![]() |
![]() |
EX1:第一個APP
![]() |
![]() |
![]() |
自行設定元件屬性 切換至程式設計畫面
|
執行程式: 連線/AI Companion ,產生QR code ,執行手機 "MIT AI2 Companion" App |
EX2-1:循序結構--------加法小算盤(2數相加)
![]() |
![]() |
![]() |
![]() |
自行設定元件屬性 切換至程式設計畫面 |
切換至程式設計畫面 | 模擬器執行結果: |
EX2-2:簡易計算機
EX3-1: 抽籤(亂數1~100)
隨機產生1~100之間的整數亂數
![]() |
![]() |
![]() |
EX3-2: 抽籤(亂數:自行輸入範圍)
隨機產生X~Y之間的整數亂數
![]() |
![]() |
EX4-1:計算BMI(體重/身高(cm)/100*身高(cm)/100)
![]() ![]() |
EX4-2:計算BMI(體重/身高(cm)/100*身高(cm)/100)
判斷健康狀態:bmi<18.5(體重過輕)
18.5<=bmi<=24(標準)
bmi>24(體重過重)
![]() |
![]() |
EX5: 選擇結構--------今日運勢抽籤
隨機產生1~100之間的整數亂數,並依該數值的大小顯示占卜結果(如>=90:大吉,文字顏色為黃色;11~89:中吉,文字顏色為橘色;<=10小吉,文字顏色為藍色
將標籤1文字設定為:來看看今天運勢吧!
將標籤2文字設定為:空白
將標籤3文字設定為:空白
按鈕1文字設定為:運勢占卜
自行設定屬性
如果在內建方塊的流程控制
EX6-1: 重複結構--------計算5階乘
![]() |
![]() |
![]() |
將標籤1文字設定為:計算5階乘 將標籤2文字設定為:空白 按鈕1文字設定為:開始計算 自行設定屬性 |
EX6-2: 輸入一數,計算其階乘
![]() ![]() |
EX6-3: 計算1+2+3+4+5的總和
![]() |
![]() |
APP101: 使用者登入介面
![]() |
![]() |
![]() |
![]() |
EX9:大樂透1~49,亂數選6個號碼
EX9: 資料排序--------由小到大排序
EX10: 函數的應用--------溫度轉換
狗叫dog 回索引
畫面編排 | 所有元件 | 準備素材 |
![]() |
![]() |
1.背景圖 2.動物圖 3.動物叫聲 4.小圖(icon), 可利用ppt製作 p.s. 可利用線上去背 |
程式設計 |
||
![]() |
||
動物音效素材下載 https://taira-komori.jpn.org/animals01tw.html
|
彈鋼琴piano 回索引
畫面編排 | 所有元件 | 準備素材 |
![]() |
![]() |
琴鍵、鋼琴圖片素材下載 pexpls
Bing Image Creator : AI 生成圖 利用PPT 製作 C D E F G A B C圖片 螢幕方向 : 鎖定橫向畫面
|
程式設計 |
||
![]() |
小畫家painter 回索引
畫面編排 | 所有元件 | 執行結果 |
![]() |
![]() |
|
程式碼 | ||
![]() |
||
![]() |
||
![]() |
||
備註:存檔至手機至內部儲存空間
Android>data>edu.mit.appinventor.aicompanion3>files(副檔名:png) 螢幕方向:根據感測器 |