Advanced Project Tutorial: Smart Task Manager
App (MIT App Inventor)
This tutorial explains how to build a Smart Task Manager App using MIT App Inventor. It allows
users to add, edit, delete tasks, set reminders using the Notifier and Clock components, and
synchronize tasks to the cloud using Firebase DB.
1 Step 1: Create a New Project
Open MIT App Inventor, click 'Create New Project', and name it 'SmartTaskManager'.
2 Step 2: Design the Interface
Add the following to Screen1: - TextBox for Task Title. - TextBox for Task Details. - DatePicker
for due date. - TimePicker for due time. - Button 'Add Task'. - ListView to display tasks. - Button
'Edit Task' and 'Delete Task'. - Label to show status.
3 Step 3: Add Non-Visible Components
From the palette: - Drag a Clock component (for reminders). - Drag a Notifier component (for
alerts). - Drag a FirebaseDB component (for cloud sync). Set FirebaseDB URL to your Firebase
project URL.
4 Step 4: Initialize Variables
In the Blocks Editor: - Create global list 'Tasks'. - Create global variable 'SelectedTaskIndex'. -
Create global variable 'Reminders'. This will keep track of tasks with due times.
5 Step 5: Add Task Logic
When Add Task button clicked: - Collect data from TextBoxes, DatePicker, and TimePicker. -
Create a dictionary or combined string containing all details. - Add it to global Tasks. - Store
updated Tasks to FirebaseDB (tag 'Tasks'). - Update ListView with tasks.
6 Step 6: Edit and Delete Task Logic
When a task is selected in ListView: - Set global SelectedTaskIndex to selection index. -
Populate TextBoxes with task details. When Edit Task button clicked: - Update the selected
task in global Tasks. - Save to FirebaseDB. When Delete Task button clicked: - Remove task
from global Tasks. - Save to FirebaseDB. - Refresh ListView.
7 Step 7: Load Tasks on Startup
When [Link]: - Call [Link] tag 'Tasks'. - When
[Link]: -- If value not empty, set global Tasks. -- Update ListView.
8 Step 8: Set Reminders with Clock Component
When a new task is added with a due time: - Add its due time to global Reminders. -
[Link] checks every minute if current time matches any reminder. - If matched, show
Notifier alert with task details.
9 Step 9: Test the App
Connect your device or emulator. Add tasks, edit them, delete them, and check that reminders
and cloud syncing work.
10 Step 10: Enhance the App
Add user authentication, color-coded priorities, or integrate Google Calendar API (via Web
component) for more advanced scheduling.
Conclusion: This Smart Task Manager App demonstrates using FirebaseDB for cloud storage,
Clock for scheduled reminders, Notifier for alerts, and ListView for task management. It is a step up
from local-only apps and showcases MIT App Inventor’s ability to handle real-world app logic.
