阿旺師磨書坊: 手機App 程式設計_ AppInventor2 _ 語音行事曆

進入Appinventor. Google 輸入appinventor 。

選「MIT App Inventor」。

選「Create Apps」。

網址為:http://ai2.appinventor.mit.edu/ ... 網頁 2020年11月17日星期二 手機App程式設計_AppInventor2_語音行事曆，Clock、TinyDB、SpeechRecognizer、TextToSpeech元件的應用  題目設計一個行事曆，可選定日期，「新增」、「修改」、「刪除」該日期的工作項目。

可刪除選定日期的所有工作項目，要有「確認刪除」的對話方塊。

可刪除整個行事曆，要有「確認刪除」的對話方塊。

可連結到中央氣象局看氣象。

輸入工作項目，除了可用文字方塊輸入，也提供語音輸入。

工作項目可語音播放。

執行畫面選擇日期:新增:修改:刪除選定日期資料:清空行事曆:氣象:素材本app的icon(圖示)，可自己繪製或網路搜尋。

在Google輸入關鍵字，如 calendaricon，選擇「圖片」，可找到相關的小圖示。

找到圖片，按下去，再按右鍵，選「另存圖片」，就可使用。

但要注意著作財產權。

相關網站AppInventorTW中文學習網http://www.appinventor.tw/進入Appinventor Google輸入appinventor。

選「MIT　AppInventor」。

選「CreateApps」。

網址為:http://ai2.appinventor.mit.edu/開新專案(project)Myprojects/Startnewproject。

輸入專案的名稱，如calendar，按「OK」鈕。

 專案的名稱只能使用大小寫字母、數字及「_」符號，名稱的第一個字元必須是英文字母，不能使用中文字。

Designer(畫面編排)Screen1(頁面或稱為畫面):AppName:calendar，可以改成「語音行事曆」(出現在手機上面的App名稱，可用中文)Icon:可以上傳1個icon(圖示)(可選背景透明的圖示)，此程式在手機上面的App圖示。

按「UploadFile」鈕。

按「選擇檔案」，選一個圖示，按「開啟」，再按「OK」鈕。

右邊Properties(屬性視窗)往下拉，更改Title的值為:  語音行事曆 (原本為Screen1)。

Screen1元件相關屬性表 元件 類別 屬性 功能 Screen1   Title: 語音行事曆AppName:calendar，可以改成語音行事曆 (出現在手機上面的App名稱)Icon:可以上傳1個icon圖示。

1個Screen元件就是1個頁面(畫面) HorizontalArrangement1 Layout(介面配置) AlignHorizontal:Center(水平置中)AlignVertical:Center:2(垂直置中)Width:Fill Parent，填滿父元件，自動填滿可用空間。

HorizontalArrangement1的父元件為Screen1。

水平配置元件，讓裏面的元件可以水平對齊 DatePicker1 UserInterface(使用者介面) Text:選擇日期 日期選擇器 Label_date UserInterface(使用者介面) Text:(清空) 標籤 Button_voiceoutput UserInterface Text:語音播放 按鈕 HorizontalArrangement2 Layout Width:FillParent 水平配置元件，讓裏面的元件可以水平對齊 TextBox_input UserInterface Width:FillParentHint:輸入工作項目(提示文字)Text: 文字方塊，可以輸入工作項目 Button_voiceinput UserInterface Text:語音輸入 按鈕 HorizontalArrangement3 Layout lignHorizontal:Center(水平置中)AlignVertical:Center(垂直置中)Width:FillParent 水平配置元件，讓裏面的元件可以水平對齊 Button_add UserInterface Text:新增 按鈕 Button_modify UserInterface Text:修改 按鈕 Button_delete UserInterface Text:刪除 按鈕 Button_clearinput UserInterface Text:清除輸入 按鈕 HorizontalArrangement4 Layout lignHorizontal:Center(水平置中)AlignVertical:Center(垂直置中)Width:FillParent 水平配置元件，讓裏面的元件可以水平對齊 Button_deletedatedata UserInterface FontSize:13Text:刪除選定日期資料 按鈕 Button_clearall UserInterface FontSize:13Text:清空行事曆 按鈕 Button_weather UserInterface FontSize:13Text:氣象 按鈕 ListView1 UserInterface Height:FillParentWidth:FillParent 清單檢視器 TinyDB1 Storage(儲存)   微(型)資料庫 Notifier1 UserInterface   對話框元件(有的稱為通知) Clock1 Sensors(感測器)   時鐘元件 SpeechRecognizer1 Media(多媒體)   語音辨識器元件(可將語音變成文字) TextToSpeech1 Media   文字轉換語音元件 Notifier_clearall UserInterface   對話框元件(有的稱為通知) 如何增加Screen?按「AddScreen」(加入新的頁面)鈕，輸入新Screen的名稱，如Screen2，按「OK」鈕。

