Slack Next-gen Platform – Trigger Configurator

This is translation of Β Slack Next-gen Platform – Trigger Configurator – DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» written by Kaz (SDK Engineering & DevRel at Slack), I do not include any personal opinion here except guessing when meaning of original text is not clear for me)

이 글은 μŠ¬λž™μ˜ SDK Engineering / DevRel 인 Kaz 의 글을 λ²ˆμ—­ν•œκ²ƒμž…λ‹ˆλ‹€. μ €μ˜ 개인 μ˜κ²¬μ€ 듀어가지 μ•ŠμœΌλ©°, 일뢀 μ›λ¬Έμ˜ μ˜λ―Έκ°€ μ• λ§€ν•œ κ²½μš°μ—λ§Œ λΆ€μ—° μ„€λͺ…을 λ‹¬μ•˜μŠ΅λ‹ˆλ‹€.


이번 νŠœν† λ¦¬μ–Όμ—μ„œλŠ” λ‹€λ₯Έ μ›Œν¬ν”Œλ‘œ 트리거λ₯Ό μ„€μ •ν•˜λŠ” μ›Œν¬ν”Œλ‘œλ₯Ό λ§Œλ“œλŠ” 방법에 λŒ€ν•΄μ„œ 배울 κ²ƒμž…λ‹ˆλ‹€.

channel_ids λ₯Ό ν•„μš”λ‘œ ν•˜λŠ” event 트리거λ₯Ό μΆ”κ°€ν•˜λŠ” 방법에 λŒ€ν•΄μ„œ λ°°μš°μ‹€ λ•Œ (아직 μ•ˆμ½μ–΄ 보셨닀면 λ¨Όμ € 일독을 κΆŒν•©λ‹ˆλ‹€) ν•˜λ“œμ½”λ”©μœΌλ‘œ 인해 λ°œμƒν•˜λŠ” 어렀움에 λŒ€ν•΄μ„œ μ–ΈκΈ‰ν•œλ°” μžˆμŠ΅λ‹ˆλ‹€.

이번 νŠœν† λ¦¬μ–Όμ—μ„œλŠ” κ·Έ λ¬Έμ œμ— λŒ€ν•΄μ„œ 해결책을 μ œκ³΅ν•©λ‹ˆλ‹€. event νŠΈλ¦¬κ±°κ°€ ν¬ν•¨λœ μ›Œν¬ν”Œλ‘œ(“Main” μ›Œν¬ν”Œλ‘œλΌ ν•˜κ² μŠ΅λ‹ˆλ‹€) κ°€ μžˆμ„ λ•Œ, μ›Œν¬ν”Œλ‘œ λ‚΄μ—μ„œ λ˜λ‹€λ₯Έ μ›Œν¬ν”Œλ‘œλ„(“Configurator” μ›Œν¬ν”Œλ‘œλΌ ν•˜κ² μŠ΅λ‹ˆλ‹€.) ν¬ν•¨μ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€. λ°”λ‘œ “Main” μ›Œν¬ν”Œλ‘œλ₯Ό μ„€μ •ν•  수 μžˆλŠ” μ›Œν¬ν”Œλ‘œμ£ . λ³΅μž‘ν•΄λ³΄μΌ 수 μžˆλŠ”λ°, κ΅¬ν˜„μ€ μƒλŒ€μ μœΌλ‘œ κ°„λ‹¨ν•©λ‹ˆλ‹€. μ‹œμž‘ν•΄λ³΄μ£ .

Prerequisites

μ°¨μ„ΈλŒ€ ν”Œλž«νΌμ„ μ ‘ν•˜λŠ” 것이 μ²˜μŒμ΄μ‹œλΌλ©΄, μ΄μ „μ˜ νŠœν† λ¦¬μ–ΌμΈ β€œThe Simplest Hello World” λΆ€ν„° μ½μ–΄μ£Όμ„Έμš”. μš”μ•½ν•˜λ©΄ 유료 Slack μ›Œν¬μŠ€νŽ˜μ΄μŠ€μ™€ ν•΄λ‹Ή μ›Œν¬μŠ€νŽ˜μ΄μŠ€μ—μ„œ β€œbeta feature” λ₯Ό μ‚¬μš©ν•  수 μžˆλŠ” κΆŒν•œμ΄ ν•„μš”ν•©λ‹ˆλ‹€. 가지고 κ³„μ‹œλ‹€λ©΄ Slack CLI 와 μ›Œν¬μŠ€νŽ˜μ΄μŠ€λ₯Ό μ—°κ²°ν•˜κΈ°λ§Œ ν•˜λ©΄ λ©λ‹ˆλ‹€.

