IS2023 Mobile Application for Business
TUTORIAL 5 – BUILDING A REAL-TIME CHAT APPLICATION WITH KODULAR
Overview
This tutorial guides you through creating a chat application using Firebase Realtime Database and
Cloudinary for media management. The app enables real-time messaging between users with
media sharing capabilities.
Learning Objectives
By completing this tutorial, you will:
• Understand Firebase Realtime Database for real-time data synchronization
• Implement user authentication and chat functionality
• Integrate Cloudinary for media file management
• Test and debug a multi-user chat application
• Reference video: https://www.youtube.com/watch?v=U5aeM5dvUpA
Prerequisites
• Google account
• Basic knowledge of Kodular
• Completion of Tutorial 4 (Firebase setup)
• Chrome or Firefox browser
• Two or more test devices/Emulators
PART I: PROJECT SETUP
1. Project Template Installation
• Download T5_SimpleChat_template.aia from Canvas week 5 folder
• Access Kodular (www.kodular.io) Sign in with your Google account
• Import T5_SimpleChat_template.aia project
• Explore all screens, Screen1, ScreenSignUp, and particularly ScreenChat and its components
1|P a g e
IS2023 Mobile Application for Business
Fig. 1 Setting Project Theming Colour.
Fig. 2 Screen1.
2|P a g e
IS2023 Mobile Application for Business
Figure 3. ScreenSignUp.
Figure 4. ScreenChat.
3|P a g e
IS2023 Mobile Application for Business
Figure 5. Demo 3 screens on emultor.
4|P a g e
IS2023 Mobile Application for Business
2. Firebase Configuration
1. Login to Firebase Console (https://console.firebase.google.com/)
2. Project Setup:
• Select existing firebase project from Tutorial 4 or create new
• If creating new, disable Google Analytics
• Complete all setup steps
Figure 6. Select the existing project that you created in tutorial 4. (If you don't have it, create one.)
Figure 7. Note: If you've reached the project limit, please go back to choosing one of your existing projects.
5|P a g e
IS2023 Mobile Application for Business
Figure 8. To create your APP, click on Add Project button, and complete ALL THE STEPS.
Figure 9. Remember NOT to enable Google Analytics.
6|P a g e
IS2023 Mobile Application for Business
3. Database Setup:
• Click "Realtime Database"
• Create Database
• Select region: United States (us-central1)
• Start in test mode
• Configure security rules for read/write access
Figure 10. Click Realtime Database then click the Create Database button.
Figure 11. You MUST choose the default United States (us-central1)! Then click Next.
7|P a g e
IS2023 Mobile Application for Business
Figure 12. Select Start in test mode. And click Enable.
4. Configure Database Rules:
• Highly recommended: If you want to further the testing for a more extended period, you may edit the
rules as follows.
Figure 13. Click on Publish to confirm the changes. Now Firebase will allow users to write (store or append data)
and read (to Retrieve data).
8|P a g e
IS2023 Mobile Application for Business
5. Copy Database URL and configure in Kodular:
• Locate Firebase_Database components on all three screens, Screen1, ScreenSignUp and ScreenChat
• Paste copied URL to Firebase URL field
Figure 14. Click on the Data tab and copy the address of your Realtime Database.
Figure 15. Go back to Kodular, look for all the Firebase_Database components on Screen1 and then paste the
copied URL to the Firebase URL field.
9|P a g e
IS2023 Mobile Application for Business
Repeat the same step for ScreenSignUp and ScreenChat. Make sure the Project Bucket names are the same. (i.e.,
demoChat)
Note: Don’t change the Firebase Token! Don’t check on the Persist box!!!
Figure 16. ScreenSignUp
Figure 17. ScreenChat
10 | P a g e
IS2023 Mobile Application for Business
PART II: CLOUDINARY INTEGRATION
1. Account Setup
• Create free Cloudinary account (https://cloudinary.com/)
• Retrieve credentials from dashboard:
o Cloud name
o API key
o API secret
Figure 18. Cloudinary website
Figure 19. To connect your Cloudinary cloud to Kodular, retrieve the following fields from the Cloudinary
dashboard: Cloud name, API key, and API secret.
11 | P a g e
IS2023 Mobile Application for Business
Figure 20. Dashboard men button to open the API section
2. Kodular Configuration
• Configure Cloudinary component properties:
o Input cloud name
o Add API key
o Enter API secret
Figure 21. Copy and paste the 3 items to ScreenSignUp’s Cloudinary component properties.
12 | P a g e
IS2023 Mobile Application for Business
Figure 22. Review how the Cloudinary block for media management and the Firebase Database block for data
storage function together.
13 | P a g e
IS2023 Mobile Application for Business
• Test connection
Figure 23. Selected images are automatically uploaded to the Media Library in your Cloudinary account.
14 | P a g e
IS2023 Mobile Application for Business
PART III: IMPLEMENTATION GUIDE
1. ScreenSignUp Special Components and Extensions:
1. Activity Starter https://docs.kodular.io/components/connectivity/activity-starter/
2. Cloudinary Extension https://community.appinventor.mit.edu/t/cloudinary-an-extension-to-upload-files-
to-cloudinary/30237
3. ReadMediaPermissions Extension https://community.niotron.com/t/read-media-permissions-on-android-
13/15830?u=taifun
4. FileTools Extension https://community.kodular.io/t/filetools-some-tools-to-work-with-files/40051
5. You can also download them from our Canvas Week 5 Folder
2. User Authentication Flow
1. Login/Registration (Screen1)
2. Login User Verification (Check if username matches exiting records)
3. Sign-up Profile Setup (ScreenSignUp create account with username, check if username is already taken,
validate user input, upload profile picture)
4. Main chat interface (ScreenChat, access primary chat functionality, view user conversations)
Part IV: Testing and Debugging
1. Test Environment Requirements
• Minimum 2 devices
• Can be tested on both Companion or .apk build
• Same APK version installed
• Different user accounts
• Stable internet connection
2. Testing Matrix
1. Test Cases:
• User Authentication
• Message Sending/Receiving
• Media Upload/Download
• Real-time Updates
• Error Handling
3. Common Issues and Solutions
• Authentication errors: Verify Firebase configuration
• Database connectivity: Check URL and permissions
• Media upload issues: Validate Cloudinary credentials
• Build .apk error: debug your blocks
15 | P a g e
IS2023 Mobile Application for Business
PART IV: CUSTOMER JOURNEY EXAMPLE: AMY'S STORY
A narrative illustrating a typical user experience with our chat application:
Initial Experience
1. First Contact
o Amy, an enthusiastic social app user, discovers and signs up for the chat app
o She completes the registration process with anticipation
Challenge Phase
2. Initial Disappointment
o Upon logging in, Amy finds no other users in the app
o Emotional response: Disappointment [☹]
o Impact: User engagement temporarily drops
Coping Strategy
3. Strategic Withdrawal
o Amy makes a rational decision to pause her app usage
o She plans to return later, showing retained interest
o Demonstrates user resilience and app potential
Re-engagement
4. Positive Return
o Amy logs back in after some time
o Discovers an active user base has developed
o Emotional shift: Anticipation and excitement
Success Phase
5. Active Participation
o Begins sending chat messages to new users
o Actively engages in community building
o Emotional state: Joy and satisfaction [� �]
Journey Analysis
This user journey highlights three key phases:
• Initial optimism
• Temporary setback
• Successful resolution
Key Takeaways:
• Users may need time to build community
• Early user retention is crucial
• Positive outcomes depend on growing user base
• Emotional investment in platform success
16 | P a g e
IS2023 Mobile Application for Business
PART V. FIREBASE DATABASE MANAGEMENT
Figure 24. After successful sign-up and chatting with your friends, you can go to your Firebase Project Console to
check your latest records.
Figure 25. We also provided some in-app reset buttons for you to easily reset different database records.
17 | P a g e
IS2023 Mobile Application for Business
PART VI: FUTURE IMPLEMENTATION CHECKLIST
Must-Have Features
• User authentication
• Real-time messaging
• Media file sharing
• User list management
• Chat history
Future Enhancements
1. … Hidden section - Contains related question exercises
2. …
3. …
4. …
5. ..
This Simple Chat app is an early prototype that covers all essential requirements. Future
development phases will target "Should Have" and "Could Have" requirements.
1. … Hidden section - Contains related question exercises
2. …
3. …
4. …
5. …
18 | P a g e
IS2023 Mobile Application for Business
PART VII: ASSESSMENT QUESTIONS
Q1. Test Environment Configuration
Question: For the Simple Chat app testing, what is the ideal test environment setup? Detail
the minimum device requirements and explain if Kodular Companion can be used alongside
installed APK versions for testing.
Q2. Architecture Design
Question: Evaluate the pros and cons of separating login and signup functionalities into
distinct screens (Screen1 for Login, ScreenSignUp for registration). What factors should
influence this architectural decision?
Q3. Database Structure
Question: Describe the database record location and structure in Firebase Realtime
Database. How can developers access and manage these records effectively?
Q4. Feature Implementation
Question: Detail the implementation requirements for a group chat feature. Include
component requirements, event handling, and logical steps.
Q5. Quality Assurance
Question: What are the common bugs encountered during user testing? Outline testing
strategies and performance optimization techniques.
Q6. Future Enhancements
Question: Evaluate the feasibility of implementing:
a) Multiple recipient messaging
b) Group chat functionality
c) Media file sharing capabilities
What technical considerations and limitations should be considered?
Submission Guidelines
1. Complete Canvas Tutorial 5 Submission (Short Questions)
2. Submit within one week
You are done!
Reference:
1. Kodular Tutorial: https://thetechstudy.in/how-to-create-an-online-chatting-app-with-kodular/
2. Firebase Documentation
3. Cloudinary Documentation
19 | P a g e