如何切換Screen?Screen2(頁面或稱為畫面):Screen2元件相關屬性表 元件 類別 屬性 功能 Screen2   Title:氣象     1個Screen元件就是1個頁面(畫面) HorizontalArrangement1 Layout(介面配置) AlignVertical:Center:2(垂直置中)Width:FillParent，填滿父元件，自動填滿可用空間。

HorizontalArrangement1的父元件為Screen1。

  水平配置元件，讓裏面的元件可以水平對齊 Button_back UserInterface Text:上一頁 按鈕 Button_forward UserInterface Text:下一頁 按鈕 Button_home UserInterface Text:首頁 按鈕 Button_calendar UserInterface Text:回到行事曆 按鈕 HorizontalArrangement2 Layout Width:FillParent 水平配置元件，讓裏面的元件可以水平對齊 TextBox_url UserInterface Width:FillParentHint:請輸入網址Text:http:// 文字方塊，可以輸入網址 Button_clear UserInterface Text:清除網址 按鈕 Button_Go UserInterface Text:Go 按鈕 WebViewer1 UserInterface Height:FillParentWidth:FillParent 網頁檢視器 Notifier1 UserInterface   通知元件(有的稱為對話框) 完整 Blocks(拼塊，程式設計)Screen1----------------------------------------------------------------說明:從Variables(變數)，拉出initializeglobalto此程式block(拼塊)。

將name改名為:item_list。

global(全域變數)可用在程式中所有程序或是事件程序內。

從Lists(清單)，拉出createemptylist此block(拼塊)，放在initializeglobalitem_listto的後面。

設定 全域變數item_list (工作項目清單)為空的list(清單)。

從Procedures(程序)，拉出toproceduredo此程式block(拼塊)。

將 procedure改名為:displaynodata，程序可為其它程序重複呼叫。

displaynodata 此程序的功能: 使用通知元件，顯示選定的日期"沒有工作項目"。

從Notifier11中，拉出 callNotifier11.ShowAlert   此block(拼塊)。

從Text(文字)類別中，拉出 join此block(拼塊)，插入到notice的後面。

從Label_date 中，拉出 Label_date.Text  此程式block(拼塊)，插入到join上面的缺口。

從Text(文字)類別中，拉出 空字串此block(拼塊)，插入到join下面的缺口。

空子串內，輸入"沒有工作項目!"此字串。

join的意思，是將Label_date.Text的文字和"沒有工作項目!"合併在一起，即選擇的日期那天沒有工作項目。

--------------------------------------------------------------------------------------------------------------------------------說明:從Procedures(程序)，拉出toproceduredo此程式block(拼塊)。

將 procedure改名為:get_data，程序可為其它程序重複呼叫。

get_data此程序的功能:從微資料庫取得某日期的工作項目。

從Variables(變數)，拉出set to此程式block(拼塊)。

選 item_list。

選create_empty_list,按右鍵，選「Duplicate」(複製)，將複製出來的  create_empty_list，移到setglobalitem_list的後面。

從Control(控制)類別中，拉出ifthen 此程式block(拼塊)。

從Logic(邏輯)類別中，拉出not 此程式block(拼塊)。

