Advanced Project Tutorial: Expense Tracker App
(MIT App Inventor)
This tutorial walks you through building an advanced MIT App Inventor project: an Expense Tracker
App that stores expenses locally and displays them in a list with totals.
1 Step 1: Create a New Project
Open MIT App Inventor, click 'Create New Project', and name it 'ExpenseTracker'.
2 Step 2: Design the Interface
On Screen1, add: - A TextBox for entering Expense Name. - A TextBox for entering Amount. -
A Button labeled 'Add Expense'. - A ListView to display expenses. - A Label to show Total
Expenses.
3 Step 3: Add a TinyDB Component
From Storage, drag a TinyDB component to Screen1 (non-visible). This will store expenses
persistently.
4 Step 4: Initialize Variables
In the Blocks Editor, initialize a global list variable 'Expenses' to an empty list and a global
variable 'Total' to 0.
5 Step 5: Add Expense Logic
When Add Expense button is clicked: - Create a text join of ExpenseName and Amount. - Add it
to the global Expenses list. - Save the updated list to TinyDB. - Update the ListView and Total
Label.
6 Step 6: Load Saved Expenses on Startup
When Screen1.Initialize: - Retrieve the stored list from TinyDB. - If not empty, set global
Expenses to it. - Calculate the total and display it.
7 Step 7: Calculate Total Function
Create a procedure 'UpdateTotal' that loops through Expenses, sums the amounts, and sets
the Total Label.
8 Step 8: Test the App
Connect your device or emulator, test adding expenses, closing the app, and reopening to
verify data persistence.
9 Step 9: Enhance the App
Add delete functionality, categorize expenses, or add charts using the Chart component.
Conclusion: This project demonstrates using TinyDB for persistent data, ListView for display, and
variables and procedures for logic management. You can expand it with categories, charts, and
syncing to online services for even more functionality.
