[App Inventor 教學] 記帳本

http://www.appinventor.tw/savecsv  ->  原始碼請由此下載

功能說明

簡易記帳app,可將標題與金額儲存在 1. TinyDB ;2. 自行編寫的 php網頁,使用 Web元件。每筆資料儲存完畢之後,會使用 WebViewer 元件來顯示 php 網頁。

畫面製作說明

Label(標籤)、HorizontalArrangement(水平排列)、TableArrangement(表格排列)、Clock(時鐘)、TinyDB(微型資料庫)、WebViewerWebTextBox(文字輸入塊)、Button(按鈕)

元件類別父類別名稱該元件用途
LabelUser InterfaceLabel1顯示(輸入目的地的路徑 + 檔案名稱)
TextBoxUser InterfacetxbDestination輸入框
TableArrangementLayoutTableArrangement1提供多個元件以表格方式排列
LabelUser InterfaceLabel2顯示(標題:)
LabelUser InterfaceLabel3顯示(金額:)
TextBoxUser InterfacetxbMoney輸入框
TextBoxUser InterfacetxbText輸入框
HorizontalArrangementLayoutHorizontalArrangement1提供同一列可放兩個元件
ButtonUser InterfacebtnSave儲存
ButtonUser InterfacebtnOpen顯示
ButtonUser InterfacebtnClear清空
LabelUser InterfacelblResult顯示結果
WebViewerUser InterfaceWebViewer1取得檔案內容
WebConnectivityWeb1儲存檔案
TinyDBStorageTinyDB1儲存資料內容
ClockAnimation SensorsClock1取得當天日期

 

程式說明

Step1 宣告變數。

strACCESSKEY傳輸給網頁的判斷值

Data資料值

Step2 程式初始化時,取得存於標籤為Data的微型資料庫內的資料,並顯示在畫面上。

 

Step3 避免發生錯誤訊息時,傳給網頁的判斷值顯示出來,所以將值取代為***

Step4 判斷所有欄位是否已填寫。

Step5 當按下儲存按鈕後,若Step4所傳回來的值為”true”時,Web1.SaveResponse為不論是甚麼回應都儲存,Web1.ResponseFileName為儲存的檔案名稱,Web1.Url為應用程式所請求的網址。TinyDB1.StoreValue會將valueToStore的值儲存在標籤為Data的微型資料庫內,並先取得存於Data標籤的資料,再加上今天的日期、輸入的標題和金額。

 

Step6 GotFile元件中,判斷responsecode是否傳回代碼200200表示網站成功執行。

 

Step7 當按下儲存按鈕後,用WebViewer元件開啟檔案。 

 

Step8 當按下清除按鈕後,清空標籤為Data的微型資料庫,並清空檔案與顯示在畫面上的資料。 

手機畫面

  
 


參考網站

http://puravidaapps.com/save.php

若所儲存的csv檔內容為亂碼可參考以下網址

http://boringfreeware.blogspot.tw/2013/05/office-excel-csv.html#.U9uRuuOSza8

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *