App Inventor 2教學
學習用MIT App Inventor來開發 Android App
- App Inventor 2 基礎教學
- App Inventor 2 介紹
- 開始使用App Inventor
- 程式設計練習-1
- App Inventor 2 選擇敘述
- App Inventor 2練習:BMI計算
- App Inventor 2練習:微型資料庫(TinyDB)
- App Inventor 2練習:清單(List)及清單選擇器(ListPicker)
- App Inventor 2 補充內容
- App Inventor 課程學習成果
App Inventor 2 基礎教學
App Inventor 2 介紹
App Inventor 是Google所提供的Android開發環境,目前版本為第二版(Beta),只要有Google帳戶皆可免費使用。
App Inventor使用拼塊程式 (Blocky) 來撰寫,以圖像方式來呈現讓程式初學者能夠更快上手,同時了解程式設計的脈落及邏輯架構。
App Inventor所開發的程式可以直接在Android手機上執行,也可以安裝Android模擬器在電腦上執行,歡迎進入App Inventor的世界!
|
安裝MIT AI 2 Companion
App Inventor無法在開發環境中直接執行,需要借助模擬器,或是透過WiFi、USB連線到安卓手機來執行。
安卓手機需先安裝MIT AI 2 Companion這個APP:
《進入下一頁:開始使用App Inventor 2》
開始使用App Inventor
開始使用App Inventor
1.先用Chrome瀏覽器開啟App Inventor網站,請先以Google帳號登入,第一次使用App Inventor時需要授權,按下〔Allow〕按鈕。
在下一個畫面中按下〔I accept …〕按鈕即可。
2.登入App Inventor之後先從右上角切換語言為「繁體中文」。
3.按下〔新增專案〕
並幫你的第一個專案取個名稱(英數字),如 app1 、 android1、myFirstApp …
專案名稱只能用英文、數字跟底線符號
4.App Inventor的操作界面如下圖,右上角可切換「外觀編排」與「程式設計」模式。
繼續閱讀下一頁:程式設計練習-1
程式設計練習-1
練習一
- 加入一個按鈕,將按鈕的「文字」屬性設為「Click Me!」
- 加入一個標籤,將標籤的「字元尺寸」屬性設為「24」,「文字」屬性設為空白
- 切換到「程式設計」畫面
- 點選「按鈕1」→ 「當按鈕被點選 執行」 拖曳出來
- 點選「標籤1」→「設標籤1文字為」拖曳到 「執行」中
- 點選「文字」→ 「””」 拖曳到 「設標籤1文字為」的右邊→ 在空格內輸入 Hello world !
- 儲存專案
- 執行程式
執行程式
執行App Inventor 的程式主要有下列幾種方式:
- 使用 AI伴侶 (手機要先安裝 APP )
- 使用模擬器
- 使用USB連接手機
- 掃描QR code
- 下載apk檔到電腦
模擬器的安裝教學請參考這篇 (模擬器軟體放在 學生網路主機→Public→App Inventor 2下面)
練習二:猜猜看
設計一個小程式,按下按鈕後會出現解答及圖片
- 將「按鈕1」的文字改為一個問題, 「設標籤1文字為」的文字改為問題的答案。
- 加入「圖像」元件
- 在圖像的「圖片」按下〔上傳文件〕隨便上傳一張圖片
圖片的檔名只能用英數字及字元 - _ ! ~ 等,不能用中文
- 修改「圖像1」的「可見性」屬性的勾勾拿掉 (此時圖片會變成隱藏)
- 進入「程式設計」畫面,在「按鈕1.被點選」的執行中加入 「設圖像1.可見性」為「真」 ( 真在「邏輯運算」中)
- 儲存專案
- 執行程式
- 進階題:如何設定按一下按鈕1圖片顯示,再按一下按鈕1圖片隱藏?(可不斷循環)
App Inventor 2 選擇敘述
一、判斷控制指令
在「程式設計」頁面左側之【方塊】→【流程控制】,接著在【工作面板】中即有判斷控制之指令,如下:
(一)單向判斷式:如果…則(if~then)
練習1:系統登入密碼輸入判斷,密碼為”12345678″,
若輸入的密碼正確,則顯示”歡迎!\n您已登入系統。”。
畫面編排:
程式設計:
(二)雙向判斷式: 如果…則…否則(if~then~else)
按下「如果…則」的方塊左上角的齒輪,即可將「否則」拖曳至「如果」之中:
就會變成「如果…則…否則」的方塊:
練習2:系統登入密碼輸入判斷進階版,當密碼輸入正確時,會顯示「登入成功」(文字為藍色),
輸入錯誤時,顯示「登入失敗」,文字變成紅色。
程式設計:
(三)多向判斷式: 如果…則…否則如果…否則(if~then~else if~else)
流程圖:
練習3:成績判斷,成績若在60~100分,則顯示“及格",否則顯示"不及格",超過100分或低於0分顯示"輸入錯誤"
畫面編排
程式設計:
階段一:判斷及格不及格
階段二:加入判斷輸入的是否為數字
階段三:加上如果分數不在0~100之間,會顯示「分數輸入錯誤」
參考下方的「邏輯」敘述
階段四:加分題:
90以上:優等
80以上:甲等
70以上:乙等
60以上:丙等
不及格:丁等
App Inventor的「邏輯」敘述
邏輯(Boolean, 布林)值:真(True)、假(False)
邏輯運算:非、等於/不等於、「與」(AND、交集)及 「或」(OR、聯集)
例如要判斷成績是否及格可以這樣寫:
因為方塊的長度太長,不容易閱讀,因此我們在可以在「與」的方塊上方按下滑鼠右鍵,選擇【外接輸入項】:
就會變成:
是不是容易閱讀多了呢?
App Inventor 2練習:BMI計算
程式練習
BMI身體質量指數之判斷:輸入身高及體重,求個人BMI值=?
BMI=體重/(身高^2),身高以公尺(M)為單位,體重以公斤(KG)為單位。
並判斷身體質量指數標準與否?
BMI的判斷標準:
BMI<18.5 體重過輕
18.5≦BMI<24 標準體重
24≦BMI<27 過重
BMI≧27 肥胖
設計畫面
下載 【app_bmi.aia】範例專案檔,進入App Inventor後台匯入專案:
就會看到「畫面編排」的畫面如下圖,裡面的文字、顏色、對齊……等屬性均可自行修改。
程式設計
導入「變數」的觀念
變數在程式中,扮演中儲存資料的角色,類似數學的「代數」,可將資料儲存在記憶體之中,在需要的時候拿出來用。
使用變數還可以簡化程式的設計,讓複雜的程式方塊變成「變數」,依照變數名稱便可一目了然該變數所儲存的資料是什麼,大大增加程式的可讀性。
使用方式
先找到「內建方塊」→「變數」,將「初始化全域變數」拉出來:
先定義三個變數: 身高(height)、體重(weight)及BMI
接著在「當按鈕1.被點選」的事件中,加入變數的取得及運算:
再來顯示計算的結果到標籤3,可以用「合併文字」來達成 (\n表示換行符號):
最後要判斷BMI是否標準,使用「如果…否則,如果…否則…」的選擇敘述:
執行結果
輸入畫面:
計算結果:
App Inventor 2練習:微型資料庫(TinyDB)
TinyDB(微型資料庫)元件
App Inventor 所寫的變數離開APP後,下次再啟動APP,變數資料就會消失。TinyDB可讓程式在重新啟動時繼續存取之前所寫的資料,例如您可以保存遊戲的最高分排行榜等。
TinyDb是不可見元件,用來儲存資料。只有「方法」(Method),沒有「屬性」(Properties)或「事件」(Events)。非關聯式資料庫,而是一種鍵值儲存的NoSQL資料庫,不需先定義各欄位的型態就可儲存資料。資料庫儲存的每筆項目如同「標籤」(tag)名稱(key)和對應值(value),只能用key取出值,或依據鍵來儲存值或依據鍵刪除資料。
不同資料項目是根據標籤(tag)來儲存。每當儲存一筆資料時,您需要指定這筆資料的標籤。因此您可依據這個標籤來取用這筆資料。如果某個標籤下沒有任何資料,則回傳值為一個空的字串。
每個應用程式只能有一個資料存儲區。如果您有多個 TinyDB 元件,它們將使用相同的資料存儲區。再者,每個應用程式都有它專屬的資料存儲區,因此無法使用 TinyDB 元件讓 Android 裝置上的兩個不同應用程式彼此傳遞資料。
微型資料庫的使用方式
微型資料庫的「方法」(Method)有以下五種:
1.將微型資料庫中所有的標籤資料傳回成一份「清單」
2.取得指定標籤下的資料,「標籤」參數必須是為文字字串;如果其下沒有任何資料,則傳回「無標籤時之回傳值」右邊的字串。
3.在指定標籤下的儲存一筆資料,「標籤」的參數必須是為文字字串;「儲存值」 可以為字串或清單。
4.清除所有TinyDB內儲存的資料:
5.清除標籤,tag 參數必須是為文字字串
練習:用微型資料庫來儲存姓名
在Android手機上利用App Inventor 2跟微型資料庫,設計一個小程式,可以儲存並修改自己的姓名,下次執行時會顯示「歡迎您,○○○」的字樣。
畫面編排:
程式設計:
1.先設計當使用者在「文字輸入盒1」輸入名字,並按下「按鈕1」之後,會觸發一個事件,將名字寫入到「微型資料庫1」的「姓名」標籤裡面,並在「標籤2」顯示「儲存成功」。
2.新增一個「當Screen1.初始化」的事件,即APP每次執行時都會觸發的事件。在該事件中需呼叫「微型資料庫1」來取得「姓名」標籤裡面的文字,如果沒有文字則回傳「這是您第一次使用」。
執行畫面:
1.第一次執行後,因為沒有「姓名」的資料,所以會顯示第一次使用的訊息。
輸入姓名後按下「儲存」,會顯示「儲存成功」:
2.中斷MIT AI2 Companion並重新連線後,可看到歡迎您的後面出現剛才儲存的姓名。
如果再次輸入其他姓名並儲存,下次執行時就會出現新輸入的姓名(覆蓋掉原來的「姓名」標籤資料)。
App Inventor 2練習:清單(List)及清單選擇器(ListPicker)
何謂「清單」(List)?
我們可以用「變數」來儲存資料,就像是「抽屜」一樣,一個抽屜只能儲存一筆資料。但是當資料的數量一多之後,我們就沒辦法幫變數一一命名(如a1、a2、a3…),會相當不方便而也沒效率。
這時候我們就可以把「抽屜」變成是一排「有編號的置物櫃」,在程式設計裡面叫做「陣列」(Array),一個陣列只需要一個名稱,後面再加上資料的編號,就可以透過「迴圈」的方式快速將裡面的資料給取出並加以運算。
而「陣列」在App Inventor 中名為「清單」(List)。
清單的宣告
先取得「變數」,再拼接「清單」,以「變數」為「清單」命名。清單中資料的數量可以按下左邊的藍色齒輪來增加。
例如我們要計算某個同學的月考(共五科)成績的總分及平均,可以先這樣設計:
清單中的每一個項目都會被「編號」,這些編號,我們稱為「索引值」(Index),App Inventor 的索引值是從「1」開始的。
清單的操作
1.取出清單資料
如果想要取出清單中某個資料,可以用「選擇清單……中索引值為……的清單項」。
例如我要取出該生的第3筆成績,可以這樣寫:
顯示的結果就會是100。
2.新增清單資料
可以在清單指定的位置處插入一筆資料。
例如我想在五個成績之前(索引值為1)的地方插入一個60分,可以這樣寫:
如此一來原本清單中的資料的「索引值」就會自動加1,也就是位置往後移一位。
如果插入的位置錯誤,例如清單資料只有6筆,插入的位置最多為7,如果你寫了10,就會出現以下錯誤:
3.刪除某筆清單資料
刪掉清單中某一筆資料:
4.取代某筆資料
修改清單中某一筆資料:
5.找出清單資料
想搜尋某個資料是否存在於清單中,可以這樣寫:
傳回的值就是該資料位於清單的索引值。如果沒有找到則傳回0。
如果有多筆資料相同? ==>傳回第一個找到的
6.隨機取一個清單中的資料
可拿來設計需要亂數產生內容的程式,例如抽獎遊戲、擲骰子、撲克牌發牌、抽籤……等等。
7.求清單的資料有幾筆
APP設計練習:
求「成績」這個清單中,所有的成績的總分及平均。
設計要領:
- 透過「迴圈」來逐一加總清單中的每筆資料。
- 要記得先求出「清單長度」(資料共有幾筆)
- 取得清單中的每筆資料時,要記得將「索引值」設定為迴圈的變數。
App Inventor 2 補充內容
MEmu 安卓模擬器
什麼是Android模擬器?
Android(安卓)模擬器就是在電腦中利用虛擬機器軟體(如VirtualBox、VMware…)將安卓以虛擬機的方式運行在電腦上,可以協助開發者開發各式安卓手機(不同版本、不同型號、不同螢幕解析度……)的APP,常見的安卓模擬器有:
- BlueStacks: https://www.bluestacks.com/tw/
- Genymotion: https://www.genymotion.com
- MEmu(逍遙安卓): https://tw.memuplay.com
- Nox Player (夜神模擬器):https://tw.bignox.com
- Andy: https://www.andyroid.net
- 雷電模擬器: https://www.ldplayer.tw
MEmu使用方式
- 官方網站:https://tw.memuplay.com
- 軟體下載: [離線安裝檔] (323MB)
開機畫面:
執行畫面:
將螢幕轉成直式:
下載 MIT AI2 Companion的 apk檔 到桌面上,然後拖曳到模擬器中央,就可以安裝完成。
執行APP的畫面如下圖:
要開始測試App Inventor程式時,點選【連線】→【AI Companion】:
畫面上會出現一個QR code跟一個六位英文字,如果是用手機執行該程式,可直接按下「scan QR code」來掃描:
如果是用模擬器,則在中間的文字欄位中輸入這六個字母,然後按下〔Connect with code〕,即可連接成功:
成功執行Android程式的畫面:
無法使用MIT AI 2 Companion該怎麼辦?
狀況一:連線中斷
如果發生了連線失敗的情形,或是修改程式後AI 2 Companion不會跟著動,此時可以按下模擬器右下角的「近期任務」,然後將畫面中的MIT AI 2 Companion向左或向右滑動,即可將程式從記憶體中移除,再回主畫面重新點選執行。
然後到 App Inventor 的界面,點擊【連線】→【重置連線】即可:
狀況二:AI 2 Companion根本連不上
大多數安卓模擬器上面運行AI 2 Companion都無法正常跟App Inventor連線,此時只能用下載打包apk檔的方式來執行。
從App Inventor的【打包apk】→ 【打包apk並下載到電腦】:
稍等幾分鐘後,會出現下載的視窗,將apk檔下載到桌面:
因為打包apk下載需要耗費伺服器大量的資源,因此要看伺服器當時的使用人數多寡,人多的時候會需要耗費較長的時間等待。
最後將該apk檔拖曳到模擬器中間,即可安裝,安裝時可能出現封鎖畫面,選擇「仍要安裝」:
完成後可看到你設計的APP出現在桌面了,點擊該APP圖示就能執行囉!
App Inventor 課程學習成果
課程學習成果參考範例
一、學習歷程檔案資料格式規定
二、資料製作方向
(一)PDF文件
請先用文書軟體編排以下內容(非制式,僅供參考):
- 簡單說明App Inventor 2的學習成果與整理過程。
- 挑選一至兩個App Inventor 2的專題
- 程式設計畫面截圖(介面可自己再設計修改)
- 程式碼截圖
- 程式流程圖(可利用Google雲端硬碟中→更多→draw.io或直接到draw.io網站繪製)
- 學習心得:
- 自己學習當中的省思
- 學到了什麼?啟發了你什麼?
- 哪個部分最有成就感?或最感興趣?為什麼?
- 過程中有何困難?如何克服?
- 對未來有什麼啟發及想法
(二) 影片
錄製一段2~3分鐘的影片,例如手機螢幕錄影、實際使用過程,並壓縮處理成5MB以內的影片。
其他點子
- 專題及創意製作競賽歷年作品集
- 中學生網站 > 得獎作品查詢 (作品性質:小論文)
專題一:電子羅盤
專題二:計步器
一、功能需求
請設計一個簡單的計步器APP,
二、元件設計畫面
三、程式設計