O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

[2019 south bay meetup] Building more contextual message with Block Kit

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.

  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

[2019 south bay meetup] Building more contextual message with Block Kit

  1. 1. Building more contextual message with Block Kit 1
  2. 2. @girlie_mac Hello world! Tomomi Imura ( @girlie_mac) 2
  3. 3. Quick Intro of Slack API and Block Kit 3
  4. 4. Slack: A Collaboration Hub File sharing DevOps Meetings Sales / Analytics Expense / Finance Integration 4
  5. 5. NASA JPL 5
  6. 6. Integration at LA Times Sharing breaking news Connecting their CMS with Slack https://source.opennews.org/articles/slack-buttons/ 6
  7. 7. Carter, Popcorn Robot at Nvidia 7
  8. 8. Slack API 8
  9. 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. 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. 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. 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. 13. Sending a Styled Message 13
  14. 14. Before... 14
  15. 15. chat.postMessage { "channel": "CBADA55JP", "attachments": [ … ] } 15
  16. 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. 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. 18. Now with Block Kit 18
  19. 19. Block Kit ● New message UI framework ● Stackable bits of message UI ● Block Kit Builder - visual prototyping tool 19
  20. 20. Context collection Image Text collection Text Divider Thumbnail Interactive collection Inline select Inline overflow Date picker 20
  21. 21. Basic Block [ { "type": "section", "text": { "type": "mrkdwn", "text": "Hello World!" } }, { "type": "divider" } ] 21
  22. 22. Add Interactivity [ { "type": "section", "text": { "type": "mrkdwn", "text": "Hello World!" } }, { "type": "divider" } "accessory": { ... } ] 22
  23. 23. [ ...   "accessory": {  "type": "button",  "text": { "type": "plain_text", "text": "Farmhouse", "emoji": true }, "value": "click_me_123"  } ] Add Interactivity 23
  24. 24. Blocks: Section 24
  25. 25. Blocks: Section with Accessory 25
  26. 26. Blocks: Image 26
  27. 27. Blocks: Context 27
  28. 28. Blocks: Actions 28
  29. 29. Blocks: Divider 29
  30. 30. Block Kit Builder 30
  31. 31. Block Kit Builder https://api.slack.com/tools/block-kit-builder 31
  32. 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. 33. Doodle (Scheduling App) 33
  34. 34. NaviTime (Japanese Public Transit Finder App) 34
  35. 35. Node.js Example A Slash Command Result w/ Block Kit 35
  36. 36. + @/find-food pizza, san francisco Using Slack API & Yelp API 36
  37. 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. 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. 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. 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. 41. @girlie_mac Result (so far, with a plain text) 41
  42. 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. 43. BlockKit! 43
  44. 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. 45. Sending back 200 OK w/ JSON response const message = { response_type: 'in_channel', text: places[0].name } res.json(message); 45
  46. 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. 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. 48. Result w/ Block Kit 48
  49. 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. 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. 51 https://serverless-developer-summit.splashthat.com/ July26th
  52. 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. 53. Thank you! Tomomi Imura (@girlie_mac) 53

×