How to build a chat functionality using Codeless

[mark-piller]

Welcome to this cookbook recipe, your comprehensive guide to adding a chat function to your app effortlessly. In this recipe, we’ll exclusively utilize Backendless Codeless for all the essential logic, complemented by carefully crafted CSS for message styling and positioning. For a complete and detailed tutorial, we recommend pairing this recipe with the video tutorial linked below, which offers in-depth, step-by-step guidance:

Building a Chat App (Part 1)

1. Create a page, and add all the layout components as instructed in the video. Throughout this recipe, the components will be identified as shown below:
   

   

2. Install the Simple Modal component on the COMPONENTS tab. Add the installed component to the page and configure it as shown below (make sure to assign the nickNamePrompt id to the component on the page):
   

   

3. Add the following logic to the Page’s On Page Enter event:
   

   

4. Add the following logic to the On Key Down event of the messageInput Text Component
   

   

5. Add the following logic to the messageInfo Block’s Visibility Logic:
   

   

6. Add the following logic to the Class List Logic of the receivedMessage Text Component:
   

   

7. Assign chat CSS class to the messages Block (this is the Block marked as repeater):
   

   

8. Switch to the THEME tab and create a new extension. Add the following styles to the extension:

.chat {
  --rad: 20px;
  --rad-sm: 3px;
  font: 16px/1.5 sans-serif;
  display: flex;
  flex-direction: column;
}


.msg {
  position: relative;
  max-width: 75%;
  padding: 7px 15px;
  margin-bottom: 2px;
}

.msg.sent {
  border-radius: var(--rad) var(--rad-sm) var(--rad-sm) var(--rad);
  background: #42a5f5;
  /* moves it to the right */
  margin-left: auto;
}

.msg.rcvd {
  border-radius: var(--rad-sm) var(--rad) var(--rad) var(--rad-sm);
  background: #f1f1f1;
  /* moves it to the left */
  margin-right: auto;
}

.msg.sent span {
    color: #fff;
}

.msg.rcvd span {
    color: #555;
}

/* Improve radius for messages group */

.msg.sent:first-child,
.msg.rcvd+.msg.sent {
  border-top-right-radius: var(--rad);
}

.msg.rcvd:first-child,
.msg.sent+.msg.rcvd {
  border-top-left-radius: var(--rad);
}


/* time */

.msgBefore {
  font-size: 0.8rem;
  color: #888;
  white-space: nowrap;
}

.msg.sent::before {
  right: 15px;
}

.msg.rcvd::before {
  left: 15px;
}


/* Show time only for first message in group */

.msg:first-child::before,
.msg.sent+.msg.rcvd::before,
.msg.rcvd+.msg.sent::before {
  /* Show only for first message in group */
  display: block;
}

9. Select the Simple Modal component (identified as nickNamePrompt) and add the following logic to the On Submit Event:
   

10. Add the following logic to the On Close Event of the same Simple Modal component referenced in the previous step:
    

11. Add the following logic to the On Click Event of the changeNickName link component:
    

Data Bindings

1. Bind Content Logic of the following component to the nickname property in Page Data:
   
   
   
   By that I mean do the following:
   
2. Bind senderNickName Text Component’s Content Logic to the sender property in its data model
3. Bind messageTime Text Component’s Content Logic to the time property in its data model
4. Bind receivedMessage Text Component’s Content Logic to the message property in its data model.
5. Bind messageInput Text Component’s Value Logic to the message property in the Page Data data model.

That should be it!

If you have suggestions for how this chat implementation should be improved or enhanced, please leave a comment.

Happy Coding!