IS2023 Mobile Application for Business
TUTORIAL 6 – IMPLEMENTING PUSH NOTIFICATIONS IN CHAT APPLICATION
Overview
This tutorial extends Tutorial 5's chat application by implementing push notification functionality
using the Melon extension, enabling users to receive notifications for new messages when the
app is in the background.
Learning Objectives
By completing this tutorial, you will:
• Master Mobile Notification basics
• Set up local notifications
• Configure notification triggers
• Handle notification responses
• Manage notification timing
• Implement notification activities
• Test and debug notifications
Prerequisites
• Completed Tutorial 5 Chat Application
• Working Firebase configuration
• Molon extension installed
• Multiple test devices/emulators
• Basic knowledge of Kodular
1|P a g e
IS2023 Mobile Application for Business
PART I: PUSH NOTIFICATION SETUP
• Initial Configuration
• Project Settings:
o Important: Leave Package Name blank (required for Android 14 compatibility)
o Configure basic notification settings
• Install Melon Extensions:
o Download from: https://community.appinventor.mit.edu/t/melonnotification-various-styled-
notifications-itoo/130699
o Add to project components
Figure 1. Project settings – Package Name.
Figure 2. Import MelonNotification extension to ScreenChat.
2|P a g e
IS2023 Mobile Application for Business
PART II: DEMO PUSH NOTIFICATION FLOW
1. User Message Flow:
• Message sent by user
• Firebase real time database receives message
• When Firebase data change, Push Notification triggers
• Client receives notification
Figure 3. T6 Chat Push App is running in the background. Figure 4. When a push notification is received
and clicked, the chat screen opens.
3|P a g e
IS2023 Mobile Application for Business
Figure 5. When a message is read, the push notification is automatically removed from the status bar.
4|P a g e
IS2023 Mobile Application for Business
Update our exiting data structure, to add id and read key and value. Then reset the database record.
5|P a g e
IS2023 Mobile Application for Business
PART III: IMPLEMENTATION DETAILS
1. When sending message:
a. Generate unique message ID
b. Set initial read status to false
c. Store message in Firebase
2. When receiving message:
a. Firebase triggers data change event
b. Check message recipient
c. Generate notification if user is not in chat
3. When clicking notification:
a. Trigger OnAppResume event
b. Extract message data from intent
c. Navigate to relevant chat
d. Mark message as read
Figure 6. ScreenChat Initialize.
6|P a g e
IS2023 Mobile Application for Business
• Push Notification Handler:
1. When a user clicks on a push notification in the status bar, the ScreenChat’s OnAppResume Event
handler will be triggered, and the relevant data/intent data (i.e., messageFrom, messageTo, message,
id) is stored in the start value
2. Listen for new push notifications
3. Call a procedure to display chat messages between the user and the message sender
4. Remove the notification from the status bar
Figure 7. ScreenChat OnAppResume.
7|P a g e
IS2023 Mobile Application for Business
8|P a g e
IS2023 Mobile Application for Business
Figure 9. A self-define procedure procListViewClick.
9|P a g e
IS2023 Mobile Application for Business
• Users send messages with push notifications:
1. Add genID variables
2. Add a procedure – procGenId
3. Add two additional fields to the dictionary (id and read)
a. id: Each push notification requires a unique identifier
b. read: –Tracks whether the receiver has read the push notification/message
Figure 10. Updated ButtonSendMessage.Click.
Figure 11. When procGenId is called, it generates a random number.
10 | P a g e
IS2023 Mobile Application for Business
• When Firebase data changes:
1. If the message belongs to the current user and the current receiver:
i. Set the read status to true
ii. Remove the push notification from the status bar
2. If the message belongs to the current user but the receiver is not the currently selected chat:
i. If the message’s read status is false
ii. Call procedure procSendNotification to send a push notification
Figure 12. The updated Firebase_Database Data Change event handler.
11 | P a g e
IS2023 Mobile Application for Business
Figure 13. Procedure to send out a push notification.
If you encounter any issues / error messages, try to reset your Firebase DB records!
12 | P a g e
IS2023 Mobile Application for Business
PART II: TESTING AND DEBUGGING
1. Test Environment Setup
• Minimum 2 to 3 devices
• Install APK version (not Companion)
• Use different user accounts
• Ensure stable internet connection
2. Test Scenarios
1. Background Notifications:
• Send message while receiver’s app is in background
• Verify notification appears
• Check notification click behavior
2. Message Status:
• Verify read status updates
• Check notification removal
• Test multiple chat conversations
3. Known Issues
• Android 14 compatibility:
o Package name must be blank
o Otherwise receiving Push notifications will generate errors
13 | P a g e
IS2023 Mobile Application for Business
Common Issues and Solutions
1. Notifications not appearing:
o Check permissions
o Verify Firebase connection
o Confirm unique IDs
2. Notification click not working:
o Verify OnAppResume handler
o Check intent data extraction
o Validate navigation logic
PART III: SUBMISSION REQUIREMENTS
1. ScreenChat block screenshots
2. Notification flow run on devices screenshots (i.e., Test results)
3. Submit within one week
You are done!
Reference:
1. MelonNotifications Extension: https://community.appinventor.mit.edu/t/melonnotification-various-styled-
notifications-itoo/130699
14 | P a g e