從Text(文字)類別中，拉出 isempty  此程式block(拼塊)，插入到not的後面。

從TinyDB1中，拉出 callGetValue  此程式block(拼塊)，插入到isempty的後面。

從Label_date 中，拉出 Label_date.Text  此程式block(拼塊)，插入到tag的後面。

GetValue :從TinyDB(微資料庫)中取得tag標籤名稱的資料。

如果這個tag標籤沒有資料，預設傳回空字串。

TinyDB微資料庫元件將資料儲存在行動裝置，下一次執行可再讀取出來。

TinyDB微資料庫是以一個標籤(tag)儲存一筆資料值(value)，tag-value成對儲存在資料庫。

如tag:2020/12/28，value:"國文小考"，"英文小考","看電影"表示2020/12/28這天的工作項目為 :"國文小考"，"英文小考","看電影"從Variables(變數)，拉出set to此程式block(拼塊)。

選 item_list。

選 callTinyDB1.GetValue,按右鍵，選「Duplicate」(複製)，將複製出來的callTinyDB1.GetValue，移到setglobalitem_list的後面。

如果傳回值不是空字串(表示有將選定的日期存在TinyDB)，就取出此日期的工作項目清單，再設定給  item_list此清單變數。

從Control(控制)類別中，拉出ifthen 此程式block(拼塊)。

從Lists(清單)，拉出islist empty?list此block(拼塊)，放在ifthen  的if 後面。

從Variables(變數)，拉出get此block(拼塊)。

get此block，選globalitem_list此變數，拉到 islist empty?list此block的後面。

從Procedures(程序)，拉出calldisplaynodata此程式block(拼塊)，放在then的後面。

如果item_list是空的清單，就呼叫 displaynodata此程序。

從ListView1 中，拉出 setListView1.Elementsto和set  ListView1.SelectionIndex to  這2個block(拼塊)，插入到get_data此程序內，如下:選 getglobalitem_list ,按右鍵，選「Duplicate」(複製)，將複製出來的get globalitem_list，移到  setListView1.Elementsto 的後面。

設定ListView1(清單檢視器)內的元素為 item_list此清單內容。

從Math(數值)類別中，拉出0此block(拼塊)，插入到set  ListView1.SelectionIndex to的後面。

 ListView1.SelectionIndex，使用者所選擇項目的索引值，由1開始。

如果未選擇任何項目，傳回值為0。

註:程式改成下列的寫法，如果label_date這個日期沒有工作項目，會傳回空字串。

因為item_list此清單變數不能接受空字串，會造成執行錯誤。

--------------------------------------------------------------------------------------------------------------------------------說明:設定 item_list此清單變數為空清單。

清除輸入工作項目此文字方塊的內容。

設定ListView1(清單檢視器)內的元素為 item_list此清單變數。

設定  ListView1 未選擇任何項目。

--------------------------------------------------------------------------------------------------------------------------------說明:StoreAndRefresh此程序的功能如下:將「 item_list此清單變數的內容」儲存到TinyDB1，tag標籤為選定的日期。

設定ListView1(清單檢視器)內的元素為 item_list此清單變數。

清除 輸入工作項目此文字方塊的內容。

設定  ListView1.SelectionIndex為0，表示未選擇任何項目。

--------------------------------------------------------------------------------------------------------------------------------說明:從Sreen1中，拉出 whenScreen1.Initialize  此程式block(拼塊)。

WhenScreen1.initialize的意思，當進入Screen1此畫面(一開始執行此App程式)，要初始化的事件程序。

從Label_date 中，拉出set Label_date.Text to 此程式block(拼塊)，插入到WhenScreen1.initialize   的裏面。

從Clock1 中，拉出callClock1.FormatDate  此程式block(拼塊)，插入到set Label_date.Text  to的後面。

pattern的字串改為yyyy/M/d 。

從Clock1 中，拉出callClock1.Now  此程式block(拼塊)，插入到instant的後面。

