[App Inventor 教學] 記帳本

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

功能說明

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

畫面製作說明

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

元件類別 父類別 名稱 該元件用途
Label User Interface Label1 顯示(輸入目的地的路徑 + 檔案名稱)
TextBox User Interface txbDestination 輸入框
TableArrangement Layout TableArrangement1 提供多個元件以表格方式排列
Label User Interface Label2 顯示(標題:)
Label User Interface Label3 顯示(金額:)
TextBox User Interface txbMoney 輸入框
TextBox User Interface txbText 輸入框
HorizontalArrangement Layout HorizontalArrangement1 提供同一列可放兩個元件
Button User Interface btnSave 儲存
Button User Interface btnOpen 顯示
Button User Interface btnClear 清空
Label User Interface lblResult 顯示結果
WebViewer User Interface WebViewer1 取得檔案內容
Web Connectivity Web1 儲存檔案
TinyDB Storage TinyDB1 儲存資料內容
Clock Animation Sensors Clock1 取得當天日期

 

程式說明

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *