Creating Slash command on Slack to search for a post from WordPress

Why do I have to built it?

Our company has create a WordPress site that store all of the complex things we make with Elementor in order to make the developer work easier. As we are using Slack as the main communication tool, it has a feature called Slash command which can send a request to WordPress REST API and I think this will be a useful tool to help developer or other roles to be able to perform a quick search on the site through Slack.

Research

Since I only have a small knowledge on WordPress REST API so I have to do some research to really understand what it is and how can we make use of it with the Slash command that we are going to built. Luckily, there is one person that already create something like this before and properly note it down here this is the main place that shed the light at the end of my darkest tunnel. Apart from that, Slack also have a documentation on how to create the Slash command on their website too and that help in term of initiating the basic settings that needed on the Slack dashboard.

Start

The first problem hit me right at the time that I try to create a new command on my workplace, I have no idea what would be the Request URL of the destination site. As Andy’s article is about 6 years old now and many thing has changed, included the way that Slack use to communicate with the API site which has been changed from either POST or GET to only POST right now. From all of that I have to edit the plugin code that we use to register the endpoint to be compatible with POST instead.

After trying to understand what is the different between GET and POST, I manage to create the endpoint URL or a Request URL on the site. However, I got the 404 response from the website and this indicate that the code that I use was wrong. On this moment, the article on Andy site still indicate that we can either GET or POST method for the endpoint but seems like Slack has change this to be POST only now. So, the only thing I have to adjust is the plugin code by changing the method to be POST and fix the minor syntax error that occur on it.

After everything is settle, I managed to get the first response from my command as shown below.

At this point, we can assumed that the Slash command can communicate with my WordPress site now. The next step is to add a style into it and adjust the result to fetch more post from the site and start receiving text query to be search. Anyway, I was hit by another issue, I don’t know how to debug the return message from the site since we can’t see the result of HTTP POST on the web browser so at some point I have to switch the method to GET instead and test on web browser first before switching back to POST to make it work on Slack. In addition, Slack need special treatment for the JSON response if we need to use markdown for controlling text style.

{
    "blocks": [
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "*It's 80 degrees right now.*"
			}
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "Partly cloudy today and tomorrow"
			}
		}
	]
}

The code above is an example valid response from Slack, you will see that we have to create a block array with an array of sections, this take couple hours for me to find the proper way to do this with PHP and come up with the result code below, as I have to use multiple array and nested array to achieve the valid JSON that Slack want.

$response = array(
				"response_type" => "ephemeral",
				"blocks"        => array( array(
					'type' => 'section',
					'text' => [
						'type' => 'mrkdwn',
						'text' => $text_response,
					],
				)),
			);

and this is the response I got after that

I tried to use the \n to add a new line to the message as they are recommended but seems like it is being ignored by Slack so I have to do more research about PHP stuff. In the end, I found out that if we want \n to compile exactly as it is we need to use double quote when declare it with variable. (ref) After adjusting the code and improve more style in it now we got the final result that is ready to be publish for every employee.

Conclusion

This is another step outside of my work coverage that I take in many years so far, even though there’s still a part that involving WordPress. Because working with REST API and JSON hasn’t been popup on any past project that I’m working on before, it’s good that I’ve a chance to try something like this to refresh my knowledge a bit.

Problems I found

Let’s conclude every obstacles that I facing again

1. Small knowledge of API (both WordPress and Slack) – solve by reading through slack documentation and also watching couple videos from YouTube to be able to understand what is it
2. Can’t manage to make the command work at first glance – this is because Slack has change the allowed HTTP method from GET and POST to just POST, we have to update the WordPress plugin code for this
3. Don’t understand how to debug the response from WordPress REST API – since we are using POST so there’s no other way to debug by spamming the command on my private Slack channel. But there will be some moment that I have to switch all code to be GET so that I can easily adjust the response to match the markdown format of Slack
4. Can’t find a way to make the markdown work with the response – this is the part where I spend most of my time with. I have to do lots of research on how can we convert PHP array to a proper JSON format that could compile when returning to Slack. Also, trying to find the reason why \n doesn’t work which end up by just changing from single quote to double quote…

Comments

comments