雲端資源專題1

2016/02/07 謝碧景(c)編製更新

學習目標

  • 學會Storage資料儲存類別中【File檔案管理】元件的設計與應用。

  • 學會Media多媒體類別中【TextToSpeech文字語音轉換器】元件的設計與應用。

  • 學會Connectivity(通訊)類別中【Web網路】元件擷取網頁資料的設計與應用。

◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)

◆專題1：英文單字集。

  • 先建立一英文單字及中文說明之資料庫，以CSV格式(Comma Separated Values)的文字檔案，即以『,』逗號分隔，每筆資料以Enter分行儲存，副檔名為『*.csv』。如下圖，當按下【隨機選字】按鈕，即隨機由資料庫中選一筆單字，播放出，並將該中文說明一併顯示；當按下【再唸一次】按鈕，即再播放一次該單字。【重點：學會資料庫結合『TextToSpeech文字語音轉換器』、『File檔案管理』及『Web網路』元件的設計與專題應用】。單字集：eword.csv。(專案名稱[本機版]：vocabulary.aia、[雲端版]：vocabulary_web.aia)

  • 英文單字集‎(vocabulary)‎

一、專題發想

二、資料庫製作

(一)開啟『Excel』軟體建置


  • 每筆資料含英文單字(第1欄)、及中文說明(第2欄)，後存檔：【檔案→另存新檔→存檔類型：CSV(逗號分隔)(*.csv)→本範例：檔名為 eword.csv】，因Excel存檔時是採ANSI編碼，而APP Inventor 2 是UTF-8格式，若直接讀取會顯示為亂碼呈現。【參閱： Excel 講義】


(二)開啟『筆記本』(NotePad)軟體轉換格式


  • 在【筆記本：檔案→開啟舊檔→檔名為eword.csv，如下左圖；讀取後再轉換格式存檔：【檔案→另存新檔→如下圖，存檔類型：所有檔案(*.*)→編碼：UTF-8→檔案名稱相同→後按下存檔→取代(按下『是』)】，即可轉換編碼格式。

  • 筆記本開啟

  • 轉換格式存檔

  • 取代為UTF-8格式

三、畫面編排(Designer)頁面

  • 程式執行

  • 按下【隨機選字】按鈕

  • 按下【再唸一次】鈕

  • 即介面配置，如下圖，Screen1屬性【畫面方向→設定『鎖定直式畫面』】，以利介面配置編輯時為垂直的方向。

  • 使用元件及其屬性設定：

  • 介面配置：

＊註：如上右圖，素材：請分別按下【上傳文件】→eword.csv 單字集資料庫，及logo.png 圖檔(可利用影像處理軟體製作Vocabulary圖檔，例如：PhotoImpact→文字工具)。

四、程式設計(Blocks)頁面

    • 以『本機資料庫』為例：(專案名稱[本機版]：vocabulary.aia)

(一)定義全域變數

(二)程式開始執行

  1. 設定Screen1初始狀態，『畫面方向』屬性→設定『鎖定直式畫面』，不核選『允許捲動』，以利介面配置時為垂直的方向。

  2. Media多媒體類別中【TextToSpeech文字語音轉換器】使用的語言【en】(即english)，會以英文唸出。

  3. Storage資料儲存類別中【File檔案管理】讀取資料路徑，若讀取本機『素材』，路徑為【//檔案名稱】。

  4. 待File檔案管理器讀到檔案後，會將取得之文字內容透過『CSV表格轉清單』存至elist 變數，並啟用【btn1_select 隨機選字】按鈕。

＊註：測試_顯示讀取資料，即全域變數elist 的資料內容：您可如下圖，另設定 LabelShowText標籤.文字屬性顯示出(測試用)。

(三)當按下【btn1_select 隨機選字】按鈕

    1. 隨機由elist清單中取1筆英文單字資料給予區域變數elistselect，如下程式，自訂程序pickWord讀取1筆英文單字資料，並分別存放eword(單字資料的第1欄)及cword(資料的第2欄)變數。

    2. 以【TextToSpeech文字語音轉換器】唸出該筆單字(會以英文唸出)，並啟用【btn2_again再唸一次】按鈕。

＊註：資料是以清單的方式傳回，若要取得指定的欄位資料，則需再從清單中加以擷取。

(四)當按下【btn2_again再唸一次】按鈕：

  • 以【TextToSpeech文字語音轉換器】再唸一次該筆單字。

五、程式設計(Blocks)頁面

  • 以『雲端資料庫』為例：(專案名稱[雲端版]：vocabulary_web.aia)

  • 本範例以『Dropbox 免費網路空間』：將資料檔案上傳至雲端空間，若欲更新資料庫內容，只需置換檔案即可，而已安裝之App程式即可即時更新讀取資料。

(一)Dropbox 免費網路空間：

  1. 請將『單字集：eword.csv』需先轉編碼換為 UTF-8 格式 (呈上方式)，再上傳檔案至Dropbox雲端空間。 教學影片

  2. 共享檔案：將該資料檔案分享共用，以利App程式讀取單字集資料用。 教學影片

※注意：需將DropBox共享之連結網址【https://www.dropbox.com/s/f4dcm17cvikg0ss/eword.csv?dl=0】如下圖示。

調整為【https://dl.dropbox.com/s/f4dcm17cvikg0ss/eword.csv?dl=0】以利App Inventor2 讀取網址適用。

(二)程式開始執行：

  • 調整資料來源，請使用【Connectivity通訊類別中→『Web網路』元件→請先設定連結網址→再呼叫【Web網路』元件執行GET請求】方法。

＊註：Web網路元件可讀取指定網站的資料，而讀取的資料為文字檔格式。

(三)Web網路元件讀到檔案後

  • 會先取得『回應程式碼』，先判斷：若值為200，則代表讀取成功；若成功則將取得之『回應內容』透過『CSV表格轉清單』存至elist 變數，並啟用【btn1_select】按鈕。

＊註1：上述【執行GET請求】方法讀取時，會觸發取得文字事件(預設讀取的資料格式為純文字)，並以參數回應內容取得資料，參數回應類型為取得的資料型態，而參數回應程式碼代表讀取狀況，若等於200，表示已成功取得資料。

＊註2：測試回應內容的文字：您可如下圖，另設定 LabelShowText標籤.文字屬性顯示出(測試用)。

(四)其餘程式同上(本機版)，即可測試執行結果。

六、下載 .apk

  • 先以QR碼掃瞄器掃描二維條碼，接著下載*.apk檔，安裝至手機執行結果：選取功能列【打包apk→打包apk並顯示二維條碼】(註：此二維條碼僅維持2小時)。

    • 延伸思考：英聽單字考試，由資料庫取出英文單字，先以TextToSpeech文字語音轉換器唸出，應試者再輸入該英文單字(文字輸入盒)比對，答對得2分，請顯示其得分。(檔名：voiceExam.aia)

工具&資源網

◆ GanttProject

  • 操作步驟：

  • 工作面板：

  • 檢視 PERT Chart：

◆Gantter Project Management

◆Trello 專案管理

  • 官網 https://trello.com/

  • Trello：一個看板為一個專案、列表(如下圖：資源、代辦事項、已完成) 下可新增卡片(即事項)，按下【邀請】可發 emai 邀請其他成員共同合作設計專案內容。