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 π