Exploring Dart Edge for Supabase

Let’s make a simple system that notifies you on Slack every time there is a new customer complain.

Introduction

Hi, long time no see! Hope you are doing well. 🙂

In this article we are going to explore Dart Edge.

What is Dart Edge?

Dart Edge is a project that allows you to run Dart code in Edge functions, including Cloudflare Workers, Vercel Edge Functions, and Supabase Edge Functions. The project is built and maintained by Invertase.

In this article we will explore using Dart Edge with Supabase Edge Functions by creating a toy project.

Let’s start, shall we!

So, what are we going to make?

Let’s imagine ourselves as a business owner. You can imagine yourself as a small grocery owner, a pet shop owner, or whatever you like.

Let’s say you keep your certain information in a digital database. One of those information is your customer complains.

As a good business owner, you want to address every complain as soon as they are made by the customers.

In order to do this, you want to create a system that automatically notifies you via Slack (because that’s what your team is using daily) every time there is a new customer complain.

We can make this by combining Dart Edge and Supabase (and also Slack API)!

The Stack

Before jumping in, let’s learn a bit more about the technology stack that we are going to use first. If you are already familiar with some of them, feel free to skip around.

Supabase (Database Webhooks & Edge Functions)

Long story short, Supabase is a Firebase alternative! It’s fully open source, with growing community and a quite generous free-tier for you try it out.

There are a lot of services that Supabase provides, but in this article we are only going to use only 2 of them:

1. Database Webhooks
   Every Supabase project comes with a Postgres database. Database webhooks are triggers that are called every time one of these table events happens: INSERT, UPDATE, and DELETE.
2. Edge Functions
   Edge Functions are Typescript functions that you can run without worrying about servers or containers. They are distributed near users across the globe. Edge Functions can be called by Database Webhooks!

Dart Edge

Supabase Edge Functions are intended to be written in Typescript. However, Dart Edge allows developers to use Dart language instead!

Dart Edge allows you to deploy your functions to multiple cloud platforms, including Supabase Edge Functions, Cloudflare Workers, and Vercel Edge Functions.

ℹ️ Take note, however, as of the writing of this article, Dart Edge is still an experimental project.

Slack API

Slack is one of the most popular messaging apps right now, used by individuals and companies to collaborate effectively.

Slack provides API that developers could use to optimize its customers’ communications. One feature that we are interested in is the API for sending message to a channel.

Combine them together!

Now that you got the gist of the three main components of our system (Supabase, Dart Edge, and Slack API). Here is how they fit together:

Here’s the explanation of this image:

1. Our system flow starts with our customer creating a complain. That complain is inserted into our Postgres database inside our Supabase project.
2. After the complain is inserted, a Database Webhook is triggered and runs a certain Edge Function.
3. This Edge Function is previously developed using Dart Edge in Dart language. It is then built to Typescript language and then deployed as a Supabase Edge Function.
4. What this Edge Function does is using Slack API to send a message to our Slack channel.

With this system, you will instantly know whenever a customer creates a complain!

Let’s start!

Let’s finally start creating our system! For convenience, I have divided this hands-on into several parts:

1. Creating Supabase project.
2. Creating customer complain database table.
3. Creating Slack App.
4. Developing Edge Functions with Dart Edge.
5. Deploying Edge Functions.
6. Creating Database Webhook.
7. Testing our System!

1. Creating Supabase project

The first thing that we need to do is setup our Supabase Database where we will store our customer complain data.

1. Sign up for Supabase if you haven’t had an account yet.
2. Sign in to your Supabase account and create a new project. You will be redirected to a Create a new project form.
3. In the Name field, fill the name of our project. For example, “My Business”.
4. In the Database Password field, fill your database’s password. You can provide your own password or click Generate a password to ask Supabase to provide one for you.
5. You can leave other fields as they are and click Create new project button. Your new project will be created and you will be redirected to your project’s home page.
6. Note these two things from your Supabase project: Project URL and API key. We are going to need these two in developing the Edge Functions.

Congratulations, your Supabase project is ready to be used!

2. Creating customer complain database table.

The second thing that we need to do is creating a new database table for storing customer complain. Here’s what you need to do:

1. Open your newly created Supabase project.
2. Click Database menu on the left sidebar. You will be redirected to your project’s Database page.
3. Click New table button. You will be shown a dialog for creating a new table.
4. In the Name field, fill the table’s name. Let’s name this table customer_complains.
5. Under the Columns section, add 2 new columns for our database: customer_name (varchar) and complain (text). It should look like the image below. After that, click the Save button.

Congratulations again, we have created our customer complains table.

3. Creating Slack App

The next thing that we need to do is setup our Slack App. We need Slack App to be able to access Slack API.

