iOS Tutorials: Making your first chat app

OVERVIEW

We are going to create your first iOS Chat application and this chat app should allow anyone to enter without having to register. We will be using Firebase here to support the application.

SETUP FIREBASE

If you have not setup your Firebase before, go to my tutorial and setup your Firebase. Once you are done, come back here and we will continue building our Chat Application. Some of the pods that we will be using here are:

Once you have them ready, you can install your pods. Next, we will have to setup the login anonymously on Firebase. 

With this, we are allowing anyone to enter into the chat room without having to type their email or so. Then we have to create our database.

Choose Test Mode so that we could read and write the database according to our needs. Before adding stuffs into our database, let create our UI first.

CREATING LAYOUT

LOGIN ANONYMOUSLY

Now that we have the layout, let’s dive into coding. Create a new ViewController for our login view.  Here in the code, we create an IBOutlet for the text field and we create an IBAction for the button. With the IBAction, we are saying that if it’s empty, it will show an alert prompting for a name and if you write your name, you may proceed.

Then we also have a section called Navigation here, with this, we are passing the name registered here into the next screen so we know who send what message.

Next, we are going to write some codes on the chat room. With this function below, we are inserting the information into Firebase notifying the firebase that a user is created.

You could see that the user was created on 3rd August with the UID. This could be useful in the future, if you would like to convert the user with the Facebook information.

SENDING MESSAGE

Let’s create some variable. We have variable name with an empty string. Remembered earlier, we passed our name into this string. This is where it stores the name. Then we create an IBOutlet for the text field.

Let’s write a simple function that can create the structure for the database. With this, we are saying, we are going to create three structure with name, message and the time stamp. And we are going to create an ID for each of them. Once we are done sending the message, the text field will become empty.

Now, I’ve send a message that says Hello everyone and it instantly goes into the database.

LOADING MESSAGE

Now that we can send message, let’s load the message on our table view. The code below basically reads the database and store the database into each constant and we will store the constant into their respective place. The messages are sort according to their post date. Lastly, every time we send a message, we will always scroll to the bottom.

Now we can see the messages loaded onto our table view.

Let’s watch how this chat app function with more than 1 user.

The code can be downloaded on GitHub

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

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

*
*