雲端資源專題應用1

資料格式:CSV(專題1) JSONOpenData(專題2)Google試算表1(專題3)Google試算表2(專題4) App元件結合生活應用(專題5)   筆記
2016/02/07 謝碧景(c)編製更新 

 學習目標 MIT App Inventor 2:講義 http://pics.ee/w2K繁體中文: Create apps! 

  • 學會Storage資料儲存類別中【File檔案管理】元件的設計與應用。
  • 學會Media多媒體類別中【TextToSpeech文字語音轉換器】元件的設計與應用。
  • 學會Connectivity(通訊)類別中【Web網路】元件擷取網頁資料的設計與應用。

homework 專題1:英文單字集:先建立一英文單字及中文說明之資料庫,以CSV格式(Comma Separated Values)的文字檔案,即以『,』逗號分隔,每筆資料以Enter分行儲存,副檔名為『*.csv』。如下圖,當按下【隨機選字】按鈕,即隨機由資料庫中選一筆單字,播放出,並將該中文說明一併顯示當按下【再唸一次】按鈕,即再播放一次該單字【重點:學會資料庫結合TextToSpeech文字語音轉換器、『File檔案管理Web網路元件的設計與專題應用】dload 單字集: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 隨機選字】按鈕。


(三)
按下【btn1_select 隨機選字】按鈕:
  1. 隨機由elist清單中取1筆英文單字資料,如下程式,自訂程序pickWord讀取1筆英文單字資料,並分別存放eword 及cword 變數。 
  2. TextToSpeech文字語音轉換器】唸出該筆單字(會以英文唸出),啟用【btn2_again再唸一次】按鈕。
*註:資料是以清單的方式傳回,若要取得指定的欄位資料,則需再從清單中加以擷取。


(四)
當按下【btn2_again再唸一次】按鈕:TextToSpeech文字語音轉換器】再唸一次該筆單字。


五、程式設計(Blocks)頁面:

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



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

(一)Dropbox 免費網路空間 登入官網 申請帳號 講義與教學影片
  1. 請將『單字集:eword.csv』需先轉編碼換為 UTF-8 格式 (呈上方式),再上傳檔案至Dropbox雲端空間。tv 教學影片
  2. 共享檔案:將該資料檔案分享共用,以利App程式讀取單字集資料用。tv 教學影片
※注意:需將DropBox共享之連結網址 https://www.dropbox.com/s/xon4cfn3lc9fzeq/vocabulary.csv?dl=0
調整為 https://dl.dropbox.com/s/xon4cfn3lc9fzeq/vocabulary.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 講義 (dload GanttProject)Gantter Project ManagementTrello

 工具&資源網

 Trello 專案管理服務 https://trello.com/
 GanttProject:免費中文專案管理軟體,製作甘特圖。https://www.ganttproject.biz/download 參閱:講義
 Gantter Project Management:可在 Google雲端硬碟→連結更多應用程式→Gantter Project Management,即連結Gantter for Google Drive(免費試用30天)。
 MobilesWall:免費手機、平板電腦高質感桌布 http://www.mobileswall.com/
 IconsPedia:Icons & Icon Packs→Download Free PNG Icons
 App Iconizer:線上將圖片轉為 iOS、Android App 各種尺寸圖示 https://appiconizer.com/
 Windows Phone Icons Maker:Windows手機圖標製造商,可載入圖像.修剪.存圖標。含173x173Background.png、62x62ApplicationIcon.png…
 App Inventor 2 指令中文化:http://www.appinventor.tw/ai2_chinese 《摘自:AppInventor中文學習網
 輕鬆QR碼(Easy QR Code):加到 Chrome
 Free QR Code Generator:Beaconstac 免費 QR Code 產生器將網址、聯絡資訊或純文字轉QR碼,可自訂圖案。 https://www.beaconstac.com/qr-code-generator
Comments