| - 官方網站： [http://ai2.appinventor.mit.edu/](http://ai2.appinventor.mit.edu/) （請使用Chrome開啟）
- 校內專用server： \[[文華 AI2 server](http://192.168.100.68:8888/)\] （校外無法使用）
- 模擬器下載：[[Windows版](http://appinv.us/aisetup_windows)]
- 手機開發程式(AI伴侶)：[[Google Play商店](https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=zh_TW)]
|
專案名稱只能用英文、數字跟底線符號
4.App Inventor的操作界面如下圖，右上角可切換「外觀編排」與「程式設計」模式。 [](http://blog.whsh.tc.edu.tw/app-inventor/wp-content/uploads/sites/33/2016/04/image-5.png) (點擊圖片可放大) ##### 繼續閱讀下一頁：[程式設計練習-1](http://book.whsh.tc.edu.tw/books/app-inventor-2%E6%95%99%E5%AD%B8/page/%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88%E7%B7%B4%E7%BF%92-1 "程式設計練習-1") # 程式設計練習-1 ### 練習一 1. 加入一個按鈕，將按鈕的「文字」屬性設為「Click Me!」 2. 加入一個標籤，將標籤的「字元尺寸」屬性設為「24」，「文字」屬性設為空白 3. 切換到「程式設計」畫面 4. 點選「按鈕1」→ 「當按鈕被點選 執行」 拖曳出來 5. 點選「標籤1」→「設標籤1文字為」拖曳到 「執行」中 6. 點選「文字」→ 「””」 拖曳到 「設標籤1文字為」的右邊→ 在空格內輸入 Hello world !  7. 儲存專案 8. 執行程式 # #### 執行程式 執行App Inventor 的程式主要有下列幾種方式： 1. 使用 AI伴侶 (手機要先[安裝 APP](https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=zh_TW) ) 2. 使用模擬器 3. 使用USB連接手機 4. 掃描QR code 5. 下載apk檔到電腦 模擬器的安裝教學請參考[這篇](http://swf.com.tw/?p=674) (模擬器軟體放在 學生網路主機→Public→App Inventor 2下面) --- ### 練習二：猜猜看設計一個小程式，按下按鈕後會出現解答及圖片
1. 將「按鈕1」的文字改為一個問題， 「設標籤1文字為」的文字改為問題的答案。 2. 加入「圖像」元件 3. 在圖像的「圖片」按下〔上傳文件〕隨便上傳一張圖片 圖片的檔名只能用英數字及字元 - \_ ! ~ 等，不能用中文
4. 修改「圖像1」的「可見性」屬性的勾勾拿掉 （此時圖片會變成隱藏）  5. 進入「程式設計」畫面，在「**按鈕1.被點選**」的執行中加入 「**設圖像1.可見性**」為「真」 ( 真在「**邏輯運算**」中)  6. 儲存專案 7. 執行程式 8. 進階題：如何設定按一下按鈕1圖片顯示，再按一下按鈕1圖片隱藏？(可不斷循環) [](http://blog.whsh.tc.edu.tw/app-inventor/wp-content/uploads/sites/33/2016/04/image-7.png) # App Inventor 2 選擇敘述 ### 一、判斷控制指令 在「程式設計」頁面左側之【方塊】→【流程控制】，接著在【工作面板】中即有判斷控制之指令，如下：  #### (一)單向判斷式：如果…則(if~then) 練習1：系統登入密碼輸入判斷，密碼為”12345678″， 若輸入的密碼正確，則顯示”歡迎！\\n您已登入系統。”。
畫面編排：  程式設計：  --- #### (二)雙向判斷式： 如果…則…否則(if~then~else) 按下「如果…則」的方塊左上角的齒輪，即可將「否則」拖曳至「如果」之中：  就會變成「如果…則…否則」的方塊：  [](https://sites.google.com/site/jingprogram/c/if/if-else.png?attredirects=0)練習2：系統登入密碼輸入判斷進階版，當密碼輸入正確時，會顯示「登入成功」（文字為藍色）， 輸入錯誤時，顯示「登入失敗」，文字變成紅色。
程式設計：  --- #### (三)多向判斷式： 如果…則…否則如果…否則(if~then~else if~else)  流程圖： [](https://sites.google.com/site/jingprogram/_/rsrc/1351306645145/if-elseif-else.png)練習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](http://web.whsh.tc.edu.tw/download/index.php?dir=AppInventor/&file=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/](https://www.bluestacks.com/tw/) - Genymotion： [https://www.genymotion.com](https://www.genymotion.com) - MEmu(逍遙安卓)： [https://tw.memuplay.com](https://tw.memuplay.com) - Nox Player (夜神模擬器)：[https://tw.bignox.com](https://tw.bignox.com) - Andy： [https://www.andyroid.net](https://www.andyroid.net) - 雷電模擬器： [https://www.ldplayer.tw](https://www.ldplayer.tw) ### MEmu使用方式 - 官方網站：[https://tw.memuplay.com](https://tw.memuplay.com) - 軟體下載： \[[離線安裝檔](https://www.memuplay.com/download-en.php?file_name=Memu-Setup&from=offline_installer_tw)\] (323MB) 開機畫面：  執行畫面：  將螢幕轉成直式：  下載 [MIT AI2 Companion的 apk檔 ](http://www.whsh.tc.edu.tw/download/index.php?dir=&file=ai252.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](https://www.draw.io)網站繪製） - 學習心得： - 自己學習當中的省思 - 學到了什麼?啟發了你什麼? - 哪個部分最有成就感？或最感興趣？為什麼? - 過程中有何困難？如何克服？ - 對未來有什麼啟發及想法 #### (二) 影片 錄製一段2~3分鐘的影片，例如手機螢幕錄影、實際使用過程，並壓縮處理成5MB以內的影片。 其他點子 - [專題及創意製作競賽歷年作品集](http://www.tcivs.tc.edu.tw/ischool/publish_page/122/?cid=3686) - [中學生網站](https://www.shs.edu.tw/) > [得獎作品查詢](https://www.shs.edu.tw/index.php?p=search) (作品性質：小論文） # 專題一：電子羅盤 # 專題二：計步器 ### 一、功能需求 請設計一個簡單的計步器APP， ### 二、元件設計畫面  ### 三、程式設計   