How do I send real-time notifications in my app?

In this episode, we’ll take a look at:

• Ably
• Custom Code
• Pipes

Features Discussed:

1. List Component (Time: 6:20)
   Learn how to create and customize list components for displaying data efficiently.
2. Ably (Time: 9:03)
   Learn how to integrate Ably for real-time messaging and synchronization in your projects.
3. Custom Code (Time: 10:55)
   Learn how to implement custom code to extend functionality and tailor the behavior of your applications.
4. Pipes (Time: 13:36)
   Learn how to use pipes to transform and format data within your applications.
5. Record Rules (Time: 19:42)
   Learn how to set up record rules to automate actions based on specific criteria.

Transcript Summary

Introduction

Hey everyone, welcome back to Build It with Tadabase. In this week's episode, we are going to be talking about real-time notifications. You might be asking yourself, "Doesn't Tadabase already have notifications?" The answer is yes. Tadabase does have the ability to send notifications, like emails, text messages, form submission alerts, and toast messages. However, these notifications are only visible to the user on that particular page. What if you wanted to send a real-time notification to all users inside your application, regardless of the page they’re on? That’s what we’re going to do today.

We’ll be using a service called Ably for real-time notifications. Tadabase is flexible, so we’ll be using custom code and pipes to trigger these notifications.

Overview

Here’s a quick overview of the finished product:

• On the left side, we have a customer logged into the application.
• On the right side, we have an administrator logged in on a different page.
• When the customer submits a form to create a new ticket, it triggers an Ably notification.
• The admin sees a real-time notification saying, “Heads up, a new ticket has been submitted,” with a button to reload the page.

Setting Up Ably

The focus here is on setting up Ably for real-time notifications. We’ll be triggering a notification app-wide for a particular group of users.

To get started quickly, we’ll use the onboarding wizard in Tadabase to create the application structure. My idea is to create a help desk where every time a new ticket is created, a notification is sent to internal users or administrators. We’ll build this support ticketing system with employees, admins, and customers accessing the app.

Once the app is loaded, we’ll start building out the pages. We’ll need:

• A page for customers to submit a ticket.
• A page for administrators to see all tickets and notifications.

Implementing Ably

First, we’ll create an account on Ably’s website and get our API credentials. We’ll then add some scripts to the custom header section of Tadabase settings to load Ably’s library and the SweetAlert library for nicer notifications.

Adding JavaScript to Layouts

We’ll add JavaScript to the admin layout to subscribe to a channel. This subscription will allow administrators to receive real-time notifications. We’ll set up a channel called ticket updates and a sub-channel called new messages. When an administrator enters a page within the admin layout, they subscribe to this channel.

The notifications will use SweetAlert for better visual presentation. We’ll set up the notification to display a message dynamically from Ably, with a button for the admin to reload the page.

Building the Pipe

Next, we’ll build a pipe to act as a middleman between Ably and the interactions on the page. This pipe will send the notification when a customer submits a ticket.

In the pipe configuration:

• We’ll create a new API call to send a message to the Ably channel.
• We’ll set the request as a POST method and define the channel and message parameters.
• We’ll add our Ably credentials in the headers.

We’ll also configure the response to ensure it triggers the correct workflow in Tadabase, saving the response data in a new field called ably response.

Testing and Final Setup

We’ll log in as both a customer and an admin to test the setup. When the customer submits a ticket, the admin should receive a real-time notification.

Use Cases

This system can be built into many types of apps and use cases. For example, within an organization, if multiple team members are working on the same records, a notification can be sent to others when a record is edited. This allows for both global and granular notification use cases.

If anyone has questions or comments, I encourage you to join the Tadabase community to discuss this further. It's a valuable place to share user experiences and perspectives.