設定Label_date.Text選定的日期為取出現在的日期，格式為yyyy/M/d(年月日，如2020/11/17)。

呼叫get_data程序。

--------------------------------------------------------------------------------------------------------------------------------說明:從DatePicker1 中，拉出whenDatePicker1.AfterDateSet此程式block(拼塊)。

DatePicker1.AfterDateSet，使用者從日期選擇器選好日期後。

選set Label_date.Text  to ,按右鍵，選「Duplicate」(複製)，將複製出來的set Label_date.Text  to，移到whenDatePicker1.AfterDateSet 此程式block(拼塊)的裏面。

選 callClock1.FormatDate ，按右鍵，選Delete3Blocks，刪除callClock1.FormatDate。

從Text(文字)類別中，拉出 join此block(拼塊)，插入到set Label_date.Text  to的後面。

從DatePicker1 中，拉出DatePicker1.Year此程式block(拼塊)，插入到join的上面缺口。

從Text(文字)類別中，拉出 空字串此block(拼塊)，插入到join下面的缺口，並改成/。

join預設祇有2個參數，按*圖示，出現string，將string 插入到join裏面，變成3個string。

即合併3個字串。

從DatePicker1 中，拉出DatePicker1.Month此程式block(拼塊)，插入到join下面的缺口。

按*圖示，出現string，將string 插入到join裏面，變成4個string。

即合併4個字串。

選/  此 block，按右鍵，選「Duplicate」(複製)，將複製出來的/  block，移到join下面的缺口。

按*圖示，出現string，將string 插入到join裏面，變成5個string。

即合併5個字串。

從DatePicker1 中，拉出DatePicker1.Day此程式block(拼塊)，插入到join下面的缺口。

上面的程式的功能:設定Label_date.Text (選定的日期)為從日期選擇器選出的日期 年/月/日。

呼叫get_data程序。

--------------------------------------------------------------------------------------------------------------------------------說明: ListView1.AfterPicking從清單檢視器挑選項目後。

設定  TextBox_input.Text為清單檢視器選到的項目名稱。

 Button_add.Click，按了Button_add(新增)此按鈕。

如果TextBox_input.Text為空字串，表示沒有輸入工作項目，出現"請輸入工作內容!"的通知訊息，否則把 TextBox_input.Text加入(add)到item_list此清單內。

呼叫StoreAndRefresh程序。

--------------------------------------------------------------------------------------------------------------------------------說明: Button_modify.Click，按了  Button_modify(修改)此按鈕。

如果沒有從 ListView1 挑選項目，出現"請選取工作項目!"的通知訊息，否則使用TextBox_input.Text取代(replace) item_list此清單中被選取到的位置內容。

呼叫StoreAndRefresh程序。

--------------------------------------------------------------------------------------------------------------------------------說明: Button_delete.Click，按了  Button_delete(刪除)此按鈕。

如果 item_list此變數為空的清單，出現"沒有資料可刪除!"的通知訊息，否則 如果 ListView1.SelectionIndex=0(表示 未選擇任何項目)，則出現"請選取資料!"的通知訊息， 否則從  item_list清單中移除(remove) 從清單檢視器選取的索引值對應的內容。

 ListView1.SelectionIndex ，從清單檢視器選到的元素的索引值。

呼叫StoreAndRefresh程序。

--------------------------------------------------------------------------------------------------------------------------------說明: Button_deletedatedata.Click，按了  Button_deletedatedata(刪除選定日期資料)此按鈕。

如果從TinyDB1取得 選定日期的工作項目的內容不是空的，就顯示可以選擇按鈕的對話框(或稱為通知)視窗。

訊息為:"確定要刪除"join "選定日期"join "的所有工作項目嗎?"。

join:字串連接。

標題:刪除工作項目。

按鈕1(buttonText1)的文字為:確定。

按鈕2(buttonText2)的文字為:取消。

cancelable設為false表示不會有cancel按鈕，因為已有按鈕2。

否則  呼叫displaynodata程序。

