Chat function Help

Hi, I want to build an app with chat function between users. As a newbie, I’ve been reading through the forum trying to figure out how to do it but I’m still very confused. For example, what type of token would I need (Firebase token, ID token or user ID) for the app to identify the sender and receiver of the message? Can someone please provide some guidance? Also it would be great if you can advice on the database structure as well.

Thanks a lot.

1 Like

That sounds pretty complicated.

I´ve been using AppGyver for 9 months and have a published app, but would have no idea where to start. There is also not a lot of talk about this sort of thing in the forum, so its either dead simple or really hard. I´m guessing the latter.

As for a newbie, it would be a little bit too big a starter project for sure. I mean for a well-structured chat function You could either use the Realtime DB of Firebase for real-time message updates or some logic in the app for push notification handling.

The easier way to do it is to have

  1. “users” collection where You store details of a user (name, email, phone, uniqueId, etc…)
  2. “chats” collection where You store details of a chat (members [this one should be a list of ids from the “users” collection], chatName, chatLatestMessage, etc…)
  3. “messages” collection where you store all individual messages that are ever created (senderId, chatId, messageText, attachment, DateTime, etc)

In the app, you would need to use the Firebase authentication and upon registration create a record for that user in the “users” collection. I would suggest building a “profile page” where you can do specific updates to that user (email, name, password, age, etc…)

Then there is the question of how to store attachments. Since in Appgyver You can configure the unique path to the Firebase Storage, you can in fact create individual folders for each “chat” to store those attachments individually. This would enable easy deleting if a chat is archived.

And here comes another question how to handle archived chats? you can go with e.g. duplication of the regular data structure just with an extra tag “users-archive”, “chats-archive” etc…

And I didn’t even mention handling push notifications. Definitely building a chat function is pretty possible with Appgyver, but I would suggest learning for at least a few months before trying to build it, else You will just waste Your time… (Personal experience. :wink: )

1 Like

Thanks for your detail reply Mihaly.

I’ve got similar firestore structure as you suggested ie Users, Chats and Messages. In Users, there is sub-collection containing the details of a user’s contacts (= other users) which contain their name, user id and mobile number. In Chats it has sub-collection of contacts and the message contents (ie profile pic, user ids, text etc). What do you think about this setup?

As for push notification, do you know if I need to get it set up in order to send messages? I’m happy to go without notification as a start and work on it later.

I’ve been reading tutorials on appgyver and firebase, but with a non technical background there is a lot of guesswork involved and I’m sure I have already wasted quite some time making silly mistakes.

I didn’t realize it would be that difficult when I start, but don’t want to quit just yet.

The structure seems to be okay.

The notifications are not a must.

The thing that You will need is to read the new documents from Firestore.

how do I refer to the list of user ids from the Chat collection?

also with archived chats, do I simply duplicate the Chat/Message collection or there are extra steps I need to do to let firebase knows those are for archive? I haven’t thought about archiving yet, but it is a good idea.

To @AppNBeer

Um going to demonstrate to you how sending messages can be made…

First you need User UID from Auth and Users collection for ths to work

Pay attention to images below

You can see 2 users, user 2 will send messages to user1.

The user document contains activities, in Ths case, we have messaging activity , so there’s a sub collection of Messages.

Pay attention to the messages collection, we have a document,the documentID is the ID of user2.
It has be like Ths for you to identify the sender . So technically, Ths is saying, the message is from user2 because the message collectionID of Ths documents is from user2.

Now in the messages document, we have sub collection MessageBody. The message body will contain a collection of messages from both user1 and user2

You can see a document here, Ths document contains the message sent by the users, the id of Ths document is automatically generated.

NOTE, ths documents will be created both user1 and user 2 for them to see the message sent and received

Pay attention to the message body, it contains the message and the senderid… The senderid must be included because you want to be able to sort out who sent the message. You can create a logic thats like Ths, if senderid=Logged_In_userID in your app, then align message to left of the screen or right depending on your design…

So If you’re re interested in creating your message activity Ths way, I can help you

2 Likes

Wow! Thank you so much for your kindness and the time spent showing me @F_ORTELL! You made my day especially on a Monday :smiling_face:

Going to follow your guide now.

1 Like

You’re welcome, I’ll help you where ever I can

Hi! Thanks for the good explanation. I got all the steps done and my “Get collection” call receives the information of the chat back also. I cannot find the correct formula to align the text either left or right. In a card, I look at the content field and add a formula there to pick out the senderid, which works great. Now what is the function to make it align?

Hi! I have now found my solution in this thread and used conditional rendering:
https://forums.appgyver.com/t/messaging-messaging-app-design-flex-right-if-by-me-flex-left-is-by-others/4770/10

@F_ORTELL Do you mind s haring more details on t his? I understand what you posted above, but do not see how you displayed chats specific to each user.

I have a user details page, and my idea was to have users save a unique id, then when a page is pulled up their is a container repeated by t he documents with the id in the url, but since you save the data variable as a static url, I am stuck on this part.

Hola.
Una posible solución sería tener un contenedor para el usuario y otro contenedor para el contacto, ambos dentro de un contenedor

Luego para el contenedor de usuario configurar el texto con alineación a la derecha y para el contenedor de contacto configurar el texto con alineación a la izquierda .

Para identificar y mostrar si el texto le pertenece al contacto o al usuario, en la propiedad “Visible” del contenedor utilizas “formula” con la siguiente condición:

  • Si el ID del usuario actual es igual al ID del usuario del mensaje en el servidor, entonces que muestre el contenedor del usuario.
  • Si el ID del usuario actual es diferente al ID del usuario del mensaje en el servidor, entonces que oculte el contenedor del usuario.

Finalmente, el resultado será el siguiente:

Another option is to display the username below the message, but I like the look of the message above more.