1. Sign up for Slack if haven’t had an account yet. If you haven’t had any Workspace, create one first (it’s free!).
2. Sign in to your Slack account and open api.slack.com.
3. Hover on Your apps menu on the page and click Create your first app menu. You will be shown Create an app dialog.
4. You will be prompted to select between From scratch and From an app manifest options. Select From scratch option.
5. In the App Name field, fill in your Slack App name. Let’s name our app “My Slack App”.
6. In the “Pick a workspace to develop your app in” field, select the workspace that you want to use for this app.
7. Click Create App button. You will be redirected to your app’s Basic Information page.
8. Click OAuth & Permissions menu on the left sidebar.
9. Under OAuth Tokens for Your Workspace section, note your app’s Bot User OAuth Token. You will use this value in developing the Edge Function.
10. Under Bot Token Scopes section, click Add an OAuth Scope button. Select channels:read and chat:write scopes. We’ll explain later why we need these two scopes.
11. Click Basic Information menu on the left sidebar.
12. Under Install your app section, click Install to Workspace button. You will be redirected to a confirmation page. Click the Allow button.
13. After installing your app, you still need to invite the app to one of your channels. For simplicity’s sake, let’s invite our app to general channel. Open general channel in your workspace and type /invite @ and select your app like shown in the image below. Then press Enter.

Congratulations again! Your Slack App is set up!

4. Developing Edge Functions with Dart Edge.

After coming this far without touching a single line of code, we will finally start coding!

1. Install Dart SDK on your machine if you haven’t.
2. Install Supabase CLI globally on your machine. You can select one of the methods provided here.
3. Install Dart Edge CLI globally on your machine by running this command:
   $ dart pub global activate edge
4. After installing Dart Edge CLI, we will initialize our project. Navigate to your working directory and run this command to initialize our project folder:
   $ edge new supabase_functions <PROJECT_NAME>
   You can choose replace <PROJECT_NAME> with any name you want. In this article, we will name our project new_customer_complain :
   $ edge new supabase_functions new_customer_complain
   Click Y if you are prompted to confirm the creation of the project. Press Enter.
5. Navigate to your newly created project and initialize Supabase by running this command:
   $ cd new_customer_complain
$ supabase init
   Click N if you are prompted to generate VS Code workspace settings. Press Enter.
6. Install project dependencies by running this command:
   $ dart pub get
7. Add supabase and edge_http_client as dependencies:
   $ dart pub add supabase
$ dart pub add edge_http_client
8. Open lib/main.dart file with a text editor and replace the content with the code snippet below:

Read the comments inside the code snippet above to learn what each part does. Notice that earlier we needed to select channels:read and chat:write scopes from Slack API because we need to be able to list our workspace’s channels and compose a new message.

You need to change the value of SUPABASE_URL, SUPABASE_KEY, and SLACK_TOKEN with your Supabase project URL, Supabase API key, and Slack API token (Bot User OAuth Token) that you obtained from the previous steps.

5. Deploying Edge Functions.

You can test the functions locally with Docker as mentioned in the documentation, but we are skipping that part to simplify this tutorial. Instead, we are going to deploy our app directly to our Supabase project.

1. Compile our Dart Edge project by running this command:
   $ edge build supabase_functions
2. Deploy our Dart Edge project by running this command:
   $ supabase functions deploy dart_edge
   In this step you might need to create an access token and enter your project ref. Follow the steps shown by the prompt until the deployment is finished.
3. Lastly, we need to disable JWT verification for Edge Function. Open your Supabase project. Click Edge Functions menu on the left sidebar. Click on dart_edge row that you just deployed. Switch off the Enforce JWT Token and click Save.

Congratulations for deploying your first Dart Edge project to Supabase!

But we’re not done yet. Our last step is…

6. Creating Database Webhook.

We have our Edge Functions and customer complain table set up, but we still need a way to trigger the Edge Functions to run every time there is an update in our customer complain table.

That’s the job of Database Webhook!

1. Open your Supabase project.
2. Click Database menu on the left sidebar. You will be redirected to your project’s Database page.
3. Click Webhooks menu on the left menu. Click Enable webhooks button to enable webhook for your database.
4. Click Create Webhook button. You will be shown a Create a new database hook form.
5. In the Name field, fill the name of our webhook. For example, new_customer_complain_webhook.
6. In the Table field, select our customer_complains table.
7. In the Events field, check Insert.
8. In the Type of webhook field, select Supabase Edge Functions. The Edge Function section will automatically filled for you with your deployed Edge Function:

Click Create webhook button to create your webhook.

And, you’re done! Well done!

Now, here comes the best part of our journey…

7. Testing our System!

We can simulate a new customer complain by inserting rows directly to our customer complain table.

1. Open your Supabase project.
2. Click Table Editor menu on the left sidebar. You will be redirected to your project’s Table editor page.
3. Click customer_complains table on the left menu.
4. Click Insert button and then click Insert row. A form for adding new row to our customer_complains table will be shown.
5. Fill the customer_name and complain fields however you like.
6. Click Save button and wait for the magic to happen!

A new message successfully appeared on our Slack channel! 🎉🥳

Congratulations! Now you can be notified of your customer complains the moment they appear.

Thank you for reading this far. I hope you find this article useful.

• Read more about Dart Edge on the official documentation here.
• Find out more about Invertase’s projects here.

Until next time!