Create a new Firebase Firestore database to store chat messages

How to Create a new Firebase Firestore database to store chat messages

1. Go to the Firebase Console (https://console.firebase.google.com/) and sign in with your Google account.
2. Click on the project you want to add Firestore to or create a new project.
3. In the left-hand menu, click on the “Database” option.
4. Under the “Realtime Database” option, click on the “Create database” button.
5. In the “Start in test mode” screen, click on the “Enable” button. This will allow you to read and write to the database from any client.
6. Once the Firestore is enabled, you can start adding data to the database.
7. To add a new collection for the chat messages, click on the “Add Collection” button in the top-right corner of the Firestore dashboard, and give a name to the collection, for example, “messages”.
8. To add documents to the collection, click on the collection name in the left-hand menu and then click on the “Add Document” button. Then, you can add fields to the document such as the sender, message, and timestamp.
9. You can also use the Firebase JavaScript library to add data to the Firestore database in your Vue.js application. For example, you could create a new Vue component that allows users to submit chat messages to the Firestore collection:

<template>
  <div>
    <form @submit.prevent="submitMessage">
      <input v-model="message" placeholder="Enter your message">
      <button type="submit">Send</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    }
  },
  methods: {
    submitMessage() {
      this.db.collection("messages").add({
        sender: "User1",
        message: this.message,
        timestamp: firebase.firestore.FieldValue.serverTimestamp()
      });
      this.message = "";
    }
  },
  created() {
    this.db = firebase.firestore();
  }
}
</script>

10. Remember to set up the Firestore rules to allow read/write access from your application. You can do this in the Firebase console, under the Firestore tab.

Note: The Firestore database is a NoSQL database, it’s different from the traditional SQL database, it’s a document-oriented database, you don’t need to define the schema of the collection before you add data.