μ€€λΉ„λ˜μ—ˆλ‹€λ©΄ 앱을 ν•œλ²ˆ λ§Œλ“€μ–΄λ³΄λ„λ‘ ν•˜μ£ . μ‹œμž‘ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

Create a Blank Project

slack create λͺ…λ Ήμ–΄λ₯Ό μ‚¬μš©ν•˜μ—¬, μƒˆλ‘œμš΄ ν”„λ‘œμ νŠΈλ₯Ό μ‹œμž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이 νŠœν† λ¦¬μ–Όμ—μ„œλŠ” 아무것도 μ—†λŠ” μƒνƒœμ—μ„œ 앱을 λ§Œλ“€μ–΄λ³΄κ² μŠ΅λ‹ˆλ‹€. β€œBlank Project” λ₯Ό μ„ νƒν•˜μ—¬ μ£Όμ‹­μ‹œμš”.

$ slack create
? Select a template to build from:

  Hello World
  A simple workflow that sends a greeting

  Scaffolded project
  A solid foundational project that uses a Slack datastore

> Blank project
  A, well.. blank project

  To see all available samples, visit github.com/slack-samples.

ν”„λ‘œμ νŠΈκ°€ μƒμ„±λ˜λ©΄, slack run λͺ…λ Ήμ–΄κ°€ μ •μƒμ μœΌλ‘œ λ™μž‘ν•˜λŠ”μ§€ ν™•μΈν•΄λ³΄μ„Έμš”. 이 λͺ…λ Ήμ–΄λŠ” β€œdev” λ²„μ „μ˜ 앱을 μ›Œν¬μŠ€νŽ˜μ΄μŠ€μ— μ„€μΉ˜ν•©λ‹ˆλ‹€. 이 μ•±μ˜ 봇 μœ μ €κ°€ μƒμ„±λ˜κ³ , 이 봇은 API ν˜ΈμΆœμ„ μœ„ν•œ 봇 토큰 값을 가지고 μžˆμŠ΅λ‹ˆλ‹€.

$ cd affectionate-panther-654
$ slack run
? Choose a workspace  seratch  T03E94MJU
   App is not installed to this workspace

Updating dev app install for workspace "Acme Corp"

  Outgoing domains
   No allowed outgoing domains are configured
   If your function makes network requests, you will need to allow the outgoing domains
   Learn more about upcoming changes to outgoing domains: https://api.slack.com/future/changelog
  seratch of Acme Corp
Connected, awaiting events

Connected, awaiting events 둜그 메세지λ₯Ό 보신닀면, 이 앱이 μ„±κ³΅μ μœΌλ‘œ μ›Œν¬μŠ€νŽ˜μ΄μŠ€μ— μ—°κ²°λœ κ²ƒμž…λ‹ˆλ‹€. β€œCtrl +C” λ₯Ό 눌러 둜컬 μ•± ν”„λ‘œμ„ΈμŠ€λ₯Ό μ’…λ£Œν•©λ‹ˆλ‹€.

이번 νŠœν† λ¦¬μ–Όμ—μ„œλŠ” 3개의 μ›Œν¬ν”Œλ‘œλ₯Ό λ§Œλ“€ κ²λ‹ˆλ‹€.

  • “reaction_added” 이벀트 트리거λ₯Ό ν•„μš”λ‘œ ν•˜λŠ” “Main” μ›Œν¬ν”Œλ‘œ
  • webhook μš”μ²­μ„ 톡해 “Main” μ›Œν¬ν”Œλ‘œμ˜ 트리거λ₯Ό μ„€μ •ν•˜λŠ” “Configurator” μ›Œν¬ν”Œλ‘œ
  • λͺ¨λ‹¬ 화면을 톡해 μœ μ €μ˜ μž…λ ₯값을 “Main” μ›Œν¬ν”Œλ‘œμ˜ 트리거둜 λ³΄λ‚΄λŠ” “Configurator” μ›Œν¬ν”Œλ‘œ

