How to create an Online Chatting App with Kodular

First of all to make this app professional make a splash screen first and drag a TinyDB for save the user’s info. Now I am skipping this step and going to main part. Now, to create this chatting app you have to first create a Registration and LogIn page. I already made tutorial about how can you create Register and LogIn page using FirebaseDB. Here I have created a simple one page for registration and login both. I just dragged only one TextBox and a FirebaseDB to Store and Get value at the same page.

Here you can see how I made this screen. Set Clock’s timer interval to 3000 ms

Also set FirebaseDB’s Token and url. Now see the blocks below

Here I set the value To Store as 12345 because there is no other values. Create a Registration page to store a value. From this blocks a user can login and register. And also create a new Screen named Home and set open another screeName as Home. And see TinyDB saved the new user’s mobile number as number tag.
Now in the screen Home drag a vertical arrangement and set height and width as fill parent, rename as users. Drag ListView into this vertical arrangement and set background colour as you want. Now drag FirebaseDB and TinyDB. Set FirebaseDB’s Token and url.

Now let’s create the blocks for this screen. Also add a new screen Chat, where all chats will be appear.

Create this all blocks. The start value will be the number that you want to chat with.

Now go to Chat screen and drag a Horizontal Arrangement and set height as 10 percent and width as fill parent and set Align Vertical as Center. Now in this arrangement create a back button and drag a label after this button, where the start value will appear. Rename the back button as back_btn and the label as mobile_no. Now drag ChatView and set height and width as fill parent. After this ChatView, drag horizontal arrangement where message box and send button will appear. Set horizontal arrangement’s Align Vertical as Center and height as 10 percent and width as fill parent. Now drag a TextBox into this, rename as message_box and set height as 7 percent and width as 70 percent and set Hint as enter message here…. Now drag a Button beside this and rename as send_btn and set width as 20 percent and set Text as send, set font style as Material Icon, set font size as 40. Now drag FirebaseDb, TinyDB and Notification (from Experimental). Set FirebaseDB’s Token and url and change the Project Bucket as Chat.

Now let’s create the blocks

Here I already uploaded two icons 1.png and 2.png


Download TSChat.apk app and ask me any question. My id is TechStudy.

Click here to download apk

Download aia file

Leave a Reply

Your email address will not be published. Required fields are marked *