South Bay Meetup talk about Block Kit, a UI framework that enables you to build rich and interactive experiences in Slack, also how to build a slash command using Block Kit & its demo.
9. @girlie_mac
Web APIs
Query information, post messages,
change things! with the Web API.
Use it on the fly for ad-hoc queries or
as part of a more complex tapestry of
platform features.
It's all HTTP-RPC methods and not
quite REST.
Example: chat.postMessage sends a
message
9
10. @girlie_mac
Events APIs
The Events API is a subscription model for apps
and bots to process & react to activities in Slack.
All you need is a Slack app and a secure place for
Slack to send your events.
Features:
- Events are sent as HTTP requests
- Only subscribe to the events your app needs
- Limit your app’s scopes to only those needed
- Most up to date collection of Slack workspace
and user events
Example: team_join is emitted when a new
member joins your team
10
11. @girlie_mac
RTM API
The Real Time Messaging API is a
WebSocket-based API that allows you to
receive events from Slack in real time and
send messages as users. It's sometimes
referred to as simply the "RTM API".
Doesn’t require an HTTP server
Does require an always-on websocket
connection
May not contain many newer Slack
Event types, like bot_mention
11
12. Sending a Simple Message with Web API
12
Hello!chat.postMessage
via HTTP POST
POST /api/chat.postMessage
Content-type: application/json
Authorization: Bearer xoxb-xxxxxxxxx-xxxx
{"channel":"C061EG9SL","text":"Hello!"}
17. Sending a Message with an Attachment
17
chat.postMessage
POST /api/chat.postMessage
Content-type: application/json
Authorization: Bearer xoxb-xxxxxxxxx-xxxx
{"channel":"C061EG9SL","attachment":[......]}
32. Sending a Message with a Block
32
chat.postMessage
POST /api/chat.postMessage
Content-type: application/json
Authorization: Bearer xoxb-xxxxxxxxx-xxxx
{"channel":"C061EG9SL","blocks":[......]}
37. Payload sent via HTTP POST
token=gIkuvaNzQIHg97ATvDxqgjtO
team_id=T0001
team_domain=example
channel_id=C2147483705
channel_name=general
user_id=U2147483697
user_name=girlie_mac
command=/find-food
text=pizza%2C%20san%20francisco
response_url=https://hooks.slack.com/commands/1234/5678
trigger_id=13345224609.738474920.8088930838d88f008e0
37
“pizza, san francisco”
38. Slash Command Endpoint (Express.js)
const express = require('express');
const app = express();
app.post('/command', async (req, res) => {
// log the payload and see what you got
console.log(req.body);
// reply the command
const message = {
response_type: 'in_channel',
text: replyText
}
res.json(message);
} 38
req.body.text is the slash command
query, “pizza, san francisco”
39. Reply with a Yelp Restaurant Search Result
app.post('/command', async (req, res) => {
// Extract the slash command query
const query = req.body.text ? req.body.text : 'lunch, San Francisco';
const queries = query.split(',');
const term = queries.shift(); // "Pizza"
const location = queries; // "San Francisco, CA"
const places = await getPlaces(query, location);
const message = {
response_type: 'in_channel',
text: places[0].name
}
res.json(message);
}
Passing the info to Yelp REST
API to get the result in an
array
Sending the result to Slack channel
39
40. Sending back 200 OK w/ JSON response
const message = {
response_type: 'in_channel',
text: places[0].name
}
res.json(message);
40
By default, it’s ‘ephemeral’
Showing the first result, the
name of the restaurant
Send 200 w/ the message
42. Block-Kit-fy the message
We are going to re-format the JSON message we just created to display a
plain text into this rich message format using Block Kit:
42