Add the “Main” Workflow

λ¨Όμ €, main_workflow.ts νŒŒμΌμ„ λ§Œλ“­λ‹ˆλ‹€.

μœ„ μ†ŒμŠ€μ½”λ“œμ˜ 맨 μ•„λž˜λ₯Ό λ³΄μ‹œλ©΄, 트리거 μ •μ˜κ°€ 아무것도 μ—†λ‹€κ³  μ μ–΄λ†¨μŠ΅λ‹ˆλ‹€. μ™œλƒν•˜λ©΄ λ‹€λ₯Έ μ›Œν¬ν”Œλ‘œλ₯Ό ν†΅ν•΄μ„œ 트리거λ₯Ό 생성할 것이기 λ•Œλ¬Έμ΄μ£ .

까먹기 전에, μ›Œν¬ν”Œλ‘œλ₯Ό manifest.ts 에 μΆ”κ°€ν•©λ‹ˆλ‹€.

Add The Custom Function To Configure Triggers

λ‹€μŒμ€, λ‹€λ₯Έ μ›Œν¬ν”Œλ‘œμ—μ„œ 트리거λ₯Ό λ§Œλ“€κΈ° μœ„ν•œ μ»€μŠ€ν…€ νŽ‘μ…˜μ„ μΆ”κ°€ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. “Configurator” μ›Œν¬ν”Œλ‘œ μžμ²΄λŠ” μ†ŒμŠ€ μ½”λ“œ νŒŒμΌμ„ 톡해 λ§Œλ“  트리거λ₯Ό 톡해 트리거 될 κ²ƒμž…λ‹ˆλ‹€.

μ—¬κΈ°μ„œ 3개의 μ†ŒμŠ€ νŒŒμΌμ„ λ§Œλ“€ κ²ƒμž…λ‹ˆλ‹€. manage_triggers.ts, join_channels.ts, 그리고 configure.ts.

manage_triggers.ts λΆ€ν„° μ‹œμž‘ν•˜κ² μŠ΅λ‹ˆλ‹€. 이 νŒŒμΌμ—μ„œλŠ” 트리거 관리λ₯Ό μœ„ν•œ μ½”μ–΄ λ‘œμ§μ„ μ œκ³΅ν•©λ‹ˆλ‹€. manage_triggers.ts λΌλŠ” μ΄λ¦„μœΌλ‘œ μ €μž₯ν•©λ‹ˆλ‹€.

λ‹€μŒ join_channels.ts μ—μ„œλŠ” λ‹€μˆ˜μ˜ 채널에 μ‘°μΈν•˜κΈ° μœ„ν•œ 방법을 μ œκ³΅ν•©λ‹ˆλ‹€.

μ•±μ˜ λ΄‡μœ μ €λ₯Ό μΆ”κ°€ν•˜λŠ” μ΄μœ λŠ”, 채널 멀버쉽 μ—†μ΄λŠ” conversations.history, conversations.replies 그리고 reactions.get 와 같은 API λ₯Ό μ½œν•  수 μ—†κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. 채널 μ΄λ²€νŠΈμ— λŒ€ν•œ μ˜λ―ΈμžˆλŠ” 것듀을 λ§Œλ“€λ•Œμ— 이 API 듀을 많이 μ‚¬μš©ν•˜κ²Œ λ©λ‹ˆλ‹€.

λ§ˆμ§€λ§‰μœΌλ‘œ, configure.ts μž…λ‹ˆλ‹€. “Configurator” μ›Œν¬ν”Œλ‘œλ₯Ό μœ„ν•œ μ»€μŠ€ν…€ νŽ‘μ…˜ μž…λ‹ˆλ‹€. μœ„ 2개의 μ†ŒμŠ€νŒŒμΌμ„ 레퍼런슀둜 μ‚¬μš©ν•©λ‹ˆλ‹€.

Create The “Configurator” Workflow (Webhook Trigger)