--------------------------------------------------------------------------------------------------------------------------------說明:當使用者選擇某個按鈕,將會觸發 AfterChooseing()的事件。

如果choice(選擇)的值為"確定"(使用者按了「確定」鈕)，然後清除TinyDB1內 Label_date.Text此標籤，就是把 Label_date.Text此日期的標籤和其工作項目清除。

ClearTag:清除標籤----------------------------------------------------------------------------------------------------說明: Button_clearall.Click，按了 Button_clearall(清空行事曆)此按鈕。

出現選擇對話框的視窗。

訊息為:"確定要刪除整個行事曆的內容嗎?"。

標題:刪除行事曆。

按鈕1(buttonText1)的文字為:確定。

按鈕2(buttonText1)的文字為:取消。

如果按了「確定」鈕，然後 如果item_list是空的，然後顯示"資料庫是空的!"訊息。

 否則 清除所有TinyDB1內儲存的資料。

TinyDB1.ClearAll:清除所有TinyDB內儲存的資料。

----------------------------------------------------------------------------------------------------說明:當 Button_voiceinput(語音輸入)按鈕被按後，呼叫SpeechRecognizer(語音辨識元件)以GetText方法啟動語音辨識功能。

SpeechRecognizer語音辨識元件。

將語音傳給伺服器進行辨識，再將結果傳回。

行動裝置收到結果會觸發AfterGettingText事件，將辨識結果存於result此區域變數中。

TextBox_input.Text為原來的 TextBox_input.Textjoin result(辨識結果) ----------------------------------------------------------------------------------------------------說明:當 Button_voiceoutput(語音輸出)按鈕被按後，如果  ListView1(清單檢視器)有被選取(即索引值>0)，然後    呼叫 TextToSpeech(文字變語音)元件Speak方法，將ListView1選到的項目以語音讀出。

否則 呼叫 TextToSpeech(文字變語音)元件Speak方法，將item_list清單中的每一個項目讀出。

TextToSpeech(文字變語音)元件，把輸入的文字轉換為語音，由行動裝置讀出。

listtocsvrow:將清單轉換為CSV表格中的列row，並以CSV（comma-separatedvalue）格式回傳。

 ----------------------------------------------------------------------------------------------------說明:從Button_weather 中，拉出whenbButton_weather.Click  此程式block(拼塊)。

從Control(控制)，拉出openanotherscreenscreenName 此程式block(拼塊)，插入到whenButton_weather.Click裏面。

從Text(文字)類別中，拉出 空字串此block(拼塊)，screenName的後面，並改成   Screen2。

如果Button_weather(氣象)此按鈕被按後，開啟另1個Screen2頁面。

----------------------------------------------------------------Screen2如何切換 Screen在左上方，選新的Screen，如 Screen2。

Screen2的程式拼塊和本部落格的另一篇文章類似，就不再說明。

 手機App程式設計-AppInventor2-瀏覽器，WebViewer元件的應用------------------------------------說明:closescreen，關閉目前screen頁面。

  -------------------------------------------------------------------------------------------------------------------------如何下載apk到自己的手機 Build/App(provideQRcodefor.apk)產生此apk 的QRcode,使用手機能辨識  QRcode 的程式，如LINE，可下載此apk程式到手機上，再安裝。

使用Line「加入好友」的功能，按「行動條碼」。

按上面的連結，就可下載寫好的apk。

按下面的「下載」。

再按「開啟」，「安裝」，安裝apk。

如何下載apk到自己的電腦Build/App(save.apktomycomputer)電腦會自動下載已編譯好的apk檔。

從 BlueStacks 此模擬器開啟apk，就可執行此apk。

儲存專案MyProjects/Saveproject，將專案儲存到Mit伺服器上。

完成作品:calendar.apk註:如果登入Windows的帳號不具有管理者的權限，在BlueStacks執行此App程式會沒反應，所以選BlueStacks時，要按右鍵，選「以系統管理員身分執行」，開啟BlueStacks。

