React chat app without the need of coding a backend

During the hackaweek I focused on building an hybrid chat app.

The challenge was using the same source code for both mobile platforms (Android & iOS) and creating a chat app without the need of actually code a backend service that we have then to deploy somewhere so the apps can access it.

The goal of this project was to actually answer two questions that a mobile developer is being asked or he/she even asks himself/herself from time to time.

  • How reliable are these frameworks that allow you to use the same source code for both mobile platforms (iOS, Android)?
  • Do I really need to develop a service that stores the chat message in a database, notifies the apps with the changes and is available in the cloud so the apps can use it?

I encourage you to think about those questions and answer them at the end of the post.

After some research I decided to use React for building the hybrid apps and Firebase as a backend service for the chat. Firebase was the perfect fit because with few clicks you can set a backend service and it also provides additional tools for mobile apps. React seemed to be the most promising framework to create hybrid apps since lot of famous companies, such as, Facebook, Airbnb… and a lot more are using it for their apps.

First, I am going to start with the setup of Firebase that will take you less that 10 min.

Create chat project in Firebase

The only thing that you will need is an account to be associated to the Firebase project we are going to create.

First thing is to go to the Firebase console and login.

Once you are logged in, you will find an option that will allow you to create a project.

The next scream you will see is the Project overview page. Please, take few minutes to read all the features that this framework provides.

Now, we are going to enable authentication in the chat. Go to the Authentication menu, enabled it and select the sign in methods, in our case, it will be email & Google.

In case you are not interested in requesting an account to the users of your chat, pick the anonymous method (for this you can check this documentation).

The next step is to enable the realtime database. This type of database allows storing info and notifying the clients in real time. Go to the Database menu and get started.


At the beginning the database will be empty but as soon as the native apps start sending messages you will see them there. The format of this database is actually JSON, but you will have the chance to take a look at it later.

This is all you need to do to have a backend service for your chat apps!!!

Now, it is time to build up the native clients using React and for that we will need some keys provided by Firebase. In your Project overview page click on the add app button and choose „Add Firebase to your web app“ and copy this code because we will use it in the client.

Creating native chat clients with React

So far is being really easy but this is the point where things get more challenging.

Before we start developing the app, you should go to this guide that will allow having the React native client installed in your environment in less than 10 minutes.

Instead of reinventing the wheel I used this tutorial as the base to have a very basic chat app in React and afterwards improved it and adapted according to my needs.

I encourage you to follow the tutorial but you have to save at least 2 hours for doing that. So if you are lazy, you just should clone this project and start playing with React.

When I was trying to deploy the app in either of the platforms I had to deal with a lot of different bugs. I was lucky that I was not the only one struggling so I leaving you these links to react bugs that will make your life way easier in case you want to follow the tutorial I mentioned.

In case you have cloned my project, paste the keys that Firebase provided us before in the file app/configs/firebase.js

The only thing you need to do now is to execute react-native run-ios or react-native run-android in the console from the root folder of the React project and wait to get the app installed in your devices.

The first thing you will see is the authentication screen, login and start writing messages.

A few messages later, check the Database entries and you will see how the messages are being store in JSON format.

For my surprise the app was working fine for both iOS & Android, so to get to the bottom of the subject I decided to do a native chat in Android and compare the performance.

Creating a chat app in Android

Apart for clearing my thoughts about React I also wanted to take this chance and do a quick chat app in Kotlin an get more knowledge about this amazing programming language.

This Android client you will find it this Github link. It is based on the app that is built in the Firebase Weekend course lectured by Google in Udacity. It is a course that is supposed to last 2 days but I did it in one day in less than 8h.

I encourage you to enrol in this free course because you will also get more knowledge about how Firebase works and the options of its different features offer you.

Now, I had an Android app running on my phone and a hybrid one. The only thing I could say is that the React one seem to be slower fetching the messages, but as you can experience by yourself the difference is not that big.

Conclusions

Going back to the questions I pointed out above.

I would say that Firebase is a powerful tool that enables mobile developers to get a backend service without the need of writing microservices and deploying them. It also provides you statistics about your app, user data, crashing logs, and a lot more useful features out-of-box. The main „disadvantage“ is that some of the more coolest features like the test lab or the real database have a limit in the free trial and from that limit you will have to pay. However, if you were to write a microservice for your app you will also had to pay for a hosting service. At the end it is not really a disadvantage.

As far as React is concerned, I think it is really a good framework for apps meant to be simple. I would not use it as the framework for my apps because all the bugs I found were actually solved by developers struggling like me and FB guys only appeared to close them. So what keeps me skeptical about using it is that it seems that there is no support behind it.

I hope you enjoyed this project as much as I did, and for those that want to add some advanced functionality I encourage you to try lambdas functions in Firebase, here you have a link of a lambda that changes some text by an emoji.

Thanks that another colleague was working on a chatbot I was able to integrate a chatbot in the Android app using Dialogflow library. For setting up a dialogflow project you should visit my colleague’s post and in less than 2h you will have a bot up and running messing with your users.

This is a demo video of the myToys chatbot

 

Share

Schreibe einen Kommentar