트리거 관리λ₯Ό μœ„ν•œ configure.ts λ₯Ό μ‚¬μš©ν•˜λŠ” “Configurator” μ›Œν¬ν”Œλ‘œλ₯Ό λ§Œλ“€μ–΄ λ³΄κ² μŠ΅λ‹ˆλ‹€.

webhook_configurator.ts 둜 μ €μž₯ν•©λ‹ˆλ‹€.

κΉŒλ¨ΉμœΌμ…¨μ„κΉŒλ΄ λ‹€μ‹œ μ–ΈκΈ‰ν•©λ‹ˆλ‹€. manifest.ts 에 μΆ”κ°€ν•˜μ„Έμš”. workflows λ¦¬μŠ€νŠΈμ— μΆ”κ°€ν•˜λ©΄ λ©λ‹ˆλ‹€. 그리고 λͺ‡κ°€μ§€ scope 도 μΆ”κ°€λ‘œ botScopes 에 λ„£μ–΄μ£Όμ‹­μ‹œμš”.

slack triggers create –trigger-def ./webhook_configurator.ts λ₯Ό μ‹€ν–‰ν•˜μ—¬ webhook 트리거λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.

“Configurator” μ›Œν¬ν”Œλ‘œλ₯Ό μ‹€ν–‰ν•˜κΈ° μœ„ν•΄μ„œ, HTTP POST μš”μ²­μ— {“channel_ids”: [“C03E94MKS”]} λ₯Ό 같이 λ³΄λƒ…λ‹ˆλ‹€. 채널 ID ν™•μΈν•˜λŠ” 방법 λ‹€ μ•„μ‹œμ£ ? 아직 λͺ¨λ₯΄λ©΄ 첫번째 νŠœν† λ¦¬μ–Ό λ‹€μ‹œν•œλ²ˆ λ³΄μ„Έμš”.

slack run ν„°λ―Έλ„μ—μ„œ κ²°κ³Όλ₯Ό ν™•μΈν•©λ‹ˆλ‹€. μ—λŸ¬λ©”μ„Έμ§€κ°€ λ°œμƒν•˜μ§€ μ•ŠμœΌλ©΄ 잘 된 κ²ƒμž…λ‹ˆλ‹€.

webhook μš”μ²­μ„ 보낸 μ±„λ„λ‘œ κ°€μ„œ, 메세지에 reaction 이λͺ¨μ§€λ₯Ό μΆ”κ°€ν•΄λ³΄μ„Έμš”. λ§Œμ•½ μ•„λž˜ ν™”λ©΄μ²˜λŸΌ 메세지가 λ‚˜μ˜¨λ‹€λ©΄, “Main” μ›Œν¬ν”Œλ‘œλ₯Ό μœ„ν•œ event νŠΈλ¦¬κ±°κ°€ 잘 μ„€μ • 된 κ²ƒμž…λ‹ˆλ‹€.

Create The “Configurator” Workflow (Link Trigger + Modal)

쒀전에 λ§Œλ“€μ—ˆλ˜ “Configurator” μ›Œν¬ν”Œλ‘œλŠ” μ•„μ£Ό 잘 λ™μž‘ν–ˆμŠ΅λ‹ˆλ‹€. κ·Έλ ‡μ§€λ§Œ 그닀지 μœ μ €μΉœν™”μ μ΄μ§€ λͺ»ν•©λ‹ˆλ‹€. λ˜ν•œ μ–΄λ– ν•œ 인증 방법없이 HTTP POST μš”μ²­μ„ λ³΄λ‚΄μ„œ, λˆ„κ΅¬λ‚˜ 트리거λ₯Ό μ„€μ •ν•˜κ²Œ ν—ˆμš©ν•˜λŠ” 것은 λ³΄μ•ˆμ μœΌλ‘œλ„ 쒋지 λͺ»ν•©λ‹ˆλ‹€.

이 λΆ€λΆ„μ˜ κ°œμ„ μ„ μœ„ν•΄μ„œ, λ‹€λ₯Έ λ²„μ „μ˜ “Configurator” μ›Œν¬ν”Œλ‘œλ₯Ό λ§Œλ“€μ–΄ λ³΄κ² μŠ΅λ‹ˆλ‹€. link 트리거λ₯Ό ν†΅ν•΄μ„œ μ‹€ν–‰λ˜κ³ , λͺ¨λ‹¬ 데이터 μ„œλΈŒλ―Έμ…˜μ„ 톡해 channel ID λ₯Ό λ°›μ•„μ˜΅λ‹ˆλ‹€.