程式改良如果 日期選擇器選擇日期的方式，要使用下列日曆的方式選擇，怎麼做? 選Screen1，把  Theme的屬性值由 Classic，改成DeviceDefault。

PrimaryColor 是藍色可改成Gray(灰)色。

Theme的屬性值如果改成Dark，日曆的背景顏色為黑色，結果如下:如果在手機上執行，原有的版面設計會造成按鈕的字變成直的，很不好看，所以在設計版面時，要重新調整。

Screen1:Screen2:手機執行畫面: 張貼者： 阿旺師 於 下午2:21 以電子郵件傳送這篇文章 BlogThis！ 分享至Twitter 分享至Facebook 分享到Pinterest 標籤： A.課程設計與教學-上課實作範例-AppInventor2-語音行事曆 較新的文章 較舊的文章 首頁 搜尋此網誌 文章分類 我的網站 寄信給阿旺師([email protected]) 阿旺師的Classroom 阿旺師的教材網站 個人資料 個人簡歷 相關網站 商業與管理群群科中心學校 統測_大學四技二專落點分析 統測_技專校院入學測驗 統測_技專校院招生策進總會 進修_台北e大 進修_全國教師在職進修 進修_港都e學苑 檢定_勞動部技能檢定中心 競賽_全國技藝競賽資訊平台 瀏覽人數 熱門文章 如何在電腦上使用ADB指令操作Android手機(Howtouseadbtomanipulateandroidmobilephone) (2018/12/16最新修改版)如何安裝adb(AndroidDebugBridge)1.下載AndroidSDKTools網址:https://developer.android.com/studio/點選下面「REL... 如何刷回原廠的韌體(ROM)(Howtoflashthestockrom)－以ASUSZenfone2(ZE551ML)Android5.0為例 (2016/06/06更新版)免責聲明：刷手機原廠的ROM，有可能導至手機無法使用(手機bricked)。

所以請不要拿重要的手機來刷機，要有刷機失敗的心理準備。

參考本篇文章，若造成手機無法使用。

本人無法負責，無法接受者，請勿閱讀。

D... 使用新版Google表單，製作線上問卷調查(新版Google表單的使用說明) (2022/1/7，重新改寫整篇文章，以符合Google表單現況)主題使用Google表單，製作線上問卷調查，以電子郵件、Facebook分享、超連結或內嵌在部落格來傳送。

將最後的　回應摘要　圖片貼到Google文件，加上座號姓名（置中、字型大小：24）。

上傳到... 電腦軟體應用乙級術科解答-完成範例參考-含dataset2和dataset3 電腦軟體應用乙級術科dataset2和 dataset3 答案資料庫使用DataSet2題組一附件一題組二附件一題組三附件一題組四附件一題組五附件一題組六附件一... 如何Root手機(HowtoroottheASUSZenfone2(ZE551ML)) -以ASUSZenfone2(ZE551ML)Android5.0為例 (2016/06/06更新)免責聲明：Root手機，有可能導至手機無法使用(手機bricked)，且會失去廠商原有的保固。

所以請不要拿重要的手機來刷機，要有刷機失敗的心理準備。

參考本篇文章，若造成手機無法使用。

本人無法負責，無法接受者，請勿閱讀。

... 如何刷LG原廠的KDZRom-以LGOptimusGPro(E988v20c)為例 動機:1.刷其它的CustomROM、Recovery、Root手機，若無法在recovery救回手機，可嘗試使用此方法刷原廠的KDZROM。

2.想要手動升級(upgrade)或降級(downgrade)手機的作業系統。

免責聲明:   刷... 備審資料如何設計(如何製作備審資料)？ (2019/9/17修改)範例:參考樣本:相片目錄:內容頁數師長推薦函 簡歷表自傳讀書計劃在校成... 霍夫曼編碼(HuffmanCode)詳解 有關霍夫曼編碼(HuffmanCode)詳解，請參考程式扎記[知識小學堂]字串演算法:HuffmanCodehttp://puremonkey2010.blogspot.com/2011/02/huffman-code.html