Share Your GitHub Releases to Your Communities with Just One Click

Developers spend many hours coding, refining the product, and releasing enhancements, fixes, and improvements. These updates can be critical for users of the product. An organization must announce updates to their users to improve awareness about the product and help users make the most of an improved product.

In this tutorial, we will learn how to build a Discord bot that shares the latest releases in a channel on your desired Discord server within 10 minutes. Let’s build!

Here’s what the app looks like; feel free to take it for a ride.

Setting up Appsmith

• Head onto appsmith.com to sign up for a new account or log in to an existing account.
• Create a new application in your preferred organization, and you’ll now see an editor where you can drag and drop UI widgets to build UI.

Set up UI for your app

For the UI, add in the following widgets:

• Choose a theme that you like!
• A container with a text widget and icon button for the header of the app
• Two buttons — one for previewing the message and the other to send the message on Discord
• A text widget to preview the text message that the bot would send on the channel

And that’s it for the UI. You got the UI for your app set up in just four simple steps 🎊. Below is how it looks:

App UI

Integrating Discord and GitHub on Appsmith

You’ll be using a Discord webhook on the server that you want the bot to be on. This webhook will help you send automated messages on your server’s text channel. You can read more about Discord webhooks here.

• Follow the procedure mentioned in this article to set up a webhook.
• Once the webhook is generated, copy the URL to the webhook.

You’ll use the GitHub releases API to look for the latest releases and get information about them.

• Generate your GitHub personal access token according to the steps mentioned in the GitHub docs. You’ll need this token for Basic authentication of the Releases API.

Setting up Queries and APIs

You’ll first set up an API to get the latest release of a GitHub repository. To do this, follow the following steps:

• Create a ‘New Blank API’ from the query pane.

Query pane

• Rename the query as GetRelease. Set the API for a GET request since we want to get the information of the latest release.
• Add this URL for the API

https://api.github.com/repos/<USERNAME>/<REPO-NAME>/releases/latest

Make sure to add in the repository name of the repository for which you would want the latest releases in place of <REPO-NAME> and the username of the owner of the repository in place of <USERNAME>

• Add in the Authorization key in the headers with the value set to be Basic <ACCESS-TOKEN>. Make sure to add in your access token that you copied earlier in place of <ACCESS-TOKEN>

Hit the ‘Run’ button, and you should see an API response with the details of the latest release.

API Response

Next, we’ll set up the Discord Webhook in Appsmith. To do this,

• Click ‘New API’ from the query pane and name it PostDiscord.
• Set the API to a POST request since we would be posting the message to the Discord server.
• Paste your webhook URL into the URL of the API.
• Set the content type as key in the headers with the value set to application/json

This is what the PostMessage API looks like:

PostMessage API

Let us now write a query to customize the message you want to send on the Discord server channel.

• Create a new JSObject
• Add this function in the JSObject

message: () => {
var apibody=GetRelease.data.body
const body= apibody.replace(/ *\([^)]*\) */g, “”)
return((GetRelease.data.name) + “ is out🎉 \n\n” + (body) + “\n\nCheck the release out at “ + (GetRelease.data.html_url) )
}

Here, we use (GetRelease.data.body) to get the body of the release notes, (GetRelease.data.name) to get the name of the release, and the (GetRelease.data.html_url) to get the link to the release notes.

You are free to customize the message further with as many attributes as you want!

Binding queries to app UI

Now that you have all the APIs and the queries set up, you just have to bind these to the widgets.

• Bind {{GetRelease.run()}} to run on onClick in the Preview Message button.
• Bind {{JSObject1.message()}} to the Text in the property pane of the text widget.
• Bind {{PostMessage.run()}} to run on onClick in the Send Message to Discord button.

And, that’s it. Test and run your bot!

Screen recording

Now, you can share your releases within your communities like a pro!

To test this bot, we have a Discord bot for GitHub releases template, which you can fork and use.

Please let us know if you have any template requests that could help speed up making internal tools via this form.

Hit us on Discord for any queries, and follow us on YouTube and Twitter to stay up to date.