첫번째둜, configure_interactive.ts λΌλŠ” μ΄λ¦„μœΌλ‘œ μƒˆλ‘œμš΄ νŽ‘μ…˜μ„ λ§Œλ“­λ‹ˆλ‹€. 이 νŽ‘μ…˜μ€ λͺ¨λ‹¬κ³Όμ˜ μΈν„°λ ‰μ…˜μ„ 닀루고, μΆ”κ°€λ‘œ νƒ€κ²Ÿ νŠΈλ¦¬κ±°μ— λ³€κ²½λœ λ‚΄μš©μ„ μ €μž₯ν•˜λŠ” 역할을 ν•©λ‹ˆλ‹€.

configure_interative.ts λ₯Ό ν˜ΈμΆœν•˜λŠ” μ›Œν¬ν”Œλ‘œμ™€ link νŠΈλ¦¬κ±°κ°€ μ •μ˜λ˜μ–΄μžˆλŠ” modal.configurator.ts λ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.

manifest.ts 에 μΆ”κ°€ν•©λ‹ˆλ‹€.

자 이제 μ€€λΉ„κ°€ λ‹€ λλ‚¬μŠ΅λ‹ˆλ‹€. slack triggers create –trigger-def modal_configurator.ts λ₯Ό μ‹€ν–‰ν•˜μ—¬ link 트리거λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. 그리고 채널에 ν•΄λ‹Ή link λ₯Ό κ³΅μœ ν•˜μ„Έμš”. μ›Œν¬ν”Œλ‘œλ₯Ό μ‹œμž‘ν–ˆμ„ λ•Œ, modal UI λ₯Ό ν†΅ν•΄μ„œ μ–΄λ–€ μ±„λ„λ‘œ 보낼지λ₯Ό μ‰½κ²Œ μ„€μ •ν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€.

λŒ€λΆ€λΆ„μ˜ κ²½μš°μ— μ΄λ ‡κ²Œ λͺ¨λ‹¬ configurator λ₯Ό μ‚¬μš©ν•˜μ‹œλŠ” 것을 κΆŒν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ λͺ¨λ‹¬ μΈν„°λ ‰μ…˜μ— 관심이 μžˆμœΌμ‹œλ©΄, “Advanced Modals” νŠœν† λ¦¬μ–Όμ„ ν•œλ²ˆ 더 μ½μ–΄λ³΄μ„Έμš”

Wrapping Up

이번 νŠœν† λ¦¬μ–Όμ„ 톡해 λ‹€μŒκ³Ό 같은 λ‚΄μš©μ„ λ°°μš°μ…¨μŠ΅λ‹ˆλ‹€.

  • λ‹€λ₯Έ μ›Œν¬ν”Œλ‘œμ˜ 트리거λ₯Ό μ„€μ •ν•˜λŠ” “Configurator” μ›Œν¬ν”Œλ‘œλ₯Ό λ§Œλ“œλŠ” 방법

이 ν”„λ‘œμ νŠΈλŠ” λ‹€μŒ μ£Όμ†Œμ—μ„œλ„ ν™•μΈν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€. https://github.com/seratch/slack-next-generation-platform-tutorials/tree/main/11_Trigger_Configurator

이번 νŠœν† λ¦¬μ–Όλ„ μ¦κ±°μš°μ…¨μœΌλ©΄ μ’‹κ² λ„€μš”. λ§ˆμ°¬κ°€μ§€λ‘œ ν”Όλ“œλ°±μ΄λ‚˜ μ½”λ©˜νŠΈκ°€ μžˆμœΌμ‹œλ‹€λ©΄ νŠΈμœ„ν„° (@seratch) 둜 μ—°λ½μ£Όμ‹œκ±°λ‚˜, μ—¬κΈ° λ‚¨κ²¨μ£Όμ„Έμš”.

Happy hacking with Slack’s next-generation platform πŸš€