App Inventor範例教學

記帳小程式

功能說明

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

畫面製作說明

Label（標籤）、HorizontalArrangement（水平排列）、TableArrangement（表格排列）、Clock（時鐘）、TinyDB（微型資料庫）、WebViewer、Web、TextBox（文字輸入塊）、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標籤的資料，再加上今天的日期、輸入的標題和金額。