How to build API to deliver slack messages with no code
Tags: frontend, javascript, api, nocode
Published: 2021-06-17 10:23:41

Every day so many people depend on slack to stay updated in their daily life. Hence, we may need to deliver some message or an alert to slack programmatically via an API in our product or webapp. This is a simple guide to show how you can achieve the same with no coding, to quickly hook up slack with your webapp.

Our goal is to create an endpoint that we can trigger to send our message on the slack. 

1. We head over to [Canonic](https://app.canonic.dev) and sign in using our social accounts. Next, we click on **Create New** to create a project for our application. Click on next, then click on create to complete the process.

    ![https://canonic.s3.amazonaws.com/public/devto/SW-1.png](https://canonic.s3.amazonaws.com/public/devto/SW-1.png)

    Create new project screen

2. A popup asking your first table name will appear. If not, you can click on the **+** icon in the header to create a new table. Let's name our first & only table for this project as **Messages.**

    ![https://canonic.s3.amazonaws.com/public/devto/SW-2.png](https://canonic.s3.amazonaws.com/public/devto/SW-2.png)

3. We create a text field named "Message" as we'll need it in the API & also to store the messages we send out.

    ![https://canonic.s3.amazonaws.com/public/devto/SW-3.png](https://canonic.s3.amazonaws.com/public/devto/SW-3.png)

4. We hit deploy on the top right, and we'll be provided with a hosted backend. a database & basic CRUD endpoints per table to help us create an API for our slack.
5. Click on the **API** tab on the left to start adding the slack webhook. We select the **createMessage** block in mutations. Click on the **+** button. It'll open up a new webhook settings on the right hand side.

    ![https://canonic.s3.amazonaws.com/public/devto/SW-4.png](https://canonic.s3.amazonaws.com/public/devto/SW-4.png)

6. Select **Message** type → Choose **Slack** from the list of providers & you'll be provided with 2 fields for settings. 
- Trigger URL → This is the url which will be generated by slack
- Message Body → Message to send to slack channels. 

    ![https://canonic.s3.amazonaws.com/public/devto/SW-5.png](https://canonic.s3.amazonaws.com/public/devto/SW-5.png)

7. For **Trigger URL →** You'll need to create a webhook endpoint on Slack. Follow the slack documentation to help you through - [https://api.slack.com/messaging/webhooks](https://api.slack.com/messaging/webhooks). After you complete this guide, you should have a slack webhook endpoint, something like this - [https://hooks.slack.com/services/x](https://hooks.slack.com/services/T012R73FZ4N/xxxxxx/4AVxuBwqSNVRZMsZ1tihdLln)xx/xxxx/xxxxx
8. **For Message Body →** We want to send the text found in the message field of the API to slack. So we can make use of Handlebars templates & simply write `{{message}}` in that field. This will extract the message field from the API payload and forward it to slack.

The above concludes the setup for the API that was required. Now let's start using this API to start sending messages to our slack channels.

**Triggering Slack API:**

This will require a combination of things that we need for securely connecting our application with this API.

- Access token for our API
- Documentation for the API

**Access Tokens**

1. Click on **Settings** using left side menu. Go to **Access** tokens tab.

    ![https://canonic.s3.amazonaws.com/public/devto/SW-6.png](https://canonic.s3.amazonaws.com/public/devto/SW-6.png)

2. Click on **Create a new token,** and provide it a suitable name and permissions. Click on **Create.**

    ![https://canonic.s3.amazonaws.com/public/devto/SW-7.png](https://canonic.s3.amazonaws.com/public/devto/SW-7.png)

3. You've successfully generated an access token for your API. Copy it & save it some place safe as **you won't be able to see it again**.

    ![https://canonic.s3.amazonaws.com/public/devto/SW-8.png](https://canonic.s3.amazonaws.com/public/devto/SW-8.png)

**Documentation**

Head over to the docs tab using the left-hand side, and you'll find documentation for **createMessage** API (the API block where we added our webhook).

![https://canonic.s3.amazonaws.com/public/devto/SW-9.png](https://canonic.s3.amazonaws.com/public/devto/SW-9.png)

**Testing**

After completing all the necessary steps, we're finally ready to deliver our first message to the slack using API. 

1. Let's copy the **CURL** command that was mentioned in the documentation. Fill in your access token and paste it into the terminal.
2. Our curl command will look something like this.

    ```
    ➜  ~ curl 'https://xxxx.hem.canonic.dev/api/messages' \
      --request POST \
      --header "Content-type: application/json" \
      --header "Authorization: xxxxxx-xxxxx-xxxx" \
      --data '{
        "input": {
          "message": "Hello Slack! How are you?",
        }
      }'
    ```


    A successful response will look like this:
    ```
    {"data":{"message":"Hello Slack! How are you?","_id":"60bf30ee2529700009fd2a4a","createdAt":"2021-06-08T08:57:18.316Z","updatedAt":"2021-06-08T08:57:18.316Z","__v":0,"id":"60bf30ee2529700009fd2a4a"},"error":null,"success":true}%
    ```


    And show up on your slack like this!
    ![https://canonic.s3.amazonaws.com/public/devto/SW-10.png](https://canonic.s3.amazonaws.com/public/devto/SW-10.png)


And just like that, we can setup an alerting or notification system for slack. You can also add more fields apart from message like name. This will allow you to formulate a much better structured in message body.

```
Hi {{ name }},

My message - {{ message }}

Thanks
```

Find detailed documentation for this feature here - [https://docs.canonic.dev/concepts/webhook-providers/slack](https://docs.canonic.dev/concepts/webhook-providers/slack)

Also checkout how we can integrate 3rd party authentication services with your backend without coding [here](https://dev.to/kartik0709/build-login-with-google-github-facebook-on-reactjs-without-coding-a-backend-2gej). Looking forward to your feedback!