Skip to main content

[Make-A] Simple Chat Application using Cloud Firestore Part 1 – Introduction

 

Cloud Firestore is a cloud-hosted, NoSQL database from Firebase. It improves on the successes of the Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than the Firebase Realtime Database.

I’ve been exploring Cloud Firestore for weeks now and so far I’m enjoying my experience using it. So in this tutorial series, we are going to make a very simple chat application using Cloud Firestore. Here’s a simple product specifications that I made.

Table of Contents

  1. Part 1 – Specs and Introduction
  2. Part 2 – Setting up Firebase Cloud Firestore
  3. Part 3 – Adding a Simple Authentication
  4. Part 4 – Adding a FloatingActionButton (FAB)
  5. Part 5 – Creating a Chat Room
  6. Part 6 – Entering The Chat Room
  7. Part 7 – Displaying The Chat Rooms
  8. Part 8 – Chat
  9. 10 Exercises and Thanks!

Product Specifications

Libraries/SDKs: Firebase, (You can use more if you want)

Architecture: None (But you can do MVVM/MVP/etc)

Features:
  1. Simple Authentication
  2. Rooms
  3. Chat

1. Simple Authentication

As a user,
When I open the app,
If there’s an existing account,
Then log in with that account,
Else create a new account,
Then log in with that account

  • Display rooms screen
  • Display a message if a new account has been created
  • Display a message if user has logged in

2. Rooms

As a user,
I want to see all the rooms available,
So that I can choose which room to go to

  • Display rooms in alphabetical order
  • Clicking on a chat room opens that chat room
As a user,
I want to be able to create a room
  • Display something that the user can press to create a new room

As a user,
When I create a new room,
I want to be able to enter the room name

  • Display a field where a user can enter the room name
  • User should not be able to create a room with an empty name
  • Display an error message if user attempts to create a room with an empty name

As a user,
After I created a new room,
I want to enter to the room that I created right away

  • Display room name

3. Chat

As a user,
When I enter a room,
I want to see all messages sorted by date sent in descending order,
So that I can see the latest messages

  • Display messages that the user sent to the right
  • Display messages that the user didn’t send to the left

As a user,
When I enter a room,
I want to be able to chat,
So that I can talk with other people

  • Display a field where the user can enter his/her message
  • Display something that the user can press to send his/her message
  • The user should not be able to send an empty message

 

Let’s not waste time and let’s first setup a Firebase project.