# 111-1 行動裝置應用實習(App inventor) 網站 https://appinventor.mit.edu/ wikipedia上的介紹 https://zh.wikipedia.org/zh-tw/MIT%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E8%80%85 ## 簡介 Android 作業系統是一個以 Linux 為基礎的開放原始碼作業系統,中文俗稱 為「安卓」,其起源最早是在西元 2003 年由安迪魯賓(Andy Rubin)所開發製 作,目前由 Google 公司成立的開放手持設備聯盟 Open Handset Alliance(OHA) 來持續開發主導。 Android 作業系統的應用層面,最早是由智慧型手機開始,後來逐漸擴展到 平板電腦及其他領域上,在西元 2010 年底,Android 作業系統成為全球第一大 智慧型手機作業系統,其市佔率超過 Apple 公司的 iOS 作業系統。 Google 公司在西元 2010 年,為了讓更多人在沒有程式基礎的狀況下,能 夠開發 Android 裝置應用程式,推出 Google App Inventor for Android 工具軟 體,讓使用者可以運用拼圖模式來組合程式語法,進而發展 Android 裝置的應用 程式。後來,Google 公司在西元 2012 年將此軟體,移轉給美國麻省理工學院 (MIT)的行動學習中心(MIT Center for Mobile Learning)來維護。 麻省理工學院是在西元 2013 年 12 月 3 日推出 MIT App Inventor 2 網站,提 供免費的雲端服務,使用者可以透過瀏覽器來開發 Android 裝置應用程式,該網 站的網址為:「https://appinventor.mit.edu/」 網站上提供了許多詳細的教學資源,來引導使用者進入 App 應用程式開發 的世界,使用者開發完成的程式,可以下載到任何使用 Android 作業系統的裝置, 包括:智慧型手機或平板電腦。 ## 開發環境 **app inventor開發無須安裝,整個開發過程皆使用瀏覽器在網站上完成。** ![](https://i.imgur.com/c6L3tRK.png) **點選後,會開啟登入畫面; 請使用google帳號登入** ![](https://i.imgur.com/JKeazDO.png) **第一次登入,首先出現歡迎畫面** ![](https://i.imgur.com/UxhubDd.png) **若之前未開發過任一app,則專案(project)下為空白** ![](https://i.imgur.com/FGomJlN.png) --- ## 2022.09.13. BMI計算機 素材下載 https://hhvstncedu-my.sharepoint.com/:f:/g/personal/tseng_ms_hhvs_tn_edu_tw/ErGx4MkiXmxNp88AvsPfRkQBm79svQGNk4-4cjw_lHJbSA?e=KheRo3 畫面安排 ![](https://i.imgur.com/c6R7ZHk.png) ![](https://i.imgur.com/JC1hpNH.png) BMI標準(來源:衛福部) https://www.hpa.gov.tw/Pages/Detail.aspx?nodeid=542&pid=9737 ![](https://i.imgur.com/RuNs7lf.png) 程式碼: ![](https://i.imgur.com/Q3VArB8.png) 使用變數:將BMI計算獨立為全域變數 BMI值只取小數點後2位 除了以文字顯示說明體重狀況,並以 **顏色** 加以識別 ![](https://i.imgur.com/NHad2Je.png) 加上語音說明(使用文字語音轉換器) ![](https://i.imgur.com/Jt35vpp.png) --- ## 雙向即時翻譯機 title素材檔 ![](https://i.imgur.com/QcQsmir.png) mic素材 ![](https://i.imgur.com/wkorGCc.png) ![](https://i.imgur.com/TKbYQj5.png) ![](https://i.imgur.com/CnIKmXF.png) 請修改為可即時翻譯為英、日、韓 ![](https://i.imgur.com/tFJExvr.png) ![](https://i.imgur.com/zqQW2nv.png) ## app inventor全新官方模擬器(android 11) ![](https://i.imgur.com/YgnQj1t.png) ![](https://i.imgur.com/IgInn8E.png) ![](https://i.imgur.com/yhZMlYs.png) [https://appinventor.mit.edu/explore/ai2/setup-emulator.html](https://appinventor.mit.edu/explore/ai2/setup-emulator.html) ## 英文單字卡 單字檔(請參照google classroom課程中訊息串) ![](https://i.imgur.com/gbroR0k.png) ![](https://i.imgur.com/zJH6tff.png) ## App inventor 使用 Google Sheet * 透過Google Form來輸入與讀取google sheet 1. * 建立Google Form![](https://i.imgur.com/zG7QfBF.png) 若使用機構帳號登入者,請留意..取消"僅限****機構中的使用者",否則無法正常輸入![](https://i.imgur.com/eGn0VD2.png) 2. 建立回覆的試算表![](https://i.imgur.com/Sx1lfaC.png) 3. 開啟該試算表,並點選共用->發佈到網路[](https://i.imgur.com/pYUOMiA.png) 4. 發佈到網路->選擇"表單回應1" 與 "逗號分隔值"![](https://i.imgur.com/5oBqPss.png) 5. 複製網址![](https://i.imgur.com/OJp8N1z.png) **此網址是用來讀取google sheet上資料用** https://docs.google.com/spreadsheets/d/e/2PACX-1vTNvejNuxenVGngSjpbUksDVt7aTOLXrZFAGZgtJsby8pq8AlPaVADogkjHRbAL2ueFesfWJDqt2TjR/pub?gid=848163011&single=true&output=csv 6. 取得預先填入的連結![](https://i.imgur.com/WOb3t0w.png) a. 取得欲輸入的欄位name![](https://i.imgur.com/gLUFFd5.png) 取得第一個欄位的name![](https://i.imgur.com/Jqh0UcD.png)![](https://i.imgur.com/3NeB34k.png) entry.161920771 同樣方式,取得第2個欄位的name ![](https://i.imgur.com/Y9VQS3p.png)entry.262118456 8. 紀錄表單的ID ![](https://i.imgur.com/cywT4mn.png)1lmAm4XfgPTKt7GvGNgVrdYeRa1JLQ_4hj7CqhGwlv3Y 9. 組合**寫入**google sheet的網址 https://docs.google.com/forms/d/googleFormID/formResponse?欄位1的name值=文字輸入盒1&欄位2的name值=文字輸入盒2 https://docs.google.com/forms/d/1lmAm4XfgPTKt7GvGNgVrdYeRa1JLQ_4hj7CqhGwlv3Y/formResponse?entry.161920771=地點1&entry.262118456=事件1 10. 使用瀏覽器先測試上述資料是否能夠正常動作(如下圖)![](https://i.imgur.com/DIgOMo5.png) 11. 開新的App inventor專案,使用兩個"文字輸入盒"與一個"按鈕",做為資料輸入,一個"網路"做為資料發送![](https://i.imgur.com/lkudPYn.png) 12. 切換到"程式設計":寫入資料 ![](https://i.imgur.com/KLvxTHI.png) 完成此段程式,即可正確將兩個文字輸入盒中的資料送至Google Sheet對應的欄位, 上圖中合併文字第一筆資料為:https://docs.google.com/forms/d/1lmAm4XfgPTKt7GvGNgVrdYeRa1JLQ_4hj7CqhGwlv3Y/formResponse?entry.161920771= 13. 讀取資料程式 增加一個web元件,作為讀取資料使用 ![](https://i.imgur.com/NBBsNk7.png) 再新增一個button作為讀取資料,label做為讀取後資料顯示 ![](https://i.imgur.com/jwxG8oN.png) 切換到程式碼頁面 ![](https://i.imgur.com/Q2Numy6.png) 上圖中"發佈到網路的連結"指的如下圖所示 ![](https://i.imgur.com/DHuaQLa.png) ![](https://i.imgur.com/srduiYI.png) 如上程式碼,即可在文字標籤顯示所有google sheet上的資料(未整理) * ### 把上述讀取資料部分,修改為單一函式 * 定義一個新程序 ![](https://i.imgur.com/ZxcJnRz.png) * ![](https://i.imgur.com/CYimqnE.png) * 程式碼如下 * ![](https://i.imgur.com/qqgOxms.png) * 原button2(讀取資料的按鈕)更改為 ![](https://i.imgur.com/bt5kesP.png)即如同前面讀取資料功能 * ### 把原始資料轉清單 * 1.使用csv表格轉清單![](https://i.imgur.com/KpINJGt.png) * 2.格式化顯示內容 * ![](https://i.imgur.com/x69kj5Z.png) ## MIT App Inventor Extensions 連結[link](http://mit-cml.github.io/extensions/)