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.

1. Building more contextual message with
Block Kit
1

2. @girlie_mac
Hello world!
Tomomi Imura
( @girlie_mac)
2

3. Quick Intro of Slack API
and
Block Kit
3

4. Slack: A Collaboration Hub
File
sharing
DevOps
Meetings
Sales /
Analytics
Expense /
Finance
Integration
4

5. NASA JPL
5

6. Integration at LA Times
Sharing breaking news
Connecting their CMS with Slack
https://source.opennews.org/articles/slack-buttons/
6

7. Carter, Popcorn Robot at Nvidia
7

8. Slack API
8

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!"}

13. Sending a Styled Message
13

14. Before...
14

15. chat.postMessage
{
"channel": "CBADA55JP",
"attachments": [
…
]
}
15

16. chat.postMessage - attachments
{
"channel": "CBADA55JP",
"attachments": [{
"mrkdwn_in": ["text"],
"color": "#36a64f",
"pretext": "Optional pre-text that appears above the attachment block",
"author_name": "author_name",
"author_link": "http://flickr.com/bobby/",
"author_icon": "https://placeimg.com/16/16/people",
"title": "title",
"title_link": "https://api.slack.com/",
"text": "Optional `text` that appears within the attachment",
"fields": [{
"title": "A field's title",
"value": "This field's value",
}...],
"thumb_url": "http://placekitten.com/g/200/200",
"footer": "footer",
"footer_icon": "https://example.com/default_application_icon.png",
"ts": 123456789 }
]
}
16

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":[......]}

18. Now with Block Kit
18

19. Block Kit
● New message UI framework
● Stackable bits of message UI
● Block Kit Builder -
visual prototyping tool
19

20. Context collection
Image
Text collection
Text
Divider
Thumbnail
Interactive collection
Inline select
Inline overflow
Date picker
20

21. Basic Block
[
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Hello World!"
}
},
{
"type": "divider"
}
]
21

22. Add Interactivity
[
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Hello World!"
}
},
{
"type": "divider"
}
"accessory": {
...
}
]
22

23. [
...
"accessory": {
"type": "button",
"text": {
"type": "plain_text",
"text": "Farmhouse",
"emoji": true
},
"value": "click_me_123"
}
]
Add Interactivity
23

24. Blocks: Section
24

25. Blocks: Section with Accessory
25

26. Blocks: Image
26

27. Blocks: Context
27

28. Blocks: Actions
28

29. Blocks: Divider
29

30. Block Kit Builder
30

31. Block Kit Builder https://api.slack.com/tools/block-kit-builder
31

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":[......]}

33. Doodle (Scheduling App)
33

34. NaviTime (Japanese Public Transit Finder App)
34

35. Node.js Example
A Slash Command Result w/ Block Kit
35

36. + @/find-food pizza, san francisco
Using Slack API & Yelp API
36

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

41. @girlie_mac
Result (so far, with a plain text)
41

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

43. BlockKit!
43

44. Compose Message with Block Kit Builder
2
1
Compose
Copy the
generated
JSON
http://api.slack.com/tools/block-kit-builder
Preview
44

45. Sending back 200 OK w/ JSON response
const message = {
response_type: 'in_channel',
text: places[0].name
}
res.json(message);
45

46. Sending back 200 OK w/ JSON response
const message = {
response_type: 'in_channel',
blocks: [
// the message in JSON generated from block kit builder
]
}
res.json(message);
46

47. const message = {
response_type: 'in_channel',
blocks: [
{
type: 'section',
text: {
type: 'mrkdwn',
text: `*<${places[0].url}|${places[0].name}>* n.. nPrice: ${places[0].price}`
},
accessory: {
type: 'image',
image_url: `${places[0].image_url}`,
alt_text: 'venue image'
}
},
{
'type': 'context',
'elements': [{
'type': 'plain_text',
'text': `${places[0].review_count} Yelp reviews`,
'emoji': true
}]
},
{
'type': 'divider'
},
}
]
};
47

48. Result w/ Block Kit
48

49. Tutorial & Source Code
● Tutorial:
https://api.slack.com/tutorials/slash-block-kit
● Source code on Glitch:
https://glitch.com/edit/#!/slash-blockkit
49

50. @girlie_mac
Resources
★ Slack API Docs: https://api.slack.com
★ Slack events types: https://api.slack.com/events
★ Block Kit: https://api.slack.com/block-kit
★ Block Kit Builder: https://api.slack.com/tools/block-kit-builder
50

51. 51
https://serverless-developer-summit.splashthat.com/
July26th

52. You’re invited to Spec, a developer conference by Slack.
Learn more at slack.com/spec
Get 30% off registration with code -S19_SPC30

53. Thank you!
Tomomi Imura (@girlie_mac)
53