Making a Web plus Mobile Chat App from Scratch with your own Server using Pusher
HOLA GUYS!!! Finally, we have come to the last part of our series of making a chat app. In this blog, we are going to make the mobile version of our chat app using React Native. To run the app easily and quickly, we will use EXPO CLI to test our app and finally publish it on expo for others to use it. As discussed in the first part, we will use pusher to handle our realtime messaging feature. In the first part, we made an account on Pusher and created a new channel app. We selected our front-end(React) and back-end(Node) environment and it gave us the code we need to add in our app. So using the same channel app’s credentials, we will integrate pusher into our React-Native app for realtime features. This will help us to chat via mobile to web app also, and we will be having both of our mobile and web chat app linked to the same server.
If you want to navigate to any other part of this series, here are they:
- Coding the ReactJS Chat App for Web.
- Coding the NodeJS Server for Chat App.
- Coding the React-Native Chat App for Mobile.
I have already built the app. If you want to try it, then you can either install its apk from here or you can scan the following QR code using the EXPO app (from play store) :
As mentioned in the two initial blogs also, I will not discuss each and every bit of code in the blog, I will discuss only the main functionalities. If you get stuck anywhere, feel free to follow the source code provided in this github repo. Also, we have our all end-points ready to fetch data from which we made in the second blog of this series where we made our NodeJS server. We will use them here. So without wasting much time, let us now start with our app.
Making of the App
Initiate the app using the command “expo init app-name”. This command will make a folder with the name app-name and all the necessary files initiated in it. We will start with App.js file which will handle the navigation between different activities of the app and the main source code will be written in a folder named ‘app’ inside the root directory. We are going to have three major screens, i.e Sign-in, Sign-up, and the MainScreen. So we will add all three of them to a stackNavigator to navigate between them.
Here you can see that at the third place, we have added a ‘DrawerNavigatorExample’ screen and not the MainScreen. This is because we are going to have other subscreens like that of sending friend requests and accepting friend requests inside the MainScreen, and the navigation between these screens will be done using a drawerNavigator. This is that drawerNavigator that we have added here. Here is our drawerNavigator :
Here you can see that we have added a contentComponent inside this drawerNavigation. It is used to customize our drawerNavigator. You can see our drawerNavigation in the third photo shown above. The code for this ‘drawerContentComponent’ is here :
So with this we complete our App.js file. The code for it is also shown below :
Sign-In and Sign-Up Screens
To register yourself, you need to pass four fields, your username, email, password and the imageURL like we did in the ReactJS app. Make your screen with whatever UI you like, but just to make it a little more interactive, put a image component in which we will display our image from the imageURL pasted by the user. Upon clicking on the register button, a post call will be made on the server, submitting the user’s data, and if user successfully get registered, he will get his data back from server. Also, since the user is registering for the very first time, he won’t have any friends yet, so to the main screen, we will pass the user’s data like name, email etc and an empty list of friends. Here is the code of register screen :
Similarly, for sign-in screen, we need only two input fields i.e email and password. When user submit these credentials, call will be made to server, which will verify the user and will send him back his data and the list of all his friends, which will then be passed to MainScreen from the sign-in screen. Here is the code for sign-in screen :
Coding the MainScreen
As discussed earlier, our MainScreen consist of three sub-screens i.e the chat screen, sending friend request screen and accepting friend request screen. The very first screen to be shown when user enters after signing-in is the Chat-Screen. Inside this screen, we will have our contacts loaded at the top of the screen so that the user can select the friend with whom he wants to chat. The list of all the friends have been passed to this ChatScreen by Sign-in screen. We just have to display it here. The layout of this screen is as shown :
And the corresponding code for it is as shown :
One thing to note here is that we can’t have the same layout for all our displayed contacts. The one with whom we are chatting has to be shown differently. So for this, we will have a state variable called friend which will have the info of the chatting friend inside it.
So while displaying each card, we will compare the name field of each card with ‘this.state.friend.name’. If they are same, we will remove the background and the border of the card and for the remaining, nothing will be changed. Also, the details under the friend state variable have to be set when we click on a card. So for that, we have also provided a method for the onPress field of each card which will load the data inside this friend state variable and also the messaging data of the corresponding friend by making a request to the server. Here is the method :
Now to show the messages, we will again use a list, but his time it has to be a vertical list. The list of messages fetched from the server have the name of the person who sent the message and the message data. So while displaying the data inside the message list, we will compare the name of the user who sent the message to the current logged in user. If the name matches, that message will be shown right side with black background, otherwise it will be rendered on the left side with green background. The complete code for ChatScreen is as shown below :
The final functionality left here is the sending message to the other user. Now, this is where the pusher comes in to make the messaging realtime. We have an input box and a button to send the message. When the user clicks on the send button, a call is made to the server where we send the message and other details to it. We load the message inside our messaging list and the server triggers the pusher on the channel to which our friend is already connected. This triggering causes the method of pusher written inside ‘componentWillMount’ to run. When this method runs, a call is made to the server by the other user which fetches up the data with a new message and load it inside the messaging chat of the other user. Along with this, the contact list of both the users also gets reshuffled bringing the most recently contacted friend to the top. The same happens when the other user sends a message to us and we achieve the realtime functionality.
Let us now integrate the sending and receiving friend requests functionalities. We already have the drawerNavigator implemented in our MainScreen. We just need to code the remaining two screens to complete the navigation.
Sending Friend Requests
We don’t have much work here. We just have to make a request to the server to fetch the list of all users of the app and have to display it inside the screen. One thing to note here is that we should not show the ‘send’ button for those who are already our friends. To do so, while displaying the all user list, we will check if the name of that user is present inside our friend list. If so, we won’t show the button, otherwise, we will.
Here we have added follow() method for the onPress of follow button. This method makes a call to the server, ending the data about who sent the friend request to whom. The server put this data in the ‘frndrqst’ table, and next time when the other user opens the request tab, he will be shown the corresponding request.
Accepting Friend Request
This is also alike the sending friend requests screen. Here also, the list of requests is fetched from the server, shown in a list with an ‘Accept’ button against each card. When the user clicks on the accept button, the server is notified about it. The server add the users to each others friend’s table. Next time when a call is made to server for displaying the contact list, that friend’s data also come and both users can then chat freely. The corresponding code for it is as shown :
So with this done, we complete the coding part of our app. Now we need to host it on EXPO so that anyone with the expo app can use our app. To do so, run your app in one terminal using the command ‘expo start’, and in another terminal, run the command ‘expo publish’ to finally publish the app. Follow this tutorial guide for more help to publish the app and this tutorial guide to generate the apk for your app. You will be provided with the QR code and now anyone can use your app.
So with this, we complete our series of making a chat app from scratch with our own server. It is just a basic app and many other functionalities can be added to it. But for now, it is all that we needed. If you find any difficulty or bug in the app, feel free to refer the corresponding code for it on github or you can ask it in the below comment section.
THAT’S ALL FOLKS!!!! Thank you.
